/* =================================================================================
   Pilotiz Theme — v1.14.0 (refonte inspirée Velzon Material)
   Design system : CSS variables → 2 thèmes (clair + sombre), accent ambre #F5A623.
   Override Bootstrap 5 + composants custom (sidebar, topbar, cards, etc.).
   ================================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Variables : Thème clair (par défaut) ------------------------------ */
:root,
:root[data-theme="light"] {
    /* Palette de marque */
    --pz-primary:        #F5A623;
    --pz-primary-rgb:    245, 166, 35;
    --pz-primary-soft:   #FDF1DD;
    --pz-primary-dark:   #D88B0F;
    --pz-anthracite:     #20262E;

    /* Surfaces */
    --pz-bg-body:        #F4F5F7;
    --pz-bg-card:        #FFFFFF;
    --pz-bg-sidebar:     #FFFFFF;
    --pz-bg-topbar:      #FFFFFF;
    --pz-bg-hover:       #F8F9FB;
    --pz-bg-active:      var(--pz-primary-soft);
    --pz-bg-input:       #FFFFFF;
    --pz-bg-table-head:  #F8F9FB;

    /* Texte */
    --pz-text:           #2C2E33;
    --pz-text-muted:     #75787E;
    --pz-text-subtle:    #98989E;
    --pz-text-on-primary:#1B1D20;

    /* Borders / dividers */
    --pz-border:         #E6E8EC;
    --pz-border-soft:    #F0F1F4;

    /* Shadows */
    --pz-shadow-sm:      0 1px 2px rgba(20, 24, 35, .04);
    --pz-shadow:         0 2px 6px rgba(20, 24, 35, .06), 0 1px 2px rgba(20, 24, 35, .04);
    --pz-shadow-lg:      0 12px 28px rgba(20, 24, 35, .10);

    /* Sémantique */
    --pz-success: #10B981; --pz-success-soft: #DEF7EC;
    --pz-danger:  #EF4444; --pz-danger-soft:  #FEE2E2;
    --pz-warning: #F59E0B; --pz-warning-soft: #FEF3C7;
    --pz-info:    #3B82F6; --pz-info-soft:    #DBEAFE;
}

/* ---------- Variables : Thème sombre ----------------------------------------- */
:root[data-theme="dark"] {
    --pz-bg-body:        #14171D;
    --pz-bg-card:        #1C2027;
    --pz-bg-sidebar:     #181B22;
    --pz-bg-topbar:      #1C2027;
    --pz-bg-hover:       #232830;
    --pz-bg-active:      rgba(var(--pz-primary-rgb), 0.18);
    --pz-bg-input:       #232830;
    --pz-bg-table-head:  #232830;

    --pz-text:           #E4E6EB;
    --pz-text-muted:     #9CA0A8;
    --pz-text-subtle:    #6B6F77;

    --pz-border:         #2A2F37;
    --pz-border-soft:    #232830;

    --pz-shadow-sm:      0 1px 2px rgba(0, 0, 0, .25);
    --pz-shadow:         0 2px 6px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .20);
    --pz-shadow-lg:      0 12px 28px rgba(0, 0, 0, .40);

    --pz-primary-soft:   rgba(var(--pz-primary-rgb), 0.15);
    --pz-success-soft:   rgba(16, 185, 129, .15);
    --pz-danger-soft:    rgba(239, 68, 68, .15);
    --pz-warning-soft:   rgba(245, 158, 11, .15);
    --pz-info-soft:      rgba(59, 130, 246, .15);
}

/* ---------- Base ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    background: var(--pz-bg-body);
    color: var(--pz-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pz-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--pz-primary-dark); text-decoration: none; }
a:hover { color: var(--pz-primary); text-decoration: underline; }
hr { border-color: var(--pz-border); opacity: 1; }

::selection { background: var(--pz-primary-soft); color: var(--pz-text); }

/* ---------- Layout shell ----------------------------------------------------- */
.pz-shell {
    display: grid;
    grid-template-columns: var(--pz-sidebar-w, 240px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar topbar"
        "sidebar content"
        "sidebar footer";
    min-height: 100vh;
    transition: grid-template-columns .25s ease;
}
.pz-shell[data-sidebar="collapsed"] { --pz-sidebar-w: 72px; }

/* placeholder — le bloc media query mobile a été déplacé tout en bas du fichier
   pour passer après la définition générale .pz-sidebar (sinon `position: sticky`
   du sélecteur général écrasait `position: fixed` du sélecteur mobile). */

/* ---------- Sidebar --------------------------------------------------------- */
/* v1.14.1 — sidebar TOUJOURS sombre (anthracite Pilotiz), indépendamment du thème
   global clair/sombre. Convention Velzon : header sombre + contenu adaptable. */
.pz-sidebar {
    grid-area: sidebar;
    background: #1B2028;
    border-right: 1px solid #2A2F37;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: transform .25s ease;
    z-index: 1030;
    /* Couleurs locales utilisées dans la sidebar (override des variables globales) */
    --side-text: #C8CCD3;
    --side-text-muted: #7F858D;
    --side-text-subtle: #5E6470;
    --side-hover-bg: #232830;
    --side-active-bg: rgba(245, 166, 35, 0.12);
    --side-border: #2A2F37;
}

.pz-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--side-border);
}
.pz-sidebar-brand img { height: 32px; flex-shrink: 0; }
.pz-sidebar-brand .pz-brand-text {
    font-size: 18px; font-weight: 700; letter-spacing: 0.4px;
    color: #F1F2F4; white-space: nowrap;
}
.pz-sidebar-brand:hover { text-decoration: none; }
.pz-sidebar-brand:hover .pz-brand-text { color: var(--pz-primary); }
[data-sidebar="collapsed"] .pz-sidebar-brand .pz-brand-text { display: none; }
[data-sidebar="collapsed"] .pz-sidebar-brand { justify-content: center; padding: 18px 8px; }

.pz-sidebar-nav {
    list-style: none; padding: 8px 0; margin: 0;
}
.pz-sidebar-section {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--side-text-subtle);
    padding: 16px 20px 6px;
    white-space: nowrap;
}
[data-sidebar="collapsed"] .pz-sidebar-section {
    text-align: center; padding: 14px 4px 4px;
    font-size: 0;
}
[data-sidebar="collapsed"] .pz-sidebar-section::before {
    content: "•"; font-size: 12px; color: var(--side-border);
}

