/* ===========================================
   Prism Search — Design Tokens
   Source: design_handoff_prism_search/README.md
   ===========================================
   Canonical naming: --indigo-*, --paper, --surface, --ink, --coral, etc.
   Legacy --ps-* aliases (kept at the bottom) remap to the new palette so
   pre-handoff screens continue to render without rewrites until they are
   replaced under the redesign.
   Dark theme is intentionally absent — it ships as a separate stage
   post-MVP (see README "Чого НЕ робити").
   =========================================== */

:root {
    /* === Brand: Prism indigo === */
    --indigo-50:  #EEEDFB;
    --indigo-100: #DEDBF7;
    --indigo-200: #C9C5F4;
    --indigo-400: #8B82EA;
    --indigo-600: #5B57DB;   /* PRIMARY brand */
    --indigo-800: #3F3BA8;   /* hover-state primary */
    --indigo-950: #1B1750;   /* deep ink */

    /* === Neutrals (warm slate) === */
    --paper:     #FAFAF7;    /* main page background */
    --surface:   #F1F1EE;    /* cards, inputs, tinted panels */
    --border:    #E4E4E0;    /* default dividers */
    --border-2:  #D7D7D2;    /* emphatic borders */
    --muted:     #8F8F8A;    /* secondary text, captions */
    --body:      #42423E;    /* default body text */
    --ink:       #1A1B22;    /* headlines, strong text */
    --white:     #FFFFFF;

    /* === Signal: high risk · danger === */
    --coral:     #C7372F;
    --coral-bg:  #FDECEC;
    --coral-border: #F4C9C6;

    /* === Signal: medium risk · caution === */
    --amber:     #B86E0F;
    --amber-bg:  #FCEFD5;
    --amber-border: #F2D9A1;

    /* === Signal: low risk · success === */
    --forest:    #3A7A2E;
    --forest-bg: #E4EFE0;
    --forest-border: #C7DFC0;

    /* === Typography === */
    --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-feature-tnum: 'tnum' 1;

    /* Type scale (role-anchored — see README "Типографіка") */
    --t-display:    700 108px/0.95 var(--font-sans);
    --t-display-sm: 700 84px/0.95  var(--font-sans);
    --t-title:      600 44px/1.10  var(--font-sans);
    --t-title-sm:   600 40px/1.10  var(--font-sans);
    --t-h2:         700 64px/1.05  var(--font-sans);
    --t-h3:         600 28px/1.20  var(--font-sans);
    --t-h3-sm:      600 26px/1.20  var(--font-sans);
    --t-body:       400 16px/1.55  var(--font-sans);
    --t-body-lg:    400 18px/1.55  var(--font-sans);
    --t-caption:    500 13px/1.40  var(--font-sans);
    --t-mono:       500 14px/1.20  var(--font-mono);
    --t-mono-lg:    500 28px/1.20  var(--font-mono);

    /* Tracking (negative for display, positive caps for captions) */
    --track-display: -0.025em;
    --track-title:   -0.015em;
    --track-h2:      -0.022em;
    --track-h3:      -0.012em;
    --track-caption:  0.04em;

    /* === Spacing scale (4px base) === */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  28px;
    --s-8:  32px;
    --s-9:  36px;
    --s-10: 40px;
    --s-12: 48px;
    --s-14: 56px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;

    /* === Radii === */
    --r-sm:   4px;    /* tags, kbd hints */
    --r-md:   8px;    /* small buttons, inputs */
    --r-lg:   12px;   /* cards, tiles */
    --r-xl:   14px;   /* main cards */
    --r-2xl:  18px;   /* hero cards */
    --r-pill: 100px;  /* badges, pills */

    /* === Shadows === */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 6px 18px -10px rgba(27, 23, 80, 0.18);
    --shadow-lg:   0 30px 60px -30px rgba(27, 23, 80, 0.25);
    --shadow-glow: 0 0 0 4px rgba(91, 87, 219, 0.12);

    /* === Header geometry (see README "AppHeader / Tab bar") === */
    --header-h: 52px;

    /* ============================================================
       Legacy aliases — keep pre-handoff screens working while they
       are still on the old --ps-* tokens. Map every legacy name to
       the closest handoff token so the old screens automatically
       pick up the new brand colour, fonts, and neutrals.
       Remove an alias once every consumer of that token has been
       rewritten under the redesign.
       ============================================================ */

    --ps-font:           var(--font-sans);

    --ps-text-xs:        0.6875rem;
    --ps-text-sm:        0.75rem;
    --ps-text-base:      0.875rem;
    --ps-text-md:        1rem;
    --ps-text-lg:        1.125rem;
    --ps-text-xl:        1.375rem;
    --ps-text-2xl:       1.75rem;
    --ps-text-3xl:       2.5rem;

    --ps-space-1:        var(--s-1);
    --ps-space-2:        var(--s-2);
    --ps-space-3:        var(--s-3);
    --ps-space-4:        var(--s-4);
    --ps-space-5:        var(--s-5);
    --ps-space-6:        var(--s-6);
    --ps-space-8:        var(--s-8);
    --ps-space-10:       var(--s-10);
    --ps-space-12:       var(--s-12);

    --ps-r-xs:           3px;
    --ps-r-sm:           var(--r-sm);
    --ps-r-md:           var(--r-md);
    --ps-r-lg:           var(--r-md);
    --ps-r-xl:           var(--r-lg);
    --ps-r-full:         var(--r-pill);

    --ps-bg:             var(--white);
    --ps-bg-subtle:      var(--paper);
    --ps-bg-muted:       var(--surface);
    --ps-bg-hover:       #EAEAE6;
    --ps-bg-active:      #DEDED9;

    --ps-border-subtle:  var(--border);
    --ps-border-default: var(--border-2);
    --ps-border-strong:  #C0C0BB;

    --ps-text-primary:   var(--ink);
    --ps-text-secondary: var(--body);
    --ps-text-muted:     var(--muted);
    --ps-text-disabled:  #BDBDB8;

    --ps-accent:         var(--indigo-600);
    --ps-accent-hover:   var(--indigo-800);
    --ps-accent-pressed: var(--indigo-950);
    --ps-accent-subtle:  rgba(91, 87, 219, 0.08);
    --ps-accent-text:    var(--indigo-800);

    --ps-success:        var(--forest);
    --ps-success-bg:     var(--forest-bg);

    --ps-warning:        var(--amber);
    --ps-warning-bg:     var(--amber-bg);

    --ps-error:          var(--coral);
    --ps-error-bg:       var(--coral-bg);

    --ps-info:           var(--indigo-600);
    --ps-info-bg:        rgba(91, 87, 219, 0.08);

    --ps-neutral:        var(--muted);
    --ps-neutral-bg:     rgba(143, 143, 138, 0.10);

    --ps-shadow-xs:      var(--shadow-sm);
    --ps-shadow-sm:      var(--shadow-sm);
    --ps-shadow-md:      var(--shadow-md);
    --ps-shadow-lg:      var(--shadow-lg);
    --ps-focus-ring:     var(--shadow-glow);
}

/* Global typography defaults — keep here so any screen that opts in to
   tokens.css picks up Onest + tabular figures by default. */
html {
    font-family: var(--font-sans);
}

.mono,
.tnum,
[data-mono] {
    font-family: var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

/* ===========================================
   Content container
   ===========================================
   Page-content gutter for V2 list/detail surfaces. Caps at 1440 px so
   on 1920 px monitors the content gets equal left/right margins instead
   of stretching edge-to-edge. The handoff was drawn at 1920 px but
   designed for this 1440 px reading column (see previews/02-dashboard
   and previews/05-courts).

   Modifiers:
     .content-container--narrow  → 980 px when a split SidePanel adds a
                                   ~480 px column on the right (980+480
                                   ≈ 1460 px total, just over the 1440
                                   cap — the panel renders outside the
                                   reading column on purpose)
     .content-container--full    → no max-width — Connections-graph
                                   canvas needs the full viewport so its
                                   d3-force layout has room to breathe.
   =========================================== */
.content-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--s-8);
}

.content-container--narrow {
    max-width: 980px;
}

.content-container--full {
    max-width: none;
    padding-inline: 0;
}

/* ===========================================
   Table footer (handoff 3-part pattern, part c)
   ===========================================
   Single grey strip rendered INSIDE a table-wrap card, right after the
   closing </table>. Provides a "← N records · meta · Show all ↗" hint
   so the user sees at a glance how the filter is currently slicing the
   data and can clear it with one click.

   Use:
     <div class="ps-table-wrap">          (the white rounded card)
         <table>...</table>
         <div class="ps-table-footer">
             <span class="ps-table-footer-left mono">
                 <span class="ps-table-footer-arrow">←</span>
                 N записів
                 <span class="ps-table-footer-sep">·</span>
                 <span class="ps-table-footer-meta">фільтр показує K з M</span>
             </span>
             <button class="ps-table-footer-link">Показати всі ↗</button>
         </div>
     </div>

   Five surfaces use this (was duplicated per file before): TendersTabV2,
   EnforcementTabV2, TaxTabV2, MonitoringV2, AdminV2. CourtsTabV2 keeps
   its richer 4-col .ps-ct-summary because it surfaces multiple aggregates
   side-by-side.
   =========================================== */
.ps-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: var(--paper);
    border-top: 1px solid var(--border);
    font-family: var(--font-sans);
}

.ps-table-footer-left {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font: 500 13px/1.4 var(--font-mono);
    color: var(--body);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-table-footer-arrow {
    color: var(--muted);
    font-weight: 500;
}

.ps-table-footer-sep {
    color: var(--border-2);
    padding: 0 2px;
}

.ps-table-footer-meta {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
}

.ps-table-footer-link {
    border: none;
    background: transparent;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font: 500 13px/1.2 var(--font-sans);
    color: var(--indigo-600);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

    .ps-table-footer-link:hover {
        background: var(--indigo-50);
        color: var(--indigo-800);
    }

    .ps-table-footer-link:focus-visible {
        outline: none;
        box-shadow: var(--shadow-glow);
    }