/* ============================================================
   MNSBDRS — neutral SaaS theme (sidebar shell) on Bootstrap 5.3
   ============================================================ */

:root {
    --mn-sidebar-w: 250px;
    --mn-radius: 14px;

    /* Light palette */
    --mn-bg:        #fafafa;
    --mn-surface:   #ffffff;
    --mn-sidebar:   #ffffff;
    --mn-border:    #ececef;
    --mn-text:      #18181b;
    --mn-muted:     #71717a;
    --mn-square-bg: #f4f4f5;
    --mn-square-fg: #3f3f46;
    --mn-active:    #f4f4f5;
    --mn-hover:     #f7f7f8;
    --mn-ink:       #18181b;   /* near-black accent */
    --mn-ink-fg:    #ffffff;
}

[data-bs-theme="dark"] {
    --mn-bg:        #0c0c0f;
    --mn-surface:   #161619;
    --mn-sidebar:   #0c0c0f;
    --mn-border:    #27272a;
    --mn-text:      #fafafa;
    --mn-muted:     #a1a1aa;
    --mn-square-bg: #27272a;
    --mn-square-fg: #d4d4d8;
    --mn-active:    #1d1d21;
    --mn-hover:     #18181b;
    --mn-ink:       #fafafa;
    --mn-ink-fg:    #0c0c0f;
}

body { background: var(--mn-bg); color: var(--mn-text); min-height: 100vh; }

/* Near-black (or near-white in dark) primary buttons */
.btn-primary {
    --bs-btn-bg: var(--mn-ink); --bs-btn-border-color: var(--mn-ink);
    --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
    --bs-btn-color: var(--mn-ink-fg); --bs-btn-hover-color: var(--mn-ink-fg); --bs-btn-active-color: var(--mn-ink-fg);
    --bs-btn-disabled-bg: var(--mn-ink); --bs-btn-disabled-border-color: var(--mn-ink); --bs-btn-disabled-color: var(--mn-ink-fg);
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-hover-bg: #e4e4e7; --bs-btn-hover-border-color: #e4e4e7;
    --bs-btn-active-bg: #e4e4e7; --bs-btn-active-border-color: #e4e4e7;
}
.btn-outline-primary {
    --bs-btn-color: var(--mn-ink); --bs-btn-border-color: var(--mn-border);
    --bs-btn-hover-bg: var(--mn-ink); --bs-btn-hover-border-color: var(--mn-ink); --bs-btn-hover-color: var(--mn-ink-fg);
    --bs-btn-active-bg: var(--mn-ink); --bs-btn-active-border-color: var(--mn-ink); --bs-btn-active-color: var(--mn-ink-fg);
}
.btn-outline-secondary {
    --bs-btn-color: var(--mn-text); --bs-btn-border-color: var(--mn-border);
    --bs-btn-hover-bg: var(--mn-hover); --bs-btn-hover-border-color: var(--mn-border); --bs-btn-hover-color: var(--mn-text);
    --bs-btn-active-bg: var(--mn-active); --bs-btn-active-border-color: var(--mn-border); --bs-btn-active-color: var(--mn-text);
}

