/* --- HKI FRAMEWORK — Utility Classes & Shared Styles --- */

/* ============================================================
   BOUTONS — Override Bootstrap primary → HKI Violet
   ============================================================ */
.btn-primary {
    --bs-btn-bg:                  #0B2559;
    --bs-btn-border-color:        #0B2559;
    --bs-btn-hover-bg:            #06183d;
    --bs-btn-hover-border-color:  #06183d;
    --bs-btn-active-bg:           #06183d;
    --bs-btn-active-border-color: #06183d;
    --bs-btn-disabled-bg:         #0B2559;
    --bs-btn-disabled-border-color: #0B2559;
    --bs-btn-focus-shadow-rgb:    122, 65, 131;
    background-color: #0B2559 !important;
    border-color:     #0B2559 !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #06183d !important;
    border-color:     #06183d !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #0B2559 !important;
    border-color:     #0B2559 !important;
}
.btn-outline-primary {
    --bs-btn-color:               #0B2559;
    --bs-btn-border-color:        #0B2559;
    --bs-btn-hover-bg:            #0B2559;
    --bs-btn-hover-border-color:  #0B2559;
    --bs-btn-active-bg:           #06183d;
    --bs-btn-active-border-color: #06183d;
    --bs-btn-focus-shadow-rgb:    122, 65, 131;
    color:        #0B2559 !important;
    border-color: #0B2559 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
    background-color: #0B2559 !important;
    border-color:     #0B2559 !important;
    color:            #fff    !important;
}
/* ============================================================
   ACTION BUTTONS — Circular icon style (table rows)
   ============================================================ */
.btn-ks-view, .btn-ks-edit, .btn-ks-delete, .btn-ks-validate,
.btn-ks-activate, .btn-ks-deactivate, .btn-ks-reopen,
.btn-ks-check, .btn-ks-stops, .btn-ks-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1;
    transition: all 0.18s ease;
    cursor: pointer;
    flex-shrink: 0;
    background-color: #fff !important;
}

/* ── Voir (œil) — teal/cyan ── */
.btn-ks-view {
    border: 1.5px solid #20c997 !important;
    color: #20c997 !important;
}
.btn-ks-view:hover:not(:disabled) {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(32,201,151,0.30) !important;
    transform: translateY(-1px);
}

/* ── Éditer (crayon) — jaune/ambre ── */
.btn-ks-edit {
    border: 1.5px solid #ffc107 !important;
    color: #e6a800 !important;
}
.btn-ks-edit:hover:not(:disabled) {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(255,193,7,0.35) !important;
    transform: translateY(-1px);
}

/* ── Supprimer (poubelle) — rouge ── */
.btn-ks-delete {
    border: 1.5px solid #dc3545 !important;
    color: #dc3545 !important;
}
.btn-ks-delete:hover:not(:disabled) {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(220,53,69,0.30) !important;
    transform: translateY(-1px);
}

/* ── Valider / Activer — vert ── */
.btn-ks-validate, .btn-ks-activate {
    border: 1.5px solid #198754 !important;
    color: #198754 !important;
}
.btn-ks-validate:hover:not(:disabled), .btn-ks-activate:hover:not(:disabled) {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(25,135,84,0.28) !important;
    transform: translateY(-1px);
}

/* ── Désactiver — orange ── */
.btn-ks-deactivate {
    border: 1.5px solid #fd7e14 !important;
    color: #fd7e14 !important;
}
.btn-ks-deactivate:hover:not(:disabled) {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(253,126,20,0.28) !important;
    transform: translateY(-1px);
}

/* ── Réouvrir / Arrêts — gris ── */
.btn-ks-reopen, .btn-ks-stops {
    border: 1.5px solid #6c757d !important;
    color: #6c757d !important;
}
.btn-ks-reopen:hover:not(:disabled), .btn-ks-stops:hover:not(:disabled) {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(108,117,125,0.28) !important;
    transform: translateY(-1px);
}

/* ── Check — violet ── */
.btn-ks-check {
    border: 1.5px solid #0B2559 !important;
    color: #0B2559 !important;
}
.btn-ks-check:hover:not(:disabled) {
    background-color: #0B2559 !important;
    border-color: #0B2559 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(11,37,89,0.28) !important;
    transform: translateY(-1px);
}

/* ── Disabled state ── */
.btn-ks-view:disabled, .btn-ks-edit:disabled, .btn-ks-delete:disabled,
.btn-ks-validate:disabled, .btn-ks-activate:disabled, .btn-ks-deactivate:disabled,
.btn-ks-reopen:disabled, .btn-ks-check:disabled, .btn-ks-stops:disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Table row styles — hover + alternance subtile */
.ks-table-row { cursor: pointer; transition: background 0.12s; }
.ks-table-row:hover { background: rgba(11,37,89,0.05) !important; }
/* Alternance lignes paires/impaires sur tous les tableaux hover */
.table.table-hover > tbody > tr:nth-of-type(even) > td,
.table.table-hover > tbody > tr:nth-of-type(even) > th {
    background-color: rgba(122, 65, 131, 0.04);
}
.table.table-hover > tbody > tr:hover > td,
.table.table-hover > tbody > tr:hover > th {
    background-color: rgba(122, 65, 131, 0.08) !important;
}

/*
   Note : Les variables de thème (light/mid/dark) sont définies
   dans layout.php via [data-theme="..."] sur <html>.
   Ce fichier contient uniquement les classes utilitaires.
*/

/* ============================================================
   UTILITY CLASSES — remplace les style="..." inline
   ============================================================ */

/* Couleurs texte */
.text-keller-purple  { color: var(--purple, #0B2559) !important; }
.text-keller-gold    { color: var(--lb-gold) !important; }
.text-theme-main     { color: var(--ks-text-main) !important; }
.text-theme-muted    { color: var(--ks-text-muted) !important; }

/* Badge or doré (thème-aware) */
.badge-gold {
    background: var(--lb-gold-dim);
    color: var(--lb-gold);
    border: 1px solid var(--lb-gold-border);
}

/* Bordures */
.border-theme-soft   { border-color: var(--ks-border-soft) !important; }

/* Tailles de texte */
.fs-2xs { font-size: .65rem !important; }
.fs-xs  { font-size: .72rem !important; }
.fs-sm  { font-size: .8rem !important; }
.fs-md  { font-size: .88rem !important; }

/* Conteneurs de formulaire */
.max-w-form    { max-width: 640px; width: 100%; }
.max-w-form-sm { max-width: 460px; width: 100%; }

/* Panel avec bordure gauche accent */
.border-left-purple { border-left: 4px solid var(--purple, #0B2559); }

/* Card header avec fond purple */
.bg-keller-header {
    background: var(--purple, #0B2559);
    color: #fff;
    border-radius: 12px 12px 0 0;
}

/* Password strength bars */
.pw-strength-bar {
    height: 4px;
    background: #dee2e6;
    border-radius: 2px;
    flex: 1;
}

/* Sidebar sticky (extrait de layout inline) */
.ks-sidebar-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
}

/* ============================================================
   HEROICONS — Inline SVG icon system
   ============================================================ */

.ks-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
    width: 1.15em;
    height: 1.15em;
}

/* Inside sidebar nav-icon boxes */
.nav-icon .ks-icon {
    width: 100%;
    height: 100%;
    padding: 5px;
}
.ks-nav-icon--md .ks-icon { padding: 6px; }
.ks-nav-icon--sm .ks-icon { padding: 5px; }

/* Inside buttons */
.btn .ks-icon {
    width: 16px;
    height: 16px;
    vertical-align: -0.125em;
}

/* Inside headings */
h1 .ks-icon, h2 .ks-icon, h3 .ks-icon, h4 .ks-icon, h5 .ks-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}

/* Badge context */
.badge .ks-icon {
    width: 14px;
    height: 14px;
    vertical-align: -0.1em;
}

/* ============================================================
   PAGE TITLE — Violet uniforme
   ============================================================ */

h1.page-title, h2.page-title, h3.page-title, .page-title {
    color: var(--hki-purple, #0B2559) !important;
}

/* ============================================================
   TABLE HEADERS — Violet uniforme (Purple Horizon #0B2559)
   Règle universelle : tous les .table-hover + classes modules
   Exclut : table-borderless (tableaux info/détail)
   ============================================================ */

/* Règle universelle — couvre TOUS les tableaux de données */
.table.table-hover thead th,
.table.table-hover thead th.sorting,
.table.table-hover thead th.sorting_asc,
.table.table-hover thead th.sorting_desc {
    background: var(--purple, #0B2559) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Classes modules spécifiques (DataTables + tableaux sans table-hover) */
table.keller-table thead th, table.ent-table thead th,
table.mnt-table thead th,    table.tcv-table thead th,
table.trip-table thead th,   table.loc-table thead th,
table.report-table thead th, table.dep-table thead th,
table.veh-table thead th,    table.gen-table thead th,
table.val-table thead th {
    background: var(--purple, #0B2559) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Exclure les tableaux borderless (info/détail) */
.table.table-borderless thead th {
    background: transparent !important;
    color: inherit !important;
    font-weight: 600 !important;
    font-size: .82rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Coins arrondis — premier et dernier th */
.table.table-hover thead tr:first-child th:first-child,
table.keller-table thead tr:first-child th:first-child,
table.mnt-table    thead tr:first-child th:first-child,
table.tcv-table    thead tr:first-child th:first-child,
table.trip-table   thead tr:first-child th:first-child,
table.loc-table    thead tr:first-child th:first-child,
table.dep-table    thead tr:first-child th:first-child,
table.veh-table    thead tr:first-child th:first-child,
table.gen-table    thead tr:first-child th:first-child,
table.val-table    thead tr:first-child th:first-child { border-top-left-radius: .75rem; }

.table.table-hover thead tr:first-child th:last-child,
table.keller-table thead tr:first-child th:last-child,
table.mnt-table    thead tr:first-child th:last-child,
table.tcv-table    thead tr:first-child th:last-child,
table.trip-table   thead tr:first-child th:last-child,
table.loc-table    thead tr:first-child th:last-child,
table.dep-table    thead tr:first-child th:last-child,
table.veh-table    thead tr:first-child th:last-child,
table.gen-table    thead tr:first-child th:last-child,
table.val-table    thead tr:first-child th:last-child  { border-top-right-radius: .75rem; }

/* ============================================================
   FOOTER — Violet
   ============================================================ */

.app-footer {
    color: var(--purple, #0B2559) !important;
}
.app-footer .text-muted {
    color: var(--purple, #0B2559) !important;
}

/* Clickable table rows (data-ks-crud) */
tr[data-ks-crud] {
    cursor: pointer;
}
tr[data-ks-crud]:hover {
    background-color: rgba(122, 65, 131, .06) !important;
}

/* Missing icon placeholder (debug) */
.ks-icon-missing {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: rgba(255,0,0,0.08);
    border: 1px dashed rgba(255,0,0,0.4);
    border-radius: 3px;
}