/* ══════════════════════════════════════════
   Divesea Repairs v3 — Embossed Gold/Dark Theme
   Restyle only: every selector from v2 kept,
   no markup / JS / data changes required.
   ══════════════════════════════════════════ */

:root {
  --gold: #cd9812;
  --gold-dark: #a87b0e;
  --gold-light: #e8b830;
  --bg-dark: #0f0f14;
  --bg-card: #1b1b22;
  --bg-input: #14141a;
  --text: #f0f0f5;
  --text-muted: #8f8f9d;
  --border: #2e2e38;
  --border-strong: #3a3a45;
  --danger: #c0392b;
  --success: #27ae60;
  --info: #2980b9;
  --warning: #f39c12;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-emboss: 0 2px 0 #0a0a0d, 0 4px 8px rgba(0, 0, 0, 0.3);

  /* ─── Module palette ───
     One hue per module so a button means the same thing on every page. Chosen
     to sit with the gold rather than fight it: all six share roughly the same
     chroma and lightness, so no single module shouts louder than the others on
     the dark metal. Gold stays with Home because it's the house colour and the
     hub, and it remains the "you are here" ring everywhere.
     Each module needs three values — rim, label, and a soft glow for rings. */
  --mod-home-rim: #7d6420;   --mod-home-lit: #e8b830;   --mod-home-glow: rgba(205, 152, 18, 0.30);
  --mod-rep-rim:  #14706b;   --mod-rep-lit:  #3fd0c6;   --mod-rep-glow:  rgba(31, 190, 178, 0.30);
  --mod-po-rim:   #2b5c92;   --mod-po-lit:   #6aa9ee;   --mod-po-glow:   rgba(61, 127, 201, 0.32);
  --mod-price-rim:#5b4a90;   --mod-price-lit:#b095ef;   --mod-price-glow:rgba(138, 107, 209, 0.32);
  --mod-cal-rim:  #8f4733;   --mod-cal-lit:  #f0906f;   --mod-cal-glow:  rgba(207, 106, 74, 0.30);
  --mod-arc-rim:  #545d6b;   --mod-arc-lit:  #9dabbd;   --mod-arc-glow:  rgba(122, 134, 150, 0.30);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(205, 152, 18, 0.07), transparent 60%),
    linear-gradient(180deg, #15151c 0%, var(--bg-dark) 340px);
  background-color: var(--bg-dark);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--gold-light); text-decoration: none; transition: color 0.15s; }
a:hover { color: #f5cc55; }

/* ─── Layout ─── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}
.container-wide { max-width: 1800px; padding: 20px 20px 80px; }

/* Repairs/PO data tables: short-content columns (job/PO#, customer,
   category, vendor, dates) shouldn't wrap just because a neighboring
   column (product name, notes) has long free text. */
#repairsTable td:first-child, #repairsTable th:first-child,
#repairsTable td:nth-child(2), #repairsTable th:nth-child(2),
#repairsTable td:nth-child(4), #repairsTable th:nth-child(4),
#repairsTable td:nth-child(6), #repairsTable th:nth-child(6),
#repairsTable td:nth-child(8), #repairsTable th:nth-child(8),
table.data-table td:first-child, table.data-table th:first-child {
  white-space: nowrap;
}
/* PO table has no long free-text column in list view (that's only on the
   detail page) — nowrap everywhere avoids re-tuning nth-child every time a
   column gets added. */
#poTable td, #poTable th {
  white-space: nowrap;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background:
    radial-gradient(680px 160px at 12% -20%, rgba(205, 152, 18, 0.16), transparent 65%),
    linear-gradient(180deg, rgba(46, 46, 58, 0.95) 0%, rgba(15, 15, 20, 0.97) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(205, 152, 18, 0.35);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

/* Animated gold sheen sweeping along the header's bottom edge */
header.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, transparent);
  background-size: 240% 100%;
  animation: header-sheen 7s linear infinite;
  pointer-events: none;
}
@keyframes header-sheen {
  0% { background-position: 240% 0; }
  100% { background-position: -240% 0; }
}

/* Ambient rising bubbles — subtle nod to the dive-shop brand */
.header-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.header-bubbles span {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(232, 184, 48, 0.45), rgba(205, 152, 18, 0.05));
  animation: bubble-rise linear infinite;
}
.header-bubbles span:nth-child(1) { left: 55%; width: 5px;  height: 5px;  animation-duration: 6.5s; animation-delay: 0s; }
.header-bubbles span:nth-child(2) { left: 68%; width: 8px;  height: 8px;  animation-duration: 8s;   animation-delay: 1.6s; }
.header-bubbles span:nth-child(3) { left: 80%; width: 4px;  height: 4px;  animation-duration: 5.5s; animation-delay: 3s; }
.header-bubbles span:nth-child(4) { left: 90%; width: 7px;  height: 7px;  animation-duration: 7.2s; animation-delay: 0.8s; }
.header-bubbles span:nth-child(5) { left: 97%; width: 5px;  height: 5px;  animation-duration: 6s;   animation-delay: 2.4s; }
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1);     opacity: 0; }
  12%  { opacity: 0.7; }
  85%  { opacity: 0.15; }
  100% { transform: translateY(-52px) scale(0.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  header.site-header::after, .header-bubbles span { animation: none; }
}

.header-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
#staff-logo-link {
  display: inline-flex;
  text-decoration: none;
}
.header-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}
.header-logo:hover {
  transform: scale(1.06) rotate(-1.5deg);
  filter: drop-shadow(0 3px 12px rgba(205, 152, 18, 0.55));
}
.header-tagline {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding-left: 16px;
  border-left: 1px solid var(--border-strong);
}

