/* © 2026 Guy Cardinal (Beedy — en voie d'incorporation). Tous droits réservés. Code propriétaire, usage sous licence uniquement. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,700;9..144,800;9..144,900&display=swap');

/* ============================================================
 * Nordikeau presentation overrides — loaded AFTER scheduler.css
 * Surgical UI cleanup for the April 22 demo
 * ============================================================ */

/* 1. Kill the "DEV SHOWROOM" red badge in the top-right */
body.dashboard-page::after { display: none !important; content: none !important; }

/* 2. Remove Beedy logo + wordmark from sidebar header; keep collapse button */
.sidebar-header .logo,
.sidebar-header .logo-img,
.sidebar-header .logo .sidebar-label,
.sidebar-header .logo-dot { display: none !important; }
.sidebar-header { justify-content: flex-end; }

/* 2b. Kill the help FAB — it was overlapping Eve in the same corner.
 * Help is handled by Eve now, no need for a second floater. */
.help-fab, #helpFab { display: none !important; }

/* 2c. Hide SaaS-template items not relevant for Nordikeau ops staff.
 * Tableau de bord (overview) now has a real page behind it. */
.sidebar-nav li:has(a[data-page="licenses"]),
.sidebar-nav li:has(a[data-page="admin"]),
.sidebar-nav li:has(a[data-page="help"]) { display: none !important; }

/* 2d. Flatten the "FIFO App > Scheduler" nesting — the parent group header
 * is ceremony. Show the Scheduler link at the top level instead, matching the
 * exact padding and icon size of the other top-level sidebar links. */
.sidebar-app-group > .sidebar-group-header { display: none !important; }
.sidebar-app-group > .sidebar-group-items { padding-left: 0 !important; margin: 0 !important; }
.sidebar-app-group > .sidebar-group-items > li > a { padding-left: 16px !important; }
/* Scheduler icon was 16px inside the group — bump to 20px to match top-level */
.sidebar-app-group > .sidebar-group-items > li > a svg {
    width: 20px !important;
    height: 20px !important;
}

/* 2e. Remove the duplicate "Map" view-toggle inside the scheduler toolbar.
 * The Carte item in the sidebar is the single entry point now. */
#viewMap { display: none !important; }

/* 2f. Scheduler sticky columns were cramped — widened so project names
 * like "Lac-Miroir" actually fit. The offsets cascade (poste-left
 * follows project width, employee-left follows poste width). */
.scheduler-grid thead .th-project,
.scheduler-grid tbody .td-project {
    min-width: 220px !important;
    max-width: 220px !important;
    left: 0 !important;
}
.scheduler-grid thead .th-poste,
.scheduler-grid tbody .td-poste {
    min-width: 140px !important;
    max-width: 140px !important;
    left: 220px !important;
}
.scheduler-grid thead .th-employee,
.scheduler-grid tbody .td-employee {
    min-width: 180px !important;
    max-width: 180px !important;
    left: 360px !important;
}

/* 2f. Remove the top-bar title ("Horaire"/"Scheduler") and the Demo User pill.
 * The sidebar already tells you where you are; the user pill is template cruft.
 * Also hide the entire dash-topbar — once title+user+lang-toggle are gone it's
 * just an empty 33px black band at the top of every page. */
.scheduler-title, #schedulerTitle,
.topbar-user, #topbarUser { display: none !important; }
.dash-topbar { display: none !important; }

/* 2g. Lang toggle, once relocated into the sidebar footer via bridge-sync, gets
 * proper sidebar-native styling. */
.sidebar-footer #langToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: rgba(14,165,233,0.08);
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: 8px;
    color: #0ea5e9;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.sidebar-footer #langToggle::before {
    content: '🌐';
    filter: grayscale(0.4);
}
.sidebar-footer #langToggle:hover {
    background: rgba(14,165,233,0.15);
    border-color: rgba(14,165,233,0.45);
}
.sidebar-footer #langToggle .lang-label { letter-spacing: 1.5px; }
/* Collapsed sidebar — icon-only */
.sidebar.collapsed .sidebar-footer #langToggle { padding: 8px 0; font-size: 0.65rem; }

/* 3. Move Eve floater to bottom-right so it stops overlapping the sidebar */
#beedy-ai-btn {
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 99998 !important;
}
#beedy-ai-panel {
    left: auto !important;
    right: 24px !important;
    bottom: 90px !important;
}
/* On small screens the sidebar gets full width — keep Eve clear */
@media (max-width: 768px) {
    #beedy-ai-btn { bottom: 16px !important; right: 16px !important; }
    #beedy-ai-panel { bottom: 80px !important; right: 8px !important; left: 8px !important; width: auto !important; }
}

/* 4. Tighten the hero banner — the rocktruck video is beautiful but dominant.
 * Keep it as a cinematic strip, not a half-screen takeover. */
