/* Inter (variable, weights 100-900), served from this site: no request to Google, and pages never wait on it.
   From @fontsource-variable/inter 5.0.16; SIL Open Font License, see css/fonts/Inter-OFL.txt */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {   /* Latin Extended: includes the peso sign (U+20B1) */
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ================================================================
   css/style.css — StockBoard Dealer Inventory System
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);   /* motion: quick start, soft landing */
  --dur: .3s;
  /* StockBoard palette (owner, Oct 2026): one source of truth for every colour in the app.
     Light green-tinted page, white cards, one brand green, neutral grays, four status colours.
     Every text colour below is 4.5:1 or better on the background it is used on. */
  --bg: #f8faf7;            /* page background; also table headers and quiet panels */
  --sidebar-bg: #ffffff;
  --surface: #f8faf7;       /* table headers, subtle panels (muted text 4.6:1) */
  --card: #ffffff;          /* cards, modals, panels */
  --border: #e5e7eb;        /* borders and dividers */
  --border-strong: #d1d5db; /* inputs and hovered borders: a step darker so fields stay visible */
  --hover: #f3f5f2;         /* subtle hover backgrounds */
  --accent: #2f6b2f;        /* brand green: primary buttons, active and selected items, focus */
  --accent-lt: #2f6b2f;     /* links and hover text */
  --accent-strong: #2f6b2f; /* solid green (white text 6.4:1); buttons use the softer --btn-green-* */
  --accent-stronger: #245524; /* primary hover: white text 8.8:1 */
  --accent-text: #2f6b2f;
  /* Green buttons and active tabs/chips/pages: a soft fill, a step darker than the status tints */
  --btn-green-bg: #d3e6cd;  --btn-green-fg: #245524;  --btn-green-bd: #a9cba0;   /* text 6.7:1 */
  --btn-green-hover: #c3dcbb;  --btn-green-hover-bd: #94bd8a;                      /* text 6.0:1 */
  --accent-tint: 47, 107, 47; /* rgb of the brand green, for rgba(var(--accent-tint), a) tints */
  --danger-tint: 180, 35, 24; /* rgb of --danger, for the red focus ring on invalid fields */
  --success: #15803d;
  --warning: #b45309;
  --danger: #b42318;
  --info: #2a5585;
  --text: #1f2937;          /* 14.7:1 on cards */
  --text-muted: #6b7280;    /* 4.8:1 on cards, 4.6:1 on the page */
  --green-text: #15803d;
  --amber-text: #b45309;
  --red-text: #b42318;
  --text-faint: #6b7280;    /* placeholders and empty states: same as muted, never lower contrast */
  /* Tones: light background / readable text (the status colour) / border, used by every
     badge, tag, notice and toast (.tag-*, flash, callouts). Text is 4.5:1+ on its bg. */
  --green-bg: #eaf4e7;  --green-fg: #2f6b2f;  --green-bd: #c8dfc2;   /* also SALE */
  --amber-bg: #fef6e7;  --amber-fg: #b45309;  --amber-bd: #f3d7a6;
  --red-bg: #fdecec;    --red-fg: #b42318;    --red-bd: #f4c4c1;     /* also OUT */
  --blue-bg: #eaf0f7;   --blue-fg: #2a5585;   --blue-bd: #c4d4e8;
  --purple-bg: #f3edf6; --purple-fg: #6b3f78; --purple-bd: #ddcbe5;   /* Returned orders, Inventory Officer role, commission to-dos */
  --gray-bg: #f3f5f2;   --gray-fg: #4b5563;   --gray-bd: #dde2da;     /* also ADJUSTMENT */
  /* Stock levels (badges .b-ok/.b-warn/.b-low/.b-out); text is 4.7:1 or better on its bg */
  --stock-in-bg: #dce5df;   --stock-in-fg: #365448;   --stock-in-bd: #bbc8c1;
  --stock-low-bg: #eae2d4;  --stock-low-fg: #755f42;  --stock-low-bd: #d3c9b7;
  --stock-crit-bg: #e8d5d8; --stock-crit-fg: #792f3b; --stock-crit-bd: #d2b4b9;
  --stock-out-bg: #e8dedd;  --stock-out-fg: #79514d;  --stock-out-bd: #d2c2c0;
  --shadow-color: 15, 23, 42; /* rgb for rgba(var(--shadow-color), a) */
  /* Charts (read by js/charts.js) */
  --chart-text: #6b7280;
  --chart-grid: #e5e7eb;
  /* Scales (design system v2) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --fs-xs: .72rem; --fs-sm: .8rem; --fs-md: .875rem; --fs-lg: 1.05rem; --fs-xl: 1.45rem;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
}

/* ── Tags and badges: every status, type and role label (.tag, .badge) ─────
   One shape for all: light tone background, readable tone text, thin tone border, no icon or dot.
   <span class="tag tag-green">Paid</span>                          */
.tag, .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--gray-bd);
  background: var(--gray-bg);
  color: var(--gray-fg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.tag.ico::before, .badge.ico::before { content: none; }   /* labels carry no icons */

.tag-green  { background: var(--green-bg);  color: var(--green-fg);  border-color: var(--green-bd); }
.tag-amber  { background: var(--amber-bg);  color: var(--amber-fg);  border-color: var(--amber-bd); }
.tag-red    { background: var(--red-bg);    color: var(--red-fg);    border-color: var(--red-bd); }
.tag-blue   { background: var(--blue-bg);   color: var(--blue-fg);   border-color: var(--blue-bd); }
.tag-purple { background: var(--purple-bg); color: var(--purple-fg); border-color: var(--purple-bd); }
.tag-gray   { background: var(--gray-bg);   color: var(--gray-fg);   border-color: var(--gray-bd); }


/* Anything marked hidden stays hidden, even if a class like .flash sets display */
[hidden] {
  display: none !important;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a {
  color: var(--accent-lt);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* ================================================================
   LAYOUT
   ================================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;   /* phones: the visible height, so the browser's address bar never hides Sign Out */
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--dur) var(--ease);
  overflow: hidden;
}

/* Desktop: sidebar hidden via the toggle button */
.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}

.sidebar-collapsed .main {
  margin-left: 0;
}

/* ── Sidebar toggle (hamburger), backdrop & close button ─────────── */
.sidebar-toggle {
  position: fixed;
  top: calc((var(--topbar-h) - 36px) / 2);
  left: calc(var(--sidebar-w) + .6rem);
  z-index: 110;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: left var(--dur) var(--ease), background .12s, color .12s;
}

.sidebar-toggle:hover {
  background: rgba(var(--accent-tint), .12);
  color: var(--accent);
}

.sidebar-collapsed .sidebar-toggle {
  left: .6rem;
}

.sidebar-backdrop,
.sidebar-close {
  display: none;
}

.sidebar-brand {
  position: relative;
  padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--card) 0%, var(--sidebar-bg) 100%);
}

.sidebar-brand .company {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-brand .tagline {
  font-size: .7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  padding: .75rem 0;
  overflow-y: auto;
}

.nav-group-label {
  padding: .4rem 1.1rem .2rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem 1.1rem;
  color: var(--text-muted);
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  text-decoration: none;
  font-size: .875rem;
}

.nav-link:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}

.nav-link.active {
  background: rgba(var(--accent-tint), .12);
  color: var(--accent);
  border-left-color: var(--accent);
}

.nav-link .icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: .75rem 1.1rem;
}

.user-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--text-muted);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Hover indicator for profile link */
.sidebar-bottom>a:hover .uname,
.sidebar-bottom>a:hover .urole {
  color: var(--accent-lt);
  text-decoration: underline;
}

.user-details .uname {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  transition: color .12s;
}

.user-details .urole {
  font-size: .72rem;
  color: var(--text-muted);
  transition: color .12s;
}

.btn-profile,
.btn-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  margin-top: .5rem;
  padding: .4rem;
  text-align: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.btn-profile:hover {
  background: rgba(var(--accent-tint), .08);
  color: var(--accent-lt);
  border-color: var(--accent-lt);
  text-decoration: none;
}

.btn-signout:hover {
  background: var(--red-bg);
  color: var(--danger);
  border-color: var(--danger);
  text-decoration: none;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.92); /* Matches --card */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem 0 3.6rem; /* left room for the sidebar toggle */
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 2px 0 rgba(var(--shadow-color), 0.02);
}

.topbar-title {
  font-size: 1rem;
  font-weight: 700;
}

.topbar-meta {
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── Main content ─────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0; /* let wide tables scroll instead of stretching the page */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--dur) var(--ease);
}

.page-body {
  padding: 1.4rem 1.5rem;
  flex: 1;
}

/* ================================================================
   COMPONENTS
   ================================================================ */

/* ── Stat cards ──────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: 0 4px 6px -1px rgba(var(--shadow-color), 0.05), 0 2px 4px -1px rgba(var(--shadow-color), 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(var(--shadow-color), 0.05), 0 4px 6px -2px rgba(var(--shadow-color), 0.03);
}

.sc-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--gray-bg);
  color: var(--gray-fg);
  display: grid;
  place-items: center;
}
.sc-icon:not([data-ico]) { display: none; }   /* no icon chosen: no empty box */
.sc-icon[data-ico]::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.sc-icon.t-green  { background: var(--green-bg);  color: var(--green-fg); }
.sc-icon.t-amber  { background: var(--amber-bg);  color: var(--amber-fg); }
.sc-icon.t-red    { background: var(--red-bg);    color: var(--red-fg); }
.sc-icon.t-blue   { background: var(--blue-bg);   color: var(--blue-fg); }
.sc-icon.t-purple { background: var(--purple-bg); color: var(--purple-fg); }
.sc-icon.t-brand  { background: rgba(var(--accent-tint), .1); color: var(--accent); }   /* decorative tiles: no status meaning */

.sc-val {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;   /* a long total wraps instead of being cut off */
}

.sc-lbl {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 4px 6px -1px rgba(var(--shadow-color), 0.05), 0 2px 4px -1px rgba(var(--shadow-color), 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(var(--shadow-color), 0.05), 0 4px 6px -2px rgba(var(--shadow-color), 0.03);
}

.card-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .85rem;
}

/* ── Charts grid ─────────────────────────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.charts-row canvas {
  max-height: 220px;
}

/* Grid items default to min-width:auto, so a chart drawn at desktop width
   would keep its column (and the whole page) wide on phones. Let them shrink. */
.stats-row > *,
.stat-card > *,
.charts-row > *,
.card {
  min-width: 0;
}

canvas {
  max-width: 100%;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

/* ── Forms / Inputs ──────────────────────────────────────────── */
.form-group {
  margin-bottom: .9rem;
}

.form-group label {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .28rem;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: .52rem .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .875rem;
  font-family: inherit;
  transition: border-color .12s;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-lt);
  box-shadow: 0 0 0 3px rgba(var(--accent-tint), .2);
}

.form-control option {
  background: var(--card);
}

.search-box {
  width: 210px;
  padding: .42rem .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .84rem;
}

.search-box:focus {
  outline: none;
  border-color: var(--accent-lt);
}

.filter-sel {
  max-width: 100%;   /* a long option never pushes it past its card */
  padding: .42rem .65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .84rem;
  font-family: inherit;
}

.filter-sel:focus {
  outline: none;
  border-color: var(--accent-lt);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
/* Solid fill is reserved for the main action (primary/success). Everything else
   is a quiet outlined button whose colour lives in the text, so a row of
   Edit / Disable / Delete doesn't shout. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .15s ease;
  text-decoration: none;
  font-family: inherit;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--btn-green-bg);
  border-color: var(--btn-green-bd);
  color: var(--btn-green-fg);
}

.btn-primary:hover:not(:disabled) {
  background: var(--btn-green-hover);
  border-color: var(--btn-green-hover-bd);
}

.btn-success {
  background: var(--btn-green-bg);
  border-color: var(--btn-green-bd);
  color: var(--btn-green-fg);
}

.btn-success:hover:not(:disabled) {
  background: var(--btn-green-hover);
  border-color: var(--btn-green-hover-bd);
}

.btn-ghost,
.btn-warning,
.btn-danger {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 1px rgba(var(--shadow-color), .04);
}

.btn-ghost {
  color: var(--text);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--hover);
  border-color: var(--border-strong);
}

.btn-warning {
  color: var(--amber-text);
}

.btn-warning:hover:not(:disabled) {
  background: var(--amber-bg);
  border-color: var(--amber-bd);
}

.btn-danger {
  color: var(--red-text);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-sm {
  padding: .3rem .65rem;
  font-size: .76rem;
  border-radius: 6px;
}

/* A row of table actions: even spacing, wraps on narrow screens */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.row-actions form {
  display: contents;
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: .62rem;
  font-size: .9rem;
}

/* ── Tables ──────────────────────────────────────────────────── */
.tbl-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}

thead th {
  background: var(--surface);
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem .9rem;
  text-align: left;
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

tbody tr:hover {
  background: var(--hover);
}

tbody td {
  padding: .65rem .9rem;
  vertical-align: middle;
}

tbody tr:last-child {
  border-bottom: none;
}

/* Row numbers 1, 2, 3... for <table class="numbered"> with a <td class="row-num">.
   Rows hidden by a search filter (display:none) aren't counted, so the visible
   rows always number 1..n with no gaps. */
table.numbered tbody {
  counter-reset: row;
}

table.numbered tbody tr {
  counter-increment: row;
}

table.numbered .row-num::before {
  content: counter(row);
}

/* ── Badges (stock status): shape shared with .tag above ─────── */

/* Stock levels (owner's palette, Oct 2026), from mildest to most urgent:
   .b-ok   In stock                     eucalyptus
   .b-warn Restock soon / Warning       sandstone  (text darkened from #796345 to #755f42 for 4.7:1)
   .b-low  Low stock / Restock now      muted burgundy ("critical")
   .b-out  Out of stock / Urgent        dusty rose
   Used with .badge (Inventory, Stock Forecasting, Dashboard) and .tag (Available Products). */
.b-ok   { background: var(--stock-in-bg);   color: var(--stock-in-fg);   border-color: var(--stock-in-bd); }
.b-warn { background: var(--stock-low-bg);  color: var(--stock-low-fg);  border-color: var(--stock-low-bd); }
.b-low  { background: var(--stock-crit-bg); color: var(--stock-crit-fg); border-color: var(--stock-crit-bd); }
.b-out  { background: var(--stock-out-bg);  color: var(--stock-out-fg);  border-color: var(--stock-out-bd); }

.b-info {
  background: var(--blue-bg);
  color: var(--blue-fg);
  border-color: var(--blue-bd);
}

/* ── Modals ──────────────────────────────────────────────────── */
.overlay {
  display: flex;
  visibility: hidden;   /* hidden overlays take no clicks or focus, and can fade out */
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-color), .5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* keep modals off the screen edges on phones */
}

