/* ---------------------------------------------------------------------------
   KiwiControl base theme (issue [5]); re-themed to the Tiny Hype design
   system from the marketing landing page (issues [89]/[100]).

   All theme decisions live in the --kc-* custom properties below. The token
   NAMES are stable — per-creator theming (issue [21]) works by overriding
   these properties on a wrapper element, so components must reference tokens,
   never hard-coded colors. The VALUES mirror LandingContent.razor.css, which
   keeps its own scoped copy on purpose (that page owns its viewport).
--------------------------------------------------------------------------- */

:root {
    /* Color */
    --kc-bg: oklch(98% 0.004 240);
    --kc-surface: oklch(100% 0 0);
    --kc-text: oklch(20% 0.02 240);
    --kc-text-muted: oklch(50% 0.018 240);
    --kc-border: oklch(90% 0.006 240);
    --kc-accent: oklch(56% 0.12 170);
    --kc-accent-strong: color-mix(in oklch, oklch(56% 0.12 170) 88%, black);
    --kc-accent-contrast: #ffffff;
    --kc-pop: oklch(68% 0.17 40); /* secondary accent — sparkle/status moments only */
    --kc-danger: oklch(52% 0.17 27);
    --kc-success: oklch(56% 0.13 155);

    --kc-accent-soft: color-mix(in oklch, var(--kc-accent) 14%, transparent);
    --kc-pop-soft: color-mix(in oklch, var(--kc-pop) 16%, transparent);
    --kc-fg-soft: color-mix(in oklch, var(--kc-text) 6%, transparent);

    /* Shape & spacing */
    --kc-radius: 12px;
    --kc-radius-lg: 18px;
    --kc-space-1: 0.25rem;
    --kc-space-2: 0.5rem;
    --kc-space-3: 1rem;
    --kc-space-4: 1.5rem;
    --kc-space-5: 2.5rem;

    /* Type */
    --kc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --kc-font-display: 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
    --kc-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --kc-content-max: 70rem; /* matches the landing page's 1120px container */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--kc-font);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: var(--kc-bg);
    color: var(--kc-text);
}

h1, h2, h3, h4 {
    font-family: var(--kc-font-display);
    line-height: 1.2;
    margin: 0 0 var(--kc-space-3);
    text-wrap: balance;
}

h1 { font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }

h1:focus {
    outline: none;
}

p {
    margin: 0 0 var(--kc-space-3);
    text-wrap: pretty;
}

a {
    color: var(--kc-accent);
}

a:hover {
    color: var(--kc-accent-strong);
}

:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Baseline form controls, matching the landing page's .input/.textarea.
   Scoped page CSS still wins where it styles its own fields. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
    padding: 9px 13px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    color: var(--kc-text);
    font-size: 0.875rem;
}

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--kc-accent-soft);
    border-color: var(--kc-accent);
}

textarea {
    resize: vertical;
    line-height: 1.5;
}

/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kc-space-2);
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    background: var(--kc-surface);
    color: var(--kc-text);
    padding: 9px 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover:not(:disabled) {
    border-color: var(--kc-text);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--kc-accent);
    border-color: var(--kc-accent);
    color: var(--kc-accent-contrast);
    box-shadow: 0 6px 16px -8px color-mix(in oklch, var(--kc-accent) 70%, transparent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--kc-accent-strong);
    border-color: var(--kc-accent-strong);
    box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--kc-accent) 80%, transparent);
}

.btn-danger {
    background: var(--kc-surface);
    border-color: color-mix(in srgb, var(--kc-danger) 45%, var(--kc-border));
    color: var(--kc-danger);
}

.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--kc-danger) 10%, transparent);
    border-color: var(--kc-danger);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Shared page furniture (issue [100]) --- */

/* Small mono kicker above a page or section title, as on the landing page. */
.eyebrow {
    font-family: var(--kc-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kc-accent);
    margin: 0 0 var(--kc-space-2);
}

.meta {
    font-family: var(--kc-font-mono);
    font-size: 0.8125rem;
    color: var(--kc-text-muted);
}

.num {
    font-family: var(--kc-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Generic surface card; page-specific cards (.dossier-card etc.) match it. */
.card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    padding: var(--kc-space-4);
}

/* Title row: heading (optionally with an eyebrow above it) on the left,
   actions on the right. Already the markup convention on the admin and
   studio list pages. */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kc-space-2) var(--kc-space-3);
    margin-bottom: var(--kc-space-4);
}

