/*
 * epx-ui.css — EPX internal web UI building blocks.
 *
 * The shared, standardised component kit for EPX internal web projects. Link it once and
 * use the `.epx-*` classes so every internal tool looks like one family. Components are
 * prefixed `epx-` so they never collide with a page's own classes; you can adopt the kit
 * incrementally (add a `.epx-box` here and there) without restyling existing markup.
 *
 *   <link rel="stylesheet" href="/static/epx-ui.css">
 *
 * Brand palette: EPX Blue #2b3678, Navy #002060, Lime #9bc55e, Red #e9212e.
 * Headings use Aspire SC (small caps) with Poppins as the body face.
 *
 * A live gallery of every block, with copy-paste markup, lives at /styleguide
 * (see docs/reference/epx-web-ui-kit.md). When you add or change a block here, update both.
 */

/* ----- fonts ----- */
@font-face {
  font-family: 'Aspire SC';
  src: url('/static/fonts/aspire_smallcap-webfont.woff2') format('woff2'),
       url('/static/fonts/aspire_smallcap-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ----- design tokens -----
 *
 * Each token now DEFERS to the matching semantic role from cortex-theme.css, with its original
 * literal kept as the var() fallback. Two things follow from that, and both were the point:
 *
 *   * inside Cortex the kit follows the theme, so a .epx-box on a dark page is a dark card. Before
 *     this the values were literal light colours, so every kit component stayed light while the page
 *     around it went dark, which is worse than not having dark mode at all.
 *   * outside Cortex the kit still works standalone. If cortex-theme.css is not linked, every var()
 *     falls back to exactly the value it had before, so the file remains the portable component kit
 *     it is documented as being.
 *
 * The brand constants (blue, navy, lime, red) are the same value in both themes, so they defer only
 * so there is one place they are written. What must NOT be done is use one of them for text on a
 * surface: see --brand-ink in cortex-theme.css.
 */
:root {
  --epx-blue: var(--brand-band, #2b3678);
  --epx-blue-hover: #202a63;
  --epx-blue-tint: var(--info-tint, #eef2fb);   /* soft blue surface / light header */
  --epx-navy: #002060;
  --epx-lime: #9bc55e;
  --epx-lime-ink: var(--tier-green, #1a7f4b);
  --epx-red: #e9212e;

  /* Interactive accent = lime (buttons, inputs, file uploads, focus). Structural chrome
     (box title bands, headers) stays blue/navy. Lime fills carry navy ink because white on
     lime fails contrast; accent TEXT/borders on white use the deeper lime so they read. */
  --epx-accent: var(--accent, #9bc55e);
  --epx-accent-hover: var(--accent-hover, #8ab84e);
  --epx-accent-ink: var(--accent-ink, #002060);
  --epx-accent-strong: var(--accent-strong, #4e7b27);
  --epx-accent-tint: var(--accent-tint, #eef6e2);
  /* A field's border and the focus ring are the two things WCAG 1.4.11 covers here, and the lime
     accent reaches neither on a light surface (1.99:1 and 1.30:1 as measured). The fallbacks carry
     the AA values, so the kit is accessible standalone as well as inside Cortex. */
  --epx-field-border: var(--field-border, #729a37);
  --epx-focus-ring: var(--focus-ring, #729a37);

  --epx-ink: var(--ink, #231f20);
  --epx-muted: var(--ink-muted, #6b6b6b);
  --epx-line: var(--line, #e8e9ef);
  --epx-bg: var(--surface, #f5f5f6);
  --epx-surface: var(--surface-raised, #ffffff);  /* a card's own background: was a literal #fff */
  --epx-hover: var(--surface-hover, #f2f8ea);
  --epx-ok: var(--ok, #527d26);
  --epx-warn: var(--warn, #936b09);

  --epx-radius: 12px;
  --epx-radius-sm: 8px;
  --epx-shadow: 0 1px 2px rgba(16, 24, 64, 0.04), 0 2px 8px rgba(16, 24, 64, 0.05);

  --epx-font-heading: 'Aspire SC', 'Poppins', sans-serif;
  --epx-font-body: 'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== titled box: the EPX standard card with a coloured title band ===== */
.epx-box {
  border: 1px solid var(--epx-line);
  border-radius: var(--epx-radius);
  background: var(--epx-surface);
  /* No overflow:hidden, so help tooltips / popovers inside can escape the box. The
     title's own rounded top corners give the same clipped look. */
}
.epx-box__title {
  margin: 0;
  border-radius: var(--epx-radius) var(--epx-radius) 0 0;
  background: var(--epx-blue);
  color: var(--brand-band-ink, #fff);
  font-family: var(--epx-font-heading);
  font-weight: normal;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.epx-box__title .epx-box__count {           /* optional pill on the right of the title */
  margin-left: auto;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  font-size: 0.74rem;
  padding: 0.05rem 0.55rem;
}
.epx-box__body { padding: 1rem 1.1rem 1.15rem; }
.epx-box__body > :first-child { margin-top: 0; }
.epx-box__body > :last-child { margin-bottom: 0; }

/* header colour variants */
.epx-box--navy .epx-box__title { background: var(--epx-navy); }
.epx-box--lime .epx-box__title { background: var(--epx-lime); color: #14361a; }
.epx-box--red  .epx-box__title { background: var(--epx-red); }
.epx-box--tint .epx-box__title { background: var(--epx-blue-tint); color: var(--epx-blue); }

/* ===== plain panel (no title band) ===== */
.epx-panel {
  background: var(--epx-surface);
  border: 1px solid var(--epx-line);
  border-radius: var(--epx-radius);
  padding: 1.25rem 1.4rem 1.4rem;
}

/* ===== buttons ===== */
.epx-btn {
  background: var(--epx-accent); color: var(--epx-accent-ink); border: 0;
  border-radius: var(--epx-radius-sm);
  padding: 0.6rem 1.1rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.epx-btn:hover { background: var(--epx-accent-hover); }
.epx-btn:disabled { background: var(--line-strong, #d3d9c8); color: var(--ink-muted, #7c8168); cursor: default; }
/* Ghost = secondary button. Tinted fill + a defined border + semibold text so it reads
   as a button, not a white textbox sitting next to inputs. */
.epx-btn--ghost { background: var(--epx-accent-tint); color: var(--epx-accent-strong); border: 1px solid var(--accent-strong, #c2dd97); font-weight: 600; }
.epx-btn--ghost:hover { background: var(--surface-hover, #e4f0d2); border-color: var(--epx-accent-strong); }
.epx-btn--sm { padding: 0.32rem 0.6rem; font-size: 0.8rem; }

/* ===== form fields ===== */
.epx-field { display: block; font-size: 0.82rem; font-weight: 600; color: var(--epx-ink); margin: 0 0 0.3rem; }
.epx-field .epx-opt { font-weight: 400; color: var(--epx-muted); }
.epx-input {
  width: 100%; border: 1px solid var(--epx-field-border); border-radius: 7px;
  padding: 0.5rem 0.6rem; font: inherit; font-size: 0.9rem; background: var(--epx-surface);
  color: var(--epx-ink);
}
.epx-input:focus { outline: 2px solid var(--epx-focus-ring); border-color: var(--epx-accent-strong); }
.epx-hint { font-size: 0.78rem; color: var(--epx-muted); margin-top: 0.25rem; }

/* file input: give the native "Choose file" button the EPX button look */
.epx-input[type="file"] { padding: 0.35rem 0.5rem; }
.epx-input[type="file"]::file-selector-button,
.epx-input[type="file"]::-webkit-file-upload-button {
  background: var(--epx-accent); color: var(--epx-accent-ink); border: 0; border-radius: 6px;
  padding: 0.35rem 0.7rem; margin-right: 0.7rem; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.85rem;
}
.epx-input[type="file"]:hover::file-selector-button { background: var(--epx-accent-hover); }

/* ===== attention: EPX Lime highlight for a control that needs action ===== */
/* Lime is the EPX "do this next" accent (blue/navy are structural, red is error).
   Add .epx-attention to any control to draw the eye; remove it once actioned. */
.epx-attention {
  outline: 2px solid var(--epx-lime);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(155, 197, 94, 0.28);
  border-radius: var(--epx-radius-sm);
}
.epx-input.epx-attention[type="file"]::file-selector-button,
.epx-input.epx-attention[type="file"]::-webkit-file-upload-button { background: var(--epx-lime); color: #173d18; }

/* ===== status badges (RAG) ===== */
.epx-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  border-radius: 20px; padding: 0.1rem 0.55rem;
}
.epx-badge--green { background: var(--tier-green-tint, #e7f6ed); color: var(--tier-green, #1a7f4b); }
.epx-badge--amber { background: var(--tier-amber-tint, #fff3d6); color: var(--tier-amber, #8a6d1b); }
.epx-badge--red   { background: var(--tier-red-tint, #fdeaec); color: var(--tier-red, #b00020); }
.epx-badge--muted { background: var(--surface-sunken, #f0f0f0); color: var(--ink-muted, #888); }

/* ===== pill (neutral tag) ===== */
.epx-pill {
  display: inline-block; font-size: 0.72rem; border-radius: 20px;
  padding: 0.05rem 0.5rem; background: var(--epx-blue-tint); color: var(--epx-blue);
}

/* ===== inline note (feedback) ===== */
.epx-note { border-radius: 9px; padding: 0.7rem 1rem; font-size: 0.88rem; }
.epx-note--ok   { background: var(--ok-tint, #f1faf4); border: 1px solid var(--ok-line, #b6e0c6); color: var(--ok, #1a7f4b); }
.epx-note--warn { background: var(--warn-tint, #fff7e6); border: 1px solid var(--warn-line, #f0d99a); color: var(--warn, #8a6d1b); }
.epx-note--err  { background: var(--danger-tint, #fff5f6); border: 1px solid var(--danger-line, #f0b0b8); color: var(--danger, #b00020); }

/* ===== help tooltip: a (?) marker with an on-hover/focus bubble ===== */
.epx-help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--epx-blue-tint); color: var(--epx-blue);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: help;
  margin-left: 0.35rem; vertical-align: middle; user-select: none; letter-spacing: normal;
}
.epx-help__bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 250px; max-width: 70vw;
  background: var(--epx-navy); color: #fff; font-weight: 400; font-size: 0.78rem; line-height: 1.45;
  white-space: normal; text-align: left; padding: 0.6rem 0.7rem; border-radius: 8px; box-shadow: var(--epx-shadow);
  opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 60; pointer-events: none;
}
.epx-help__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--epx-navy);
}
.epx-help:hover .epx-help__bubble,
.epx-help:focus .epx-help__bubble,
.epx-help:focus-within .epx-help__bubble { opacity: 1; visibility: visible; }

/* ===== definition list (labelled explanations / help) ===== */
.epx-defs { margin: 0; }
.epx-defs dt { font-weight: 600; color: var(--epx-blue); font-size: 0.86rem; }
.epx-defs dd { margin: 0.15rem 0 0.8rem; color: var(--epx-muted); font-size: 0.84rem; line-height: 1.5; }
.epx-defs dd:last-child { margin-bottom: 0; }

/* ===== layout helpers ===== */
.epx-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 680px) { .epx-cols-2 { grid-template-columns: 1fr; } }

/* ===== ConnectWise ticket deep-links ===== */
/* A whole ticket row (.prep-item) rendered by tbr-render.js as a link into ConnectWise: the entire
   card is the click target and opens the ticket in a new tab. Resets the anchor to look like the
   card it wraps, with a lime border + lift on hover to signal it is clickable. */
a.prep-item.cwrow { display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; }
a.prep-item.cwrow:hover { border-color: var(--epx-accent-strong); box-shadow: var(--epx-shadow);
  background: var(--epx-hover); }
/* An inline ticket-number link (used where a ticket is referenced inside another row, e.g. a CSAT
   comment): inherits the surrounding colour, underlined, lime on hover. */
.cwlink { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--epx-line); }
.cwlink:hover { color: var(--epx-accent-strong); text-decoration-color: var(--epx-accent-strong); }
/* Per-type icon on an open-work row title (ticket / project / quote), rendered inline by
   tbr-render.js. Sized to the title text, slightly de-emphasised, tinting via currentColor. */
.pi-icon { width: 0.95em; height: 0.95em; vertical-align: -0.14em; margin-right: 0.4em;
  opacity: 0.72; flex: none; }