:root {
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fa;
  --color-border: #dee2e6;
  --color-border-strong: #333333;
  --color-border-mid: #666666;
  --color-text: #1f2937;
  --color-muted: #6c757d;
  --color-heading: #111827;
  --color-link: #0d6efd;
  --color-link-hover: #0a58ca;
  --color-accent: #2c6be0;
  --color-accent-contrast: #ffffff;
  --color-shadow: rgba(0,0,0,0.04);
  --color-shadow-strong: rgba(0,0,0,0.08);
  --jobcard-title-color: #1f2937;
  --body-bg-image: url("../images/light mode background.jpg");
  --frosted-bg: rgba(255, 255, 255, 0.78);
  --frosted-border: rgba(255, 255, 255, 0.6);
  --frosted-title-bg: rgba(255, 255, 255, 0.72);
  --frosted-blur: 10px;
  --frosted-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  --color-input-bg: #ffffff;
  --color-input-border: #ced4da;
  --color-input-text: #1f2937;
  --color-input-placeholder: #6c757d;
  --header-bg: #f8f9fa;

  --status-received-bg: #000000;
  --status-received-text: #ffffff;
  --status-repaired-bg: #fff3b0;
  --status-repaired-text: #000000;
  --status-scrapped-bg: #e74c3c;
  --status-scrapped-text: #ffffff;
  --status-quoted-bg: #add8e6;
  --status-quoted-text: #000000;
  --status-delivered-bg: #56b870;
  --status-delivered-text: #000000;
  --status-assessed-bg: #26A69A;
  --status-assessed-text: #ffffff;
  --status-order-rcvd-bg: #1a56c4;
  --status-order-rcvd-text: #ffffff;
  --status-germany-repair-bg: transparent;
  --status-germany-repair-text: #000000;

  --status-default-open: #4aa3ff;
  --status-default-closed: #1f6fd1;
  --status-received-open: #000000;
  --status-received-closed: #2d2d2d;
  --status-assessed-open: #2bb5a8;
  --status-assessed-closed: #1e8c82;
  --status-quoted-open: #9bd0ff;
  --status-quoted-closed: #6fb8f5;
  --status-order-rcvd-open: #4f96dd;
  --status-order-rcvd-closed: #2c6be0;
  --status-repaired-open: #fff3b0;
  --status-repaired-closed: #ffd76e;
  --status-scrapped-open: #f28b82;
  --status-scrapped-closed: #e74c3c;
  --status-delivered-open: #7fd49b;
  --status-delivered-closed: #56b870;

  --chart-teal: #2bb3b1;
  --chart-blue: #2c6be0;
  --chart-orange: #f4a340;
  --chart-purple: #9b6dd1;
  --chart-green: #7bb07b;
  --chart-red: #f06d6d;
  --chart-gray: #b0b4ba;
  --chart-received: #000000;
  --chart-repaired: #fff3b0;
  --chart-scrapped: #e74c3c;
  --chart-received-text: #ffffff;
  --chart-repaired-text: #3f2f00;
  --chart-scrapped-text: #ffffff;
  --chart-quoted: #9bd0ff;
  --chart-assessed: #26A69A;
  --chart-tech-repaired: #fff645;
  --chart-delivered: #56b870;
  --chart-order-rcvd: #2c6be0;
  --chart-line-text: #5b6470;
  --chart-line-series-a: #000000;
  --chart-line-series-b: #6b4f00;
  --chart-line-series-c: #e74c3c;
  --chart-dot-stroke: #ffffff;
  --chart-grid: rgba(148, 163, 184, 0.25);
  --chart-track-bg: #eef1f4;
  --chart-empty-bg: #f8f9fa;
  --chart-tooltip-bg: rgba(255, 255, 255, 0.85);
  --chart-tooltip-border: #dee2e6;
  --analytics-seg-a: #1e88e5;
  --analytics-seg-b: #fb8c00;
  --analytics-seg-c: #fdd835;
  --analytics-seg-d: #c62828;
  --analytics-seg-e: #43a047;
  --analytics-tech-a: #1e88e5;
  --analytics-tech-b: #fb8c00;
  --analytics-tech-c: #fdd835;
  --analytics-tech-d: #c62828;
  --analytics-tech-e: #6a1b9a;
  --analytics-tech-f: #00897b;
  --analytics-tech-g: #5e35b1;

  --dashboard-tech-active-bg: #3366FF;
  --table-hover-filter: brightness(0.95);
}

/* Force light theme for export/print snapshots so downloads always have white background */
.export-light-theme {
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fa;
  --color-border: #dee2e6;
  --color-border-strong: #333333;
  --color-border-mid: #666666;
  --color-text: #1f2937;
  --color-muted: #6c757d;
  --color-heading: #111827;
  --color-link: #0d6efd;
  --color-link-hover: #0a58ca;
  --color-accent: #2c6be0;
  --color-accent-contrast: #ffffff;
  --color-shadow: rgba(0,0,0,0.04);
  --color-shadow-strong: rgba(0,0,0,0.08);
  --jobcard-title-color: #1f2937;
  --color-input-bg: #ffffff;
  --color-input-border: #ced4da;
  --color-input-text: #1f2937;
  --color-input-placeholder: #6c757d;
  --header-bg: #f8f9fa;
  /* Dashboard cards and chart containers use frosted vars – force solid white for export */
  --frosted-bg: #ffffff;
  --frosted-border: #dee2e6;
  --frosted-title-bg: #ffffff;
  --frosted-blur: 0px;
  --frosted-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  /* Chart empty state and tooltips */
  --chart-empty-bg: #f8f9fa;
  --chart-tooltip-bg: rgba(255, 255, 255, 0.95);
  --chart-tooltip-border: #dee2e6;
  --chart-grid: rgba(148, 163, 184, 0.25);
  --chart-line-text: #5b6470;
  --chart-line-series-a: #000000;
  --chart-line-series-b: #6b4f00;
  --chart-line-series-c: #e74c3c;
  --chart-dot-stroke: #ffffff;
  --status-received-bg: #000000;
  --status-received-text: #ffffff;
  --status-repaired-bg: #fff3b0;
  --status-repaired-text: #000000;
  --status-scrapped-bg: #e74c3c;
  --status-scrapped-text: #ffffff;
  --status-quoted-bg: #add8e6;
  --status-quoted-text: #000000;
  --status-delivered-bg: #56b870;
  --status-delivered-text: #000000;
  --status-assessed-bg: #26A69A;
  --status-assessed-text: #ffffff;
  --status-order-rcvd-bg: #1a56c4;
  --status-order-rcvd-text: #ffffff;
  --chart-received: #000000;
  --chart-repaired: #fff3b0;
  --chart-scrapped: #e74c3c;
  --chart-received-text: #ffffff;
  --chart-repaired-text: #3f2f00;
  --chart-scrapped-text: #ffffff;
}

/* Users: highlight row when opened via deep link */
tr.user-row.is-highlight td {
  background: rgba(44, 107, 224, 0.10) !important;
  transition: background 250ms ease-in-out;
}

