/* ============================================================================
   KromeShorts review UI — dark studio theme
   Semantic tokens (--ks-*) drive the app; the --krome-* block re-skins the
   Krome.Blazor KromeButton (whose CSS reads var(--krome-*, <light fallback>))
   so it matches this dark surface instead of its default light palette.
   ============================================================================ */
:root {
    color-scheme: dark;

    /* Surfaces */
    --ks-bg: #0c0f14;
    --ks-surface: #14181f;
    --ks-surface-2: #1b212b;
    --ks-inset: #10141a;
    --ks-border: #262d38;
    --ks-border-strong: #333c49;

    /* Text */
    --ks-text: #e7edf4;
    --ks-text-dim: #c2cbd6;
    --ks-text-muted: #8a95a4;
    --ks-text-faint: #616c7b;

    /* Accent — electric indigo/violet */
    --ks-accent: #6366f1;
    --ks-accent-2: #8b5cf6;
    --ks-accent-text: #a9b0ff;
    --ks-accent-glow: rgba(99, 102, 241, 0.55);
    --ks-accent-ring: rgba(99, 102, 241, 0.32);

    /* Status */
    --ks-info: #3b82f6;
    --ks-info-text: #8fc0ff;
    --ks-ok: #22c55e;
    --ks-ok-text: #6ee7a0;
    --ks-warn: #f59e0b;
    --ks-warn-text: #fbc65a;
    --ks-danger: #ef4444;
    --ks-danger-text: #ff9a9a;

    /* KromeButton (Krome.Blazor) dark re-skin */
    --krome-primary: var(--ks-accent);
    --krome-primary-hover: var(--ks-accent-2);
    --krome-surface: var(--ks-surface);
    --krome-border: var(--ks-border);
    --krome-text-primary: var(--ks-text);
    --krome-text-secondary: var(--ks-text-muted);
    --krome-gray-50: var(--ks-surface-2);
    --krome-gray-100: var(--ks-surface-2);
    --krome-gray-300: var(--ks-border-strong);
    --krome-error: var(--ks-danger);
    --krome-success: var(--ks-ok);
    --krome-warning: var(--ks-warn);
    --krome-radius-md: 9px;
    --krome-radius-sm: 6px;
    --krome-transition-fast: 150ms ease;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--ks-bg);
    color: var(--ks-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p {
    margin: 0;
}

a {
    color: inherit;
}

code {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ks-surface-2);
}

::selection {
    background: color-mix(in srgb, var(--ks-accent) 40%, transparent);
}

/* Shared primitives ------------------------------------------------------- */
.ks-textlink {
    color: var(--ks-accent-text);
    text-decoration: none;
    font-weight: 550;
}

.ks-textlink:hover {
    text-decoration: underline;
}

.ks-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 40px 24px;
    border-radius: 14px;
    border: 1px dashed var(--ks-border-strong);
    background: var(--ks-surface);
    color: var(--ks-text-muted);
}

.ks-empty h1,
.ks-empty h2 {
    color: var(--ks-text);
    font-size: 19px;
    font-weight: 640;
}

.ks-empty p {
    font-size: 14px;
    margin: 0;
}


/* ============================================================================
   st-* — the shared admin-surface primitives (section header, toolbar, fields,
   inline editor, table, row actions, badges, banners, skeleton).

   These began life inside Settings.razor.css, reaching the settings sections
   through `.stg-content ::deep`. The studio area (/studio) is built from the
   same vocabulary, and a second `::deep` copy under a `.stu-content` ancestor
   would be the same rules maintained twice — so they moved here, unprefixed and
   app-wide. Nothing else changed with the move.

   A section may still SPECIALISE one of these from its own scoped CSS (a table's
   grid columns, say): scoped rules carry an extra [b-xxxxxxxxx] attribute, so
   they outrank these on specificity without needing !important.
   ============================================================================ */

/* -- Section header -------------------------------------------------------- */

.st-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.st-title {
    font-size: 22px;
    font-weight: 680;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ks-text);
}

.st-subtitle {
    margin: 0;
    font-size: 13.5px;
    color: var(--ks-text-muted);
    max-width: 62ch;
}

.st-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* -- Toolbar / filters ----------------------------------------------------- */

.st-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.st-count {
    margin-left: auto;
    align-self: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text-muted);
    font-variant-numeric: tabular-nums;
}

/* -- Fields (shared by toolbar + editor forms) ----------------------------- */

.st-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.st-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ks-text-muted);
}

