/* analytics.trendl.io — branding overrides bovenop Bootstrap 5.3.
   Doel: minimaal, alleen styling die uit Bootstrap niet schoon te halen is.

   Trendl-brand: BLUE accent (CTRL = AMBER, my = ?, analytics = BLUE).
   Logo + badge volgen het patroon uit ctrl.trendl.io/src/components/LoginScreen.jsx. */

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

:root {
    --analytics-primary: #378ADD;        /* Trendl BLUE — voor analytics */
    --analytics-accent: #378ADD;
    --analytics-text: #f0ece4;           /* CTRL's TEXT — warm wit */
    --analytics-bg-dark: #0e0f0f;        /* CTRL's BG */
    --analytics-sidebar-bg: #f8f9fa;
    --analytics-sidebar-border: #dee2e6;
    --navbar-height: 56px;

    /* Bootstrap primary override naar Trendl-blauw */
    --bs-primary: #378ADD;
    --bs-primary-rgb: 55, 138, 221;
}

/* Override Bootstrap btn-primary om bij Trendl-blauw te blijven */
.btn-primary {
    background-color: var(--analytics-primary);
    border-color: var(--analytics-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #2873c0;
    border-color: #2873c0;
}
.text-primary { color: var(--analytics-primary) !important; }
.bg-primary { background-color: var(--analytics-primary) !important; }
a { color: var(--analytics-primary); }
a:hover { color: #2873c0; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: #fff;
}

/* ── Trendl branding: logo + badge (uit CTRL LoginScreen.jsx) ─────────────── */
.brand-logo {
    font-family: 'Geologica', system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    color: var(--analytics-text);
    line-height: 1;
}
.brand-dot {
    color: var(--analytics-accent);
}
.brand-badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 500;
    background: var(--analytics-accent);
    color: #111;
    border-radius: 3px;
    transform: rotate(-1.5deg);
    letter-spacing: 1px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    text-decoration: none;
    font-family: system-ui, sans-serif;
    line-height: 1.2;
}

/* Login-pagina: gecentreerde brand boven login-card */
.brand-stack {
    text-align: center;
    margin-bottom: 1.5rem;
}
.brand-stack .brand-logo {
    font-size: 2rem;
    color: #111;  /* op witte login-pagina donker ipv warm-wit */
}
.brand-stack .brand-badge {
    margin-top: 0.5rem;
}

/* Navbar zelf donker — past bij Trendl-stijl uit CTRL */
.navbar.navbar-trendl {
    background: var(--analytics-bg-dark);
    border-bottom: 1px solid #1e2020;
}
.navbar.navbar-trendl .nav-link,
.navbar.navbar-trendl .navbar-text {
    color: var(--analytics-text);
}

/* Layout — fixed-height main area zodat content scrolt los van navbar */
.app-shell {
    min-height: calc(100vh - var(--navbar-height));
}

/* Sidebar */
.sidebar {
    background: var(--analytics-sidebar-bg);
    border-right: 1px solid var(--analytics-sidebar-border);
    min-height: calc(100vh - var(--navbar-height));
    padding: 1rem 0;
}
.sidebar .nav-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    padding: 0.5rem 1.25rem 0.25rem;
}
.sidebar .nav-link {
    padding: 0.35rem 1.25rem;
    color: #343a40;
    font-size: 0.92rem;
    border-radius: 0;
    border-left: 3px solid transparent;
}
.sidebar .nav-link:hover {
    background: #e9ecef;
}
.sidebar .nav-link.active {
    background: #fff;
    color: var(--analytics-accent);
    border-left-color: var(--analytics-accent);
    font-weight: 500;
}
.sidebar hr {
    margin: 0.5rem 1rem;
    color: var(--analytics-sidebar-border);
}

