@font-face {
    font-family: 'Lato Rubix';
    src: url('/themes/fonts/lato/lato-regular-webfont.woff2') format('woff2'),
         url('/themes/fonts/lato/lato-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato Rubix';
    src: url('/themes/fonts/lato/lato-bold-webfont.woff2') format('woff2'),
         url('/themes/fonts/lato/lato-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-ui-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-ui-en: 'IBM Plex Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-quote: 'Amiri Field', 'IBM Plex Sans Arabic', Georgia, serif;
    --font-ui-current: var(--font-ui-en);
    --font-heading-weight: 600;
    --font-heading-weight-strong: 600;
    --font-body-line-height: 1.68;
    --font-heading-line-height: 1.28;
    --font-compact-line-height: 1.42;
    --space-field-1: .25rem;
    --space-field-2: .5rem;
    --space-field-3: .75rem;
    --space-field-4: 1rem;
    --space-field-5: 1.25rem;
    --space-field-6: 1.5rem;
    --space-field-8: 2rem;
    --space-field-10: 2.5rem;
    --bg-main: #eef3f4;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --text-main: #24323b;
    --text-muted: #5f6c76;
    --text-soft: #6f7d87;
    --border-soft: #d7e2e2;
    --accent: #1e6f7c;
    --accent-strong: #144c67;
    --button-bg: #1e6f7c;
    --button-text: #ffffff;
    --input-bg: #ffffff;
    --input-text: #24323b;
    --input-border: #bfd0cf;
    --nav-bg: #ffffff;
    --nav-text: #24323b;
    --focus-ring: rgba(30, 111, 124, .18);
    --danger: #b42318;
    --danger-soft: rgba(180, 35, 24, .10);
    --warning: #946200;
    --warning-soft: rgba(197, 140, 53, .14);
    --success: #2f6b3f;
    --success-soft: rgba(47, 107, 63, .12);
    --rbx-body: #eef3f4;
    --rbx-surface: #ffffff;
    --rbx-surface-soft: #f6faf9;
    --rbx-border: #d7e2e2;
    --rbx-border-strong: #bfd0cf;
    --rbx-text: #2f3b46;
    --rbx-muted: #6b7883;
    --rbx-heading: #12385d;
    --rbx-primary: #1e6f7c;
    --rbx-primary-dark: #144c67;
    --rbx-secondary: #5f6f43;
    --rbx-accent: #c58c35;
    --rbx-accent-soft: #f4e5c8;
    --rbx-sidebar-bg: #163a5c;
    --rbx-sidebar-surface: #1b476f;
    --rbx-sidebar-text: #eaf2f4;
    --rbx-sidebar-muted: #bed2d8;
    --rbx-sidebar-active: #ffffff;
    --rbx-shadow: 0 18px 34px rgba(18, 56, 93, 0.075);
    --rbx-shadow-soft: 0 8px 20px rgba(18, 56, 93, 0.045);
    --rbx-sidebar-width: 84px;
    --rbx-radius: 18px;
    --rbx-radius-sm: 12px;
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg-main: #16242c;
    --bg-surface: #20313a;
    --bg-card: #20313a;
    --text-main: #eef6f4;
    --text-muted: #c0d0cc;
    --text-soft: #d7e5e4;
    --border-soft: #3a515b;
    --accent: #7bc9c4;
    --accent-strong: #9ee7df;
    --button-bg: #7bc9c4;
    --button-text: #10242b;
    --input-bg: #182a33;
    --input-text: #eef6f4;
    --input-border: #4b6671;
    --nav-bg: #1b2c36;
    --nav-text: #eef6f4;
    --focus-ring: rgba(123, 201, 196, .24);
    --danger: #ffb4ab;
    --danger-soft: rgba(242, 139, 130, .18);
    --warning: #f4d08a;
    --warning-soft: rgba(226, 180, 95, .18);
    --success: #b8efd8;
    --success-soft: rgba(123, 201, 196, .16);
    --rbx-body: #16242c;
    --rbx-surface: #20313a;
    --rbx-surface-soft: #263a43;
    --rbx-border: #3a515b;
    --rbx-border-strong: #4b6671;
    --rbx-text: #eef6f4;
    --rbx-muted: #c0d0cc;
    --rbx-heading: #ffffff;
    --rbx-primary: #7bc9c4;
    --rbx-primary-dark: #5fb2ad;
    --rbx-secondary: #c0cc8b;
    --rbx-accent: #e2b45f;
    --rbx-accent-soft: #4c442c;
    --rbx-sidebar-bg: #123654;
    --rbx-sidebar-surface: #1a4667;
    --rbx-sidebar-text: #f2f7f8;
    --rbx-sidebar-muted: #c3d5da;
    --rbx-sidebar-active: #f4fbfb;
    --rbx-shadow: 0 18px 34px rgba(0, 0, 0, 0.20);
    --rbx-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.14);
    color-scheme: dark;
}

html,
body {
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-ui-current);
    line-height: var(--font-body-line-height);
    min-height: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html[lang="ar"],
html[dir="rtl"] {
    --font-ui-current: var(--font-ui-ar);
}

html[lang="en"],
html[dir="ltr"] {
    --font-ui-current: var(--font-ui-en);
}

html[data-theme="light"],
html[data-theme="light"] body {
    background: var(--bg-main);
    color: var(--text-main);
    color-scheme: light;
}

body {
    margin: 0;
}

html[lang="ar"] body {
    font-family: var(--font-ui-ar);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-ui-current);
    font-weight: var(--font-heading-weight);
    line-height: var(--font-heading-line-height);
    letter-spacing: 0;
}

