/* ══════════════════════════════════════════════════════════════════
   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-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;
}
/* ── 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;
}
/* ── Card / table wrapper ───────────────────────────────────── */
.adm-card {
    background: #fff;
    border: 1px solid var(--border);
}

.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);
    }

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

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

.adm-td-mono {
    font-size: 12px;
    color: var(--text-muted);
}
/* ── 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;
}

.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;
}

.adm-badge-solid-green {
    background: var(--mirar-green);
    color: #fff;
}
/* ── 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-dark {
    background: var(--mirar-navy-deep);
    color: #fff;
}

    .adm-btn-dark:hover {
        background: #222;
        color: #fff;
    }

.adm-btn-ghost {
    background: #fef2f2;
    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);
    }

.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);
        }
/* ── Alerts / banners ───────────────────────────────────────── */
.adm-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    font-size: 13px;
    margin-bottom: 20px;
    border-left: 3px solid transparent;
}

.adm-alert-success {
    background: #f0fdf4;
    border-left-color: var(--mirar-green);
    color: #166534;
}

.adm-alert-error {
    background: #fef2f2;
    border-left-color: var(--mirar-red);
    color: #991b1b;
}

.adm-alert-warn {
    background: #fffbeb;
    border-left-color: #d97706;
    color: #92400e;
}

.adm-alert-confirm {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid var(--mirar-red);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.adm-alert-confirm-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-dark);
}
/* ── Divider ────────────────────────────────────────────────── */
.adm-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}
/* ── 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);
}
/* shift table left when panel is open */
.reg-table-shifted {
    margin-right: 416px;
    transition: margin-right .2s cubic-bezier(.4,0,.2,1);
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .adm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

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

    .adm-topbar {
        padding: 0 18px;
    }

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

    .reg-panel {
        width: 100vw;
    }

    .reg-table-shifted {
        margin-right: 0;
    }
}

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

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

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

    .adm-search {
        width: 100%;
    }
}
/* ══════════════════════════════════════════════════════════════
   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);
}

.ce-example {
    font-size: 11.5px;
    font-family: monospace;
    color: var(--text-muted);
    background: #f8f7f4;
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin-bottom: 10px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
/* ── Focus outline ────────────────────────────────────────── */
* {
    outline: none !important;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tc-card {
        /* hide CTA column — move to full row below */
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 16px;
        padding: 18px 16px;
    }

    .tc-card-cta {
        grid-column: 1 / -1;
        padding-left: 76px; /* align with body text */
    }

    .tc-badge-cat {
        display: none; /* too long on mobile — remove to save space */
    }
}

@keyframes mbr-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .svt-form {
        grid-template-columns: 1fr;
    }
}
/* ==================================================================
   Auto-migrated inline styles (previously style="..." attributes)
   ================================================================== */
.adm-il-d-flex-ai-center-jc-center-mh-40vh {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.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-fs-12px-c-text-muted-ff-font-sans {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.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;
}

.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-16px {
    margin-top: 16px;
}

.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 {
    background: var(--mirar-white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--mirar-red);
    padding: 28px;
    margin-bottom: 28px;
}

.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) {
    .tc-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-select {
        width: 100%;
    }

    .tc-card-cta {
        padding-left: 0;
    }

    .tc-card-details {
        gap: 3px 10px;
    }

    .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: My Certificates  (MemberCertificates.razor)
   Uses an "mcert-" prefix (instead of "cert-") so this member-portal
   certificate preview/print design never collides with the admin
   certificates page's own "cert-*" classes in admin.css, regardless of
   which stylesheet happens to load/cascade last on a given page.
   ====================================================================== */

/* ==================== From MemberCertificates.razor <style> block ==================== */
/* ── Print overlay / cert design (member-portal copy) ── */
.mcert-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 .mcert-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. */
.mcert-print-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 16px 20px;
}

.mcert-page {
    width: 1000px;
    max-width: 95vw;
    min-height: 700px;
    height: auto;
    background: #fdf9ec;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.mcert-border {
    position: relative;
    flex: 1;
    margin: 14px;
    border: 3px solid #b08d3e;
    padding: 36px 48px;
    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: #fdf9ec;
}

.mcert-inner-line {
    position: absolute;
    inset: 6px;
    border: 1px solid #1a2340;
    pointer-events: none;
    z-index: 1;
}