.hero-banner {
    max-height: 180px !important;
    min-height: 140px !important;
    border-radius: 12px;
    margin: 12px 16px 8px;
    overflow: hidden;
}
.hero-banner .hero-video { height: 100% !important; object-fit: cover; }
.hero-banner .hero-overlay {
    padding: 14px 22px !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, transparent 100%) !important;
}
.hero-banner .hero-title {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.hero-banner .hero-subtitle {
    font-size: 0.85rem !important;
    margin-top: 2px !important;
}
.hero-banner .hero-powered {
    font-size: 0.65rem !important;
    opacity: 0.7;
    margin-top: 4px !important;
}

/* 4b. Hero minimized state — user-toggled, persists in localStorage */
body.hero-minimized .hero-banner {
    max-height: 38px !important;
    min-height: 38px !important;
    margin: 6px 16px 4px !important;
}
body.hero-minimized .hero-banner .hero-video { display: none !important; }
body.hero-minimized .hero-banner .hero-overlay {
    padding: 8px 18px !important;
    background: linear-gradient(90deg, #0a0f1a 0%, #111827 100%) !important;
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 8px;
}
body.hero-minimized .hero-banner .hero-title {
    font-size: 0.85rem !important;
    display: inline-block;
    vertical-align: middle;
}
body.hero-minimized .hero-banner .hero-subtitle,
body.hero-minimized .hero-banner .hero-powered { display: none !important; }
body.hero-minimized .hero-min-btn { top: 6px !important; height: 22px !important; }

/* 5. Bridge pages — scrollable when content overflows the viewport.
 * These pages replace the scheduler grid so they get the remaining viewport. */
#page-sites,
#page-employes,
#page-lectures,
#page-messages-bridge,
#page-dashboard,
#page-parametres {
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for the dark ops aesthetic */
#page-sites::-webkit-scrollbar,
#page-employes::-webkit-scrollbar,
#page-lectures::-webkit-scrollbar,
#page-messages-bridge::-webkit-scrollbar,
#page-parametres::-webkit-scrollbar {
    width: 10px;
}
#page-sites::-webkit-scrollbar-track,
#page-employes::-webkit-scrollbar-track,
#page-lectures::-webkit-scrollbar-track,
#page-messages-bridge::-webkit-scrollbar-track,
#page-parametres::-webkit-scrollbar-track {
    background: #0a0f1a;
}
#page-sites::-webkit-scrollbar-thumb,
#page-employes::-webkit-scrollbar-thumb,
#page-lectures::-webkit-scrollbar-thumb,
#page-messages-bridge::-webkit-scrollbar-thumb,
#page-parametres::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 5px;
    border: 2px solid #0a0f1a;
}
#page-sites::-webkit-scrollbar-thumb:hover,
#page-employes::-webkit-scrollbar-thumb:hover,
#page-lectures::-webkit-scrollbar-thumb:hover,
#page-messages-bridge::-webkit-scrollbar-thumb:hover,
#page-dashboard::-webkit-scrollbar-thumb:hover,
#page-parametres::-webkit-scrollbar-thumb:hover {
    background: #374151;
}
#page-dashboard::-webkit-scrollbar { width: 10px; }
#page-dashboard::-webkit-scrollbar-track { background: #0a0f1a; }
#page-dashboard::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 5px; border: 2px solid #0a0f1a; }

/* ============================================================
 * 6. TABLEAU DE BORD — design tokens and component classes
 * Competes with Quartex / Augmentir / Innovapptive ops dashboards.
 * ============================================================ */

:root {
    --ndb-bg: #0a0f1a;
    --ndb-card: #111827;
    --ndb-card-soft: rgba(17,24,39,0.7);
    --ndb-border: rgba(99,102,241,0.12);
    --ndb-border-hot: rgba(99,102,241,0.35);
    --ndb-text: #e2e8f0;
    --ndb-text-dim: #9ca3af;
    --ndb-muted: #64748b;
    --ndb-dim: #374151;
    --ndb-water: #0ea5e9;
    --ndb-cyan: #22d3ee;
    --ndb-green: #10b981;
    --ndb-amber: #f59e0b;
    --ndb-red: #ef4444;
    --ndb-purple: #a78bfa;
    --ndb-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ndb-dash-wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 22px 28px 40px;
    color: var(--ndb-text);
    font-family: 'Inter', sans-serif;
}

/* Header */
.ndb-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ndb-eyebrow {
    font-size: 0.68rem;
    font-family: var(--ndb-mono);
    color: var(--ndb-water);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.ndb-header h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ndb-text);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
}
.ndb-subtitle {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--ndb-muted);
    font-family: var(--ndb-mono);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ndb-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ndb-green);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    animation: ndb-pulse 2s infinite;
}
@keyframes ndb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.ndb-chip {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--ndb-mono);
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ndb-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ndb-chip-ok { background: rgba(16,185,129,0.1); color: var(--ndb-green); }

/* Alerts */
.ndb-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.ndb-alert {
    background: var(--ndb-card);
    border: 1px solid var(--ndb-border);
    border-left: 3px solid var(--ndb-red);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.ndb-alert:hover { transform: translateX(2px); border-color: var(--ndb-border-hot); }
.ndb-alert-warn { border-left-color: var(--ndb-amber); }
.ndb-alert-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239,68,68,0.15);
    color: var(--ndb-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
}
.ndb-alert-warn .ndb-alert-icon { background: rgba(245,158,11,0.15); color: var(--ndb-amber); }
.ndb-alert-title { font-size: 0.82rem; font-weight: 700; color: var(--ndb-text); }
.ndb-alert-sub { font-size: 0.72rem; color: var(--ndb-muted); margin-top: 2px; }

/* KPI tiles */
.ndb-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.ndb-kpi {
    background: var(--ndb-card);
    border: 1px solid var(--ndb-border);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}
.ndb-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ndb-water), transparent);
    opacity: 0.6;
}
.ndb-kpi-label {
    font-size: 0.66rem;
    color: var(--ndb-muted);
    font-family: var(--ndb-mono);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    margin-bottom: 10px;
}
.ndb-kpi-value {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: var(--ndb-mono);
    color: var(--ndb-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ndb-kpi-meta {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--ndb-text-dim);
}
.ndb-kpi-meta .ok { color: var(--ndb-green); font-weight: 600; }
.ndb-kpi-meta .warn { color: var(--ndb-amber); font-weight: 600; }
.ndb-kpi-meta .bad { color: var(--ndb-red); font-weight: 600; }

/* Card */
.ndb-row-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.ndb-card {
    background: var(--ndb-card);
    border: 1px solid var(--ndb-border);
    border-radius: 14px;
    padding: 18px 20px;
}
.ndb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}
.ndb-card-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ndb-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.ndb-card-meta {
    font-size: 0.7rem;
    color: var(--ndb-muted);
    font-family: var(--ndb-mono);
}
.ndb-live-dot-small { display: inline-flex; align-items: center; gap: 5px; }
.ndb-live-dot-small::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ndb-green);
    animation: ndb-pulse 2s infinite;
}
.ndb-btn-link {
    background: none;
    border: none;
    color: var(--ndb-water);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
}
.ndb-btn-link:hover { color: var(--ndb-cyan); }

