/* =========================================================
   KERENES DESIGN SYSTEM — V1
   ========================================================= */


/* =========================================================
   0. VARIABLES
   ========================================================= */

   :root {
    --k-primary: #2563EB;
    --k-primary-dark: #1D4ED8;

    --k-navy: #0A2540;

    --k-bg: #F7FAFF;
    --k-surface: #FFFFFF;

    --k-text: #1F2937;
    --k-muted: #6B7280;
    --k-border: #E5E7EB;

    --k-success: #198754;
    --k-danger: #DC3545;
    --k-warning: #FFC107;

    --k-radius: .65rem;

    --k-control-height: 40px;
}


/* =========================================================
   1. PAGE
   ========================================================= */

html,
body {
    min-height: 100%;
}

body {
    background-color: var(--k-bg);
    color: var(--k-text);
}


/* =========================================================
   2. STRUCTURE
   ========================================================= */

.k-main {
    flex: 1;
    min-height: calc(100vh - 80px);
}


/* =========================================================
   3. COULEURS KERENES
   ========================================================= */

.bg-navy {
    background-color: var(--k-navy) !important;
}

.text-navy {
    color: var(--k-navy) !important;
}

.k-brand {
    color: var(--k-primary);
}


/* =========================================================
   4. TYPOGRAPHIE
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--k-navy);
    font-weight: 600;
}

.text-muted {
    color: var(--k-muted) !important;
}


/* =========================================================
   5. LIENS
   ========================================================= */

a {
    text-underline-offset: 2px;
}


/* =========================================================
   6. BOUTONS
   ========================================================= */

.btn {
    border-radius: var(--k-radius);
    font-weight: 500;
}


/* Bouton principal */

.btn-primary {
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--k-primary-dark);
    border-color: var(--k-primary-dark);
}


/* Bouton outline principal */

.btn-outline-primary {
    color: var(--k-primary);
    border-color: var(--k-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}


/* Bouton secondaire léger */

.btn-light {
    background-color: #fff;
    border-color: var(--k-border);
}

.btn-light:hover,
.btn-light:focus {
    background-color: #F8FAFC;
    border-color: #D1D5DB;
}

/* =========================================================
   7. FORMULAIRES
   ========================================================= */

.form-label {
    margin-bottom: .4rem;
    color: var(--k-text);
    font-size: .9rem;
    font-weight: 500;
}

.form-control,
.form-select {
    border-color: var(--k-border);
    border-radius: var(--k-radius);
    color: var(--k-text);
    background-color: var(--k-surface);
}

.form-control::placeholder {
    color: #9CA3AF;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--k-primary);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: #F3F4F6;
    opacity: 1;
}

.form-text {
    margin-top: .35rem;
    color: var(--k-muted);
    font-size: .8rem;
}



/* =========================================================
   8. INPUT GROUPS
   ========================================================= */

/*
 * Ne pas imposer de hauteur.
 * Bootstrap assure nativement l'alignement des éléments.
 */

.input-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.input-group-text {
    color: var(--k-muted);
    background-color: #F8FAFC;
    border-color: var(--k-border);
}


/* =========================================================
   9. TEXTAREA
   ========================================================= */

textarea.form-control {
    min-height: 90px;
    resize: vertical;
}


/* =========================================================
   10. CHECKBOX / RADIO
   ========================================================= */

.form-check-input {
    border-color: #CBD5E1;
}

.form-check-input:checked {
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}

.form-check-input:focus {
    border-color: var(--k-primary);

    box-shadow:
        0 0 0 .2rem rgba(37, 99, 235, .12);
}


/* =========================================================
   11. ERREURS DE FORMULAIRE
   ========================================================= */

.invalid-feedback,
.text-danger {
    color: var(--k-danger) !important;
}


/* =========================================================
   12. CARDS
   ========================================================= */

.card {
    background-color: var(--k-surface);

    border: 1px solid var(--k-border);

    border-radius: var(--k-radius);
}


/* Ombre légère */

.card.shadow-sm {
    box-shadow:
        0 .125rem .4rem rgba(15, 23, 42, .06) !important;
}


/* =========================================================
   13. TABLEAUX
   ========================================================= */

.table {
    --bs-table-bg: transparent;

    margin-bottom: 0;
}


.table > :not(caption) > * > * {
    padding: .8rem .75rem;

    border-bottom-color: var(--k-border);

    vertical-align: middle;
}


.table thead th {
    color: var(--k-muted);

    font-size: .8rem;
    font-weight: 600;

    white-space: nowrap;
}


.table tbody tr:last-child > * {
    border-bottom-width: 0;
}


/* =========================================================
   14. BADGES
   ========================================================= */

.badge {
    font-weight: 500;
}


/* =========================================================
   15. ALERTES
   ========================================================= */

.alert {
    border-radius: var(--k-radius);
}


/* =========================================================
   16. LIST GROUP
   ========================================================= */

.list-group-item {
    border-color: var(--k-border);
}


/* =========================================================
   17. MODALES
   ========================================================= */

.modal-content {
    border: 0;

    border-radius: .8rem;

    box-shadow:
        0 1rem 3rem rgba(15, 23, 42, .12);
}


.modal-header,
.modal-footer {
    border-color: var(--k-border);
}


/* =========================================================
   18. DROPDOWNS
   ========================================================= */

.dropdown-menu {
    border-color: var(--k-border);

    border-radius: var(--k-radius);

    box-shadow:
        0 .5rem 1.5rem rgba(15, 23, 42, .08);
}


.dropdown-item:active {
    background-color: var(--k-primary);
}


/* =========================================================
   19. PAGINATION
   ========================================================= */

.page-link {
    color: var(--k-primary);

    border-color: var(--k-border);
}


.page-link:hover {
    color: var(--k-primary-dark);

    background-color: #F8FAFC;

    border-color: var(--k-border);
}


.active > .page-link,
.page-link.active {
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}


/* =========================================================
   20. UTILITAIRES KERENES
   ========================================================= */


/* Texte discret */

.k-muted {
    color: var(--k-muted);
}


/* Surface blanche */

.k-surface {
    background-color: var(--k-surface);
}


/* Bordure standard */

.k-border {
    border-color: var(--k-border) !important;
}


/* =========================================================
   21. RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    /*
     * Les boutons d'action empilés restent confortables
     * au toucher sur mobile.
     */

    .btn {
        min-height: 40px;
    }

}