/* ============================================================ DocRecall — Material 3 theme (green seed), light + dark. Tokens generated from a green seed; --md-sys-* custom properties pierce shadow DOM so all @material/web components theme from here. Applied only on the app (). ============================================================ */ :root { color-scheme: light; /* type */ --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif; --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif; /* shape */ --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; /* ---- LIGHT scheme (Cobalt) ---- */ --md-sys-color-primary: #42548F; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #DAE2FF; --md-sys-color-on-primary-container: #001A43; --md-sys-color-secondary: #585E72; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #DDE1F9; --md-sys-color-on-secondary-container: #151B2C; --md-sys-color-tertiary: #735471; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFD7F5; --md-sys-color-on-tertiary-container: #2B122B; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #FAF8FF; --md-sys-color-on-background: #1A1B21; --md-sys-color-surface: #FAF8FF; --md-sys-color-on-surface: #1A1B21; --md-sys-color-surface-variant: #E1E2EC; --md-sys-color-on-surface-variant: #44464F; --md-sys-color-outline: #757780; --md-sys-color-outline-variant: #C5C6D0; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F4F3FA; --md-sys-color-surface-container: #EEEDF4; --md-sys-color-surface-container-high: #E9E7EF; --md-sys-color-surface-container-highest: #E3E1E9; --md-sys-color-inverse-surface: #2F3036; --md-sys-color-inverse-on-surface: #F1F0F7; --md-sys-color-inverse-primary: #B0C6FF; --md-sys-color-surface-tint: #42548F; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; } /* App is intentionally locked to the LIGHT Cobalt theme (no dark mode) so it stays visually identical to the landing page + the "how it works" animation, regardless of the user's system light/dark preference. */ /* ---------------- app base ---------------- */ body.md{ margin:0; background:var(--md-sys-color-background); color:var(--md-sys-color-on-surface); font-family:var(--md-ref-typeface-plain); -webkit-font-smoothing:antialiased; } .md .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; } /* elevation tints for hand-built surfaces */ .md .surface{ background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); } .md .visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------------- top app bar ---------------- */ .md-app-bar{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:4px; height:84px; padding:0 8px; padding-top:env(safe-area-inset-top); height:calc(84px + env(safe-area-inset-top)); background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); } .md-app-bar.scrolled{ background:var(--md-sys-color-surface-container); } .md-app-bar .bar-title{ flex:0 1 auto; text-align:center; font-family:var(--md-ref-typeface-brand); font-size:22px; font-weight:500; letter-spacing:0; color:var(--md-sys-color-on-surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 4px; } /* equal-width sides so the centered title sits in the true middle of the bar */ .md-app-bar .bar-side{ display:flex; align-items:flex-end; flex:1 1 0; min-width:0; padding-bottom:24px; } .md-app-bar .bar-side:last-child{ justify-content:flex-end; } .md-app-bar md-icon-button{ --md-icon-button-icon-color:var(--md-sys-color-on-surface-variant); } /* DocRecall brand in app bar - centered */ #navBrand{ color:#AEC1EA; font-family:'Spectral', Georgia, serif; font-size:20px; font-weight:600; letter-spacing:0.2px; } .md-app-bar .bar-title{ display:flex; align-items:center; justify-content:center; } /* Increase md-menu font size for better readability */ md-menu md-menu-item{ --md-menu-item-label-text-size:16px; --md-menu-item-one-line-container-height:52px; } /* ---------------- scroll region ---------------- */ .md-scroll{ min-height:100vh; max-width:840px; margin:0 auto; padding:calc(100px + env(safe-area-inset-top)) 16px calc(180px + env(safe-area-inset-bottom)); } .md-view.hidden{ display:none; } .hidden{ display:none; } /* social auth buttons are md-outlined-button in the app — drop the legacy host border/background/padding so we don't get a double outline */ .md .btn-social{ width:100%; border:none; background:transparent; box-shadow:none; padding:0; margin-bottom:9px; color:var(--md-sys-color-on-surface); --md-outlined-button-container-shape:8px; } .md .btn-social:hover{ box-shadow:none; transform:none; } .home-search{ margin-bottom:12px; } .home-search.hidden{ display:none; } /* default-folder field: show the example as clearly a placeholder, not a real value */ #defaultPath::placeholder{ font-style:italic; opacity:.5; } /* ---------------- in-app file viewer ---------------- */ .file-viewer{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:var(--md-sys-color-surface); } .file-viewer.hidden{ display:none; } .fv-bar{ display:flex; align-items:center; gap:4px; flex:0 0 auto; height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 6px 0; background:var(--md-sys-color-surface-container); color:var(--md-sys-color-on-surface); } .fv-title{ flex:1 1 auto; min-width:0; font-size:18px; font-weight:500; margin:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fv-body{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; background:var(--md-sys-color-surface-container-lowest); } .fv-img{ margin:auto; max-width:100%; max-height:100%; object-fit:contain; } .fv-frame{ flex:1 1 auto; width:100%; height:100%; border:0; background:#fff; } /* ---------------- cards ---------------- */ .md-card{ background:var(--md-sys-color-surface-container); color:var(--md-sys-color-on-surface); border-radius:var(--md-sys-shape-corner-large); overflow:hidden; } .md-card.outlined{ background:var(--md-sys-color-surface); border:1px solid var(--md-sys-color-outline-variant); } /* section label (kept subtle, MD3 title-small) */ .md-section-label{ font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface-variant); margin:24px 4px 8px; display:block; } /* drilled-in folder header: make the category name a bold heading (coloured by its category via inline style) so it's clearly distinct from the "Back" button */ #docListTitle{ font-size:16px; font-weight:600; line-height:1.2; } .md-app-bar .back-btn, #folderBack.back-btn{ --md-text-button-label-text-weight:500; } /* ---------------- category grid ---------------- */ .cat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } @media (min-width:600px){ .cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .cat-card{ position:relative; text-align:left; border:none; cursor:pointer; background:var(--md-sys-color-surface-container); color:var(--md-sys-color-on-surface); border-radius:var(--md-sys-shape-corner-medium); padding:12px; display:flex; flex-direction:row; align-items:center; gap:10px; --md-ripple-hover-color:var(--md-sys-color-on-surface); --md-ripple-pressed-color:var(--md-sys-color-on-surface); } .cat-ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:color-mix(in srgb, var(--c, var(--md-sys-color-primary)) 20%, transparent); color:var(--c, var(--md-sys-color-on-primary-container)); } .cat-ic .material-symbols-outlined{ font-size:20px; } .cat-name{ font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cat-count{ font-size:18px; font-weight:500; line-height:1; color:var(--md-sys-color-on-surface-variant); font-family:var(--md-ref-typeface-plain); } .cat-fill{ display:none; } /* ---------------- lists ---------------- */ .md-list-card{ background:var(--md-sys-color-surface-container); border-radius:var(--md-sys-shape-corner-large); overflow:hidden; } md-list{ --md-list-container-color:transparent; background:transparent; } .action-status{ font-size:11px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:8px; white-space:nowrap; } .action-status.overdue{ background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container); } .action-status.due, .action-status.upcoming{ background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); } .action-status.paid{ background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); } .action-status.filed{ background:var(--md-sys-color-surface-variant); color:var(--md-sys-color-on-surface-variant); } .list-empty{ padding:28px 16px; text-align:center; color:var(--md-sys-color-on-surface-variant); font-size:14px; } /* action rows inside the actions card */ .action-item{ padding:14px 0; border-bottom:1px solid var(--md-sys-color-outline-variant); } .action-item:last-child{ border-bottom:none; } .action-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .action-title{ font-size:15px; font-weight:500; color:var(--md-sys-color-on-surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .action-meta{ font-size:13px; color:var(--md-sys-color-on-surface-variant); margin-top:2px; } .action-btns{ display:flex; align-items:center; gap:8px; margin-top:10px; } /* add-new category card */ .cat-add{ border:1px dashed var(--md-sys-color-outline); background:transparent; } .cat-add .cat-ic{ background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); } /* ---------------- FAB ---------------- */ /* fixed bottom action bar (opaque so content scrolls behind it, never over the cards) */ .md-fab-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--md-sys-color-surface); border-top:1px solid var(--md-sys-color-outline-variant); } .md-fab-wrap.hidden{ display:none; } .scan-count{ font-size:12px; font-weight:500; color:var(--md-sys-color-on-surface-variant); } .scan-upgrade{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--md-sys-color-primary); padding:2px 4px; text-decoration:underline; } .scan-upgrade:hover{ color:var(--md-sys-color-on-surface); } /* ---------------- navigation drawer ---------------- */ .md-scrim{ position:fixed; inset:0; background:var(--md-sys-color-scrim); opacity:.4; z-index:40; } .md-scrim.hidden{ display:none; } .md-drawer{ position:fixed; top:0; left:0; bottom:0; width:300px; max-width:82vw; z-index:41; background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface); border-radius:0 16px 16px 0; padding:12px; padding-top:calc(20px + env(safe-area-inset-top)); transform:translateX(-105%); transition:transform .25s cubic-bezier(.2,0,0,1); display:flex; flex-direction:column; gap:2px; } .md-drawer.open{ transform:translateX(0); } .md-drawer-title{ font-family:var(--md-ref-typeface-brand); font-size:20px; font-weight:500; color:var(--md-sys-color-on-surface); padding:8px 16px 12px; } .md-drawer-item{ display:flex; align-items:center; gap:16px; height:56px; padding:0 20px; border:none; cursor:pointer; background:transparent; color:var(--md-sys-color-on-surface-variant); border-radius:28px; font-family:var(--md-ref-typeface-plain); font-size:14px; font-weight:500; text-align:left; width:100%; position:relative; overflow:hidden; } .md-drawer-item .material-symbols-outlined{ font-size:24px; } .md-drawer-item.danger{ color:var(--md-sys-color-error); } /* ---------------- dialogs / forms ---------------- */ .field{ display:block; width:100%; margin-bottom:14px; } .field md-filled-text-field, .field md-outlined-text-field, .field md-filled-select{ width:100%; } .dialog-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; } /* ---------------- snackbar ---------------- */ .md-snackbar{ position:fixed; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:60; max-width:560px; margin:0 auto; background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); border-radius:var(--md-sys-shape-corner-small); padding:14px 16px; font-size:14px; box-shadow:0 3px 8px rgba(0,0,0,.3); opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; } .md-snackbar.show{ opacity:1; transform:translateY(0); } /* ---------------- login gate ---------------- */ .md-gate{ position:fixed; inset:0; z-index:30; overflow-y:auto; background:var(--md-sys-color-background); display:flex; align-items:flex-start; justify-content:center; } .md-gate.hidden{ display:none; } .md-gate-card{ width:100%; max-width:420px; padding:calc(40px + env(safe-area-inset-top)) 24px 40px; } .md-gate h1{ font-family:var(--md-ref-typeface-brand); font-size:28px; font-weight:400; margin:0 0 4px; color:var(--md-sys-color-on-surface); } .md-gate .eyebrow{ font-size:14px; font-weight:500; color:var(--md-sys-color-primary); margin-bottom:8px; } .md-gate .sub{ font-size:14px; color:var(--md-sys-color-on-surface-variant); margin:0 0 24px; line-height:1.45; } .md-gate .gate-or{ text-align:center; color:var(--md-sys-color-on-surface-variant); font-size:12px; margin:18px 0; } .md-gate md-filled-button, .md-gate md-outlined-button{ width:100%; margin-bottom:10px; } .form-error{ color:var(--md-sys-color-error); font-size:13px; margin:6px 0 0; } /* ============================================================ Compatibility: style legacy class names with MD3 tokens (settings, chips, secondary views) now that body is .md ============================================================ */ .md .app-panel.hidden{ display:none; } .md .section-title{ font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface-variant); margin:24px 4px 8px; display:block; } /* generic buttons */ .md .btn-primary{ background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border:none; border-radius:20px; padding:10px 24px; font-size:14px; font-weight:500; cursor:pointer; } .md .btn-secondary{ background:transparent; color:var(--md-sys-color-primary); border:1px solid var(--md-sys-color-outline); border-radius:20px; padding:10px 20px; font-size:14px; font-weight:500; cursor:pointer; } .md .btn-secondary.danger{ color:var(--md-sys-color-error); border-color:var(--md-sys-color-error); } .md .btn-ghost, .md .refresh-btn{ background:none; border:none; color:var(--md-sys-color-primary); font-size:14px; font-weight:500; cursor:pointer; padding:8px 4px; } /* chips (type / move) */ .md .type-chip{ background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); border:1px solid var(--md-sys-color-outline-variant); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; } .md .type-chip.selected{ background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); border-color:transparent; } .md .type-chip.add{ border-style:dashed; } /* settings blocks */ .md .reminder-card{ background:var(--md-sys-color-surface-container); border-radius:16px; padding:4px 16px; } .md .reminder-intro{ font-size:13px; line-height:1.5; color:var(--md-sys-color-on-surface-variant); margin:14px 2px; } .md .reminder-intro b{ color:var(--md-sys-color-on-surface); font-weight:500; } .md .reminder-setting{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--md-sys-color-outline-variant); } .md .reminder-setting-info{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; } .md .reminder-setting-title{ font-size:15px; font-weight:500; color:var(--md-sys-color-on-surface); } .md .reminder-setting-note{ font-size:13px; line-height:1.4; color:var(--md-sys-color-on-surface-variant); } .md .reminder-badge{ font-size:11px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; padding:3px 10px; border-radius:8px; white-space:nowrap; background:var(--md-sys-color-surface-variant); color:var(--md-sys-color-on-surface-variant); } .md .reminder-badge.on{ background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); } .md .reminder-badge.off{ background:var(--md-sys-color-surface-variant); color:var(--md-sys-color-on-surface-variant); } .md .reminder-card .btn-primary[disabled]{ opacity:.5; cursor:default; } .md .rem-lead{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:14px; color:var(--md-sys-color-on-surface-variant); } .md .rem-lead input{ width:56px; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-on-surface); border-radius:8px; padding:6px 8px; font-size:16px; } .md .storage-details{ margin-top:8px; } .md .storage-details summary{ font-size:15px; font-weight:500; padding:12px 0; cursor:pointer; color:var(--md-sys-color-on-surface); } .md .storage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; } .md .storage-btn{ background:var(--md-sys-color-surface-container); border:1px solid var(--md-sys-color-outline-variant); border-radius:12px; padding:14px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; } .md .storage-name{ font-weight:500; font-size:14px; color:var(--md-sys-color-on-surface); } .md .storage-status{ font-size:12px; color:var(--md-sys-color-on-surface-variant); } .md .storage-status.connected{ color:var(--md-sys-color-primary); } .md .backup-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; font-size:13px; color:var(--md-sys-color-on-surface-variant); } .md .backup-bar.hidden, .md .path-setting.hidden, .md .changepass.hidden{ display:none; } .md .path-setting{ margin-top:16px; } .md .path-row{ display:flex; gap:8px; } .md .path-row input{ flex:1; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-on-surface); border-radius:8px; padding:10px; font-size:16px; } .md .account-bar{ display:block; margin-top:8px; } .md .account-label{ font-size:14px; color:var(--md-sys-color-on-surface); display:block; margin-bottom:12px; } .md .plan-pill{ background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); font-size:11px; font-weight:500; padding:3px 10px; border-radius:8px; margin-left:6px; } .md .account-actions{ display:flex; flex-direction:column; gap:10px; } .md .account-actions .btn-secondary{ width:100%; text-align:left; padding:14px 18px; } .md .changepass{ margin-top:16px; display:flex; flex-direction:column; gap:12px; } .md .changepass .modal-field label{ font-size:13px; color:var(--md-sys-color-on-surface-variant); display:block; margin-bottom:4px; } .md .changepass input{ width:100%; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-on-surface); border-radius:8px; padding:12px; font-size:16px; } .md .changepass-actions{ display:flex; gap:8px; } /* dashboard / calendar / predictions cards */ .md .appdash, .md .appcal, .md .predict-wrap{ background:var(--md-sys-color-surface-container); border-radius:16px; padding:16px; color:var(--md-sys-color-on-surface); } .md .appdash.hidden, .md .appcal.hidden, .md .predict-wrap.hidden{ display:none; } .md .appdash-eyebrow, .md .predict-sub, .md .cal-daynum, .md .cal-dow span{ color:var(--md-sys-color-on-surface-variant); } .md .appdash-total, .md .cal-title, .md .predict-name{ color:var(--md-sys-color-on-surface); } .md .cal-cell{ background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline-variant); border-radius:8px; } .md .predict-list li{ background:var(--md-sys-color-surface-container-high); border-radius:8px; padding:10px 12px; margin-bottom:6px; } .md .doc-list-head, .md .predict-wrap .doc-list-head{ display:flex; justify-content:space-between; color:var(--md-sys-color-on-surface-variant); font-size:13px; margin-bottom:8px; } .md .plan-btn{ display:flex; align-items:center; justify-content:space-between; } .md .plan-btn .plan-pill{ margin-left:auto; } /* Scan FAB — Cobalt hover glow (matches the landing CTA) */ .md #openAddBtn{ transition:transform .15s ease, box-shadow .15s ease; border-radius:16px; } .md #openAddBtn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent); }