/* Direction: ISP operations console — deep navy panels, neon-blue edges, bright status colours */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #050f1c;
  --surface: #0a1a2e;
  --surface-2: #0f2540;
  --border: #1b3a5e;
  --border-strong: #505760;
  --ink: #eaf3fb;
  --muted: #9ab0c4;
  --accent: #1b86d8;
  --accent-hover: #3d98de;
  --accent-ink: #050f1c;
  --accent-text: #6cc4f3;
  --accent-strong: #3e99de;
  --accent-soft: #0a2945;
  --accent-border: #0f4571;
  --success: #158a41;
  --success-ink: #ffffff;
  --success-soft: #092a24;
  --success-strong: #49a46b;
  --warning: #b8620a;
  --warning-ink: #ffffff;
  --warning-soft: #2c2118;
  --warning-strong: #c37b30;
  --danger: #d11f2b;
  --danger-ink: #ffffff;
  --danger-soft: #32131f;
  --danger-strong: #de5e67;
  --chart-1: #1b86d8;
  --chart-2: #b780e5;
  --chart-3: #c9526e;
  --chart-4: #cf8419;
  --chart-5: #65900c;
  --chart-6: #2aafa7;

  --x-band: #0f3a5c;
  --x-on-photo: #ffffff;
  --x-violet: #6d3fd1;
  --x-paper: #ffffff;
  --x-paper-ink: #14202a;
  --x-rule: #d5dbe0;
  --x-glow: #1f9d55;
  --x-line: #1d5a9a;
  --gradient-bar: linear-gradient(90deg, #0b2a4d 0%, #071a31 55%, #061427 100%);
  --gradient-page: radial-gradient(1100px 500px at 85% -10%, #0b2a4d 0%, transparent 60%);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Bengali", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --font-sans: "Inter", "Noto Sans Bengali", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dcdddf;
  --border-strong: #b4b7bb;
  --ink: #050f1c;
  --muted: #696f77;
  --accent: #1b86d8;
  --accent-hover: #1772b8;
  --accent-ink: #050f1c;
  --accent-text: #1771b7;
  --accent-strong: #1568a8;
  --accent-soft: #dfeefa;
  --accent-border: #98c9ed;
  --success: #158a41;
  --success-ink: #ffffff;
  --success-soft: #e3f1e8;
  --success-strong: #117537;
  --warning: #b8620a;
  --warning-ink: #050f1c;
  --warning-soft: #f6ece2;
  --warning-strong: #9b5308;
  --danger: #d11f2b;
  --danger-ink: #ffffff;
  --danger-soft: #f9e4e6;
  --danger-strong: #c01d28;
  --chart-1: #1b86d8;
  --chart-2: #b37be0;
  --chart-3: #af3a59;
  --chart-4: #cf8419;
  --chart-5: #51750c;
  --chart-6: #08a199;
}

/* Console look: navy gradient page, glowing panel edges, bright pills */
body { background-image: var(--gradient-page); background-attachment: fixed; }

.topbar { background: var(--gradient-bar); border-bottom: 1px solid var(--x-line); }
.brandbar { background: var(--gradient-bar); border-bottom: 1px solid var(--x-line); }
.sidebar { border-right: 1px solid var(--x-line); }

.pill {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--x-line); border-radius: 0.6rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  padding: 0.35rem 0.7rem;
}

/* Panels get a thin blue edge like the reference */
main .card { border: 1px solid var(--x-line); box-shadow: 0 0 0 1px color-mix(in srgb, var(--x-line) 25%, transparent), 0 8px 24px -16px rgba(0, 0, 0, 0.6); }
main .card.panel-green { border-color: var(--x-glow); box-shadow: 0 0 14px -4px var(--x-glow); }

/* Tables: grid lines, navy header */
main table thead { background: var(--surface-2); color: var(--ink); }
main table thead th { border-right: 1px solid var(--border); }
main table thead th:last-child { border-right: 0; }
main table tbody td { border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
main table tbody td:last-child { border-right: 0; }
main table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 35%, transparent); }

.nav-link { transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.nav-link:active { transform: scale(0.98); }
.nav-on { box-shadow: 0 0 16px -2px var(--accent); }

/* Row action buttons in the customer tables */
.act {
  display: inline-flex;
  height: 2rem;
  min-width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: transform 0.12s ease, filter 0.12s ease;
}
button.act, a.act { cursor: pointer; }
button.act:hover, a.act:hover { filter: brightness(1.12); }
button.act:active, a.act:active { transform: scale(0.94); }
button.act:focus-visible, a.act:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.act-wide { gap: 0.25rem; padding: 0 0.6rem; font-size: 0.75rem; font-weight: 600; }

tr.row-selected { background: var(--accent-soft) !important; }
tr.row-selected td { border-color: var(--accent-border); }

#truck-toggle { border-radius: 999px; }
#truck-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }

/* Truck Mode: larger text and tap targets for use on the road */
html.truck body { font-size: 1.125rem; }
html.truck .btn, html.truck .input, html.truck .select { min-height: 3.1rem; }
html.truck .act { height: 2.8rem; min-width: 2.8rem; }
html.truck nav a { padding-top: 0.9rem; padding-bottom: 0.9rem; }

/* Printing the collection report prints only the report sheet */
@media print {
  body { background: none; }
  body * { visibility: hidden; }
  #report-sheet, #report-sheet * { visibility: visible; }
  #report-sheet { position: absolute; left: 0; top: 0; width: 100%; min-width: 0; }
  #report-sheet tr { break-inside: avoid; }
}

@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.nudge { animation: nudge 0.3s ease 2; }
html.reduced-motion .nudge { animation: none; }