/* Ward DoorKnock Web — app.css (ver5.5, phone-first)
      Build: 2026-01-26 (v5.5 major update)
   Goals:
   - iPhone-first sizing (no horizontal scroll, no iOS zoom on inputs)
   - clear selected states (window buttons / tabs)
   - consistent spacing on phone/tablet/desktop
   - works with both .wrap and .container pages (back-compat)
*/

:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e4e7ec;

  --accent:#2563eb;      /* blue */
  --accent2:#16a34a;     /* green */
  --danger:#dc2626;      /* red */
  --warn:#f59e0b;        /* amber */

  --radius:16px;
  --shadow:0 6px 20px rgba(16,24,40,.08);
  --tap:44px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.35;
}

/* Layout containers */
.wrap, .container{
  max-width: 920px;
  margin: 0 auto;
  padding: 14px 12px 28px;
}

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: sticky;
  top: 8px;
  z-index: 10;
  /* backdrop-filter removed (iOS/iPadOS hit-testing bug) */
}

.title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row{ display:flex; gap:10px; align-items:center; }
.row.wrap{ flex-wrap:wrap; }

/* Small utilities used across pages */
.brand{ font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.meta{ color: var(--muted); font-size: 13px; }

/* Version meta inside topbar title */
.title .meta{ margin-left:8px; font-weight:600; }
.small{ color: var(--muted); font-size: 13px; }

/* Generic 2-column layout helper (used on Contacts page) */
.grid{ display:grid; grid-template-columns: 1fr; gap:14px; align-items:start; }
@media (min-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* Visits page layout (desktop + mobile): form row above saved contacts */
.visits-layout{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
}

.visit-layout .card{ margin-top:0; }



/* Contacts page layout (desktop + mobile): form row above saved contacts */
.contacts-layout{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
}
.contacts-layout .card{ margin-top:0; }

/* Contacts: bulk actions + row selection */
.contacts-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 10px;
}
.contacts-actions-left,
.contacts-actions-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.table.contacts-table{ min-width: 560px; }
.contacts-table .sel-col{ width: 42px; text-align:center; }
.contacts-table td.sel-col{ vertical-align: middle; }
.contacts-table tr.contact-row{ cursor:pointer; }
.contacts-table tr.contact-row:hover td{ background: #f9fafb; }
.contacts-table tr.contact-row.selected td{ background: #fff7cc; }
.contacts-table tr.contact-row.highlight{ outline:2px solid #16a34a; }

@media (max-width: 480px){
  .contacts-actions-right{ width:100%; justify-content:stretch; }
  .contacts-actions-right .btn{ flex:1 1 auto; }
}

/* Table helpers (used on Contacts + Reports) */
.table-wrap{
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  background:#fff;
}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 680px; /* enables horizontal scroll on phones */
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align: top;
}
.table thead th{
  background:#f9fafb;
  font-size: 13px;
  font-weight: 700;
}

/* Form helpers */
.contacts-form{ margin-top: 10px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top: 10px; }

/* Contacts form: use grid rows for consistent label/input alignment */
.contacts-form .form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:start;
}
.contacts-form .form-row .field{ min-width:0; }
.contacts-form .field label{ font-size:13px; }

/* Print helpers */
@media print{
  .no-print, .noprint{ display:none !important; }
}
.cell{ flex:1 1 0; min-width:0; }
.k{ color: var(--muted); font-size: 13px; }
.v{ font-weight: 600; }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-top: 12px;
}

/* Small helpers used across pages */
.hr{ height:1px; background:var(--border); margin: 12px 0; }

.stat{ flex:1 1 160px; min-width: 0; }
.stat .n{ font-size: 26px; font-weight: 800; line-height: 1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat .lbl{ color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.2; overflow-wrap:anywhere; word-break:break-word; }

details summary{ cursor:pointer; }
details summary::-webkit-details-marker{ display:none; }
details summary::before{ content:'▸'; display:inline-block; margin-right:8px; color: var(--muted); }
details[open] summary::before{ content:'▾'; }
.card-h{
  font-weight:700;
  margin-bottom: 10px;
}
.sub{ color:var(--muted); font-size: 14px; }

/* Banners / notices */
.notice, .banner{
  background: #eef2ff;
  border:1px solid #dbeafe;
  color:#1e3a8a;
  padding:12px 12px;
  border-radius: 14px;
  margin-top: 12px;
}
.notice.warn, .banner.warn{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
}
.notice.danger, .banner.danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  text-decoration:none;
  font-weight: 650;
  font-size: 15px;
  white-space: nowrap;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ filter: brightness(.98); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: var(--accent);
  border-color: rgba(37,99,235,.35);
  color: #fff;
}
.btn.primary.on, .btn.on, .seg-btn.on{
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.btn.good{
  background: var(--accent2);
  border-color: rgba(22,163,74,.35);
  color:#fff;
}
.btn.danger{
  background: var(--danger);
  border-color: rgba(220,38,38,.35);
  color:#fff;
}
.btn.small{
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
}

/* Segmented controls (window selectors) */
.seg{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.seg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:650;
  text-decoration:none;
}
.seg-btn.on{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
  color:#1d4ed8;
}
.seg-btn.off{ opacity:.45; pointer-events:none; }

/* Inputs */
/* Reports date range
   iPad/Safari note: date inputs can have intrinsic minimum widths; use minmax(0,1fr)
   plus min-width:0 on grid children to prevent overflow. */
.date-range{
  display:grid;
  width:100%;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.date-range .field{ min-width:0; }
.field label{ display:block; font-weight:600; font-size:14px; color: var(--muted); margin: 0 0 6px; }
.hint{ font-size:12px; color: var(--muted); margin-top:6px; line-height:1.2; }
input[type="date"]{ min-width:0; }
@media (max-width: 1240px){
  /* iPad portrait + phones: stack fields for clarity and to avoid edge overflow */
  .date-range { grid-template-columns: 1fr; }
}
.input, input[type="text"], input[type="search"], input[type="date"], select, textarea{
  width: 100%;
  min-height: var(--tap);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
  color: var(--text);
  font-size: 16px; /* prevents iOS zoom */
  outline: none;
}
textarea{ min-height: 110px; resize: vertical; }
.input:focus, textarea:focus, select:focus{
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

.field-error{
  border-color: rgba(245,158,11,.9) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18) !important;
}

/* Make input+button rows behave on phones */
.form-row, .row.form{
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap:wrap;
}

.form-row .input{ flex: 1 1 260px; min-width:0; touch-action: manipulation; }
.form-row .btn{ flex: 0 0 auto; white-space:nowrap; touch-action: manipulation; }


/* Search page: make the Search card a true 50/50 layout on desktop (with button as a 3rd column).
   Mobile/tablet: stack to 1 column so the "Incoming Address" label never truncates. */
.search-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.search-grid.no-mode{
  grid-template-columns: minmax(0,1fr) auto;
}
.search-col{ min-width:0; }
.search-stack{ display:flex; flex-direction:column; gap:8px; }
.search-actions{ display:flex; align-items:end; }

@media (max-width: 720px){
  .search-grid{ grid-template-columns: 1fr; }
  .search-grid.no-mode{ grid-template-columns: 1fr; }
  .search-actions .btn{ width:100%; }
}

/* Lists */
.list{ list-style:none; padding:0; margin: 0; }
.rowlink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  border:1px solid transparent;
}
.rowlink:hover{ background:#f9fafb; border-color: var(--border); }
.rowlink:active{ background:#eef2ff; }
.big{ font-weight:700; font-size: 16px; }
.muted{ color:var(--muted); font-size: 13px; }
.chev{ color:var(--muted); font-size: 22px; line-height: 1; }

/* Tables */
.tbl{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid var(--border);
}
.tbl th, .tbl td{
  padding: 10px 10px;
  border-bottom:1px solid var(--border);
  vertical-align: top;
  font-size: 14px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.tbl th{ text-align:left; color: var(--muted); font-weight:700; background:#fafafa; }
.tbl tr:last-child td{ border-bottom:0; }

/* Links */
a.link{ color: var(--accent); text-decoration:none; font-weight:650; }
a.link:hover{ text-decoration:underline; }

/* Utilities */
.spacer{ height: 12px; }

/* Phone-first tweaks */
@media (max-width: 480px){
  .wrap, .container{ padding: 10px 10px 22px; }
  .topbar{ padding: 10px; border-radius: 14px; flex-wrap:wrap; }
  /* Topbar: title on its own row; buttons in a 2-column grid */
  .title{ flex:0 0 100%; white-space:normal; }
  .actions{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    justify-content:stretch;
  }
  .row{ width:100%; }
  
  /* Mobile: stack any row marked stack-mobile (e.g., key entry + action buttons) */
  .row.stack-mobile{
    flex-direction: column;
    align-items: stretch !important;
  }
  .row.stack-mobile > *{
    width: 100% !important;
  }
  .row.stack-mobile input[type="hidden"]{
    width: auto !important;
  }

.form-row, .row.form{
    flex-direction: column;
    align-items: stretch;
  }
  /* Fix iPhone: search box was tall because flex-basis applied in column layout */
  .form-row .input{ flex: 0 0 auto; }

  .btn{ width:100%; }

  /* Mobile (iPhone): keep Log Visit button from overflowing; place it on its own centered row */
  form[action="log_visit.php"].row{
    flex-wrap: wrap;
    align-items: center;
  }
  form[action="log_visit.php"].row select,
  form[action="log_visit.php"].row input[type="text"]{
    min-width: 0;
  }
  form[action="log_visit.php"].row .btn{
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 6px 0 0;
  }

  /* Contacts form rows stack on small phones */
  .contacts-form .form-row{ grid-template-columns: 1fr; }

  /* Contacts actions: avoid viewport overflow */
  .contacts-form .btn-row{ flex-direction:column; align-items:stretch; justify-content:stretch; }
  .seg{ gap:8px; }
  .seg-btn{ flex:1 1 45%; }
  .tbl th:nth-child(2), .tbl td:nth-child(2),
  .tbl th:nth-child(3), .tbl td:nth-child(3){
    display:none; /* on small phones, keep it ultra concise */
  }
}

/* Tablet */
@media (min-width: 768px){
  .wrap, .container{ padding: 18px 16px 34px; }
  .title{ font-size: 20px; }
}


/* /* Dashboard-first helpers (v5.5) */
.viewing-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 10px 0 12px;
  padding: 8px 10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  font-size: 14px;
}
.viewing-pill strong{ font-weight: 800; } */

.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px){
  .stats-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Quick stats grid aliases (supports older dashboard markup)
   If your dashboard uses <div class="row quick-stats"> or id="quick-stats",
   this ensures the same grid behavior as .stats-grid. */
.row.stats-grid,
.quick-stats, .quickstats,
#quick-stats, #quickstats,
.row.quick-stats, .row.quickstats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 720px){
  .row.stats-grid,
  .quick-stats, .quickstats,
  #quick-stats, #quickstats,
  .row.quick-stats, .row.quickstats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Shortcut buttons */
.shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Mobile-friendly recent notes list */
.notes-list{ margin-top: 10px; display:flex; flex-direction:column; gap:10px; }
.note-item{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  background:#fff;
}
.note-top{ display:flex; gap:10px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.note-when{ font-weight:700; font-size: 14px; }
.note-who{ color: var(--muted); font-size: 13px; }
.note-addr{ margin-top: 6px; }
.note-meta{ margin-top: 6px; color: var(--muted); font-size: 13px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid var(--border);
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  background: #fff;
}
.badge.warn{
  border-color: rgba(233, 62, 83, 0.45);
  background: rgba(245,158,11,.10);
}


.badge.visited{
  border-color: rgba(220,38,38,.45);
  background: rgba(220,38,38,.10);
  color: #84b883;
}

.list li.visited .rowlink{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.06);
}
.list li.visited .rowlink:hover{
  border-color: rgba(220,38,38,.55);
  background: rgba(220,38,38,.09);
}

/* Select styling: make dropdowns match input frames across browsers */
select.input, select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px; /* room for arrow */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  /* subtle chevron (matches muted text color) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
select.input::-ms-expand, select::-ms-expand{ display:none; }