/* ═══════════════════════════════════════════════════════════════
   ECOSMART — Clean Minimalist UI  (desktop + mobile/PWA)
   Palette: soft blue bg · coral sidebar · white panels · dark text
═══════════════════════════════════════════════════════════════ */
:root{
  --bg:      #f0f4fb;
  --sidebar: #fde8e4;
  --sbar-h:  #fad4cd;
  --panel:   #ffffff;
  --border:  #e3e8f0;
  --head:    #111827;
  --ink:     #374151;
  --muted:   #6b7280;
  --light:   #9ca3af;
  --primary: #e07a61;
  --prim-dk: #c9624a;
  --blue:    #2563eb;
  --chip-bg: #eff4ff;
  --chip-fg: #1d4ed8;
  --ok:      #16a34a;
  --warn:    #d97706;
  --danger:  #dc2626;
  --r:       12px;
  --r-sm:    8px;
  --shadow:  0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font:14px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}
h1{font-size:22px;font-weight:700;margin:0 0 16px;color:var(--head)}
h2{font-size:15px;font-weight:600;margin:0;color:var(--head);letter-spacing:-.01em}
h3{font-size:13px;font-weight:600;margin:12px 0 6px;color:var(--head)}
h2 small{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}

/* ── SPLASH ───────────────────────────────────────────────────── */
#splash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#fff3f0 0%,#eff4fb 100%)}
.splash-inner{text-align:center;animation:fadeUp .5s ease}
.splash-logo{width:96px;height:96px;object-fit:contain;margin-bottom:14px;
  filter:drop-shadow(0 8px 18px rgba(224,122,97,.3))}
.splash-name{font-size:24px;font-weight:700;color:var(--head);letter-spacing:-.02em}
.splash-dots{margin-top:20px;display:flex;gap:6px;justify-content:center}
.splash-dots span{width:7px;height:7px;border-radius:50%;background:var(--primary);
  opacity:.3;animation:pulse 1.1s ease-in-out infinite}
.splash-dots span:nth-child(2){animation-delay:.18s}
.splash-dots span:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── LOGIN ────────────────────────────────────────────────────── */
#gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card.auth{width:100%;max-width:380px;text-align:center;padding:32px 28px}
.card.auth h1{margin:8px 0 24px;font-size:20px}
.card.auth label{text-align:left;margin-bottom:14px}
.logo-lg{width:68px;height:68px;object-fit:contain;margin:0 auto 4px;display:block}
.pw-wrap{display:flex;gap:6px}
.pw-wrap input{flex:1}
.pw-toggle{background:var(--chip-bg);color:var(--chip-fg);border:0;border-radius:var(--r-sm);
  width:40px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pw-toggle svg{transition:opacity .2s}
.block{width:100%}
.msg{font-size:12px;color:var(--muted);margin-top:6px;display:block;text-align:center}

/* ── CARDS ────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 20px;margin:14px auto;max-width:1060px;box-shadow:var(--shadow)}
.card.narrow{max-width:400px}
.card-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}

/* ── FORMS ────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}
label{display:flex;flex-direction:column;font-size:11px;font-weight:600;
  color:var(--muted);gap:4px;letter-spacing:.02em;text-transform:uppercase}
input,select{padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;color:var(--ink);background:#fff;width:100%;
  transition:border-color .15s,box-shadow .15s;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(224,122,97,.15)}
input::placeholder{color:var(--light)}
input[readonly]{background:#f8f9fb;color:var(--muted);border-style:dashed}
select:disabled{background:#f8f9fb;color:var(--muted)}
.actions{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}

/* ── BUTTONS ──────────────────────────────────────────────────── */
button{font-family:inherit;border:0;border-radius:var(--r-sm);font-size:13px;
  font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
button.primary{background:var(--primary);color:#fff;padding:9px 18px}
button.primary:hover{background:var(--prim-dk);transform:translateY(-1px)}
button.primary:active{transform:translateY(0)}
button.ghost{background:var(--chip-bg);color:var(--chip-fg);padding:7px 13px;font-weight:500}
button.ghost:hover{background:#dbeafe;color:var(--blue)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.err{color:var(--danger);font-size:12px}

/* ── APP SHELL ────────────────────────────────────────────────── */
#app{display:grid;grid-template-columns:210px 1fr;
  grid-template-rows:52px 1fr;grid-template-areas:"top top" "nav main";min-height:100vh}

/* Top bar */
#topbar{grid-area:top;display:flex;align-items:center;gap:10px;
  background:var(--panel);border-bottom:1px solid var(--border);padding:0 16px;
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm)}
#hamburger{display:none;background:transparent;color:var(--head);font-size:18px;
  padding:6px 9px;border-radius:var(--r-sm);border:0;cursor:pointer}