.overlay.open {
  visibility: visible;
  opacity: 1;
}

.overlay:not(.open) { pointer-events: none; }   /* while fading out, clicks reach the page */

.overlay .modal {
  transform: translateY(8px) scale(.98);
  transition: transform var(--dur) var(--ease);
}

.overlay.open .modal { transform: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(var(--shadow-color), 0.18);
  animation: popIn .18s ease;
}

@keyframes popIn {
  from {
    transform: scale(.96) translateY(8px);
    opacity: 0
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.modal-title {
  font-size: .98rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--danger);
}

.modal-footer {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1.1rem;
}

/* ── Flash messages ──────────────────────────────────────────── */
/* Plain line with a status rule; no tinted box. */
.flash {
  padding: .15rem 0 .15rem .75rem;
  border-left: 3px solid var(--text-faint);
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.flash-ok   { border-left-color: var(--green-fg); }
.flash-warn { border-left-color: var(--amber-fg); }
.flash-err  { border-left-color: var(--red-fg); color: var(--red-fg); }

/* ── Sale items mini-table ───────────────────────────────────── */
.items-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: .5rem;
}

.items-box table {
  font-size: .82rem;
}

/* ── Section divider label ───────────────────────────────────── */
.section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 1.2rem 0 .6rem;
}

/* ── Prediction row colours ──────────────────────────────────── */
tr.pred-crit td {
  color: var(--red-fg) !important;
  background: var(--red-bg);
}

tr.pred-warn td {
  color: var(--amber-fg) !important;
  background: var(--amber-bg);
}

/* ── Utilities ───────────────────────────────────────────────── */
.mb-1 {
  margin-bottom: .5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

/* ── Confirm sale / booking modal ────────────────────────────── */
.confirm-modal {
  max-width: 420px;
}

.confirm-title {
  margin: 0 0 .9rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.confirm-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .85rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.confirm-total span {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.confirm-total strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-text);
}

.confirm-meta {
  margin: .55rem 0 1rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-muted);
}

.confirm-meta strong {
  color: var(--text);
}

.callout {
  padding: .7rem .85rem;
  border-radius: 8px;
  font-size: .84rem;
  line-height: 1.45;
  margin-bottom: .85rem;
}

.callout-warn {
  background: var(--amber-bg);
  border: 1px solid var(--amber-bd);
  border-left-width: 4px;
  color: var(--amber-fg);
}

.declaration {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  transition: border-color .12s, background-color .12s;
}

.declaration:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-tint), .06);
}

.declaration input {
  margin-top: .2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent-strong);
}

.declaration strong {
  display: block;
  margin-bottom: .2rem;
  font-size: .9rem;
  color: var(--text);
}

.declaration span > span,
.declaration em {
  display: block;
}

.declaration em {
  margin-top: .35rem;
  font-size: .78rem;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.1rem;
}

/* ── Temporary password (shown once after approving a reset) ── */
.temp-pw-card {
  border-color: var(--green-bd);
  background: var(--green-bg);
}

.temp-pw-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.temp-pw {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--green-fg);
  background: var(--card);
  border: 1px solid var(--green-bd);
  border-radius: 8px;
  padding: .35rem .75rem;
  user-select: all;
}

/* ── Prediction: "based on ..." line under a suggestion ──────── */
.pred-basis {
  margin-top: .15rem;
  font-size: .74rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Chart legend (HTML, built by js/charts.js renderPie) ────── */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .9rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .1rem 0;
  background: none;
  border: none;
  font: inherit;
  font-size: .8rem;
  color: var(--chart-text);
  cursor: pointer;
}

