/* ==========================================================================
   EcomFlow Hub — thème « landing » appliqué à Tabler.
   On ne réécrit pas les composants : on re-thématise Tabler via ses variables
   + quelques polices, pour que toutes les vues héritent du look moderne.
   Accent bleu #2563EB (comme www.ecomflow.app), clair + sombre, sidebar sombre.
   ========================================================================== */

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

/* ---- Tokens (clair) ---------------------------------------------------- */
:root {
    --ef-accent:      #2563EB;
    --ef-accent-ink:  #1D4ED8;
    --ef-accent-soft: rgba(37,99,235,.10);
    --ef-brand:       #2563EB;   /* utilisé par l'avatar / le switcher */

    --ef-bg:      #F5F7FB;
    --ef-surface: #FFFFFF;
    --ef-ink:     #0B0F17;
    --ef-muted:   #5A6678;
    --ef-border:  #E5E9F0;
    --ef-radius:      14px;
    --ef-radius-sm:   10px;
    --ef-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --ef-shadow:    0 1px 2px rgba(16,24,40,.04), 0 18px 40px -18px rgba(16,24,40,.16);

    --ef-sidebar-bg:          #12161F;
    --ef-sidebar-text:        #9aa6bd;
    --ef-sidebar-text-active: #ffffff;

    /* Surcharge des variables Tabler (Bootstrap) */
    --tblr-primary: #2563EB;
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-link-color: #1D4ED8;
    --tblr-border-radius: 10px;
    --tblr-border-radius-lg: 14px;
    --tblr-body-bg: #F5F7FB;
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Tokens (sombre) --------------------------------------------------- */
[data-bs-theme="dark"] {
    --ef-accent:      #3B82F6;
    --ef-accent-ink:  #93C5FD;
    --ef-accent-soft: rgba(59,130,246,.16);
    --ef-brand:       #3B82F6;

    --ef-bg:      #0B0F17;
    --ef-surface: #141A24;
    --ef-ink:     #E9EDF3;
    --ef-muted:   #94A3B8;
    --ef-border:  #232A36;

    --tblr-primary: #3B82F6;
    --tblr-primary-rgb: 59, 130, 246;
    --tblr-link-color: #93C5FD;
    --tblr-body-bg: #0B0F17;
}

/* ---- Base -------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--ef-bg);
    color: var(--ef-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title, .navbar-brand {
    font-family: 'Geist', 'Inter', sans-serif;
    letter-spacing: -.01em;
}

/* ---- Cartes ------------------------------------------------------------ */
.card {
    background-color: var(--ef-surface);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card-sm { border-radius: var(--ef-radius-sm); }
.row-cards .card:hover { box-shadow: var(--ef-shadow); }

/* ---- Boutons ----------------------------------------------------------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
    --tblr-btn-bg: var(--ef-accent);
    --tblr-btn-border-color: var(--ef-accent);
    --tblr-btn-hover-bg: var(--ef-accent-ink);
    --tblr-btn-hover-border-color: var(--ef-accent-ink);
    --tblr-btn-active-bg: var(--ef-accent-ink);
    box-shadow: var(--ef-shadow-sm);
}
.btn-ghost-primary, .btn-outline-primary { color: var(--ef-accent-ink); }

/* ---- Badges / liens / avatars ----------------------------------------- */
.text-primary { color: var(--ef-accent-ink) !important; }
.bg-primary  { background-color: var(--ef-accent) !important; }
.badge { border-radius: 8px; font-weight: 600; }
.avatar { font-family: 'Geist', sans-serif; }

/* ---- Tableaux ---------------------------------------------------------- */
.table { --tblr-table-border-color: var(--ef-border); }
.card > .table-responsive > .table > thead > tr > th,
.card .table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ef-muted);
    font-weight: 600;
}

/* ---- Formulaires ------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--ef-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ef-accent);
    box-shadow: 0 0 0 3px var(--ef-accent-soft);
}

/* ---- En-tête (header haut) -------------------------------------------- */
.navbar.navbar-expand-md {
    background-color: var(--ef-surface);
    border-bottom: 1px solid var(--ef-border);
    backdrop-filter: saturate(120%) blur(6px);
}

