/* Green theme: deep forest-to-emerald chrome with raised, tactile (3D) surfaces. Loaded after depth.css.
   Status colours (ready/duty/mission, triage, mission types, GPS track) are left as they are.
   To go back to purple/pink, remove the theme-green.css <link> in index.html. Screen only. */
@media screen {
  :root {
    --bg-primary: #edf5ef;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.96);
    --bg-card-hover: #f3faf5;
    --bg-input: #fbfdfb;
    --border-color: #d2e5d8;
    --border-focus: #16a34a;
    --text-main: #10231a;
    --text-muted: #3f5a4c;
    --text-subtle: #67806f;
    --primary: #15803d;
    --primary-hover: #166534;
    --primary-glow: rgba(21, 128, 61, 0.25);
    --pink: #0d9488;
    --pink-hover: #0f766e;
    --pink-glow: rgba(13, 148, 136, 0.25);
    --primary-gradient: linear-gradient(155deg, #3dd47f 0%, #16a34a 45%, #0f6b3a 100%);
    --primary-gradient-hover: linear-gradient(155deg, #2fc571 0%, #15803d 45%, #0c5a31 100%);
    --green-edge: #0d5c32;
    --green-tint: #e7f5ec;
    --green-tint-strong: #d3eedd;
    --shadow-sm: 0 3px 7px rgba(16, 64, 38, .09);
    --shadow-md: 0 8px 20px rgba(16, 64, 38, .10), 0 2px 3px rgba(16, 64, 38, .06);
    --shadow-lg: 0 18px 44px rgba(16, 64, 38, .16), 0 4px 8px rgba(16, 64, 38, .08);
  }

  body {
    background: radial-gradient(ellipse at 5% 0%, #d4f0dd 0, transparent 48%),
      radial-gradient(ellipse at 95% 12%, #dcf3ec 0, transparent 46%),
      radial-gradient(ellipse at 50% 100%, #e4f2e0 0, transparent 60%), #edf5ef;
    background-attachment: fixed;
  }
  :focus-visible, :is(.btn, .filter-pill, .view-btn):focus-visible { outline: 3px solid #15803d; outline-offset: 3px; }
  ::-webkit-scrollbar-thumb { background: #b9d6c3; }
  ::-webkit-scrollbar-thumb:hover { background: #7fb592; }

  /* Header: frosted white with a green accent rail underneath */
  .header-bar {
    background: rgba(255, 255, 255, 0.93);
    border-bottom: 0;
    box-shadow: inset 0 -3px 0 #16a34a, 0 6px 20px rgba(16, 64, 38, .12);
  }
  .brand-icon { background: linear-gradient(155deg, #3dd47f, #15803d 60%, #0f6b3a); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--green-edge), 0 6px 14px rgba(21, 128, 61, .3); }
  .brand-badge, .header-bar .brand-badge {
    background: linear-gradient(155deg, #22c55e, #15803d) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 var(--green-edge) !important;
  }

  /* Navigation tabs: sunken track, raised active tab */
  .view-switcher, .login-mode-tabs, .dashboard-filter-bar {
    background: #e2efe6;
    border: 1px solid #cfe3d6;
    box-shadow: inset 0 2px 5px rgba(16, 64, 38, .12), 0 1px 0 #fff;
  }
  .view-btn, .login-tab-btn { color: #3f5a4c; }
  .view-btn:hover, .login-tab-btn:hover { background: rgba(255, 255, 255, .8); color: #166534; }
  .view-btn.active, .login-tab-btn.active {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--green-edge), 0 6px 12px rgba(21, 128, 61, .28) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  }
  .mobile-bottom-nav { border-top: 0; box-shadow: inset 0 3px 0 #16a34a, 0 -6px 20px rgba(16, 64, 38, .10); }
  .mobile-nav-item { color: #3f5a4c; }
  .mobile-nav-item.active { color: #15803d; }
  .mobile-nav-item.active .mob-nav-icon { background: var(--green-tint-strong); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a9d6b8; }
  .header-bar .view-switcher { background: #f3f9f5; }
  .mobile-menu-btn { background: var(--green-tint); color: #14532d; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b9d9c4; }
  .active-driver-badge { border-color: #b9dcc6; color: #1f3b2c; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cfe6d7, 0 4px 10px rgba(16, 64, 38, .08); }

  /* Cards: white face, soft green rim, a solid bottom edge for depth */
  .glass-card {
    background: linear-gradient(160deg, #ffffff 0%, #fbfefc 60%, #f1f9f4 100%);
    border: 1px solid #d2e5d8;
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgba(150, 200, 168, .22), 0 3px 0 #dbeee2, var(--shadow-md);
  }
  .stat-card, .driver-pie-card {
    background: linear-gradient(160deg, #fff 30%, #f2faf5 100%);
    border: 1px solid #cfe5d7;
    box-shadow: inset 0 2px 0 #fff, 0 4px 0 #d3eadb, 0 10px 18px rgba(16, 64, 38, .10);
  }
  .stat-card:hover { border-color: #9fd2b0; box-shadow: inset 0 2px 0 #fff, 0 5px 0 #c3e3ce, 0 14px 24px rgba(16, 64, 38, .14); }
  .stat-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.06), 0 3px 6px rgba(16, 64, 38, .12); }
  .stat-info .value { color: #10231a; }
  .driver-pie-avatar { box-shadow: 0 3px 0 #c3e3ce, 0 6px 12px rgba(16, 64, 38, .18); }
  .login-overlay {
    background: radial-gradient(ellipse at 20% 10%, #d4f0dd 0, transparent 60%),
      radial-gradient(ellipse at 85% 90%, #dcf3ec 0, transparent 55%), #edf5ef;
  }
  .login-card { border: 1px solid #cfe5d7; box-shadow: inset 0 2px 0 #fff, 0 5px 0 #d3eadb, 0 24px 60px rgba(16, 64, 38, .18); }
  .login-header h2 { color: #10231a !important; }
  .login-header > div > div { box-shadow: 0 4px 0 #d3eadb, 0 8px 22px rgba(21, 128, 61, .16) !important; }

  /* Buttons: raised with a darker bottom edge; they press down when tapped */
  .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 rgba(16, 64, 38, .20), 0 5px 10px rgba(16, 64, 38, .10); }
  .btn-primary, #form-phone-dispatch .btn[type="submit"], .btn.phone-dispatch-cta, .pcb-btn-camera {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 var(--green-edge), 0 8px 16px rgba(21, 128, 61, .26) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  }
  .btn-primary:hover, #form-phone-dispatch .btn[type="submit"]:hover, .btn.phone-dispatch-cta:hover, .pcb-btn-camera:hover {
    background: var(--primary-gradient-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 0 var(--green-edge), 0 12px 22px rgba(21, 128, 61, .32) !important;
  }
  .btn.phone-dispatch-cta:focus-visible { outline-color: #15803d; }
  .btn-outline {
    background: linear-gradient(180deg, #ffffff, #f1f8f3);
    border: 1px solid #b9d9c4;
    color: #14532d;
  }
  .btn-outline:hover { background: linear-gradient(180deg, #ffffff, #e5f4ea); border-color: #16a34a; color: #166534; }
  .btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn.phone-dispatch-cta:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: inset 0 2px 4px rgba(16, 64, 38, .2), 0 1px 0 rgba(16, 64, 38, .25) !important;
  }
  .filter-pill { color: #3f5a4c; border-color: #cfe3d6; }
  .filter-pill.active {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 var(--green-edge), 0 5px 10px rgba(21, 128, 61, .2);
  }
  .close-btn, .modal-close { background: var(--green-tint); color: #2f4a3c; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c3e3ce; }
  .close-btn:hover, .modal-close:hover { background: var(--green-tint-strong); color: #166534; }

  /* Inputs: slightly sunken */
  .form-control, .form-select { border-color: #c9dfd0; box-shadow: inset 0 2px 4px rgba(16, 64, 38, .07), 0 1px 0 #fff; }
  .form-control::placeholder { color: #7d9485; }
  .form-control:focus, .form-select:focus { border-color: #16a34a; box-shadow: inset 0 1px 3px rgba(16, 64, 38, .05), 0 0 0 3px rgba(22, 163, 74, .18); }
  .form-label { color: #23402f; }
  .form-control:disabled, .form-select:disabled { background: #eef4f0; color: #6c8074; }
  input[type="checkbox"], input[type="radio"] { accent-color: #15803d; }
  .checkbox-group { background: #eef6f1; }

  /* Tables and dialogs */
  .data-table-container { border-color: #d2e5d8; }
  .data-table th { background: linear-gradient(180deg, #f8fcf9, #e4f2e9); color: #1f3b2c; border-bottom: 2px solid #c3e3ce; box-shadow: inset 0 1px 0 #fff; }
  .data-table td { border-color: #e6f1ea; }
  .data-table tbody tr:hover { background: #f2faf5; }
  .modal-overlay, .modal { background: rgba(10, 32, 20, 0.45); }
  .modal-box, .modal-content { border: 1px solid #cfe5d7; box-shadow: inset 0 2px 0 #fff, 0 24px 60px rgba(10, 40, 24, .24), 0 4px 8px rgba(10, 40, 24, .10); }
  .modal-header { background: linear-gradient(180deg, #ffffff, #f2faf5); border-bottom: 1px solid #dcebe1; box-shadow: inset 0 -1px 0 #fff; }
  .modal-footer { background: #f5faf6; border-top: 1px solid #dcebe1; }
  .modal-drag-handle { background: #b9d6c3; }

  /* Login PIN pad */
  .pin-btn { background: linear-gradient(180deg, #ffffff, #eef7f1); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c9e3d1, 0 6px 10px rgba(16, 64, 38, .08); }
  .pin-btn:hover { background: #e7f5ec; color: #166534; }
  .pin-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(16, 64, 38, .12); }
  .pin-dot { background: #dcebe1; border-color: #c3dccb; }
  .pin-dot.filled { background: linear-gradient(155deg, #3dd47f, #15803d); border-color: #15803d; box-shadow: 0 0 10px rgba(22, 163, 74, .45); }

  /* Photo capture and misc accents that were purple chrome */
  .photo-capture-box { background: #f4faf6; border-color: #86c79c; }
  .photo-capture-box:hover { background: #ebf7ef; }
  .pcb-preview { background: #f2f8f4; border-color: #c3dccb; }
  .pcb-preview:hover { background: #e7f5ec; }
  .pcb-title, .pcb-gps-badge, .gps-tag-link, .vehicle-live-photo-hint, .dispatch-driver-phone-btn, .timeline-photos-title { color: #166534; }
  .pcb-gps-badge { background: var(--green-tint); }
  .dispatch-driver-card:hover { background: #f3faf5; }
  .mission-type-card { border-color: #d2e5d8; box-shadow: 0 3px 0 #e0efe5; }
  .mission-type-card.selected[data-type] {
    border-color: #15803d;
    background: #effaf3;
    box-shadow: inset 0 0 0 1px #15803d, 0 4px 0 #b5dcc2, 0 8px 16px rgba(21, 128, 61, .14);
  }
  .mission-type-card:focus-within { outline-color: rgba(21, 128, 61, .45); }
  .mission-photo-pill, .mission-photo-pill:hover { background: var(--green-tint); color: #166534; }
  .fleet-shared-drivers { background: var(--green-tint); color: #14532d; }

  /* Inline colour adaptations from ios.css that pointed at purple */
  [style*="color: #93c5fd"], [style*="color:#93c5fd"], [style*="color: #60a5fa"], [style*="color:#60a5fa"],
  [style*="color: #38bdf8"], [style*="color: #7dd3fc"] { color: #166534 !important; }
  [style*="background: rgba(30, 58, 138"] { background: #effaf3 !important; border-color: #9fd2b0 !important; }
  [style*="background: rgba(15, 23, 42"], [style*="background: rgba(0,0,0"], [style*="background: rgba(0, 0, 0"],
  [style*="background: #0f172a"], [style*="background: #111e33"] { background: #f2f8f4 !important; }
}

/* Leftovers from the old dark theme that showed as flat grey blocks */
@media screen {
  .filter-pill-group { background: #e2efe6; border: 1px solid #cfe3d6; box-shadow: inset 0 2px 4px rgba(16, 64, 38, .12); }
  .filter-pill-group .filter-pill:not(.active) { background: transparent; }
  .glass-card[style*="rgba(15,23,42,0.4)"] {
    background: linear-gradient(135deg, #effaf3 0%, #ffffff 100%) !important;
    border-left-color: #15803d !important;
  }
  .glass-card[style*="rgba(15,23,42,0.4)"] [style*="color: #fff"] { color: #10231a !important; }
}

/* "Ready" is blue so it does not blend into the green theme (duty stays yellow, mission red) */
@media screen {
  .vehicle-card.ready { border-left-color: #2563eb; }
  .glass-card.vehicle-card.ready { --vehicle-status-edge: #2563eb; }
  .badge-ready { color: #1d4ed8; background: #eff6ff; border: 1px solid #93c5fd; }
}