.chart-legend-item:hover {
  color: var(--text);
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.chart-legend-item.is-zero {
  color: var(--text-faint);
}

.chart-legend-item.is-hidden {
  text-decoration: line-through;
  opacity: .55;
}

/* ── Chart date range & empty state ──────────────────────────── */
.date-range {
  font-size: .8rem;
}

.date-range .form-control {
  width: auto;
  padding: .32rem .5rem;
  font-size: .8rem;
}

.chart-card {
  position: relative;
}

.range-note {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: .25rem;
}

.chart-empty {
  position: absolute;
  inset: 3rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border-radius: 8px;
}

.chart-empty[hidden] {
  display: none;
}

.mt-1 {
  margin-top: .5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.fw7 {
  font-weight: 700;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.muted {
  color: var(--text-muted);
}

.green {
  color: var(--green-text);
}

.amber {
  color: var(--amber-text);
}

.red {
  color: var(--red-text);
}

.hidden {
  display: none !important;
}

/* ── Login page ──────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.4rem 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 25px -5px rgba(var(--shadow-color), 0.1), 0 10px 10px -5px rgba(var(--shadow-color), 0.04);
}

.login-logo {
  text-align: center;
  margin-bottom: 1.8rem;
}

.login-logo .company-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}

.login-logo .system-name {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

.login-logo .icon-board {
  font-size: 2.2rem;
}

.login-card label {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .3rem;
}

.login-card input {
  width: 100%;
  margin-bottom: .85rem;
}

/* ── Reports tabs ────────────────────────────────────────────── */
.tab-row {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
}

.tab-btn {
  padding: .38rem .85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: .83rem;
  cursor: pointer;
  font-family: inherit;
}

.tab-btn.active {
  background: var(--btn-green-bg);
  border-color: var(--btn-green-bd);
  color: var(--btn-green-fg);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media screen and (max-width: 1100px) {   /* sidebar + two charts need about 1100px */
  .charts-row {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {

  /* Sidebar becomes an off-canvas drawer, opened with the toggle button */
  .sidebar {
    width: min(280px, 85vw);
    z-index: 200;
    transform: translateX(-100%);
  }

  .sidebar-open .sidebar {
    transform: none;
    box-shadow: 4px 0 24px rgba(var(--shadow-color), .2);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(var(--shadow-color), .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }

  .sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .sidebar-open body {
    overflow: hidden;
  }

  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .sidebar-close:hover {
    background: var(--hover);
    color: var(--text);
  }

  .nav-link {
    padding: .75rem 1.1rem; /* bigger tap targets */
  }

  .sidebar-toggle,
  .sidebar-collapsed .sidebar-toggle {
    left: .6rem;
  }

  .main,
  .sidebar-collapsed .main {
    margin-left: 0;
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 1rem;
    flex-wrap: wrap;
  }

  .topbar-title {
    line-height: 1.3;
  }

  .page-body {
    padding: 1rem;
  }

  .card {
    padding: 1rem;
  }

  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .stat-card {
    padding: .85rem 1rem;
    flex-direction: column;   /* icon on top: a ₱21,513,675.00 total needs the full card width */
    align-items: flex-start;
    gap: .6rem;
  }
  .sc-val { font-size: 1.2rem; }

  /* Filter tabs scroll sideways instead of overflowing the page */
  .tab-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .tab-btn {
    flex-shrink: 0;
  }

  .tbl-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    padding: 1.1rem;
  }
}

@media screen and (max-width: 480px) {
  .page-body {
    padding: .85rem .75rem;
  }

  /* Tighter cells so more table columns fit before sideways scrolling */
  thead th,
  tbody td {
    padding: .55rem .6rem;
  }

  thead th {
    letter-spacing: .03em;
    white-space: normal; /* let long headers like "Auto Threshold" wrap */
  }

  .card {
    padding: .85rem;
  }

  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }

  .topbar-meta {
    display: none; /* date doesn't fit next to the title on phones */
  }

  .search-box {
    width: 100%;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media screen and (max-width: 360px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* ── Pagination ───────────────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
}

.pager .btn.active {
  background: var(--btn-green-bg);
  color: var(--btn-green-fg);
  border-color: var(--btn-green-bd);
}

/* ── Print Layout ────────────────────────────────────────────── */
@media print {

  .sidebar,
  .sidebar-toggle,
  .sidebar-backdrop,
  .topbar,
  .toolbar,
  .tab-row,
  .pager,
  .no-print {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-body {
    padding: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .card,
  .stat-card {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  .text-muted,
  .sc-lbl,
  .muted {
    color: #555 !important;
  }

  th,
  td {
    border-bottom: 1px solid #ccc !important;
    color: black !important;
  }

  table {
    width: 100% !important;
    margin-top: 10px;
  }

  canvas {
    background: white !important;
    filter: invert(1) hue-rotate(180deg);
  }
}
/* ── Notifications (pop-ups from includes/sidebar.php) ───────── */
.notif-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}

.notif {
  pointer-events: auto;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-fg);
  border-radius: 8px;
  padding: .7rem .8rem;
  box-shadow: 0 6px 24px rgba(var(--shadow-color), .16);
  animation: notif-in .2s ease-out;
}

.notif.green { border-left-color: var(--green-fg); }
.notif.red   { border-left-color: var(--red-fg); }
.notif.amber { border-left-color: var(--amber-fg); }

.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: .88rem; color: var(--text); }
.notif-body { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; overflow-wrap: anywhere; }
.notif-link { display: inline-block; margin-top: .35rem; font-size: .8rem; font-weight: 600; }

.notif-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .1rem;
}

.notif-close:hover { color: var(--text); }

@keyframes notif-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .notif { animation: none; }
}
/* ── My Orders (agents) ─────────────────────────────────────── */
.order-list { display: grid; gap: .9rem; }
.order-card { margin: 0; }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.order-items { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .86rem; }
.order-items li { margin: .15rem 0; }
.order-loaded { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.order-photo { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
@media screen and (max-width: 480px) { .order-photo { width: 100%; height: 180px; } }
/* ── Load photo viewer (includes/sidebar.php) ───────────────── */
.photo-viewer-box { max-width: min(900px, 96vw); padding: 1rem; }
.photo-viewer-box img { display: block; width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; background: var(--surface); }
.photo-viewer-box .modal-footer { margin-top: .8rem; }

/* ── Show/hide password (js/password-toggle.js) ─────────────── */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 2.6rem; width: 100%; }
.pw-toggle {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--text); background: var(--surface); }

/* ── Tables as cards on phones (<table class="tbl-cards">) ─────────
   Each row becomes a card: the data-card="head" cell on top, then one
   "Label ........ value" line per cell (label from data-label), then the
   data-card="actions" cell with full-size, easy-to-tap buttons.
   Desktop keeps the normal table. */
@media screen and (max-width: 768px) {
  .tbl-wrap:has(> .tbl-cards) {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .tbl-cards thead {
    display: none;
  }

  .tbl-cards,
  .tbl-cards tbody,
  .tbl-cards tr,
  .tbl-cards td {
    display: block;
    width: 100%;
  }

  .tbl-cards tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .35rem .9rem .8rem;
    margin-bottom: .75rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-color), .04);
  }

  .tbl-cards tbody tr:last-child {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }

  .tbl-cards tbody tr:hover {
    background: var(--card);
  }

  .tbl-cards td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .32rem 0;
    text-align: right;
    border-bottom: 1px dashed var(--border);
  }

  .tbl-cards td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 600;
    text-align: left;
  }

  .tbl-cards td[data-card="num"] {
    display: none;
  }

  .tbl-cards td[data-card="head"] {
    order: -1;
    font-weight: 700;
    padding: .55rem 0 .5rem;
    margin-bottom: .15rem;
    border-bottom: 1px solid var(--border);
    font-size: .92rem;
  }

  .tbl-cards td[data-card="actions"] {
    order: 99;
    padding: .7rem 0 0;
  }

  /* plain buttons placed straight in the actions cell wrap nicely too */
  .tbl-cards td[data-card="actions"]:not(:has(> div)) {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Bigger tap targets (44px) for row buttons on touch screens */
  .tbl-cards td[data-card="actions"] .btn {
    min-height: 44px;
    padding: .55rem .95rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
  }

  .tbl-cards td[data-card="actions"] > div {
    gap: .5rem !important;
  }

  /* the status label sits on its own line above the buttons */
  .tbl-cards td[data-card="actions"] .tag {
    flex-basis: 100%;
    justify-content: center;
  }

  /* The "nothing found" row stays a plain message */
  .tbl-cards td[colspan] {
    text-align: center;
    border: none;
  }
}
/* ── Quotation: Download / Send buttons (stack full-width on phones) ── */
.quote-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1.5rem;
}

.quote-actions .btn {
  font-size: 1.05rem;
  padding: .8rem 1.5rem;
  min-height: 48px;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 600px) {
  .quote-actions .btn {
    flex: 1 1 100%;
  }
}

/* ── Icons: <span class="ico ico-check">Text</span> (status labels, .tag/.badge, show none: see .tag above) ──
   Icons: Phosphor Icons 2.1.1 (Regular; Bold check/x inside the stepper dots),
   MIT licence, https://phosphoricons.com
   Icon + text, never colour alone. SVG masks take the text colour. Stock badges
   (.badge.b-*) are text only; the word carries the status. */
:root {
  --ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M173.66%2C98.34a8%2C8%2C0%2C0%2C1%2C0%2C11.32l-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35A8%2C8%2C0%2C0%2C1%2C173.66%2C98.34ZM232%2C128A104%2C104%2C0%2C1%2C1%2C128%2C24%2C104.11%2C104.11%2C0%2C0%2C1%2C232%2C128Zm-16%2C0a88%2C88%2C0%2C1%2C0-88%2C88A88.1%2C88.1%2C0%2C0%2C0%2C216%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M165.66%2C101.66%2C139.31%2C128l26.35%2C26.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31l-26.34%2C26.35a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C90.34%2C101.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32L128%2C116.69l26.34-26.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32ZM232%2C128A104%2C104%2C0%2C1%2C1%2C128%2C24%2C104.11%2C104.11%2C0%2C0%2C1%2C232%2C128Zm-16%2C0a88%2C88%2C0%2C1%2C0-88%2C88A88.1%2C88.1%2C0%2C0%2C0%2C216%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M236.8%2C188.09%2C149.35%2C36.22h0a24.76%2C24.76%2C0%2C0%2C0-42.7%2C0L19.2%2C188.09a23.51%2C23.51%2C0%2C0%2C0%2C0%2C23.72A24.35%2C24.35%2C0%2C0%2C0%2C40.55%2C224h174.9a24.35%2C24.35%2C0%2C0%2C0%2C21.33-12.19A23.51%2C23.51%2C0%2C0%2C0%2C236.8%2C188.09ZM222.93%2C203.8a8.5%2C8.5%2C0%2C0%2C1-7.48%2C4.2H40.55a8.5%2C8.5%2C0%2C0%2C1-7.48-4.2%2C7.59%2C7.59%2C0%2C0%2C1%2C0-7.72L120.52%2C44.21a8.75%2C8.75%2C0%2C0%2C1%2C15%2C0l87.45%2C151.87A7.59%2C7.59%2C0%2C0%2C1%2C222.93%2C203.8ZM120%2C144V104a8%2C8%2C0%2C0%2C1%2C16%2C0v40a8%2C8%2C0%2C0%2C1-16%2C0Zm20%2C36a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C140%2C180Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm64-88a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1-8-8V72a8%2C8%2C0%2C0%2C1%2C16%2C0v48h48A8%2C8%2C0%2C0%2C1%2C192%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-truck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M255.42%2C117l-14-35A15.93%2C15.93%2C0%2C0%2C0%2C226.58%2C72H192V64a8%2C8%2C0%2C0%2C0-8-8H32A16%2C16%2C0%2C0%2C0%2C16%2C72V184a16%2C16%2C0%2C0%2C0%2C16%2C16H49a32%2C32%2C0%2C0%2C0%2C62%2C0h50a32%2C32%2C0%2C0%2C0%2C62%2C0h17a16%2C16%2C0%2C0%2C0%2C16-16V120A7.94%2C7.94%2C0%2C0%2C0%2C255.42%2C117ZM192%2C88h34.58l9.6%2C24H192ZM32%2C72H176v64H32ZM80%2C208a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C80%2C208Zm81-24H111a32%2C32%2C0%2C0%2C0-62%2C0H32V152H176v12.31A32.11%2C32.11%2C0%2C0%2C0%2C161%2C184Zm31%2C24a16%2C16%2C0%2C1%2C1%2C16-16A16%2C16%2C0%2C0%2C1%2C192%2C208Zm48-24H223a32.06%2C32.06%2C0%2C0%2C0-31-24V128h48Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-undo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M224%2C128a96%2C96%2C0%2C0%2C1-94.71%2C96H128A95.38%2C95.38%2C0%2C0%2C1%2C62.1%2C197.8a8%2C8%2C0%2C0%2C1%2C11-11.63A80%2C80%2C0%2C1%2C0%2C71.43%2C71.39a3.07%2C3.07%2C0%2C0%2C1-.26.25L44.59%2C96H72a8%2C8%2C0%2C0%2C1%2C0%2C16H24a8%2C8%2C0%2C0%2C1-8-8V56a8%2C8%2C0%2C0%2C1%2C16%2C0V85.8L60.25%2C60A96%2C96%2C0%2C0%2C1%2C224%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-ban: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm88%2C104a87.56%2C87.56%2C0%2C0%2C1-20.41%2C56.28L71.72%2C60.4A88%2C88%2C0%2C0%2C1%2C216%2C128ZM40%2C128A87.56%2C87.56%2C0%2C0%2C1%2C60.41%2C71.72L184.28%2C195.6A88%2C88%2C0%2C0%2C1%2C40%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-tick: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M208.49%2C191.51a12%2C12%2C0%2C0%2C1-17%2C17L128%2C145%2C64.49%2C208.49a12%2C12%2C0%2C0%2C1-17-17L111%2C128%2C47.51%2C64.49a12%2C12%2C0%2C0%2C1%2C17-17L128%2C111l63.51-63.52a12%2C12%2C0%2C0%2C1%2C17%2C17L145%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M229.66%2C218.34l-50.07-50.06a88.11%2C88.11%2C0%2C1%2C0-11.31%2C11.31l50.06%2C50.07a8%2C8%2C0%2C0%2C0%2C11.32-11.32ZM40%2C112a72%2C72%2C0%2C1%2C1%2C72%2C72A72.08%2C72.08%2C0%2C0%2C1%2C40%2C112Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-pencil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M227.31%2C73.37%2C182.63%2C28.68a16%2C16%2C0%2C0%2C0-22.63%2C0L36.69%2C152A15.86%2C15.86%2C0%2C0%2C0%2C32%2C163.31V208a16%2C16%2C0%2C0%2C0%2C16%2C16H92.69A15.86%2C15.86%2C0%2C0%2C0%2C104%2C219.31L227.31%2C96a16%2C16%2C0%2C0%2C0%2C0-22.63ZM92.69%2C208H48V163.31l88-88L180.69%2C120ZM192%2C108.68%2C147.31%2C64l24-24L216%2C84.68Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-trash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M216%2C48H176V40a24%2C24%2C0%2C0%2C0-24-24H104A24%2C24%2C0%2C0%2C0%2C80%2C40v8H40a8%2C8%2C0%2C0%2C0%2C0%2C16h8V208a16%2C16%2C0%2C0%2C0%2C16%2C16H192a16%2C16%2C0%2C0%2C0%2C16-16V64h8a8%2C8%2C0%2C0%2C0%2C0-16ZM96%2C40a8%2C8%2C0%2C0%2C1%2C8-8h48a8%2C8%2C0%2C0%2C1%2C8%2C8v8H96Zm96%2C168H64V64H192ZM112%2C104v64a8%2C8%2C0%2C0%2C1-16%2C0V104a8%2C8%2C0%2C0%2C1%2C16%2C0Zm48%2C0v64a8%2C8%2C0%2C0%2C1-16%2C0V104a8%2C8%2C0%2C0%2C1%2C16%2C0Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-archive: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%2716%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%2732%27%20y%3D%2748%27%20width%3D%27192%27%20height%3D%2748%27%20rx%3D%278%27%2F%3E%3Cpath%20d%3D%27M48%2096v104a8%208%200%200%200%208%208h144a8%208%200%200%200%208-8V96%27%2F%3E%3Cpath%20d%3D%27M104%20136h48%27%2F%3E%3C%2Fsvg%3E");
  --ico-package: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M223.68%2C66.15%2C135.68%2C18a15.88%2C15.88%2C0%2C0%2C0-15.36%2C0l-88%2C48.17a16%2C16%2C0%2C0%2C0-8.32%2C14v95.64a16%2C16%2C0%2C0%2C0%2C8.32%2C14l88%2C48.17a15.88%2C15.88%2C0%2C0%2C0%2C15.36%2C0l88-48.17a16%2C16%2C0%2C0%2C0%2C8.32-14V80.18A16%2C16%2C0%2C0%2C0%2C223.68%2C66.15ZM128%2C32l80.34%2C44-29.77%2C16.3-80.35-44ZM128%2C120%2C47.66%2C76l33.9-18.56%2C80.34%2C44ZM40%2C90l80%2C43.78v85.79L40%2C175.82Zm176%2C85.78h0l-80%2C43.79V133.82l32-17.51V152a8%2C8%2C0%2C0%2C0%2C16%2C0V107.55L216%2C90v85.77Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M216%2C40H40A16%2C16%2C0%2C0%2C0%2C24%2C56V200a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A16%2C16%2C0%2C0%2C0%2C216%2C40Zm0%2C16V158.75l-26.07-26.06a16%2C16%2C0%2C0%2C0-22.63%2C0l-20%2C20-44-44a16%2C16%2C0%2C0%2C0-22.62%2C0L40%2C149.37V56ZM40%2C172l52-52%2C80%2C80H40Zm176%2C28H194.63l-36-36%2C20-20L216%2C181.38V200ZM144%2C100a12%2C12%2C0%2C1%2C1%2C12%2C12A12%2C12%2C0%2C0%2C1%2C144%2C100Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-power: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M120%2C128V48a8%2C8%2C0%2C0%2C1%2C16%2C0v80a8%2C8%2C0%2C0%2C1-16%2C0Zm60.37-78.7a8%2C8%2C0%2C0%2C0-8.74%2C13.4C194.74%2C77.77%2C208%2C101.57%2C208%2C128a80%2C80%2C0%2C0%2C1-160%2C0c0-26.43%2C13.26-50.23%2C36.37-65.3a8%2C8%2C0%2C0%2C0-8.74-13.4C47.9%2C67.38%2C32%2C96.06%2C32%2C128a96%2C96%2C0%2C0%2C0%2C192%2C0C224%2C96.06%2C208.1%2C67.38%2C180.37%2C49.3Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-xmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M205.66%2C194.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31%2C61.66%2C205.66a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C50.34%2C61.66A8%2C8%2C0%2C0%2C1%2C61.66%2C50.34L128%2C116.69l66.34-66.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L139.31%2C128Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-checkmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M229.66%2C77.66l-128%2C128a8%2C8%2C0%2C0%2C1-11.32%2C0l-56-56a8%2C8%2C0%2C0%2C1%2C11.32-11.32L96%2C188.69%2C218.34%2C66.34a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M216%2C32H88a8%2C8%2C0%2C0%2C0-8%2C8V80H40a8%2C8%2C0%2C0%2C0-8%2C8V216a8%2C8%2C0%2C0%2C0%2C8%2C8H168a8%2C8%2C0%2C0%2C0%2C8-8V176h40a8%2C8%2C0%2C0%2C0%2C8-8V40A8%2C8%2C0%2C0%2C0%2C216%2C32ZM160%2C208H48V96H160Zm48-48H176V88a8%2C8%2C0%2C0%2C0-8-8H96V48H208Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-chat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M216%2C48H40A16%2C16%2C0%2C0%2C0%2C24%2C64V224a15.85%2C15.85%2C0%2C0%2C0%2C9.24%2C14.5A16.13%2C16.13%2C0%2C0%2C0%2C40%2C240a15.89%2C15.89%2C0%2C0%2C0%2C10.25-3.78l.09-.07L83%2C208H216a16%2C16%2C0%2C0%2C0%2C16-16V64A16%2C16%2C0%2C0%2C0%2C216%2C48ZM40%2C224h0ZM216%2C192H80a8%2C8%2C0%2C0%2C0-5.23%2C1.95L40%2C224V64H216ZM88%2C112a8%2C8%2C0%2C0%2C1%2C8-8h64a8%2C8%2C0%2C0%2C1%2C0%2C16H96A8%2C8%2C0%2C0%2C1%2C88%2C112Zm0%2C32a8%2C8%2C0%2C0%2C1%2C8-8h64a8%2C8%2C0%2C1%2C1%2C0%2C16H96A8%2C8%2C0%2C0%2C1%2C88%2C144Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-boards: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M230.91%2C172A8%2C8%2C0%2C0%2C1%2C228%2C182.91l-96%2C56a8%2C8%2C0%2C0%2C1-8.06%2C0l-96-56A8%2C8%2C0%2C0%2C1%2C36%2C169.09l92%2C53.65%2C92-53.65A8%2C8%2C0%2C0%2C1%2C230.91%2C172ZM220%2C121.09l-92%2C53.65L36%2C121.09A8%2C8%2C0%2C0%2C0%2C28%2C134.91l96%2C56a8%2C8%2C0%2C0%2C0%2C8.06%2C0l96-56A8%2C8%2C0%2C1%2C0%2C220%2C121.09ZM24%2C80a8%2C8%2C0%2C0%2C1%2C4-6.91l96-56a8%2C8%2C0%2C0%2C1%2C8.06%2C0l96%2C56a8%2C8%2C0%2C0%2C1%2C0%2C13.82l-96%2C56a8%2C8%2C0%2C0%2C1-8.06%2C0l-96-56A8%2C8%2C0%2C0%2C1%2C24%2C80Zm23.88%2C0L128%2C126.74%2C208.12%2C80%2C128%2C33.26Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-trend: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M240%2C56v64a8%2C8%2C0%2C0%2C1-16%2C0V75.31l-82.34%2C82.35a8%2C8%2C0%2C0%2C1-11.32%2C0L96%2C123.31%2C29.66%2C189.66a8%2C8%2C0%2C0%2C1-11.32-11.32l72-72a8%2C8%2C0%2C0%2C1%2C11.32%2C0L136%2C140.69%2C212.69%2C64H168a8%2C8%2C0%2C0%2C1%2C0-16h64A8%2C8%2C0%2C0%2C1%2C240%2C56Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-trend-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M240%2C128v64a8%2C8%2C0%2C0%2C1-8%2C8H168a8%2C8%2C0%2C0%2C1%2C0-16h44.69L136%2C107.31l-34.34%2C34.35a8%2C8%2C0%2C0%2C1-11.32%2C0l-72-72A8%2C8%2C0%2C0%2C1%2C29.66%2C58.34L96%2C124.69l34.34-34.35a8%2C8%2C0%2C0%2C1%2C11.32%2C0L224%2C172.69V128a8%2C8%2C0%2C0%2C1%2C16%2C0Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm-8-80V80a8%2C8%2C0%2C0%2C1%2C16%2C0v56a8%2C8%2C0%2C0%2C1-16%2C0Zm20%2C36a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C140%2C172Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M239.18%2C97.26A16.38%2C16.38%2C0%2C0%2C0%2C224.92%2C86l-59-4.76L143.14%2C26.15a16.36%2C16.36%2C0%2C0%2C0-30.27%2C0L90.11%2C81.23%2C31.08%2C86a16.46%2C16.46%2C0%2C0%2C0-9.37%2C28.86l45%2C38.83L53%2C211.75a16.38%2C16.38%2C0%2C0%2C0%2C24.5%2C17.82L128%2C198.49l50.53%2C31.08A16.4%2C16.4%2C0%2C0%2C0%2C203%2C211.75l-13.76-58.07%2C45-38.83A16.43%2C16.43%2C0%2C0%2C0%2C239.18%2C97.26Zm-15.34%2C5.47-48.7%2C42a8%2C8%2C0%2C0%2C0-2.56%2C7.91l14.88%2C62.8a.37.37%2C0%2C0%2C1-.17.48c-.18.14-.23.11-.38%2C0l-54.72-33.65a8%2C8%2C0%2C0%2C0-8.38%2C0L69.09%2C215.94c-.15.09-.19.12-.38%2C0a.37.37%2C0%2C0%2C1-.17-.48l14.88-62.8a8%2C8%2C0%2C0%2C0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8%2C8%2C0%2C0%2C0%2C103%2C91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153%2C91.86a8%2C8%2C0%2C0%2C0%2C6.75%2C4.92l63.92%2C5.16c.15%2C0%2C.24%2C0%2C.33.29S224%2C102.63%2C223.84%2C102.73Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M208%2C32H184V24a8%2C8%2C0%2C0%2C0-16%2C0v8H88V24a8%2C8%2C0%2C0%2C0-16%2C0v8H48A16%2C16%2C0%2C0%2C0%2C32%2C48V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V48A16%2C16%2C0%2C0%2C0%2C208%2C32ZM72%2C48v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h80v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h24V80H48V48ZM208%2C208H48V96H208V208Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-target: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M221.87%2C83.16A104.1%2C104.1%2C0%2C1%2C1%2C195.67%2C49l22.67-22.68a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32l-96%2C96a8%2C8%2C0%2C0%2C1-11.32-11.32l27.72-27.72a40%2C40%2C0%2C1%2C0%2C17.87%2C31.09%2C8%2C8%2C0%2C1%2C1%2C16-.9%2C56%2C56%2C0%2C1%2C1-22.38-41.65L184.3%2C60.39a87.88%2C87.88%2C0%2C1%2C0%2C23.13%2C29.67%2C8%2C8%2C0%2C0%2C1%2C14.44-6.9Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-receipt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M72%2C104a8%2C8%2C0%2C0%2C1%2C8-8h96a8%2C8%2C0%2C0%2C1%2C0%2C16H80A8%2C8%2C0%2C0%2C1%2C72%2C104Zm8%2C40h96a8%2C8%2C0%2C0%2C0%2C0-16H80a8%2C8%2C0%2C0%2C0%2C0%2C16ZM232%2C56V208a8%2C8%2C0%2C0%2C1-11.58%2C7.15L192%2C200.94l-28.42%2C14.21a8%2C8%2C0%2C0%2C1-7.16%2C0L128%2C200.94%2C99.58%2C215.15a8%2C8%2C0%2C0%2C1-7.16%2C0L64%2C200.94%2C35.58%2C215.15A8%2C8%2C0%2C0%2C1%2C24%2C208V56A16%2C16%2C0%2C0%2C1%2C40%2C40H216A16%2C16%2C0%2C0%2C1%2C232%2C56Zm-16%2C0H40V195.06l20.42-10.22a8%2C8%2C0%2C0%2C1%2C7.16%2C0L96%2C199.06l28.42-14.22a8%2C8%2C0%2C0%2C1%2C7.16%2C0L160%2C199.06l28.42-14.22a8%2C8%2C0%2C0%2C1%2C7.16%2C0L216%2C195.06Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-hourglass: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M200%2C75.64V40a16%2C16%2C0%2C0%2C0-16-16H72A16%2C16%2C0%2C0%2C0%2C56%2C40V76a16.07%2C16.07%2C0%2C0%2C0%2C6.4%2C12.8L114.67%2C128%2C62.4%2C167.2A16.07%2C16.07%2C0%2C0%2C0%2C56%2C180v36a16%2C16%2C0%2C0%2C0%2C16%2C16H184a16%2C16%2C0%2C0%2C0%2C16-16V180.36a16.09%2C16.09%2C0%2C0%2C0-6.35-12.77L141.27%2C128l52.38-39.6A16.05%2C16.05%2C0%2C0%2C0%2C200%2C75.64ZM72%2C40H184V75.64L178.23%2C80H77.33L72%2C76Zm56%2C78L98.67%2C96h58.4Zm56%2C98H72V180l48-36v24a8%2C8%2C0%2C0%2C0%2C16%2C0V144.08l48%2C36.28Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-arrow-in: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M205.66%2C149.66l-72%2C72a8%2C8%2C0%2C0%2C1-11.32%2C0l-72-72a8%2C8%2C0%2C0%2C1%2C11.32-11.32L120%2C196.69V40a8%2C8%2C0%2C0%2C1%2C16%2C0V196.69l58.34-58.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-arrow-out: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M205.66%2C117.66a8%2C8%2C0%2C0%2C1-11.32%2C0L136%2C59.31V216a8%2C8%2C0%2C0%2C1-16%2C0V59.31L61.66%2C117.66a8%2C8%2C0%2C0%2C1-11.32-11.32l72-72a8%2C8%2C0%2C0%2C1%2C11.32%2C0l72%2C72A8%2C8%2C0%2C0%2C1%2C205.66%2C117.66Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-adjust: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M213.66%2C181.66l-32%2C32a8%2C8%2C0%2C0%2C1-11.32-11.32L188.69%2C184H48a8%2C8%2C0%2C0%2C1%2C0-16H188.69l-18.35-18.34a8%2C8%2C0%2C0%2C1%2C11.32-11.32l32%2C32A8%2C8%2C0%2C0%2C1%2C213.66%2C181.66Zm-139.32-64a8%2C8%2C0%2C0%2C0%2C11.32-11.32L67.31%2C88H208a8%2C8%2C0%2C0%2C0%2C0-16H67.31L85.66%2C53.66A8%2C8%2C0%2C0%2C0%2C74.34%2C42.34l-32%2C32a8%2C8%2C0%2C0%2C0%2C0%2C11.32Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1%2C0-16h88A8%2C8%2C0%2C0%2C1%2C224%2C128ZM128%2C72h88a8%2C8%2C0%2C0%2C0%2C0-16H128a8%2C8%2C0%2C0%2C0%2C0%2C16Zm88%2C112H128a8%2C8%2C0%2C0%2C0%2C0%2C16h88a8%2C8%2C0%2C0%2C0%2C0-16ZM82.34%2C42.34%2C56%2C68.69%2C45.66%2C58.34A8%2C8%2C0%2C0%2C0%2C34.34%2C69.66l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32A8%2C8%2C0%2C0%2C0%2C82.34%2C42.34Zm0%2C64L56%2C132.69%2C45.66%2C122.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Zm0%2C64L56%2C196.69%2C45.66%2C186.34a8%2C8%2C0%2C0%2C0-11.32%2C11.32l16%2C16a8%2C8%2C0%2C0%2C0%2C11.32%2C0l32-32a8%2C8%2C0%2C0%2C0-11.32-11.32Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-chart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M232%2C208a8%2C8%2C0%2C0%2C1-8%2C8H32a8%2C8%2C0%2C0%2C1-8-8V48a8%2C8%2C0%2C0%2C1%2C16%2C0V156.69l50.34-50.35a8%2C8%2C0%2C0%2C1%2C11.32%2C0L128%2C132.69%2C180.69%2C80H160a8%2C8%2C0%2C0%2C1%2C0-16h40a8%2C8%2C0%2C0%2C1%2C8%2C8v40a8%2C8%2C0%2C0%2C1-16%2C0V91.31l-58.34%2C58.35a8%2C8%2C0%2C0%2C1-11.32%2C0L96%2C123.31l-56%2C56V200H224A8%2C8%2C0%2C0%2C1%2C232%2C208Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M117.25%2C157.92a60%2C60%2C0%2C1%2C0-66.5%2C0A95.83%2C95.83%2C0%2C0%2C0%2C3.53%2C195.63a8%2C8%2C0%2C1%2C0%2C13.4%2C8.74%2C80%2C80%2C0%2C0%2C1%2C134.14%2C0%2C8%2C8%2C0%2C0%2C0%2C13.4-8.74A95.83%2C95.83%2C0%2C0%2C0%2C117.25%2C157.92ZM40%2C108a44%2C44%2C0%2C1%2C1%2C44%2C44A44.05%2C44.05%2C0%2C0%2C1%2C40%2C108Zm210.14%2C98.7a8%2C8%2C0%2C0%2C1-11.07-2.33A79.83%2C79.83%2C0%2C0%2C0%2C172%2C168a8%2C8%2C0%2C0%2C1%2C0-16%2C44%2C44%2C0%2C1%2C0-16.34-84.87%2C8%2C8%2C0%2C1%2C1-5.94-14.85%2C60%2C60%2C0%2C0%2C1%2C55.53%2C105.64%2C95.83%2C95.83%2C0%2C0%2C1%2C47.22%2C37.71A8%2C8%2C0%2C0%2C1%2C250.14%2C206.7Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-caret: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-store: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M232%2C96a7.89%2C7.89%2C0%2C0%2C0-.3-2.2L217.35%2C43.6A16.07%2C16.07%2C0%2C0%2C0%2C202%2C32H54A16.07%2C16.07%2C0%2C0%2C0%2C38.65%2C43.6L24.31%2C93.8A7.89%2C7.89%2C0%2C0%2C0%2C24%2C96h0v16a40%2C40%2C0%2C0%2C0%2C16%2C32v72a8%2C8%2C0%2C0%2C0%2C8%2C8H208a8%2C8%2C0%2C0%2C0%2C8-8V144a40%2C40%2C0%2C0%2C0%2C16-32V96ZM54%2C48H202l11.42%2C40H42.61Zm50%2C56h48v8a24%2C24%2C0%2C0%2C1-48%2C0Zm-16%2C0v8a24%2C24%2C0%2C0%2C1-35.12%2C21.26%2C7.88%2C7.88%2C0%2C0%2C0-1.82-1.06A24%2C24%2C0%2C0%2C1%2C40%2C112v-8ZM200%2C208H56V151.2a40.57%2C40.57%2C0%2C0%2C0%2C8%2C.8%2C40%2C40%2C0%2C0%2C0%2C32-16%2C40%2C40%2C0%2C0%2C0%2C64%2C0%2C40%2C40%2C0%2C0%2C0%2C32%2C16%2C40.57%2C40.57%2C0%2C0%2C0%2C8-.8Zm4.93-75.8a8.08%2C8.08%2C0%2C0%2C0-1.8%2C1.05A24%2C24%2C0%2C0%2C1%2C168%2C112v-8h48v8A24%2C24%2C0%2C0%2C1%2C204.93%2C132.2Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-coins: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M230.33%2C141.06a24.43%2C24.43%2C0%2C0%2C0-21.24-4.23l-41.84%2C9.62A28%2C28%2C0%2C0%2C0%2C140%2C112H89.94a31.82%2C31.82%2C0%2C0%2C0-22.63%2C9.37L44.69%2C144H16A16%2C16%2C0%2C0%2C0%2C0%2C160v40a16%2C16%2C0%2C0%2C0%2C16%2C16H120a7.93%2C7.93%2C0%2C0%2C0%2C1.94-.24l64-16a6.94%2C6.94%2C0%2C0%2C0%2C1.19-.4L226%2C182.82l.44-.2a24.6%2C24.6%2C0%2C0%2C0%2C3.93-41.56ZM16%2C160H40v40H16Zm203.43%2C8.21-38%2C16.18L119%2C200H56V155.31l22.63-22.62A15.86%2C15.86%2C0%2C0%2C1%2C89.94%2C128H140a12%2C12%2C0%2C0%2C1%2C0%2C24H112a8%2C8%2C0%2C0%2C0%2C0%2C16h32a8.32%2C8.32%2C0%2C0%2C0%2C1.79-.2l67-15.41.31-.08a8.6%2C8.6%2C0%2C0%2C1%2C6.3%2C15.9ZM164%2C96a36%2C36%2C0%2C0%2C0%2C5.9-.48%2C36%2C36%2C0%2C1%2C0%2C28.22-47A36%2C36%2C0%2C1%2C0%2C164%2C96Zm60-12a20%2C20%2C0%2C1%2C1-20-20A20%2C20%2C0%2C0%2C1%2C224%2C84ZM164%2C40a20%2C20%2C0%2C0%2C1%2C19.25%2C14.61%2C36%2C36%2C0%2C0%2C0-15%2C24.93A20.42%2C20.42%2C0%2C0%2C1%2C164%2C80a20%2C20%2C0%2C0%2C1%2C0-40Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-cash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2C88a40%2C40%2C0%2C1%2C0%2C40%2C40A40%2C40%2C0%2C0%2C0%2C128%2C88Zm0%2C64a24%2C24%2C0%2C1%2C1%2C24-24A24%2C24%2C0%2C0%2C1%2C128%2C152ZM240%2C56H16a8%2C8%2C0%2C0%2C0-8%2C8V192a8%2C8%2C0%2C0%2C0%2C8%2C8H240a8%2C8%2C0%2C0%2C0%2C8-8V64A8%2C8%2C0%2C0%2C0%2C240%2C56ZM193.65%2C184H62.35A56.78%2C56.78%2C0%2C0%2C0%2C24%2C145.65v-35.3A56.78%2C56.78%2C0%2C0%2C0%2C62.35%2C72h131.3A56.78%2C56.78%2C0%2C0%2C0%2C232%2C110.35v35.3A56.78%2C56.78%2C0%2C0%2C0%2C193.65%2C184ZM232%2C93.37A40.81%2C40.81%2C0%2C0%2C1%2C210.63%2C72H232ZM45.37%2C72A40.81%2C40.81%2C0%2C0%2C1%2C24%2C93.37V72ZM24%2C162.63A40.81%2C40.81%2C0%2C0%2C1%2C45.37%2C184H24ZM210.63%2C184A40.81%2C40.81%2C0%2C0%2C1%2C232%2C162.63V184Z%22%2F%3E%3C%2Fsvg%3E");
}

.ico-check { --ico: var(--ico-check); }
.ico-x { --ico: var(--ico-x); }
.ico-alert { --ico: var(--ico-alert); }
.ico-clock { --ico: var(--ico-clock); }
.ico-truck { --ico: var(--ico-truck); }
.ico-undo { --ico: var(--ico-undo); }
.ico-ban { --ico: var(--ico-ban); }
.ico-cash { --ico: var(--ico-cash); }

.ico::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-right: .3em;
  vertical-align: -.17em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ── Field errors (window.fieldError in includes/sidebar.php) ─────────── */
.form-control.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-tint), .14);
}

.field-error {
  --ico: var(--ico-alert);
  display: flex;
  align-items: flex-start;
  gap: .3rem;
  margin-top: .35rem;
  color: var(--red-fg);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
}

.field-error::before {
  content: "";
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-top: .05em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ── Order progress (My Orders): Queued → Loaded → Paid ───────────────── */
.stepper {
  display: flex;
  list-style: none;
  margin: .8rem 0 .2rem;
  padding: 0;
  counter-reset: step;
}

.stepper li {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* connecting line to the previous step */
.stepper li + li::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--border);
  z-index: 0;
}

.stepper li.done + li::before,
.stepper li.done + li.done::before { background: var(--green-bd); }

.stepper .dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--border);
  color: var(--text-muted);
}

.stepper .dot::after {
  counter-increment: step;
  content: counter(step);
  font-size: .75rem;
}

.stepper li.done { color: var(--green-fg); }
.stepper li.done .dot { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-fg); }   /* soft, like the badges */
.stepper li.done .dot::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ico-tick) center / contain no-repeat;
  mask: var(--ico-tick) center / contain no-repeat;
}

.stepper li.current { color: var(--text); }
.stepper li.current .dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-tint), .15); }

.stepper li.cancelled { color: var(--red-fg); }
.stepper li.cancelled .dot { background: var(--red-bg); border-color: var(--red-bd); color: var(--red-fg); }
.stepper li.cancelled .dot::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ico-cross) center / contain no-repeat;
  mask: var(--ico-cross) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .stepper li.current .dot { transition: box-shadow .2s ease; }
}
/* Phones: at most the 2 newest notifications, compact, so they never cover the form */
@media screen and (max-width: 600px) {
  .notif-stack { right: .5rem; left: .5rem; bottom: .5rem; width: auto; }
  .notif-stack .notif:nth-last-child(n+3) { display: none; }
  .notif { padding: .55rem .7rem; }
  .notif-body { font-size: .76rem; }
}