.fw-semibold,
.fw-bold,
strong {
    font-weight: var(--font-heading-weight-strong);
}

.font-quote,
.font-epigraph,
.font-mission {
    font-family: var(--font-quote);
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0;
}

a {
    color: var(--rbx-primary);
    text-decoration: none;
}

a:hover {
    color: var(--rbx-primary-dark);
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-shell {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    background:
        radial-gradient(circle at top right, rgba(30, 111, 124, 0.08), transparent 24%),
        radial-gradient(circle at top left, rgba(197, 140, 53, 0.08), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 72%, var(--bg-surface) 28%) 0%, var(--bg-main) 100%);
}

html[data-theme="dark"] .app-shell {
    background:
        radial-gradient(circle at top right, rgba(123, 201, 196, 0.08), transparent 26%),
        radial-gradient(circle at top left, rgba(226, 180, 95, 0.06), transparent 20%),
        linear-gradient(180deg, #1a2a33 0%, #16242c 100%);
}

.rbx-layout {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
}

.rbx-sidebar {
    width: var(--rbx-sidebar-width);
    min-width: var(--rbx-sidebar-width);
    max-width: var(--rbx-sidebar-width);
    background: linear-gradient(180deg, var(--rbx-sidebar-bg) 0%, #0f2f4d 100%);
    color: var(--rbx-sidebar-text);
    padding: 1rem .6rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1020;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}

.rbx-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #fff;
}

.rbx-brand:hover {
    color: #fff;
}

.rbx-brand-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

.rbx-nav {
    display: grid;
    gap: .7rem;
    justify-items: center;
}

.rbx-nav-link {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--rbx-sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    transition: .18s ease-in-out;
    flex: 0 0 auto;
}

.rbx-nav-link:hover,
.rbx-nav-link:focus {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.08);
}

.rbx-nav-link.active {
    color: var(--rbx-primary-dark);
    background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 90%, var(--accent) 10%) 100%);
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 12px 24px rgba(18, 56, 93, 0.22);
}

.rbx-nav-icon {
    font-size: 1.18rem;
    line-height: 1;
}

.rbx-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100vw - var(--rbx-sidebar-width));
    overflow-x: clip;
}

.rbx-topbar {
    position: sticky;
    top: 0;
    z-index: 1010;
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
    border-bottom: 1px solid var(--border-soft);
}

html[data-theme="dark"] .rbx-topbar {
    background: rgba(27, 44, 54, .94);
    border-bottom-color: var(--rbx-border);
}

.rbx-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.rbx-topbar-brand {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f8fbfb 0%, #eef6f5 100%);
    border: 1px solid rgba(191, 208, 207, .85);
    box-shadow: var(--rbx-shadow-soft);
}

