@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* ══════════════════════════════════════════════════════════════════
   MIRAR — Admin Panel Stylesheet
   Reference as a stylesheet in AdminLayout.razor.
   All tokens use the existing :root vars already defined in app.css
   (--mirar-red, --mirar-navy, etc). All classes are prefixed .adm-
   to avoid collisions.

   ORGANIZATION:
     1. GLOBAL / SHARED — layout, nav, buttons, tables, modals, forms,
        badges, and other classes used across multiple admin pages.
     2. One section per admin page, in the order listed below,
        containing only the CSS specific to that page (including
        classes migrated from that page's old inline styles).
   ══════════════════════════════════════════════════════════════════ */

/* ======================================================================
   1. GLOBAL / SHARED — Layout, Navigation, Buttons, Tables,
      Modals, Forms, Badges & other cross-page classes
   ====================================================================== */

/* ── Shell (sidebar + main) ────────────────────────────────── */
.adm-shell {
    display: flex;
    min-height: 100vh;
    background: var(--mirar-off);
    font-family: var(--font-sans);
}
/* ── Sidebar ────────────────────────────────────────────────── */
.adm-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--mirar-navy-deep);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 200;
    scrollbar-width: none;
}

    .adm-sidebar::-webkit-scrollbar {
        display: none;
    }

.adm-sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.adm-brand-sup {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 4px;
}

.adm-brand-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: #fff;
    font-weight: 400;
    line-height: 1;
}

.adm-brand-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mirar-red);
    margin-top: 5px;
}
/* Navigation */
.adm-nav {
    padding: 12px 0;
    flex: 1;
}

.adm-nav-section {
    padding: 14px 20px 4px;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255,255,255,.2);
}

.adm-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    letter-spacing: .01em;
    transition: color .12s, background .12s;
    position: relative;
}

    .adm-nav-link:hover {
        color: rgba(255,255,255,.88);
        background: rgba(255,255,255,.05);
    }

    .adm-nav-link.active {
        color: #fff;
        background: rgba(255,255,255,.08);
    }

        .adm-nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--mirar-red);
        }

.adm-nav-icon {
    width: 17px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
    opacity: .8;
}

.adm-nav-label {
    flex: 1;
}

.adm-nav-badge {
    background: var(--mirar-red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    min-width: 17px;
    text-align: center;
    line-height: 1.5;
}

    .adm-nav-badge.soft {
        background: rgba(255,255,255,.18);
        color: rgba(255,255,255,.8);
    }
/* Sidebar footer */
.adm-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.adm-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.adm-sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.adm-sidebar-user-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-sidebar-user-role {
    font-size: 9px;
    color: rgba(255,255,255,.28);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 1px;
}

.adm-logout-btn {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 7px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: center;
    transition: background .12s, color .12s;
}

    .adm-logout-btn:hover {
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.75);
    }
/* ── Main column ────────────────────────────────────────────── */
.adm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 220px;
}
/* Topbar */
.adm-topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.adm-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.adm-topbar-sep {
    color: var(--border);
    font-size: 14px;
}

.adm-topbar-page {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.adm-topbar-right {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 16px;
}

.adm-topbar-view-site {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .12s;
}

    .adm-topbar-view-site:hover {
        color: var(--mirar-navy);
    }

.adm-topbar-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mirar-green);
    display: inline-block;
    margin-right: 5px;
    animation: adm-pulse 2s infinite;
}

@keyframes adm-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}
/* Content area */
.adm-content {
    padding: 28px 32px;
    flex: 1;
    /* Flex items default to min-width: auto, which lets a wide table inside
       force .adm-content — and with it .adm-main/.adm-shell — wider than the
       viewport. That's what was forcing 80% browser zoom to see full tables.
       min-width: 0 lets this column shrink to the viewport and hand overflow
       down to .adm-card below instead of blowing out the whole page. */
    min-width: 0;
}
/* ── Page header ────────────────────────────────────────────── */
.adm-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
/* alias used in AdminDashboard */
.adm-page-header-left {
    flex: 1;
    min-width: 0;
}

.adm-page-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mirar-red);
    margin-bottom: 4px;
}

.adm-page-title {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.05;
    margin: 0;
}

.adm-page-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 400;
    line-height: 1.5;
}

.adm-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* ── Stat cards ─────────────────────────────────────────────── */
.adm-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    margin-bottom: 28px;
    border: 1px solid var(--border);
}

.adm-stat-card {
    background: #fff;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
}

    .adm-stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--mirar-red);
    }

    .adm-stat-card.green::after {
        background: var(--mirar-green);
    }

    .adm-stat-card.black::after {
        background: var(--mirar-navy-deep);
    }

    .adm-stat-card.amber::after {
        background: #b45309;
    }

.adm-stat-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.adm-stat-num {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1;
    margin-bottom: 5px;
}

.adm-stat-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.adm-stat-icon {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 2.2rem;
    opacity: .05;
    pointer-events: none;
}
/* ── Loading state (shared across all pages) ──────────────────
   Use for full-page and section loading states:
   <div class="adm-loading-state"><span class="adm-spinner"></span>Loading…</div> ── */
.adm-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40vh;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.adm-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(26,35,64,.18);
    border-top-color: var(--mirar-navy, #1a2340);
    border-radius: 50%;
    animation: adm-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes adm-spin {
    to {
        transform: rotate(360deg);
    }
}
/* ── Card / table wrapper ───────────────────────────────────── */
.adm-card {
    background: #fff;
    border: 1px solid var(--border);
    /* Any table wider than the card scrolls inside the card instead of
       stretching .adm-content/.adm-main past the viewport. Previously this
       only applied under the 860px mobile breakpoint, so on laptop screens
       (1280–1440px wide, common with the 220px sidebar + 64px padding eating
       into that) tables like Messages (Name/Email/Message/Country/Date/Actions)
       still overflowed the page, and the only way to see the last column(s)
       was to zoom the browser out to ~80%. Making this unconditional fixes
       that at every resolution, at standard 100% zoom. */
    overflow-x: auto;
}

.adm-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adm-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dark);
}
/* ── Data table ─────────────────────────────────────────────── */
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: var(--font-sans);
}

    .adm-table th {
        padding: 10px 16px;
        text-align: left;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--text-muted);
        border-bottom: 2px solid var(--text-dark);
        white-space: nowrap;
        background: #fff;
    }

    .adm-table td {
        padding: 11px 16px;
        border-bottom: 1px solid var(--border-light);
        color: var(--text-dark);
        vertical-align: middle;
    }

    .adm-table tr:last-child td {
        border-bottom: none;
    }

    .adm-table tbody tr:hover td {
        background: var(--mirar-warm);
    }

    /* ── Responsive tables: keep the actions column reachable ────────────────
   .adm-card already scrolls horizontally (overflow-x: auto) instead of
   blowing out the page width, but that meant the View/Edit/Delete column
   could scroll off to the right on narrower viewports. Pinning the last
   column (th/td) to the right edge of the scroll area keeps those actions
   visible at all times — no horizontal scrolling needed just to click
   View or Delete. The box-shadow gives a subtle seam so it reads as
   "pinned" rather than just another column. */
    .adm-table th:last-child,
    .adm-table td:last-child {
        position: sticky;
        right: 0;
        background: #fff;
        box-shadow: -6px 0 6px -6px rgba(0,0,0,.12);
    }

    .adm-table tbody tr:hover td:last-child {
        background: var(--mirar-warm);
    }

/* ── Clickable rows (Dashboard → deep link to source record) ──────────── */
.adm-row-link {
    cursor: pointer;
}

    .adm-row-link:hover {
        background: var(--mirar-warm);
    }

.adm-td-muted {
    color: var(--text-muted);
}

.adm-td-bold {
    font-weight: 600;
}

.adm-td-mono {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Pagination (tables with more rows than fit on one page) ──────────── */
.adm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 4px;
}

    .adm-pagination .adm-btn {
        min-width: 84px;
    }

        .adm-pagination .adm-btn:disabled {
            opacity: .4;
            cursor: not-allowed;
        }

.adm-pagination-info {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 90px;
    text-align: center;
}

/* ── Fixed-height table body (10 rows) ─────────────────────────────────
   Keeps a page's table the same height whether it has a full 10 rows or
   just the tail end of the last page, so switching pages doesn't make the
   rest of the page jump up/down. Heights are sized from each table's own
   row padding + font-size (single-line, ellipsis-truncated cells), with
   overflow-y: auto as a safety net rather than clipping if a row ever
   renders slightly taller than expected. */
.adm-table-fixed14 {
    /* .adm-table: th padding 10px + font-size 9px (~34px incl. border) +
       10 × (td padding 11px×2 + ~13px line-height ≈ 40px) */
    height: 434px;
    overflow-y: auto;
}

.svy-log-fixed14 {
    /* .svy-log-table: th padding 9px (~31px) + 10 × (td padding 8px×2 +
       ~12px line-height ≈ 30px) */
    height: 331px;
    overflow-y: auto;
}
/* ── Toolbar ────────────────────────────────────────────────── */
.adm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.adm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.adm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-search {
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: #fff;
    outline: none;
    width: 250px;
    transition: border-color .12s;
    border-radius: 0;
}

    .adm-search:focus {
        border-color: var(--mirar-red);
    }

    .adm-search::placeholder {
        color: #b0b7c3;
    }
/* ── Status badges ──────────────────────────────────────────── */
.adm-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 3px 9px;
    white-space: nowrap;
}

.adm-badge-green {
    background: #d1fae5;
    color: #065f46;
}

.adm-badge-red {
    background: #fee2e2;
    color: #991b1b;
}

.adm-badge-grey {
    background: #f3f4f6;
    color: #6b7280;
}

.adm-badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

/* ── Buttons ────────────────────────────────────────────────── */
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.adm-btn-primary {
    background: var(--mirar-red);
    color: #fff;
}

    .adm-btn-primary:hover {
        background: var(--mirar-red-dark);
        color: #fff;
    }

.adm-btn-ghost {
    background: rgba(255,255,255,.75);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    transition: all 0.2s ease;
}

    .adm-btn-ghost:hover {
        background: #fef2f2;
        border-color: #ef4444;
        color: #dc2626;
    }

.adm-btn-danger {
    background: var(--mirar-red);
    color: #fff;
}

    .adm-btn-danger:hover {
        background: var(--mirar-red-dark);
    }

/* ── Icon-only action buttons (certificate list "Actions" column) ─────────
   Compact square buttons so 5 row-actions (Preview, Edit, Revoke/Restore,
   Send, Delete) fit without forcing the table wider than its container —
   paired with .adm-actions-grid below, which wraps them onto two rows
   instead of one long overflowing line. */
.adm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    background: rgba(255,255,255,.75);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .adm-icon-btn:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #ef4444;
        color: #dc2626;
    }

    .adm-icon-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.adm-icon-btn-danger {
    color: var(--mirar-red);
}

    .adm-icon-btn-danger:hover:not(:disabled) {
        background: var(--mirar-red);
        border-color: var(--mirar-red);
        color: #fff;
    }

.adm-actions-cell {
    /* Column no longer needs to grow to fit a single row of full-width text
       buttons — this caps it so the rest of the table keeps its space. */
    width: 1%;
    white-space: normal;
}

.adm-actions-col-th {
    width: 1%;
}

.adm-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 28px);
    gap: 5px;
    justify-content: center;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .adm-actions-grid {
        grid-template-columns: repeat(2, 28px);
    }
}

.adm-link-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--font-sans);
    cursor: pointer;
    padding: 0;
    color: var(--text-dark);
    text-decoration: none;
}

    .adm-link-btn:hover {
        color: var(--mirar-red);
    }

    .adm-link-btn.danger {
        color: var(--mirar-red);
    }

        .adm-link-btn.danger:hover {
            color: var(--mirar-red-dark);
        }

    .adm-link-btn.muted {
        color: var(--text-muted);
    }

        .adm-link-btn.muted:hover {
            color: var(--text-dark);
        }

/* ── Empty state ────────────────────────────────────────────── */
.adm-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
/* ══════════════════════════════════════════════════════════════
   SLIDE-OVER DRAWER  (Courses, Calendar)
   cep = course editor panel — reused for calendar too
   ══════════════════════════════════════════════════════════════ */
.cep-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
    animation: cep-fade-in .18s ease;
}

@keyframes cep-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cep-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(860px, 92vw);
    height: 100vh;
    background: var(--mirar-off, #f5f5f3);
    box-shadow: -4px 0 32px rgba(0,0,0,.18);
    z-index: 1050;
    overflow-y: auto;
    padding: 32px 36px 60px;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}

.cep-drawer-open {
    transform: translateX(0);
}
/* active row highlight — shared */
.cep-row-active td {
    background: rgba(10,35,66,.04);
}
/* ══════════════════════════════════════════════════════════════
   NARROW SIDE PANEL  (Registrations, Messages)
   reg = registrations — reused for messages
   ══════════════════════════════════════════════════════════════ */
.reg-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: var(--mirar-white, #fff);
    border-left: 1px solid var(--border);
    box-shadow: -6px 0 24px rgba(0,0,0,.10);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    animation: reg-slide-in .2s cubic-bezier(.4,0,.2,1);
}

@keyframes reg-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.reg-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--mirar-off, #f5f5f3);
}

.reg-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.reg-field {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.reg-field-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-family: var(--font-sans);
}

.reg-field-value {
    font-size: 13px;
    color: var(--text-dark);
    font-family: var(--font-sans);
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.55;
}

.reg-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--mirar-off, #f5f5f3);
}

.reg-row-active td {
    background: rgba(10,35,66,.04);
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .adm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Mobile nav toggle (hamburger) ───────────────────────────
   Hidden on desktop; shown in the topbar under 860px. ── */
.adm-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-dark);
    cursor: pointer;
    padding: 4px 6px;
    margin-right: 4px;
    line-height: 1;
}

.adm-sidebar-overlay {
    display: none;
}

@media (max-width: 1100px) {
    .adm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .adm-quick-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .adm-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Sidebar becomes an off-canvas drawer instead of vanishing */
    .adm-sidebar {
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
        z-index: 320;
        box-shadow: 0 0 40px rgba(0,0,0,.25);
    }

        .adm-sidebar.open {
            transform: translateX(0);
        }

    .adm-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10,15,25,.45);
        z-index: 310;
        animation: cep-fade-in .15s ease;
    }

    .adm-main {
        margin-left: 0;
    }

    .adm-content {
        padding: 20px 18px;
    }

    .adm-topbar {
        padding: 0 14px 0 10px;
    }

    .cep-drawer {
        width: 100vw;
        padding: 24px 20px 48px;
    }

    .reg-panel {
        width: 100vw;
    }
}

@media (max-width: 640px) {
    .adm-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .adm-quick-row {
        grid-template-columns: 1fr;
    }

    .adm-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .adm-page-actions {
        width: 100%;
    }

        .adm-page-actions .adm-btn {
            flex: 1;
            text-align: center;
        }

    .adm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .adm-search {
        width: 100%;
    }

    .adm-topbar-right span:not(:first-child) {
        display: none;
    }
}
/* ══════════════════════════════════════════════════════════════
   DELETE CONFIRM MODAL  (centred overlay)
   ══════════════════════════════════════════════════════════════ */
.adm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cep-fade-in .15s ease;
}

.adm-modal {
    background: #fff;
    width: min(440px, 92vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: adm-modal-in .18s cubic-bezier(.4,0,.2,1);
}

@keyframes adm-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adm-modal-header {
    padding: 22px 24px 0;
}

.adm-modal-icon {
    width: 40px;
    height: 40px;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.adm-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-sans);
    margin-bottom: 6px;
}

.adm-modal-body {
    padding: 10px 24px 24px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    font-family: var(--font-sans);
}

.adm-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--mirar-off, #f5f5f3);
}

/* ── Focus outline ────────────────────────────────────────── */
* {
    outline: none !important;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@keyframes mbr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================================================================
   Auto-migrated inline styles (previously style="..." attributes)
   ================================================================== */
.adm-il-fs-12px-c-text-muted {
    font-size: 12px;
    color: var(--text-muted);
}

.adm-il-ws-nowrap {
    white-space: nowrap;
}

.adm-il-fs-12px-ws-nowrap {
    font-size: 12px;
    white-space: nowrap;
}

.adm-il-ws-nowrap-fs-12px {
    white-space: nowrap;
    font-size: 12px;
}

.adm-il-mb-24px {
    margin-bottom: 24px;
}

.adm-il-fs-22px {
    font-size: 22px;
}

.adm-il-mb-20px {
    margin-bottom: 20px;
}

.adm-il-d-flex-gap-12px {
    display: flex;
    gap: 12px;
}

.adm-il-fs-11px-c-text-muted {
    font-size: 11px;
    color: var(--text-muted);
}

.adm-il-fs-12px {
    font-size: 12px;
}

.adm-il-bg-mirar-white-bd-1px-solid-bord {
    background: var(--mirar-white);
    border: 1px solid var(--border);
}

.adm-il-bdb-1px-solid-bord {
    border-bottom: 1px solid var(--border);
}

.adm-il-flex-1 {
    flex: 1;
}

.adm-il-c-mirar-red-fw-600 {
    color: var(--mirar-red);
    font-weight: 600;
}

.adm-il-bg-mirar-white-bd-1px-solid-bord-p-32px {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    padding: 32px;
}

.adm-il-c-mirar-red {
    color: var(--mirar-red);
}

.adm-il-fs-10px-c-text-muted-fw-400-ml-4px {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

.adm-il-ff-monospace {
    font-family: monospace;
}

.adm-il-fs-13px {
    font-size: 13px;
}

.adm-il-d-flex-gap-10px {
    display: flex;
    gap: 10px;
}

.adm-il-mr-14px {
    margin-right: 14px;
}

.adm-il-mw-160px {
    max-width: 160px;
}

.adm-il-ws-nowrap-ov-hidden-to-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-il-m-0 {
    margin: 0;
}

.adm-il-mb-16px {
    margin-bottom: 16px;
}

.adm-il-fs-10px-tt-uppercase-ls-08em-c-text-muted {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 2px;
}

.adm-il-fs-16px-fw-700-c-mirar-navy {
    font-size: 16px;
    font-weight: 700;
    color: var(--mirar-navy);
}

.adm-il-fs-18px-lh-1-p-4px-8px {
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
}

.adm-il-mt-16px-pt-14px-bdt-1px-solid-bord {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.adm-il-fs-10px-tt-uppercase-ls-08em-c-text-muted-2 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 10px;
    padding: 10px;
}

.adm-il-fs-11px-wb-break-all {
    font-size: 11px;
    word-break: break-all;
}

.adm-il-c-mirar-navy-dee-fs-13px {
    color: var(--mirar-navy-deep);
    font-size: 13px;
}

.adm-il-fs-11px {
    font-size: 11px;
}

.adm-il-mt-14px {
    margin-top: 14px;
}

.adm-il-c-mirar-navy {
    color: var(--mirar-navy);
}

.adm-il-fs-10px-c-text-muted {
    font-size: 10px;
    color: var(--text-muted);
}

.adm-il-mw-140px {
    max-width: 140px;
}

/* ======================================================================
   2. PAGE: Audit Log  (/manager/audit-log)
   ====================================================================== */

.adm-il-bg-e8f5e9-c-2e7d32 {
    background: #e8f5e9;
    color: #2e7d32;
}

.adm-il-bg-fef2f2-c-mirar-red {
    background: #fef2f2;
    color: var(--mirar-red);
}

.adm-il-bg-mirar-off-c-text-muted {
    background: var(--mirar-off);
    color: var(--text-muted);
}

/* ======================================================================
   3. PAGE: Calendar / Training Events  (AdminCalendar.razor)
   ====================================================================== */

.adm-badge-amber {
    background: #fef3c7;
    color: #92400e;
}

.adm-badge-purple {
    background: #ede9fe;
    color: #5b21b6;
}
/* narrower variant for calendar (fewer fields) */
.cep-drawer-narrow {
    width: min(720px, 92vw);
}
/* ══════════════════════════════════════════════════════════════
   CALENDAR EVENT FORM  (moved from app.css)
   tce-* classes used in AdminCalendar drawer form
   ══════════════════════════════════════════════════════════════ */
/* ── Admin calendar editor (Manager.razor) ───────────────────────────────── */
.tce-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.tce-form-full {
    grid-column: 1 / -1;
}

.tce-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.tce-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-dark);
    background: var(--mirar-white);
    transition: border-color .15s;
    border-radius: 0;
    box-sizing: border-box;
}

    .tce-input:focus {
        border-color: var(--mirar-red);
        outline: none;
    }

@media (max-width: 640px) {
    .tce-form-grid {
        grid-template-columns: 1fr;
    }
}

.adm-il-bg-mirar-white-bd-1px-solid-bord-p-32px-mb-24px {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    padding: 32px;
    margin-bottom: 24px;
}

.adm-il-fs-11px-c-d97706-mt-5px-d-flex {
    font-size: 11px;
    color: #d97706;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adm-il-fs-11px-fw-600-c-mirar-red-bg-none {
    font-size: 11px;
    font-weight: 600;
    color: var(--mirar-red);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: var(--font-sans);
}

.adm-il-d-flex-ai-center-gap-10px-pt-26px {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 26px;
}

.adm-il-ac-mirar-red-w-16px-h-16px-cur-pointer {
    accent-color: var(--mirar-red);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.adm-il-m-0-cur-pointer {
    margin: 0;
    cursor: pointer;
}

.adm-il-mr-10px {
    margin-right: 10px;
}
/* ── Manually extracted (previously dynamic/ternary inline styles) ─────── */
.adm-il-opacity-half {
    opacity: .5;
}

/* ======================================================================
   4. PAGE: Certificates  (AdminCertificates.razor)
   ====================================================================== */

/* ==================== From AdminCertificates.razor <style> block ==================== */
/* ── Slide-over drawer (reuses cep- classes already defined globally for AdminCourses) ── */
/* ── Print overlay / cert design ── */
.cert-print-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,.85);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 0 0 60px;
    gap: 24px;
}
/* Was getting painted UNDER the cert pages once you scrolled, because a
                   sticky element with no z-index/background just sits in normal paint
                   order — later siblings (the .cert-page stack) drew on top of it as soon
                   as they scrolled up underneath. Giving it a solid background, its own
                   z-index above the pages, and full width fixes that: it now stays pinned
                   as a proper opaque bar at all scroll positions. */
