/* ApexCRM - application styles. Tokens live in tokens.css. */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }

/* Numbers must line up in every table and metric. */
.num, table td, table th, .metric-value, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.92em; }

::selection { background: var(--apex-pink-wash); }

/* ============================================================ layout */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ============================================================ sidebar */

.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px;
  gap: 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 20px;
}

.brand img { width: 32px; height: 32px; border-radius: 8px; flex: none; }

.brand-name {
  color: var(--sidebar-text-strong);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.brand-kicker {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 3px;
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.34);
  padding: 16px 10px 6px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-input);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background 0.12s, color 0.12s;
}

.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

.nav-item.active {
  background: var(--apex-pink-wash);
  color: var(--sidebar-text-strong);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--apex-pink);
  border-radius: 0 3px 3px 0;
}

.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.nav-item.active svg { opacity: 1; color: var(--apex-pink); }

.nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.75);
}

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.shift-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--text-faint);
}
.shift-dot.live {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.22);
}

/* ============================================================ main */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar h1 { font-size: 21px; font-weight: 700; }
.topbar .sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.topbar .spacer { flex: 1; }

.content { padding: 24px 28px 56px; display: flex; flex-direction: column; gap: 20px; }

/* ============================================================ controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-input);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.btn:hover { background: var(--bg-sunken); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--apex-pink);
  border-color: var(--apex-pink);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--apex-pink-hover); border-color: var(--apex-pink-hover); }

.btn-ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }

.btn-icon { padding: 8px; }

input[type='text'], input[type='search'], input[type='date'], select, textarea {
  padding: 8px 11px;
  border-radius: var(--r-input);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--apex-pink);
  box-shadow: 0 0 0 3px var(--apex-pink-wash);
}

.segmented {
  display: inline-flex;
  background: var(--bg-sunken);
  border-radius: var(--r-input);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.segmented button.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ============================================================ cards */

.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 14.5px; font-weight: 600; }
.card-head .sub { font-size: 12px; color: var(--text-muted); }
.card-head .spacer { flex: 1; }

.card-body { padding: 20px; }

/* ============================================================ metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px;
}

.metric {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.metric-value {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.metric-sub { font-size: 12px; color: var(--text-muted); }

.metric.accent { background: var(--apex-ink); color: #fff; }
.metric.accent .metric-label { color: rgba(255, 255, 255, 0.58); }
.metric.accent .metric-sub { color: rgba(255, 255, 255, 0.62); }
.metric.accent .metric-value { color: #fff; }

.metric-value.pos { color: var(--ok); }
.metric-value.neg { color: var(--danger); }

/* ============================================================ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-sunken);
  color: var(--text-secondary);
}
.badge.ok     { background: var(--ok-wash);     color: var(--ok); }
.badge.warn   { background: var(--warn-wash);   color: var(--warn); }
.badge.danger { background: var(--danger-wash); color: var(--danger); }
.badge.info   { background: var(--info-wash);   color: var(--info); }
.badge.pink   { background: var(--apex-pink-wash); color: var(--apex-pink); }

/* ============================================================ tables */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--text-muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  z-index: 1;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-sunken); }

td.strong { color: var(--text); font-weight: 500; }
td.right, th.right { text-align: right; }
td.nowrap { white-space: nowrap; }

/* ============================================================ empty states */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 28px;
  gap: 10px;
}

.empty-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--apex-pink-wash);
  color: var(--apex-pink);
  margin-bottom: 4px;
}
.empty-icon svg { width: 22px; height: 22px; }

.empty h3 { font-size: 15.5px; font-weight: 600; }
.empty p { margin: 0; color: var(--text-muted); max-width: 460px; font-size: 13px; line-height: 1.6; }

.empty code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-sunken);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ============================================================ charts */

.chart-box { position: relative; height: 260px; }
.chart-box.short { height: 190px; }

/* ============================================================ misc */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 1100px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }

.bar-track {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  overflow: hidden;
  min-width: 70px;
}
.bar-fill { height: 100%; background: var(--apex-pink); border-radius: var(--r-pill); }
.bar-fill.ok { background: var(--ok); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: 7px;
  height: 14px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.toast-host {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 100;
}
.toast {
  background: var(--apex-ink);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--r-input);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: rise 0.2s ease;
}
.toast.err { background: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--apex-pink-wash);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.banner svg { width: 18px; height: 18px; color: var(--apex-pink); flex: none; margin-top: 1px; }
.banner strong { font-weight: 600; }