#hamburger:hover{background:var(--chip-bg)}
.logo-sm{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.brand-name{font-weight:700;color:var(--head);font-size:14px;letter-spacing:-.01em}
#who{margin-left:auto;font-size:12px;color:var(--ink);
  display:flex;align-items:center;gap:8px}
#who span{color:var(--muted)}
#who b{color:var(--head);font-weight:600}
#who button{background:transparent;color:var(--muted);font-size:12px;
  font-weight:500;padding:5px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm)}
#who button:hover{border-color:var(--primary);color:var(--primary)}

/* Sidebar */
#nav{grid-area:nav;background:var(--sidebar);padding:10px 8px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.navbtn{text-align:left;background:transparent;color:var(--ink);
  padding:8px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
  border:0;width:100%;cursor:pointer;transition:all .12s}
.navbtn:hover{background:var(--sbar-h);color:var(--head)}
.navbtn.active{background:var(--panel);color:var(--head);font-weight:700;
  box-shadow:var(--shadow-sm);border-left:3px solid var(--primary);padding-left:9px}
#backdrop{display:none}
#main{grid-area:main;padding:6px 18px 48px;overflow:auto;min-width:0}

/* ── TABLES ───────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
thead th{background:var(--chip-bg);color:var(--chip-fg);font-size:11px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 10px;text-align:right;border-bottom:2px solid var(--border)}
thead th:first-child,thead th:nth-child(2){text-align:left}
tbody td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border);
  color:var(--ink);vertical-align:middle}
tbody td:first-child,tbody td:nth-child(2){text-align:left}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fafbff}
.scrolly{max-height:58vh;overflow:auto;border-radius:var(--r-sm);
  border:1px solid var(--border)}
.report table td:first-child,.report table th:first-child{text-align:left;min-width:180px}

/* ── SUMMARY STRIPS ───────────────────────────────────────────── */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px 16px;margin:10px 0}
.summary div{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.summary div:last-child{border-bottom:none}
.summary span{font-size:11px;color:var(--muted);font-weight:500;
  text-transform:uppercase;letter-spacing:.03em}
.summary b{font-size:14px;font-weight:600;color:var(--head)}

/* ── STAT CARDS ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;display:flex;flex-direction:column;gap:4px;
  border-top:3px solid var(--blue)}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;
  font-weight:600;letter-spacing:.04em}
.stat b{font-size:26px;font-weight:700;color:var(--head);line-height:1.1}
.stat.warn{border-top-color:var(--danger)}
.stat.warn b{color:var(--danger)}

/* ── MODAL ────────────────────────────────────────────────────── */
#modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;background:rgba(17,24,39,.45);padding:20px;
  backdrop-filter:blur(3px)}
.modal-box{background:#fff;border-radius:var(--r);max-width:500px;width:100%;
  max-height:85vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.18);padding:18px 20px}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.modal-head span{font-size:15px;font-weight:600;color:var(--head)}

/* ── TOAST ────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);
  color:#fff;padding:10px 20px;border-radius:50px;font-size:13px;font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:200;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .28s;max-width:85vw;text-align:center;
  white-space:pre-line;letter-spacing:.01em}
.toast-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast-ok  {background:var(--ok)}
.toast-warn{background:var(--warn)}
.toast-err {background:var(--danger)}

/* ── HORIZONTAL SCROLL (mobile tables) ───────────────────────── */
#l_list,#d_list,#s_list,#e_list,#m_list,#u_list,#r_receipts,
#r_loanlist,#r_sched,#soc_list,#br_list,#dash_overdue,.report{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#r_sched table,#r_loanlist table,#r_receipts table{min-width:580px}
.report table{table-layout:auto}
.report table td,.report table th{white-space:nowrap}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:860px){
  #app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  #hamburger{display:inline-flex;align-items:center}
  #nav{position:fixed;top:0;left:0;height:100vh;width:240px;
    transform:translateX(-110%);transition:transform .24s ease;z-index:40;
    box-shadow:4px 0 24px rgba(0,0,0,.13);padding-top:56px}
  #nav.open{transform:none}
  #backdrop{display:block;position:fixed;inset:0;background:rgba(17,24,39,.35);
    z-index:35;opacity:0;pointer-events:none;transition:opacity .24s}
  #backdrop.show{opacity:1;pointer-events:auto}
  #main{padding:8px 12px 48px}
  .grid{grid-template-columns:1fr 1fr}
  .card{margin:10px 0;padding:14px 14px}
  table{white-space:nowrap}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .card{padding:12px}
  .stats{grid-template-columns:1fr 1fr}
  .stat b{font-size:20px}
}

/* ── DANGER ZONE ──────────────────────────────────────────────── */
.danger-card{border:1.5px solid #fca5a5!important;background:#fff8f8!important}