/* GuestRdy Customer Portal — design system */
:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-elev: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-dim: #475569;
  --text-muted: #94a3b8;
  --brand: #0f172a;
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 25px -5px rgba(15,23,42,.15);
  --radius: 12px;
  --radius-sm: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Match the topbar color so the notch area blends in visually when the
     PWA is launched standalone on iPhone. */
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.app { background: var(--bg); min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, .btn {
  font: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  min-height: 40px;
  transition: all .15s;
}
button:hover, .btn:hover { background: var(--bg-elev); border-color: var(--accent); }
button.primary, .btn.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
button.primary:hover, .btn.primary:hover { background: #1e293b; }
button.accent, .btn.accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.accent:hover, .btn.accent:hover { background: var(--accent-dark); }
button.block { width: 100%; }
button.lg { padding: 14px 22px; font-size: 15px; min-height: 48px; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, textarea, select {
  font: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: auto;
  padding: 0;
  border-radius: 0;
  vertical-align: middle;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; font-weight: 500; }

/* ----- LOGIN ----- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f8fafc 100%);
}
.auth-card {
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
}
.auth-card .logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--brand); color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
}
.auth-card h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.auth-card .subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card .error { color: var(--danger); font-size: 13px; min-height: 18px; }
.auth-card .alt-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

/* ----- APP SHELL ----- */
/* Push the entire app container down by safe-area-inset-top so the
   sticky topbar (position: sticky; top: 0) lands BELOW the iPhone notch /
   Dynamic Island in standalone PWA mode. Padding on the topbar itself is
   unreliable because sticky elements interact weirdly with env() on iOS.
   Also reserve space at the bottom for the fixed tab bar + home indicator. */
.app {
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
}
.topbar nav { display: flex; gap: 6px; }
.topbar nav a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}
.topbar nav a.active { background: var(--bg-elev); color: var(--text); }
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar .right { display: flex; align-items: center; gap: 8px; }
.content { padding: 24px; max-width: 1100px; margin: 0 auto; }

/* ----- DASHBOARD CARDS ----- */
.welcome {
  margin-bottom: 24px;
}
.welcome h1 {
  font-size: 26px;
  margin: 0 0 4px;
  font-weight: 800;
}
.welcome .sub { color: var(--text-dim); font-size: 14px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
}
.stat-card .value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
}
.stat-card .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 28px 0 12px;
}
.section-head h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.section-head a { font-size: 13px; }

/* ----- LIST CARDS ----- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .15s;
}
.list-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.list-card .head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.list-card .name { font-weight: 700; font-size: 15px; }
.list-card .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--bg-elev);
  color: var(--text-dim);
}
.badge.scheduled { background: #fef3c7; color: #92400e; }
.badge.in_progress, .badge.in_transit, .badge.on_site { background: #dbeafe; color: #1e40af; }
.badge.completed { background: #dcfce7; color: #166534; }
.badge.invoiced { background: #f3e8ff; color: #6b21a8; }
.badge.paid { background: #dcfce7; color: #166534; }
.badge.cancelled { background: #f1f5f9; color: #475569; }
.badge.draft { background: #f1f5f9; color: #475569; }
.badge.sent { background: #dbeafe; color: #1e40af; }
.badge.unpaid { background: #fef3c7; color: #92400e; }

.empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ----- DETAIL VIEWS ----- */
.detail h1 { font-size: 24px; margin: 0 0 4px; font-weight: 800; }
.detail .sub { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.detail section { margin-bottom: 28px; }
.detail h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-weight: 700;
}
.kv {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
}
.kv .row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.kv .row:last-child { border-bottom: none; }
.kv .k { color: var(--text-muted); font-size: 12px; }
.kv .v { font-weight: 600; text-align: right; }

/* ----- CHECKLIST RESULTS ----- */
.checklist-results {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 0;
}
.checklist-results .item {
  display: flex; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.checklist-results .item:last-child { border-bottom: none; }
.checklist-results .check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--bg-elev);
}
.checklist-results .item.done .check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.checklist-results .item .body { flex: 1; min-width: 0; }
.checklist-results .room { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.checklist-results .task { font-size: 14px; }
.checklist-results .photo-thumb {
  margin-top: 6px;
  max-width: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ----- PHOTO GRID ----- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.photo-grid .photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
}
.photo-grid .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-grid .photo .label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px;
  padding: 4px 8px;
  font-weight: 600;
}

