:root {
  --blue:#2563eb;
  --violet:#7c3aed;
  --bg:#eef5ff;
  --card:#ffffff;
  --ink:#102033;
  --muted:#667085;
  --line:#d8e2f0;
  --green:#16a34a;
  --red:#dc2626;
  --grad:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, #dbe6ff 0%, transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, #efe3ff 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}

button, input, select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }

@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

#app { min-height:100vh; }

.login-screen {
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  padding:48px 28px 64px;
  animation:rise .5s ease both;
}

.logo {
  width:74px;
  height:74px;
  border-radius:22px;
  background:var(--grad);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:38px;
  box-shadow:0 12px 28px #2563eb40;
}

h1 { font-size:34px; margin:24px 0 8px; letter-spacing:-.5px; line-height:1.12; }
h3 { margin-top:0; }
p { color:var(--muted); line-height:1.5; }

label { display:block; font-weight:800; margin:16px 0 7px; }

input, select {
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  background:#f8fbff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus {
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px #2563eb22;
  background:#fff;
}

.primary {
  width:100%;
  margin-top:18px;
  border:0;
  border-radius:16px;
  padding:15px 18px;
  font-weight:900;
  color:#fff;
  background:var(--grad);
  box-shadow:0 10px 24px #2563eb40;
  transition:transform .15s ease, box-shadow .2s ease;
}
.primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px #2563eb55; }
.primary:active { transform:translateY(0); }

