/* ============================================================================
   theme.css — Master Home App shared design system
   Canonical implementation of STYLE.md. Load on every page, after any
   third-party CSS and BEFORE the page's own <style> block:
     <link rel="stylesheet" href="theme.css"/>
   Contains: design tokens, page background, typography, top bar, buttons,
   forms, modals, overlay, loading state, pills/badges/chips, shared mobile.
   Page-specific components stay in each page's own stylesheet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — teal → blue */
  --primary:      #0BA9A0;
  --primary-dark: #078F87;
  --accent:       #1273E6;
  --accent-dark:  #0E63B8;
  --highlight:    #F5B95C;
  --danger:       #E8536B;
  /* Surfaces & text */
  --background:   #E9EFF7;
  --surface:      #FFFFFF;
  --surface-alt:  #EEF4FB;
  --border:       rgba(21,42,67,0.09);
  --text:         #152A43;
  --text-mid:     #4A607B;
  --text-muted:   #7A8CA3;
  /* Glass card system */
  --card:         rgba(255,255,255,0.78);
  --grad-brand:   linear-gradient(135deg,#0BA9A0,#1273E6);
  --shadow-card:  0 12px 32px rgba(38,68,110,0.10), 0 2px 6px rgba(38,68,110,0.05);
  --shadow-btn:   0 5px 14px rgba(18,115,230,0.30);
  /* Section accents */
  --a-weather:#0E96D5;   --a-weather-soft:#E1F3FC;
  --a-tonight:#7C5CE0;   --a-tonight-soft:#EEE9FC;
  --a-overdue:#E8536B;   --a-overdue-soft:#FDEBEE;
  --a-week:#4F63E0;      --a-week-soft:#E9ECFC;
  --a-mike:#0F7FC2;      --a-mike-soft:#E0F1FB;
  --a-chels:#DE8412;     --a-chels-soft:#FCF1DF;
  --a-jess:#D6479A;      --a-jess-soft:#FBE7F3;
  --a-activity:#0BA98B;  --a-activity-soft:#E0F6F0;
  --a-budget:#16A34A;    --a-budget-soft:#E3F6EA;
}