/* Today's snapshot list */
.ndb-today-site {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 12px;
}
.ndb-today-site:last-child { border-bottom: none; }
.ndb-today-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ndb-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ndb-today-sub {
    font-size: 0.68rem;
    color: var(--ndb-muted);
    font-family: var(--ndb-mono);
    margin-top: 2px;
}
.ndb-today-avatars { display: flex; gap: -4px; }
.ndb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0f1a;
    font-weight: 800;
    font-size: 0.7rem;
    border: 2px solid var(--ndb-card);
    margin-left: -6px;
}
.ndb-avatar:first-child { margin-left: 0; }
.ndb-shift-mark {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--ndb-card);
}
.ndb-shift-J { background: #fbbf24; }
.ndb-shift-N { background: #818cf8; }

/* Site card with people chips — used in "Qui est ou" */
.ndb-site-card {
    background: rgba(10,15,26,0.4);
    border: 1px solid rgba(99,102,241,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.ndb-site-card:last-child { margin-bottom: 0; }
.ndb-site-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.ndb-site-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ndb-text);
}
.ndb-site-sub {
    font-size: 0.67rem;
    font-family: var(--ndb-mono);
    color: var(--ndb-muted);
    margin-top: 2px;
}
.ndb-site-count { flex-shrink: 0; }
.ndb-cover-ok {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--ndb-mono);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(16,185,129,0.12);
    color: var(--ndb-green);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ndb-cover-none {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--ndb-mono);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(100,116,139,0.1);
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ndb-person-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ndb-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ndb-card-soft);
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 20px;
    padding: 3px 10px 3px 3px;
    font-size: 0.72rem;
    color: var(--ndb-text);
}
.ndb-avatar-sm {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #0a0f1a;
    font-weight: 800;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ndb-person-name { font-weight: 600; }
.ndb-person-lastname { color: var(--ndb-text-dim); font-weight: 500; }
.ndb-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 2px;
}

/* Cert list */
.ndb-cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 12px;
}
.ndb-cert-row:last-child { border-bottom: none; }
.ndb-cert-who {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ndb-text);
}
.ndb-cert-what {
    font-size: 0.7rem;
    color: var(--ndb-text-dim);
    margin-top: 2px;
}
.ndb-cert-countdown {
    font-family: var(--ndb-mono);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.ndb-cert-critical { background: rgba(239,68,68,0.12); color: var(--ndb-red); }
.ndb-cert-warn { background: rgba(245,158,11,0.12); color: var(--ndb-amber); }
.ndb-cert-ok { background: rgba(16,185,129,0.08); color: var(--ndb-green); }

/* Rotations list */
.ndb-rot-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 12px;
}
.ndb-rot-row:last-child { border-bottom: none; }
.ndb-rot-day {
    font-family: var(--ndb-mono);
    font-size: 0.72rem;
    color: var(--ndb-water);
    font-weight: 700;
    text-transform: uppercase;
}
.ndb-rot-body {
    font-size: 0.82rem;
    color: var(--ndb-text);
}
.ndb-rot-who { font-weight: 600; }
.ndb-rot-where { color: var(--ndb-text-dim); }
.ndb-rot-arrow { color: var(--ndb-cyan); margin: 0 4px; }
.ndb-rot-type {
    font-size: 0.62rem;
    font-family: var(--ndb-mono);
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(99,102,241,0.15);
    color: var(--ndb-purple);
    font-weight: 700;
}

/* Activity feed */
.ndb-act-row {
    display: flex;
    align-items: flex-start;
    padding: 9px 0;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ndb-act-row:last-child { border-bottom: none; }
.ndb-act-time {
    font-family: var(--ndb-mono);
    font-size: 0.65rem;
    color: var(--ndb-muted);
    width: 52px;
    flex-shrink: 0;
    padding-top: 2px;
}
.ndb-act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    background: var(--ndb-water);
}
.ndb-act-reading .ndb-act-dot { background: var(--ndb-green); }
.ndb-act-message .ndb-act-dot { background: var(--ndb-cyan); }
.ndb-act-alert .ndb-act-dot { background: var(--ndb-red); }
.ndb-act-body {
    font-size: 0.78rem;
    color: var(--ndb-text);
    line-height: 1.5;
}
.ndb-act-body em { color: var(--ndb-text-dim); font-style: normal; }

/* Mini map */
#ndb-mini-map {
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ndb-bg);
    border: 1px solid rgba(99,102,241,0.08);
}

.ndb-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--ndb-muted);
    font-size: 0.82rem;
}

/* Chips used across Sites/Employes cards: crew group, fatigue, travel, cert warn */
.ndb-crew-chip,
.ndb-fatigue-chip,
.ndb-travel-chip,
.ndb-cert-warn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-family: var(--ndb-mono), monospace;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

/* Employes — cert-renewal section styling (bonus) */
.ndb-emp-cert-alert {
    background: linear-gradient(135deg, rgba(239,68,68,0.05), rgba(245,158,11,0.05));
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.ndb-emp-cert-alert h3 {
    font-size: 0.9rem;
    color: var(--ndb-amber);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

/* ============================================================
 * 7. PARAMETRES — Control Room Calibration Panel
 * Aesthetic: NASA mission-control meets Swiss timepiece precision
 * Typography: Fraunces (editorial display) + JetBrains Mono (technical)
 * ============================================================ */


#page-parametres {
    background:
        radial-gradient(ellipse 1200px 600px at 20% 0%, rgba(14,165,233,0.045), transparent 60%),
        radial-gradient(ellipse 800px 500px at 100% 100%, rgba(167,139,250,0.035), transparent 60%),
        var(--ndb-bg);
    position: relative;
}
#page-parametres::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.006) 3px 4px),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.035'/></svg>");
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

.ndb-set-wrap {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 56px 80px;
    color: var(--ndb-text);
    font-family: 'Inter', sans-serif;
}

/* Hero */
.ndb-set-hero { margin-bottom: 42px; }
.ndb-set-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ndb-mono);
    font-size: 0.66rem;
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.ndb-set-stamp {
    padding: 3px 10px;
    border: 1px solid rgba(14,165,233,0.35);
    background: rgba(14,165,233,0.05);
    color: var(--ndb-water);
    font-weight: 700;
}
.ndb-set-divider {
    width: 1px;
    height: 14px;
    background: var(--ndb-muted);
    opacity: 0.28;
}
.ndb-set-live-clock {
    color: #10b981;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ndb-set-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.ndb-set-title-kicker {
    font-family: var(--ndb-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 4.5px;
    color: var(--ndb-water);
    font-weight: 600;
}
.ndb-set-title-main {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
    line-height: 0.93;
    letter-spacing: -0.035em;
    color: var(--ndb-text);
    font-feature-settings: "ss01", "ss03";
}
.ndb-set-subtitle {
    font-size: 0.95rem;
    color: var(--ndb-text-dim);
    max-width: 580px;
    line-height: 1.6;
}

/* Blueprint rule */
.ndb-set-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.22), transparent);
    margin: 28px 0;
    position: relative;
}
.ndb-set-rule::before,
.ndb-set-rule::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(99,102,241,0.35);
    background: var(--ndb-bg);
    transform: rotate(45deg);
}
.ndb-set-rule::before { left: 0; }
.ndb-set-rule::after { right: 0; }

