/* ==========================================================================
   NumiApp — couche visuelle du panneau d'administration (Phase 8, point #47).

   POURQUOI CE FICHIER
   -------------------
   L'admin portait encore l'habillage d'origine du thème acheté : il ne
   ressemblait ni aux panneaux NumiApp (site public, espace commerçant) ni à la
   charte de la marque. Cette couche applique la MÊME charte que les autres
   panneaux — mêmes jetons, mêmes rayons, mêmes ombres — pour qu'un membre du
   staff passe d'un panneau à l'autre sans changer de repères.

   PRINCIPE
   --------
   Ce fichier est chargé APRÈS le thème d'origine et se contente de le
   surcharger : aucune vue n'est réécrite, donc aucun écran ne peut casser.
   On monte la spécificité plutôt que d'utiliser `!important`.
   ========================================================================== */

:root {
    --np-brand: #1CB084;      /* vert de marque NumiApp */
    --np-brand-d: #0f766e;
    --np-brand-l: #ccfbf1;
    --np-ink: #0f172a;
    --np-muted: #64748b;
    --np-line: #e2e8f0;
    --np-bg: #f6f8fb;
    --np-radius: 14px;
    --np-radius-sm: 10px;
    --np-shadow: 0 3px 12px rgba(15, 23, 42, .05);
    --np-danger: #dc2626;
    --np-warn: #b45309;
    --np-ok: #15803d;
}

/* --- fond et typographie ------------------------------------------------- */
body {
    background: var(--np-bg);
    color: var(--np-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* --- titres de page ------------------------------------------------------ */
.page-wrapper > .page-titles,
.page-titles {
    background: transparent;
    padding: 0 0 10px;
}
.page-titles h3 {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--np-ink);
    font-size: 21px;
}
.page-titles .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 13px;
}
.page-titles .breadcrumb-item + .breadcrumb-item::before { color: var(--np-muted); }
.page-titles .breadcrumb-item.active { color: var(--np-muted); }

/* --- cartes -------------------------------------------------------------- */
.card {
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius);
    box-shadow: var(--np-shadow);
    background: #fff;
}
.card-body { padding: 18px 20px; }
.card .card-title,
.card h4.card-title {
    font-weight: 800;
    font-size: 15.5px;
    color: var(--np-ink);
    margin-bottom: 14px;
}

/* --- tableaux ------------------------------------------------------------ */
.table {
    border-color: var(--np-line);
    margin-bottom: 0;
}
.table > thead > tr > th {
    background: #fbfdff;
    border-bottom: 1px solid var(--np-line);
    color: var(--np-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--np-line);
    vertical-align: middle;
    font-size: 13.5px;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fcfdfe; }
.table-hover > tbody > tr:hover { background: var(--np-brand-l); }
.table-bordered { border-color: var(--np-line); }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--np-line); }

/* DataTables : la barre d'outils et la pagination héritées du thème */
.dataTables_wrapper { padding: 4px 2px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius-sm);
    padding: 6px 10px;
    height: auto;
}
.page-link {
    color: var(--np-ink);
    border-color: var(--np-line);
    border-radius: 8px !important;
    margin: 0 2px;
}
.page-item.active .page-link {
    background: var(--np-brand);
    border-color: var(--np-brand);
    color: #fff;
}

/* --- boutons ------------------------------------------------------------- */
.btn { border-radius: var(--np-radius-sm); font-weight: 600; font-size: 13.5px; padding: 7px 14px; }
.btn-primary,
.btn-primary:focus {
    background: var(--np-brand);
    border-color: var(--np-brand);
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
    background: var(--np-brand-d);
    border-color: var(--np-brand-d);
}
.btn-secondary { background: #64748b; border-color: #64748b; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }
.btn-outline-primary { color: var(--np-brand); border-color: var(--np-brand); }
.btn-outline-primary:hover { background: var(--np-brand); border-color: var(--np-brand); }

/* --- formulaires --------------------------------------------------------- */
.form-control {
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius-sm);
    padding: 8px 12px;
    height: auto;
    font-size: 13.5px;
}
.form-control:focus {
    border-color: var(--np-brand);
    box-shadow: 0 0 0 3px rgba(28, 176, 132, .14);
}
label, .control-label { font-weight: 600; font-size: 13px; color: var(--np-ink); }