/* -- RESET & PAGE BACKGROUND -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;color:var(--text);background:radial-gradient(900px 500px at 12% -10%, rgba(11,169,160,0.14), transparent 60%),radial-gradient(1000px 600px at 100% 0%, rgba(18,115,230,0.13), transparent 55%),radial-gradient(800px 700px at 55% 115%, rgba(124,92,224,0.10), transparent 55%),linear-gradient(170deg,#F2F6FB 0%, var(--background) 55%, #E3EAF4 100%);background-attachment:fixed;}

/* -- TOP BAR -- */
.topbar{background:linear-gradient(135deg, rgba(11,169,160,0.97), rgba(18,115,230,0.97));box-shadow:0 6px 24px rgba(18,115,230,0.22);padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;}
.logo-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;}
.logo-mark{width:30px;height:30px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(6,45,90,.18);}
.logo-text{color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1.15;}
.logo-sub{color:rgba(255,255,255,.7);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;}
.topbar-center{flex:1;max-width:400px;margin:0 16px;}
.search-wrap{position:relative;}
.search-input{width:100%;padding:8px 12px 8px 34px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.18);color:#fff;font-size:13px;font-family:inherit;font-weight:500;outline:none;transition:background .15s,border-color .15s;}
.search-input::placeholder{color:rgba(255,255,255,.65);}
.search-input:focus{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.55);}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:13px;color:#fff;opacity:.85;display:flex;align-items:center;}
.search-icon svg{width:14px;height:14px;}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-radius:14px;border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 44px rgba(21,42,67,.18);z-index:200;max-height:320px;overflow-y:auto;display:none;}
.search-results.open{display:block;}
.sr-item{padding:10px 15px;cursor:pointer;border-bottom:1px solid rgba(21,42,67,.06);}
.sr-item:last-child{border-bottom:none;}
.sr-item:hover{background:var(--surface-alt);}
.sr-name{font-size:13px;font-weight:700;color:var(--text);}
.sr-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.sr-empty{padding:16px;font-size:13px;color:var(--text-muted);text-align:center;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.tbtn{padding:7px 13px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:#fff;color:var(--accent-dark);transition:transform .12s,box-shadow .15s;white-space:nowrap;font-family:inherit;box-shadow:0 3px 10px rgba(6,45,90,.2);}
.tbtn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(6,45,90,.26);}
.tbtn.accent{background:#fff;color:var(--accent-dark);}
.tbtn.accent:hover{background:#F4F9FF;}
.user-badge{padding:5px 13px;border-radius:20px;background:rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.35);}
/* Global nav strip below the topbar is rendered + styled by nav.js */

/* -- LOADING -- */
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;}
.spinner{width:32px;height:32px;border:3px solid rgba(18,115,230,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{font-size:13px;color:var(--text-muted);}

/* -- GLASS CARD (generic) -- */
.glass-card{background:var(--card);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-card);}

/* -- BUTTONS -- */
.btn{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:transform .12s,box-shadow .15s,background .15s;}
.btn-blue{background:var(--grad-brand);color:#fff;font-weight:700;box-shadow:var(--shadow-btn);}.btn-blue:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(18,115,230,.38);}
.btn-ghost{background:rgba(255,255,255,.75);color:var(--text-mid);border:1px solid rgba(21,42,67,.14);}.btn-ghost:hover{background:#fff;}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(232,83,107,.35);}.btn-danger:hover{background:var(--a-overdue-soft);}
.btn-sm{padding:5px 12px;font-size:12px;}

/* -- FORMS -- */
.fg{margin-bottom:13px;}
.fl{font-size:11px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;}
.fi{width:100%;padding:9px 12px;border:1px solid rgba(21,42,67,.14);border-radius:10px;font-size:13px;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,115,230,.14);}
textarea.fi{resize:vertical;min-height:72px;line-height:1.6;}
select.fi{cursor:pointer;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;}
.four-col{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:11px;}

/* -- MODALS & OVERLAY -- */
.overlay{display:none;position:fixed;inset:0;background:rgba(21,42,67,.35);backdrop-filter:blur(2px);z-index:50;}
.overlay.open{display:block;}
.modal-wrap{display:none;position:fixed;inset:0;background:rgba(21,42,67,.42);backdrop-filter:blur(3px);z-index:100;align-items:center;justify-content:center;}
.modal-wrap.open{display:flex;}
.modal{background:#FBFCFE;border-radius:20px;border:1px solid rgba(255,255,255,.9);padding:24px;width:520px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(21,42,67,.24);}
.modal-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:17px;letter-spacing:-.01em;}
.modal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.modal-foot-right{display:flex;gap:7px;}

/* -- PILLS, BADGES & CHIPS -- */
.assignee-pill{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;flex-shrink:0;}
.assignee-mike{background:var(--a-mike-soft);color:#0B6296;box-shadow:inset 0 0 0 1px rgba(15,127,194,.22);}
.assignee-chels{background:var(--a-chels-soft);color:#9A5A05;box-shadow:inset 0 0 0 1px rgba(222,132,18,.25);}
.assignee-jess{background:var(--a-jess-soft);color:#A62A72;box-shadow:inset 0 0 0 1px rgba(214,71,154,.22);}
.tag-chip{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(18,115,230,.08);color:var(--accent-dark);box-shadow:inset 0 0 0 1px rgba(18,115,230,.12);}
.recur-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--a-activity-soft);color:#067A63;box-shadow:inset 0 0 0 1px rgba(11,169,139,.2);}
.badge-ns{background:#E8ECF4;color:#3C4A6B;}.badge-ip{background:var(--a-mike-soft);color:var(--accent-dark);}.badge-cp{background:var(--a-activity-soft);color:#067A63;}.badge-dl{background:var(--a-chels-soft);color:#9A5A05;}

/* -- SHARED MOBILE -- */
@media (max-width:768px){
  .topbar-center{display:none;}
  .logo-sub{display:none;}
  .user-badge{display:none;}
  .tbtn{padding:8px 14px;font-size:13px;}
  .modal{width:100%;max-width:100%;border-radius:20px 20px 0 0;position:fixed;bottom:calc(56px + env(safe-area-inset-bottom, 0px));left:0;max-height:88vh;}
  .modal-wrap{align-items:flex-end;}
  .fab{display:flex;position:fixed;bottom:calc(68px + env(safe-area-inset-bottom, 0px));right:16px;width:52px;height:52px;background:var(--grad-brand);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:24px;font-weight:700;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(18,115,230,.42);z-index:25;}
}
@media (min-width:769px){
  .fab{display:none;}
}