/*
 * Viki admin — the "Viki Admin v2" design direction, applied over Filament.
 *
 * ## Why a plain stylesheet and not a Filament theme
 *
 * A custom theme recompiles Filament's Tailwind, which means node in the
 * release. This file is registered with `FilamentAsset::register()` in
 * `AppServiceProvider` and published by `php artisan filament:assets`, a step
 * the deploy already runs for Filament's own bundle.
 *
 * The trade is honest: Filament's markup stays Filament's, so this follows the
 * design rather than reproducing it pixel for pixel. Everything the design
 * actually decides — the palette, the type, the radii, the density, the dark
 * theme — is a variable, and those are all here.
 *
 * ## Rules
 *
 * Filament's own colours come from its CSS custom properties, set from the
 * ramps in `AdminPanelProvider`. Do NOT restate them here; overriding
 * `--primary-600` in one file and `Color::Indigo` in another is how a hover
 * state ends up a different blue from the button it belongs to.
 *
 * What is here is what Filament has no option for: the shell's proportions,
 * the design's greys, and the handful of bespoke elements (the sidebar service
 * pill, the top-bar kitchen link, the dashboard stat cards).
 */

:root {
    --viki-page: #FAFBFD;
    --viki-panel: #fff;
    --viki-border: #E4E6EB;
    --viki-subtle: #F3F4F7;
    --viki-t1: #353841;
    --viki-t2: #616778;
    --viki-t3: #94A3B8;
    --viki-radius-card: 12px;
    --viki-radius-control: 8px;
}

.dark {
    --viki-page: #0F172A;
    --viki-panel: #1E293B;
    --viki-border: rgba(255, 255, 255, .09);
    --viki-subtle: rgba(255, 255, 255, .05);
    --viki-t1: #F1F5F9;
    --viki-t2: #94A3B8;
    --viki-t3: #64748B;
}

/* ------------------------------------------------------------------ *
 * Shell
 * ------------------------------------------------------------------ */

.fi-body {
    background: var(--viki-page);
}

.fi-topbar > nav,
.fi-sidebar {
    background: var(--viki-panel);
}

.fi-topbar > nav {
    height: 60px;
    border-bottom: 1px solid var(--viki-border);
    box-shadow: none;
}

.fi-sidebar {
    border-right: 1px solid var(--viki-border);
}

.fi-sidebar-header {
    height: 60px;
    border-bottom: 1px solid var(--viki-border);
    background: var(--viki-panel);
    box-shadow: none;
}

/* The group label: a micro-caps rule, not a heading competing with the items. */
.fi-sidebar-group-label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--viki-t3);
}

.fi-sidebar-item-button {
    border-radius: var(--viki-radius-control);
    font-size: .8125rem;
    padding-block: .5rem;
}

/*
 * The active item gets a left rule as well as a tint. The tint alone is easy
 * to lose against a white sidebar at a glance from across the counter, which
 * is the distance this is read from.
 */
.fi-sidebar-item-active .fi-sidebar-item-button {
    box-shadow: inset 3px 0 0 var(--viki-active, var(--primary-600));
    font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Page header
 * ------------------------------------------------------------------ */

.fi-header-heading {
    font-size: 1.25rem;
    letter-spacing: -.015em;
}

.fi-header-subheading {
    font-size: .75rem;
    color: var(--viki-t2);
}

/* ------------------------------------------------------------------ *
 * Panels, tables, controls
 * ------------------------------------------------------------------ */

/*
 * The record-list tabs ("Needs attention / Today / Cancelled / All").
 *
 * `.fi-tabs` is a shrink-to-fit flex row, and with the content width set to
 * Full its parent centres it — so the filter somebody reaches for first sat in
 * the middle of a wide screen, a long way from the heading it belongs to and
 * from the table it filters. An auto end-margin puts it back on the left
 * whatever the parent is doing.
 */
.fi-tabs {
    margin-inline-end: auto;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--viki-radius-card);
    border: 1px solid var(--viki-border);
    background: var(--viki-panel);
    box-shadow: none;
}

.fi-ta-header-cell {
    background: var(--viki-subtle);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--viki-t2);
}

.fi-ta-row:nth-child(even) {
    background: color-mix(in srgb, var(--viki-subtle) 55%, transparent);
}

.fi-btn,
.fi-input-wrp,
.fi-dropdown-panel {
    border-radius: var(--viki-radius-control);
}

.fi-badge {
    font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * The top bar's middle group: kitchen link + theme switch
 * ------------------------------------------------------------------ */

.viki-topbar-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Who is signed in, beside the avatar. */
.viki-identity {
    display: none;
    text-align: right;
    line-height: 1.25;
    margin-inline-end: -.125rem;
}

@media (min-width: 768px) {
    .viki-identity { display: block; }
}

.viki-identity-name {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--viki-t1);
    white-space: nowrap;
}

.viki-identity-role {
    display: block;
    font-size: .625rem;
    color: var(--viki-t2);
}

/* ------------------------------------------------------------------ *
 * The kitchen link in the top bar
 * ------------------------------------------------------------------ */

.viki-topbar-kitchen {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .5rem .8125rem;
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-control);
    font-size: .75rem;
    font-weight: 700;
    color: var(--viki-t1);
    white-space: nowrap;
    text-decoration: none;
}

.viki-topbar-kitchen:hover {
    background: var(--viki-subtle);
}

.viki-topbar-kitchen svg {
    width: 15px;
    height: 15px;
    color: var(--warning-600);
}

@media (max-width: 640px) {
    /* The icon still reaches the page; the words are what will not fit. */
    .viki-topbar-kitchen span {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * The service pill at the foot of the sidebar
 * ------------------------------------------------------------------ */

.viki-service {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem .875rem;
    padding: .4375rem .5625rem;
    border-radius: var(--viki-radius-control);
    background: var(--viki-subtle);
}

.viki-service-icon {
    display: flex;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--success-600);
}

.viki-service[data-open="0"] .viki-service-icon {
    color: var(--viki-t3);
}

.viki-service-text {
    min-width: 0;
}

.viki-service-title {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--viki-t1);
}

.viki-service-detail {
    display: block;
    font-size: .625rem;
    color: var(--viki-t2);
}

/* Collapsed sidebar: the pill would be a slab of colour with no words in it. */
.fi-sidebar-nav-collapsed .viki-service-text,
.fi-sidebar-collapsed .viki-service-text {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Dashboard — the figures
 *
 * A tinted disc beside a large figure. The tint is not decoration: amber on
 * "still open" means the tickets are stacking up, and a grey five reads the
 * same as a grey zero from across the counter.
 * ------------------------------------------------------------------ */

.viki-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: .875rem;
}

.viki-kpi {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
}

.viki-kpi-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 9999px;
}

.viki-kpi-disc svg { width: 20px; height: 20px; }

.viki-kpi-disc[data-tone="ok"] { background: var(--success-50); color: var(--success-600); }
.viki-kpi-disc[data-tone="warn"] { background: var(--warning-50); color: var(--warning-600); }
.viki-kpi-disc[data-tone="primary"] { background: var(--primary-50); color: var(--primary-600); }
.viki-kpi-disc[data-tone="accent"] { background: var(--info-50); color: var(--info-600); }
.viki-kpi-disc[data-tone="muted"] { background: var(--viki-subtle); color: var(--viki-t2); }

.dark .viki-kpi-disc[data-tone="ok"] { background: color-mix(in srgb, var(--success-500) 16%, transparent); color: var(--success-400); }
.dark .viki-kpi-disc[data-tone="warn"] { background: color-mix(in srgb, var(--warning-500) 16%, transparent); color: var(--warning-400); }
.dark .viki-kpi-disc[data-tone="primary"] { background: color-mix(in srgb, var(--primary-500) 16%, transparent); color: var(--primary-400); }
.dark .viki-kpi-disc[data-tone="accent"] { background: color-mix(in srgb, var(--info-500) 16%, transparent); color: var(--info-400); }

.viki-kpi-text { min-width: 0; }

.viki-kpi-value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--viki-t1);
}

.viki-kpi-label {
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--viki-t2);
}

