/* GuestRdy Operator — design system */
:root {
  --bg: #f8fafc;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-dim: #475569;
  --text-muted: #94a3b8;
  /* Primary brand colour — matches the "Rdy" text in the logo. Used for
     primary-action buttons so the brand is visible everywhere. */
  --brand: #e8733e;
  --brand-dark: #c9622d;
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --hot: #ef4444;
  --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), 0 8px 10px -6px rgba(15,23,42,.1);
  --radius: 10px;
  --radius-sm: 6px;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

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;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  min-height: 40px;
}
button:hover, .btn:hover { background: var(--bg-elev); border-color: var(--accent); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }
button.primary, .btn.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
button.primary:hover, .btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.accent, .btn.accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.accent:hover, .btn.accent:hover { background: var(--accent-dark); }
button.success, .btn.success { background: var(--success); color: #fff; border-color: var(--success); }
button.danger, .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--bg-elev); }
button.block { width: 100%; }
button.lg { padding: 14px 22px; font-size: 15px; min-height: 48px; }

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:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
textarea { font-family: inherit; resize: vertical; min-height: 80px; }
label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; font-weight: 500; }

/* ----- LOGIN SCREEN ----- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
  padding-top: calc(24px + var(--safe-top));
}
.login-card {
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
}
.login-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;
}
.login-card h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.login-card .subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card .error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ----- APP SHELL -----
   Only the .topbar applies safe-area-inset-top padding. The .app
   container does NOT, otherwise iOS would double-count the notch and
   leave a ~50px blank gap above the top bar on iPhone. */
.app {
  min-height: 100vh;
  padding-bottom: calc(72px + var(--safe-bottom));
}
.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: calc(12px + var(--safe-top));
}
.topbar .title {
  font-size: 17px;
  font-weight: 700;
}
.topbar .back {
  background: transparent;
  border: none;
  padding: 8px;
  margin: -8px;
  font-size: 18px;
  color: var(--text);
}
.topbar .right {
  display: flex; gap: 4px;
}
.content {
  padding: 16px;
}

/* ----- BOTTOM TAB BAR ----- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 40;
  padding-bottom: var(--safe-bottom);
  height: calc(64px + var(--safe-bottom));
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  gap: 2px;
}
.tabbar a.active { color: var(--accent); }
.tabbar a .ico { font-size: 22px; line-height: 1; }
.tabbar a:hover { text-decoration: none; }

/* ----- STATS BAR ----- */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
}
.stat .value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.stat .sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ----- CARDS ----- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 10px;
}
.section-head h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0;
  font-weight: 700;
}
.list { display: flex; flex-direction: column; gap: 8px; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all .12s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
}
.card .name { font-weight: 600; font-size: 15px; }
.card .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.card .badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge.unscheduled { background: #fef3c7; color: #92400e; border-color: #fbbf24; font-weight: 700; }
.badge.scheduled { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge.in_progress, .badge.in_transit, .badge.on_site { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.badge.completed { background: #dcfce7; color: #166534; border-color: #86efac; }
.badge.invoiced { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.badge.paid { background: #dcfce7; color: #166534; border-color: #86efac; }
.badge.cancelled { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* card stage left bar */
.card[data-status="unscheduled"] { border-left: 3px solid #f59e0b; background: #fffbeb; }
.card[data-status="scheduled"]   { border-left: 3px solid #eab308; }
.card[data-status="in_progress"],
.card[data-status="in_transit"],
.card[data-status="on_site"]     { border-left: 3px solid #0ea5e9; }
.card[data-status="completed"]   { border-left: 3px solid #16a34a; }
.card[data-status="invoiced"]    { border-left: 3px solid #a855f7; }
.card[data-status="paid"]        { border-left: 3px solid #16a34a; }
.card[data-status="cancelled"]   { border-left: 3px solid #94a3b8; opacity: .7; }

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

/* ----- DETAIL VIEWS ----- */

/* ----- SECTION CARDS -----
   Each <section> renders as a distinct card — gray "house" background
   from the logo, with a dark banner header on top. Content sits on
   WHITE inner cards (.section-body) matching the host-app pattern. */
.detail section {
  background: #3f4550;
  color: #f1f5f9;
  border-radius: 14px;
  padding: 14px 14px 16px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  --text-dim: #d8dde4;
  --text-muted: #b8c0cb;
  --border: #5a616d;
}
.detail section:first-of-type { margin-top: 8px; }
.detail section:last-of-type  { margin-bottom: 0; }
.detail section a { color: #7dd3fc; }
.detail section a:hover { color: #bae6fd; }

/* Solid dark banner header — centered white text. */
.detail section h3 {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--text);
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 10px;
  text-align: center;
  text-transform: none;
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ----- WHITE INNER CARDS -----
   Descendants with a light background flip text back to dark palette. */
.detail section .section-body,
.detail section .list-card,
.detail section .card,
.detail section .kv,
.detail section [style*="background:var(--bg-card)"],
.detail section [style*="background: var(--bg-card)"],
.detail section [style*="background:#fff"],
.detail section [style*="background: #fff"],
.detail section [style*="background:#ffffff"],
.detail section [style*="background: #ffffff"] {
  color: var(--text);
  --text-dim: #334155;
  --text-muted: #475569;
  --border: #e2e8f0;
}
.detail section .section-body a,
.detail section .list-card a,
.detail section .card a,
.detail section .kv a,
.detail section [style*="background:var(--bg-card)"] a,
.detail section [style*="background:#fff"] a {
  color: var(--accent);
}
.detail section .kv,
.detail section .kv .v { color: var(--text); }
.detail section .kv .k { color: var(--text-muted); }

.detail section .section-body {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 14px 16px;
}
.detail section .section-body + .section-body { margin-top: 10px; }

/* ----- INFO CALLOUT -----
   Reusable tooltip / helper-message box. */
.info-callout {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  color: #075985;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
}
.info-callout strong { color: #0c4a6e; }
.info-callout .soft  { color: #0369a1; font-weight: 500; }
.info-callout .icon  { font-size: 16px; margin-right: 2px; }
.kv {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
}
.kv .row {
  display: flex; justify-content: space-between; padding: 6px 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; }

.field { margin-bottom: 12px; }

/* ----- CHECKLIST ITEMS (job runner) ----- */
.checklist {
  display: flex; flex-direction: column; gap: 8px;
}
.chk-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.chk-item.done { background: #f0fdf4; border-color: #86efac; }
.chk-item .check {
  width: 28px; height: 28px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  background: var(--bg);
  cursor: pointer;
}
.chk-item.done .check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.chk-item .body { flex: 1; min-width: 0; }
.chk-item .room { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chk-item .task { font-size: 14px; font-weight: 500; margin-top: 1px; }
.chk-item .photo-req { font-size: 11px; color: var(--warn); margin-top: 2px; font-weight: 600; }
.chk-item.done .photo-req { color: var(--success); }
.chk-item .photo-thumb {
  margin-top: 8px;
  width: 100%;
  max-width: 240px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.camera-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.camera-btn input[type="file"] { display: none; }

/* ----- PHOTO GRID ----- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.photo-grid .photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.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: 3px 6px;
  font-weight: 600;
}

/* ----- ISSUES ----- */
.issue {
  background: #fef2f2;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  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: 13px; color: var(--text); }

/* ----- CONVERSATION THREAD ----- */
.convo-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.convo-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.convo-msg.mine {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.convo-msg.theirs {
  background: var(--bg-card);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.convo-msg .meta {
  font-size: 10px;
  opacity: .7;
  margin-top: 4px;
}

/* Tab bar shrink for 6 tabs */
.tabbar a {
  padding: 8px 2px;
  font-size: 10px;
}
.tabbar a .ico { font-size: 20px; }

/* ----- TOAST ----- */
#toast {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: all .25s;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.success { background: var(--success); }
#toast.error { background: var(--danger); }

/* ----- LOADING ----- */
.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); } }

/* ----- 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: 20px;
  padding-bottom: calc(20px + var(--safe-bottom));
}
.modal h2 { margin: 0 0 12px; font-size: 18px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions button { flex: 1; }

/* desktop modal centers */
@media (min-width: 768px) {
  .modal-overlay { align-items: center; justify-content: center; }
  .modal { max-width: 540px; border-radius: 16px; max-height: 80vh; }
}

/* ----- DESKTOP ----- */
@media (min-width: 768px) {
  .content { max-width: 900px; margin: 0 auto; padding: 24px; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
}

/* Segmented control for chart period toggle */
.seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; }
.seg button { background:transparent; color:var(--text-dim); border:none; padding:6px 12px; font-size:12px; border-radius:0; min-height:0; }
.seg button.active { background:var(--accent); color:#fff; }
.seg button:not(.active):hover { background:var(--bg-card); }

/* Income chart wrapper */
.chart-wrap { margin-bottom:14px; }
.chart-wrap svg { display:block; }

/* Sender name above each chat message */
.convo-msg .sender {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  opacity: 1;
}
.convo-msg.mine .sender { text-align: right; }

/* ----- HAMBURGER BUTTON (top-left, replaces back arrow when no back target) ----- */
.hamburger {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  min-height: 36px;
  transition: background 0.12s;
}
.hamburger:hover { background: var(--bg-card); }
.hamburger:active { transform: scale(0.96); }

/* ----- NAV DRAWER OVERLAY ----- */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 1000;
  transition: background 0.2s;
  display: block;
}
.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: center;
  /* Add safe-area top padding so the title + close button don't hide
     behind the iOS notch / status bar. The drawer is position:fixed
     and thus escapes the .app container's safe-area padding. */
  padding: calc(16px + var(--safe-top)) 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-card); 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-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  margin-bottom: 2px;
}

.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-card); 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% + margin: 10px caused horizontal overflow — the margin
     extends outside the 100% content-box. Use calc so the button stays
     inside the drawer's right edge. */
  box-sizing: border-box;
  width: calc(100% - 20px);
  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; }

/* ============================================================
   ADMIN-SPECIFIC OVERRIDES
   Slightly darker accent, a red "admin badge" tag, and a TOTP
   input layout used during the 2FA step of login.
   ============================================================ */
:root {
  --accent: #0284c7;        /* slightly darker than operator */
  --admin-accent: #dc2626;
}
.admin-badge {
  display: inline-block;
  background: var(--admin-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.totp-input {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 28px;
  text-align: center;
  letter-spacing: 10px;
  padding: 16px;
}
.qr-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.qr-card img { max-width: 220px; margin: 0 auto; display: block; }
.secret-box {
  font-family: ui-monospace, Menlo, monospace;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}
.backup-code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
}
.backup-code-grid code {
  background: var(--bg-elev);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  text-align: center;
}

/* =============================================================
   EMBEDDED APP CONTAINER (admin runs operator/host inside iframe)
   The iframe fills 100% of the available viewport width and height
   with zero padding, minus only the admin's own slim top bar.
   The admin panel's bottom tab bar is hidden in embed mode because
   the embedded app already has its own nav.
   ============================================================= */
.embed-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height on iOS — accounts for address bar */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Hide the admin's bottom tab bar whenever we're inside an embed — the
   embedded app has its own, and the admin hamburger (top-left) is still
   available for jumping between sections. */
.embed-app .tabbar { display: none !important; }
/* Slimmer top bar in embed mode — just enough room for the hamburger and
   a tiny title so the embedded app gets maximum screen real estate. */
.embed-app .topbar {
  padding: 6px 12px;
  padding-top: calc(6px + var(--safe-top));
}
.embed-app .topbar .title {
  font-size: 13px;
}
.embed-app .topbar .title .admin-badge {
  font-size: 9px;
  padding: 2px 5px;
}

.embed-frame-wrap {
  flex: 1;
  min-height: 0;
  background: #f8fafc;
  display: flex;
}
.embed-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  min-height: 0;
}
/* Legacy keep — no longer narrows the iframe, just a stub so the old
   rule isn't orphaned. The iframe now always fills 100% width. */
@media (min-width: 900px) {
  .embed-frame-wrap { padding: 0; }
  .embed-frame {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}