/* RHAS Admin design system.
   Brand source: rhas.org.jo (#097DC2 clinic blue, #1C2833 ink, #86BE46 green, #FA8231 orange)
   and the official logo tile (#0B4E96 royal navy). Components consume semantic tokens only;
   themes and text direction are resolved once on <html> ([data-theme], [dir]). */

/* ---------- Tokens ---------- */
:root {
    --brand-navy: #0B4E96;
    --brand-blue: #097DC2;
    --brand-green: #86BE46;

    --background: #F3F6FA;
    --surface: #FFFFFF;
    --surface-secondary: #F7F9FC;
    --surface-hover: #EDF3FA;
    --surface-sunken: #E9EFF6;
    --border: #DCE4EE;
    --border-strong: #C3D0DF;
    --text-primary: #15283D;
    --text-secondary: #41556B;
    --text-muted: #62748A;
    --text-on-primary: #FFFFFF;

    --primary: #0B4E96;
    --primary-hover: #083D77;
    --primary-light: #E6EFFA;
    --secondary: #097DC2;
    --accent: #86BE46;
    --link: #0A63AE;
    --focus: #097DC2;

    --success: #3D7A1C;
    --success-bg: #EDF6E4;
    --success-border: #C6E1AC;
    --warning: #9A4A0C;
    --warning-bg: #FFF1E4;
    --warning-border: #F7CFA9;
    --danger: #B42E24;
    --danger-hover: #93241C;
    --danger-bg: #FDEDEB;
    --danger-border: #F2C1BC;
    --info: #0A63AE;
    --info-bg: #E6F2FB;
    --info-border: #B7D8F0;

    --sidebar-bg: #0B4E96;
    --sidebar-text: rgba(255, 255, 255, .78);
    --sidebar-text-strong: #FFFFFF;
    --sidebar-muted: rgba(255, 255, 255, .56);
    --sidebar-hover: rgba(255, 255, 255, .09);
    --sidebar-active: rgba(255, 255, 255, .16);
    --sidebar-border: rgba(255, 255, 255, .12);

    --shadow-sm: 0 1px 2px rgba(16, 38, 64, .06);
    --shadow-md: 0 10px 28px rgba(16, 38, 64, .12), 0 2px 6px rgba(16, 38, 64, .06);
    --scrim: rgba(8, 24, 44, .48);

    --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2rem;
    --leading: 1.55;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --control-height: 2.5rem;
    --sidebar-width: 16.5rem;
    --sidebar-collapsed: 4.75rem;
    --header-height: 3.75rem;
    --page-max: 82rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --duration: 160ms;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --background: #081424;
    --surface: #0E1E33;
    --surface-secondary: #11243C;
    --surface-hover: #172E4B;
    --surface-sunken: #0B192B;
    --border: #213857;
    --border-strong: #2F4B70;
    --text-primary: #E4ECF5;
    --text-secondary: #B2C1D3;
    --text-muted: #8DA0B7;
    --text-on-primary: #06182B;

    --primary: #5AAEEC;
    --primary-hover: #82C2F2;
    --primary-light: #123A60;
    --secondary: #5AAEEC;
    --accent: #9CCB67;
    --link: #7DBDF0;
    --focus: #7DBDF0;

    --success: #9CCB67;
    --success-bg: #16301B;
    --success-border: #2C5530;
    --warning: #F5A865;
    --warning-bg: #36230F;
    --warning-border: #5E3C19;
    --danger: #F28A80;
    --danger-hover: #F6A69E;
    --danger-bg: #3A1A1B;
    --danger-border: #623031;
    --info: #7DBDF0;
    --info-bg: #102F4C;
    --info-border: #1F4B73;

    --sidebar-bg: #0A2649;
    --sidebar-hover: rgba(255, 255, 255, .07);
    --sidebar-active: rgba(90, 174, 236, .2);
    --sidebar-border: rgba(255, 255, 255, .08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --scrim: rgba(2, 8, 18, .62);
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
:lang(ar) body, body:lang(ar) { --leading: 1.75; }
h1, h2, h3, h4 { margin: 0; color: var(--text-primary); line-height: 1.3; font-weight: 600; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--primary-light); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
/* Icons that point along the reading direction flip in RTL. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }
.muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
bdi { unicode-bidi: isolate; }
.preserve-whitespace { white-space: pre-wrap; overflow-wrap: anywhere; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); top: -4rem; z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--primary); color: var(--text-on-primary); font-weight: 600; }
.skip-link:focus { top: var(--space-3); color: var(--text-on-primary); }

/* ---------- Application shell ---------- */
.app { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: width var(--duration) var(--ease), transform 220ms var(--ease);
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-4); }
.sidebar-brand a { display: block; line-height: 0; border-radius: var(--radius-md); }
.sidebar-logo { display: block; width: 7.5rem; height: auto; }
.sidebar .sidebar-close { display: none; }
.sidebar .btn-ghost { --btn-fg: var(--sidebar-text); --btn-hover: var(--sidebar-hover); }
.sidebar .btn-ghost:hover { color: var(--sidebar-text-strong); }
.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-3) var(--space-4); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.nav-section + .nav-section { margin-top: var(--space-4); }
.nav-section-title {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-2) var(--space-3); margin: 0;
    border: 0; background: none; cursor: pointer; list-style: none;
    color: var(--sidebar-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
    border-radius: var(--radius-sm);
}
.nav-section-title::-webkit-details-marker { display: none; }
.nav-section-title:hover { color: var(--sidebar-text-strong); }
.nav-section-title .chevron { margin-inline-start: auto; transition: transform var(--duration) var(--ease); }
details.nav-section:not([open]) > .nav-section-title .chevron { transform: rotate(-90deg); }
[dir="rtl"] details.nav-section:not([open]) > .nav-section-title .chevron { transform: rotate(90deg); }
.nav-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: 2px; }
.nav-link {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 2.5rem; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text); text-decoration: none; font-weight: 500;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-link:focus-visible { outline-color: #FFFFFF; outline-offset: -2px; }
.nav-link[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-text-strong); font-weight: 600; }
.nav-link[aria-current="page"]::before {
    content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-3)); inset-block: .5rem;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-green);
}
[dir="rtl"] .nav-link[aria-current="page"]::before { border-radius: 3px 0 0 3px; }
.nav-link .icon { opacity: .9; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--sidebar-border); }
.sidebar-collapse { width: 100%; justify-content: flex-start; color: var(--sidebar-text); }
.sidebar-collapse:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.sidebar-collapse .icon { transition: transform var(--duration) var(--ease); }