.mcert-bg-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45' viewBox='0 0 50 45'%3E%3Cpolyline points='4,40 25,7 46,40' fill='none' stroke='%23b08d3e' stroke-width='1.6'/%3E%3Cpolyline points='11,34 25,14 39,34' fill='none' stroke='%23b08d3e' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 30px 27px;
}

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

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

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

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

.mcert-brand-logo {
    height: 92px;
    width: auto;
    object-fit: contain;
}

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

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

.mcert-recipient {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 28pt;
    font-weight: 700;
    color: #1a2340;
    margin: 4px 0 10px;
}

.mcert-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 10px;
    max-width: 85%;
}

.mcert-divider-line {
    flex: 0 0 90px;
    height: 1.5px;
    background: #b08d3e;
}

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

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

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

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

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

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

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

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

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

.mcert-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;
}

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

.mcert-qr-block {
    text-align: center;
}

.mcert-qr-img {
    width: 104px;
    height: 104px;
}

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

.mcert-seal {
    width: 158px;
}

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

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

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

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

    .mcert-page {
        width: 100vw !important;
        height: auto !important;
        min-height: 100vh !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;
    }

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

    .mcert-border {
        /* Let flexbox distribute height calculations naturally on print */
        height: auto !important;
        flex: 1 !important;
    }
    /* Force backgrounds to render */
    .mcert-border, .mcert-bg-pattern, .mcert-inner-line, .mcert-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-mh-40vh-d-flex-ai-center-jc-center {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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-w-48px {
    width: 48px;
}

.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(3, 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;
}

.adm-il-d-grid-grid-repeat-auto-fi-gap-20px-mb-20px {
    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;
}

.adm-il-p-4px-0 {
    padding: 4px 0;
}

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

.adm-il-fs-18px-fsh-0-mt-1px {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.adm-il-flex-1-minw-0 {
    flex: 1;
    min-width: 0;
}

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

.adm-il-fs-12px-c-text-muted-ws-nowrap-ov-hidden {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-il-fs-11px-c-text-muted-ws-nowrap-fsh-0 {
    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-mh-60vh-d-flex-ai-center-jc-center {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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;
}

.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;
    }

.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);
}

/* ======================================================================
   12. PAGE: Survey Test  (AdminSurveyTest.razor)
   ====================================================================== */

/* ==================== From AdminSurveyTest.razor <style> block ==================== */
.svt-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.svt-meta-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}

.svt-meta-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    width: 100px;
    flex-shrink: 0;
}

.svt-meta-val {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-dark);
    word-break: break-all;
}

.svt-ua {
    font-size: 11px;
    color: var(--text-muted);
}

.svt-ok {
    color: #1B7A69;
    font-weight: 700;
}

.svt-warn {
    color: #C4682A;
    font-weight: 700;
}

.svt-hint {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    color: #C4682A;
}

.svt-header-dump {
    margin-top: 10px;
    background: #f7f7fb;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.7;
    max-height: 280px;
    overflow-y: auto;
}

.svt-hdr-key {
    color: #1B7A69;
    font-weight: 700;
}

.svt-hdr-sep {
    color: var(--text-muted);
}

.svt-hdr-val {
    color: var(--text-dark);
    word-break: break-all;
}

.svt-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.svt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.svt-input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
}

    .svt-input:focus {
        border-color: #1B7A69;
        background: #fff;
    }

.svt-stage-sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.svt-stage-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svt-stage-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    width: 130px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.svt-stage-val {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mirar-navy);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

.svt-result {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
}

.svt-result-ok {
    background: #e4f2ee;
    color: #0f4f43;
}

.svt-result-err {
    background: #f5ede8;
    color: #8b3a10;
}

.svt-checklist {
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.8;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .svt-checklist code {
        font-size: 11px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 1px 5px;
        font-family: monospace;
    }

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

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

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

.adm-il-fs-11px-fw-700-c-text-muted-cur-pointer {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: .05em;
    text-transform: uppercase;
}

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

.adm-il-d-flex-ai-center-gap-12px-mt-4px {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

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

.adm-il-fs-1-1rem-fw-800-c-mirar-navy {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mirar-navy);
}

.adm-il-mt-20px-d-flex-ai-center-gap-14px {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.adm-il-p-20px-24px {
    padding: 20px 24px;
}

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

/* ======================================================================
   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);
}