/* ====================================================== styles.css — Budget App Clean, responsive, dark-mode ready UI ====================================================== */ /* ---------- Theme Variables ---------- */ :root{ --primary:#3498db; --success:#27ae60; --danger:#e74c3c; --warning:#f39c12; --info:#16a085; --bg:#f8f9fa; --text:#2c3e50; --card:#ffffff; --muted:#6c757d; /* Soft surfaces */ --soft: rgba(0,0,0,.03); --soft-border: rgba(0,0,0,.08); --soft-strong: rgba(0,0,0,.06); /* Layout helpers */ --radius:12px; --shadow:0 2px 6px rgba(0,0,0,.05); --shadow-strong:0 10px 30px rgba(0,0,0,.2); } /* Dark theme: add class="dark" to */ html.dark{ --bg:#1a1a1a; --text:#ffffff; --card:#222; --muted:#9aa0a6; --soft: rgba(255,255,255,.03); --soft-border: rgba(255,255,255,.08); --soft-strong: rgba(255,255,255,.06); } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; transition:background .15s linear, color .15s linear; } a{color:var(--primary); text-decoration:none} .muted{color:var(--muted)} .hidden{display:none!important} /* ---------- Layout ---------- */ .layout{display:flex; min-height:100vh} .sidebar{ width:260px; background:#111; color:#eee; padding:20px; position:sticky; top:0; height:100vh; overflow:auto; } .sidebar .logo{font-weight:700; margin-bottom:16px} .sidebar nav a{display:block; color:#ddd; padding:10px; border-radius:8px; margin:4px 0} .sidebar nav a:hover{background:#1e1e1e} .content{flex:1; display:flex; flex-direction:column} .page-header{display:flex; justify-content:space-between; align-items:center; padding:16px} /* ---------- Cards & Grid ---------- */ .grid{display:grid; gap:16px; padding:16px} .grid.four{grid-template-columns:repeat(4,1fr)} .grid.two{grid-template-columns:repeat(2,1fr)} .card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .card-header{font-weight:600; margin-bottom:8px} /* ---------- Buttons ---------- */ .btn{ background:var(--primary); color:#fff; border:0; border-radius:8px; padding:8px 14px; cursor:pointer; } .btn:hover{filter:brightness(0.95)} .btn:focus{outline:2px solid color-mix(in srgb, var(--primary) 60%, white)} .btn-secondary{background:#444; color:#fff} .btn-secondary:hover{filter:brightness(1.05)} .icon-btn{background:transparent; border:none; cursor:pointer; font-size:16px; opacity:.8} .icon-btn:hover{opacity:1} /* ---------- Badges ---------- */ .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:var(--soft); color:var(--text); border:1px solid var(--soft-border); } .badge-info{background:#16a0851a; border:1px solid #16a0853a; color:#16a085} /* ---------- Stats ---------- */ .stat .label{color:var(--muted); font-size:14px} .stat .value{font-size:24px; font-weight:700} .success{color:var(--success)} .danger{color:var(--danger)} .info{color:var(--info)} /* ---------- Forms ---------- */ label{display:block; margin:8px 0 4px} input,select,textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid #ccc; background:var(--card); color:var(--text); } input:focus,select:focus,textarea:focus{outline:2px solid var(--primary); border-color:transparent} .alert{padding:10px; border-radius:8px; margin-bottom:10px} .alert-danger{background:#ffebee; color:#b71c1c} /* ---------- Tables ---------- */ .table{border-collapse:separate; border-spacing:0; width:100%} .table th,.table td{padding:10px 12px; border-bottom:1px solid var(--soft-border); vertical-align:top} .table thead th{position:sticky; top:0; background:var(--card); z-index:1} .table tbody tr:nth-child(odd){background:var(--soft)} .table tbody tr:hover{background:var(--soft-strong)} .table th[data-sort]{cursor:pointer} .table th[data-sort]::after{content:" ⇅"; opacity:.4; font-weight:400} .table th[data-sort][data-dir="asc"]::after{content:" ↑"; opacity:.9} .table th[data-sort][data-dir="desc"]::after{content:" ↓"; opacity:.9} /* ---------- Toasts ---------- */ #toast-root{ /* container injected by JS */ } .toast{ background:#111c; color:#fff; padding:10px 12px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter:blur(8px); transition:opacity .3s, transform .3s; } .toast.success{background:#27ae60cc} .toast.info{background:#16a085cc} .toast.warning{background:#f39c12cc} .toast.danger{background:#e74c3ccc} /* ---------- Calendar (pills + modal) ---------- */ .pill{ display:block; width:100%; text-align:left; background:var(--soft); border:1px solid var(--soft-border); padding:6px 8px; border-radius:8px; cursor:pointer; border-left:6px solid; transition:transform .04s; } .pill:hover{transform:translateY(-1px)} .pill-text.paid{text-decoration:line-through; opacity:.65} .daynum{font-weight:700} /* Modal */ .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:16px; z-index:1000; } .modal-backdrop.show{display:flex} .modal{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-strong); padding:12px; min-width:360px; max-width:600px; width:100%; } .kv{display:grid; grid-template-columns:160px 1fr; gap:8px; margin:6px 0} /* ---------- Login ---------- */ .login{display:flex; align-items:center; justify-content:center; min-height:100vh} .login-card{ width:360px; background:var(--card); padding:24px; border-radius:var(--radius); box-shadow:0 2px 12px rgba(0,0,0,.1) } /* ---------- Footer ---------- */ .footer{margin-top:auto; padding:16px; color:var(--muted)} /* ---------- Responsive ---------- */ @media (max-width:768px){ .sidebar{position:fixed; left:-260px; transition:left .2s} .sidebar.open{left:0} .grid.four{grid-template-columns:repeat(2,1fr)} .grid.two{grid-template-columns:1fr} .kv{grid-template-columns:1fr} } /* ---------- Print (for PDFs/print dialog) ---------- */ @media print{ .sidebar, .page-header, #toast-root, .btn { display:none !important; } .card{box-shadow:none; border:1px solid #ccc} a{color:inherit; text-decoration:none} }