html[data-theme="dark"] .rbx-topbar-brand {
    background: linear-gradient(180deg, #243a44 0%, #1c3039 100%);
}

.rbx-topbar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.rbx-topbar-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--rbx-heading);
    margin: 0;
}

.rbx-topbar-subtitle {
    font-size: .9rem;
    color: var(--rbx-muted);
}

.rbx-topbar-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: nowrap;
}

.rbx-topbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    max-width: 220px;
}

.rbx-topbar-user-name {
    color: var(--rbx-heading);
    font-weight: 700;
    line-height: 1.2;
}

.rbx-topbar-user-role {
    color: var(--rbx-muted);
    font-size: .82rem;
}

.rbx-gaza-clock {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .38rem .78rem;
    border: 1px solid var(--rbx-border-strong);
    border-radius: 12px;
    color: var(--rbx-heading);
    background: color-mix(in srgb, var(--rbx-surface) 88%, var(--rbx-primary) 12%);
    font-weight: 700;
    white-space: nowrap;
}

.rbx-gaza-clock > i {
    color: var(--rbx-primary);
    font-size: 1.05rem;
}

.rbx-gaza-clock-value {
    min-width: 82px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.05;
}

[dir="rtl"] .rbx-gaza-clock-value {
    align-items: flex-end;
}

.rbx-gaza-clock-time {
    font-variant-numeric: tabular-nums;
    font-size: .92rem;
    color: var(--rbx-heading);
}

.rbx-gaza-clock-date {
    margin-top: .18rem;
    color: var(--rbx-muted);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rbx-topbar-menu {
    min-width: 270px;
    padding: .55rem;
}

.rbx-menu-user {
    padding: .65rem .8rem .75rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--rbx-border);
}

.rbx-main-menu .dropdown-toggle {
    min-width: 112px;
    justify-content: center;
}

.rbx-content {
    padding: 1.5rem;
    max-width: 100%;
    overflow-x: clip;
}

.rbx-content > * {
    max-width: 100%;
}

.card,
.card-soft {
    border: 1px solid var(--rbx-border) !important;
    border-radius: var(--rbx-radius) !important;
    box-shadow: var(--rbx-shadow-soft);
    background: var(--bg-card);
    color: var(--text-main);
}

.card,
.card-soft,
.dashboard-hero,
.hero-soft,
.metric-card,
.spotlight-card,
.mini-stat,
.review-card,
.question-card,
.review-section-card,
.survey-shell {
    letter-spacing: 0;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--rbx-text);
    background-color: transparent;
    border-color: var(--rbx-border);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-soft,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .live-card,
html[data-theme="dark"] .spotlight-card,
html[data-theme="dark"] .mini-stat,
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .rbx-data-tools,
html[data-theme="dark"] .rbx-logo-showcase {
    color: var(--rbx-text) !important;
    background: var(--rbx-surface) !important;
    border-color: var(--rbx-border) !important;
    box-shadow: var(--rbx-shadow-soft);
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .card-soft .card-header,
html[data-theme="dark"] thead {
    background: var(--rbx-surface-soft) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6,
html[data-theme="dark"] .fw-semibold,
html[data-theme="dark"] .fw-bold,
html[data-theme="dark"] strong {
    color: var(--rbx-heading) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text {
    color: var(--rbx-muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    color: var(--input-text);
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: var(--input-text);
    background-color: var(--input-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(103, 198, 196, .18);
}

html[data-theme="dark"] .form-check-input {
    background-color: #f4fbfa;
    border-color: #d7e5e4;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: #e2b45f;
    border-color: #ffe0a0;
    box-shadow: 0 0 0 .18rem rgba(226, 180, 95, .28);
}

html[data-theme="dark"] .form-check-input:focus {
    border-color: #ffe0a0;
    box-shadow: 0 0 0 .22rem rgba(226, 180, 95, .32);
}

html[data-theme="dark"] .survey-option:has(.form-check-input:checked) {
    color: #ffffff !important;
}

html[data-theme="dark"] .survey-option:has(.form-check-input:checked) .form-check-label {
    color: #fff7df !important;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(226, 180, 95, .22);
}

html[data-theme="dark"] .btn-outline-dark {
    color: var(--rbx-text);
    border-color: var(--rbx-border-strong);
}

html[data-theme="dark"] .btn-outline-dark:hover {
    color: #071827;
    background: var(--rbx-primary);
    border-color: var(--rbx-primary);
}

html[data-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--rbx-primary);
    --bs-btn-border-color: #517176;
    --bs-btn-hover-bg: var(--rbx-primary);
    --bs-btn-hover-border-color: var(--rbx-primary);
    --bs-btn-hover-color: #10242b;
}

html[data-theme="dark"] .btn-success {
    --bs-btn-color: #10242b;
    --bs-btn-bg: var(--rbx-primary);
    --bs-btn-border-color: var(--rbx-primary);
    --bs-btn-hover-bg: #8fdad6;
    --bs-btn-hover-border-color: #8fdad6;
}

html[data-theme="dark"] .rbx-gaza-clock {
    background: rgba(123, 201, 196, .10);
    border-color: var(--rbx-border-strong);
}

.rbx-data-tools {
    background: var(--rbx-surface);
    border: 1px solid var(--rbx-border);
    border-radius: var(--rbx-radius);
    box-shadow: var(--rbx-shadow-soft);
    padding: 1rem;
}

.rbx-import-form {
    max-width: 760px;
}

.rbx-file-upload {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    padding: .45rem;
    border: 1px solid var(--rbx-border-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--rbx-surface) 88%, var(--rbx-primary) 12%);
}

.rbx-file-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.rbx-file-trigger,
.rbx-file-name {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
}

.rbx-file-trigger {
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    color: #10242b;
    background: var(--rbx-primary);
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.rbx-file-trigger:hover {
    background: #8fdad6;
    box-shadow: 0 10px 24px rgba(30, 111, 124, .18);
    transform: translateY(-1px);
}

.rbx-file-input:focus-visible + .rbx-file-trigger {
    outline: 3px solid rgba(111, 203, 198, .35);
    outline-offset: 2px;
}

.rbx-file-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .9rem;
    background: var(--rbx-surface);
    border: 1px dashed var(--rbx-border-strong);
    color: var(--rbx-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="dark"] .rbx-file-upload {
    background: rgba(108, 201, 196, .08);
    border-color: rgba(151, 203, 198, .35);
}

html[data-theme="dark"] .rbx-file-name {
    background: rgba(15, 44, 54, .96);
    border-color: rgba(151, 203, 198, .35);
    color: #f4fbfa;
}

@media (max-width: 640px) {
    .rbx-file-upload {
        flex-direction: column;
    }

    .rbx-file-trigger,
    .rbx-file-name,
    .rbx-file-upload .btn {
        width: 100%;
        justify-content: center;
    }
}

.rbx-control-dropdown .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.rbx-control-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 38px;
    font-weight: 600;
}

.rbx-control-dropdown .dropdown-item.active,
.rbx-control-dropdown .dropdown-item:active {
    background: var(--rbx-primary);
    color: #fff;
}

html[data-theme="dark"] .rbx-control-dropdown .dropdown-item.active,
html[data-theme="dark"] .rbx-control-dropdown .dropdown-item:active {
    color: #10242b;
}

.card .card-body {
    padding: var(--space-field-6);
}

.dashboard-hero,
.hero-soft {
    background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%) 56%, color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%) 100%) !important;
    border: 1px solid var(--rbx-border) !important;
    box-shadow: var(--rbx-shadow-soft);
    padding-block: var(--space-field-6);
}

.metric-card,
.spotlight-card,
.mini-stat {
    background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 96%, var(--accent) 4%) 100%) !important;
    border: 1px solid var(--rbx-border) !important;
    border-radius: var(--rbx-radius) !important;
    box-shadow: var(--rbx-shadow-soft);
}

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 14px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rbx-border);
    margin-bottom: 0;
    color: var(--rbx-text);
}

.table thead th {
    background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
    color: var(--rbx-heading);
    font-weight: 700;
}

.table td,
.table th {
    padding: .9rem 1rem;
    vertical-align: middle;
    line-height: var(--font-compact-line-height);
}

.form-control,
.form-select,
.form-check-input,
.btn,
.dropdown-menu,
.alert,
.badge,
.input-group-text {
    border-radius: 12px;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 48px;
    border-color: var(--rbx-border-strong);
    box-shadow: none !important;
    color: var(--input-text);
    background-color: var(--input-bg);
    line-height: var(--font-compact-line-height);
}