html[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-surface: #111827;
  --color-surface-muted: #0f172a;
  --color-border: #283347;
  --color-border-strong: #3b455a;
  --color-border-mid: #374151;
  --color-text: #e5e7eb;
  --color-muted: #94a3b8;
  --color-heading: #f9fafb;
  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;
  --color-accent: #60a5fa;
  --color-accent-contrast: #0b1220;
  --color-shadow: rgba(0,0,0,0.4);
  --color-shadow-strong: rgba(0,0,0,0.6);
  --jobcard-title-color: #ffffff;
  --body-bg-image: url("../images/dark mode background.jpg");
  --frosted-bg: rgba(15, 23, 42, 0.72);
  --frosted-border: rgba(148, 163, 184, 0.25);
  --frosted-title-bg: rgba(15, 23, 42, 0.6);
  --frosted-blur: 12px;
  --frosted-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  --color-input-bg: #0f172a;
  --color-input-border: #374151;
  --color-input-text: #e5e7eb;
  --color-input-placeholder: #94a3b8;
  --header-bg: #0f172a;

  --status-received-bg: #334155;
  --status-received-text: #e5e7eb;
  --status-repaired-bg: #5c4b00;
  --status-repaired-text: #fef3c7;
  --status-scrapped-bg: #7f1d1d;
  --status-scrapped-text: #fee2e2;
  --status-quoted-bg: #1e3a8a;
  --status-quoted-text: #dbeafe;
  --status-delivered-bg: #065f46;
  --status-delivered-text: #d1fae5;
  --status-assessed-bg: #26A69A;
  --status-assessed-text: #ffffff;
  --status-order-rcvd-bg: #0891b2;
  --status-order-rcvd-text: #ffffff;
  --status-germany-repair-bg: #4c1d95;
  --status-germany-repair-text: #ede9fe;

  --status-default-open: #2dd4bf;
  --status-default-closed: #2563eb;
  --status-received-open: #475569;
  --status-received-closed: #1f2937;
  --status-assessed-open: #2bb5a8;
  --status-assessed-closed: #1e8c82;
  --status-quoted-open: #60a5fa;
  --status-quoted-closed: #3b82f6;
  --status-order-rcvd-open: #22d3ee;
  --status-order-rcvd-closed: #0891b2;
  --status-repaired-open: #f59e0b;
  --status-repaired-closed: #d97706;
  --status-scrapped-open: #f87171;
  --status-scrapped-closed: #dc2626;
  --status-delivered-open: #34d399;
  --status-delivered-closed: #059669;

  --chart-teal: #5eead4;
  --chart-blue: #60a5fa;
  --chart-orange: #fbbf24;
  --chart-purple: #c4b5fd;
  --chart-green: #6ee7b7;
  --chart-red: #f87171;
  --chart-gray: #94a3b8;
  --chart-received: #94a3b8;
  --chart-repaired: #f59e0b;
  --chart-scrapped: #f87171;
  --chart-received-text: #0b1220;
  --chart-repaired-text: #0b1220;
  --chart-scrapped-text: #0b1220;
  --chart-quoted: #60a5fa;
  --chart-assessed: #26A69A;
  --chart-tech-repaired: #FFFDD0;
  --chart-delivered: #34d399;
  --chart-order-rcvd: #22d3ee;
  --chart-line-text: #cbd5f5;
  --chart-line-series-a: #e2e8f0;
  --chart-line-series-b: #facc15;
  --chart-line-series-c: #fca5a5;
  --chart-dot-stroke: #0b1220;
  --chart-grid: rgba(148, 163, 184, 0.3);
  --chart-track-bg: #1f2937;
  --chart-empty-bg: #0f172a;
  --chart-tooltip-bg: rgba(15, 23, 42, 0.92);
  --chart-tooltip-border: #1f2937;
  --analytics-seg-a: #60a5fa;
  --analytics-seg-b: #f59e0b;
  --analytics-seg-c: #facc15;
  --analytics-seg-d: #f87171;
  --analytics-seg-e: #34d399;
  --analytics-tech-a: #60a5fa;
  --analytics-tech-b: #f59e0b;
  --analytics-tech-c: #facc15;
  --analytics-tech-d: #f87171;
  --analytics-tech-e: #c4b5fd;
  --analytics-tech-f: #2dd4bf;
  --analytics-tech-g: #a5b4fc;

  --dashboard-tech-active-bg: #3366FF;
  --table-hover-filter: brightness(1.08);
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--color-bg);
  background-image: var(--body-bg-image);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: var(--color-text);
  line-height: 1.5;
}

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
}

.app-loader__animation {
  width: 120px;
  height: 120px;
}

.app-loader__text {
  font-size: 0.85rem;
  color: #1f2937;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html[data-theme="dark"] .app-loader__panel {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
}

html[data-theme="dark"] .app-loader__text {
  color: #e5e7eb;
}

.confirmation-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirmation-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3);
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.confirmation-overlay__animation {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.confirmation-overlay__text {
  font-size: 1.25rem;
  color: #1f2937;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.confirmation-overlay__subtext {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Ensure modals and backdrop appear above app loader (z-index 9999) so modal is visible and responsive */
.modal {
  z-index: 10050 !important;
}
.modal-backdrop {
  z-index: 10045 !important;
}

html[data-theme="dark"] .confirmation-overlay__panel {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.4);
}

html[data-theme="dark"] .confirmation-overlay__text {
  color: #e5e7eb;
}

html[data-theme="dark"] .confirmation-overlay__subtext {
  color: #9ca3af;
}

header {
  box-shadow: 0 6px 18px var(--color-shadow-strong);
}

/* Navbar: use theme background and ensure brand/toggler are theme-aware */
.site-header .navbar {
  background-color: var(--header-bg) !important;
}

.site-header .navbar-brand {
  color: var(--color-text) !important;
}

.site-header .navbar-toggler {
  color: var(--color-text);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.25);
}

.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Collapsed nav: stacked menu with touch-friendly targets */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
  }

  .site-header .navbar-nav .nav-item {
    border-bottom: 1px solid var(--color-border);
  }

  .site-header .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  .site-header .navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 1rem;
  }

  .site-header .navbar-nav .nav-settings-link {
    padding: 12px 16px;
  }
}

main.container {
  padding-top: 12px;
  padding-bottom: 28px;
}

.page-frosted-shell {
  min-height: calc(100vh - 140px);
  margin: 8px auto 28px;
  padding: 20px 28px;
  background: var(--frosted-bg);
  border-top: 1px solid var(--frosted-border);
  border-bottom: 1px solid var(--frosted-border);
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  max-width: 1200px;
  width: calc(100% - 32px);
  border-radius: 14px;
  overflow-x: hidden;
}

.auth-screen .page-frosted-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 180px);
}

.auth-screen main.container {
  width: 100%;
}

.auth-screen .row.justify-content-center {
  width: 100%;
}

.auth-screen .card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-card {
  border-radius: 16px;
  border-width: 1px;
}

.auth-logo {
  display: flex;
  justify-content: center;
  padding: 24px 0 4px;
}

.auth-logo img {
  height: 80px;
  width: auto;
}

html[data-theme="dark"] .auth-logo img {
  filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.6)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}

.auth-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.auth-link {
  color: var(--color-link);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-theme-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 24px 8px;
  margin-top: -8px;
}

.auth-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.auth-theme-toggle .form-check-input {
  width: 2.5em;
  height: 1.4em;
  cursor: pointer;
  margin-top: 0;
}

