/* ==========================================================================
   modern-theme.css — surcouche « Clair & sobre » (direction A, 2026-07-26)
   Chargée APRÈS style.css / default.css : même markup Ample, nouveau look.
   La couleur principale vient du réglage admin `theme_primary_color`,
   injectée par le layout dans :root (--kz-primary). Les déclinaisons sont
   dérivées via color-mix (navigateurs 2023+ ; sinon la couleur pleine sert
   de repli visuel acceptable).
   ========================================================================== */

:root {
    /* Couleurs paramétrables (réglages /settings, injectés par le layout —
       les valeurs ci-dessous ne sont que des replis) */
    --kz-primary: #0946CE;   /* bleu du logo Go-Tech */
    --kz-secondary: #0D9488;
    --kz-success: #16A34A;
    --kz-danger: #DC2626;
    --kz-warning: #F59E0B;
    /* Déclinaisons dérivées */
    --kz-primary-soft: color-mix(in srgb, var(--kz-primary) 10%, #ffffff);
    --kz-primary-softer: color-mix(in srgb, var(--kz-primary) 5%, #ffffff);
    --kz-primary-hover: color-mix(in srgb, var(--kz-primary) 85%, #000000);
    --kz-primary-border: color-mix(in srgb, var(--kz-primary) 35%, #ffffff);
    --kz-success-soft: color-mix(in srgb, var(--kz-success) 15%, #ffffff);
    --kz-danger-soft: color-mix(in srgb, var(--kz-danger) 12%, #ffffff);
    /* Neutres structurels (non paramétrables) */
    --kz-bg: #F8FAFC;
    --kz-surface: #FFFFFF;
    --kz-border: #E2E8F0;
    --kz-border-soft: #F1F5F9;
    --kz-text: #0F172A;
    --kz-muted: #64748B;
    --kz-radius: 10px;
    --kz-radius-sm: 8px;
    --kz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */
body {
    background: var(--kz-bg);
    font-family: var(--kz-font);
    color: var(--kz-text);
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kz-font);
    color: var(--kz-text);
    font-weight: 600;
}
a { color: var(--kz-primary); }
a:hover, a:focus { color: var(--kz-primary-hover); }
#page-wrapper { background: var(--kz-bg); }

/* --- Topbar -------------------------------------------------------------- */
.navbar-default {
    background: var(--kz-surface);
    border-bottom: 1px solid var(--kz-border);
    box-shadow: none;
}
.navbar-default .navbar-header { background: var(--kz-surface); }
/* Hauteur contenue : les logos générés (90/44 px) gonflaient l'en-tête */
.top-left-part {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 12px;
    overflow: hidden;
}
.top-left-part .logo { display: flex; align-items: center; gap: 8px; }
.top-left-part .logo img { max-height: 38px; width: auto; }
.navbar-top-links > li > a { color: var(--kz-muted); }
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus { background: var(--kz-primary-softer); color: var(--kz-primary); }

/* --- Sidebar ------------------------------------------------------------- */
.navbar-default.sidebar,
.sidebar {
    background: var(--kz-surface);
    border-right: 1px solid var(--kz-border);
    box-shadow: none;
}
.sidebar .sidebar-head { background: var(--kz-surface); }
.sidebar .user-profile { border-bottom: 1px solid var(--kz-border-soft); }
.sidebar #side-menu li a {
    color: var(--kz-muted);
    border-left: 3px solid transparent;
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar #side-menu li a:hover {
    background: var(--kz-primary-softer);
    color: var(--kz-text);
}
.sidebar #side-menu li a.active,
.sidebar #side-menu li.active > a {
    background: var(--kz-primary-soft);
    color: var(--kz-primary);
    border-left-color: var(--kz-primary);
    font-weight: 600;
}
.sidebar #side-menu .nav-second-level li a { color: var(--kz-muted); }
.sidebar #side-menu .nav-second-level li a:hover { color: var(--kz-primary); background: transparent; }

/* --- Bandeau de titre & fil d'Ariane ------------------------------------- */
.bg-title {
    background: transparent;
    border-bottom: 0;
    padding-top: 6px;
}
.bg-title .page-title { color: var(--kz-text); font-weight: 700; }
.breadcrumb {
    background: transparent;
    padding-left: 0;
}
.breadcrumb > li > a { color: var(--kz-muted); }
.breadcrumb > .active { color: var(--kz-text); }

/* --- Cartes (white-box) --------------------------------------------------- */
.white-box {
    background: var(--kz-surface);
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 20px;
}
.white-box .box-title { font-weight: 600; color: var(--kz-text); }

/* --- Boutons -------------------------------------------------------------- */
.btn {
    border-radius: var(--kz-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-info, .btn-primary {
    background: var(--kz-primary);
    border-color: var(--kz-primary);
    color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--kz-primary-hover);
    border-color: var(--kz-primary-hover);
    color: #fff;
}
.btn-success { background: var(--kz-success); border-color: var(--kz-success); }
.btn-danger { background: var(--kz-danger); border-color: var(--kz-danger); }
.btn-warning { background: var(--kz-warning); border-color: var(--kz-warning); }
.btn-default {
    background: var(--kz-surface);
    border: 1px solid var(--kz-border);
    color: var(--kz-text);
}
.btn-default:hover, .btn-default:focus {
    background: var(--kz-bg);
    border-color: var(--kz-border);
    color: var(--kz-text);
}
.fcbtn, .btn-outline { border-radius: var(--kz-radius-sm); }

/* --- Tables ---------------------------------------------------------------- */
.table > thead > tr > th {
    color: var(--kz-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    border-bottom: 1px solid var(--kz-border);
    background: var(--kz-bg);
}
.table > tbody > tr > td {
    border-top: 1px solid var(--kz-border-soft);
    vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--kz-primary-softer); }
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--kz-border); }
.table > tbody > tr.active > td, .table > tbody > tr > td.active { background: var(--kz-bg); }

/* --- Formulaires ----------------------------------------------------------- */
.form-control {
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-sm);
    color: var(--kz-text);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-soft);
}
label { color: var(--kz-text); font-weight: 500; }
.help-block { color: var(--kz-muted); }

/* Zones de filtres nues (vieux motif : form.form-horizontal posé directement
   dans un .row, white-box commenté) → cardées automatiquement. */
.row > form.form-horizontal {
    display: flow-root;
    background: var(--kz-surface);
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 14px 10px 6px;
    margin: 0 15px 16px;
}

/* Formulaires « material » d'Ample (create/edit) → inputs encadrés modernes,
   fini le soulignement plat. */
.form-material .form-control {
    background-image: none !important;
    background-color: var(--kz-surface);
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-sm);
    padding: 8px 12px;
    height: auto;
}
.form-material .form-control:focus {
    background-image: none !important;
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-soft);
}

