:root {
  --bg: #06182b;
  --surface: #0b2137;
  --surface-2: #102a44;
  --line: #27445c;
  --text: #f5f8fb;
  --muted: #9bb0c2;
  --brand-blue: #3b82f6;
  --brand-blue-bright: #60a5fa;
  --brand-blue-dark: #102f50;
  --brand-red: #f03c3c;
}

body { background: var(--bg); color: var(--text); }
.sidebar { background: #061526; }
.topbar { background: rgba(6, 24, 43, .94); }
.panel { background: linear-gradient(150deg, var(--surface), #081c30); }
.kpi-card,
.fleet-summary-card,
.fleet-machine-card,
.tablet-stage-button,
.setter-job-card,
.setter-machine-card,
.machine-selector-card { background: linear-gradient(145deg, #0e2943, #081b2e); }

.brand {
  height: 76px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  letter-spacing: .15em;
}
.brand-logo { display: block; width: 174px; height: auto; max-height: 30px; }
.brand small { margin: 0; color: #d9e6f0; font-size: 9px; letter-spacing: .22em; }
.brand.large { align-items: flex-start; gap: 10px; }
.brand.large .brand-logo { width: 231px; max-height: 40px; }
.brand.large small { font-size: 11px; }

.sidebar .nav-link:hover { background: #0d2944; color: #fff; }
.sidebar .nav-link.active {
  background: var(--brand-blue-dark);
  color: #fff;
  box-shadow: inset 3px 0 var(--brand-blue);
}
.nav-section,
.eyebrow,
.machine-code,
.fleet-manage-hint { color: var(--brand-blue-bright); }
.avatar { background: #173c61; color: #fff; }

.btn-primary {
  --bs-btn-bg: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-blue-bright);
  --bs-btn-hover-border-color: var(--brand-blue-bright);
  --bs-btn-hover-color: #06182b;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .18);
}
.tabs .nav-link.active { color: var(--brand-blue-bright); border-bottom-color: var(--brand-blue); }
.progress-bar { background: var(--brand-blue); }
.kpi-card:before { background: var(--accent, var(--brand-blue)); }
.hero-status { background: #0b2944; border-color: #285d8e; }

.language-switcher button:hover { color: #fff; background: #173c61; }
.language-switcher button.active { color: #fff; background: var(--brand-blue); }
.mobile-brand { color: var(--brand-red) !important; }
.login-form-wrap { background: #081b2e; }
.login-visual {
  background:
    radial-gradient(circle at 72% 40%, rgba(59, 130, 246, .22), transparent 31%),
    linear-gradient(rgba(2, 18, 34, .35), rgba(2, 18, 34, .9)),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(255, 255, 255, .025) 80px),
    repeating-linear-gradient(0deg, transparent 0, transparent 79px, rgba(255, 255, 255, .025) 80px);
}

.tablet-stage-button.active {
  border-color: var(--brand-blue);
  background: linear-gradient(145deg, #123d67, #0b2844);
  box-shadow: 0 0 22px rgba(59, 130, 246, .18);
}
.tablet-stage-button.active span { background: var(--brand-blue); color: #fff; }
.fleet-machine-card[data-machine-id]:hover,
.fleet-machine-card[data-machine-id]:focus-visible {
  border-color: var(--brand-blue);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28), 0 0 0 2px rgba(59, 130, 246, .2);
}

.job-reference-panel { border-color: #28547b; }
.job-document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.job-document-card,
.job-reference-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #081a2a;
  color: var(--text);
  text-decoration: none;
}
.job-document-card:hover,
.job-document-card:focus-visible,
.job-reference-inline:hover,
.job-reference-inline:focus-visible {
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .14);
}
.job-document-card.is-primary { border-color: var(--brand-blue); background: #0d2945; }
.job-document-card strong,
.job-document-card small,
.job-reference-inline strong,
.job-reference-inline small { display: block; }
.job-document-card small,
.job-reference-inline small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.job-document-card b,
.job-reference-inline b { color: var(--brand-blue-bright); font-size: 11px; white-space: nowrap; }
.job-document-symbol {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--brand-blue-dark);
  color: var(--brand-blue-bright);
  font-size: 12px;
  font-weight: 800;
}
.job-reference-inline { padding: 11px 12px; }
.job-reference-missing {
  padding: 10px 12px;
  border: 1px solid #725b22;
  border-radius: 8px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
}
.job-photo-reference-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.job-photo-reference-groups .machine-setting-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Operational colours remain semantic: healthy/running green, warnings amber, faults red. */
.status-running,
.status-online,
.status-normal,
.status-ready,
.status-completed { color: var(--green); }
.status-critical,
.status-fault,
.status-offline,
.status-cancelled { color: var(--brand-red); }

@media (max-width: 991.98px) {
  .brand-logo { width: 160px; }
  .job-document-grid { grid-template-columns: 1fr 1fr; }
  .job-photo-reference-groups { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .job-document-grid { grid-template-columns: 1fr; }
}