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

:root { --bg:#f5f7f3; --surface:#fff; --ink:#18201a; --muted:#778078; --line:#dfe5dd; --soft:#edf1eb; --accent:#2e7d4f; --accent-dark:#205b3a; --accent-wash:#e1f0e5; --amber:#a7671d; --amber-wash:#fff0db; --danger:#b5473d; --danger-wash:#fde7e4; --shadow:0 20px 50px rgba(25,45,30,.08); --radius:18px; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; } html { color-scheme:light; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; } button,input,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(46,125,79,.25); outline-offset:2px; }
.hidden { display:none !important; }
.login-view { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1fr) minmax(420px,560px); background:#eef2ec; } .login-art { position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:64px; background:#1e3929; color:#e5f4e6; } .login-art p { position:relative; z-index:2; margin:0; font:500 clamp(40px,6vw,94px)/.93 'DM Mono',monospace; letter-spacing:-.08em; } .login-art p span { color:#93c99c; } .art-arc { position:absolute; border:1px solid rgba(203,236,207,.25); border-radius:50%; } .arc-one { width:75vw; height:75vw; left:-18vw; top:-10vw; } .arc-two { width:48vw; height:48vw; left:10vw; top:16vw; border-color:rgba(203,236,207,.14); } .art-spark { position:absolute; width:12px; height:12px; border-radius:50%; background:#f7b86b; box-shadow:0 0 0 8px rgba(247,184,107,.1); } .spark-one { top:18%; right:18%; } .spark-two { bottom:28%; right:34%; width:7px; height:7px; background:#93c99c; box-shadow:none; }
.login-panel { display:flex; flex-direction:column; justify-content:center; padding:56px clamp(32px,7vw,96px); background:#fff; } .brand-mark { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; letter-spacing:-.03em; } .brand-dot { display:inline-block; width:17px; height:17px; background:var(--accent); border-radius:50% 50% 50% 8px; transform:rotate(-22deg); } .login-copy { margin:88px 0 42px; } .eyebrow,.sidebar-caption,.small-label { margin:0 0 16px; color:var(--muted); font:500 11px/1 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } .login-copy h1 { margin:0; font-size:clamp(42px,5vw,64px); line-height:1.06; letter-spacing:-.07em; } .login-copy h1 em { color:var(--accent); font-style:normal; } .login-copy > p:last-child { margin:22px 0 0; color:var(--muted); font-size:15px; } .login-form label,.field > span { display:block; margin-bottom:9px; color:#4e594f; font-size:12px; font-weight:700; } .password-wrap { position:relative; } input,textarea { width:100%; border:1px solid var(--line); border-radius:11px; background:#fbfcfa; color:var(--ink); padding:13px 14px; font-size:14px; transition:border-color 160ms ease-out,box-shadow 160ms ease-out,background 160ms ease-out; } input:hover,textarea:hover { border-color:#b7c5b8; } input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(46,125,79,.1); background:#fff; outline:none; } .password-wrap input { padding-right:46px; } .icon-btn { display:inline-grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); padding:8px; } .icon-btn:hover { color:var(--ink); background:var(--soft); } .password-toggle { position:absolute; right:5px; top:4px; } .password-toggle svg { width:17px; } .form-error { min-height:18px; margin:8px 0 0; color:var(--danger); font-size:12px; } .primary-btn,.secondary-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:10px; border:1px solid transparent; padding:12px 17px; font-size:13px; font-weight:700; letter-spacing:-.02em; transition:transform 160ms ease-out,background 160ms ease-out,border-color 160ms ease-out; } .primary-btn { color:#fff; background:var(--accent); box-shadow:0 7px 16px rgba(46,125,79,.15); } .primary-btn:hover { background:var(--accent-dark); transform:translateY(-1px); } .primary-btn:active,.secondary-btn:active,.round-btn:active { transform:scale(.97); } .secondary-btn { border-color:var(--line); color:#445047; background:#fff; } .secondary-btn:hover { border-color:#b7c5b8; background:var(--soft); } .login-btn { width:100%; margin-top:14px; padding:14px 17px; } .login-btn svg { width:17px; } .login-foot { margin-top:auto; color:#a1aaa3; font-size:11px; }
.dashboard-view { min-height:100vh; display:flex; } .sidebar { position:fixed; inset:0 auto 0 0; z-index:5; display:flex; flex-direction:column; width:245px; padding:28px 20px 20px; border-right:1px solid var(--line); background:#f0f4ee; } .sidebar-caption { margin:52px 12px 14px; font-size:10px; } .side-nav { display:grid; gap:4px; } .nav-item { width:100%; display:flex; align-items:center; gap:11px; border:0; border-radius:9px; padding:11px 12px; color:#758078; background:transparent; text-align:left; font-size:13px; font-weight:600; } .nav-item svg { width:17px; height:17px; stroke-width:1.8; } .nav-item:hover { color:var(--ink); background:#e6ece4; } .nav-item.active { color:var(--accent-dark); background:var(--accent-wash); } .nav-count { margin-left:auto; min-width:21px; padding:3px 6px; border-radius:6px; color:var(--accent-dark); background:#c6e3ce; font:500 11px 'DM Mono',monospace; text-align:center; } .sidebar-bottom { margin-top:auto; } .backup-note { display:flex; gap:10px; margin:0 8px 18px; padding:13px 8px; border-top:1px solid var(--line); color:var(--muted); } .backup-note svg { width:17px; margin-top:1px; } .backup-note strong,.backup-note span { display:block; } .backup-note strong { color:#4e594f; font-size:11px; } .backup-note span { margin-top:4px; font-size:10px; line-height:1.45; } .logout-btn { color:#9a6d66; }
.main-content { width:calc(100% - 245px); margin-left:245px; } .topbar { height:76px; display:flex; align-items:center; justify-content:flex-end; padding:0 48px; border-bottom:1px solid var(--line); background:rgba(245,247,243,.85); } .topbar-actions { display:flex; align-items:center; gap:20px; color:var(--muted); font:500 11px 'DM Mono',monospace; } .avatar { width:32px; height:32px; border:1px solid #bed4c2; border-radius:50%; color:var(--accent-dark); background:var(--accent-wash); font-size:12px; font-weight:800; } .mobile-brand { display:none; } .content-wrap { max-width:1410px; margin:0 auto; padding:54px 48px 80px; } .page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:34px; } .page-heading h2 { margin:0; font-size:clamp(28px,3vw,42px); letter-spacing:-.07em; line-height:1.1; } .heading-sub { margin:14px 0 0; color:var(--muted); font-size:13px; } .heading-actions { display:flex; gap:9px; } .page-heading.compact { margin-bottom:30px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:56px; } .metric-card { min-height:195px; display:flex; flex-direction:column; padding:21px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .metric-focus { color:#fff; border-color:var(--accent); background:var(--accent); box-shadow:var(--shadow); } .metric-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; font-weight:600; } .metric-focus .metric-top { color:#d3ead8; } .metric-top svg { width:17px; height:17px; } .metric-card strong { margin-top:25px; font:500 30px 'DM Mono',monospace; letter-spacing:-.06em; } .metric-card p { margin:8px 0 0; color:var(--muted); font-size:11px; } .metric-focus p { color:#d3ead8; } .metric-link { display:flex; align-items:center; gap:6px; margin-top:auto; color:var(--accent); font-size:11px; font-weight:700; cursor:pointer; } .metric-focus .metric-link { color:#e4f3e7; } .metric-link svg { width:14px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; } .section-heading h3,.principle-panel h3,.quick-panel h3 { margin:0; font-size:16px; letter-spacing:-.04em; } .section-heading p { margin:8px 0 0; color:var(--muted); font-size:12px; } .text-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 0; border:0; color:var(--accent-dark); background:transparent; font-size:12px; font-weight:700; } .text-btn svg { width:14px; } .reminder-list { display:grid; gap:9px; } .reminder-row { display:grid; grid-template-columns:minmax(160px,1.1fr) minmax(120px,1fr) 110px 132px 108px auto; align-items:center; gap:20px; padding:17px 20px; border:1px solid var(--line); border-radius:13px; background:#fff; } .reminder-row:hover { border-color:#bfd2c2; box-shadow:0 6px 18px rgba(25,45,30,.05); } .person-cell { display:flex; align-items:center; gap:11px; min-width:0; } .person-avatar { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--accent-dark); background:var(--accent-wash); font-size:12px; font-weight:800; } .person-info { min-width:0; } .person-info strong,.person-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .person-info strong { font-size:13px; } .person-info span,.cell-label { margin-top:4px; color:var(--muted); font-size:11px; } .row-value { color:#4b564e; font-size:12px; } .date-cell strong { display:block; font:500 12px 'DM Mono',monospace; } .status-badge { display:inline-flex; align-items:center; width:max-content; gap:5px; border-radius:20px; padding:5px 8px; font-size:10px; font-weight:700; } .status-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; } .status-upcoming { color:var(--amber); background:var(--amber-wash); } .status-overdue { color:var(--danger); background:var(--danger-wash); } .status-contacted { color:var(--accent-dark); background:var(--accent-wash); } .row-actions { display:flex; justify-content:flex-end; gap:3px; } .row-actions .icon-btn { color:#879189; } .overview-bottom { display:grid; grid-template-columns:1.4fr 1fr; gap:13px; margin-top:44px; } .principle-panel,.quick-panel { display:flex; align-items:center; gap:17px; min-height:112px; padding:22px; border-radius:var(--radius); } .principle-panel { color:#f4faf3; background:#315b3e; } .principle-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; color:#c6e3ce; background:rgba(225,240,229,.15); } .principle-icon svg { width:20px; } .principle-panel p { margin:7px 0 0; color:#cbdfce; font-size:11px; line-height:1.6; } .quick-panel { justify-content:space-between; border:1px solid var(--line); background:#fff; } .quick-panel .small-label { margin-bottom:8px; } .quick-panel h3 { font-size:14px; } .round-btn { display:grid; place-items:center; width:39px; height:39px; border:0; border-radius:50%; color:#fff; background:var(--accent); } .round-btn svg { width:18px; }
.ledger-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; } .search-wrap { position:relative; flex:1; max-width:380px; } .search-wrap > svg { position:absolute; left:13px; top:13px; width:16px; color:#89948b; } .search-wrap input { padding-left:39px; } .filter-tabs { display:flex; gap:4px; padding:4px; border-radius:10px; background:#e9eee8; } .filter-tab { border:0; border-radius:7px; padding:8px 12px; color:#79847b; background:transparent; font-size:11px; font-weight:700; } .filter-tab:hover { color:var(--ink); } .filter-tab.active { color:var(--accent-dark); background:#fff; box-shadow:0 2px 6px rgba(22,44,28,.06); } .filter-tab span { margin-left:3px; color:#99a49b; font:500 10px 'DM Mono',monospace; } .table-shell { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; } .table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:920px; } th { padding:15px 17px; border-bottom:1px solid var(--line); color:#89938b; font:500 10px 'DM Mono',monospace; letter-spacing:.05em; text-align:left; text-transform:uppercase; white-space:nowrap; } td { padding:15px 17px; border-bottom:1px solid #edf0eb; vertical-align:middle; font-size:12px; } tr:last-child td { border-bottom:0; } tbody tr:hover { background:#fbfcfa; } .amount-cell strong,.profit-cell strong { display:block; font:500 12px 'DM Mono',monospace; } .amount-cell span { color:#9ca69e; font:11px 'DM Mono',monospace; } .profit-positive { color:var(--accent-dark); } .profit-negative { color:var(--danger); } .contact-cell { max-width:150px; color:#566259; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .empty-state { display:flex; align-items:center; flex-direction:column; padding:72px 20px; text-align:center; } .empty-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:15px; border-radius:15px; color:var(--accent); background:var(--accent-wash); } .empty-icon svg { width:23px; } .empty-state h3 { margin:0; font-size:15px; } .empty-state p { margin:8px 0 20px; color:var(--muted); font-size:12px; }
.customer-dialog { width:min(590px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:20px; box-shadow:0 28px 90px rgba(20,38,23,.22); color:var(--ink); } .customer-dialog::backdrop { background:rgba(18,33,22,.38); backdrop-filter:blur(3px); } .customer-dialog form { padding:29px; overflow:auto; max-height:calc(100vh - 32px); } .dialog-head { display:flex; justify-content:space-between; align-items:flex-start; } .dialog-head h2 { margin:0; font-size:24px; letter-spacing:-.06em; } .dialog-head .eyebrow { margin-bottom:11px; } .dialog-intro { margin:11px 0 25px; color:var(--muted); font-size:12px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; } .field.full { grid-column:1/-1; } .field b { color:var(--accent); } .field small { display:block; margin-top:6px; color:#9aa49c; font-size:10px; } textarea { resize:vertical; min-height:78px; } .dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:23px; padding-top:19px; border-top:1px solid var(--line); } .toast { position:fixed; z-index:20; right:24px; bottom:24px; max-width:340px; padding:12px 16px; border-radius:10px; color:#fff; background:#203c29; box-shadow:var(--shadow); font-size:12px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 180ms ease-out,transform 180ms ease-out; } .toast.show { opacity:1; transform:translateY(0); }
@media (max-width:1100px) { .sidebar { width:210px; } .main-content { width:calc(100% - 210px); margin-left:210px; } .content-wrap { padding-inline:28px; } .metric-grid { grid-template-columns:repeat(2,1fr); } .reminder-row { grid-template-columns:minmax(150px,1fr) minmax(110px,1fr) 110px 122px auto; } .reminder-row > :nth-child(3) { display:none; } }
@media (max-width:760px) { .login-view { display:block; } .login-art { min-height:180px; padding:27px 25px; } .login-art p { font-size:34px; } .arc-one { width:120vw; height:120vw; left:-35vw; top:-80vw; } .arc-two { width:80vw; height:80vw; left:25vw; top:-30vw; } .login-panel { min-height:calc(100vh - 180px); padding:34px 25px 24px; } .login-copy { margin:58px 0 34px; } .login-copy h1 { font-size:43px; } .sidebar { position:fixed; inset:auto 0 0; flex-direction:row; width:100%; height:67px; padding:7px 14px; border:0; border-top:1px solid var(--line); background:rgba(246,248,244,.95); backdrop-filter:blur(14px); } .sidebar .brand-mark,.sidebar-caption,.backup-note,.logout-btn { display:none; } .side-nav { width:100%; display:flex; justify-content:space-around; } .nav-item { width:auto; flex-direction:column; gap:2px; padding:6px 22px; font-size:10px; } .nav-count { position:absolute; margin:-21px 0 0 26px; min-width:17px; padding:2px 4px; font-size:9px; } .main-content { width:100%; margin:0; padding-bottom:65px; } .topbar { height:62px; justify-content:space-between; padding:0 20px; } .mobile-brand { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; } .mobile-brand .brand-dot { width:14px; height:14px; } .topbar-actions { gap:11px; font-size:10px; } .content-wrap { padding:34px 18px 52px; } .page-heading { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:27px; } .page-heading h2 { font-size:30px; } .page-heading .primary-btn { width:100%; } .metric-grid { gap:9px; margin-bottom:40px; } .metric-card { min-height:155px; padding:15px; border-radius:14px; } .metric-card strong { margin-top:18px; font-size:23px; } .metric-card p { font-size:10px; line-height:1.45; } .metric-link { font-size:10px; } .section-heading { align-items:flex-start; gap:12px; } .section-heading h3 { font-size:15px; } .section-heading p { font-size:10px; line-height:1.5; } .reminder-row { grid-template-columns:1fr auto; gap:10px; padding:14px; } .reminder-row > :nth-child(2),.reminder-row > :nth-child(3),.reminder-row > .row-actions .edit-action { display:none; } .reminder-row > :nth-child(4) { justify-self:end; } .reminder-row > :nth-child(5) { grid-column:1/2; } .reminder-row > .row-actions { grid-column:2; grid-row:2; } .overview-bottom { grid-template-columns:1fr; margin-top:32px; } .principle-panel,.quick-panel { min-height:100px; padding:17px; } .ledger-toolbar { align-items:stretch; flex-direction:column; gap:11px; } .search-wrap { max-width:none; } .filter-tabs { overflow-x:auto; justify-content:flex-start; } .filter-tab { flex:none; } .page-heading.compact .heading-actions { width:100%; } .heading-actions { width:100%; } .heading-actions .secondary-btn,.heading-actions .primary-btn { flex:1; } .table-shell { border-radius:12px; } .customer-dialog { width:calc(100vw - 20px); border-radius:17px; } .customer-dialog form { padding:22px 18px; } .form-grid { grid-template-columns:1fr; gap:16px; } .field.full { grid-column:auto; } .dialog-actions .secondary-btn,.dialog-actions .primary-btn { flex:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }