/* ============================================================
   KONFUCJUSZ — VISUAL THEME
   Navy & Amber · modern soft-depth · light + dark mode
   ------------------------------------------------------------
   Architecture (best practice — design tokens):
     1. @font-face .................. self-hosted Inter
     2. Brand tokens ................ navy + amber scales (constant)
     3. Semantic tokens ............. surfaces/text/borders (flip in dark)
     4. [data-theme="dark"] ......... re-points semantic tokens only
     5. Bootstrap variable mapping .. drives BS components
     6. Component overrides ......... buttons/cards/tables/badges/...

   To re-theme: change the navy/amber scales (§2) and the
   semantic tokens (§3 + dark block). See THEME-GUIDE.md.
   ============================================================ */

/* ===========================================================
   1. FONTS — self-hosted Inter (no external CDN)
   =========================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ===========================================================
   2. BRAND TOKENS — navy + amber scales (constant in both modes)
   =========================================================== */
:root {
    /* Navy (primary brand / app shell) */
    --navy-900: #0A1F38;   /* sidebar deep */
    --navy-800: #0F2A4A;   /* primary */
    --navy-700: #143A63;
    --navy-600: #1B4A7E;
    --navy-500: #265E9A;
    --navy-400: #4A7FB5;
    --navy-300: #7BA3CC;
    --navy-200: #B3CAE0;
    --navy-100: #DCE7F1;
    --navy-50:  #EFF4F9;

    /* Amber (accent / CTA) */
    --amber-700: #B45309;
    --amber-600: #D97706;  /* hover */
    --amber-500: #F59E0B;  /* accent */
    --amber-400: #FBBF24;
    --amber-300: #FCD34D;
    --amber-100: #FEF3C7;

    /* Type, radii, motion */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --radius-sm: 0.5rem;
    --radius:    0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 50rem;
    --transition: 150ms ease;

    /* Spacing scale (4px base — SaaS rhythm) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.0625rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* =======================================================
       3. SEMANTIC TOKENS — light mode (default)
       ======================================================= */
    --app-bg: linear-gradient(180deg, #F8FAFD 0%, #EDF2F8 100%);
    --bg: #F6F8FB;
    --surface: #FFFFFF;
    --surface-2: #EEF3F8;
    --card-bg: #FFFFFF;
    --input-bg: #FFFFFF;

    --text: #1A2433;
    --text-muted: #5A6B82;
    --heading-color: var(--navy-800);

    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-subtle: #EDF1F6;

    --link: var(--navy-600);
    --link-hover: var(--amber-600);

    --sidebar-bg: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --topbar-bg: #FFFFFF;
    --topbar-border: var(--border);

    --ring: 0 0 0 0.2rem rgba(38, 94, 154, 0.25);
    --ring-accent: 0 0 0 0.2rem rgba(245, 158, 11, 0.40);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 16px 32px -12px rgba(15, 23, 42, 0.18);

    /* Table density */
    --table-cell-py: 0.6rem;
    --table-cell-px: 0.85rem;
    --table-header-bg: #F8FAFC;
    --table-header-color: var(--text-muted);
    --table-row-hover: rgba(15, 42, 74, 0.035);

    /* =======================================================
       5. BOOTSTRAP VARIABLE MAPPING
       (RGB triplets MUST stay in sync with the hex above —
        Bootstrap utilities read the *-rgb forms.)
       ======================================================= */
    --bs-primary: var(--navy-800);
    --bs-primary-rgb: 15, 42, 74;
    --bs-secondary: #64748B;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #FBBF24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-info: #38BDF8;
    --bs-info-rgb: 56, 189, 248;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-heading-color: var(--heading-color);
    --bs-border-color: var(--border);
    --bs-link-color: var(--link);
    --bs-link-hover-color: var(--link-hover);
    --bs-font-sans-serif: var(--font-sans);
    --bs-emphasis-color: var(--heading-color);

    /* =======================================================
       LEGACY ALIASES (kept so any stray references still work)
       ======================================================= */
    --color-primary-base: var(--navy-800);
    --color-secondary-base: var(--navy-600);
    --color-accent-base: var(--amber-500);
    --color-text-link: var(--link);
    --color-text-on-primary: #fff;
    --color-text-on-dark: #fff;
    --color-focus-ring: var(--amber-500);
    --color-text-error: var(--bs-danger);
    --color-bg-error: var(--bs-danger);
    --color-border-default: var(--border);
    --bs-body-bg-input: var(--input-bg);
    --spacing-content-top: 1.25rem;
}

/* ===========================================================
   4. DARK MODE — re-point semantic tokens only
   =========================================================== */
[data-theme="dark"] {
    --app-bg: linear-gradient(180deg, #0B1626 0%, #0A1322 100%);
    --bg: #0B1626;
    --surface: #122237;
    --surface-2: #0F1D30;
    --card-bg: #122237;
    --input-bg: #0F1D30;

    --text: #E6EDF5;
    --text-muted: #9FB0C4;
    --heading-color: #EAF1FA;

    --border: #243349;
    --border-strong: #324863;
    --border-subtle: #1B2940;

    --link: var(--navy-200);
    --link-hover: var(--amber-400);

    --topbar-bg: #0E1B2D;
    --topbar-border: #1E2D42;

    --ring: 0 0 0 0.2rem rgba(123, 163, 204, 0.30);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 16px 32px -10px rgba(0, 0, 0, 0.60);

    --table-header-bg: #0F1D30;
    --table-header-color: var(--text-muted);
    --table-row-hover: rgba(255, 255, 255, 0.04);

    /* keep Bootstrap body vars in sync with the dark semantics */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-heading-color: var(--heading-color);
    --bs-border-color: var(--border);
    --bs-emphasis-color: var(--heading-color);
}

/* ===========================================================
   6. BASE ELEMENTS
   =========================================================== */
html, body {
    font-family: var(--font-sans);
}

body {
    color: var(--text);
    background: var(--bg);
    background: var(--app-bg);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1:focus { outline: none; }

a, .btn-link {
    color: var(--link);
    text-decoration: none;
    transition: color var(--transition);
}

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

hr { border-color: var(--border); opacity: 1; }

.text-muted { color: var(--text-muted) !important; }
.border { border-color: var(--border) !important; }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary = amber CTA (dark text for contrast on amber) */
.btn-primary {
    background-color: var(--amber-500);
    border-color: var(--amber-500);
    color: #1A2433;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--amber-600);
    border-color: var(--amber-600);
    color: #1A2433;
}
.btn-primary:active,
.btn-primary.active {
    background-color: var(--amber-700);
    border-color: var(--amber-700);
    color: #fff;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--amber-300);
    border-color: var(--amber-300);
    color: #6B5012;
}

/* Outline primary = navy (calm brand secondary) */
.btn-outline-primary {
    color: var(--navy-700);
    border-color: var(--navy-600);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}

/* Semantic buttons harmonised to the palette */
.btn-secondary  { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.btn-secondary:hover { background-color: #55657c; border-color: #55657c; color: #fff; }
.btn-success    { background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.btn-success:hover { background-color: #14704a; border-color: #14704a; color: #fff; }
.btn-danger     { background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.btn-danger:hover  { background-color: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-warning    { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #3A2A00; }
.btn-warning:hover { background-color: #f0ae12; border-color: #f0ae12; color: #3A2A00; }
.btn-info       { background-color: var(--bs-info); border-color: var(--bs-info); color: #06283D; }
.btn-info:hover    { background-color: #1aa7e8; border-color: #1aa7e8; color: #06283D; }

.btn-sm { border-radius: calc(var(--radius-sm) - 2px); }
.btn-lg { border-radius: var(--radius); }

/* Focus rings */
.btn:focus-visible,
.btn.focus { box-shadow: var(--ring); outline: none; }
.btn-primary:focus-visible { box-shadow: var(--ring-accent); }

/* ===========================================================
   CARDS
   =========================================================== */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--heading-color);
}

.card .card-footer {
    border-top: 1px solid var(--border);
}

.card-title { color: var(--heading-color); }
.card-subtitle, .card-text .text-muted { color: var(--text-muted); }

/* coloured status borders used across event/participation cards */
.card.border-success { border-color: var(--bs-success) !important; }
.card.border-warning { border-color: var(--bs-warning) !important; }
.card.border-info    { border-color: var(--bs-info) !important; }
.card.border-danger  { border-color: var(--bs-danger) !important; }
.card.border-primary { border-color: var(--navy-600) !important; }

/* ===========================================================
   TABLES (variable-driven in BS 5.1 — theme via --bs-table-*)
   =========================================================== */
.table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(15, 42, 74, 0.04);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: var(--table-row-hover);
    color: var(--text);
    border-color: var(--border);
    font-size: var(--text-sm);
}

.table > :not(caption) > * > * {
    padding: var(--table-cell-py) var(--table-cell-px);
}

.table > thead > tr > th {
    vertical-align: middle;
}

/* quiet, uppercase column headers (SaaS table style) — only when NOT table-dark */
.table:not(.table-dark) > thead:not(.table-dark) > tr > th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

/* navy headers (markup uses thead.table-dark) */
.table-dark {
    --bs-table-bg: var(--navy-800);
    --bs-table-color: #fff;
    --bs-table-border-color: var(--navy-700);
    color: #fff;
}
.table-dark > tr > th,
.table thead.table-dark > tr > th {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-table-border-color: var(--border);
}
[data-theme="dark"] .table-dark {
    --bs-table-bg: var(--navy-900);
    --bs-table-border-color: #1d3354;
}

/* ===========================================================
   FORMS
   =========================================================== */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--navy-500);
    color: var(--text);
    box-shadow: var(--ring);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

.form-label { color: var(--text); font-weight: 500; }
.form-text { color: var(--text-muted); }

.form-check-input {
    border-color: var(--border-strong);
    background-color: var(--input-bg);
}
.form-check-input:checked {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}
.form-check-input:focus {
    border-color: var(--navy-500);
    box-shadow: var(--ring);
}
.darker-border-checkbox.form-check-input { border-color: var(--border-strong); }

[data-theme="dark"] .form-select {
    /* recolour the native chevron for dark inputs */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239FB0C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ===========================================================
   BADGES
   =========================================================== */
.badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.4em 0.7em;
    letter-spacing: 0.01em;
}
.badge.bg-primary   { background-color: var(--navy-700) !important; color: #fff; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; color: #fff; }
.badge.bg-success   { background-color: var(--bs-success) !important; color: #fff; }
.badge.bg-danger    { background-color: var(--bs-danger) !important; color: #fff; }
.badge.bg-warning   { background-color: var(--bs-warning) !important; color: #3A2A00; }
.badge.bg-info      { background-color: var(--bs-info) !important; color: #06283D; }

/* ===========================================================
   ALERTS (BS 5.1 bakes colours in — override per variant)
   =========================================================== */
.alert { border-radius: var(--radius); border-width: 1px; }
.alert-success { background-color: #E6F4EC; border-color: #BBE0C9; color: #14543A; }
.alert-danger  { background-color: #FBEAEA; border-color: #F3C2C2; color: #8E1B1B; }
.alert-warning { background-color: #FEF6E0; border-color: #F8E3A6; color: #6B4E00; }
.alert-info    { background-color: #E6F6FE; border-color: #B9E6FB; color: #0B4E6E; }

[data-theme="dark"] .alert-success { background-color: rgba(25, 135, 84, 0.16); border-color: rgba(25, 135, 84, 0.40); color: #8FE3B6; }
[data-theme="dark"] .alert-danger  { background-color: rgba(220, 38, 38, 0.16); border-color: rgba(220, 38, 38, 0.40); color: #F5A8A8; }
[data-theme="dark"] .alert-warning { background-color: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.40); color: #F8D98A; }
[data-theme="dark"] .alert-info    { background-color: rgba(56, 189, 248, 0.16); border-color: rgba(56, 189, 248, 0.40); color: #9DDDFB; }

/* ===========================================================
   MODALS / DROPDOWNS / LIST GROUPS
   =========================================================== */
.modal-content,
.dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background-color: var(--surface-2); color: var(--text); }

.list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* ===========================================================
   LAYOUT
   =========================================================== */
.content {
    padding-top: var(--spacing-content-top);
}

/* ===========================================================
   VALIDATION
   =========================================================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bs-success);
}
.invalid {
    outline: 1px solid var(--bs-danger);
}
.validation-message {
    color: var(--bs-danger);
    font-size: 0.875rem;
}

/* ===========================================================
   ERROR BOUNDARY
   =========================================================== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--bs-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
    border-radius: var(--radius-sm);
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ===========================================================
   MOTION PREFERENCES — disable transforms/transitions
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover { transform: none; }
}