*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
:root { padding-top: env(safe-area-inset-top, 0px); }

:root{
  --bg:#EEF0F1; --panel:#FFFFFF; --rail:#E3E6E7; --ink:#202426; --inksoft:#697075;
  --accent:#45607A; --on-accent:#FFFFFF; --accentsoft:#DEE6EC; --stripe:#F1F1ED; --line:#D7DBDD; --danger:#A23B2E; --on-danger:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17191B; --panel:#1F2224; --rail:#141618; --ink:#E9EBEA; --inksoft:#8D9498;
    --accent:#7FA0C2; --on-accent:#0E1A24; --accentsoft:#233241; --stripe:#262A2C; --line:#2C3033; --danger:#D9846F; --on-danger:#1F0B07;
  }
}

* { -webkit-tap-highlight-color: transparent; }
body{ background:var(--bg); color:var(--ink); padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

a, button, input, select, textarea, label { font-size:1rem; font-family: 'Work Sans', system-ui, sans-serif; }

.field{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:.65rem .7rem; font-size:1rem; border-radius:4px; min-height:2.75rem;
}
.field::placeholder{ color:var(--inksoft); }
textarea.field{ min-height:auto; }

select.zone-type{ background-color:var(--panel); color:var(--ink); }
select option{ background-color:var(--panel); color:var(--ink); font-family:'Work Sans', system-ui, sans-serif; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:2px; }
.field:focus-visible{ outline-offset:1px; border-color:var(--accent); }

.tabular{ font-variant-numeric: tabular-nums; }

.site-logo{ height:3.25rem; width:auto; flex-shrink:0; border-radius:6px; }
@media (min-width:640px){ .site-logo{ height:4rem; } }
@media (prefers-color-scheme: dark){
  .site-logo{ background:#fff; padding:.25rem; }
}

/* Confirmation dialog */
.confirm-dialog{
  margin:auto; width:min(92vw, 24rem); padding:1.25rem;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.confirm-dialog::backdrop{ background:rgba(0,0,0,.55); }
.confirm-message{ margin-bottom:1.25rem; font-size:1rem; line-height:1.45; overflow-wrap:anywhere; }
.btn-danger{ background:var(--danger); color:var(--on-danger); min-height:2.75rem; border:1px solid var(--danger); }
.btn-danger:hover{ filter:brightness(1.08); }

.manage-dialog{ width:min(94vw, 32rem); }
.manage-list{ max-height:50vh; overflow-y:auto; list-style:none; padding:0; margin:0; }
.manage-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.35rem 0; border-bottom:1px solid var(--line);
}
.manage-row span{ overflow-wrap:anywhere; }

.zone-name{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.02em; }
.field[aria-invalid="true"]{ border-color:var(--danger); outline:2px solid var(--danger); outline-offset:1px; }

/* Designation suggestions */
.suggest{
  position:fixed; z-index:50; overflow-y:auto;
  background:var(--panel); border:1px solid var(--accent); border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.suggest-item{
  padding:.7rem 1rem; min-height:2.75rem; display:flex; align-items:center;
  cursor:pointer; color:var(--ink); border-bottom:1px solid var(--line);
}
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover{ background:var(--stripe); }

/* Notice bar */
.notice{
  position:fixed; left:1rem; right:1rem; z-index:40; max-width:40rem; margin-inline:auto;
  bottom:calc(5.25rem + env(safe-area-inset-bottom, 0px));
  background:var(--panel); border:2px solid var(--accent); color:var(--ink);
  padding:.8rem 1rem; border-radius:6px; font-size:.95rem; box-shadow:0 4px 16px rgba(0,0,0,.25);
}

/* Zone nav: horizontal chips on mobile, vertical list on desktop */
#rail-list{ scrollbar-width:thin; }
.rail-item{
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
  padding:.6rem .85rem; min-height:2.75rem; border:1px solid var(--line); border-left-width:1px;
  background:var(--panel); color:var(--ink); font-size:.92rem; white-space:nowrap; border-radius:6px;
}
@media (min-width:1024px){
  .rail-item{ border-radius:0; border-left-width:3px; white-space:normal; width:100%; background:transparent; border:none; border-left:3px solid transparent; justify-content:space-between; }
  .rail-item.active{ font-weight:600; }
}
.rail-item.active{ font-weight:600; }
.rail-item .rail-surface{ font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--inksoft); }

.mat-table{ width:100%; border-collapse:collapse; }
.mat-table thead th{
  text-align:left; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--inksoft); padding:0 .4rem .4rem; border-bottom:1px solid var(--line);
}
.mat-table tbody td{ padding:.35rem .4rem; vertical-align:middle; }
.mat-table tbody tr:nth-child(odd){ background:var(--stripe); }
.qty-field{ width:3.6rem; text-align:center; min-height:2.75rem; }

.btn-primary{ background:var(--accent); color:var(--on-accent); min-height:2.75rem; border:1px solid var(--accent); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:var(--panel); min-height:2.75rem; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-remove{ color:var(--danger); min-height:2.75rem; min-width:2.75rem; background:transparent; border:none; }
.btn-remove:hover{ text-decoration:underline; }
.btn-remove.compact{ min-height:2.25rem; min-width:2.25rem; }

.panel-heading{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.02em; }

/* Photo capture */
.photo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:2.75rem; padding:.5rem 1rem; cursor:pointer;
}
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(4.75rem,1fr)); gap:.5rem;
}
.photo-tile{ position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--rail); }
.photo-tile img{ width:100%; height:100%; object-fit:cover; }
.photo-loading{ display:flex; align-items:center; justify-content:center; }
.spinner{
  width:1.75rem; height:1.75rem; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.photo-remove{
  position:absolute; top:.25rem; right:.25rem; width:1.75rem; height:1.75rem; border-radius:999px;
  background:rgba(20,22,24,.72); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; line-height:1; border:none;
}
.photo-remove:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

::selection{ background:var(--accentsoft); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.overflow-x-auto{ -webkit-overflow-scrolling:touch; }