/* ---- Sidebar (claire & aérée façon mockup ; suit le thème) ------------- */
.navbar-vertical {
    background-color: var(--ef-surface) !important;
    border-right: 1px solid var(--ef-border);
}
.navbar-vertical .navbar-brand a { color: var(--ef-ink) !important; }
.navbar-vertical .nav-link {
    color: var(--ef-muted) !important;
    border-radius: 10px;
    margin: 2px 10px;
    padding: .55rem .8rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.navbar-vertical .nav-link:hover {
    color: var(--ef-ink) !important;
    background-color: rgba(15,23,42,.045);
}
[data-bs-theme="dark"] .navbar-vertical .nav-link:hover {
    background-color: rgba(255,255,255,.06);
}
/* Item actif = bleu DOUX (fond bleu pâle + texte/icône bleus), pas plein */
.navbar-vertical .nav-item.active .nav-link {
    color: var(--ef-accent-ink) !important;
    background-color: var(--ef-accent-soft);
    font-weight: 600;
}
.navbar-vertical .nav-item.active .nav-link-icon i { color: var(--ef-accent); }
.navbar-vertical .nav-link-icon {
    width: 1.25rem;
    display: inline-flex;
    justify-content: center;
    margin-right: .65rem;
}
.navbar-vertical .nav-link-icon i { font-size: 1.125rem; }
/* Titres de section (PILOTAGE / MESURE…) en petites capitales grises */
.navbar-vertical .nav-item > .nav-link.text-secondary {
    color: var(--ef-muted) !important;
    opacity: .65;
    font-size: .68rem;
    letter-spacing: .09em;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
}

/* ---- Bascule de thème -------------------------------------------------- */
#ef-theme-toggle { color: var(--ef-muted); }
.ef-sun { display: none; }
.ef-moon { display: inline-flex; }
[data-bs-theme="dark"] .ef-sun { display: inline-flex; }
[data-bs-theme="dark"] .ef-moon { display: none; }

/* ---- Dashboard : cartes KPI, toggle de période, graphiques --------------- */
.ef-range{display:inline-flex;background:var(--ef-surface);border:1px solid var(--ef-border);border-radius:11px;padding:3px}
.ef-range a{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ef-muted);text-decoration:none;transition:.12s}
.ef-range a:hover{color:var(--ef-ink)}
.ef-range a.on{background:var(--ef-accent);color:#fff}
.kpi-card .card-body{padding:18px 20px}
.kpi-card.mod-card{display:block;cursor:pointer}
.kpi-card.mod-card:hover{box-shadow:var(--ef-shadow);transform:translateY(-2px)}
.kpi-top{display:flex;align-items:center;gap:9px;color:var(--ef-muted);font-size:13.5px;font-weight:600;margin-bottom:12px}
.kpi-ic{width:30px;height:30px;border-radius:9px;background:var(--ef-accent-soft);color:var(--ef-accent);display:grid;place-items:center;font-size:16px;flex:none}
.kpi-val{font-family:'Geist',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.kpi-val.is-nc{font-size:22px;color:var(--ef-muted);opacity:.6;font-weight:700}
.kpi-sub{margin-top:8px;font-size:12.5px;color:var(--ef-muted)}
.chart-total{font-family:'Geist',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em}
.ef-chart-wrap{position:relative;height:300px}
/* Onglets propres (pills) */
.ef-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ef-tabs a{display:inline-flex;align-items:center;padding:8px 15px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ef-muted);text-decoration:none;border:1px solid transparent;transition:.12s}
.ef-tabs a:hover{color:var(--ef-ink);background:rgba(15,23,42,.045)}
.ef-tabs a.on{color:var(--ef-accent-ink);background:var(--ef-accent-soft)}
[data-bs-theme="dark"] .ef-tabs a:hover{background:rgba(255,255,255,.06)}

/* ---- Logo EcomFlow (icône panier + « ecomflow » Lexend, comme la landing) */
.ef-logo{display:inline-flex;align-items:center;gap:10px;font-family:'Lexend',sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--ef-ink) !important;text-decoration:none;line-height:1}
.ef-logo .ef-mark{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,#2563EB,#1D4ED8);box-shadow:var(--ef-shadow-sm)}
.ef-logo .ef-mark svg{width:20px;height:20px;color:#fff}
.ef-logo--lg{font-size:30px;gap:12px}
.ef-logo--lg .ef-mark{width:46px;height:46px;border-radius:13px}
.ef-logo--lg .ef-mark svg{width:27px;height:27px}
.ef-logo--sm{font-size:17px;gap:8px}
.ef-logo--sm .ef-mark{width:28px;height:28px;border-radius:8px}
.ef-logo--sm .ef-mark svg{width:16px;height:16px}

/* ---- Pastille d'étape (héritée) --------------------------------------- */
.ef-step-badge {
    display: inline-block;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--ef-accent-soft);
    color: var(--ef-accent-ink);
}