/* =========================================================
   Jerash admin — Jordan Tourism Board brand (light + dark)

   Retoned on 14 September 2026 from the engine’s violet default to the
   Jordan brand manual, so the panel and the visitor app are one product.
   The values are the manual’s own, and the same ones lib/core/colors.dart
   carries in the app:

     twilight violet #222A52   core brand colour 1 — Pantone 533 C
     rum red         #9A4A3A   core brand colour 2 — Pantone 7608 C
     dead sea        #34819F   primary
     Jordan black    #101A28   neutral, headings
     Jordan gray     #384657   neutral, body text

   Functional colours — the red on a delete chip, the green on an active
   pill — are deliberately NOT rebranded. The manual is a print brand and
   has no error or success colour, and a delete button the same red as the
   primary one is a worse panel however well it matches.
   ========================================================= */

/* Draft B, the brand’s English typeface, served from wwwroot rather than
   from Google Fonts — which is what this panel used to fetch. A CMS used on
   site, on the connection an archaeological park has, should not wait on a
   third-party CDN to draw its own labels. OTF rather than WOFF2 because the
   files JTB supplied are OTF and re-encoding a licensed font is not ours to
   do; ~160 KB a weight, cached after the first load.

   No Arabic face is declared. The brand’s Arabic typeface is 29LT Zarid and
   it was not in the folder ARCS supplied; the fallbacks below carry the
   Arabic content fields until it arrives with its licence. */