.form-control,
.form-select {
    --bs-body-color: var(--input-text);
    --bs-body-bg: var(--input-bg);
    --bs-border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
    color: var(--input-text);
    background-color: var(--input-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
}

.form-label,
.col-form-label,
legend {
    font-weight: 600;
    line-height: var(--font-compact-line-height);
}

.form-control::placeholder {
    color: var(--text-soft);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled ~ .form-check-label,
.btn:disabled,
.disabled {
    color: var(--text-soft) !important;
    opacity: .72;
}

.form-check-input:checked {
    background-color: var(--rbx-primary);
    border-color: var(--rbx-primary);
}

.form-check-label,
.form-label {
    color: var(--text-main);
}

.form-text,
.text-muted,
.small {
    color: var(--text-muted);
}

.bg-light,
.bg-light-subtle,
.border,
.modal-content,
.alert-secondary,
.list-group-item,
.text-bg-light {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-main) !important;
}

.modal-content {
    box-shadow: var(--rbx-shadow);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .25rem var(--focus-ring);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

.btn {
    min-height: 42px;
    padding: .58rem .95rem;
    font-weight: 700;
    border-width: 1px;
}

.btn-success {
    --bs-btn-color: var(--button-text);
    --bs-btn-bg: var(--button-bg);
    --bs-btn-border-color: var(--button-bg);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
}

.btn-outline-success {
    --bs-btn-color: var(--rbx-primary);
    --bs-btn-border-color: rgba(30,111,124,.3);
    --bs-btn-hover-bg: var(--rbx-primary);
    --bs-btn-hover-border-color: var(--rbx-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--rbx-primary-dark);
    --bs-btn-active-border-color: var(--rbx-primary-dark);
}

.btn-outline-dark {
    --bs-btn-color: var(--rbx-heading);
    --bs-btn-border-color: var(--rbx-border-strong);
    --bs-btn-hover-bg: var(--rbx-heading);
    --bs-btn-hover-border-color: var(--rbx-heading);
}

.text-success {
    color: var(--rbx-secondary) !important;
}

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

.offcanvas.rbx-offcanvas {
    background: linear-gradient(180deg, var(--rbx-sidebar-bg) 0%, #0f2f4d 100%);
    color: var(--rbx-sidebar-text);
    width: min(86vw, 320px);
}

.offcanvas.rbx-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.offcanvas.rbx-offcanvas .btn-close {
    filter: invert(1);
}

.rbx-offcanvas-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.rbx-user-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.rbx-user-name {
    color: #fff;
    font-weight: 700;
    margin-bottom: .25rem;
}

.rbx-user-role {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #eff8ff;
    padding: .28rem .7rem;
    font-size: .78rem;
    font-weight: 700;
}

.rbx-nav-mobile {
    justify-items: stretch;
}

.rbx-nav-mobile .rbx-nav-link {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: .9rem 1rem;
}

.rbx-nav-mobile .rbx-nav-link-text {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.rbx-nav-mobile .rbx-nav-icon {
    width: 1.5rem;
    text-align: center;
}

.rbx-public-header {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 92%, var(--accent) 8%) 0%, color-mix(in srgb, var(--nav-bg) 86%, var(--rbx-accent) 14%) 100%);
    color: var(--nav-text);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--rbx-shadow-soft);
}

.rbx-public-header .navbar-brand,
.rbx-public-header .nav-link {
    color: var(--nav-text) !important;
}

.rbx-public-header .nav-link.active,
.rbx-public-header .nav-link:hover,
.rbx-public-header .nav-link:focus {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.rbx-public-header .navbar-toggler {
    border-color: color-mix(in srgb, var(--nav-text) 28%, transparent);
}

.rbx-public-header .navbar-toggler-icon {
    filter: none;
}

html[data-theme="dark"] .rbx-public-header .navbar-toggler-icon {
    filter: invert(1);
}

.rbx-public-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.rbx-public-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.rbx-logo-showcase {
    background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%) 100%) !important;
}

.rbx-home-hero-logo {
    width: min(100%, 220px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(18, 56, 93, 0.12));
}

.alert-success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    color: var(--success);
}