.cert-print-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    padding: 16px 20px;
    /* Solid backing so the toolbar is always visibly "in front" — without this
       the bar was transparent, so once you scrolled the cert page(s) underneath
       painted right through it, making Close/Download look covered/blocked
       even though they were technically still clickable. */
    background: rgba(20,20,20,.92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.cert-page {
    /* True A4 landscape (297mm x 210mm = 1.4143:1). Previously the internal
       padding/margins/font sizes were sized for a 246mm-tall design, which
       meant every export came out as an oddball 297x246mm page instead of
       real A4. All the vertical measurements below (.cert-border padding,
       .cert-body/.cert-footer-row margins, font sizes, image heights) were
       scaled down ~15% to make the content's natural height match true A4
       landscape at this width — the export JS (capturePdfBlob in
       AdminCertificates.razor) derives the final page size from the
       content's rendered aspect ratio, so getting the content itself to
       land on 297x210 is what actually fixes the printed size. */
    width: 1000px;
    max-width: 95vw;
    aspect-ratio: 297 / 210;
    height: auto;
    background: #fdf9ec;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

#cert-print-area {
    /* Deterrents against casually copying/saving the preview (it carries
       En. Zaff's signature) — pairs with oncontextmenu="return false" on
       the element in the .razor markup. Note this only stops right-click/
       drag/selection; it can't block OS-level screenshots or screen
       recording, so treat it as a mild deterrent, not real DRM. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    #cert-print-area img {
        -webkit-user-drag: none;
        pointer-events: none;
    }

.cert-border {
    /* NOTE: previously used clip-path (cut corners) + a two-layer gradient
       background (padding-box/border-box trick) to fake a gold beveled
       border. html2canvas (used for the PDF/email export) does not
       reliably capture clip-path or stacked background layers, which is
       why exported/emailed PDFs came out as a plain flat rectangle even
       though the on-screen preview looked correct. Fix: bake the gold
       cut-corner border + navy inner line + triangle watermark into a
       single flat SVG image (cert-frame-bg below) and use it as one
       ordinary background-image — a plain image load is something
       html2canvas captures faithfully, so preview and export now match. */
    position: relative;
    flex: 1;
    margin: 12px;
    padding: 50px 70px 38px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    background-color: #fdf9ec;
    background-image: url("img/cert/frame/cert-frame.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.cert-inner-line {
    display: none;
}

.cert-bg-pattern {
    display: none;
}

.cert-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
}

.cert-title-main {
    font-family: var(--font-garamond, Garamond, 'EB Garamond', 'Times New Roman', serif);
    font-size: 46pt;
    font-weight: 700;
    color: #1a2340;
    letter-spacing: 1px;
    line-height: 1;
}

.cert-title-sub {
    font-family: var(--font-garamond, Garamond, 'EB Garamond', 'Times New Roman', serif);
    font-size: 31pt;
    font-weight: 700;
    color: #1a2340;
    letter-spacing: 2px;
    margin-top: 5px;
}

.cert-brand {
    text-align: right;
}

.cert-brand-logo {
    height: 79px;
    width: auto;
    object-fit: contain;
}

.cert-body {
    margin-top: 24px;
    z-index: 1;
    flex: 1;
    text-align: left;
}

.cert-line {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #333;
}

.cert-recipient {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 24pt;
    font-weight: 700;
    color: #1a2340;
    margin: 3px 0 9px;
    text-transform: uppercase;
}

.cert-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 9px;
    max-width: 85%;
}

.cert-divider-line {
    flex: 1 1 30px;
    height: 1.5px;
    background: #b08d3e;
}

    .cert-divider-line:last-child {
        flex: 1 1 auto;
    }

.cert-divider-text {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #555;
    white-space: nowrap;
}

.cert-course-title {
    font-family: var(--font-univers-heading, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 17pt;
    font-weight: 700;
    color: #1a2340;
    line-height: 1.3;
    max-width: 95%;
}

.cert-divider-solo {
    flex: 1 1;
    height: 1.5px;
    background: #b08d3e;
    max-width: 85%;
    width: 100%;
    margin: 14px 0 9px;
}

.cert-meta {
    margin-top: 12px;
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #333;
    line-height: 1.6;
}

.cert-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 1;
    margin-top: 17px;
}

.cert-sign-block {
    width: 38%;
}

.cert-sign-img {
    height: 82px;
    max-width: 260px;
    object-fit: contain;
    object-position: left bottom;
    position: relative;
    z-index: 2;
    margin-bottom: -19px;
    margin-left: -4px;
}

.cert-sign-line {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 1px;
    background: #1a2340;
    margin-bottom: 5px;
}

.cert-sign-name {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    font-weight: 700;
    color: #1a2340;
}

.cert-sign-title {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-weight: 400;
    font-style: italic;
    color: #444;
}

.cert-id {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #666;
    margin-top: 7px;
}