.app-main { margin-inline-start: var(--sidebar-width); min-width: 0; transition: margin var(--duration) var(--ease); }
.app-header {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--space-3);
    height: var(--header-height); padding-inline: var(--space-6);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.4) blur(8px);
}
.app-header .header-menu-button { display: none; }
.header-context { flex: 1; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-1); }
.page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-8) var(--space-6) var(--space-12); }
.scrim { display: none; }

/* Collapsed (icon-only) sidebar on large screens. */
@media (min-width: 1024px) {
    .sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
    .sidebar-collapsed .app-main { margin-inline-start: var(--sidebar-collapsed); }
    .sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: var(--space-2); }
    .sidebar-collapsed .sidebar-logo { width: 3.25rem; }
    .sidebar-collapsed .nav-section-title { display: none; }
    .sidebar-collapsed .nav-section > .nav-list { display: grid !important; }
    .sidebar-collapsed .nav-section + .nav-section { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--sidebar-border); }
    .sidebar-collapsed .nav-link { justify-content: center; padding-inline: 0; }
    .sidebar-collapsed .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sidebar-collapsed .nav-link[aria-current="page"]::before { inset-inline-start: calc(-1 * var(--space-3)); }
    .sidebar-collapsed .nav-link::after {
        content: attr(data-tooltip);
        position: absolute; inset-inline-start: calc(100% + var(--space-3)); top: 50%;
        transform: translateY(-50%);
        padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
        background: var(--text-primary); color: var(--surface); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
        box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease);
    }
    .sidebar-collapsed .nav-link:hover::after, .sidebar-collapsed .nav-link:focus-visible::after { opacity: 1; }
    .sidebar-collapsed .sidebar-collapse { justify-content: center; }
    .sidebar-collapsed .sidebar-collapse .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sidebar-collapsed .sidebar-collapse .icon { transform: scaleX(-1); }
    [dir="rtl"].sidebar-collapsed .sidebar-collapse .icon { transform: none; }
    .sidebar-collapsed .sidebar-nav { overflow: visible; }
}

/* Off-canvas navigation below 1024px. */
@media (max-width: 1023.98px) {
    .sidebar { width: min(19rem, 86vw); transform: translateX(-100%); box-shadow: var(--shadow-md); visibility: hidden; }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .nav-open .sidebar { transform: none; visibility: visible; }
    .sidebar .sidebar-close { display: inline-flex; }
    .sidebar-footer { display: none; }
    .app-main { margin-inline-start: 0; }
    .app-header .header-menu-button { display: inline-flex; }
    .scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
    .nav-open .scrim { display: block; }
    .nav-open body { overflow: hidden; }
    .app-header { padding-inline: var(--space-4); }
    .page { padding: var(--space-6) var(--space-4) var(--space-10); }
}

/* ---------- Breadcrumb & page header ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-muted); min-width: 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-1); min-width: 0; white-space: nowrap; }
.breadcrumb li:not(:last-child) { flex: none; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border-strong); padding-inline: var(--space-1); }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639.98px) { .breadcrumb li:not(:last-child):not(:nth-last-child(2)) { display: none; } }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em; }
:lang(ar) .page-title { letter-spacing: 0; }
.page-description { margin-top: var(--space-1); color: var(--text-secondary); max-width: 68ch; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.section-title { font-size: var(--text-lg); font-weight: 600; }
.stack { display: grid; gap: var(--space-6); }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--surface); --btn-fg: var(--text-primary); --btn-border: var(--border-strong); --btn-hover: var(--surface-hover);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-4);
    border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: var(--text-base); font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none;
    cursor: pointer; user-select: none;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { --btn-bg: var(--primary); --btn-fg: var(--text-on-primary); --btn-border: var(--primary); --btn-hover: var(--primary-hover); }
.btn-primary:hover { border-color: var(--primary-hover); }
.btn-secondary { --btn-bg: var(--primary-light); --btn-fg: var(--primary); --btn-border: transparent; --btn-hover: color-mix(in srgb, var(--primary-light) 70%, var(--primary) 12%); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--primary); --btn-border: color-mix(in srgb, var(--primary) 45%, var(--border)); --btn-hover: var(--primary-light); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-secondary); --btn-border: transparent; --btn-hover: var(--surface-hover); }
.btn-ghost:hover { color: var(--text-primary); }
.btn-danger { --btn-bg: var(--danger); --btn-fg: #FFFFFF; --btn-border: var(--danger); --btn-hover: var(--danger-hover); }
:root[data-theme="dark"] .btn-danger { --btn-fg: #2A0E0C; }
.btn-danger-outline { --btn-bg: transparent; --btn-fg: var(--danger); --btn-border: var(--danger-border); --btn-hover: var(--danger-bg); }
.btn-sm { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-icon { width: var(--control-height); padding: 0; }
.btn-icon.btn-sm { width: 2rem; }
.btn-block { width: 100%; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid var(--btn-fg); border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.card-title { font-size: var(--text-md); font-weight: 600; }
.card-subtitle { color: var(--text-muted); font-size: var(--text-sm); }
.card-body { padding: var(--space-5); }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-secondary); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.card-link { font-size: var(--text-sm); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-6); }
.form-narrow { max-width: 40rem; }
.form-section { display: grid; gap: var(--space-5); }
.form-section + .form-section { padding-top: var(--space-6); border-top: 1px solid var(--border); }
.form-section-title { font-size: var(--text-md); font-weight: 600; }
.form-section-hint { color: var(--text-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-4)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .span-all { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.field-label { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.req { color: var(--danger); font-weight: 600; }
.field-hint { font-size: var(--text-xs); color: var(--text-muted); }
.field-error { font-size: var(--text-xs); color: var(--danger); min-height: 0; }
.field-error:empty { display: none; }
.input {
    display: block; width: 100%; min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: var(--text-base); line-height: 1.4;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.input::placeholder { color: var(--text-muted); opacity: .85; }
.input:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--primary)); }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.input:disabled, .input[readonly] { background: var(--surface-sunken); color: var(--text-secondary); cursor: not-allowed; }
.input.is-invalid, .input[aria-invalid="true"] { border-color: var(--danger); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
textarea.input { min-height: 7rem; resize: vertical; }
select.input {
    appearance: none; padding-inline-end: var(--space-8); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362748A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 1rem; background-position: right .75rem center;
}
[dir="rtl"] select.input { background-position: left .75rem center; }
input[type="file"].input { padding: var(--space-1); cursor: pointer; }
input[type="file"].input::file-selector-button {
    margin-inline-end: var(--space-3); padding: var(--space-2) var(--space-3);
    border: 0; border-radius: calc(var(--radius-sm) - 2px); background: var(--primary-light); color: var(--primary);
    font: inherit; font-weight: 500; cursor: pointer;
}
input[type="date"].input { min-height: var(--control-height); }
.input-group { position: relative; }
.input-group > .icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.input-group > .input { padding-inline-start: 2.25rem; }

.check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); color: var(--text-primary); }
.check input[type="checkbox"], .check input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: .15rem 0 0; accent-color: var(--primary); flex: none; cursor: pointer; }
.check-hint { display: block; color: var(--text-muted); font-size: var(--text-sm); }
.check-list { display: grid; gap: var(--space-3); }
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input {
    appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
    width: 2.5rem; height: 1.5rem; border-radius: var(--radius-pill);
    background: var(--border-strong); transition: background var(--duration) var(--ease);
}
.switch input::after {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--duration) var(--ease);
}
.switch input:checked { background: var(--primary); }
.switch input:checked::after { inset-inline-start: calc(100% - 1.125rem - 3px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch-text { display: grid; }
.switch-text small { color: var(--text-muted); font-size: var(--text-sm); }

.validation-summary-errors, .validation-summary {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); font-size: var(--text-sm);
}
.validation-summary-errors p { font-weight: 600; margin-bottom: var(--space-1); }
.validation-summary-errors ul, .validation-summary ul { margin: 0; padding-inline-start: var(--space-5); }
.validation-summary-valid, .validation-summary:empty { display: none; }

/* Multi-select option lists (events). */
.option-group { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); min-width: 0; }
.option-group legend { padding: 0; margin-bottom: var(--space-2); }
.option-list { max-height: 13rem; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 2px; }
.option-group.is-invalid .option-list { border-color: var(--danger); }
.option-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.option-item:hover { background: var(--surface-hover); }
.option-item input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); margin: 0; }
.option-item small { color: var(--text-muted); }
.option-count { font-size: var(--text-xs); color: var(--text-muted); }

.image-preview { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-secondary); }
.thumb { display: block; width: 4.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--border); }