@font-face {
    font-family: "Draft B";
    src: url("/fonts/DraftB-400.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

/* 600-700, not 500-700.

   The panel declared 500 on the Bold face and the app maps 500 to Regular,
   so the same nominal weight was two different faces across two products.
   Worse, Bootstrap's reboot sets h1-h6 to 500 and loads before this file, so
   every admin heading was rendering Bold by accident rather than by
   decision. The range now matches the app, and the headings below say what
   they want. */
@font-face {
    font-family: "Draft B";
    src: url("/fonts/DraftB-700.otf") format("opentype");
    font-weight: 600 700;
    font-display: swap;
}

@font-face {
    font-family: "Draft B";
    src: url("/fonts/DraftB-800.otf") format("opentype");
    font-weight: 800;
    font-display: swap;
}

:root {
    --sidebar-width: 256px;
    --accent: #222a52;      /* twilight violet — core brand colour 1 */
    --accent-soft: #e2e5ef; /* the violet at page weight */

    /* Rum red, core brand colour 2. The two of them are what the manual
       calls "the main identifier colors for our brand", and this panel uses
       the violet for chrome and primary. The red is declared and **not yet
       spent** — no rule below references it. That is worth writing down
       rather than leaving as an accident: an identifier nobody can find is
       a colour the next person picks by eye. */
    --accent-2: #9a4a3a;

    /* Dead sea turquoise, for the one gradient that needs a third stop. */
    --accent-3: #34819f;

    /* The rest of the manual, declared but not spent.

       Steel blue and earthly beige are the segment colours for Business
       Events and Faith Pilgrimage, and this panel serves neither. Four of the
       five secondaries are, in the manual’s words, "to be used sparingly, as
       highlights" — and nothing here is asking to be highlighted yet.

       They are written down anyway. A brand value that exists only in a PDF
       is a value the next person matches by eye, and eye-matching is how a
       panel ends up with five reds. */
    --brand-jordan-black: #101a28;
    --brand-sky-blue: #88cfec;
    --brand-steel-blue: #2c3d43;
    --brand-earthly-beige: #837970;
    --brand-spring-green: #6eb965;
    --brand-gold-yellow: #ffd803;
    --brand-fresh-orange: #f5a561;
    --brand-hot-pink: #ed6da6;

    /* The same turquoise, carried down until white clears 4.5:1 on it.

       Measured on the live login page rather than assumed: the sign-in button
       is a gradient that ENDS in --accent-3, and white on the brand turquoise
       is 4.39:1 — under the floor for 16px bold, which is not large text. The
       button it replaced ended in the engine teal and measured 2.43:1, so this
       was already failing and had simply never been measured.

       Only for a fill that carries white TEXT. The brand mark and the mobile
       logo keep the true turquoise: they carry a white glyph, and 3:1 is the
       bar for those. */
    --accent-3-deep: #2a6b84;

    --body-bg: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --text: #101a28;        /* Jordan black — the manual’s headings colour */
    --text-muted: #384657;  /* Jordan gray — the manual’s body colour */
    --line: #e6eaf0;
    --shadow: 0 4px 18px rgba(16, 26, 40, 0.07);
    --shadow-lg: 0 10px 30px rgba(16, 26, 40, 0.12);

    /* The focus indicator (AD-11, WCAG 2.2 §2.4.7 and §1.4.11).

       Deliberately not --accent. The navy is already the brand, the active
       navigation item and the primary button; an indicator that also means
       three other things cannot be unambiguous. This is the same blue as the
       mobile app's AppColors.focus, so the two products agree on what
       "focused" looks like.

       5.69:1 on --surface and 5.02:1 on the page background — well past the
       3:1 that §1.4.11 asks of a focus indicator. */
    --focus-ring: #0b63ce;

    /* The accent when it is *text* rather than a fill.

       --accent is the brand navy and it is used both ways: as the sidebar and
       button background, and as a colour for headings, links and icons. As a
       background it is fine in either theme. As TEXT in the dark theme it
       measures 1.04-1.30:1 against the dark surfaces - navy on near-black,
       which is not low contrast, it is invisible. Seventeen rules were doing
       it.

       Splitting the fill from the text is the same fix the mobile app needed
       for its gold, for the same reason: a colour verified against one
       background and then used on another. */
    --accent-text: #222a52;
}

html[data-theme="dark"] {
    /* The light ring measures 2.88:1 on the dark surface — under the 3:1
       §1.4.11 asks, so it is re-picked rather than inherited. 7.84:1 here.
       (It was written as 1.6 and 7.71; neither was ever measured against these
       surfaces.) */
    --focus-ring: #8ab4ff;
    /* The accent as text, on a dark surface. Twilight violet here measures
       1.02 to 1.36:1 across the three dark surfaces — navy on near-black,
       which is not low contrast, it is
       invisible. The manual’s answer for a highlight is its secondaries, and
       sky blue is the one that reads. Same decision, and the same colour, as
       AppColors.onDarkAccent in the app. */
    --accent-text: #88cfec;
    --body-bg: #0b1220;
    --surface: #16202f;
    --surface-2: #1f2c3e;
    --text: #e8edf4;
    --text-muted: #9aa7b8;
    --line: #2a3a4d;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
    --accent-soft: #24304a;
}

/* Bootstrap sets these to 500. With 500 now resolving to Regular that would
   make every admin heading lighter than it has been, so the weight is stated
   here instead of inherited from a reset. The brand sets titles in ExtraBold
   and smaller titles in Bold; h1/h2 take the first, the rest the second. */
h1, h2 {
    font-weight: 800;
}

h3, h4, h5, h6 {
    font-weight: 700;
}

body.admin-body {
    background: var(--body-bg);
    color: var(--text);
    min-height: 100vh;
    font-family: "Draft B", "Segoe UI", Tahoma, sans-serif;
}

/* ---------------------------------------------------------
   Theme-aware neutralization of fixed Bootstrap utilities so
   every screen follows light/dark without per-view edits.
   --------------------------------------------------------- */
.admin-body .bg-white { background-color: var(--surface) !important; }
.admin-body .bg-light { background-color: var(--surface-2) !important; }

html[data-theme="dark"] .admin-body .text-dark { color: var(--text) !important; }

html[data-theme="dark"] .admin-body .text-bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

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

html[data-theme="dark"] .admin-body .list-group-item-action:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* TinyMCE chrome blends with dark surfaces (content area stays light by design) */
html[data-theme="dark"] .admin-body .tox-tinymce { border-color: var(--line) !important; }

/* SweetAlert2 popups follow the dark theme */
html[data-theme="dark"] .swal2-popup {
    background: var(--surface) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--text) !important;
}

html[data-theme="dark"] .swal2-toast {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ---------------- Sidebar ---------------- */

.admin-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
    z-index: 1030;
    padding: 1.1rem 0.9rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: width 0.22s ease, padding 0.22s ease;
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.9rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text);
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem 0.25rem;
    overflow: hidden;
}

.sidebar-toggle {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.15rem;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--surface-2);
    color: var(--accent-text);
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 6px 14px rgba(16, 26, 40, 0.35);
    overflow: hidden;
}

.brand-mark img {
    height: 27px;
    width: auto;
    display: block;
}

.brand-text strong {
    font-weight: 800;
    color: var(--accent-text);
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.58rem 0.85rem;
    margin-bottom: 0.15rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-nav .nav-item i {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
}

.sidebar-nav .nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.sidebar-nav .nav-item.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 14px rgba(16, 26, 40, 0.3);
}