.alert-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
}

.alert-warning {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    color: var(--warning);
}

.badge.bg-success,
.bg-success {
    background-color: var(--rbx-secondary) !important;
}

.pagination {
    --bs-pagination-color: var(--rbx-primary);
    --bs-pagination-bg: var(--rbx-surface);
    --bs-pagination-border-color: var(--rbx-border-strong);
    --bs-pagination-hover-color: var(--rbx-primary-dark);
    --bs-pagination-hover-bg: color-mix(in srgb, var(--rbx-surface) 84%, var(--rbx-primary) 16%);
    --bs-pagination-hover-border-color: var(--rbx-primary);
    --bs-pagination-focus-color: var(--rbx-primary-dark);
    --bs-pagination-focus-bg: color-mix(in srgb, var(--rbx-surface) 82%, var(--rbx-primary) 18%);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(30, 111, 124, .14);
    --bs-pagination-active-bg: var(--rbx-primary);
    --bs-pagination-active-border-color: var(--rbx-primary);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-disabled-color: var(--rbx-muted);
    --bs-pagination-disabled-bg: color-mix(in srgb, var(--rbx-surface) 92%, var(--rbx-border) 8%);
    --bs-pagination-disabled-border-color: var(--rbx-border);
}

.rbx-pagination-nav {
    direction: inherit;
}

.rbx-pagination-summary {
    color: var(--rbx-muted) !important;
}

.rbx-pagination {
    direction: ltr;
    gap: .25rem;
    flex-wrap: wrap;
}

[dir="rtl"] .rbx-pagination {
    direction: rtl;
}

.rbx-pagination .page-link {
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: none;
}

.rbx-pagination .page-item:first-child .page-link,
.rbx-pagination .page-item:last-child .page-link {
    min-width: 2.55rem;
}

.dropdown-menu {
    border-color: var(--rbx-border);
    box-shadow: var(--rbx-shadow-soft);
    background: var(--bg-surface);
    color: var(--text-main);
}

.dropdown-item {
    color: var(--text-main);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent) 16%);
    color: var(--text-main);
}

html[data-theme="dark"] .dropdown-menu {
    background: var(--rbx-surface);
    border-color: var(--rbx-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--rbx-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--rbx-surface-soft);
    color: var(--rbx-heading);
}

html[data-theme="dark"] .role-chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .alert-success {
    color: var(--rbx-heading);
    background: rgba(123, 201, 196, .16);
    border-color: rgba(123, 201, 196, .28);
}

html[data-theme="dark"] .alert-danger {
    color: var(--rbx-heading);
    background: rgba(226, 180, 95, .16);
    border-color: rgba(226, 180, 95, .28);
}

.tooltip .tooltip-inner {
    background: var(--rbx-heading);
    color: #fff;
    border-radius: 10px;
    padding: .45rem .65rem;
}

[dir="rtl"] .rbx-sidebar {
    box-shadow: inset 1px 0 0 rgba(255,255,255,.04);
}

