@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-last-center {
    text-align-last: center;
  }
}

/* Pagy Pagination Styles */
nav.pagy.series-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
}

nav.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #374151;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  min-width: 2.5rem;
  text-decoration: none;
}

nav.pagy.series-nav a:hover:not([aria-disabled="true"]) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

nav.pagy.series-nav a:focus:not([aria-disabled="true"]) {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1;
}

/* Current page */
nav.pagy.series-nav a[aria-current="page"] {
  background-color: #0A2261;
  border-color: #0A2261;
  color: #ffffff;
  font-weight: 600;
}

/* Disabled states (previous on first page, next on last page) */
nav.pagy.series-nav a[aria-disabled="true"]:not([aria-current="page"]) {
  color: #9ca3af;
  cursor: not-allowed;
  background-color: #f9fafb;
}

/* Gap separator */
nav.pagy.series-nav a[role="separator"] {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
}

/* AI Assistant — markdown rendering inside chat bubbles */
.ai-markdown > *:first-child { margin-top: 0; }
.ai-markdown > *:last-child  { margin-bottom: 0; }
.ai-markdown p { margin: 0.5rem 0; }
.ai-markdown h1 { font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.4rem; }
.ai-markdown h2 { font-size: 1.0rem;  font-weight: 600; margin: 0.7rem 0 0.35rem; }
.ai-markdown h3 { font-size: 0.95rem; font-weight: 600; margin: 0.6rem 0 0.3rem; }
.ai-markdown h4, .ai-markdown h5, .ai-markdown h6 { font-size: 0.9rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.ai-markdown ul { list-style: disc; padding-left: 1.25rem; margin: 0.4rem 0; }
.ai-markdown ol { list-style: decimal; padding-left: 1.5rem; margin: 0.4rem 0; }
.ai-markdown li { margin: 0.15rem 0; }
.ai-markdown li > p { margin: 0.15rem 0; }
.ai-markdown a { color: #0A2261; text-decoration: underline; }
.ai-markdown a:hover { color: #0c2d7a; }
.ai-markdown blockquote {
  border-left: 3px solid #d1d5db;
  padding: 0.1rem 0.75rem;
  color: #4b5563;
  margin: 0.5rem 0;
  background: rgba(0,0,0,0.02);
}
.ai-markdown code {
  background: rgba(0,0,0,0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.ai-markdown pre {
  background: #1f2937;
  color: #f3f4f6;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.6rem 0;
  font-size: 0.8rem;
  line-height: 1.45;
}
.ai-markdown pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.ai-markdown table {
  border-collapse: collapse;
  margin: 0.6rem 0;
  width: 100%;
  font-size: 0.85rem;
}
.ai-markdown th, .ai-markdown td {
  border: 1px solid #e5e7eb;
  padding: 0.35rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.ai-markdown th {
  background: #f3f4f6;
  font-weight: 600;
}
.ai-markdown hr { border: 0; border-top: 1px solid #e5e7eb; margin: 0.75rem 0; }
.ai-markdown del { color: #6b7280; }

/* AI Assistant — typing indicator dots (animated). Defined here so Tailwind
   purge doesn't drop it and CSP doesn't block JS-injected styles. */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ai-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: #6b7280;
  opacity: 0.3;
  animation: ai-typing-blink 1.2s infinite ease-in-out;
  display: inline-block;
}
.ai-typing-dot:nth-child(1) { animation-delay: 0s; }
.ai-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes ai-typing-blink {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.3; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* AUD-U7: submit busy-state feedback. Toggled by the turbo:submit-start /
   turbo:submit-end listener in application.js. Opacity+cursor (not a
   ::after spinner) because many submitters are <input type="submit">
   (f.submit), and ::after doesn't render on replaced input elements. */
.turbo-submitting {
  opacity: 0.6;
  cursor: wait !important;
}
/* ==========================================================================
   INCENTIVE & RATING CONSOLE — design system
   ==========================================================================
   Faithful port of the client-approved prototype
   (~/Downloads/Incentive_Rating_System/Incentive_Console.html <style> block).

   HARD RULE: every selector in this file is scoped under `.ic-console`.
   Nothing here targets bare `body`, `table`, `select`, `th`, `td`, etc. —
   that would leak into the rest of the CRM. Builder-E: wrap every console
   page's root element in `<div class="ic-console">…</div>` or none of this
   will apply.

   CLASS VOCABULARY (what to use where)
   --------------------------------------------------------------------------
   SHELL / LAYOUT
     .ic-console          root wrapper — REQUIRED on every page. Sets fonts,
                           base colors, and hosts the --ic-* custom properties.
     .ic-shell             flex row: sidebar + main content
     .ic-sidebar            dark gradient sidebar, sticky, full height
     .ic-brand                sidebar header (small eyebrow + h1 title)
     .ic-nav                 vertical nav button stack
     .ic-nav-item               nav button; add `.is-active` for current page
     .ic-nav-icon                  leading icon glyph span inside a nav item
     .ic-sidebar-foot          bottom-pinned sidebar footer (text + button)

   TOP AREA
     .ic-topbar             page heading row (title + subtitle, flex-wrap)
     .ic-periodbar           the period-control bar (segmented + prev/next)
     .ic-seg                    segmented control track (Month/Quarter/…)
     .ic-seg-btn                   segment button; `.is-on` = selected
     .ic-navp                   prev/next-arrow + center select group
     .ic-label                  small uppercase label ("Period", "Show", …)
     .ic-spacer                  flex:1 filler to push following items right

   CONTENT
     .ic-page                section-level page container; `.is-on` = visible
                              (display:none otherwise, fades in on show)
     .ic-kpis                4-col KPI tile grid (collapses to 2 col ≤1100px)
     .ic-kpi                   one KPI tile; combine with an accent modifier:
                                `.ic-kpi--brand` `.ic-kpi--good`
                                `.ic-kpi--brand2` `.ic-kpi--warn`
     .ic-kpi-lab                 label text (uppercase, muted)
     .ic-kpi-val                 big value text
     .ic-kpi-sub                 secondary caption under the value
     .ic-kpi-accent               decorative corner circle (needs accent mod.
                                   on the parent `.ic-kpi` to pick a color)
     .ic-grid                 generic gap grid; pair with a column modifier:
                               `.ic-grid-2` (1fr 1fr) `.ic-grid-3` (1.4fr 1fr)
     .ic-card                 white panel: rounded, bordered, shadowed
     .ic-card-hint               muted helper line under a card's h3
     .ic-chart-wrap            canvas/chart container, `position:relative`;
                                modifiers `.ic-chart-wrap--tall` (330px),
                                `.ic-chart-wrap--short` (200px), default 280px
     .ic-chart-host              full-size div an ECharts instance mounts on
                                  directly, inside `.ic-chart-wrap` (P4)
     .ic-gap                  margin-bottom:16px spacer — put on a standalone
                                `.ic-card`/`.ic-grid` between sections instead
                                of an inline style (D7, P4)
     .ic-tools                toolbar row above a table (search/filters)
     .ic-empty-row             "no rows" placeholder <tr>'s single wide <td>
                                (P4, replaces an inline-styled empty state)

   DATA / TABLES
     .ic-tbl-scroll           scroll container around a table — ALWAYS wrap
                               wide tables in this; overflow:auto, own radius.
                               Prevents page-level horizontal scroll.
     .ic-table                the table itself: sticky header, hover rows;
                                add `.num` to any `th`/`td` that should
                                right-align (money/numeric columns)
     .ic-money                tabular-nums, semibold — use on money cells
     .ic-barcell               inline progress-bar cell wrapper (flex)
     .ic-barcell-track            bar track (background rail)
     .ic-barcell-fill               bar fill (set width % + a background)
     .ic-row-clickable         <tr> that opens a drill-down modal on click
                                 (cursor:pointer; Sourcing Incentives #13)
     .ic-link                  plain-text clickable cell VALUE (not a whole
                                 row) that opens a drill-down modal — strips
                                 <button> chrome, underlined brand-color text
                                 (Task-ID/Total/Rating drill-downs, C1/C2/C6)

   CHIPS (status / class / grade)
     .ic-chip                 base pill shape; combine with exactly one:
       .ic-chip--elig            eligible/payable (green)
       .ic-chip--pending         pending (amber)
       .ic-chip--cls1..--cls5    difficulty-class bands (indigo/sky/purple/
                                  rose/lime — cls4/cls5 included for future
                                  classes beyond the 3 seeded ones)
       .ic-chip--grade-ap         grade A+ (green)
       .ic-chip--grade-a          grade A (teal-green)
       .ic-chip--grade-b          grade B (blue)
       .ic-chip--grade-c          grade C (amber)
       .ic-chip--grade-d          grade D (red)
     .ic-pill                 neutral small pill (counts, source tags)
     .ic-pill--score           inline indigo mini-pill (e.g. "+10" in rule text)
     .ic-pill--unit             inline green mini-pill (e.g. "₹" unit callouts)

   FORMS
     .ic-input / .ic-select   text/number input & select styling (also
                               applied automatically to bare `select`,
                               `input[type=text]`, `input[type=number]`
                               *inside* `.ic-console` — use the classes on
                               anything else, e.g. a styled wrapper)
     .ic-select--manual        narrower select for a manual per-task input cell
     .ic-input--manual-num     narrow centered number input for the same
     .ic-inline-error          small red validation line under a live-edit
                                 input/select (Task Incentives #update, 422/403)

   BUTTONS
     .ic-btn                  primary filled button; modifiers:
       .ic-btn--ghost            outlined, brand-colored text
       .ic-btn--gray             neutral gray, for "discard"-type actions
       .ic-btn--danger           white bg, red border/text
       .ic-btn--sm               smaller padding/font size
                               (`:disabled` is handled automatically)

   SECTIONS / PARAMETERS PAGE
     .ic-section-title         uppercase section divider label with icon
     .ic-param-grid             3-col grid of parameter cards (≥1100px)
     .ic-pcard                    one parameter card
     .ic-prow                       label+input row inside a pcard
     .ic-note                  info callout box (indigo tinted)
     .ic-save-bar               sticky bottom action bar (discard/save)

   CLASSES & PEOPLE PAGE
     .ic-clstabs                class-selector tab row
     .ic-clstab                    one tab; `.is-active` = selected class,
                                    `.ic-clstab--add` = dashed "+ add" tab
     .ic-thr-grid                2-col grid of threshold cards (1-col ≤900px)
     .ic-tcard                     one threshold card
     .ic-tcard-h                      card heading
     .ic-tcard-rule                   muted rule-description paragraph
     .ic-tcard-ins                    flex row of input groups
     .ic-tcard-field                     one label+input group
     .ic-name-row                  class-name label+input row (left-aligned,
                                     wide) — NOT `.ic-prow` (that's the
                                     narrow right-aligned Parameters-page
                                     convention; #16)
     .ic-input--slab                narrow number input for the sourcing-slab
                                      from/to/incentive editor (#15)

   MODAL (task/employee detail drill-down)
     .ic-modal-bg              fixed full-screen overlay; `.is-on` = shown
     .ic-modal                    the modal panel itself
     .ic-modal-head                  header row (title + close button)
     .ic-modal-close                    close (×) button
     .ic-modal-body                  scrollable body padding
     .ic-breakdown                 key/value breakdown list (grid);
                                    `.k` = label cell, `.v` = value cell,
                                    add `.is-total` on the final row for the
                                    bold divider-topped grand total

   Design tokens (--ic-*) are declared on `.ic-console` itself (not `:root`)
   so this file has zero global footprint — see block below.
   ========================================================================== */

.ic-console,
.ic-console *,
.ic-console *::before,
.ic-console *::after {
  box-sizing: border-box;
}

.ic-console {
  --ic-panel: #ffffff;
  --ic-ink: #0f172a;
  --ic-muted: #64748b;
  --ic-line: #e5e9f0;
  --ic-brand: #4f46e5;
  --ic-brand2: #0ea5e9;
  --ic-good: #10b981;
  --ic-warn: #f59e0b;
  --ic-bad: #ef4444;
  --ic-soft: #f1f5f9;
  --ic-bg: #f6f7fb;
  --ic-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --ic-sidebar: linear-gradient(180deg, #111827, #1e293b);

  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--ic-bg);
  color: var(--ic-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- shell / sidebar ---------- */
.ic-console .ic-shell { display: flex; min-height: 100vh; }

.ic-console .ic-sidebar {
  width: 238px;
  background: var(--ic-sidebar);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
}

.ic-console .ic-brand { padding: 22px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ic-console .ic-brand h1 { font-size: 16px; margin: 0; color: #fff; letter-spacing: .2px; }
.ic-console .ic-brand small { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }

/* Back-to-CRM button, top of sidebar (#19) — reuses .ic-btn--ghost (white
   bg) so it stands out against the dark sidebar without new button styles. */
.ic-console .ic-sidebar-top-action { padding: 12px 20px 0; }
.ic-console .ic-btn--block { display: block; width: 100%; text-align: center; text-decoration: none; }

.ic-console .ic-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.ic-console .ic-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #cbd5e1;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
}
.ic-console .ic-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ic-console .ic-nav-item.is-active { background: var(--ic-brand); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .35); }
.ic-console .ic-nav-icon { width: 18px; text-align: center; font-size: 15px; }

.ic-console .ic-sidebar-foot { margin-top: auto; padding: 16px 18px; font-size: 11px; color: #64748b; border-top: 1px solid rgba(255, 255, 255, .08); }
.ic-console .ic-sidebar-foot button {
  margin-top: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 11.5px;
  width: 100%;
  font-family: inherit;
}
.ic-console .ic-sidebar-foot button:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ic-console .ic-main { flex: 1; min-width: 0; padding: 22px 30px 60px; }

/* ---------- topbar ---------- */
.ic-console .ic-topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.ic-console .ic-topbar h2 { margin: 0; font-size: 22px; letter-spacing: -.3px; }
.ic-console .ic-topbar p { margin: 4px 0 0; color: var(--ic-muted); font-size: 13px; }

/* ---------- forms ---------- */
.ic-console select,
.ic-console input[type="text"],
.ic-console input[type="number"],
.ic-console .ic-input,
.ic-console .ic-select {
  border: 1px solid var(--ic-line);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  background: #fff;
  color: var(--ic-ink);
  outline: none;
  font-family: inherit;
}
.ic-console select:focus,
.ic-console input:focus {
  border-color: var(--ic-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* ---------- period bar ---------- */
.ic-console .ic-periodbar-right { display: inline-flex; align-items: center; }
.ic-console .ic-periodbar-right form { margin: 0; }
.ic-console .ic-periodbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: var(--ic-shadow);
}
.ic-console .ic-seg { display: inline-flex; background: var(--ic-soft); border-radius: 10px; padding: 3px; }
.ic-console .ic-seg-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ic-muted); cursor: pointer; font-family: inherit; }
.ic-console .ic-seg-btn.is-on { background: #fff; color: var(--ic-brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ic-console .ic-navp { display: flex; align-items: center; gap: 6px; }
.ic-console .ic-navp button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ic-line); background: #fff; cursor: pointer; font-size: 16px; color: var(--ic-ink); }
.ic-console .ic-navp button:hover { background: var(--ic-soft); }
.ic-console .ic-navp select { font-weight: 700; min-width: 140px; text-align: center; }
.ic-console .ic-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ic-muted); font-weight: 700; }
.ic-console .ic-spacer { flex: 1; }

/* ---------- page transitions ---------- */
.ic-console .ic-page { display: none; animation: ic-fade .25s ease; }
.ic-console .ic-page.is-on { display: block; }
@keyframes ic-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- KPI tiles ---------- */
.ic-console .ic-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.ic-console .ic-kpi { background: var(--ic-panel); border: 1px solid var(--ic-line); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--ic-shadow); position: relative; overflow: hidden; }
.ic-console .ic-kpi-lab { font-size: 12px; color: var(--ic-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.ic-console .ic-kpi-val { font-size: 26px; font-weight: 700; margin-top: 8px; letter-spacing: -.5px; }
.ic-console .ic-kpi-sub { font-size: 12px; color: var(--ic-muted); margin-top: 4px; }
.ic-console .ic-kpi-accent { position: absolute; right: -14px; top: -14px; width: 64px; height: 64px; border-radius: 50%; opacity: .12; }
.ic-console .ic-kpi--brand .ic-kpi-accent { background: var(--ic-brand); }
.ic-console .ic-kpi--good .ic-kpi-accent { background: var(--ic-good); }
.ic-console .ic-kpi--brand2 .ic-kpi-accent { background: var(--ic-brand2); }
.ic-console .ic-kpi--warn .ic-kpi-accent { background: var(--ic-warn); }

/* ---------- grid / card system ---------- */
.ic-console .ic-grid { display: grid; gap: 16px; }
.ic-console .ic-grid-2 { grid-template-columns: 1fr 1fr; }
.ic-console .ic-grid-3 { grid-template-columns: 1.4fr 1fr; }
.ic-console .ic-card { background: var(--ic-panel); border: 1px solid var(--ic-line); border-radius: 16px; padding: 18px; box-shadow: var(--ic-shadow); }
.ic-console .ic-card h3 { margin: 0 0 2px; font-size: 14.5px; }
.ic-console .ic-card-hint { color: var(--ic-muted); font-size: 12px; margin: 0 0 14px; }
.ic-console .ic-chart-wrap { position: relative; height: 280px; }
.ic-console .ic-chart-wrap--tall { height: 330px; }
.ic-console .ic-chart-wrap--short { height: 200px; }
.ic-console .ic-chart-host { width: 100%; height: 100%; }
.ic-console .ic-gap { margin-bottom: 16px; }
.ic-console .ic-empty-row { text-align: center; color: var(--ic-muted); padding: 22px; }

/* ---------- toolbar ---------- */
.ic-console .ic-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ic-console .ic-signoff { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ic-console .ic-signoff form.inline { display: inline; }

/* ---------- tables ---------- */
.ic-console .ic-tbl-scroll { max-height: 560px; overflow: auto; border: 1px solid var(--ic-line); border-radius: 14px; }
.ic-console .ic-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ic-console .ic-table th,
.ic-console .ic-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ic-line); white-space: nowrap; }
.ic-console .ic-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ic-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.ic-console .ic-table th.num,
.ic-console .ic-table td.num { text-align: right; }
.ic-console .ic-table tbody tr:hover { background: var(--ic-soft); }
.ic-console .ic-row-clickable { cursor: pointer; }
.ic-console .ic-money { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Plain-text clickable table cell that opens a drill-down modal (C1/C2/C6) —
   NOT `.ic-btn` (that's chrome-heavy, for standalone actions); this strips a
   <button>'s default chrome so it reads as underlined link-style text inline
   in a table cell. */
.ic-console .ic-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ic-brand); text-decoration: underline; cursor: pointer; }
.ic-console .ic-link:hover { color: var(--ic-ink); }

/* ---------- summary blocks (TIS-2: type/member totals below the task list) ---------- */
.ic-console .ic-summary-block { margin-top: 22px; }
.ic-console .ic-summary-block h3 { margin-bottom: 4px; }

/* ---------- inline progress bar cell ---------- */
.ic-console .ic-barcell { display: flex; align-items: center; gap: 8px; }
.ic-console .ic-barcell-track { flex: 1; height: 7px; background: var(--ic-soft); border-radius: 6px; overflow: hidden; min-width: 60px; }
.ic-console .ic-barcell-fill { height: 100%; border-radius: 6px; }

/* ---------- chips ---------- */
.ic-console .ic-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ic-console .ic-chip--elig { background: #dcfce7; color: #15803d; }
.ic-console .ic-chip--pending { background: #fef3c7; color: #b45309; }
.ic-console .ic-chip--cls1 { background: #eef2ff; color: #4338ca; }
.ic-console .ic-chip--cls2 { background: #e0f2fe; color: #0369a1; }
.ic-console .ic-chip--cls3 { background: #f3e8ff; color: #7e22ce; }
.ic-console .ic-chip--cls4 { background: #ffe4e6; color: #be123c; }
.ic-console .ic-chip--cls5 { background: #ecfccb; color: #4d7c0f; }
.ic-console .ic-chip--grade-ap { background: #dcfce7; color: #15803d; }
.ic-console .ic-chip--grade-a { background: #d1fae5; color: #047857; }
.ic-console .ic-chip--grade-b { background: #dbeafe; color: #1d4ed8; }
.ic-console .ic-chip--grade-c { background: #fef3c7; color: #b45309; }
.ic-console .ic-chip--grade-d { background: #fee2e2; color: #b91c1c; }

/* ---------- buttons ---------- */
.ic-console .ic-btn { background: var(--ic-brand); color: #fff; border: 0; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ic-console .ic-btn:hover { filter: brightness(1.06); }
.ic-console .ic-btn--ghost { background: #fff; color: var(--ic-brand); border: 1px solid var(--ic-brand); }
.ic-console .ic-btn--sm { padding: 6px 11px; font-size: 12px; }
.ic-console .ic-btn--danger { background: #fff; color: var(--ic-bad); border: 1px solid #fecaca; }
.ic-console .ic-btn--gray { background: var(--ic-soft); color: var(--ic-ink); border: 1px solid var(--ic-line); }
.ic-console .ic-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- pills ---------- */
.ic-console .ic-pill { font-size: 11px; color: var(--ic-muted); background: var(--ic-soft); padding: 3px 8px; border-radius: 6px; }
.ic-console .ic-pill--score { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin: 0 1px; }
.ic-console .ic-pill--unit { display: inline-block; background: #ecfdf5; color: #047857; border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin: 0 1px; }

/* ---------- section title ---------- */
.ic-console .ic-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ic-muted); font-weight: 700; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }

/* ---------- parameters page ---------- */
.ic-console .ic-param-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ic-console .ic-pcard { border: 1px solid var(--ic-line); border-radius: 14px; padding: 16px; background: #fff; }
.ic-console .ic-pcard h4 { margin: 0 0 12px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.ic-console .ic-prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.ic-console .ic-prow label { font-size: 12.5px; color: #334155; }
.ic-console .ic-prow input { width: 96px; text-align: right; }

.ic-console .ic-note { background: #eef2ff; border: 1px solid #dbe0ff; border-radius: 12px; padding: 13px 15px; color: #3730a3; font-size: 12.5px; line-height: 1.5; }

.ic-console .ic-save-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(246, 247, 251, 0), var(--ic-bg) 30%);
  padding: 16px 0 4px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ---------- modal ---------- */
.ic-console .ic-modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.ic-console .ic-modal-bg.is-on { display: flex; }
/* Fit the modal to its content, but never exceed the page: max-width caps at
   the overlay's padded width (100% = viewport − the .ic-modal-bg 20px gutters),
   min-width keeps small modals readable, 90vh + overflow handles tall/wide. */
.ic-console .ic-modal { background: #fff; border-radius: 18px; width: max-content; max-width: min(1100px, 100%); min-width: min(480px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); max-height: 90vh; overflow: auto; }
.ic-console .ic-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--ic-line); display: flex; justify-content: space-between; align-items: center; }
.ic-console .ic-modal-head h3 { margin: 0; font-size: 16px; }
.ic-console .ic-modal-body { padding: 20px 22px; }
.ic-console .ic-modal-close { cursor: pointer; font-size: 20px; color: var(--ic-muted); background: none; border: 0; }

.ic-console .ic-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 13px; }
.ic-console .ic-breakdown .k { color: var(--ic-muted); }
.ic-console .ic-breakdown .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-console .ic-breakdown .is-total { border-top: 2px solid var(--ic-ink); padding-top: 8px; margin-top: 4px; font-size: 15px; }

/* ---------- classes & people page ---------- */
.ic-console .ic-clstabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ic-console .ic-clstab { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--ic-line); background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; }
.ic-console .ic-clstab.is-active { background: var(--ic-brand); color: #fff; border-color: var(--ic-brand); }
.ic-console .ic-clstab--add { border-style: dashed; color: var(--ic-brand); font-weight: 600; }

.ic-console .ic-thr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.ic-console .ic-tcard { border: 1px solid var(--ic-line); border-radius: 13px; padding: 15px 16px 16px; background: #fbfcff; }
.ic-console .ic-tcard-h { font-size: 13.5px; font-weight: 700; }
.ic-console .ic-tcard-rule { font-size: 11.5px; color: var(--ic-muted); margin: 5px 0 13px; line-height: 1.55; }
.ic-console .ic-tcard-ins { display: flex; gap: 12px; flex-wrap: wrap; }
.ic-console .ic-tcard-field { display: flex; flex-direction: column; gap: 5px; }
.ic-console .ic-tcard-field label { font-size: 10px; color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ic-console .ic-tcard-field input { width: 118px; text-align: left; font-weight: 600; }

/* #16: class-name row — left-aligned, reasonably wide, near its heading.
   Deliberately NOT `.ic-prow` (Parameters-page convention: flex
   space-between + a 96px right-aligned input, which is why the name box
   used to end up tiny and shoved to the far right of the card). */
.ic-console .ic-name-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ic-console .ic-name-row label { font-size: 12.5px; color: #334155; }
.ic-console .ic-name-row input { width: 100%; max-width: 320px; text-align: left; }

/* #15: sourcing-slab editor (from/to/incentive rows on the class form) */
.ic-console .ic-input--slab { width: 110px; text-align: right; }
.ic-console .ic-slab-add-btn { margin-top: 10px; }

/* Section C: per-band Points + Range grid inside an .ic-tcard (rating
   thresholds — 3 or 4 rows depending on the parameter; incentive
   thresholds reuse the same row shape but wider, with a leading label
   instead of a Points column). */
.ic-console .ic-band-tbl { display: flex; flex-direction: column; gap: 7px; }
/* Rating cards: Min./Mid./Max. label · Points · Range (PDF §5 order). */
.ic-console .ic-band-row { display: grid; grid-template-columns: 46px 76px 1fr; gap: 10px; align-items: center; }
.ic-console .ic-band-row--head { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #475569; font-weight: 700; }
.ic-console .ic-band-label { font-size: 12px; color: #334155; font-weight: 600; }
/* Incentive cards keep the 2-col wide shape (leading label, no Points). */
.ic-console .ic-band-row--wide { grid-template-columns: 160px 1fr; }
.ic-console .ic-band-row--wide label { font-size: 12px; color: #334155; font-weight: 600; }
.ic-console .ic-band-range { display: flex; align-items: center; gap: 6px; }
.ic-console .ic-band-from { font-size: 12.5px; color: var(--ic-muted); font-variant-numeric: tabular-nums; min-width: 40px; }
.ic-console .ic-band-sep { color: var(--ic-muted); }
.ic-console .ic-band-open { font-size: 12px; color: var(--ic-muted); font-style: italic; }
.ic-console .ic-input--band { width: 100%; text-align: left; }
.ic-console .ic-assign-search { max-width: 320px; margin-bottom: 12px; }

/* Stacked Project / Entity in the breakdown modals (project on top, entity
   below, muted) — Raj 2026-07-15, matches the CRM's stacked layout. */
.ic-console .ic-entity-sub { font-size: 12px; color: var(--ic-muted); margin-top: 2px; }

/* CRM-style members button (person icon + count pill) on Task Incentives. */
.ic-console .ic-members-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; background: none; color: var(--ic-brand); font-weight: 600; font-size: 13px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.ic-console .ic-members-btn:hover { background: #eef2ff; }
.ic-console .ic-members-btn svg { width: 18px; height: 18px; }
.ic-console .ic-members-count { background: var(--ic-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; line-height: 1.6; }

/* ---------- manual per-task inputs (Task Incentives inline edit) ---------- */
.ic-console .ic-select--manual { min-width: 150px; }
.ic-console .ic-input--manual-num { width: 90px; text-align: center; }
/* Live per-keystroke recompute (#update): small red validation line under an
   input/select whose PATCH came back 422/403 — non-blocking, the field
   itself is reverted to its previous value by the Stimulus controller. */
.ic-console .ic-inline-error { display: block; color: #b91c1c; font-size: 11px; margin-top: 3px; }
/* Sourcing drill-down (V2-8): the slab-computed value shown alongside the
   editable per-task override input, so a CEO can see what a blank/revert
   restores before clearing the field. */
.ic-console .ic-slab-default { color: var(--ic-muted); font-size: 11px; margin-top: 3px; }

/* ---------- accessibility: keyboard focus ring ---------- */
.ic-console :focus-visible {
  outline: 2px solid var(--ic-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
  border-radius: 4px;
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ic-console *,
  .ic-console *::before,
  .ic-console *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ic-console .ic-kpis { grid-template-columns: repeat(2, 1fr); }
  .ic-console .ic-grid-2,
  .ic-console .ic-grid-3 { grid-template-columns: 1fr; }
  .ic-console .ic-param-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ic-console .ic-thr-grid { grid-template-columns: 1fr; }
}

/* Sidebar collapses into a horizontal top bar instead of disappearing, so
   the console stays navigable on a narrow screen (deviation from the
   prototype's `.side{display:none}` — see report). */
@media (max-width: 768px) {
  .ic-console .ic-shell { flex-direction: column; }
  .ic-console .ic-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .ic-console .ic-brand { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
  .ic-console .ic-nav { flex-direction: row; padding: 8px; overflow-x: auto; }
  .ic-console .ic-sidebar-foot { display: none; }
  .ic-console .ic-main { padding: 16px; }
  .ic-console .ic-param-grid { grid-template-columns: 1fr; }
}
/*
 * Test environment overrides.
 * Loaded only when RAILS_ENV=test (see application.html.erb).
 * Disables all animations and transitions to prevent flaky tests.
 */
*, *::before, *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */