/* ============================================================================
   Direction visuelle — instrument d'exploitation multi-sites.
   Ton : utilitaire, sobre, dense, haute lisibilite. Un seul accent (petrole),
   reserve aux actions primaires / liens / etat actif / focus ; la couleur
   saturee ne sert JAMAIS de decor, uniquement le statut d'une donnee.
   Organise en jetons -> coquille (sidebar/topbar) -> composants -> KPI -> anim.
   ============================================================================ */

:root {
    /* Rayons resserres */
    --app-radius:    .45rem;
    --app-radius-lg: .55rem;
    --app-radius-sm: .3rem;

    /* Coquille */
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 76px;
    --topbar-height: 60px;

    /* Accent unique : petrole / sarcelle profond */
    --accent-50:  #ecf5f4;
    --accent-100: #d3e8e5;
    --accent-400: #2f9c92;
    --accent-500: #0f766e;
    --accent-600: #0c5f58;
    --accent-700: #0a4c46;
    --accent-on-dark: #14b8a6;

    /* Neutres ardoise — portent ~90 % de l'interface */
    --ink-950: #0b1220;
    --ink-900: #111827;
    --ink-800: #1f2937;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;

    --surface:        #f6f7f9;
    --surface-card:   #ffffff;
    --surface-sunken: #f1f3f6;
    --surface-border: #e3e6eb;

    /* Statut — seule couleur saturee autorisee dans les donnees */
    --ok-fg: #15803d;      --ok-bg: #dcfce7;
    --warn-fg: #b45309;    --warn-bg: #fef3c7;
    --danger-fg: #b91c1c;  --danger-bg: #fee2e2;
    --neutral-fg: #475569; --neutral-bg: #eef1f5;

    /* Ombres discretes */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px -4px rgba(15, 23, 42, .12);

    /* Teinte du site actif (rail en tete de topbar). Surchargeable :
       <body style="--site-accent:#b45309"> depuis partials/admin_top.php. */
    --site-accent: var(--accent-500);

    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Remappe l'accent Bootstrap pour .text-primary / .bg-primary / .border-primary */
    --bs-primary: #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    --bs-link-color: #0c5f58;
    --bs-link-color-rgb: 12, 95, 88;
    --bs-link-hover-color: #0a4c46;
    --bs-link-hover-color-rgb: 10, 76, 70;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Inter", sans-serif;
    font-size: .9375rem;
    background: var(--surface);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-600); transition: color .12s var(--ease); }
a:hover { color: var(--accent-700); }

:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

/* ============================================================================
   Coquille applicative : sidebar fixe + zone de contenu
   ============================================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--ink-950);
    border-right: 1px solid rgba(255, 255, 255, .06);
    color: var(--ink-300);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .24s var(--ease);
}

.app-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: var(--topbar-height);
    padding: 0 1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--app-radius-sm);
    background: var(--accent-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.app-sidebar .sidebar-brand .brand-text {
    line-height: 1.15;
    font-size: .9rem;
}
.app-sidebar .sidebar-brand .brand-text small {
    display: block;
    font-weight: 400;
    color: var(--ink-500);
    font-size: .7rem;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .6rem .6rem 1.25rem;
}

.sidebar-section-label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-500);
    padding: .85rem .55rem .3rem;
    font-weight: 600;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .55rem;
    border-radius: var(--app-radius-sm);
    color: var(--ink-300);
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: .05rem;
    transition: background-color .12s var(--ease), color .12s var(--ease);
}

.sidebar-nav .nav-link i.bi {
    font-size: .98rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: .7;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent-on-dark);
}
.sidebar-nav .nav-link.active i.bi { opacity: 1; color: var(--accent-on-dark); }

.sidebar-nav .nav-link .chevron {
    margin-left: auto;
    transition: transform .18s var(--ease);
    font-size: .7rem;
    opacity: .6;
}
.sidebar-nav .nav-link[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

.sidebar-submenu {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .08);
    margin: .1rem 0 .3rem .9rem;
}
.sidebar-submenu .nav-link {
    font-size: .8rem;
    padding: .42rem .55rem;
    color: var(--ink-400);
}
.sidebar-submenu .nav-link:hover { color: #fff; }
.sidebar-submenu .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.sidebar-foot {
    padding: .7rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: .7rem;
    color: var(--ink-500);
    flex-shrink: 0;
}

/* ============================================================================
   Zone de contenu + barre superieure
   ============================================================================ */

.app-main {
    margin-left: var(--sidebar-width);
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--topbar-height);
    background: var(--surface-card);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: inset 0 3px 0 var(--site-accent);
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 0 1.1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sidebar-toggle-btn {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    color: var(--ink-700);
    padding: .3rem .45rem;
    border-radius: var(--app-radius-sm);
    transition: background-color .12s var(--ease);
    display: none;
}
.sidebar-toggle-btn:hover { background: var(--ink-100); }