.pz-sidebar-item { margin: 0; }
.pz-sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 20px;
    color: var(--side-text-muted);
    font-weight: 500; font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: all .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.pz-sidebar-link i { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.pz-sidebar-link:hover {
    background: var(--side-hover-bg); color: var(--side-text); text-decoration: none;
}
.pz-sidebar-link.active {
    background: var(--side-active-bg);
    color: var(--pz-primary);
    border-left-color: var(--pz-primary);
}
[data-sidebar="collapsed"] .pz-sidebar-link {
    justify-content: center; padding: 12px;
}
[data-sidebar="collapsed"] .pz-sidebar-link span { display: none; }

/* Sous-menu dropdown */
.pz-sidebar-submenu {
    list-style: none; padding: 2px 0 6px 36px; margin: 0;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}
.pz-sidebar-item.expanded .pz-sidebar-submenu { max-height: 500px; }
.pz-sidebar-submenu .pz-sidebar-link {
    padding: 7px 16px; font-size: 13px; border-left: none;
    color: var(--side-text-muted);
}
.pz-sidebar-submenu .pz-sidebar-link:hover { background: transparent; color: var(--side-text); }
.pz-sidebar-submenu .pz-sidebar-link.active {
    color: var(--pz-primary); font-weight: 600; background: transparent;
}
[data-sidebar="collapsed"] .pz-sidebar-submenu { display: none; }

.pz-sidebar-link .caret {
    margin-left: auto; transition: transform .2s ease;
    font-size: 12px;
}
.pz-sidebar-item.expanded > .pz-sidebar-link .caret { transform: rotate(180deg); }
[data-sidebar="collapsed"] .pz-sidebar-link .caret { display: none; }

/* ---------- Topbar ---------------------------------------------------------- */
.pz-topbar {
    grid-area: topbar;
    background: var(--pz-bg-topbar);
    border-bottom: 1px solid var(--pz-border);
    display: flex; align-items: center;
    padding: 0 20px;
    height: 60px;
    gap: 12px;
    position: sticky; top: 0;
    z-index: 1020;
}
.pz-topbar-toggle {
    background: transparent; border: 0; color: var(--pz-text-muted);
    width: 38px; height: 38px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: background .15s;
}
.pz-topbar-toggle:hover { background: var(--pz-bg-hover); color: var(--pz-text); }
.pz-topbar-title { font-size: 16px; font-weight: 600; margin: 0; }
.pz-topbar-spacer { flex: 1; }
.pz-topbar-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- Content / footer ------------------------------------------------ */
.pz-content { grid-area: content; padding: 22px 24px; min-width: 0; }
.pz-footer {
    grid-area: footer;
    border-top: 1px solid var(--pz-border);
    background: var(--pz-bg-card);
    padding: 12px 22px;
    color: var(--pz-text-muted);
    font-size: 12.5px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.pz-demo-banner {
    background: linear-gradient(90deg, var(--pz-primary), var(--pz-warning));
    color: #1B1D20;
    text-align: center;
    font-weight: 600; font-size: 12.5px;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

/* ---------- Cards ----------------------------------------------------------- */
.card {
    background: var(--pz-bg-card);
    border: 1px solid var(--pz-border);
    border-radius: 10px;
    box-shadow: var(--pz-shadow-sm);
    color: var(--pz-text);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pz-border-soft);
    padding: 14px 18px;
    font-weight: 600;
    color: var(--pz-text);
}
.card-body { padding: 18px; }
.card-footer { background: transparent; border-top: 1px solid var(--pz-border-soft); padding: 12px 18px; }
.card.border-primary  { border-color: var(--pz-primary) !important; box-shadow: 0 0 0 3px var(--pz-primary-soft); }
.card.border-success  { border-color: var(--pz-success) !important; }
.card.border-info     { border-color: var(--pz-info)    !important; }
.card.border-danger   { border-color: var(--pz-danger)  !important; }
.card.border-warning  { border-color: var(--pz-warning) !important; }
.card.border-secondary{ border-color: var(--pz-border)  !important; }

/* ---------- Boutons --------------------------------------------------------- */
.btn { font-weight: 500; border-radius: 8px; padding: .45rem .95rem; transition: all .15s ease; }
.btn-sm { padding: .25rem .65rem; border-radius: 6px; font-size: 12.5px; }

.btn-primary {
    background: var(--pz-primary); border-color: var(--pz-primary); color: var(--pz-text-on-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--pz-primary-dark); border-color: var(--pz-primary-dark); color: #fff;
    box-shadow: 0 4px 14px rgba(var(--pz-primary-rgb), .35);
}
.btn-outline-primary { border-color: var(--pz-primary); color: var(--pz-primary-dark); background: transparent; }
.btn-outline-primary:hover { background: var(--pz-primary); border-color: var(--pz-primary); color: var(--pz-text-on-primary); }

.btn-success { background: var(--pz-success); border-color: var(--pz-success); }
.btn-outline-success { border-color: var(--pz-success); color: var(--pz-success); }
.btn-outline-success:hover { background: var(--pz-success); color: #fff; }

.btn-danger { background: var(--pz-danger); border-color: var(--pz-danger); }
.btn-outline-danger { border-color: var(--pz-danger); color: var(--pz-danger); }
.btn-outline-danger:hover { background: var(--pz-danger); color: #fff; }

.btn-secondary, .btn-outline-secondary {
    background: transparent; border-color: var(--pz-border); color: var(--pz-text);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background: var(--pz-bg-hover); border-color: var(--pz-border); color: var(--pz-text);
}

.btn-link { color: var(--pz-primary-dark); }
.btn-link:hover { color: var(--pz-primary); }

/* ---------- Forms ----------------------------------------------------------- */
.form-label { font-size: 13px; font-weight: 500; color: var(--pz-text); margin-bottom: 4px; }
.form-text  { color: var(--pz-text-muted); font-size: 12px; }

.form-control, .form-select {
    background: var(--pz-bg-input);
    border: 1px solid var(--pz-border);
    color: var(--pz-text);
    border-radius: 8px;
    font-size: 14px;
    padding: .5rem .75rem;
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus {
    background: var(--pz-bg-input);
    border-color: var(--pz-primary);
    box-shadow: 0 0 0 3px rgba(var(--pz-primary-rgb), .18);
    color: var(--pz-text);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--pz-bg-hover); color: var(--pz-text-muted);
}
.form-control::placeholder { color: var(--pz-text-subtle); }

.form-control-plaintext { color: var(--pz-text); }

.form-check-input {
    background-color: var(--pz-bg-input);
    border-color: var(--pz-border);
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--pz-primary);
    border-color: var(--pz-primary);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--pz-primary-rgb), .18); border-color: var(--pz-primary); }
.form-check-label { color: var(--pz-text); cursor: pointer; }

.input-group-text {
    background: var(--pz-bg-hover); border-color: var(--pz-border); color: var(--pz-text-muted);
}

/* ---------- Tables ---------------------------------------------------------- */
/* v1.14.1 : forçage --bs-table-color partout pour rester lisible en mode sombre.
   Bootstrap 5 utilise ces variables CSS pour le rendu des cellules. */
.table {
    color: var(--pz-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--pz-text);
    --bs-table-border-color: var(--pz-border-soft);
    --bs-table-hover-bg: var(--pz-bg-hover);
    --bs-table-hover-color: var(--pz-text);
    --bs-table-striped-bg: var(--pz-bg-hover);
    --bs-table-striped-color: var(--pz-text);
    --bs-table-active-bg: var(--pz-bg-hover);
    --bs-table-active-color: var(--pz-text);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 11px 12px; border-bottom-color: var(--pz-border-soft); color: var(--pz-text); }
.table thead th {
    background: var(--pz-bg-table-head);
    color: var(--pz-text-muted) !important;
    font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid var(--pz-border);
}
.table tbody tr { transition: background-color .1s; }
.table tbody tr:hover { background-color: var(--pz-bg-hover); }
.table tbody td { color: var(--pz-text); }

/* Variantes de lignes — on garde le fond pâle de Bootstrap mais on force la couleur de texte */
.table-light, .table > :not(caption) > .table-light {
    --bs-table-bg: var(--pz-bg-table-head);
    --bs-table-color: var(--pz-text);
    background-color: var(--pz-bg-table-head) !important;
    color: var(--pz-text) !important;
}
.table-secondary, .table > :not(caption) > .table-secondary,
.table > tfoot > tr.table-secondary, .table > tfoot > tr.table-secondary > * {
    --bs-table-bg: var(--pz-bg-table-head);
    --bs-table-color: var(--pz-text);
    background-color: var(--pz-bg-table-head) !important;
    color: var(--pz-text) !important;
}
.table-warning, .table > :not(caption) > .table-warning {
    --bs-table-bg: var(--pz-warning-soft);
    --bs-table-color: var(--pz-text);
    background-color: var(--pz-warning-soft) !important;
    color: var(--pz-text) !important;
}
.table-danger, .table > :not(caption) > .table-danger {
    --bs-table-bg: var(--pz-danger-soft);
    --bs-table-color: var(--pz-text);
    background-color: var(--pz-danger-soft) !important;
    color: var(--pz-text) !important;
}
.table-success, .table > :not(caption) > .table-success {
    --bs-table-bg: var(--pz-success-soft);
    --bs-table-color: var(--pz-text);
    background-color: var(--pz-success-soft) !important;
    color: var(--pz-text) !important;
}
.table-dark {
    --bs-table-bg: var(--pz-anthracite);
    --bs-table-color: #E4E6EB;
    background-color: var(--pz-anthracite) !important;
    color: #E4E6EB !important;
}

/* ---------- Badges ---------------------------------------------------------- */
.badge { font-weight: 500; padding: .35em .65em; border-radius: 6px; }
.badge.text-bg-success { background: var(--pz-success-soft) !important; color: var(--pz-success) !important; }
.badge.text-bg-danger  { background: var(--pz-danger-soft)  !important; color: var(--pz-danger)  !important; }
.badge.text-bg-warning { background: var(--pz-warning-soft) !important; color: #B45309 !important; }
.badge.text-bg-info    { background: var(--pz-info-soft)    !important; color: var(--pz-info)    !important; }
.badge.text-bg-secondary, .badge.text-bg-light {
    background: var(--pz-bg-hover) !important; color: var(--pz-text-muted) !important; border: 1px solid var(--pz-border);
}
.badge.bg-primary  { background: var(--pz-primary) !important; color: var(--pz-text-on-primary) !important; }
.badge.bg-success  { background: var(--pz-success) !important; }
.badge.bg-danger   { background: var(--pz-danger)  !important; }
.badge.bg-warning  { background: var(--pz-warning) !important; color: #1B1D20 !important; }
.badge.bg-info     { background: var(--pz-info)    !important; }
.badge.bg-secondary{ background: var(--pz-bg-hover) !important; color: var(--pz-text-muted) !important; border: 1px solid var(--pz-border); }

/* ---------- Alerts ---------------------------------------------------------- */
.alert { border-radius: 10px; border: 1px solid transparent; padding: 12px 16px; }
.alert-success { background: var(--pz-success-soft); color: var(--pz-success); border-color: rgba(16,185,129,.25); }
.alert-danger  { background: var(--pz-danger-soft);  color: var(--pz-danger);  border-color: rgba(239,68,68,.25); }
.alert-warning { background: var(--pz-warning-soft); color: #B45309; border-color: rgba(245,158,11,.25); }
.alert-info    { background: var(--pz-info-soft);    color: var(--pz-info);    border-color: rgba(59,130,246,.25); }
[data-theme="dark"] .alert-warning { color: var(--pz-warning); }

/* ---------- Dropdowns ------------------------------------------------------- */
.dropdown-menu {
    background: var(--pz-bg-card);
    border: 1px solid var(--pz-border);
    border-radius: 10px;
    box-shadow: var(--pz-shadow-lg);
    padding: 6px;
    color: var(--pz-text);
}
.dropdown-item {
    color: var(--pz-text); border-radius: 6px; padding: 7px 10px; font-size: 13.5px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--pz-bg-hover); color: var(--pz-text);
}
.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--pz-text-subtle); background: transparent;
}
.dropdown-divider { border-color: var(--pz-border-soft); margin: 4px 0; }

/* ---------- Modales --------------------------------------------------------- */
.modal-content {
    background: var(--pz-bg-card); border: 1px solid var(--pz-border);
    border-radius: 12px; color: var(--pz-text);
}
.modal-header, .modal-footer { border-color: var(--pz-border-soft); }
.modal-title { color: var(--pz-text); }
.btn-close { filter: invert(var(--pz-close-invert, 0)); }
[data-theme="dark"] { --pz-close-invert: 1; }

/* ---------- Progress -------------------------------------------------------- */
.progress { background-color: var(--pz-bg-hover); border-radius: 6px; height: 8px; }
.progress-bar { background-color: var(--pz-primary); border-radius: 6px; }
.progress-bar.bg-primary { background-color: var(--pz-primary) !important; }
.progress-bar.bg-success { background-color: var(--pz-success) !important; }
.progress-bar.bg-warning { background-color: var(--pz-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--pz-danger)  !important; }

/* ---------- Tabs ------------------------------------------------------------ */
.nav-tabs {
    border-bottom: 1px solid var(--pz-border);
    gap: 4px;
}
.nav-tabs .nav-link {
    color: var(--pz-text-muted); font-weight: 500; font-size: 13.5px;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 9px 14px;
}
.nav-tabs .nav-link:hover { color: var(--pz-text); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--pz-primary-dark); background: transparent;
    border-color: var(--pz-primary);
}
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--pz-primary); }