.sidebar-section {
    padding: 1rem 0.85rem 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    opacity: 0.8;
}

/* Light / Dark segmented switch */
.theme-switch {
    display: flex;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 4px;
    margin: 0.9rem 0.2rem 0.7rem;
}

.theme-option {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0;
    border-radius: 9px;
    font-family: inherit;
}

.theme-option.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(16, 26, 40, 0.3);
}

/* User chip */
.sidebar-user-wrap {
    margin: 0 0.2rem;
}

.user-chip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    background: var(--accent);
    color: #fff;
    padding: 0.5rem 0.7rem;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 6px 14px rgba(16, 26, 40, 0.3);
    font-family: inherit;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------------- Main / topbar ---------------- */

.admin-main {
    margin-inline-start: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin 0.22s ease;
}

/* ---------------- Collapsed sidebar (icon rail) ---------------- */

html[data-sidebar="collapsed"] .admin-sidebar {
    width: 80px;
    padding: 1.1rem 0.65rem;
}

html[data-sidebar="collapsed"] .admin-main {
    margin-inline-start: 80px;
}

html[data-sidebar="collapsed"] .nav-label {
    display: none;
}

html[data-sidebar="collapsed"] .sidebar-top {
    flex-direction: column;
    gap: 0.5rem;
}

html[data-sidebar="collapsed"] .sidebar-brand {
    padding: 0;
}

html[data-sidebar="collapsed"] .sidebar-nav .nav-item {
    justify-content: center;
    padding: 0.62rem 0;
}

html[data-sidebar="collapsed"] .sidebar-nav .nav-item i {
    width: auto;
    font-size: 1.15rem;
}

html[data-sidebar="collapsed"] .sidebar-section {
    height: 1px;
    padding: 0;
    margin: 0.65rem 0.6rem;
    background: var(--line);
    font-size: 0;
}

html[data-sidebar="collapsed"] .theme-switch {
    flex-direction: column;
    gap: 3px;
}

html[data-sidebar="collapsed"] .theme-option {
    padding: 0.45rem 0;
    font-size: 1rem;
}

html[data-sidebar="collapsed"] .user-chip {
    justify-content: center;
    padding: 0.45rem;
}

html[data-sidebar="collapsed"] .user-chip::after {
    display: none;
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.75rem 0.4rem;
}

.topbar-title {
    font-size: 1.35rem;
    margin: 0;
    font-weight: 800;
    color: var(--accent-text);
    flex-shrink: 0;
}

.topbar-search {
    position: relative;
    flex: 1;
    max-width: 430px;
}

.topbar-search i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.topbar-search input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    font-size: 0.9rem;
    color: var(--text);
    box-shadow: var(--shadow);
}

.topbar-search input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

.topbar-date {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-content {
    padding: 1.25rem 1.75rem 2rem;
    flex-grow: 1;
}

/* ---------------- Cards / tables ---------------- */

.card {
    border: none;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--line);
}

.table {
    --bs-table-bg: transparent;
    color: var(--text);
}

.table thead th {
    background: var(--surface-2);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: none;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.table td {
    border-color: var(--line);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--surface-2);
}

.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(16, 26, 40, 0.15);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 6px 14px rgba(16, 26, 40, 0.3);
}

.btn-primary:hover {
    background: #2e3a6e;
    border-color: #2e3a6e;
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 600;
}

.nav-tabs .nav-link.active {
    color: var(--accent-text);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.4em 0.75em;
}

/* ---------------- Dashboard widgets ---------------- */

.stat-card {
    border-radius: 18px;
}

.stat-card .stat-value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.stat-card .stat-sub {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.stat-ring {
    --ring-pct: 70;
    --ring-color: var(--accent);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--surface) 74%, transparent 75% 100%),
        conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), var(--line) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

.list-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

.icon-pill {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    flex-shrink: 0;
}

.progress-slim {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
}

.progress-slim .progress-bar {
    border-radius: 999px;
    background: var(--accent);
}

/* ---------------- Role permissions grid ---------------- */

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.85rem;
}

.perm-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.85rem;
    box-shadow: var(--shadow);
    transition: border-color 0.12s ease;
}

.perm-card:has(.perm-check:checked) {
    border-color: var(--accent);
}

.perm-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.perm-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    flex-shrink: 0;
}

.perm-card-title {
    font-weight: 700;
    font-size: 0.92rem;
}

.perm-group-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: 0;
}

.perm-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.perm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
    margin: 0;
}

