/* ═══════════════════════════════════════════════
   Hub page — page-specific styles
   Requires css/shared.css to be loaded first.
   ═══════════════════════════════════════════════ */

/* ── Page identity colour — amber (declared last so it wins cascade) ── */
:root{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;--bg:#FDFAF4;}
[data-theme]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme="harvey"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme="purple"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme="brown"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme="green"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme="blue"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
[data-theme-override="dark"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;--bg:#1C1400;}
[data-theme-override="light"]{--primary:#F59E0B;--primary-lt:#FEF3C7;--primary-md:#FCD34D;--primary-dk:#92600A;}
@media(prefers-color-scheme:dark){:root:not([data-theme-override="light"]){--bg:#1C1400;}}

/* ── Direction 3 nav background colour (hub amber) ── */
.bottom-nav{
  background:#1A1000 !important;
}
.nav-btn.active{background:#F59E0B !important;color:#fff !important;}

/* ── Page-header extras ── */
.back-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit;padding:0 0 4px;}
.icon-btn{background:none;border:0.5px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;font-size:13px;font-family:inherit;padding:5px 9px;}

/* ── Loading bar ── */
.loading-bar{height:3px;background:var(--gray-lt);overflow:hidden;display:none;}
.loading-bar.active{display:block;}
.loading-fill{height:100%;background:var(--primary);animation:ld 1.2s ease-in-out infinite;transform-origin:left;}
@keyframes ld{0%{transform:scaleX(0);}50%{transform:scaleX(.5)translateX(100px);}100%{transform:scaleX(0)translateX(400px);}}

/* ── Search ── */
.search-wrap{padding:0 1.25rem .5rem;position:relative;}
.search-input{width:100%;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1rem .6rem 2.4rem;font-size:14px;color:var(--text);font-family:inherit;outline:none;}
.search-input:focus{border-color:var(--primary);}
.search-input::placeholder{color:var(--muted);}
.search-icon{position:absolute;left:2rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.search-clear{position:absolute;right:2rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;display:none;}

/* ── Sub-tabs (base) ── */
.sub-tabs{display:flex;gap:0;padding:0 1.25rem .5rem;border-bottom:0.5px solid var(--border);margin-bottom:.5rem;}
.sub-tab{flex:1;padding:.6rem .5rem;font-size:13px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;text-align:center;}
.sub-tab.active{color:var(--primary);border-bottom-color:var(--primary);}

/* ── Filter chips ── */
.filter-row{display:flex;gap:6px;padding:0 1.25rem .5rem;flex-wrap:wrap;overflow-x:auto;}
.chip{font-size:12px;padding:4px 12px;border-radius:99px;background:var(--surface);border:0.5px solid var(--border);cursor:pointer;white-space:nowrap;color:var(--muted);}
.chip.active{background:var(--primary-lt);border-color:var(--primary);color:var(--primary);font-weight:600;}
.chip-star{background:var(--amber-lt);border-color:var(--amber);color:var(--amber-dk, #7A4A05);}

/* ── Section label ── */
.sec-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 1.25rem .4rem;margin-top:.5rem;}

/* ── Note cards ── */
.notes-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:.5rem 1.25rem .25rem;}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 1.25rem .5rem;}
.note-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:.85rem .9rem;cursor:pointer;position:relative;transition:border-color .15s,opacity .2s;}
.note-card:active{border-color:var(--primary-md);}
.note-card.starred{border-top:2.5px solid var(--amber);}
.note-card.list-archived{opacity:.55;}
.note-card.drag-over{border:1.5px solid var(--primary);background:var(--primary-lt);}
.note-card.dragging{opacity:.4;}
.list-card-drag{cursor:grab;}
.list-card-drag:active{cursor:grabbing;}
.drag-handle{color:var(--muted);cursor:grab;padding:2px 4px;font-size:12px;line-height:1;touch-action:none;}
.note-title{font-size:15px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.note-preview{font-size:13px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.note-meta{font-size:11px;color:var(--muted);margin-top:6px;display:flex;gap:8px;align-items:center;}
.note-cat-badge{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--gray-lt);}

/* ── Todo / Task / Wishlist items ── */
.list-section{margin:0 1.25rem .75rem;}
.todo-item{display:flex;align-items:flex-start;gap:10px;padding:.75rem;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.4rem;}
.todo-item.done .todo-title{text-decoration:line-through;color:var(--muted);}
.todo-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:1px;}
.todo-check.checked{background:var(--primary);border-color:var(--primary);}
.todo-check.checked::after{content:'✓';color:#fff;font-size:11px;font-weight:700;}
.todo-body{flex:1;min-width:0;}
.todo-title{font-size:14px;font-weight:500;margin-bottom:2px;}
.todo-meta{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px;}
.todo-actions{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0;}
.star-btn{background:none;border:none;font-size:16px;cursor:pointer;color:var(--gray);padding:0;line-height:1;}
.star-btn.starred{color:var(--amber);}

/* ── Priority badges (base) ── */
.pri-high{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--red-lt);color:var(--red);}
.pri-med{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--amber-lt);color:var(--amber-dk,#7A4A05);}
.pri-low{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--green-lt);color:var(--green-dk);}
.due-overdue{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--red-lt);color:var(--red);}
.due-soon{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--amber-lt);color:var(--amber-dk,#7A4A05);}
.due-ok{font-size:10px;padding:1px 7px;border-radius:99px;background:var(--gray-lt);color:var(--muted);}

/* ── Wishlist price ── */
.wish-price{font-size:13px;font-weight:600;color:var(--primary);flex-shrink:0;}
.wish-total{font-size:12px;color:var(--muted);padding:.4rem 1rem .75rem;text-align:right;}

/* ── Doc cards ── */
.doc-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);margin:0 1.25rem .65rem;padding:.85rem 1rem;cursor:pointer;display:flex;align-items:center;gap:12px;}
.doc-icon{width:40px;height:40px;border-radius:10px;background:var(--primary-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.doc-body{flex:1;min-width:0;}
.doc-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.doc-expiry-ok{font-size:10px;color:var(--muted);padding:1px 7px;border-radius:99px;background:var(--gray-lt);}
.doc-expiry-warn{font-size:10px;color:var(--amber-dk,#7A4A05);padding:1px 7px;border-radius:99px;background:var(--amber-lt);}
.doc-expiry-over{font-size:10px;color:var(--red);padding:1px 7px;border-radius:99px;background:var(--red-lt);}

/* ── Markdown render ── */
.md-render{font-size:14px;line-height:1.7;color:var(--text);}
.md-render h1{font-size:20px;font-weight:600;margin:.5rem 0 .25rem;}
.md-render h2{font-size:17px;font-weight:600;margin:.5rem 0 .25rem;}
.md-render h3{font-size:15px;font-weight:600;margin:.4rem 0 .2rem;}
.md-render strong{font-weight:600;}
.md-render em{font-style:italic;}
.md-render ul,.md-render ol{padding-left:1.2rem;margin:.25rem 0;}
.md-render li{margin:.15rem 0;}
.md-render code{background:var(--gray-lt);padding:1px 5px;border-radius:4px;font-size:12px;font-family:monospace;}
.md-render blockquote{border-left:3px solid var(--primary);padding-left:.75rem;color:var(--muted);margin:.25rem 0;}
.md-render hr{border:none;border-top:0.5px solid var(--border);margin:.5rem 0;}
.md-checkbox{display:flex;align-items:flex-start;gap:8px;margin:.2rem 0;}
.md-checkbox input[type=checkbox]{margin-top:3px;accent-color:var(--primary);}

/* ── FAB ── */
.fab{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));right:calc(50% - 220px);width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:26px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;z-index:100;}
@media(max-width:480px){.fab{right:1.25rem;}}
.fab.hidden{display:none;}

/* ── Quick-add bar ── */
.quick-add-bar{display:none;position:fixed;bottom:calc(56px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:100%;max-width:480px;gap:8px;padding:.65rem 1.25rem;background:var(--surface);border-top:0.5px solid var(--border);z-index:90;}
#scr-list-detail.active ~ nav + .quick-add-bar,
.quick-add-bar.visible{display:flex;}
.quick-add-input{flex:1;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .85rem;font-size:14px;color:var(--text);font-family:inherit;outline:none;}
.quick-add-input:focus{border-color:var(--primary);}
.quick-add-input::placeholder{color:var(--muted);}
.quick-add-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:.6rem 1rem;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;}

/* ── Modal interior extras ── */
.modal-btns{display:flex;gap:8px;margin-top:1.25rem;}
.btn-primary{flex:1;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:.75rem;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-cancel{background:var(--gray-lt);color:var(--text);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1.25rem;font-size:14px;cursor:pointer;font-family:inherit;}
.btn-danger{background:var(--red-lt);color:var(--red);border:0.5px solid var(--red);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:14px;cursor:pointer;font-family:inherit;}
.field{margin-bottom:.9rem;}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;}
.field input,.field textarea,.field select{width:100%;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .85rem;font-size:14px;color:var(--text);font-family:inherit;outline:none;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);}
.field textarea{resize:vertical;min-height:120px;font-family:inherit;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.pri-picker{display:flex;gap:8px;}
.pri-opt{flex:1;padding:.6rem;border-radius:var(--radius-sm);border:0.5px solid var(--border);text-align:center;font-size:13px;cursor:pointer;font-family:inherit;background:transparent;}
.pri-opt.sel-high{background:var(--red-lt);border-color:var(--red);color:var(--red);font-weight:600;}
.pri-opt.sel-med{background:var(--amber-lt);border-color:var(--amber);color:var(--amber-dk,#7A4A05);font-weight:600;}
.pri-opt.sel-low{background:var(--green-lt);border-color:var(--green);color:var(--green-dk);font-weight:600;}
.toggle-star{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;}
.toggle-star input{accent-color:var(--amber);}
.swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.sel{border-color:var(--text);}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;}

/* ── Note editor wrap (inside modal) ── */
.note-editor-wrap{position:relative;}
.editor-tabs{display:flex;gap:0;margin-bottom:.5rem;}
.editor-tab{flex:1;padding:.4rem;font-size:12px;font-weight:500;color:var(--muted);background:var(--gray-lt);border:none;cursor:pointer;font-family:inherit;}
.editor-tab:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.editor-tab:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.editor-tab.active{background:var(--primary);color:#fff;}
.md-hint{font-size:11px;color:var(--muted);margin-bottom:.4rem;}

/* ── Full-screen note editor ── */
#scr-note-editor{background:var(--bg);padding-bottom:0 !important;overflow:hidden;}
#scr-note-editor.active{display:flex;flex-direction:column;height:100%;}
.note-editor-header{display:flex;align-items:center;gap:8px;padding:max(.75rem,env(safe-area-inset-top)) 1rem .5rem;background:var(--bg);z-index:20;border-bottom:0.5px solid var(--border);flex-shrink:0;}
.note-editor-back{background:none;border:none;color:var(--muted);cursor:pointer;font-family:inherit;font-size:12px;display:flex;align-items:center;gap:4px;padding:0;flex-shrink:0;}
.note-editor-title-input{flex:1;background:none;border:none;font-size:17px;font-weight:700;color:var(--text);font-family:inherit;outline:none;min-width:0;}
.note-editor-title-input::placeholder{color:var(--muted);}
.note-autosave{font-size:11px;color:var(--muted);flex-shrink:0;min-width:40px;text-align:right;}
.note-rich-toolbar{display:flex;align-items:center;gap:2px;padding:.35rem .75rem;border-bottom:0.5px solid var(--border);flex-wrap:wrap;background:var(--surface);flex-shrink:0;}
.rtb-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;font-family:inherit;border-radius:5px;padding:4px 7px;line-height:1;font-weight:500;}
.rtb-btn:hover{background:var(--gray-lt);color:var(--text);}
.rtb-btn.active{background:var(--primary-lt);color:var(--primary);}
.rtb-sep{width:0.5px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;}
.note-content-area{flex:1;overflow-y:auto;padding:.75rem 1.25rem 1rem;outline:none;font-size:14px;line-height:1.75;color:var(--text);font-family:inherit;white-space:pre-wrap;word-break:break-word;}
.note-content-area:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;}
/* Rich content styles */
.note-content-area b,.note-content-area strong{font-weight:700;}
.note-content-area i,.note-content-area em{font-style:italic;}
.note-content-area u{text-decoration:underline;}
.note-content-area h1{font-size:20px;font-weight:700;margin:.4rem 0 .2rem;}
.note-content-area h2{font-size:17px;font-weight:700;margin:.35rem 0 .15rem;}
.note-content-area ul{padding-left:1.2rem;margin:.15rem 0;}
.note-content-area ol{padding-left:1.2rem;margin:.15rem 0;}
.note-content-area li{margin:.1rem 0;}
.note-content-area blockquote{border-left:3px solid var(--primary);padding-left:.75rem;color:var(--muted);margin:.25rem 0;}
.note-content-area hr{border:none;border-top:0.5px solid var(--border);margin:.5rem 0;}
.note-content-area code{background:var(--gray-lt);padding:1px 5px;border-radius:4px;font-size:12px;font-family:monospace;}
.note-meta-bar{display:flex;align-items:center;gap:8px;padding:.5rem 1rem max(.5rem,env(safe-area-inset-bottom));border-top:0.5px solid var(--border);background:var(--surface);flex-shrink:0;}
.note-cat-select{flex:1;background:none;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;font-size:12px;color:var(--text);font-family:inherit;outline:none;}
.note-star-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:2px 4px;opacity:.4;}
.note-star-btn.on{opacity:1;}
.note-delete-btn-sm{background:none;border:none;color:var(--red);cursor:pointer;font-size:12px;font-family:inherit;padding:4px 6px;}
/* Note card quick-star */
.note-card-star{position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;font-size:14px;opacity:.35;padding:2px;}
.note-card-star.on{opacity:1;}
.note-card{position:relative;}

/* ── Misc ── */
.empty-msg{text-align:center;padding:2.5rem 1.5rem;color:var(--muted);font-size:13px;line-height:1.8;}
.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
.upload-area{border:1.5px dashed var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;margin-bottom:.75rem;color:var(--muted);font-size:13px;}
.upload-area:hover{border-color:var(--primary);color:var(--primary);}

/* ── Direction 3 overrides — hub-specific ── */

/* Savings hero card (referenced from hub page) */
.hero-card{border-radius:20px;background:var(--primary-lt) !important;color:var(--primary-dk);}
.hero-amount{font-weight:800 !important;font-size:34px !important;color:var(--primary) !important;}
.hero-meta-val{color:var(--primary) !important;}
.hero-label{color:var(--primary-dk);opacity:0.7;}

/* Login screen */
.login-title{font-size:26px !important;font-weight:800 !important;letter-spacing:-0.5px !important;}
.login-btn{border-radius:14px !important;font-weight:800 !important;font-size:15px !important;}
.login-avatar{border-radius:16px !important;}
.pin-key{border-radius:16px !important;}