/* ===============================
   what-to-do-app — style.css
   Mobile-first UI
   =============================== */

:root{
  --blue:#007aff;
  --bg:#f9f9fb;
  --card:#ffffff;
  --text:#1c1c1e;
  --muted:#6b7280;
  --danger:#ff3b30;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadowSoft:0 4px 12px rgba(0,0,0,.06);
}

body.dark{
  --bg:#0f1115;
  --card:#161a22;
  --text:#f5f7ff;
  --muted:#aab2c5;
  --shadow:0 12px 28px rgba(0,0,0,.35);
  --shadowSoft:0 6px 18px rgba(0,0,0,.25);
}

/* Dark-mode borders for form controls + dividers */
body.dark .iconBtn,
body.dark .ghostBtn,
body.dark .smallBtn,
body.dark .pillBtn,
body.dark .field input,
body.dark .select{
  border-color: rgba(255,255,255,.12) !important;
}
body.dark .section{
  border-bottom-color: rgba(255,255,255,.08);
}
body.dark .sheet__footer{
  border-top-color: rgba(255,255,255,.08);
}

/* Reset */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
body.noScroll{ overflow:hidden; }

/* Ensure form controls inherit theme text color (fix dark-mode black text) */
button, input, select, textarea{
  font: inherit;
  color: var(--text);
}
input::placeholder, textarea::placeholder{
  color: var(--muted);
  opacity: 1;
}


/* Top Bar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
}
body.dark .topbar{ background:rgba(15,17,21,.85); }

.topbar__title{
  flex:1;
  text-align:center;
  font-weight:900;
}
.topbar__spacer{ width:44px; height:44px; }

.iconBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:var(--card);
  box-shadow:var(--shadowSoft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
}
body.dark .iconBtn{ border-color:rgba(255,255,255,.12); }
.iconBtn:active{ transform:translateY(1px); }

.topbar__btn{
  flex:1;
  max-width:260px;
  height:44px;
  border-radius:999px;
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
}

/* App */
.app{
  padding-bottom:calc(130px + env(safe-area-inset-bottom)); /* space for bottom dock */
}

.hero{ padding:16px; }
.hero h1{ margin:0 0 6px; font-size:26px; }
.subtitle{ margin:0 0 12px; color:var(--muted); }

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

.pill{
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  background:#e5e7eb;
}
.pill--ok{ background:#d1fae5; color:#065f46; }
.pill--warn{ background:#fee2e2; color:#7f1d1d; }
.pill--info{ background:#e0e7ff; color:#1e3a8a; }

.ghostBtn{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
  background:var(--card);
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}
body.dark .ghostBtn{ border-color:rgba(255,255,255,.12); }

/* List / Cards */
.listWrap{ padding:0 12px; }
.cards{ display:flex; flex-direction:column; gap:12px; }

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card__photo{ width:100%; height:auto; display:block; }
.card__body{ padding:12px; }
.card__name{ font-weight:900; margin-bottom:8px; }

.meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#f3f4f6;
  color:var(--text);
}
body.dark .chip{ background:#1f2937; }

.card__actions{ display:flex; gap:8px; }
.directions{
  flex:1;
  text-align:center;
  text-decoration:none;
  background:var(--blue);
  color:#fff;
  padding:10px;
  border-radius:12px;
  font-weight:900;
}
.smallBtn{
  border-radius:12px;
  border:1px solid rgba(0,0,0,.1);
  background:var(--card);
  padding:10px;
  font-weight:800;
  cursor:pointer;
}

/* Empty / Skeleton */
.empty{
  display:flex;
  gap:12px;
  padding:20px;
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadowSoft);
}
.empty__emoji{ font-size:32px; }

.skeleton{ display:flex; flex-direction:column; gap:12px; }
.skCard{
  height:120px;
  border-radius:var(--radius);
  background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
  animation:pulse 1.2s infinite;
}
@keyframes pulse{
  0%{opacity:.6}
  50%{opacity:1}
  100%{opacity:.6}
}

.loadMore{
  margin:16px auto 0;
  display:block;
  padding:10px 18px;
  border-radius:999px;
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* Backdrop & Sheets */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:20;
}

.sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  max-height:90vh;
  background:var(--card);
  border-radius:20px 20px 0 0;
  box-shadow:var(--shadow);
  transform:translateY(100%);
  transition:transform .28s ease;
  z-index:30;
  display:flex;
  flex-direction:column;
}
.sheet.open{ transform:translateY(0); }
.sheet.dragging{ transition:none; }

.sheet__handle{
  width:44px;
  height:5px;
  border-radius:999px;
  background:#d1d5db;
  margin:8px auto;
}

.sheet__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
}
.sheet__title{ font-weight:900; }
.sheet__close{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

.sheet__body{
  padding:0 12px;
  overflow:auto;
  flex:1;
}

.sheet__footer{
  padding:12px;
  border-top:1px solid rgba(0,0,0,.08);
}

/* Sections / forms */
.section{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section__title{ font-weight:900; margin-bottom:8px; }
.hint{ font-size:12px; color:var(--muted); }

.row{ display:flex; justify-content:space-between; margin-bottom:6px; }
.label{ font-weight:800; }
.mono{ font-family:monospace; }
.range{ width:100%; }

.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pillBtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--card);
  font-weight:800;
  cursor:pointer;
}
.pillBtn.active{
  background:rgba(0,122,255,.14);
  border-color:rgba(0,122,255,.35);
}

