/*
 * ERP cosmetic re-theme — override layer (ClickUp-inspired).
 * See docs/task-plans/ERP-THEME-BRIEF.md + ERP-THEME-P1-FONT-NAV.md.
 *
 * Phase 1 scope: (1) body font -> Inter + kill text shadows,
 *                (2) flatten the left nav (single #202020 tone, brand-purple active).
 *
 * CSS-only, additive. Loaded AFTER the SmartAdmin theme via a dedicated
 * stylesheet_link_tag in application.html.erb, and gated by ENV['ERP_RETHEME']
 * (set ERP_RETHEME=off + restart to fully revert — no code change).
 *
 * Do NOT add font-family rules that touch .fa / FontAwesome / .glyphicon
 * selectors — icons carry their own icon font and must keep it.
 *
 * Brand and semantic colours come from --erp-* custom properties defined in
 * config/tailwind.config.js and emitted into :root by tailwind.css, which the
 * layout links unconditionally and ahead of this file. Change a colour there,
 * not here, and re-run `rails tailwindcss:build`. The slate greys below are
 * stock Tailwind values used only by this file, so they stay as literals.
 */

/* Design tokens
 * ink            var(--erp-ink)   (primary text / ClickUp near-black, also nav base)
 * brand purple   var(--erp-brand-500)   (links, active nav, accents)
 * nav submenu    #1a1a1a
 * nav link       #9a9fa8   hover/active text #ffffff
 */

/* Inter variable font — self-hosted, copied from application.tailwind.css so
   this layer is self-contained (doesn't depend on Tailwind being present). */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Inter-roman.latin.var.woff2) format("woff2");
}
@font-face {
  font-family: "Inter var";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Inter-italic.latin.var.woff2) format("woff2");
}

/* =====================================================================
 * ITEM 1 — Body font -> Inter; kill SmartAdmin font stack + text shadows
 * ===================================================================== */

body {
  font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elements that declare their own (Open Sans / Trebuchet / Arial) font stack —
   nav text and most content inherit from <body> so they're not listed here.
   Form controls are listed because browsers reset their font to the OS default. */
h1, h2, h3, h4, h5, h6,
.page-title, .page-title span,
.menu-item-parent,
button, input, select, textarea, .btn, .form-control {
  font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Kill SmartAdmin's 1px bevel text-shadows (the "2013" embossed look).
   Scoped broadly across the chrome; text-shadow is purely cosmetic. */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label,
.btn, button, input, select, textarea,
#header, #header *, nav, nav *,
.ribbon, .breadcrumb, .breadcrumb *,
.page-title, .page-title * {
  text-shadow: none !important;
}

/* =====================================================================
 * ITEM 2 — Left nav: flatten to a single dark tone (var(--erp-ink)),
 *          brand-purple active state, remove gradient/bevel.
 * Rules are prefixed with #left-panel to outrank SmartAdmin's
 * `nav ... !important` base declarations.
 * ===================================================================== */

/* Flat panel — drop the left->right gradient + data-URL texture + shadow */
aside,
#left-panel {
  background: var(--erp-ink) !important;
  box-shadow: none !important;
}

/* Nav links: muted slate, flat, no inset bevels */
#left-panel nav ul li a {
  color: #9a9fa8 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Hover / focus: brighten + faint flat wash (no gradient) */
#left-panel nav ul li a:hover,
#left-panel nav ul li a:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Active / selected item: brand-purple accent bar + tinted wash + light text */
#left-panel nav ul .active > a,
#left-panel nav ul li.active > a {
  color: #ffffff !important;
  background: rgba(123, 104, 238, 0.16) !important;
  box-shadow: inset 3px 0 0 var(--erp-brand-500) !important;
}

/* Retire the FontAwesome caret indicator on the active row (flatter look) */
#left-panel nav ul li.active > a:before,
#left-panel nav ul li.active.open > a:before {
  display: none !important;
}

/* :active (mouse-down) shouldn't flash the old highlight colour */
#left-panel nav ul li a:active {
  background: rgba(123, 104, 238, 0.16) !important;
}

/* Nested/opened submenus: flat, SAME tone as the panel so they blend
   (SmartAdmin default was a translucent grey that didn't match). */
#left-panel nav ul ul {
  background: var(--erp-ink) !important;
}
#left-panel nav ul ul li > a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
#left-panel nav > ul > li > ul::before,
#left-panel nav > ul > li > ul > li::before {
  border-color: transparent !important;
}

/* Minified (icon-rail) nav flyout. SmartAdmin paints the flyout background on
   the LI rather than the UL (`rgba(69,69,69,.9)`), so the UL rule above can't
   reach it — that's the grey panel. It also uses a light #ccc border and a
   whitesmoke hover label, both of which clash with the dark rail. */
.minified #left-panel nav > ul > li > ul,
.minified #left-panel nav > ul > li > ul > li,
.minified #left-panel nav > ul > li > ul > li > ul > li {
  background-color: var(--erp-ink) !important;
}

.minified #left-panel nav > ul > li > ul,
.minified #left-panel nav > ul > li > a > .menu-item-parent {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Hover label beside the icon: dark chip instead of the whitesmoke box.
   The rail is 45px wide. SmartAdmin opens this chip at left:40px / 186px
   and the list at left:40px / 199px (200px on hover), so the two edges
   don't meet and the list overlaps the rail. */
.minified #left-panel nav > ul > li > a > .menu-item-parent {
  background-color: var(--erp-ink) !important;
  color: #ffffff !important;
  left: 45px;
  width: 260px;
  box-sizing: border-box;
}

/* The list is overflow:hidden and each parent row floats a collapse icon
   on the right. "Store Changes & History" is wider than the old 200px
   panel, so the label runs through that icon and the icon is clipped on
   the panel edge. Share the chip's box, and keep the label in the space
   to the left of the icon. */
.minified #left-panel nav > ul > li > ul,
.minified #left-panel nav > ul > li:hover > ul {
  left: 45px;
  width: 260px;
  box-sizing: border-box;
}

.minified #left-panel nav > ul > li > ul > li > a:has(> b),
.minified #left-panel nav > ul > li > ul > li > ul > li > a:has(> b) {
  padding-right: 28px;
  overflow: hidden;
}

.minified #left-panel nav > ul > li > ul .menu-item-parent {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.minified #left-panel nav > ul > li > ul a > b {
  position: absolute;
  right: 8px;
  top: 50%;
  float: none;
  margin: 0;
  line-height: 1;
  transform: translateY(-50%);
  z-index: 2;
}

/* Third-level lists were sized for the old 199px flyout (width 197px,
   shifted 13px), so they stuck out of a wider panel and got clipped. */
.minified #left-panel nav ul > li > ul > li > ul {
  left: 0;
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Flat rail: drop the light 1px separators between icon rows */
.minified #left-panel nav > ul > li {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Login-info block (avatar/name at the top of the nav) — keep legible on var(--erp-ink) */
#left-panel .login-info a,
#left-panel .login-info a span,
#left-panel .login-info strong {
  color: #e6e6e6 !important;
}

/* =====================================================================
 * ITEM 3 — Buttons: flat, consistent 8px radius, ClickUp palette.
 * Matches the in-app "New Ticket" reference (var(--erp-ink), r8, weight 500).
 * NOTE: radius is intentionally NOT !important so Bootstrap's
 * higher-specificity `.btn-group`/`.input-group` rules keep grouped
 * buttons joined (only the flatten props use !important).
 * ===================================================================== */

.btn {
  border-radius: 8px;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-weight: 500;
}
.btn:active, .btn.active,
.btn:focus, .btn:active:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

/* primary -> ink solid */
.btn-primary {
  background-color: var(--erp-ink) !important;
  border-color: var(--erp-ink) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #383838 !important;
  border-color: #383838 !important;
  color: #fff !important;
}

/* danger -> cu-red */
.btn-danger {
  background-color: var(--erp-red) !important;
  border-color: var(--erp-red) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-color: var(--erp-red-text) !important;
  border-color: var(--erp-red-text) !important;
  color: #fff !important;
}

/* default -> ghost secondary (white, slate border, ink text) */
.btn-default {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: var(--erp-ink) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--erp-ink) !important;
}

/* success -> emerald (brief: keep the emerald family); warning -> cu-yellow (ink text) */
.btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
.btn-warning {
  background-color: var(--erp-yellow) !important;
  border-color: var(--erp-yellow) !important;
  color: var(--erp-ink) !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: #f5b400 !important;
  border-color: #f5b400 !important;
  color: var(--erp-ink) !important;
}

.btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #fff !important;
}

/* =====================================================================
 * ITEM 4 — Ribbon / breadcrumb / page headers: flatten (kept dark).
 * The ribbon stays DARK for contrast against the light content and so
 * the (white) order-search box is visible — just flattened to a single
 * var(--erp-ink) tone (cohesive with the nav), gradient/shadow removed.
 * ===================================================================== */

#ribbon {
  background: var(--erp-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Breadcrumb: muted light, current crumb white */
#ribbon .breadcrumb,
#ribbon .breadcrumb a {
  color: #9a9fa8 !important;
}
#ribbon .breadcrumb > .active,
#ribbon .breadcrumb li:last-child {
  color: #ffffff !important;
}

/* Refresh button + search controls on the dark ribbon */
#ribbon #refresh,
#ribbon #refresh i,
#ribbon .btn-ribbon {
  color: #9a9fa8 !important;
  background: transparent !important;
}
#ribbon .header-search > input[type="text"] {
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
}
#ribbon .header-search > button {
  color: #9a9fa8 !important;
}

/* Page title (in the light content area) -> ink */
.page-title span {
  color: var(--erp-ink) !important;
}

/* =====================================================================
 * ITEM 5 — Tables (DataTables & Bootstrap tables OUTSIDE the tickets
 * module): slate borders, uppercase slate headers, zebra removal, row
 * hover, ClickUp density.
 *
 * Anchored on `#content:not(:has(.internal-tickets))` so the Internal
 * Tickets module is never touched: its content wrapper is
 * `.internal-tickets`, and the always-on ticket widget lives OUTSIDE
 * `#content` (so it can't disable these rules on other pages). If a
 * browser lacks :has(), the whole rule is dropped -> tables keep the
 * original SmartAdmin look (safe no-op).
 * ===================================================================== */

#content:not(:has(.internal-tickets)) .table {
  border-color: #e2e8f0;
}

/* Header: flatten (kill gradient) + uppercase slate caption */
#content:not(:has(.internal-tickets)) .table > thead > tr,
#content:not(:has(.internal-tickets)) .table thead tr {
  background: #f8fafc;
  background-image: none;
}
#content:not(:has(.internal-tickets)) .table > thead > tr > th,
#content:not(:has(.internal-tickets)) .table thead tr th {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  border-color: #e2e8f0;
}

/* Sortable headers wrap their caption in <a>, which otherwise picks up
   Bootstrap's link blue and breaks the header colour. Sort state is already
   conveyed by the caret icon, so inherit instead. */
#content:not(:has(.internal-tickets)) .table > thead > tr > th a,
#content:not(:has(.internal-tickets)) .table thead tr th a {
  color: inherit;
}

/* Cells: slate borders + ClickUp-ish density.
   14px matches body text (SmartAdmin dropped table cells to 13px). */
#content:not(:has(.internal-tickets)) .table > tbody > tr > td,
#content:not(:has(.internal-tickets)) .table > tbody > tr > th {
  border-top: 1px solid #eef2f6;
  border-color: #eef2f6;
  padding: 8px 12px;
  vertical-align: middle;
  font-size: 14px;
}

/* Zebra removal */
#content:not(:has(.internal-tickets)) .table-striped > tbody > tr:nth-of-type(odd) > td,
#content:not(:has(.internal-tickets)) .table-striped > tbody > tr:nth-of-type(odd) > th {
  background: transparent;
}

/* Row hover */
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr:hover > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr:hover > th {
  background: #f8fafc;
}

/* Contextual row coloring must SURVIVE the zebra-removal and row-hover rules
   above. Those two out-specify Bootstrap's `tr.success > td` etc., which broke
   worklists that color-code rows — warehouse outbound lost its multi-part-order
   green on every odd row, and hovering repainted colored rows slate (reported
   by the NJ warehouse 2026-08-21). Colors stay identical on hover: on a
   color-coded worklist a hover repaint reads as a data change, not a highlight. */
#content:not(:has(.internal-tickets)) .table > tbody > tr.success > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.success:hover > td {
  background: #dff0d8;
}
#content:not(:has(.internal-tickets)) .table > tbody > tr.warning > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.warning:hover > td {
  background: #fcf8e3;
}
#content:not(:has(.internal-tickets)) .table > tbody > tr.danger > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.danger:hover > td {
  background: #f2dede;
}
#content:not(:has(.internal-tickets)) .table > tbody > tr.info > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.info:hover > td {
  background: #d9edf7;
}
/* Rows colored at the <tr> level (inline styles like outbound's PRIORITY gold,
   or per-page classes like .globegistics) paint through transparent cells; the
   hover rule was covering them with slate tds. Restore see-through on hover. */
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr[style*="background"]:hover > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.globegistics:hover > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.dhlexpress:hover > td,
#content:not(:has(.internal-tickets)) .table-hover > tbody > tr.aramex:hover > td {
  background: transparent;
}

/* Bordered variant -> slate */
#content:not(:has(.internal-tickets)) .table-bordered,
#content:not(:has(.internal-tickets)) .table-bordered > thead > tr > th,
#content:not(:has(.internal-tickets)) .table-bordered > thead > tr > td,
#content:not(:has(.internal-tickets)) .table-bordered > tbody > tr > th,
#content:not(:has(.internal-tickets)) .table-bordered > tbody > tr > td {
  border-color: #e2e8f0;
}

/* =====================================================================
 * ITEM 6 — Badges / labels / alerts -> soft-bg + colored-text pattern.
 * IMPORTANT: target only the `.label-*` variants. Bare `.label` is a
 * SmartAdmin smart-form FIELD label (a <label> element), not a badge, so
 * styling it would break forms. Tickets badges are tw- based (untouched).
 * ===================================================================== */

.label-default, .label-primary, .label-success,
.label-info, .label-warning, .label-danger {
  font-weight: 500;
  border-radius: 6px;
  padding: 0.28em 0.6em;
  text-shadow: none;
}
.label-default { background-color: #f1f5f9 !important; color: #475569 !important; }
.label-primary { background-color: rgba(123, 104, 238, 0.14) !important; color: var(--erp-brand-700) !important; }
.label-success { background-color: var(--erp-green-soft) !important; color: var(--erp-green-text) !important; }
.label-info    { background-color: #e0f2fe !important; color: #0369a1 !important; }
.label-warning { background-color: var(--erp-yellow-soft) !important; color: var(--erp-yellow-text) !important; }
.label-danger  { background-color: var(--erp-red-soft) !important; color: var(--erp-red-text) !important; }

/* Count badges -> soft neutral. EXCLUDE badges carrying a SmartAdmin
   `.bg-color-*` fill (e.g. `.badge.bg-color-red` "N with drift"): those keep
   their saturated bg + white text (readable) — recolouring only the text
   left slate-on-red, a contrast bug. */
.badge:not([class*="bg-color"]) {
  background-color: #eef2f6;
  color: #475569;
  font-weight: 600;
  text-shadow: none;
}

/* Alerts -> soft bg + colored text + colored left accent, rounded */
.alert {
  border-radius: 8px;
  border-left-width: 4px;
}
.alert-success { background-color: var(--erp-green-soft) !important; border-color: #86efac !important; color: var(--erp-green-text) !important; }
.alert-info    { background-color: #e0f2fe !important; border-color: #7dd3fc !important; color: #0369a1 !important; }
.alert-warning { background-color: var(--erp-yellow-soft) !important; border-color: #fcd34d !important; color: var(--erp-yellow-text) !important; }
.alert-danger  { background-color: var(--erp-red-soft) !important; border-color: #f7a3a6 !important; color: var(--erp-red-text) !important; }

/* =====================================================================
 * ITEM 7 — Form inputs: slate border + brand-purple focus ring.
 * No radius change (SmartAdmin forces .form-control border-radius:0
 * !important; an !important radius here would break input-group joined
 * corners). Base border-color is NOT !important so validation states
 * (.has-error etc.) keep their red border; only the focus ring is forced
 * (to beat SmartAdmin's `input:focus{box-shadow:none !important}`).
 * ===================================================================== */

.form-control {
  border-color: #e2e8f0;
}
.form-control:focus {
  border-color: var(--erp-brand-500);
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.15) !important;
}

/* =====================================================================
 * TABLE FIT MODE — docs/task-plans/ERP-TABLE-FIT-WIDTH.md
 *
 * Applied via `.erp-table-fit` on the .table-responsive wrapper, so the
 * in-page toggle (and ENV['ERP_TABLE_FIT']='off') can drop back to the
 * original natural-width + horizontal-scroll behaviour.
 * ===================================================================== */

/* Long snake_case/colon identifiers ("globalmail_parcel_direct_ddu") have no
   break opportunity, so under `table-layout: auto` they set a hard MINIMUM
   column width and push the table past the viewport. Letting them break
   collapses that minimum; the table's existing `width:100%` then fits it to
   the wrapper. Measured on /h9i/defect-patterns: 2053px -> 1578px. */
/* Break ONLY the tagged long-token cells (tagged server-side, plain-text
   cells only, so inputs/links/buttons keep their size). A blanket
   `overflow-wrap: anywhere` also lets auto-layout shrink the numeric columns
   until it breaks values mid-digit (4767 -> "476/7") and shreds headers into
   "ORD ERS", so the break opportunity is confined to cells that need it.
   These cells also step down a size, so the wrap costs fewer lines.
   !important because ITEM 5's 14px cell rule carries more element
   specificity. */
.erp-table-fit #dt_basic td.erp-longtext {
  overflow-wrap: anywhere;
  font-size: 12px !important;
}

/* Reclaim horizontal padding: 17 columns x 24px is ~400px of pure padding.
   Trimming it closes the last 75px and, by giving the wrapped columns more
   room, cuts the tallest row from 137px to 97px. */
.erp-table-fit #dt_basic > tbody > tr > td,
.erp-table-fit #dt_basic > thead > tr > th {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* =====================================================================
 * PAGE COMPONENTS — docs/task-plans/ERP-H9I-DOSSIER-PATTERNS-UI.md
 *
 * Reusable card / stat / chip / meter primitives for hand-built pages
 * (first users: /h9i/dossier and /h9i/defect-patterns). Opt-in classes
 * only — nothing here restyles an existing SmartAdmin or Bootstrap
 * selector, so it cannot leak into pages that don't ask for it.
 * ===================================================================== */

/* ---- Page header ---- */
.erp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.erp-page-title {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--erp-ink);
}
.erp-page-title .fa { color: var(--erp-brand-500); margin-right: 6px; }
.erp-page-title .erp-page-ref { color: #475569; font-weight: 550; }
.erp-page-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  color: #64748b;
}
.erp-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Card ---- */
.erp-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}
.erp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid #eef2f6;
}
.erp-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.erp-card-name { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--erp-ink); }
.erp-card-meta { font-size: 12px; color: #94a3b8; }
.erp-card-meta .erp-chip { margin-left: 4px; }
.erp-card-body { padding: 14px 16px; }
/* The card clips its children (rounded corners), so a table wider than a
   narrow column would lose its last columns outright — scroll it instead. */
.erp-card-body.is-flush { padding: 0; overflow-x: auto; }

/* Tables inside a card: the card already draws the frame, so drop the
   table's own outer border and top rule. ITEM 5's rules are #content-scoped,
   so these have to be too in order to out-specify them. */
#content .erp-card .table { margin-bottom: 0; border: 0; }
#content .erp-card .table > thead > tr > th { border-top: 0; }
#content .erp-card .table > tbody > tr:first-child > td { border-top: 0; }
#content .erp-card .table > thead > tr > th:first-child,
#content .erp-card .table > tbody > tr > td:first-child { padding-left: 16px; }
#content .erp-card .table > thead > tr > th:last-child,
#content .erp-card .table > tbody > tr > td:last-child { padding-right: 16px; }
/* Breached row: a tint you can scan past, not Bootstrap's `.danger` #f2dede —
   the red already lives in the meter and the status text. */
#content .erp-card .table > tbody > tr.is-alert > td { background: #fff6f6; }

/* Card that leads its group (e.g. the consolidated chart above the per-store ones) */
.erp-card.is-primary { border-color: var(--erp-brand-200); }
.erp-card.is-primary > .erp-card-head { background: rgba(123, 104, 238, 0.06); }
.erp-card.is-primary > .erp-card-head .erp-card-title { color: var(--erp-brand-700); }

/* ---- Stat tiles ---- */
.erp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.erp-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 11px 14px;
}
.erp-stat-label {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 5px;
}
.erp-stat-value {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--erp-ink);
  font-variant-numeric: tabular-nums;
}
.erp-stat-value .erp-chip { vertical-align: 2px; }
.erp-stat-sub { margin-top: 4px; font-size: 11.5px; color: #94a3b8; }
.erp-stat.is-danger { box-shadow: inset 3px 0 0 #ef4444, 0 1px 2px rgba(16, 24, 40, 0.04); }
.erp-stat.is-ok { box-shadow: inset 3px 0 0 #22c55e, 0 1px 2px rgba(16, 24, 40, 0.04); }
/* Legend dot — ties a stat tile to the series of the same colour in a chart.
   Colour is set inline from the series palette, so no variant classes here. */
.erp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}

/* ---- Chips ---- */
.erp-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.erp-chip-brand  { background: rgba(123, 104, 238, 0.12); color: var(--erp-brand-700); }
.erp-chip-ok     { background: var(--erp-green-soft); color: var(--erp-green-text); }
.erp-chip-info   { background: #e0f2fe; color: #0369a1; }
.erp-chip-warn   { background: var(--erp-yellow-soft); color: var(--erp-yellow-text); }
.erp-chip-danger { background: var(--erp-red-soft); color: var(--erp-red-text); }
.erp-chip-ghost  { background: transparent; border: 1px solid #e2e8f0; color: #64748b; font-weight: 500; }
a.erp-chip:hover { text-decoration: none; filter: brightness(0.96); }

/* ---- Duration vs baseline meter ---- */
.erp-meter {
  position: relative;
  height: 6px;
  min-width: 70px;
  border-radius: 999px;
  background: #eef2f6;
}
.erp-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: #22c55e;
}
.erp-meter.is-over .erp-meter-fill { background: #ef4444; }
/* p80 tick — where the cohort says this stage should have ended */
.erp-meter-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: #94a3b8;
}

/* ---- Vertical timeline (carrier checkpoints) ---- */
.erp-timeline {
  list-style: none;
  margin: 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid #e2e8f0;
}
.erp-timeline > li {
  position: relative;
  padding: 0 0 11px 2px;
  font-size: 13px;
  color: var(--erp-ink);
}
.erp-timeline > li:last-child { padding-bottom: 0; }
.erp-timeline > li::before {
  content: "";
  position: absolute;
  left: -23.5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  border: 2px solid #fff;
}
.erp-timeline > li.is-ok::before { background: #22c55e; }
.erp-timeline > li.is-alert::before { background: #ef4444; }
.erp-timeline-at {
  color: #64748b;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  font-size: 12px;
}

/* ---- Support ticket block + message thread ---- */
.erp-ticket { padding: 12px 0; border-top: 1px solid #f1f5f9; }
.erp-ticket:first-child { padding-top: 0; border-top: 0; }
.erp-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.erp-ticket-id { font-size: 14px; font-weight: 650; color: var(--erp-brand-700); }
.erp-ticket-id:hover, .erp-ticket-id:focus { color: var(--erp-brand-500); }
.erp-ticket-meta { margin-top: 5px; font-size: 11.5px; color: #94a3b8; }
.erp-ticket-reason {
  margin-top: 7px;
  padding: 6px 10px;
  border-left: 2px solid #e2e8f0;
  border-radius: 0 6px 6px 0;
  background: #f8fafc;
  font-size: 12.5px;
  color: #475569;
}
.erp-thread { margin-top: 8px; }
/* flex-start, else the chips stretch to the row height and read as bars */
.erp-thread-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
}
.erp-thread-row:first-child { border-top: 0; }
.erp-thread-at { min-width: 74px; color: #94a3b8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.erp-thread-dir { min-width: 34px; text-align: center; }
.erp-thread-body { flex: 1; color: #475569; }

/* ---- Disclosure (details/summary) ---- */
.erp-disclose > summary {
  cursor: pointer;
  outline: none;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.erp-disclose > summary::-webkit-details-marker { display: none; }
.erp-disclose > summary::before {
  content: "\f0da"; /* caret-right; flips to caret-down when open */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  width: 11px;
  margin-right: 5px;
  color: #94a3b8;
}
.erp-disclose[open] > summary::before { content: "\f0d7"; }
.erp-disclose > summary:hover { color: var(--erp-ink); }
/* Disclosure whose summary is the section's headline, not a footnote */
.erp-disclose.is-lead > summary { font-size: 13px; color: var(--erp-ink); }

/* ---- Misc text helpers ---- */
.erp-num { font-variant-numeric: tabular-nums; }
.erp-strong { font-weight: 650; color: var(--erp-ink); font-variant-numeric: tabular-nums; }
.erp-muted { color: #94a3b8; }
.erp-empty { padding: 26px 16px; text-align: center; color: #64748b; }
.erp-nowrap { white-space: nowrap; }

/* =====================================================================
 * WIDGET HEADER — let the title band grow with its content.
 *
 * SmartAdmin gives `.jarviswidget > header` a fixed 34px height and floats
 * both the icon and the h2. Most `@action` strings are one line so it looks
 * fine, but the longer ones (refund-summary, purchasing-lag) wrap, and the
 * second line lands *below* the header box — outside its dark background,
 * where the inherited white text sits on the light page and disappears.
 * Flex + auto height keeps every line inside the band.
 * ===================================================================== */

#content .jarviswidget > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  height: auto;
  min-height: 34px;
  padding: 7px 12px;
  overflow: visible;
}
#content .jarviswidget > header > .widget-icon {
  float: none;
  width: auto;
  height: auto;
  padding: 0;
  line-height: 1.45;
  font-size: 13px;
}
#content .jarviswidget > header > h2 {
  float: none;
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1.45;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}
/* Toolbar keeps to the right on the first line */
#content .jarviswidget > header > .widget-toolbar {
  float: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  height: auto;
  line-height: 1.45;
}

/* Links and inputs inside the dark band inherit page colours otherwise:
   Bootstrap link blue is unreadable here, and a bare input renders white
   text (inherited) on its own white background. */
#content .jarviswidget > header a { color: #c7b9ff; }
#content .jarviswidget > header a:hover,
#content .jarviswidget > header a:focus { color: #fff; text-decoration: underline; }
#content .jarviswidget > header a b { font-weight: 650; color: #fff; }
#content .jarviswidget > header input,
#content .jarviswidget > header select,
#content .jarviswidget > header textarea {
  color: var(--erp-ink);
  height: 26px;
  padding: 2px 6px;
  font-size: 12px;
  vertical-align: middle;
}

/* =====================================================================
 * PANEL — toolbar + facet bar + row state.
 * Used by the purchasing panel (main/_table_orderitems).
 * ===================================================================== */

.erp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f6;
  background: #fcfdfe;
}
.erp-toolbar-group { display: flex; align-items: center; gap: 8px; }
.erp-toolbar-right { margin-left: auto; }
.erp-toolbar-date { width: 130px; height: 30px; border-radius: 8px !important; }
.erp-toolbar .form-control { display: inline-block; }

/* Cart-HTML paste. Stays a textarea (no length ceiling); drag-resizable for
   when someone wants to eyeball what landed. */
.erp-paste { display: flex; align-items: center; gap: 6px; }
.erp-paste-input {
  width: 180px;
  height: 30px;
  min-height: 30px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  white-space: pre;
  overflow: auto;
}
.erp-paste-status { white-space: nowrap; }

/* Facets */
.erp-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 20px;
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f6;
}
.erp-facet-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.erp-facet-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-right: 2px;
}
.erp-facet-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-facet-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  line-height: 18px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.erp-facet-pill:hover { background: #f8fafc; border-color: #cbd5e1; }
.erp-facet-pill .erp-facet-n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #94a3b8;
}
.erp-facet-pill.is-active {
  background: var(--erp-ink);
  border-color: var(--erp-ink);
  color: #fff;
}
.erp-facet-pill.is-active .erp-facet-n { color: rgba(255, 255, 255, 0.75); }
/* Dot cue for found type, so the category reads before the label does */
.erp-facet-pill.is-ok::before,
.erp-facet-pill.is-info::before,
.erp-facet-pill.is-warn::before,
.erp-facet-pill.is-muted::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.erp-facet-pill.is-ok::before { background: #22c55e; }
.erp-facet-pill.is-info::before { background: #0ea5e9; }
.erp-facet-pill.is-warn::before { background: #f59e0b; }
.erp-facet-pill.is-muted::before { background: #cbd5e1; }

.erp-facet-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.erp-facet-count { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }

/* "Others – <currency>" group: filter pill + caret opening a merchant submenu
   (trust tier 3+/unrated merchants live one level down). */
.erp-facet-group { position: relative; display: inline-flex; gap: 2px; }
.erp-facet-caret { padding-left: 6px; padding-right: 6px; }
.erp-facet-submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.erp-facet-submenu[hidden] { display: none; }
.erp-facet-submenu .erp-facet-pill { justify-content: space-between; display: flex; }

/* Row state. Green = this Buying as. Blue = some other cart. Green wins.
   Left accent survives the priority tint so both can show on the same row. */
#content .erp-panel #dt_basic > tbody > tr.is-priority > td {
  background: #fef9c3;
}
#content .erp-panel #dt_basic > tbody > tr.is-in-other-cart > td {
  background: #e0f2fe;
}
#content .erp-panel #dt_basic > tbody > tr.is-in-other-cart > td:first-child {
  box-shadow: inset 3px 0 0 #0ea5e9;
}
#content .erp-panel #dt_basic > tbody > tr.is-in-other-cart:hover > td {
  background: #d0ebfc;
}
#content .erp-panel #dt_basic > tbody > tr.is-in-cart > td {
  background: var(--erp-green-soft);
}
#content .erp-panel #dt_basic > tbody > tr.is-in-cart > td:first-child {
  box-shadow: inset 3px 0 0 #22c55e;
}
#content .erp-panel #dt_basic > tbody > tr.is-in-cart:hover > td {
  background: #dcf5e3;
}
.erp-cart-flag { display: none; margin-left: 4px; }
.erp-panel #dt_basic > tbody > tr.is-in-cart .erp-cart-flag { display: inline-block; }
.erp-cart-cell a { color: #64748b; }
.erp-cart-cell a:hover { color: var(--erp-ink); }

/* Sticky header for the long purchasing table. border-collapse drops borders
   on sticky cells, so the separator is drawn as an inset shadow instead. */
.erp-panel .erp-card-body.is-flush { max-height: calc(100vh - 250px); overflow-y: auto; }
#content .erp-panel #dt_basic > thead > tr > th {
  position: sticky;
  top: -1px;
  z-index: 3;
  background: #f1f5f9;
  box-shadow: inset 0 -1px 0 #cbd5e1;
}
#content .erp-panel #dt_basic > tbody > tr > td { position: relative; z-index: 1; }

/* =====================================================================
 * SELECT — ClickUp-like native select (chevron, 8px radius, ink text).
 * SmartAdmin zeros border-radius on .form-control, so we force it here.
 * ===================================================================== */

#content .erp-select,
.erp-select {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  height: 30px;
  padding: 0 28px 0 10px;
  min-width: 148px;
  max-width: 260px;
  border: 1px solid #e2e8f0;
  border-radius: 8px !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M2.2 4.2L6 8l3.8-3.8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  color: var(--erp-ink);
  cursor: pointer;
}
.erp-select.erp-select-wide { min-width: 220px; max-width: 320px; }
.erp-select:hover { border-color: #cbd5e1; }
.erp-select:focus {
  border-color: var(--erp-brand-500);
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.15) !important;
  outline: none;
}
.erp-select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Chip used as a button (cart toggle) */
button.erp-chip {
  border: 1px solid #e2e8f0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
button.erp-chip:hover { background: #f8fafc; }
button.erp-chip.is-active {
  background: var(--erp-ink);
  border-color: var(--erp-ink);
  color: #fff;
}
button.erp-chip.erp-chip-ok.is-active {
  background: var(--erp-green-text);
  border-color: var(--erp-green-text);
  color: #fff;
}

/* Purchase Hub cart: overlay drawer. Table stays full width. */
.erp-purchase-v2 { position: relative; }
.erp-cart-drawer {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 300px;
  z-index: 6;
}
.erp-cart-drawer .erp-card {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.erp-cart-drawer .erp-card-head { flex: 0 0 auto; align-items: center; }
.erp-cart-drawer .erp-card-body {
  flex: 1 1 auto;
  overflow: auto;
  max-height: none;
}
.erp-cart-drawer-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
}
.erp-cart-drawer-close:hover { color: var(--erp-ink); }
#content .erp-cart-drawer .table { font-size: 12px; }
#content .erp-cart-drawer .table > tbody > tr > td {
  padding: 8px 10px;
  vertical-align: top;
  border-color: #eef2f6;
}
.erp-cart-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
  color: var(--erp-ink);
}
.erp-cart-item-meta { color: #94a3b8; font-size: 11px; }
button.erp-chip.erp-cart-elsewhere {
  margin: 2px 0 0 4px;
  padding: 1px 7px;
  font-size: 11px;
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}

/* Tooltip — CSS-only hover help for labels, chips and table headers.
   Usage: <span class="erp-tip" data-tip="Explanation shown on hover">label</span>
   Add `is-below` when the trigger sits near the top of a scroll container
   (e.g. table headers), so the bubble opens downward instead of clipping.
   In the v2 data table, set @table_options[:help] = {"Column" => "text"}. */
.erp-tip { position: relative; cursor: help; }
a.erp-tip, button.erp-tip { cursor: pointer; }
.erp-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: max-content;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--erp-ink, #202020);
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.15s;
  pointer-events: none;
}
.erp-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  border: 5px solid transparent;
  border-top-color: var(--erp-ink, #202020);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.15s;
  pointer-events: none;
}
.erp-tip.is-below::after {
  bottom: auto;
  top: calc(100% + 7px);
}
.erp-tip.is-below::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--erp-ink, #202020);
}
/* Edge alignment for triggers near a container edge (bubble would clip). */
.erp-tip.is-start::after { left: 0; transform: none; }
.erp-tip.is-end::after { left: auto; right: 0; transform: none; }
.erp-tip:hover::after,
.erp-tip:focus::after,
.erp-tip:hover::before,
.erp-tip:focus::before {
  opacity: 1;
  visibility: visible;
}