.st-input,
.st-select,
.st-textarea {
    padding: 0 12px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--ks-border);
    background: var(--ks-inset);
    color: var(--ks-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

.st-textarea {
    height: auto;
    min-height: 74px;
    padding: 9px 12px;
    resize: vertical;
    line-height: 1.45;
}

.st-select {
    cursor: pointer;
}

.st-input:focus-visible,
.st-select:focus-visible,
.st-textarea:focus-visible {
    outline: none;
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.st-input[readonly],
.st-input:disabled,
.st-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.st-hint {
    font-size: 12px;
    color: var(--ks-text-faint);
    line-height: 1.4;
}

.st-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ks-text-dim);
    cursor: pointer;
    padding-top: 6px;
}

.st-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--ks-accent);
    cursor: pointer;
}

/* -- Inline editor card ---------------------------------------------------- */

.st-editor {
    border: 1px solid var(--ks-border-strong);
    border-radius: 14px;
    background: var(--ks-surface);
    padding: 20px;
    margin-bottom: 18px;
}

.st-editor-title {
    font-size: 15.5px;
    font-weight: 650;
    color: var(--ks-text);
    margin: 0 0 2px;
}

.st-editor-sub {
    font-size: 12.5px;
    color: var(--ks-text-muted);
    margin: 0 0 16px;
}

.st-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 16px;
    margin-bottom: 16px;
}

.st-field--wide {
    grid-column: 1 / -1;
}

.st-form-group {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
    padding-top: 6px;
    border-top: 1px solid var(--ks-border);
}

.st-form-group:first-child {
    border-top: none;
    padding-top: 0;
}

.st-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* -- Table ------------------------------------------------------------------ */

.st-table-wrap {
    border: 1px solid var(--ks-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ks-surface);
}

.st-row {
    display: grid;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ks-border);
}

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

.st-row--head {
    background: var(--ks-surface-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-text-faint);
    padding-top: 10px;
    padding-bottom: 10px;
}

.st-cell-main {
    font-size: 14px;
    font-weight: 550;
    color: var(--ks-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.st-cell {
    font-size: 13.5px;
    color: var(--ks-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-cell--num {
    font-variant-numeric: tabular-nums;
}

.st-cell--muted {
    color: var(--ks-text-muted);
}

/* -- Row actions ------------------------------------------------------------ */

.st-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.st-rowbtn {
    height: 28px;
    padding: 0 11px;
    border-radius: 7px;
    border: 1px solid var(--ks-border-strong);
    background: transparent;
    color: var(--ks-text-dim);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
    white-space: nowrap;
}

.st-rowbtn:hover:not(:disabled) {
    background: var(--ks-surface-2);
    color: var(--ks-text);
    border-color: var(--ks-accent);
}

.st-rowbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.st-rowbtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.st-rowbtn--danger:hover:not(:disabled) {
    color: var(--ks-danger-text);
    border-color: var(--ks-danger);
}

/* -- Badges ----------------------------------------------------------------- */

.st-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.st-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.st-badge--ok {
    color: var(--ks-ok-text);
    background: color-mix(in srgb, var(--ks-ok) 14%, transparent);
}

.st-badge--muted {
    color: var(--ks-text-muted);
    background: color-mix(in srgb, var(--ks-text-muted) 14%, transparent);
}

.st-badge--warn {
    color: var(--ks-warn-text);
    background: color-mix(in srgb, var(--ks-warn) 14%, transparent);
}

.st-badge--danger {
    color: var(--ks-danger-text);
    background: color-mix(in srgb, var(--ks-danger) 14%, transparent);
}

.st-badge--accent {
    color: var(--ks-accent-text);
    background: color-mix(in srgb, var(--ks-accent) 16%, transparent);
}

/* -- Banners ---------------------------------------------------------------- */

.st-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    margin-bottom: 14px;
    color: var(--ks-text);
}

.st-banner--error {
    background: color-mix(in srgb, var(--ks-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
}

.st-banner--ok {
    background: color-mix(in srgb, var(--ks-ok) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-ok) 30%, transparent);
}

.st-banner-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.st-banner-dismiss {
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--ks-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}

.st-banner-dismiss:hover {
    color: var(--ks-text);
    background: color-mix(in srgb, var(--ks-text) 10%, transparent);
}

/* -- Loading skeleton / empty state ---------------------------------------- */

.st-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-skeleton-row {
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--ks-surface) 25%, var(--ks-surface-2) 50%, var(--ks-surface) 75%);
    background-size: 200% 100%;
    animation: st-shimmer 1.3s ease-in-out infinite;
}

@keyframes st-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .st-skeleton-row { animation: none; }
}

/* Blazor framework error UI ------------------------------------------------ */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 22px;
    background: var(--ks-warn);
    color: #1a1205;
    font-size: 14px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-weight: 700;
}

.blazor-error-boundary {
    padding: 16px 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ks-danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-danger) 34%, transparent);
    color: var(--ks-text);
}