/* ------------------------------------------------------------------ *
 * Dashboard — the board underneath
 * ------------------------------------------------------------------ */

.viki-board {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* One column below the width where the queue's seven fields stop fitting. */
@media (max-width: 1180px) {
    .viki-board { grid-template-columns: minmax(0, 1fr); }
}

.viki-board-side { display: grid; gap: 1rem; }

.viki-panel {
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
    overflow: hidden;
}

.viki-panel-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--viki-border);
}

.viki-panel-title { font-size: .8125rem; font-weight: 700; color: var(--viki-t1); }
.viki-panel-note { margin-left: auto; font-size: .6875rem; color: var(--viki-t3); }

.viki-panel-body {
    padding: .875rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.viki-panel-empty {
    padding: 1rem;
    font-size: .75rem;
    color: var(--viki-t2);
}

.viki-panel-body .viki-panel-empty { padding: 0; }
.viki-panel-body .viki-panel-note { margin-left: 0; }

/* The queue. A grid rather than a table: the row collapses to two lines on a
   narrow screen, which a table cannot do without losing its header. */
.viki-queue-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--viki-border);
    font-size: .75rem;
}

.viki-queue-row:first-of-type { border-top: 0; }
.viki-queue-row:nth-of-type(even) { background: color-mix(in srgb, var(--viki-subtle) 55%, transparent); }

/* Twenty minutes is the pickup promise, and the row that broke it is the one
   somebody has to pick up next. Same threshold as the kitchen screen. */
.viki-queue-row[data-late="1"] { background: color-mix(in srgb, var(--danger-500) 7%, transparent); }

.viki-queue-ref {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: var(--viki-t1);
    text-decoration: none;
    white-space: nowrap;
}

.viki-queue-ref:hover { color: var(--primary-600); }

.viki-queue-who {
    font-weight: 600;
    color: var(--viki-t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viki-queue-for { font-size: .6875rem; color: var(--viki-t2); white-space: nowrap; }

.viki-queue-total {
    font-weight: 600;
    color: var(--viki-t1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.viki-queue-wait {
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--viki-t1);
    white-space: nowrap;
}

.viki-queue-row[data-late="1"] .viki-queue-wait { color: var(--danger-600); }

.viki-queue-move { text-align: right; white-space: nowrap; }

.viki-ghost-btn {
    border: 1px solid var(--primary-600);
    border-radius: 6px;
    background: transparent;
    padding: .1875rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--primary-600);
    cursor: pointer;
}

.viki-ghost-btn:hover { background: var(--primary-50); }
.viki-ghost-btn[disabled] { opacity: .5; cursor: default; }
.dark .viki-ghost-btn:hover { background: color-mix(in srgb, var(--primary-500) 14%, transparent); }

.viki-chip {
    display: inline-flex;
    align-items: center;
    padding: .1875rem .625rem;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--viki-subtle);
    color: var(--viki-t2);
}

.viki-chip[data-tone="success"] { background: var(--success-50); color: var(--success-700); }
.viki-chip[data-tone="warning"] { background: var(--warning-50); color: var(--warning-700); }
.viki-chip[data-tone="danger"] { background: var(--danger-50); color: var(--danger-700); }
.viki-chip[data-tone="info"] { background: var(--info-50); color: var(--info-700); }
.viki-chip[data-tone="primary"] { background: var(--primary-50); color: var(--primary-700); }

.dark .viki-chip[data-tone="success"] { background: color-mix(in srgb, var(--success-500) 16%, transparent); color: var(--success-300); }
.dark .viki-chip[data-tone="warning"] { background: color-mix(in srgb, var(--warning-500) 16%, transparent); color: var(--warning-300); }
.dark .viki-chip[data-tone="danger"] { background: color-mix(in srgb, var(--danger-500) 16%, transparent); color: var(--danger-300); }
.dark .viki-chip[data-tone="info"] { background: color-mix(in srgb, var(--info-500) 16%, transparent); color: var(--info-300); }
.dark .viki-chip[data-tone="primary"] { background: color-mix(in srgb, var(--primary-500) 16%, transparent); color: var(--primary-300); }

/* Tonight's book */
.viki-book-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--viki-subtle);
}