.secondary {
  width:100%;
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 18px;
  font-weight:800;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.secondary:hover { border-color:var(--blue); background:#f8fbff; }

.danger {
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:16px;
  padding:14px 18px;
  font-weight:900;
  color:#fff;
  background:var(--red);
}

.topbar {
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 16px #0001;
  border-bottom:1px solid #ffffff80;
}
.topbar-action { width:auto; margin-top:0; white-space:nowrap; }

/* Phase 2 — tab navigation between Team and Apartments */
.tabbar {
  position:sticky;
  top:80px;
  z-index:4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:760px;
  margin:0 auto;
  padding:12px 18px 0;
}
.tab {
  flex:1 1 auto;
  min-width:92px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 14px;
  font-weight:800;
  color:var(--muted);
  background:#fff;
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab.active {
  color:#fff;
  border-color:transparent;
  background:var(--grad);
  box-shadow:0 8px 20px #2563eb33;
}

/* Home tile "Show More / Show Less" toggle.
   When the grid is collapsed the secondary tiles are hidden; the toggle button
   always sits on its own row beneath the tile grid. */
.tabbar.tiles-collapsed .tab-secondary { display:none; }
.tiles-toggle {
  flex:1 1 100%;
  margin-top:2px;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:9px 14px;
  font-weight:800;
  color:var(--blue);
  background:#fff;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.tiles-toggle:hover { border-color:var(--blue); background:#f1f6ff; }

/* On phones and tablets the top tile bar duplicates the slide-out sidebar
   drawer (☰), which is the primary navigation on small screens, so it is
   hidden there and the page content rises directly under the header. The
   desktop layer (min-width:1025px) re-displays .tabbar as the left nav rail,
   where it is the only navigation surface and must stay. */
@media (max-width:1024px) {
  .tabbar { display:none; }
}

/* Phase 2 — apartment directory cards */
.apt-card { cursor:pointer; transition:transform .15s ease, box-shadow .2s ease; }
.apt-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px #2563eb22; }
.link-cue { margin-top:8px; color:var(--blue); font-weight:800; }

.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:52px; height:52px; font-size:26px; border-radius:17px; }
.brand h2 { margin:0; font-size:20px; letter-spacing:-.3px; }

.page {
  max-width:760px;
  margin:0 auto;
  padding:24px 18px 80px;
  animation:rise .5s ease both;
}

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  margin:18px 0;
  box-shadow:0 8px 22px #00000008;
}

.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.item {
  background:#f8fbff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-top:10px;
}

.badge {
  display:inline-block;
  margin-bottom:6px;
  background:#eaf7ef;
  color:var(--green);
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:900;
}

.small { font-size:13px; color:var(--muted); line-height:1.5; }

@media (max-width:650px) {
  .grid { grid-template-columns:1fr; }
  h1 { font-size:29px; }
}

/* Phase 3 — Contacts */
.checkline {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  margin:14px 0 0;
}
.checkline input { width:auto; }

/* The sub-tabs inside the Contacts page are not sticky like the top nav. */
.contacts-tabs {
  position:static;
  top:auto;
  max-width:none;
  margin:18px 0 0;
  padding:0;
}

.contact-card .contact-name { font-size:18px; }
.phone-link { color:var(--blue); font-weight:800; text-decoration:none; }
.phone-link:hover { text-decoration:underline; }

.next-event { margin-top:8px; }

.contact-icons { display:flex; gap:10px; margin:12px 0 4px; }
.icon-btn {
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fbff;
  font-size:20px;
  line-height:1;
  transition:border-color .2s ease, transform .12s ease, background .2s ease;
}
.icon-btn:hover { border-color:var(--blue); background:#fff; transform:translateY(-2px); }

.toggle-details { margin-top:12px; }

.contact-details { margin-top:8px; }
.contact-details .history {
  margin:8px 0 0;
  padding-left:18px;
  color:var(--ink);
  font-size:13px;
  line-height:1.7;
}
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.detail-actions .secondary { width:auto; margin-top:0; flex:1; min-width:140px; }

.pager {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:18px 0 0;
}
.pager-btn { width:auto; margin-top:0; padding:10px 14px; }
.page-num { min-width:44px; }
.page-num.active {
  color:#fff;
  border-color:transparent;
  background:var(--grad);
}

/* ----------------------------------------------------------------------
   Phase 4 — Locations, map dots, slots, and apartment grid
   --------------------------------------------------------------------- */

.dot-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.map-dot {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
  box-shadow:0 0 0 2px #ffffff, 0 1px 3px #1020331a;
}
.map-dot.green  { background:var(--green); }
.map-dot.yellow { background:#eab308; }
.map-dot.red    { background:var(--red); }
.map-dot.blue   { background:var(--blue); }

.loc-card { cursor:pointer; transition:border-color .2s ease, transform .12s ease; }
.loc-card:hover { border-color:var(--blue); transform:translateY(-2px); }
.loc-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.loc-photo {
  width:100%;
  max-height:200px;
  object-fit:cover;
  border-radius:14px;
  margin:10px 0;
  background:#eef2f9;
}
.loc-full { color:var(--red); font-weight:700; }
.link-cue { color:var(--blue); margin-top:8px; }

.google-result { background:#f8fbff; }

.btn-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
}

/* Slots */
.slot-row { display:flex; gap:12px; flex-wrap:wrap; }
.slot {
  flex:1;
  min-width:140px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#fff;
}
.slot.open    { border-color:#bbf7d0; background:#f0fdf4; }
.slot.locked  { background:#f5f6f8; color:var(--muted); }
.slot.taken   { border-color:#fecaca; background:#fff5f5; }
.slot.taken.mine { border-color:var(--blue); background:#eff4ff; }
.slot b { display:block; margin-bottom:4px; }
.slot .secondary, .slot .primary { width:100%; margin-top:10px; }
.slot-members {
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  text-align:left;
}
.slot-members .checkline { margin:4px 0; }
.slot-full {
  color:var(--red);
  font-weight:700;
  margin-bottom:10px;
  text-align:center;
}
/* Group Leader + Evangelist details inside a taken slot tile */
.slot-people { margin:6px 0 4px; text-align:left; }
.slot-people .small { margin:2px 0; }
.slot-people b { font-weight:700; }

/* "Your team on the field" map panel (Group Leader / Super Admin) */
.team-field-card h3 { margin-top:0; }

/* Locations tab — Search / Map View / Taken Locations sub-tabs */
.loc-subtabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 12px; }
.loc-subtab {
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; padding:9px 16px; font-weight:800; font-size:13px; cursor:pointer;
}
.loc-subtab:hover { border-color:var(--blue); color:var(--ink); }
.loc-subtab.active { color:#fff; border-color:transparent; background:var(--grad); box-shadow:0 8px 18px #2563eb33; }

/* Live interactive Google Map (Map View) */
.live-field-map {
  width:100%;
  height:420px;
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#eef2f7;
}
.map-popup { max-width:260px; font-size:13px; line-height:1.4; }
.map-popup-title { font-weight:800; font-size:14px; margin-bottom:4px; }
.map-popup .small { margin:2px 0; }

/* Taken Locations cards */
.taken-loc-card .loc-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.field-filter { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.field-filter select {
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fcfdff;
  font:inherit;
}
.team-field-row {
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  margin-top:10px;
  background:#fff;
}
.team-field-people { list-style:none; margin:6px 0 0; padding:0; }
.team-field-people li {
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0;
  font-size:14px;
}
.team-field-people .map-dot { flex:0 0 auto; }

/* Group Leader Safety Map — live Google map image + numbered marker badges
   that line up with the legend rows below it. */
.safety-map-wrap {
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#eef2f7;
}
.safety-map { display:block; width:100%; height:auto; }
.safety-pin {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  margin-right:4px;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}

/* Apartment auto-fill working panel */
.resume {
  background:#f0f7ff;
  border:1px solid #cfe0ff;
  border-radius:12px;
  padding:10px 12px;
  margin:12px 0;
}
.resume .secondary { width:auto; margin:6px 8px 0 0; padding:8px 12px; }

.building-summary {
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:14px 0;
  font-size:14px;
  color:var(--ink);
}

.apt-grid {
  display:grid;
  /* Whiteboard: rows with at least 5 columns. auto-fill keeps ≥5 on a phone and
     adds more columns on wider screens, wrapping into rows automatically. */
  grid-template-columns:repeat(auto-fill, minmax(52px, 1fr));
  gap:8px;
  margin:8px 0 14px;
}
.apt-grid .apt-box { width:auto; }
.apt-box {
  width:52px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  background:#fff;
}
.apt-box.white  { background:#ffffff; }
.apt-box.green  { background:#dcfce7; border-color:#86efac; }
.apt-box.gray   { background:#e5e7eb; border-color:#cbd5e1; color:#475569; }
.apt-box.blue   { background:#dbeafe; border-color:#93c5fd; }
.apt-box.red    { background:#fee2e2; border-color:#fca5a5; }
.apt-box.orange { background:#ffedd5; border-color:#fdba74; }

/* ----------------------------------------------------------------------
   Phase 4 redesign — single scrolling Locations page
   (7-day weather, category cards, city selector, result cards)
   --------------------------------------------------------------------- */

/* 7-day weather strip */
.weather-card { background:linear-gradient(135deg,#eff4ff 0%,#f6f0ff 100%); }
.wx-place { margin:0 0 10px; font-weight:800; color:var(--ink); }
.wx-row {
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.wx-day {
  flex:0 0 auto;
  min-width:78px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 8px;
  box-shadow:0 4px 12px #2563eb12;
}
.wx-name { font-weight:800; font-size:13px; }
.wx-icon { font-size:28px; line-height:1.4; }
.wx-temps { display:flex; gap:6px; justify-content:center; align-items:baseline; }
.wx-hi { font-weight:900; }
.wx-lo { color:var(--muted); font-size:13px; }
.wx-cond { font-size:11px; color:var(--muted); margin-top:2px; }

/* Category cards */
.category-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.cat-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 8px;
  background:#f8fbff;
  font-weight:800;
  color:var(--ink);
  transition:border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.cat-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 10px 22px #2563eb1f; }
.cat-card.active {
  color:#fff;
  border-color:transparent;
  background:var(--grad);
  box-shadow:0 10px 24px #2563eb40;
}
.cat-icon { font-size:24px; line-height:1; }
.cat-label { font-size:12px; text-align:center; line-height:1.2; }

@media (max-width:650px) {
  .category-grid { grid-template-columns:repeat(2,1fr); }
}

/* City selector pills */
.city-pills { display:flex; flex-wrap:wrap; gap:8px; }
.city-pill {
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  font-weight:800;
  color:var(--muted);
  background:#fff;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.city-pill:hover { border-color:var(--blue); color:var(--ink); }
.city-pill.active {
  color:#fff;
  border-color:transparent;
  background:var(--grad);
  box-shadow:0 8px 18px #2563eb33;
}

/* Find-a-Location two-step picker (Category → City) */
.loc-steps { margin-top:12px; display:flex; flex-direction:column; gap:12px; }
.loc-step-label {
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

/* Results header + cards */
.results-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.results-head h3 { margin:0; }
.result-card { background:#fdfeff; }
.loc-photo-empty {
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  height:140px;
}
.result-dist { min-height:18px; color:var(--blue); font-weight:700; }
.result-slots { margin-top:12px; }
.badge-new { background:#eef2ff; color:var(--violet); }

/* Phase 5 enhancement — Contact Quick Actions row beside each contact */
.quick-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 4px;
}
.qa-btn {
  flex:1 1 auto;
  min-width:104px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 12px;
  font-weight:800;
  font-size:14px;
  color:var(--ink);
  background:#f8fbff;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.qa-btn:hover { border-color:var(--blue); background:#fff; transform:translateY(-2px); }
.qa-btn:active { transform:translateY(0); }
.qa-primary {
  color:#fff;
  border-color:transparent;
  background:var(--grad);
  box-shadow:0 8px 18px #2563eb33;
}
.qa-primary:hover { background:var(--grad); box-shadow:0 12px 24px #2563eb44; }
.qa-transfer { color:var(--violet); border-color:#e4dbff; background:#f6f3ff; }
.qa-transfer:hover { border-color:var(--violet); background:#fff; }

/* Phase 5 enhancement — fast transfer panel */
.transfer-overlay {
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#10203366;
  backdrop-filter:blur(4px);
  padding:16px;
}
.transfer-panel {
  width:100%;
  max-width:520px;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px 22px 18px 18px;
  box-shadow:0 24px 60px #10203355;
  padding:18px;
  animation:transfer-rise .18s ease;
}
@keyframes transfer-rise { from { transform:translateY(16px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
.transfer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.transfer-head h3 { margin:0 0 2px; }
.transfer-close {
  width:38px;
  height:38px;
  flex:none;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fbff;
  font-size:16px;
  color:var(--muted);
}
.transfer-close:hover { border-color:var(--blue); color:var(--ink); }
.transfer-search {
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 14px;
  font-size:15px;
}
.transfer-results {
  margin-top:12px;
  overflow-y:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.transfer-empty { padding:18px 4px; text-align:center; }
.transfer-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:#fcfdff;
}
.transfer-who { min-width:0; }
.transfer-who b { display:inline-block; margin-right:8px; }
.transfer-badge {
  display:inline-block;
  border-radius:999px;
  padding:2px 9px;
  font-size:11px;
  font-weight:800;
  vertical-align:middle;
}
.badge-admin { background:#eef2ff; color:var(--violet); }
.badge-ev { background:#e7f1ff; color:var(--blue); }
.transfer-send { width:auto; margin-top:0; flex:none; padding:10px 14px; }
.transfer-msg-label { display:block; margin-top:14px; font-weight:800; font-size:13px; color:var(--ink); }
.transfer-msg {
  margin-top:6px;
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  resize:vertical;
}
@media (min-width:560px) { .transfer-overlay { align-items:center; } }

/* ===========================================================
   Phase 4 — shared Slot Assignment modal
   =========================================================== */
.slot-overlay {
  position:fixed;
  inset:0;
  z-index:55;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#10203366;
  backdrop-filter:blur(4px);
  padding:16px;
}
@media (min-width:560px) { .slot-overlay { align-items:center; } }
.slot-modal {
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 24px 60px #10203355;
  padding:18px;
  animation:transfer-rise .18s ease;
}
.slot-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.slot-modal-head h3 { margin:0; }
.slot-context { display:grid; gap:10px; margin:14px 0; }
.slot-context .item {
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 14px;
  background:#fcfdff;
}
.slot-context .item b { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.slot-members-label { display:block; font-weight:800; font-size:14px; margin:6px 0 8px; }
.slot-member-filter {
  width:100%; padding:10px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:12px;
  background:#fcfdff; font:inherit;
}
.slot-members-list { display:flex; flex-direction:column; gap:4px; max-height:34vh; overflow-y:auto; }
.slot-modal-actions { display:flex; gap:10px; margin-top:16px; }
.slot-modal-actions .secondary, .slot-modal-actions .primary { flex:1; margin-top:0; }

/* Slot modal — Search User (platform-wide), Date & Time and Notes. */
.slot-user-search { margin:4px 0 8px; }
.slot-user-search input { width:100%; }
.slot-user-results { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:30vh; overflow-y:auto; }
.slot-user-result {
  width:100%; text-align:left; margin-top:0;
  border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; background:#fcfdff; cursor:pointer;
}
.slot-user-result:hover { background:#f4f7ff; }
.slot-user-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.slot-user-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:#eef2ff; color:var(--violet);
  border-radius:999px; padding:5px 10px; font-size:13px; font-weight:700;
}
.slot-user-chip .chip-x {
  width:auto; margin:0; padding:0 2px; line-height:1;
  background:none; border:none; color:inherit; font-weight:800; cursor:pointer;
}
.slot-planned-input, .slot-notes-input {
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px;
  background:#fcfdff; font:inherit; margin-bottom:6px;
}
.slot-notes-input { resize:vertical; }

/* Browse — universal "Search Any Location" bar. */
.any-search-row { display:flex; gap:8px; align-items:center; }
.any-search-row input { flex:1; }
.any-search-row .primary { width:auto; margin-top:0; flex:none; padding:10px 16px; }

/* Manual "Add Location" form (Group Leader / Super Admin only). */
.manual-form { display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; }
.manual-form .field { display:flex; flex-direction:column; gap:4px; margin:0; }
.manual-form .field > span { font-size:12px; font-weight:700; color:var(--muted); }
.manual-form .field input,
.manual-form .field select,
.manual-form .field textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fcfdff;
  font:inherit;
}
.manual-form .field textarea { resize:vertical; }
.manual-latlng { display:flex; gap:12px; }
.manual-latlng > .field { flex:1; min-width:0; }
@media (max-width:480px) { .manual-latlng { flex-direction:column; } }

/* ===========================================================
   Phase 5 — Calendar
   =========================================================== */
.cal-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.cal-mode {
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
}
.cal-mode.active { background:var(--grad); color:#fff; border-color:transparent; }
.cal-new { width:auto; margin-top:0; margin-left:auto; padding:8px 16px; }
.cal-legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }
.cal-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:700; }
.cal-dot { width:10px; height:10px; border-radius:999px; display:inline-block; background:var(--muted); }
.cal-dot.blue { background:var(--blue); }
.cal-dot.green { background:var(--green); }
.cal-dot.orange { background:#f59e0b; }
.cal-dot.purple { background:var(--violet); }
.cal-dot.red { background:var(--red); }

.cal-form .cal-form-row { display:flex; gap:12px; }
.cal-form .cal-form-row > div { flex:1; }
.cal-form input, .cal-form select, .cal-form textarea { width:100%; }

.cal-month-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-month-head .secondary { width:auto; margin-top:0; padding:8px 14px; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cal-weekday { text-align:center; font-size:11px; font-weight:800; color:var(--muted); padding:4px 0; }
.cal-cell {
  aspect-ratio:1 / 1;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fcfdff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:5px 2px;
  gap:3px;
}
.cal-cell.empty { border:none; background:transparent; }
.cal-cell.today { border-color:var(--blue); background:#eff4ff; }
.cal-cell.selected { outline:2px solid var(--violet); }
.cal-num { font-size:13px; font-weight:700; }
.cal-dots { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; }

.cal-event {
  display:flex;
  gap:0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  margin-top:10px;
}
.cal-event-bar { width:6px; flex:none; background:var(--muted); }
.cal-event.blue .cal-event-bar { background:var(--blue); }
.cal-event.green .cal-event-bar { background:var(--green); }
.cal-event.orange .cal-event-bar { background:#f59e0b; }
.cal-event.purple .cal-event-bar { background:var(--violet); }
.cal-event.red .cal-event-bar { background:var(--red); }
.cal-event-body { padding:10px 14px; min-width:0; flex:1; }
.cal-event-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cal-tag { border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800; flex:none; }
.cal-tag.blue { background:#e7f1ff; color:var(--blue); }
.cal-tag.green { background:#e7f8ee; color:var(--green); }
.cal-tag.orange { background:#fef3e2; color:#b45309; }
.cal-tag.purple { background:#f3eefe; color:var(--violet); }
.cal-tag.red { background:#fdeaea; color:var(--red); }
.cal-reminders { border-color:#fde68a; background:#fffdf3; }

/* Phase 5 link — contact appointments (create form + Calendar day cards) */
.appt-block {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  margin:14px 0;
  background:#fafcff;
}
.appt-title { margin:0 0 4px; font-size:15px; }
/* A general date/time two-up row (the contact form + reschedule modal reuse it
   outside the calendar's .cal-form, so it needs its own rule). */
.cal-form-row { display:flex; gap:12px; }
.cal-form-row > div { flex:1; min-width:0; }
.appt-card .appt-line { font-size:14px; margin-top:3px; }
.appt-card .appt-line b { color:var(--muted); font-weight:700; margin-right:4px; }
.appt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.appt-actions .secondary, .appt-actions .primary, .appt-actions .danger {
  width:auto; flex:1; min-width:120px; margin-top:0; padding:10px 12px; font-size:13px;
}
.ev-status {
  display:inline-block;
  margin-top:6px;
  border-radius:999px;
  padding:2px 10px;
  font-size:11px;
  font-weight:800;
  background:#eef2ff;
  color:var(--violet);
}
.ev-status.confirmed { background:#e7f8ee; color:var(--green); }
.ev-status.cancelled { background:#fdeaea; color:var(--red); }
.contact-badge {
  display:inline-block;
  vertical-align:middle;
  border-radius:999px;
  padding:2px 9px;
  font-size:11px;
  font-weight:800;
  background:#fdeaea;
  color:var(--red);
}
.contact-inactive { opacity:.78; }

/* ----------------------------------------------------------------------
   Contacts page redesign — reference-style contact cards
   ---------------------------------------------------------------------- */
.contact-card { padding:16px; }

.contact-top { display:flex; align-items:center; gap:14px; }

.avatar {
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:17px;
  color:#fff;
  letter-spacing:.5px;
}
.avatar-c1 { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.avatar-c2 { background:linear-gradient(135deg,#34d399,#10b981); }
.avatar-c3 { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.avatar-c4 { background:linear-gradient(135deg,#60a5fa,#2563eb); }
.avatar-c5 { background:linear-gradient(135deg,#f472b6,#db2777); }
.avatar-c6 { background:linear-gradient(135deg,#22d3ee,#0891b2); }

.contact-headings { flex:1 1 auto; min-width:0; }
.contact-card .contact-name {
  font-size:17px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contact-phone { margin-top:2px; }
.contact-phone .phone-link { font-size:15px; }

.card-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.round-btn {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#eef3fb;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  color:var(--blue);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.round-btn:hover { background:#fff; transform:translateY(-2px); }
.round-btn:active { transform:translateY(0); }
.round-primary {
  background:var(--grad);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px #2563eb33;
}
.round-primary:hover { background:var(--grad); box-shadow:0 12px 24px #2563eb44; }
.round-more { color:var(--muted); font-weight:800; }
.round-more.is-open { background:var(--blue); color:#fff; border-color:transparent; }

.info-tiles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.info-tile {
  background:#f7f9fc;
  border:1px solid #eef2f8;
  border-radius:16px;
  padding:12px 10px;
  min-width:0;
  text-align:center;
}
.info-tile-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-weight:800;
  font-size:13px;
  color:var(--ink);
  margin-bottom:8px;
}
.info-ico { font-size:22px; line-height:1; }
.info-tile-date {
  font-size:12px;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
}
.info-tile-time { font-size:12px; color:var(--muted); margin-top:2px; }
.info-tile-time.muted-time { color:#c2ccdb; }

/* Per-category accents so the three tiles are scannable at a glance, matching
   the reference (green Bible Study, blue Appointment, amber Follow-Up). */
.info-tile.tile-study { background:#eafaf1; border-color:#cdeedd; }
.tile-study .info-tile-head { color:#10b981; }
.info-tile.tile-appt { background:#eaf1fe; border-color:#cfe0fb; }
.tile-appt .info-tile-head { color:var(--blue); }
.info-tile.tile-follow { background:#fef6e7; border-color:#fbe6bf; }
.tile-follow .info-tile-head { color:#f59e0b; }

.contact-more { margin-top:14px; }
.contact-more .quick-actions { margin-top:0; }
.contact-more .contact-details { margin-top:14px; }

/* Search bar — reference style with a leading magnifier icon */
.contact-search {
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 16px;
  margin-top:14px;
  box-shadow:0 2px 10px #0b1f3a0a;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-search:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 4px #2563eb22;
}
.contact-search .search-ico { color:var(--muted); font-size:16px; }
.contact-search input {
  flex:1 1 auto;
  width:auto;
  border:none;
  outline:none;
  background:transparent;
  border-radius:0;
  padding:14px 0;
  font-size:15px;
  color:var(--ink);
}
.contact-search input:focus { box-shadow:none; background:transparent; }
/* Compact "pull latest from the shared database" control that lives inside the
   search row. It never grows, so the search field keeps its width on phone,
   tablet and desktop alike. */
.contacts-refresh-btn {
  flex:0 0 auto;
  margin:0;
  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
  white-space:nowrap;
  width:auto;
  align-self:center;
}
.contacts-refresh-btn:disabled { opacity:.6; cursor:default; }

@media (max-width:420px) {
  .info-tiles { gap:8px; }
  .info-tile { padding:10px; border-radius:14px; }
  .round-btn { width:42px; height:42px; }
}

/* ===========================================================
   Phase 5 — Counters + Preaching Count wheel
   =========================================================== */
.counter-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.counter-card {
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#fcfdff 0%,#f4f8ff 100%);
  text-align:center;
}
.counter-num { font-size:30px; font-weight:800; color:var(--blue); letter-spacing:-.5px; }
.counter-label { font-size:12px; color:var(--muted); font-weight:700; margin-top:2px; }

.pc-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pc-cat { border:1px solid var(--line); border-radius:16px; margin-top:10px; overflow:hidden; }
.pc-cat.open { border-color:var(--blue); }
.pc-cat-head {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:#fcfdff;
  border:none;
  padding:14px;
  text-align:left;
}
.pc-cat-icon { font-size:20px; }
.pc-cat-label { font-weight:800; flex:1; }
.pc-cat-total {
  min-width:34px;
  text-align:center;
  background:var(--blue);
  color:#fff;
  border-radius:999px;
  padding:2px 10px;
  font-weight:800;
  font-size:13px;
}
.pc-caret { color:var(--muted); font-size:11px; }
.pc-subs { padding:6px 14px 12px; }
.pc-sub { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); }
.pc-sub:first-child { border-top:none; }
.pc-sub-label { font-size:14px; }
.pc-stepper { display:flex; align-items:center; gap:12px; flex:none; }
.pc-minus, .pc-plus {
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1;
  display:grid;
  place-items:center;
}
.pc-minus { color:var(--red); }
.pc-plus { color:var(--green); }
.pc-minus:hover { border-color:var(--red); }
.pc-plus:hover { border-color:var(--green); }
.pc-count { min-width:28px; text-align:center; font-weight:800; font-size:17px; }
.pc-total-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  background:var(--grad);
  color:#fff;
  border-radius:14px;
  padding:14px 18px;
  font-weight:800;
  font-size:18px;
}
.pc-actions { display:flex; gap:10px; margin-top:12px; }
.pc-actions .secondary, .pc-actions .primary { flex:1; margin-top:0; }

/* ---------------------------------------------------------------------------
   Floating Preaching Counter — button, popup, saved-entries viewer (UI only).
   Presentation for the counter that moved out of the Counters page and into a
   floating button + popup. Adds no data, IDs, or permissions of its own.
   --------------------------------------------------------------------------- */
.counter-fab {
  position:fixed;
  right:18px;
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  z-index:30;
  width:62px;
  height:62px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 26px #2563eb55, 0 2px 6px #1020331f;
  transition:transform .15s ease, box-shadow .15s ease;
  /* Draggable: stop touch-drag from scrolling the page and avoid text/icon
     selection while moving the button. The drag never alters the counter. */
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.counter-fab.is-dragging { transition:none; cursor:grabbing; box-shadow:0 16px 36px #2563eb77; }
.counter-fab:hover { transform:translateY(-2px); box-shadow:0 14px 32px #2563eb66; }
.counter-fab:active { transform:translateY(0) scale(.96); }
.counter-fab-ico { font-size:26px; line-height:1; }
.counter-fab-label {
  position:absolute;
  bottom:-15px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--muted);
  white-space:nowrap;
}
.counter-fab-dot {
  position:absolute;
  top:5px;
  right:5px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#f59e0b;
  border:2px solid #fff;
}
@media (min-width:560px) {
  .counter-fab { right:24px; bottom:24px; }
}

/* Counter popup — reuses the transfer overlay/panel; just sizes the body. */
.counter-popup-body { overflow-y:auto; margin-top:4px; }
.counter-popup-actions { flex-wrap:wrap; }
.counter-popup-actions .secondary, .counter-popup-actions .primary { flex:1 1 30%; min-width:108px; }
.counter-draft-note { color:var(--blue); font-weight:700; }

/* Counters page — Open Counter bar, draft row, completed-entry list. */
.counter-open-bar { margin:10px 0 4px; }
.counter-open-bar .primary { width:100%; margin-top:0; }
.counter-draft-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px dashed var(--blue);
  background:#eff5ff;
  border-radius:14px;
  padding:12px 14px;
  margin:12px 0;
}
.counter-draft-title { font-weight:800; }
.counter-draft-row .primary { margin-top:0; flex:none; }
.counter-entry-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.counter-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.counter-entry:hover { border-color:var(--blue); box-shadow:0 4px 14px #2563eb1a; }
.counter-entry-title { font-weight:800; color:var(--ink); }
.counter-entry-total { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.counter-entry-total span:first-child { font-size:20px; font-weight:800; color:var(--blue); }

/* Counter entry detail modal. */
.counter-detail-body { overflow-y:auto; margin-top:8px; }
.counter-detail-h { margin:14px 0 6px; font-size:14px; }
.counter-detail-row, .counter-detail-id {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.counter-detail-n { font-weight:800; color:var(--blue); }
.counter-detail-id span:last-child { font-weight:700; word-break:break-all; text-align:right; }

/* Preaching counter — in-place edit form (authorized correctors only). */
.counter-edit-field { display:flex; flex-direction:column; gap:6px; margin:14px 0 4px; }
.counter-edit-field > span { margin:0; }
.counter-edit-area, .counter-edit-select { width:100%; }
.counter-edit-area {
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  background:#f8fbff;
  resize:vertical;
  font:inherit;
}
.counter-edit-area:focus, .counter-edit-select:focus {
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px #2563eb22;
}
.counter-edit-count { width:96px; text-align:right; padding:8px 12px; border-radius:12px; }
.counter-detail-row .counter-edit-count { flex:0 0 auto; }

/* Preaching counter — partner linkage + correction lifecycle (names only). */
.counter-badge {
  display:inline-block;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  vertical-align:middle;
  margin-left:6px;
}
.counter-badge.done { background:#dcfce7; color:#166534; }
.counter-badge.needs { background:#fef3c7; color:#92400e; }
.counter-badge.corrected { background:#dbeafe; color:#1e40af; }
.counter-entry-partners { margin-top:3px; color:var(--muted); }
.counter-partner-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.counter-partner-pill {
  background:#eef2ff;
  color:#3730a3;
  font-weight:700;
  font-size:13px;
  padding:4px 10px;
  border-radius:999px;
}
.counter-correction-note {
  margin-top:12px;
  padding:10px 12px;
  background:#fffbeb;
  border:1px solid #fcd34d;
  border-radius:10px;
  color:#92400e;
}
.counter-note-input {
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit;
  resize:vertical;
}
.counter-pick-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; max-height:50vh; overflow-y:auto; }
.counter-pick-row {
  text-align:left;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
.counter-pick-row:hover { border-color:var(--blue); box-shadow:0 4px 14px #2563eb1a; }

/* ---------------------------------------------------------------------------
   Add Contact — modern card redesign (UI only)
   --------------------------------------------------------------------------- */
.create-contact-card { padding:18px; }

.add-contact-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.add-contact-title { margin:0; font-size:26px; letter-spacing:-.5px; }
.ac-close-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px 16px;
  font-weight:800;
  color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.ac-close-btn:hover { border-color:var(--blue); background:#f8fbff; }

/* Each labelled section is its own soft rounded card */
.form-section {
  background:#fbfcff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  margin-top:16px;
}
.form-section-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}
.fs-ico {
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:18px;
}
.fs-ico-violet { background:#efe9ff; }
.fs-ico-green  { background:#e6f8ee; }
.fs-ico-amber  { background:#fef0e0; }
.fs-title { margin:0; font-size:18px; font-weight:900; }
.fs-title-violet { color:var(--violet); }
.fs-title-green  { color:var(--green); }
.fs-title-amber  { color:#d97706; }
.fs-optional { font-size:13px; font-weight:700; color:var(--muted); }

/* Two-up responsive field grid */
.field-grid { display:flex; gap:14px; }
.field-grid > .field { flex:1; min-width:0; }
.field label { margin-top:14px; }
.assign-field { margin-top:4px; }

/* Inputs with a leading icon */
.input-wrap { position:relative; }
.input-wrap .input-ico {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  pointer-events:none;
  opacity:.85;
}
.input-wrap input { padding-left:42px; }
.input-ico-blue, .input-ico-green { opacity:1; }

/* Phone stays blue and tappable */
.phone-input { color:var(--blue); font-weight:700; }

/* Larger date & time pickers */
.big-picker {
  padding:18px 15px;
  font-size:16px;
  font-weight:700;
  border-radius:16px;
}

.preaching-row {
  margin:18px 2px 0;
  font-weight:800;
}
.preaching-row input { width:auto; }

/* Large gradient save button */
.save-contact-btn {
  margin-top:20px;
  padding:18px;
  font-size:17px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

@media (max-width:480px) {
  .add-contact-title { font-size:23px; }
}
/* On phones, stack the two-up fields so each input (Name, Phone, the date/time
   pickers, and the Apartment / Location fields) gets the full width of the form
   instead of being squeezed into half the screen. */
@media (max-width:560px) {
  .field-grid { flex-direction:column; gap:0; }
}

/* =====================================================================
   Calendar page redesign (UI only) — dashboard, quick-select buttons,
   contact card, picker cards, reminder buttons, upcoming events, bottom nav.
   No behaviour, IDs, permissions, or workflows changed.
   ===================================================================== */

/* Indigo accent for the Revisit event type (additive colour). */
.cal-dot.indigo { background:#4f46e5; }
.cal-event.indigo .cal-event-bar { background:#4f46e5; }
.cal-tag.indigo { background:#eef0fe; color:#4f46e5; }

/* --- Hero header --- */
.cal-hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-top:6px;
}
.cal-hero-text { min-width:0; }
.cal-title { display:flex; align-items:center; gap:10px; margin:6px 0 6px; }
.cal-title-ico { font-size:.9em; }
.cal-sub { margin:0; font-size:13px; }
.cal-hero .cal-new {
  width:auto; margin:6px 0 0; flex:0 0 auto;
  padding:13px 20px; border-radius:16px; white-space:nowrap;
}

/* --- Dashboard summary cards --- */
.cal-dashboard {
  display:flex;
  gap:12px;
  margin:18px 0 6px;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.cal-stat {
  flex:1 0 auto;
  min-width:130px;
  display:flex;
  align-items:center;
  gap:11px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px 16px;
  box-shadow:0 8px 22px #00000008;
}
.cal-stat-ico {
  width:42px; height:42px; flex:0 0 auto;
  border-radius:13px; display:grid; place-items:center; font-size:20px;
}
.cal-stat-body { display:flex; flex-direction:column; min-width:0; }
.cal-stat-num { font-size:22px; font-weight:900; line-height:1.1; }
.cal-stat-label { font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }
.cal-stat-blue   .cal-stat-ico { background:#e7f1ff; } .cal-stat-blue   .cal-stat-num { color:var(--blue); }
.cal-stat-green  .cal-stat-ico { background:#e7f8ee; } .cal-stat-green  .cal-stat-num { color:var(--green); }
.cal-stat-orange .cal-stat-ico { background:#fef3e2; } .cal-stat-orange .cal-stat-num { color:#d97706; }
.cal-stat-purple .cal-stat-ico { background:#f3eefe; } .cal-stat-purple .cal-stat-num { color:var(--violet); }
.cal-stat-red    .cal-stat-ico { background:#fdeaea; } .cal-stat-red    .cal-stat-num { color:var(--red); }

/* --- Create New Event form --- */
.ev-form-title { display:flex; align-items:center; gap:9px; font-size:19px; margin-bottom:4px; }
.ev-step { font-weight:900; font-size:13px; color:var(--ink); margin:18px 0 9px; }
.ev-opt { font-weight:700; color:var(--muted); font-size:12px; }

/* Event-type quick-select buttons */
.ev-type-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:10px;
}
.ev-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  border:1.5px solid var(--line); border-radius:18px;
  background:#f8fbff; padding:14px 8px;
  font-weight:800; color:var(--ink); text-align:center;
  transition:border-color .15s ease, transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.ev-type-btn:hover { transform:translateY(-2px); }
.ev-type-ico {
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:20px; background:#fff;
  box-shadow:0 2px 8px #0b1f3a12;
}
.ev-type-label { font-size:12.5px; }
.ev-type-btn.blue   .ev-type-ico { background:#e7f1ff; }
.ev-type-btn.green  .ev-type-ico { background:#e7f8ee; }
.ev-type-btn.orange .ev-type-ico { background:#fef3e2; }
.ev-type-btn.indigo .ev-type-ico { background:#eef0fe; }
.ev-type-btn.purple .ev-type-ico { background:#f3eefe; }
.ev-type-btn.red    .ev-type-ico { background:#fdeaea; }
.ev-type-btn.active.blue   { border-color:var(--blue);   background:#eff5ff;  box-shadow:0 8px 18px #2563eb22; }
.ev-type-btn.active.green  { border-color:var(--green);  background:#eefaf2;  box-shadow:0 8px 18px #16a34a22; }
.ev-type-btn.active.orange { border-color:#f59e0b;       background:#fff7ec;  box-shadow:0 8px 18px #f59e0b22; }
.ev-type-btn.active.indigo { border-color:#4f46e5;       background:#f1f1fe;  box-shadow:0 8px 18px #4f46e522; }
.ev-type-btn.active.purple { border-color:var(--violet); background:#f6f1ff;  box-shadow:0 8px 18px #7c3aed22; }
.ev-type-btn.active.red    { border-color:var(--red);    background:#fef0f0;  box-shadow:0 8px 18px #dc262622; }

/* Contact card */
.ev-contact { display:flex; align-items:stretch; gap:10px; }
.ev-contact-pick { flex:1 1 auto; min-width:0; }
.ev-contact-pick select { width:100%; height:100%; border-radius:16px; padding:15px; background:#f8fbff; }
.ev-contact-card {
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; background:#fff;
}
.ev-contact-avatar {
  width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
}
.ev-contact-info { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.ev-contact-name { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-contact-phone { font-size:14px; }
.ev-contact-phone.is-disabled { color:var(--muted); font-weight:700; pointer-events:none; }
.ev-contact-change, .ev-contact-clear {
  width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  border:1px solid var(--line); background:#f8fbff; color:var(--muted);
  font-size:15px; line-height:1; display:grid; place-items:center;
}
.ev-contact-change:hover, .ev-contact-clear:hover { border-color:var(--blue); color:var(--blue); }
.ev-call-btn {
  flex:0 0 auto; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--blue); border-radius:14px;
  padding:12px 16px; font-weight:800; color:var(--blue); background:#fff;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease, transform .12s ease;
}
.ev-call-btn:hover { background:#eff5ff; transform:translateY(-1px); }
.ev-call-btn.is-disabled { border-color:var(--line); color:var(--muted); pointer-events:none; opacity:.6; }

/* Date / Time / Location / Notes picker cards */
.ev-field-row { display:flex; gap:12px; }
.ev-field { flex:1; min-width:0; }
.ev-field .ev-step { margin-top:0; }
.ev-picker {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:16px;
  background:#f8fbff; padding:4px 14px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ev-picker:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #2563eb22; background:#fff; }
.ev-picker-ico { font-size:17px; flex:0 0 auto; }
.ev-picker-input {
  flex:1 1 auto; width:auto; border:none; outline:none; background:transparent;
  border-radius:0; padding:14px 0; font-size:15px; font-weight:700; color:var(--ink);
}
.ev-picker-input::placeholder { color:#9aa6b8; font-weight:600; }
.ev-picker-area { align-items:flex-start; }
.ev-picker-area .ev-picker-ico { margin-top:14px; }
.ev-picker-area textarea { resize:vertical; font-weight:600; }

/* Reminder quick buttons */
.ev-rem-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
}
.ev-rem-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line); border-radius:14px;
  background:#f8fbff; padding:14px 10px; font-weight:800; color:var(--ink);
  transition:border-color .15s ease, background .2s ease, box-shadow .2s ease;
}
.ev-rem-btn:hover { border-color:var(--blue); }
.ev-rem-btn.active { border-color:var(--blue); background:#eff5ff; color:var(--blue); box-shadow:0 6px 16px #2563eb1f; }
.ev-rem-ico { font-size:14px; }

/* --- Upcoming Events --- */
.cal-upcoming-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.cal-upcoming-head h3 { display:flex; align-items:center; gap:8px; margin:0; }
.cal-viewall {
  width:auto; margin:0; padding:6px 4px; border:none; background:transparent;
  color:var(--blue); font-weight:800; font-size:13px;
}
.cal-viewall:hover { text-decoration:underline; }
.ue-card {
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid var(--line); border-radius:18px;
  background:#fff; padding:14px; margin-top:12px;
  box-shadow:0 6px 16px #00000006;
}
.ue-icon {
  width:42px; height:42px; flex:0 0 auto; border-radius:13px;
  display:grid; place-items:center; font-size:19px;
}
.ue-icon.blue   { background:#e7f1ff; } .ue-icon.green  { background:#e7f8ee; }
.ue-icon.orange { background:#fef3e2; } .ue-icon.indigo { background:#eef0fe; }
.ue-icon.purple { background:#f3eefe; } .ue-icon.red    { background:#fdeaea; }
.ue-main { flex:1 1 auto; min-width:0; }
.ue-row1 { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ue-type { border-radius:999px; padding:3px 10px; font-size:11px; font-weight:800; }
.ue-type.blue   { background:#e7f1ff; color:var(--blue); }
.ue-type.green  { background:#e7f8ee; color:var(--green); }
.ue-type.orange { background:#fef3e2; color:#b45309; }
.ue-type.indigo { background:#eef0fe; color:#4f46e5; }
.ue-type.purple { background:#f3eefe; color:var(--violet); }
.ue-type.red    { background:#fdeaea; color:var(--red); }
.ue-name { font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ue-row2 { display:flex; flex-wrap:wrap; gap:14px; margin-top:5px; }
.ue-meta { font-size:13px; color:var(--muted); font-weight:700; }
.ue-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ue-btn {
  flex:1 1 auto; min-width:96px; text-align:center;
  border:1px solid var(--line); border-radius:12px;
  padding:10px 8px; font-weight:800; font-size:13px; background:#f8fbff; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.ue-btn:hover { transform:translateY(-1px); }
.ue-call    { border-color:#bcd5ff; color:var(--blue); background:#eff5ff; }
.ue-resched { border-color:#cbd5e6; color:var(--ink); }
.ue-confirm,
.ue-complete { border-color:#b6e6c8; color:var(--green); background:#edfaf1; }
.ue-delete  { border-color:#f3c2c2; color:var(--red); background:#fdeeee; }
.ue-btn.is-disabled { opacity:.5; pointer-events:none; }

/* --- Bottom navigation bar (additive mobile shortcut bar) --- */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around; align-items:stretch;
  gap:2px; padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 20px #0b1f3a14;
}
.bnav {
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:none; background:transparent; padding:6px 2px;
  color:var(--muted); font-weight:800; border-radius:14px;
  transition:color .2s ease, background .2s ease;
}
.bnav-ico { font-size:20px; line-height:1; }
.bnav-label { font-size:11px; }
.bnav.active { color:var(--blue); background:#eff5ff; }
.bnav:hover { color:var(--blue); }

/* Keep page content clear of the fixed bottom nav. */
.page { padding-bottom:104px; }

@media (max-width:560px) {
  .cal-hero { flex-direction:column; }
  .cal-hero .cal-new { width:100%; }
  .ev-field-row { flex-direction:column; gap:0; }
  .ev-contact { flex-wrap:wrap; }
  .ev-call-btn { width:100%; justify-content:center; }
}

/* ======================================================================
   PHASE 6 — Reports / Dashboard, Activity Log, Team Performance, Graphs,
   Audit Trail, Exports, and the Security Approval gate.
   ====================================================================== */

/* Sub-tabs inside the Reports view */
.report-subtabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.rsub {
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; padding:9px 14px; font-weight:800; font-size:13px;
}
.rsub.active { color:#fff; border-color:transparent; background:var(--grad); box-shadow:0 8px 18px #2563eb33; }

/* Filter bar */
.report-filters { padding:14px 16px; }
.report-filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.report-filter-row + .report-filter-row { margin-top:10px; }
.rchip {
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:999px; padding:7px 13px; font-weight:700; font-size:12px;
}
.rchip.active { color:#fff; border-color:transparent; background:var(--blue); }
.rfield { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--muted); }
.rfield input, .rfield select {
  border:1px solid var(--line); border-radius:10px; padding:9px 11px; color:var(--ink); background:#fff; min-width:160px;
}

/* Stat-card grid (wraps instead of scrolling) */
.report-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); overflow:visible; }
.report-stat { text-align:left; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease; }
.report-stat .cal-stat-label { white-space:normal; line-height:1.25; }
.report-stat:hover { transform:translateY(-2px); box-shadow:0 12px 26px #2563eb1f; }
.report-stat.is-open { border-color:var(--blue); box-shadow:0 0 0 2px #2563eb33; }
.report-hint { margin:4px 2px 12px; }

/* Detail / activity / audit tables */
.report-table { display:flex; flex-direction:column; }
.report-trow {
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  padding:11px 2px; border-bottom:1px solid var(--line);
}
.report-trow:last-child { border-bottom:0; }
.report-tmain { display:flex; flex-direction:column; min-width:0; }
.report-tmain b { font-size:14px; }
.report-tmeta { display:flex; flex-direction:column; align-items:flex-end; text-align:right; flex:0 0 auto; }

/* Team performance */
.perf-card { overflow-x:auto; }
.perf-table { min-width:560px; }
.perf-head, .perf-row {
  display:grid; grid-template-columns:1.6fr repeat(7, .7fr) 1fr; gap:6px; align-items:center;
}
.perf-head { font-size:11px; font-weight:800; color:var(--muted); padding:6px 4px; text-transform:uppercase; letter-spacing:.02em; }
.perf-row {
  width:100%; text-align:left; background:#fff; border:0; border-top:1px solid var(--line);
  padding:11px 4px; font-weight:700; font-size:13px; color:var(--ink);
}
.perf-row:hover { background:#f6f9ff; }
.perf-row.is-open { background:#eff5ff; }
.perf-name { font-weight:800; }
.perf-detail { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:12px 4px; background:#f8fbff; border-top:1px solid var(--line); }
.perf-detail-col h4 { margin:0 0 8px; font-size:13px; }
.perf-line { padding:6px 0; border-bottom:1px dashed var(--line); display:flex; flex-direction:column; }
.perf-line:last-child { border-bottom:0; }

/* Charts */
.report-chart { width:100%; height:auto; margin-top:10px; display:block; }
.chart-axis { stroke:var(--line); stroke-width:1; }
.chart-tick { fill:var(--muted); font-size:8px; font-weight:700; }
.report-bars { display:flex; gap:10px; align-items:flex-end; margin-top:10px; overflow-x:auto; padding-bottom:6px; }
.report-bar { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:48px; flex:1 0 auto; }
.report-bar-track { height:120px; width:26px; background:#eef2f9; border-radius:8px; display:flex; align-items:flex-end; overflow:hidden; }
.report-bar-fill { width:100%; border-radius:8px 8px 0 0; transition:height .3s ease; min-height:2px; }
.report-bar-val { font-weight:900; font-size:13px; }
.report-bar-label { font-size:10px; font-weight:700; color:var(--muted); text-align:center; }

/* Export */
.export-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

/* Approvals (Team view) */
.pending-count { background:var(--red); color:#fff; border-radius:999px; padding:1px 9px; font-size:13px; }
.approval-row {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.approval-row:last-child { border-bottom:0; }
.approval-who { display:flex; flex-direction:column; gap:3px; min-width:0; }
.approval-actions { display:flex; gap:8px; flex:0 0 auto; }
.approval-actions .approve-btn, .approval-actions .reject-btn { padding:8px 14px; }

/* Approval gate screen */
.approval-gate { text-align:center; }
.approval-gate-ico { font-size:40px; margin-bottom:6px; }
.approval-gate.is-rejected h3 { color:var(--red); }

@media (max-width:560px) {
  .perf-detail { grid-template-columns:1fr; }
  .report-tmeta { align-items:flex-start; text-align:left; }
}



/* ======================================================================
   PHASE 7 — Notifications, Reminders & Automation
   ====================================================================== */

/* Topbar: bell + sign-out grouped on the right. */
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-bell {
  position:relative;
  width:auto;
  margin-top:0;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.topbar-bell.active { border-color:transparent; background:var(--grad); box-shadow:0 8px 20px #2563eb33; }
.bell-badge {
  position:absolute; top:-6px; right:-6px;
  background:var(--red); color:#fff;
  font-size:11px; font-weight:800;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #fff;
}
.tab-count { background:var(--red); color:#fff; border-radius:999px; padding:0 7px; font-size:12px; }
.tab.active .tab-count { background:#ffffff33; }

/* Bottom-nav alerts badge. */
.bnav { position:relative; }
.bnav-badge {
  position:absolute; top:4px; right:18px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:800;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
}

/* Notification center tabs. */
.notif-tabs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.notif-tab {
  width:auto; margin-top:0;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; padding:9px 16px; font-weight:800;
}
.notif-tab.active { color:#fff; border-color:transparent; background:var(--grad); box-shadow:0 8px 20px #2563eb33; }
.notif-markall {
  width:auto; margin:0 0 0 auto;
  border:1px solid var(--line); background:#fff; color:var(--blue);
  border-radius:12px; padding:9px 14px; font-weight:800;
}

/* Count pill on each Active / History / Archive tab. */
.notif-tab-count {
  display:inline-block; margin-left:4px; font-size:12px; font-weight:800;
  padding:1px 7px; border-radius:999px; background:#eaf1ff; color:var(--blue);
}
.notif-tab.active .notif-tab-count { background:#ffffff33; color:#fff; }

/* Action row under the tabs (Mark all read / Clear read notifications). */
.notif-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.notif-actions .notif-markall { margin:0; }

/* Search + Filter-by-Date toolbar above History and Archive. */
.notif-searchbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:12px 14px;
}
.notif-search-input {
  flex:1 1 220px; min-width:0; margin-top:0; width:auto;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  background:#fff; color:var(--ink); font-weight:600;
}
.notif-search-input:focus { border-color:var(--blue); outline:none; }
.notif-datefilter {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--muted);
}
.notif-datefilter input {
  width:auto; margin-top:0; border:1px solid var(--line); border-radius:10px;
  padding:7px 10px; background:#fff; color:var(--ink);
}
.notif-clearfilter { width:auto; margin-top:0; padding:8px 12px; }
.notif-result-count { margin-left:auto; white-space:nowrap; }

/* History recency group headings (Today / This Week / This Month / Earlier). */
.notif-group-head {
  margin:14px 0 8px; font-weight:800; color:var(--ink); font-size:15px;
}
.notif-group-head:first-child { margin-top:2px; }
.notif-group-count { color:var(--muted); font-weight:700; font-size:13px; }

/* "Show more" pagination button for History and Archive. */
.notif-more { width:100%; margin-top:12px; }

.notif-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.notif-summary-card { margin:0; background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%); }
.notif-sum-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
@media (max-width:560px){ .notif-summary { grid-template-columns:1fr; } }

.notif-feed { display:flex; flex-direction:column; gap:10px; }
.notif-item { margin:0; padding:14px 16px; border-left:4px solid var(--line); }
.notif-item.is-unread { background:#f7fbff; border-left-color:var(--blue); }
.notif-row { display:flex; align-items:flex-start; gap:12px; }
.notif-ico { font-size:20px; line-height:1.2; }
.notif-main { flex:1 1 auto; min-width:0; }
.notif-main[role="button"] { cursor:pointer; }
.notif-title { font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.notif-body { margin-top:2px; }
.notif-meta { margin-top:6px; font-size:12px; color:var(--muted); }
.notif-dot { width:8px; height:8px; border-radius:999px; background:var(--blue); display:inline-block; }
.notif-read-btn {
  width:auto; margin-top:0; border:1px solid var(--line); background:#fff;
  color:var(--green); border-radius:10px; padding:6px 10px; font-weight:800;
}

/* Inline actions on an actionable notification (e.g. the GPS "still here?"
   slot prompt: Keep Active / Release Slot). Reuses the .primary / .secondary
   buttons but lays them side by side and resets their default block width. */
.notif-actions-inline { display:flex; gap:10px; margin-top:12px; }
.notif-actions-inline .primary,
.notif-actions-inline .secondary { flex:1; margin-top:0; }

/* Category accents on the left bar. */
.notif-item.tone-escalation { border-left-color:#f59e0b; }
.notif-item.tone-escalation.is-unread { background:#fff8ec; }
.notif-item.tone-transfer { border-left-color:var(--violet); }
.notif-item.tone-slot { border-left-color:#0ea5e9; }
.notif-item.tone-team { border-left-color:var(--red); }
.notif-item.tone-study { border-left-color:var(--green); }
.notif-item.tone-followup { border-left-color:var(--blue); }
.notif-item.tone-appointment { border-left-color:#f97316; }
.notif-item.tone-revisit { border-left-color:#6366f1; }
.notif-item.tone-summary { border-left-color:#94a3b8; }

.empty-notims { text-align:center; padding:34px 18px; }
.empty-ico { font-size:34px; margin-bottom:8px; }

/* ---- Notification cards (reference-photo style) -----------------------------
   A clean, action-focused card: an app-name header, a type icon, the title, a
   "Contact · time" line, the "Tap to …" instruction, then per-type actions. */
.notif-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:0 6px 18px #1020330d; border-left:4px solid var(--line);
}
.notif-card.is-active { background:#f7fbff; }
.notif-card-head {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:13px; color:var(--muted); font-weight:700;
}
.notif-app-logo {
  width:22px; height:22px; border-radius:7px; background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  box-shadow:0 2px 6px #2563eb33;
}
.notif-app-name { color:var(--ink); }
.notif-app-time { margin-left:auto; font-weight:600; }
.notif-card-body {
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  border:none; background:none; width:100%; text-align:left;
}
.notif-card-body:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:10px; }
.notif-type-ico {
  font-size:20px; line-height:1; width:40px; height:40px; flex:0 0 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:#eef2ff;
}
.notif-card-text { flex:1 1 auto; min-width:0; }
.notif-card-title {
  font-weight:800; color:var(--ink); font-size:16px; line-height:1.25;
  display:flex; align-items:center; gap:8px;
}
.notif-card-sub { margin-top:3px; color:var(--ink); font-size:14px; }
.notif-card-tap { margin-top:4px; color:var(--muted); font-size:13px; }
.notif-card .notif-dot {
  width:8px; height:8px; border-radius:999px; background:var(--blue);
  display:inline-block; flex:0 0 auto;
}
.notif-pill {
  align-self:flex-start; font-size:11px; font-weight:800; padding:3px 9px;
  border-radius:999px; background:#eef2f7; color:var(--muted); white-space:nowrap;
}
.notif-pill-completed { background:#dcfce7; color:#166534; }
.notif-pill-archived  { background:#e9eef5; color:#475569; }
.notif-pill-dismissed { background:#f1f5f9; color:#64748b; }
.notif-pill-snoozed   { background:#fef3c7; color:#92400e; }
.notif-pill-read      { background:#e0e7ff; color:#3730a3; }

/* Action row — wraps on small screens, scrolls comfortably on phones. */
.notif-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.notif-act {
  width:auto; margin:0; flex:0 0 auto; border-radius:10px; padding:8px 14px;
  font-weight:800; font-size:13px; border:1px solid var(--line); cursor:pointer;
}
.notif-act.primary { color:#fff; border-color:transparent; background:var(--grad); }
.notif-act.secondary { background:#fff; color:var(--blue); border-color:#c9dbf7; }
.notif-act.ghost { background:#fff; color:var(--muted); }
.notif-act:hover { filter:brightness(0.98); }

.notif-card.tone-escalation { border-left-color:#f59e0b; }
.notif-card.tone-transfer  { border-left-color:var(--violet); }
.notif-card.tone-slot      { border-left-color:#0ea5e9; }
.notif-card.tone-team      { border-left-color:var(--red); }
.notif-card.tone-study     { border-left-color:var(--green); }
.notif-card.tone-followup  { border-left-color:var(--blue); }
.notif-card.tone-revisit   { border-left-color:#6366f1; }
.notif-card.tone-summary   { border-left-color:#94a3b8; }

.snooze-actions { display:flex; gap:10px; flex-wrap:wrap; }
.snooze-actions button { width:auto; margin-top:0; flex:1 1 auto; }

/* Settings — toggles + quiet hours. */
.notif-toggle { display:flex; align-items:center; gap:10px; padding:9px 0; font-weight:700; color:var(--ink); cursor:pointer; }
.notif-toggle input { width:auto; margin:0; transform:scale(1.2); accent-color:var(--blue); }
.notif-push-state { margin:8px 0; }
.notif-push-state .ok { color:var(--green); font-weight:700; }
.notif-quiet-times { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.notif-quiet-times label { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.notif-quiet-times input { width:auto; margin-top:0; }

/* Contact Health badge on contact cards. */
.health-badge {
  display:inline-block; margin-top:6px;
  font-size:11px; font-weight:800; letter-spacing:.2px;
  padding:3px 10px; border-radius:999px;
  border:1px solid transparent;
}
.health-ok { background:#eafaf0; color:#0f7a3d; border-color:#bbe9cd; }
.health-good { background:#e7f7ee; color:#0b6b35; border-color:#aee3c4; }
.health-info { background:#e8f1ff; color:#1d4ed8; border-color:#c4dbff; }
.health-due { background:#fff4e2; color:#b45309; border-color:#ffe0b0; }
.health-overdue { background:#fde8e8; color:#b91c1c; border-color:#f6c2c2; }
.health-muted { background:#eef1f5; color:#64748b; border-color:#dbe2ec; }

/* ==================================================================
   PHASE 8 — Super Admin Console
   ================================================================== */
.sa-subnav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 6px;
}
.sa-subtab {
  border:1px solid var(--line);
  background:#f8fbff;
  color:var(--muted);
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  width:auto;
}
.sa-subtab:hover { border-color:var(--blue); color:var(--ink); }
.sa-subtab.active { background:var(--grad); color:#fff; border-color:transparent; }
.sa-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sa-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sa-actions button, .sa-actions select { width:auto; margin:0; }
.sa-actions select {
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  color:var(--ink);
  font-weight:600;
}
.sa-issue {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.sa-issue:last-child { border-bottom:0; }
.danger-badge { background:#fde8e8; color:var(--red); }
.sa-check {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  font-weight:600;
  color:var(--ink);
}
.sa-check input { width:auto; margin:0; }

/* ======================================================================
   DESKTOP / LAPTOP REDESIGN  (screens wider than 1024px only)
   ----------------------------------------------------------------------
   A design-only refresh that turns the single mobile column into a
   modern, multi-column "team captain" ministry dashboard: a fixed left
   navigation rail, a wide content canvas, larger cards, and more
   whitespace. Nothing here changes data, IDs, permissions, Firebase, or
   any business logic — it only rearranges and restyles what the app
   already renders. The mobile layout below 1025px is left untouched.
   ====================================================================== */

@media (min-width:1025px) {

  /* ---- Calmer, light-gray dashboard backdrop ---- */
  body {
    background:
      radial-gradient(1100px 520px at 100% -8%, #e7efff 0%, transparent 55%),
      #f3f6fc;
  }

  /* ---- App shell: full-width header, left nav rail, wide canvas ----
     Scoped with :has(.tabbar) so the login and pending-approval screens
     (which never render the nav) keep their original centered layout. */
  #app:has(.tabbar) {
    display:grid;
    grid-template-columns:272px minmax(0, 1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "topbar  topbar"
      "sidebar main";
    min-height:100vh;
  }

  .topbar {
    grid-area:topbar;
    padding:16px 36px;
    box-shadow:0 1px 0 var(--line), 0 6px 18px #0b1f3a08;
  }
  .topbar .brand h2 { font-size:22px; }

  /* ---- The top tab bar becomes a vertical navigation rail ---- */
  .tabbar {
    grid-area:sidebar;
    position:sticky;
    top:85px;
    align-self:start;
    height:calc(100vh - 85px);
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:6px;
    padding:24px 18px;
    overflow-y:auto;
    background:#ffffff;
    border-right:1px solid var(--line);
  }
  .tabbar::before {
    content:"Navigation";
    padding:2px 12px 10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .tab {
    flex:0 0 auto;
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:13px;
    text-align:left;
    border:1px solid transparent;
    border-radius:14px;
    padding:12px 15px;
    font-size:15px;
    color:#3b4a61;
    background:transparent;
    box-shadow:none;
  }
  .tab:hover { background:#f1f6ff; color:var(--blue); }
  .tab.active {
    color:#fff;
    border-color:transparent;
    background:var(--grad);
    box-shadow:0 10px 22px #2563eb2e;
  }
  .tab::before {
    font-size:18px;
    line-height:1;
    width:22px;
    text-align:center;
    flex:0 0 auto;
  }
  .tab[data-tab="locations"]::before     { content:"📍"; }
  .tab[data-tab="apartments"]::before    { content:"🏢"; }
  .tab[data-tab="contacts"]::before      { content:"👥"; }
  .tab[data-tab="calendar"]::before      { content:"📅"; }
  .tab[data-tab="reports"]::before       { content:"📊"; }
  .tab[data-tab="counters"]::before      { content:"🔢"; }
  .tab[data-tab="qrcode"]::before        { content:"🔳"; }
  .tab[data-tab="notifications"]::before { content:"🔔"; }
  .tab[data-tab="feedback"]::before      { content:"📝"; }
  .tab[data-tab="team"]::before          { content:"🤝"; }
  .tab[data-tab="superadmin"]::before    { content:"🛡️"; }
  .tab[data-tab="dashboard"]::before     { content:"📊"; }
  .tab-count { margin-left:auto; }

  /* The desktop nav rail has room for every section, so it always lists them
     all. The mobile "Show More / Show Less" collapse — and its toggle — are a
     small-screen affordance only; on desktop there is no bottom shortcut bar,
     so a collapsed rail would leave Contacts, Reports, Counters, QR Code,
     Alerts, Feedback and My Team unreachable until the user found "Show More".
     Presentation only: every tile is already in the DOM, so this just makes the
     browser's desktop nav surface the same sections the installed/mobile app
     already shows. */
  .tabbar.tiles-collapsed .tab-secondary { display:flex; }
  .tiles-toggle { display:none; }

  /* ---- Wide content canvas ---- */
  .page {
    grid-area:main;
    max-width:1240px;
    width:100%;
    margin:0 auto;
    padding:36px 48px 72px;
  }
  .page h1 { font-size:32px; }

  /* The mobile shortcut bar is replaced by the nav rail on desktop. */
  .bottom-nav { display:none; }

  /* Roomier cards across every view. */
  .card {
    padding:26px 28px;
    border-radius:22px;
    box-shadow:0 10px 28px #0b1f3a0d;
  }

  /* ---- Home / My Team: multi-column dashboard of widgets ----
     CSS columns let the existing cards flow into two balanced columns
     without any markup change; intro copy spans the full width. */
  .page[data-view="team"] {
    column-count:2;
    column-gap:26px;
  }
  .page[data-view="team"] > h1,
  .page[data-view="team"] > p {
    column-span:all;
  }
  .page[data-view="team"] > .card {
    break-inside:avoid;
    margin:0 0 24px;
  }

  /* ---- Contacts: responsive grid of contact cards ---- */
  .page[data-view="contacts"] #contactList {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(370px, 1fr));
    gap:22px;
    align-items:start;
  }
  .page[data-view="contacts"] #contactList > .card { margin:0; }

  /* ---- Locations: larger result cards in a responsive grid ---- */
  .page[data-view="locations"] #locResults {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:22px;
    align-items:start;
  }
  .page[data-view="locations"] #locResults > .card { margin:0; }

  /* ---- Calendar: a larger month/agenda with a docked side panel ---- */
  .page[data-view="calendar"] {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    column-gap:26px;
    align-items:start;
  }
  .page[data-view="calendar"] > * { grid-column:1 / -1; }
  .page[data-view="calendar"] > #calBody { grid-column:1; }
  .page[data-view="calendar"] > #calUpcoming {
    grid-column:2;
    position:sticky;
    top:105px;
  }

  /* ---- Reports / Dashboard: let the stat grid breathe ---- */
  .page[data-view="reports"] .report-grid {
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  }
}

/* Wider desktops: a third column for the home dashboard widgets. */
@media (min-width:1500px) {
  .page[data-view="team"] { column-count:3; }
}

/* ===========================================================
   Group Leader as a selectable slot member
   =========================================================== */
.member-role { color:var(--violet); font-weight:700; font-size:12px; }

/* ===========================================================
   Apartment task visibility — one-tap status buttons + worked list
   =========================================================== */
.status-btns {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 4px;
}
.status-btn {
  width:auto;
  margin:0;
  flex:0 0 auto;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  min-height:42px;
}
.status-btn:hover { border-color:var(--blue); }
.status-btn.selected { background:var(--blue); border-color:var(--blue); color:#fff; }

.worked-list { display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.worked-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.worked-meta { display:flex; flex-direction:column; gap:1px; }
.worked-head { font-size:13px; }
.worked-status { font-weight:800; }

/* ===========================================================
   Transfer Tracking Trail — timeline + quick actions
   =========================================================== */
.trail-panel { display:flex; flex-direction:column; }
.trail-body { overflow-y:auto; }
.trail-card { margin:10px 0; }
.trail-route { font-size:15px; }
.trail-current { margin:4px 0 8px; }
.trail-timeline { list-style:none; margin:6px 0 10px; padding:0; }
.trail-step {
  display:flex;
  gap:10px;
  padding:0 0 10px 4px;
  position:relative;
}
.trail-step:not(:last-child)::before {
  content:"";
  position:absolute;
  left:9px;
  top:14px;
  bottom:-2px;
  width:2px;
  background:var(--line);
}
.trail-dot {
  flex:0 0 auto;
  width:12px;
  height:12px;
  margin-top:3px;
  border-radius:50%;
  background:var(--blue);
  position:relative;
  z-index:1;
}
.trail-step-body { flex:1; }
.trail-step-status { font-size:14px; }
.trail-note-text { font-style:italic; }
.trail-actions { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.trail-act { width:auto; margin:0; flex:0 0 auto; }
.trail-note-row { display:flex; gap:8px; align-items:center; }
.trail-note-input {
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
}
.trail-note { width:auto; margin:0; flex:0 0 auto; }
.qa-trail { border-color:#ddd6fe; }

/* ---- QR Code section ---------------------------------------------------- */
.qr-card { text-align:center; }
.qr-preview {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:8px auto 4px;
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  max-width:320px;
}
.qr-preview img {
  display:block;
  width:100%;
  max-width:260px;
  height:auto;
  image-rendering:pixelated;
}
.qr-preview-empty {
  flex-direction:column;
  gap:6px;
  color:#6b7280;
  background:#f8fafc;
  border-style:dashed;
}
.qr-empty-ico { font-size:42px; line-height:1; }
.qr-meta { margin:4px 0 0; color:#6b7280; }
.qr-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:12px 0 4px;
}
.qr-actions button { width:auto; margin:0; flex:0 1 auto; }

/* Section headings + per-Evangelist QR lists (Group Leader / Super Admin) */
.qr-section-title {
  margin:20px 0 8px;
  font-size:1.05rem;
}
.qr-list { display:flex; flex-direction:column; gap:14px; text-align:left; }
.qr-list-item {
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.qr-list-item:last-child { padding-bottom:0; border-bottom:none; }
.qr-list-thumb {
  flex:0 0 auto;
  width:84px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.qr-list-thumb img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.qr-list-body { flex:1 1 auto; min-width:0; }
.qr-list-name { margin:0 0 2px; font-weight:600; }
.qr-list .qr-actions { justify-content:flex-start; margin:8px 0 0; }



/* ----------------------------------------------------------------------
   FEEDBACK — submission form, Super Admin filters, and review cards.
   Presentation only; mirrors the look of the rest of the app.
   --------------------------------------------------------------------- */
.fb-form textarea,
.fb-admin textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  background:#f8fbff;
  resize:vertical;
  font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fb-form textarea:focus,
.fb-admin textarea:focus {
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px #2563eb22;
  background:#fff;
}
.fb-form-row { display:flex; gap:14px; }
.fb-form-row > div { flex:1; min-width:0; }

.fb-filter-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
}
.fb-filter label { margin:0 0 6px; font-size:.8rem; }
.fb-filter select { width:100%; }

.fb-list-title { margin:18px 0 10px; }

.fb-item { display:flex; flex-direction:column; gap:8px; }
.fb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.fb-subject { font-weight:800; font-size:1.02rem; line-height:1.3; }
.fb-badges { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.fb-meta { color:var(--muted); }
.fb-message { white-space:pre-wrap; line-height:1.45; }

.fb-badge {
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
}
.fb-prio-low      { background:#eef2f7; color:#475569; }
.fb-prio-medium   { background:#e0edff; color:#1d4ed8; }
.fb-prio-high     { background:#fef3c7; color:#b45309; }
.fb-prio-urgent   { background:#fee2e2; color:#b91c1c; }
.fb-status-open     { background:#e0edff; color:#1d4ed8; }
.fb-status-inReview { background:#ede9fe; color:#6d28d9; }
.fb-status-resolved { background:#dcfce7; color:#15803d; }
.fb-status-closed   { background:#eef2f7; color:#475569; }

.fb-admin {
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fb-admin-row { display:flex; gap:14px; }
.fb-admin-row > div { flex:1; min-width:0; }
.fb-admin .secondary { width:auto; align-self:flex-start; margin-top:10px; }

.fb-response {
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:10px;
}
.fb-response-head { font-weight:800; margin-bottom:4px; }

/* Feedback history — per-card actions + the read-only details modal. */
.fb-actions { display:flex; gap:8px; }
.fb-actions .secondary { width:auto; align-self:flex-start; }
.fb-details .fb-detail-rows {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:4px 0 12px;
}
.fb-detail-row { display:flex; gap:10px; font-size:.9rem; }
.fb-detail-k { color:var(--muted); min-width:120px; flex-shrink:0; }
.fb-detail-v { color:var(--text, #0f172a); font-weight:600; }
.fb-detail-block { margin-top:12px; }
.fb-detail-block label { display:block; font-weight:800; margin-bottom:4px; font-size:.85rem; }
.fb-detail-text { white-space:pre-wrap; line-height:1.45; }

@media (max-width:560px) {
  .fb-form-row, .fb-admin-row { flex-direction:column; gap:0; }
}

/* ======================================================================
   Apartment workflow — unit grid actions, tag IDs, flags, flag bot
   ====================================================================== */

/* The hidden-ID "tag" content shown on an apartment card generated from a slot. */
.apt-id-tags {
  display:flex; flex-direction:column; gap:2px;
  margin:6px 0 4px; padding:6px 8px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px;
}
.apt-id { display:flex; gap:8px; font-size:11px; align-items:center; }
.apt-id span { color:var(--muted); min-width:104px; font-weight:700; }
.apt-id code { color:#334155; word-break:break-all; }

/* Unit entry + per-unit action card. */
.unit-entry { display:flex; gap:8px; align-items:center; }
.unit-entry input { flex:1; }
.unit-card { border:1px solid #e5e7eb; }
.unit-card-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.unit-actions { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.unit-btn {
  flex:1; min-width:96px; padding:12px 10px;
  border-radius:10px; border:2px solid #cbd5e1; background:#fff;
  font-weight:800; cursor:pointer; transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.unit-btn:active { transform:scale(.97); }
.unit-btn.met { border-color:#86efac; color:#166534; }
.unit-btn.met:hover { background:#dcfce7; }
.unit-btn.visit { border-color:#93c5fd; color:#1e40af; }
.unit-btn.visit:hover { background:#dbeafe; }
.unit-btn.nothome { border-color:#cbd5e1; color:#475569; }
.unit-btn.nothome:hover { background:#e5e7eb; }
.unit-btn.flag { border-color:#fca5a5; color:#991b1b; }
.unit-btn.flag:hover { background:#fee2e2; }
.unit-sub { margin-top:6px; padding-top:6px; border-top:1px dashed #e5e7eb; }
.unit-sub.hidden { display:none; }

/* Flag list inside the apartment history (Group Leader / Super Admin only). */
.flag-list { margin-top:12px; border:1px solid #fecaca; border-radius:10px; background:#fef2f2; padding:8px 10px; }
.flag-list-head { font-weight:800; color:#991b1b; margin-bottom:6px; }
.flag-item { padding:6px 0; border-top:1px solid #fecaca; }
.flag-item:first-of-type { border-top:none; }
.flag-item-head { font-size:13px; }
.flag-note { color:#7f1d1d; font-weight:600; white-space:pre-wrap; }

/* Floating Flag Summary Bot button (Group Leader / Super Admin only). */
.flag-fab {
  position:fixed;
  right:18px;
  bottom:calc(168px + env(safe-area-inset-bottom, 0px));
  z-index:30;
  width:62px; height:62px;
  border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
  box-shadow:0 10px 26px #ef444455, 0 2px 6px #1020331f;
  transition:transform .15s ease, box-shadow .15s ease;
}
.flag-fab:hover { transform:translateY(-2px); box-shadow:0 14px 32px #ef444466; }
.flag-fab:active { transform:translateY(0) scale(.96); }
.flag-fab-ico { font-size:24px; line-height:1; }
.flag-fab-label {
  position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:800; letter-spacing:.3px; color:var(--muted); white-space:nowrap;
}
.flag-bot-panel .flag-bot-body { overflow-y:auto; max-height:50vh; margin-top:4px; }
@media (min-width:560px) {
  .flag-fab { right:24px; bottom:96px; }
}

/* ----------------------------------------------------------------------
   Apartments section — reference (blueprint) layout
   Tabs · active apartment card · building number · unit grid · action bar ·
   apartment history table · flag summary. Reuses the shared .apt-box colors.
   --------------------------------------------------------------------- */

/* Light-green status (Interested) added to the shared apt-box palette. */
.apt-box.lightgreen { background:#eafdf0; border-color:#bbf7d0; color:#166534; }

/* Header + top tabs (Apartments / Apartment History). */
.apt-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.apt-head h1 { margin:0; }
.apt-tabbar { display:flex; gap:8px; flex-wrap:wrap; }
.apt-tab {
  border:1px solid var(--line);
  background:#f8fbff;
  color:var(--muted);
  border-radius:999px;
  padding:9px 18px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  width:auto;
}
.apt-tab:hover { border-color:var(--blue); color:var(--ink); }
.apt-tab.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px #2563eb33; }

/* Active apartment card. */
.apt-active-card {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  background:linear-gradient(135deg,#eef4ff 0%,#f5f0ff 100%);
}
.apt-active-name { font-size:20px; font-weight:800; color:var(--ink); }
.apt-active-addr { color:var(--muted); font-size:14px; margin-top:2px; }
.apt-active-meta { display:flex; gap:22px; flex-wrap:wrap; }
.apt-meta-item { display:flex; flex-direction:column; gap:2px; min-width:88px; }
.apt-meta-item span { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; }
.apt-meta-item b { font-size:15px; color:var(--ink); }
.apt-active-empty { background:#f8fafc; }

/* Building number card. */
.apt-card-head { display:flex; align-items:center; gap:12px; }
.apt-card-head h3 { margin:0; }
.apt-building-now {
  margin-left:auto;
  font-size:26px; font-weight:800; color:var(--blue);
  background:#eef4ff; border-radius:12px; padding:2px 16px;
}

/* Unit grid cells show number + time (extends the shared .apt-box). */
.apt-grid-units .apt-box {
  height:auto; min-height:54px;
  flex-direction:column; row-gap:2px;
  padding:6px 4px; cursor:pointer;
}
.apt-cell-num { font-size:14px; font-weight:800; }
.apt-cell-time { font-size:10px; font-weight:600; color:#475569; opacity:.85; }
.apt-grid-empty { margin:8px 0 12px; }

/* Always-visible action bar. */
.apt-action-bar {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}
.apt-act {
  flex:1 1 120px; min-width:108px;
  padding:13px 10px; border-radius:12px;
  border:2px solid var(--line); background:#fff;
  font-weight:800; cursor:pointer;
  transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.apt-act:active { transform:scale(.97); }
.apt-act.green      { border-color:#86efac; color:#166534; }
.apt-act.green:hover      { background:#dcfce7; }
.apt-act.lightgreen { border-color:#bbf7d0; color:#15803d; }
.apt-act.lightgreen:hover { background:#eafdf0; }
.apt-act.gray       { border-color:#cbd5e1; color:#475569; }
.apt-act.gray:hover       { background:#e5e7eb; }
.apt-act.blue       { border-color:#93c5fd; color:#1e40af; }
.apt-act.blue:hover       { background:#dbeafe; }
.apt-act.orange     { border-color:#fdba74; color:#b45309; }
.apt-act.orange:hover     { background:#ffedd5; }
.apt-act.red        { border-color:#fca5a5; color:#991b1b; }
.apt-act.red:hover        { background:#fee2e2; }

/* Apartment History + Flag Summary two-column row. */
.apt-bottom { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:880px) {
  .apt-bottom { grid-template-columns:2fr 1fr; align-items:start; }
}
.apt-history-card { margin:0; }
.apt-flag-card { margin:0; border:1px solid #fecaca; background:#fef7f7; }
.apt-flag-card h3 { color:#991b1b; }

/* Apartment History table. */
.apt-table-wrap { overflow-x:auto; }
.apt-table { width:100%; border-collapse:collapse; font-size:13px; }
.apt-table th, .apt-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.apt-table th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.apt-table tbody tr:last-child td { border-bottom:none; }
.apt-status-chip {
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:800; border:1px solid var(--line); background:#fff;
}
.apt-status-chip.green      { background:#dcfce7; border-color:#86efac; color:#166534; }
.apt-status-chip.lightgreen { background:#eafdf0; border-color:#bbf7d0; color:#15803d; }
.apt-status-chip.gray       { background:#e5e7eb; border-color:#cbd5e1; color:#475569; }
.apt-status-chip.blue       { background:#dbeafe; border-color:#93c5fd; color:#1e40af; }
.apt-status-chip.orange     { background:#ffedd5; border-color:#fdba74; color:#b45309; }
.apt-status-chip.red        { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

/* Flag Summary items. */
.apt-flag-item { padding:8px 0; border-top:1px solid #fecaca; }
.apt-flag-item:first-of-type { border-top:none; }
.apt-flag-top { font-size:14px; color:var(--ink); }
.apt-flag-note { color:#7f1d1d; font-weight:600; white-space:pre-wrap; }

/* "View Full Apartment History" / "View All Flags" inline links. */
.apt-link {
  width:auto; margin-top:10px; padding:0;
  background:none; border:none; color:var(--blue);
  font-weight:700; cursor:pointer;
}
.apt-link:hover { text-decoration:underline; }

/* Preserved directory, now a secondary collapsible section. */
.apt-directory > summary { font-weight:800; color:var(--ink); cursor:pointer; list-style:revert; }
.apt-directory[open] > summary { margin-bottom:8px; }

/* ----------------------------------------------------------------------
   Apartments section — combined redesign
   Top card (Apartment Name + compact Building Number) · Group Information ·
   Continue From Last Progress · permanent 5×5 grid · history summary.
   --------------------------------------------------------------------- */

/* Top card — Apartment Name, wide and prominent. */
.apt-top-card { background:linear-gradient(135deg,#eef4ff 0%,#f5f0ff 100%); }
.apt-name-label { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800; }
.apt-name-value { font-size:26px; font-weight:800; color:var(--ink); line-height:1.15; margin-top:2px; }

/* Group Information card. */
.apt-group-card h3 { margin:0 0 10px; }
.apt-group-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.apt-group-item { display:flex; flex-direction:column; gap:2px; }
.apt-group-item span { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; }
.apt-group-item b { font-size:15px; color:var(--ink); }

/* Compact Building Number input (smaller than a full-width field). */
.apt-building-entry { flex-wrap:wrap; }
.apt-building-input { flex:0 0 140px; max-width:160px; font-size:18px; font-weight:700; text-align:center; }

/* Continue From Last Progress. */
.apt-continue-card {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border:1px solid #bfdbfe; background:#eff6ff;
}
.apt-continue-title { font-weight:800; color:var(--ink); }
.apt-continue-btn { width:auto; }

/* Permanent 5×5 grid — fixed five columns, always visible. */
.apt-grid-fixed { grid-template-columns:repeat(5, 1fr); }
.apt-box.selected { outline:3px solid var(--blue); outline-offset:1px; }
/* Empty cells keep the board a full 5×5; they are placeholders, not buttons. */
.apt-box-empty { cursor:default; border-style:dashed; opacity:.55; }

/* Page controls under the unit grid: "1 2 3 … Next". */
.apt-grid-pager {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px;
}
.apt-grid-page {
  width:auto; min-width:40px; padding:8px 12px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font-weight:700; cursor:pointer;
}
.apt-grid-page:hover { background:#f1f5f9; }
.apt-grid-page.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.apt-grid-page[disabled] { opacity:.45; cursor:default; }

/* Apartment History summary (facts + status counts). */
.apt-summary { margin-bottom:12px; }
.apt-summary-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.apt-summary-item { display:flex; flex-direction:column; gap:1px; }
.apt-summary-item span { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; }
.apt-summary-item b { font-size:14px; color:var(--ink); }
.apt-summary-counts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.apt-count {
  display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:13px; font-weight:800; border:1px solid var(--line); background:#fff;
}
.apt-count.green  { background:#dcfce7; border-color:#86efac; color:#166534; }
.apt-count.blue   { background:#dbeafe; border-color:#93c5fd; color:#1e40af; }
.apt-count.orange { background:#ffedd5; border-color:#fdba74; color:#b45309; }
.apt-count.red    { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

/* ----------------------------------------------------------------------
   Apartment detail workspace (opened from the directory)
   Overview card + Unit Grid / History / Notes tabs. Reuses the shared apt-*
   palette above; only the layout pieces unique to the detail screen are new.
   --------------------------------------------------------------------- */
.apt-detail-back { width:auto; margin-bottom:12px; }

/* Header card — apartment name, building and address. */
.apt-detail-head .apt-detail-sub {
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px;
  font-size:14px; color:var(--ink);
}
.apt-detail-head .apt-detail-sub b { color:var(--muted); font-weight:700; margin-right:4px; }
.apt-detail-addr { color:var(--muted); }

/* Overview card — the working summary that replaced the empty details page. */
.apt-overview-card { border:1px solid #bfdbfe; background:#f5f9ff; }
.apt-overview-progress { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px; }
.apt-overview-actions { display:flex; flex-wrap:wrap; gap:10px; }
.apt-overview-actions button { width:auto; margin:0; }

/* Workspace tab bar sits directly under the overview. */
.apt-workspace-tabs { margin:14px 0; }

/* Directory quick-access: section labels, Continue Last Worked, Recent chips. */
.apt-dir-label {
  display:block; margin:14px 0 6px;
  font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); font-weight:800;
}
.apt-dir-az { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.apt-continue-last { width:100%; margin:10px 0 0; text-align:center; }
.apt-recent-row { display:flex; flex-wrap:wrap; gap:8px; }
.apt-recent-chip {
  width:auto; margin:0; padding:8px 14px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-weight:700; font-size:13px; color:var(--ink); cursor:pointer;
}
.apt-recent-chip:hover { border-color:var(--blue); color:var(--blue); }


/* ----------------------------------------------------------------------
   Contact removal buttons, single-choice prompt, and call tracker.
   Additive and scoped — no existing rule is changed.
   --------------------------------------------------------------------- */

/* Archive / Delete sit in the existing quick-actions row. Archive is neutral;
   Delete is tinted red so the destructive action reads clearly. */
.qa-archive { color:#92400e; border-color:#fde2b3; background:#fffaf0; }
.qa-archive:hover { border-color:#f59e0b; background:#fff; }
.qa-delete { color:#991b1b; border-color:#fecaca; background:#fff5f5; }
.qa-delete:hover { border-color:#ef4444; background:#fff; }

/* askChoice() option list — full-width stacked buttons above the Cancel row. */
.choice-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.choice-btn { width:100%; margin-top:0; text-align:center; }

/* Read-only Calls Today / This Week / This Month tracker above the list. */
.call-stats-card { margin:6px 0 14px; }
.call-stats-card .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.call-stats-card .item { text-align:center; }
.call-stats-card .item b { display:block; font-size:13px; color:var(--muted,#6b7280); font-weight:700; }
.call-stats-card .item div { font-size:22px; font-weight:800; color:var(--ink); margin-top:4px; }

/* App update / refresh banner — shown when a newer deployed version is detected.
   Fixed to the bottom so it never disrupts the current view; tapping Update
   reloads to the newest build while all saved data is preserved. */
.app-update-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
  font-size: 14px;
  animation: appUpdateIn 0.25s ease-out;
}
@keyframes appUpdateIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.app-update-text { display: flex; flex-direction: column; gap: 2px; }
.app-update-title { font-weight: 800; font-size: 15px; line-height: 1.25; }
.app-update-msg { font-weight: 500; line-height: 1.35; opacity: 0.95; }
.app-update-actions { display: flex; gap: 10px; justify-content: flex-end; }
.app-update-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.app-update-btn:hover { background: #eef2ff; }
.app-update-btn:disabled { opacity: 0.7; cursor: default; }
.app-update-later {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.app-update-later:hover { background: rgba(255, 255, 255, 0.18); }
@media (min-width: 760px) {
  .app-update-bar { left: auto; right: 20px; max-width: 420px; }
}