.perm-chip input {
    display: none;
}

.perm-chip:hover {
    border-color: var(--accent);
}

.perm-chip:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 3px 8px rgba(16, 26, 40, 0.28);
}

/* delete action turns red when active to signal its weight */
.perm-chip.act-delete:has(input:checked) {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3);
}

/* ---------------- Pagination ---------------- */

.cms-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cms-pager .pager-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.12s ease;
}

.cms-pager .pager-btn:hover:not(.disabled):not(.active) {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent-soft);
}

.cms-pager .pager-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(16, 26, 40, 0.3);
}

.cms-pager .pager-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.cms-pager .pager-dots {
    color: var(--text-muted);
    padding: 0 0.2rem;
}

/* ---------------- Filter toolbar (segmented status filter) ---------------- */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    box-shadow: var(--shadow);
}

.filter-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.filter-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.filter-search input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 10px;
    padding: 0.5rem 0.9rem 0.5rem 2.3rem;
    color: var(--text);
    font-size: 0.9rem;
}

/* AD-11 — `outline: none` with a border-colour change as the only
   replacement. A recoloured 1px border is a weak indicator at the best of
   times and disappears entirely for anyone with reduced contrast sensitivity;
   WCAG 2.2 §2.4.7 asks for a visible focus indicator, not a subtle one.
   :focus-visible so a mouse click does not paint a ring nobody asked for. */
.filter-search input:focus {
    border-color: var(--accent);
    background: var(--surface);
}

/* AD-01. Hidden until it takes focus, which is the point: the first thing
   Tab reaches, and invisible to everyone who does not need it. */
.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: 1rem;
    z-index: 2000;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

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

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

.seg {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: 10px;
    padding: 3px;
}

.seg a {
    padding: 0.38rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.seg a.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 8px rgba(16, 26, 40, 0.3);
}

/* ---------------- List pages (toolbar, chips, rich rows) ---------------- */

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-toolbar .filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.count-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.thumb-sq {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.thumb-ph {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

.cell-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.cell-title .t-name {
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.cell-title .t-sub {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-family: ui-monospace, Consolas, monospace;
}

.lang-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text-muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* The status and chip colours are functional, not brand — see the header.
   Their text was measured against the wash it actually sits on for the first
   time on 14 September and came back 2.71-3.44:1 against a 4.5 floor: small
   bold text, which is not large text. The hues are unchanged and carried down
   until they clear.

   Against the page, not against a card. The first pass was computed on white
   and measured 4.26 on the live login page, because these pills sit on both
   surfaces and the page is the darker of the two — the same "verified against
   one background, used on another" mistake the Flutter side has a checker for.
   Measured in the browser now: 5.21, 4.93, 4.86, 4.86, 4.99 light; 6.26 to 9.38
   dark. */
.status-pill.s-on {
    background: rgba(34, 197, 139, 0.14);
    color: #0c6b48;
}

.status-pill.s-off {
    background: rgba(246, 165, 49, 0.16);
    color: #8a5606;
}

.btn-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-muted);
    transition: all 0.12s ease;
}

.btn-icon:hover {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: transparent;
}

.btn-icon.danger:hover {
    background: rgba(253, 125, 139, 0.15);
    color: #b3131c;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 2.6rem;
    color: var(--accent-text);
    opacity: 0.45;
}

/* ---------------- Editor layout (Upsert screens) ---------------- */

.editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.editor-aside {
    position: sticky;
    top: 1rem;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.section-head h6 {
    margin: 0;
    font-weight: 800;
}

.section-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.form-label {
    font-weight: 600;
    font-size: 0.86rem;
}

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

.form-switch .form-check-input {
    height: 1.35em;
    width: 2.6em;
}

/* ---------------- Menu builder tree ---------------- */

.menu-node {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.menu-node:hover {
    border-color: var(--accent);
}

.menu-node.editing {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 26, 40, 0.18);
}

.menu-node .drag-handle {
    cursor: grab;
    color: var(--text-muted);
}

.menu-node-icon {
    color: var(--accent-text);
}

.menu-node-title {
    font-weight: 700;
    font-size: 0.92rem;
}

.menu-children {
    margin: 0.4rem 0 0 1.9rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 2px dashed var(--line);
    min-height: 6px;
}

.lang-chip-missing {
    background: rgba(246, 165, 49, 0.18);
    color: #8a5606;
}

.lang-chip-missing i {
    font-size: 0.6rem;
}

.chip-page {
    background: rgba(52, 129, 159, 0.14);
    color: #26637c;
}

.chip-category {
    background: rgba(246, 165, 49, 0.18);
    color: #8a5606;
}

/* The dark theme needs the other half of these pairs.

   Carrying the status text down until it cleared on white took the dark theme
   from 3.4-4.0 to 1.85-2.38: a fix for one theme is a regression in the other
   unless both are measured, and only the light one had been. Light text on the
   same washes here, and three of the four are the brand secondaries doing
   exactly what the manual describes them for — "used sparingly, as
   highlights". Measured on the blended wash, not on the surface beneath it:
   5.33, 6.03, 6.37 and 8.09. */
html[data-theme="dark"] .status-pill.s-on {
    color: var(--brand-spring-green);
}

html[data-theme="dark"] .status-pill.s-off,
html[data-theme="dark"] .lang-chip-missing,
html[data-theme="dark"] .chip-category {
    color: var(--brand-fresh-orange);
}

html[data-theme="dark"] .chip-page {
    color: var(--brand-sky-blue);
}

html[data-theme="dark"] .btn-icon.danger:hover {
    color: #ff9aa2;
}

.chip-internal {
    background: var(--surface-2);
    color: var(--text-muted);
}

.chip-external {
    background: rgba(34, 42, 82, 0.9);
    color: #fff;
}

html[data-theme="dark"] .chip-external {
    background: #35406f;
}

.sortable-ghost > .menu-node {
    opacity: 0.4;
    border-style: dashed;
}

/* ---------------- Language tabs (translation editors) ---------------- */

.lang-tabs {
    display: flex;
    gap: 0.5rem;
    border: none;
    flex-wrap: wrap;
}

.lang-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--surface);
    transition: all 0.14s ease;
}

