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

/* Code by PRiFA (c) 2026 */
/* assets/app.css — Plain light by default, with Dark toggle */
:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #5b6477;
  --line: rgba(15, 23, 42, .10);
  --shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --primary: #2563eb;
  --primary2: #1d4ed8;
  --danger: #dc2626;
  --good: #16a34a;
  --radius: 16px;
}

html[data-theme="dark"]{
  --bg: #0b1220;
  --card: #0f1a2b;
  --text: #e7edf8;
  --muted: #a7b2c6;
  --line: rgba(231, 237, 248, .10);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --primary: #5b8cff;
  --primary2: #3b82f6;
  --danger: #ff4d6d;
  --good: #37d67a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit}

/* Topbar */
.topbar{
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 18px;
}
.topbar-left{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.logo-sm{
  width:36px;height:36px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #10b981));
  color:#fff;
  font-weight: 800;
}
.topbar-title{
  font-weight: 800;
  letter-spacing: .2px;
}
.topbar-right{display:flex; align-items:center; gap:12px}
.topbar-nav{display:flex; align-items:center; gap:8px}
.navlink{
  text-decoration:none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
}
.navlink:hover{background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text);}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:22px 16px 120px}
.h1{margin:0; font-size:28px; letter-spacing:.2px}
.sub{color:var(--muted); margin-top:6px; font-size:14px}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:10px 0 18px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 980px){ .cards{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .cards{grid-template-columns:1fr;} }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.card-title{font-weight: 800; font-size:16px; letter-spacing:.2px}

.kpi-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.kpi{
  padding:12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  border: 1px solid var(--line);
}
.kpi-label{color:var(--muted); font-size:12px}
.kpi-value{font-weight: 800; font-size:18px; margin-top:6px}
.danger{color:var(--danger)}

/* KPI strip */
.kpi-strip{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin: 10px 0 14px}
@media (max-width: 820px){ .kpi-strip{grid-template-columns:1fr} }
.kpi2{
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.kpi2-label{color:var(--muted); font-size:12px}
.kpi2-value{font-weight: 800; font-size:22px; margin-top:6px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  text-decoration:none;
  cursor:pointer;
  font-weight: 800;
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform: translateY(1px)}
.btn-primary{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
}
.btn-ghost{
  background: color-mix(in srgb, var(--bg) 70%, var(--card));
}
.btn-sm{padding:8px 10px; border-radius:12px; font-size:13px}
.disabled{opacity:.45; pointer-events:none}

.theme-dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--primary);
  display:inline-block;
}

/* Forms */
.form{margin-top:14px}
.label{display:block; margin:12px 0 6px; color:var(--muted); font-size:13px}
.input, select.input{
  width:100%;
  background: var(--card);
  border:1px solid var(--line);
  color: var(--text);
  padding:12px 12px;
  border-radius: 14px;
  outline:none;
  font-size:15px;
}
.input:focus{border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent)}
.form-note{margin-top:10px; color:var(--muted); font-size:13px}
.muted-note{margin-top:12px; color:var(--muted); font-size:13px}

/* Auth */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.auth-card{
  width: min(540px, 100%);
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.brand{display:flex; gap:12px; align-items:center; margin-bottom:16px}
.logo{
  width:54px; height:54px; border-radius:18px;
  display:grid; place-items:center;
  font-size:22px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #10b981));
  color:#fff;
}
.brand-title{font-size:18px; font-weight: 800}
.brand-sub{color:var(--muted); font-size:13px; margin-top:2px}

.alert{
  margin:12px 0;
  padding:12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--card));
  color: var(--text);
}
.alert-danger{border-color: color-mix(in srgb, var(--danger) 35%, var(--line));}
.alert-warn{border-color: color-mix(in srgb, #f59e0b 35%, var(--line));}
.footer-note{margin-top:14px; color:var(--muted); font-size:13px}

/* Tables */
.table-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.table-title{font-weight: 800}
.muted{color:var(--muted); font-size:13px}
.table-wrap{overflow:auto; border-radius: 14px; border:1px solid var(--line); background: var(--card)}
.table{width:100%; border-collapse:collapse; min-width:920px}
.table th, .table td{padding:12px 12px; border-bottom:1px solid var(--line); text-align:left}
.table th{color:var(--muted); font-weight: 800; font-size:12px; letter-spacing:.4px; text-transform:uppercase}
.table td{white-space:nowrap}
.note-cell{white-space:normal; max-width: 360px}
.td-empty{color:var(--muted); text-align:center; padding:26px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px}

/* Tags */
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight: 800;
  font-size:12px;
  border:1px solid var(--line);
}
.tag-good{background: color-mix(in srgb, var(--good) 12%, var(--card)); color: var(--good)}
.tag-bad{background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger)}

