:root{
  --green:#0f3d2e;
  --yellow:#f4c430;
  --bg:#f4f7f5;
  --card:#ffffff;
  --text:#102019;
  --muted:#667085;
  --border:#d8dedb;
  --danger:#b42318;
  --success:#087443;
  --shadow:0 18px 45px rgba(16,32,25,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.login-body{background:radial-gradient(circle at top left,rgba(244,196,48,.22),transparent 32%),linear-gradient(135deg,var(--green),#0b241d 48%,#071914)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:22px}
.login-card{width:min(460px,100%);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.5);border-radius:28px;box-shadow:0 26px 70px rgba(0,0,0,.22);padding:26px}
.login-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.login-head h1{margin:0;font-size:28px}.login-head p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.login-logo,.brand-logo{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--green),#184f3d);color:white;display:grid;place-items:center;font-weight:900;font-size:24px;box-shadow:0 12px 30px rgba(15,61,46,.22)}
.brand-logo.small{width:42px;height:42px;border-radius:14px;font-size:18px}
.login-demo-note{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.5;background:#f8fbf9;border:1px solid var(--border);padding:12px;border-radius:16px}
.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:18px;z-index:10}
.brand{display:flex;gap:12px;align-items:center;padding:4px 2px}.brand strong,.mobile-brand strong{display:block}.brand small,.mobile-brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-list{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 13px;color:#34463d;font-weight:750}.nav-item:hover,.nav-item.active{background:#edf8f1;color:var(--green)}.nav-item span:first-child{width:24px;height:24px;display:grid;place-items:center;border-radius:10px;background:#f2f5f3;color:inherit}.nav-item.active span:first-child{background:#fff}
.sidebar-footer{margin-top:auto;border-top:1px solid var(--border);padding-top:14px}.user-mini{display:grid;gap:2px;margin-bottom:10px}.user-mini small{color:var(--muted)}
.main-area{min-width:0}.topbar{display:none}.content{width:min(1380px,100%);margin:0 auto;padding:24px 24px 110px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h1{margin:0;font-size:30px;letter-spacing:-.03em}.page-head p{margin:5px 0 0}.eyebrow{margin:0!important;color:var(--green);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.12em}.muted{color:var(--muted);font-size:13px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card,.card{background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.stat-card{padding:18px}.stat-card span{display:block;color:var(--muted);font-size:13px;font-weight:800}.stat-card strong{display:block;font-size:25px;line-height:1.15;margin:8px 0;letter-spacing:-.03em}.stat-card small{color:var(--muted)}.stat-card.highlight{background:linear-gradient(135deg,#e9f8ef,#fff);border-color:#bfe5cd}.stat-card.warning{background:#fff8e3;border-color:#f7df8a}
.card{padding:18px;margin-bottom:16px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.section-head h2{font-size:18px;margin:0}.section-head p{margin:4px 0 0}.quick-actions{display:grid;gap:10px}.quick-card{display:block;padding:14px;border:1px solid var(--border);border-radius:18px;background:#f9fbfa}.quick-card strong,.quick-card span{display:block}.quick-card span{color:var(--muted);font-size:13px;margin-top:4px}.timeline{display:grid;gap:10px}.timeline div{display:flex;gap:10px;align-items:center}.timeline b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#edf8f1;color:var(--green)}
.btn{border:0;border-radius:14px;padding:11px 14px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}.btn-primary{background:var(--green);color:#fff;box-shadow:0 14px 26px rgba(15,61,46,.18)}.btn-soft{background:#edf2ef;color:var(--green)}.full-width{width:100%}
.input{width:100%;border:1px solid var(--border);background:#fff;border-radius:14px;padding:11px 12px;color:var(--text);outline:none;min-height:44px}.input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,61,46,.12)}.textarea{resize:vertical;min-height:100px}.form-stack{display:grid;gap:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-card{max-width:980px}.full-span{grid-column:1/-1}.form-actions{display:flex;gap:10px;flex-wrap:wrap}label span{display:block;font-weight:800;font-size:13px;margin-bottom:7px}.check-row{display:flex;gap:8px;align-items:center}.check-row span{margin:0}.filter-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(130px,1fr)) auto;gap:12px;align-items:end}.filter-grid.compact{grid-template-columns:260px auto}.filter-actions{display:flex;gap:8px;align-items:center}
.alert{border-radius:16px;padding:12px 14px;margin-bottom:14px;border:1px solid}.alert ul{margin:8px 0 0;padding-left:18px}.alert.success{background:#ecfdf3;color:#05603a;border-color:#abefc6}.alert.danger{background:#fff1f0;color:var(--danger);border-color:#fecdca}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.text-right{text-align:right}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:#edf2ef;color:#34463d}.pill.in{background:#e7f8ee;color:#087443}.pill.out{background:#fff3d0;color:#875b00}.muted-pill{background:#f2f4f3;color:#52625a}.empty-state{padding:22px;text-align:center;background:#f8fbf9;border:1px dashed var(--border);border-radius:18px;color:var(--muted)}.pagination-wrap{margin-top:16px}.small-link{font-weight:800;color:var(--green);font-size:13px}.mobile-cards{display:none}.tx-card{border:1px solid var(--border);border-radius:18px;padding:13px;background:#fff}.tx-card+ .tx-card{margin-top:10px}.tx-card>div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.tx-card strong{font-size:17px}.tx-card p{margin:9px 0 4px}.tx-card small{color:var(--muted)}.category-list{display:grid;gap:10px}.category-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:16px;padding:12px}.category-row strong,.category-row small{display:block}.category-row small{color:var(--muted);margin-top:3px}
.bottom-nav{display:none}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-actions{grid-column:1/-1}}
@media(max-width:900px){.app-shell{display:block}.sidebar{display:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:20;padding:10px 12px}.mobile-brand{display:flex;gap:10px;align-items:center;min-width:0}.mobile-brand small{max-width:190px}.content{padding:16px 12px 106px}.page-head{align-items:stretch;flex-direction:column}.page-head h1{font-size:25px}.grid.two,.form-grid,.stat-grid,.stat-grid.three{grid-template-columns:1fr}.desktop-only{display:none}.mobile-cards{display:block}.card,.stat-card{border-radius:20px}.filter-grid,.filter-grid.compact{grid-template-columns:1fr}.form-actions .btn,.filter-actions .btn{flex:1}.bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;background:rgba(255,255,255,.95);border:1px solid var(--border);box-shadow:0 18px 45px rgba(16,32,25,.18);backdrop-filter:blur(14px);border-radius:24px;padding:7px;z-index:50}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:18px;color:var(--muted);font-size:10.5px;font-weight:900}.bottom-nav-item.active{background:#edf8f1;color:var(--green)}.bottom-nav-item.primary{background:var(--green);color:#fff}.bottom-icon{font-size:18px;line-height:1}}
@media(max-width:420px){.content{padding-left:10px;padding-right:10px}.login-card{padding:20px;border-radius:22px}.login-head{align-items:flex-start}.stat-card strong{font-size:22px}.bottom-nav{left:6px;right:6px;border-radius:20px}.bottom-nav-item{min-height:50px;border-radius:15px;font-size:9.5px}.btn{width:100%}.page-head .btn{width:100%}}

/* FlowKas Stage 1C - transaksi action safe */
.tx-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.tx-actions.mobile{
  margin-top:12px;
}
.inline-form{
  display:inline-flex;
  margin:0;
}
.mini-btn{
  border:0;
  border-radius:999px;
  padding:7px 10px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.mini-btn.soft{
  background:#edf2ef;
  color:var(--green);
}
.mini-btn.danger{
  background:#fff1f0;
  color:var(--danger);
  border:1px solid #fecdca;
}
@media(max-width:900px){
  .tx-actions.mobile .mini-btn{
    flex:1 1 auto;
  }
  .tx-actions.mobile .inline-form{
    flex:1 1 auto;
  }
  .tx-actions.mobile .inline-form .mini-btn{
    width:100%;
  }
}

/* FlowKas Stage 1D - dashboard dan laporan real */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.stat-card{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.stat-card strong{
  font-size:24px;
  line-height:1.1;
}
.stat-card small{
  color:var(--muted);
  line-height:1.35;
}
.stat-label{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.balance-card{
  background:linear-gradient(135deg, rgba(15,61,46,.95), rgba(15,61,46,.82));
  color:#fff;
}
.balance-card small,
.balance-card .stat-label{
  color:rgba(255,255,255,.78);
}
.text-green{color:var(--green)}
.text-yellow{color:#b88300}
.text-danger{color:var(--danger)}
.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:14px;
}
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.section-title h2{
  margin:0 0 4px;
  font-size:18px;
}
.cash-chart{
  display:flex;
  gap:10px;
  align-items:end;
  min-height:220px;
  overflow-x:auto;
  padding:10px 2px 2px;
}
.cash-day{
  min-width:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.cash-bars{
  height:170px;
  width:32px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:4px;
}
.cash-bars span{
  width:12px;
  border-radius:10px 10px 3px 3px;
  min-height:5px;
}
.cash-bars .bar-in{background:var(--green)}
.cash-bars .bar-out{background:var(--yellow)}
.cash-day small{
  color:var(--muted);
  font-size:11px;
}
.mini-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mini-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.mini-row:hover{
  background:#f8fbf9;
}
.mini-row span:nth-child(2){
  min-width:0;
}
.mini-row strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mini-row small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}
.mini-row b{
  white-space:nowrap;
  font-size:13px;
}
.report-filter{
  display:grid;
  grid-template-columns:minmax(220px,280px) auto;
  gap:12px;
  align-items:end;
}
@media(max-width:1100px){
  .stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .stat-grid{
    grid-template-columns:1fr;
  }
  .stat-card strong{
    font-size:22px;
  }
  .report-filter{
    grid-template-columns:1fr;
  }
  .section-title{
    flex-direction:column;
  }
  .cash-chart{
    min-height:190px;
  }
  .cash-bars{
    height:140px;
  }
  .mini-row{
    grid-template-columns:1fr;
  }
  .mini-row b{
    justify-self:start;
  }
}

/* FlowKas Stage 1FA1 - apply language + real dark mode foundation */
body.theme-light{
  color-scheme: light;
}

body.theme-dark,
body.theme-system{
  --bg:#07110d;
  --text:#edf7f1;
  --muted:#9fb2a8;
  --border:#20352b;
  --white:#101d17;
  --card:#101d17;
  --card-2:#13241c;
  --input-bg:#0b1712;
  --input-text:#edf7f1;
  --shadow:0 16px 36px rgba(0,0,0,.32);
  --danger:#ff8f86;
  background:var(--bg)!important;
  color:var(--text)!important;
  color-scheme:dark;
}

@media (prefers-color-scheme: light){
  body.theme-system{
    --bg:#f5f7f6;
    --text:#102019;
    --muted:#667085;
    --border:#d0d5dd;
    --white:#fff;
    --card:#fff;
    --card-2:#fff;
    --input-bg:#fff;
    --input-text:#102019;
    --shadow:0 12px 30px rgba(16,32,25,.08);
    --danger:#b42318;
    color-scheme:light;
  }
}

body.theme-dark .app-shell,
body.theme-system .app-shell,
body.theme-dark .main-area,
body.theme-system .main-area,
body.theme-dark .content,
body.theme-system .content{
  background:var(--bg)!important;
  color:var(--text)!important;
}

body.theme-dark .sidebar,
body.theme-system .sidebar,
body.theme-dark .topbar,
body.theme-system .topbar,
body.theme-dark .bottom-nav,
body.theme-system .bottom-nav{
  background:rgba(16,29,23,.96)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}

body.theme-dark .card,
body.theme-system .card,
body.theme-dark .form-card,
body.theme-system .form-card,
body.theme-dark .tx-card,
body.theme-system .tx-card,
body.theme-dark .category-row,
body.theme-system .category-row,
body.theme-dark .brand-preview,
body.theme-system .brand-preview,
body.theme-dark .settings-preview-box,
body.theme-system .settings-preview-box{
  background:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}

body.theme-dark .input,
body.theme-system .input,
body.theme-dark .select,
body.theme-system .select,
body.theme-dark .textarea,
body.theme-system .textarea,
body.theme-dark input,
body.theme-system input,
body.theme-dark select,
body.theme-system select,
body.theme-dark textarea,
body.theme-system textarea{
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  border-color:var(--border)!important;
}

body.theme-dark .input::placeholder,
body.theme-system .input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-system textarea::placeholder{
  color:#718579!important;
}

body.theme-dark .muted,
body.theme-system .muted,
body.theme-dark small,
body.theme-system small,
body.theme-dark .stat-label,
body.theme-system .stat-label,
body.theme-dark .stat-card small,
body.theme-system .stat-card small,
body.theme-dark .brand small,
body.theme-system .brand small,
body.theme-dark .mobile-brand small,
body.theme-system .mobile-brand small{
  color:var(--muted)!important;
}

body.theme-dark .brand,
body.theme-system .brand,
body.theme-dark .mobile-brand,
body.theme-system .mobile-brand,
body.theme-dark .mini-row,
body.theme-system .mini-row{
  color:var(--text)!important;
}

body.theme-dark .nav-item,
body.theme-system .nav-item,
body.theme-dark .bottom-nav-item,
body.theme-system .bottom-nav-item{
  color:var(--muted)!important;
}

body.theme-dark .nav-item:hover,
body.theme-system .nav-item:hover,
body.theme-dark .nav-item.active,
body.theme-system .nav-item.active,
body.theme-dark .bottom-nav-item.active,
body.theme-system .bottom-nav-item.active{
  background:rgba(244,196,48,.12)!important;
  color:var(--yellow)!important;
}

body.theme-dark .bottom-nav-item.primary,
body.theme-system .bottom-nav-item.primary{
  background:var(--green)!important;
  color:#fff!important;
}

body.theme-dark table,
body.theme-system table{
  color:var(--text)!important;
}

body.theme-dark th,
body.theme-system th{
  color:var(--muted)!important;
  border-color:var(--border)!important;
}

body.theme-dark td,
body.theme-system td{
  border-color:var(--border)!important;
}

body.theme-dark .table-wrap,
body.theme-system .table-wrap{
  background:transparent!important;
}

body.theme-dark .empty-state,
body.theme-system .empty-state{
  background:#0b1712!important;
  color:var(--muted)!important;
  border-color:var(--border)!important;
}

body.theme-dark .alert.success,
body.theme-system .alert.success{
  background:rgba(15,61,46,.35)!important;
  color:#dff7ea!important;
  border-color:rgba(67,196,122,.25)!important;
}

body.theme-dark .alert.danger,
body.theme-system .alert.danger{
  background:rgba(180,35,24,.16)!important;
  color:#ffd8d5!important;
  border-color:rgba(255,143,134,.25)!important;
}

body.theme-dark .btn-soft,
body.theme-system .btn-soft,
body.theme-dark .mini-btn.soft,
body.theme-system .mini-btn.soft{
  background:#1a2d23!important;
  color:#dff7ea!important;
}

body.theme-dark .mini-btn.danger,
body.theme-system .mini-btn.danger,
body.theme-dark .btn-danger,
body.theme-system .btn-danger{
  background:rgba(180,35,24,.18)!important;
  color:#ffd8d5!important;
  border-color:rgba(255,143,134,.3)!important;
}

body.theme-dark .pill.muted-pill,
body.theme-system .pill.muted-pill{
  background:#1a2d23!important;
  color:var(--muted)!important;
}

body.theme-dark .pill.in,
body.theme-system .pill.in{
  background:rgba(53,178,100,.16)!important;
  color:#7ee2a5!important;
}

body.theme-dark .pill.out,
body.theme-system .pill.out{
  background:rgba(244,196,48,.16)!important;
  color:#ffd86b!important;
}

body.theme-dark .cash-chart,
body.theme-system .cash-chart{
  background:transparent!important;
}

body.theme-dark .balance-card,
body.theme-system .balance-card{
  background:linear-gradient(135deg, rgba(15,61,46,.95), rgba(12,44,34,.92))!important;
  border-color:rgba(244,196,48,.18)!important;
}

body.theme-dark a,
body.theme-system a{
  color:inherit;
}

body.theme-dark .small-link,
body.theme-system .small-link{
  color:#9be8b5!important;
}


/* === FLOWKAS_STAGE_1GA_DARK_FULL_START === */

/* Light baseline: jaga tampilan lama tetap aman */
body.theme-light{
  color-scheme: light;
  background:var(--bg);
  color:var(--text);
}

/* Dark explicit */
body.theme-dark{
  --bg:#07110d;
  --text:#edf7f1;
  --muted:#9fb2a8;
  --border:#20352b;
  --white:#101d17;
  --card:#101d17;
  --card-soft:#13241c;
  --input-bg:#0b1712;
  --input-text:#edf7f1;
  --table-head:#13241c;
  --hover:#172820;
  --danger:#ff8f86;
  --danger-bg:rgba(180,35,24,.17);
  --success-bg:rgba(15,61,46,.34);
  --shadow:0 16px 36px rgba(0,0,0,.34);
  color-scheme: dark;
  background:var(--bg)!important;
  color:var(--text)!important;
}

/* System mode: light sebagai default, dark hanya jika perangkat dark */
body.theme-system{
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  body.theme-system{
    --bg:#07110d;
    --text:#edf7f1;
    --muted:#9fb2a8;
    --border:#20352b;
    --white:#101d17;
    --card:#101d17;
    --card-soft:#13241c;
    --input-bg:#0b1712;
    --input-text:#edf7f1;
    --table-head:#13241c;
    --hover:#172820;
    --danger:#ff8f86;
    --danger-bg:rgba(180,35,24,.17);
    --success-bg:rgba(15,61,46,.34);
    --shadow:0 16px 36px rgba(0,0,0,.34);
    background:var(--bg)!important;
    color:var(--text)!important;
  }
}

@media (prefers-color-scheme: light){
  body.theme-system{
    --bg:#f5f7f6;
    --text:#102019;
    --muted:#667085;
    --border:#d0d5dd;
    --white:#fff;
    --card:#fff;
    --card-soft:#f8fbf9;
    --input-bg:#fff;
    --input-text:#102019;
    --table-head:#f8fbf9;
    --hover:#eef7f1;
    --danger:#b42318;
    --danger-bg:#fff1f0;
    --success-bg:#eaf7ef;
    --shadow:0 12px 30px rgba(16,32,25,.08);
    background:var(--bg)!important;
    color:var(--text)!important;
  }
}

/* Scope dark/system dark elements */
body.theme-dark .app-shell,
body.theme-dark .main-area,
body.theme-dark .content,
body.theme-system .app-shell,
body.theme-system .main-area,
body.theme-system .content{
  background:var(--bg)!important;
  color:var(--text)!important;
}

body.theme-dark .sidebar,
body.theme-dark .topbar,
body.theme-dark .bottom-nav,
body.theme-system .sidebar,
body.theme-system .topbar,
body.theme-system .bottom-nav{
  background:rgba(16,29,23,.96)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}

body.theme-dark .card,
body.theme-dark .form-card,
body.theme-dark .tx-card,
body.theme-dark .stat-card,
body.theme-dark .brand-preview,
body.theme-dark .settings-preview-box,
body.theme-dark .category-row,
body.theme-dark .backup-result,
body.theme-system .card,
body.theme-system .form-card,
body.theme-system .tx-card,
body.theme-system .stat-card,
body.theme-system .brand-preview,
body.theme-system .settings-preview-box,
body.theme-system .category-row,
body.theme-system .backup-result{
  background:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}

body.theme-dark .balance-card,
body.theme-system .balance-card{
  background:linear-gradient(135deg, rgba(15,61,46,.98), rgba(9,39,29,.94))!important;
  border-color:rgba(244,196,48,.18)!important;
  color:#fff!important;
}

body.theme-dark .balance-card .stat-label,
body.theme-dark .balance-card small,
body.theme-system .balance-card .stat-label,
body.theme-system .balance-card small{
  color:rgba(255,255,255,.78)!important;
}

body.theme-dark .input,
body.theme-dark .select,
body.theme-dark .textarea,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-system .input,
body.theme-system .select,
body.theme-system .textarea,
body.theme-system input,
body.theme-system select,
body.theme-system textarea{
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  border-color:var(--border)!important;
}

body.theme-dark .input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-system .input::placeholder,
body.theme-system textarea::placeholder{
  color:#718579!important;
}

body.theme-dark .muted,
body.theme-dark small,
body.theme-dark .stat-label,
body.theme-dark .stat-card small,
body.theme-dark .brand small,
body.theme-dark .mobile-brand small,
body.theme-dark .user-mini small,
body.theme-system .muted,
body.theme-system small,
body.theme-system .stat-label,
body.theme-system .stat-card small,
body.theme-system .brand small,
body.theme-system .mobile-brand small,
body.theme-system .user-mini small{
  color:var(--muted)!important;
}

body.theme-dark a,
body.theme-dark .brand,
body.theme-dark .mobile-brand,
body.theme-dark .mini-row,
body.theme-system a,
body.theme-system .brand,
body.theme-system .mobile-brand,
body.theme-system .mini-row{
  color:inherit;
}

body.theme-dark .nav-item,
body.theme-dark .bottom-nav-item,
body.theme-system .nav-item,
body.theme-system .bottom-nav-item{
  color:var(--muted)!important;
}

body.theme-dark .nav-item:hover,
body.theme-dark .nav-item.active,
body.theme-dark .bottom-nav-item.active,
body.theme-system .nav-item:hover,
body.theme-system .nav-item.active,
body.theme-system .bottom-nav-item.active{
  background:rgba(244,196,48,.12)!important;
  color:var(--yellow)!important;
}

body.theme-dark .bottom-nav-item.primary,
body.theme-system .bottom-nav-item.primary{
  background:var(--green)!important;
  color:#fff!important;
}

body.theme-dark table,
body.theme-system table{
  color:var(--text)!important;
  background:transparent!important;
}

body.theme-dark thead,
body.theme-system thead{
  background:var(--table-head)!important;
}

body.theme-dark th,
body.theme-dark td,
body.theme-system th,
body.theme-system td{
  border-color:var(--border)!important;
}

body.theme-dark th,
body.theme-system th{
  color:var(--muted)!important;
}

body.theme-dark tr:hover,
body.theme-system tr:hover{
  background:var(--hover)!important;
}

body.theme-dark .empty-state,
body.theme-system .empty-state{
  background:var(--input-bg)!important;
  color:var(--muted)!important;
  border-color:var(--border)!important;
}

body.theme-dark .alert.success,
body.theme-system .alert.success{
  background:var(--success-bg)!important;
  color:#dff7ea!important;
  border-color:rgba(67,196,122,.25)!important;
}

body.theme-dark .alert.danger,
body.theme-system .alert.danger{
  background:var(--danger-bg)!important;
  color:#ffd8d5!important;
  border-color:rgba(255,143,134,.25)!important;
}

body.theme-dark .btn-soft,
body.theme-dark .mini-btn.soft,
body.theme-system .btn-soft,
body.theme-system .mini-btn.soft{
  background:#1a2d23!important;
  color:#dff7ea!important;
}

body.theme-dark .mini-btn.danger,
body.theme-dark .btn-danger,
body.theme-system .mini-btn.danger,
body.theme-system .btn-danger{
  background:rgba(180,35,24,.18)!important;
  color:#ffd8d5!important;
  border-color:rgba(255,143,134,.3)!important;
}

body.theme-dark .pill.muted-pill,
body.theme-system .pill.muted-pill{
  background:#1a2d23!important;
  color:var(--muted)!important;
}

body.theme-dark .pill.in,
body.theme-system .pill.in{
  background:rgba(53,178,100,.16)!important;
  color:#7ee2a5!important;
}

body.theme-dark .pill.out,
body.theme-system .pill.out{
  background:rgba(244,196,48,.16)!important;
  color:#ffd86b!important;
}

body.theme-dark .small-link,
body.theme-system .small-link{
  color:#9be8b5!important;
}

body.theme-dark .cash-chart,
body.theme-dark .cash-day,
body.theme-system .cash-chart,
body.theme-system .cash-day{
  background:transparent!important;
}

body.theme-dark .cash-day small,
body.theme-system .cash-day small{
  color:var(--muted)!important;
}

body.theme-dark .text-green,
body.theme-system .text-green{
  color:#7ee2a5!important;
}

body.theme-dark .text-yellow,
body.theme-system .text-yellow{
  color:#ffd86b!important;
}

body.theme-dark .text-danger,
body.theme-system .text-danger{
  color:#ffaaa3!important;
}

/* Mobile safe */
@media(max-width:900px){
  body.theme-dark .bottom-nav,
  body.theme-system .bottom-nav{
    background:rgba(16,29,23,.94)!important;
    backdrop-filter:blur(12px);
  }
}

/* === FLOWKAS_STAGE_1GA_DARK_FULL_END === */


/* === FLOWKAS_STAGE_1HA_TRANSACTIONS_CSS_START === */

/* Transaction page polish - CSS only, no Blade/controller changes */
.filter-grid{
  align-items:end;
  gap:14px;
}

.filter-grid label span{
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
}

.filter-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.table-wrap{
  border-radius:18px;
  overflow:auto;
}

.table-wrap table{
  min-width:880px;
}

.table-wrap th{
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.table-wrap td{
  vertical-align:middle;
}

.tx-actions{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}

.tx-actions .inline-form{
  margin:0;
}

.mini-btn{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  padding:7px 11px;
  line-height:1;
  white-space:nowrap;
}

.small-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,61,46,.08);
  color:var(--green)!important;
  font-weight:800;
  text-decoration:none;
}

.small-link:hover{
  background:rgba(15,61,46,.14);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
}

.pagination-wrap{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}

.mobile-cards{
  gap:12px;
}

.tx-card{
  position:relative;
  overflow:hidden;
}

.tx-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--green);
  opacity:.72;
}

.tx-card:has(.pill.out)::before{
  background:#dc6803;
}

.tx-card > div:first-child{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.tx-card strong{
  font-size:16px;
  white-space:nowrap;
}

.tx-card p{
  margin:10px 0 6px;
  line-height:1.45;
}

.tx-card small{
  line-height:1.5;
}

.tx-actions.mobile{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tx-actions.mobile .mini-btn{
  flex:1 1 auto;
}

/* Form page polish */
.form-card .form-grid label span{
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
}

.text-right{
  text-align:right;
}

/* Dark mode support */
body.theme-dark .small-link,
body.theme-system .small-link{
  background:rgba(244,196,48,.10);
  color:var(--yellow)!important;
}

body.theme-dark .small-link:hover,
body.theme-system .small-link:hover{
  background:rgba(244,196,48,.16);
}

body.theme-dark .tx-card::before,
body.theme-system .tx-card::before{
  background:var(--yellow);
}

body.theme-dark .tx-card:has(.pill.out)::before,
body.theme-system .tx-card:has(.pill.out)::before{
  background:#f79009;
}

/* Small phone */
@media(max-width:640px){
  .filter-grid{
    gap:11px;
  }

  .filter-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .filter-actions .btn{
    width:100%;
  }

  .page-head{
    gap:14px;
  }

  .page-head .btn{
    width:100%;
  }

  .tx-card{
    padding-left:18px;
  }

  .tx-card > div:first-child{
    flex-direction:column;
    align-items:flex-start;
  }

  .tx-card strong{
    font-size:17px;
  }

  .tx-actions.mobile{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .tx-actions.mobile .inline-form,
  .tx-actions.mobile .mini-btn{
    width:100%;
  }
}

/* === FLOWKAS_STAGE_1HA_TRANSACTIONS_CSS_END === */


/* === FLOWKAS_STAGE_1HB_MOBILE_COMPACT_START === */

/* Compact mobile layout: small phone friendly, 2-4 items per row when possible */
@media(max-width:760px){
  .content{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .page-head{
    margin-bottom:12px;
  }

  .page-head h1{
    font-size:22px;
    line-height:1.16;
  }

  .page-head .muted{
    font-size:12px;
    line-height:1.45;
  }

  .card,
  .form-card,
  .tx-card,
  .stat-card{
    border-radius:16px!important;
  }

  .card{
    padding:13px!important;
  }

  .stat-grid{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:9px!important;
  }

  .stat-card{
    padding:12px!important;
    min-height:auto!important;
  }

  .stat-card span{
    font-size:11px!important;
    line-height:1.25;
  }

  .stat-card strong{
    font-size:17px!important;
    line-height:1.25;
  }

  .stat-card small{
    font-size:10.5px!important;
    line-height:1.35;
  }

  .filter-grid,
  .form-grid{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:10px!important;
  }

  .filter-grid label,
  .form-grid label{
    min-width:0;
  }

  .filter-grid .full-span,
  .form-grid .full-span,
  .filter-actions,
  .form-actions{
    grid-column:1 / -1;
  }

  .input,
  input,
  select,
  textarea{
    min-height:38px!important;
    font-size:13px!important;
    border-radius:12px!important;
    padding:9px 10px!important;
  }

  textarea.input,
  .textarea{
    min-height:82px!important;
  }

  label span,
  .filter-grid label span,
  .form-card .form-grid label span{
    font-size:10.8px!important;
    margin-bottom:5px!important;
  }

  .filter-actions,
  .form-actions{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:8px!important;
  }

  .btn{
    min-height:38px!important;
    padding:9px 12px!important;
    font-size:13px!important;
    border-radius:13px!important;
  }

  .quick-actions{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:9px!important;
  }

  .quick-card{
    padding:11px!important;
    min-height:auto!important;
    border-radius:15px!important;
  }

  .quick-card strong{
    font-size:13px!important;
    line-height:1.28;
  }

  .quick-card span{
    font-size:11px!important;
    line-height:1.35;
  }

  .mobile-cards{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:9px!important;
  }

  .tx-card{
    padding:11px!important;
    padding-left:14px!important;
    min-height:auto!important;
  }

  .tx-card::before{
    width:3px!important;
  }

  .tx-card > div:first-child{
    gap:6px!important;
  }

  .tx-card .pill{
    font-size:10.5px!important;
    min-height:22px!important;
    padding:4px 7px!important;
  }

  .tx-card strong{
    font-size:14px!important;
    line-height:1.25;
    white-space:normal!important;
  }

  .tx-card p{
    font-size:12px!important;
    line-height:1.35!important;
    margin:7px 0 5px!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .tx-card small{
    font-size:10.5px!important;
    line-height:1.35!important;
    display:block;
  }

  .tx-actions.mobile{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:6px!important;
    margin-top:9px!important;
  }

  .mini-btn{
    min-height:30px!important;
    padding:6px 8px!important;
    font-size:11.5px!important;
    border-radius:999px!important;
  }

  .pill{
    font-size:11px!important;
    min-height:23px!important;
    padding:4px 8px!important;
  }

  .bottom-nav{
    padding:6px 8px!important;
  }

  .bottom-nav-item{
    gap:2px!important;
    font-size:10.5px!important;
  }

  .bottom-icon{
    font-size:15px!important;
  }
}

/* Very small phones: keep 2 columns, tighter spacing */
@media(max-width:390px){
  .content{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .mobile-cards,
  .stat-grid,
  .quick-actions{
    gap:7px!important;
  }

  .tx-card{
    padding:9px!important;
    padding-left:12px!important;
  }

  .tx-card strong{
    font-size:13px!important;
  }

  .tx-card p{
    font-size:11.5px!important;
  }

  .tx-actions.mobile{
    gap:5px!important;
  }

  .mini-btn{
    font-size:11px!important;
    padding:6px 7px!important;
  }
}

/* Wider mobile / small tablet: allow 3-4 columns where it makes sense */
@media(min-width:520px) and (max-width:760px){
  .stat-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  }

  .mobile-cards{
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  }

  .quick-actions{
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  }

  .filter-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr))!important;
  }

  .filter-grid label:first-child{
    grid-column:span 2;
  }

  .filter-actions{
    grid-column:span 2;
  }
}

/* === FLOWKAS_STAGE_1HB_MOBILE_COMPACT_END === */


/* === FLOWKAS_STAGE_1HC_MOBILE_TRANSACTION_FIX_START === */

/* Transaction scoped mobile fix */
.transactions-page .transaction-add-btn{
  white-space:nowrap;
}

.transactions-page .transaction-table-scroll{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
  border-radius:16px;
}

.transactions-page .transaction-table{
  min-width:860px;
}

.transactions-page .tx-desc{
  max-width:260px;
  white-space:normal;
}

.transactions-page .tx-amount{
  white-space:nowrap;
  font-weight:800;
}

.transaction-form-card .amount-display{
  font-weight:800;
  letter-spacing:.01em;
}

@media(max-width:760px){
  .transactions-page .page-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  .transactions-page .page-head > div{
    min-width:0;
    flex:1 1 auto;
  }

  .transactions-page .page-head h1{
    font-size:20px!important;
    line-height:1.15!important;
  }

  .transactions-page .page-head .muted{
    font-size:11.5px!important;
    line-height:1.35!important;
  }

  .transactions-page .transaction-add-btn{
    width:auto!important;
    flex:0 0 auto!important;
    min-height:32px!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    font-size:12px!important;
  }

  .transactions-page .transaction-filter-card,
  .transactions-page .transaction-list-card,
  .transactions-page .transaction-form-card{
    padding:11px!important;
    border-radius:15px!important;
  }

  .transactions-page .transaction-filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:8px!important;
  }

  .transactions-page .transaction-filter-grid .filter-search{
    grid-column:1 / -1!important;
  }

  .transactions-page .transaction-filter-grid label,
  .transaction-form-grid label{
    min-width:0!important;
  }

  .transactions-page .filter-actions{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:8px!important;
  }

  .transactions-page .filter-actions .btn{
    width:100%!important;
  }

  .transactions-page .input,
  .transactions-page input,
  .transactions-page select,
  .transactions-page textarea{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:16px!important; /* avoid mobile auto zoom */
    min-height:40px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
  }

  .transactions-page textarea.input,
  .transactions-page .textarea{
    min-height:72px!important;
    resize:vertical;
  }

  .transactions-page label span{
    font-size:11px!important;
    margin-bottom:5px!important;
  }

  .transactions-page .transaction-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .transactions-page .transaction-form-grid .full-span,
  .transactions-page .transaction-form-grid .form-actions{
    grid-column:1 / -1!important;
  }

  .transactions-page .form-actions{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:8px!important;
  }

  .transactions-page .form-actions .btn{
    width:100%!important;
  }

  .transactions-page .transaction-table-scroll{
    display:block!important;
    margin-left:-2px;
    margin-right:-2px;
    padding-bottom:4px;
  }

  .transactions-page .transaction-table{
    min-width:780px!important;
    font-size:12px!important;
  }

  .transactions-page .transaction-table th{
    font-size:10.5px!important;
    padding:9px 8px!important;
  }

  .transactions-page .transaction-table td{
    padding:9px 8px!important;
  }

  .transactions-page .transaction-table .pill{
    font-size:10.5px!important;
    min-height:22px!important;
    padding:4px 7px!important;
  }

  .transactions-page .transaction-table .mini-btn{
    min-height:28px!important;
    padding:6px 8px!important;
    font-size:11px!important;
  }

  .transactions-page .transaction-table .tx-actions{
    flex-wrap:nowrap!important;
    gap:5px!important;
  }

  .transactions-page .mobile-cards{
    display:none!important;
  }

  .transactions-page .pagination-wrap{
    justify-content:center!important;
    overflow-x:auto;
  }
}

@media(max-width:390px){
  .transactions-page .transaction-filter-grid{
    grid-template-columns:1fr!important;
  }

  .transactions-page .page-head{
    gap:8px!important;
  }

  .transactions-page .page-head h1{
    font-size:19px!important;
  }

  .transactions-page .transaction-table{
    min-width:740px!important;
  }

  .transactions-page .transaction-add-btn{
    font-size:11.5px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
}

/* === FLOWKAS_STAGE_1HC_MOBILE_TRANSACTION_FIX_END === */


/* === FLOWKAS_STAGE_1HD_IOS_DATE_STATUS_START === */

/* iOS/mobile date input fix */
.transactions-page label,
.transactions-page .filter-grid label,
.transactions-page .form-grid label{
  min-width:0!important;
  overflow:hidden;
}

.transactions-page input[type="date"]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  font-size:16px!important;
  line-height:1.2!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums;
}

.transactions-page input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  min-height:1.2em;
}

.transactions-page input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:2px;
  padding:0;
  opacity:.75;
}

/* Status colors */
.status-pill.status-paid{
  background:rgba(22,163,74,.13)!important;
  color:#15803d!important;
  border:1px solid rgba(22,163,74,.22)!important;
}

.status-pill.status-unpaid{
  background:rgba(245,158,11,.16)!important;
  color:#b45309!important;
  border:1px solid rgba(245,158,11,.28)!important;
}

body.theme-dark .status-pill.status-paid,
body.theme-system .status-pill.status-paid{
  background:rgba(34,197,94,.16)!important;
  color:#86efac!important;
  border-color:rgba(34,197,94,.28)!important;
}

body.theme-dark .status-pill.status-unpaid,
body.theme-system .status-pill.status-unpaid{
  background:rgba(245,158,11,.18)!important;
  color:#facc15!important;
  border-color:rgba(245,158,11,.32)!important;
}

/* Mobile transaction filter: date fields should not collide */
@media(max-width:760px){
  .transactions-page .transaction-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .transactions-page .transaction-filter-grid label{
    min-width:0!important;
  }

  .transactions-page .transaction-filter-grid label:has(input[type="date"]){
    grid-column:span 1;
  }

  .transactions-page .transaction-filter-grid input[type="date"]{
    letter-spacing:-.02em;
    padding-left:8px!important;
    padding-right:6px!important;
  }

  .transactions-page .transaction-form-grid{
    grid-template-columns:1fr!important;
  }

  .transactions-page .transaction-form-grid input[type="date"]{
    width:100%!important;
  }
}

/* Very small iPhone width: make all filter fields one column to avoid date crash */
@media(max-width:430px){
  .transactions-page .transaction-filter-grid{
    grid-template-columns:1fr!important;
  }

  .transactions-page .transaction-filter-grid label,
  .transactions-page .transaction-filter-grid label:has(input[type="date"]),
  .transactions-page .transaction-filter-grid .filter-actions{
    grid-column:1 / -1!important;
  }

  .transactions-page .transaction-filter-grid input[type="date"]{
    padding-left:10px!important;
    padding-right:10px!important;
    letter-spacing:0!important;
  }

  .transactions-page .transaction-table{
    min-width:760px!important;
  }
}

/* Keep forms compact but not squeezed */
@media(max-width:760px){
  .transactions-page .transaction-form-card{
    padding:10px!important;
  }

  .transactions-page .transaction-form-grid{
    gap:8px!important;
  }

  .transactions-page textarea.input,
  .transactions-page .textarea{
    font-size:16px!important;
    line-height:1.35!important;
    min-height:68px!important;
  }
}

/* === FLOWKAS_STAGE_1HD_IOS_DATE_STATUS_END === */


/* === FLOWKAS_STAGE_1HE_CHOICE_COLOR_START === */

/* Transaction form choice colors: reduce input mistakes */
.transactions-page select[name="type"],
.transactions-page select[name="payment_status"]{
  font-weight:800!important;
  border-width:1.5px!important;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.transactions-page select.choice-income{
  background:rgba(22,163,74,.10)!important;
  color:#15803d!important;
  border-color:rgba(22,163,74,.35)!important;
  box-shadow:0 0 0 3px rgba(22,163,74,.06)!important;
}

.transactions-page select.choice-expense{
  background:rgba(245,158,11,.13)!important;
  color:#b45309!important;
  border-color:rgba(245,158,11,.38)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.07)!important;
}

.transactions-page select.choice-paid{
  background:rgba(22,163,74,.10)!important;
  color:#15803d!important;
  border-color:rgba(22,163,74,.35)!important;
  box-shadow:0 0 0 3px rgba(22,163,74,.06)!important;
}

.transactions-page select.choice-unpaid{
  background:rgba(245,158,11,.13)!important;
  color:#b45309!important;
  border-color:rgba(245,158,11,.38)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.07)!important;
}

/* Option colors where browser supports it */
.transactions-page select[name="type"] option[value="in"],
.transactions-page select[name="payment_status"] option[value="paid"]{
  color:#15803d;
  font-weight:800;
}

.transactions-page select[name="type"] option[value="out"],
.transactions-page select[name="payment_status"] option[value="unpaid"]{
  color:#b45309;
  font-weight:800;
}

/* Dark mode */
body.theme-dark .transactions-page select.choice-income,
body.theme-system .transactions-page select.choice-income,
body.theme-dark .transactions-page select.choice-paid,
body.theme-system .transactions-page select.choice-paid{
  background:rgba(34,197,94,.16)!important;
  color:#86efac!important;
  border-color:rgba(34,197,94,.34)!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.08)!important;
}

body.theme-dark .transactions-page select.choice-expense,
body.theme-system .transactions-page select.choice-expense,
body.theme-dark .transactions-page select.choice-unpaid,
body.theme-system .transactions-page select.choice-unpaid{
  background:rgba(245,158,11,.18)!important;
  color:#facc15!important;
  border-color:rgba(245,158,11,.36)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.08)!important;
}

/* Small helper labels */
.transactions-page .choice-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
}

.transactions-page .choice-hint::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
}

.transactions-page .choice-hint.hint-income,
.transactions-page .choice-hint.hint-paid{
  color:#15803d;
}

.transactions-page .choice-hint.hint-expense,
.transactions-page .choice-hint.hint-unpaid{
  color:#b45309;
}

body.theme-dark .transactions-page .choice-hint.hint-income,
body.theme-system .transactions-page .choice-hint.hint-income,
body.theme-dark .transactions-page .choice-hint.hint-paid,
body.theme-system .transactions-page .choice-hint.hint-paid{
  color:#86efac;
}

body.theme-dark .transactions-page .choice-hint.hint-expense,
body.theme-system .transactions-page .choice-hint.hint-expense,
body.theme-dark .transactions-page .choice-hint.hint-unpaid,
body.theme-system .transactions-page .choice-hint.hint-unpaid{
  color:#facc15;
}

@media(max-width:760px){
  .transactions-page select[name="type"],
  .transactions-page select[name="payment_status"]{
    min-height:42px!important;
  }
}

/* === FLOWKAS_STAGE_1HE_CHOICE_COLOR_END === */


/* === FLOWKAS_STAGE_1HF_PROOF_MODAL_START === */

html.proof-modal-open,
body.proof-modal-open{
  overflow:hidden!important;
}

.proof-modal[hidden]{
  display:none!important;
}

.proof-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.proof-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,12,8,.66);
  backdrop-filter:blur(8px);
}

.proof-modal-panel{
  position:relative;
  width:min(960px, 100%);
  height:min(86vh, 780px);
  background:var(--white);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.proof-modal-head{
  min-height:62px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(15,61,46,.08), rgba(244,196,48,.08));
}

.proof-modal-head strong{
  display:block;
  font-size:16px;
  line-height:1.2;
}

.proof-modal-head small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.proof-modal-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(15,61,46,.10);
  color:var(--green);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.proof-modal-body{
  flex:1;
  min-height:0;
  background:#0b120e;
  display:grid;
  place-items:center;
  overflow:auto;
}

.proof-modal-body img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.proof-modal-body iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

.proof-modal-empty{
  color:#fff;
  padding:18px;
  text-align:center;
}

.proof-modal-actions{
  padding:12px 14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--border);
  background:var(--white);
}

body.theme-dark .proof-modal-panel,
body.theme-system .proof-modal-panel{
  background:var(--card);
  border-color:var(--border);
  color:var(--text);
}

body.theme-dark .proof-modal-head,
body.theme-system .proof-modal-head{
  background:linear-gradient(135deg, rgba(244,196,48,.10), rgba(15,61,46,.18));
}

body.theme-dark .proof-modal-close,
body.theme-system .proof-modal-close{
  background:rgba(244,196,48,.12);
  color:var(--yellow);
}

body.theme-dark .proof-modal-actions,
body.theme-system .proof-modal-actions{
  background:var(--card);
  border-color:var(--border);
}

@media(max-width:760px){
  .proof-modal{
    padding:8px;
    align-items:flex-end;
  }

  .proof-modal-panel{
    width:100%;
    height:88vh;
    border-radius:20px 20px 14px 14px;
  }

  .proof-modal-head{
    min-height:56px;
    padding:12px;
  }

  .proof-modal-head strong{
    font-size:14px;
  }

  .proof-modal-head small{
    font-size:11px;
  }

  .proof-modal-close{
    width:36px;
    height:36px;
    font-size:24px;
  }

  .proof-modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:10px;
    gap:8px;
  }

  .proof-modal-actions .btn{
    width:100%;
  }
}

@media(max-width:390px){
  .proof-modal{
    padding:6px;
  }

  .proof-modal-panel{
    height:90vh;
  }
}

/* === FLOWKAS_STAGE_1HF_PROOF_MODAL_END === */


/* === FLOWKAS_STAGE_1HF1_PROOF_MODAL_SAFEAREA_START === */

/* Proof modal mobile browser safe-area fix */
.proof-modal{
  padding:
    max(14px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left))!important;
}

.proof-modal-panel{
  max-height:calc(100vh - 32px)!important;
  height:auto!important;
  min-height:0!important;
}

@supports (height: 100dvh){
  .proof-modal-panel{
    max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  }
}

.proof-modal-body{
  min-height:220px!important;
}

.proof-modal-actions{
  flex-shrink:0!important;
  padding-bottom:calc(12px + env(safe-area-inset-bottom))!important;
}

/* Mobile: jangan mentok browser bar bawah */
@media(max-width:760px){
  .proof-modal{
    align-items:center!important;
    justify-content:center!important;
    padding:
      calc(10px + env(safe-area-inset-top))
      8px
      calc(18px + env(safe-area-inset-bottom))
      8px!important;
  }

  .proof-modal-panel{
    width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:18px!important;
  }

  @supports (height: 100dvh){
    .proof-modal-panel{
      max-height:calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    }
  }

  .proof-modal-head{
    flex-shrink:0!important;
    min-height:52px!important;
    padding:10px 12px!important;
  }

  .proof-modal-body{
    flex:1 1 auto!important;
    min-height:180px!important;
    max-height:none!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .proof-modal-body img{
    max-width:100%!important;
    max-height:calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    object-fit:contain!important;
  }

  .proof-modal-body iframe{
    min-height:55vh!important;
  }

  .proof-modal-actions{
    flex-shrink:0!important;
    padding:9px 10px calc(12px + env(safe-area-inset-bottom))!important;
    background:var(--white)!important;
  }

  body.theme-dark .proof-modal-actions,
  body.theme-system .proof-modal-actions{
    background:var(--card)!important;
  }
}

/* Very small phones */
@media(max-width:390px){
  .proof-modal{
    padding:
      calc(8px + env(safe-area-inset-top))
      6px
      calc(16px + env(safe-area-inset-bottom))
      6px!important;
  }

  .proof-modal-panel{
    max-height:calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:16px!important;
  }

  @supports (height: 100dvh){
    .proof-modal-panel{
      max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    }
  }

  .proof-modal-body iframe{
    min-height:52vh!important;
  }
}

/* === FLOWKAS_STAGE_1HF1_PROOF_MODAL_SAFEAREA_END === */


/* === FLOWKAS_STAGE_1IA_TRANSACTION_SUMMARY_START === */

.transaction-summary-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:12px 0;
}

.transaction-summary-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:17px;
  padding:13px;
  box-shadow:var(--shadow);
  min-width:0;
}

.transaction-summary-card span{
  display:block;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
}

.transaction-summary-card strong{
  display:block;
  font-size:16px;
  line-height:1.25;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.transaction-summary-card small{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  color:var(--muted);
  line-height:1.35;
}

.transaction-summary-card.income{
  border-color:rgba(22,163,74,.22);
  background:linear-gradient(135deg, rgba(22,163,74,.09), var(--white));
}

.transaction-summary-card.income strong{
  color:#15803d;
}

.transaction-summary-card.expense{
  border-color:rgba(245,158,11,.25);
  background:linear-gradient(135deg, rgba(245,158,11,.10), var(--white));
}

.transaction-summary-card.expense strong{
  color:#b45309;
}

.transaction-summary-card.unpaid{
  border-color:rgba(245,158,11,.30);
  background:linear-gradient(135deg, rgba(245,158,11,.13), var(--white));
}

.transaction-summary-card.unpaid strong{
  color:#b45309;
}

body.theme-dark .transaction-summary-card,
body.theme-system .transaction-summary-card{
  background:var(--card)!important;
  border-color:var(--border)!important;
}

body.theme-dark .transaction-summary-card.income,
body.theme-system .transaction-summary-card.income{
  border-color:rgba(34,197,94,.28)!important;
  background:linear-gradient(135deg, rgba(34,197,94,.13), var(--card))!important;
}

body.theme-dark .transaction-summary-card.income strong,
body.theme-system .transaction-summary-card.income strong{
  color:#86efac!important;
}

body.theme-dark .transaction-summary-card.expense,
body.theme-system .transaction-summary-card.expense,
body.theme-dark .transaction-summary-card.unpaid,
body.theme-system .transaction-summary-card.unpaid{
  border-color:rgba(245,158,11,.32)!important;
  background:linear-gradient(135deg, rgba(245,158,11,.15), var(--card))!important;
}

body.theme-dark .transaction-summary-card.expense strong,
body.theme-system .transaction-summary-card.expense strong,
body.theme-dark .transaction-summary-card.unpaid strong,
body.theme-system .transaction-summary-card.unpaid strong{
  color:#facc15!important;
}

@media(max-width:900px){
  .transaction-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .transaction-summary-card{
    padding:10px;
    border-radius:15px;
  }

  .transaction-summary-card span{
    font-size:10.5px;
    margin-bottom:4px;
  }

  .transaction-summary-card strong{
    font-size:14px;
  }

  .transaction-summary-card small{
    font-size:10px;
  }
}

@media(min-width:520px) and (max-width:900px){
  .transaction-summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* === FLOWKAS_STAGE_1IA_TRANSACTION_SUMMARY_END === */








/* === FLOWKAS_STAGE_1KA_BACKUP_DATA_START === */

.backup-page{
  display:block;
}

.backup-head{
  align-items:flex-start;
}

.backup-head-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.backup-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin:12px 0;
}

.backup-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.backup-card h2,
.backup-info-card h2{
  margin:0 0 6px;
  font-size:17px;
  color:var(--text);
}

.backup-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.backup-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  background:rgba(15,61,46,.10);
  color:var(--green);
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

.primary-backup .backup-icon{
  background:linear-gradient(135deg, var(--green), #1f7a55);
  color:#fff;
}

.backup-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.backup-note{
  margin-top:10px;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(244,196,48,.13);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.backup-summary-grid{
  margin-top:14px;
}

.backup-info-card{
  margin-top:14px;
}

.backup-info-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.backup-info-list div{
  border:1px solid var(--border);
  border-radius:15px;
  padding:12px;
  background:rgba(15,61,46,.04);
}

.backup-info-list strong{
  display:block;
  color:var(--text);
  margin-bottom:5px;
}

.backup-info-list p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

body.theme-dark .backup-icon,
body.theme-system .backup-icon{
  background:rgba(244,196,48,.12);
  color:var(--yellow);
}

body.theme-dark .primary-backup .backup-icon,
body.theme-system .primary-backup .backup-icon{
  background:linear-gradient(135deg, var(--yellow), #b7791f);
  color:#1d1604;
}

body.theme-dark .backup-info-list div,
body.theme-system .backup-info-list div{
  background:rgba(244,196,48,.05);
}

@media(max-width:900px){
  .backup-head-actions{
    width:100%;
    justify-content:flex-start;
  }

  .backup-grid{
    grid-template-columns:1fr;
  }

  .backup-info-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .backup-head-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .backup-head-actions .btn,
  .backup-actions .btn{
    width:100%;
  }

  .backup-card{
    gap:10px;
  }

  .backup-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    font-size:13px;
  }
}

/* === FLOWKAS_STAGE_1KA_BACKUP_DATA_END === */


/* === FLOWKAS_STAGE_1JI_REPORT_LAYOUT_FINAL_START === */

.report-final-page,
.report-final-page *{
  box-sizing:border-box;
}

.report-final-page{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

/* Header */
.report-final-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin:0 0 8px;
}

.report-title-block{
  min-width:0;
}

.report-final-head h1{
  margin:0 0 2px;
  font-size:26px;
  line-height:1.1;
}

.report-final-head .muted{
  margin:0;
  font-size:12.5px;
  line-height:1.35;
}

.report-final-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.report-final-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--white);
}

.report-final-tabs a{
  min-height:32px;
  padding:7px 12px;
  border-radius:10px;
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.report-final-tabs a.active{
  background:rgba(15,61,46,.10);
  color:var(--green);
}

/* Export tidak pakai blok warna */
.report-export-btn{
  min-height:40px!important;
  padding:9px 13px!important;
  border-radius:13px!important;
  font-size:12px!important;
  white-space:nowrap!important;
  background:var(--white)!important;
  color:var(--green)!important;
  border:1px solid rgba(15,61,46,.22)!important;
  box-shadow:none!important;
}

.report-export-btn:hover{
  background:rgba(15,61,46,.06)!important;
}

/* Filter */
.report-final-filter-card.card{
  padding:10px!important;
  border-radius:16px!important;
  margin:0 0 8px!important;
}

.report-final-filter{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(92px, .45fr) auto;
  gap:8px;
  align-items:end;
}

.report-final-filter.yearly-filter{
  grid-template-columns:minmax(120px, 220px) auto;
  justify-content:start;
}

.report-final-filter label{
  min-width:0;
  max-width:100%;
  display:block;
}

.report-final-filter label span{
  display:block;
  margin:0 0 4px;
  font-size:11px;
  font-weight:900;
  color:var(--text);
}

.report-final-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:39px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  font-size:16px!important;
}

.report-final-filter-actions{
  display:flex;
  gap:7px;
  align-items:center;
}

.report-final-filter-actions .btn{
  min-height:39px!important;
  padding:8px 11px!important;
  border-radius:12px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}

/* Statistik */
.report-final-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin:0 0 8px;
}

.report-final-stat.card{
  padding:11px!important;
  border-radius:15px!important;
  min-width:0;
  background:var(--white)!important;
  border-color:var(--border)!important;
  box-shadow:0 8px 22px rgba(15,61,46,.055)!important;
}

.report-final-stat span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:900;
  text-transform:uppercase;
}

.report-final-stat strong{
  display:block;
  font-size:16px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.report-final-stat small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9.8px;
}

/* Section dibuat stack full width agar tidak ada ruang kosong dan tabel lebih lega */
.report-final-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.report-final-section.card{
  padding:11px!important;
  border-radius:16px!important;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.report-section-title{
  margin:0 0 6px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.report-section-title h2{
  margin:0 0 2px;
  font-size:15.5px;
  line-height:1.2;
}

.report-section-title p{
  margin:0;
  font-size:11px;
  line-height:1.3;
}

/* Tabel */
.report-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  padding-bottom:2px;
}

.report-final-table{
  width:100%;
  border-collapse:collapse;
}

.report-category-table{
  min-width:560px;
}

.report-transaction-table{
  min-width:760px;
}

.report-yearly-month-table,
.report-yearly-category-table{
  min-width:760px;
}

.report-final-table th,
.report-final-table td{
  padding:8px 10px!important;
  font-size:11.5px!important;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
}

.report-final-table th{
  color:var(--muted);
  font-size:10px!important;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.report-final-table td:nth-child(1),
.report-final-table td:nth-child(2),
.report-final-table td:nth-child(3){
  white-space:normal;
}

.report-transaction-table th:nth-child(1),
.report-transaction-table td:nth-child(1){
  width:110px;
}

.report-transaction-table th:nth-child(2),
.report-transaction-table td:nth-child(2){
  width:90px;
}

.report-transaction-table th:nth-child(4),
.report-transaction-table td:nth-child(4){
  width:120px;
}

.report-transaction-table th:nth-child(5),
.report-transaction-table td:nth-child(5){
  width:140px;
}

.pagination-wrap{
  margin-top:6px!important;
}

/* Dark */
body.theme-dark .report-final-tabs,
body.theme-system .report-final-tabs,
body.theme-dark .report-final-stat.card,
body.theme-system .report-final-stat.card,
body.theme-dark .report-export-btn,
body.theme-system .report-export-btn{
  background:var(--card)!important;
  border-color:var(--border)!important;
}

body.theme-dark .report-final-tabs a.active,
body.theme-system .report-final-tabs a.active{
  background:rgba(244,196,48,.14)!important;
  color:var(--yellow)!important;
}

body.theme-dark .report-export-btn,
body.theme-system .report-export-btn{
  color:var(--yellow)!important;
}

/* HP */
@media(max-width:760px){
  .content{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .report-final-head{
    display:block;
    margin-bottom:7px;
  }

  .report-final-head h1{
    font-size:21px;
  }

  .report-final-head .muted{
    font-size:11.5px;
  }

  .report-final-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    margin-top:7px;
  }

  .report-final-tabs{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .report-final-tabs a{
    text-align:center;
    justify-content:center;
    min-height:32px;
    font-size:11.5px;
  }

  .report-export-btn{
    width:100%;
    min-height:38px!important;
  }

  .report-final-filter{
    grid-template-columns:minmax(0, 1fr) 88px;
    gap:6px;
  }

  .report-final-filter.yearly-filter{
    grid-template-columns:1fr;
  }

  .report-final-filter-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .report-final-filter-actions .btn{
    width:100%;
    min-height:38px!important;
  }

  .report-final-select{
    height:38px!important;
    font-size:16px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .report-final-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .report-final-stat.card{
    padding:9px!important;
    border-radius:14px!important;
  }

  .report-final-stat span{
    font-size:10px;
  }

  .report-final-stat strong{
    font-size:14px;
  }

  .report-final-stat small{
    font-size:9.5px;
  }

  .report-final-stack{
    gap:7px;
  }

  .report-final-section.card{
    padding:9px!important;
    border-radius:14px!important;
  }

  .report-section-title h2{
    font-size:15px;
  }

  .report-category-table{
    min-width:520px;
  }

  .report-transaction-table{
    min-width:640px;
  }

  .report-yearly-month-table,
  .report-yearly-category-table{
    min-width:640px;
  }

  .report-final-table th,
  .report-final-table td{
    padding:7px 8px!important;
    font-size:11px!important;
  }
}

/* iOS kecil */
@media(max-width:430px){
  .content{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .report-final-filter{
    grid-template-columns:minmax(0, 1fr) 82px;
  }

  .report-final-select{
    height:37px!important;
  }

  .report-final-tabs a{
    min-height:31px;
    font-size:11px;
  }

  .report-final-stat strong{
    font-size:13.5px;
  }

  .report-category-table{
    min-width:490px;
  }

  .report-transaction-table{
    min-width:610px;
  }

  .report-yearly-month-table,
  .report-yearly-category-table{
    min-width:610px;
  }
}

@media(max-width:360px){
  .report-final-filter{
    grid-template-columns:1fr;
  }

  .report-category-table{
    min-width:460px;
  }

  .report-transaction-table{
    min-width:580px;
  }
}

/* === FLOWKAS_STAGE_1JI_REPORT_LAYOUT_FINAL_END === */