/* Section */
.ndb-set-section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    padding: 24px 0 28px;
    opacity: 0;
    animation: ndb-set-fade-in 0.75s cubic-bezier(0.25, 0.9, 0.4, 1) forwards;
}
@keyframes ndb-set-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.ndb-set-section[data-section="01"] { animation-delay: 0.08s; }
.ndb-set-section[data-section="02"] { animation-delay: 0.18s; }
.ndb-set-section[data-section="03"] { animation-delay: 0.28s; }
.ndb-set-section[data-section="04"] { animation-delay: 0.38s; }
.ndb-set-section[data-section="05"] { animation-delay: 0.48s; }
.ndb-set-section[data-section="06"] { animation-delay: 0.58s; }
.ndb-set-section-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
.ndb-set-serial {
    font-family: var(--ndb-mono);
    font-size: 2.1rem;
    font-weight: 700;
    color: rgba(100,116,139,0.55);
    line-height: 1;
    letter-spacing: -0.03em;
    transform: translateY(-3px);
    font-variant-numeric: tabular-nums;
}
.ndb-set-section-head h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 48, "SOFT" 50;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ndb-text);
    margin: 0 0 8px;
}
.ndb-set-section-head p {
    font-family: var(--ndb-mono);
    font-size: 0.65rem;
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 2.3px;
    margin: 0 0 4px;
}
.ndb-set-section-head p.ndb-set-meta {
    font-size: 0.62rem;
    color: var(--ndb-water);
    margin-top: 8px;
    letter-spacing: 1.8px;
    font-weight: 600;
}
.ndb-set-section-head p.ndb-live-dot-small {
    color: var(--ndb-green);
}
.ndb-set-section-body { min-width: 0; }

/* Hero live-in-meta indicator */
.ndb-hero-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    font-weight: 700;
}

/* Lang toggle */
.ndb-set-lang-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 560px;
}
.ndb-set-lang-btn {
    position: relative;
    background: rgba(17,24,39,0.5);
    border: 1px solid rgba(99,102,241,0.15);
    padding: 26px 22px 20px;
    color: var(--ndb-text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.ndb-set-lang-btn:hover {
    border-color: rgba(14,165,233,0.45);
    background: rgba(14,165,233,0.04);
    transform: translateY(-2px);
}
.ndb-set-lang-btn.active {
    border-color: var(--ndb-water);
    background: rgba(14,165,233,0.06);
    box-shadow: 0 0 0 1px rgba(14,165,233,0.25), inset 0 0 40px rgba(14,165,233,0.04);
}
.ndb-set-lang-code {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
    font-weight: 900;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -0.045em;
    margin-bottom: 6px;
    color: var(--ndb-text-dim);
    transition: color 0.25s;
}
.ndb-set-lang-btn.active .ndb-set-lang-code { color: var(--ndb-water); }
.ndb-set-lang-name {
    display: block;
    font-family: var(--ndb-mono);
    font-size: 0.7rem;
    color: var(--ndb-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 500;
}
.ndb-set-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--ndb-water);
    opacity: 0;
    transition: opacity 0.25s;
}
.ndb-set-corner.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.ndb-set-corner.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.ndb-set-corner.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.ndb-set-corner.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }
.ndb-set-lang-btn.active .ndb-set-corner,
.ndb-set-lang-btn:hover .ndb-set-corner { opacity: 0.75; }

/* Swatches */
.ndb-set-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
    max-width: 800px;
}
.ndb-set-swatch-card {
    position: relative;
    background: rgba(17,24,39,0.5);
    border: 1px solid rgba(99,102,241,0.12);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    font-family: inherit;
}
.ndb-set-swatch-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ndb-set-swatch-card.active {
    border-color: var(--swatch-color);
    box-shadow: 0 0 0 1px var(--swatch-color), 0 10px 30px rgba(0,0,0,0.3);
}
.ndb-set-swatch-color {
    height: 76px;
    background: var(--swatch-color);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}
.ndb-set-swatch-color::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.15));
    pointer-events: none;
}
.ndb-set-swatch-check {
    opacity: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: opacity 0.25s;
    position: relative;
    z-index: 1;
}
.ndb-set-swatch-card.active .ndb-set-swatch-check { opacity: 1; }
.ndb-set-swatch-meta {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ndb-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.ndb-set-swatch-name { color: var(--ndb-text); font-weight: 600; }
.ndb-set-swatch-hex { color: var(--ndb-muted); }

.ndb-set-apparence-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(10,15,26,0.4);
    border: 1px solid rgba(99,102,241,0.08);
    flex-wrap: wrap;
    max-width: 800px;
}
.ndb-set-custom-color {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 220px;
}
.ndb-set-custom-color input[type="color"] {
    width: 44px;
    height: 34px;
    border: 1px solid rgba(99,102,241,0.2);
    background: transparent;
    cursor: pointer;
    padding: 2px;
}
.ndb-set-hex {
    font-family: var(--ndb-mono);
    font-size: 0.76rem;
    color: var(--ndb-text-dim);
    letter-spacing: 1.4px;
    font-variant-numeric: tabular-nums;
}
.ndb-set-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(100,116,139,0.25);
    color: var(--ndb-text-dim);
    font-family: var(--ndb-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.ndb-set-reset:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245,158,11,0.05);
}