/* --- navigation latérale ------------------------------------------------- */
.sidebar-nav ul li a {
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    font-size: 13.5px;
    color: #334155;
}
.sidebar-nav ul li a:hover { background: #eef6f3; color: var(--np-brand-d); }
.sidebar-nav ul li a.active,
.sidebar-nav ul li a[aria-expanded="true"] {
    background: var(--np-brand-l);
    color: var(--np-brand-d);
    font-weight: 700;
}
.nav-subtitle .nav-subtitle-span,
.sidebar-nav .nav-subtitle span {
    color: var(--np-muted);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* barre supérieure */
.navbar { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* --- pastilles et alertes ------------------------------------------------ */
.badge { border-radius: 999px; font-weight: 600; padding: 5px 10px; }
.badge-success, .badge-primary { background: var(--np-brand); }
.alert { border-radius: var(--np-radius); border-width: 1px; font-size: 13.5px; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

/* --- états vides --------------------------------------------------------- */
.np-vide {
    padding: 34px 18px;
    text-align: center;
    color: var(--np-muted);
    font-size: 13.5px;
}
.np-vide strong { display: block; color: var(--np-ink); font-size: 15px; margin-bottom: 4px; }

/* --- indicateurs --------------------------------------------------------- */
.np-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.np-kpi { background: #fff; border: 1px solid var(--np-line); border-radius: var(--np-radius); padding: 16px 18px; box-shadow: var(--np-shadow); }
.np-kpi .v { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--np-ink); }
.np-kpi .l { font-size: 12.5px; color: var(--np-muted); margin-top: 4px; }
.np-kpi.bon .v { color: var(--np-ok); }
.np-kpi.attention .v { color: var(--np-warn); }
.np-kpi.mauvais .v { color: var(--np-danger); }

/* --- téléphone : le staff travaille au téléphone ------------------------- */
@media (max-width: 991px) {
    .page-titles h3 { font-size: 18px; }
    .table-responsive { border: 0; }
    .btn { padding: 7px 12px; }
    .card-body { padding: 14px; }
}
@media (max-width: 575px) {
    /* les tableaux larges se lisent en défilant, pas en écrasant les colonnes */
    .table > thead > tr > th,
    .table > tbody > tr > td { white-space: nowrap; }
}

/* --- mode sombre (posé sur <body> par le sélecteur de la barre supérieure) - */
body.np-dark {
    background: #0b1220;
    color: #e2e8f0;
}
body.np-dark .card,
body.np-dark .np-kpi { background: #111c31; border-color: #23334d; }
body.np-dark .card .card-title,
body.np-dark .page-titles h3,
body.np-dark .np-kpi .v { color: #f1f5f9; }
body.np-dark .table > thead > tr > th { background: #16233a; color: #94a3b8; }
body.np-dark .table > tbody > tr > td { border-top-color: #23334d; color: #cbd5e1; }
body.np-dark .table-striped > tbody > tr:nth-of-type(odd) { background: #0f1a2d; }
body.np-dark .table-hover > tbody > tr:hover { background: #16233a; }
body.np-dark .form-control { background: #0f1a2d; border-color: #23334d; color: #e2e8f0; }
body.np-dark .btn-secondary { background: #334155; border-color: #334155; }
body.np-dark .sidebar-nav ul li a { color: #cbd5e1; }
body.np-dark .sidebar-nav ul li a:hover { background: #16233a; color: #fff; }
body.np-dark .sidebar-nav ul li a.active { background: #123c33; color: #7fe0c4; }
body.np-dark .breadcrumb-item.active,
body.np-dark .np-vide { color: #94a3b8; }