header nav {
  position: relative;
  z-index: 1;
  /* Flex rather than inline flow: an inline coin aligns on the baseline of its
     *last* text line, so a two-line coin would sit lower than a one-line one.
     Centring as flex items keeps every coin on the same axis by construction. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 10px;
  flex-wrap: wrap;
}
header nav a {
  margin-left: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s;
  display: inline-block;
}
header nav a:hover {
  color: var(--gold-light);
  border-color: var(--border-strong);
  background: rgba(205, 152, 18, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
header nav a.nav-btn {
  background: linear-gradient(180deg, #2a2a35 0%, #15151a 100%);
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--gold);
  color: var(--gold-light);
  text-shadow: 0 1px 0 #0a0a0d;
  box-shadow: var(--shadow-emboss);
}
header nav a.nav-btn:hover {
  border-bottom-color: var(--gold-light);
  background: linear-gradient(180deg, #2a2a35 0%, #15151a 100%);
  box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}
/* ─── Header nav medallions ───
   Round metal coins rendered entirely in CSS. These replace the old image
   badges: because every coin is drawn from the same box, they are identical
   in size and baseline by construction — the images never could be, since
   each was a picture of text carrying its own internal padding.
   Gold rim = purchasing side, steel rim = repair operations. */
header nav a.nav-coin {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Sized from the widest rendered label ("CALENDAR", ~65px at this font)
     plus the machined ring inset — grow the font and this has to follow. */
  width: 84px;
  height: 84px;
  margin-left: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #5f5f6b;
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 255, 255, 0.07), transparent 45%),
    radial-gradient(circle at 33% 20%, #6e6e7d 0%, #3a3a46 38%, #22222a 68%, #131318 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 3px rgba(255, 255, 255, 0.07),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5);
  color: #e6e6ee;
  /* "CALENDAR" is the widest label and sets the ceiling here: at this size it
     only clears the ring once the tracking is tightened, which is the right
     call for uppercase text this large anyway. */
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #0a0a0d, 0 -1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
/* The label is its own block so a two-word coin stacks; without it the flex
   container would lay the lines out side by side. */
header nav a.nav-coin .coin-label {
  display: block;
  position: relative;
  z-index: 1;
}
/* ─── Module colour carriers ───
   A single class sets three custom properties; every component below reads
   them, so a module's colour is defined once and applied to coins, shortcut
   buttons and HQ tiles alike. Adding a module means adding one block here. */
.mod-home     { --mod-rim: var(--mod-home-rim);  --mod-lit: var(--mod-home-lit);  --mod-glow: var(--mod-home-glow); }
.mod-repairs  { --mod-rim: var(--mod-rep-rim);   --mod-lit: var(--mod-rep-lit);   --mod-glow: var(--mod-rep-glow); }
.mod-po       { --mod-rim: var(--mod-po-rim);    --mod-lit: var(--mod-po-lit);    --mod-glow: var(--mod-po-glow); }
.mod-prices   { --mod-rim: var(--mod-price-rim); --mod-lit: var(--mod-price-lit); --mod-glow: var(--mod-price-glow); }
.mod-calendar { --mod-rim: var(--mod-cal-rim);   --mod-lit: var(--mod-cal-lit);   --mod-glow: var(--mod-cal-glow); }
.mod-archive  { --mod-rim: var(--mod-arc-rim);   --mod-lit: var(--mod-arc-lit);   --mod-glow: var(--mod-arc-glow); }

/* Coins pick the module colour up automatically; the fallbacks keep any
   unclassed coin looking exactly as it did before. */
header nav a.nav-coin {
  border-color: var(--mod-rim, #5f5f6b);
  color: var(--mod-lit, #e6e6ee);
}

/* Slow specular sweep, echoing the gold sheen on the header's bottom edge.
   Kept inside the coin by matching its border-radius rather than clipping,
   so the count bead can still sit proud of the rim. */
header nav a.nav-coin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.16) 48%, transparent 60%);
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: coin-sheen 7s linear infinite;
  pointer-events: none;
}
@keyframes coin-sheen {
  0%, 74% { background-position: 150% 0; }
  100%    { background-position: -70% 0; }
}

header nav a.nav-coin:hover {
  transform: translateY(-2px);
  border-color: var(--mod-lit, var(--gold));
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 255, 255, 0.09), transparent 45%),
    radial-gradient(circle at 33% 20%, #82828f 0%, #45454f 38%, #29292f 68%, #18181d 100%);
  box-shadow:
    0 7px 14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 3px rgba(255, 255, 255, 0.09),
    0 0 0 2px var(--mod-glow, rgba(205, 152, 18, 0.28));
}
header nav a.nav-coin:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 3px 7px rgba(0, 0, 0, 0.65);
}
header nav a.nav-coin:focus-visible {
  outline: none;
  border-color: var(--gold-light);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(205, 152, 18, 0.45);
}
/* You-are-here: rim stays lit without the hover lift. */
/* You-are-here. The ring is gold on every page regardless of module, so
   "which page am I on" stays one consistent signal rather than changing colour
   as you move around — the module hue is already carried by the label. */
header nav a.nav-coin.nav-coin-active {
  border-color: var(--gold);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 3px rgba(205, 152, 18, 0.22),
    0 0 0 2px rgba(205, 152, 18, 0.38);
}

/* Live count (Archive) rides the rim as a bead. */
header nav a.nav-coin .coin-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--gold-light);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
header nav a.nav-coin .coin-count:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  header nav a.nav-coin::after { animation: none; }
}
@media (max-width: 900px) {
  header nav a.nav-coin { width: 68px; height: 68px; margin-left: 6px; font-size: 0.7rem; }
}

