/* ---------------------------------------------------------------------------
   KiwiControl base theme (issue [5]).

   All theme decisions live in the --kc-* custom properties below. The default
   is a neutral, warm-gray theme with a kiwi-green accent. Per-creator theming
   (issue [21]) works by overriding these properties on a wrapper element —
   components must reference tokens, never hard-coded colors.
--------------------------------------------------------------------------- */

:root {
    /* Color */
    --kc-bg: #faf9f7;
    --kc-surface: #ffffff;
    --kc-text: #26221c;
    --kc-text-muted: #6b675f;
    --kc-border: #e4e1db;
    --kc-accent: #4a7c2f;
    --kc-accent-strong: #3a6323;
    --kc-accent-contrast: #ffffff;
    --kc-danger: #b3261e;
    --kc-success: #26b050;

    /* Shape & spacing */
    --kc-radius: 8px;
    --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: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kc-content-max: 64rem;
}

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

html {
    font-family: var(--kc-font);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3, h4 {
    line-height: 1.2;
    margin: 0 0 var(--kc-space-3);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

h1:focus {
    outline: none;
}

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

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

/* --- Buttons --- */

.btn {
    display: inline-block;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    color: var(--kc-text);
    padding: var(--kc-space-2) var(--kc-space-4);
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: var(--kc-accent);
    border-color: var(--kc-accent);
    color: var(--kc-accent-contrast);
}

.btn-primary:hover:not(:disabled) {
    background: var(--kc-accent-strong);
    border-color: var(--kc-accent-strong);
}

.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;
}

/* --- 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: 2px var(--kc-space-2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    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-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: 2px var(--kc-space-3);
    border-radius: 999px;
    border: 1px solid var(--kc-border);
    background: var(--kc-surface);
    color: var(--kc-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.chip-on {
    border-color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 12%, transparent);
    color: var(--kc-accent-strong);
    font-weight: 600;
}

.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;
}

.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-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;
}