/* Theme variables */
:root {
  --bg: #f4f7fb;
  --sidebar-bg: linear-gradient(180deg,#0b3d91,#0d6efd);
  --accent: #1b6ec2;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --surface-contrast: rgba(0,0,0,0.06);
  --radius: 8px;
}

/* Dark theme overrides applied when .ne-dark is on the documentElement */
.ne-dark {
  /* Slightly lighter dark theme for better contrast and reduced purple */
  --bg: #0f1724; /* deep navy blue */
  --sidebar-bg: linear-gradient(180deg,#0c2033,#0d2b44); /* softer than pure purple */
  --accent: #5fc0ff; /* brighter, lighter accent */
  --muted: #9fb0bd;
  --card-bg: #0b1b2a; /* lifted from near-black */
  --surface-contrast: rgba(255,255,255,0.06);
  --radius: 8px;
  color-scheme: dark;
}

/* Dark-mode component adjustments (so cards aren't pure black/purple) */
.ne-dark .card {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(11,27,42,0.8));
    border-color: rgba(255,255,255,0.04);
    color: #dbeefc; /* soft light text */
    box-shadow: 0 6px 18px rgba(2,8,23,0.45);
}

.ne-dark .card-header {
    background: linear-gradient(90deg, rgba(95,192,255,0.06), rgba(20,60,90,0.03));
    color: #e8fbff;
}

/* Inputs and textareas: lighter backgrounds for editability */
.ne-dark .form-control,
.ne-dark textarea,
.ne-dark input,
.ne-dark .mud-input-root,
.ne-dark .mud-input-control {
    background: rgba(255,255,255,0.03);
    color: #dbeefc;
    border: 1px solid rgba(255,255,255,0.06);
}

.ne-dark textarea::placeholder,
.ne-dark input::placeholder {
    color: rgba(219,238,252,0.55);
}

/* MudBlazor specific tweaks (fallbacks) */
.ne-dark .mud-paper,
.ne-dark .mud-card,
.ne-dark .mud-table {
    background: rgba(11,27,42,0.9) !important;
    color: #dbeefc !important;
}

/* Questionnaire table / cards highlights */
.ne-dark .questionnaire-matrix thead th {
    background-color: rgba(95,192,255,0.04);
    color: #cfeaff;
}
.ne-dark .questionnaire-matrix td {
    background: transparent;
}

/* Buttons: keep accent for highlights but not full white text */
.ne-dark .btn-primary {
    color: #061220;
    background: linear-gradient(180deg,var(--accent),#2aa3d9);
    border-color: rgba(255,255,255,0.06);
}

.ne-dark .btn-outline-primary {
    color: var(--accent);
    border-color: rgba(95,192,255,0.22);
}

/* Nav link hover/active tweaks to keep contrast without full black */
.ne-dark .nav-link:hover {
    background: rgba(95,192,255,0.06) !important;
    color: #eaf6ff !important;
}

/* Subtle focus outline using accent */
.ne-dark :focus { outline: 3px solid rgba(95,192,255,0.10); outline-offset: 2px; }

/* Override Bootstrap utility class bg-light when in dark mode */
.ne-dark .bg-light {
    background-color: rgba(255,255,255,0.02) !important;
    color: #dbeefc !important;
}

/* Specifically target card headers that use bg-light so they match dark theme */
.ne-dark .card-header.bg-light,
.ne-dark .card-header.bg-light.d-flex,
.ne-dark .card-header.bg-light.d-flex.justify-content-between {
    background: linear-gradient(90deg, rgba(95,192,255,0.03), rgba(11,27,42,0.06)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    color: #e8fbff !important;
}

/* Ensure links/buttons inside header remain readable */
.ne-dark .card-header.bg-light a,
.ne-dark .card-header.bg-light .btn,
.ne-dark .card-header.bg-light .btn-link {
    color: #dbeefc !important;
}

/* Ensure muted/small text is readable in dark mode (e.g., chart headers) */
.ne-dark .text-muted,
.ne-dark small.text-muted,
.ne-dark .small.text-muted {
    color: rgba(255,255,255,0.9) !important;
}

/* Headings should be light in dark mode */
.ne-dark h1,
.ne-dark h2,
.ne-dark h3,
.ne-dark h4,
.ne-dark h5,
.ne-dark h6 {
    color: #ffffff !important;
}

/* Reset and base */
html, body {
    height: 100%;
    margin: 0;
    font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: #1f2937;
    -webkit-font-smoothing:antialiased;
}

a, .btn-link {
    color: var(--accent);
}

/* Page layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 1 auto;
    padding: 0.0rem 0em 0rem 0rem;
}

.top-row {
    min-height: 3.5rem;
    background: transparent;
    color: #fff;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* Content surface */
.content {
    padding-top: 0.1rem;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--surface-contrast);
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header {
    font-weight: 600;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(13,110,253,0.06), rgba(27,110,194,0.03));
}

.card-body {
    padding: 1rem;
}

/* Tables */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.04);
}

.badge {
    font-weight: 500;
}

/* Buttons */
.btn {
    transition: transform .12s ease, box-shadow .12s ease;
    border-radius: 6px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg,var(--accent),#1460ad);
    border-color: rgba(0,0,0,0.06);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: rgba(27,110,194,0.16);
}

/* Forms */
.form-control:focus {
    box-shadow: 0 0 0 0.12rem rgba(27,110,194,0.12);
    border-color: var(--accent);
}

.validation-message {
    color: #c92a2a;
}

/* Questionnaire matrix */
.questionnaire-matrix {
    font-size: 14px;
}

.questionnaire-matrix thead th {
    background-color: #eef3fb;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.questionnaire-matrix td {
    vertical-align: middle;
    padding: 12px;
}

/* Nav adjustments (keep contrast on dark sidebar) */
.nav-link {
    color: rgba(255,255,255,0.92) !important;
}

.nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
}

.navbar-brand {
    color: white !important;
    font-weight: 700;
}

/* Responsive tweaks */
@media (max-width: 640px) {
    .page { flex-direction: column; }
}

/* Mobile-first adjustments */
@media (max-width: 576px) {
    .page {
        flex-direction: column;
        padding: 0.5rem;
    }

    main {
        padding: 0.5rem;
    }

    a, .btn-link {
        font-size: 0.9rem;
    }
}

/* Full-bleed chart cards on mobile */
@media (max-width: 767.98px) {
    .card:has(canvas) {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
    }
    .card:has(canvas) .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Small helpers */
.text-muted { color: var(--muted); }
.center { text-align:center; }

/* Error boundary style */
.blazor-error-boundary { background: linear-gradient(90deg,#ffefef,#fff); border-left:4px solid #b32121; padding:1rem; }

/* subtle focus outlines for accessibility */
:focus { outline: 3px solid rgba(27,110,194,0.14); outline-offset: 2px; }

/* MoodCheckin spider-chart label visibility — these rules live globally
   because the <text> elements are emitted via MarkupString and don't pick
   up Blazor's scoped-CSS attribute. Desktop shows full names; mobile
   collapses to single letters and the legend strip carries the names. */
.spider-label--short { display: none; }
.spider-label--long  { display: block; }

@media (max-width: 767.98px) {
    .spider-label--long  { display: none; }
    .spider-label--short { display: block; }
}