@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}
.good{color:var(--good)}
.kpi-credit{border-left:4px solid var(--good)}
.kpi-debit{border-left:4px solid var(--danger)}
.kpi-net{border-left:4px solid var(--primary)}

/* 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: transparent;
  border:0;
  border-radius:0;
  padding:8px 0;
  box-shadow:none;
}
.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; table-layout:fixed; min-width:1040px}
.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; vertical-align:top}
.table .col-date{width:17%}.table .col-type{width:11%}.table .col-amount{width:13%}.table .col-note{width:31%}.table .col-balance{width:14%}
.note-cell{white-space:normal !important; width:31% !important; min-width:180px; max-width:31%; overflow-wrap:anywhere; word-break:break-word; line-height:1.45; position:relative; z-index:0}
.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)}
.tx-credit{color:var(--good); font-weight:800}
.tx-debit{color:var(--danger); font-weight:800}
.tx-credit td:first-child{border-left:3px solid var(--good)}
.tx-debit td:first-child{border-left:3px solid 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;table-layout:auto}
  .note-cell{max-width:none; min-width:0}
}


/* Strong transaction type prompts */
.tx-type-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;border-radius:16px;border:2px solid}
.tx-type-banner.tx-type-credit{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,var(--line));background:color-mix(in srgb,var(--good) 10%,var(--card))}
.tx-type-banner.tx-type-debit{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:color-mix(in srgb,var(--danger) 10%,var(--card))}
.tx-type-word{font-size:23px;font-weight:900;letter-spacing:1px}
.tx-type-caption{font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;text-align:right}
.confirm-title-credit,.confirm-amount-credit{color:var(--good)}
.confirm-title-debit,.confirm-amount-debit{color:var(--danger)}
.confirm-amount-credit,.confirm-amount-debit{font-weight:900;font-size:18px}
.duplicate-warning{margin-top:12px;padding:14px;border:2px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--danger) 7%,var(--card))}
.duplicate-title{font-weight:900;color:var(--danger);text-transform:uppercase;letter-spacing:.5px}
.duplicate-sub{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.5}
.duplicate-grid{margin-top:10px;display:grid;gap:7px}
.duplicate-grid > div{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;border-radius:9px;background:color-mix(in srgb,var(--bg) 65%,var(--card))}
.duplicate-key{color:var(--muted);font-size:12px;font-weight:700}
.duplicate-value{text-align:right;overflow-wrap:anywhere}
.duplicate-value.type-credit{color:var(--good)}
.duplicate-value.type-debit{color:var(--danger)}

 .tx-modal-credit #modalReview,.tx-modal-credit #modalProceed1,.tx-modal-credit #modalSave{background:linear-gradient(135deg,var(--good),color-mix(in srgb,var(--good) 78%,#0f766e));border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.tx-modal-debit #modalReview,.tx-modal-debit #modalProceed1,.tx-modal-debit #modalSave{background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 78%,#991b1b));border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
/* 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:8px;
  color:var(--text);
  font-size:14px;
}
.confirm-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:8px 10px;
  border-radius:10px;
  background:color-mix(in srgb, var(--bg) 75%, var(--card));
}
.confirm-key{color:var(--muted); font-weight:700; flex:0 0 auto}
.confirm-value{text-align:right; overflow-wrap:anywhere; word-break:break-word}
.confirm-value.type-credit{color:var(--good); font-weight:800}
.confirm-value.type-debit{color:var(--danger); font-weight:800}


/* 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}
.nigeria-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.1;min-width:max-content;font-variant-numeric:tabular-nums}
.nigeria-clock-label{font-size:9px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
#nigeriaClock{font-size:11px;font-weight:800;color:var(--text);white-space:nowrap}
.settings-password-card{margin-top:14px}

#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)}


/* Responsive transaction cards: eliminate horizontal table scrolling on phones. */
@media (max-width: 720px){
  .container{padding:18px 12px 108px}
  .pagehead{align-items:stretch; flex-direction:column; gap:12px; margin-bottom:14px}
  .pagehead .btn{width:100%}
  .h1{font-size:24px; line-height:1.2}

  .table-head{align-items:flex-start; flex-direction:column; gap:4px}
  .table-wrap{overflow:visible; border:0; background:transparent}
  .table{min-width:0; width:100%; border-collapse:separate; border-spacing:0; display:block}
  .table thead{display:none}
  .table tbody{display:block}
  .table tbody tr{
    display:block;
    margin-bottom:12px;
    padding:4px 14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--card);
    box-shadow:0 8px 24px rgba(15,23,42,.06);
    overflow:hidden;
  }
  .table tbody tr.tx-credit{border-left:4px solid var(--good)}
  .table tbody tr.tx-debit{border-left:4px solid var(--danger)}
  .table td{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    padding:11px 0;
    white-space:normal;
    min-width:0;
    border-bottom:1px solid var(--line);
  }
  .table td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    line-height:1.2;
    text-transform:uppercase;
  }
  .table td:first-child{border-left:0}
  .table .tag{width:max-content}
  .table .note-cell{
    display:flex;
    width:auto !important;
    max-width:none;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .table .mono{font-size:12px}
  .td-empty{display:block !important; padding:24px 12px !important; text-align:center}
  .td-empty::before{content:none !important}

  .filters.card{padding:14px}
  .filters .label{margin-top:8px}
  .filters-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .filters-actions .btn{width:100%}

  .kpi2{padding:13px}
  .kpi2-value{font-size:20px}

  .fab-wrap{right:12px; bottom:62px; gap:8px}
  .fab{width:50px; height:50px; border-radius:16px}
}

@media (max-width: 420px){
  .topbar{gap:8px}
  .topbar-right{gap:7px}
  .topbar-right .btn{padding:8px 9px; font-size:12px}
  .nigeria-clock{display:none}
  .container{padding-left:10px; padding-right:10px}
  .card{border-radius:15px}
  .table tbody tr{padding-left:12px; padding-right:12px}
  .confirm-row{flex-direction:column; gap:4px; align-items:stretch}
  .confirm-value{text-align:left}
  .modal{width:calc(100% - 16px); max-height:calc(100vh - 24px); overflow:auto}
}