.cert-qr-block {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.cert-qr-img {
    width: 89px;
    height: 89px;
}

.cert-qr-date {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    font-style: italic;
    color: #444;
    margin-top: 3px;
}

.cert-seal {
    width: 135px;
}

.cert-seal-img {
    width: 135px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    .no-print {
        display: none !important;
    }
    /* Bring the whole overlay back as the print container */
    .cert-print-overlay {
        visibility: visible !important;
        position: fixed !important;
        inset: 0 !important;
        background: white !important;
        display: block !important;
        overflow: visible !important;
    }

        .cert-print-overlay * {
            visibility: visible !important;
        }
    /* Toolbar still hidden even though overlay is visible */
    .cert-print-toolbar {
        display: none !important;
        visibility: hidden !important;
    }

    .cert-page {
        width: 297mm !important;
        height: 210mm !important;
        aspect-ratio: 297 / 210 !important;
        max-width: none !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-after: page;
        page-break-after: always;
    }

        .cert-page:last-child {
            break-after: auto;
            page-break-after: auto;
        }

    .cert-border {
        /* Let flexbox distribute height calculations naturally on print */
        height: auto !important;
        flex: 1 !important;
    }
    /* Force backgrounds to render */
    .cert-border, .cert-bg-pattern, .cert-inner-line, .cert-page {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

.adm-il-p-32px-ta-center-c-text-muted {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}

.adm-il-p-10px-16px-bdb-1px-solid-bord-bg-mirar-off-d-flex {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--mirar-off);
    display: flex;
    justify-content: flex-end;
}

.adm-il-p-6px-12px-fs-12px {
    padding: 6px 12px;
    font-size: 12px;
}

.adm-il-d-flex-ai-center-gap-12px-p-14px-16px {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--mirar-off);
}

.adm-il-fs-10px-c-text-muted-w-10px-d-inline-block {
    font-size: 10px;
    color: var(--text-muted);
    width: 10px;
    display: inline-block;
}

.adm-il-fw-600-fs-13px {
    font-weight: 600;
    font-size: 13px;
}

.adm-il-w-100-bc-collapse-fs-13px {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.adm-il-ta-left {
    text-align: left;
}

.adm-il-p-8px-16px-8px-4-fs-11px-tt-uppercase-ls-06em {
    padding: 8px 16px 8px 44px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.adm-il-p-8px-16px-fs-11px-tt-uppercase-ls-06em {
    padding: 8px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.adm-il-p-8px-16px {
    padding: 8px 16px;
}

.adm-il-bdt-1px-solid-bord {
    border-top: 1px solid var(--border);
}

.adm-il-p-10px-16px-10px-ff-monospace-ws-nowrap {
    padding: 10px 16px 10px 44px;
    font-family: monospace;
    white-space: nowrap;
}

.adm-il-mr-8px-va-middle {
    margin-right: 8px;
    vertical-align: middle;
}

.adm-il-p-10px-16px-fw-600 {
    padding: 10px 16px;
    font-weight: 600;
}

.adm-il-p-10px-16px-c-text-muted {
    padding: 10px 16px;
    color: var(--text-muted);
}

.adm-il-p-10px-16px {
    padding: 10px 16px;
}

.adm-il-c-16a34a-fw-600 {
    color: #16a34a;
    font-weight: 600;
}

.adm-il-p-10px-16px-ta-right-ws-nowrap {
    padding: 10px 16px;
    text-align: right;
    white-space: nowrap;
}

.adm-il-jc-flex-end-mt-24px {
    justify-content: flex-end;
    margin-top: 24px;
}

.adm-il-fs-12px-c-text-muted-mb-20px {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.adm-il-ff-monospace-fs-13px {
    font-family: monospace;
    font-size: 13px;
}

.adm-il-fs-11px-c-text-muted-mt-6px {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.adm-il-fs-12px-c-text-muted-mb-16px {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.adm-il-w-100-bc-collapse-fs-13px-mb-20px {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
}

.adm-il-bg-mirar-off-ta-left {
    background: var(--mirar-off);
    text-align: left;
}

.adm-il-p-8px-10px-fs-11px-tt-uppercase-c-text-muted {
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-il-p-8px-10px {
    padding: 8px 10px;
}

.adm-il-p-6px-10px-c-text-muted {
    padding: 6px 10px;
    color: var(--text-muted);
}

.adm-il-p-6px-10px {
    padding: 6px 10px;
}

.adm-il-p-6px-10px-ta-right {
    padding: 6px 10px;
    text-align: right;
}

.adm-il-p-4px-10px-fs-12px {
    padding: 4px 10px;
    font-size: 12px;
}

.adm-il-jc-space-between-mt-24px {
    justify-content: space-between;
    margin-top: 24px;
}

.adm-il-c-fff-fs-12px-ta-center-mw-600px {
    color: #fff;
    font-size: 12px;
    text-align: center;
    max-width: 600px;
}

/* ======================================================================
   5. PAGE: Courses  (AdminCourses.razor)
   ====================================================================== */

.adm-badge-navy {
    background: var(--mirar-navy-deep);
    color: #fff;
}
/* ══════════════════════════════════════════════════════════════
   COURSE EDITOR  (moved from app.css)
   ce-* classes used in AdminCourses drawer editor
   ══════════════════════════════════════════════════════════════ */
/* ── Course Editor (CourseEditor.razor) ──────────────────── */
.ce-section-hd {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-bottom: 24px;
    font-family: var(--font-sans);
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.ce-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 10px;
    background: var(--mirar-off);
    border-left: 3px solid var(--border);
    padding: 8px 12px;
    font-family: var(--font-sans);
}

    .ce-hint code {
        font-size: 11px;
        background: rgba(0,0,0,.06);
        padding: 1px 5px;
        border-radius: 2px;
        font-family: monospace;
    }

.ce-mono {
    font-family: monospace !important;
    font-size: 12.5px !important;
}
/* ── Course Editor row UI ─────────────────────────────────── */
.ce-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
/* Outcome row */
.ce-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-row-num {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    width: 18px;
    flex-shrink: 0;
    text-align: right;
}

.ce-row-emoji {
    width: 56px !important;
    flex-shrink: 0;
    text-align: center;
    padding: 8px 6px !important;
    font-size: 16px !important;
}

.ce-row-main {
    flex: 1;
}

.ce-row-del {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 34px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}

    .ce-row-del:hover {
        background: #fef2f2;
        color: var(--mirar-red);
        border-color: var(--mirar-red);
    }
/* Pathway row */
.ce-prow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--mirar-off);
    border: 1px solid var(--border);
    padding: 12px;
}

.ce-prow-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ce-prow-top {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ce-prow-label {
    width: 140px !important;
    flex-shrink: 0;
    font-size: 12px !important;
}

.ce-prow-title {
    flex: 1;
}

.ce-prow-href {
    width: 160px !important;
    flex-shrink: 0;
    font-family: monospace !important;
    font-size: 12px !important;
}

.ce-prow-note {
    width: 100%;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.ce-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 18px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    margin-top: 4px;
}

    .ce-add-btn:hover {
        border-color: var(--mirar-red);
        color: var(--mirar-red);
    }

.ce-empty {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0;
    margin-bottom: 4px;
}

.adm-il-bg-mirar-white-bd-1px-solid-bord-p-36px-32px-mb-20px {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    padding: 36px 32px;
    margin-bottom: 20px;
}

.adm-il-fs-11px-c-text-muted-lh-1-6-pb-8px {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    padding-bottom: 8px;
}

.adm-il-fw-700-c-mirar-red {
    font-weight: 700;
    color: var(--mirar-red);
}

.adm-il-fs-13px-c-text-muted-mb-20px {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.adm-il-bg-mirar-white-bd-1px-solid-bord-p-28px-24px-pos-sticky {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    padding: 28px 24px;
    position: sticky;
    top: 24px;
}

.adm-il-d-flex-gap-0-bd-1px-solid-bord {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
}

.adm-il-bg-mirar-off-p-14px-16px-mb-20px-fs-11px {
    background: var(--mirar-off);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 11px;
}

.adm-il-fw-700-tt-uppercase-ls-08em-c-text-muted {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.adm-il-c-mirar-navy-ff-monospace {
    color: var(--mirar-navy);
    font-family: monospace;
}

.adm-il-fs-11px-c-mirar-red-bord-mirar-red {
    font-size: 11px;
    color: var(--mirar-red);
    border-color: var(--mirar-red);
}

.adm-il-bd-1px-solid-bord-p-8px-12px-fs-12px-ff-font-sans {
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-size: 12px;
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: #fff;
    cursor: pointer;
}

.adm-il-fs-12px-mw-160px {
    font-size: 12px;
    max-width: 160px;
}
/* Publish-settings Live/Hidden toggle buttons (AdminCourses) */
.adm-toggle-btn {
    flex: 1;
    padding: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
    border: none;
    cursor: pointer;
    background: var(--mirar-white);
    color: var(--text-muted);
}

.adm-toggle-btn-active {
    background: var(--mirar-navy);
    color: #fff;
}

/* ======================================================================
   6. PAGE: Dashboard  (AdminDashboard.razor)
   ====================================================================== */

/* ── Dashboard quick-links strip ────────────────────────────── */
.adm-quick-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 28px;
}

.adm-quick-card {
    background: #fff;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .12s;
}

    .adm-quick-card:hover {
        background: var(--mirar-warm);
        color: var(--text-dark);
    }

.adm-quick-card-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    opacity: .5;
}

.adm-quick-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mirar-red);
    margin-bottom: 2px;
}

.adm-quick-card-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.adm-il-pos-relative {
    position: relative;
}

.adm-il-pos-absolute-top-0-left-0-right-0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mirar-red);
}

.adm-il-mb-28px {
    margin-bottom: 28px;
}

/* Two-column responsive grid (Upcoming Events + Recent Registrations) */
.adm-dashboard-grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.adm-il-mw-140px-fs-12px {
    max-width: 140px;
    font-size: 12px;
}

/* Recent Activity feed */
.adm-activity-list {
    padding: 4px 0;
}

.adm-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

    .adm-activity-row:last-child {
        border-bottom: none;
    }

.adm-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mirar-off, #f5f5f3);
    color: var(--mirar-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.adm-activity-body {
    flex: 1;
    min-width: 0;
}

.adm-activity-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mirar-navy);
}

.adm-activity-sub {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-activity-when {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ======================================================================
   7. PAGE: Members  (AdminMembers.razor)
   ====================================================================== */

/* ==================== From AdminMembers.razor <style> block ==================== */
.mbr-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid var(--mirar-navy, #1a2340);
    background: transparent;
    color: var(--mirar-navy, #1a2340);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-sans, sans-serif);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .mbr-send-btn:hover:not(:disabled) {
        background: var(--mirar-navy, #1a2340);
        color: #fff;
    }

    .mbr-send-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.mbr-send-icon {
    font-size: 10px;
    line-height: 1;
}

.mbr-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(26,35,64,.25);
    border-top-color: var(--mirar-navy, #1a2340);
    border-radius: 50%;
    animation: mbr-spin .7s linear infinite;
    flex-shrink: 0;
}

.mbr-login-cell {
    white-space: nowrap;
}

.adm-il-d-flex-ai-center-gap-8px {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adm-il-d-flex-gap-10px-mt-24px {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

/* ======================================================================
   8. PAGE: Messages  (AdminMessages.razor)
   ====================================================================== */

.adm-il-fs-12px-c-text-muted-mt-2px {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.adm-il-ws-pre-wrap {
    white-space: pre-wrap;
}

.adm-il-c-mirar-red-bord-mirar-red {
    color: var(--mirar-red);
    border-color: var(--mirar-red);
}

.adm-il-mw-340px-fs-13px-ov-hidden-to-ellipsis {
    max-width: 340px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ======================================================================
   9. PAGE: Page Visit Log  (AdminPageVisitLog.razor)
   ====================================================================== */

.adm-il-d-flex-gap-0-bdb-2px-solid-text-mb-28px {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--text-dark);
    margin-bottom: 28px;
}

.adm-il-d-flex-jc-center-p-48px-0 {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.adm-il-d-flex-gap-12px-ai-flex-end-flw-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 18px 20px;
    background: var(--mirar-white);
    border: 1px solid var(--border);
}

.adm-il-d-grid-grid-repeat-5-1fr-gap-1px-bg-border {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1px;
    background: var(--border);
    margin-bottom: 32px;
}

.adm-il-bg-mirar-white-p-24px-20px {
    background: var(--mirar-white);
    padding: 24px 20px;
}

.adm-il-fs-10px-fw-700-tt-uppercase-ls-12em {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mirar-red);
    margin-bottom: 8px;
}

.adm-il-ff-font-serif-fs-1-9rem-fw-900-c-mirar-navy {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--mirar-navy);
    line-height: 1;
}

.adm-il-fs-11px-c-text-muted-mt-4px {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.adm-il-d-grid-grid-1fr-1fr-1fr-gap-1px-bg-border {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--border);
}

.adm-il-fs-10px-fw-700-tt-uppercase-ls-12em-2 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.adm-il-mb-10px {
    margin-bottom: 10px;
}

.adm-il-d-flex-jc-space-between-fs-12px-mb-4px {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}

.adm-il-c-text-dark-ov-hidden-to-ellipsis-ws-nowrap {
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.adm-il-c-text-muted-ws-nowrap-ml-8px {
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 8px;
}

.adm-il-bg-border-br-2px-h-6px {
    background: var(--border);
    border-radius: 2px;
    height: 6px;
}

.adm-il-c-text-muted-fs-13px {
    color: var(--text-muted);
    font-size: 13px;
}

.adm-il-c-text-dark-ff-monospace {
    color: var(--text-dark);
    font-family: monospace;
}

.adm-il-c-text-muted {
    color: var(--text-muted);
}

.adm-il-c-text-dark {
    color: var(--text-dark);
}

.adm-il-bg-mirar-white-p-24px-20px-mt-24px-bd-1px-solid-bord {
    background: var(--mirar-white);
    padding: 24px 20px;
    margin-top: 24px;
    border: 1px solid var(--border);
}

.adm-il-d-flex-jc-space-between-ai-center-mb-20px {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.adm-il-fs-10px-fw-700-tt-uppercase-ls-12em-3 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.adm-il-fs-12px-c-text-muted-mt-4px {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.adm-il-h-260px-d-flex-ai-flex-end-gap-6px {
    height: 260px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding-top: 20px;
}

.adm-il-flex-1-d-flex-fdir-column-ai-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.adm-il-fs-10px-c-text-muted-writ-vertical-rl-tf-rotate-180deg {
    font-size: 10px;
    color: var(--text-muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 42px;
}

.adm-il-mw-180px {
    max-width: 180px;
}

.adm-il-mw-80px {
    max-width: 80px;
}

.adm-il-mw-150px {
    max-width: 150px;
}

.adm-il-fs-12px-c-text-muted-mb-12px {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.adm-il-bg-mirar-white-bd-1px-solid-bord-ovx-auto {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.adm-il-w-100-bc-collapse-ff-font-sans-fs-12px {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 12px;
}

.adm-il-bdb-2px-solid-text {
    border-bottom: 2px solid var(--text-dark);
}

.adm-il-p-10px-14px-ta-left-fs-10px-fw-700 {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    white-space: nowrap;
}

.adm-il-p-32px-14px-ta-center-c-text-muted {
    padding: 32px 14px;
    text-align: center;
    color: var(--text-muted);
}

.adm-il-p-10px-14px-c-text-muted-ws-nowrap {
    padding: 10px 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

.adm-il-p-10px-14px-ff-monospace-fs-11px-mw-260px {
    padding: 10px 14px;
    font-family: monospace;
    font-size: 11px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-il-p-10px-14px-c-text-muted-mw-200px-ov-hidden {
    padding: 10px 14px;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-il-p-10px-14px-c-text-muted {
    padding: 10px 14px;
    color: var(--text-muted);
}

.adm-il-p-10px-14px-ff-monospace-fs-11px-c-text-muted {
    padding: 10px 14px;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.adm-il-p-10px-14px-fs-12px-c-text-muted {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.adm-il-p-10px-14px {
    padding: 10px 14px;
}

.adm-il-ff-monospace-fs-11px-c-mirar-navy-cur-pointer {
    font-family: monospace;
    font-size: 11px;
    color: var(--mirar-navy);
    cursor: pointer;
    text-decoration: underline dotted;
}

.adm-il-d-flex-jc-center-gap-6px-mt-20px {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.adm-il-fs-11px-p-6px-14px {
    font-size: 11px;
    padding: 6px 14px;
}

.adm-il-p-10px-14px-ta-left-fs-10px-fw-700-2 {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}

.adm-il-p-10px-14px-w-40 {
    padding: 10px 14px;
    width: 40%;
}

.adm-il-p-10px-14px-ff-monospace-fs-11px-mw-300px {
    padding: 10px 14px;
    font-family: monospace;
    font-size: 11px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-il-p-10px-14px-fw-700-c-text-dark {
    padding: 10px 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.adm-il-bg-border-br-2px-h-8px {
    background: var(--border);
    border-radius: 2px;
    height: 8px;
}

.adm-il-p-10px-14px-ff-monospace-fs-11px {
    padding: 10px 14px;
    font-family: monospace;
    font-size: 11px;
}

.adm-il-c-mirar-navy-cur-pointer-td-underline-dott {
    color: var(--mirar-navy);
    cursor: pointer;
    text-decoration: underline dotted;
}

.adm-il-p-10px-14px-fw-600-c-text-dark {
    padding: 10px 14px;
    font-weight: 600;
    color: var(--text-dark);
}
/* Page-visit-log tab strip */
.adm-pvl-tab {
    background: none;
    border: none;
    padding: 11px 22px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: var(--font-sans);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
}

.adm-pvl-tab-active {
    border-bottom-color: var(--mirar-red);
    color: var(--text-dark);
}
/* Page-visit-log pagination buttons */
.adm-pvl-page-btn {
    font-size: 11px;
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-dark);
    font-family: var(--font-sans);
    font-weight: 700;
    cursor: pointer;
}

.adm-pvl-page-btn-active {
    border-color: var(--mirar-navy);
    background: var(--mirar-navy);
    color: #fff;
}
/* Horizontal bar-fill rows (Top Pages / IPs / Countries mini bars) */
.adm-bar-fill {
    height: 6px;
    border-radius: 2px;
}

.adm-bar-fill-navy {
    background: var(--mirar-navy);
}

.adm-bar-fill-red {
    background: var(--mirar-red);
}

.adm-bar-fill-green {
    background: #2d6a4f;
}
/* Same bars but the slightly-transparent variant used in the table rows */
.adm-bar-fill-op {
    height: 8px;
    border-radius: 2px;
    opacity: .75;
}
/* Hourly-visits histogram bar */
.adm-hist-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--mirar-red), var(--mirar-navy));
    border-radius: 6px 6px 0 0;
    transition: .2s;
}

/* ======================================================================
   10. PAGE: Registrations  (AdminRegistrations.razor)
   ====================================================================== */

.adm-il-p-12px-20px-bdb-1px-solid-bord {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.adm-il-d-flex-ai-center-gap-7px-fs-12px {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.adm-il-ac-mirar-red-cur-pointer {
    accent-color: var(--mirar-red);
    cursor: pointer;
}

.adm-il-w-36px {
    width: 36px;
}

.adm-il-fs-12px-mw-200px {
    font-size: 12px;
    max-width: 200px;
}

.adm-il-opacity-60 {
    opacity: .6;
}

/* ======================================================================
   11. PAGE: Survey Results  (AdminSurveyResults.razor)
   ====================================================================== */

/* ==================== From AdminSurveyResults.razor <style> block ==================== */
.svy-card {
    padding: 24px 20px;
    margin-bottom: 20px;
}

.svy-donut-row {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 12px 4px;
}

.svy-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svy-donut-hole {
    width: 64%;
    height: 64%;
    border-radius: 50%;
    background: var(--mirar-white, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.svy-donut-center-num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--mirar-navy);
    line-height: 1;
}

.svy-donut-center-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 700;
}

.svy-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;
}

.svy-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-family: var(--font-sans);
}

.svy-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    flex-shrink: 0;
}

.svy-legend-label {
    flex: 1;
    color: var(--text-dark);
    font-weight: 600;
}

.svy-legend-val {
    font-weight: 700;
    color: var(--mirar-navy);
    white-space: nowrap;
}

.svy-legend-pct {
    font-weight: 400;
    color: var(--text-muted);
}

.svy-stage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 16px 4px 8px;
}

/* 2-column variant used inside the 400px-wide respondent detail panel —
   the default 4-column grid (built for the full-width aggregate page) is
   too wide to fit there. */
.svy-stage-grid-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.svy-stage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.svy-donut-sm {
    width: 96px;
    height: 96px;
}

.svy-donut-hole-sm .svy-donut-center-num {
    font-size: 1.1rem;
}

.svy-stage-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

@media (max-width: 900px) {
    .svy-stage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svy-donut-row {
        gap: 24px;
    }
}
/* ── Respondent log table ──────────────────────────────────────────────── */
.adm-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 10px;
}

.svy-log-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.svy-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--font-sans);
}

    .svy-log-table thead th {
        padding: 9px 12px;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--text-muted);
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .svy-log-table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background 0.1s;
    }

        .svy-log-table tbody tr:last-child {
            border-bottom: none;
        }

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

    .svy-log-table td {
        padding: 8px 12px;
        color: var(--text-dark);
        vertical-align: middle;
    }

        /* ── Sticky action column (View/Delete) — same treatment as .adm-table.
   This table has 12+ columns of network metadata, so it scrolls
   horizontally almost by default; pinning the last column keeps the
   action buttons reachable without hunting for them off-screen. */
        .svy-log-table th:last-child,
        .svy-log-table td:last-child {
            position: sticky;
            right: 0;
            background: #fff;
            box-shadow: -6px 0 6px -6px rgba(0,0,0,.12);
        }

    .svy-log-table thead th:last-child {
        background: var(--surface);
    }

    .svy-log-table tbody tr:hover td:last-child {
        background: var(--surface);
    }

.svy-log-id {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.svy-log-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

.svy-log-score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.svy-log-email {
    color: var(--text-muted);
}

.svy-log-ip {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-dark);
}

.svy-log-host {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.svy-log-ref {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 220px;
}

.svy-log-country {
    font-weight: 700;
    text-align: center;
    letter-spacing: .05em;
}

.svy-log-ua {
    text-align: center;
}

.svy-tier-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.svy-ua-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.adm-il-fs-1-3rem {
    font-size: 1.3rem;
}

.adm-il-bg-text-muted {
    background: var(--text-muted);
}

/* ======================================================================
   13. PAGE: Ticker  (AdminTicker.razor)
   ====================================================================== */

/* ── Ticker preview bar ─────────────────────────────────────── */
.adm-ticker-preview {
    background: var(--mirar-navy-deep);
    color: rgba(255,255,255,.65);
    padding: 9px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-family: var(--font-sans);
    overflow: hidden;
}

.adm-ticker-label {
    background: var(--mirar-red);
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ==================== From AdminTicker.razor <style> block ==================== */
.ticker-list {
    padding: 8px 0;
}

.ticker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light, #f0f0ee);
    transition: background .1s;
}

    .ticker-row:last-child {
        border-bottom: none;
    }

    .ticker-row:hover {
        background: var(--mirar-warm, #fafaf8);
    }

.ticker-row-disabled {
    opacity: .55;
}
/* ── Reorder ── */
.ticker-reorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 32px;
}

.ticker-arrow {
    background: none;
    border: none;
    font-size: 9px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color .1s;
}

    .ticker-arrow:hover:not(:disabled) {
        color: var(--mirar-navy);
    }

    .ticker-arrow:disabled {
        opacity: .2;
        cursor: default;
    }

.ticker-pos {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-sans);
    min-width: 16px;
    text-align: center;
}
/* ── Text input ── */
.ticker-text-wrap {
    flex: 1;
    position: relative;
}

.ticker-input {
    width: 100%;
    border: 1px solid var(--border);
    padding: 9px 56px 9px 12px;
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
    box-sizing: border-box;
    background: #fff;
    transition: border-color .12s;
    border-radius: 0;
}

    .ticker-input:focus {
        border-color: var(--mirar-navy);
    }

.ticker-char-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    pointer-events: none;
}

.ticker-char-warn {
    color: #d97706;
    font-weight: 700;
}
/* ── Toggle switch ── */
.ticker-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

    .ticker-toggle input {
        display: none;
    }

.ticker-toggle-track {
    width: 34px;
    height: 18px;
    background: var(--border);
    border-radius: 9px;
    position: relative;
    transition: background .18s;
    flex-shrink: 0;
}

.ticker-toggle input:checked ~ .ticker-toggle-track {
    background: var(--mirar-green, #16a34a);
}

.ticker-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ticker-toggle input:checked ~ .ticker-toggle-track .ticker-toggle-thumb {
    transform: translateX(16px);
}

.ticker-toggle-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: var(--font-sans);
    width: 26px;
}
/* ── Remove button ── */
.ticker-remove {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    transition: color .12s;
    line-height: 1;
}

    .ticker-remove:hover {
        color: var(--mirar-red);
    }

.adm-il-p-14px-20px-bdt-1px-solid-bord {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

/* ==================== From AdminCourseResources.razor <style> block ==================== */
.acr-card {
    background: var(--mirar-white, #fff);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(13, 13, 13, .03);
    padding: 20px 22px;
}

.acr-select-card {
    margin-bottom: 22px;
}

.acr-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #5A5A5A);
    margin-bottom: 8px;
}

.acr-select {
    width: 100%;
    max-width: 520px;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid var(--border, #e0ddd8);
    background: var(--mirar-off, #F5F3EF);
    font-size: 14px;
    color: var(--mirar-navy, #0d0d0d);
    font-family: inherit;
}

    .acr-select:focus {
        outline: none;
        border-color: var(--mirar-red, #C0221A);
    }

.acr-public-link {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border, #e0ddd8);
    font-size: 12.5px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.acr-public-link-label {
    color: var(--text-muted, #5A5A5A);
    font-weight: 600;
    white-space: nowrap;
}

.acr-public-link a {
    color: var(--mirar-red, #C0221A);
    text-decoration: none;
    word-break: break-all;
}

    .acr-public-link a:hover {
        text-decoration: underline;
    }

.acr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.acr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    transition: box-shadow .15s ease;
}

    .acr-item:hover {
        box-shadow: 0 4px 16px rgba(13, 13, 13, .06);
    }

.acr-item-fields {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}

.acr-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.acr-input {
    flex: 1;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #e0ddd8);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--mirar-navy, #0d0d0d);
    background: var(--mirar-off, #F5F3EF);
    min-width: 0;
}

    .acr-input:focus {
        outline: none;
        border-color: var(--mirar-red, #C0221A);
        background: #fff;
    }

.acr-input-url {
    flex: 1.4;
}

.acr-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border, #e0ddd8);
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    font-family: inherit;
}

    .acr-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.acr-btn-ghost {
    background: var(--mirar-off, #F5F3EF);
    color: var(--text-muted, #5A5A5A);
    padding: 8px 11px;
}

    .acr-btn-ghost:hover:not(:disabled) {
        color: var(--mirar-navy, #0d0d0d);
    }

.acr-btn-primary {
    background: var(--mirar-navy, #0d0d0d);
    color: #fff;
    border-color: var(--mirar-navy, #0d0d0d);
}

    .acr-btn-primary:hover:not(:disabled) {
        background: var(--mirar-red, #C0221A);
        border-color: var(--mirar-red, #C0221A);
    }

.acr-btn-danger {
    color: var(--mirar-red, #C0221A);
    border-color: #eecfcb;
    background: #fff;
}

    .acr-btn-danger:hover:not(:disabled) {
        background: var(--mirar-red, #C0221A);
        color: #fff;
    }

.acr-empty {
    text-align: center;
    padding: 28px;
    font-size: 13px;
    color: var(--text-muted, #5A5A5A);
    background: var(--mirar-off, #F5F3EF);
    border: 1px dashed var(--border, #e0ddd8);
    border-radius: 14px;
    margin-bottom: 18px;
}

.acr-add-card {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--mirar-warm, #FAF8F5);
    border-style: dashed;
}

.acr-add-fields {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}

.acr-btn-add {
    padding: 10px 18px;
    flex-shrink: 0;
}

.acr-toast {
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mirar-green, #1B6B45);
}

@media (max-width: 640px) {
    .acr-item, .acr-add-card {
        flex-direction: column;
        align-items: stretch;
    }

    .acr-item-fields, .acr-add-fields {
        flex-direction: column;
        min-width: 0;
    }

    .acr-item-actions {
        justify-content: flex-end;
    }
}

/* ======================================================================
   PAGE: Articles  (AdminArticles.razor)
   Reuses shared .adm-* / .cep-* / .ticker-toggle classes already defined
   above. This section only adds what's unique to the article editor form.
   ====================================================================== */

.art-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.art-submission-banner {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
    font-size: 12.5px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

    .art-submission-banner span {
        margin-left: 4px;
    }

.art-drawer-close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    transition: color .12s;
}

    .art-drawer-close:hover {
        color: var(--mirar-red);
    }

.art-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.art-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.art-field-full {
    grid-column: 1 / -1;
}

.art-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.art-field-label-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    opacity: .8;
}

.art-field-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.art-field-error {
    font-size: 11px;
    color: var(--mirar-red);
    font-weight: 600;
}

.art-input, .art-textarea, select.art-input {
    border: 1px solid var(--border);
    background: #fff;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--font-sans);
    color: var(--text-dark);
    outline: none;
    transition: border-color .12s;
    width: 100%;
}

    .art-input:focus, .art-textarea:focus {
        border-color: var(--mirar-red);
    }

.art-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .art-input-row .art-input {
        flex: 1;
    }

/* ── Flagged-word chips (AdminArticleComments.razor) ────────────────── */
.art-word-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 32px;
}

.art-word-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mirar-off);
    border: 1px solid var(--border);
    color: var(--text-dark);
    font-size: 12.5px;
    font-family: var(--font-sans);
    padding: 6px 8px 6px 14px;
}

.art-word-chip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

    .art-word-chip-remove:hover {
        color: var(--mirar-red);
    }

.art-word-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.art-word-saved {
    font-size: 11.5px;
    color: #10b981;
    font-weight: 600;
}

.art-inline-btn {
    flex-shrink: 0;
    background: var(--mirar-off);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 9px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: color .12s, border-color .12s;
    white-space: nowrap;
}

    .art-inline-btn:hover {
        color: var(--mirar-red);
        border-color: var(--mirar-red);
    }

.art-input-mono {
    font-family: monospace;
    font-size: 12.5px;
}

.art-textarea {
    resize: vertical;
    line-height: 1.6;
}

.art-textarea-body {
    font-family: monospace;
    font-size: 12.5px;
}

.art-field-hint-scheduled {
    color: #6d28d9;
    font-weight: 600;
}

/* Wider drawer variant — the article editor has more fields (rich text
   toolbar, cover upload) than the Course/Calendar editors this pattern
   was built for. */
.cep-drawer-wide {
    width: min(1040px, 94vw);
}

/* ── Cover image upload ──────────────────────────────────────────────── */
.art-file-input {
    flex-shrink: 0;
    font-size: 11.5px;
    font-family: var(--font-sans);
    max-width: 220px;
}

.art-cover-preview {
    margin-top: 10px;
    max-width: 320px;
    max-height: 160px;
    object-fit: cover;
    border: 1px solid var(--border);
}

/* ── Rich text editor ─────────────────────────────────────────────────── */
.art-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--mirar-off);
    padding: 6px 8px;
}

.art-tb-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dark);
    font-size: 12px;
    font-family: var(--font-sans);
    padding: 5px 9px;
    cursor: pointer;
    border-radius: 2px;
    min-width: 28px;
    line-height: 1.2;
}

    .art-tb-btn:hover {
        background: #fff;
        border-color: var(--border);
    }

.art-tb-btn-source {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mirar-red);
}

.art-tb-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 2px 4px;
}

.art-tb-spacer {
    flex: 1;
}

.art-editor-surface {
    border: 1px solid var(--border);
    background: #fff;
    padding: 14px 16px;
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    outline: none;
}

    .art-editor-surface:focus {
        border-color: var(--mirar-red);
    }

    .art-editor-surface h2 {
        font-size: 1.3rem;
        margin: 18px 0 8px;
    }

    .art-editor-surface h3 {
        font-size: 1.1rem;
        margin: 16px 0 8px;
    }

    .art-editor-surface blockquote {
        border-left: 3px solid var(--mirar-red);
        padding-left: 14px;
        margin: 12px 0;
        color: var(--text-muted);
        font-style: italic;
    }

    .art-editor-surface img {
        max-width: 100%;
    }

.art-textarea-body {
    min-height: 320px;
}

.art-drawer-footer {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
    .art-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   PAGE: Training Media  (AdminTrainingMedia.razor)
   Reuses shared .adm-* classes and the .art-field/.art-input/.art-file-input
   /.art-inline-btn classes already added for the Articles feature.
   ====================================================================== */

.tm-upload-panel {
    padding: 20px 24px;
}

.tm-upload-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.tm-embed-modal {
    max-width: 640px;
}

.tm-embed-code {
    background: var(--mirar-off);
    border: 1px solid var(--border);
    padding: 14px 16px;
    font-size: 12px;
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 14px;
    max-height: 260px;
    overflow-y: auto;
}

.tm-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 10px;
}

.tm-success-banner {
    margin-top: 14px;
    background: #ecfdf5;
    border-left: 3px solid #10b981;
    color: #065f46;
    font-size: 12.5px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .tm-success-banner code {
        background: rgba(0,0,0,.05);
        padding: 2px 6px;
        font-size: 11.5px;
    }

.tm-progress-wrap {
    margin-top: 14px;
}

.tm-progress-track {
    width: 100%;
    height: 8px;
    background: var(--mirar-off);
    border: 1px solid var(--border);
    overflow: hidden;
}

.tm-progress-fill {
    height: 100%;
    background: var(--mirar-red);
    transition: width .2s ease;
}

.tm-progress-label {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.tm-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tm-url-text {
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--mirar-off);
    padding: 2px 6px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .tm-upload-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ======================================================================
   SNACKBAR (Snackbar.razor, shown via SnackbarService)
   One shared toast stack for the whole admin portal, rendered once in
   AdminLayout.razor. Fixed to the bottom-right of the viewport so it never
   sits over the sidebar/topbar; stacks newest-on-top, each auto-dismisses
   itself (see Snackbar.razor) after a few seconds or on click.
   ====================================================================== */

.adm-snackbar-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.adm-snackbar {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--mirar-navy-deep, #101a33);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    font-size: 13px;
    line-height: 1.4;
    animation: adm-snackbar-in .18s ease-out;
    border-left: 4px solid var(--mirar-navy, #1a2340);
}

.adm-snackbar-success {
    border-left-color: var(--mirar-green, #1B6B45);
}

.adm-snackbar-error {
    border-left-color: var(--mirar-red, #C0221A);
}

.adm-snackbar-warning {
    border-left-color: #E8A23A;
}

.adm-snackbar-info {
    border-left-color: var(--mirar-navy, #1a2340);
}

.adm-snackbar-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

.adm-snackbar-success .adm-snackbar-icon {
    background: var(--mirar-green, #1B6B45);
}

.adm-snackbar-error .adm-snackbar-icon {
    background: var(--mirar-red, #C0221A);
}

.adm-snackbar-warning .adm-snackbar-icon {
    background: #E8A23A;
    color: #1a1a1a;
}

.adm-snackbar-info .adm-snackbar-icon {
    background: var(--mirar-navy, #1a2340);
}

.adm-snackbar-text {
    flex: 1;
    word-break: break-word;
}

.adm-snackbar-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px;
}

    .adm-snackbar-close:hover {
        color: #fff;
    }

@keyframes adm-snackbar-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .adm-snackbar-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}
/* ── Part A: Admin builder (Google-Forms-style question cards) ──────── */

.qzf-question-card {
    position: relative;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 8px;
    border-left: 4px solid transparent;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    .qzf-question-card.qzf-active {
        border-left-color: var(--mirar-red, #c0392b);
        box-shadow: 0 1px 10px rgba(0,0,0,.08);
    }

.qzf-question-body {
    padding: 20px 24px 10px;
}

.qzf-question-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.qzf-drag-handle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    flex-shrink: 0;
}

.qzf-drag-btn {
    border: none;
    background: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    font-size: 10px;
    padding: 3px 5px;
    line-height: 1;
    border-radius: 3px;
}

    .qzf-drag-btn:hover:not(:disabled) {
        color: var(--mirar-red, #c0392b);
        background: rgba(0,0,0,.04);
    }

    .qzf-drag-btn:disabled {
        opacity: .25;
        cursor: default;
    }

.qzf-question-input {
    flex: 1;
    border: none;
    border-bottom: 1.5px solid var(--border, #e2e2e0);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark, #1a2340);
    padding: 6px 2px 10px;
    resize: none;
    font-family: inherit;
    min-height: 40px;
}

    .qzf-question-input:focus {
        outline: none;
        border-bottom-color: var(--mirar-red, #c0392b);
    }

.qzf-type-select {
    width: 190px;
    flex-shrink: 0;
}

.qzf-image-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin: -10px 0 10px;
}

.qzf-image-row {
    padding: 0 0 14px 44px;
}

.qzf-image-preview {
    max-width: 280px;
    max-height: 160px;
    border-radius: 6px;
    border: 1px solid var(--border, #e2e2e0);
    display: block;
    margin-top: 8px;
    object-fit: cover;
}

.qzf-options {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.qzf-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.qzf-option-marker {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mirar-green, #1B7A69);
}

.qzf-option-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--border, #e2e2e0);
    background: transparent;
    font-size: 13px;
    color: var(--text-dark, #1a2340);
    padding: 6px 2px;
}

    .qzf-option-input:focus {
        outline: none;
        border-bottom-color: var(--mirar-red, #c0392b);
    }

.qzf-option-correct .qzf-option-input {
    color: var(--mirar-green, #1B7A69);
    font-weight: 600;
}

.qzf-option-remove {
    border: none;
    background: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    border-radius: 3px;
}

    .qzf-option-remove:hover {
        color: var(--mirar-red, #c0392b);
        background: rgba(0,0,0,.04);
    }

.qzf-add-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 13px;
}

    .qzf-add-option-row:hover {
        color: var(--mirar-red, #c0392b);
    }

.qzf-add-option-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border, #e2e2e0);
    flex-shrink: 0;
}

.qzf-add-option-row:hover .qzf-add-option-marker {
    border-color: var(--mirar-red, #c0392b);
}

.qzf-add-option-row.qzf-add-option-checkbox .qzf-add-option-marker {
    border-radius: 4px;
}

/* Disabled greyed-out preview line for Short answer / Paragraph, matching
   Google Forms showing a non-editable "Short answer text" placeholder. */
.qzf-text-preview {
    border-bottom-style: dashed !important;
    color: var(--text-muted, #9ca3af) !important;
    cursor: default;
}

.qzf-paragraph-preview {
    resize: none;
    height: 44px;
    width: 100%;
    font-family: inherit;
}

.qzf-paragraph-note {
    padding-left: 30px;
    margin-top: 2px;
}

.qzf-answerkey-panel {
    margin: 6px 0 10px 30px;
    padding: 10px 14px;
    background: var(--mirar-off, #f5f5f3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.qzf-answerkey-text {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.qzf-answerkey-text-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .qzf-answerkey-text-row > span:first-child {
        flex-shrink: 0;
        width: 90px;
    }

    .qzf-answerkey-text-row .form-control {
        flex: 1;
    }

.qzf-answerkey-points {
    width: 64px;
    text-align: center;
    flex: 0 0 auto !important;
}

.qzf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-top: 1px solid var(--border, #e2e2e0);
    background: rgba(0,0,0,.012);
}

.qzf-answerkey-link {
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mirar-navy, #0a2342);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
}

    .qzf-answerkey-link:hover {
        color: var(--mirar-red, #c0392b);
    }

.qzf-points-chip {
    color: var(--text-muted, #9ca3af);
    font-weight: 400;
}

.qzf-footer-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.qzf-icon-btn {
    border: none;
    background: none;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}

    .qzf-icon-btn:hover {
        background: rgba(0,0,0,.05);
        color: var(--text-dark, #1a2340);
    }

    .qzf-icon-btn.qzf-icon-danger:hover {
        color: var(--mirar-red, #c0392b);
        background: #fee2e2;
    }

.qzf-vdivider {
    width: 1px;
    height: 20px;
    background: var(--border, #e2e2e0);
    margin: 0 8px;
}

.qzf-required-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    user-select: none;
}

.qzf-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border, #e2e2e0);
    border-radius: 9px;
    transition: background .15s;
    flex-shrink: 0;
}

    .qzf-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        transition: transform .15s;
        box-shadow: 0 1px 2px rgba(0,0,0,.25);
    }

.qzf-required-toggle input {
    display: none;
}

    .qzf-required-toggle input:checked + .qzf-switch {
        background: var(--mirar-red, #c0392b);
    }

        .qzf-required-toggle input:checked + .qzf-switch::after {
            transform: translateX(14px);
        }

.qzf-add-question-bar {
    display: flex;
    justify-content: center;
    margin: 6px 0 20px;
}

.qz-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dark);
    margin-bottom: 8px;
    cursor: pointer;
}

    .qz-check-row input {
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

/* ── Survey Builder (AdminSurveyInstrumentBuilder.razor, AdminSurveyBankBuilder.razor) ──
   Moved out of each page's own <style> block. Shares the .qzf-question-card /
   .qzf-icon-btn / etc. base styles from "Part A: Admin builder" above (those
   stay shared with Quiz/Question-Bank) — everything below is section-grouping
   and section-colour styling specific to the Survey builders, so nothing here
   should be reused by Quiz/Question-Bank pages. ── */

.adm-modal-wide {
    max-width: 560px;
    width: 92vw;
}

.qzf-import-list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
}

.qzf-import-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px 4px;
}

.qzf-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}

    .qzf-import-row:hover {
        background: rgba(15,79,67,0.04);
    }

.qzf-import-row-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Each section gets its own accent colour (set inline via --qzf-accent /
   --qzf-accent-tint from each page's GetSectionPalette helper), so sections
   are visually distinct at a glance regardless of count. */

.qzf-section-block {
    margin-bottom: 26px;
    padding-left: 14px;
    border-left: 4px solid var(--qzf-accent, var(--mirar-red, #c0392b));
}

.qzf-score-input {
    flex: 0 0 64px;
    max-width: 64px;
    text-align: center;
}

.qzf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: var(--qzf-accent-tint, rgba(192,57,43,.08));
}

.qzf-section-title-input {
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    border: none;
    background: none;
    outline: none;
    padding: 4px 6px;
    border-radius: 4px;
    min-width: 160px;
    color: var(--text-dark, #1a1a1a);
}

    .qzf-section-title-input:focus {
        background: #fff;
        box-shadow: 0 0 0 1px var(--qzf-accent, var(--mirar-red, #c0392b));
    }

.qzf-section-actions {
    display: flex;
    gap: 6px;
}

.qzf-section-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px;
    border: 1px dashed var(--border, #ddd);
    border-radius: 6px;
    background: #fafafa;
}

/* Active question card picks up its own section's accent colour instead of
   always mirar-red, so it visually ties back to its section. Scoped under
   .qzf-section-block so it only applies inside Survey pages, not Quiz. */
.qzf-section-block .qzf-question-card.qzf-active {
    border-left-color: var(--qzf-accent, var(--mirar-red, #c0392b));
}

/* Add Question/Item + Delete buttons — named distinctly from .adm-link-btn
   so they don't affect that shared class elsewhere in the admin app. */

.qzf-add-question-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-sans);
    color: var(--qzf-accent, var(--mirar-red, #c0392b));
    background: #fff;
    border: 1px solid var(--qzf-accent, var(--mirar-red, #c0392b));
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .qzf-add-question-btn:hover {
        background: var(--qzf-accent, var(--mirar-red, #c0392b));
        color: #fff;
    }

.qzf-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-sans);
    color: var(--mirar-red, #c0392b);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .qzf-delete-btn:hover {
        background: rgba(192,57,43,.08);
        border-color: rgba(192,57,43,.25);
    }

/* ── Admin: session QR modal ──────────────────────────────────────── */

.qz-qr-modal {
    width: min(360px, 92vw);
}

.qz-qr-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.qz-qr-img {
    width: 220px;
    height: 220px;
    border: 1px solid var(--border, #e2e2e0);
}

.qz-join-url {
    font-size: 12px;
    color: var(--text-dark, #1a2340);
    word-break: break-all;
    text-align: center;
}

/* ── Admin: floating "scroll to bottom" FAB (Quiz/Question-Bank builders) ── */

.adm-scroll-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* ── Admin: session panel — certificate toggle (AdminQuizSessions.razor) ── */

.qzs-cert-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.qzs-cert-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

    .qzs-cert-option input[type="radio"] {
        margin: 0;
    }

/* ── Admin: analytics ─────────────────────────────────────────────── */

.qz-breakdown-list {
    padding: 6px 20px 18px;
}

.qz-breakdown-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border, #e2e2e0);
}

    .qz-breakdown-item:last-child {
        border-bottom: none;
    }

.qz-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.qz-breakdown-question {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
}

.qz-breakdown-correct-pct {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.qz-option-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 240px) 1fr 90px;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
}

.qz-option-bar-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.qz-correct-icon {
    color: var(--mirar-green, #1B7A69);
    font-size: 11px;
}

.qz-option-bar-track {
    height: 8px;
    background: var(--border, #e2e2e0);
    border-radius: 4px;
    overflow: hidden;
}

.qz-option-bar-fill {
    height: 100%;
    background: var(--text-muted, #9ca3af);
    border-radius: 4px;
    transition: width .2s ease;
}

    .qz-option-bar-fill.qz-bar-correct {
        background: var(--mirar-green, #1B7A69);
    }

.qz-option-bar-val {
    text-align: right;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.qz-row-clickable {
    cursor: pointer;
}

    .qz-row-clickable:hover td {
        background: rgba(10,35,66,.03);
    }

.qz-text-responses {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.qz-text-response-item {
    padding: 8px 12px;
    background: var(--mirar-off, #f5f5f3);
    border-radius: 5px;
    font-size: 12px;
    color: var(--text-dark, #1a2340);
    white-space: pre-wrap;
}

@media (max-width: 700px) {
    .qz-option-bar-row {
        grid-template-columns: 1fr;
        row-gap: 3px;
    }

    .qz-option-bar-val {
        text-align: left;
    }
}

/* ── Survey Summary: "By Question" bar-chart tab (AdminSurveySummary.razor) ──
   Reuses the qz-breakdown-item / qz-option-bar-* skeleton above (same visual
   language as the Quiz analytics breakdown) — this block only adds the bits
   specific to survey questions: a section eyebrow above the question text
   (quiz questions don't have sections) and a section-group heading between
   groups of questions. */
.svy-qb-section {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mirar-navy, #1a2340);
    opacity: .55;
    margin-bottom: 3px;
}

.svy-qb-section-group {
    padding: 16px 20px 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mirar-navy);
    background: var(--mirar-off, #f5f5f3);
    border-bottom: 1px solid var(--border, #e2e2e0);
    border-top: 1px solid var(--border, #e2e2e0);
}

    .svy-qb-section-group:first-child {
        border-top: none;
    }

/* ── Survey Summary: "Free Text" testimonial tab (AdminSurveySummary.razor) ── */
.svy-testimonial-question {
    padding: 18px 20px 4px;
}

    .svy-testimonial-question + .svy-testimonial-question {
        border-top: 1px solid var(--border, #e2e2e0);
        margin-top: 6px;
    }

.svy-testimonial-qtext {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
    margin-bottom: 2px;
}

.svy-testimonial-qcount {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 14px;
}

.svy-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    padding: 0 20px 22px;
}

.svy-testimonial-card {
    background: var(--mirar-off, #f5f5f3);
    border-radius: 10px;
    padding: 20px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svy-testimonial-mark {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    line-height: .6;
    color: var(--mirar-navy, #1a2340);
    opacity: .16;
    margin-bottom: -2px;
}

.svy-testimonial-quote {
    font-size: 13px;
    color: var(--text-dark, #1a2340);
    line-height: 1.55;
    white-space: pre-wrap;
    flex: 1;
}

.svy-testimonial-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border, #e2e2e0);
    padding-top: 8px;
    margin-top: 4px;
}

.svy-testimonial-name {
    font-weight: 700;
    color: var(--mirar-navy, #1a2340);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svy-testimonial-date {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .svy-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Quiz analytics: Google-Forms-style Summary / Question / Individual tabs ── */
.qz-tabbar {
    display: flex;
    border-bottom: 1px solid var(--border, #e2e2e0);
    padding: 0 20px;
}

.qz-tab {
    background: none;
    border: none;
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    transition: color .15s ease, border-color .15s ease;
}

    .qz-tab:hover {
        color: var(--text-dark);
    }

.qz-tab-active {
    border-bottom-color: var(--mirar-red);
    color: var(--text-dark);
}

.qz-tabpanel {
    padding: 0;
}

/* Per-question navigator (Question tab) */
.qz-qnav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #e2e2e0);
}

.qz-qnav-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
    margin-bottom: 4px;
}

.qz-qnav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.qz-qnav-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qz-qnav-btn {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 12px;
    padding: 0;
    transition: border-color .15s ease, color .15s ease;
}

    .qz-qnav-btn:hover:not(:disabled) {
        border-color: var(--mirar-red);
        color: var(--mirar-red);
    }

    .qz-qnav-btn:disabled {
        opacity: .35;
        cursor: default;
    }

.qz-qtab-pad {
    padding: 16px 20px 20px;
}

/* Answer-key style choice rows for the Question tab */
.qz-choice-list {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qz-choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}

.qz-choice-correct {
    background: rgba(27, 122, 105, .1);
}

.qz-choice-incorrect {
    background: rgba(196, 104, 42, .08);
}

.qz-choice-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.qz-choice-correct .qz-choice-icon {
    color: var(--mirar-green, #1B7A69);
}

.qz-choice-incorrect .qz-choice-icon {
    color: #C4682A;
}

.qz-choice-label {
    flex: 1;
    color: var(--text-dark, #1a2340);
}

.qz-choice-val {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .qz-qnav {
        flex-direction: column;
        align-items: stretch;
    }

    .qz-qnav-controls {
        justify-content: space-between;
    }

    .qz-tabbar {
        padding: 0 12px;
    }

    .qz-tab {
        padding: 12px 12px;
        font-size: 10px;
    }
}

/* ── Quiz analytics Summary tab: Insights + Frequently Missed + per-question cards ── */
.qz-resp-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Tab bar now lives in its own thin card, separate from the content cards below */
.qz-tabbar-card {
    background: #fff;
    border: 1px solid var(--border, #e2e2e0);
    margin-bottom: 20px;
}

.qz-tabbar {
    display: flex;
    padding: 0 20px;
}

.qz-tab {
    background: none;
    border: none;
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    transition: color .15s ease, border-color .15s ease;
}

    .qz-tab:hover {
        color: var(--text-dark);
    }

.qz-tab-active {
    border-bottom-color: var(--mirar-red);
    color: var(--text-dark);
}

.qz-card-icon {
    margin-right: 7px;
    font-size: 11px;
}

/* Insights card: average / median / range boxes + points histogram */
.qz-insight-body {
    padding: 18px 20px 22px;
}

.qz-insight-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.qz-insight-stat {
    background: var(--mirar-off, #f5f5f3);
    border-radius: 6px;
    padding: 14px 12px;
    text-align: center;
}

.qz-insight-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.qz-insight-stat-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
}

.qz-hist-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
    text-align: center;
    margin-bottom: 14px;
}

.qz-hist-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
    padding: 0 4px;
}

.qz-hist-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.qz-hist-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
    min-height: 13px;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

.qz-hist-bar {
    width: 100%;
    max-width: 30px;
    background: var(--mirar-navy, #1a2340);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height .25s ease;
}

.qz-hist-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Frequently missed questions list */
.qz-missed-list {
    padding: 4px 20px 18px;
}

.qz-missed-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: var(--mirar-off, #f5f5f3);
    border-radius: 6px;
    margin-top: 10px;
}

.qz-missed-head {
    background: none;
    padding: 0 14px;
    margin-top: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.qz-missed-question {
    font-size: 13px;
    color: var(--text-dark, #1a2340);
    flex: 1;
}

.qz-missed-val {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Per-question cards (Summary tab) */
.qz-qcard-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark, #1a2340);
    text-transform: none;
    letter-spacing: normal;
    flex: 1;
    padding-right: 12px;
}

.qz-qcard-body {
    padding: 14px 20px 18px;
}

@media (max-width: 700px) {
    .qz-insight-stats {
        grid-template-columns: 1fr;
    }

    .qz-hist-chart {
        gap: 4px;
    }

    .qz-hist-bar {
        max-width: 22px;
    }

    .qz-tabbar-card .qz-tabbar {
        padding: 0 12px;
    }

    .qz-tab {
        padding: 12px 12px;
        font-size: 10px;
    }
}

/* admin-flowchart.css
   Styles for AdminFlowchart.razor. Prefixed fc- to avoid collisions with
   admin.css. Either paste this block into admin.css (matching how the
   other 12 admin pages were consolidated) or link it separately in
   AdminLayout — AdminCourseResources.razor already keeps its own scoped
   stylesheet instead of merging in, so either approach is consistent
   with existing precedent.

   Optional: for an exact Inter match, add to your layout's <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   Without it, the stack below falls back to the OS system font, which
   reads nearly identically (San Francisco / Segoe UI). */

.fc-page {
    --fc-bg: #fafafa;
    --fc-surface: #ffffff;
    --fc-border: #e4e4e7;
    --fc-border-strong: #d4d4d8;
    --fc-text: #18181b;
    --fc-text-muted: #71717a;
    --fc-accent: #6366f1;
    --fc-accent-hover: #4f46e5;
    --fc-accent-soft: #eef2ff;
    --fc-warn: #d97706;
    --fc-danger: #dc2626;
    --fc-danger-soft: #fef2f2;
    --fc-wire: #a1a1aa;
    --fc-grid-dot: #e4e4e7;
    --fc-guide: #f43f5e;
    --fc-spacing: #10b981;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fc-text);
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.fc-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.fc-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    border-right: 1px solid var(--fc-border);
}

    .fc-toolbar-group:last-child {
        border-right: none;
    }

.fc-toolbar-group-end {
    margin-left: auto;
    padding-right: 0;
}

.fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--fc-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .fc-btn:hover {
        background: #f4f4f5;
    }

    .fc-btn:focus-visible {
        outline: 2px solid var(--fc-accent);
        outline-offset: 1px;
    }

    .fc-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background: transparent;
    }

.fc-btn-toggle.fc-btn-active {
    background: var(--fc-accent-soft);
    color: var(--fc-accent-hover);
}

.fc-btn-primary {
    background: var(--fc-accent);
    color: #ffffff;
}

    .fc-btn-primary:hover {
        background: var(--fc-accent-hover);
    }

.fc-btn-danger {
    color: var(--fc-danger);
}

    .fc-btn-danger:hover {
        background: var(--fc-danger-soft);
    }

.fc-btn-icon {
    padding: 7px 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.fc-zoom-group {
    gap: 0;
}

.fc-zoom-level {
    min-width: 52px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Shape-picker glyphs — plain elements the JS never touches, so all of
   their look lives here. */
.fc-shape-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--fc-text-muted);
    background: transparent;
}

.fc-shape-icon-rect {
    border-radius: 3px;
}

.fc-shape-icon-terminal {
    border-radius: 7px;
}

.fc-shape-icon-diamond {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 2px;
}

.fc-shape-icon-text {
    border: none;
    border-bottom: 1.5px dashed var(--fc-text-muted);
    height: 8px;
}

/* ── Body layout: canvas + side panel ───────────────────────────────── */

.fc-body {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    gap: 12px;
}

/* ── Canvas ──────────────────────────────────────────────────────────── */

.fc-canvas-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 520px;
    overflow: auto;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    background: var(--fc-bg);
    cursor: grab;
}

    .fc-canvas-wrap.fc-space-pan {
        cursor: grab;
    }

    .fc-canvas-wrap.fc-panning {
        cursor: grabbing;
    }

.fc-canvas {
    position: relative;
    width: 2000px;
    height: 1300px;
    background-image: radial-gradient(circle, var(--fc-grid-dot) 1px, transparent 1px);
    background-size: 24px 24px;
}

.fc-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Small always-visible shortcut chip, pinned to the top-left of the
   viewport via a plain DOM node the JS inserts on init (sticky within
   .fc-canvas-wrap's own scroll, so it stays put while panning/scrolling). */
.fc-pan-hint {
    position: sticky;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-block;
    width: max-content;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--fc-text-muted);
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.85;
}

/* ── Nodes ───────────────────────────────────────────────────────────── */

.fc-node {
    cursor: grab;
}

    .fc-node:active {
        cursor: grabbing;
    }

    .fc-node:focus-visible .fc-node-shape {
        outline: none;
        stroke: var(--fc-accent);
        stroke-width: 2;
    }

.fc-node-shape {
    fill: var(--fc-surface);
    stroke: var(--fc-border);
    stroke-width: 1.5px;
    filter: drop-shadow(0 1px 2px rgba(24, 24, 27, 0.06));
    transition: stroke 0.12s ease, filter 0.12s ease, stroke-width 0.12s ease;
}

.fc-node:hover .fc-node-shape {
    stroke: var(--fc-border-strong);
    filter: drop-shadow(0 3px 8px rgba(24, 24, 27, 0.10));
}

.fc-node-label {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    fill: var(--fc-text);
    pointer-events: none;
    user-select: none;
}

/* Free-floating text nodes: invisible frame until it needs attention. */
.fc-node-text .fc-node-shape {
    fill: transparent;
    stroke: transparent;
    stroke-dasharray: 4 3;
    filter: none;
}

.fc-node-text:hover .fc-node-shape {
    stroke: var(--fc-border-strong);
}

/* State modifiers — declared after the shape-specific rules above so they
   win regardless of which shape variant they're combined with. */
.fc-node-selected .fc-node-shape {
    stroke: var(--fc-accent);
    stroke-width: 2;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.22));
}

.fc-node-pending .fc-node-shape {
    stroke: var(--fc-warn);
    stroke-width: 2;
    stroke-dasharray: 5 3;
    filter: none;
}

/* Resize handles — the 8-handle outline around a selected shape. Drag a
   corner to resize both dimensions, drag an edge midpoint to resize just
   that dimension, same as draw.io's selection handles. */
.fc-resize-handle {
    fill: var(--fc-surface);
    stroke: var(--fc-accent);
    stroke-width: 1.5px;
}

/* Hovered while another connector's endpoint is being dragged toward it —
   the "drop here to reconnect" cue, drawn on top of any selection state. */
.fc-node-drop-target .fc-node-shape {
    stroke: var(--fc-accent) !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 0 4px var(--fc-accent-soft)) !important;
}

/* Hover-to-connect arrows — four small handles on a node's N/E/S/W edges,
   draw.io-style. Hidden until the node is hovered, and hidden entirely
   while something else is already being dragged/resized/connected so
   they never fight another gesture. Dragging a handle onto another shape
   draws a connector to it; dragging onto empty canvas spawns a new
   connected shape there (see onHoverArrowMouseDown in the JS). */
.fc-hover-arrow {
    opacity: 0;
    pointer-events: none;
    cursor: crosshair;
    transition: opacity 0.12s ease;
}

/* Invisible padding rect (see admin-flowchart.js renderNodes) that keeps
   .fc-node's :hover state alive while the pointer crosses the gap between
   the shape and the hover-connect arrows sitting outside it. Must stay
   interactive (pointer-events) at all times — including when the node
   itself isn't hovered — since it's the thing responsible for making the
   hover state trigger in the first place. */
.fc-node-hover-zone {
    pointer-events: all;
}

.fc-canvas-wrap.fc-suspend-hover-arrows .fc-node-hover-zone {
    pointer-events: none;
}

.fc-node:hover .fc-hover-arrow {
    opacity: 1;
    pointer-events: auto;
}

.fc-canvas-wrap.fc-suspend-hover-arrows .fc-hover-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
}

.fc-hover-arrow-bg {
    fill: var(--fc-surface);
    stroke: var(--fc-accent);
    stroke-width: 1.5px;
    transition: fill 0.12s ease;
}

.fc-hover-arrow-glyph {
    fill: var(--fc-accent);
    transition: fill 0.12s ease;
}

.fc-hover-arrow:hover .fc-hover-arrow-bg {
    fill: var(--fc-accent);
}

.fc-hover-arrow:hover .fc-hover-arrow-glyph {
    fill: #ffffff;
}

/* Dashed rubber-band line drawn from the source node to the cursor while
   dragging a hover-connect arrow, before it's dropped on a target. */
.fc-hover-connect-preview {
    stroke: var(--fc-accent);
    stroke-width: 1.75px;
    stroke-dasharray: 5 4;
    fill: none;
    pointer-events: none;
}

/* ── Alignment guides (smart guides, draw.io-style) ───────────────────── */

/* Dashed line shown while dragging a node, whenever it lines up (center
   or edge) with another shape already on the canvas. Rendered into
   #fcGuideLayer, which sits above nodes/connectors so the guide is always
   visible regardless of what's underneath. Purely visual — never receives
   pointer events. */
.fc-align-guide {
    stroke: var(--fc-guide);
    stroke-width: 1;
    stroke-dasharray: 5 4;
    fill: none;
    pointer-events: none;
}

/* Equal-spacing dimension marks — shown when the dragged shape's gap to a
   neighbor on one side matches its gap to a neighbor on the other, so all
   three end up evenly spaced. */
.fc-spacing-guide {
    stroke: var(--fc-spacing);
    stroke-width: 1.25px;
    fill: none;
    pointer-events: none;
}

.fc-spacing-label {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--fc-spacing);
    pointer-events: none;
    user-select: none;
}

/* ── Connectors ──────────────────────────────────────────────────────── */

.fc-connector-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    cursor: pointer;
}

.fc-connector-line {
    stroke: var(--fc-wire);
    stroke-width: 1.75px;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke 0.12s ease, stroke-width 0.12s ease;
}

.fc-connector-group:hover .fc-connector-line {
    stroke: var(--fc-accent);
}

.fc-connector-selected .fc-connector-line {
    stroke: var(--fc-accent);
    stroke-width: 2.25px;
}

/* Toggled per-connector from the right-click menu ("Make Dashed Line"). */
.fc-connector-dashed {
    stroke-dasharray: 6 5;
}

.fc-connector-label rect {
    fill: var(--fc-surface);
    stroke: var(--fc-border);
    stroke-width: 1;
}

.fc-connector-label text {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    fill: var(--fc-text-muted);
}

.fc-connector-selected .fc-connector-label rect {
    stroke: var(--fc-accent);
}

.fc-connector-selected .fc-connector-label text {
    fill: var(--fc-accent-hover);
}

/* Bend handle — grab and drag the middle of any arrow to route it around
   others (e.g. a "back to an earlier step" arrow on a decision branch).
   Faint until hovered/selected so it doesn't clutter a busy diagram.
   Double-click it to straighten the connector back out. */
.fc-connector-handle {
    fill: var(--fc-surface);
    stroke: var(--fc-wire);
    stroke-width: 1.5px;
    opacity: 0.45;
    cursor: grab;
    transition: opacity 0.12s ease, r 0.12s ease;
}

    .fc-connector-handle:active {
        cursor: grabbing;
    }

.fc-connector-group:hover .fc-connector-handle {
    opacity: 1;
    stroke: var(--fc-accent);
}

.fc-connector-selected .fc-connector-handle {
    opacity: 1;
    stroke: var(--fc-accent);
    r: 6;
}

/* Endpoint handles — shown only while a connector is selected, same as
   draw.io's edge-editing circles. Drag one onto a different shape to
   reconnect that end of the arrow to it. */
.fc-connector-endpoint {
    fill: var(--fc-surface);
    stroke: var(--fc-accent);
    stroke-width: 2;
    cursor: crosshair;
}

    .fc-connector-endpoint:hover {
        fill: var(--fc-accent-soft);
    }

/* Arrowheads live in the Razor markup's <defs>; recolor them here so they
   track the accent instead of the hardcoded fill on the SVG elements —
   an authored stylesheet rule outranks a presentation attribute. */
#fcArrowHead path {
    fill: var(--fc-wire);
}

#fcArrowHeadSelected path {
    fill: var(--fc-accent);
}

/* ── Inline label editor (replaces window.prompt) ───────────────────── */

.fc-inline-editor {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    padding: 0 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--fc-text);
    background: var(--fc-surface);
    border: none;
    border-radius: 6px;
    outline: 2px solid var(--fc-accent);
    outline-offset: 1px;
    box-shadow: 0 4px 14px rgba(24, 24, 27, 0.12);
}

/* ── Right-click context menu ─────────────────────────────────────────
   Plain absolutely-positioned DOM menu, appended into #fcCanvasWrap and
   positioned in scroll-aware coordinates so it stays put while panning.
   Built dynamically in JS (openContextMenu) for nodes, arrows, and the
   empty canvas alike. */

.fc-ctx-menu {
    position: absolute;
    z-index: 20;
    min-width: 168px;
    padding: 4px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.14);
}

.fc-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: var(--fc-text);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .fc-ctx-item:hover:not(:disabled) {
        background: #f4f4f5;
    }

    .fc-ctx-item:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.fc-ctx-item-danger {
    color: var(--fc-danger);
}

    .fc-ctx-item-danger:hover:not(:disabled) {
        background: var(--fc-danger-soft);
    }

.fc-ctx-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--fc-border);
}

.fc-ctx-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid var(--fc-border-strong);
    border-radius: 50%;
}

/* Reuses the toolbar's plain shape glyphs (.fc-shape-icon-*) inside the
   empty-canvas shape picker menu, so the same visual vocabulary shows up
   in both places. */
.fc-ctx-shape-icon {
    flex: 0 0 auto;
}

/* ── Side panel (Style / Text / Arrange) ────────────────────────────── */

.fc-side-panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    width: 260px;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    background: var(--fc-surface);
    overflow: hidden;
}

.fc-side-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--fc-border);
}

.fc-side-tab {
    flex: 1;
    padding: 10px 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fc-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

    .fc-side-tab:hover {
        color: var(--fc-text);
    }

.fc-side-tab-active {
    color: var(--fc-accent-hover);
    border-bottom-color: var(--fc-accent);
}

.fc-side-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    padding: 14px 12px;
    overflow-y: auto;
}

.fc-side-empty {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fc-text-muted);
}

.fc-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-field-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-text-muted);
}

.fc-field-group {
    display: flex;
    gap: 8px;
}

    .fc-field-group .fc-field-row {
        flex: 1;
        min-width: 0;
    }

    .fc-field-group .fc-btn-panel {
        flex: 1;
    }

/* Native color input, restyled into a small square swatch button. */
.fc-color-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    padding: 0;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

    .fc-color-input::-webkit-color-swatch-wrapper {
        padding: 3px;
    }

    .fc-color-input::-webkit-color-swatch {
        border: none;
        border-radius: 6px;
    }

    .fc-color-input::-moz-color-swatch {
        border: none;
        border-radius: 6px;
    }

.fc-swatch-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.fc-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--fc-border-strong);
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

    .fc-swatch:hover {
        transform: scale(1.08);
    }

.fc-swatch-none {
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--fc-danger) calc(50% - 1px), var(--fc-danger) calc(50% + 1px), transparent calc(50% + 1px));
}

.fc-swatch-active {
    border-color: var(--fc-accent);
    box-shadow: 0 0 0 2px var(--fc-accent-soft);
}

.fc-number-input,
.fc-text-input {
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--fc-text);
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
}

    .fc-number-input:focus,
    .fc-text-input:focus {
        outline: 2px solid var(--fc-accent);
        outline-offset: -1px;
    }

.fc-range-input {
    width: 100%;
    accent-color: var(--fc-accent);
}

.fc-toggle-group {
    display: flex;
    gap: 6px;
}

.fc-toggle-btn {
    flex: 1;
    padding: 7px 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-text);
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    cursor: pointer;
}

    .fc-toggle-btn:hover {
        background: #f4f4f5;
    }

.fc-toggle-btn-active {
    color: var(--fc-accent-hover);
    background: var(--fc-accent-soft);
    border-color: var(--fc-accent);
}

.fc-btn-panel {
    width: 100%;
    justify-content: center;
    border-color: var(--fc-border);
}