/* Labels & inputs */
.ndb-set-label {
    display: block;
    font-family: var(--ndb-mono);
    font-size: 0.63rem;
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 600;
}
.ndb-set-field { display: block; margin-bottom: 16px; }
.ndb-set-input {
    width: 100%;
    background: rgba(10,15,26,0.6);
    border: 1px solid rgba(99,102,241,0.15);
    padding: 12px 14px;
    color: var(--ndb-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.ndb-set-input:focus {
    border-color: var(--ndb-water);
    background: rgba(14,165,233,0.04);
}
.ndb-set-input-num {
    width: 72px;
    text-align: center;
    font-family: var(--ndb-mono);
    padding: 6px 10px;
    font-variant-numeric: tabular-nums;
}

/* Branding */
.ndb-set-brand-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 640px;
}
.ndb-set-logo-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 20px 22px;
    background: rgba(10,15,26,0.5);
    border: 1px dashed rgba(99,102,241,0.28);
    color: var(--ndb-text-dim);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}
.ndb-set-logo-btn:hover {
    border-color: var(--ndb-water);
    color: var(--ndb-water);
    background: rgba(14,165,233,0.03);
}
.ndb-set-logo-meta {
    margin-left: auto;
    font-family: var(--ndb-mono);
    font-size: 0.68rem;
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 1.6px;
}
.ndb-set-save-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: var(--ndb-water);
    border: none;
    color: var(--ndb-bg);
    font-family: var(--ndb-mono);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    cursor: pointer;
    justify-self: flex-start;
    transition: all 0.2s;
}
.ndb-set-save-brand:hover {
    background: var(--ndb-cyan);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(14,165,233,0.3);
}

/* Notification signals */
.ndb-set-signal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    background: rgba(17,24,39,0.3);
    border: 1px solid rgba(99,102,241,0.08);
    margin-bottom: 10px;
    transition: all 0.22s;
    flex-wrap: wrap;
    max-width: 820px;
}
.ndb-set-signal:hover {
    border-color: rgba(99,102,241,0.2);
    background: rgba(17,24,39,0.5);
}
.ndb-set-signal-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}
.ndb-set-signal-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ndb-text);
    margin-bottom: 3px;
}
.ndb-set-signal-sub {
    display: block;
    font-size: 0.77rem;
    color: var(--ndb-muted);
    line-height: 1.55;
}
.ndb-set-signal-aux {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ndb-mono);
    flex-shrink: 0;
}
.ndb-set-signal-aux .ndb-set-label { margin: 0; }
.ndb-set-unit {
    font-size: 0.7rem;
    color: var(--ndb-muted);
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

/* Toggle switch with phosphor glow */
.ndb-set-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
}
.ndb-set-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ndb-set-switch-track {
    position: absolute;
    inset: 0;
    background: rgba(55,65,81,0.6);
    border: 1px solid rgba(99,102,241,0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ndb-set-switch-thumb {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ndb-set-switch input:checked + .ndb-set-switch-track {
    background: rgba(16,185,129,0.15);
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16,185,129,0.28), inset 0 0 10px rgba(16,185,129,0.18);
}
.ndb-set-switch input:checked + .ndb-set-switch-track .ndb-set-switch-thumb {
    left: 22px;
    background: #10b981;
    box-shadow: 0 0 10px rgba(16,185,129,0.65);
}

/* Account */
.ndb-set-account-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 24px 26px;
    background: linear-gradient(135deg, rgba(14,165,233,0.05), rgba(167,139,250,0.025));
    border: 1px solid rgba(99,102,241,0.15);
    position: relative;
    overflow: hidden;
    max-width: 820px;
}
.ndb-set-account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ndb-water), var(--ndb-purple));
}
.ndb-set-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ndb-water), var(--ndb-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ndb-bg);
    letter-spacing: -0.03em;
}
.ndb-set-account-info { min-width: 0; }
.ndb-set-account-name {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ndb-text);
    margin-bottom: 3px;
}
.ndb-set-account-role {
    display: block;
    font-family: var(--ndb-mono);
    font-size: 0.7rem;
    color: var(--ndb-water);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 6px;
    font-weight: 600;
}
.ndb-set-account-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--ndb-muted);
}
.ndb-set-account-actions { display: flex; flex-direction: column; gap: 8px; }

/* Buttons */
.ndb-set-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid rgba(99,102,241,0.22);
    color: var(--ndb-text);
    font-family: var(--ndb-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ndb-set-btn-ghost:hover {
    border-color: var(--ndb-water);
    color: var(--ndb-water);
    background: rgba(14,165,233,0.04);
}
.ndb-set-btn-danger {
    border-color: rgba(239,68,68,0.3);
    color: var(--ndb-red);
}
.ndb-set-btn-danger:hover {
    background: rgba(239,68,68,0.08);
    border-color: var(--ndb-red);
}

/* About */
.ndb-set-about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
    max-width: 820px;
}
.ndb-set-about-item {
    padding: 15px 17px;
    background: rgba(10,15,26,0.4);
    border: 1px solid rgba(99,102,241,0.08);
    transition: border-color 0.2s;
}
.ndb-set-about-item:hover { border-color: rgba(99,102,241,0.2); }
.ndb-set-about-val {
    display: block;
    font-family: var(--ndb-mono);
    font-size: 0.95rem;
    color: var(--ndb-text);
    font-weight: 500;
    letter-spacing: 0.4px;
}
.ndb-set-backup { display: flex; gap: 10px; flex-wrap: wrap; }