/* Rich text editor container */
.tox.tox-tinymce { border-color: var(--border-strong) !important; border-radius: var(--radius-sm) !important; }
.tox.tox-tinymce.is-invalid { border-color: var(--danger) !important; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table thead th { position: sticky; top: 0; background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.table tbody tr { transition: background var(--duration) var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: end; }
.cell-strong { font-weight: 600; color: var(--text-primary); }
.pre-line { white-space: pre-line; }
a.cell-strong { text-decoration: none; }
a.cell-strong:hover { color: var(--link); text-decoration: underline; }
.cell-sub { display: block; color: var(--text-muted); font-size: var(--text-xs); }

/* DataTables, restyled with the same tokens (stock stylesheet not loaded). */
.dt-container { font-size: var(--text-sm); }
.dt-container .dt-layout-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.dt-container .dt-layout-row.dt-layout-table { display: block; padding: 0; overflow-x: auto; border-block: 1px solid var(--border); }
.dt-container .dt-layout-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dt-container .dt-layout-start { flex: 1 1 18rem; }
.dt-search { position: relative; flex: 1; max-width: 22rem; }
.dt-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dt-search::before {
    content: ""; position: absolute; inset-inline-start: .75rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); pointer-events: none;
    background: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dt-search input.dt-input, .dt-length select.dt-input {
    min-height: var(--control-height); padding: var(--space-2) var(--space-3);
    background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-base);
}
.dt-search input.dt-input { width: 100%; padding-inline-start: 2.25rem; }
.dt-search input.dt-input::-webkit-search-cancel-button { cursor: pointer; }
.dt-search input.dt-input:focus, .dt-length select.dt-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.dt-length { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); white-space: nowrap; }
.dt-length select.dt-input { padding-inline: var(--space-2) var(--space-6); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362748A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: .9rem; background-position: right .5rem center; }
[dir="rtl"] .dt-length select.dt-input { background-position: left .5rem center; }
.dt-info { color: var(--text-muted); }
table.dataTable { width: 100% !important; border-collapse: separate; border-spacing: 0; }
table.dataTable thead th {
    position: relative; padding: var(--space-3) var(--space-4); text-align: start;
    background: var(--surface-secondary); color: var(--text-secondary); border-bottom: 1px solid var(--border);
    font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
table.dataTable thead th.dt-orderable-asc, table.dataTable thead th.dt-orderable-desc { cursor: pointer; }
table.dataTable thead th.dt-orderable-asc:hover, table.dataTable thead th.dt-orderable-desc:hover { color: var(--text-primary); }
table.dataTable thead .dt-column-header { display: inline-flex; align-items: center; gap: var(--space-1); }
table.dataTable thead .dt-column-order { display: inline-grid; width: .75rem; height: .9rem; opacity: .35; }
table.dataTable thead .dt-column-order::before, table.dataTable thead .dt-column-order::after { font-size: .55rem; line-height: .45rem; }
table.dataTable thead .dt-orderable-asc .dt-column-order::before { content: "▲"; }
table.dataTable thead .dt-orderable-desc .dt-column-order::after { content: "▼"; }
table.dataTable thead .dt-ordering-asc .dt-column-order, table.dataTable thead .dt-ordering-desc .dt-column-order { opacity: 1; color: var(--primary); }
table.dataTable thead .dt-ordering-asc .dt-column-order::after, table.dataTable thead .dt-ordering-desc .dt-column-order::before { opacity: .3; }
table.dataTable tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); text-align: start; }
table.dataTable tbody tr:last-child td { border-bottom: 0; }
table.dataTable tbody tr:hover td { background: var(--surface-hover); }
table.dataTable td.dt-type-numeric, table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-date, table.dataTable th.dt-type-date { text-align: start; }
table.dataTable td.col-actions, table.dataTable th.col-actions {
    position: sticky; inset-inline-end: 0; width: 1%; text-align: end;
    background: var(--surface); box-shadow: inset 1px 0 0 var(--border);
}
[dir="rtl"] table.dataTable td.col-actions, [dir="rtl"] table.dataTable th.col-actions { box-shadow: inset -1px 0 0 var(--border); }
table.dataTable th.col-actions { background: var(--surface-secondary); }
table.dataTable tbody tr:hover td.col-actions { background: var(--surface-hover); }
table.dataTable td.dt-empty { padding: 0; border: 0; background: var(--surface) !important; }
.dt-paging nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.dt-paging .dt-paging-button {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--space-2);
    border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary);
    font-size: var(--text-sm); cursor: pointer;
}
.dt-paging .dt-paging-button:hover:not(.disabled) { background: var(--surface-hover); color: var(--text-primary); }
.dt-paging .dt-paging-button.current { background: var(--primary-light); color: var(--primary); font-weight: 600; border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.dt-paging .dt-paging-button.disabled { opacity: .4; cursor: default; }
.dt-paging .dt-paging-button.previous, .dt-paging .dt-paging-button.next, .dt-paging .dt-paging-button.first, .dt-paging .dt-paging-button.last { font-size: var(--text-md); }
.dt-container { position: relative; }
.dt-processing {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
    background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-secondary); font-weight: 500;
}
.dt-processing > div:not(.dt-processing-text) { display: none; }
.dt-processing::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--primary); border-inline-end-color: transparent; animation: spin .7s linear infinite; }
@media (max-width: 639.98px) {
    .dt-container .dt-layout-row { padding: var(--space-3) var(--space-4); }
    .dt-search { max-width: none; }
    .dt-container .dt-layout-row:last-child { flex-direction: column; align-items: stretch; }
    .dt-container .dt-layout-row:last-child .dt-layout-cell { justify-content: center; flex: none; }
}

/* ---------- Badges ---------- */
.badge, .status-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .125rem .6rem; border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
    background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border);
}
.badge::before, .status-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.badge-plain::before { display: none; }
.badge-success, .status-active { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning, .status-emailverificationrequired { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger, .status-disabled, .status-locked { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge-neutral, .status-deleted { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border); }

/* ---------- Alerts & toasts ---------- */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--info-border); background: var(--info-bg); color: var(--text-primary); font-size: var(--text-sm); }
.alert > .icon { margin-top: .1rem; color: var(--info); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); }
.alert-success > .icon { color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.alert-warning > .icon { color: var(--warning); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); }
.alert-danger > .icon { color: var(--danger); }
.alert-body { flex: 1; min-width: 0; }
.toast-region { position: fixed; z-index: 60; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); display: grid; gap: var(--space-2); width: min(24rem, calc(100vw - 2rem)); }
.toast {
    display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--success);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm);
    animation: toast-in 200ms var(--ease);
}
.toast > .icon { color: var(--success); margin-top: .1rem; }
.toast-danger { border-inline-start-color: var(--danger); }
.toast-danger > .icon { color: var(--danger); }
.toast .btn { margin-inline-start: auto; margin-block: -.25rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }
@media (max-width: 639.98px) { .toast-region { inset-inline: var(--space-4); inset-block-end: var(--space-4); width: auto; } }

/* ---------- Menus ---------- */
.menu-wrap { position: relative; display: inline-flex; }
.menu {
    position: absolute; z-index: 50; top: calc(100% + var(--space-1)); inset-inline-end: 0;
    min-width: 12rem; padding: var(--space-1);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    animation: menu-in 120ms var(--ease);
}
.menu-up { top: auto; bottom: calc(100% + var(--space-1)); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-header { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.menu-header small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.menu-header strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.menu-label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.menu-item {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-primary); text-decoration: none; text-align: start; font-size: var(--text-base); cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); color: var(--text-primary); outline: none; }
.menu-item .icon { color: var(--text-muted); }
.menu-item[aria-checked="true"] { font-weight: 600; }
.menu-item[aria-checked="true"]::after { content: ""; margin-inline-start: auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary); }
.menu-item-danger, .menu-item-danger .icon { color: var(--danger); }
.menu-item-danger:hover { background: var(--danger-bg); color: var(--danger); }
.menu-divider { height: 1px; margin: var(--space-1) 0; background: var(--border); }
.menu form { margin: 0; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-weight: 600; font-size: var(--text-sm); }
.header-user { gap: var(--space-2); padding-inline: var(--space-1) var(--space-2); }
.header-user-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--text-primary); }
@media (max-width: 767.98px) { .header-user-name, .header-user .chevron { display: none; } .header-user { padding-inline: var(--space-1); } }

