/* ═══════════════════════════════════════════════════════════════════════
   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;

  /* 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. Exit Button Script Helper ──
   Apps that use app-close should include this onclick handler pattern:
   onclick="intellettoExit()"
   ──────────────────────────────────────────────────────── */