.auth-theme-toggle .form-check-label {
  font-size: 0.85rem;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
  font-weight: 500;
  transition: color 0.2s ease;
}

.auth-theme-toggle .form-check-label:hover {
  color: var(--color-text);
}

.auth-theme-toggle .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.auth-theme-toggle .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.25);
  border-color: var(--color-accent);
}

.unassigned-screen .page-frosted-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 180px);
}

.unassigned-screen main.container {
  width: 100%;
}

.unassigned-card {
  border-radius: 16px;
  border-width: 1px;
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.unassigned-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.unassigned-message {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.password-field {
  position: relative;
}

/* Wrapper so the eye icon aligns to the input row when helper text or checklist is below */
.password-input-wrap {
  position: relative;
}

.password-field .form-control,
.password-input-wrap .form-control {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 4px;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.password-toggle:hover {
  color: var(--color-text);
}

.password-toggle.is-active {
  color: var(--color-accent);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.password-field .form-text {
  color: var(--color-muted);
}

/* Live password strength checklist (e.g. force reset page) */
.password-strength-checklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.password-strength-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.password-strength-item .password-strength-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.password-strength-item.is-met .password-strength-icon {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.password-strength-item.is-met .password-strength-icon::after {
  content: "\2713";
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1;
}

.password-strength-item.is-met {
  color: var(--color-text);
}

.dashboard-welcome {
  font-size: 0.95rem;
  font-weight: 600;
}

.page-frosted-shell .container {
  max-width: calc(100% - 200px);
}

/* Mobile: avoid compositing bugs (backdrop-filter / fixed bg) that cause content to disappear or only show background when scrolling */
/* Mobile: prevent scrolling off screen – keep viewport fixed; tables scroll left/right inside their container (like Dashboard) */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .page-frosted-shell {
    margin: 0 0 20px;
    padding: 16px 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-frosted-shell .container,
  main.container {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* All screens: tables scroll horizontally inside .table-responsive instead of scrolling the whole page */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  /* Contain cards so only .table-responsive inside them scrolls horizontally */
  .page-frosted-shell .card {
    min-width: 0;
    max-width: 100%;
  }
  .page-frosted-shell .card-body {
    min-width: 0;
  }

  /* Solid backgrounds instead of backdrop-filter so cards and nav don't half-render or vanish on scroll */
  .page-frosted-shell .frosted-panel,
  .page-frosted-shell .card,
  .page-frosted-shell .dashboard-card,
  .page-frosted-shell .dashboard-kpi-card,
  .page-frosted-shell .dashboard-toolbar,
  .page-frosted-shell .dashboard-export,
  .page-frosted-shell .table-responsive,
  .page-frosted-shell main h4,
  .page-frosted-shell main h5,
  .page-frosted-shell main h6,
  .page-frosted-shell #analytics-panel-title {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Prevent navbar collapse from clipping menu items */
  .site-header,
  .site-header .navbar-collapse {
    overflow: visible;
  }

  /* Loader: avoid backdrop-filter so it doesn't leave a compositing layer that affects painting after hide */
  .app-loader {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Extra-small phones: minimal side space so content uses full width and user scrolls less */
@media (max-width: 576px) {
  .page-frosted-shell {
    margin: 0 4px 12px;
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  main.container {
    padding-left: 6px;
    padding-right: 6px;
  }

  .confirmation-overlay__panel {
    margin: 0 10px;
    padding: 20px 16px;
  }
}

.nav-link {
  color: var(--color-text);
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 10px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-heading);
  background: var(--color-surface-muted);
}

.nav-link.is-active {
  color: var(--color-accent);
  background: rgba(13, 110, 253, 0.12);
}

.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 10px 20px;
}

.btn-primary {
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
}

.btn-primary:hover {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.auth-screen .btn-primary {
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.form-control,
.form-select,
.input-group-text {
  border-radius: 8px;
  border-color: var(--color-input-border);
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.25);
}

/* Modern auth input styling */
.auth-form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.01em;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}

.auth-input-modern {
  padding-left: 44px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 0.95rem;
  border: 1.5px solid var(--color-input-border);
  background-color: var(--color-input-bg);
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.auth-input-modern::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

.auth-input-modern:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.auth-input-modern:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  outline: none;
  background-color: var(--color-input-bg);
}

.auth-input-modern:focus + .auth-input-icon,
.auth-input-wrapper:focus-within .auth-input-icon {
  color: var(--color-accent);
}

html[data-theme="dark"] .auth-input-modern {
  border-color: rgba(148, 163, 184, 0.3);
  background-color: rgba(15, 23, 42, 0.6);
}

html[data-theme="dark"] .auth-input-modern:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background-color: rgba(15, 23, 42, 0.8);
}

html[data-theme="dark"] .auth-input-modern:focus {
  border-color: var(--color-accent);
  background-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Auth forms without a leading icon (e.g. register) */
.auth-field-control {
  padding: 12px 16px;
  font-size: 0.95rem;
  border: 1.5px solid var(--color-input-border);
  background-color: var(--color-input-bg);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.auth-field-control:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.auth-field-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  outline: none;
  background-color: var(--color-input-bg);
}

select.auth-field-control,
.form-select.auth-field-control {
  cursor: pointer;
}

html[data-theme="dark"] .auth-field-control {
  border-color: rgba(148, 163, 184, 0.3);
  background-color: rgba(15, 23, 42, 0.6);
}

html[data-theme="dark"] .auth-field-control:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background-color: rgba(15, 23, 42, 0.8);
}

html[data-theme="dark"] .auth-field-control:focus {
  border-color: var(--color-accent);
  background-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.auth-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.85rem;
  margin-top: 0.15rem;
}

.auth-section-title:not(:first-of-type) {
  margin-top: 1.65rem;
}

.auth-register-password-hint {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.45;
  margin-top: 0.5rem;
}

.auth-register-options {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: rgba(148, 163, 184, 0.07);
}

html[data-theme="dark"] .auth-register-options {
  background: rgba(30, 41, 59, 0.6);
}

.auth-register-footer {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.input-group-text {
  color: var(--color-muted);
}

.frosted-panel,
.card,
.dashboard-card,
.dashboard-kpi-card,
.dashboard-filter-card,
.dashboard-toolbar,
.dashboard-export,
.table-responsive {
  background: var(--frosted-bg);
  border-color: var(--frosted-border);
  color: var(--color-text);
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.table-responsive {
  border-radius: 8px;
  padding: 6px;
}

.card-header {
  background: transparent;
  border-color: var(--frosted-border);
  color: var(--color-text);
}

main h4,
main h5,
main h6,
#analytics-panel-title {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--frosted-title-bg);
  border: 1px solid var(--frosted-border);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.jobcard-title {
  color: var(--jobcard-title-color);
}

/* Preserve line breaks in multi-line jobcard notes (CRLF / 
 decoded to newlines) */
.jobcard-field-text {
  white-space: pre-wrap;
}

/* Jobcard screen: disable backdrop-filter on desktop to reduce compositing cost and fix lag/stutter when opening a jobcard */
.jobcards-screen .card,
.jobcards-screen .card-header,
.jobcards-screen main h4,
.jobcards-screen main h5,
.jobcards-screen main h6 {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light mode: jobcard app bars (card headers) – blue, readable, modern */
html:not([data-theme="dark"]) .jobcards-screen .card-header {
  background: linear-gradient(135deg, #1a56c4 0%, #2563eb 100%) !important;
  border-color: #1550b8 !important;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html:not([data-theme="dark"]) .jobcards-screen .card-header h1,
html:not([data-theme="dark"]) .jobcards-screen .card-header h2,
html:not([data-theme="dark"]) .jobcards-screen .card-header h3,
html:not([data-theme="dark"]) .jobcards-screen .card-header h4,
html:not([data-theme="dark"]) .jobcards-screen .card-header h5,
html:not([data-theme="dark"]) .jobcards-screen .card-header h6 {
  color: #ffffff !important;
  font-weight: 600;
  background: none !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
html:not([data-theme="dark"]) .jobcards-screen .card-header .text-muted {
  color: rgba(255, 255, 255, 0.92) !important;
}
html:not([data-theme="dark"]) .jobcards-screen .card-header .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.85);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
html:not([data-theme="dark"]) .jobcards-screen .card-header .btn-outline-secondary:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .jobcards-screen .bg-primary h1,
html[data-theme="dark"] .jobcards-screen .bg-primary h2,
html[data-theme="dark"] .jobcards-screen .bg-primary h3,
html[data-theme="dark"] .jobcards-screen .bg-primary h4,
html[data-theme="dark"] .jobcards-screen .bg-primary h5,
html[data-theme="dark"] .jobcards-screen .bg-primary h6 {
  color: #ffffff;
}

html[data-theme="dark"] .jobcards-screen .card-header {
  background-color: #7fb8b5 !important;
  border-color: #7fb8b5 !important;
  color: #ffffff;
}

html[data-theme="dark"] .jobcards-screen .card-header h1,
html[data-theme="dark"] .jobcards-screen .card-header h2,
html[data-theme="dark"] .jobcards-screen .card-header h3,
html[data-theme="dark"] .jobcards-screen .card-header h4,
html[data-theme="dark"] .jobcards-screen .card-header h5,
html[data-theme="dark"] .jobcards-screen .card-header h6 {
  color: #ffffff;
}

/* ----- New Jobcard form (light + dark, all roles) ----- */
.jobcard-new-screen .page-frosted-shell {
  max-width: 1200px;
}

.jobcard-new-form {
  max-width: 900px;
  margin: 0 auto;
}

.jobcard-new-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: -0.5rem;
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 14px;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.jobcard-new-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--jobcard-title-color);
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.01em;
}

.jobcard-new-subtitle {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.45;
  max-width: 42rem;
}

.jobcard-new-form-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.jobcard-new-card {
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 14px;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  overflow: hidden;
}

.jobcard-new-card-header {
  background: var(--frosted-title-bg);
  border-bottom: 1px solid var(--frosted-border);
  padding: 0.85rem 1.25rem;
}

/* Light mode: app bar style for section headers (match dark mode’s solid bar look) */
html:not([data-theme="dark"]) .jobcard-new-screen .jobcard-new-card-header {
  background: var(--color-accent);
  border: none;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  color: var(--color-accent-contrast);
  box-shadow: 0 2px 8px rgba(44, 107, 224, 0.25);
}

html:not([data-theme="dark"]) .jobcard-new-screen .jobcard-new-section-title {
  color: #ffffff;
  font-weight: 600;
}

.jobcard-new-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  letter-spacing: 0.02em;
}

.jobcard-new-card .card-body {
  padding: 1.25rem;
}

.jobcard-new-card .form-label {
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 0.4rem;
}

.jobcard-new-hint {
  color: var(--color-muted) !important;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Product type: theme-aware helper copy (new jobcard, view, edit) */
.jobcard-product-type-help {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.jobcard-product-type-help strong {
  color: var(--color-text);
  font-weight: 600;
}

.jobcard-product-type-help a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jobcard-product-type-help a:hover {
  color: var(--color-link-hover);
}

.jobcard-new-card .form-control[readonly],
.jobcard-new-card .form-control.bg-transparent {
  background-color: var(--color-surface-muted) !important;
  border-color: var(--color-border);
  color: var(--color-text);
  cursor: default;
}

.jobcard-new-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.jobcard-new-submit {
  font-weight: 600;
}

/* Dark mode: New Jobcard form */
html[data-theme="dark"] .jobcard-new-card-header {
  background: var(--frosted-title-bg);
  border-bottom-color: var(--frosted-border);
}

html[data-theme="dark"] .jobcard-new-section-title {
  color: var(--color-heading);
}

html[data-theme="dark"] .jobcard-new-card .form-label {
  color: var(--color-text);
}

html[data-theme="dark"] .jobcard-new-card .form-control[readonly],
html[data-theme="dark"] .jobcard-new-card .form-control.bg-transparent {
  background-color: var(--color-surface-muted) !important;
  border-color: var(--color-border);
  color: var(--color-text);
}

.jobcards-screen main.container {
  /* Give the jobcards list more breathing room to avoid horizontal scroll */
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Jobcards list: widen the frosted page shell itself */
.jobcards-screen .page-frosted-shell {
  max-width: 100%;
  width: calc(100% - 80px);
}

/* Jobcards list: don't artificially shrink the inner container */
.jobcards-screen .page-frosted-shell .container {
  max-width: 100%;
}

/* Jobcards list: clear search button inside search bar */
.jobcards-screen .jobcard-search-clear {
  min-width: 2.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

/* Jobcards list: let the frosted table wrapper use full width */
.jobcards-screen .table-responsive {
  /* Make frosted background 20px wider than table (10px each side) */
  padding: 0 10px;
}

@media (max-width: 768px) {
  /* Lock document width so the whole page cannot be scrolled horizontally (only the table scrolls inside its box) */
  body.jobcards-screen {
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-clip-margin: 0;
    position: relative;
    /* Prevent touch devices from panning the whole page horizontally */
    touch-action: pan-y pinch-zoom;
  }
  /* Constrain header/footer on jobcards so they never extend viewport */
  body.jobcards-screen .site-header,
  body.jobcards-screen .site-header .container,
  body.jobcards-screen .page-frosted-shell,
  body.jobcards-screen footer.container {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Prevent jobcards list from scrolling off screen: lock shell and main to viewport; only table scrolls inside .table-responsive */
  .jobcards-screen .page-frosted-shell {
    width: calc(100% - 12px);
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .jobcards-screen main.container {
    padding-left: 6px;
    padding-right: 6px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .jobcards-screen .table-responsive {
    padding: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* Keep horizontal scroll inside this element only; no overscroll leaking to page */
    overscroll-behavior-x: contain;
    /* Ensure this box is the scroll container and doesn’t expand layout */
    contain: inline-size;
  }

  /* Jobcards toolbar: stack title, pill, total and search form */
  .jobcards-screen .mb-3 .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .jobcards-screen #jobcard-search-form {
    flex-wrap: wrap;
    width: 100%;
  }
  .jobcards-screen .jobcard-search-wrapper {
    max-width: 100% !important;
    flex: 1 1 100%;
  }
  .jobcards-screen #jobcard-search-form .form-select,
  .jobcards-screen #jobcard-search-form .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Jobcards table: sticky first column when scrolling horizontally on small screens */
@media (max-width: 991.98px) {
  .jobcards-screen .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
  .jobcards-screen .jobcards-table thead th:first-child,
  .jobcards-screen .jobcards-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 0;
    background: var(--color-surface-muted);
    border-right: 2px solid var(--color-border-strong);
    box-shadow: 6px 0 10px var(--color-shadow-strong);
    font-weight: 600;
    color: var(--color-heading);
  }
  .jobcards-screen .jobcards-table thead th:first-child {
    background: var(--color-surface-muted);
    border-right: 2px solid var(--color-border-strong);
    box-shadow: 6px 0 10px var(--color-shadow-strong);
  }
  .jobcards-screen .jobcards-table tbody tr.status-row td:first-child {
    background: inherit;
    color: inherit;
    font-weight: 600;
    border-right: 2px solid rgba(0, 0, 0, 0.22);
    box-shadow: 6px 0 10px var(--color-shadow-strong);
  }
  html[data-theme="dark"] .jobcards-screen .jobcards-table tbody tr.status-row td:first-child {
    border-right-color: rgba(255, 255, 255, 0.28);
  }
}

/* Jobcard: previous-job lists should follow app theme vars (Bootstrap list-group defaults are light-only here) */
.jobcards-screen .list-group-item {
  background: transparent;
  color: var(--color-text);
  border-color: var(--frosted-border);
}

.jobcards-screen .list-group-item-action:hover,
.jobcards-screen .list-group-item-action:focus {
  background: rgba(44, 107, 224, 0.08);
  color: var(--color-text);
}

html[data-theme="dark"] .jobcards-screen .list-group-item-action:hover,
html[data-theme="dark"] .jobcards-screen .list-group-item-action:focus {
  background: rgba(96, 165, 250, 0.12);
}

.jobcards-screen .jobcard-meta-badge {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 600;
}

/* Jobcards list: sortable table headers (modern + clear) */
.jobcards-screen .sort-th {
  white-space: nowrap;
}

.jobcards-screen .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 650;
  letter-spacing: 0.01em;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.jobcards-screen .sort-link:hover {
  background: rgba(44, 107, 224, 0.08);
}

.jobcards-screen .sort-th.is-sorted .sort-link {
  background: rgba(44, 107, 224, 0.10);
  box-shadow: 0 0 0 1px rgba(44, 107, 224, 0.20) inset;
}

.jobcards-screen .sort-th.is-sorted .sort-label {
  color: var(--color-accent);
}

.jobcards-screen .sort-glyph {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 0;
  opacity: 0.45;
}

.jobcards-screen .sort-th.is-sorted .sort-glyph {
  opacity: 0.90;
}

.jobcards-screen .sort-chevron {
  width: 12px;
  height: 12px;
  color: currentColor;
  opacity: 0.55;
}

.jobcards-screen .sort-chevron.is-on {
  color: var(--color-accent);
  opacity: 1;
}

.jobcards-screen .sort-pill {
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-weight: 600;
}

html[data-theme="dark"] .jobcards-screen .sort-link:hover {
  background: rgba(96, 165, 250, 0.12);
}

html[data-theme="dark"] .jobcards-screen .sort-th.is-sorted .sort-link {
  background: rgba(96, 165, 250, 0.14);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.26) inset;
}

/* Jobcards list: compact table that fits without overlap */
.jobcards-screen .jobcards-table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.875rem;
}

.jobcards-screen .jobcards-table th {
  padding: 8px 8px !important; /* override .table-header-bold th padding */
  font-size: 0.84rem;
  overflow: hidden; /* prevent header overlap */
}

.jobcards-screen .jobcards-table td {
  padding: 8px 8px;
  vertical-align: middle;
  overflow: hidden; /* prevent cell overlap */
}

/* Allow long fields to wrap inside their column (instead of forcing horizontal scroll) */
.jobcards-screen .jobcards-table td:nth-child(2),
.jobcards-screen .jobcards-table td:nth-child(3),
.jobcards-screen .jobcards-table td:nth-child(6),
.jobcards-screen .jobcards-table td:nth-child(7),
.jobcards-screen .jobcards-table td:nth-child(9) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Keep compact columns on one line */
.jobcards-screen .jobcards-table td:nth-child(1),
.jobcards-screen .jobcards-table td:nth-child(4),
.jobcards-screen .jobcards-table td:nth-child(5),
.jobcards-screen .jobcards-table td:nth-child(10) {
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Headers: never show "..." truncation dots */
.jobcards-screen .jobcards-table th:nth-child(1),
.jobcards-screen .jobcards-table th:nth-child(4),
.jobcards-screen .jobcards-table th:nth-child(5),
.jobcards-screen .jobcards-table th:nth-child(8),
.jobcards-screen .jobcards-table th:nth-child(10) {
  white-space: nowrap;
  text-overflow: clip;
}

/* Column widths tuned for the jobcards page container (~1400px max) */
.jobcards-screen .jobcards-table thead th:nth-child(1) { width: 92px; }   /* Job # */
.jobcards-screen .jobcards-table thead th:nth-child(2) { width: 175px; }  /* Customer */
.jobcards-screen .jobcards-table thead th:nth-child(3) { width: 250px; }  /* Product Type */
.jobcards-screen .jobcards-table thead th:nth-child(4) { width: 100px; }  /* Opened */
.jobcards-screen .jobcards-table thead th:nth-child(5) { width: 100px; }  /* Repaired */
.jobcards-screen .jobcards-table thead th:nth-child(6) { width: 130px; }  /* Assessed By */
.jobcards-screen .jobcards-table thead th:nth-child(7) { width: 130px; }  /* Repaired By */
.jobcards-screen .jobcards-table thead th:nth-child(8) { width: 100px; }  /* Status (with urgency tag) */
.jobcards-screen .jobcards-table thead th:nth-child(9) { width: 180px; }  /* Days in Current Status */
.jobcards-screen .jobcards-table thead th:nth-child(10) { width: 90px; }  /* Actions (admin only) */

/* Mobile: narrower columns so table is less wide and user scrolls less */
@media (max-width: 576px) {
  .jobcards-screen .jobcards-table thead th:nth-child(1) { width: 84px; }   /* Job # a bit wider on mobile */
  .jobcards-screen .jobcards-table thead th:nth-child(2) { width: 100px; }
  .jobcards-screen .jobcards-table thead th:nth-child(3) { width: 130px; }
  .jobcards-screen .jobcards-table thead th:nth-child(4) { width: 68px; }
  .jobcards-screen .jobcards-table thead th:nth-child(5) { width: 68px; }
  .jobcards-screen .jobcards-table thead th:nth-child(6) { width: 88px; }
  .jobcards-screen .jobcards-table thead th:nth-child(7) { width: 88px; }
  .jobcards-screen .jobcards-table thead th:nth-child(8) { width: 72px; }
  .jobcards-screen .jobcards-table thead th:nth-child(9) { width: 100px; }
  .jobcards-screen .jobcards-table thead th:nth-child(10) { width: 56px; }
  .jobcards-screen .jobcards-table {
    font-size: 0.8125rem;
  }
  .jobcards-screen .jobcards-table th,
  .jobcards-screen .jobcards-table td {
    padding: 6px 5px;
  }
}

/* Jobcards list: stack Status + Urgency badges */
.jobcards-screen .jobcard-badge-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.jobcards-screen .jobcard-urgency-badge {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Extra urgency color not in Bootstrap */
.bg-very-urgent {
  background-color: #fd7e14 !important;
  color: #111827 !important;
}

html[data-theme="dark"] .bg-very-urgent {
  background-color: #f97316 !important;
  color: #0b1220 !important;
}

/* Customer and Assessed/Repaired by use fixed widths above; no flex override */

@media (max-width: 1200px) {
  .jobcards-screen .jobcards-table {
    font-size: 0.83rem;
  }
  .jobcards-screen .jobcards-table th {
    padding: 6px 6px !important;
    font-size: 0.80rem;
  }
  .jobcards-screen .jobcards-table td {
    padding: 6px 6px;
  }
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

header.bg-light {
  background-color: var(--header-bg) !important;
  border-color: var(--color-border) !important;
}

footer {
  border-color: var(--color-border) !important;
  color: var(--color-muted);
}

.text-muted {
  color: var(--color-muted) !important;
}

.nav-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 0;
}

.nav-item .nav-theme-toggle {
  margin: 0;
  padding: 0;
}

.nav-item .nav-theme-toggle .form-check-label {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.dashboard-kpi-card.is-clickable {
  cursor: pointer;
}

.dashboard-kpi-card.is-clickable:hover {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.nav-settings-link {
  display: flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.nav-settings-link .settings-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

html[data-theme="dark"] .site-logo {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 3px rgba(59, 130, 246, 0.65));
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--color-input-placeholder);
}

html[data-theme="dark"] .form-select option {
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
}

/* Modal: theme-aware (light and dark) */
.modal-content {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--color-shadow-strong);
}
.modal-header,
.modal-footer {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
}
.modal-title {
  color: var(--color-heading);
}
.modal-body {
  color: var(--color-text);
}
.modal .btn-close {
  filter: inherit;
  opacity: 0.8;
}

html[data-theme="dark"] .modal-content {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
}

html[data-theme="dark"] .modal-title {
  color: var(--color-heading);
}

html[data-theme="dark"] .modal-body {
  color: var(--color-text);
}

html[data-theme="dark"] .modal .form-label {
  color: var(--color-muted);
}

html[data-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.9;
}

/* Users: jobcard activity digest panel (modal + create-user card) — theme tokens, not Bootstrap bg-light */
.users-digest-email-panel {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.75rem 0.85rem;
  color: var(--color-text);
}
.users-digest-email-panel__title {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.users-digest-email-panel__heading {
  color: var(--color-heading);
}
.users-digest-email-panel__hint {
  color: var(--color-muted);
  font-weight: 400;
}
.users-digest-email-panel__help {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: 0.35rem;
  margin-bottom: 0;
}
.users-digest-email-panel .form-check {
  margin-bottom: 0.35rem;
}
.users-digest-email-panel .form-check:last-of-type {
  margin-bottom: 0;
}
.users-digest-email-panel .form-check-label {
  color: var(--color-text);
}
html[data-theme="dark"] .users-digest-email-panel .form-check-input {
  border-color: var(--color-input-border);
  background-color: var(--color-input-bg);
}
html[data-theme="dark"] .users-digest-email-panel .form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.22);
}
html[data-theme="dark"] .users-digest-email-panel .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ----- Settings page: app bar colours (light/dark), structured layout ----- */
.settings-screen .settings-page-header {
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--header-bg);
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: -0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 10px;
}

.settings-screen .settings-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.01em;
}

.settings-screen .settings-page-subtitle {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.45;
}

/* Settings cards: frosted surface, theme-aware */
.settings-page .settings-card {
  background: var(--frosted-bg);
  border-color: var(--frosted-border);
  color: var(--color-text);
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  border-radius: 12px;
  overflow: hidden;
}

/* Card headers: app bar style (match jobcards – light blue gradient, dark teal) */
.settings-screen .settings-card-header {
  border: none;
  border-bottom: none;
  padding: 0.75rem 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.settings-screen .settings-card-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Light mode: settings card headers – blue gradient (same as jobcards) */
html:not([data-theme="dark"]) .settings-screen .settings-card-header {
  background: linear-gradient(135deg, #1a56c4 0%, #2563eb 100%) !important;
  border-color: #1550b8 !important;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html:not([data-theme="dark"]) .settings-screen .settings-card-heading {
  color: #ffffff !important;
}

/* Dark mode: settings card headers – teal (same as jobcards) */
html[data-theme="dark"] .settings-screen .settings-card-header {
  background-color: #7fb8b5 !important;
  border-color: #7fb8b5 !important;
  color: #ffffff;
}

html[data-theme="dark"] .settings-screen .settings-card-heading {
  color: #ffffff !important;
}

.settings-screen .settings-card .card-body {
  padding: 1rem 1.25rem;
}

.settings-footer-actions {
  padding-top: 0.25rem;
}

.settings-page .settings-description {
  color: var(--color-muted) !important;
}

/* Product types (Settings): dropdown + modals, light/dark */
.settings-product-types-card .settings-product-type-hint {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.settings-screen .settings-product-type-select,
.settings-screen .settings-product-type-search {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
}

.settings-screen .settings-product-type-select:focus,
.settings-screen .settings-product-type-search:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(44, 107, 224, 0.2);
}

html[data-theme="dark"] .settings-screen .settings-product-type-select:focus,
html[data-theme="dark"] .settings-screen .settings-product-type-search:focus {
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.22);
}

.settings-screen .settings-product-type-search::placeholder {
  color: var(--color-input-placeholder);
}

.settings-product-types-actions .btn:disabled {
  opacity: 0.55;
}

.settings-product-type-modal .modal-content {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.settings-product-type-modal .modal-header,
.settings-product-type-modal .modal-footer {
  border-color: var(--color-border);
}

.settings-product-type-modal .modal-title {
  color: var(--color-heading);
}

.settings-product-type-modal .form-label {
  color: var(--color-text);
}

.settings-product-type-modal .form-control {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
}

.settings-product-type-modal .form-control::placeholder {
  color: var(--color-input-placeholder);
}

.settings-product-type-modal .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(44, 107, 224, 0.18);
}

html[data-theme="dark"] .settings-product-type-modal .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.22);
}

.settings-product-type-modal .modal-body strong {
  color: var(--color-heading);
}

.settings-admins-list {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.settings-admins-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  transition: background 0.15s ease;
}

.settings-admins-item:hover {
  background: var(--color-surface-muted) !important;
}

.settings-admins-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-admins-name {
  font-weight: 500;
  color: var(--color-text);
}

/* Administrator tag: same style as urgency badges (pill, bold) */
.settings-admin-tag {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.settings-website-creator-badge {
  background-color: #26a69a !important;
  color: #ffffff !important;
  border: none;
}

html[data-theme="dark"] .settings-website-creator-badge {
  background-color: #2dd4bf !important;
  color: #0b1220 !important;
}

.settings-senior-technician-badge {
  background-color: #E00014 !important;
  color: #ffffff !important;
  border: none;
}

html[data-theme="dark"] .settings-senior-technician-badge {
  background-color: #E00014 !important;
  color: #ffffff !important;
}

.settings-admins-email {
  color: var(--color-link) !important;
  text-decoration: none;
  font-size: 0.9375rem;
}

.settings-admins-email:hover {
  color: var(--color-link-hover) !important;
  text-decoration: underline;
}

.settings-page .settings-info-btn {
  color: var(--color-link);
  border-color: var(--color-link);
}

.settings-page .settings-info-btn:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.settings-information-modal-body,
.settings-information-modal-body .text-muted {
  color: var(--color-text) !important;
}

.settings-information-modal-body .text-muted {
  color: var(--color-muted) !important;
}

.settings-information-modal-body .settings-info-name {
  color: var(--color-text) !important;
  font-weight: 600;
}

.settings-information-modal-body .settings-info-email-link {
  color: var(--color-link) !important;
  text-decoration: none;
  font-weight: 500;
}

.settings-information-modal-body .settings-info-email-link:hover {
  color: var(--color-link-hover) !important;
  text-decoration: underline;
}

html[data-theme="dark"] .btn-outline-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--color-surface-muted);
}

/* Dashboard filter buttons: grey text when not selected (both themes) */
.dashboard-toolbar .btn-outline-secondary:not(.is-active),
.card-title-actions .btn-outline-secondary:not(.is-active) {
  color: var(--color-muted);
}

/* Dashboard filter buttons: visible inactive state in dark mode (Assessed, Received, etc.) */
html[data-theme="dark"] .dashboard-toolbar .btn-outline-secondary:not(.is-active),
html[data-theme="dark"] .card-title-actions .btn-outline-secondary:not(.is-active) {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border-strong);
  color: var(--color-muted);
}

html[data-theme="dark"] .dashboard-toolbar .btn-outline-secondary:not(.is-active):hover,
html[data-theme="dark"] .card-title-actions .btn-outline-secondary:not(.is-active):hover {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
}

html[data-theme="dark"] .btn-outline-primary {
  color: var(--color-link);
  border-color: var(--color-link);
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Table styling */
.table-bordered-bold {
  border: 3px solid var(--color-border-strong) !important;
}

.table-bordered-bold thead {
  border-bottom: 3px solid var(--color-border-strong) !important;
}

.table-bordered-bold th,
.table-bordered-bold td {
  border: 1px solid var(--color-border-mid) !important;
}

.table-header-bold {
  background-color: var(--color-surface-muted) !important;
  font-weight: bold !important;
}

.table-header-bold th {
  padding: 12px !important;
  border-bottom: 2px solid var(--color-border-strong) !important;
}

.table-header-bold a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.table-header-bold a:hover {
  text-decoration: underline;
}

.table {
  color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table th {
  color: var(--color-text);
}

html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered {
  border-color: var(--color-border);
}

/* Status-based row colors - high specificity to override Bootstrap */
.table tbody tr.status-row.status-received,
.table tbody tr.status-row.status-received td {
  background-color: var(--status-received-bg) !important;
  color: var(--status-received-text) !important;
}

.table tbody tr.status-row.status-repaired,
.table tbody tr.status-row.status-repaired td {
  background-color: var(--status-repaired-bg) !important;
  color: var(--status-repaired-text) !important;
}

.table tbody tr.status-row.status-scrapped,
.table tbody tr.status-row.status-scrapped td {
  background-color: var(--status-scrapped-bg) !important;
  color: var(--status-scrapped-text) !important;
}

.table tbody tr.status-row.status-quoted,
.table tbody tr.status-row.status-quoted-on-new,
.table tbody tr.status-row.status-quoted-on-new td,
.table tbody tr.status-row.status-quoted td {
  background-color: var(--status-quoted-bg) !important;
  color: var(--status-quoted-text) !important;
}

.table tbody tr.status-row.status-delivered,
.table tbody tr.status-row.status-delivered td {
  background-color: var(--status-delivered-bg) !important;
  color: var(--status-delivered-text) !important;
}

.table tbody tr.status-row.status-assessed,
.table tbody tr.status-row.status-assessed td {
  background-color: var(--status-assessed-bg) !important;
  color: var(--status-assessed-text) !important;
}

.table tbody tr.status-row.status-order-recvd,
.table tbody tr.status-row.status-order-recvd td,
.table tbody tr.status-row.status-order-rcvd,
.table tbody tr.status-row.status-order-rcvd td,
.table tbody tr.status-row.status-recvd,
.table tbody tr.status-row.status-recvd td {
  background-color: var(--status-order-rcvd-bg) !important;
  color: var(--status-order-rcvd-text) !important;
}

/* Jobcards list: all status tags (first badge) – transparent background so row colour shows through; text and border use row colour */
.jobcards-screen .jobcards-table tbody tr.status-row .jobcard-badge-stack .badge:first-child {
  background-color: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor;
  font-weight: 600;
}

/* Jobcards list: additional technicians (Assessed By / Repaired By) readable on all status rows – use row text colour */
.jobcards-screen .jobcards-table tbody tr.status-row td:nth-child(6) .text-muted,
.jobcards-screen .jobcards-table tbody tr.status-row td:nth-child(7) .text-muted {
  color: inherit !important;
}

/* Jobcards list: Edit button - fixed high-contrast style so it is readable on every status row colour (light and dark) */
.jobcards-screen .jobcards-table tbody .jobcard-list-edit-btn {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #4b5563 !important;
  font-weight: 600;
}
.jobcards-screen .jobcards-table tbody .jobcard-list-edit-btn:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  border-color: #374151 !important;
}
html[data-theme="dark"] .jobcards-screen .jobcards-table tbody .jobcard-list-edit-btn {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
html[data-theme="dark"] .jobcards-screen .jobcards-table tbody .jobcard-list-edit-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.table tbody tr.status-row.status-germany-repair,
.table tbody tr.status-row.status-germany-repair td {
  background-color: var(--status-germany-repair-bg) !important;
  color: var(--status-germany-repair-text) !important;
}

/* Ensure hover still works */
.table-hover tbody tr.status-row:hover,
.table-hover tbody tr.status-row:hover td {
  filter: var(--table-hover-filter) !important;
}

.jobcard-loading {
  display: none;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.jobcard-loading.is-loading {
  display: inline-block;
}

/* Dashboard quick view */
.dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-kpi-card {
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.dashboard-kpi-card .kpi-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.dashboard-kpi-card .kpi-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
}

.dashboard-kpi-card .kpi-sub {
  font-size: 0.6rem;
  color: var(--color-muted);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dashboard-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-filter-card {
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 8px;
  padding: 5px;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.dashboard-filter-card .filter-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-card-wide {
  grid-column: 1 / -1;
  max-width: 100%;
}

.dashboard-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 8px;
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 8px;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.dashboard-export {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px;
  background: var(--frosted-bg);
  border: 1px dashed var(--frosted-border);
  border-radius: 8px;
  box-shadow: var(--frosted-shadow);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
}

.export-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
  max-width: 200px;
  flex: 1 1 160px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 0;
  padding-top: 0;
  align-self: flex-end;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.toolbar-label {
  font-size: 0.62rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-toolbar .btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

/* Tech filter buttons: semantic active colours (Assessed / Repaired) for clarity in both themes */
/* Assessment / Repaired buttons: same blue when selected (clicked), white text unchanged */
.dashboard-toolbar [data-dash-tech="assessed"].is-active,
.dashboard-toolbar [data-dash-tech="repaired"].is-active {
  background: var(--dashboard-tech-active-bg);
  color: #ffffff;
  border-color: var(--dashboard-tech-active-bg);
}

.dashboard-toolbar .btn.is-disabled,
.dashboard-toolbar .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dashboard-card {
  background: var(--frosted-bg);
  border: 1px solid var(--frosted-border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: var(--frosted-shadow);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  max-width: 100%;
  min-width: 0;
}

.card-scroll-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-card .card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.dashboard-card .card-subtitle {
  font-size: 0.6rem;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.chart-wrap {
  position: relative;
  height: 135px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

.chart-wrap.chart-line {
  height: 280px;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-bottom: 26px;
  overflow: hidden;
}

.chart-line-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-wrap.chart-line.is-expanded {
  height: 420px;
  max-width: 100%;
  padding-bottom: 26px;
}

.chart-wrap.chart-donut {
  height: 150px;
  flex: 1;
}

/* Analytics chart containers: prevent overflow */
.ratio {
  max-width: 100%;
  overflow: hidden;
}

.chart-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-heading);
  pointer-events: none;
}

.chart-center-sub {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--color-muted);
  pointer-events: none;
}

.chart-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.7rem;
}

.chart-row-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}

.chart-track {
  height: 10px;
  background: var(--chart-track-bg);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.chart-segment {
  height: 100%;
}

.chart-row-value {
  font-size: 0.7rem;
  color: var(--color-muted);
  min-width: 30px;
  text-align: right;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 6px;
  font-size: 0.62rem;
  color: var(--color-muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.legend-item.is-muted {
  opacity: 0.4;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.chart-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.chart-donut-core {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-donut-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
}

.chart-donut-ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  background: var(--color-surface);
  border-radius: 50%;
}

.chart-line-text {
  font-size: 9px;
  fill: var(--chart-line-text);
}

.chart-line-text.is-series-a {
  fill: var(--chart-line-series-a);
}

.chart-line-text.is-series-b {
  fill: var(--chart-line-series-b);
}

.chart-line-text.is-series-c {
  fill: var(--chart-line-series-c);
}

.btn.btn-xs {
  font-size: 0.62rem;
  padding: 2px 6px;
  line-height: 1.2;
}

[data-month-series="received"].is-active {
  background: var(--chart-received);
  border-color: var(--chart-received);
  color: #ffffff;
}

[data-month-series="repaired"].is-active {
  background: var(--chart-repaired);
  border-color: var(--chart-repaired);
  color: #ffffff;
}

[data-month-series="scrapped"].is-active {
  background: var(--chart-scrapped);
  border-color: var(--chart-scrapped);
  color: #ffffff;
}

/* Month series buttons: theme-aware contrast (Received/Repaired/Scrapped) in dark mode; white text when selected */
html[data-theme="dark"] [data-month-series="received"].is-active {
  background: var(--status-received-bg);
  border-color: var(--status-received-bg);
  color: #ffffff;
}

html[data-theme="dark"] [data-month-series="repaired"].is-active {
  background: var(--status-repaired-bg);
  border-color: var(--status-repaired-bg);
  color: #ffffff;
}

html[data-theme="dark"] [data-month-series="scrapped"].is-active {
  background: var(--status-scrapped-bg);
  border-color: var(--status-scrapped-bg);
  color: #ffffff;
}

.chart-line-grid line {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-bar-v {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Technician chart: .chart-bars min-width set by JS; card scrolls horizontally */
#chart-tech.chart-wrap.chart-bar-v {
  min-height: 200px;
}

#chart-tech .chart-bars {
  flex-shrink: 0;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 140px;
  padding: 6px 4px 0;
  background: transparent;
}

.chart-bar-group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-group.chart-bar-dual {
  gap: 6px;
}

.chart-bar-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}

.chart-bar {
  width: 16px;
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.chart-bar:hover {
  transform: translateY(-2px);
  filter: brightness(0.95);
}

.chart-bar-label {
  font-size: 0.68rem;
  color: var(--color-muted);
  min-width: 36px;
  max-width: 80px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75rem;
  color: var(--color-muted);
  background: var(--chart-empty-bg);
  border-radius: 6px;
  border: 1px dashed var(--color-border);
}

.chart-tooltip {
  position: absolute;
  top: 4px;
  left: 0;
  transform: translateX(-50%);
  background: var(--chart-tooltip-bg);
  border: 1px solid var(--chart-tooltip-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.68rem;
  color: var(--color-text);
  box-shadow: 0 4px 10px var(--color-shadow-strong);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  white-space: nowrap;
  z-index: 2;
  line-height: 1.1;
}

.chart-line-dot.is-active {
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
  transform: scale(1.3);
}

@media (max-width: 1200px) {
  .dashboard-shell {
    min-width: 0;
  }
  .dashboard-layout {
    min-width: 0;
  }
  .dashboard-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dashboard-card,
  .dashboard-card-wide {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  /* Keep dashboard within viewport so overflow-x: hidden on shell doesn't clip cards/charts */
  .dashboard-shell {
    min-width: 0;
  }
  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-charts {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .dashboard-card,
  .dashboard-card-wide {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .card-scroll-inner {
    width: max-content;
    min-width: 100%;
  }
  .chart-wrap.chart-line {
    height: 220px;
  }
  .chart-line-svg {
    min-width: 480px;
  }
  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px 0;
  }
  .dashboard-toolbar .toolbar-filters {
    flex-direction: column;
    flex: 0 0 auto;
  }
  /* Prevent fields from growing in height (flex-basis 100% in column = tall form = gap below) */
  .dashboard-toolbar .toolbar-field {
    flex: 0 0 auto;
    min-width: 0;
  }
  .dashboard-toolbar .toolbar-field select[name="customer"] {
    max-width: 160px;
  }
  .dashboard-toolbar .toolbar-actions {
    margin-left: 0;
    margin-top: 4px;
    flex: 0 0 auto;
  }
  .dashboard-toolbar .toolbar-group {
    flex-wrap: wrap;
  }
  .dashboard-export,
  .dashboard-toolbar {
    min-width: 0;
  }
}

/* Auth: comfortable padding on small screens */
@media (max-width: 576px) {
  .auth-screen .card.auth-card {
    margin-left: 4px;
    margin-right: 4px;
  }
  .auth-screen .auth-logo img {
    height: 64px;
  }
  .auth-theme-toggle-wrapper {
    padding: 0 16px 8px;
  }
}

/* Dashboard: KPI stats cards less wide on phone (more columns = narrower cards) */
@media (max-width: 576px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .dashboard-kpi-card {
    padding: 5px 6px;
  }
  .dashboard-kpi-card .kpi-label {
    font-size: 0.6rem;
  }
  .dashboard-kpi-card .kpi-value {
    font-size: 0.95rem;
  }
  .dashboard-kpi-card .kpi-sub {
    font-size: 0.55rem;
  }
  .chart-donut-core {
    width: 100px;
    height: 100px;
  }
  .chart-donut-ring {
    width: 100px;
    height: 100px;
  }
  .chart-wrap.chart-donut {
    min-height: 124px;
  }
}