.topbar-title {
    font-weight: 600;
    font-size: .98rem;
    color: var(--ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.topbar-actions .form-select-sm {
    border-radius: var(--app-radius-sm);
    font-size: .8rem;
    border-color: var(--surface-border);
}

#offline-sync-btn {
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--ink-700);
}
#offline-sync-btn:hover { background: var(--ink-100); }

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    border-radius: var(--app-radius-sm);
    padding: .28rem .6rem .28rem .35rem;
    font-size: .82rem;
    color: var(--ink-900);
}
.user-menu-btn .avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .74rem;
}

.page-content {
    animation: fadeInUp .22s var(--ease) both;
}

.app-breadcrumb .breadcrumb {
    font-size: .8rem;
    margin-top: .9rem;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .app-main { margin-left: 0; }
    .sidebar-toggle-btn { display: inline-flex; align-items: center; }
}

/* ============================================================================
   Ecran d'authentification (login) — sans fond decoratif
   ============================================================================ */

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: 1.5rem;
}
.auth-card {
    max-width: 400px;
    width: 100%;
}

/* ============================================================================
   Cartes, boutons, formulaires, tableaux, badges — polish sobre
   ============================================================================ */

.card {
    border: 1px solid var(--surface-border);
    border-radius: var(--app-radius);
    box-shadow: none;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--surface-border);
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink-800);
}

.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 500;
    transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.btn-primary {
    background: var(--accent-600);
    border-color: var(--accent-600);
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--accent-700) !important;
    border-color: var(--accent-700) !important;
}
.btn-outline-primary {
    color: var(--accent-700);
    border-color: var(--accent-500);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
    color: #fff !important;
}
.btn-link { color: var(--accent-600); }
.btn-link:hover { color: var(--accent-700); }

.form-control,
.form-select {
    border-color: var(--ink-300);
    border-radius: var(--app-radius-sm);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--accent-500) 22%, transparent);
}
.form-label {
    font-weight: 500;
    font-size: .82rem;
    color: var(--ink-700);
    margin-bottom: .3rem;
}
.form-check-input:checked {
    background-color: var(--accent-600);
    border-color: var(--accent-600);
}

.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--app-radius-sm);
    padding: .32em .55em;
}

.nav-tabs .nav-link.active {
    color: var(--accent-700);
    border-bottom-color: var(--accent-500);
}
.list-group-item-action:hover { background: var(--ink-100); }
.list-group-item.active {
    background: var(--accent-600);
    border-color: var(--accent-600);
}
.page-link { color: var(--accent-600); }
.page-item.active .page-link {
    background: var(--accent-600);
    border-color: var(--accent-600);
}

.table {
    font-size: .84rem;
    margin-bottom: 0;
    color: var(--ink-800);
}
.table > :not(caption) > * > * {
    padding: .5rem .65rem;
}
.table thead th {
    background: var(--surface-sunken);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-500);
    border-bottom: 1px solid var(--surface-border);
    font-weight: 700;
    white-space: nowrap;
}
.table tbody tr { transition: background-color .1s var(--ease); }
.table-hover tbody tr:hover { background: var(--ink-100); }
/* Colonnes chiffrees (montants alignes a droite) : chiffres a chasse fixe */
.table td.text-end,
.table th.text-end,
td.num, th.num {
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   KPI — cartes du tableau de bord (sobres, chiffre porteur)
   ============================================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}

.kpi-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--app-radius);
    padding: .9rem 1rem;
    position: relative;
    box-shadow: none;
    animation: fadeInUp .28s var(--ease) both;
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--app-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--kpi-accent, var(--ink-600));
    background: color-mix(in srgb, var(--kpi-accent, var(--ink-600)) 12%, #fff);
    margin-bottom: .6rem;
}

.kpi-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-500);
    font-weight: 600;
    margin-bottom: .1rem;
}

.kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi-meta {
    font-size: .76rem;
    color: var(--ink-500);
    margin-top: .25rem;
}
.kpi-meta a { color: var(--accent-600); text-decoration: none; }
.kpi-meta a:hover { color: var(--accent-700); }

.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: var(--app-radius-sm);
    margin-top: .5rem;
}
.kpi-trend.up   { color: var(--ok-fg);      background: var(--ok-bg); }
.kpi-trend.down { color: var(--danger-fg);  background: var(--danger-bg); }
.kpi-trend.flat { color: var(--neutral-fg); background: var(--neutral-bg); }

/* KPI cliquable : ouvre le detail des elements concernes */
.kpi-clickable {
    cursor: pointer;
    transition: border-color .12s var(--ease), background-color .12s var(--ease);
}
.kpi-clickable:hover {
    border-color: var(--ink-300);
    background: var(--surface-sunken);
}
.kpi-clickable:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
}

/* ============================================================================
   Animations — discretes, orientees etat
   ============================================================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}