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

/* ------------------------------------------------------------------ *
 * Page content — the site itself, edited where the words sit
 *
 * The frame is the real storefront. Everything here is chrome around it:
 * a bar, a card that floats over the block being changed, and the panel
 * that appears when the site does not answer. None of it styles the site
 * — that CSS lives in the other repository and is the whole point.
 * ------------------------------------------------------------------ */

.viki-content-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
}

.viki-mode-switch {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: 10px;
}

.viki-mode-button {
    padding: .375rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--viki-t2);
    border-radius: var(--viki-radius-control);
    transition: background .12s ease, color .12s ease;
}

.viki-mode-button:hover { background: var(--viki-subtle); }

.viki-mode-button[data-active="1"] {
    background: rgb(79 70 229);
    color: #fff;
}

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

.viki-visual-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem .75rem;
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: 10px;
}

.viki-visual-modes,
.viki-visual-widths { display: inline-flex; gap: .25rem; }

.viki-visual-widths { margin-left: auto; }

.viki-visual-chip {
    padding: .3125rem .625rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--viki-t2);
    background: var(--viki-subtle);
    border-radius: var(--viki-radius-control);
    transition: background .12s ease, color .12s ease;
}

.viki-visual-chip:hover { background: var(--viki-border); }

.viki-visual-chip[data-active] {
    background: rgb(79 70 229);
    color: #fff;
}

.viki-visual-hint {
    margin: 0;
    flex: 1 1 14rem;
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--viki-t2);
}

/*
 * The stage is the positioning context for the floating card: the rects the
 * storefront sends are translated into coordinates inside this box, so it has
 * to be the thing `position: absolute` resolves against.
 */
.viki-visual-stage {
    position: relative;
    background: var(--viki-page);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
    overflow: hidden;
}

.viki-visual-frame-wrap {
    display: flex;
    justify-content: center;
    /*
     * Tall enough to be a page rather than a letterbox, and bounded so the
     * panel's own chrome stays reachable without scrolling past the frame.
     */
    height: min(78vh, 900px);
}

.viki-visual-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #FDFAF7;
    transition: width .18s ease;
}

/* Most customers arrive on a phone; this is the honest reading of a change. */
.viki-visual-stage[data-width="narrow"] .viki-visual-frame {
    width: 420px;
    border-inline: 1px solid var(--viki-border);
}

.viki-visual-popover {
    position: absolute;
    z-index: 20;
    width: min(360px, calc(100% - 1.5rem));
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: var(--viki-radius-card);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
}

.viki-visual-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--viki-border);
}

.viki-visual-popover-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--viki-t1);
}

.viki-visual-x {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--viki-t3);
    padding: 0 .25rem;
}

.viki-visual-x:hover { color: var(--viki-t1); }

.viki-visual-fields { padding: .75rem; }

/*
 * Every card is in the DOM in both modes — dropping one from the schema would
 * drop it from the save, and `save()` writes every key on the page. So the
 * ones that are not open are hidden rather than absent.
 *
 * `[data-vk-holder]` is the box Filament wraps each field in, marked by the
 * editor's script. Hiding the card alone leaves its wrapper behind, and the
 * spacing between fifty-four of them turned the popover into a thousand
 * pixels of white with the field somewhere below the fold.
 */
.viki-visual-fields .viki-content-card { display: none; }
.viki-visual-fields .viki-content-card[data-vk-open] { display: block; }
.viki-visual-fields [data-vk-holder] { display: none; }
.viki-visual-fields [data-vk-holder][data-vk-open] { display: block; }

/* A long paragraph field scrolls rather than pushing the popover off-screen. */
.viki-visual-fields { max-height: min(52vh, 420px); overflow-y: auto; }

.viki-visual-popover-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--viki-border);
}

.viki-visual-undo {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--viki-t2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.viki-visual-undo:hover { color: var(--viki-t1); }

.viki-visual-note { font-size: .625rem; color: var(--viki-t3); }

.viki-visual-fallback {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
    background: var(--viki-page);
}

.viki-visual-fallback-title { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--viki-t1); }
.viki-visual-fallback-body { margin: 0; max-width: 34rem; font-size: .8125rem; line-height: 1.6; color: var(--viki-t2); }
.viki-visual-fallback-actions { display: flex; gap: .5rem; margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    .viki-visual-frame,
    .viki-mode-button,
    .viki-visual-chip { transition: none; }
}

/* The one-time explanation above the frame. */
.viki-visual-help {
    padding: .5rem .75rem;
    background: var(--viki-panel);
    border: 1px solid var(--viki-border);
    border-radius: 10px;
}

