/* ============================================================================
   Spark.Web — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the visual system. Component-level styles live in
   per-component .razor.css files (Blazor CSS isolation) and reference these
   global tokens via var(--sk-*). Add new colors/spacing here first.
   ============================================================================ */
:root {
    /* ── Surface tiers (dark-mode first, high-contrast minimalist) ─────────── */
    --sk-bg-0:           #0a0a0c;   /* deepest — app background */
    --sk-bg-1:           #0f0f12;   /* chrome (header, sidebar) */
    --sk-bg-2:           #15151a;   /* cards */
    --sk-bg-3:           #1c1c22;   /* card hover / nested surface */
    --sk-bg-4:           #232329;   /* active selection / pressed */
    --sk-bg-elevated:    #1a1a20;   /* popovers, dropdowns */

    /* ── Borders (translucent + opaque, Linear-style) ──────────────────────── */
    --sk-border:         rgba(255, 255, 255, 0.06);
    --sk-border-strong:  rgba(255, 255, 255, 0.10);
    --sk-border-accent:  rgba(79, 140, 255, 0.32);
    --sk-divider:        #232329;

    /* ── Text ──────────────────────────────────────────────────────────────── */
    --sk-text:           #ececf1;
    --sk-text-soft:      #c0c0c8;
    --sk-text-muted:     #8a8a95;
    --sk-text-faint:     #5a5a64;
    --sk-text-inverse:   #0a0a0c;

    /* ── Accents (reserved STRICTLY for execution state) ───────────────────── */
    --sk-accent:         #4f8cff;       /* primary interactive */
    --sk-accent-soft:    rgba(79, 140, 255, 0.12);
    --sk-running:        #4f8cff;       /* electric blue — actively executing */
    --sk-running-glow:   rgba(79, 140, 255, 0.45);
    --sk-success:        #5ad6a8;       /* mint — passed/complete */
    --sk-success-glow:   rgba(90, 214, 168, 0.35);
    --sk-error:          #ff5d6c;       /* neon coral — failed */
    --sk-error-glow:     rgba(255, 93, 108, 0.40);
    --sk-warning:        #f5b942;       /* amber — retries/warnings */
    --sk-warning-glow:   rgba(245, 185, 66, 0.35);
    --sk-queued:         #6e6e7a;       /* dim — queued / not yet started */
    --sk-skipped:        #4a4a52;       /* very dim — skipped */
    --sk-brand:          #f0c040;       /* Spark brand gold */

    /* ── Spacing (4px base) ────────────────────────────────────────────────── */
    --sk-space-1:  4px;
    --sk-space-2:  8px;
    --sk-space-3:  12px;
    --sk-space-4:  16px;
    --sk-space-5:  20px;
    --sk-space-6:  24px;
    --sk-space-8:  32px;
    --sk-space-10: 40px;
    --sk-space-12: 48px;

    /* ── Radii ─────────────────────────────────────────────────────────────── */
    --sk-radius-sm:   4px;
    --sk-radius:      6px;
    --sk-radius-md:   8px;
    --sk-radius-lg:  12px;
    --sk-radius-xl:  16px;
    --sk-radius-pill: 999px;

    /* ── Shadows ───────────────────────────────────────────────────────────── */
    --sk-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
    --sk-shadow:     0 4px 12px rgba(0, 0, 0, 0.40);
    --sk-shadow-lg:  0 10px 32px rgba(0, 0, 0, 0.50);

    /* ── Type — defaults inherit "medium" tier (see data-text-size below) ── */
    --sk-font-sans:  'Inter', 'Segoe UI', 'SF Pro Text', system-ui, sans-serif;
    --sk-font-mono:  'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    --sk-fs-xs:   12px;
    --sk-fs-sm:   13px;
    --sk-fs-md:   14px;
    --sk-fs-base: 15px;
    --sk-fs-lg:   17px;
    --sk-fs-xl:   22px;
    --sk-fs-2xl:  30px;

    /* ── Motion ────────────────────────────────────────────────────────────── */
    --sk-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --sk-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
    --sk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sk-dur-fast:    0.12s;
    --sk-dur:         0.22s;
    --sk-dur-slow:    0.4s;
}

/* ============================================================================
   Text-size scale — S / M / L
   ----------------------------------------------------------------------------
   Industry-aligned tiers (Notion, Slack, WCAG body baseline). Switch via the
   data-text-size attribute on <html>:
       <html data-text-size="small">    — compact dashboards (14px base)
       <html data-text-size="medium">   — default, comfortable (15px base)
       <html data-text-size="large">    — accessibility / casual (17px base)
   The :root block above already defines the "medium" defaults; the rules below
   override them for the "small" and "large" tiers. Components that read
   --sk-fs-* tokens (or rem units against the html base) scale automatically.
   ============================================================================ */
html[data-text-size="small"] {
    --sk-fs-xs:   11px;
    --sk-fs-sm:   12px;
    --sk-fs-md:   13px;
    --sk-fs-base: 14px;
    --sk-fs-lg:   16px;
    --sk-fs-xl:   20px;
    --sk-fs-2xl:  28px;
}
html[data-text-size="large"] {
    --sk-fs-xs:   13px;
    --sk-fs-sm:   14px;
    --sk-fs-md:   16px;
    --sk-fs-base: 17px;
    --sk-fs-lg:   19px;
    --sk-fs-xl:   24px;
    --sk-fs-2xl:  34px;
}

/* ============================================================================
   Base
   ============================================================================ */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sk-font-sans);
    font-size: var(--sk-fs-base);
    background: var(--sk-bg-0);
    color: var(--sk-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; color: var(--sk-text); }
h2 { font-size: var(--sk-fs-xl); }
h5 { font-size: var(--sk-fs-md); }

a, .btn-link {
    color: var(--sk-accent);
    text-decoration: none;
    transition: color var(--sk-dur-fast) var(--sk-ease);
}
a:hover { color: #7ea9ff; text-decoration: none; }

code, pre { font-family: var(--sk-font-mono); }

/* Bootstrap defaults override (kept narrow to avoid surprising other pages) */
.content { padding-top: var(--sk-space-5); }

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--sk-accent-soft);
    outline: none;
}
.btn-primary { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-text-inverse); }
.btn-primary:hover { background: #6ba3ff; border-color: #6ba3ff; color: var(--sk-text-inverse); }

/* Form validation (existing behavior preserved with token colors) */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sk-success); }
.invalid { outline: 1px solid var(--sk-error); }
.validation-message { color: var(--sk-error); }

/* ============================================================================
   Reusable utilities (global — referenced from many .razor.css files)
   ============================================================================ */

/* Cards — universal unit of UI */
.sk-card {
    background: var(--sk-bg-2);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
    padding: var(--sk-space-4);
    transition: border-color var(--sk-dur) var(--sk-ease),
                background var(--sk-dur) var(--sk-ease),
                transform var(--sk-dur) var(--sk-ease);
}
.sk-card:hover {
    border-color: var(--sk-border-strong);
    background: var(--sk-bg-3);
}
.sk-card.is-interactive { cursor: pointer; }
.sk-card.is-interactive:hover { transform: translateY(-1px); }

/* Status pills */
.sk-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    border-radius: var(--sk-radius-pill);
    font-size: var(--sk-fs-xs); font-weight: 500;
    border: 1px solid var(--sk-border);
    background: var(--sk-bg-3);
    color: var(--sk-text-soft);
    line-height: 1.4;
}
.sk-pill .sk-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}
.sk-pill.is-running { color: var(--sk-running); border-color: var(--sk-border-accent); background: var(--sk-accent-soft); }
.sk-pill.is-running .sk-dot { animation: sk-pulse 1.4s var(--sk-ease) infinite; }
.sk-pill.is-success { color: var(--sk-success); border-color: rgba(90, 214, 168, 0.32); background: rgba(90, 214, 168, 0.08); }
.sk-pill.is-error   { color: var(--sk-error);   border-color: rgba(255, 93, 108, 0.32); background: rgba(255, 93, 108, 0.08); }
.sk-pill.is-warning { color: var(--sk-warning); border-color: rgba(245, 185, 66, 0.32); background: rgba(245, 185, 66, 0.08); }
.sk-pill.is-idle    { color: var(--sk-text-muted); }
.sk-pill.is-offline { color: var(--sk-text-faint); }

@keyframes sk-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
@keyframes sk-node-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--sk-running-glow), 0 0 18px 0 var(--sk-running-glow); }
    50%      { box-shadow: 0 0 0 3px var(--sk-running-glow), 0 0 32px 4px var(--sk-running-glow); }
}
@keyframes sk-edge-flow {
    from { stroke-dashoffset: 24; }
    to   { stroke-dashoffset: 0;  }
}

/* Buttons */
.sk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--sk-bg-3);
    color: var(--sk-text);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    font-size: var(--sk-fs-sm); font-weight: 500;
    cursor: pointer;
    transition: all var(--sk-dur-fast) var(--sk-ease);
    font-family: inherit;
    text-decoration: none;
}
.sk-btn:hover { background: var(--sk-bg-4); border-color: var(--sk-border-strong); color: var(--sk-text); }
.sk-btn:active { transform: translateY(1px); }
.sk-btn.is-primary { background: var(--sk-accent); color: var(--sk-text-inverse); border-color: transparent; }
.sk-btn.is-primary:hover { background: #6ba3ff; color: var(--sk-text-inverse); }
.sk-btn.is-ghost   { background: transparent; }
.sk-btn.is-danger  { background: var(--sk-error); color: white; border-color: transparent; }
.sk-btn.is-xs { padding: 2px 8px; font-size: var(--sk-fs-xs); }
.sk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Section labels */
.sk-section-label {
    font-size: var(--sk-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sk-text-faint);
    font-weight: 600;
}

/* Dot-grid utility */
.sk-dotgrid {
    background-color: var(--sk-bg-0);
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ============================================================================
   Scrollbars
   ============================================================================ */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--sk-bg-4);
    border-radius: 5px;
    border: 2px solid var(--sk-bg-0);
}
::-webkit-scrollbar-thumb:hover { background: #2e2e36; }

/* ============================================================================
   Blazor error boundary (dark)
   ============================================================================ */
.blazor-error-boundary {
    background: var(--sk-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--sk-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: var(--sk-border-strong); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--sk-text-muted);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================================
   Responsive helpers (mobile / tablet)
   ----------------------------------------------------------------------------
   Used across pages — keep narrow and well-named. Page-specific responsive
   tweaks live in component-scoped CSS.
   ============================================================================ */

/* Horizontal-scroll wrapper for wide tables on small screens. Wrap any <table>
   that doesn't fit on a phone in <div class="sk-table-scroll">…</div>. */
.sk-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sk-table-scroll > table { min-width: 560px; }

/* Prevent images & SVGs from busting layouts on phones. */
img, svg { max-width: 100%; }

/* Bootstrap tables — at least scroll horizontally rather than overflow off-screen */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Long monospace strings (job IDs, ticket keys) should break before they overflow */
code, .mono { word-break: break-word; overflow-wrap: anywhere; }

@media (max-width: 640.98px) {
    /* Tighter outer padding on the content area was set in MainLayout; this just
       keeps headings from dominating phones. */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    .content { padding-top: var(--sk-space-3); }

    /* Make Bootstrap modals usable on phones — full-width with a little gutter */
    .modal-dialog { margin: 0.5rem; }
    .modal-content { border-radius: var(--sk-radius-md); }

    /* Form controls — full-width on phones so they don't sit awkwardly */
    .form-control, .form-select { width: 100%; }

    /* Buttons in button-rows wrap cleanly */
    .btn-toolbar, .btn-group { flex-wrap: wrap; gap: var(--sk-space-2); }

    /* Bootstrap tables on phones — scroll horizontally instead of overflowing the
       page. We don't wrap every table in .table-responsive, so apply the same
       behaviour at the table level. Column widths won't be uniform across rows
       (display: block side-effect), which is the accepted trade-off for keeping
       all columns reachable. */
    .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS Safari prefers 16px+ inputs (otherwise it zooms on focus). Keep it small
   on desktop, bump to 16px on phones. */
@media (max-width: 640.98px) and (hover: none) {
    input[type="text"], input[type="search"], input[type="email"],
    input[type="number"], input[type="password"], input[type="url"],
    textarea, select, .form-control, .form-select { font-size: 16px; }
}