.refineList{ display:flex; flex-direction:column; gap:8px; }
.checkRow{ display:flex; gap:10px; align-items:center; font-size:14px; }

.field{ margin-bottom:10px; display:block; }
.field span{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
.field input{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--card);
}

/* Toggles */
.toggle{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  margin-bottom:8px;
}
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle__ui{
  width:36px;
  height:20px;
  background:#d1d5db;
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
}
.toggle__ui::after{
  content:"";
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  top:2px;
  left:2px;
  transition:.2s;
}
.toggle input:checked + .toggle__ui{ background:var(--blue); }
.toggle input:checked + .toggle__ui::after{ transform:translateX(16px); }

.select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--card);
}

/* Buttons */
.primaryBtn{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.dangerBtn{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:none;
  background:var(--danger);
  color:#fff;
  font-weight:900;
}

/* Profile */
.profileCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:var(--radius);
  background:rgba(0,0,0,.03);
}
.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(0,122,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.profileName{ font-weight:900; }
.profileSub{ font-size:12px; color:var(--muted); }

.rowBtn{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--card);
  font-weight:900;
  cursor:pointer;
  margin-bottom:8px;
}
.rowBtn.danger{
  background:rgba(255,59,48,.1);
  border-color:rgba(255,59,48,.3);
}
.rowHint{ font-size:12px; color:var(--muted); }

/* Bottom Dock */
.bottomDock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:15;

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(0,0,0,.08);
}
body.dark .bottomDock{
  background:rgba(15,17,21,.92);
  border-top-color:rgba(255,255,255,.10);
}
.bottomDock__icon{ width:44px; height:44px; }
.bottomDock__filters{ flex:1; max-width:none; }

/* ==== Button feel + badge (patch v3) ==== */
*{ -webkit-tap-highlight-color: transparent; }
button, a{ touch-action: manipulation; }

.iconBtn, .ghostBtn, .primaryBtn, .dangerBtn, .pillBtn, .smallBtn, .topbar__btn, .loadMore{
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.iconBtn:active, .ghostBtn:active, .primaryBtn:active, .dangerBtn:active, .pillBtn:active, .smallBtn:active, .topbar__btn:active, .loadMore:active{
  transform: translateY(1px) scale(.985);
  filter: brightness(.98);
}
.iconBtn:disabled, .ghostBtn:disabled, .primaryBtn:disabled, .dangerBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.countBadge{
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

#openFiltersBtn .chev{
  display:inline-block;
  transition: transform .18s ease;
  transform: translateY(-1px) rotate(0deg);
}
#openFiltersBtn.open .chev{
  transform: translateY(-1px) rotate(180deg);
}


/* Toast (discreet message) */
.toast{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(88px + env(safe-area-inset-bottom)); /* above bottom dock */
  z-index:50;

  background:rgba(0,0,0,.78);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:13px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);

  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}