/* ---------- Text utilities (override Bootstrap) ----------------------------- */
.text-primary  { color: var(--pz-primary-dark) !important; }
.text-success  { color: var(--pz-success) !important; }
.text-danger   { color: var(--pz-danger)  !important; }
.text-warning  { color: #B45309 !important; }
[data-theme="dark"] .text-warning { color: var(--pz-warning) !important; }
.text-info     { color: var(--pz-info)    !important; }
.text-muted    { color: var(--pz-text-muted) !important; }
.text-secondary{ color: var(--pz-text-muted) !important; }

.bg-primary  { background-color: var(--pz-primary) !important; }
.bg-success  { background-color: var(--pz-success) !important; }
.bg-danger   { background-color: var(--pz-danger)  !important; }
.bg-warning  { background-color: var(--pz-warning) !important; }
.bg-info     { background-color: var(--pz-info)    !important; }
.bg-light    { background-color: var(--pz-bg-hover) !important; color: var(--pz-text); }
.bg-dark     { background-color: var(--pz-anthracite) !important; color: #fff; }
.bg-secondary{ background-color: var(--pz-border) !important; }
.bg-success-subtle { background-color: var(--pz-success-soft) !important; }
.bg-warning-subtle { background-color: var(--pz-warning-soft) !important; }
.bg-danger-subtle  { background-color: var(--pz-danger-soft)  !important; }
.bg-info-subtle    { background-color: var(--pz-info-soft)    !important; }

/* ---------- KPI / Display cards (dashboard) --------------------------------- */
.display-5, .display-6 { font-weight: 600; color: var(--pz-text); }

/* ---------- DataTables (cosmétique) ----------------------------------------- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--pz-bg-input); border: 1px solid var(--pz-border);
    border-radius: 6px; padding: 4px 8px; color: var(--pz-text);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--pz-text-muted); font-size: 13px; padding: 6px 0; }
.page-link {
    background: var(--pz-bg-card); border-color: var(--pz-border); color: var(--pz-text-muted);
}
.page-link:hover { background: var(--pz-bg-hover); color: var(--pz-text); }
.page-item.active .page-link {
    background: var(--pz-primary); border-color: var(--pz-primary); color: var(--pz-text-on-primary);
}

/* ---------- Helpers --------------------------------------------------------- */
.pz-page-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 22px;
}
.pz-page-title { margin: 0; font-size: 22px; font-weight: 600; }
.pz-page-title-sub { color: var(--pz-text-muted); font-size: 13px; margin-top: 2px; }

/* Avatar circulaire (initiales user) */
.pz-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--pz-primary-soft); color: var(--pz-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
}