/* bootstrap-select : le bouton du picker ressemble à un vrai champ */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn {
    background: var(--kz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-sm) !important;
    color: var(--kz-text) !important;
    padding: 7px 12px;
    box-shadow: none !important;
}
.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .btn:focus {
    border-color: var(--kz-primary) !important;
    box-shadow: 0 0 0 3px var(--kz-primary-soft) !important;
    outline: none !important;
}
.bootstrap-select .dropdown-menu { border-radius: var(--kz-radius-sm); }

.input-group-addon {
    background: var(--kz-bg);
    border: 1px solid var(--kz-border);
    color: var(--kz-muted);
}
textarea.form-control { min-height: 90px; }

/* --- Alertes, labels, badges, pagination ----------------------------------- */
.alert { border-radius: var(--kz-radius-sm); }
.label { border-radius: 6px; font-weight: 600; }
.label-info { background: var(--kz-primary); }
.badge { background: var(--kz-primary); border-radius: 6px; }
.pagination > li > a, .pagination > li > span {
    color: var(--kz-primary);
    border-color: var(--kz-border);
}
.pagination > .active > a, .pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--kz-primary);
    border-color: var(--kz-primary);
}
.dropdown-menu {
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-sm);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
}
.dropdown-menu > li > a:hover { background: var(--kz-primary-softer); color: var(--kz-text); }

/* --- Menu contextuel des présences (list-group) ---------------------------- */
.list-group-item { border-color: var(--kz-border-soft); color: var(--kz-text); }
.list-group-item:hover { background: var(--kz-primary-softer); }
.list-group-item.active, .list-group-item.active:hover {
    background: var(--kz-primary-soft);
    border-color: var(--kz-primary-border);
    color: var(--kz-primary);
}
.list-group-item .badge { background: var(--kz-bg); color: var(--kz-text); }
.list-group-item.active .badge { background: var(--kz-primary); color: #fff; }

/* --- DataTables (chrome complet : recherche, tri, pagination, exports) ------ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-sm);
    padding: 6px 10px;
    margin-left: 6px;
    outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-soft);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; color: var(--kz-muted); }
.dataTables_wrapper .dataTables_info {
    color: var(--kz-muted);
    font-size: 12px;
    padding-top: 14px;
}
.dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-sm);
    background: var(--kz-surface) !important;
    color: var(--kz-text) !important;
    padding: 5px 11px;
    margin-left: 4px;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--kz-primary-softer) !important;
    border-color: var(--kz-primary-border) !important;
    color: var(--kz-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--kz-primary) !important;
    border-color: var(--kz-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--kz-surface) !important;
    border-color: var(--kz-border-soft) !important;
    color: var(--kz-muted) !important;
}
table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid var(--kz-border);
}
table.dataTable.no-footer { border-bottom: 1px solid var(--kz-border); }
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--kz-primary); }
table.dataTable tbody tr { background: transparent; }
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--kz-bg); }
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover { background: var(--kz-primary-softer); }
/* Boutons d'export DataTables (Copy/CSV/Excel/PDF/Print) : fini les dégradés */
.dt-buttons { margin-bottom: 12px; }
a.dt-button, button.dt-button, div.dt-button {
    background: var(--kz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-sm) !important;
    color: var(--kz-text) !important;
    padding: 6px 12px;
    margin-right: 6px;
    box-shadow: none !important;
    text-shadow: none !important;
}
a.dt-button:hover:not(.disabled), button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled) {
    background: var(--kz-primary-softer) !important;
    background-image: none !important;
    border-color: var(--kz-primary-border) !important;
    color: var(--kz-primary) !important;
}

/* --- Footer ----------------------------------------------------------------- */
.footer {
    background: transparent;
    border-top: 1px solid var(--kz-border);
    color: var(--kz-muted);
}