/* ----- ISSUES ----- */
.issue {
  background: #fef2f2;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.issue.acknowledged { background: #fefce8; border-left-color: var(--warn); }
.issue.resolved { background: #f0fdf4; border-left-color: var(--success); opacity: .85; }
.issue .head {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 600;
}
.issue .desc { font-size: 14px; color: var(--text); }

/* ----- MESSAGES ----- */
.convo-detail { display: flex; flex-direction: column; min-height: calc(100dvh - 180px); }
.thread {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 0;
  flex: 1;
  min-height: 200px;
  max-height: none;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-elev);
  border-radius: var(--radius);
}
.msg {
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg .body { white-space: pre-wrap; word-wrap: break-word; }
.msg.mine {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg.theirs {
  background: var(--bg-card);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg .meta {
  font-size: 10px;
  opacity: .65;
  margin-top: 2px;
}
.msg.mine .meta { text-align: right; }

/* Sticky composer keeps Send button above the tab bar */
.convo-composer {
  position: sticky;
  bottom: calc(var(--tabbar-h, 64px) + var(--safe-bottom) + 4px);
  background: var(--bg);
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  z-index: 5;
}
.convo-composer textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
}
/* Embedded (inside admin iframe): sticky can't pin to iframe viewport
   because .content isn't a scroll container. Use constrained flex column. */
html.embedded .convo-detail {
  height: calc(100dvh - 80px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.embedded .thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
html.embedded .convo-composer {
  position: static;
  flex: 0 0 auto;
  bottom: auto;
  padding-bottom: 8px;
}

/* ----- MODAL ----- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 100;
  display: none;
  align-items: flex-end;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}
.modal h2 { margin: 0 0 12px; font-size: 20px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions button { flex: 1; padding: 12px; }
@media (min-width: 768px) {
  .modal-overlay { align-items: center; justify-content: center; }
  .modal { max-width: 540px; border-radius: 16px; max-height: 80vh; }
}

/* ----- TOAST ----- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--brand);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: all .25s;
  z-index: 200;
  box-shadow: var(--shadow-lg);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { background: var(--success); }
#toast.error { background: var(--danger); }

.loading { display: flex; justify-content: center; align-items: center; padding: 40px; color: var(--text-dim); gap: 10px; }
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- RESPONSIVE ----- */
@media (max-width: 768px) {
  .topbar {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    padding-bottom: 4px;
  }
  .topbar nav a {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .topbar .brand { font-size: 15px; }
  .content { padding: 16px; }
  .welcome h1 { font-size: 22px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* Sender name above each chat message — subtle */
.msg .sender {
  font-size: 10px;
  font-weight: 600;
  opacity: .6;
  margin-bottom: 1px;
}
.msg.mine .sender { text-align: right; color: rgba(255,255,255,.85); opacity: 1; }

/* Per-property health grid on dashboard */
.property-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) {
  .property-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .property-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* =============================================================
   BOTTOM TAB BAR + HAMBURGER NAV DRAWER (mobile-first nav)
   ============================================================= */

/* Leave space at the bottom so the sticky tab bar doesn't cover content */
.content {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0));
}

/* Bottom tab bar — 4 most-used destinations */
.tabbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
  z-index: 40;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 8px;
  min-height: 48px;
  gap: 2px;
}
.tabbar a:hover { text-decoration: none; color: var(--text); }
.tabbar a.active { color: var(--accent); }
.tabbar a.active .ico { transform: scale(1.05); }
.tabbar .ico { font-size: 20px; line-height: 1; }

/* Hamburger button in top-left */
.hamburger {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  min-height: 40px;
  transition: background 0.12s;
}
.hamburger:hover { background: var(--bg-elev); }
.hamburger:active { transform: scale(0.96); }

/* Back button styling (when detail screens pass back: '...' to shell) */
.topbar .back {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px;
  min-height: 40px;
}
.topbar .back:hover { background: var(--bg-elev); }

/* Nav drawer overlay */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 1000;
  transition: background 0.2s;
}
.nav-drawer.open { background: rgba(15, 23, 42, 0.55); }

.nav-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg);
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.25);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease-out;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.nav-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 32px;
}
.nav-close:hover { background: var(--bg-elev); color: var(--text); }

.nav-drawer-section {
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-section:last-child { border-bottom: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.1s;
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-elev); text-decoration: none; }
.nav-item.active {
  background: var(--accent);
  color: #fff;
}
.nav-item.active:hover { background: var(--accent); }
.nav-icon { font-size: 20px; width: 24px; text-align: center; }
.nav-label { flex: 1; }

.nav-logout {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 10px;
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.nav-logout:hover { background: #fee2e2; }

/* Override the old horizontal top nav — it's being replaced by the bottom
   bar + hamburger, so hide any leftover .topbar nav if present */
.topbar nav { display: none; }

/* Tighten topbar now that it's just [left icon] [brand] [right] */
.topbar {
  flex-wrap: nowrap;
  padding: 10px 16px;
}
.topbar .brand {
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}
.topbar .right { min-width: 40px; }

/* =============================================================
   EMBEDDED MODE — same reason as operator: when running inside
   the admin panel iframe, zero the safe-area padding.
   ============================================================= */
html.embedded .app {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html.embedded .topbar {
  padding-top: 14px !important;
}
html.embedded .content {
  padding-bottom: 84px !important;
}
html.embedded .tabbar {
  padding-bottom: 6px !important;
}