/* ============================================================ Sales & Expenses Tracker — "Ledger" design system Light + Dark themes via [data-theme] on ============================================================ */ :root{ --bg: #F4F6FB; --bg-alt: #EAEDF6; --card: #FFFFFF; --text: #171A23; --muted: #6B7280; --border: #E3E6F0; --primary: #2A3EB1; --primary-2: #4C5FE0; --accent: #C9971F; --success: #128a45; --success-bg: #e7f7ee; --danger: #c0272d; --danger-bg: #fbeaea; --sidebar-bg: #10132198; --sidebar-bg-solid: #10101f; --sidebar-text: #AEB4CC; --sidebar-active: #1D2140; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(20,22,40,.04), 0 8px 24px -12px rgba(20,22,40,.12); --shadow-lg: 0 20px 40px -16px rgba(20,22,40,.28); --ease: cubic-bezier(.22,1,.36,1); } [data-theme="dark"]{ --bg: #0B0C13; --bg-alt: #11131c; --card: #171926; --text: #E9EBF4; --muted: #9198B0; --border: #262A3B; --primary: #7C88FF; --primary-2: #97A1FF; --accent: #E4B94E; --success: #35C878; --success-bg: #12301f; --danger: #FF6B6E; --danger-bg: #351417; --sidebar-bg-solid: #07080f; --sidebar-active: #1B1E33; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --shadow-lg: 0 24px 48px -18px rgba(0,0,0,.6); } *{ box-sizing:border-box; } html{ color-scheme: light; } html[data-theme="dark"]{ color-scheme: dark; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; } } body{ margin:0; font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background .35s var(--ease), color .35s var(--ease); -webkit-font-smoothing: antialiased; } h1,h2,h3,h4{ font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.01em; } .mono{ font-family:'JetBrains Mono','Consolas',monospace; font-variant-numeric: tabular-nums; } a{ color: var(--primary); text-decoration:none; transition: color .2s var(--ease); } a:hover{ text-decoration:none; color: var(--primary-2); } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background: var(--border); border-radius:8px; } ::-webkit-scrollbar-track{ background: transparent; } /* ---------- Theme toggle switch ---------- */ .theme-toggle{ --w: 52px; --h: 28px; width: var(--w); height: var(--h); border-radius: 999px; background: var(--sidebar-active); border: 1px solid rgba(255,255,255,.08); position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .3s var(--ease); } .theme-toggle .knob{ position:absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius:50%; background: linear-gradient(160deg,#ffd66b,#ffb020); display:flex; align-items:center; justify-content:center; font-size: 11px; transition: transform .35s var(--ease), background .35s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.35); } [data-theme="dark"] .theme-toggle .knob{ transform: translateX(24px); background: linear-gradient(160deg,#8b93ff,#5b63e0); } .theme-toggle-standalone{ position:absolute; top:20px; right:20px; } /* ---------- Login / Auth ---------- */ .auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; background: radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent), radial-gradient(1000px 500px at 100% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), var(--bg); overflow:hidden; transition: background .35s var(--ease); } .auth-card{ background: var(--card); padding: 40px 34px; border-radius: 18px; box-shadow: var(--shadow-lg); width:100%; max-width: 380px; position:relative; border: 1px solid var(--border); animation: cardIn .6s var(--ease) both; } .auth-card .brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom: 22px; } .auth-card .brand .mark{ width:34px; height:34px; border-radius:10px; background: linear-gradient(140deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:'Sora',sans-serif; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--primary) 60%, transparent); } .auth-card h1{ font-size:19px; margin:0; text-align:left; } @keyframes cardIn{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } } /* ---------- Forms ---------- */ label{ display:block; font-size:12.5px; font-weight:600; margin:14px 0 6px; color: var(--muted); text-transform:uppercase; letter-spacing:.03em; } input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea{ width:100%; padding: 11px 13px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:14px; background: var(--bg-alt); color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); font-family: inherit; } input::placeholder{ color: var(--muted); opacity:.7; } input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); background: var(--card); } /* ---------- Buttons (animated) ---------- */ button, .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:6px; background: var(--primary); color:#fff; border:none; padding: 11px 20px; border-radius: var(--radius-sm); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), filter .2s; box-shadow: 0 1px 2px rgba(20,22,40,.08); -webkit-tap-highlight-color: transparent; } button:hover, .btn:hover{ background: var(--primary-2); transform: translateY(-2px); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--primary) 55%, transparent); text-decoration:none; color:#fff; } button:active, .btn:active{ transform: translateY(0) scale(.97); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--primary) 45%, transparent); } button:focus-visible, .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .btn-danger{ background: var(--danger); box-shadow:0 1px 2px rgba(192,39,45,.15); } .btn-danger:hover{ background:#e0393f; box-shadow: 0 10px 20px -8px rgba(192,39,45,.45); } .btn-muted{ background: var(--bg-alt); color: var(--text); border:1px solid var(--border); box-shadow:none; } .btn-muted:hover{ background: var(--border); color: var(--text); transform:translateY(-2px); } .btn-sm{ padding: 7px 13px; font-size:12.5px; border-radius:8px; } /* ripple */ .ripple{ position:absolute; border-radius:50%; background: rgba(255,255,255,.55); transform: scale(0); animation: rippleAnim .55s var(--ease); pointer-events:none; } @keyframes rippleAnim{ to{ transform: scale(2.6); opacity:0; } } /* ---------- Alerts ---------- */ .alert{ padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom:18px; font-size:14px; animation: slideDown .4s var(--ease) both; border:1px solid transparent; } @keyframes slideDown{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform:none; } } .alert-error{ background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .alert-success{ background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } /* ---------- App layout ---------- */ .app{ display:flex; min-height:100vh; } .sidebar{ width: 232px; background: var(--sidebar-bg-solid); color: var(--sidebar-text); padding: 24px 16px; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .sidebar .brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .sidebar .brand .mark{ width:32px; height:32px; border-radius:9px; background: linear-gradient(140deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:'Sora',sans-serif; font-size:14px; flex-shrink:0; } .sidebar h2{ color:#fff; font-size:15px; margin:0; line-height:1.25; } .sidebar .theme-row{ display:flex; align-items:center; justify-content:space-between; margin: 18px 0 22px; padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: var(--radius-sm); font-size:12.5px; } .sidebar nav{ display:flex; flex-direction:column; gap:2px; } .sidebar a{ display:flex; align-items:center; gap:10px; color: var(--sidebar-text); padding: 11px 12px; border-radius: var(--radius-sm); font-size:14px; font-weight:500; position:relative; transition: background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease), padding-left .22s var(--ease); } .sidebar a:hover{ background: rgba(255,255,255,.055); color:#fff; text-decoration:none; padding-left:16px; } .sidebar a.active{ background: var(--sidebar-active); color:#fff; } .sidebar a.active::before{ content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:60%; background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 0 4px 4px 0; } .sidebar .logout{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); } .main{ flex:1; padding:30px 34px; min-width:0; } .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; gap:16px; flex-wrap:wrap; } .topbar h1{ font-size:23px; margin:0; } /* ---------- Cards ---------- */ .cards{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; } .card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); flex:1; min-width: 180px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); animation: cardIn .5s var(--ease) both; } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card .label{ font-size:12.5px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; } .card .value{ font-size:25px; font-weight:700; font-family:'JetBrains Mono',monospace; } .cards .card:nth-child(1){ animation-delay:.03s; } .cards .card:nth-child(2){ animation-delay:.09s; } .cards .card:nth-child(3){ animation-delay:.15s; } .panel{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom:26px; animation: cardIn .55s var(--ease) both; animation-delay:.08s; transition: background .3s var(--ease), border-color .3s var(--ease); } .panel h3{ margin-top:0; font-size:15.5px; } /* ---------- Table ---------- */ table{ width:100%; border-collapse:collapse; font-size:14px; } th, td{ text-align:left; padding: 12px 10px; border-bottom:1px solid var(--border); } th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; } tbody tr{ transition: background .18s var(--ease); } tbody tr:hover{ background: var(--bg-alt); } tbody tr:last-child td{ border-bottom:none; } .badge{ color:#fff; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; display:inline-block; box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); } .form-row{ display:flex; gap:16px; flex-wrap:wrap; } .form-row > div{ flex:1; min-width:160px; } .actions{ display:flex; gap:8px; flex-wrap:wrap; } .text-right{ text-align:right; } .text-danger{ color: var(--danger); } .text-success{ color: var(--success); } .text-muted{ color: var(--muted); font-size:13px; } @media (max-width:800px){ .app{ flex-direction:column; } .sidebar{ width:100%; height:auto; position:relative; } .main{ padding:20px; } }