/* =============================================================
   House Tasks — WIREFRAME / unstyled base.
   All visual design removed on purpose. This file ONLY provides
   the functional layout skeleton (positioning, scroll regions,
   overlays, show/hide) so every screen still works while a new
   modern design is built on top. Neutral grayscale, no theming.
   ============================================================= */

:root{
  --bg:#ffffff; --fg:#111111; --muted:#666666; --line:#d9d9d9; --line-2:#eeeeee;
  --tap:44px; --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.4; color:var(--fg); background:var(--bg);
  overflow:hidden; -webkit-text-size-adjust:100%;
}
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; font-size:16px; }
img{ max-width:100%; }
a{ color:inherit; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); }

/* Material Symbols still render as glyphs (kept functional) */
.material-symbols-outlined{
  font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga";
}

/* ---------- App layout skeleton ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0;
  height:calc(52px + var(--safe-top)); padding:var(--safe-top) 12px 0;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); background:var(--bg); z-index:50;
}
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:8px; }
#page-title{ font-size:18px; font-weight:600; margin:0; }
.icon-btn{ border:none; background:none; width:var(--tap); height:var(--tap); display:flex; align-items:center; justify-content:center; }
.who-chip{ border:1px solid var(--line); background:none; padding:6px 10px; display:flex; align-items:center; gap:6px; font-size:13px; }
.who-dot{ width:8px; height:8px; border-radius:50%; background:#999; }

#main{
  position:absolute; left:0; right:0;
  top:calc(52px + var(--safe-top)); bottom:calc(56px + var(--safe-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px;
}
.view{ padding-bottom:32px; }

#bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(56px + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border-top:1px solid var(--line); background:var(--bg); z-index:40;
}
.nav-btn{ border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--muted); }
.nav-btn .nav-icon{ font-size:22px; }
.nav-active{ color:var(--fg); font-weight:600; }

/* ---------- Generic content (neutral) ---------- */
h3,h4{ margin:8px 0; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; }
.list-label{ font-size:12px; color:var(--muted); margin:14px 0 6px; }

