:root{
  --bg-start:#f8fafc;
  --bg-end:#e2e8f0;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.14);
  --input-bg:#f8fafc;
  --btn-base:rgba(34,197,94,.18);
  --btn-secondary:rgba(59,130,246,.18);
  --btn-danger:rgba(239,68,68,.16);
  --code-bg:rgba(15,23,42,.08);
}
[data-theme="dark"]{
  --bg-start:#070a12;
  --bg-end:#0b0f19;
  --card:rgba(17,24,39,.85);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(255,255,255,.10);
  --input-bg:rgba(0,0,0,.25);
  --btn-base:rgba(34,197,94,.14);
  --btn-secondary:rgba(59,130,246,.12);
  --btn-danger:rgba(239,68,68,.14);
  --code-bg:rgba(255,255,255,.06);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:linear-gradient(180deg,var(--bg-start),var(--bg-end)); color:var(--text); }
.container{ max-width:1500px; margin:0 auto; padding:20px; }
.nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:var(--card); border:1px solid var(--border); border-radius:14px; position:sticky; top:12px; backdrop-filter: blur(8px); }
.brand{ font-weight:800; }
.badge{ font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.grid{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:16px; }
@media (min-width: 920px){ .grid{ grid-template-columns: 1fr 1fr; } }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; }
.card h2{ margin:0 0 10px 0; font-size:18px; }
label{ display:block; margin:10px 0 6px; color:var(--muted); font-size:13px; }
input, select, textarea{ width:100%; padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); outline:none; }
textarea{ min-height: 84px; resize: vertical; }
.row{ display:flex; gap:10px; }
.row > * { flex:1; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:11px 14px; border-radius:12px; border:1px solid var(--border); cursor:pointer; background:var(--btn-base); color:var(--text); font-weight:700; text-decoration:none; }
.btn.secondary{ background:var(--btn-secondary); }
.btn.danger{ background:var(--btn-danger); }
.flash{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); margin:10px 0; }
.flash.success{ border-color: rgba(34,197,94,.4); background:rgba(34,197,94,.12); }
.flash.danger{ border-color: rgba(239,68,68,.4); background:rgba(239,68,68,.12); }
.flash.warning{ border-color: rgba(245,158,11,.4); background:rgba(245,158,11,.12); }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:top; }
.table th{ color:var(--muted); font-weight:700; }
.small{ font-size:12px; color:var(--muted); }
.filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filters input{ width:auto; min-width: 150px; }
.footer-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.nav .footer-actions{ gap:8px; margin-top:0; align-items:center; }
.nav .footer-actions .btn{
  padding:7px 11px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  line-height:1;
}
.nav #theme-toggle{
  width:34px;
  height:34px;
  padding:0;
  border-radius:999px;
}
code{ background:var(--code-bg); padding:2px 6px; border-radius:8px; }
.combo{ position:relative; }
.combo input{ padding-right:40px; }
.combo-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.combo-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  max-height:220px;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:20;
}
.combo-menu.open{ display:block; }
.combo-option{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.combo-option:hover,
.combo-option.active{
  background:var(--btn-secondary);
}
.combo-empty{
  padding:10px 12px;
  color:var(--muted);
  font-size:13px;
}
.camera-wrap{
  margin-top:4px;
}
.camera-panel{
  display:none;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:var(--input-bg);
}
.camera-video,
.camera-preview{
  width:100%;
  border-radius:10px;
  background:#000;
  max-height:300px;
  object-fit:cover;
}
.temp-cold{
  color:#0284c7;
  font-weight:700;
}
.temp-alert{
  color:#dc2626;
  font-weight:700;
}
.admin-grid{
  width:100%;
  height:460px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.customer-grid{
  width:100%;
  height:560px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  --ag-row-height: 78px;
  --ag-header-height: 46px;
}
.btn-icon{
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
}
.ag-action-group{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  min-height:46px;
}
.ag-action-group .btn{
  padding:9px 12px;
  font-size:13px;
  border-radius:9px;
}
.customer-grid .ag-cell{
  line-height:1.25;
  display:flex;
  align-items:center;
}
.customer-grid .ag-cell[col-id=\"actions\"]{
  overflow:visible;
}
.customers-layout{
  grid-template-columns: minmax(280px, .8fr) minmax(500px, 1.2fr);
}
.customers-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.customer-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--input-bg);
}
.customer-inline-form{
  display:grid;
  grid-template-columns: minmax(180px,1fr) 120px auto;
  gap:8px;
  align-items:center;
}
.customer-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.customer-delete-form{ margin:0; }
.customer-history-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
}
.history-chart-wrap{
  position:relative;
  height:240px;
  width:100%;
}
.history-chart-wrap canvas{
  width:100% !important;
  height:100% !important;
}
.history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:300px;
  overflow:auto;
}
.history-item{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  display:grid;
  gap:6px;
  background:var(--input-bg);
}
.history-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:180;
}
.history-modal.open{
  opacity:1;
  pointer-events:auto;
}
.history-modal-card{
  width:min(96vw, 1180px);
  max-height:92vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.history-modal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.ag-theme-quartz{
  --ag-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --ag-foreground-color: var(--text);
  --ag-background-color: var(--card);
  --ag-header-background-color: var(--input-bg);
  --ag-header-foreground-color: var(--text);
  --ag-border-color: var(--border);
  --ag-row-border-color: var(--border);
  --ag-odd-row-background-color: rgba(15,23,42,.03);
  --ag-selected-row-background-color: var(--btn-secondary);
  --ag-input-focus-border-color: #3b82f6;
}
[data-theme="dark"] .ag-theme-quartz{
  --ag-foreground-color: #e5e7eb;
  --ag-data-color: #e5e7eb;
  --ag-secondary-foreground-color: #cbd5e1;
  --ag-header-foreground-color: #e5e7eb;
  --ag-input-text-color: #e5e7eb;
  --ag-odd-row-background-color: rgba(255,255,255,.02);
}
[data-theme="dark"] .ag-theme-quartz,
[data-theme="dark"] .ag-theme-quartz .ag-root-wrapper,
[data-theme="dark"] .ag-theme-quartz .ag-root,
[data-theme="dark"] .ag-theme-quartz .ag-root-wrapper-body,
[data-theme="dark"] .ag-theme-quartz .ag-body-viewport,
[data-theme="dark"] .ag-theme-quartz .ag-center-cols-viewport,
[data-theme="dark"] .ag-theme-quartz .ag-center-cols-container,
[data-theme="dark"] .ag-theme-quartz .ag-header,
[data-theme="dark"] .ag-theme-quartz .ag-paging-panel{
  background-color: rgba(17,24,39,.85) !important;
}
[data-theme="dark"] .ag-theme-quartz .ag-cell,
[data-theme="dark"] .ag-theme-quartz .ag-header-cell-text,
[data-theme="dark"] .ag-theme-quartz .ag-paging-panel,
[data-theme="dark"] .ag-theme-quartz .ag-paging-page-summary-panel,
[data-theme="dark"] .ag-theme-quartz .ag-icon,
[data-theme="dark"] .ag-theme-quartz .ag-select,
[data-theme="dark"] .ag-theme-quartz .ag-input-field-input{
  color:#e5e7eb !important;
}
.ag-theme-quartz .ag-row{
  background-color: transparent;
}
.ag-theme-quartz .ag-paging-panel,
.ag-theme-quartz .ag-header,
.ag-theme-quartz .ag-row{
  color:var(--text);
}
.delivery-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:100;
}
.photo-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:220;
}
.photo-modal.open{
  opacity:1;
  pointer-events:auto;
}
.photo-modal-card{
  width:min(96vw, 980px);
  max-height:92vh;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.photo-modal-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  z-index:3;
}
.photo-modal-close{
  position:static;
  z-index:3;
}
.photo-modal-loading{
  padding:24px 12px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--border);
  border-radius:10px;
}
.photo-modal-image{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:10px;
  background:#000;
  z-index:1;
  display:none;
}
.photo-modal-image.loaded{
  display:block;
}
.delivery-modal.open{
  opacity:1;
}
.delivery-modal-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px 24px;
  text-align:center;
  transform:translateY(14px) scale(.96);
  animation:deliveryPop .38s cubic-bezier(.2,.8,.2,1) forwards;
}
.delivery-modal-icon{
  width:56px;
  height:56px;
  margin:0 auto 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:rgba(34,197,94,.18);
  color:#16a34a;
}
.delivery-modal-card h3{
  margin:0;
  font-size:22px;
}
@keyframes deliveryPop{
  from{ transform:translateY(14px) scale(.96); }
  to{ transform:translateY(0) scale(1); }
}
.auth-shell{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  margin-top:16px;
}
.auth-hero{
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(34,197,94,.18), transparent 44%),
    radial-gradient(circle at 80% 10%, rgba(59,130,246,.18), transparent 46%),
    var(--card);
}
.auth-kicker{
  margin:0 0 8px 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.auth-hero h1{
  margin:0 0 10px 0;
  font-size:30px;
  line-height:1.12;
}
.auth-card h2{ margin-bottom:14px; }
.auth-actions .btn{ width:100%; }
@media (max-width: 760px){
  .container{ padding:12px; }
  .nav{
    position:static;
    padding:12px;
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-actions{ width:100%; }
  .footer-actions .btn{ flex:1; min-height:44px; }
  .nav .footer-actions .btn{
    font-size:14px;
    padding:10px 12px;
    line-height:1.1;
  }
  .nav #theme-toggle{
    width:44px;
    height:44px;
    padding:0;
  }
  .card{ padding:14px; border-radius:14px; }
  .card h2{ font-size:17px; }
  input, select, textarea, .btn{ font-size:16px; }
  .combo-menu{ max-height:45vh; }
  .driver-submit .btn{ width:100%; }
  .driver-recent-table thead{ display:none; }
  .driver-recent-table,
  .driver-recent-table tbody,
  .driver-recent-table tr,
  .driver-recent-table td{ display:block; width:100%; }
  .driver-recent-table tr{
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px 10px;
    margin-bottom:10px;
    background:var(--input-bg);
  }
  .driver-recent-table td{
    border-bottom:none;
    padding:6px 0;
  }
  .driver-recent-table td::before{
    content:attr(data-label) ": ";
    color:var(--muted);
    font-weight:700;
    margin-right:6px;
  }
  .delivery-modal-card{
    width:calc(100% - 28px);
    padding:18px 16px;
  }
  .photo-modal-card{
    width:calc(100% - 20px);
    max-height:90vh;
    padding:10px;
  }
  .photo-modal-image{
    max-height:72vh;
  }
  .delivery-modal-card h3{ font-size:20px; }
  .auth-shell{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:10px;
  }
  .auth-hero{
    min-height:auto;
    padding:14px;
  }
  .auth-hero h1{ font-size:24px; }
  .admin-grid{ height:62vh; min-height:360px; }
  .customer-grid{ height:62vh; min-height:420px; }
  .customers-layout{
    grid-template-columns:1fr;
  }
  .customer-item{
    grid-template-columns:1fr;
  }
  .customer-inline-form{
    grid-template-columns:1fr;
  }
  .customer-actions{
    justify-content:stretch;
  }
  .customer-actions .btn{
    flex:1;
  }
  .customer-history-grid{
    grid-template-columns:1fr;
  }
  .history-chart-wrap{
    height:210px;
  }
  .history-modal-card{
    width:calc(100% - 14px);
    max-height:92vh;
    padding:10px;
  }
}