/* ---------- Dialogs & drawers ---------- */
dialog.modal {
    width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-md);
}
dialog.modal[open] { animation: modal-in 160ms var(--ease); }
dialog.modal::backdrop { background: var(--scrim); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-body { display: flex; gap: var(--space-4); padding: var(--space-6); }
.modal-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary-light); color: var(--primary); }
.modal-icon-danger { background: var(--danger-bg); color: var(--danger); }
.modal-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); }
.modal-text { color: var(--text-secondary); }
.modal-subject { margin-top: var(--space-2); font-weight: 600; overflow-wrap: anywhere; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--surface-secondary); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (max-width: 479.98px) { .modal-footer { flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } .modal-body { flex-direction: column; } }

/* ---------- Empty, loading & error states ---------- */
.empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-secondary); }
.empty-state-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); border-radius: 50%; background: var(--surface-sunken); color: var(--text-muted); }
.empty-state-title { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.empty-state-text { max-width: 40ch; font-size: var(--text-sm); }
.empty-state .btn { margin-top: var(--space-3); }
.skeleton { display: block; height: .8rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 37%, var(--surface-sunken) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.state-page { display: grid; place-items: center; min-height: calc(100vh - var(--header-height) - 8rem); }
.state-card { display: grid; justify-items: center; gap: var(--space-3); max-width: 32rem; padding: var(--space-10) var(--space-8); text-align: center; }
.state-code { font-size: var(--text-3xl); font-weight: 700; color: var(--primary); line-height: 1; }
.state-title { font-size: var(--text-xl); font-weight: 600; }
.state-text { color: var(--text-secondary); }
.state-ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); direction: ltr; overflow-wrap: anywhere; }

