/* ============================================================
   Brand theme layer on top of Bootstrap 5 (self-hosted, see
   wwwroot/lib/bootstrap/). This file intentionally does NOT
   redefine things Bootstrap already does well (buttons, forms,
   cards, spacing utilities) — it overrides Bootstrap's CSS custom
   properties so those components pick up the university's colors,
   plus a small number of truly custom pieces (navbar brand sizing,
   dashboard tiles, the OTP status/temp-password displays) that
   don't map to a stock Bootstrap component.
   ============================================================ */

:root {
    --ums-primary: #2b1f3d;       /* deep plum/navy, matches the shield's inner band */
    --ums-primary-light: #40304f;
    --ums-accent: #f2871f;        /* orange, matches the shield + laurel */
    --ums-accent-dark: #d9720f;
    --ums-danger: #b3261e;
    --ums-success: #1b7f3a;
    --ums-muted: #6b7280;

    /* Re-point Bootstrap's own theme variables at the brand palette so
       .btn-primary, .bg-primary, .text-primary, .navbar-dark, .badge,
       focus rings, etc. all follow automatically. */
    --bs-primary: var(--ums-primary);
    --bs-primary-rgb: 43, 31, 61;
    --bs-link-color: var(--ums-primary);
    --bs-link-hover-color: var(--ums-primary-light);
    --bs-body-bg: #f5f7fa;
}

body { font-family: "Segoe UI", Roboto, Arial, sans-serif; }

/* ---- Left sidebar (offcanvas below lg, static fixed panel at lg+) ----
   Bootstrap's RESPONSIVE offcanvas (.offcanvas-lg) deliberately resets
   background-color to `transparent !important` once the viewport reaches
   the breakpoint — the whole point of that variant is to stop looking like
   an offcanvas drawer and become a plain static block at desktop width.
   Setting --bs-offcanvas-bg (a CSS variable) can't win against that
   !important rule, so the sidebar's dark background was silently vanishing
   above ~992px, leaving the white nav-link text with nothing to contrast
   against. #umsSidebar (an ID selector) has higher specificity than any
   class-based selector Bootstrap uses, so this wins regardless of viewport
   width or how many classes are on the element. */
#umsSidebar {
    background-color: var(--ums-primary) !important;
    width: 260px;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    #umsSidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.ums-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0;
    padding: 0.65rem 1.25rem;
}
.ums-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ums-sidebar .nav-link.active {
    background: var(--ums-accent);
    color: #fff;
    font-weight: 600;
}
.ums-nav-group-toggle {
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}
.ums-nav-group-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ums-nav-chevron { transition: transform 0.2s; display: inline-block; }
.ums-nav-group-toggle[aria-expanded="true"] .ums-nav-chevron { transform: rotate(180deg); }
.ums-sidebar .collapse .nav-link { font-size: 0.92rem; padding: 0.5rem 1.25rem; }

/* ---- Navbar: full-width brand bar pre-login; mobile-only toggle bar post-login ---- */
.ums-navbar { background-color: var(--ums-primary); }
.ums-navbar__logo { height: 34px; width: auto; display: block; }

/* ---- Buttons: brand primary + accent variant ---- */
.btn-primary {
    background-color: var(--ums-primary);
    border-color: var(--ums-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ums-primary-light);
    border-color: var(--ums-primary-light);
}
.btn-accent {
    background-color: var(--ums-accent);
    border-color: var(--ums-accent);
    color: #fff;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--ums-accent-dark);
    border-color: var(--ums-accent-dark);
    color: #fff;
}

/* ---- Cards: slightly softer shadow than Bootstrap default ---- */
.card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); border-color: #e2e6ea; }

/* ---- OTP verification status text ---- */
.ums-otp-status { color: var(--ums-success); font-weight: 600; font-size: 0.85rem; }

/* ---- Module-group header rows inside the permission matrix table ---- */
.ums-module-group th {
    background: #eef0f4;
    font-weight: 700;
}