/* ── Type-to-search select (js/select-search.js) ──────────────── */
.select-search {
  position: relative;
}

/* The real <select> stays in the page for the scripts, but out of sight */
.select-search-native {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.select-search input[type="search"] {
  padding-left: 2.2rem;
}

.select-search::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background-color: var(--text-muted);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
  mask: var(--ico-search) center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

.select-search:has(.is-invalid) input[type="search"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-tint), .14);
}

.select-search-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(var(--shadow-color), .14);
}

.select-search-list li {
  padding: .6rem .7rem;
  border-radius: 6px;
  font-size: .86rem;
  line-height: 1.35;
  cursor: pointer;
}

.select-search-list li[role="option"]:hover,
.select-search-list li.active {
  background: var(--hover);
}

.select-search-list li[aria-selected="true"] {
  font-weight: 700;
  color: var(--accent);
}

.select-search-list .select-search-empty {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}

@media screen and (max-width: 768px) {
  .select-search-list li { padding: .75rem .7rem; } /* easier to tap */
}
.select-search-sub {
  display: block;
  margin-top: .1rem;
  font-size: .76rem;
  color: var(--text-muted);
}

/* Reports charts: compact on desktop; on phones the category chart grows to fit its legend */
.report-chart { max-height: 260px; }
@media screen and (max-width: 600px) {
  #catChart.report-chart { max-height: none; }
}

/* === Polish pass: calmer, less cluttered (ui-ux-pro-max: hierarchy & consistency) ===
   One label style, light inputs, quieter headings, more breathing room, no jumping
   cards. Everything below only refines earlier rules. */

/* Content cards stay still on hover (only the small stat cards lift) */
.card:hover {
  transform: none;
  box-shadow: 0 4px 6px -1px rgba(var(--shadow-color), 0.05), 0 2px 4px -1px rgba(var(--shadow-color), 0.03);
}

.card {
  padding: 1.4rem 1.5rem;
}

.mb-2 {
  margin-bottom: 1.25rem;
}

/* Section headings: normal case, readable, one clear level above the content */
.card-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 1.1rem;
}

/* Labels: one style; hints inside a label drop to their own quiet line */
.form-group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
}

.form-group label .muted {
  display: block;
  font-weight: 400;
  font-size: .74rem !important;
  color: var(--text-muted);
  margin-top: .1rem;
}

/* A short hint that stays beside its label, so the box lines up with its neighbours */
.form-group label .muted.hint-inline { display: inline; margin-top: 0; }

.form-group {
  margin-bottom: 1.1rem;
}

/* Inputs: white with a hairline border instead of grey boxes */
.form-control,
.search-box,
.filter-sel {
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  min-height: 40px;
}

.form-control[readonly],
.form-control:disabled {
  background-color: var(--surface);
}

.search-box:focus,
.filter-sel:focus {
  border-color: var(--accent-lt);
  box-shadow: 0 0 0 3px rgba(var(--accent-tint), .2);
  outline: none;
}

/* Tables: lighter header, a bit more room, aligned numbers */
thead th {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .7rem 1rem;
}

tbody td {
  padding: .8rem 1rem;
}

th.tr, td.tr { text-align: right; }
.nowrap { white-space: nowrap; }

/* Two-line cells: main value + a quiet detail line */
.cell-main {
  font-weight: 600;
  color: var(--text);
}

.cell-sub {
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Toolbars: consistent spacing above tables */
.toolbar {
  margin-bottom: 1rem;
  gap: .6rem;
}

@media screen and (max-width: 768px) {
  .card { padding: 1.1rem; }
}
.row-actions.nowrap { flex-wrap: nowrap; }
@media screen and (max-width: 768px) { .row-actions.nowrap { flex-wrap: wrap; } }

.tbl-cards td[data-card="head"] .cell-sub { font-weight: 400; }

/* Phone cards: a cell with a main line + detail line (or a tag + detail) keeps both lines
   together on the right instead of spreading them into extra columns */
@media screen and (max-width: 768px) {
  .tbl-cards td[data-label]:has(> .cell-sub),
  .tbl-cards td[data-label]:has(> div + div) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
  }
  .tbl-cards td[data-label]:has(> .cell-sub)::before,
  .tbl-cards td[data-label]:has(> div + div)::before {
    grid-row: span 3;
  }
  .tbl-cards td[data-label]:has(> .cell-sub) > *,
  .tbl-cards td[data-label]:has(> div + div) > * {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }
  /* Long values (IPv6 addresses, long names) wrap instead of widening the page */
  .tbl-cards td.nowrap { white-space: normal; }
  .tbl-cards .cell-sub,
  .tbl-cards td { overflow-wrap: anywhere; }
}
/* ── Row buttons: text turns into its icon on hover (js: sidebar.php) ──
   Only with a mouse (touch screens keep the words). The word stays in the button for
   screen readers and keeps its width, so nothing moves; the tooltip shows the word. */
@media (hover: hover) and (pointer: fine) {
  .btn.has-ico { position: relative; }
  .btn.has-ico .btn-label { transition: opacity .15s ease; }
  .btn.has-ico::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
  }
  .btn.has-ico:hover .btn-label,
  .btn.has-ico:focus-visible .btn-label { opacity: 0; }
  .btn.has-ico:hover::after,
  .btn.has-ico:focus-visible::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.has-ico .btn-label, .btn.has-ico::after { transition: none; }
}
/* ================================================================
   DESIGN SYSTEM v2 (defense polish)
   ================================================================ */

/* Stat-card icons: <div class="sc-icon t-green" data-ico="cash" aria-hidden="true"></div> */
.sc-icon[data-ico="boards"] { --ico: var(--ico-boards); }
.sc-icon[data-ico="trend"] { --ico: var(--ico-trend); }
.sc-icon[data-ico="trend-down"] { --ico: var(--ico-trend-down); }
.sc-icon[data-ico="warning"] { --ico: var(--ico-warning); }
.sc-icon[data-ico="star"] { --ico: var(--ico-star); }
.sc-icon[data-ico="calendar"] { --ico: var(--ico-calendar); }
.sc-icon[data-ico="target"] { --ico: var(--ico-target); }
.sc-icon[data-ico="receipt"] { --ico: var(--ico-receipt); }
.sc-icon[data-ico="hourglass"] { --ico: var(--ico-hourglass); }
.sc-icon[data-ico="arrow-in"] { --ico: var(--ico-arrow-in); }
.sc-icon[data-ico="arrow-out"] { --ico: var(--ico-arrow-out); }
.sc-icon[data-ico="adjust"] { --ico: var(--ico-adjust); }
.sc-icon[data-ico="list"] { --ico: var(--ico-list); }
.sc-icon[data-ico="chart"] { --ico: var(--ico-chart); }
.sc-icon[data-ico="users"] { --ico: var(--ico-users); }
.sc-icon[data-ico="caret"] { --ico: var(--ico-caret); }
.sc-icon[data-ico="store"] { --ico: var(--ico-store); }
.sc-icon[data-ico="coins"] { --ico: var(--ico-coins); }
.sc-icon[data-ico="package"] { --ico: var(--ico-package); }
.sc-icon[data-ico="cash"] { --ico: var(--ico-cash); }
.sc-icon[data-ico="clock"] { --ico: var(--ico-clock); }
.sc-icon[data-ico="truck"] { --ico: var(--ico-truck); }
.sc-icon[data-ico="check"] { --ico: var(--ico-check); }
.sc-icon[data-ico="alert"] { --ico: var(--ico-alert); }

/* Change vs an earlier period, under a stat value: <div class="sc-delta up">▲ 12% vs yesterday</div> */
.sc-delta { font-size: var(--fs-xs); font-weight: 600; margin-top: var(--sp-1); color: var(--text-muted); }
.sc-delta.up   { color: var(--green-text); }
.sc-delta.down { color: var(--red-text); }
a.stat-card { color: inherit; text-decoration: none; }
a.stat-card:hover .sc-lbl { color: var(--accent-text); }

/* Small progress bar: <span class="meter crit" style="--meter:40"></span> */
.meter {
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-bg);
  overflow: hidden;
  margin-top: var(--sp-1);
}
.meter::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--meter, 0) * 1%);
  border-radius: inherit;
  background: var(--success);
}
.meter.warn::before { background: var(--warning); }
.meter.crit::before { background: var(--danger); }
.tr .meter { margin-left: auto; }

/* Collapsible explainer card */
details.explain > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 0;
}
details.explain > summary::-webkit-details-marker { display: none; }
details.explain > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background-color: currentColor;
  -webkit-mask: var(--ico-caret) center / contain no-repeat;
  mask: var(--ico-caret) center / contain no-repeat;
  transition: transform .15s ease;
}
details.explain[open] > summary { margin-bottom: var(--sp-3); }
details.explain[open] > summary::after { transform: rotate(180deg); }
details.explain .explain-body { font-size: var(--fs-md); line-height: 1.7; }
details.explain pre {
  margin: var(--sp-2) 0;
  padding: var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  overflow-x: auto;
}

/* Empty state: message plus an optional next step */
.empty-state {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-md);
}
.empty-state > strong:first-child { display: block; color: var(--text); font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.empty-state .btn { margin-top: var(--sp-3); }

/* Compact list inside a card (forecast alerts, recent sales) */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
}
.mini-list li:first-child { border-top: 0; padding-top: 0; }
.mini-list .ml-main { font-weight: 600; color: var(--text); }
.mini-list .ml-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.mini-list .ml-end { text-align: right; white-space: nowrap; }
.card-foot { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.card-title .card-link { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Two-up grid for side cards; one column on phones */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }

/* Chart waiting for its first data */
.chart-card.loading canvas { opacity: .35; }
.chart-card.loading::after {
  content: "Loading…";
  position: absolute;
  inset: 3rem 1rem 1rem;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Utilities (replace one-off inline styles) */
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.muted-sm { font-size: var(--fs-sm); color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-2); }
.gap-2 { gap: var(--sp-4); }
.w-auto { width: auto; }

/* One visible focus ring for keyboard users */
a:focus-visible, .tab-btn:focus-visible, summary:focus-visible, .filter-sel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  details.explain > summary::after { transition: none; }
}