.pager{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:14px}
.pager-info{color:var(--muted); font-size:13px}

/* Filters */
.filters{margin: 12px 0 14px}
.filters-form{margin:0}
.filters-row{display:grid; grid-template-columns: 1.1fr 1.6fr .8fr auto; gap:12px; align-items:end}
.filters-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end}
@media (max-width: 920px){
  .filters-row{grid-template-columns:1fr; align-items:stretch}
  .filters-actions{justify-content:flex-start}
}
.hidden{display:none}

/* Lists */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }
.list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--card);
  text-decoration:none;
}
.list-row:hover{filter:brightness(.99)}
.list-title{font-weight: 800}
.list-sub{color:var(--muted); font-size:12px; margin-top:4px}
.pill{
  padding:8px 10px;
  border-radius:999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  font-weight: 800;
  font-size:12px;
}

/* Empty */
.empty{
  padding:22px;
  border-radius: 18px;
  border:1px dashed color-mix(in srgb, var(--text) 20%, var(--line));
  background: var(--card);
}
.empty-title{font-weight: 800; font-size:18px}
.empty-sub{color:var(--muted); margin-top:6px}

/* Footer */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  z-index: 10;
}

/* FAB + Modal */
.fab-wrap{
  position:fixed; right:18px; bottom:58px;
  display:flex; flex-direction:column; gap:10px;
  z-index:50;
}
.fab{
  width:54px; height:54px;
  border-radius: 18px;
  border:1px solid var(--line);
  cursor:pointer;
  font-size:26px; font-weight: 800;
  box-shadow: var(--shadow);
}
.fab-plus{ background: color-mix(in srgb, var(--good) 14%, var(--card)); color: var(--good) }
.fab-minus{ background: color-mix(in srgb, var(--danger) 14%, var(--card)); color: var(--danger) }
.fab:hover{filter:brightness(.98)}

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
  z-index:60;
}
.modal{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%, -48%) scale(.98);
  width:min(560px, calc(100% - 24px));
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:70;
}
.modal.open{opacity:1; pointer-events:auto; transform: translate(-50%, -50%) scale(1)}
.modal-backdrop.open{opacity:1; pointer-events:auto}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.modal-title{font-weight: 800; font-size:16px}
.iconbtn{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
}
.iconbtn:hover{filter:brightness(.98)}
.modal-body{padding:16px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 720px){ .grid{grid-template-columns:1fr} }
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
.modal-hint{margin-top:10px; color:var(--muted); font-size:13px}

@media (max-width: 560px){
  .topbar{padding:12px 14px}
  .topbar-title{display:none}
  
  .table{min-width:0}
  .note-cell{max-width:220px}
}


/* Confirmation cards */
.confirm-card{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
}
.confirm-title{font-weight: 800; font-size: 16px}
.confirm-sub{color: var(--muted); margin-top: 6px; font-size: 13px}
.confirm-details{
  margin-top: 10px;
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
}

/* FAB gentle motion */
@keyframes prifaFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.fab-plus{ animation: prifaFloat 2.2s ease-in-out infinite; }
.fab-minus{ animation: prifaFloat 2.2s ease-in-out infinite; animation-delay: .25s; }

.logo-img{width:36px;height:36px;border-radius:14px;border:1px solid var(--line);background:var(--card);object-fit:contain;padding:6px}

#txAmount{ text-align:right; font-variant-numeric: tabular-nums; }


/* Mobile nav dropdown */
.nav-toggle{display:none}
.mobile-nav{
  position: sticky;
  top: 64px;
  z-index: 19;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display:none;
  padding: 10px 12px;
}
.mobile-nav.open{display:grid; gap:8px}
.mobile-link{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 720px){
  .topbar-nav{display:none}
  .nav-toggle{display:inline-flex}
}

.fab{display:grid;place-items:center}
.fab-svg{width:22px;height:22px}
.fab{
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.fab:hover{transform: translateY(-2px) scale(1.02); filter:brightness(1.02)}
.fab:active{transform: translateY(0) scale(.98)}