.viki-book-row:last-child { border-bottom: 0; }

.viki-book-time {
    width: 3rem;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--viki-t1);
    font-variant-numeric: tabular-nums;
}

.viki-book-who { min-width: 0; flex: 1; }
.viki-book-who strong,
.viki-book-who em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.viki-book-who strong { font-size: .8125rem; font-weight: 600; color: var(--viki-t1); }
.viki-book-who em { font-size: .6875rem; font-style: normal; color: var(--viki-t2); }

.viki-book-size { flex-shrink: 0; font-size: .75rem; font-weight: 700; color: var(--viki-t2); }

/* The week */
.viki-week { padding: .875rem 1rem; display: grid; gap: .4375rem; }

.viki-week-row { display: flex; align-items: center; gap: .625rem; }

.viki-week-day {
    width: 26px;
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--viki-t2);
}

.viki-week-track {
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 9999px;
    background: var(--viki-subtle);
    overflow: hidden;
}

.viki-week-track i {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--primary-600);
    opacity: .42;
}

.viki-week-value {
    width: 46px;
    flex-shrink: 0;
    text-align: right;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--viki-t2);
    font-variant-numeric: tabular-nums;
}

/* Today is the bar the eye should land on — the other six are its context. */
.viki-week-row[data-today="1"] .viki-week-track i { opacity: 1; }
.viki-week-row[data-today="1"] .viki-week-day { color: var(--primary-700); }
.viki-week-row[data-today="1"] .viki-week-value { color: var(--viki-t1); }
.dark .viki-week-row[data-today="1"] .viki-week-day { color: var(--primary-300); }

/* ------------------------------------------------------------------ *
 * Sign in — indigo on the left, the form on the right
 *
 * The brand half is a sibling injected at SIMPLE_LAYOUT_START (see
 * AdminPanelProvider); everything below turns Filament's centred card into
 * the right-hand column beside it. It is decoration, so it is the first thing
 * dropped on a narrow screen — the form is the page.
 * ------------------------------------------------------------------ */

.fi-simple-layout {
    display: flex;
    /* Filament's bundled stylesheet is loaded after this asset and declares
       a column layout for simple pages. Keep the desktop sign-in shell as two
       side-by-side panes instead of stacking the brand above the form. */
    flex-direction: row !important;
    align-items: stretch;
    min-height: 100dvh;
    padding: 0;
    background: var(--viki-page);
}

.fi-simple-main-ctn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    min-width: 0;
}

.fi-simple-main {
    width: 100%;
    max-width: 24rem;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.viki-auth-brand {
    width: 44%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    /* The design's deep indigo, which is darker than any step Filament's
       Indigo ramp emits — 900 is the closest and reads purple beside it. */
    background: #1A237E;
}

.viki-auth-brand-mark {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.viki-auth-brand-mark span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
}

.viki-auth-brand-headline {
    margin: 0;
    max-width: 22ch;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.viki-auth-brand-address {
    margin: 1rem 0 0;
    max-width: 38ch;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.viki-auth-brand-foot {
    margin: 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}

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

/* ------------------------------------------------------------------ *
 * Orders — how far along, as four pips
 *
 * The pips carry the position and the label carries the name, so neither has
 * to be read through colour alone.
 * ------------------------------------------------------------------ */

.viki-progress { display: flex; align-items: center; gap: .375rem; }

.viki-progress-pips { display: flex; align-items: center; gap: .1875rem; }

.viki-progress-pips i {
    display: block;
    width: 14px;
    height: 4px;
    border-radius: 9999px;
    background: var(--viki-subtle);
}

.viki-progress-label {
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--viki-t2);
}

.viki-progress[data-tone="warning"] .viki-progress-pips i[data-on] { background: var(--warning-500); }
.viki-progress[data-tone="warning"] .viki-progress-label { color: var(--warning-600); }
.viki-progress[data-tone="info"] .viki-progress-pips i[data-on] { background: var(--info-500); }
.viki-progress[data-tone="info"] .viki-progress-label { color: var(--info-600); }
.viki-progress[data-tone="success"] .viki-progress-pips i[data-on] { background: var(--success-500); }
.viki-progress[data-tone="success"] .viki-progress-label { color: var(--success-600); }
.viki-progress[data-tone="gray"] .viki-progress-pips i[data-on] { background: var(--gray-400); }
.viki-progress[data-tone="danger"] .viki-progress-label { color: var(--danger-600); }

.dark .viki-progress[data-tone="warning"] .viki-progress-label { color: var(--warning-400); }
.dark .viki-progress[data-tone="info"] .viki-progress-label { color: var(--info-400); }
.dark .viki-progress[data-tone="success"] .viki-progress-label { color: var(--success-400); }
.dark .viki-progress[data-tone="danger"] .viki-progress-label { color: var(--danger-400); }

/* ------------------------------------------------------------------ *
 * Dishes — the thumbnail, or its stand-in
 * ------------------------------------------------------------------ */

.viki-dish-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--viki-border);
}