/* Footer */
.ndb-set-footer {
    margin-top: 68px;
    padding-top: 28px;
    border-top: 1px solid rgba(99,102,241,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ndb-set-footer-stamp {
    font-family: var(--ndb-mono);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ndb-water);
    letter-spacing: 4.5px;
}
.ndb-set-footer-meta {
    font-family: var(--ndb-mono);
    font-size: 0.62rem;
    color: var(--ndb-muted);
    letter-spacing: 1.2px;
}

/* Responsive */
@media (max-width: 900px) {
    .ndb-set-wrap { padding: 32px 24px 60px; }
    .ndb-set-section { grid-template-columns: 1fr; gap: 20px; }
    .ndb-set-section-head { position: static; }
    .ndb-set-title-main { font-size: clamp(2.4rem, 8vw, 3.2rem); }
    .ndb-set-account-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
    .ndb-set-account-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* ─── 10. ROLE-SCOPED UI VISIBILITY (P2) ──────────────────────── */
/* Hide edit-type actions for site-scope users (superviseur, chef_equipe).
   They see data read-only except for their own team's actions. */
body[data-scope="site"] .ndb-set-btn-primary:not(.ndb-keep-for-site),
body[data-scope="site"] #btn-new-project,
body[data-scope="site"] #btn-new-employee,
body[data-scope="site"] #btn-edit-proj,
body[data-scope="site"] .btn-edit-employee,
body[data-scope="site"] .ndb-edit-btn,
body[data-scope="site"] [data-role="admin-only"] { display: none !important; }

/* Hide Admin\/Settings sidebar for non-admin scopes */
/* REMOVED 2026-04-21: Paramètres is now a per-user settings page (lang/theme/account) — everyone needs access. Per-role visibility is handled by applyRoleRestrictions in bridge-sync.js. */

/* Hide 'À réviser' tab for chef_equipe (they can't approve others' reports) */
body[data-scope="site"][data-role-key="chef_equipe"] .sw-tab[data-tab="review"] { display: none; }

/* Scope-aware hero/title tweaks */
body[data-scope="site"] #sites-count-meta::before { content: "📍 "; color: #f59e0b; }
body[data-scope="site"] #sites-grid { grid-template-columns: 1fr !important; }

/* Subtle pulsing accent on the scope badge so it's obvious */
.sidebar-header + div[style*="scope"] { position: relative; }


/* ============================================================
 * 8. EVE FAB — theme-adaptive background (follows ThemeManager --primary)
 * Overrides the hardcoded red in scheduler.css #beedy-ai-btn.
 * ============================================================ */
#beedy-ai-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow:
        0 4px 20px color-mix(in srgb, var(--primary) 40%, transparent),
        0 0 0 1px rgba(255,255,255,0.1) !important;
}
#beedy-ai-btn:hover {
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--primary) 50%, transparent) !important;
}
#beedy-ai-btn .ai-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#beedy-ai-btn .ai-btn-icon svg { display: block; }


/* Icon-only Eve FAB — circular, theme-adaptive */
#beedy-ai-btn {
    padding: 0 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
}
#beedy-ai-btn > svg { width: 22px; height: 22px; display: block; }


/* ============================================================
 * 9. THEME-ADAPTIVE CONTROLS + TODAY HIGHLIGHT (scheduler)
 * Overrides hardcoded #DC2626 accents + hardcoded #0077b6 day headers
 * so they track the ThemeManager --primary variable, and adds a clear
 * today-column indicator both in the header and the body cells.
 * ============================================================ */

/* View toggle — Month / Year / Map */
.view-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Month tab strip (Jan..Dec) */
.month-tab.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Hero banner — add a theme-colored bottom hairline so the brand color
 * anchors the hero into the rest of the UI. 3px is enough to read as
 * intentional without competing with the photography. */
.hero-banner {
    /* Remove any border on the photo edge — it blends with the image.
     * Instead, paint the theme accent as an outset shadow strip BELOW the
     * banner so it sits in the dark chrome, plainly visible. */
    border-bottom: none !important;
    box-shadow:
        0 4px 0 0 var(--primary),                                    /* 4px theme strip below */
        0 10px 24px rgba(0,0,0,0.45),                                /* drop shadow for depth */
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
    transition: box-shadow 0.3s ease;
}

/* ── TODAY column highlight ──
 * The header gets a thick theme-colored strip under its number, and every
 * body cell for today's date gets a faint theme tint + a stronger left edge.
 * Vertical stripe is drawn via ::before on the header so it doesn't collide
 * with cell content (ronde markers, shift letters). */
.scheduler-grid thead th.day-header.is-today {
    background: var(--primary) !important;
    border-color: var(--primary-dark, var(--primary)) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 -3px 0 0 #fff;
    position: sticky;
    z-index: 16;
}
.scheduler-grid thead th.day-header.is-today::after {
    content: 'AUJ';
    display: block;
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-top: 1px;
    opacity: 0.85;
}
html[lang=en] .scheduler-grid thead th.day-header.is-today::after,
body[data-i18n-lang=en] .scheduler-grid thead th.day-header.is-today::after {
    content: 'TDY';
}

.scheduler-grid tbody td.shift-cell.is-today {
    background-image: linear-gradient(
        color-mix(in srgb, var(--primary) 10%, transparent),
        color-mix(in srgb, var(--primary) 10%, transparent)
    );
    box-shadow: inset 2px 0 0 0 var(--primary);
    position: relative;
}
/* Preserve legibility: shift letters still use their original color tokens;
 * the tint just adds depth. Urgent/override cells keep their own bg by
 * specificity — we only add box-shadow + tint. */

/* Smooth scroll for the horizontal auto-scroll-to-today */
.scheduler-grid-scroll { scroll-behavior: smooth; }


/* ============================================================
 * 10. EVE CHAT PANEL — theme-adaptive accents
 * Overrides every hardcoded #DC2626 / rgba(220,38,38,..) inside
 * scheduler.css for .ai-* selectors so Eve's popup tracks the
 * ThemeManager --primary variable just like the FAB and hero.
 * ============================================================ */

/* Header + avatar */
#beedy-ai-panel .ai-header {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 12%, transparent),
            color-mix(in srgb, var(--primary) 3%, transparent)) !important;
}
#beedy-ai-panel .ai-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* Scrollbar */
#beedy-ai-panel .ai-messages::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

/* Bot avatar badge */
#beedy-ai-panel .ai-msg-bot .ai-msg-avatar {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* Suggestion chips hover */
#beedy-ai-panel .ai-suggestions button:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

/* Input focus ring */
#beedy-ai-panel #ai-input:focus {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* Send button */
#beedy-ai-panel #ai-send {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}
#beedy-ai-panel #ai-send:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* Mic idle / hover / recording */
#beedy-ai-panel #ai-mic:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: #fff !important;
}
#beedy-ai-panel #ai-mic.recording {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 35%, transparent); }
    50%      { box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 65%, transparent); }
}