.viki-visual-help-summary {
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    color: var(--viki-t1);
    list-style: none;
}

.viki-visual-help-summary::-webkit-details-marker { display: none; }

.viki-visual-help-summary::before {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-right: .4375rem;
    font-size: .625rem;
    color: #fff;
    background: rgb(79 70 229);
    border-radius: 9999px;
}

.viki-visual-help-list {
    margin: .5rem 0 0;
    padding-left: 1.125rem;
    display: grid;
    gap: .375rem;
    list-style: disc;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--viki-t2);
}

.viki-visual-help-list strong { color: var(--viki-t1); font-weight: 600; }

/* The card that answers "why can I not change this", where it was asked. */
.viki-visual-owner {
    position: absolute;
    z-index: 20;
    width: min(340px, calc(100% - 1.5rem));
    padding-bottom: .75rem;
    background: var(--viki-panel);
    border: 1px solid rgb(180 140 60 / .55);
    border-radius: var(--viki-radius-card);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
}

.viki-visual-owner-reason {
    margin: 0;
    padding: .625rem .75rem .75rem;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--viki-t2);
}

.viki-visual-owner .viki-visual-chip { margin-left: .75rem; }

/* ------------------------------------------------------------------ *
 * The bottom bar, on a phone
 *
 * Filament turns the sidebar into a drawer below its own `lg`, which is the
 * right answer for a laptop window dragged narrow and the wrong one for the
 * phone in somebody's apron: every move between the pass and the order that
 * just arrived costs open, choose, dismiss.
 *
 * ## The breakpoint is 768px, and it is not Filament's
 *
 * Phone portrait is 390–430px and small tablet portrait is 768–834px; phone
 * *landscape* is 844px and up. Cutting at 768 covers the first two and
 * deliberately misses the third, because landscape is where vertical space is
 * scarcest and a permanent 56px bar costs the most. Above it the drawer is
 * already a reasonable answer and the bar would only take room from the table.
 *
 * ## z-index 20
 *
 * Filament's own: sidebar drawer and its backdrop 30, modal backdrop 40, modal
 * 50. Below all of them on purpose — `More` opens that drawer, so the bar has
 * to go under what it just opened, and a confirmation dialog must never have a
 * navigation floating over its buttons.
 * ------------------------------------------------------------------ */

/* Icon, label and padding. On `:root` rather than on the bar itself because
   `.fi-main` pads by it below and is not a descendant of it — the two drifting
   apart is the last row of a table nobody can reach. */
:root {
    --viki-bottomnav-h: 56px;
}

.viki-bottomnav {
    display: none;
}

@media (max-width: 768px) {
    .viki-bottomnav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: calc(var(--viki-bottomnav-h) + env(safe-area-inset-bottom));
        /* The home indicator on a modern iPhone sits over the bottom 34px.
           Without this the labels are under a thumb-swipe target. */
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--viki-panel);
        border-top: 1px solid var(--viki-border);
    }

    .viki-bottomnav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* The bar is the whole target — a 44px minimum is the point of it. */
        min-height: var(--viki-bottomnav-h);
        padding: 0 2px;
        border: 0;
        background: none;
        color: var(--viki-t2);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .viki-bottomnav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 22px;
    }

    .viki-bottomnav-icon svg {
        width: 22px;
        height: 22px;
    }

    .viki-bottomnav-label {
        font-size: .625rem;
        font-weight: 500;
        letter-spacing: .02em;
        /* Five slots on a 390px screen is 78px each. A label that wraps makes
           its neighbours taller than themselves. */
        white-space: nowrap;
    }

    .viki-bottomnav-item[data-active] {
        color: var(--primary-600);
    }

    .dark .viki-bottomnav-item[data-active] {
        color: var(--primary-400);
    }

    /* Colour alone does not say which slot is live to somebody who cannot see
       the difference, so the live one is also drawn on. */
    .viki-bottomnav-item[data-active]::before {
        content: "";
        position: absolute;
        top: 0;
        width: 26px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: currentColor;
    }

    /* Room for the bar under whatever the page ends with — a table's last row,
       a form's save button. Fixed elements do not reserve their own space. */
    .fi-main {
        padding-bottom: calc(var(--viki-bottomnav-h) + env(safe-area-inset-bottom) + 1rem);
    }
}

/* The docket hides the panel with `visibility` already; this is for every
   other page somebody sends to a printer. */
@media print {
    .viki-bottomnav { display: none; }
}