/* ── VARIABLES ── */
:root {
  --cream:#F7F4EF; --cream-dark:#EDE8DF; --cream-border:#DDD6C8;
  --ink:#1C1A17; --ink-soft:#4A4540; --ink-muted:#8A8078; --ink-faint:#B8B0A4;
  --gold:#B8860B; --gold-light:#F5EDD0; --gold-border:#D4A820;
  --sidebar-w:220px; --mobile-nav-h:60px;
  --radius:10px; --shadow:0 1px 3px rgba(28,26,23,.08),0 4px 12px rgba(28,26,23,.04);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);font-size:14px;line-height:1.6;}
html{-webkit-text-size-adjust:100%;}

/* ── LOGIN ── */
.login-screen{position:fixed;inset:0;background:var(--cream);display:flex;align-items:center;justify-content:center;z-index:500;padding:1rem;}
.login-card{background:#fff;border:1px solid var(--cream-border);border-radius:16px;padding:2rem;width:100%;max-width:360px;box-shadow:0 8px 40px rgba(28,26,23,.12);}
.login-brand{text-align:center;margin-bottom:1.75rem;}
.brand-cross-lg{font-size:28px;color:var(--gold-border);margin-bottom:6px;}
.brand-name-lg{font-family:'Lora',serif;font-size:22px;font-weight:600;color:var(--ink);}
.brand-sub-lg{font-size:12px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.login-title{font-family:'Lora',serif;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:14px;}
.login-input{width:100%;padding:10px 12px;border:1px solid var(--cream-border);border-radius:8px;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;outline:none;margin-bottom:0;}
.login-input:focus{border-color:var(--ink-faint);background:#fff;}
.login-btn{width:100%;margin-top:12px;padding:12px;}
.login-error{font-size:12px;color:#C0392B;}

/* ── LAYOUT ── */
.app-shell{display:flex;min-height:100vh;min-height:100dvh;}

/* ── SIDEBAR (desktop) ── */
.sidebar{width:var(--sidebar-w);background:var(--ink);color:var(--cream);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;height:100dvh;padding:1.5rem 1rem;overflow-y:auto;}
.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(247,244,239,.1);}
.brand-cross{font-size:22px;color:var(--gold-border);line-height:1;flex-shrink:0;}
.brand-name{font-family:'Lora',serif;font-size:16px;font-weight:600;color:var(--cream);letter-spacing:.01em;}
.brand-sub{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase;}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:transparent;border:none;color:var(--ink-faint);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;text-align:left;transition:background .15s,color .15s;width:100%;}
.nav-item:hover{background:rgba(247,244,239,.07);color:var(--cream);}
.nav-item.active{background:rgba(247,244,239,.12);color:var(--cream);font-weight:500;}
.nav-icon{font-size:14px;opacity:.7;flex-shrink:0;width:16px;text-align:center;}
.sidebar-teams{margin-top:1.5rem;display:flex;flex-direction:column;gap:6px;}
.teams-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;}
.team-badge{font-size:12px;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;font-weight:500;align-self:flex-start;margin-bottom:3px;}
.sidebar-footer{padding-top:1rem;border-top:1px solid rgba(247,244,239,.1);margin-top:auto;}
.sync-status{font-size:11px;color:var(--ink-muted);margin-bottom:8px;}
.current-user-bar{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.user-bar-avatar{width:24px;height:24px;border-radius:50%;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-bar-name{font-size:12px;color:var(--cream);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-bar-admin{font-size:10px;padding:1px 6px;border-radius:10px;background:rgba(212,168,32,.2);color:var(--gold-border);border:1px solid rgba(212,168,32,.3);white-space:nowrap;}
.btn-logout{background:transparent;border:1px solid rgba(247,244,239,.15);color:var(--ink-faint);font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer;width:100%;transition:all .15s;font-family:'DM Sans',sans-serif;}
.btn-logout:hover{background:rgba(247,244,239,.08);color:var(--cream);}

/* ── MOBILE NAV ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--ink);border-top:1px solid rgba(255,255,255,.1);z-index:100;padding-bottom:var(--safe-bottom);}
.mobile-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;background:none;border:none;color:var(--ink-faint);font-family:'DM Sans',sans-serif;font-size:10px;cursor:pointer;transition:color .15s;min-height:52px;}
.mobile-nav-btn.active{color:var(--gold-border);}
.mobile-nav-btn:active{background:rgba(255,255,255,.05);}
.mobile-nav-icon{font-size:18px;line-height:1;}

/* ── MAIN ── */
.main-content{flex:1;padding:2rem 2rem 4rem;min-width:0;max-width:960px;}
.view{display:none;}
.view.active{display:block;}
.view-header{margin-bottom:1.5rem;}
.view-header h1{font-family:'Lora',serif;font-size:26px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em;}
.view-header p{font-size:14px;color:var(--ink-muted);}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--cream-border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow);}
.card-title{font-family:'Lora',serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:1rem;}
.card-title-sub{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;color:var(--ink-muted);}
.card-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;flex-wrap:wrap;gap:8px;}
.full-width{grid-column:1/-1;}

/* ── AVAILABILITY ── */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:8px;}
.cal-member-name{font-family:'Lora',serif;font-size:16px;font-weight:600;color:var(--ink);}
.cal-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-muted);}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;}
.legend-dot.available{background:#4A7EC7;}
.legend-star{color:var(--gold);font-size:13px;}
.sundays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;}
.sday{border:1px solid var(--cream-border);border-radius:8px;padding:8px 6px;text-align:center;cursor:pointer;font-size:12px;color:var(--ink-muted);background:var(--cream);user-select:none;transition:all .12s;line-height:1.4;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;}
.sday:hover{border-color:var(--ink-faint);background:var(--cream-dark);}
.sday.is-special{border-style:dashed;background:var(--gold-light);border-color:var(--gold-border);color:var(--gold);}
.sday-locked{opacity:.75;cursor:default!important;}
.sday-date{font-size:14px;font-weight:500;display:block;}
.sday-month{font-size:10px;opacity:.7;display:block;}
.sday-special{font-size:10px;display:block;color:var(--gold);margin-top:1px;}
.avail-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
.locked-msg{font-size:13px;font-weight:500;color:#1A4A30;padding:8px 14px;background:#E8F5EE;border:1px solid #3A8A5C;border-radius:8px;}
.save-toast{font-size:12px;color:#1A4A30;opacity:0;transition:opacity .3s;}
.save-toast.show{opacity:1;}
.lock-banner{border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lock-banner.locked{background:#FFF3F3;border:1px solid #E8B0B0;color:#7A2020;}
.lock-banner.open{background:#F0F7FF;border:1px solid #A8C8E8;color:#1A3E6E;}
.avail-legend-inline{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap;}
.avail-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;}
.chip-all{background:#D4EDDA;color:#1A4A30;border:1px solid #3A8A5C;}
.chip-time{background:#E8F0FA;color:#1A3E6E;border:1px solid #4A7EC7;}
.chip-none{background:#F0EDE8;color:#8A7060;border:1px solid #C8B8A8;}
.sday .avail-chip{margin-top:3px;display:block;text-align:center;}
.svc-slots{display:flex;flex-direction:column;gap:3px;margin-top:4px;width:100%;}
.svc-slot{font-size:10px;padding:2px 5px;border-radius:5px;border:1px solid var(--cream-border);background:var(--cream);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .1s;}
.svc-slot:hover{border-color:var(--ink-faint);}
.svc-slot.member-on{background:#E8F5EE;border-color:#3A8A5C;color:#1A4A30;}
.svc-slot.ov-on{background:#1C4A1C;color:#A8E8A8;border-color:#2A7A2A;font-weight:600;}
.svc-slot.ov-off{background:#4A1C1C;color:#E8A8A8;border-color:#C05050;font-weight:600;}
.svc-status{font-size:9px;opacity:.8;}

/* ── FORM ── */
.field-label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:6px;}
.field-row{display:flex;gap:12px;flex-wrap:wrap;}
.field{flex:1;min-width:130px;}
input[type=date],input[type=text]{width:100%;padding:8px 12px;border:1px solid var(--cream-border);border-radius:8px;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .15s;}
input[type=date]:focus,input[type=text]:focus{border-color:var(--ink-faint);background:#fff;}
.period-info{margin-top:10px;font-size:13px;color:var(--ink-muted);}
.add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.add-row input[type=text]{max-width:180px;}
.add-row input[type=date]{max-width:150px;}

/* ── BUTTONS ── */
.btn{padding:8px 16px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--cream-border);background:transparent;color:var(--ink-soft);transition:all .15s;-webkit-tap-highlight-color:transparent;}
.btn:hover{background:var(--cream-dark);}
.btn:active{opacity:.8;}
.btn-primary{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-sm{font-size:12px;padding:5px 10px;}

/* ── SCHEDULE ── */
.schedule-actions{display:flex;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:1rem;}
.stat-card{background:#fff;border:1px solid var(--cream-border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);}
.stat-team{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;}
.stat-member-row{font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;padding:2px 0;}
.stat-count{font-weight:500;color:var(--ink);}
.sched-notice{font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:1rem;}
.sched-notice.warn{background:#FFF8E8;color:#7A5A00;border:1px solid #E8D080;}
.sched-notice.ok{background:#EAF5EE;color:#1A4A30;border:1px solid #A8D8B8;}
.sched-table{width:100%;border-collapse:collapse;font-size:13px;}
.sched-table th{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);padding:8px 10px;text-align:left;border-bottom:1px solid var(--cream-border);}
.sched-table td{padding:9px 10px;border-bottom:1px solid var(--cream-dark);vertical-align:middle;}
.sched-table tr:last-child td{border-bottom:none;}
.sched-table tr:hover td{background:var(--cream);}
.sched-date{font-size:13px;color:var(--ink-soft);}
.sched-date-day{font-size:11px;color:var(--ink-faint);display:block;}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;}
.pill-empty{background:var(--cream-dark);color:var(--ink-faint);font-weight:400;}
.badge-special{display:inline-block;font-size:10px;padding:1px 7px;border-radius:10px;background:var(--gold-light);color:var(--gold);border:1px solid var(--gold-border);margin-left:5px;font-weight:500;vertical-align:middle;}

/* ── ADMIN ── */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.teams-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;margin-bottom:1rem;}
.add-team-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--cream-border);}
.team-admin-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--cream-border);}
.team-admin-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.team-admin-title{font-family:'Lora',serif;font-size:14px;font-weight:600;}
.member-chips{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-height:20px;}
.member-chip{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:7px;font-size:13px;background:var(--cream);border:1px solid var(--cream-border);}
.chip-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0;flex-wrap:wrap;}
.chip-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.chip-avatar{width:24px;height:24px;border-radius:50%;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chip-remove{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:17px;line-height:1;padding:0 2px;transition:color .15s;}
.chip-remove:hover{color:#C0392B;}
.chip-action-btn{background:none;border:1px solid var(--cream-border);border-radius:5px;color:var(--ink-muted);cursor:pointer;font-size:13px;padding:1px 5px;transition:all .12s;}
.chip-action-btn:hover{background:var(--cream-dark);color:var(--ink);}
.no-members{font-size:12px;color:var(--ink-faint);font-style:italic;}
.team-add-row{display:flex;gap:6px;}
.team-add-row input{flex:1;min-width:0;}
.admin-badge-chip{font-size:10px;font-weight:500;padding:1px 6px;border-radius:10px;background:var(--gold-light);color:var(--gold);border:1px solid var(--gold-border);white-space:nowrap;}
.no-account-badge{font-size:10px;font-weight:500;padding:1px 6px;border-radius:10px;background:#FFF3F3;color:#A03030;border:1px solid #E8B0B0;white-space:nowrap;}
.special-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:10px;}
.special-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:var(--gold-light);border:1px solid var(--gold-border);font-size:12px;color:var(--gold);font-weight:500;}
.lock-bulk-btns{display:flex;gap:6px;}
.lock-team-group{margin-bottom:1rem;}
.lock-team-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;}
.lock-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;border:1px solid var(--cream-border);background:var(--cream);margin-bottom:5px;flex-wrap:wrap;gap:8px;}
.lock-row-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lock-row-right{display:flex;align-items:center;gap:8px;}
.lock-avatar{width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lock-name{font-size:13px;font-weight:500;color:var(--ink);}
.lock-avail-count{font-size:11px;color:var(--ink-muted);}
.lock-status{font-size:12px;font-weight:500;padding:2px 8px;border-radius:20px;}
.locked-tag{background:#FFF3F3;color:#7A2020;border:1px solid #E8B0B0;}
.open-tag{background:var(--cream-dark);color:var(--ink-muted);border:1px solid var(--cream-border);}
.couple-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;background:var(--cream);border:1px solid var(--cream-border);margin-bottom:6px;}
.couple-names{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.couple-name{font-size:13px;font-weight:500;color:var(--ink);}
.couple-heart{color:#C05080;font-size:14px;}
.couple-team-tags{display:flex;gap:3px;flex-wrap:wrap;}
.team-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.team-tab-btn{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--cream-border);background:var(--cream);color:var(--ink-soft);transition:all .12s;font-family:'DM Sans',sans-serif;}
.team-tab-btn.active{font-weight:600;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(28,26,23,.45);display:flex;align-items:flex-end;justify-content:center;z-index:1000;backdrop-filter:blur(2px);padding:0;}
.modal-box{background:#fff;border:1px solid var(--cream-border);border-radius:16px 16px 0 0;padding:1.5rem;width:100%;max-width:480px;box-shadow:0 -4px 32px rgba(28,26,23,.18);max-height:90vh;overflow-y:auto;}
.modal-title{font-family:'Lora',serif;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.modal-sub{font-size:13px;color:var(--ink-muted);margin-bottom:14px;line-height:1.5;}
.modal-input{width:100%;padding:9px 12px;border:1px solid var(--cream-border);border-radius:8px;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;}
.modal-input:focus{border-color:var(--ink-faint);background:#fff;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.role-toggle{display:flex;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.role-option{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid var(--cream-border);background:var(--cream);font-size:13px;cursor:pointer;transition:all .12s;}
.role-option:has(input:checked){background:var(--gold-light);border-color:var(--gold-border);color:var(--gold);font-weight:500;}
.role-option input{display:none;}

/* ── MISC ── */
.empty-state{font-size:13px;color:var(--ink-faint);font-style:italic;padding:1rem 0;text-align:center;}
.who-empty{font-size:13px;color:var(--ink-faint);font-style:italic;}
.row{display:flex;flex-wrap:wrap;}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .sidebar { display: none; }
  .mobile-nav { display: flex; }
  .main-content { padding: 1rem 1rem calc(var(--mobile-nav-h) + var(--safe-bottom) + 1rem); max-width: 100%; }
  .admin-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box { border-radius: 16px 16px 0 0; max-height: 85vh; }
  .view-header h1 { font-size: 22px; }
  .sundays-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; }
  .sched-table th, .sched-table td { padding: 7px 6px; font-size: 12px; }
  .card { padding: 1rem; }
  .teams-admin-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }
  .lock-row { flex-direction: column; align-items: flex-start; }
  .schedule-actions { flex-direction: column; }
  .schedule-actions .btn { width: 100%; text-align: center; }
}
@media (max-width: 400px) {
  .sundays-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-row { grid-template-columns: 1fr; }
}

/* ── PWA INSTALL PROMPT ── */
.pwa-install-bar { position: fixed; bottom: calc(var(--mobile-nav-h) + var(--safe-bottom)); left: 0; right: 0; background: var(--ink); color: var(--cream); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; z-index: 90; gap: 8px; }
.pwa-install-bar button { background: var(--gold-border); color: var(--ink); border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }

/* ── GOOGLE AUTH ── */
.btn-google {
  width: 100%; margin-top: 0; padding: 11px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--cream-border); border-radius: 8px;
  background: #fff; color: var(--ink-soft); font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-google:hover { background: var(--cream); border-color: var(--ink-faint); }
.btn-google:active { opacity: .8; }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0; color: var(--ink-faint); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--cream-border);
}