/* ---- Temporary password display (user provisioning result) ---- */
.ums-temp-password {
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 1.25rem;
    letter-spacing: 1px;
    background: #f0f3f7;
    border: 1px dashed #ced4da;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    user-select: all;
}

/* ---- Dashboard quick-link tiles ---- */
.ums-dashboard-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    height: 100%;
}
.ums-dashboard-tile:hover {
    border-color: var(--ums-primary);
    box-shadow: 0 4px 14px rgba(43, 31, 61, 0.12);
    transform: translateY(-1px);
}
.ums-dashboard-tile__title { font-size: 1rem; font-weight: 600; color: var(--ums-primary); }
.ums-dashboard-tile__desc { font-size: 0.85rem; color: var(--ums-muted); }

/* ---- Session info panel on the dashboard ---- */
.ums-session-card .ums-session-value { font-weight: 600; }
.ums-session-card .ums-session-icon { width: 1.1em; display: inline-block; text-align: center; }

/* ---- Dashboard insights panel ---- */
.ums-insight-card {
    height: 100%;
    border-top: 4px solid var(--ums-accent-color, var(--ums-primary));
    transition: box-shadow 0.15s, transform 0.1s;
}
.ums-insight-card:hover {
    box-shadow: 0 4px 14px rgba(43, 31, 61, 0.10);
    transform: translateY(-1px);
}
.ums-insight-card--regular { --ums-accent-color: var(--ums-primary); }
.ums-insight-card--backlog { --ums-accent-color: var(--ums-accent); }
.ums-insight-card--supplementary { --ums-accent-color: #7a4fb5; }
.ums-insight-card--rechecking { --ums-accent-color: #1d7ea8; }
.ums-insight-card--marks { --ums-accent-color: var(--ums-success); }
.ums-insight-card--demandnotes { --ums-accent-color: var(--ums-danger); }

.ums-insight-icon { font-size: 1.6rem; line-height: 1; }
.ums-insight-title { font-size: 0.95rem; font-weight: 700; color: var(--ums-primary); }

.ums-insight-stats { display: flex; gap: 0.75rem; margin: 0.75rem 0 0.5rem; }
.ums-insight-stat { flex: 1; text-align: center; padding: 0.4rem 0.25rem; border-radius: 6px; background: #f5f7fa; }
.ums-insight-stat__value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.ums-insight-stat__label { font-size: 0.7rem; color: var(--ums-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ums-insight-stat--eligible .ums-insight-stat__value { color: var(--ums-primary); }
.ums-insight-stat--registered .ums-insight-stat__value { color: var(--ums-success); }
.ums-insight-stat--unregistered .ums-insight-stat__value { color: var(--ums-danger); }

.ums-insight-progress { height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden; margin-top: 0.25rem; }
.ums-insight-progress__fill { height: 100%; background: var(--ums-success); border-radius: 4px; transition: width 0.3s; }
.ums-insight-progress__label { font-size: 0.72rem; color: var(--ums-muted); margin-top: 0.2rem; }

.ums-insight-toggle { font-size: 0.78rem; }
.ums-insight-detail-table { font-size: 0.82rem; }
.ums-insight-detail-table th { font-weight: 600; color: var(--ums-muted); font-size: 0.72rem; text-transform: uppercase; }

/* ---- Toast (used by the permission matrix save flow) ---- */
.ums-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
}

/* ---- Dark mode touch-ups ----
   Bootstrap's own components (.card, .table, .form-control, .badge, .alert,
   .modal, etc.) already re-theme automatically via [data-bs-theme="dark"] —
   these overrides are only for the handful of custom classes above that use
   hardcoded light-mode colors instead of Bootstrap's theme-aware variables.
   The sidebar itself is NOT touched here — it stays the same dark plum/navy
   regardless of theme, the same way many admin UIs keep a persistently dark
   nav rail independent of the content area's light/dark setting. */
[data-bs-theme="dark"] .ums-module-group th { background: #2a2a2e; }
[data-bs-theme="dark"] .ums-temp-password {
    background: #2a2a2e;
    border-color: #495057;
    color: #f1f1f1;
}
[data-bs-theme="dark"] .card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-color: #3a3a3e; }