[hidden] {
  display: none !important;
}

:root {
  /* Dark defaults */
  --bg: #0b1727;
  --panel: #0c1a2b;
  --card: #111f32;
  --text: #e7eef9;
  --muted: #9bb0d3;
  --accent: #3cb4ff;
  --accent-strong: #2b8fd0;
  --border: #1e2d46;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

body.light {
  --bg: #d1d1d6;
  --panel: #eef3f8;
  --card: #ffffff;
  --text: #0c1a2b;
  --muted: #4b5b7a;
  --accent: #5fa8d3;
  --accent-strong: #5fa8d3;
  --border: #c3c9d6;
  --shadow: 0 14px 40px rgba(12, 26, 43, 0.12);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* Reserve navbar height before JS injects navbar HTML — prevents layout shift */
#navbar-placeholder {
  min-height: 73px;
}

/* Generic panels/cards used across pages */
.card,
.panel,
.order-container,
.order-form,
.settings-container,
.tonnes-calculator,
.load-card,
.completed-card,
.preset-panel,
.calendar-section,
.schedule-card {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

body.light .card,
body.light .panel,
body.light .order-container,
body.light .order-form,
body.light .settings-container,
body.light .tonnes-calculator,
body.light .load-card,
body.light .completed-card,
body.light .preset-panel,
body.light .calendar-section,
body.light .schedule-card {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
strong {
  color: var(--text);
}

.muted,
.eyebrow,
.subhead,
small,
p.muted {
  color: var(--muted);
}

input,
select,
textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

body.light input,
body.light select,
body.light textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.primary,
.nav-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #0a1422;
}

.ghost,
.nav-btn,
.nav-icon {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

body.light .ghost,
body.light .nav-btn,
body.light .nav-icon {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.badge,
.pill,
.chip {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.status-pill,
.status-dot {
  background: var(--panel);
  color: var(--text);
}

.map-card iframe {
  background: var(--card);
  border: 1px solid var(--border);
}

.back-arrow {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}