.lang-tabs .nav-link:hover {
    border-color: var(--accent);
    color: var(--text);
}

.lang-tabs .nav-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 6px 14px rgba(16, 26, 40, 0.3);
}

.lang-tabs .lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lang-tabs .nav-link.active .lang-code {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.lang-default-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.lang-tabs .nav-link:not(.active) .lang-default-badge {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.lang-tab-content {
    border-color: var(--line) !important;
}

/* ---------------- Select2 (themed + dark) ---------------- */

/* select2.min.css loads after admin.css, so its defaults need !important to override */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    background-color: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    min-height: 42px;
    padding: 2px 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(16, 26, 40, 0.15);
}

/* The same 3px ring as every other control (keyboard UAT, 04/10/2026): the 15%
   shadow above measured about 1.3:1 against the page, under the 3:1 WCAG asks
   of a focus indicator, so a keyboard user lost the multi-selects. */
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    /* !important: select2.min.css loads after this file and sets outline: 0
       with a selector of the same weight. */
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent) !important;
    border: none !important;
    border-radius: 8px;
    color: #fff !important;
    padding: 2px 8px;
    margin-top: 5px;
    font-size: 0.82rem;
    font-weight: 600;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.85);
    border: none;
    margin-inline-end: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: #fff;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--text);
}

.select2-dropdown {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    border-radius: 10px;
}

.select2-container--default .select2-results__option {
    color: var(--text);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--accent) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--accent-soft) !important;
    color: var(--text) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--surface-2) !important;
    color: var(--text);
    border-color: var(--line);
    border-radius: 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--text-muted);
}

/* ---------------- Options editor (Select / Radio / Checkbox) ---------------- */

.options-editor {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.opt-head,
.opt-row {
    display: grid;
    grid-template-columns: 26px 1fr 1.4fr 1.4fr 34px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
}

.opt-head {
    background: var(--surface-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.opt-row {
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.opt-row:hover {
    background: var(--surface-2);
}

.opt-handle {
    cursor: grab;
    color: var(--text-muted);
    text-align: center;
}

.opt-row .form-control-sm {
    border-radius: 8px;
}

.opt-row .opt-value {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
}

.opt-empty {
    background: var(--surface);
}

.options-editor .sortable-ghost {
    opacity: 0.4;
}

/* ---------------- Form builder ---------------- */

.field-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
}

.palette-btn {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    padding: 0.6rem 0.4rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.palette-btn i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: var(--accent-text);
}

.palette-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    transform: translateY(-1px);
}

.field-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
}

.field-card:hover {
    border-color: var(--accent);
}

.field-card .drag-handle {
    cursor: grab;
    color: var(--text-muted);
}

.field-card .f-label {
    font-weight: 700;
    font-size: 0.92rem;
}

.field-card .f-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-family: ui-monospace, Consolas, monospace;
}

.field-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 700;
}

.form-preview {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.25rem;
    background: var(--surface-2);
}

.form-preview[dir="rtl"] {
    text-align: right;
}

.preview-toggle .btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---------------- Dropzones / media ---------------- */

.dropzone-area {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone-area:hover,
.dropzone-area.dropzone-hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.dropzone-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.dropzone-thumb {
    width: 92px;
    text-align: center;
}

.dropzone-thumb img {
    width: 92px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.gallery-remove-btn {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.12s ease;
}

.gallery-remove-btn:hover {
    transform: scale(1.12);
}

.gallery-existing.removing img {
    opacity: 0.35;
    filter: grayscale(1);
    outline: 2px solid #ef4444;
}

.gallery-existing.removing .gallery-remove-btn {
    background: #15a06e;
}

.media-tile {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------- Login ---------------- */

body.login-body {
    min-height: 100vh;
    display: flex;
    margin: 0;
    font-family: "Draft B", "Segoe UI", Tahoma, sans-serif;
    color: var(--text);
    background: var(--body-bg);
}

.login-brand {
    flex: 1.15;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    color: #fff;
    /* The one interpolated stop in the panel: halfway between twilight violet
       and dead sea turquoise. Named here rather than left as a bare hex, which
       is the rule the Flutter side enforces with tool/palettecheck.mjs. */
    background: linear-gradient(135deg,
        var(--brand-jordan-black),
        var(--accent) 45%,
        #2c5b75 78%,
        var(--accent-3));
}

.login-blob {
    position: absolute;
    border-radius: 50%;
    animation: blobFloat 12s ease-in-out infinite;
    pointer-events: none;
}

.login-blob.b1 {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(52, 129, 159, 0.5), transparent 65%);
    top: -160px;
    inset-inline-end: -150px;
}

.login-blob.b2 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(52, 129, 159, 0.4), transparent 65%);
    bottom: -140px;
    inset-inline-start: -120px;
    animation-delay: -4s;
}

.login-blob.b3 {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(16, 26, 40, 0.45), transparent 65%);
    bottom: 24%;
    inset-inline-end: 10%;
    animation-delay: -8s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(26px, -30px) scale(1.07); }
}

.login-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
    mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
    pointer-events: none;
}

.login-brand-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.login-logo {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    margin-bottom: 1.4rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.login-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.login-brand h1 {
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
}

.login-brand .tagline {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    margin-bottom: 2.2rem;
}

.login-feature {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1.1rem;
}

.login-feature .ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.login-feature strong {
    display: block;
    font-size: 0.95rem;
}

.login-feature .f-sub {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
}

.login-copy {
    position: absolute;
    bottom: 1.4rem;
    inset-inline-start: 4rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    z-index: 1;
}

.login-form-side {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    animation: loginIn 0.5s ease both;
}

@keyframes loginIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

.login-card h2 {
    font-weight: 800;
}

.login-card .sub {
    color: var(--text-muted);
    margin-bottom: 1.8rem;
}

.login-field {
    position: relative;
    margin-bottom: 1.1rem;
}

.login-field > i {
    position: absolute;
    inset-inline-start: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.login-field input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    padding: 0.85rem 2.6rem 0.85rem 2.7rem;
    font-size: 0.95rem;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* AD-11 — this one replaced the outline with a 15%-alpha shadow, which is
   not an indicator, on the one page nobody can skip. The shadow stays as
   decoration; the outline does the work. */
.login-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(16, 26, 40, 0.15);
}

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

.login-eye {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 0.2rem 0.4rem;
}

.login-eye:hover {
    color: var(--accent-text);
}

.btn-login {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 0.85rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-3-deep));
    box-shadow: 0 10px 22px rgba(16, 26, 40, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 26, 40, 0.4);
}

.login-mobile-logo {
    display: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 8px 18px rgba(16, 26, 40, 0.3);
}

.validation-summary-valid {
    display: none;
}

@media (max-width: 900px) {
    .login-brand {
        display: none;
    }

    .login-mobile-logo {
        display: inline-flex;
    }
}

/* ---------------- Misc ---------------- */

.pagination .page-link {
    color: var(--accent-text);
    border-color: var(--line);
}

.pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
}

.dropdown-menu {
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

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

@media (max-width: 991px) {
    .topbar-search {
        max-width: none;
    }

    .topbar-title {
        font-size: 1.05rem;
    }
}