/* ============================================================ reports */

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--apex-pink);
}

.report-logo { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.report-company { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.report-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apex-pink);
  margin-top: 2px;
}
.report-period { font-size: 16px; font-weight: 600; }
.report-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.report-foot {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 4px 2px 0;
}
.report-foot p { margin: 0 0 7px; }

/* ============================================================ sign-in */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--apex-pink-wash), transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand img { width: 34px; height: 34px; object-fit: contain; }
.auth-company { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.auth-kicker {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.auth-title { margin: 6px 0 0; font-size: 21px; letter-spacing: -0.02em; }
.auth-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-input);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus {
  border-color: var(--apex-pink);
  box-shadow: 0 0 0 3px var(--apex-pink-wash);
}

.auth-error {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
  background: var(--danger-wash);
  border-radius: var(--r-input);
  padding: 9px 11px;
}

.auth-submit { justify-content: center; padding: 10px 14px; font-size: 13.5px; }
.auth-foot {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ------------------------------------------------------------ user chip */

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--apex-pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.user-meta { line-height: 1.25; }
.user-name { font-size: 12.5px; font-weight: 600; }
.user-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .user-meta { display: none; }
}

/* ============================================================ print */

/* ---------------------------------------------------------------- demo data strip */

.demo-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 24px;
  background: var(--warn-wash);
  color: var(--warn);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.demo-strip svg { flex: none; }
.demo-strip code {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* ---------------------------------------------------------------- date range picker */

.dr { position: relative; }
.dr-button { gap: 8px; }
.dr-button.active { background: var(--bg-sunken); border-color: var(--line-strong); }
.dr-button-label { font-weight: 600; }

.dr-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dr-presets {
  width: 194px;
  flex: none;
  padding: 8px;
  background: var(--bg-sunken);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Tall enough that the eleven presets never need scrolling - having to scroll
     to reach "This year" would defeat the point of having it listed. */
  max-height: 470px;
  overflow-y: auto;
}

.dr-preset-group {
  padding: 9px 8px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dr-preset {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dr-preset:hover { background: var(--card); }
.dr-preset.active { background: var(--apex-pink); color: #fff; }
.dr-preset.active .dr-preset-hint { color: rgba(255, 255, 255, 0.75); }
.dr-preset-hint { font-size: 11px; color: var(--text-faint); }

.dr-cal { padding: 12px 14px; }

.dr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dr-chosen {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.dr-cal-body { display: flex; gap: 22px; }
.dr-month-name {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.dr-weekdays,
.dr-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }

.dr-weekdays span {
  padding-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
  text-align: center;
}

.dr-day {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}

.dr-day.blank { visibility: hidden; }
.dr-day:hover:not(:disabled) { background: var(--bg-sunken); }

/* No shift runs at a weekend, so those nights are always zero. Saying that in
   the calendar saves explaining the flat spots in every chart. */
.dr-day.weekend { color: var(--text-faint); }
.dr-day.future { opacity: 0.35; cursor: default; }
.dr-day.today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.dr-day.in-range { background: var(--apex-pink-wash); border-radius: 0; }
.dr-day.edge { background: var(--apex-pink); color: #fff; border-radius: 8px; }

.dr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.dr-note { font-size: 11.5px; color: var(--text-faint); }

@media (max-width: 920px) {
  .dr-pop { flex-direction: column; max-height: 80vh; overflow-y: auto; }
  .dr-presets { width: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .dr-cal-body { flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------- deltas */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: 7px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.delta svg { width: 12px; height: 12px; }
.delta.good { background: var(--ok-wash); color: var(--ok); }
.delta.bad { background: var(--danger-wash); color: var(--danger); }

.metric.accent .delta { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.88); }
.metric.accent .delta.good { background: rgba(16, 185, 129, 0.24); color: #6EE7B7; }
.metric.accent .delta.bad { background: rgba(248, 113, 113, 0.22); color: #FCA5A5; }

/* ---------------------------------------------------------------- insights */

.insights { display: grid; gap: 2px; }

.insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
}

.insight-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--text-muted);
}

.insight.good .insight-mark { background: var(--ok-wash); color: var(--ok); }
.insight.bad .insight-mark { background: var(--danger-wash); color: var(--danger); }
.insight.watch .insight-mark { background: var(--warn-wash); color: var(--warn); }

.insight-text { font-size: 13.5px; line-height: 1.5; }
.insight-figures { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.insight-figures strong { color: var(--text-secondary); }

.insight.clickable { cursor: pointer; }
.insight.clickable:hover { background: var(--apex-pink-wash); }

@media print {
  /* Always print on white, whatever theme is on screen. */
  :root, :root[data-theme='dark'] {
    --bg: #fff;
    --bg-sunken: #F1F5F9;
    --card: #fff;
    --text: #0F172A;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-faint: #64748B;
    --line: rgba(15, 23, 42, 0.18);
    --line-strong: rgba(15, 23, 42, 0.3);
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: none;
    --ok: #047857;
    --warn: #B45309;
    --danger: #B91C1C;
    --chart-primary: #0F172A;
  }

  @page { margin: 14mm; size: A4 portrait; }

  body { background: #fff; font-size: 11pt; }

  /* Chrome and Edge drop background colours unless asked. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .sidebar, .topbar, .no-print, .toast-host { display: none !important; }

  .app { display: block; }
  .main { display: block; }
  .content { padding: 0; gap: 14px; }

  .card, .metric, .report-head {
    box-shadow: none;
    border: 1px solid var(--line);
    break-inside: avoid;
  }

  .card-head { padding: 10px 14px; }
  .card-body { padding: 14px; }
  .metric { padding: 12px 14px; }
  .metric-value { font-size: 20pt; }

  /* Keep a table's header with its rows. */
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  .chart-box, .chart-box.short { height: 170px; }

  .banner { border: 1px solid var(--apex-pink); }

  a[href]::after { content: ''; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row;
    align-items: center; overflow-x: auto; padding: 12px;
  }
  .nav { flex-direction: row; flex: none; }
  .nav-label, .sidebar-foot, .brand-kicker, .nav-count { display: none; }
  .nav-item.active::before { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------- admin */

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { color: var(--danger); border-color: var(--line-strong); }
.btn.danger:hover { background: var(--danger-wash); border-color: var(--danger); }

.admin-form {
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-sunken);
}

/* The confirmation sits inside the card it belongs to, so it is obvious what
   is about to happen and to what. */
.confirm-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--warn);
  border-radius: var(--r-card);
  background: var(--warn-wash);
}

.confirm-bar .small { line-height: 1.5; max-width: 60ch; }

/* A one-time password cannot be looked up again, so it is dismissed on purpose
   rather than fading away. */
.password-reveal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 8, 20, 0.6);
  backdrop-filter: blur(3px);
}

.password-reveal-inner {
  width: min(460px, 100%);
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.password-reveal h3 { font-size: 16px; margin-bottom: 14px; }

.password-value {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-input);
  background: var(--bg-sunken);
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  user-select: all;
}

/* Action columns: keep the buttons on one line and let the row breathe rather
   than pushing the whole table into a horizontal scroll. */
td .row .btn-sm { white-space: nowrap; }
.table-wrap table { width: 100%; }

/* ---------------------------------------------------------------- forms */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.form-grid .field.span-2 { grid-column: 1 / -1; }
.form-divider {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.field .req { color: var(--apex-pink); }
.field-hint { margin-top: 5px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* A tick-list answering one question - which services a check covers. Rows
   are generously tall because this is clicked at 3am at the end of a shift. */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--bg-sunken);
}
.checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
}
.checklist-row:hover { background: var(--card); }
.checklist-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--apex-pink);
  flex: none;
  cursor: pointer;
}

.field-error { margin-top: 5px; font-size: 11.5px; color: var(--danger); }
.field.has-error .input { border-color: var(--danger); }

textarea.input { resize: vertical; min-height: 68px; font-family: inherit; }

.form-panel { display: flex; flex-direction: column; gap: 4px; }
.form-title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.form-note {
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.form-error:not(:empty) {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--danger);
  border-radius: var(--r-input);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 12.5px;
}

/* A possible duplicate is a question, not a refusal, so it is amber not red. */
.form-warning {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--r-input);
  background: var(--warn-wash);
  color: var(--warn);
}
.form-warning .small { line-height: 1.5; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  background: rgba(5, 8, 20, 0.55);
  backdrop-filter: blur(3px);
}

.sheet-inner {
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.sheet-head h2 { font-size: 16px; font-weight: 700; }
.sheet-body { padding: 22px; }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .sheet { padding: 16px; }
}

/* Phone numbers, dates and short badges read as one thing; breaking them over
   three lines makes a table unreadable at a glance. */
td.nowrap, th.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- detail grid */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-sunken);
}

.detail-label {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.detail-value { font-size: 13.5px; line-height: 1.45; }

/* An honest caveat shown on the page, not hidden in a footnote. */
.note-bar {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--r-input);
  background: var(--bg-sunken);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.note-bar svg { flex: none; color: var(--info); margin-top: 1px; }

.rate-history { margin-top: 14px; }
.rate-history summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}
.rate-history summary:hover { color: var(--text); }

/* ---------------------------------------------------------------- import */

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.pick {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.pick:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.pick.active { border-color: var(--apex-pink); background: var(--apex-pink-wash); }
.pick-label { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.pick-help { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

.dropzone {
  display: grid;
  place-items: center;
  padding: 36px 20px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-sunken);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--apex-pink);
  background: var(--apex-pink-wash);
  color: var(--apex-pink);
}

.or {
  margin: 14px 0;
  text-align: center;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------- services on a sale */

.form-section {
  margin: 4px 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form-section:not(:first-child) {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.svc-head,
.svc-row {
  display: grid;
  grid-template-columns: 130px 1fr 82px 150px 36px;
  gap: 8px;
  align-items: center;
}

.svc-head {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.svc-list { display: grid; gap: 8px; }
.svc-each { font-size: 12px; color: var(--text-muted); }

.svc-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.svc-total-label { font-size: 12.5px; color: var(--text-muted); }
.svc-total-value { font-size: 20px; font-weight: 700; }
.svc-warn { font-size: 12px; color: var(--warn); }

@media (max-width: 760px) {
  .svc-head { display: none; }
  .svc-row { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- spiffs */

.spiff-window {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.spiff-live { box-shadow: inset 2px 0 0 var(--ok); }

/* ---------------------------------------------------------------- payment details
   The revealed card sits in its own boxed, tinted block so it never reads as
   part of the ordinary order detail around it - on screen it should be obvious
   that something unusual is showing, and that it will go away again. */
.reveal {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--warn);
  border-radius: 12px;
  background: var(--warn-wash);
}
.reveal .detail-value.mono {
  font-size: 15px;
  letter-spacing: 0.04em;
}
p.warn {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--warn);
}

/* ------------------------------------------------------------- copy buttons

   Safwan runs every order by hand on Bundle Dealer, so a copy button sits on
   every field he has to retype. It stays faint until the row is hovered: a
   detail card with twenty of these lit up at once is unreadable, and the one
   he wants is always the one under the cursor. */

.copyable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}

/* Shown on hover, and always for whoever is using a keyboard. */
.detail:hover .copy-btn,
.copyable:hover .copy-btn,
tr:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }

.copy-btn:hover {
  color: var(--accent);
  background: var(--surface-2, rgba(255, 20, 100, .08));
  border-color: var(--accent);
}

.copy-btn.copied {
  opacity: 1;
  color: var(--ok, #16a34a);
  border-color: var(--ok, #16a34a);
}

@media (hover: none) {
  /* Nothing to hover on a phone, so they are simply always there. */
  .copy-btn { opacity: .65; }
}

/* The Submit an order action, which is not a page and should not look like
   one. Safwan asked for it first in the sidebar for agents and for himself,
   and it is the one thing in there that WRITES something. */
.nav-item.nav-action {
  margin-bottom: 10px;
  color: var(--white, #fff);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.nav-item.nav-action:hover {
  filter: brightness(1.08);
}

.nav-item.nav-action svg { stroke-width: 2.4; }