/* ═══════════════════════════════════════════════════════ PracticeHub — Mono (Glass) Theme Inspired by: architectural frosted glass dashboard Activate: add class="theme-mono" to ═══════════════════════════════════════════════════════ */ body.theme-mono { --lt-bg: #e8e6e0; --lt-ink: #1a1a18; --lt-ink2: #3a3a38; --lt-ink3: #888; --dk-surface: rgba(255,255,255,0.52); --dk-surface2: rgba(255,255,255,0.35); --dk-surface3: rgba(255,255,255,0.2); --dk-border: rgba(255,255,255,0.8); --dk-border2: rgba(0,0,0,0.1); --dk-ink: #1a1a18; --dk-ink2: #3a3a38; --dk-ink3: #888; --lime: #1a1a18; --lime-glow: rgba(0,0,0,0.08); --lime-glow2: rgba(0,0,0,0.04); --amber-warn: #555; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 40px; } body.theme-mono { background: #e8e6e0; } /* ── TOPBAR ── */ body.theme-mono .topbar { background: rgba(255,255,255,0.52); border-bottom: 1px solid rgba(255,255,255,0.85); box-shadow: none; } body.theme-mono .topbar-brand { color: #1a1a18; } body.theme-mono .brand-dot { background: #1a1a18; } body.theme-mono .topbar-nav a { color: #888; border-radius: 20px; font-size: 11px; } body.theme-mono .topbar-nav a:hover { background: rgba(0,0,0,0.06); color: #1a1a18; } body.theme-mono .topbar-nav a.active { background: #1a1a18; color: #ffffff; } /* ── PAGE BACKGROUND ── */ body.theme-mono .page-hero, body.theme-mono .light-zone { background: transparent; } body.theme-mono .page-hero::before, body.theme-mono .light-zone::before { display: none; } body.theme-mono .page-hero-title, body.theme-mono .hero-title { color: #1a1a18; font-size: 22px; letter-spacing: -0.03em; } body.theme-mono .page-hero-sub, body.theme-mono .hero-sub { color: #888; } /* ── TOOLBAR ── */ body.theme-mono .toolbar { background: rgba(255,255,255,0.45); border-bottom: 1px solid rgba(255,255,255,0.7); } body.theme-mono .filter-sel { background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.8); color: #1a1a18; border-radius: 20px; } body.theme-mono .search-input { background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.8); color: #1a1a18; } body.theme-mono .search-input:focus { border-color: #1a1a18; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); } /* ── CARDS & SURFACES ── */ body.theme-mono .proj-table, body.theme-mono .inv-table, body.theme-mono .fee-calc, body.theme-mono .inv-detail, body.theme-mono .user-card, body.theme-mono .modal { background: rgba(255,255,255,0.52); border: 1px solid rgba(255,255,255,0.85); border-radius: 14px; } /* ── KPI STRIP ── */ body.theme-mono .kpi-strip { background: transparent; gap: 10px; } body.theme-mono .kpi-c { background: rgba(255,255,255,0.52); border: 1px solid rgba(255,255,255,0.85); border-radius: 14px; } body.theme-mono .kpi-lbl { color: #999; font-size: 9px; letter-spacing: .07em; } body.theme-mono .kpi-val { color: #1a1a18; font-size: 22px; font-weight: 800; letter-spacing: -.04em; } body.theme-mono .kpi-val.lime { color: #1a1a18; } body.theme-mono .kpi-val.warn { color: #555; } /* ── TABLE STYLES ── */ body.theme-mono .proj-table th, body.theme-mono .inv-table th, body.theme-mono .perm-table th { background: rgba(0,0,0,0.03); color: #aaa; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 9px; letter-spacing: .07em; } body.theme-mono .proj-table td, body.theme-mono .inv-table td { border-bottom: 1px solid rgba(0,0,0,0.05); color: #3a3a38; } body.theme-mono .proj-table tr.pr:hover td, body.theme-mono .inv-table tr.clickable:hover td { background: rgba(255,255,255,0.4); } body.theme-mono .proj-table th.sorted { color: #1a1a18; } /* ── BUTTONS ── */ body.theme-mono .btn-lime { background: #1a1a18; color: #ffffff; border-radius: 20px; border: none; font-size: 11px; font-weight: 700; } body.theme-mono .btn-lime:hover { background: #333; } body.theme-mono .btn-dark { background: #1a1a18; color: #ffffff; border-radius: 20px; border: none; } body.theme-mono .btn-ghost-dk { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.12); color: #1a1a18; border-radius: 20px; } body.theme-mono .btn-ghost-dk:hover { background: rgba(255,255,255,0.75); } /* ── FORM FIELDS ── */ body.theme-mono input[type="text"], body.theme-mono input[type="email"], body.theme-mono input[type="number"], body.theme-mono input[type="date"], body.theme-mono input[type="password"], body.theme-mono textarea, body.theme-mono select { background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.1); color: #1a1a18; border-radius: 8px; } body.theme-mono input:focus, body.theme-mono textarea:focus, body.theme-mono select:focus { border-color: #1a1a18; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); } /* ── TABS ── */ body.theme-mono .tab-btn { border-radius: 20px; border: 1px solid rgba(0,0,0,0.1); color: #888; background: rgba(255,255,255,0.4); } body.theme-mono .tab-btn.active { background: #1a1a18; color: #ffffff; border-color: #1a1a18; } body.theme-mono .tab-btn:hover:not(.active) { background: rgba(255,255,255,0.65); color: #1a1a18; } body.theme-mono .view-tab { color: #888; } body.theme-mono .view-tab.active { background: #1a1a18; color: #ffffff; } body.theme-mono .view-tab:hover:not(.active) { background: rgba(0,0,0,0.06); color: #1a1a18; } /* ── ROLE BADGES ── */ body.theme-mono .uc-role { border-radius: 6px; } body.theme-mono .role-principal { background: rgba(0,0,0,0.08); color: #1a1a18; border-color: rgba(0,0,0,0.15); } body.theme-mono .role-architect, body.theme-mono .role-technologist, body.theme-mono .role-finance, body.theme-mono .role-hr, body.theme-mono .role-admin, body.theme-mono .role-architect_in_training { background: rgba(0,0,0,0.05); color: #444; border-color: rgba(0,0,0,0.1); } /* ── STATUS BADGES ── */ body.theme-mono .status-pf { background: rgba(0,0,0,0.05); color: #888; } body.theme-mono .status-sent { background: rgba(0,0,0,0.1); color: #333; } body.theme-mono .status-paid { background: rgba(0,0,0,0.07); color: #2a2a28; } /* ── STAGE BAR ── */ body.theme-mono .stage-step.completed .step-circle { background: #1a1a18; border-color: #1a1a18; color: #fff; } body.theme-mono .stage-step.current .step-circle { border-color: #1a1a18; color: #1a1a18; } body.theme-mono .stage-step.current .step-label { color: #1a1a18; font-weight: 700; } /* ── MODAL ── */ body.theme-mono .modal { background: rgba(240,238,234,0.97); border: 1px solid rgba(255,255,255,0.9); border-radius: 18px; } body.theme-mono .modal-overlay { background: rgba(0,0,0,0.4); } /* ── TOAST ── */ body.theme-mono .toast { background: #1a1a18; color: #ffffff; border-color: #1a1a18; } body.theme-mono .toast.success { border-color: #1a1a18; color: #ffffff; } body.theme-mono .toast.error { background: #333; color: #ff9999; } /* ── SECTION TITLES ── */ body.theme-mono .sec-title { color: #aaa; letter-spacing: .08em; } body.theme-mono .sec-title::before { background: #1a1a18; } /* ── USER CARD ── */ body.theme-mono .user-card { background: rgba(255,255,255,0.52); border: 1px solid rgba(255,255,255,0.85); border-radius: 14px; } body.theme-mono .user-avatar, body.theme-mono .uc-avatar { background: #1a1a18; color: #ffffff; } /* ── FEE CALC SECTION HEADER ── */ body.theme-mono .fee-calc h3::before { background: #1a1a18; } /* ── CHECKBOXES ── */ body.theme-mono input[type="checkbox"] { accent-color: #1a1a18; } /* ── SORTED COLUMN ── */ body.theme-mono .proj-table th.sorted { color: #1a1a18; } /* ── THEME TOGGLE SWATCH ── */ body.theme-mono .toggle-switch input:checked + .toggle-slider { background: rgba(0,0,0,0.1); border-color: #1a1a18; } body.theme-mono .toggle-switch input:checked + .toggle-slider::before { background: #1a1a18; }