/* ---------- Details (definition lists) ---------- */
.details { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; }
.detail-layout > .card .details, .form-card .details { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.details dt, .details dd { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.details dt { color: var(--text-muted); font-size: var(--text-sm); padding-inline-end: var(--space-4); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.details > :nth-last-child(-n + 2) { border-bottom: 0; }
.details > :nth-child(-n + 2) { padding-top: 0; }
@media (max-width: 639.98px) { .details { grid-template-columns: minmax(0, 1fr); } .details dt { border-bottom: 0; padding-bottom: 0; } }
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1023.98px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }
.rich-description { overflow-wrap: anywhere; color: var(--text-primary); }
.rich-description p + p { margin-top: var(--space-3); }
.rich-description ul, .rich-description ol { padding-inline-start: var(--space-6); }
.lang-block + .lang-block { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.lang-tag { display: inline-block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list .badge { white-space: normal; }
.profile-preview { display: block; width: 9rem; height: 9rem; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.file-list { display: grid; gap: var(--space-4); }
.file-item { display: grid; gap: var(--space-2); }
.file-item-label { font-size: var(--text-sm); font-weight: 600; }

/* ---------- Social media links ---------- */
.social-input { display: flex; align-items: center; gap: var(--space-2); }
.social-input .input { flex: 1; min-width: 0; }
.social-badge { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: none;
    border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-fg, #FFFFFF); }
.social-badge .icon { width: 1.25rem; height: 1.25rem; }
.social-facebook { --brand: #1877F2; }
.social-instagram { --brand: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.social-x, .social-threads, .social-tiktok { --brand: #000000; }
.social-linkedin { --brand: #0A66C2; }
.social-youtube { --brand: #FF0000; }
.social-snapchat { --brand: #FFFC00; --brand-fg: #000000; }
/* Black logos need an outline to stay visible on the dark theme's surfaces. */
:root[data-theme="dark"] .social-x, :root[data-theme="dark"] .social-threads, :root[data-theme="dark"] .social-tiktok {
    box-shadow: inset 0 0 0 1px var(--border-strong); }
.social-open { flex: none; }
/* Without a valid link the button keeps its space, so every field lines up, filled or empty. */
.social-open.is-unavailable { visibility: hidden; }

/* ---------- Admin profile ---------- */
img.avatar { object-fit: cover; padding: 0; }
.avatar-xl { width: 5rem; height: 5rem; font-size: var(--text-2xl); flex: none; }
.profile-photo { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.profile-photo-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.profile-photo-actions form { margin: 0; }
.profile-photo-actions .field-hint { flex-basis: 100%; }
.profile-photo-actions label.btn { cursor: pointer; }
.profile-photo-actions label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-actions-end { display: flex; justify-content: flex-end; gap: var(--space-2); }
.email-change-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.email-change-links form { margin: 0; }
.menu-header small.ltr { display: block; }

/* ---------- Chatbot questions ---------- */
.chatbot-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
/* Wide screens: English and Arabic side by side, so the question list starts higher on the page. */
@media (min-width: 64rem) {
    .chatbot-summary { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: var(--space-5); }
    .chatbot-summary > :nth-last-child(-n + 4) { border-bottom: 0; }
    .chatbot-summary > :nth-child(-n + 4) { padding-top: 0; }
}
.question-search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 18rem; max-width: 28rem; }
.question-search .input { flex: 1; min-width: 0; }
.question-table .col-order { width: 1%; white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.question-table td { vertical-align: top; }
.question-table .cell-strong, .question-table .cell-sub { display: block; overflow-wrap: anywhere; }
.question-excerpt { margin-top: var(--space-1); }
.question-table tr:target td { background: var(--primary-light); }
.row-muted td:not(.col-actions) { opacity: .6; }
.row-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.row-actions form { display: inline-flex; gap: var(--space-1); margin: 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); }
.media-panel { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-secondary); }
.media-panel .field-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.video-preview { display: block; width: 100%; max-height: 16rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #000; }
.media-removed { opacity: .35; filter: grayscale(1); }

/* ---------- Profile completion ring ---------- */
.completion { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.completion-ring { position: relative; width: 8.5rem; height: 8.5rem; --ring: var(--primary); }
.completion-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[dir="rtl"] .completion-ring svg { transform: scaleX(-1) rotate(-90deg); }
.completion-ring circle { fill: none; stroke-width: 10; }
.completion-track { stroke: var(--surface-sunken); }
.completion-value { stroke: var(--ring); stroke-linecap: round; }
.completion-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.completion-complete { --ring: var(--success); }
.completion-partial { --ring: var(--primary); }
.completion-low { --ring: var(--warning); }
.completion-note { display: grid; gap: var(--space-2); justify-items: center; }
.completion-note .tag-list { justify-content: center; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.filter-bar .field { flex: 1 1 10rem; }
.filter-bar .field-search { flex: 2 1 16rem; }
.filter-bar .filter-actions { display: flex; gap: var(--space-2); }
.filter-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: var(--text-muted); font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.filters-toggle { display: none; }
@media (max-width: 767.98px) {
    .filters-toggle {
        display: flex; align-items: center; gap: var(--space-2); width: 100%;
        padding: var(--space-3) var(--space-5); border: 0; border-bottom: 1px solid var(--border);
        background: none; color: var(--text-primary); font-weight: 600; cursor: pointer; text-align: start;
    }
    .filters-toggle .chevron { margin-inline-start: auto; transition: transform var(--duration) var(--ease); }
    .filters-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
    .filter-bar:not(.is-open) { display: none; }
    .filter-bar .field, .filter-bar .filter-actions { flex-basis: 100%; }
    .filter-bar .filter-actions .btn { flex: 1; }
}

/* ---------- Pagination (server-rendered lists) ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); }
.pagination-links { display: flex; gap: var(--space-2); }

/* ---------- Tabs (link-based; the active tab carries aria-current="page") ---------- */
.tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); margin-bottom: -1px;
    border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.table .col-select { width: 1%; }
.registrations { margin-top: var(--space-6); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
/* Controls that sit beside a labelled input line up with the input, not with its label. */
.field-label-spacer { visibility: hidden; }
.field-actions { display: grid; gap: var(--space-2); justify-items: start; }
.field-actions > .btn { width: auto; }
.field-switch { display: flex; align-items: center; min-height: 2.5rem; }
.registration-summary { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); }
.registration-summary > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.registration-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
/* Rows an administrator should look at before approving: not eligible, unknown, or overlapping another event. */
.table tbody tr.row-attention > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
[dir="rtl"] .table tbody tr.row-attention > td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.reason-list { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--text-xs); color: var(--text-secondary); min-width: 12rem; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1279.98px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }
.stat { display: grid; gap: var(--space-1); padding: var(--space-5); text-decoration: none; color: inherit; transition: border-color var(--duration) var(--ease); }
a.stat:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: inherit; }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
.stat-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); }
.stat-value { font-size: var(--text-3xl); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); }
.trend { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: var(--text-xs); padding: 0 .4rem; border-radius: var(--radius-pill); }
.trend-up { background: var(--success-bg); color: var(--success); }
.trend-down { background: var(--warning-bg); color: var(--warning); }
.trend-flat { background: var(--surface-sunken); color: var(--text-secondary); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1023.98px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr); } }
.attention-list, .item-list { list-style: none; margin: 0; padding: 0; }
.attention-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.attention-item:last-child { border-bottom: 0; }
.attention-item > .icon { color: var(--warning); }
.attention-item p { flex: 1; min-width: 0; }
.item-list li { border-bottom: 1px solid var(--border); }
.item-list li:last-child { border-bottom: 0; }
.item-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: inherit; text-decoration: none; }
.item-link:hover { background: var(--surface-hover); color: inherit; }
.item-main { flex: 1; min-width: 0; }
.item-title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.date-chip { display: grid; place-items: center; flex: none; width: 3rem; padding: var(--space-1) 0; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); line-height: 1.1; }
.date-chip strong { font-size: var(--text-md); }
.date-chip small { font-size: .6875rem; font-weight: 600; white-space: nowrap; }
/* Levantine Arabic month names (e.g. تشرين الأول) are longer than English abbreviations. */
:lang(ar) .date-chip { width: 4.75rem; }
.quick-actions { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.quick-actions .btn { justify-content: flex-start; }

.chart { padding: var(--space-5); }
.chart-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-3); height: 12rem; padding-top: var(--space-6); border-bottom: 1px solid var(--border-strong); }
.chart-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.chart-bar-fill { width: min(2.75rem, 70%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--primary); transition: opacity var(--duration) var(--ease); }
.chart-bars:hover .chart-bar-fill { opacity: .55; }
.chart-bars .chart-bar:hover .chart-bar-fill { opacity: 1; }
.chart-bar::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + var(--space-1)); left: 50%; transform: translateX(-50%);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--text-primary); color: var(--surface);
    font-size: var(--text-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease); z-index: 1;
}
.chart-bar:hover::after { opacity: 1; }
/* Keep the edge tooltips inside the card instead of spilling past the viewport. */
.chart-bar:first-child::after { left: auto; transform: none; inset-inline-start: 0; }
.chart-bar:last-child::after { left: auto; transform: none; inset-inline-end: 0; }
.chart-bar-value { margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart-labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-2); }
.chart-labels span { text-align: center; font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Sign-in ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; }
.auth-brand { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); padding: var(--space-10); background: var(--sidebar-bg); color: var(--sidebar-text); }
.auth-brand .sidebar-logo { width: 10rem; }
.auth-brand-text { max-width: 26rem; }
.auth-brand-text h2 { color: #FFFFFF; font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-3); }
.auth-brand-org { font-size: var(--text-sm); color: var(--sidebar-muted); }
.auth-panel { display: flex; flex-direction: column; padding: var(--space-6); }
.auth-toolbar { display: flex; justify-content: flex-end; gap: var(--space-1); }
.auth-form-wrap { flex: 1; display: grid; place-items: center; }
.auth-form { width: min(100%, 24rem); display: grid; gap: var(--space-5); }
.auth-form h1 { font-size: var(--text-2xl); }
.auth-form .auth-hint { color: var(--text-secondary); margin-top: var(--space-2); }
.auth-mobile-logo { display: none; }
.auth-form-body { display: grid; gap: var(--space-5); }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.auth-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--primary); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.btn-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.input-code { font-size: var(--text-xl); letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 859.98px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { display: none; }
    .auth-mobile-logo { display: block; width: 7rem; }
    .auth-toolbar { justify-content: space-between; align-items: center; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Form & detail page widths ---------- */
.form-card { max-width: 48rem; }
.form-card-wide { max-width: 64rem; }
.form-card .card-body { display: grid; gap: var(--space-6); }
.page > .alert { margin-bottom: var(--space-4); }
.card-media { display: block; width: 100%; max-height: 22rem; object-fit: cover; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-sunken); }
.card-media-contain { object-fit: contain; }

/* ---------- Role permissions ---------- */
.permission-search { max-width: 28rem; margin-bottom: var(--space-4); }
#permission-search-empty { margin-bottom: var(--space-4); }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.permission-group { margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-secondary); min-width: 0; }
.permission-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.check-small { font-size: var(--text-xs); color: var(--text-secondary); gap: var(--space-2); }
.check-small input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0; }