/* ─── Cards ─── */
.card {
  background: linear-gradient(180deg, #20202a 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 24px;
}
.card h2 {
  color: var(--gold-light);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.card h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ─── Disclosure button ───
   Opens a collapsed section. This used to be an <h2> with cursor:pointer,
   which read as a heading and gave no sign it could be clicked — hence the
   "(click to expand)" hint propping it up. A real rounded button says it
   without the caption, and the ＋ rotating to ✕ says which way it will go.
   Built from the same metal as the header medallions — same gradient, same
   machined ring, same sheen — just rolled out into a rounded bar. */
.disclosure-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid #7d6420;
  border-radius: 14px;
  background:
    radial-gradient(120% 200% at 50% 150%, rgba(255, 255, 255, 0.07), transparent 45%),
    radial-gradient(130% 190% at 28% -40%, #6e6e7d 0%, #3a3a46 34%, #22222a 66%, #131318 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 3px rgba(255, 255, 255, 0.07),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5);
  color: var(--gold-light);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 #0a0a0d, 0 -1px 0 rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
/* Specular sweep, same timing as the medallions so they read as one family. */
.disclosure-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.14) 48%, transparent 58%);
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: coin-sheen 7s linear infinite;
  pointer-events: none;
}
.disclosure-btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background:
    radial-gradient(120% 200% at 50% 150%, rgba(255, 255, 255, 0.09), transparent 45%),
    radial-gradient(130% 190% at 28% -40%, #82828f 0%, #45454f 34%, #29292f 66%, #18181d 100%);
  box-shadow:
    0 7px 14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 3px rgba(255, 255, 255, 0.09),
    0 0 0 2px rgba(205, 152, 18, 0.28);
}
.disclosure-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 3px 7px rgba(0, 0, 0, 0.65);
}
.disclosure-btn:focus-visible {
  outline: none;
  border-color: var(--gold-light);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(205, 152, 18, 0.45);
}
/* Raised above the sheen, same as the medallion labels. */
.disclosure-label, .disclosure-icon { position: relative; z-index: 1; }
.disclosure-icon {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .disclosure-btn::after { animation: none; }
}
.disclosure-btn[aria-expanded="true"] .disclosure-icon { transform: rotate(45deg); }
/* Sits alone in its card, so it keeps the heading's bottom margin without
   inheriting the heading's rule and gold underline. */
.card > .disclosure-btn { margin-bottom: 4px; }
.card > .disclosure-btn[aria-expanded="true"] { margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) {
  .disclosure-icon { transition: none; }
}

/* A card heading with an action parked on the same line. The h2 keeps its
   underline rule, so the divider still runs the full width of the card. */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.card-head h2 { flex: 1 1 auto; }
.card-head > .btn { flex: 0 0 auto; margin-bottom: 18px; }

