/* Visual polish for the restored Zone Patrol interface. */
:root {
  color-scheme: dark;
  --navy: #07111f;
  --panel: #101e2e;
  --line: #2a3e53;
  --text: #f2f6fb;
  --muted: #adbed0;
  --cyan: #33d1ff;
  --control: #142638;
}
html, body { background: var(--navy); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: #405a72 #101e2e; }
body { font-size: 16px; }
button, input, select, textarea { font-family: inherit; }
button { font-weight: 650; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}
header { background: #0b1929; border-color: var(--line); gap: 12px; }
.badge, .account-avatar { background: var(--cyan); box-shadow: none; border-radius: 11px; }
.title h1 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.title p { font-size: .8125rem; }
.head-actions { align-items: center; gap: 8px; }
.icon-btn, .seg button, .status-btn, .nav-btn, .notes-btn, .edit-btn, .hold-btn {
  min-height: 44px; border-radius: 10px; border-color: var(--line);
  background: var(--control); box-shadow: none; font-size: .875rem;
}
.summary { background: var(--line); }
.stat { background: #0d1b2b; padding: 9px 6px; }
.stat b { font-size: 1.125rem; font-weight: 700; }
.stat span { font-size: .75rem; line-height: 1.4; }
.side { background: #0b1828; box-shadow: none; }
.toolbar { background: #0b1828; padding: 10px 12px; gap: 8px; flex: 0 0 auto; }
.property-search-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.property-search-row .search { flex: 1; min-width: 0; height: 44px; min-height: 44px; }
.property-search-row .add-btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: var(--cyan); border-color: var(--cyan); color: #03111b; font-size: 1.5rem; line-height: 1; }
.sheet-handle { color: var(--muted); font-size: .8125rem; }
.search { min-height: 46px; border-radius: 10px; background: var(--control); color: var(--text); }
.search::placeholder { color: #a3b5c8; }
.seg { gap: 7px; }
.seg button { padding: 6px 10px; min-height: 36px; font-weight: 600; }
.seg button.active { background: var(--cyan); border-color: var(--cyan); color: #03111b; }
.list { padding-left: 12px; padding-right: 12px; }
.card { padding: 16px; margin-bottom: 12px; border-radius: 14px; background: var(--panel); box-shadow: none; }
.card-top { gap: 12px; }
.card-top > div:last-child { min-width: 0; }
.num { flex-basis: 34px; height: 34px; font-size: .875rem; font-weight: 700; }
.card h2 { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; margin: 0 0 5px; overflow-wrap: anywhere; }
.address { color: var(--muted); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.schedule, .patrol-type { font-size: .75rem; line-height: 1.4; padding: 4px 8px; border-radius: 7px; font-weight: 650; }
.schedule { background: #21354b; }
.notes { font-size: 1rem; color: #b9c8d7; line-height: 1.5; margin-top: 12px; }
.notes b { color: #d7e2ed; font-weight: 600; }
.card-actions { display: grid; gap: 6px; margin-top: 12px; }
.card-status-actions, .card-utility-actions, .card-admin-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.card-status-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.card-actions button { min-width: 0; min-height: 36px; margin: 0; padding: 6px 5px; font-size: .875rem; line-height: 1.25; border-radius: 8px; }
.card-status-actions button { min-height: 38px; }
.card-admin-actions { border-top: 1px solid var(--line); padding-top: 6px; }
.card-admin-actions button { min-height: 32px; padding: 5px; background: transparent; border-color: transparent; }
.card-admin-actions .edit-btn { color: #c5d8e8; }
.card-admin-actions .hold-btn { color: #e1c895; }
.status-btn.active.visited { background: #1d3c32; color: #b7ebce; border-color: #40765c; }
.status-btn.active.skipped { background: #3b3020; color: #f5d49d; border-color: #806437; }
.status-btn.active.followup { background: #392331; color: #ffd0d7; border-color: #814655; }
.nav-btn, .notes-btn { color: #c7e7f5; }
.notes-btn.has-note { color: #d7f6ff; background: #153447; border-color: #397b91; }
.hold-banner { padding: 10px 12px; font-size: .875rem; letter-spacing: .02em; }
.hold-btn.active { background: #4c5663; border-color: #82909f; }
.card.on-hold { background: #18212c; }
.card.on-hold .notes { color: #bec9d5; }
.map-quick-view { background: #101e2e; border-color: var(--line); box-shadow: 0 8px 24px #0005; border-radius: 14px; }
.quick-kicker { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
.map-quick-view h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.quick-address { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.quick-description { font-size: 1rem; line-height: 1.5; color: #c5d2df; }
.quick-actions { gap: 8px; }
.quick-actions button { min-height: 44px; font-size: .875rem; border-radius: 10px; box-shadow: none; }
.quick-badges span { font-size: .75rem; }
.modal-card, .account-menu, .auth-panel, .confirm-card {
  background: #101e2e; border-color: #30465d; box-shadow: 0 12px 36px #0006; border-radius: 16px;
}
.modal-card { padding: 20px; }
.modal-card h2 { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }
.modal-address, .account-menu span { font-size: .875rem; line-height: 1.5; }
.form-field { gap: 7px; margin: 14px 0; }
.form-field label, .auth-field label { font-size: .875rem; font-weight: 600; color: #cbd8e5; }
.form-field input, .form-field textarea, .form-field select, .modal-card textarea, .auth-field input {
  min-height: 46px; background: #0b1929; border-color: #344c64; border-radius: 10px; color: var(--text); font-size: 1rem;
}
.form-field textarea, .modal-card textarea { line-height: 1.5; }
.address-field { background: #112a3b; border-color: #335c70; }
.address-field input { background: #0b1929; }
.address-help, .field-hint, .note-meta, .form-error, .auth-help { font-size: .8125rem; line-height: 1.5; }
.address-suggestions { background: #0e2032; border-color: #344c64; border-radius: 10px; box-shadow: 0 8px 24px #0006; }
.address-suggestion { font-size: .875rem; line-height: 1.45; padding: 12px; }
.modal-actions { gap: 10px; padding-top: 8px; }
.modal-actions button, .account-actions button, .confirm-actions button, .auth-submit {
  min-height: 46px; font-size: .875rem; font-weight: 650; border-radius: 10px; box-shadow: none;
}
.modal-actions .save-property, .modal-actions .save-note, .account-card .save-account, .auth-submit {
  background: var(--cyan); color: #03111b; border-color: var(--cyan);
}
.account-card, .confirm-card { padding: 0; }
.account-card-head { background: #12263a; }
.account-heading p, .account-message, .auth-message { font-size: .875rem; line-height: 1.5; }
.account-role-lock, .account-role { font-size: .75rem; }
.dispatch-alert-setting { padding: 10px; font-size: .875rem; min-height: 44px; }
.dispatch-alert-help { margin: 8px 0 12px; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.dispatch-alert-setup { width: 100%; min-height: 40px; margin-bottom: 10px; border: 1px solid #344f68; border-radius: 9px; background: #142638; color: #c9f4ff; font-size: .875rem; }
.dispatch-alert-setup[hidden] { display: none; }
.account-form-body { padding: 4px 20px 20px; }
.password-title { font-size: .875rem; font-weight: 650; }
.confirm-card h2 { font-size: 1.1875rem; }
.confirm-property, .confirm-warning strong, .confirm-warning span { font-size: .875rem; line-height: 1.5; }
.confirm-actions { background: #0d1b2b; }
.auth-gate { background: #07111f; }
.auth-tabs { background: #101e2e; border-color: var(--line); }
.auth-tabs button { font-weight: 650; font-size: .875rem; }
.auth-link { font-size: .875rem; }
.auth-panel { padding: 24px; }
.space-call-card { background: #101e2e; border-color: var(--line); box-shadow: none; border-radius: 14px; padding: 18px; }
details.space-call-card { padding: 0; overflow: hidden; }
.space-call-summary { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; list-style: none; }
.space-call-summary::-webkit-details-marker { display: none; }
.space-call-summary::marker { content: ''; }
.space-call-summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; border-radius: 12px; }
.call-summary-main { flex: 1; min-width: 0; }
.space-call-summary h3 { font-size: 1.0625rem; line-height: 1.35; margin: 8px 0 6px; overflow-wrap: anywhere; }
.call-summary-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.call-summary-meta strong { color: #dce9f4; font-size: .875rem; overflow-wrap: anywhere; }
.call-summary-control { flex: 0 0 76px; text-align: center; color: #bceeff; font-size: .8125rem; line-height: 1.4; }
.call-summary-chevron { display: block; font-size: 1.25rem; line-height: 1; margin-top: 4px; }
.call-collapse-label { display: none; }
.space-call-card[open] > .space-call-summary .call-expand-label { display: none; }
.space-call-card[open] > .space-call-summary .call-collapse-label { display: inline; }
.space-call-card[open] > .space-call-summary .call-summary-chevron { transform: rotate(180deg); }
.space-call-card[open] > .space-call-summary { border-bottom: 1px solid var(--line); }
.space-call-body { padding: 16px; }
.space-call-card:not([open]) > .space-call-body { display: none; }
.space-call-head { gap: 12px; }
.space-call-head h3 { font-size: 1.125rem; line-height: 1.35; }
.space-call-address, .space-call-time { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.space-call-status, .space-call-priority { font-size: .8125rem; font-weight: 650; }
.space-call-vehicle { gap: 10px; }
.space-call-vehicle > div { background: #0b1929; border-color: var(--line); border-radius: 10px; padding: 12px; }
.space-call-vehicle span, .space-call-detail b { color: #acbfd2; font-size: .75rem; letter-spacing: .05em; font-weight: 600; }
.space-call-vehicle strong { font-size: 1rem; line-height: 1.4; }
.space-call-detail { color: #d1dce7; font-size: 1rem; line-height: 1.5; }
.space-call-actions { gap: 8px; }
.space-call-actions button { min-height: 46px; font-size: .875rem; border-radius: 10px; box-shadow: none; font-weight: 650; }
.space-call-actions .primary-action { background: var(--cyan); color: #03111b; }
.call-photos { background: #0b1929; border-color: var(--line); padding: 14px; }
.call-photos-head strong { font-size: .9375rem; }
.call-photos-head span, .photo-count, .photo-phase-title { font-size: .75rem; }
.photo-phase, .photo-phase.after { background: #112337; border-color: #304960; }
.photo-upload { min-height: 46px; font-size: .875rem; border-radius: 9px; }
.photo-upload.camera, .photo-upload.gallery { background: #19334a; color: #dbeaf5; border-color: #3c5b74; }
.photo-phase.after .photo-upload.camera { background: #18372f; border-color: #37624e; color: #c6eedc; }
.photo-locked, .photo-upload-status, .photo-queue-note, .photo-retry { font-size: .875rem; line-height: 1.5; }
.call-timeline summary { font-size: .875rem; }
.call-timeline-entry, .call-timeline-entry strong { font-size: .8125rem; line-height: 1.5; }
.call-progress-step span { font-size: .75rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; font-weight: 550; color: #a7bbce; }
.call-timeline li { font-size: .8125rem; line-height: 1.5; }
.app-toast { font-size: .875rem; line-height: 1.45; }
@media (hover:hover) {
  .card-actions button:not(:disabled):hover, .icon-btn:not(:disabled):hover, .seg button:not(.active):hover { border-color: #52718d; }
}
@media (max-width:760px) {
  header { gap: 8px; padding: 10px; }
  .badge.account-button { flex: 0 0 38px; width: 38px; height: 40px; }
  .title h1 { font-size: .9375rem; line-height: 1.25; }
  .head-actions { gap: 5px; }
  .head-actions .icon-btn { min-height: 42px; padding: 7px 8px; font-size: .8125rem; white-space: nowrap; }
  .stat { padding: 8px 4px; }
  .stat b { font-size: 1.0625rem; }
  .stat span { font-size: .75rem; }
  .toolbar { padding: 0 10px 8px; gap: 7px; }
  .sheet-handle { height: 38px; min-height: 38px; }
  .list { padding-left: 10px; padding-right: 10px; }
  .card { padding: 14px; }
  .card h2 { font-size: 1rem; }
  .card-top { gap: 10px; }
  .side { box-shadow: 0 -4px 16px #0003; }
  .modal-card { padding: 16px; }
  .account-card, .confirm-card { padding: 0; }
  .quick-actions button { padding: 9px 8px; }
  .space-call-head { display: block; }
  .space-call-time { display: block; margin-top: 8px; }
  .call-progress { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 8px; }
}
@media (max-width:370px) {
  header { gap: 6px; padding: 9px 8px; }
  .head-actions { gap: 4px; }
  .head-actions .icon-btn { padding-left: 6px; padding-right: 6px; }
}

/* Keep long plate lists readable without hiding the close action. */
#notesModal {
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#notesModal .modal-card {
  width: min(760px, 100%);
  height: min(780px, 84vh);
  height: min(780px, 84dvh);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0;
  padding: 20px;
}
#notesTitle { flex: 0 0 auto; font-size: 1.375rem; line-height: 1.3; overflow-wrap: anywhere; }
#notesAddress { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
#notesModal #notesText {
  flex: 1 1 0;
  min-height: 0;
  resize: none;
  overflow-y: auto;
  padding: 16px;
  font-size: 1.25rem;
  line-height: 1.65;
  color: #f5f8ff;
  -webkit-overflow-scrolling: touch;
}
#notesModal #notesText[readonly] { font-size: 1.375rem; font-weight: 500; }
#notesModal .note-meta { flex: 0 0 auto; font-size: .875rem; line-height: 1.4; }
#notesModal .modal-actions { flex: 0 0 auto; padding-top: 8px; }
#notesModal .modal-actions button { min-height: 48px; font-size: 1rem; }
@media (max-width:520px) {
  #notesModal .modal-card { height: 88vh; height: 88dvh; padding: 16px; }
}
.auth-name-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.auth-name-fields[hidden] { display: none; }
@media (max-width:390px) { .auth-name-fields { grid-template-columns: 1fr; } }