.viki-dish-thumb[data-placeholder] {
    border: 0;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------------ *
 * One order — the customer's note, and how it got here
 * ------------------------------------------------------------------ */

/* A left rule and a tint, because "no coriander — allergy" being skimmed is a
   different kind of failure from a mistyped phone number. */
.viki-note {
    padding: .75rem 1rem;
    border-left: 4px solid var(--warning-500);
    background: var(--warning-50);
    border-radius: 0 var(--viki-radius-control) var(--viki-radius-control) 0;
}

.dark .viki-note { background: color-mix(in srgb, var(--warning-500) 12%, transparent); }

.viki-note-title {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--warning-700);
}

.dark .viki-note-title { color: var(--warning-300); }

.viki-note-body {
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--viki-t1);
    white-space: pre-line;
}

.viki-timeline { list-style: none; margin: 0; padding: 0; }

.viki-timeline li { display: flex; gap: .75rem; position: relative; padding-bottom: .875rem; }
.viki-timeline li[data-last] { padding-bottom: 0; }

/* The connecting rule is drawn from the dot rather than between the rows, so
   the last event does not trail a line into nothing. */
.viki-timeline li:not([data-last])::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 2px;
    width: 1px;
    background: var(--viki-border);
}

.viki-timeline-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    margin-top: 5px;
    border-radius: 9999px;
    background: var(--gray-400);
}

.viki-timeline-dot[data-tone="success"] { background: var(--success-500); }
.viki-timeline-dot[data-tone="warning"] { background: var(--warning-500); }
.viki-timeline-dot[data-tone="info"] { background: var(--info-500); }
.viki-timeline-dot[data-tone="danger"] { background: var(--danger-500); }

.viki-timeline-label { font-size: .8125rem; font-weight: 600; color: var(--viki-t1); }
.viki-timeline-meta { margin-top: .0625rem; font-size: .6875rem; color: var(--viki-t2); }

/* ------------------------------------------------------------------ *
 * Page content — the page map beside its fields
 * ------------------------------------------------------------------ */

.viki-content { display: grid; gap: 1rem; }

.viki-content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .4375rem;
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: 10px;
}

.viki-content-tab {
    padding: .4375rem .75rem;
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--viki-t2);
    cursor: pointer;
}

.viki-content-tab:hover { background: var(--viki-subtle); }

.viki-content-tab[data-active="1"] {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 700;
}

.dark .viki-content-tab[data-active="1"] {
    background: color-mix(in oklab, var(--primary-400) 18%, transparent);
    color: var(--primary-300);
}

.viki-content-split { display: grid; gap: 1.25rem; align-items: start; }

/* Below this the map would be a column of slivers, so it stacks above the
   fields instead — still useful as an overview, just not side by side. */
@media (min-width: 1180px) {
    .viki-content-split { grid-template-columns: minmax(0, 370px) minmax(0, 1fr); }
    .viki-content-map { position: sticky; top: 5rem; }
}

.viki-content-map {
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
    overflow: hidden;
}

.viki-map-head { padding: .75rem 1rem; border-bottom: 1px solid var(--viki-border); }
.viki-map-title { font-size: .8125rem; font-weight: 700; color: var(--viki-t1); }
.viki-map-lead { margin: .1875rem 0 0; font-size: .6875rem; line-height: 1.5; color: var(--viki-t2); }