/* Plain links read as dark, not Bootstrap blue (components keep their own colours) */
:root { --bs-link-color: #27272a; --bs-link-hover-color: #000; }
[data-bs-theme="dark"] { --bs-link-color: #e4e4e7; --bs-link-hover-color: #fff; }
.min-w-0 { min-width: 0; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar { background: var(--mn-sidebar); border-right: 1px solid var(--mn-border); }
.app-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.app-main { display: flex; flex-direction: column; min-height: 100vh; }

@media (min-width: 992px) {
    .app-shell { display: flex; align-items: stretch; }
    .app-sidebar { width: var(--mn-sidebar-w); flex: 0 0 var(--mn-sidebar-w); position: sticky; top: 0; height: 100vh; }
    .app-main { flex: 1 1 auto; min-width: 0; }
}

/* Brand */
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.1rem; font-weight: 700; font-size: 1.02rem; color: var(--mn-text); text-decoration: none; }
.brand-badge { width: 30px; height: 30px; border-radius: 8px; background: var(--mn-ink); color: var(--mn-ink-fg);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }

/* Nav */
.app-nav { padding: .35rem .6rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.app-nav .nav-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px;
    color: var(--mn-muted); font-size: .92rem; font-weight: 500; }
.app-nav .nav-link .bi { font-size: 1.05rem; width: 1.1rem; text-align: center; }
.app-nav .nav-link:hover { background: var(--mn-hover); color: var(--mn-text); }
.app-nav .nav-link.active { background: var(--mn-active); color: var(--mn-text); font-weight: 600; }

/* Sidebar footer */
.app-sidebar-foot { margin-top: auto; padding: .6rem; border-top: 1px solid var(--mn-border); display: flex; flex-direction: column; gap: .4rem; }
.side-btn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 1px solid var(--mn-border);
    border-radius: 9px; background: transparent; color: var(--mn-text); font-size: .88rem; text-align: left; }
.side-btn:hover { background: var(--mn-hover); }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 9px; color: var(--mn-text);
    text-decoration: none; border: 1px solid transparent; }
.user-chip:hover { background: var(--mn-hover); }
.avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--mn-square-bg); color: var(--mn-square-fg);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }

/* ---------- Topbar ---------- */
.app-topbar { position: sticky; top: 0; z-index: 6; min-height: 62px; display: flex; align-items: center; gap: .4rem;
    padding: .6rem 1rem; background: var(--mn-surface); border-bottom: 1px solid var(--mn-border); }
.topbar-icon { width: 38px; height: 38px; border-radius: 9px; border: 0; background: transparent; color: var(--mn-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; position: relative; }
.topbar-icon:hover { background: var(--mn-hover); color: var(--mn-text); }
.topbar-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid var(--mn-surface); }

/* ---------- Content ---------- */
.app-content { padding: 1.5rem; flex: 1 1 auto; }
@media (max-width: 575px) { .app-content { padding: 1rem; } }

.section-title { font-weight: 700; letter-spacing: -.01em; color: var(--mn-text); }

/* ---------- Cards ---------- */
.card { background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; }

/* Stat card */
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--mn-square-bg); color: var(--mn-square-fg);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.stat-value.is-alert { color: #dc2626; }
.stat-label { font-size: .85rem; color: var(--mn-muted); }
.stat-delta { font-size: .78rem; color: var(--mn-muted); margin-top: .15rem; }
.stat-delta .up { color: #16a34a; } .stat-delta .down { color: #dc2626; }

/* ---------- Status helpers ---------- */
.status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.status-dot.submitted { background: #16a34a; }
.status-dot.late      { background: #d97706; }
.status-dot.missing   { background: #dc2626; }
.row-late    td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.row-missing td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* ---------- Tables ---------- */
.table-card { overflow: hidden; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .7rem .85rem; }
.table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mn-muted); font-weight: 600; border-bottom-color: var(--mn-border); }
.table > tbody > tr { border-color: var(--mn-border); }
.score-ring { font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-pill { font-variant-numeric: tabular-nums; }
canvas { max-width: 100%; }

/* Dropdowns */
.dropdown-menu { --bs-dropdown-bg: var(--mn-surface); --bs-dropdown-border-color: var(--mn-border);
    --bs-dropdown-link-hover-bg: var(--mn-hover); --bs-dropdown-link-active-bg: var(--mn-active);
    --bs-dropdown-link-active-color: var(--mn-text); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.notif-menu { width: 320px; max-width: 88vw; }
.notif-item { display: flex; gap: .6rem; padding: .6rem .9rem; }
.notif-item + .notif-item { border-top: 1px solid var(--mn-border); }

/* ---------- Auth (login / setup / recover) ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--mn-bg); }
.auth-card { width: 100%; max-width: 420px; border-radius: 18px; border: 1px solid var(--mn-border);
    background: var(--mn-surface); box-shadow: 0 24px 60px rgba(0,0,0,.10); }
.auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; }

/* Missed-report blocks */
.missed-block { border-left: 3px solid #d97706; }
.cursor-pointer { cursor: pointer; }