/* ═══════════════════════════════════════════════════════ PracticeHub — Sage Theme Palette: warm off-white bg, sage/mint green primary, navy midnight contrast, orange accent, blueprint grid Activate: add class="theme-sage" to ═══════════════════════════════════════════════════════ */ body.theme-sage { --lt-bg: #f0ede8; --lt-ink: #1e2d3d; --lt-ink2: #4a5568; --lt-ink3: #94a3b8; --dk-surface: #ffffff; --dk-surface2: #f7f5f1; --dk-surface3: #f0ede8; --dk-border: #e2ddd6; --dk-border2: #cdc8c0; --dk-ink: #1e2d3d; --dk-ink2: #4a5568; --dk-ink3: #94a3b8; --lime: #7BAF9E; --lime-glow: rgba(123,175,158,.15); --lime-glow2: rgba(123,175,158,.08); --amber-warn: #E87D3E; --sage: #7BAF9E; --sage-lt: #c8dfd9; --sage-dk: #4a8072; --navy: #1e2d3d; --navy-lt: #2e4460; --orange: #E87D3E; --border-sage: #a8cfc7; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-pill: 40px; } body.theme-sage { background: #f0ede8; } /* ── TOPBAR ── */ body.theme-sage .topbar { background: #ffffff; border: 1.5px solid #e2ddd6; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.04); margin: 12px 12px 0; } body.theme-sage .topbar-brand { color: #1e2d3d; } body.theme-sage .brand-dot { background: #7BAF9E; box-shadow: 0 2px 6px rgba(123,175,158,.4); } body.theme-sage .topbar-nav { background: #f7f5f1; border: 1.5px solid #e2ddd6; border-radius: 30px; padding: 3px; } body.theme-sage .topbar-nav a { color: #4a5568; font-size: 11px; padding: 5px 12px; border-radius: 24px; font-weight: 500; border: none; transition: all .15s; } body.theme-sage .topbar-nav a:hover { background: #c8dfd9; color: #4a8072; } body.theme-sage .topbar-nav a.active { background: #1e2d3d; color: #ffffff; box-shadow: 0 2px 6px rgba(30,45,61,.3); } /* ── PAGE BACKGROUND & HERO ── */ body.theme-sage .page-hero, body.theme-sage .light-zone { background: #f0ede8; } body.theme-sage .page-hero::before, body.theme-sage .light-zone::before { background-image: linear-gradient(rgba(123,175,158,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(123,175,158,.07) 1px, transparent 1px); background-size: 24px 24px; } body.theme-sage .page-hero-title, body.theme-sage .hero-title { color: #1e2d3d; letter-spacing: -0.03em; } body.theme-sage .page-hero-sub, body.theme-sage .hero-sub { color: #94a3b8; } /* ── TOOLBAR ── */ body.theme-sage .toolbar { background: #f7f5f1; border-bottom: 1.5px solid #e2ddd6; } body.theme-sage .filter-sel { background: #ffffff; border: 1.5px solid #e2ddd6; color: #1e2d3d; border-radius: 30px; transition: border-color .15s; } body.theme-sage .filter-sel:focus { border-color: #7BAF9E; } body.theme-sage .search-input { background: #ffffff; border: 1.5px solid #e2ddd6; color: #1e2d3d; border-radius: 30px; } body.theme-sage .search-input:focus { border-color: #7BAF9E; box-shadow: 0 0 0 3px rgba(123,175,158,.15); } /* ── CARDS & SURFACES ── */ body.theme-sage .proj-table, body.theme-sage .inv-table, body.theme-sage .perm-table, body.theme-sage .fee-calc, body.theme-sage .kpi-c, body.theme-sage .inv-detail, body.theme-sage .user-card, body.theme-sage .modal { background: #ffffff; border: 1.5px solid #e2ddd6; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.03); } /* ── KPI STRIP ── */ body.theme-sage .kpi-strip { background: transparent; gap: 10px; border: none; } body.theme-sage .kpi-c { background: #ffffff; border: 1.5px solid #e2ddd6; border-radius: 16px; } body.theme-sage .kpi-lbl { color: #94a3b8; font-size: 9px; letter-spacing: .07em; } body.theme-sage .kpi-val { color: #1e2d3d; font-size: 22px; font-weight: 800; letter-spacing: -.04em; } body.theme-sage .kpi-val.lime { color: #7BAF9E; } body.theme-sage .kpi-val.warn { color: #E87D3E; } body.theme-sage .kpi-sub { color: #94a3b8; font-size: 10px; } /* ── TABLE STYLES ── */ body.theme-sage .proj-table th, body.theme-sage .inv-table th, body.theme-sage .perm-table th { background: #f7f5f1; color: #94a3b8; border-bottom: 1.5px solid #e2ddd6; font-size: 9px; letter-spacing: .07em; } body.theme-sage .proj-table td, body.theme-sage .inv-table td { border-bottom: 1px solid #f0ede8; color: #4a5568; } body.theme-sage .proj-table tr.pr:hover td, body.theme-sage .inv-table tr.clickable:hover td { background: #f7f5f1; } body.theme-sage .proj-table th.sorted { color: #7BAF9E; } body.theme-sage .t-proj, body.theme-sage .t-name { color: #1e2d3d; } /* ── BUTTONS — pill style from references ── */ body.theme-sage .btn-lime { background: #7BAF9E; color: #ffffff; border-radius: 30px; border: none; font-size: 11px; font-weight: 600; box-shadow: 0 2px 8px rgba(123,175,158,.35); transition: all .15s; } body.theme-sage .btn-lime:hover { background: #4a8072; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(123,175,158,.4); } body.theme-sage .btn-dark { background: #1e2d3d; color: #ffffff; border-radius: 30px; border: none; box-shadow: 0 2px 8px rgba(30,45,61,.25); } body.theme-sage .btn-dark:hover { background: #2e4460; transform: translateY(-1px); } body.theme-sage .btn-ghost-dk { background: transparent; border: 1.5px solid #e2ddd6; color: #4a5568; border-radius: 30px; transition: all .15s; } body.theme-sage .btn-ghost-dk:hover { background: #c8dfd9; border-color: #a8cfc7; color: #4a8072; } /* ── FORM FIELDS ── */ body.theme-sage input[type="text"], body.theme-sage input[type="email"], body.theme-sage input[type="number"], body.theme-sage input[type="date"], body.theme-sage input[type="password"], body.theme-sage textarea, body.theme-sage select { background: #f7f5f1; border: 1.5px solid #e2ddd6; color: #1e2d3d; border-radius: 12px; transition: border-color .15s; } body.theme-sage input:focus, body.theme-sage textarea:focus, body.theme-sage select:focus { border-color: #7BAF9E; box-shadow: 0 0 0 3px rgba(123,175,158,.15); } /* ── TABS — pill style ── */ body.theme-sage .tab-btn { border-radius: 30px; border: 1.5px solid #e2ddd6; color: #4a5568; background: transparent; font-weight: 500; transition: all .15s; } body.theme-sage .tab-btn.active { background: #1e2d3d; color: #ffffff; border-color: #1e2d3d; box-shadow: 0 2px 6px rgba(30,45,61,.25); } body.theme-sage .tab-btn:hover:not(.active) { background: #c8dfd9; border-color: #a8cfc7; color: #4a8072; } body.theme-sage .view-tab { color: #4a5568; } body.theme-sage .view-tab.active { background: #1e2d3d; color: #ffffff; } body.theme-sage .view-tab:hover:not(.active) { background: #c8dfd9; color: #4a8072; } /* ── ROLE BADGES ── */ body.theme-sage .uc-role { border-radius: 20px; } body.theme-sage .role-principal { background: rgba(123,175,158,.15); color: #4a8072; border-color: #a8cfc7; } body.theme-sage .role-architect { background: rgba(30,45,61,.08); color: #1e2d3d; border-color: #cdc8c0; } body.theme-sage .role-technologist, body.theme-sage .role-architect_in_training { background: rgba(123,175,158,.08); color: #4a8072; border-color: #a8cfc7; } body.theme-sage .role-finance, body.theme-sage .role-hr, body.theme-sage .role-admin { background: rgba(232,125,62,.08); color: #b55a20; border-color: rgba(232,125,62,.3); } /* ── STATUS TAGS ── */ body.theme-sage .status-pf { background: rgba(232,125,62,.1); color: #b55a20; } body.theme-sage .status-sent { background: rgba(30,45,61,.08); color: #1e2d3d; } body.theme-sage .status-paid { background: rgba(123,175,158,.15); color: #4a8072; } /* ── STAGE BAR ── */ body.theme-sage .stage-step.completed .step-circle { background: #7BAF9E; border-color: #7BAF9E; color: #fff; } body.theme-sage .stage-step.current .step-circle { border-color: #7BAF9E; color: #7BAF9E; box-shadow: 0 0 0 3px rgba(123,175,158,.2); } body.theme-sage .stage-step.current .step-label { color: #7BAF9E; font-weight: 700; } /* ── MODAL ── */ body.theme-sage .modal { background: #ffffff; border: 1.5px solid #e2ddd6; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,.1); } body.theme-sage .modal-overlay { background: rgba(30,45,61,.5); } /* ── TOAST ── */ body.theme-sage .toast { background: #ffffff; border: 1.5px solid #e2ddd6; color: #1e2d3d; border-radius: 30px; box-shadow: 0 4px 20px rgba(0,0,0,.1); } body.theme-sage .toast.success { border-color: #7BAF9E; color: #4a8072; } body.theme-sage .toast.error { border-color: #E87D3E; color: #b55a20; } /* ── SECTION TITLES ── */ body.theme-sage .sec-title { color: #94a3b8; letter-spacing: .08em; } body.theme-sage .sec-title::before { background: #7BAF9E; } /* ── USER CARDS ── */ body.theme-sage .user-card { background: #ffffff; border: 1.5px solid #e2ddd6; border-radius: 16px; } body.theme-sage .user-avatar, body.theme-sage .uc-avatar { background: #7BAF9E; color: #ffffff; } /* ── FEE CALC ── */ body.theme-sage .fee-calc h3::before { background: #7BAF9E; } /* ── BLUEPRINT BACKGROUND on special areas ── */ body.theme-sage .main { background-image: none; } /* ── CHECKBOXES ── */ body.theme-sage input[type="checkbox"] { accent-color: #7BAF9E; } /* ── SORTED COLUMN ── */ body.theme-sage .proj-table th.sorted { color: #7BAF9E; } /* ── SEARCH ICON ── */ body.theme-sage .search-icon { color: #7BAF9E; } /* ── TOGGLE FOR SETTINGS PAGE ── */ body.theme-sage .toggle-switch input:checked + .toggle-slider { background: rgba(123,175,158,.15); border-color: #7BAF9E; } body.theme-sage .toggle-switch input:checked + .toggle-slider::before { background: #7BAF9E; } /* ── PERM TABLE CHECKBOXES ── */ body.theme-sage .perm-table input[type="checkbox"] { accent-color: #7BAF9E; } /* ── DISBURSEMENT LIST ── */ body.theme-sage .disb-cat { color: #7BAF9E; } /* ── ADD ROW BUTTON ── */ body.theme-sage .add-row-btn:hover { border-color: #7BAF9E; color: #7BAF9E; background: rgba(123,175,158,.06); }