.viki-map-body { padding: 1rem; background: var(--viki-page); }

.viki-browser {
    border: 1px solid var(--viki-border);
    border-radius: 10px;
    background: var(--viki-panel);
    overflow: hidden;
}

.viki-browser-bar {
    display: flex;
    align-items: center;
    gap: .3125rem;
    padding: .4375rem .625rem;
    border-bottom: 1px solid var(--viki-border);
    background: var(--viki-subtle);
}

.viki-browser-dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--viki-t3); }

.viki-browser-url {
    margin-inline-start: .5rem;
    font-family: ui-monospace, Menlo, monospace;
    font-size: .5625rem;
    color: var(--viki-t3);
}

.viki-browser-page { padding: .625rem; display: flex; flex-direction: column; gap: .4375rem; }

.viki-block {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .5rem;
    border-radius: 6px;
    font-size: .6875rem;
    line-height: 1.3;
    text-decoration: none;
}

/* Dashed = you can change it. Solid grey = the build owns it. The dashed grey
   in between is the case worth distinguishing: real content, edited elsewhere. */
.viki-block[data-kind="editable"] {
    border: 1.5px dashed var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
    cursor: pointer;
}

.viki-block[data-kind="editable"]:hover {
    background: var(--primary-100);
    text-decoration: none;
}

.viki-block[data-kind="external"] {
    border: 1.5px dashed var(--viki-t3);
    background: var(--viki-subtle);
    color: var(--viki-t2);
}

.viki-block[data-kind="static"] {
    border: 1.5px solid transparent;
    background: var(--viki-subtle);
    color: var(--viki-t3);
}

.dark .viki-block[data-kind="editable"] {
    background: color-mix(in oklab, var(--primary-400) 16%, transparent);
    color: var(--primary-200);
}

.viki-block-pin {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--primary-600);
    color: #fff;
    font-size: .5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viki-block-label { flex: 1; min-width: 0; }

.viki-block-note {
    flex-shrink: 0;
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--viki-panel);
    color: var(--viki-t3);
}

.viki-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    padding: .6875rem 1rem;
    border-top: 1px solid var(--viki-border);
}

.viki-map-legend span {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .625rem;
    color: var(--viki-t2);
}

.viki-map-legend i { width: 14px; height: 10px; border-radius: 3px; }
.viki-map-legend i[data-kind="editable"] { border: 1.5px dashed var(--primary-500); background: var(--primary-50); }
.viki-map-legend i[data-kind="external"] { border: 1.5px dashed var(--viki-t3); background: var(--viki-subtle); }
.viki-map-legend i[data-kind="static"] { background: var(--viki-subtle); }

.viki-content-fields { display: grid; gap: .75rem; }

/* Scrolled to from the map, so it must not land under the sticky top bar. */
.viki-content-card { scroll-margin-top: 5rem; }

.viki-thumbs {
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
    padding: .875rem 1rem;
}

.viki-thumbs-title { font-size: .75rem; font-weight: 700; color: var(--viki-t1); margin-bottom: .625rem; }
.viki-thumbs-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.viki-thumb { display: block; width: 132px; text-decoration: none; }
.viki-thumb img {
    width: 132px;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--viki-border);
    display: block;
}
.viki-thumb span {
    display: block;
    margin-top: .25rem;
    font-size: .625rem;
    line-height: 1.35;
    color: var(--viki-t2);
}
.viki-thumb:hover img { border-color: var(--primary-500); }

/* The storefront could not serve the picture — locally that is the
   construction gate, not a missing file. Say so instead of showing a broken
   image icon, which reads as a bug in this screen. */
.viki-thumb[data-missing="1"] img { display: none; }
.viki-thumb[data-missing="1"]::before {
    content: "Shown on the site";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 82px;
    border-radius: 8px;
    border: 1.5px dashed var(--viki-border);
    background: var(--viki-subtle);
    font-size: .625rem;
    color: var(--viki-t3);
    text-align: center;
}
.viki-thumb:hover span { color: var(--primary-600); }

html { scroll-behavior: smooth; }