.filter-row{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.filter-row.scroll-x{ flex-wrap:nowrap; overflow-x:auto; }
.chip,.tab{ border:1px solid var(--line); background:none; padding:6px 12px; font-size:13px; white-space:nowrap; }
.chip-active,.tab-active,.btn-active{ background:var(--fg); color:var(--bg); }

.btn{ border:1px solid var(--fg); background:var(--bg); color:var(--fg); padding:9px 14px; font-size:14px; min-height:var(--tap); }
.btn-small{ min-height:34px; padding:6px 10px; font-size:13px; }
.btn-danger{ border-color:#b00; color:#b00; }
.btn-ghost,.btn-outline{ background:none; }
.btn-block{ display:block; width:100%; }
.fab{ position:fixed; right:16px; bottom:calc(72px + var(--safe-bottom)); width:52px; height:52px; border-radius:50%; border:1px solid var(--fg); background:var(--bg); font-size:24px; display:flex; align-items:center; justify-content:center; z-index:30; }

/* lists / cards = plain rows with a divider */
.task-list,.card-list{ display:flex; flex-direction:column; }
.task-card,.card,.member-card,.object-card,.room-row,.activity-row,.exp-room{
  border-bottom:1px solid var(--line-2); padding:12px 4px; display:flex; gap:10px; align-items:flex-start;
}
.task-title,.card-info-title,.member-name,.object-title,.room-card-title{ font-weight:600; }
.task-sub,.card-info-sub,.member-sub,.object-sub,.room-row-sub,.task-meta,.activity-sub{ color:var(--muted); font-size:13px; }
.task-checkbox{ width:24px; height:24px; border:1px solid var(--fg); background:none; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.task-card.done{ opacity:.5; }
.task-card.done .task-title{ text-decoration:line-through; }
.task-body{ flex:1; min-width:0; }
.task-badge,.role-badge,.room-card-tag{ border:1px solid var(--line); padding:1px 6px; font-size:11px; margin-right:4px; }
.assignee-avatar,.member-avatar,.activity-icon,.card-icon,.object-icon,.room-row-icon{ width:28px; height:28px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.task-actions button,.card-actions button,.member-actions button,.object-actions button,.room-row-actions button{ border:none; background:none; padding:4px; }

/* progress */
.progress-card{ border:1px solid var(--line); padding:12px; margin:10px 0; }
.progress-head{ display:flex; justify-content:space-between; align-items:flex-end; }
.progress-bar{ height:6px; border:1px solid var(--line); margin-top:8px; }
.progress-fill{ height:100%; background:var(--fg); }

/* date banner = plain heading */
.date-banner{ padding:8px 0 12px; }
.date-day{ font-size:13px; color:var(--muted); }
.date-full{ font-size:24px; font-weight:700; }

/* forms */
.form-field{ margin:10px 0; }
.form-field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.input-full,.select-full,.textarea-full,#task-search{ width:100%; padding:9px 10px; border:1px solid var(--line); background:var(--bg); color:var(--fg); }
.textarea-full{ min-height:60px; }
.search-box{ position:relative; margin:8px 0; }
.search-box .search-icon{ position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box #task-search{ padding-left:34px; }
.color-swatch{ display:inline-block; width:22px; height:22px; border-radius:50%; margin-right:4px; border:1px solid var(--line); }
.weekday-picker{ display:flex; flex-wrap:wrap; gap:6px; }
.seg{ display:flex; gap:4px; border:1px solid var(--line); padding:3px; }
.seg button{ flex:1; border:none; background:none; padding:8px; }
.seg .seg-active{ background:var(--fg); color:var(--bg); }

/* empty states */
.empty{ text-align:center; color:var(--muted); padding:32px 16px; }
.empty-icon{ font-size:40px; }

/* ---------- Overlays (must stay functional) ---------- */
.modal-host{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.modal-card{ position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--bg); border-top:1px solid var(--line); padding:16px; padding-bottom:calc(16px + var(--safe-bottom)); }
.modal-title{ margin:0 0 12px; font-size:18px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; padding-top:10px; border-top:1px solid var(--line-2); }

.sidemenu{ position:fixed; inset:0; z-index:90; }
.sidemenu-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.sidemenu-panel{ position:absolute; left:0; top:0; bottom:0; width:78%; max-width:300px; background:var(--bg); border-right:1px solid var(--line); padding:calc(16px + var(--safe-top)) 12px 16px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.menu-item{ border:none; background:none; text-align:left; padding:12px 8px; font-size:15px; border-bottom:1px solid var(--line-2); }

.toast{ position:fixed; left:50%; bottom:calc(76px + var(--safe-bottom)); transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:9px 16px; font-size:14px; z-index:200; }

/* ---------- Map (functional layout) ---------- */
#map-controls{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
#map-controls .btn{ padding:7px 10px; font-size:13px; min-height:34px; }
#map-stage{ position:relative; min-height:55vh; border:1px solid var(--line); overflow:hidden; }
/* With a plan loaded the stage hugs the image instead of floating it in
   a tall empty panel; on phones it goes edge-to-edge for maximum size. */
#map-stage.has-plan{ min-height:0; }
@media (max-width:520px){
  #map-stage.has-plan{ margin-left:-12px; margin-right:-12px; border-left:none; border-right:none; border-radius:0; }
}
#map-stage.zoomed{ touch-action:none; }
#map-canvas{ position:relative; width:100%; transform-origin:0 0; }
#plan-img{ display:block; width:100%; height:auto; }
#markers-layer{ position:absolute; inset:0; }

/* Floor-plan room polygons + shape editor */
#plan-svg{ position:absolute; inset:0; width:100%; height:100%; }
#plan-svg .fp-room{ fill-opacity:.24; stroke-width:2px; vector-effect:non-scaling-stroke; cursor:pointer; }
#plan-svg .fp-editing{ fill:#FF9500; fill-opacity:.15; stroke-width:2px; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.fp-label{ position:absolute; transform:translate(-50%,-50%); font-size:11px; font-weight:600; color:var(--fg);
  background:var(--bg); border:1px solid var(--line); padding:1px 6px; border-radius:8px; pointer-events:none; white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
#fp-handles{ position:absolute; inset:0; touch-action:none; }
#fp-handles.hidden{ display:none; }
.fp-dot{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:#FF9500; border:2.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.fp-dot.mid{ width:14px; height:14px; margin:-7px 0 0 -7px; background:#fff; border:2px solid #FF9500; opacity:.9; }
.fp-dot.sel{ background:#d70015; }
.fp-dot.split-a{ background:#007AFF; }
#fp-toolbar{ position:absolute; left:8px; right:8px; top:8px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  background:var(--bg); border:1px solid var(--line); padding:8px; z-index:5; }
#fp-toolbar.hidden{ display:none; }
.fp-hint{ font-size:12px; color:var(--muted); flex:1 1 100%; }
.mfa-qr{ display:flex; justify-content:center; margin:10px 0; }
.mfa-qr img{ width:200px; height:200px; background:#fff; padding:8px; }

/* PWA banners: new version available / offline */
.app-banner{ position:fixed; left:12px; right:12px; bottom:calc(68px + var(--safe-bottom)); z-index:250;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#1C1C1E; color:#fff; padding:10px 14px; border-radius:14px; font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.25); }
.app-banner.hidden{ display:none; }
.app-banner-offline{ background:#8E8E93; justify-content:center; text-align:center; }
#update-banner{ bottom:calc(120px + var(--safe-bottom)); }

/* Admin: user management list */
.admin-user{ padding:10px; }
.admin-user-actions{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.admin-user-actions .admin-role{ flex:1 1 130px; width:auto; }
.admin-flag{ display:flex; align-items:center; gap:6px; font-size:14px; white-space:nowrap; }
.admin-flag input{ width:18px; height:18px; }
.marker{ position:absolute; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; border:2px solid var(--fg); background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:14px; }
.marker-label{ position:absolute; top:100%; left:50%; transform:translateX(-50%); font-size:10px; background:var(--bg); border:1px solid var(--line); padding:0 4px; white-space:nowrap; }
.rooms-expanded{ display:flex; flex-direction:column; }
.exp-room-head{ width:100%; border:none; background:none; display:flex; align-items:center; gap:10px; padding:12px 4px; text-align:left; }
.exp-tasks{ padding-left:8px; }
.exp-task{ width:100%; border:none; background:none; display:flex; gap:10px; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line-2); text-align:left; }

/* ---------- Calendar (functional grid) ---------- */
.cal-nav{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cal-nav #cal-label{ flex:1; text-align:center; font-weight:600; }
.cal-grid,.cal-month .cal-mhead{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{ border:1px solid var(--line); min-height:48px; padding:4px; position:relative; font-size:12px; }
.cal-cell.cal-out{ opacity:.4; }
.cal-cell-count{ position:absolute; bottom:3px; right:3px; border:1px solid var(--line); font-size:10px; padding:0 4px; }
.cal-cell.cal-today-cell{ outline:2px solid var(--fg); }
.cal-week{ display:flex; gap:6px; overflow-x:auto; }
.cal-wday{ flex:0 0 130px; border:1px solid var(--line); padding:6px; }
.cal-task{ border:1px solid var(--line); padding:5px; font-size:12px; margin-bottom:5px; }

/* ---------- Auth gate (functional) ---------- */
/* The gate itself scrolls so the on-screen keyboard can never trap a
   field off-screen; .auth-scroll centres the card while still allowing
   it to grow past the viewport on small screens. */
.auth-gate{ position:fixed; inset:0; z-index:300; background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.auth-scroll{ min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:calc(20px + var(--safe-top)) calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left)); box-sizing:border-box; }
.auth-card{ width:100%; max-width:480px; }
.auth-logo{ text-align:center; font-size:40px; }
.auth-title{ text-align:center; margin:6px 0 16px; font-size:22px; }
.auth-btn{ width:100%; margin-top:8px; }
.auth-switch{ text-align:center; margin-top:14px; font-size:14px; color:var(--muted); }
.auth-msg{ border:1px solid var(--line); padding:8px 10px; font-size:13px; margin-bottom:12px; }
.auth-or{ text-align:center; color:var(--muted); margin:12px 0; }

/* Password field with show/hide toggle */
.input-pass{ position:relative; display:flex; }
.input-pass .input-full{ padding-right:46px; }
.pass-toggle{ position:absolute; right:0; top:0; bottom:0; width:44px; display:flex; align-items:center;
  justify-content:center; background:none; border:none; padding:0; color:var(--muted); cursor:pointer; }
.pass-toggle .icon{ width:20px; height:20px; }
.field-error{ color:#b00; font-size:13px; margin:-4px 0 8px; }
.input-invalid{ border-color:#b00; }
.input-otp{ font-family:ui-monospace,Menlo,monospace; font-size:22px; letter-spacing:6px; text-align:center; }

.invite-code{ font-size:22px; letter-spacing:2px; text-align:center; border:1px solid var(--line); padding:14px; margin-bottom:10px; font-family:ui-monospace,Menlo,monospace; }

/* helpers */
.row-flex{ display:flex; gap:8px; }
.row-flex>*{ flex:1; }
.text-c{ text-align:center; }
.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }

/* Analytics (wireframe) */
.an-metric-head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
.an-caps{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.an-h2{ font-size:18px; font-weight:700; margin-top:4px; }
.an-big{ font-size:40px; font-weight:700; line-height:1; }
.an-chart{ display:flex; align-items:flex-end; gap:6px; height:160px; }
.an-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; gap:6px; }
.an-bar-track{ width:100%; flex:1; border:1px solid var(--line); display:flex; align-items:flex-end; }
.an-bar-fill{ width:100%; background:var(--fg); min-height:2px; }
.an-bar-lab{ font-size:10px; color:var(--muted); }
.an-bar-lab.an-today{ color:var(--fg); font-weight:700; }
.an-section{ border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
.an-section>.an-caps{ margin-bottom:12px; }
.an-eff-row{ margin-bottom:14px; }
.an-eff-top{ display:flex; justify-content:space-between; margin-bottom:5px; }
.an-eff-name{ font-weight:600; }
.an-line{ height:2px; border:1px solid var(--line); }
.an-line-fill{ height:100%; background:var(--fg); }
.an-cats{ list-style:none; margin:0; padding:0; }
.an-cat-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-2); }
.an-cat-n{ font-weight:700; }