/* ═══════════════════════════════════════════════════════════════════════
   Intelletto.ai Shared Theme — intelletto-theme.css
   LOCKED design tokens and shared components. Link this in every app:
     <link rel="stylesheet" href="/apps/intelletto-theme.css" />
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens — Elevated Light v2 ── */
:root {
  /* Core surfaces */
  --bg-dark:   #F5F7FC;
  --bg-panel:  #ECF0F7;
  --card:      #FFFFFF;

  /* Brand accents — unchanged */
  --teal: #25a1b0;
  --gold: #FFCB77;
  --green: #90CB87;
  --accent: #05869D;
  --accent-hover: #08AEAB;

  /* Categorical data colours — Information Is Beautiful, on paper.
     These name WHICH SECTION, never whether something is good or bad. The
     semantic trio (--green / --gold / --red) keeps that job; mixing the two
     sets makes a score band compete with a section's identity.

     Ratios against --bg-dark are recorded per token in
     v3/tests/palette/test_palette_tokens.py and reproduced by
     scripts/measure_palette.py. They are NOT uniform, deliberately:
     --viz-amber is 2.22:1 and is restricted to large fills, never behind
     text. Do not "fix" that by flattening the set — spec §4.1 measured what
     happens when you force uniform contrast on a CVD-safe palette, and it
     destroyed the very separation that made it worth adapting. Lightness
     variety is what a deuteranope reads.

     Spec: docs/superpowers/specs/2026-09-17-paper-palette-design.md */
  --viz-teal:   #0f9e94;
  --viz-blue:   #2f6fd6;
  --viz-amber:  #e09a1a;
  --viz-coral:  #e8563f;
  --viz-violet: #7b5be6;
  --viz-green:  #2a9d5c;

  /* Text-safe companions. The six above were measured as FILLS, where 3:1 is
     the bar. Spec D4 then requires every coloured element to carry a label —
     and those labels are 10-12px, where the bar is 4.5:1. Measured on the
     rendered card, every one of them failed: chips at 2.79-2.98, the amber
     count at 2.22, the 40px horizon numeral at 2.23.

     So: --viz-X fills, --viz-X-ink labels. Each ink clears 4.5:1 BOTH on
     paper and on its own 14% tint (the chip background), same hue and
     saturation, darkened only in lightness. Reproduce with
     scripts/measure_palette.py.

     These are not seven-through-twelve categories. An ink is the same
     section as its fill; never use one to mean a different thing. */
  --viz-teal-ink:   #0b716a;
  --viz-blue-ink:   #255fbd;
  --viz-amber-ink:  #8a5f10;
  --viz-coral-ink:  #bd2d17;
  --viz-violet-ink: #6742e2;
  /* Semantic red, darkened for small text. --red itself stays the fill. */
  --red-ink:        #bf2020;
  --viz-green-ink:  #1f7343;

  /* Pastel tints for KPI boxes (the owner, 20 Oct 2026: "KPI boxes should use different pastel colors"):
     each data colour at 14% on white, the chip background its ink above was measured on, and the same colour
     at 32% for the box's edge. Opaque on purpose, so a box reads the same on any page background and a
     contrast check reads the colour actually drawn. No violet: on dashboards violet marks what an AI produced. */
  --viz-teal-tint:  #ddf1f0;  --viz-teal-edge:  #b2e0dd;
  --viz-blue-tint:  #e2ebf9;  --viz-blue-edge:  #bcd1f2;
  --viz-amber-tint:  #fbf1df;  --viz-amber-edge:  #f5dfb6;
  --viz-green-tint:  #e1f1e8;  --viz-green-edge:  #bbe0cb;
  --viz-coral-tint:  #fce7e4;  --viz-coral-edge:  #f8c9c2;

  /* Six, not eight. The Employee Dashboard colours eight cards today and the
     first instinct was to keep all of them, but a 7th and 8th colour on paper
     has to be either hue-adjacent to one of these — which drops the
     deuteranopia/protanopia floor from ΔE 7.5 to 6.0 — or magenta, which
     muddies against --viz-violet. Neither is worth it for two sections that
     are not part of a comparable set: #employeeCard is the person's identity
     header and #engagementCard is narrative. Both take --text / --border,
     which is what spec §3.3 prescribes for reference rather than data. */

  /* Status — unchanged */
  --success: #10b981;
  --salmon: #d48268;
  --red: #e14b4b;
  --danger: #e14b4b;
  --ok: #10b981;

  /* Text — dark on light */
  --text:       #0D1829;
  --text-muted: #3D4E63;
  --muted:      rgba(13,24,41,.55);
  --text-2:     rgba(13,24,41,.80);

  /* Legacy text aliases (for apps that reference these) */
  --heading-dark: #0D1829;
  --body-dark: #0D1829;
  --muted-dark: #3D4E63;

  /* Borders & shadows — dark alpha on light */
  --border:   rgba(13,24,41,.10);
  --border-2: rgba(13,24,41,.16);
  --line:     rgba(13,24,41,.10);
  --shadow:   0 12px 36px rgba(13,24,41,.10);
  --radius: 18px;

  /* Topbar */
  --topbar:      #203a63;
  --topbar-text: #E8EDF5;

  /* Form inputs — unchanged */
  --input-bg: #D8E2E8;
  --input-border: #C4D4E3;
  --input-text: #21324a;
  --input-placeholder: #6b7f94;
  --input-focus-border: #25a1b0;
  --input-focus-shadow: 0 0 0 3px rgba(37, 161, 176, 0.14);
  --input: var(--card);

  /* Proficiency pills — unchanged */
  --pill-foundational: #CFD8DC;
  --pill-working: #90CAF9;
  --pill-proficient: #66BB6A;
  --pill-advanced: #5C6BC0;
  --pill-expert: #7E57C2;

  --result-row-h: 56px;
}


/* ── 2. Exit Button (.app-close) ──
   Red circle with black X. Place inside outer frame border.
   Add .app-close-floating for absolute top-right positioning.
   No inner HTML needed — X is formed by ::before/::after.
   ──────────────────────────────────────────────────────── */
.app-close {
  appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #d86d6d;
  background: #ff6b6b;
  color: transparent;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 28, 45, 0.12);
  position: relative;
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}
.app-close:hover {
  transform: scale(1.05);
  background: #ff7b7b;
  border-color: #c74e4e;
  box-shadow: 0 6px 12px rgba(15, 28, 45, 0.18);
}
.app-close:active {
  transform: scale(.97);
}
.app-close::before,
.app-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.8px;
  background: #111111;
  border-radius: 2px;
  transform-origin: center;
}
.app-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.app-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.app-close-floating {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
}


/* ── 3. Standard Buttons ──
   Height 42px, border-radius 12px, font-weight 800.
   Variants: .btn-primary, .btn-gold, .btn-ok, .btn-danger, .btn-ghost, .btn-secondary
   ──────────────────────────────────────────────────────── */
.btn-standard {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  color: #fff;
  font-family: inherit;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-standard:hover { transform: translateY(-2px); }
.btn-standard:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary, .btn-standard.teal { background: #25a1b0; color: #fff; }
.btn-primary:hover, .btn-standard.teal:hover { background: #2bb5c5; }

.btn-gold, .btn-standard.gold { background: #ffcb77; color: #2c2200; }
.btn-gold:hover, .btn-standard.gold:hover { background: #ffd590; }

.btn-ok, .btn-standard.ok { background: #10b981; color: #fff; }
.btn-ok:hover, .btn-standard.ok:hover { background: #14d194; }

.btn-danger, .btn-standard.danger { background: #e14b4b; color: #fff; }
.btn-danger:hover, .btn-standard.danger:hover { background: #eb6060; }

.btn-ghost, .btn-standard.ghost { background: #fff; color: #16334d; border: 1px solid #c4d4e3; }
.btn-ghost:hover, .btn-standard.ghost:hover { background: #f4f8fc; }

.btn-secondary, .btn-standard.secondary { background: #5e7ca0; color: #fff; }
.btn-secondary:hover, .btn-standard.secondary:hover { background: #6e8db3; }


/* ── 4. Form Inputs (white content areas) ──
   Use inside white-bg panels for data entry.
   Background: #D8E2E8 (light blue-gray), teal focus ring.
   ──────────────────────────────────────────────────────── */
.it-input,
.it-select,
.it-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  color: var(--input-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.it-input::placeholder,
.it-textarea::placeholder {
  color: var(--input-placeholder);
}
.it-input:focus,
.it-select:focus,
.it-textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}
.it-textarea { resize: vertical; min-height: 60px; }
.it-select { cursor: pointer; }

/* Label standard for white content */
.it-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-dark);
}


/* ── 5. KPI Tiles ──
   Dark variant (.kpi-dark): for dashboards on dark backgrounds.
   Light variant (.kpi-light): for white content panels.
   ──────────────────────────────────────────────────────── */
.kpi-dark,
.kpi-light {
  background: var(--bg-dark);
  border: 1px solid var(--border-2);
  border-left: 6px solid var(--teal);
  border-radius: 14px;
  padding: 14px 16px;
}
.kpi-dark .kpi-label,
.kpi-light .kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 4px;
  font-weight: 700;
}
.kpi-dark .kpi-value,
.kpi-light .kpi-value {
  font-size: 26px;
  font-weight: 900;
  margin: 0;
  line-height: 1.15;
  color: var(--text);
}


/* ── 6. Score Banding ── */
.score-high { background: #edf9f2; }
.score-good { background: #fff9e7; }
.score-mid  { background: #fff2e8; }
.score-low  { background: #fff0f0; }

.score-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.score-chip-high { background: #dff3e7; color: #0e6b3a; }
.score-chip-good { background: #fff0bd; color: #8a6d00; }
.score-chip-mid  { background: #ffe0cf; color: #a04e00; }
.score-chip-low  { background: #ffd4d4; color: #b32828; }


/* ── 7. Common Layout Helpers ── */

/* White content area standard */
.it-content {
  background: #ffffff;
  color: var(--body-dark);
}
.it-content h1,
.it-content h2,
.it-content h3 {
  color: var(--heading-dark);
}

/* Standard card */
.it-card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(13,24,41,.08);
  margin-bottom: 14px;
}

/* Section title */
.it-section-title {
  margin: 20px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .02em;
}

/* Sticky action bar */
.it-sticky-actions {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,247,252,.92));
  backdrop-filter: blur(8px);
}

/* Badge / pill */
.it-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(5,134,157,.35);
  color: #05869d;
  background: rgba(5,134,157,.10);
}

/* Grid helpers */
.it-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px; }
.it-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 12px; }
.it-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; }


/* ── 8. Print Stylesheet — theme v2 §14.7 ──
   Mirrors _hire-shared.css's print block for non-hire pages that use
   this global theme directly (RCC, pool-search, intake-*, JD pages
   etc). Hides chrome, switches surfaces to white, removes shadows,
   ensures status pills read on greyscale printers.
   ──────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #0D1829 !important; }

  /* Chrome elements common across the non-hire surfaces. */
  .topbar, .top-bar, .app-close, .module-tabs,
  .toolbar, .filter-row, .row-actions,
  .drawer-overlay, .modal-overlay, .toast,
  .drawer-actions, .bulk, .btn,
  #identity-chip, .identity-chip { display: none !important; }

  .drawer {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Surfaces, cards, tiles → paper white. */
  .tile, .card, .stat-card, .panel, .pricing-table {
    background: #fff !important;
    box-shadow: none !important;
    border-color: rgba(13,24,41,.30) !important;
  }

  th { background: #fff !important; border-color: rgba(13,24,41,.40) !important; }
  td { border-color: rgba(13,24,41,.20) !important; }

  .status-pill, .pill, .state-pill, .fchip, .chip {
    background: #fff !important;
    color: #0D1829 !important;
    border: 1px solid rgba(13,24,41,.45) !important;
  }

  table, tr { page-break-inside: avoid; }
  thead { display: table-header-group; }

  input, select, textarea {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(13,24,41,.30) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #0D1829 !important;
  }

  .no-print { display: none !important; }
  .print-only { display: initial !important; }
  a, a:visited { color: #0D1829 !important; text-decoration: none !important; }
}


/* ── 9. Exit Button Script Helper ──
   Apps that use app-close should include this onclick handler pattern:
   onclick="intellettoExit()"
   ──────────────────────────────────────────────────────── */

/* ── busy / loading ───────────────────────────────────────────────────
   Namespaced `busy-` deliberately: three apps define their own
   `.skeleton` (executive-dashboard's is a padded centred text box).
   A bare `.skeleton` here would leak background/animation into them. */
@keyframes busy-rotate { to { transform: rotate(360deg) } }
@keyframes busy-sheen  { to { background-position-x: -200% } }

[aria-busy="true"] { cursor: progress }

.busy-skeleton {
  background: linear-gradient(90deg,
              var(--bg-panel) 25%, #F4F7FB 37%, var(--bg-panel) 63%);
  background-size: 200% 100%;
  animation: busy-sheen 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.busy-skeleton--label { height: 10px; width: 40%; margin: 4px 0 }
.busy-skeleton--value { height: 26px; width: 60%; margin: 6px 0 }
.busy-skeleton--row   { height: 44px; margin-bottom: 8px }

.busy-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  animation: busy-rotate .7s linear infinite;
}

.busy-fail        { padding: 20px; background: var(--card);
                    border: 1px solid var(--border); border-radius: 8px }
.busy-fail-title  { color: var(--text); font-weight: 600; margin-bottom: 4px }
.busy-fail-detail { color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
                    font-size: 12px; margin-bottom: 10px }
.busy-fail-retry  { color: var(--accent); background: none; cursor: pointer;
                    border: 1px solid var(--border-2); border-radius: 6px;
                    padding: 6px 12px; font: inherit }

@media (prefers-reduced-motion: reduce) {
  .busy-skeleton { animation: none; background: var(--border-2) }
  .busy-spin     { animation-duration: 2.4s }
}