/* Voice wave + stop button */
#beedy-ai-panel .voice-wave span {
    background: var(--primary) !important;
}
#beedy-ai-panel .voice-stop-btn {
    background: color-mix(in srgb, var(--primary) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
    color: var(--primary-light, var(--primary)) !important;
}


/* Text accents inside Eve's messages (strong / headings / links / blockquotes) */
#beedy-ai-panel .ai-msg-content strong,
#beedy-ai-panel .ai-msg-content h3,
#beedy-ai-panel .ai-msg-content h4 {
    color: var(--primary-light, var(--primary)) !important;
}
#beedy-ai-panel .ai-msg-content blockquote {
    border-left-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 6%, transparent) !important;
}
#beedy-ai-panel .ai-msg-user .ai-msg-content {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 18%, transparent),
        color-mix(in srgb, var(--primary) 10%, transparent)) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
#beedy-ai-panel .typing-dots span {
    background: color-mix(in srgb, var(--primary) 55%, transparent) !important;
}


/* ============================================================
 * 11. Hero overlay fix — the default .hero-overlay is bottom-aligned
 * with an implicit height equal to its content, which produces a
 * visible horizontal seam where the overlay starts. Stretch it to
 * cover the full hero with a smooth top-to-bottom gradient.
 * ============================================================ */
.hero-banner .hero-overlay {
    position: absolute !important;
    inset: 0 !important;                    /* full cover */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;   /* keep text at bottom */
    padding: 24px 32px 28px !important;
    background: linear-gradient(
        to bottom,
        rgba(10,15,26,0) 0%,
        rgba(10,15,26,0) 40%,
        rgba(10,15,26,0.55) 75%,
        rgba(10,15,26,0.92) 100%
    ) !important;
}


/* ============================================================
 * 12. Project workspace — supervisor edit UI
 * Modals, edit buttons, dynamic field editor for ronde templates.
 * ============================================================ */

/* Edit icon on equipment cards */
.pw-eq-card { position: relative; }
.pw-eq-edit-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.22);
    color: #e2e8f0;
    width: 28px; height: 28px; border-radius: 6px;
    cursor: pointer; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}
.pw-eq-edit-btn:hover {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: var(--primary);
    color: #fff;
}

/* Edit icon on template rows */
.pw-tpl-row { position: relative; cursor: pointer; transition: background 0.18s; }
.pw-tpl-row:hover { background: rgba(99,102,241,0.06); }
.pw-tpl-row .pw-tpl-edit {
    position: absolute; top: 10px; right: 12px;
    color: rgba(148,163,184,0.7);
    font-size: 0.9rem;
}
.pw-tpl-row:hover .pw-tpl-edit { color: var(--primary); }

/* Panel-head + Add buttons */
.pw-panel-actions { display: flex; align-items: center; gap: 10px; }
.pw-tpl-add-btn { margin-left: 10px; font-size: 0.7rem; padding: 4px 10px; }

/* Button primitives */
.pw-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem; font-weight: 600;
    padding: 8px 16px; border-radius: 8px;
    cursor: pointer; border: 1px solid transparent;
    transition: all 0.18s;
    display: inline-flex; align-items: center; gap: 6px;
}
.pw-btn-sm { font-size: 0.72rem; padding: 5px 10px; }
.pw-btn-primary {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
}
.pw-btn-primary:hover {
    background: var(--primary-dark, var(--primary));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}
.pw-btn-ghost {
    background: transparent; color: #cbd5e1;
    border-color: rgba(148,163,184,0.28);
}
.pw-btn-ghost:hover {
    background: rgba(148,163,184,0.08);
    color: #f1f5f9;
}
.pw-btn-danger {
    background: transparent; color: #f87171;
    border-color: rgba(239,68,68,0.4);
}
.pw-btn-danger:hover {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}

/* Modal overlay */
#pw-modal-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(5,8,16,0.75);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: pw-fade-in 0.2s ease;
}
#pw-modal-overlay .pw-modal {
    background: #0f172a;
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    color: #e2e8f0;
}
.pw-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(99,102,241,0.12);
}
.pw-modal-head h3 {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem; font-weight: 700;
    color: #f8fafc; letter-spacing: -0.01em;
}
.pw-modal-close {
    background: none; border: none; color: #64748b;
    font-size: 1.5rem; cursor: pointer; padding: 4px 10px;
    border-radius: 6px; transition: all 0.18s;
}
.pw-modal-close:hover { background: rgba(148,163,184,0.1); color: #f1f5f9; }
.pw-modal-body {
    padding: 20px 22px;
    overflow-y: auto; flex: 1;
    display: flex; flex-direction: column; gap: 14px;
}
.pw-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid rgba(99,102,241,0.12);
    background: rgba(10,15,26,0.6);
}

/* Form fields inside modals */
.pw-field {
    display: flex; flex-direction: column; gap: 6px;
}
.pw-field > span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; font-weight: 600;
    color: #94a3b8; letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pw-field input, .pw-field select, .pw-field textarea {
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 8px;
    padding: 10px 12px;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.18s, background 0.18s;
}
.pw-field input:focus, .pw-field select:focus, .pw-field textarea:focus {
    border-color: var(--primary);
    background: rgba(15,23,42,1);
}
.pw-field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Template field-list editor — compact grid row per field */
.pw-fields-hd {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; font-weight: 600;
    color: #94a3b8; letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pw-tpl-fields-edit {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 260px; overflow-y: auto;
    padding: 6px 4px;
    background: rgba(5,8,16,0.35);
    border: 1px solid rgba(99,102,241,0.1);
    border-radius: 8px;
}
.pw-tpl-field-row {
    display: grid;
    grid-template-columns: 90px 1fr 80px 70px 70px 70px 42px 28px;
    gap: 4px; align-items: center;
    padding: 0 4px;
}
.pw-tpl-field-row input, .pw-tpl-field-row select {
    background: rgba(10,15,26,0.8);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 5px;
    padding: 5px 8px;
    color: #e2e8f0;
    font-size: 0.8rem;
    min-width: 0;
}
.pw-tpl-req {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.7rem; color: #94a3b8;
}
.pw-tpl-req input { margin: 0; }
.pw-tpl-field-del {
    background: transparent; border: 1px solid rgba(239,68,68,0.3);
    color: #f87171;
    border-radius: 5px; width: 26px; height: 26px;
    cursor: pointer; padding: 0;
    font-size: 0.95rem;
}
.pw-tpl-field-del:hover {
    background: rgba(239,68,68,0.12);
}