@media (max-width: 991.98px) {
    .rbx-sidebar {
        display: none;
    }

    .rbx-main {
        max-width: 100vw;
    }

    .rbx-topbar-inner {
        padding: 1rem;
    }

    .rbx-topbar-title {
        font-size: 1.2rem;
    }

    .rbx-topbar-actions {
        gap: .5rem;
    }

    .rbx-content {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .rbx-topbar-actions {
        justify-content: flex-end;
    }

    .rbx-gaza-clock {
        padding-inline: .65rem;
    }

    .rbx-gaza-clock-value {
        min-width: 72px;
    }

    .rbx-gaza-clock-time {
        font-size: .82rem;
    }

    .rbx-gaza-clock-date {
        font-size: .66rem;
    }

    .rbx-main-menu .dropdown-toggle {
        min-width: 46px;
    }

    .rbx-main-menu .dropdown-toggle span {
        display: none;
    }

    .rbx-public-brand-logo,
    .rbx-topbar-logo {
        width: 36px;
        height: 36px;
    }
}

/* Final dark-mode overrides. These stay at the end because some page-level
   components define light backgrounds with !important or inline page styles. */
html[data-theme="dark"] body {
    background: var(--rbx-body);
    color: var(--rbx-text);
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .hero-soft,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .spotlight-card,
html[data-theme="dark"] .mini-stat,
html[data-theme="dark"] .analysis-hero,
html[data-theme="dark"] .analysis-card,
html[data-theme="dark"] .analysis-stat,
html[data-theme="dark"] .rbx-data-tools,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .analysis-figure-card,
html[data-theme="dark"] .chapter-table-card,
html[data-theme="dark"] .chapter-table-button,
html[data-theme="dark"] .chapter-table-body,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light-subtle,
html[data-theme="dark"] .border {
    background: var(--rbx-surface) !important;
    border-color: var(--rbx-border) !important;
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .analysis-hero,
html[data-theme="dark"] .dashboard-hero {
    background:
        linear-gradient(135deg, rgba(42, 64, 73, .96) 0%, rgba(32, 49, 58, .98) 55%, rgba(31, 74, 78, .92) 100%) !important;
}

html[data-theme="dark"] .analysis-stat,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .spotlight-card,
html[data-theme="dark"] .mini-stat {
    background: linear-gradient(180deg, #253944 0%, #20313a 100%) !important;
}

html[data-theme="dark"] .analysis-muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .rbx-topbar-subtitle,
html[data-theme="dark"] .rbx-topbar-user-role {
    color: #c9d8d7 !important;
}

html[data-theme="dark"] .display-6,
html[data-theme="dark"] .live-value,
html[data-theme="dark"] .analysis-stat .display-6,
html[data-theme="dark"] .metric-card .display-6 {
    color: #ffffff !important;
}

html[data-theme="dark"] .table {
    --bs-table-color: var(--rbx-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rbx-border);
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-soft thead th {
    background: #2a3f49 !important;
    color: #ffffff !important;
    border-color: var(--rbx-border) !important;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--rbx-text) !important;
    border-color: var(--rbx-border) !important;
}

html[data-theme="dark"] .mini-track {
    background: #3a515b !important;
}

html[data-theme="dark"] .mini-track > span {
    background: linear-gradient(90deg, #7bc9c4 0%, #e2b45f 100%) !important;
}

html[data-theme="dark"] .figure-caption,
html[data-theme="dark"] .chapter-table-meta,
html[data-theme="dark"] .risk-heatmap-head {
    color: #c9d8d7 !important;
}

html[data-theme="dark"] .chapter-table-button[aria-expanded="true"] {
    background: #2a3f49 !important;
}

html[data-theme="dark"] .chapter-table-body .table-responsive {
    background: #20313a;
}

html[data-theme="dark"] .risk-heatmap-row {
    color: var(--rbx-text);
}

html[data-theme="dark"] .heat-low {
    background: rgba(123, 201, 196, .18) !important;
    color: #eafaf8 !important;
}

html[data-theme="dark"] .heat-moderate {
    background: rgba(226, 180, 95, .20) !important;
    color: #fff6e6 !important;
}

html[data-theme="dark"] .heat-high {
    background: rgba(242, 139, 130, .20) !important;
    color: #fff0ee !important;
}

html[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #94d7d3;
    --bs-btn-border-color: #5a7f88;
    --bs-btn-hover-bg: #7bc9c4;
    --bs-btn-hover-border-color: #7bc9c4;
    --bs-btn-hover-color: #10242b;
    --bs-btn-active-bg: #7bc9c4;
    --bs-btn-active-border-color: #7bc9c4;
    --bs-btn-active-color: #10242b;
}

html[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #d7e5e4;
    --bs-btn-border-color: #5b747d;
    --bs-btn-hover-bg: #d7e5e4;
    --bs-btn-hover-border-color: #d7e5e4;
    --bs-btn-hover-color: #10242b;
}

html[data-theme="dark"] .tooltip .tooltip-inner {
    background: #f6fbfa !important;
    color: #123654 !important;
    border: 1px solid rgba(18, 54, 84, .14);
    font-weight: 700;
}

html[data-theme="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #f6fbfa !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #f6fbfa !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #f6fbfa !important;
}

html[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #f6fbfa !important;
}

html[data-theme="dark"] .pagination {
    --bs-pagination-color: #b8efeb;
    --bs-pagination-bg: #20313a;
    --bs-pagination-border-color: #4b6671;
    --bs-pagination-hover-color: #10242b;
    --bs-pagination-hover-bg: #7bc9c4;
    --bs-pagination-hover-border-color: #7bc9c4;
    --bs-pagination-focus-color: #10242b;
    --bs-pagination-focus-bg: #8fdad6;
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(123, 201, 196, .22);
    --bs-pagination-active-color: #10242b;
    --bs-pagination-active-bg: #7bc9c4;
    --bs-pagination-active-border-color: #7bc9c4;
    --bs-pagination-disabled-color: #8ca6a8;
    --bs-pagination-disabled-bg: #182a33;
    --bs-pagination-disabled-border-color: #3a515b;
}

html[data-theme="dark"] .rbx-pagination .page-link {
    color: var(--bs-pagination-color);
    background-color: var(--bs-pagination-bg);
    border-color: var(--bs-pagination-border-color);
}

html[data-theme="dark"] .rbx-pagination .page-link:hover,
html[data-theme="dark"] .rbx-pagination .page-link:focus {
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

html[data-theme="dark"] .rbx-pagination .active > .page-link,
html[data-theme="dark"] .rbx-pagination .page-link.active {
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

html[data-theme="dark"] .rbx-pagination .disabled > .page-link,
html[data-theme="dark"] .rbx-pagination .page-link.disabled {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

html[data-theme="dark"] .review-hero,
html[data-theme="dark"] .review-stat,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .review-answer {
    background: var(--rbx-surface) !important;
    border-color: var(--rbx-border) !important;
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .review-hero {
    background:
        linear-gradient(135deg, rgba(42, 64, 73, .98) 0%, rgba(32, 49, 58, .98) 52%, rgba(31, 74, 78, .92) 100%) !important;
}

html[data-theme="dark"] .review-stat {
    background: linear-gradient(180deg, #253944 0%, #20313a 100%) !important;
}

html[data-theme="dark"] .review-card {
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .review-answer {
    background: #182a33 !important;
}

html[data-theme="dark"] .review-pill {
    background: rgba(123, 201, 196, .16) !important;
    border: 1px solid rgba(123, 201, 196, .28) !important;
    color: #f4fbfa !important;
}

html[data-theme="dark"] .review-section-heading h2 {
    color: #ffffff !important;
}

html[data-theme="dark"] .question-card,
html[data-theme="dark"] .review-section-card,
html[data-theme="dark"] .hhi-prompt,
html[data-theme="dark"] .kii-prompt,
html[data-theme="dark"] .area-combobox-menu {
    background: #20313a !important;
    border-color: var(--rbx-border) !important;
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .question-card .text-muted,
html[data-theme="dark"] .review-section-card .text-muted,
html[data-theme="dark"] .hhi-prompt .text-muted,
html[data-theme="dark"] .kii-prompt .text-muted {
    color: #c9d8d7 !important;
}

html[data-theme="dark"] .question-card h1,
html[data-theme="dark"] .question-card h2,
html[data-theme="dark"] .question-card h3,
html[data-theme="dark"] .question-card h4,
html[data-theme="dark"] .question-card h5,
html[data-theme="dark"] .question-card h6,
html[data-theme="dark"] .hhi-prompt h1,
html[data-theme="dark"] .hhi-prompt h2,
html[data-theme="dark"] .hhi-prompt h3,
html[data-theme="dark"] .kii-prompt h1,
html[data-theme="dark"] .kii-prompt h2,
html[data-theme="dark"] .kii-prompt h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .survey-step-nav {
    background: rgba(32, 49, 58, .96) !important;
    border-color: var(--rbx-border) !important;
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .survey-step-nav.is-active {
    border-color: rgba(123, 201, 196, .72) !important;
    box-shadow: 0 0 0 .15rem rgba(123, 201, 196, .14);
}

html[data-theme="dark"] .step-badge {
    background: #e8f2f1 !important;
    color: #10242b !important;
}

html[data-theme="dark"] .area-combobox-option {
    color: var(--rbx-text) !important;
}

html[data-theme="dark"] .area-combobox-option:hover,
html[data-theme="dark"] .area-combobox-option.is-active {
    background: rgba(123, 201, 196, .14) !important;
    color: #ffffff !important;
}