/* ── Sign-in pages (login, register, forgot/change password) ────── */
.login-wrap {
  padding: var(--sp-4);
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--green-bg), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(var(--accent-tint), .06), transparent 60%),
    var(--bg);
}
.login-card { background: var(--card); }
.login-card .flash { margin-bottom: var(--sp-4); }
.login-card label { margin-top: 0; }   /* fields carry the gap below them */


.login-card .flex label { margin-bottom: .3rem; }
.brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  box-shadow: 0 4px 10px rgba(var(--shadow-color), .08);
  margin-bottom: var(--sp-3);
}
.auth-tabs { display: flex; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.auth-tab {
  flex: 1;
  text-align: center;
  padding: .6rem 0;
  font-size: .88rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
a.auth-tab:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.auth-tab.active { font-weight: 600; color: var(--accent-text); border-bottom-color: var(--accent); }
.auth-note { text-align: center; margin-bottom: var(--sp-4); background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple-fg); }
.auth-small-link { font-size: var(--fs-xs); color: var(--accent-text); text-decoration: none; }
.auth-small-link:hover { text-decoration: underline; }
.auth-submit { margin-top: var(--sp-4); }
.auth-hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin: var(--sp-2) 0 var(--sp-3); }
.auth-foot { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-sm); }
.auth-foot a { color: var(--accent-text); }
.auth-foot a.muted { color: var(--text-muted); }
@media screen and (max-width: 480px) { .login-card { padding: 1.8rem 1.25rem; } }
/* The eye button centres on the field itself, so the gap goes under the wrapper */
.login-card .pw-wrap { margin-bottom: .85rem; }
.login-card .pw-wrap > input { margin-bottom: 0; }

/* More utilities (inline styles moved here) */
.m-0 { margin: 0; }
.d-inline { display: inline; }
.items-end { align-items: end; }
.w-date { width: 150px; }
.empty-cell { padding: var(--sp-6) var(--sp-4); }
.empty-state .muted, .empty-state p { margin: 0; }
/* Notes wrap between words; the column keeps a readable width */
.notes-cell { min-width: 12rem; max-width: 22rem; overflow-wrap: break-word; }
/* Big numbers stay on one line; long amounts shrink a little instead of wrapping */
.sc-val { white-space: nowrap; font-size: clamp(1.1rem, 2.2vw, var(--fs-xl)); }
/* Days left: number with its meter underneath, kept together (also in phone cards) */
.days-left { display: inline-flex; flex-direction: column; align-items: flex-end; }
/* Value with a small note under it, kept together in phone cards */
.cell-stack { display: inline-flex; flex-direction: column; }
@media screen and (max-width: 768px) { .tbl-cards .cell-stack { align-items: flex-end; text-align: right; } }

/* ── Available Boards (catalog.php) ─────────────────────────────── */
.cat-filters { display: flex; flex-direction: column; gap: var(--sp-3); }
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; }
.chip {
  flex-shrink: 0;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  min-height: 32px;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--btn-green-bg); border-color: var(--btn-green-bd); color: var(--btn-green-fg); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-inline { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.cat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 4px 6px -1px rgba(var(--shadow-color), .05);
}
.cat-card[hidden] { display: none; }
.cat-card.avail-out { opacity: .7; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.cat-name { font-weight: 700; font-size: var(--fs-lg); color: var(--text); }
.cat-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cat-prices { display: flex; gap: var(--sp-5); margin: 0; }
.cat-prices dt { font-size: var(--fs-xs); color: var(--text-muted); }
.cat-prices dd { margin: 0; font-weight: 700; color: var(--text); }
.cat-add { align-self: flex-start; margin-top: auto; }
@media screen and (max-width: 480px) { .cat-add { align-self: stretch; text-align: center; min-height: 40px; } }

/* ── Commission payouts and receipts (my_commission.php, profile summary) ── */
.payout-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: .65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  transition: border-color .15s;
}

.payout-card.confirmed {
  border-color: var(--green-bd);
}

.payout-card-left {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.payout-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-text);
}

.payout-meta {
  font-size: .75rem;
  color: var(--text-muted);
}

.payout-note {
  font-size: .8rem;
  color: var(--text);
  margin-top: .1rem;
}

.confirm-receipt-btn {
  padding: .38rem .9rem;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--green-bd);
  background: var(--green-bg);
  color: var(--green-fg);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}

.confirm-receipt-btn:hover {
  background: var(--green-bd);
}

.confirm-receipt-btn:disabled {
  opacity: .5;
  cursor: default;
}

.comm-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: .88rem;
}

.payout-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.payout-amount.red { color: var(--red-text); }
.payout-items { margin-top: .35rem; font-size: var(--fs-sm); }
.payout-items > summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.payout-items[open] > summary { margin-bottom: .35rem; }
.receipt { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.receipt-line { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); padding: 2px 0; }
.receipt-math { color: var(--text-muted); white-space: nowrap; }
.receipt-math strong { color: var(--text); }
.receipt-total { display: flex; justify-content: space-between; padding: var(--sp-3) var(--sp-1) 0; border-top: 2px solid var(--border-strong); font-size: var(--fs-lg); }
.comm-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); max-width: 700px; margin: 1.5rem auto 0; color: inherit; text-decoration: none; }
@media screen and (max-width: 480px) { .receipt-math { white-space: normal; } .payout-side { align-items: flex-start; } }

/* ── To Do (todo.php, sidebar badge) ────────────────────────────── */
.sc-icon[data-ico="ban"] { --ico: var(--ico-ban); }
.nav-todo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.nav-badge {
  min-width: 1.4rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}
.nav-badge[hidden] { display: none; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); align-items: start; }
.todo-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.todo-head .sc-icon { width: 34px; height: 34px; }
.todo-head .sc-icon[data-ico]::before { width: 18px; height: 18px; }
.todo-title { font-size: var(--fs-md); font-weight: 700; margin: 0; flex: 1; color: var(--text); }
@media screen and (max-width: 480px) { .todo-grid { grid-template-columns: 1fr; } }

/* Deep-linked record (?focus=…): a soft highlight that fades */
@keyframes focusFade { from { background-color: var(--amber-bg); box-shadow: inset 4px 0 0 var(--warning); } to { background-color: transparent; box-shadow: inset 4px 0 0 var(--warning); } }
tr.row-focus > td, .row-focus { animation: focusFade 3s ease-out 1 both; }
.order-card.row-focus, .agent-card.row-focus { outline: 2px solid var(--warning); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { tr.row-focus > td, .row-focus { animation: none; background-color: var(--amber-bg); } }
/* Phones: table rows are cards, so the whole card gets the outline instead of each cell */
@media screen and (max-width: 768px) {
  .tbl-cards tr.row-focus > td { animation: none; box-shadow: none; background: transparent; }
  .tbl-cards tr.row-focus { outline: 2px solid var(--warning); outline-offset: 2px; }
}

/* ── Busy months (prediction.php) ───────────────────────────────── */
.busy-tip { margin: 0 0 var(--sp-4); font-size: var(--fs-md); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
            background: var(--amber-bg); color: var(--amber-fg); border: 1px solid var(--amber-bd); }
.busy-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-2); align-items: end; height: 190px; }
.busy-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.busy-bar { width: 100%; max-width: 38px; height: calc(var(--h) * 1%); max-height: calc(100% - 40px); border-radius: 6px 6px 2px 2px;
            background: var(--blue-bd); }
.busy-col.peak .busy-bar { background: var(--warning); }
.busy-col.now .busy-m { font-weight: 700; color: var(--text); }
.busy-pct { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.busy-col.peak .busy-pct { color: var(--amber-text); font-weight: 700; }
.busy-m { font-size: var(--fs-xs); color: var(--text-muted); }
@media screen and (max-width: 520px) {
  .busy-chart { gap: 3px; height: 160px; }
  .busy-pct { font-size: .62rem; }
}
/* Busy months: diverging bars around the average-month line */
.busy-chart { height: auto; }
.busy-track { position: relative; width: 100%; max-width: 38px; height: 150px; }
.busy-track::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; border-top: 1px dashed var(--border-strong); }
.busy-track .busy-bar { position: absolute; left: 0; right: 0; max-width: none; max-height: none; height: calc(var(--h) * 0.5%); }
.busy-bar.up { bottom: 50%; border-radius: 6px 6px 0 0; }
.busy-bar.down { top: 50%; border-radius: 0 0 6px 6px; background: var(--gray-bd); }
@media screen and (max-width: 520px) { .busy-track { height: 120px; } }

/* ── ApexCharts (js/charts.js) ──────────────────────────────────── */
.apex-host { max-height: none !important; min-height: 220px; }
.chart-card.loading .apex-host { opacity: .35; }
.apexcharts-tooltip { box-shadow: 0 6px 16px rgba(var(--shadow-color), .12) !important; border-color: var(--border) !important; }
.apexcharts-tooltip-title { font-weight: 700 !important; background: var(--surface) !important; border-color: var(--border) !important; }
.apexcharts-menu { border-color: var(--border) !important; border-radius: 8px !important; }
.apexcharts-toolbar { z-index: 2 !important; }