/* Danger zone inside editor */
.pw-danger-zone {
    margin-top: 8px; padding-top: 14px;
    border-top: 1px solid rgba(239,68,68,0.15);
    display: flex; justify-content: flex-end;
}

@keyframes pw-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 720px) {
    .pw-field-row { grid-template-columns: 1fr; }
    .pw-tpl-field-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
}


/* ============================================================
 * 13. Sticky column hover — opaque tint
 * Default .clickable:hover uses rgba(...)12% alpha which lets the schedule
 * grid show through the sticky Projets/Postes/Employé columns. Force an
 * opaque blend so the hover is visible without bleed-through.
 * ============================================================ */
.scheduler-grid .col-project.clickable:hover {
    background-color: color-mix(in srgb, var(--primary) 20%, #d4d4d4) !important;
    color: var(--primary) !important;
}
.scheduler-grid .col-poste.clickable:hover,
.scheduler-grid .col-employee.clickable:hover {
    background-color: color-mix(in srgb, var(--primary) 18%, #e8e8e8) !important;
    color: var(--primary-dark, var(--primary)) !important;
}


/* 9-language dropdown menu (i18n.js) */
.sidebar-footer{position:relative}
.lang9-menu{position:absolute;left:10px;right:10px;bottom:52px;background:#0f1a2c;border:1px solid rgba(120,170,230,.28);border-radius:12px;box-shadow:0 -10px 40px rgba(0,0,0,.5);padding:6px;display:none;z-index:200;max-height:320px;overflow:auto}
.lang9-menu.open{display:block}
.lang9-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;color:#dbe7f7;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;font-family:inherit}
.lang9-item:hover{background:rgba(120,170,230,.1)}
.lang9-item.on{background:rgba(224,168,62,.14);color:#f2c766}
.lang9-code{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.7rem;width:22px;color:#4fc3e8}
.lang9-item.on .lang9-code{color:#f2c766}

/* Horaire sub-functions in the left panel (polaris-nav.js) */
/* Horaire sub-functions — a nested sub-tree under Scheduler (id-scoped to beat base .sidebar-nav a) */
#pl-horaire-fns{display:flex;flex-direction:column;margin:2px 10px 10px 30px;padding-left:12px;
  border-left:1px solid rgba(148,163,184,.16)}
#pl-horaire-fns .pl-fn{display:block !important;position:relative;padding:6px 10px 6px 20px !important;
  font-size:.8rem;line-height:1.2;color:var(--ndb-text-dim,#9ca3af);text-decoration:none;border-radius:7px;
  cursor:pointer;transition:color .15s,background .15s;background:transparent !important;border:0 !important}
#pl-horaire-fns .pl-fn::before{content:'';position:absolute;left:6px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--ndb-water,#0ea5e9);opacity:.55;transition:opacity .15s}
#pl-horaire-fns .pl-fn:hover{color:var(--ndb-text,#e2e8f0);background:rgba(14,165,233,.09) !important}
#pl-horaire-fns .pl-fn:hover::before{opacity:1}
/* Left-panel IA — labelled zones (Planification · Opérations · Administration) */
.pl-nav-sec{list-style:none;margin:18px 12px 4px;padding:0 8px;font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ndb-text-dim,#6b7a90);opacity:.72;
  user-select:none;pointer-events:none}
#pl-sec-planning{margin-top:6px}
/* "+ New" action on the Sites & Employés directory pages (opens the editor modal) */
#page-sites .ndb-set-hero,#page-employes .ndb-set-hero{position:relative}
.pl-page-manage{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:#fff;
  background:var(--ndb-water,#0ea5e9);border:0;border-radius:9px;cursor:pointer;
  box-shadow:0 4px 14px rgba(14,165,233,.28);transition:transform .12s,box-shadow .12s,filter .12s}
.pl-page-manage:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,165,233,.36)}
.pl-page-manage:active{transform:translateY(0)}
@media(max-width:640px){.pl-page-manage{position:static;margin-top:12px}}

/* ── Cohesive deep-navy chrome ────────────────────────────────────────────
 * Guy: the Overview's background (deep #0a0a14, transparent main area over body)
 * reads much better than the lighter nav/topbar. Bring that same rich dark to
 * the sidebar + topbar so the whole app feels like one surface. Drops the
 * lighter #1a1a2e gradient, the busy sidebar-bg.jpg and the red border. */
.sidebar{
  background:linear-gradient(180deg,#0b0b17 0%,#08080f 100%) !important;
  border-right:1px solid rgba(148,163,184,.08) !important;
  backdrop-filter:none;
}
.topbar{
  background:#0a0a14 !important;
  border-bottom:1px solid rgba(148,163,184,.08) !important;
  border-image:none !important;
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
/* soften the legacy red label glow so the dark reads clean */
.sidebar .sidebar-label{text-shadow:none !important;}

/* Carry the deep navy into the cards/panels. The project/employee/message cards
 * are rendered with an inline slate fill (background:#111827) that reads lighter
 * & greyer than the app. Re-tone them to a deep-navy panel that sits one step
 * above the #0a0a14 surface. Attribute selector catches them all; !important
 * beats the inline style. (Map controls use #1f2937, so they're untouched.) */
[style*="background:#111827"]{
  background:#0d1119 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
}
/* grid cards carry no status accent → give them the unified subtle cool border */
#sites-grid > [data-project-click],
#emp-supervisors > div,
#emp-operators > div{
  border-color:rgba(148,163,184,.12) !important;
}
#sites-grid > [data-project-click]:hover,
#emp-supervisors > div:hover,
#emp-operators > div:hover{
  border-color:rgba(14,165,233,.35) !important;
}