/* ---------- Audit log ---------- */
.audit-filters, .list-filters { margin-bottom: var(--space-4); }
.audit-filter-grid, .list-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); align-items: end; }
.audit-filter-actions, .list-filter-actions { display: flex; justify-content: flex-end; }
.audit-changes th[scope="row"] { font-weight: 600; white-space: nowrap; }
.audit-changes td { vertical-align: top; }
.audit-value { overflow-wrap: anywhere; white-space: pre-line; max-width: 32rem; }

/* ---------- Deleted items ---------- */
.deleted-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.deleted-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.deleted-toolbar-count { font-size: var(--text-sm); color: var(--text-muted); }
table .col-select { width: 1%; }
.col-select input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); margin: 0; vertical-align: middle; }
#empty-dialog .input { margin-top: var(--space-2); }

/* ---------- Event tasks ---------- */
.event-tasks { margin-top: var(--space-6); }
.task-table td { vertical-align: top; }
.task-table .cell-strong, .task-table .cell-sub { display: block; overflow-wrap: anywhere; }
.option-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.option-group-head .field-label { margin: 0; }
.attachment-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.attachment-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.attachment-item > .icon { flex: none; color: var(--text-muted); }
.attachment-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attachment-name small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.attachment-item.is-removed .attachment-name { text-decoration: line-through; color: var(--text-muted); }

/* ---------- Global search ---------- */
.header-search { position: relative; flex: 0 1 22rem; min-width: 0; }
.header-search .input { padding-inline-end: 2rem; }
.header-search-key { position: absolute; inset-inline-end: var(--space-2); top: 50%; transform: translateY(-50%); padding: 0 .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-xs, .75rem); line-height: 1.4; pointer-events: none; }
.header-search .input:focus ~ .header-search-key { display: none; }
.search-popover { position: absolute; z-index: 50; top: calc(100% + var(--space-1)); inset-inline: 0; min-width: min(26rem, 90vw); max-height: min(28rem, 70vh); overflow-y: auto; padding: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.search-group + .search-group { border-top: 1px solid var(--border); margin-top: var(--space-1); padding-top: var(--space-1); }
.search-group-label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--text-xs, .75rem); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.search-option { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.search-option:hover, .search-option[aria-selected="true"] { background: var(--surface-sunken); }
.search-more, .search-all { color: var(--primary, inherit); font-size: var(--text-sm); }
.search-all { border-top: 1px solid var(--border); margin-top: var(--space-1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.search-empty { padding: var(--space-3) var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.search-result-title { font-weight: 500; overflow-wrap: anywhere; }
.search-result-subtitle { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.search-results { list-style: none; margin: 0; padding: var(--space-1); }
.search-results a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface-sunken); }
.search-page-form { display: flex; gap: var(--space-3); align-items: center; }
.search-page-form .input-group { flex: 1; }
.card-title > .icon { margin-inline-end: var(--space-2); vertical-align: -3px; }
.header-search-link { display: none; }
@media (max-width: 767.98px) { .header-search { display: none; } .header-search-link { display: inline-flex; } }

/* ---------- Volunteer levels ----------
   --swatch is an administrator-chosen #RRGGBB color. It is only used for borders, dots and bars, never behind text,
   so any color stays readable in both themes. */
.level-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.color-swatch { display: inline-block; flex: none; width: .875rem; height: .875rem; border-radius: var(--radius-pill); background: var(--swatch, var(--border-strong)); box-shadow: 0 0 0 1px var(--border-strong); }
.level-card { display: grid; gap: var(--space-3); justify-items: start; }
.level-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 2px solid var(--swatch, var(--border-strong)); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-primary); font-weight: 600; }
.level-badge .color-swatch { background: var(--swatch); }
.level-badge-none { border-style: dashed; color: var(--text-secondary); font-weight: 500; }
.level-hours { margin: 0; font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.level-progress-label { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.level-progress { width: 100%; height: .5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.level-progress > span { display: block; height: 100%; width: var(--progress); background: var(--swatch, var(--primary)); border-radius: inherit; }
.level-card > .muted { margin: 0; }
.level-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--success); font-weight: 500; }
.color-field { display: flex; align-items: center; gap: var(--space-2); }
.color-field input[type="color"] { flex: none; width: var(--control-height); height: var(--control-height); padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.color-field .input { flex: 1; font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* Level badge icons: one variant per admin theme, and the icon picker on the level form. */
.level-icon { flex: none; width: 1.5rem; height: 1.5rem; }
:root:not([data-theme="dark"]) .theme-dark-only, :root[data-theme="dark"] .theme-light-only { display: none; }
.icon-picker { border: 0; padding: 0; margin: var(--space-4) 0 0; min-width: 0; }
.icon-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); margin-top: var(--space-2);
    padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
/* Each picker previews its icons on the background of the theme it is for. */
.icon-options-light { background: #FFFFFF; }
.icon-options-dark { background: #0F172A; }
.icon-option { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: 2px solid transparent;
    border-radius: var(--radius-md); cursor: pointer; text-align: center; }
.icon-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.icon-option img { width: 2.5rem; height: 2.5rem; }
.icon-option-label { font-size: var(--text-xs); line-height: 1.3; }
.icon-options-light .icon-option-label { color: #334155; }
.icon-options-dark .icon-option-label { color: #E2E8F0; }
.icon-option:hover { border-color: var(--border-strong); }
.icon-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.icon-options-dark .icon-option:has(input:checked) { border-color: #60A5FA; box-shadow: 0 0 0 1px #60A5FA; }
.icon-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-preview { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.icon-preview-light { background: #FFFFFF; color: #334155; box-shadow: 0 0 0 1px var(--border); }
.icon-preview-dark { background: #0F172A; color: #E2E8F0; }

/* Contact information: map picker for the organization's exact location. */
.location-section { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.location-map { height: 22rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); z-index: 0; }
.location-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 767.98px) { .location-map { height: 16rem; } }

/* News gallery: existing pictures (with remove toggles) and new-upload previews. */
.gallery-grid { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-3); }
.gallery-item { display: grid; gap: var(--space-1); min-width: 0; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-sunken); }
.gallery-name { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item:has(.gallery-remove input:checked) img { opacity: .35; outline: 2px solid var(--danger); outline-offset: -2px; }

/* News gallery videos: an inline player for uploads, a link tile for external videos. */
.gallery-item video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: #000; }
.video-link { display: grid; place-items: center; gap: var(--space-1); aspect-ratio: 16 / 9; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--link); font-size: var(--text-sm); text-align: center; }
.video-link .icon { width: 1.75rem; height: 1.75rem; }
.gallery-item:has(.gallery-remove input:checked) :is(video, .video-link) { opacity: .35; outline: 2px solid var(--danger); outline-offset: -2px; }

/* Means-of-verification builder (event type form) */
.vf-list { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.vf-card { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-secondary); }
.vf-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vf-number { font-weight: 600; min-width: 4.5rem; }
.vf-type { flex: 1 1 12rem; }
.vf-type .input { width: 100%; }
.vf-actions { display: flex; gap: var(--space-1); margin-inline-start: auto; }
.vf-options { display: grid; gap: var(--space-2); }
.vf-option-list { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-5); }
.vf-option { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; }
.vf-summary { display: grid; gap: var(--space-4); margin: 0; padding-inline-start: var(--space-5); }
.vf-summary-item { display: grid; gap: var(--space-1); }
.vf-summary-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vf-summary-options { margin: 0; padding-inline-start: var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }
@media (max-width: 640px) {
    .vf-option { grid-template-columns: 1fr auto; }
    .vf-option .field:nth-of-type(2) { grid-column: 1; }
}

/* Task submission review */
.submission-answers { display: grid; gap: var(--space-2); margin: 0; }
.submission-answers dt { font-weight: 600; }
.submission-answers dd { margin: 0 0 var(--space-3); }
.submission-answers dd:last-child { margin-bottom: 0; }
.submission-text { white-space: pre-wrap; margin: 0; }
.submission-choices { margin: 0; padding-inline-start: var(--space-5); }
.submission-images { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.submission-images img { display: block; width: 9rem; height: 9rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-sunken); }

/* Review queue: pending badge in the sidebar and overdue rows */
.nav-badge { margin-inline-start: auto; min-width: 1.375rem; padding: 0 var(--space-1); border-radius: var(--radius-pill);
    background: #FFB547; color: #2A1A00; font-size: var(--text-xs); font-weight: 700; line-height: 1.375rem; text-align: center; }
.sidebar-collapsed .nav-badge { position: absolute; top: 2px; inset-inline-end: 10px; min-width: 1rem; padding: 0 3px;
    font-size: .625rem; line-height: 1rem; }
.queue-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
[dir="rtl"] .queue-table tr.is-overdue td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.queue-table .badge .icon { margin-inline-end: 2px; vertical-align: -2px; }

/* Notification center: compose with a live lock-screen preview, and the details page. */
.notification-compose { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-5); align-items: start; }
@media (max-width: 1099.98px) { .notification-compose { grid-template-columns: minmax(0, 1fr); } }
.notification-compose-preview { position: sticky; top: calc(var(--header-height) + var(--space-4)); display: grid; gap: var(--space-3); }
.notification-compose fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.push-preview { display: grid; gap: var(--space-1); }
.push-preview-lang { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.push-preview-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-secondary); box-shadow: 0 6px 18px rgb(0 0 0 / .06); }
.push-preview-logo { width: 2rem; height: 2rem; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface); }
.push-preview-text { display: grid; gap: 2px; min-width: 0; }
.push-preview-app { font-size: var(--text-xs); color: var(--text-muted); }
.push-preview-title { font-size: var(--text-base); overflow-wrap: anywhere; }
.push-preview-title:empty::before, .push-preview-body:empty::before { content: "—"; color: var(--text-muted); }
.push-preview-body { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.push-preview-image { width: 3rem; height: 3rem; border-radius: var(--radius-sm); object-fit: cover; }
.send-summary { margin-top: var(--space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.notification-stats { margin-bottom: var(--space-4); }
.notification-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 899.98px) { .notification-detail-grid { grid-template-columns: minmax(0, 1fr); } }
.notification-content { display: grid; gap: var(--space-5); }
.notification-body { margin-top: var(--space-2); white-space: pre-line; overflow-wrap: anywhere; color: var(--text-secondary); }
.page-actions form { display: contents; }
.notify-done { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }