/* ============================================================================
   tokens.css — TiSh global design token layer (UI plan item B2)
   ----------------------------------------------------------------------------
   Single source of truth for colors, typography, spacing and shape.
   Loaded in index.html BEFORE css/app.css so page-level <style> blocks can
   still override when needed. Page/component CSS should reference these
   custom properties (var(--tish-*)) instead of hardcoding hex values.

   NOTE: This file establishes the token layer only. Per-page hex -> token
   refactors are done incrementally by later agents.
   ============================================================================ */


:root {
    /* -- Brand colors (iSolve blue + yellow) -- */
    --tish-blue: #326296;            /* primary — structure, buttons, chrome */
    --tish-yellow: #FDC62F;          /* accent — highlights, active markers, favorites */
    --tish-primary: #326296;
    --tish-primary-hover: #2a5280;
    --tish-primary-muted: var(--tish-ice-blue);
    --tish-primary-subtle: var(--tish-ice-blue);
    --tish-primary-shadow: rgba(50, 98, 150, 0.18);
    --tish-accent: #FDC62F;
    --tish-accent-muted: rgba(253, 198, 47, 0.18);
    --tish-accent-subtle: rgba(253, 198, 47, 0.10);
    --tish-accent-shadow: rgba(253, 198, 47, 0.25);
    --tish-accent-foreground: #7a5f00;

    /* -- Palette 1 (light mode) — corporate + warm -- */
    --tish-midnight-navy: #1A1F2E;   /* headings, primary text — replaces pure black */
    --tish-cool-white: #F4F6F9;        /* page background */
    --tish-ice-blue: #E8F0FB;          /* selected state, info banners, hover backgrounds */
    --tish-tangerine: #FF6B35;         /* alerts, urgent status badges */
    --tish-emerald: #2DBE6C;           /* success states, open case badges */
    --tish-tangerine-muted: rgba(255, 107, 53, 0.14);
    --tish-tangerine-subtle: rgba(255, 107, 53, 0.08);
    --tish-emerald-muted: rgba(45, 190, 108, 0.14);
    --tish-emerald-subtle: rgba(45, 190, 108, 0.08);

    /* -- Palette 2 — produce-inspired (used by Produce theme) -- */
    --tish-produce-green: #3D7A3D;   /* success, active, confirmed */
    --tish-tomato-red: #E8542A;        /* error, critical, overdue */
    --tish-eggplant: #7B5EA7;          /* accent, premium features, role badges */
    --tish-citrus-amber: #F5A623;      /* warning, pending */
    --tish-dark-mustard: #8B6914;      /* text on yellow badges */
    --tish-produce-green-muted: rgba(61, 122, 61, 0.14);
    --tish-produce-green-subtle: rgba(61, 122, 61, 0.08);
    --tish-tomato-muted: rgba(232, 84, 42, 0.14);
    --tish-tomato-subtle: rgba(232, 84, 42, 0.08);
    --tish-eggplant-muted: rgba(123, 94, 167, 0.14);
    --tish-eggplant-subtle: rgba(123, 94, 167, 0.08);
    --tish-citrus-muted: rgba(245, 166, 35, 0.14);
    --tish-citrus-subtle: rgba(245, 166, 35, 0.08);

    /* -- Palette 3 — cool professional (used by Cool Cat theme) -- */
    --tish-periwinkle: #5E6AD2;      /* secondary accent — links, highlights, focus rings */
    --tish-cyan: #26B5CE;              /* info states, data viz */
    --tish-ghost-gray: #F2F3F5;        /* disabled, inactive tabs, secondary surfaces */
    --tish-slate: #6B7280;             /* secondary text, metadata, timestamps */
    --tish-periwinkle-muted: rgba(94, 106, 210, 0.14);
    --tish-periwinkle-subtle: rgba(94, 106, 210, 0.08);
    --tish-cyan-muted: rgba(38, 181, 206, 0.14);
    --tish-cyan-subtle: rgba(38, 181, 206, 0.08);

    /* -- Categorical palette — distinct, evenly-distinguishable hues for "N of a kind"
       coloring: assign one per item when several need to read as separate (worklog timeline
       tasks, calendar color options, role colors, chart series, …). Use in numbered order
       (1 → 9) for the most separation between adjacent items; cycle back to 1 past 9.
       Mirrored in C# at TeamiSolveHub.WebApp/Helpers/TishPalette.cs (consumers like the canvas
       timeline need the hex values in code) — keep the two lists in sync. -- */
    --tish-cat-1: #5B8CCC;   /* Sky */
    --tish-cat-2: #2CA87A;   /* Produce Green */
    --tish-cat-3: #E8874A;   /* Tangerine */
    --tish-cat-4: #C94F6E;   /* Berry */
    --tish-cat-5: #7B6FD4;   /* Lavender */
    --tish-cat-6: #3AABBD;   /* Teal */
    --tish-cat-7: #D4A820;   /* Amber */
    --tish-cat-8: #B05A2F;   /* Russet */
    --tish-cat-9: #6E8E6B;   /* Sage */

    /* -- Sidebar (iSolve blue chrome) -- */
    --tish-sidebar-bg: var(--tish-blue);
    --tish-sidebar-border: #2a5280;
    --tish-sidebar-bg-hover: rgba(255, 255, 255, 0.10);
    --tish-sidebar-bg-active: rgba(255, 255, 255, 0.14);
    --tish-sidebar-text: rgba(255, 255, 255, 0.92);
    --tish-sidebar-text-muted: rgba(255, 255, 255, 0.55);
    --tish-sidebar-divider: rgba(255, 255, 255, 0.14);
    --tish-sidebar-footer-bg: rgba(0, 0, 0, 0.12);

    /* -- Chrome (sidebar logo + top bar share these) -- */
    --tish-chrome-height: 56px;
    --tish-chrome-stripe: 3px;

    /* -- Text -- */
    --tish-text-primary: var(--tish-midnight-navy); /* headings, primary body text */
    --tish-text-secondary: #5e6c84;  /* subtitles, muted meta text */

    /* -- Surfaces & lines -- */
    --tish-border: #dfe1e6;          /* card / divider borders */
    --tish-surface: #ffffff;         /* card / panel background */
    --tish-bg: var(--tish-cool-white); /* app / page background */

    /* -- Semantic states (Palette 1) -- */
    --tish-hover-bg: var(--tish-ice-blue);
    --tish-selected-bg: var(--tish-ice-blue);
    --tish-info-bg: var(--tish-ice-blue);
    --tish-success: var(--tish-emerald);
    --tish-error: var(--tish-tangerine);
    --tish-urgent: var(--tish-tangerine);
    --tish-warning: var(--tish-tangerine);
    --tish-premium: var(--tish-blue);

    /* -- Typography -- */
    --tish-font-heading: 'Algera Demibold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tish-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --tish-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;

    /* -- Shape -- */
    --tish-radius-card: 8px;         /* cards, panels, large surfaces */
    --tish-radius-chip: 4px;         /* chips, small tags, inputs */

    /* -- Spacing scale -- */
    --tish-space-1: 0.25rem;         /* 4px */
    --tish-space-2: 0.5rem;          /* 8px */
    --tish-space-3: 1rem;            /* 16px */
    --tish-space-4: 1.5rem;          /* 24px */

    /* -- Severity chips (produce palette — solid pills) -- */
    --tish-sev-low: #22C55E;
    --tish-sev-medium: #FDC62F;
    --tish-sev-high: #F97316;
    --tish-sev-critical: #DC2626;

    /* -- Tab bar (TabBar.razor) -- */
    --tish-tab-inactive-bg: var(--tish-surface);
    --tish-tab-inactive-bg-hover: var(--tish-surface);
    --tish-tab-active-bg: var(--tish-surface);
    --tish-tab-shadow: rgba(26, 31, 46, 0.05);
    --tish-tab-shadow-hover: rgba(26, 31, 46, 0.12);
    --tish-tab-shadow-active: rgba(26, 31, 46, 0.08);
    --tish-tab-shadow-active-hover: rgba(26, 31, 46, 0.1);
}

/* ---------------------------------------------------------------------------
   Shared case-number style (UI plan item S2).
   Consolidates the per-page .cm-mono / .ce-caseno styles into one class so
   every place that renders a case number looks identical. Monospace, slightly
   muted, with a touch of letter-spacing for legibility of digit runs.
   --------------------------------------------------------------------------- */
.tish-case-no {
    font-family: var(--tish-font-mono);
    font-size: 0.8125rem;
    color: var(--tish-text-secondary);
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Shared loading spinner (LoadingSpinner.razor).
   Use <LoadingSpinner /> for page/panel loads; Inline for embedded spinners.
   --------------------------------------------------------------------------- */
.tish-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tish-space-2);
    padding: var(--tish-space-4) var(--tish-space-3);
    color: var(--tish-text-secondary);
    font-family: var(--tish-font-body);
    font-size: 0.875rem;
}

.tish-loading--compact {
    padding: var(--tish-space-3) var(--tish-space-2);
    font-size: 0.8125rem;
}

.tish-loading--on-dark {
    color: var(--tish-sidebar-text-muted);
}

.tish-loading__text {
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Severity chips — universal solid pills (Bug Management, Bug Report, etc.).
   Colors: Low #22C55E · Medium #FDC62F · High #F97316 · Critical #DC2626
   --------------------------------------------------------------------------- */
.tish-sev-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--tish-radius-chip);
    font-family: var(--tish-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.35;
}

.tish-sev-chip--critical { background: var(--tish-sev-critical); color: #ffffff; }
.tish-sev-chip--high     { background: var(--tish-sev-high);     color: #ffffff; }
.tish-sev-chip--medium   { background: var(--tish-sev-medium);   color: var(--tish-midnight-navy, #1A1F2E); }
.tish-sev-chip--low      { background: var(--tish-sev-low);      color: #ffffff; }

/* ---------------------------------------------------------------------------
   Work item type glyphs — bug_report + lightbulb (Bug Form, Bug Management).
   --------------------------------------------------------------------------- */
.tish-type-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--tish-radius-chip);
    flex-shrink: 0;
    line-height: 1;
}

.tish-type-glyph .mud-icon-root,
.tish-type-glyph .rzi {
    font-size: 16px !important;
    color: inherit;
}

.tish-type-glyph--bug {
    background: var(--tish-tomato-subtle);
    color: var(--tish-tomato-red);
}

.tish-type-glyph--feature {
    background: var(--tish-accent-subtle);
    color: var(--tish-dark-mustard);
}

/* Bug Form type segment — active button inverts glyph on solid fill */
.bf-segment-btn.active .tish-type-glyph--bug {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.bf-segment-btn--feature.active .tish-type-glyph--feature {
    background: rgba(122, 95, 0, 0.14);
    color: var(--tish-accent-foreground);
}

/* ---------------------------------------------------------------------------
   Dark theme — activated via data-tish-theme="dark" on <html>.
   Brand blue/yellow stay the same; surfaces and text invert for low-light use.
   --------------------------------------------------------------------------- */
[data-tish-theme="dark"] {
    --tish-primary-muted: rgba(50, 98, 150, 0.22);
    --tish-primary-subtle: rgba(50, 98, 150, 0.14);
    --tish-primary-shadow: rgba(0, 0, 0, 0.35);
    --tish-accent-muted: rgba(253, 198, 47, 0.22);
    --tish-accent-subtle: rgba(253, 198, 47, 0.12);
    --tish-accent-shadow: rgba(0, 0, 0, 0.35);
    --tish-accent-foreground: #FDC62F;

    --tish-text-primary: #e8edf5;
    --tish-text-secondary: #94a3b8;

    --tish-border: #334155;
    --tish-surface: #1e293b;
    --tish-bg: #0f172a;

    /* Sidebar — deep navy chrome that sits between page bg and content surface */
    --tish-sidebar-bg: #0c1524;
    --tish-sidebar-border: #1e293b;
    --tish-sidebar-bg-hover: rgba(255, 255, 255, 0.06);
    --tish-sidebar-bg-active: rgba(74, 122, 176, 0.20);
    --tish-sidebar-text: #e8edf5;
    --tish-sidebar-text-muted: #64748b;
    --tish-sidebar-divider: rgba(255, 255, 255, 0.08);
    --tish-sidebar-footer-bg: rgba(0, 0, 0, 0.25);

    --tish-tab-inactive-bg: #172033;
    --tish-tab-inactive-bg-hover: #1e2a3d;
    --tish-tab-active-bg: var(--tish-surface);
    --tish-tab-shadow: rgba(0, 0, 0, 0.18);
    --tish-tab-shadow-hover: rgba(0, 0, 0, 0.28);
    --tish-tab-shadow-active: rgba(0, 0, 0, 0.22);
    --tish-tab-shadow-active-hover: rgba(0, 0, 0, 0.26);
}

/* ---------------------------------------------------------------------------
   Produce theme — Palette 2 semantics on anchor blue (#326296) + yellow (#FDC62F).
   Light surfaces stay on Palette 1; state/accent colors shift to produce-inspired hues.
   --------------------------------------------------------------------------- */
[data-tish-theme="produce"] {
    --tish-accent-foreground: var(--tish-dark-mustard);

    --tish-primary-muted: var(--tish-produce-green-muted);
    --tish-primary-subtle: var(--tish-produce-green-subtle);

    --tish-hover-bg: var(--tish-produce-green-subtle);
    --tish-selected-bg: var(--tish-produce-green-muted);
    --tish-info-bg: var(--tish-eggplant-subtle);

    --tish-success: var(--tish-produce-green);
    --tish-error: var(--tish-tomato-red);
    --tish-urgent: var(--tish-tomato-red);
    --tish-warning: var(--tish-citrus-amber);
    --tish-premium: var(--tish-eggplant);
}

/* ---------------------------------------------------------------------------
   Cool Cat theme — Palette 3 semantics on anchor blue (#326296) + yellow (#FDC62F).
   Cool professional tone (Linear / Atlassian); periwinkle + cyan accents on neutral grays.
   --------------------------------------------------------------------------- */
[data-tish-theme="coolcat"] {
    --tish-text-secondary: var(--tish-slate);

    --tish-bg: var(--tish-ghost-gray);
    --tish-surface-secondary: var(--tish-ghost-gray);
    --tish-disabled-bg: var(--tish-ghost-gray);

    --tish-primary-muted: var(--tish-periwinkle-muted);
    --tish-primary-subtle: var(--tish-periwinkle-subtle);

    --tish-hover-bg: var(--tish-periwinkle-subtle);
    --tish-selected-bg: var(--tish-periwinkle-muted);
    --tish-info-bg: var(--tish-cyan-subtle);

    --tish-link: var(--tish-periwinkle);
    --tish-focus: var(--tish-periwinkle);
    --tish-accent-secondary: var(--tish-periwinkle);
    --tish-info: var(--tish-cyan);

    --tish-tab-inactive-bg: var(--tish-ghost-gray);
    --tish-tab-inactive-bg-hover: #e8e9ec;
}