/* Main */
.main-content {
    padding: 1.5rem 2rem;
}
.main-content h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.main-content h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Tabellen — compacter dan Bootstrap default voor data-zware schermen */
.table-data {
    font-size: 0.875rem;
}
.table-data thead th {
    background: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: #495057;
}
.table-data td.num,
.table-data th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.table-data td.mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* KPI-card — accent op linker rand */
.kpi-card {
    border-left: 3px solid var(--analytics-accent);
}
.kpi-card .kpi-label {
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-card .kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Filter-bar — sticky bovenaan content */
.filter-bar {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border: 1px solid var(--analytics-sidebar-border);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

/* Code-snippets */
code {
    color: #c7254e;
    background: #f9f2f4;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.875em;
}

/* Alert-status (trusted IP banner etc.) */
.alert-trust-ok {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
    color: #1b5e20;
}
.alert-trust-warn {
    background: #fff8e1;
    border-left: 3px solid #ff9800;
    color: #e65100;
}

/* Login-form: gecentreerd, gelimiteerde breedte */
.login-card {
    max-width: 420px;
    margin: 4rem auto;
}

/* ── Setup-agenda (maandkalender) ─────────────────────────────────────────── */
/* Topbar/filters vast, alleen de kalender scrollt (inner-scroll). */
.agenda-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--navbar-height) - 3rem);
}
.agenda-head { flex: 0 0 auto; }
.agenda-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 2px 0 60px;
    position: relative;
    overflow-anchor: none;
}

/* 7-koloms grid; za/zo op halve breedte (geen/laat handel). */
.ag-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr) 0.55fr 0.55fr;
    gap: 5px;
}
.ag-weekdays {
    padding: 4px 0 6px;
    border-bottom: 2px solid var(--analytics-accent);
    position: sticky; top: 0; background: #fff; z-index: 6;
}
.ag-weekdays .wd {
    font-size: 0.68rem; text-transform: uppercase;
    color: #6c757d; font-weight: 600; text-align: left; padding-left: 2px;
}
.ag-weekdays .wd.we { color: #b9bdc2; }

.ag-month { margin-bottom: 4px; }
.ag-monthbar {
    position: sticky; top: 30px; z-index: 5;
    background: #eef6ff; border-left: 4px solid var(--analytics-accent);
    border-radius: 0 6px 6px 0; padding: 5px 11px;
    margin: 10px 0 6px; font-weight: 700;
}

.ag-cell {
    border: 1px solid var(--analytics-sidebar-border);
    border-radius: 7px; min-height: 96px; padding: 5px 6px; background: #fff;
    display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.ag-cell.ag-pad { border: 0; background: transparent; min-height: 0; }
.ag-cell.ag-we { background: #fafbfc; }
.ag-cell.ag-future { background: #f6f7f8; }
.ag-cell.ag-today { outline: 2px solid var(--analytics-accent); outline-offset: -2px; }
.ag-d { display: flex; align-items: baseline; gap: 5px; }
.ag-dn { font-weight: 700; font-size: 0.98rem; line-height: 1; }
.ag-we .ag-dn { color: #9aa0a6; font-weight: 600; }
.ag-roll {
    margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.58rem; background: #ede7f6; color: #5e35b1;
    border-radius: 4px; padding: 0 5px;
}
.ag-r { font-size: 0.72rem; display: flex; justify-content: space-between; line-height: 1.3; }
.ag-r .k { color: #6c757d; }
.oc, .ag-lg { font-weight: 700; font-variant-numeric: tabular-nums; }
.oc .op, .ag-lg.op { color: var(--analytics-accent); }
.oc .sep { color: #bbb; margin: 0 1px; }
.oc .cl, .ag-lg.cl { color: #2e7d32; }
.dol { font-weight: 700; color: #15803d; }
.ag-pip {
    margin-top: auto; font-size: 0.68rem; font-weight: 700;
    color: #e65100; background: #fff8e1; border: 1px solid #ffe0a3;
    border-radius: 6px; padding: 1px 6px; align-self: flex-start;
}
.ag-pip.hot { color: #c0392b; background: #fdecea; border-color: #f3b6ae; }
.ag-sentinel { text-align: center; color: #6c757d; font-size: 0.78rem; padding: 12px; }