:root{
  --ink:#20302C; --ink-soft:#4B5C56; --paper:#F3F4EE; --paper-raised:#FFFFFF; --line:#DADED2;
  --sidebar:#173430; --sidebar-soft:#22453F; --sidebar-text:#CFE3DA; --sidebar-text-dim:#8FADA3;
  --accent:#D98F2B; --accent-ink:#5A3A0C; --accent-soft:#F7E4C0;
  --income:#2E7A6C; --income-soft:#DBEDE7; --expense:#A8432B; --expense-soft:#F1DAD3;
  --cat-1:#C9762E; --cat-1-soft:#F5E1CC; --cat-2:#2E7A6C; --cat-2-soft:#DBEDE7;
  --cat-3:#A8432B; --cat-3-soft:#F1DAD3; --cat-4:#5C6470; --cat-4-soft:#E3E5E9;
  --good:#2E7A54; --bad:#B0402A; --radius:10px;
  --shadow:0 1px 2px rgba(23,52,48,0.06), 0 4px 14px rgba(23,52,48,0.06);
  --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* LOGIN */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sidebar); padding:20px; }
.login-card{ background:var(--paper-raised); border-radius:14px; padding:36px 32px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,0.3); text-align:center; }
.login-mark{ width:48px; height:48px; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.login-card h1{ font-family:var(--font-display); font-size:21px; margin:0 0 4px; }
.login-card .field{ text-align:left; margin-bottom:14px; }
.login-card p.muted{ margin:0 0 22px; }
.login-card p.small{ font-size:11.5px; margin-top:14px; }
.login-error{ background:#FBEAE5; color:var(--bad); border:1px solid #E9AF9C; border-radius:8px; padding:9px 12px; font-size:12.5px; margin-bottom:14px; }

.app{ display:flex; height:100vh; overflow:hidden; }
.sidebar{ width:250px; flex:none; background:var(--sidebar); color:var(--sidebar-text); display:flex; flex-direction:column; transition:width .22s ease; border-right:1px solid #0E2622; position:relative; }
.sidebar.collapsed{ width:72px; }
.side-head{ display:flex; align-items:center; gap:10px; padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.side-mark{ width:34px; height:34px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-display); font-weight:700; color:var(--accent-ink); font-size:16px; }
.side-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.15; white-space:nowrap; overflow:hidden;}
.side-sub{ font-size:11px; color:var(--sidebar-text-dim); white-space:nowrap; }
.sidebar.collapsed .side-title, .sidebar.collapsed .side-sub{ display:none; }
.side-toggle{ position:absolute; top:22px; right:-12px; width:24px; height:24px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; box-shadow:var(--shadow); z-index:5; }
.nav{ flex:1; padding:14px 10px; overflow-y:auto; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; color:var(--sidebar-text); font-size:13.5px; font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; border:1px solid transparent; }
.nav-item:hover{ background:var(--sidebar-soft); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.nav-icon{ width:18px; text-align:center; flex:none; font-size:14px; }
.sidebar.collapsed .nav-label{ display:none; }
.nav-count{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; background:rgba(255,255,255,0.12); padding:1px 6px; border-radius:20px; color:var(--sidebar-text); }
.nav-item.active .nav-count{ background:rgba(90,58,12,0.14); color:var(--accent-ink); }
.sidebar.collapsed .nav-count{ display:none; }
.side-foot{ padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:11px; color:var(--sidebar-text-dim); }
.status-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-dot.on{ background:#59C08C; } .status-dot.off{ background:#D9722B; }
.sidebar.collapsed .side-foot .txt{ display:none; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:4; background:var(--paper-raised); border-bottom:1px solid var(--line); padding:14px 26px; display:flex; align-items:center; gap:16px; flex:none; }
.topbar h1{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0; flex:none; }
.topbar .sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
.topbar-spacer{ flex:1; }
.pill{ font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper); }
.pill.warn{ border-color:#E9C79A; background:#FCF1DE; color:#8A5A16; }
.btn{ font-weight:600; font-size:13px; padding:9px 15px; border-radius:8px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-accent{ background:var(--accent); color:#3E2705; }
.btn-accent:hover{ background:#C77F1E; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--paper); }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:7px; }
.btn-danger{ background:#FBEAE5; color:var(--bad); border-color:#F0C9BC; }
.view{ flex:1; overflow-y:auto; padding:24px 26px 60px; }
.view-hidden{ display:none; }
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.section-title{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:0 0 4px; }
.muted{ color:var(--ink-soft); font-size:13px; }

/* OSSZESITO KARTYAK */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{ padding:16px 18px; }
.stat-num{ font-family:var(--font-mono); font-size:26px; font-weight:500; }
.stat-label{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.stat-card.income .stat-num{ color:var(--income); }
.stat-card.expense .stat-num{ color:var(--expense); }

/* HAVI VALTO */
.month-nav{ display:flex; align-items:center; justify-content:space-between; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:6px 8px; margin-bottom:18px; max-width:280px; box-shadow:var(--shadow); }
.month-nav button{ background:none; border:none; font-size:16px; color:var(--ink-soft); width:32px; height:32px; border-radius:8px; cursor:pointer; }
.month-nav button:hover{ background:var(--paper); }
.month-nav .label{ font-family:var(--font-mono); font-size:13px; font-weight:500; text-transform:capitalize; }

/* ROGZITES URLAP */
.txn-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 22px; margin-bottom:22px; }
.txn-form .field.full{ grid-column:1 / -1; }
.type-toggle{ display:flex; gap:8px; grid-column:1 / -1; }
.type-toggle button{ flex:1; padding:11px; border-radius:8px; border:1.5px solid var(--line); background:var(--paper); font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.type-toggle button.active.income{ border-color:var(--income); background:var(--income-soft); color:var(--income); }
.type-toggle button.active.expense{ border-color:var(--expense); background:var(--expense-soft); color:var(--expense); }
.amount-input{ font-family:var(--font-mono); font-size:19px; font-weight:500; }

/* TRANZAKCIO LISTA */
.day-label{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin:18px 0 8px; text-transform:capitalize; }
.txn{ display:flex; align-items:center; gap:12px; background:var(--paper-raised); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:9px; padding:12px 14px; margin-bottom:7px; box-shadow:var(--shadow); }
.txn.income{ border-left-color:var(--income); }
.txn.expense{ border-left-color:var(--expense); }
.txn .meta{ flex:1; min-width:0; }
.txn .cat{ font-size:14px; font-weight:600; }
.txn .desc{ font-size:12px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.txn .owner{ font-size:11px; color:var(--sidebar-text-dim); margin-top:2px; }
.txn .amt{ font-family:var(--font-mono); font-size:14.5px; font-weight:600; white-space:nowrap; }
.txn.income .amt{ color:var(--income); }
.txn.expense .amt{ color:var(--expense); }
.txn .actions{ display:flex; gap:4px; flex:none; }
.txn .actions button{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:15px; padding:2px 6px; line-height:1; border-radius:6px; }
.txn .actions button:hover{ background:var(--paper); color:var(--bad); }

/* KATEGORIAK */
.qlist{ display:flex; flex-direction:column; gap:12px; }
.qcard{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow); border-left:5px solid var(--cat-4); }
.qcard[data-type="income"]{ border-left-color:var(--income); }
.qcard[data-type="expense"]{ border-left-color:var(--expense); }
.qcard-body{ flex:1; min-width:0; }
.qcard-tags{ display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.tag{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.02em; }
.tag.type-income{ background:var(--income-soft); color:var(--income); }
.tag.type-expense{ background:var(--expense-soft); color:var(--expense); }
.qcard-text{ font-size:14.5px; font-weight:500; }
.qcard-actions{ display:flex; gap:6px; flex:none; }

.collector-bar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
textarea.qtext{ width:100%; min-height:70px; padding:10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; resize:vertical; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--paper); }
td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
.name-chip{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.name-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar select, .toolbar input[type=text], .collector-bar select{ padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--paper-raised); }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty h3{ font-family:var(--font-display); color:var(--ink); font-weight:600; margin-bottom:6px; }
.modal-bg{ position:fixed; inset:0; background:rgba(23,40,36,0.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal{ background:var(--paper-raised); border-radius:12px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3{ margin:0; font-family:var(--font-display); font-size:16px; }
.modal-body{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input[type=text], .field input[type=password], .field input[type=number], .field input[type=date], .field select, .field textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; }
.field textarea{ min-height:80px; resize:vertical; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:60; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.chart-wrap{ padding:18px; margin-bottom:16px; }
.chart-canvas-box{ height:280px; }
#newUserName, #newUserUsername, #newUserPass{ padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; }
.admin-only, .admin-only-inline{ display:none; }
body.role-admin .admin-only{ display:inline-flex; }
body.role-admin .admin-only-inline{ display:inline-block; }
body.role-admin .nav-item.admin-only{ display:flex; }

@media (max-width:820px){
  .sidebar{ position:fixed; z-index:30; height:100%; }
  .sidebar:not(.collapsed){ width:220px; }
  .txn-form{ grid-template-columns:1fr; }
  .view{ padding:18px 14px 70px; }
}