@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo.woff2') format('woff2');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

/* This file loads before css/tailwind.css, so this line fixes the cascade: Tailwind utilities (see
   Wasm/tailwind.input.css) override these component styles. Leaflet overrides stay unlayered at the end —
   leaflet.css is unlayered too and would otherwise beat them. */
@layer theme, components, utilities;

@layer components {

:root {
    --dc-bg: #FAF8F4;
    --dc-surface: #ffffff;
    --dc-text: #16241F;
    --dc-muted: #5c6b64;
    --dc-border: #d9d3c7;
    --dc-primary: #1C5A4C;
    --dc-primary-hover: #16473c;
    --dc-danger: #A63A1E;
    --dc-success: #3F6B3A;
    --dc-sidebar: rgba(250, 248, 244, 0.94);
    --dc-input-bg: #ffffff;
    --dc-row-hover: #f3efe6;
    --dc-thead: #f3efe6;
    --dc-error-bg: #f8ebe6;
    --dc-error-text: #A63A1E;
    --dc-info-bg: #eef4f2;
    --dc-info-text: #1C5A4C;
    --dc-ok-bg: #eef3ec;
    --dc-ok-text: #3F6B3A;
    --dc-warn: #8A6A12;
}

html.dark {
    --dc-bg: #10211c;
    --dc-surface: #173029;
    --dc-text: #f3efe6;
    --dc-muted: #a8b5af;
    --dc-border: #2a4a41;
    --dc-primary: #3d8f7a;
    --dc-primary-hover: #4aa78f;
    --dc-sidebar: rgba(16, 33, 28, 0.96);
    --dc-input-bg: #10211c;
    --dc-row-hover: rgba(61, 143, 122, 0.12);
    --dc-thead: rgba(42, 74, 65, 0.5);
    --dc-error-bg: rgba(166, 58, 30, 0.28);
    --dc-error-text: #f0b4a4;
    --dc-info-bg: rgba(28, 90, 76, 0.35);
    --dc-info-text: #9fd4c6;
    --dc-ok-bg: rgba(63, 107, 58, 0.4);
    --dc-ok-text: #b5d4b0;
    --dc-warn: #d9a441;
}

/* Page chrome follows the open nav group (buttons, header accent, pager). */
.dc-app[data-nav="maps"] { --dc-primary: #1C5A4C; --dc-primary-hover: #16473c; }
.dc-app[data-nav="reports"] { --dc-primary: #16473c; --dc-primary-hover: #0f332c; }
.dc-app[data-nav="rules"] { --dc-primary: #8A6A12; --dc-primary-hover: #6e540e; }
.dc-app[data-nav="students"] { --dc-primary: #2F5D8A; --dc-primary-hover: #244a6e; }
.dc-app[data-nav="data"] { --dc-primary: #3F6B3A; --dc-primary-hover: #32562e; }
.dc-app[data-nav="settings"] { --dc-primary: #5B4B8A; --dc-primary-hover: #483c6e; }
.dc-app[data-nav="users"] { --dc-primary: #A63A1E; --dc-primary-hover: #852e18; }
html.dark .dc-app[data-nav="maps"] { --dc-primary: #3d8f7a; --dc-primary-hover: #4aa78f; }
html.dark .dc-app[data-nav="reports"] { --dc-primary: #2d9a82; --dc-primary-hover: #3db89c; }
html.dark .dc-app[data-nav="rules"] { --dc-primary: #d9a441; --dc-primary-hover: #e8b85a; }
html.dark .dc-app[data-nav="students"] { --dc-primary: #5b9fd4; --dc-primary-hover: #7ab3de; }
html.dark .dc-app[data-nav="data"] { --dc-primary: #6db368; --dc-primary-hover: #86c481; }
html.dark .dc-app[data-nav="settings"] { --dc-primary: #9b8bc8; --dc-primary-hover: #b3a6d6; }
html.dark .dc-app[data-nav="users"] { --dc-primary: #e07a5f; --dc-primary-hover: #eb9480; }

* { box-sizing: border-box; }

html, body, #app {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    background: var(--dc-bg);
    color: var(--dc-text);
}

button, input, select, textarea {
    font-family: inherit;
}

a { color: inherit; text-decoration: none; }

.dc-spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    border: 3px solid var(--dc-border);
    border-top-color: var(--dc-primary);
    animation: dc-spin 0.8s linear infinite;
}
.dc-spinner-sm { width: 2.25rem; height: 2.25rem; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-fade-in { animation: dc-fade 0.35s ease-out; }
.dc-fade-up { animation: dc-up 0.45s ease-out; }
@keyframes dc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Auth */
.dc-auth-viewport { position: fixed; inset: 0; overflow: hidden; background: var(--dc-bg); }
.dc-auth-shell { position: relative; height: 100%; width: 100%; overflow: hidden; }
.dc-auth-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.dc-auth-wash {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(28, 90, 76, 0.18), transparent 45%, rgba(138, 106, 18, 0.14));
}
.dc-auth-glow-primary {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(44rem, 100%); height: 40%; border-radius: 999px;
    background: rgba(28, 90, 76, 0.30); filter: blur(64px);
}
.dc-auth-glow-accent {
    position: absolute; bottom: 0; right: 0;
    width: min(28rem, 80%); height: 35%; border-radius: 999px;
    background: rgba(138, 106, 18, 0.20); filter: blur(64px);
}
.dc-auth-top {
    position: absolute; top: 0; inset-inline: 0; z-index: 20;
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.dc-auth-stage {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 1rem;
}
.dc-auth-content { position: relative; width: 100%; max-width: 26rem; }
.dc-auth-mark {
    margin: 0 auto;
    width: 3rem; height: 3rem; border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1C5A4C, #8A6A12);
    box-shadow: 0 10px 24px rgba(28, 90, 76, 0.35);
}
.dc-auth-brand {
    margin: 0.7rem 0 0;
    text-align: center; font-size: 1.5rem; font-weight: 800;
}
.dc-auth-brand-accent {
    background: linear-gradient(90deg, #1C5A4C, #8A6A12);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dc-auth-tagline { margin: 0.35rem 0 0; text-align: center; color: var(--dc-muted); font-size: 0.875rem; }
.dc-auth-panel-wrap { position: relative; margin-top: 1.1rem; }
.dc-auth-panel-glow {
    position: absolute; inset: -2px; border-radius: 1.1rem; pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, rgba(28, 90, 76, 0.40), rgba(138, 106, 18, 0.30));
    filter: blur(8px);
}
.dc-auth-panel {
    position: relative;
    z-index: 1;
    border-radius: 1rem;
    border: 1px solid rgba(28, 90, 76, 0.28);
    background: color-mix(in srgb, var(--dc-surface) 94%, transparent);
    backdrop-filter: blur(16px);
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}
.dc-auth-title { margin: 0; font-size: 1.2rem; font-weight: 800; }
.dc-auth-subtitle { margin: 0.35rem 0 1rem; color: var(--dc-muted); font-size: 0.875rem; }
.dc-auth-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.4rem; }
.dc-auth-input-wrap { position: relative; margin-bottom: 0.9rem; }
.dc-auth-input-icon {
    position: absolute; inset-block: 0; inset-inline-start: 0.85rem;
    display: flex; align-items: center; color: var(--dc-muted); pointer-events: none;
}
.dc-auth-input {
    width: 100%;
    padding-block: 0.65rem;
    padding-inline: 2.4rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dc-border);
    background: var(--dc-input-bg);
    color: var(--dc-text);
    font-size: 0.9rem;
    text-align: start;
}
.dc-auth-input-toggle { padding-inline-end: 2.6rem; }
.dc-auth-toggle, .dc-cred-toggle {
    position: absolute; inset-block: 0; inset-inline-end: 0.45rem;
    display: flex; align-items: center; justify-content: center;
    width: 2rem; padding: 0; border: 0;
    background: transparent; color: var(--dc-muted); cursor: pointer;
    touch-action: none; user-select: none;
}
.dc-auth-toggle.is-on, .dc-cred-toggle.is-on { color: var(--dc-text); }
.dc-cred-wrap { position: relative; width: 100%; }
.dc-cred-wrap .dc-input { width: 100%; padding-inline-end: 2.6rem; }
.dc-password-field { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.dc-pw { margin: 0; }
.dc-pw-bar { display: flex; gap: 0.25rem; }
.dc-pw-seg {
    flex: 1; height: 0.3rem; border-radius: 99px;
    background: var(--dc-border);
}
.dc-pw-seg.is-on { background: var(--dc-pw-color, #dc2626); }
.dc-pw[data-score="weak"] { --dc-pw-color: #dc2626; }
.dc-pw[data-score="fair"] { --dc-pw-color: #d97706; }
.dc-pw[data-score="strong"] { --dc-pw-color: #059669; }
.dc-pw[data-score="very"] { --dc-pw-color: #047857; }
.dc-pw-label {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dc-pw-color, var(--dc-muted));
}
.dc-auth-submit {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.25rem; border: 0; border-radius: 0.75rem;
    color: #fff; font-weight: 700; cursor: pointer;
    background: linear-gradient(90deg, #1C5A4C, #8A6A12);
    box-shadow: 0 10px 20px rgba(28, 90, 76, 0.28);
}
.dc-auth-submit:disabled { opacity: 0.6; cursor: wait; pointer-events: none; }
.dc-auth-footer { margin-top: 1rem; text-align: center; color: var(--dc-muted); font-size: 0.8rem; }
.dc-auth-error {
    margin-bottom: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 0.75rem;
    background: var(--dc-error-bg); color: var(--dc-error-text); font-size: 0.875rem;
}

.dc-theme-group {
    display: flex; overflow: hidden; border-radius: 0.6rem;
    border: 1px solid var(--dc-border); background: var(--dc-surface);
}
.dc-theme-btn {
    flex: 1; padding: 0.4rem 0.55rem; border: 0; background: transparent;
    color: var(--dc-muted); cursor: pointer; font-size: 0.95rem;
}
.dc-theme-btn-active { background: var(--dc-primary); color: #fff; }

/* Shell */
.dc-app {
    display: flex; height: 100dvh; overflow: hidden;
    background: var(--dc-bg); color: var(--dc-text);
}
.dc-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
    width: max-content;
    min-width: 4.5rem;
    display: flex; flex-direction: column; overflow: visible;
    background: var(--dc-sidebar);
    backdrop-filter: blur(18px);
    border-inline-end: 1px solid var(--dc-border);
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.08);
    transform: translateX(100%);
    transition: width 0.22s ease, transform 0.25s ease;
}
.dc-sidebar.open { transform: none; }
@media (min-width: 1024px) {
    .dc-sidebar {
        position: relative; inset: auto; height: 100%;
        flex: 0 0 auto; transform: none;
    }
    .dc-nav-collapsed .dc-sidebar { width: 4.5rem; }
}
.dc-sidebar-head {
    width: 0; min-width: 100%; box-sizing: border-box;
    padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--dc-border);
}
.dc-nav-collapsed .dc-sidebar-head { padding-inline: 0.45rem; }
.dc-brand-row { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dc-brand-mark {
    width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #1C5A4C, #8A6A12);
    box-shadow: 0 8px 16px rgba(28, 90, 76, 0.3);
}
.dc-brand-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.dc-brand-sub { margin: 0; font-size: 0.75rem; color: var(--dc-muted); }
.dc-sidebar-nav {
    flex: 1; min-width: max-content; overflow-y: auto; overflow-x: hidden;
    padding: 0.75rem 0.55rem; scrollbar-width: thin;
}
.dc-nav-collapsed .dc-sidebar-nav {
    min-width: 0; width: 100%; overflow: visible;
    display: flex; flex-direction: column; align-items: center;
    padding-inline: 0.4rem;
}
.dc-nav-list { display: flex; flex-direction: column; gap: 0.15rem; width: max-content; }
.dc-nav-list > div { width: 100%; }
.dc-nav-collapsed .dc-nav-list { width: auto; min-width: 0; }
.dc-nav-label { white-space: nowrap; }
.dc-nav-rail-btn { color: var(--dc-text); }
.dc-nav-rail-btn.is-on {
    background: color-mix(in srgb, var(--nav-c) 16%, transparent);
    color: var(--nav-c);
}
.dc-nav-pop {
    position: fixed;
    z-index: 70;
    width: max-content;
    visibility: hidden;
    background: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: 0.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    padding-block: 0.2rem;
    text-align: start;
}
.dc-nav-pop a,
.dc-nav-pop .dc-nav-pop-item {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--dc-text);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.dc-nav-pop a:hover,
.dc-nav-pop .dc-nav-pop-item:hover {
    background: var(--dc-row-hover);
}
.dc-nav-pop .dc-nav-pop-on,
.dc-nav-pop a.dc-nav-pop-on {
    font-weight: 700;
    color: var(--dc-primary);
    background: transparent;
    border: 0;
}
.dc-sidebar-foot {
    width: 0; min-width: 100%; box-sizing: border-box;
    padding: 0.65rem 0.65rem 0.75rem;
    border-top: 1px solid var(--dc-border);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dc-nav-collapsed .dc-sidebar-foot {
    align-items: center;
    padding-inline: 0.4rem;
}
.dc-logout {
    width: 100%; padding: 0.55rem; border: 0; border-radius: 0.75rem;
    background: var(--dc-danger); color: #fff; font-weight: 600; cursor: pointer;
}
.dc-nav-fold { display: none; }
.dc-nav-mobile-open {
    position: fixed; top: 50%; inset-inline-start: 0; z-index: 45;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.35rem; height: 2.35rem; padding: 0;
    border: 1px solid var(--dc-border); border-inline-start: 0;
    border-start-start-radius: 0; border-end-start-radius: 0;
    border-start-end-radius: 0.7rem; border-end-end-radius: 0.7rem;
    background: var(--dc-surface); color: var(--dc-text); cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
@media (min-width: 1024px) {
    .dc-nav-fold {
        display: flex; position: absolute; top: 3.25rem; inset-inline-end: -0.75rem; z-index: 60;
        width: 1.55rem; height: 1.55rem; padding: 0;
        align-items: center; justify-content: center;
        border-radius: 999px; border: 1px solid var(--dc-border);
        background: var(--dc-surface); color: var(--dc-muted); cursor: pointer;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    }
    .dc-nav-fold:hover { background: var(--dc-primary); color: #fff; border-color: var(--dc-primary); }
    .dc-nav-mobile-open { display: none; }
}
.dc-app-column {
    flex: 1 1 auto; min-width: 0;
    height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.dc-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40;
    backdrop-filter: blur(2px);
}
@media (min-width: 1024px) { .dc-overlay { display: none; } }
@media (max-width: 1023px) {
    .dc-nav-collapsed .dc-sidebar { width: max-content; }
}

.dc-year-select {
    min-width: 6.5rem; max-width: 6.5rem; width: 6.5rem;
}
.dc-sidebar .dc-year-select { min-width: 6.5rem; max-width: 6.5rem; width: 6.5rem; }
.dc-year-select .dc-combo-input { cursor: pointer; }
.dc-combo-select-only .dc-combo-input { cursor: pointer; caret-color: transparent; }

.dc-main {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
    width: 100%;
}
.dc-main-inner {
    flex: 1; min-height: 0; width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding: 0.75rem 1.25rem 0.75rem;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.dc-main-inner:not(:has(.dc-table-wrap)),
.dc-main-inner:has(#schoolMap),
.dc-main-inner:has([id^="schoolMap-"]) {
    overflow: auto;
}
.dc-main-inner > .dc-import-bar,
.dc-main-inner > .dc-tab-bar,
.dc-main-inner > .dc-alert,
.dc-main-inner > .alert,
.dc-main-inner > .dc-map-hint {
    flex-shrink: 0;
}
.dc-main-inner .dc-import-bar,
.dc-main-inner .dc-alert {
    flex-shrink: 0;
}

.dc-page { display: flex; flex-direction: column; gap: 1rem; }

.dc-main > h3:first-child,
.dc-main > h5,
.dc-main-inner > h3:first-child,
.dc-main-inner > h5 {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid var(--dc-border);
    border-inline-start: 4px solid var(--dc-primary);
    background: var(--dc-surface);
    font-size: 1.05rem;
}
.dc-main > h5 { font-size: 1rem; margin-top: 1.25rem; }

.dc-nav-group {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.65rem; border: 0; border-radius: 0.75rem;
    background: transparent; color: var(--dc-text); cursor: pointer; text-align: start;
}
.dc-nav-group:hover { background: var(--dc-row-hover); }
.dc-nav-group.open, .dc-nav-group.active {
    background: color-mix(in srgb, var(--dc-primary) 12%, transparent);
    color: var(--dc-primary); font-weight: 700;
}
.dc-nav-icon {
    width: 2rem; height: 2rem; border-radius: 0.6rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem;
}
/* Sub-items are <NavLink> or a plain <a> — the reset keeps both identical. */
.dc-nav-sub {
    display: flex; align-items: center; gap: 0.5rem;
    width: calc(100% - 0.75rem); white-space: nowrap; box-sizing: border-box;
    margin-block: 0.15rem; margin-inline: 0.5rem 0.25rem;
    padding: 0.45rem 0.55rem; border-radius: 0.6rem;
    color: var(--dc-text); font-size: 0.875rem;
    font-family: inherit; text-align: start; text-decoration: none;
    background: transparent; cursor: pointer;
    border: 0; border-inline-start: 2px solid var(--dc-border);
}
.dc-nav-sub:hover { background: var(--dc-row-hover); }
.dc-nav-active {
    background: color-mix(in srgb, var(--dc-primary) 14%, transparent);
    color: var(--dc-primary); font-weight: 700;
    border-inline-start-color: var(--dc-primary);
}
.dc-nav-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; transition: transform 0.2s; }
.dc-nav-group.open .dc-nav-chevron { transform: rotate(180deg); }

.dc-home-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem;
}
.dc-home-card {
    border: 1px solid var(--dc-border); border-radius: 0.9rem;
    background: var(--dc-surface); padding: 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s;
}
.dc-home-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); }
.dc-home-card h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.dc-home-card p { margin: 0; color: var(--dc-muted); font-size: 0.875rem; }

.form-label, .col-form-label {
    display: block; font-size: 0.8rem; color: var(--dc-muted); margin-bottom: 0.25rem;
}
.form-control, .form-select, .dc-input, .dc-select {
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dc-border);
    background: var(--dc-input-bg);
    color: var(--dc-text);
    font-size: 0.8rem;
}
.form-control.w-auto, .form-select.w-auto, .dc-input.w-auto, .dc-select.w-auto { width: auto; min-width: 10rem; }

/* Searchable combo (SearchableSelect.razor) — replaces plain <select> for name/code lookups.
   Width is plain `width`, never `flex-basis`: this component also lives inside the dialog body,
   which is a COLUMN flex container — a flex-basis there sets a phantom *height*, not width,
   pushing the dropdown list far below the input. Toolbar-only sizing is scoped below. */
.dc-combo { position: relative; width: 100%; }
.dc-toolbar .dc-combo { width: auto; min-width: 12rem; max-width: 16rem; flex: 0 1 16rem; }
.dc-combo-field { position: relative; display: flex; }
.dc-combo-input { width: 100%; padding-inline-end: 2.1rem; }
.dc-combo-has-clear .dc-combo-input { padding-inline-end: 3.4rem; }
.dc-combo-clear, .dc-combo-chevron {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem; border: 0; border-radius: 999px; background: transparent;
    color: var(--dc-muted); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.dc-combo-clear { inset-inline-end: 1.85rem; font-size: 1rem; line-height: 1; }
.dc-combo-chevron { inset-inline-end: 0.3rem; }
.dc-combo-open .dc-combo-chevron { transform: translateY(-50%) rotate(180deg); }
.dc-combo-clear:hover, .dc-combo-chevron:hover { background: var(--dc-row-hover); color: var(--dc-text); }
.dc-combo-chevron:disabled { cursor: default; opacity: 0.5; }
.dc-combo-list {
    position: absolute; inset-inline: 0; top: calc(100% + 0.25rem);
    max-height: 16rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0; padding: 0.3rem; list-style: none;
    background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: 0.65rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    z-index: 30;
}
.dc-combo-list li {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.85rem;
}
.dc-combo-list li.active, .dc-combo-list li:hover { background: var(--dc-row-hover); }
.dc-combo-list li.is-current { font-weight: 700; }
.dc-combo-status { color: var(--dc-muted); cursor: default; }
.dc-combo-status:hover { background: transparent; }
.dc-combo-code {
    font-family: 'IBM Plex Mono', Consolas, monospace; direction: ltr;
    color: var(--dc-muted); font-size: 0.78rem; flex-shrink: 0;
}
.dc-combo-text { flex: 1; min-width: 0; }
.dc-combo-disabled { opacity: 0.6; }
@media (max-width: 767px) { .dc-toolbar .dc-combo { flex: 1 1 100%; min-width: 0; max-width: none; } }

/* Sized against the 0.78rem table, not against a finger — the touch minimum is reapplied for
   coarse pointers at the end of this file. */
.btn, .dc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    min-height: 2rem; min-width: 2rem;
    padding: 0.28rem 0.7rem; border-radius: 0.5rem; border: 1px solid transparent;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--dc-text);
}
.btn:disabled, .dc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary, .dc-btn-primary { background: var(--dc-primary); color: #fff; }
.btn-primary:hover:not(:disabled), .dc-btn-primary:hover:not(:disabled) { background: var(--dc-primary-hover); }
.btn-success, .dc-btn-success { background: var(--dc-success); color: #fff; }
.btn-outline-secondary, .dc-btn-secondary { border-color: var(--dc-border); }
.btn-outline-secondary:hover, .dc-btn-secondary:hover { background: var(--dc-row-hover); }
.btn-outline-danger, .dc-btn-danger { border-color: #fecaca; color: var(--dc-danger); }
.btn-outline-primary { border-color: #bfdbfe; color: var(--dc-primary); }
.btn-sm, .dc-btn-sm { padding: 0.18rem 0.5rem; font-size: 0.75rem; border-radius: 0.45rem; min-height: 1.7rem; min-width: 1.7rem; }
.dc-table .dc-btn-sm, .table .dc-btn-sm {
    min-height: 1.65rem; min-width: auto;
    padding: 0.08rem 0.4rem; font-size: 0.72rem; border-radius: 0.4rem;
}

.table, .dc-table {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
    background: var(--dc-surface);
}
.table th, .table td, .dc-table th, .dc-table td {
    padding: 0.22rem 0.5rem; text-align: start;
    border-bottom: 1px solid var(--dc-border);
    line-height: 1.35;
    white-space: nowrap;
}
.table thead th, .dc-table thead th {
    background: var(--dc-thead); font-weight: 700;
    position: sticky; top: 0; z-index: 2;
}
.table-striped tbody tr:nth-child(even), .dc-table tbody tr:nth-child(even) { background: var(--dc-row-hover); }
.table tbody tr:hover, .dc-table tbody tr:hover { background: var(--dc-row-hover); }
.table-sm th, .table-sm td { padding: 0.4rem 0.55rem; }
.table-bordered th, .table-bordered td { border: 1px solid var(--dc-border); }

.dc-main .table {
    border: 1px solid var(--dc-border);
    border-radius: 0.85rem;
    overflow: hidden;
    display: table;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.alert {
    padding: 0.8rem 1rem; border-radius: 0.75rem; margin-bottom: 0.85rem; font-size: 0.875rem;
}
.alert-danger { background: var(--dc-error-bg); color: var(--dc-error-text); }
.alert-success { background: var(--dc-ok-bg); color: var(--dc-ok-text); }
.alert-info, .alert-secondary { background: var(--dc-info-bg); color: var(--dc-info-text); }

#schoolMap, [id^="schoolMap-"] {
    height: min(70vh, 640px); min-height: 360px; width: 100%;
    border-radius: 0.85rem; overflow: hidden; border: 1px solid var(--dc-border);
    direction: ltr;
    /* Leaflet's own z-indexes (400–1000) stay inside the map, under dialogs and dropdowns. */
    isolation: isolate;
    background: #dbe4ea;
}
html.dark #schoolMap, html.dark [id^="schoolMap-"] { background: #0b1220; }
html.dark #schoolMap .leaflet-tile-pane, html.dark [id^="schoolMap-"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(0.95);
}

/* In-page tab strip for screens the desktop builds with an XtraTabControl (توزيع الطلبة،
   عدد الطلاب المتوقع). Same visual language as the map tab strip below, minus the close button. */
.dc-tab-bar {
    display: flex; flex-wrap: wrap; gap: 0.2rem;
    border-bottom: 1px solid var(--dc-border); margin-bottom: 0.5rem;
}
.dc-tab {
    padding: 0.25rem 0.65rem; border-radius: 0.45rem 0.45rem 0 0;
    border: 1px solid var(--dc-border); border-bottom: none;
    background: var(--dc-thead); color: var(--dc-muted);
    font-family: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.5;
    cursor: pointer; margin-bottom: -1px;
}
.dc-tab:hover { color: var(--dc-text); }
.dc-tab.active {
    background: var(--dc-surface); color: var(--dc-primary);
    border-color: var(--dc-primary); border-bottom: 1px solid var(--dc-surface);
}

/* Map screens (MapToolPanel, RentedNearestPanel) — the map sits at the inline start (right) and fills every
   remaining pixel; filter and detail panels sit after it at the inline end (left), in markup order. */
.dc-main-inner:has(.dc-map-tool) { max-width: none; overflow: hidden; }
.dc-map-tool { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dc-map-shell { flex: 1 1 auto; min-height: 0; display: flex; gap: 0.6rem; align-items: stretch; }
.dc-map-side {
    width: 21rem; flex-shrink: 0; min-height: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
    order: 2;
}
.dc-map-side-wide { width: 24rem; }
.dc-map-side-narrow { width: 19rem; order: 3; }
.dc-map-side > .dc-card, .dc-map-side-scroll > .dc-card { padding: 0.6rem 0.7rem; }
/* Only this part scrolls, so a search dropdown above it is never clipped by an overflow box. */
.dc-map-side-scroll {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.dc-map-side .dc-input, .dc-map-side .dc-select, .dc-map-side .dc-combo { width: 100%; }
.dc-map-center { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; order: 1; }
.dc-map-host {
    position: relative; flex: 1 1 auto; min-height: 320px; display: flex;
    /* Leaflet panes use z-index 400-1000; isolating them keeps dropdowns and dialogs on top. */
    isolation: isolate;
}
.dc-map-host > [id^="schoolMap"] { flex: 1 1 auto; height: auto; min-height: 0; }
.dc-map-host:fullscreen { background: var(--dc-bg); padding: 0; }
.dc-map-host:fullscreen > [id^="schoolMap"] { border-radius: 0; border: 0; }
.dc-map-float-hint {
    position: absolute; top: 0.55rem; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 80%;
    z-index: 1100; pointer-events: none;
    padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.92); color: #1f2d28; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.dc-map-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.dc-map-panel-title { margin: 0 0 0.35rem; font-size: 0.92rem; font-weight: 800; }
.dc-map-panel-row { display: flex; align-items: center; gap: 0.5rem; }
.dc-map-panel-row .dc-input { width: 5rem; flex: 0 0 auto; }
.dc-main-inner .dc-map-tool .dc-table-wrap, .dc-screen .dc-map-tool .dc-table-wrap { flex: 0 1 auto; max-height: none; }
/* A table that shares the centre column with the map (rented report) takes the lower part and scrolls. */
.dc-main-inner .dc-map-tool .dc-map-center > .dc-table-wrap { flex: 1 1 40%; min-height: 8rem; }
.dc-map-center > .dc-map-host.dc-map-host-split { flex: 1 1 60%; }
.dc-map-side .dc-table-wrap .table { min-width: 0; }
.dc-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    color: #fff; font-size: 0.7rem; font-weight: 800; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--dc-border);
}
@media (max-width: 1199px) {
    .dc-main-inner:has(.dc-map-tool) { overflow: auto; }
    .dc-map-shell { flex-direction: column; }
    /* Stacked: filters above the map again. */
    .dc-map-side, .dc-map-side-wide, .dc-map-side-narrow, .dc-map-center { width: 100%; order: 0; }
    .dc-map-side-scroll { overflow: visible; }
    .dc-map-host { flex: 0 0 auto; height: 65dvh; }
}

/* «المدارس شاشة منفصلة» — only the map screen, no sidebar or top bar (StandaloneLayout). */
.dc-screen { height: 100dvh; display: flex; flex-direction: column; background: var(--dc-bg); color: var(--dc-text); }
.dc-screen-bar {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--dc-border); background: var(--dc-surface);
}
.dc-screen-bar h1 { margin: 0; font-size: 1rem; font-weight: 800; }
.dc-screen-bar .dc-combo { width: 12rem; }
.dc-screen-bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 0.4rem; }
.dc-screen-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0.5rem 0.75rem; }

/* Multi-select with checkboxes (الأقسام), styled like SearchableSelect. */
.dc-checklist-toggle { width: 100%; justify-content: space-between; text-align: start; }
.dc-checklist .dc-combo-list label { display: flex; align-items: center; gap: 0.5rem; width: 100%; cursor: pointer; }
.dc-checklist-search { margin: 0.1rem 0 0.3rem; }

/* SchoolInfoDialog / SchoolInfoView — «بيانات المدرسة». The dialog never scrolls: the cards keep one
   value per line (no wrapping, ellipsis + title), and only the classes table scrolls inside.
   Both classes sit on the same element, so this needs .dc-dialog to beat the narrow default below.
   The height is fixed, not max-height: expanding a «+» must scroll the table, never grow the dialog. */
.dc-dialog.dc-school-dialog {
    width: min(68rem, calc(100vw - 2rem)); height: min(42rem, calc(100dvh - 2rem));
    display: flex; flex-direction: column; overflow: hidden;
}
.dc-school-dialog-head {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 1rem; border-bottom: 1px solid var(--dc-border); background: var(--dc-thead);
    border-radius: 0.85rem 0.85rem 0 0;
}
.dc-school-dialog-title { min-width: 0; display: flex; align-items: center; gap: 0.75rem; }
.dc-school-dialog-title h4 {
    margin: 0; font-size: 1.05rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-school-dialog-actions { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
.dc-school-dialog-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0.6rem 0.85rem 0.85rem; }
.dc-chips { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.dc-chip {
    flex-shrink: 0; white-space: nowrap; padding: 0.12rem 0.55rem; border-radius: 999px;
    background: var(--dc-thead); color: var(--dc-muted); font-size: 0.72rem; font-weight: 700;
}
.dc-chip-code { font-family: 'IBM Plex Mono', Consolas, monospace; direction: ltr; color: var(--dc-primary); }

.dc-school-info { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.dc-school-info-cards { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.6rem; }
.dc-kv-card { min-width: 0; border: 1px solid var(--dc-border); border-radius: 0.65rem; padding: 0 0.7rem 0.35rem; }
.dc-kv-card h5 {
    margin: 0 0 0.25rem; padding: 0.35rem 0; font-size: 0.82rem; font-weight: 800; color: var(--dc-primary);
    border-bottom: 1px solid var(--dc-border);
}
/* Two pairs per line: a label of a known width, then the value — so values line up down the column
   and keep enough room to be read instead of turning into «ح…». */
.dc-kv-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; }
/* The building card is the narrow one: one pair per line, so its six rows match the basic card's six. */
.dc-kv-grid-2 { grid-template-columns: minmax(0, 1fr); }
.dc-kv {
    min-width: 0; height: 1.75rem; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center; gap: 0 0.5rem;
    border-bottom: 1px dashed var(--dc-border); font-size: 0.8rem; white-space: nowrap;
}
.dc-kv dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dc-muted); }
.dc-kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.dc-school-info-tree { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; }
/* The full-page version fills the page height the same way. */
.dc-school-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 1024px) {
    .dc-school-info-cards { grid-template-columns: minmax(0, 1fr); }
    .dc-school-dialog-title { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}
@media (max-width: 640px) {
    .dc-kv-grid, .dc-kv-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .dc-kv { grid-template-columns: 7.5rem minmax(0, 1fr); }
    /* On a phone the cards alone fill the screen; let the body scroll rather than hide the tree. */
    .dc-school-dialog-body { overflow: auto; }
    .dc-school-info-tree { min-height: 22rem; }
}

/* MapsPage.razor — inline school-details panel + class/classroom hierarchy tree. */
.dc-school-detail-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.dc-school-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.15rem 1rem; font-size: 0.8rem; margin: 0 0 0.5rem;
}
.dc-school-detail-grid dt, .dc-school-detail-grid dd { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-school-detail-grid dt { color: var(--dc-muted); }
.dc-school-detail-grid dd { margin: 0 0 0.35rem; font-weight: 600; }
/* شجرة الأقسام والصفوف (SchoolDetailTree) — جدول بأعمدة سطح المكتب: البيان / نوع التعليم / الفصول / الطلاب.
   ارتفاع السطر ثابت، والقسم بخلفية مميزة عن الصف، والصف عن الفصل؛ التمرير داخل .dc-tree-scroll فقط. */
.dc-tree-tools { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; min-width: 0; white-space: nowrap; }
.dc-tree-title { margin: 0 0 0 0.35rem; font-size: 0.85rem; font-weight: 800; color: var(--dc-primary); }
.dc-tree-tools-end { margin-inline-start: auto; display: flex; gap: 0.35rem; }
.dc-tree-scroll {
    flex: 1 1 auto; min-height: 6rem; overflow: auto;
    border: 1px solid var(--dc-border); border-radius: 0.65rem; background: var(--dc-surface);
}
.dc-tree-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.dc-tree-table th, .dc-tree-table td {
    height: 1.85rem; padding: 0 0.5rem; border-bottom: 1px solid var(--dc-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.dc-tree-table th:first-child, .dc-tree-table td:first-child { text-align: start; }
.dc-tree-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--dc-thead); color: var(--dc-muted); font-weight: 800;
}
.dc-tree-table tfoot td {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--dc-surface); font-weight: 800; border-top: 2px solid var(--dc-border); border-bottom: 0;
}
.dc-tree-branch td {
    cursor: pointer; font-weight: 800; color: var(--dc-primary);
    background: color-mix(in srgb, var(--dc-primary) 16%, var(--dc-surface));
}
.dc-tree-class td { cursor: pointer; font-weight: 600; background: var(--dc-thead); }
.dc-tree-leaf td { color: var(--dc-muted); background: var(--dc-surface); }
.dc-tree-branch:hover td, .dc-tree-class:hover td { filter: brightness(0.97); }
.dc-tree-cell { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.dc-tree-level-1 { padding-inline-start: 1.5rem; }
.dc-tree-level-2 { padding-inline-start: 3rem; }
.dc-tree-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-tree-toggle, .dc-tree-spacer { flex-shrink: 0; width: 1.15rem; height: 1.15rem; }
.dc-tree-toggle {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1.5px solid currentColor; border-radius: 0.25rem; background: var(--dc-surface);
    color: inherit; font: 800 0.85rem/1 system-ui, sans-serif; cursor: pointer;
}

/* شريط معدلات النمو أسفل الخريطة — يقابل حقول النسب في شاشة المدارس بسطح المكتب. */
.dc-rate-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.dc-rate-box {
    flex: 1 1 8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    border: 1px solid var(--dc-border); border-radius: 0.5rem; background: var(--dc-surface);
    padding: 0.3rem 0.5rem; font-size: 0.8rem;
}
.dc-rate-label { color: var(--dc-muted); }
.dc-rate-value { font-weight: 800; display: flex; align-items: center; gap: 0.25rem; direction: ltr; }
.dc-rate-value.up { color: #2e7d32; }
.dc-rate-value.down { color: #A63A1E; }
.dc-rate-value.flat { color: var(--dc-muted); }
.dc-building-card { margin-top: 0.5rem; }
.dc-same-location { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.dc-row-active { background: var(--dc-row-hover); }

.dc-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--dc-border);
    border-radius: 0.65rem;
    background: var(--dc-surface);
}
.dc-main-inner:has(#schoolMap) .dc-table-wrap,
.dc-main-inner:has([id^="schoolMap-"]) .dc-table-wrap {
    flex: 0 1 auto;
    max-height: min(40vh, 22rem);
}
.dc-table-wrap .table { min-width: 36rem; }
/* Toolbar.razor lays itself out with Tailwind; `dc-toolbar` is only the hook for what sits inside it.
   A label inline in the toolbar must not carry the stacked-form bottom margin. */
.dc-toolbar .dc-label { margin-bottom: 0; }
.dc-file-pick {
    display: inline-flex; align-items: center; gap: 0.4rem;
    position: relative;
}
.dc-file-pick .dc-label { margin-bottom: 0; }
.dc-file-name {
    font-size: 0.78rem; color: var(--dc-muted);
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-map-hint { margin: 0 0 0.75rem; color: var(--dc-muted); font-size: 0.85rem; }
.alert-warning { background: #fffbeb; color: #92400e; }
html.dark .alert-warning { background: rgba(120, 53, 15, 0.4); color: #fde68a; }

@media (max-width: 767px) {
    .dc-main-inner { padding: 0.65rem 0.75rem 0.75rem; }
    .dc-year-select { min-width: 6.5rem; max-width: 6.5rem; }
    .btn, .form-control, .form-select { min-height: 2.75rem; }
    .form-control.w-auto, .form-select.w-auto { width: 100%; min-width: 0; }
    #schoolMap, [id^="schoolMap-"] { height: 55dvh; min-height: 240px; }
    .dc-main > h3:first-child { font-size: 1.05rem; }
}

@media (min-width: 768px) {
    #schoolMap, [id^="schoolMap-"] { height: calc(100dvh - 11rem); min-height: 360px; }
}

.dc-loading {
    min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dc-bg); color: var(--dc-muted);
}

#blazor-error-ui {
    background: #fef3c7; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; inset-inline: 0; padding: 0.6rem 1.25rem; position: fixed; z-index: 1000;
}
#blazor-error-ui.show { display: block; }
.dark #blazor-error-ui { background: #78350f; color: #fef3c7; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: 0.75rem; top: 0.5rem; }

/* Touch targets: only where the pointer is actually a finger. On a mouse this would tower over
   the dense table and toolbar, which is exactly the mismatch this scoping avoids. */
@media (pointer: coarse) {
    .dc-btn, .dc-input, .dc-select { min-height: 2.5rem; }
    .dc-btn-sm { min-height: 2.25rem; min-width: 2.25rem; }
}
.dc-table .dc-btn-sm, .table .dc-btn-sm {
    min-height: 1.65rem; min-width: auto;
    padding: 0.08rem 0.4rem; font-size: 0.72rem; border-radius: 0.4rem;
}
.dc-section-title { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.dc-perm-group { background: var(--dc-thead); font-weight: 700; }
.dc-perm-group-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dc-perm-table td, .dc-perm-table th { vertical-align: middle; }
.dc-perm-col { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.dc-perm-head-cell, .dc-perm-all-col { text-align: center; width: 5.5rem; }
.dc-perm-table td.dc-perm-cell-td { padding: 0; text-align: center; }
.dc-perm-search { max-width: 12rem; }
.dc-perm-legend { display: inline-flex; align-items: center; gap: 0.3rem; }

/* The screen name stays put while the five action columns scroll sideways. Every row carries an
   explicit background so the frozen cell can inherit it instead of letting text slide under it. */
.dc-perm-table tbody tr { background: var(--dc-surface); }
.dc-perm-table tbody tr:nth-child(even) { background: var(--dc-row-hover); }
.dc-perm-table tbody tr:hover { background: var(--dc-row-hover); }
.dc-perm-table .dc-perm-screen-col {
    position: sticky; inset-inline-start: 0; z-index: 1;
    background: inherit; min-width: 11rem;
    border-inline-end: 1px solid var(--dc-border);
}
.dc-perm-table thead .dc-perm-screen-col { z-index: 3; background: var(--dc-thead); }
.dc-perm-table tbody tr.dc-perm-group-tr { background: var(--dc-thead); }
/* Below the sticky header (z-index 2), which comes first in the DOM and would otherwise lose to it. */
.dc-perm-table td.dc-perm-group { position: sticky; inset-inline-start: 0; z-index: 1; }
/* A screen this set reaches at all — scannable down the column without reading every cell.
   RTL: a negative x offset puts the inset bar on the right edge, the inline start. */
.dc-perm-table tbody tr.dc-perm-on .dc-perm-screen-col {
    box-shadow: inset -3px 0 0 var(--dc-primary);
    font-weight: 700;
}

.dc-perm-box {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 1.85rem; padding: 0.1rem 0; cursor: pointer;
}
.dc-perm-box:has(input:disabled) { cursor: default; }
.dc-perm-box input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.dc-perm-mark {
    display: flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; flex-shrink: 0;
    border: 1.5px solid var(--dc-border); border-radius: 0.3rem;
    background: var(--dc-surface);
    transition: background .12s ease, border-color .12s ease;
}
.dc-perm-box:hover .dc-perm-mark { border-color: var(--dc-primary); }
.dc-perm-box input:focus-visible + .dc-perm-mark { outline: 2px solid var(--dc-primary); outline-offset: 2px; }
.dc-perm-box input:checked + .dc-perm-mark { background: var(--dc-primary); border-color: var(--dc-primary); }
.dc-perm-box input:checked + .dc-perm-mark::after {
    content: ""; width: 0.28rem; height: 0.55rem;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
/* Granted by a role: on, but not something this screen can take away. */
.dc-perm-box input:checked + .dc-perm-mark-inherited {
    background: var(--dc-thead); border-color: var(--dc-primary); border-style: dashed;
}
.dc-perm-box input:checked + .dc-perm-mark-inherited::after { border-color: var(--dc-primary); }
.dc-perm-mark-partial, .dc-perm-box input + .dc-perm-mark-partial {
    background: var(--dc-primary); border-color: var(--dc-primary);
}
.dc-perm-mark-partial::after {
    content: ""; width: 0.55rem; height: 2px; background: #fff; border: 0; transform: none;
}
.dc-perm-box input:disabled + .dc-perm-mark { opacity: 0.75; }
/* The row whose permissions dialog is open. */
.dc-row-on { background: var(--dc-row-hover); }
/* Permissions live in a window of their own: fixed height, and only the matrix scrolls inside it. */
.dc-dialog.dc-perm-dialog {
    width: min(70rem, calc(100vw - 2rem)); height: min(44rem, calc(100dvh - 2rem));
    display: flex; flex-direction: column; overflow: hidden;
}
.dc-perm-dialog-head { align-items: flex-start; }
.dc-perm-dialog-sub { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--dc-muted); line-height: 1.45; }
.dc-perm-dialog-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 0 0.75rem 0.75rem;
}
.dc-perm-dialog .dc-help { flex-shrink: 0; }
.dc-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin: 0.15rem 0; }
.dc-check input { width: 1rem; height: 1rem; }
.dc-alert-warn { background: #fff8e6; color: var(--dc-warn); }
html.dark .dc-alert-warn { background: rgba(138, 106, 18, 0.28); color: #f0d48a; }
.dc-dialog-backdrop {
    position: fixed; inset: 0; background: rgba(10, 12, 16, 0.55);
    display: flex; align-items: center; justify-content: center;
    /* Above Leaflet panes and controls (400–1000) on pages whose map is not isolated. */
    z-index: 1500;
}
.dc-dialog {
    background: var(--dc-surface); border: 1px solid var(--dc-border);
    border-radius: 0.85rem; width: min(32rem, calc(100vw - 1.5rem));
    box-shadow: 0 16px 40px rgba(22, 36, 31, 0.22);
}
.dc-dialog-head, .dc-dialog-actions {
    display: flex; align-items: center;
    gap: 0.75rem; padding: 0.6rem 0.75rem;
}
.dc-dialog-head { justify-content: space-between; }
.dc-dialog-head h4 { margin: 0; font-size: 1rem; }
.dc-dialog-close {
    flex-shrink: 0; width: 1.9rem; height: 1.9rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: transparent; color: var(--dc-muted); cursor: pointer;
}
.dc-dialog-close:hover { background: var(--dc-row-hover); color: var(--dc-text); }
.dc-dialog-body { padding: 0 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.65rem; }
.dc-dialog-actions { border-top: 1px solid var(--dc-border); }
.dc-dialog-actions .btn, .dc-dialog-actions .dc-btn { flex: 1; }
.dc-icon-btn { padding: 0; width: 1.65rem; flex-shrink: 0; }
.dc-icon-btn svg { display: block; }

.dc-name-broken { color: var(--dc-warn); font-weight: 700; }
.dc-label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.25rem; }
.dc-stack { display: flex; flex-direction: column; gap: 0.65rem; max-width: 36rem; }
.dc-card { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: 0.85rem; padding: 0.9rem 1rem; }
.dc-alert { padding: 0.45rem 0.7rem; border-radius: 0.55rem; margin-bottom: 0.5rem; font-size: 0.8rem; }
.dc-alert-danger { background: var(--dc-error-bg); color: var(--dc-error-text); }
.dc-alert-info { background: var(--dc-info-bg); color: var(--dc-info-text); }
.dc-alert-ok { background: var(--dc-ok-bg); color: var(--dc-ok-text); }
.dc-row-cards { display: none; }

@media (max-width: 767px) {
    .dc-main-inner:has(.dc-row-cards) .dc-table-wrap { display: none; }
    .dc-table-wrap table, .dc-table-wrap .dc-table { display: none; }
    /* A permission matrix has no card form to fall back to: keep the grid and let it scroll sideways. */
    .dc-perm-dialog .dc-table-wrap { display: block; }
    .dc-perm-dialog .dc-table-wrap table, .dc-perm-dialog .dc-table-wrap .dc-table { display: table; }
    .dc-row-cards {
        display: grid; gap: 0.65rem;
        flex: 1 1 auto; min-height: 0; overflow: auto;
    }
    .dc-table .dc-btn-sm, .table .dc-btn-sm { min-height: 2.75rem; }
    .dc-row-card {
        background: var(--dc-surface); border: 1px solid var(--dc-border);
        border-radius: 0.85rem; padding: 0.85rem;
    }
    .dc-row-card dt { color: var(--dc-muted); font-size: 0.75rem; }
    .dc-row-card dd { margin: 0 0 0.45rem; font-weight: 700; }
}

@media (min-width: 320px) { .dc-main-inner { padding-inline: 0.75rem; } }
@media (min-width: 480px) { .dc-main-inner { padding-inline: 1rem; } }
@media (min-width: 768px) { .dc-main-inner { padding-inline: 1.25rem; } }
@media (min-width: 1024px) { .dc-main-inner { padding-inline: 1.5rem; } }
@media (min-width: 1280px) { .dc-main-inner { padding-inline: 1.75rem; } }
@media (min-width: 1536px) { .dc-main-inner { padding-inline: 2rem; } }

.dc-spinner-btn { width: 0.95rem; height: 0.95rem; border-width: 2px; flex-shrink: 0; }

.dc-busy-overlay {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 16, 18, 0.55);
    backdrop-filter: blur(4px);
}
.dc-busy-card {
    width: min(22rem, calc(100% - 2rem));
    background: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: 1rem;
    padding: 1.25rem 1.1rem 1.1rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.dc-busy-card .dc-brand-mark { width: 3rem; height: 3rem; border-radius: 0.95rem; }
.dc-busy-status { margin: 0; font-size: 0.92rem; font-weight: 700; }
.dc-busy-pct { margin: 0; font-size: 0.78rem; color: var(--dc-muted); }
.dc-progress {
    width: 100%; height: 0.55rem; border-radius: 999px;
    background: var(--dc-border); overflow: hidden;
}
.dc-progress-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--dc-primary), #8A6A12);
    border-radius: inherit;
    transition: width 0.12s ease-out;
}
.dc-progress.is-wait .dc-progress-fill {
    width: 35% !important;
    animation: dc-progress-slide 1.15s ease-in-out infinite;
}
@keyframes dc-progress-slide {
    0% { transform: translateX(180%); }
    100% { transform: translateX(-280%); }
}
.dc-file-picked { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--dc-muted); }

.dc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dc-import-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 767px) {
    .dc-import-bar { grid-template-columns: 1fr; }
}
.dc-import-slot {
    border: 1px solid var(--dc-border);
    border-radius: 0.55rem;
    background: var(--dc-surface);
    padding: 0.45rem 0.55rem;
    min-width: 0;
}
.dc-import-slot-head {
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}
.dc-import-pick label { cursor: pointer; }
.dc-import-name {
    font-size: 0.78rem;
    color: var(--dc-muted);
    min-width: 0;
}
.dc-import-stats {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--dc-muted);
}
.dc-import-err {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dc-error-text);
}
/* Name-import review table (NameImportReview.razor). */
.dc-import-ok {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dc-ok-text);
}
.dc-table tbody tr.dc-import-row-bad,
.dc-table tbody tr.dc-import-row-bad:nth-child(even),
.dc-row-card.dc-import-row-bad { background: var(--dc-error-bg); }
.dc-import-cell { min-width: 16rem; width: 60%; }
.dc-import-cell .dc-input { width: 100%; }
.dc-input.dc-input-invalid { border-color: var(--dc-error-text); }

.dc-help {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    color: var(--dc-muted);
    line-height: 1.45;
}
.dc-crash {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: var(--dc-muted);
}

.dc-toasts {
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: min(26.5rem, calc(100vw - 1.5rem));
    pointer-events: none;
}
.dc-toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.7rem;
    column-gap: 0.7rem;
    align-items: start;
    overflow: hidden;
    padding: 0.8rem 0.8rem 0.95rem;
    border-radius: 0.9rem;
    background: var(--dc-surface);
    border: 1px solid var(--dc-border);
    box-shadow: 0 14px 36px rgba(16, 33, 28, 0.18);
    animation: dc-toast-in 0.22s ease-out;
}
html.dark .dc-toast { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); }
.dc-toast-mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, #1C5A4C, #8A6A12);
}
.dc-toast-mark svg { display: block; }
.dc-toast-body {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    padding-top: 0.08rem;
}
.dc-toast-title {
    display: block;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
}
.dc-toast-text {
    display: block;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--dc-muted);
}
.dc-toast-close {
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dc-muted);
    cursor: pointer;
}
.dc-toast-close:hover { background: var(--dc-row-hover); color: var(--dc-text); }
.dc-toast-progress {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
}
.dc-toast-ok { border-inline-start: 4px solid var(--dc-success); }
.dc-toast-ok .dc-toast-title { color: var(--dc-success); }
.dc-toast-ok .dc-toast-progress { background: var(--dc-success); }
.dc-toast-ok .dc-toast-mark { background: linear-gradient(135deg, #3F6B3A, #1C5A4C); }
.dc-toast-danger { border-inline-start: 4px solid var(--dc-danger); }
.dc-toast-danger .dc-toast-title { color: var(--dc-danger); }
.dc-toast-danger .dc-toast-progress { background: var(--dc-danger); }
.dc-toast-danger .dc-toast-mark { background: linear-gradient(135deg, #A63A1E, #8A6A12); }
.dc-toast-warn { border-inline-start: 4px solid var(--dc-warn); }
.dc-toast-warn .dc-toast-title { color: var(--dc-warn); }
.dc-toast-warn .dc-toast-progress { background: var(--dc-warn); }
.dc-toast-warn .dc-toast-mark { background: linear-gradient(135deg, #8A6A12, #A63A1E); }
.dc-toast-info { border-inline-start: 4px solid var(--dc-primary); }
.dc-toast-info .dc-toast-title { color: var(--dc-primary); }
.dc-toast-info .dc-toast-progress { background: var(--dc-primary); }
.dc-toast-info .dc-toast-mark { background: linear-gradient(135deg, #1C5A4C, #8A6A12); }
@keyframes dc-toast-in {
    from { opacity: 0; transform: translateY(-0.55rem); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-toast { animation: none; }
}

} /* @layer components */

/* Leaflet overlays drawn by js/app.js (dcMaps). Unlayered on purpose: leaflet.css is unlayered, and a
   layered rule would lose to it whatever its specificity. */
.leaflet-control-zoom a {
    width: 2.25rem !important; height: 2.25rem !important; line-height: 2.25rem !important;
}
.dc-cluster {
    display: flex !important; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(28, 90, 76, 0.92); color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    font: 800 0.78rem/1 system-ui, sans-serif;
}
.dc-origin-pin span {
    display: block; width: 22px; height: 22px; background: #D32F2F;
    border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.dc-result-pin span {
    display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; border: 2px solid #fff; color: #fff;
    font: 800 0.8rem/1 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.dc-result-label {
    padding: 1px 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.94); color: #1b1b1b;
    font: 700 11px/1.4 'IBM Plex Mono', Consolas, monospace; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.leaflet-bar a.dc-map-fullscreen, a.dc-map-fullscreen {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; margin-top: 0.5rem;
    background: #fff; color: #333; border-radius: 4px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
a.dc-map-fullscreen:hover { background: #f4f4f4; }
/* Arabic popups and tooltips inside the LTR map container. */
.leaflet-popup-content, .leaflet-tooltip { direction: rtl; text-align: start; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }
.leaflet-control-attribution { direction: rtl; }