/* Dolph Admin — professional dashboard shell */
.admin.admin-app {
    --admin-sidebar-w: 260px;
    --admin-topbar-h: 64px;
    min-height: 100vh;
    background: #0a0a0a;
}

.admin.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 55%), #0a0a0a;
}

/* Legacy bootstrap shell hidden when using grid */
.admin.admin-app > .navbar.sticky-top,
.admin.admin-app > .container-fluid {
    display: none !important;
}

.admin-app-grid {
    display: grid;
    grid-template-columns: var(--admin-sidebar-w) 1fr;
    grid-template-rows: var(--admin-topbar-h) 1fr;
    min-height: 100vh;
}

/* Sidebar */
.admin-sidebar {
    grid-row: 1 / -1;
    grid-column: 1;
    background: #0d0d0d;
    border-right: 1px solid var(--dolph-panel-border, #2a2a2a);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1040;
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 1.25rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--dolph-panel-border, #2a2a2a);
}

.admin-sidebar-brand img {
    height: 32px;
    width: auto;
}

.admin-sidebar-brand span {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.admin-sidebar-brand small {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dolph-accent, #d4af37);
    margin-top: 0.15rem;
}

.admin-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.65rem 1rem;
}

.admin-nav-section {
    margin-bottom: 1.25rem;
}

.admin-nav-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.35rem 0.75rem 0.5rem;
    margin: 0;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.2rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
}

.admin-nav-link svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.admin-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.admin-nav-link.active {
    color: var(--dolph-accent, #d4af37);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.25);
}

.admin-nav-link.active svg {
    opacity: 1;
    stroke: var(--dolph-accent, #d4af37);
}

.admin-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--dolph-panel-border, #2a2a2a);
}

.admin-sidebar-footer .admin-nav-link--logout {
    color: #ef5350;
}

.admin-sidebar-footer .admin-nav-link--logout:hover {
    background: rgba(239, 83, 80, 0.1);
    color: #ff6b6b;
}

/* Topbar */
.admin-topbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    background: rgba(13, 13, 13, 0.95);
    border-bottom: 1px solid var(--dolph-panel-border, #2a2a2a);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.admin-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-page-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--dolph-text-muted, rgba(255, 255, 255, 0.55));
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-user-chip {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.35rem 0.75rem;
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 999px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-menu-toggle {
    display: none;
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    color: #fff;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
}

/* Main content */
.admin-main {
    grid-column: 2;
    grid-row: 2;
    padding: 1.5rem 1.5rem 2.5rem;
    min-width: 0;
    overflow-x: auto;
}

.admin-main .loadable-content.loaded .loading {
    display: none;
}

.admin-main .loadable-content .loading {
    padding: 4rem 1rem;
}

.admin-main .loadable-content.loaded .main-content,
.admin-main .admin-page-inner {
    display: block;
}

/* Panels & cards */
.admin-panel {
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-top: 2px solid var(--dolph-accent, #d4af37);
    border-radius: 12px;
    padding: 1.4rem;
    margin-bottom: 1.4rem;
}

.admin-panel-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dolph-text-muted, rgba(255, 255, 255, 0.55));
    margin: 0 0 1rem;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-stat-card {
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    transition: border-color 0.15s;
}

.admin-stat-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

.admin-stat-card h6 {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dolph-text-muted, rgba(255, 255, 255, 0.55));
}

.admin-stat-card .stat-value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dolph-accent, #d4af37);
    line-height: 1.2;
}

/* Filters */
.admin-filters-toggle {
    width: 100%;
    margin-bottom: 1rem;
    background: transparent;
    border: 1px dashed var(--dolph-panel-border, #2a2a2a);
    color: rgba(255, 255, 255, 0.75);
    padding: 0.65rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-filters-toggle:hover {
    border-color: var(--dolph-accent, #d4af37);
    color: var(--dolph-accent, #d4af37);
}

.admin-filters-panel {
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-filters-panel .input-group-text {
    min-width: 110px;
    justify-content: center;
    font-size: 0.75rem;
    text-transform: capitalize;
}

/* Profile panel */
.profile-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 700px) { .profile-cards { grid-template-columns: 1fr; } }
.profile-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px 20px; }
.profile-card h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.pf-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.pf-row:last-child { border-bottom: none; }
.pf-row .k { font-size: .75rem; color: rgba(255,255,255,.45); }
.pf-row .v { font-size: .8rem; color: #fff; max-width: 60%; text-align: right; word-break: break-all; }
.pf-section-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.35); margin: 20px 0 8px; }
.txn-pos { color: #4aec15; font-weight: 600; }
.txn-neg { color: #ff6b6b; font-weight: 600; }

/* Tables */
.admin-table-wrap {
    background: var(--dolph-panel, #121212);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 12px;
    /* overflow-x:auto (not hidden) so a table wider than its container scrolls
       instead of clipping — the CC table's Actions column got cut off on
       desktop once a 12th column was added; the horizontal-scroll rule below
       used to be mobile-only, which only masked the same problem on wide
       tables in general. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.admin-table-wrap::-webkit-scrollbar { height: 8px; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 8px; }
.admin-table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); }

.admin-table-wrap .table {
    margin-bottom: 0;
}

.admin-table-wrap thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dolph-text-muted, rgba(255, 255, 255, 0.55));
    border-bottom: 1px solid var(--dolph-panel-border, #2a2a2a);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.admin-table-wrap tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-color: #1a1a1a;
    font-size: 0.875rem;
}

.admin-table-wrap tbody tr {
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.1s;
}

.admin-table-wrap tbody tr:hover {
    background: rgba(212, 175, 55, 0.07);
}

.admin-table-wrap .btn {
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 3px 10px;
}

/* Badges */
.admin .badge-pending {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 6px;
}

.admin .badge-completed,
.admin .badge-success {
    background: rgba(212, 175, 55, 0.15);
    color: var(--dolph-accent, #d4af37);
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 6px;
}

.admin .badge-muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 6px;
}

/* Forms in admin */
.admin .form-control,
.admin .form-select {
    background: var(--dolph-input, #1a1a1a) !important;
    border-color: var(--dolph-panel-border, #2a2a2a) !important;
    color: #fff !important;
    border-radius: 8px;
}

.admin .form-control:focus,
.admin .form-select:focus {
    border-color: var(--dolph-accent, #d4af37) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15) !important;
}

/* Native <select> menus — match the dark theme, including the OPEN option list
   (the dropdown popup defaults to white otherwise). Covers admin + vendor pages
   (both use body.admin) and any plain <select> not using .form-select. */
.admin select {
    background: var(--dolph-input, #1a1a1a);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    color: #fff;
    border-radius: 8px;
}
.admin select:focus {
    border-color: var(--dolph-accent, #d4af37);
    outline: none;
}
.admin select option,
.admin select optgroup,
.admin .form-select option,
.admin .form-select optgroup {
    background-color: #1a1a1a;
    color: #fff;
}

.admin .input-group-text {
    background: #151515 !important;
    border-color: var(--dolph-panel-border, #2a2a2a) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.8rem;
}

.admin .bordered-box {
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 12px;
    background: var(--dolph-panel, #121212);
}

.admin .sales-badge {
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 12px;
    background: var(--dolph-panel, #121212) !important;
    padding: 1.25rem !important;
}

.admin #adminAlert {
    display: none;
    margin-bottom: 1rem;
}

.admin .btn-dolph-outline {
    border: 1px solid var(--dolph-accent, #d4af37) !important;
    color: var(--dolph-accent, #d4af37) !important;
    background: transparent !important;
    font-weight: 600;
    border-radius: 8px;
    font-size: 0.85rem;
}

.admin .btn-dolph-outline:hover {
    background: rgba(212, 175, 55, 0.12) !important;
}

/* Mobile sidebar */
@media (max-width: 991.98px) {
    .admin-app-grid {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--admin-sidebar-w);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }

    .admin-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1035;
    }

    .admin-sidebar-backdrop.show {
        display: block;
    }

    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-topbar,
    .admin-main {
        grid-column: 1;
    }
}

/* Phone polish for the admin chrome — drawer + topbar tidy-up. Scoped to
   phones only, so tablet/desktop are unchanged. */
@media (max-width: 575.98px) {
    /* Drawer leaves a visible backdrop strip instead of covering the screen. */
    .admin.admin-app { --admin-sidebar-w: min(82vw, 270px); }

    /* Declutter the topbar: tighter spacing, smaller title, drop the email chip. */
    .admin-topbar { padding: 0 .85rem; gap: .5rem; }
    .admin-page-title { font-size: 1.05rem; }
    .admin-topbar-actions { gap: .5rem; }
    .admin-user-chip { display: none; }

    /* Breathing room for page content. */
    .admin-main { padding: 1rem .85rem 2rem; }
}

/* Modals — override Bootstrap's --bs-modal-bg variable at the admin scope */
.admin {
    --bs-modal-bg: #111111;
    --bs-modal-border-color: #2a2a2a;
}

.admin .modal-content {
    background-color: #111111 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    color: #fff !important;
}

.admin .modal-header {
    background-color: #111111 !important;
    border-bottom-color: #2a2a2a !important;
    color: #fff !important;
}

.admin .modal-body {
    background-color: #111111 !important;
    border-radius: 0 !important;
    color: #fff !important;
}

.admin .modal-footer {
    background-color: #111111 !important;
    border-top-color: #2a2a2a !important;
    color: #fff !important;
}

.admin .modal-title {
    color: #fff !important;
}

.admin .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Variant rows inside modal */
.variant-row {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}

.variant-row:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

/* Form section heading inside modals */
.form-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #2a2a2a;
}

/* Stock count badge on variant Add Stock button */
.stock-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.18);
    color: #d4af37;
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 1px 6px;
    margin-left: 4px;
    font-weight: 700;
}

/* Storefront admin nav link */
.nav-link.admin-nav-link {
    color: var(--dolph-accent, #d4af37) !important;
    font-weight: 600;
}

.nav-link.admin-nav-link:hover {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   Dashboard analytics & global polish
   ═══════════════════════════════════════════════════════ */

/* Period segmented toggle */
.period-toggle {
    display: inline-flex;
    gap: 2px;
    background: #0d0d0d;
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
}
.period-toggle button {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.period-toggle button:hover { color: #fff; }
.period-toggle button.active {
    background: var(--dolph-accent, #d4af37);
    color: #1c0703;
}

/* Date-range picker (dashboard) */
.dr-wrap { position: relative; margin-bottom: 1.5rem; }
.dr-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    background: #0d0d0d; border: 1px solid var(--dolph-panel-border, #2a2a2a);
    color: #fff; font-size: 0.85rem; font-weight: 600;
    padding: 0.55rem 0.9rem; border-radius: 10px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dr-trigger:hover { border-color: var(--dolph-accent, #d4af37); }
.dr-trigger svg { color: rgba(255,255,255,0.6); flex: none; }
.dr-trigger .dr-caret { transition: transform 0.18s; }
.dr-wrap.open .dr-trigger .dr-caret { transform: rotate(180deg); }
.dr-wrap.open .dr-trigger { border-color: var(--dolph-accent, #d4af37); }
.dr-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
    display: flex; background: #111; border: 1px solid #262626;
    border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); overflow: hidden;
}
.dr-pop[hidden] { display: none; }
.dr-presets { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid #202020; min-width: 130px; }
.dr-presets button {
    text-align: left; border: none; background: transparent; color: rgba(255,255,255,0.65);
    font-size: 0.82rem; font-weight: 600; padding: 0.5rem 0.7rem; border-radius: 8px;
    cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s;
}
.dr-presets button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dr-presets button.active { background: rgba(212,175,55,0.18); color: #fff; }
.dr-cal { padding: 12px; width: 280px; }
.dr-fields { display: flex; gap: 8px; margin-bottom: 10px; }
.dr-field {
    flex: 1; text-align: center; background: #0d0d0d; border: 1px solid #2a2a2a;
    border-radius: 8px; color: #fff; font-size: 0.78rem; font-weight: 600; padding: 7px 4px;
}
.dr-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dr-month { color: #fff; font-weight: 700; font-size: 0.9rem; }
.dr-nav {
    border: none; background: transparent; color: rgba(255,255,255,0.6); font-size: 1.2rem;
    line-height: 1; width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
}
.dr-nav:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-dow { text-align: center; color: rgba(255,255,255,0.35); font-size: 0.64rem; font-weight: 700; padding: 4px 0; text-transform: uppercase; }
.dr-day {
    border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 0.78rem;
    height: 32px; border-radius: 8px; cursor: pointer; transition: background 0.1s, color 0.1s;
}
.dr-day:hover { background: rgba(255,255,255,0.08); }
.dr-day.muted { color: rgba(255,255,255,0.22); }
.dr-day.in-range { background: rgba(212,175,55,0.22); border-radius: 0; color: #fff; }
.dr-day.edge { background: var(--dolph-accent, #d4af37); color: #fff; font-weight: 700; }
.dr-day.edge.start { border-radius: 8px 0 0 8px; }
.dr-day.edge.end { border-radius: 0 8px 8px 0; }
.dr-day.edge.start.end { border-radius: 8px; }
.dr-day.disabled { color: rgba(255,255,255,0.15); cursor: default; }
.dr-day.disabled:hover { background: transparent; }
@media (max-width: 560px) {
    .dr-pop { flex-direction: column; left: 0; right: 0; }
    .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #202020; }
    .dr-cal { width: auto; }
}

/* KPI cards */
.kpi-card { display: flex; flex-direction: column; gap: 0.5rem; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(212, 175, 55, 0.12); font-size: 1rem;
}
.kpi-delta {
    font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    letter-spacing: 0.02em;
}
.kpi-delta.up { background: rgba(129, 199, 132, 0.15); color: #4aec15; }
.kpi-delta.down { background: rgba(255, 82, 82, 0.15); color: #ff5252; }
.kpi-delta.flat { background: rgba(255, 255, 255, 0.08); color: rgba(255,255,255,.55); }

/* Customer insight widgets */
.admin-widget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.4rem;
}
@media (max-width: 767.98px) { .admin-widget-grid { grid-template-columns: 1fr; } }

.widget-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.5rem; border-radius: 8px;
    text-decoration: none; color: #fff;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.12s;
}
.widget-row:last-child { border-bottom: none; }
.widget-row:hover { background: rgba(212, 175, 55, 0.07); }
.widget-rank { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,.4); width: 26px; }
.widget-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(212, 175, 55, 0.18); color: var(--dolph-accent, #d4af37);
    font-size: 0.72rem; font-weight: 800;
}
.widget-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.widget-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-sub { font-size: 0.72rem; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-amount { font-size: 0.9rem; font-weight: 700; color: var(--dolph-accent, #d4af37); white-space: nowrap; }
.widget-amount.widget-date { color: rgba(255,255,255,.5); font-weight: 500; font-size: 0.78rem; }

/* Smoother global buttons */
.admin .btn-dolph-primary {
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.admin .btn-dolph-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
}
.admin .btn-dolph-primary:active { transform: translateY(0); }
.admin .btn { transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s; }

/* Smoother sidebar nav */
.admin-nav-link { position: relative; }
.admin-nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    transform: translateX(2px);
}

/* Sticky table headers within scroll areas */
.admin-table-wrap thead th { position: sticky; top: 0; z-index: 1; }

/* ═══════════════════════════════════════════════════════
   Professional refresh — icons, depth, typography
   ═══════════════════════════════════════════════════════ */

/* KPI icon chips render an inline SVG; tone variants tint per metric */
.kpi-icon svg { width: 20px; height: 20px; display: block; }
.kpi-icon { color: var(--dolph-accent, #d4af37); }
.kpi-icon--teal  { background: rgba(212,175,55,.14);  color: #d4af37; }
.kpi-icon--blue  { background: rgba(154,37,16,.16);  color: #b8942e; }
.kpi-icon--green { background: rgba(129,199,132,.16); color: #4aec15; }
.kpi-icon--amber { background: rgba(255,176,7,.15);   color: #ffb007; }

/* Softer card depth + smoother hover */
.admin-stat-card {
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.admin-stat-card .stat-value { font-size: 1.65rem; letter-spacing: -0.01em; }
.admin-stat-card h6 { color: rgba(255,255,255,.5); }

/* Panels: subtle depth + accent tick on titles */
.admin-panel { box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.admin-panel-title { display: flex; align-items: center; gap: .55rem; }
.admin-panel-title::before {
    content: ""; width: 3px; height: 13px; border-radius: 2px;
    background: var(--dolph-accent, #d4af37); display: inline-block;
}

/* Topbar refinement */
.admin-topbar { box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.admin-page-title { letter-spacing: -0.01em; }
.admin-user-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.05); border: 1px solid var(--dolph-panel-border,#2a2a2a);
    color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600;
    padding: .35rem .75rem; border-radius: 20px;
}

/* Sidebar active link → pill with left accent bar */
.admin-nav-link.active { position: relative; font-weight: 600; }
.admin-nav-link.active::before {
    content: ""; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 2px; background: var(--dolph-accent,#d4af37);
}
.admin-nav-section-title { letter-spacing: .14em; }

/* Buttons: consistent, smooth, with focus ring */
.admin .btn-dolph-primary {
    background: var(--dolph-accent,#d4af37) !important;
    border: 1px solid var(--dolph-accent,#d4af37) !important;
    color: #1c0703 !important; font-weight: 700; border-radius: 8px;
}
.admin .btn-dolph-primary:focus-visible,
.admin .btn-dolph-outline:focus-visible,
.admin .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,175,55,.3); }
.admin .btn-sm { border-radius: 7px; }

/* Tables: zebra striping + crisper rows */
.admin-table-wrap tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.admin-table-wrap tbody tr { transition: background .12s; }

/* Chart panel breathing room */
#revenueChart { width: 100% !important; }

/* Scrollbars (admin only) */
.admin-main ::-webkit-scrollbar { width: 8px; height: 8px; }
.admin-main ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
.admin-main ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ═══════════════════════════════════════════════════════
   Professional button system + animations (admin scope)
   ═══════════════════════════════════════════════════════ */

/* Base: every admin button gets consistent shape + smooth motion */
.admin .btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease,
                border-color .15s ease, color .15s ease, opacity .15s ease;
    will-change: transform;
}
.admin .btn:hover { transform: translateY(-1px); }
.admin .btn:active { transform: translateY(0) scale(.985); }
.admin .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,175,55,.32); }
.admin .btn:disabled, .admin .btn.disabled { opacity: .5; transform: none !important; box-shadow: none !important; cursor: not-allowed; }
.admin .btn-sm { border-radius: 7px; }

/* Branded solid variants */
.admin .btn-success {
    background: linear-gradient(180deg,#4aec15,#38c010) !important;
    border: none !important; color: #04241a !important;
}
.admin .btn-success:hover { box-shadow: 0 6px 16px rgba(35,168,119,.32); }

.admin .btn-danger {
    background: linear-gradient(180deg,#ff5a5a,#e23b3b) !important;
    border: none !important; color: #fff !important;
}
.admin .btn-danger:hover { box-shadow: 0 6px 16px rgba(226,59,59,.3); }

.admin .btn-info {
    background: linear-gradient(180deg,#d4af37,#d4af37) !important;
    border: none !important; color: #fff !important;
}
.admin .btn-info:hover { box-shadow: 0 6px 16px rgba(212,175,55,.35); }

.admin .btn-warning {
    background: linear-gradient(180deg,#ffc04d,#f0a814) !important;
    border: none !important; color: #2a1c00 !important;
}
.admin .btn-warning:hover { box-shadow: 0 6px 16px rgba(240,168,20,.3); }

.admin .btn-secondary {
    background: #1d1d1d !important;
    border: 1px solid var(--dolph-panel-border,#2a2a2a) !important;
    color: rgba(255,255,255,.8) !important;
}
.admin .btn-secondary:hover { background: #262626 !important; border-color: #3a3a3a !important; color: #fff !important; }

/* Outline variants — fill softly on hover */
.admin .btn-outline-info {
    border: 1px solid rgba(212,175,55,.5) !important; color: #f6d8d4 !important; background: transparent !important;
}
.admin .btn-outline-info:hover { background: rgba(212,175,55,.14) !important; border-color: #d4af37 !important; }

.admin .btn-outline-warning {
    border: 1px solid rgba(255,176,7,.5) !important; color: #ffb007 !important; background: transparent !important;
}
.admin .btn-outline-warning:hover { background: rgba(255,176,7,.14) !important; border-color: #ffb007 !important; }

.admin .btn-outline-danger {
    border: 1px solid rgba(255,82,82,.5) !important; color: #ff6b6b !important; background: transparent !important;
}
.admin .btn-outline-danger:hover { background: rgba(255,82,82,.14) !important; border-color: #ff6b6b !important; }

.admin .btn-outline-light,
.admin .btn-outline-secondary {
    border: 1px solid var(--dolph-panel-border,#2a2a2a) !important;
    color: rgba(255,255,255,.8) !important; background: transparent !important;
}
.admin .btn-outline-light:hover,
.admin .btn-outline-secondary:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; border-color: #3a3a3a !important; }

/* ── Keyframe animations ── */
@keyframes adminFadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes adminModalPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Modals pop in */
.admin .modal.show .modal-content { animation: adminModalPop .22s cubic-bezier(.2,.7,.3,1); }

/* Panels & stat cards ease in on load */
.admin-panel { animation: adminFadeInUp .3s ease both; }
.admin-stat-grid > * { animation: adminFadeInUp .3s ease both; }
.admin-stat-grid > *:nth-child(2) { animation-delay: .04s; }
.admin-stat-grid > *:nth-child(3) { animation-delay: .08s; }
.admin-stat-grid > *:nth-child(4) { animation-delay: .12s; }

/* Table rows fade in */
.admin-table-wrap tbody tr { animation: adminFadeInUp .25s ease both; }

@media (prefers-reduced-motion: reduce) {
    .admin .btn, .admin .modal.show .modal-content, .admin-panel,
    .admin-stat-grid > *, .admin-table-wrap tbody tr { animation: none !important; transition: none !important; }
}

/* ===== Dashboard v2: live indicator, chart layout, method legend, tickets ===== */
.live-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(74, 236, 21, 0.08); border: 1px solid rgba(74, 236, 21, 0.25);
    color: #4aec15; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
    padding: 4px 12px; border-radius: 20px;
}
.live-pill .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4aec15; animation: livePulse 1.6s infinite; }
.live-pill #liveUpdated { color: rgba(255,255,255,.4); font-weight: 600; letter-spacing: 0; text-transform: none; }
@keyframes livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,236,21,.4); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(74,236,21,0); } }

.panel-hint { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: none; letter-spacing: 0; margin-left: 8px; }

.dash-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .dash-charts { grid-template-columns: 1fr; } }

.method-legend { margin-top: .8rem; }
.method-legend .ml-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .78rem; color: rgba(255,255,255,.7); }
.method-legend .ml-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.method-legend .ml-name { flex: 1; text-transform: capitalize; }
.method-legend .ml-val { color: #fff; font-weight: 700; }

.ticket-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.05); text-decoration: none; border-radius: 6px; }
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: rgba(212,175,55,.07); }
.ticket-badge { font-size: .62rem; font-weight: 800; padding: 2px 8px; border-radius: 12px; flex: none; }
.tb-new { background: rgba(255,176,7,.12); color: #ffb007; }
.tb-open { background: rgba(212,175,55,.14); color: #f6d8d4; }
.ticket-main { flex: 1; min-width: 0; }
.ticket-issue { display: block; color: #fff; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-sub { display: block; color: rgba(255,255,255,.4); font-size: .7rem; }
.ticket-age { color: rgba(255,255,255,.35); font-size: .7rem; flex: none; }

/* ── Mobile: admin tables keep the PC layout but scroll horizontally ─────────
   The scroll container itself is set up above (desktop needs it too, now that
   some tables have enough columns to overflow there as well); this just forces
   a sensible minimum width + no wrapping so mobile scrolls a real table
   instead of squashing columns unreadably. */
@media (max-width: 767.98px) {
    .admin-table-wrap .table { min-width: 720px; }
    .admin-table-wrap .table th, .admin-table-wrap .table td { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════
   Unified form controls (admin scope) — modern, consistent
   ═══════════════════════════════════════════════════════ */

/* Inputs / selects / textareas: consistent dark fields + accent focus ring */
.admin .form-control,
.admin .form-select,
.admin textarea.form-control,
.admin input[type="text"]:not(.cx-net-pill),
.admin input[type="number"],
.admin input[type="email"],
.admin input[type="password"],
.admin input[type="search"],
.admin input[type="date"] {
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin .form-control:focus,
.admin .form-select:focus,
.admin .form-control:focus-visible {
    border-color: var(--dolph-accent, #d4af37) !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,.18) !important;
    outline: none;
}
.admin .form-select { cursor: pointer; }

/* Native checkboxes / radios → teal accent (covers bare inputs on every page) */
.admin input[type="checkbox"],
.admin input[type="radio"] {
    accent-color: var(--dolph-accent, #d4af37);
    cursor: pointer;
}
/* Bootstrap form-check controls: teal when checked + accent focus ring */
.admin .form-check-input { cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.admin .form-check-input:checked {
    background-color: var(--dolph-accent, #d4af37);
    border-color: var(--dolph-accent, #d4af37);
}
.admin .form-check-input:focus { border-color: var(--dolph-accent,#d4af37); box-shadow: 0 0 0 3px rgba(212,175,55,.22); }

/* Switch layout fix. main.css reworked .form-check into a flex/row-reverse
   (label-first) layout, but .form-switch .form-check-input still carries stock
   Bootstrap's margin-left:-2.5em — which only made sense with Bootstrap's
   original display:block + float:left. In a flex container the float is ignored
   while that negative margin still applies, dragging the switch on top of the
   end of its own label. Neutralise the offsets and let flex + gap space them.
   Applies to every admin page (Notifications, Coupons, ...). */
.admin .form-check.form-switch { padding-left: 0; gap: .6rem; }
.admin .form-check.form-switch .form-check-input { margin-left: 0; float: none; flex: 0 0 auto; }

/* Shared iOS-style toggle so every page (not just payments/vouches) matches */
.admin .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.admin .switch input { opacity: 0; width: 0; height: 0; }
.admin .switch .slider { position: absolute; cursor: pointer; inset: 0; background: #3a3a3a; border-radius: 26px; transition: .2s; }
.admin .switch .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.admin .switch input:checked + .slider { background: var(--dolph-accent, #d4af37); }
.admin .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(212,175,55,.3); }
.admin .switch input:checked + .slider:before { transform: translateX(20px); }

/* ═══════════════════════════════════════════════════════
   Sidebar: quick search + collapsible sections
   ═══════════════════════════════════════════════════════ */
.admin-nav-search { padding: 0 .35rem .6rem; }
.admin-nav-search input {
    width: 100%; background: #141414; border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 8px; color: #fff; font-size: .82rem; padding: .5rem .7rem; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.admin-nav-search input::placeholder { color: rgba(255,255,255,.35); }
.admin-nav-search input:focus { border-color: var(--dolph-accent,#d4af37); box-shadow: 0 0 0 3px rgba(212,175,55,.16); }

/* Section header becomes a clickable collapse toggle (was a <p>) */
.admin-nav-section-title {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
}
.admin-nav-section-title:hover { color: rgba(255,255,255,.6); }
.admin-nav-caret { transition: transform .2s ease; opacity: .5; flex-shrink: 0; }
.admin-nav-section.collapsed .admin-nav-caret { transform: rotate(-90deg); }
.admin-nav-section-items { overflow: hidden; }
.admin-nav-section.collapsed .admin-nav-section-items { display: none; }
.admin-nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Search "no result" hidden state */
.admin-nav-link.nav-hidden, .admin-nav-section.nav-hidden { display: none; }

/* Backdrop fade for the mobile drawer */
@media (max-width: 991.98px) {
    .admin-sidebar-backdrop { display: block; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
    .admin-sidebar-backdrop.show { opacity: 1; visibility: visible; }
}

/* ═══════════════════════════════════════════════════════
   KPI sparklines (dashboard) — tiny inline SVG trend
   ═══════════════════════════════════════════════════════ */
.kpi-spark { margin-top: .55rem; }
.kpi-spark svg { display: block; width: 100%; height: 32px; overflow: visible; }
.kpi-spark .spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark .spark-area { opacity: .14; stroke: none; }
@media (prefers-reduced-motion: no-preference) {
    .kpi-spark .spark-line { stroke-dasharray: 240; stroke-dashoffset: 240; animation: sparkDraw .9s ease forwards .1s; }
}
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* ═══════════════════════════════════════════════════════
   Shared detail-modal components (Orders + Support)
   ═══════════════════════════════════════════════════════ */

/* Bootstrap 5 defaults <code> to hot-pink (--bs-code-color:#d63384); inside the
   dark admin that's near-unreadable. Neutralise to a light monospace. */
.admin code { color: #e6e6e6; background: transparent; }

/* Identity header: primary id + sub-line + kebab, top of a detail modal */
.mdl-idbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mdl-idbar .mdl-id-main { min-width: 0; }
.mdl-id-num { font-family: monospace; font-size: 1rem; font-weight: 700; color: #fff; word-break: break-all; }
.mdl-id-sub { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: 2px; }

/* Primary action zone — one clear call to action above the fold */
.mdl-primary { margin-bottom: 14px; }
.mdl-primary .btn { width: 100%; }
.mdl-note {
    border-radius: 8px; padding: 10px 14px; font-size: .82rem; font-weight: 600; margin-bottom: 14px;
}
.mdl-note.ok { background: rgba(74,236,21,.1); border: 1px solid rgba(74,236,21,.3); color: #4aec15; }

/* Meta grid — label/value pairs, replaces the old inline-styled grid */
.mdl-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: #262626; border: 1px solid #262626; border-radius: 10px;
    overflow: hidden; margin-bottom: 16px;
}
@media (max-width: 520px) { .mdl-meta { grid-template-columns: 1fr; } }
.mdl-meta .mm-cell { background: #141414; padding: 9px 12px; min-width: 0; }
.mdl-meta .mm-cell.mm-wide { grid-column: 1 / -1; }
.mdl-meta .mm-k { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.mdl-meta .mm-v { font-size: .86rem; color: #fff; word-break: break-word; }
.mdl-meta .mm-v.mono { font-family: monospace; }
/* Same, for a monospaced run nested inside a cell (e.g. an address sitting
   beside its Copy button). */
.mdl-meta .mm-v .mono { font-family: monospace; }
.mdl-meta .mm-v.accent { color: #ffb007; font-family: monospace; }

/* Section heading inside a modal */
.mdl-section-h {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin: 0 0 8px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Item card + delivered stock rows */
.mdl-item { background: #141414; border: 1px solid #242424; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.mdl-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mdl-item-name { font-weight: 600; color: #fff; font-size: .9rem; }
.mdl-item-total { color: rgba(255,255,255,.7); font-size: .85rem; white-space: nowrap; }
.mdl-deliv { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mdl-deliv-row { display: flex; align-items: center; gap: 8px; }
.mdl-deliv-row code {
    flex: 1; min-width: 0; background: #0d0d0d; border: 1px solid #262626;
    padding: 6px 10px; border-radius: 6px; font-size: .78rem; color: #e6e6e6; word-break: break-all;
}
.mdl-deliv-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mdl-deliv-edit { display: flex; gap: 6px; margin-top: 2px; }
.mdl-deliv-edit input {
    flex: 1; background: #0d0d0d; border: 1px solid var(--dolph-accent,#d4af37);
    border-radius: 6px; color: #fff; font-size: .78rem; font-family: monospace; padding: 6px 10px; outline: none;
}

/* Kebab (⋯) trigger */
.mdl-kebab {
    background: transparent; border: 1px solid #2a2a2a; color: rgba(255,255,255,.7);
    border-radius: 7px; width: 30px; height: 28px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1; transition: background .15s, color .15s, border-color .15s;
}
.mdl-kebab:hover { background: rgba(255,255,255,.06); color: #fff; border-color: #3a3a3a; }

/* Kebab popover — appended to <body>, position:fixed so it escapes the modal's
   overflow:hidden clipping (Bootstrap 5.1.3 dropdowns clip in scrollable modals). */
.mdl-menu {
    position: fixed; z-index: 20500; min-width: 190px;
    background: #191919; border: 1px solid #2f2f2f; border-radius: 10px; padding: 5px;
    box-shadow: 0 12px 34px rgba(0,0,0,.55); animation: adminModalPop .14s ease both;
}
.mdl-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: none; color: rgba(255,255,255,.85);
    font-size: .82rem; font-weight: 500; text-align: left; padding: 8px 10px;
    border-radius: 7px; cursor: pointer;
}
.mdl-menu button:hover { background: rgba(255,255,255,.06); color: #fff; }
.mdl-menu button.warn { color: #ffb007; }
.mdl-menu button.warn:hover { background: rgba(255,176,7,.12); }
.mdl-menu button.danger { color: #ff6b6b; }
.mdl-menu button.danger:hover { background: rgba(255,82,82,.12); }
.mdl-menu .mdl-menu-sep { height: 1px; background: #2a2a2a; margin: 4px 2px; }

/* Support: align reply bubbles (admin right, customer left) */
.reply-msg { max-width: 84%; }
.reply-msg.from-admin { margin-left: auto; }
.reply-msg.from-user { margin-right: auto; }

/* Active/archived switcher above a list. Generalised from the support page's
   .support-toolbar so other list pages can reuse it. */
.admin-view-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-view-toolbar .view-label {
    font-size: .8rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
}
.admin-view-toolbar > button { margin-left: auto; }

/* "View by" rows-per-page control, sits under the table beside pagination */
.admin-pagesize {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.45);
    text-transform: uppercase; letter-spacing: .06em; margin: 0;
}
.admin-pagesize select { width: auto; min-width: 72px; }
/* "View by" sits left, pagination stays centred in the row. The equal 1fr
   columns on either side of the auto column keep the pagination centred on the
   panel regardless of how wide the selector is. */
.admin-pagefoot {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 1rem; margin-top: 1rem;
}
.admin-pagefoot > #pageSizeContainer { justify-self: start; }
.admin-pagefoot > nav { justify-self: center; margin: 0 !important; }
.admin-pagefoot .pagination { margin: 0 !important; }

@media (max-width: 575.98px) {
    .admin-pagefoot { grid-template-columns: 1fr; justify-items: center; }
    .admin-pagefoot > #pageSizeContainer { justify-self: center; }
}

/* Support: proof thumbnails that open the lightbox */
.proof-thumb {
    width: 74px; height: 74px; border-radius: 8px; object-fit: cover;
    border: 1px solid #2a2a2a; background: #0d0d0d; cursor: zoom-in;
    transition: border-color .15s, transform .15s;
}
.proof-thumb:hover { border-color: var(--dolph-accent,#d4af37); transform: scale(1.04); }