/* Scrollbar custom (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pz-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pz-text-subtle); }

/* Help offcanvas — réutilisé tel quel mais re-stylé */
.offcanvas {
    background: var(--pz-bg-card); color: var(--pz-text);
    border-left: 1px solid var(--pz-border);
}
.offcanvas-header { border-bottom: 1px solid var(--pz-border-soft); }

/* ---------- Print ----------------------------------------------------------- */
@media print {
    .pz-sidebar, .pz-topbar, .pz-footer { display: none !important; }
    .pz-shell { grid-template-columns: 0 1fr !important; }
    .pz-content { padding: 0; }
}

/* ---------- Mobile — responsive tables + cards (v1.15.4) ------------------- */
/* Fix débordement horizontal des tables/cards/KPI sur mobile (Anthony 21/06).
   Bloc placé AVANT la sidebar mobile pour rester groupé avec elle en fin de fichier. */
@media (max-width: 991px) {
    /* 1. Pas de scroll horizontal sur la page entière. */
    html, body { overflow-x: hidden; max-width: 100vw; }
    .pz-content { padding: 14px 12px; min-width: 0; overflow-x: hidden; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* 2. Toute card-body qui contient une table devient scrollable horizontalement
       (équivalent automatique de .table-responsive sans avoir à wrapper chaque vue). */
    .card-body { max-width: 100%; }
    .card-body:has(> .table),
    .card-body:has(> table) {
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card-body > .table,
    .card-body > table {
        min-width: 600px;  /* force scroll si plus large que l'écran */
        margin-bottom: 0;
    }
    /* Toutes les tables peuvent défiler horizontalement si elles sont seules. */
    .table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 3. Cellules : pas de wrap forcé qui casserait la lecture. */
    .table th, .table td { white-space: nowrap; }
    /* Sauf descriptions/règles longues : on autorise le wrap. */
    .table td .small, .table td small { white-space: normal; }

    /* 4. KPI cards : chiffres énormes qui débordaient. */
    .display-5, .display-6 {
        font-size: 1.6rem !important;
        word-break: break-word;
    }

    /* 5. Headers de page (pz-page-header) — passer en colonne sur mobile. */
    .pz-page-header { flex-direction: column; align-items: flex-start; }
    .pz-page-header > * { width: 100%; }
    .pz-page-title { font-size: 18px; }

    /* 6. Topbar — moins d'espace, titre tronqué. */
    .pz-topbar { padding: 0 10px; }
    .pz-topbar-title {
        font-size: 15px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 60vw;
    }

    /* 7. Forms inline (filtres) — empilage. */
    .pz-page-header form { flex-wrap: wrap; gap: 8px !important; width: 100%; }
    .pz-page-header form > * { flex: 1 1 calc(50% - 4px); }
    .pz-page-header form button { flex: 1 1 100%; }

    /* 8. Modales : pleine largeur moins petite marge. */
    .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
}

/* ---------- Mobile — overlay sidebar (v1.15.3) ----------------------------- */
/* DOIT être en fin de fichier pour passer après .pz-sidebar général qui imposait
   `position: sticky`. */
@media (max-width: 991px) {
    .pz-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "content"
            "footer";
    }
    .pz-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 260px;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        box-shadow: 0 0 24px rgba(0,0,0,.25);
    }
    .pz-shell[data-sidebar="open"] .pz-sidebar { transform: translateX(0); }
    .pz-sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .pz-shell[data-sidebar="open"] .pz-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (min-width: 992px) {
    .pz-sidebar-backdrop { display: none; }
}