/* Text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── To Do as one list (todo.php) ───────────────────────────────── */
.todo-board { columns: 420px; column-gap: var(--sp-4); }   /* cards flow into as many columns as fit, no wide empty rows */
.todo-sec.card { padding: 0; overflow: hidden; break-inside: avoid; margin: 0 0 var(--sp-4); }
.todo-sec.card:hover { transform: none; }
.todo-sec-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.todo-sec-head .sc-icon { width: 28px; height: 28px; border-radius: 8px; }
.todo-sec-head .sc-icon[data-ico]::before { width: 16px; height: 16px; }
.todo-count {
  margin-left: auto; min-width: 1.6rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); text-align: center;
  font-size: var(--fs-xs); line-height: 1.5rem; color: var(--text-muted);
}
.todo-rows { list-style: none; margin: 0; padding: 0; }
.todo-rows li + li { border-top: 1px solid var(--border); }
.todo-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  color: inherit; text-decoration: none; min-height: 48px;
}
.todo-row:hover { background: var(--hover); }
.todo-row:hover .todo-go { color: var(--accent-text); }
.todo-main { display: flex; flex-direction: column; min-width: 0; }
.todo-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-sub { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-age { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.todo-go { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.todo-more { display: block; padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: var(--fs-sm); color: var(--accent-text); }
@media screen and (max-width: 600px) {
  .todo-row { grid-template-columns: 1fr auto; padding-left: var(--sp-4); gap: var(--sp-2); }
  .todo-age { grid-column: 1; grid-row: 2; }
  .todo-go { grid-row: 1 / span 2; grid-column: 2; }
  .todo-sub { white-space: normal; }
  .todo-more { padding-left: var(--sp-4); }
}

/* ── Pages of 10 (js/pager.js) ───────────────────────────────────── */
.pg-off, [data-match="0"] { display: none !important; }
.pager { justify-content: center; border-top: 0; padding: .6rem 0 0; }
.pager[hidden] { display: none; }
.pager-gap { padding: 0 .25rem; color: var(--text-muted); }
.pager-info { margin-left: .5rem; font-size: var(--fs-sm); color: var(--text-muted); }
@media print {
  .pg-off { display: revert !important; }   /* print the whole list, not one page */
  .pager { display: none !important; }
}

/* ── Printed report header (includes/print_header.php) ───────────── */
.print-only { display: none; }
@media print { .print-only { display: block; } }
.paper .print-only { display: block; }   /* Generate Report's preview (reports.php?preview=1) */
.paper table.print-only { display: table; }
@media print, screen {
  .print-head { text-align: center; border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: .9rem; }
  .print-brand { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #555; }
  .print-store { font-size: 1.15rem; font-weight: 700; }
  .print-address { font-size: .8rem; }
  .print-title { font-size: 1rem; font-weight: 700; margin-top: .4rem; }
  .print-sub, .print-by { font-size: .78rem; color: #333; }
}

/* ── Density pass, Oct 2026 (owner: less white space) ─────────────────
   Dashboard density (ui-ux-pro-max, density 8/10): 8–32px spacing scale.
   Buttons keep their size (44px touch targets on phones, 8px+ between them). */
.page-body { padding: 1rem 1.25rem; }
.card { padding: 1rem 1.1rem; }
.mb-2 { margin-bottom: .9rem; }
.mt-2 { margin-top: .9rem; }
.stats-row { gap: .75rem; margin-bottom: .9rem; }
.stat-card { padding: .8rem 1rem; }
.card-title { margin-bottom: .6rem; }
thead th { padding: .5rem .75rem; }
tbody td { padding: .5rem .75rem; }
.flash { margin-bottom: .7rem; }
@media screen and (max-width: 768px) {
  .page-body { padding: .75rem; }
  .card { padding: .85rem; }
  .stats-row { gap: .5rem; }
}
@media (pointer: coarse) {
  .pager .btn { min-width: 44px; min-height: 44px; }   /* page buttons are touch targets on phones */
}

/* Forecast chart pop-up (prediction.php) */
.fc-modal { max-width: min(860px, 96vw); width: 100%; }
.fc-modal #fcChart { min-height: 320px; }

/* ── Sidebar pop-up: To Do and Store Details (includes/sidebar.php) ── */
.sb-pop {
  position: fixed; z-index: 250; top: calc(var(--topbar-h) + 8px); left: calc(var(--sidebar-w) + 12px);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(var(--shadow-color), .18);
}
.sb-pop[hidden] { display: none; }
.sidebar-collapsed .sb-pop { left: 12px; }
.sb-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
               padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.sb-pop-body { overflow: auto; padding: var(--sp-3) var(--sp-4); }
.sb-pop .todo-board { columns: auto; }
.sb-pop .todo-sec.card { margin-bottom: var(--sp-3); box-shadow: none; }
/* Opened from the page (not the sidebar), e.g. Store Details on My Profile: centred on screen */
@media screen and (min-width: 769px) { .sb-pop.sb-pop-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } }
@media screen and (max-width: 768px) { .sb-pop { left: 12px; right: 12px; width: auto; } }
/* Report dates on phones: the two dates share the card's width instead of running past it */
.date-group { flex-wrap: wrap; max-width: 100%; }
.date-group input { min-width: 0; flex: 1 1 8.5rem; }

/* ── Print: the list and its details only, never the screen layout ──
   Charts, stat cards, filters, search boxes and buttons stay off the paper;
   a page adds a .print-only summary when the totals matter (reports.php). */
@media print {
  @page { margin: 12mm; }
  .charts-row, .stats-row, .search-box, .btn, button, select, input, .filter-sel, .date-group,
  .card-link, .sb-pop, .notif-stack, .overlay, [data-card="actions"], th.th-actions { display: none !important; }
  .card { border: 0 !important; padding: 0 !important; margin: 0 0 6mm !important; break-inside: auto; }
  .card-title { font-size: 11pt; margin: 0 0 2mm; }
  table { font-size: 9pt; border-collapse: collapse; }
  th, td { padding: 1.5mm 2mm !important; }
  thead { display: table-header-group; }   /* the column names repeat on every page */
  tr { break-inside: avoid; }
  .print-sum { width: auto !important; margin: 0 0 6mm; }
  .print-sum th { text-align: left; padding-right: 8mm !important; }
}
@media print { table.print-only { display: table; } }
/* Sales history: a sale's items listed in one cell (sales.php) */
/* Fixed column widths, so every page of the history looks the same (not sized by the 10 rows shown) */
@media screen and (min-width: 769px) {
  /* min-width: below it the table scrolls sideways in its card instead of the date and status
     running into the next column */
  #saleTbl { table-layout: fixed; width: 100%; min-width: 760px; }
  #saleTbl th:nth-child(1) { width: 15%; }
  #saleTbl th:nth-child(2) { width: 10%; }
  #saleTbl th:nth-child(3) { width: 44%; }
  #saleTbl th:nth-child(4) { width: 12%; }
  #saleTbl th:nth-child(5) { width: 19%; }
  #saleTbl td { overflow-wrap: anywhere; }
  #saleTbl td[data-card="head"] .nowrap { white-space: normal; }   /* a long invoice number breaks instead of running into Date */
}
/* Mid-size laptops (e.g. 1366x768 at 125% scaling, ~1090px): no unit price (qty and line total stay),
   so date, total and status keep room for their text */
@media screen and (min-width: 769px) and (max-width: 1279px) {
  #saleTbl th:nth-child(2) { width: 11%; }
  #saleTbl th:nth-child(3) { width: 39%; }
  #saleTbl th:nth-child(4) { width: 13%; }
  #saleTbl th:nth-child(5) { width: 22%; }
  #saleTbl .sale-item { grid-template-columns: minmax(0, 1fr) 3.6rem 7rem; }
  #saleTbl .sale-item .si-price { display: none; }
}
/* Fixed columns (product | qty | x price | total) so items line up across every sale */
.sale-item { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem 7rem 7rem; align-items: center;
             column-gap: var(--sp-3); min-height: 32px; padding: 2px 0; }
.sale-item + .sale-item { border-top: 1px dashed var(--border); }
.si-qty, .si-price, .si-total { text-align: right; white-space: nowrap; }
@media screen and (max-width: 768px) {
  /* Phone: items use the card's full width; name and Edit on top, qty x price and total below */
  .tbl-cards td.sale-items[data-label] { display: block !important; }
  .tbl-cards td.sale-items[data-label]::before { display: block; margin-bottom: 4px; }
  .tbl-cards td.sale-items[data-label] > * { width: 100%; text-align: left; }
  .sale-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .sale-item > span:first-child { grid-column: 1 / -1; grid-row: 1; }
  .si-qty { grid-column: 1; grid-row: 2; text-align: left; }
  .si-price { grid-column: 2; grid-row: 2; text-align: left; }
  .si-total { grid-column: 3; grid-row: 2; }
}

/* ── Sales by receipt: clickable rows and the receipt pop-up (reports.php, receipt.php) ── */
tr.row-click { cursor: pointer; }
tr.row-click:hover > td { background: var(--hover); }
tr.row-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.receipt-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.receipt-facts dt { color: var(--text-muted); }
.receipt-facts dd { margin: 0; }
.receipt-totals { margin-top: var(--sp-3); justify-content: end; text-align: right; }
.receipt-items { width: 100%; font-size: var(--fs-sm); }
#rcModal .modal { max-height: 90vh; overflow: auto; }

/* ── New Sale Entry (sales.php): two compact rows on wide screens ── */
.sale-line, .sale-meta { display: grid; gap: var(--sp-3); align-items: start; }   /* labels and boxes on one line; stock messages hang below */
.sale-line label { white-space: nowrap; }
.sale-line { grid-template-columns: minmax(260px, 2.4fr) minmax(110px, 1fr) minmax(130px, 1fr) auto auto; }
.sale-meta { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: var(--sp-3); }
.sale-line .form-group, .sale-meta .form-group { margin-bottom: var(--sp-2); }
.sale-line .btn { white-space: nowrap; min-height: 40px; }
@media screen and (max-width: 1100px) {
  .sale-line { grid-template-columns: 1fr 1fr; }
  .sale-line-product { grid-column: 1 / -1; }
}

/* ── Sales history: status | Actions; the buttons open below, across the whole cell (sales.php) ── */
.act-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act-cell > .tag { white-space: nowrap; }
/* always at the right edge, so every row's button lines up; drops under the status when both don't fit */
.act-toggle { margin-left: auto; min-width: 6.5rem; justify-content: center; }
.act-toggle::after { content: " \25BE"; }
.act-toggle[aria-expanded="true"] { background: var(--hover); }
.act-toggle[aria-expanded="true"]::after { content: " \25B4"; }
.act-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.act-list[hidden] { display: none; }
.act-list form { margin: 0; }
.act-list .btn { width: 100%; justify-content: center; }

/* Edit sale pop-up: every item of the receipt (sales.php) */
.es-items { width: 100%; font-size: var(--fs-sm); }
.es-items td, .es-items th { padding: 6px; vertical-align: middle; }
.es-items input { min-width: 0; }
.es-items tfoot td { border-top: 1px solid var(--border); padding-top: 8px; }
/* Chart menu: images only (SVG, PNG); no CSV, like the rest of the app (owner, Oct 2026) */
.apexcharts-menu-item.exportCSV { display: none !important; }
/* Category picker above the stacked category charts (js/charts.js renderStackedBar) */
.chart-filter { display: block; margin: 0 0 var(--sp-2) auto; max-width: 100%; }

/* Four stat cards (Reports): 2 x 2 between phone and wide desktop, never 3 + 1 alone */
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .stats-row:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: tighter stat cards (smaller icon, less padding), so two columns of cards stay short */
@media screen and (max-width: 768px) {
  .stats-row .stat-card { padding: .7rem .8rem; gap: .4rem; }
  .stats-row .sc-icon { width: 32px; height: 32px; }
  .stats-row .sc-icon[data-ico]::before { width: 18px; height: 18px; }
  .stats-row .sc-delta { line-height: 1.3; }
}
/* Dashboard's six stat cards: full rows only (6, or 3 + 3, or 2 + 2 + 2), never 5 + 1 */
.stats-row.stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3 + 3, like the owner's sample */
@media screen and (max-width: 768px) { .stats-row.stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 360px) { .stats-row.stats-6 { grid-template-columns: 1fr; } }
/* Light weight inside a bold line */
.fw4 { font-weight: 400; }

/* ── Dashboard: Top products forecast (dashboard.php) ── */
/* Stock Forecasting's Top products filters: on phones, labels in one column and the boxes lined up in the next */
@media (max-width: 600px) {
  .top-filters { display: grid; grid-template-columns: auto 1fr; width: 100%; }
  .top-filters > span { display: contents; }
}
.fc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.fc-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.fc-pill { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; background: var(--gray-bg); color: var(--text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.fc-period-lbl { margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fc-period { font-weight: 700; color: var(--text); margin-top: .2rem; }
.fc-list { list-style: none; margin: .9rem 0 0; padding: 0; }
.fc-list { scrollbar-gutter: stable; }   /* the scrollbar never sits on the numbers */
.fc-list li { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.5rem .9rem .25rem; border-top: 1px solid var(--border); }
.fc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.fc-info strong { color: var(--text); }
.fc-cat { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; }
.fc-qty { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.fc-qty strong { font-size: 1.1rem; color: var(--text); }
.fc-list .ml-sub { font-size: var(--fs-xs); color: var(--text-muted); }
#top10 { scroll-margin-top: calc(var(--topbar-h, 56px) + 1rem); }   /* not hidden under the sticky top bar */

/* ── Dashboard: Stock alerts beside Quick actions (dashboard.php) ── */
.dash-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dash-board > .card { display: flex; flex-direction: column; }
.alert-more { display: block; margin-top: .5rem; }
/* Desktop: Quick actions set the row height; the alert list fills it (the script hides rows that do not fit) */
@media screen and (min-width: 1024px) {
  .dash-board > .card { min-height: 420px; }   /* a short laptop screen still shows about six alerts */
  .alert-fit { position: relative; flex: 1; min-height: 160px; }
  .alert-fit > .mini-list { position: absolute; inset: 0; overflow: hidden; }
}
.alert-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; color: inherit; text-decoration: none; }
.alert-row:hover .ml-main { color: var(--accent-text); }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.qa-row { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px;
          color: var(--text); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.qa-row:hover { transform: translateY(-2px); border-color: var(--accent); }
.qa-row strong { display: block; font-size: 1.05rem; }
.qa-row .sc-icon { width: 60px; height: 60px; flex-shrink: 0; border-radius: 14px; }
.qa-row .sc-icon::before { width: 30px; height: 30px; }
.qa-secondary { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
@media screen and (max-width: 1023px) { .dash-board { grid-template-columns: 1fr; } }
/* Small desktops: the forecast gets its own full-width row; at 1200px+ all three sit side by side and the forecast list scrolls inside its card */
@media screen and (min-width: 1024px) and (max-width: 1199px) { .fc-card { grid-column: 1 / -1; } }
@media screen and (min-width: 1200px) {
  .dash-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-fit { position: relative; flex: 1; min-height: 160px; }
  .fc-fit > .fc-list { position: absolute; inset: 0; overflow-y: auto; }
}
@media screen and (max-width: 768px) {
  .qa-row { padding: .75rem .7rem; gap: .45rem; }
  .qa-row strong { font-size: .95rem; }
  .qa-row .ml-sub { font-size: .72rem; }
  .qa-row .sc-icon { width: 44px; height: 44px; }
  .qa-row .sc-icon::before { width: 22px; height: 22px; }
}
/* Large screens: bigger stat cards, so the top row uses the width it has */
@media screen and (min-width: 1200px) {
  .stats-row.stats-6 .stat-card { padding: 1.2rem 1.3rem; min-height: 120px; }
  .stats-row.stats-6 .sc-val { font-size: 1.7rem; }
  .stats-row.stats-6 .sc-icon { width: 48px; height: 48px; }
  .stats-row.stats-6 .sc-icon[data-ico]::before { width: 24px; height: 24px; }
  .stats-row.stats-6 .sc-lbl { font-size: .85rem; }
}
/* Large screens: the Dashboard fills the screen's height (bigger cards instead of empty space below) */
@media screen and (min-width: 1024px) and (min-height: 640px) {
  .page-body:has(> .dash-board) { min-height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; }
  .page-body:has(> .dash-board) .stats-row.stats-6 .stat-card { min-height: 150px; }
  .page-body:has(> .dash-board) .stats-row.stats-6 .sc-val { font-size: 2rem; }
  .dash-board { flex: 1; align-items: stretch; margin-bottom: 1rem; }
  .dash-board > .card { display: flex; flex-direction: column; }
  .dash-board .mini-list li { padding: .9rem 0; }
  .dash-board .ml-main { font-size: 1rem; }
  .dash-board .quick-actions { flex: 1; grid-auto-rows: 1fr; }
}

/* ── Top-right To Do icon (includes/sidebar.php), fixed like the menu button ── */
.topbar-icons { position: fixed; top: calc((var(--topbar-h) - 40px) / 2); right: 1rem; z-index: 110; display: flex; gap: .5rem; }
.topbar-icon { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
               background: var(--card); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
               text-decoration: none; transition: background .12s, color .12s; }
.topbar-icon:hover { background: var(--hover); color: var(--accent-text); }
.topbar-icon .nav-badge { position: absolute; top: -6px; right: -6px; margin: 0; box-shadow: 0 0 0 2px var(--card); }
.layout:has(.topbar-icons) .topbar { padding-right: 4.5rem; }   /* room for the FAQ icon */
.layout:has(.topbar-icon + .topbar-icon) .topbar { padding-right: 7.5rem; }   /* FAQ and To Do */
.topbar-icon.active { color: var(--accent-text); border-color: var(--accent); }
/* To Do opens under the icon */
.sb-pop.sb-pop-todo { top: calc(var(--topbar-h) + 6px); right: 1rem; left: auto; }
@media screen and (max-width: 768px) { .sb-pop.sb-pop-todo { left: 12px; right: 12px; } }
@media print { .topbar-icons { display: none !important; } }
/* A link to #history lands below the sticky top bar, not under it */
#history { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ── Generate Report: the printed report previewed in a frame (reports.php) ── */
.rp-preview-modal { max-width: min(900px, 96vw); width: 100%; display: flex; flex-direction: column; max-height: 94vh; }
.rp-frame-box { flex: 1; min-height: 60vh; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
#rpFrame { display: block; margin: 0 auto; border: 0; transform-origin: 0 0; background: #fff; }   /* sized and scaled by includes/report_preview.php */
.rp-preview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.rp-preview-actions .muted { margin-right: auto; }
/* Inside the frame: white paper, the same parts as print (no search box, every row) */
html.paper body { background: #fff; color: #000; }
.paper .main { margin-left: 0; width: 100%; }
.paper .page-body { max-width: 210mm; margin: 0 auto; padding: 10mm 8mm; }
.paper .toolbar, .paper .search-box, .paper .pager { display: none !important; }
.paper .card { border: 0; box-shadow: none; padding: 0; margin: 0 0 6mm; background: #fff; }
.paper .card-title { font-size: 11pt; margin: 0 0 2mm; }
.paper table { font-size: 9pt; border-collapse: collapse; }
.paper .print-sum { width: auto; margin: 0 0 6mm; }
.paper .print-sum th { text-align: left; padding-right: 8mm; }

/* ── Typography (Starlink style) and motion ─────────────────── */
h1, h2, h3, .topbar-title, .modal-title, .company, .company-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@keyframes sb-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.sb-pop:not([hidden]) { animation: sb-in var(--dur) var(--ease); }
.main > * { animation: sb-in var(--dur) var(--ease); }
details[open] > *:not(summary) { animation: sb-in var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ── Sidebar legal links, sign-in footer, Terms / Privacy pages ── */
/* Under Sign Out: smaller and lighter than the rest of the sidebar */
.sb-legal { text-align: center; font-size: .66rem; color: var(--text-muted); margin-top: .5rem; }
.sb-legal a { color: var(--text-muted); text-decoration: none; }
.sb-legal a:hover { color: var(--accent); text-decoration: underline; }

.login-wrap { flex-direction: column; }
.login-wrap > .login-card { margin: auto 0; }   /* card centred, footer at the bottom */
.auth-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .6rem;
               padding: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.auth-footer a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.auth-footer a:hover { color: var(--accent); text-decoration: underline; }
.auth-footer .sep { opacity: .6; }

.login-card.legal-card { max-width: 720px; }
.legal-card h1 { font-size: var(--fs-xl); margin: .4rem 0 .6rem; }
.legal-card h2 { font-size: var(--fs-md); margin: 1.2rem 0 .4rem; }
.legal-card ul { padding-left: 1.2rem; margin: 0; }
.legal-card li { margin: .2rem 0; }
.legal-back { font-size: var(--fs-sm); text-decoration: none; }

/* ── "How is this calculated?" links (to faq.php) ── */
.calc-link { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--accent); text-decoration: none; }
.calc-link:hover { text-decoration: underline; }
@media print { .calc-link { display: none !important; } }

/* ── FAQ (faq.php): grouped question cards like the owner's sample ── */
.faq { max-width: 900px; }
.faq-search { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--card);
              border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); }
.faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); }
.faq-search:focus-within { border-color: var(--accent); }
.faq-sec { margin-top: var(--sp-5); }
.faq-sec-label { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-3); }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: var(--sp-3); }
.faq-item > summary { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; cursor: pointer;
                      list-style: none; font-weight: 600; color: var(--text); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary > span { flex: 1; }
.faq-q { flex-shrink: 0; color: var(--blue-fg); }
.faq-chev { flex-shrink: 0; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.faq-item[open] > summary .faq-chev { transform: rotate(180deg); }
.faq-body { padding: 0 1.1rem 1rem 3.4rem; }
.faq-body ul { padding-left: 1.1rem; margin: .2rem 0; }
.faq-body p { margin: .2rem 0 .5rem; }
.faq-example { margin-top: .5rem; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 8px 8px 0; }
.faq-example > summary { cursor: pointer; padding: .4rem .7rem; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); }
.faq-example > p { margin: 0; padding: 0 .7rem .6rem; font-size: var(--fs-md); }
.faq-none { margin-top: var(--sp-4); }
@media screen and (max-width: 768px) { .faq-body { padding-left: 1.1rem; } }
.calc-link-under { display: table; margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }   /* under a row of stat cards */

/* FAQ in the top bar's pop-up: wider, tighter cards, search stays at the top while scrolling */
.sb-pop.sb-pop-faq { width: min(560px, calc(100vw - 24px)); }
.sb-pop .faq-search { position: sticky; top: calc(-1 * var(--sp-3)); z-index: 1; box-shadow: 0 -12px 0 var(--card); }
.sb-pop .faq-sec { margin-top: var(--sp-4); }
.sb-pop .faq-item { border-radius: 10px; margin-bottom: var(--sp-2); }
.sb-pop .faq-item > summary { padding: .65rem .8rem; gap: .7rem; }
.sb-pop .faq-body { padding: 0 .8rem .8rem 2.85rem; }
.sidebar-backdrop { pointer-events: none; }   /* while the drawer slides shut, clicks reach the page */
.sidebar-open .sidebar-backdrop { pointer-events: auto; }

/* ── Button hover (owner, Oct 2026): every button keeps its colours and gets a 5px glow ring in its
   own colour family. --btn-ring is set per kind of button. ── */
.btn, .tab-btn, .chip, .confirm-receipt-btn { --btn-ring: rgba(var(--shadow-color), .12); }
.btn-primary, .btn-success, .tab-btn.active, .chip.active, .pager .btn.active, .confirm-receipt-btn { --btn-ring: rgba(var(--accent-tint), .3); }
.btn-warning { --btn-ring: rgba(180, 83, 9, .25); }
.btn-danger { --btn-ring: rgba(var(--danger-tint), .25); }
.tab-btn, .chip, .confirm-receipt-btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .15s ease; }
.btn:hover:not(:disabled), .tab-btn:hover, .chip:hover, .confirm-receipt-btn:hover:not(:disabled) {
  box-shadow: 0 0 0 5px var(--btn-ring);
}

/* Available Products: "Add to quote" in see-through slate gray (owner, Oct 2026); text #334155 is 8.9:1+ on it */
.btn.cat-add { background: rgba(71, 85, 105, .12); border-color: rgba(71, 85, 105, .3); color: #334155; --btn-ring: rgba(71, 85, 105, .2); }
.btn.cat-add:hover:not(:disabled) { background: rgba(71, 85, 105, .2); border-color: rgba(71, 85, 105, .4); }

/* Stock count tiles (Restock now, Out of stock...): the icon uses .b-low / .b-out, the number these */
.sc-val.crit { color: var(--stock-crit-fg); }
.sc-val.stock-out { color: var(--stock-out-fg); }

/* Available Products: livelier stock labels on the product cards (same colour families, more saturated) */
.cat-card .tag.b-ok  { background: #c9ead5; color: #1f5e43; border-color: #9fd3b2; }   /* 5.9:1 */
.cat-card .tag.b-low { background: #f5ccd5; color: #7a1f2f; border-color: #e8a3b2; }   /* 7.0:1 */
.cat-card .tag.b-out { background: #f3d3cd; color: #7d3a32; border-color: #e3aaa0; }   /* 6.0:1 */

/* ── Sign-in and Create Account pages (login.php, register.php: body.login-page): quiet enterprise look
   (owner, Oct 2026). Scoped so Forgot password, Terms and Privacy keep their own styles. ── */
.login-page {
  --lp-green: #365448; --lp-green-hover: #293f36; --lp-green-active: #22352d;
  --lp-text: #202b35; --lp-muted: #697586; --lp-border: #d5dad5; --lp-bg: #f4f6f2;
  background: var(--lp-bg);
  color: var(--lp-text);
}
.login-page .login-wrap { background: var(--lp-bg); padding: 24px 16px 12px; }
.login-page .login-card {
  max-width: 400px;
  padding: 36px 36px 28px;
  background: #fff;
  border: 1px solid #e2e6e1;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 43, 53, .04), 0 8px 24px rgba(32, 43, 53, .05);
}
.login-page .login-logo { margin-bottom: 24px; }
.login-page .brand-logo { width: 64px; height: 64px; border: 1px solid #e2e6e1; box-shadow: none; margin-bottom: 12px; }
.login-page .login-logo .company-name { color: var(--lp-text); font-size: 1.3rem; letter-spacing: .08em; line-height: 1.2; }
.login-page .login-logo .system-name { color: var(--lp-muted); font-size: 13px; margin-top: 4px; }

.login-page .auth-tabs { margin-bottom: 20px; border-bottom-color: #e2e6e1; }
.login-page .auth-tab { color: var(--lp-muted); }
.login-page .auth-tab.active { color: var(--lp-green); border-bottom-color: var(--lp-green); }

/* Messages: soft background, thin left border; success, warning and error stay distinct */
.login-page .login-card .flash { padding: 10px 12px; margin-bottom: 18px; border-left-width: 3px; border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.4; }
.login-page .flash-ok   { background: #e3ebe4; color: var(--lp-green); border-left-color: var(--lp-green); }
.login-page .flash-warn { background: #f6efe1; color: #6f4e12; border-left-color: #b45309; }   /* 7.5:1 */
.login-page .flash-err  { background: #f8e8e6; color: #9a2318; border-left-color: #b42318; }   /* 6.6:1 */

.login-page .login-card label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--lp-text); }
.login-page .login-card input.form-control {
  height: 44px; padding: 10px 12px; margin-bottom: 16px;
  font-size: 15px; color: var(--lp-text); background: #fff;
  border: 1px solid var(--lp-border); border-radius: 8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.login-page .login-card input.form-control::placeholder { color: #8b95a1; opacity: 1; }
.login-page .login-card input.form-control:focus { outline: none; border-color: var(--lp-green); box-shadow: 0 0 0 3px rgba(54, 84, 72, .15); }
.login-page .login-card .pw-wrap { margin-bottom: 16px; }
.login-page .login-card .pw-wrap > input.form-control { margin-bottom: 0; padding-right: 44px; }
.login-page .pw-toggle:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 1px; }

/* Sign In: solid forest green, white text (8.7:1); no glow ring here */
.login-page .login-card .btn-primary {
  height: 46px; margin-top: 8px;
  font-size: 15px; font-weight: 600;
  background: var(--lp-green); border-color: var(--lp-green); color: #fff;
  border-radius: 8px; box-shadow: none;
}
.login-page .login-card .btn-primary:hover:not(:disabled) { background: var(--lp-green-hover); border-color: var(--lp-green-hover); box-shadow: none; }
.login-page .login-card .btn-primary:active:not(:disabled) { background: var(--lp-green-active); border-color: var(--lp-green-active); }
.login-page .login-card .btn-primary:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 2px; }
.login-page .login-card .btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.login-page .auth-foot { margin-top: 18px; font-size: 14px; }
.login-page .auth-foot a { color: var(--lp-green); font-weight: 500; text-decoration: none; }
.login-page .auth-foot a:hover { text-decoration: underline; }
.login-page .auth-foot a:focus-visible, .login-page .auth-footer a:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 2px; border-radius: 3px; }

.login-page .auth-footer { font-size: 12px; color: #5f6b7a; padding: 20px 0 8px; gap: 4px 10px; }
.login-page .auth-footer a { color: #5f6b7a; }   /* 4.9:1 on the page background */
.login-page .auth-footer a:hover { color: var(--lp-green); }

@media screen and (max-width: 480px) {
  .login-page .login-card { padding: 28px 20px 22px; border-radius: 10px; }
}
/* Create Account: hint lines under fields, and buttons that follow a message */
.login-page .auth-hint { color: var(--lp-muted); font-size: 13px; margin: -8px 0 16px; }
.login-page .login-card .flash + .btn-primary { margin-top: 0; }

/* ── Sidebar menu button: three lines that turn into an X while the menu is open (owner, Oct 2026).
   Open/closed comes from aria-expanded, which includes/sidebar.php keeps in step. ── */
.sidebar-toggle { overflow: hidden; }
.sb-line {
  position: absolute;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .4s ease, background-color .2s ease;
}
.sb-line--top    { width: 14px; transform: translateY(-6px); }
.sb-line--bottom { width: 14px; transform: translateY(6px); }
.sidebar-toggle[aria-expanded="true"] { color: var(--accent); }
.sidebar-toggle[aria-expanded="true"] .sb-line--center { transform: translateX(-40px); }
.sidebar-toggle[aria-expanded="true"] .sb-line--top    { width: 18px; transform: translateY(0) rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] .sb-line--bottom { width: 18px; transform: translateY(0) rotate(-45deg); }
/* Phones: the menu button rides along with the drawer to its top-right corner, above it, and becomes
   the drawer's X (the separate close button is hidden; tapping outside still closes the drawer). */
@media screen and (max-width: 768px) {
  .sidebar-open .sidebar-toggle {
    left: calc(min(280px, 85vw) - 36px - .6rem);
    z-index: 210;
  }
  .sidebar-close { display: none; }
}

/* ── Terms / Privacy in the pop-up (opened from the FAQ, the sidebar or the sign-in footer): Back is the only way back ── */
.sb-pop-legal #sbPopClose { display: none; }
.sb-pop .legal-back { display: inline-block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; }
.sb-pop .legal-back:hover { text-decoration: underline; }
.legal-pop h1 { font-size: var(--fs-lg); margin: 0 0 .5rem; }
.legal-pop h2 { font-size: var(--fs-md); margin: 1rem 0 .3rem; }
.legal-pop ul { padding-left: 1.2rem; margin: 0; }
.legal-pop li { margin: .2rem 0; }
.faq-legal { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-4) 0 0; }
.faq-legal a { color: var(--accent-text); text-decoration: none; }
.faq-legal a:hover { text-decoration: underline; }

/* Sign-in / Create Account messages arrive with a short slide-in; errors add a small shake.
   (The global reduced-motion rule turns these off for people who ask for less motion.) */
@keyframes lp-msg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lp-msg-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.login-page .login-card .flash { animation: lp-msg-in .35s var(--ease) both; }
.login-page .login-card .flash-err { animation: lp-msg-in .35s var(--ease) both, lp-msg-shake .4s ease .35s; }