/* ─── Forms ─── */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #5c5c68; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 0 0 3px rgba(205, 152, 18, 0.18);
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cd9812' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.form-group textarea { min-height: 96px; resize: vertical; }
.form-group input[type="date"] {
  color-scheme: dark;
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--gold);
  box-shadow: none;
}
.form-group input[type="file"] {
  padding: 10px;
  box-shadow: none;
  background: transparent;
  border-style: dashed;
}
.form-group input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, #2a2a35 0%, #15151a 100%);
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--gold);
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.form-group input[type="file"]::file-selector-button:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ─── Buttons — embossed Divesea style ─── */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.btn-primary {
  background: linear-gradient(180deg, #2a2a35 0%, #15151a 100%);
  border-bottom: 2px solid var(--gold);
  color: var(--text);
  box-shadow: var(--shadow-emboss);
}
.btn-primary:hover {
  border-bottom-color: var(--gold-light);
  box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  color: var(--gold-light);
}
.btn-success {
  background: linear-gradient(180deg, #2e9e5b 0%, #1e7a42 100%);
  border-bottom: 2px solid #1a6338;
  color: #fff;
  box-shadow: var(--shadow-emboss);
}
.btn-success:hover { filter: brightness(1.1); transform: translateY(1px); box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.3); }
.btn-danger {
  background: linear-gradient(180deg, #d04437 0%, #a02e23 100%);
  border-bottom: 2px solid #7e241b;
  color: #fff;
  box-shadow: var(--shadow-emboss);
}
.btn-danger:hover { filter: brightness(1.1); transform: translateY(1px); box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.3); }
.btn-secondary {
  background: linear-gradient(180deg, #23232c 0%, #17171d 100%);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(1px);
  box-shadow: none;
}
.btn:disabled {
  background: linear-gradient(180deg, #1a1a20 0%, #111118 100%);
  border-color: #222;
  border-bottom-color: #444;
  color: #555;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-block { width: 100%; }

/* ─── Status Badges — ghost pills, same hue map ─── */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid transparent;
}
.badge-submitted  { background: rgba(243, 156, 18, 0.16); color: #f5b041; border-color: rgba(243, 156, 18, 0.6); }
.badge-received   { background: rgba(52, 73, 94, 0.25);   color: #aebfd0; border-color: rgba(52, 73, 94, 0.7); }
.badge-diagnosing { background: rgba(41, 128, 185, 0.18); color: #6fb6e8; border-color: rgba(41, 128, 185, 0.6); }
.badge-repairing  { background: rgba(142, 68, 173, 0.18); color: #c39ae0; border-color: rgba(142, 68, 173, 0.6); }
.badge-sent-vendor{ background: rgba(230, 126, 34, 0.16); color: #f0a55f; border-color: rgba(230, 126, 34, 0.6); }
.badge-at-vendor  { background: rgba(211, 84, 0, 0.18);   color: #ef9354; border-color: rgba(211, 84, 0, 0.6); }
.badge-returned   { background: rgba(22, 160, 133, 0.16); color: #58cdb6; border-color: rgba(22, 160, 133, 0.6); }
.badge-ready      { background: rgba(39, 174, 96, 0.18);  color: #63d68f; border-color: rgba(39, 174, 96, 0.65); }
.badge-collected  { background: rgba(127, 140, 141, 0.18); color: #aab4b5; border-color: rgba(127, 140, 141, 0.6); }

/* ─── Tables ─── */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.data-table th {
  background: rgba(205, 152, 18, 0.05);
  color: var(--gold);
  font-weight: 600;
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
table.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data-table tr { transition: background 0.12s; }
table.data-table tr:hover { background: rgba(205, 152, 18, 0.05); }
table.data-table tr.overdue { background: rgba(192, 57, 43, 0.12); }
table.data-table tr.overdue:hover { background: rgba(192, 57, 43, 0.2); }

/* ─── Tabs ─── */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.tab {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.tab:hover { color: var(--gold-light); background: rgba(205, 152, 18, 0.05); }
.tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
  background: linear-gradient(180deg, rgba(205, 152, 18, 0.08), transparent);
}
.tab .count {
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  margin-left: 6px;
}
.tab.active .count { background: rgba(205, 152, 18, 0.2); color: var(--gold-light); }

/* ─── Search Bar ─── */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-bar input,
.search-bar select {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar input:focus,
.search-bar select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 0 0 3px rgba(205, 152, 18, 0.18);
}

/* ─── Description Lists (detail view) ─── */
dl.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 18px;
  font-size: 0.92rem;
}
dl.detail-list dt {
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  padding-top: 2px;
}
dl.detail-list dd { color: var(--text); word-break: break-word; }

/* ─── Progress Bars ─── */
.progress-track {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 18px 0;
  padding: 16px 12px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) inset;
}
.progress-step {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 8px 4px 4px;
  border-top: 3px solid var(--border-strong);
  transition: all 0.2s;
}
.progress-step::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--border-strong);
  border: 2px solid var(--bg-input);
  transition: all 0.2s;
}
.progress-step.active {
  color: var(--gold-light);
  border-top-color: var(--gold);
}
.progress-step.active::before {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(205, 152, 18, 0.6);
}
.progress-step.done {
  color: #63d68f;
  border-top-color: var(--success);
}
.progress-step.done::before { background: var(--success); }

/* ─── History Log ─── */
.history-log { list-style: none; padding: 0; }
.history-log li {
  padding: 10px 14px;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.15s;
}
.history-log li:hover { border-left-color: var(--gold); }
.history-log li .time { color: var(--text-muted); font-size: 0.76rem; }
.history-log li .field { color: var(--gold-light); font-weight: 600; }

/* ─── Alerts / Messages ─── */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.92rem;
  border: 1px solid;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.alert-success { background: rgba(39, 174, 96, 0.12); border-color: rgba(39, 174, 96, 0.55); color: #6fdd9a; }
.alert-error { background: rgba(192, 57, 43, 0.12); border-color: rgba(192, 57, 43, 0.55); color: #f08a7d; }
.alert-warning { background: rgba(243, 156, 18, 0.12); border-color: rgba(243, 156, 18, 0.55); color: #f5b041; }
.alert-warning .row { margin-top: 4px; font-size: 0.85rem; }
.alert-info { background: rgba(41, 128, 185, 0.12); border-color: rgba(41, 128, 185, 0.55); color: #74bce8; }

/* ─── Section Headers on Detail Page ─── */
.section-header {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--gold);
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: var(--gold);
}

/* ─── Danger Zone ─── */
.danger-zone {
  position: fixed;
  bottom: 16px;
  right: 16px;
  border: 1px dashed rgba(192, 57, 43, 0.4);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(6px);
  text-align: right;
  z-index: 100;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.danger-zone:hover { opacity: 1; }
.danger-zone h3 { display: none; }
.danger-zone p { display: none; }
.danger-zone .btn-danger {
  font-size: 0.72rem;
  padding: 6px 12px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  box-shadow: none;
}
.danger-zone .btn-danger:hover { background: var(--danger); color: #fff; transform: none; }

/* ─── Login Page ─── */
body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.login-bubbles span {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(232, 184, 48, 0.4), rgba(205, 152, 18, 0.03));
  animation: bubble-rise-full linear infinite;
}
.login-bubbles span:nth-child(1) { left: 8%;  width: 10px; height: 10px; animation-duration: 12s; animation-delay: 0s; }
.login-bubbles span:nth-child(2) { left: 22%; width: 6px;  height: 6px;  animation-duration: 9s;  animation-delay: 2s; }
.login-bubbles span:nth-child(3) { left: 40%; width: 14px; height: 14px; animation-duration: 15s; animation-delay: 4s; }
.login-bubbles span:nth-child(4) { left: 60%; width: 8px;  height: 8px;  animation-duration: 10s; animation-delay: 1s; }
.login-bubbles span:nth-child(5) { left: 78%; width: 12px; height: 12px; animation-duration: 13s; animation-delay: 5s; }
.login-bubbles span:nth-child(6) { left: 90%; width: 7px;  height: 7px;  animation-duration: 8s;  animation-delay: 3s; }
@keyframes bubble-rise-full {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.65; }
  90%  { opacity: 0.1; }
  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login-bubbles span { animation: none; display: none; }
}

.login-container {
  position: relative;
  z-index: 1;
  max-width: 380px;
  width: 100%;
  padding: 40px 36px 36px;
  background: linear-gradient(180deg, #20202a 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 90px rgba(205, 152, 18, 0.09);
  text-align: center;
}
.login-logo {
  display: block;
  width: 180px;
  max-width: 75%;
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 4px 18px rgba(205, 152, 18, 0.35));
}
.login-container h1 {
  font-size: 1.28rem;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}
.login-subtitle {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 28px;
}
.login-container .form-group { text-align: left; }
.login-container .input-wrap { position: relative; }
.login-container .input-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.15s;
}
.login-container .input-wrap input { padding-left: 42px; padding-right: 42px; }
.login-container .input-wrap:focus-within .input-icon { color: var(--gold); }
.login-container .password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 4px;
  transition: color 0.15s;
}
.login-container .password-toggle:hover { color: var(--gold-light); }
.login-container .password-toggle svg { width: 16px; height: 16px; display: block; }
.login-container #loginError .alert { animation: login-shake 0.4s; }
@keyframes login-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ─── Tracking Page ─── */
.track-result {
  max-width: 600px;
  margin: 30px auto;
}
.track-result .status-hero {
  text-align: center;
  padding: 34px 30px;
  background: linear-gradient(180deg, #20202a 0%, var(--bg-card) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.track-result .status-hero .job-num {
  font-size: 1.6rem;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 #0a0a0d;
}
.track-result .status-hero .product-name {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 8px 0;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .container { padding: 12px 12px 60px; }
  .card { padding: 20px; }
  table.data-table { font-size: 0.8rem; }
  table.data-table th, table.data-table td { padding: 8px 6px; }
  dl.detail-list { grid-template-columns: 120px 1fr; }
  header.site-header { flex-direction: column; gap: 10px; text-align: center; position: static; }
  header nav { justify-content: center; }
  header nav a { margin: 0 8px; }
}

/* ─── Two setup cards side by side (vendor price list: guide + import form).
   Both columns stretch to the taller card, and the element marked .card-fill
   absorbs the leftover height so the two textareas end on the same line. ─── */
.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.setup-grid > .card {
  display: flex;
  flex-direction: column;
}
.setup-grid .card-fill {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.setup-grid .card-fill textarea { flex: 1; }
/* Identical action strip in both cards, so the two textareas above it end on
   the same line instead of drifting with each button's height. */
.setup-grid .card-actions {
  display: flex;
  align-items: flex-start;
  min-height: 48px;
}
/* Buttons are flex items here, so stop them stretching to full column width. */
.setup-grid .card-fill > .btn { align-self: flex-start; }
@media (max-width: 1100px) {
  .setup-grid { grid-template-columns: 1fr; }
}

/* ─── Purchase Orders — same badge/card language, new status hues ─── */
.badge-po-open      { background: rgba(41, 128, 185, 0.18); color: #6fb6e8; border-color: rgba(41, 128, 185, 0.6); }
.badge-po-partial   { background: rgba(243, 156, 18, 0.16); color: #f5b041; border-color: rgba(243, 156, 18, 0.6); }
.badge-po-received  { background: rgba(39, 174, 96, 0.18);  color: #63d68f; border-color: rgba(39, 174, 96, 0.65); }
.badge-po-cancelled { background: rgba(127, 140, 141, 0.18); color: #aab4b5; border-color: rgba(127, 140, 141, 0.6); }
.badge-pay-unpaid   { background: rgba(192, 57, 43, 0.14);  color: #f08a7d; border-color: rgba(192, 57, 43, 0.55); }
.badge-pay-partial  { background: rgba(243, 156, 18, 0.16); color: #f5b041; border-color: rgba(243, 156, 18, 0.6); }
.badge-pay-paid     { background: rgba(39, 174, 96, 0.18);  color: #63d68f; border-color: rgba(39, 174, 96, 0.65); }

/* ─── Stat Tiles — KPI row for backorder / reorder summaries ─── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-tile {
  background: linear-gradient(180deg, #20202a 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.stat-tile .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
  text-shadow: 0 1px 0 #0a0a0d;
}
.stat-tile .stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}
.stat-tile.stat-warn .stat-value { color: #f5b041; }
.stat-tile.stat-danger .stat-value { color: #f08a7d; }

/* ─── Line-item editor (New PO builder) ─── */
table.line-item-editor { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
table.line-item-editor th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 6px 8px;
}
table.line-item-editor td { padding: 4px 8px; }
table.line-item-editor input,
table.data-table input {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
}
table.line-item-editor input:focus,
table.data-table input:focus { outline: none; border-color: var(--gold); }

/* ─── SKU/product search type-ahead ─── */
.sku-search-wrap { position: relative; }
.sku-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 340px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, #23232d 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 50;
}
.sku-suggest-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.sku-suggest-item:last-child { border-bottom: none; }
.sku-suggest-item:hover, .sku-suggest-item.active {
  background: rgba(205, 152, 18, 0.1);
}
.sku-suggest-item .ss-sku { color: var(--gold-light); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.4px; }
.sku-suggest-item .ss-name { color: var(--text); margin-top: 2px; }
.sku-suggest-item .ss-price { color: var(--text-muted); font-size: 0.76rem; float: right; }
.sku-suggest-item .ss-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(205, 152, 18, 0.16);
  border: 1px solid rgba(205, 152, 18, 0.45);
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
}
.sku-suggest-empty { padding: 12px; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

.li-custom-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.li-custom-toggle input[type="checkbox"] { margin: 0; width: auto; box-shadow: none; accent-color: var(--gold); }

/* Small, muted "remove line item" control — deliberately quieter/smaller
   than a full .btn-danger so it doesn't read as the primary action in a
   row and isn't as easy to hit by accident; still backed by a confirm()
   dialog in JS as the real safety net. */
.btn-remove-line {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-remove-line:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

/* ─── Receiving progress bar (per line item) ─── */
.receive-bar { height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; margin-top: 4px; }
.receive-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.2s; }

/* ─── Staff Calendar ─── */
:root {
  --cal-task: var(--info);
  --cal-order: var(--warning);
  --cal-holiday: var(--danger);
  --cal-leave: #9b59b6;
  --cal-event: #e91e8c;
}
.cal-type-task    { background: rgba(41, 128, 185, 0.18); color: #6fb6e8; border-color: rgba(41, 128, 185, 0.6); }
.cal-type-order   { background: rgba(243, 156, 18, 0.16); color: #f5b041; border-color: rgba(243, 156, 18, 0.6); }
.cal-type-holiday { background: rgba(192, 57, 43, 0.14);  color: #f08a7d; border-color: rgba(192, 57, 43, 0.55); }
.cal-type-leave   { background: rgba(155, 89, 182, 0.18); color: #c39ae0; border-color: rgba(155, 89, 182, 0.6); }
.cal-type-event   { background: rgba(233, 30, 140, 0.16); color: #f27ab8; border-color: rgba(233, 30, 140, 0.55); }
.cal-type-trip    { background: rgba(26, 188, 156, 0.18); color: #5fd6bd; border-color: rgba(26, 188, 156, 0.6); }

.cal-view-toggle { margin-bottom: 16px; }

.cal-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .cal-layout { grid-template-columns: 1fr; }
}

/* The calendar column stretches to match the side rail's height (Leave
   Requests + Notes + New Event stacked), then the calendar card itself
   grows to fill that height — so the calendar gets taller instead of
   leaving dead space, and its bottom edge lines up with the side rail's. */
.cal-main-col { display: flex; flex-direction: column; min-width: 0; }
.cal-main-card { flex: 1; display: flex; flex-direction: column; }
#calMonthView, #calAgendaView { flex: 1; display: flex; flex-direction: column; }
#calMonthView .cal-grid { flex: 1; }

/* Side rail: now that square day cells can make the calendar column much
   taller than the stacked Leave Requests / Notes / New Event cards, the
   side rail stretches to match (via .cal-layout's align-items: stretch)
   and the last card (New Event) grows to absorb the leftover height, so
   its bottom edge lines up with the calendar's instead of leaving a gap. */
.cal-side-col { display: flex; flex-direction: column; min-width: 0; }
.cal-side-fill { flex: 1; display: flex; flex-direction: column; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-nav h2 { color: var(--gold-light); font-size: 1.2rem; margin: 0; }
.cal-nav .btn-sm { padding: 5px 12px; }

.cal-grid {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr — otherwise a cell with long unbroken
     text (a holiday name, a PO title) grows past its fair share and the
     other six columns get squeezed or pushed off the right edge. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Row height is no longer stretched to fill available space — each day
     cell sizes itself to be square (aspect-ratio, below), so rows are
     "auto" and simply take whatever height that produces. */
  grid-template-rows: auto repeat(6, auto);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}
.cal-weekday-header {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 8px 4px;
  min-width: 0;
}
.cal-day-cell {
  background: var(--bg-dark);
  /* Square cells: height always matches the column's own width, so the
     grid grows taller (more real estate per day) as columns get wider,
     instead of relying on a fixed min-height. */
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.cal-day-cell.cal-outside-month { background: var(--bg-input); opacity: 0.5; }
.cal-day-cell.cal-today { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-day-number { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.cal-day-cell.cal-today .cal-day-number { color: var(--gold-light); }
.cal-event-chip {
  display: block;
  font-size: 0.65rem;
  line-height: 1.4;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event-chip.cal-done { opacity: 0.5; text-decoration: line-through; }
/* A multi-day run repeats its chip on every day it covers. Squaring off the
   edge that continues into the next cell makes the week read as one bar
   instead of a row of unrelated chips. */
.cal-event-chip.cal-chip-start { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent; }
.cal-event-chip.cal-chip-mid   { border-radius: 0; border-left-color: transparent; border-right-color: transparent; }
.cal-event-chip.cal-chip-end   { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; }
.cal-more-link { font-size: 0.7rem; color: var(--text-muted); cursor: pointer; }

.cal-agenda-day {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.cal-agenda-day:last-child { border-bottom: none; }
.cal-agenda-date { color: var(--gold-light); font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.cal-agenda-empty { color: var(--text-muted); font-size: 0.82rem; }
.cal-agenda-event { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cal-agenda-event .cal-agenda-time { color: var(--text-muted); font-size: 0.76rem; width: 60px; flex-shrink: 0; }

.cal-side-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cal-side-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.85rem;
}
.cal-side-item .cal-side-meta { color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.cal-side-item .cal-side-actions { margin-top: 8px; display: flex; gap: 8px; }

/* "Last N entries" note sitting under a form, so you can see what you and
   the others just booked without leaving the panel. */
.cal-recent { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.cal-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cal-recent-head a { font-size: 0.72rem; }
.cal-side-item .cal-side-links { float: right; display: inline-flex; gap: 10px; }
.cal-side-item .cal-side-links a { color: var(--gold-light); }

/* ─── Vendor reply presentation ───
   The summary is the readable face of a vendor email; the raw text (often a
   flattened HTML table) stays available but never dominates the page. */
.reply-summary {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.55;
  background: var(--bg-input);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 8px 0 4px;
}
.reply-toggle { font-size: 0.74rem; color: var(--text-muted); }
.reply-toggle:hover { color: var(--gold-light); }
.reply-original { margin-top: 6px; }
.reply-clamp {
  max-height: 9.5em;
  overflow: hidden;
  position: relative;
}
.reply-clamp::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5em;
  background: linear-gradient(transparent, var(--bg-card));
}
.cal-recent-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cal-recent .cal-side-list { margin-top: 8px; }

.form-hint {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
  margin: -4px 0 12px;
}
.form-hint strong { color: var(--gold-light); font-weight: 600; }

/* ─── Utility ─── */
.text-center { text-align: center; }
.text-gold { color: var(--gold-light); }
.text-muted { color: var(--text-muted); }
.text-warning { color: var(--warning); }

/* ─── PO board rows, one step smaller ───
   The board carries twelve columns and runs wide; a smaller row fits more of
   it on screen without horizontal scrolling. Scoped to #poTable so the repair
   tables keep their own size. Badges and cell padding come down with the text,
   otherwise they stay oversized and the row doesn't actually get shorter. */
#poTable { font-size: 0.82rem; }
#poTable th, #poTable td { padding: 9px 10px; }
#poTable .badge { font-size: 0.68rem; padding: 3px 9px; letter-spacing: 0.4px; }
#poTable .btn-sm { padding: 5px 10px; font-size: 0.72rem; }

/* "Sent to vendor" column — a PO the vendor has never received is the one
   thing on this board you can act on immediately, so it reads amber rather
   than as a quiet dash. */
.sent-yes { color: var(--success); white-space: nowrap; }
.sent-yes .sent-date { color: var(--text-muted); font-weight: 400; }
.sent-no { color: var(--warning); font-weight: 600; white-space: nowrap; }
.sent-rev {
  margin-left: 5px;
  background: rgba(205, 152, 18, 0.18);
  color: var(--gold-light);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 0.66rem;
  font-weight: 700;
}

/* ─── Payment form: three columns ───
   The four short fields (status, amount, date, reference) pair up in columns
   1-2, and the screenshot occupies column 3 across both rows. Previously the
   paste zone was a full-width band under two half-width rows, which left most
   of a wide screen empty and pushed Save Payment below the fold. */
.payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 18px;
  align-items: start;
}
.payment-grid .screenshot-cell {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.payment-grid #pasteZone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.payment-grid #pasteZone:focus-visible { border-color: var(--gold); }
.payment-grid #screenshotPreview:not(:empty) { margin-bottom: 8px; }
.field-hint { font-size: 0.76rem; margin: 4px 0 0; line-height: 1.35; }

/* Below three columns' worth of room the screenshot goes full width rather
   than being squeezed into a sliver. */
@media (max-width: 1000px) {
  .payment-grid { grid-template-columns: 1fr 1fr; }
  .payment-grid .screenshot-cell { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
  .payment-grid { grid-template-columns: 1fr; }
}

/* Payment screenshot thumbnail — proof that something is already on file, so
   an empty paste zone never reads as "my upload vanished". */
.screenshot-thumb {
  max-width: 220px;
  max-height: 160px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  display: block;
  margin: 0 auto;
  transition: transform 0.15s, border-color 0.15s;
}
a:hover > .screenshot-thumb {
  border-color: var(--gold);
  transform: scale(1.02);
}

/* ─── PO totals footer ─── */
.po-foot-label {
  text-align: right;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
}
.po-foot-value { font-weight: 700; color: var(--gold-light); }
.po-foot-total { border-top: 1px solid var(--border-strong); font-size: 0.9rem; }
/* Small on purpose — freight is usually 0 and shouldn't compete with the
   line items for attention. */
.po-shipping-cell { display: flex; align-items: center; gap: 6px; }
.po-shipping-cell input {
  width: 96px;
  padding: 5px 8px;
  font-size: 0.85rem;
  text-align: right;
}
.po-shipping-cell .btn { flex: 0 0 auto; }

/* Line added to a PO after it was emailed to the vendor. The vendor is working
   from the version they received, so these rows are flagged amber — they need
   a revised PO before anyone expects them to arrive. */
tr.li-after-send > td {
  background: rgba(243, 156, 18, 0.10);
  border-top: 1px solid rgba(243, 156, 18, 0.28);
  border-bottom: 1px solid rgba(243, 156, 18, 0.28);
}
tr.li-after-send > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
tr.li-after-send:hover > td { background: rgba(243, 156, 18, 0.16); }
.li-after-send-dot { color: var(--warning); font-size: 0.6rem; vertical-align: middle; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none !important; }

/* ─── Modal ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
.modal h3 { color: var(--gold-light); font-size: 1.05rem; margin-bottom: 14px; }
.modal-meta {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 7px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.modal-meta dt {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 3px;
}
.modal-meta dd { color: var(--text); word-break: break-word; }
.modal-note {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Delete sits apart from the confirm/close pair so it isn't fat-fingered. */
.modal-actions .btn-danger { margin-right: auto; }

/* Print styles */
@media print {
  body { background: #fff; color: #000; }
  .btn, .tabs, .search-bar, .danger-zone { display: none !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; background: #fff; }
}

/* ═══════════════════════════════════════════
   PO SHORTCUTS + BOARD + PO CALENDAR (v66)
   All additive — nothing above this block changed.
   ═══════════════════════════════════════════ */
.po-shortcut-row {
  /* inline-flex so the row shares the line box with the (also inline-flex)
     New Purchase Order disclosure button instead of dropping below it */
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: middle;
  gap: 10px;
  margin: 0 0 0 16px;
}
.po-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(180deg, #23232c 0%, #17171d 100%);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 #0a0a0d, 0 2px 4px rgba(0, 0, 0, 0.2);
}
.po-shortcut:hover {
  border-color: var(--mod-lit, var(--gold));
  color: var(--mod-lit, var(--gold-light));
  transform: translateY(1px);
  box-shadow: none;
}
/* A shortcut carrying a module class wears that module colour at rest, so the
   PO Board button reads as PO-blue on every page it appears. */
.po-shortcut[class*="mod-"] {
  border-color: var(--mod-rim);
  color: var(--mod-lit);
}

/* ─── Module colour on ordinary buttons ───
   Same three properties, applied to .btn so an "Archive" or "Price Lists"
   button matches its coin without needing a bespoke class per button. */
.btn[class*="mod-"] {
  border-color: var(--mod-rim);
  color: var(--mod-lit);
}
.btn[class*="mod-"]:hover {
  border-color: var(--mod-lit);
  color: var(--mod-lit);
  box-shadow: 0 0 0 2px var(--mod-glow);
}

/* ─── HQ tiles ─── */
.hq-tile[class*="mod-"] { border-color: var(--mod-rim); }
.hq-tile[class*="mod-"]:hover {
  border-color: var(--mod-lit);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--mod-glow);
}
.hq-tile[class*="mod-"] .hq-name,
.hq-tile[class*="mod-"] .hq-big { color: var(--mod-lit); }

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.board-title { font-size: 1.15rem; color: var(--gold-light); }
.board-hint { font-size: 0.78rem; color: var(--text-muted); }

.po-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) { .po-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .po-board { grid-template-columns: 1fr; } }
.po-board-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.po-board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.po-board-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.po-board-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(205, 152, 18, 0.12);
  border: 1px solid rgba(205, 152, 18, 0.4);
  border-radius: 10px;
  padding: 1px 9px;
}
.po-board-cards { display: flex; flex-direction: column; gap: 10px; }
.po-board-empty { font-size: 0.8rem; color: var(--text-muted); padding: 8px 2px; }

.po-card {
  display: block;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}
.po-card:hover { border-color: var(--gold); }
.po-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.po-card-number { color: var(--gold-light); font-weight: 700; font-size: 0.85rem; }
.po-card-vendor { font-size: 0.82rem; margin: 4px 0 6px; }
.po-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.po-card-sgd { color: var(--text-muted); }
.po-card-eta {
  display: inline-block;
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  margin-top: 2px;
}
.po-card-eta-soon    { color: #f5b041; border-color: rgba(243, 156, 18, 0.6); background: rgba(243, 156, 18, 0.12); }
.po-card-eta-overdue { color: #f08a7d; border-color: rgba(192, 57, 43, 0.6);  background: rgba(192, 57, 43, 0.12); }
.po-card-eta-missing { font-style: italic; }

.po-cal-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 12px; }
.po-cal-hint a { color: var(--gold-light); }
a.cal-event-chip { text-decoration: none; }
.cal-event-chip.po-cal-overdue { border-color: rgba(192, 57, 43, 0.7); color: #f08a7d; background: rgba(192, 57, 43, 0.14); }

/* ─── HQ landing page (/staff) ─── */
.hq-greet { margin: 4px 0 18px; }
.hq-greet h1 { margin: 0; font-size: 1.7rem; color: var(--gold-light); }
.hq-date { margin: 4px 0 0; opacity: 0.7; }

.hq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.hq-tile {
  display: block;
  background: linear-gradient(180deg, #20202a 0%, var(--bg-card) 100%);
  border: 1px solid rgba(205, 151, 18, 0.25);
  border-radius: 12px;
  padding: 18px;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.hq-tile:hover { border-color: var(--gold); transform: translateY(-2px); text-decoration: none; }

.hq-tile-head { display: flex; align-items: baseline; gap: 10px; }
.hq-icon { font-size: 1.4rem; }
.hq-name { font-size: 1.05rem; font-weight: 600; }
.hq-big { margin-left: auto; font-size: 2.4rem; font-weight: 700; color: var(--gold-light); line-height: 1; }
.hq-sub { opacity: 0.6; font-size: 0.8rem; margin: 2px 0 12px; text-align: right; }

.hq-stat {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.92rem;
}
.hq-stat b { color: var(--gold-light); }

.hq-alert {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(200, 60, 60, 0.15); border-left: 3px solid #d05050;
  color: #ff9c9c; font-size: 0.88rem; font-weight: 600;
}
.hq-note {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(205, 151, 18, 0.12); border-left: 3px solid var(--gold);
  color: var(--gold-light); font-size: 0.88rem;
}

.hq-event {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.92rem;
}
.hq-event-date {
  flex: 0 0 58px; color: var(--gold-light); font-weight: 600; font-size: 0.8rem;
}
.hq-empty { opacity: 0.55; }

.hq-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ── Inline correction of the received quantity (PO detail) ───────────────
   The pencil sits quietly next to the figure and only gains contrast on
   hover/focus, so the receiving table still reads as data rather than a row
   of controls. */
.recv-cell { white-space: nowrap; }
.recv-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted, #8a8f98);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  margin-left: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
tr:hover .recv-edit-btn { opacity: 1; }
.recv-edit-btn:hover { color: var(--gold, #e0a82e); background: rgba(224,168,46,.12); }
.recv-edit-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--gold, #e0a82e);
  outline-offset: 1px;
}
.recv-edit-wrap { display: flex; align-items: center; gap: 6px; }
.recv-input {
  width: 68px;
  padding: 4px 6px;
  font-size: 0.85rem;
}
.recv-hint { font-size: 0.7rem; margin-top: 3px; }

/* ── Repair job photos ────────────────────────────────────────────────────
   Square thumbnails so a mixed bag of phone shots (portrait, landscape,
   screenshots) still lines up as a tidy grid. */
.rp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rp-tile { position: relative; margin: 0; }
.rp-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: rgba(255,255,255,.04);
}
.rp-tile figcaption {
  font-size: .68rem;
  color: var(--text-muted, #8a8f98);
  margin-top: 4px;
  text-align: center;
}
.rp-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; line-height: 1;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff;
  cursor: pointer; font-size: 15px;
  opacity: 0; transition: opacity .12s ease, background .12s ease;
}
.rp-tile:hover .rp-del, .rp-del:focus-visible { opacity: 1; }
.rp-del:hover { background: #c0392b; }
.rp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-btn-file { cursor: pointer; margin: 0; display: inline-flex; align-items: center; }
.rp-status { font-size: .8rem; }
.rp-hint { font-size: .72rem; margin-top: 8px; }

/* ── Invoices card: list left, add form right ─────────────────────────────
   Stacks back to one column on narrow screens so it stays usable on a phone. */
.inv-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
.inv-list-col { min-width: 0; }
.inv-form-col {
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 22px;
}
.inv-form-col .form-group { margin-bottom: 14px; }
.inv-hint { font-size: .72rem; margin: 4px 0 0; line-height: 1.45; }
@media (max-width: 860px) {
  .inv-split { grid-template-columns: 1fr; }
  .inv-form-col { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
}

/* Inline edit of an invoice number on a row already on file */
.inv-num-edit {
  background: none; border: none; color: var(--text-muted, #8a8f98);
  cursor: pointer; font-size: .8rem; margin-left: 8px; padding: 2px 5px;
  border-radius: 4px; opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.cal-side-item:hover .inv-num-edit, .inv-num-edit:focus-visible { opacity: 1; }
.inv-num-edit:hover { color: var(--gold, #e0a82e); background: rgba(224,168,46,.12); }
.inv-num-wrap { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.inv-num-input { width: 170px; padding: 4px 7px; font-size: .82rem; }