.page-head h1 {
    margin: 0;
}

.page-head .eyebrow {
    margin-bottom: var(--kc-space-1);
}

.page-head .lead,
.lead {
    color: var(--kc-text-muted);
    max-width: 60ch;
}

/* Hint/help text under a field or heading. Previously defined only in seven
   components' scoped CSS; promoted so every usage renders (issue [100]). */
.field-hint {
    color: var(--kc-text-muted);
    font-size: 0.875rem;
}

/* Stacked label + control, as on the landing page's mock forms. Pages with
   their own scoped .field keep winning over this baseline. */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field > span,
.field > label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kc-text-muted);
}

/* Long-form legal reading width (issue [14] pages). */
.legal-text {
    max-width: 70ch;
}

/* --- Legal / terms content (issue [14]) --- */

.legal-text h3,
.legal-disclaimer h3 {
    margin-top: var(--kc-space-4);
}

.attest {
    display: flex;
    gap: var(--kc-space-2);
    align-items: baseline;
    margin: var(--kc-space-4) 0 var(--kc-space-3);
    padding: var(--kc-space-3);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
}

.legal-accepted {
    color: var(--kc-text-muted);
    margin-top: var(--kc-space-4);
}

/* --- Shared badges, result lists & empty states --- */

.badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--kc-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge-open {
    background: color-mix(in srgb, var(--kc-success) 15%, transparent);
    color: var(--kc-accent-strong);
}

.badge-closed {
    background: var(--kc-border);
    color: var(--kc-text-muted);
}

.badge-mature {
    background: color-mix(in srgb, var(--kc-danger) 12%, transparent);
    color: var(--kc-danger);
}

.find-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-2);
    max-width: 36rem;
}

.find-result {
    display: flex;
    align-items: center;
    gap: var(--kc-space-3);
    padding: var(--kc-space-3);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    text-decoration: none;
    color: var(--kc-text);
}

.find-result:hover {
    border-color: var(--kc-accent);
}

.result-name {
    font-weight: 600;
}

.result-code {
    color: var(--kc-text-muted);
    flex: 1;
}

.empty-state {
    color: var(--kc-text-muted);
}

/* --- Shared state UI: loading / error / form validity (issue 71) --- */

/* Inline loading indicator with a spinner. Pairs with the plain-text
   `.empty-state` "Loading…" already used across list pages. */
.loading {
    display: flex;
    align-items: center;
    gap: var(--kc-space-2);
    color: var(--kc-text-muted);
}

.spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--kc-border);
    border-top-color: var(--kc-accent);
    border-radius: 50%;
    animation: kc-spin 0.7s linear infinite;
    flex: none;
}

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

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
}

/* Inline error callout for a data load or action that failed — a lighter
   treatment than the full-page problem view. Use with role="alert". */
.state-error {
    color: var(--kc-danger);
    background: color-mix(in srgb, var(--kc-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--kc-danger) 35%, transparent);
    border-radius: var(--kc-radius);
    padding: var(--kc-space-3);
    margin: var(--kc-space-3) 0;
}

/* Inline form-field feedback. These were previously defined only in two
   components' scoped CSS, leaving the same classes unstyled where reused
   (CatalogManager, NewManualCommission, CommissionDetail, AdminUserDossier).
   Promoted to global so every usage renders (issue 71). */
.code-bad {
    color: var(--kc-danger);
}

.code-ok {
    color: var(--kc-accent-strong);
}

/* Full-page problem view: the branded /Error page (404/500) and the
   in-shell 404 (Router NotFound). Centered, calm, no exception detail. */
.problem-page {
    max-width: 34rem;
    margin: var(--kc-space-5) auto;
    text-align: center;
}

.problem-code {
    font-family: var(--kc-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--kc-accent);
    margin: 0 0 var(--kc-space-2);
}

.problem-detail {
    color: var(--kc-text-muted);
}

.problem-actions {
    display: flex;
    justify-content: center;
    gap: var(--kc-space-2);
    flex-wrap: wrap;
    margin: var(--kc-space-4) 0 0;
}

.problem-request-id {
    margin-top: var(--kc-space-4);
    font-size: 0.85rem;
    color: var(--kc-text-muted);
}

/* --- Commission lists & state (issues 36/37) --- */

.commission-state {
    background: color-mix(in srgb, var(--kc-accent) 14%, transparent);
    color: var(--kc-accent-strong);
}

.badge-locked {
    background: var(--kc-border);
    color: var(--kc-text-muted);
    margin-left: var(--kc-space-2);
}

.state-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-2);
    margin: var(--kc-space-3) 0 var(--kc-space-4);
}

.chip {
    padding: 3px var(--kc-space-3);
    border-radius: 999px;
    border: 1px solid var(--kc-border);
    background: transparent;
    color: var(--kc-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
    border-color: var(--kc-text);
    color: var(--kc-text);
}

.chip-on {
    border-color: var(--kc-text);
    background: var(--kc-text);
    color: var(--kc-bg);
    font-weight: 600;
}

.chip-on:hover {
    color: var(--kc-bg);
}

.commission-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-2);
    max-width: 44rem;
}

.commission-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--kc-space-3);
    padding: var(--kc-space-3);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    color: var(--kc-text);
}

.commission-row:hover {
    border-color: var(--kc-accent);
}

/* The state/total/activity cluster is the link through to the commission; the
   party name links to their profile separately (issue 55). */
.commission-row-open {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--kc-space-3);
    text-decoration: none;
    color: var(--kc-text);
}

.commission-row-party {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.party-link {
    color: var(--kc-text);
    text-decoration: none;
}

.party-link:hover {
    color: var(--kc-accent);
    text-decoration: underline;
}

/* Banned/deleted counterparty: distinct indicator, no link (issue 56). */
.user-removed {
    color: var(--kc-danger);
}

.commission-row-label {
    font-size: 0.75rem;
    color: var(--kc-text-muted);
}

.commission-row-total {
    font-variant-numeric: tabular-nums;
}

.commission-row-activity {
    color: var(--kc-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* --- Creator management surface on the detail page (issue 38) --- */

.commission-manage {
    padding: var(--kc-space-3);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    margin-bottom: var(--kc-space-4);
}

.transition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-2);
    margin-bottom: var(--kc-space-3);
}

.intake {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kc-space-1) var(--kc-space-3);
    margin: 0;
}

.intake dt {
    color: var(--kc-text-muted);
    font-size: 0.85rem;
}

.intake dd {
    margin: 0;
}

/* --- Forms & validation (Blazor conventions) --- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--kc-success);
}

.invalid {
    outline: 1px solid var(--kc-danger);
}

.validation-message {
    color: var(--kc-danger);
}

/* --- Blazor error UI --- */

.blazor-error-boundary {
    background: var(--kc-danger);
    color: white;
    padding: var(--kc-space-3);
    border-radius: var(--kc-radius);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff3cd;
    color: var(--kc-text);
    border-top: 1px solid #d6c88a;
    padding: var(--kc-space-2) var(--kc-space-3);
}

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

/* --- Moderation: report affordance & queue (issues 58/60) --- */

.report-affordance {
    display: inline-flex;
    align-items: center;
}

.report-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--kc-text-muted);
    font-size: 0.8rem;
    line-height: 1;
}

.report-trigger:hover {
    color: var(--kc-danger);
    text-decoration: underline;
}

.report-done {
    color: var(--kc-text-muted);
    font-size: 0.8rem;
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-2);
    padding: var(--kc-space-3);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    max-width: 22rem;
}

.report-form-title {
    font-weight: 600;
    margin: 0;
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--kc-text-muted);
}

.report-field select,
.report-field textarea {
    width: 100%;
}

.report-form-actions {
    display: flex;
    gap: var(--kc-space-2);
}

.commission-head-actions {
    display: flex;
    align-items: center;
    gap: var(--kc-space-3);
}

.ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: var(--kc-space-3);
}

/* Blocked-customer note on the commission detail (issue 59). */
.commission-blocked-note {
    color: var(--kc-danger);
    font-size: 0.85rem;
    margin: var(--kc-space-2) 0 0;
}

/* Moderation queue table (issue 60). */
.mod-queue {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mod-queue th,
.mod-queue td {
    text-align: left;
    padding: var(--kc-space-2) var(--kc-space-3);
    border-bottom: 1px solid var(--kc-border);
    vertical-align: top;
}

.mod-queue th {
    color: var(--kc-text-muted);
    font-weight: 500;
    font-family: var(--kc-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mod-queue tbody tr:hover {
    background: var(--kc-fg-soft);
}

.mod-queue-preview {
    color: var(--kc-text-muted);
    max-width: 20rem;
}

.badge-priority-high {
    background: color-mix(in srgb, var(--kc-danger) 15%, transparent);
    color: var(--kc-danger);
}

.badge-priority-normal {
    background: color-mix(in srgb, var(--kc-accent) 14%, transparent);
    color: var(--kc-accent-strong);
}

.badge-priority-low {
    background: var(--kc-border);
    color: var(--kc-text-muted);
}

/* --- Audit log (issue 65) --- */

.audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kc-space-4);
    margin-bottom: var(--kc-space-4);
}

.audit-filters select {
    margin-left: var(--kc-space-2);
    padding: var(--kc-space-1) var(--kc-space-2);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    color: var(--kc-text);
}

.audit-user-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--kc-space-2);
    color: var(--kc-text-muted);
}

.audit-refs {
    display: flex;
    flex-direction: column;
}

/* --- Admin actions on the dossier (issue 62) --- */

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-2);
}

.action-form {
    margin-top: var(--kc-space-3);
    padding: var(--kc-space-3);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    max-width: 32rem;
}

.action-form h4 {
    margin: 0 0 var(--kc-space-2);
}

.action-form label {
    display: block;
    margin-bottom: var(--kc-space-2);
    color: var(--kc-text-muted);
    font-size: 0.875rem;
}

.action-form input[type="date"],
.action-form textarea {
    display: block;
    width: 100%;
    margin-top: var(--kc-space-1);
    padding: var(--kc-space-2);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    color: var(--kc-text);
    font: inherit;
}

.action-form-buttons {
    display: flex;
    gap: var(--kc-space-2);
    margin-top: var(--kc-space-2);
}

.action-done {
    color: var(--kc-accent-strong);
    font-weight: 600;
}

.action-error {
    color: var(--kc-danger);
}

.action-history {
    margin-top: var(--kc-space-3);
    margin-bottom: 0;
}

/* --- User dossier & search (issue 61) --- */

.user-search {
    display: flex;
    gap: var(--kc-space-2);
    margin-bottom: var(--kc-space-4);
    max-width: 40rem;
}

.user-search-input {
    flex: 1;
    padding: var(--kc-space-2) var(--kc-space-3);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    color: var(--kc-text);
}

.dossier-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-4);
    justify-content: space-between;
    padding: var(--kc-space-4);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    margin-bottom: var(--kc-space-4);
}

.dossier-identity h2 {
    display: flex;
    align-items: center;
    gap: var(--kc-space-2);
    margin-bottom: var(--kc-space-1);
}

.dossier-facts {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--kc-space-1) var(--kc-space-4);
    margin: 0;
    font-size: 0.875rem;
}

.dossier-facts div {
    display: contents;
}

.dossier-facts dt {
    color: var(--kc-text-muted);
}

.dossier-facts dd {
    margin: 0;
    font-weight: 600;
}

.dossier-card {
    padding: var(--kc-space-4);
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    margin-bottom: var(--kc-space-4);
}

.dossier-card h3 {
    margin-bottom: var(--kc-space-3);
}

.dossier-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 var(--kc-space-2);
    border-radius: 999px;
    background: var(--kc-border);
    color: var(--kc-text-muted);
    font-size: 0.75rem;
    text-align: center;
}

.dossier-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--kc-space-3);
}

.dossier-thumb {
    margin: 0;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    overflow: hidden;
    background: var(--kc-bg);
}

.dossier-thumb img {
    display: block;
    width: 100%;
    height: 8rem;
    object-fit: cover;
}

.dossier-thumb.is-hidden img {
    opacity: 0.4;
    filter: grayscale(1);
}

.dossier-thumb figcaption {
    display: flex;
    align-items: center;
    gap: var(--kc-space-2);
    justify-content: space-between;
    padding: var(--kc-space-1) var(--kc-space-2);
    font-size: 0.75rem;
    color: var(--kc-text-muted);
}

.thumb-purpose {
    display: inline-flex;
    align-items: center;
    gap: var(--kc-space-1);
}

.thumb-action {
    padding: 2px var(--kc-space-2);
    font-size: 0.75rem;
}