:root,html{
  --bg:#f7f5f2;--bg2:#fff;--bg3:#efecea;--bg4:#e5e1da;
  --ink:#1c1a17;--ink2:#4a4540;--ink3:#8a8278;--ink4:#b5b0a8;
  --border:#ddd8d0;--accent:#2d5a3d;--accent-bg:#eaf2ec;--accent-lt:#d0e8d8;
  --red:#8b2222;--red-bg:#fdf0f0;--amber:#7a5200;--amber-bg:#fdf5e6;--amber-lt:#f5dfa0;
  --blue:#1a3d6b;--blue-bg:#edf2fa;
  --r:10px;--r-sm:7px;--r-lg:16px;--r-xl:22px;
  --font:"DM Sans",system-ui,sans-serif;
  --nav-h:54px;
}
html[data-theme=dark],
html[data-theme=dark] :root,
[data-theme=dark]{
  --bg:#141210;--bg2:#1e1c19;--bg3:#252220;--bg4:#2e2b28;
  --ink:#f0ece6;--ink2:#c8c0b5;--ink3:#8a8278;--ink4:#5a5550;
  --border:#2e2b28;--accent:#4a9e6a;--accent-bg:#1a2e22;--accent-lt:#253d2e;
  --red:#c25555;--red-bg:#2a1515;--amber:#c8900a;--amber-bg:#2a2010;--amber-lt:#3d3015;
  --blue:#5a8fd0;--blue-bg:#101828;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;background:var(--bg);color:var(--ink);transition:background .2s,color .2s}
body{height:100%;min-height:-webkit-fill-available;background:var(--bg);font-family:var(--font);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;transition:background .2s,color .2s}
/* APP SHELL */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:-webkit-fill-available;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:var(--bg)}
/* TOPBAR */
.tb{display:flex;align-items:center;gap:8px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}
.tb-logo{flex:1;display:flex;align-items:center;gap:8px}
.tb-logo img{height:22px;width:auto;filter:none}
.tb-name{font-size:11px;color:var(--ink3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.tb-right{display:flex;align-items:center;gap:5px;flex-shrink:0}
.rb{padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-lt);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ib{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;color:var(--ink3)}
.ib svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.nd{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid var(--bg2);display:none}
/* SCROLL */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;width:100%;max-width:480px;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px)}
.scroll::-webkit-scrollbar{display:none}
/* BOTTOM NAV */
.bnav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;
  display:grid;background:var(--bg2);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);z-index:90;box-shadow:0 -2px 10px rgba(0,0,0,.04);
}
@supports(padding:max(0px)){
  .bnav{padding-bottom:max(env(safe-area-inset-bottom),0px)}
}
.nb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border:none;background:none;cursor:pointer;color:var(--ink4);font-size:9px;font-family:var(--font);font-weight:500;transition:color .15s;position:relative;min-height:54px}
.nb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.nb.active{color:var(--accent)}
.nb.active svg{stroke-width:2.2}
.nb-badge{position:absolute;top:4px;right:calc(50% - 14px);background:var(--red);color:#fff;border-radius:20px;font-size:8px;font-weight:700;padding:1px 4px;min-width:14px;text-align:center;line-height:14px;display:none}
/* FAB */
.fab{position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);right:16px;width:48px;height:48px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(45,90,61,.4);z-index:50;line-height:1}
@supports(padding:max(0px)){
  .fab{bottom:calc(var(--nav-h) + max(env(safe-area-inset-bottom),0px) + 14px)}
}
/* PAGES */
.page{display:none;padding:16px 16px 20px}
.page.active{display:block}
/* MORE SHEET */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;backdrop-filter:blur(3px)}
.overlay.open{display:block}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--bg2);border-radius:var(--r-xl) var(--r-xl) 0 0;border-top:1px solid var(--border);padding:12px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));z-index:101;display:none}
@supports(padding:max(0px)){
  .sheet{padding-bottom:max(calc(14px + env(safe-area-inset-bottom)),20px)}
}
.sheet.open{display:block}
.sh-drag{width:32px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.si{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);cursor:pointer;font-size:10px;font-weight:500;color:var(--ink2);text-align:center}
.si:active{background:var(--bg4)}
.si.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.si-ic{font-size:20px;line-height:1}
/* MODALS */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:flex-end;backdrop-filter:blur(4px)}
.mo.open{display:flex}
.m{background:var(--bg2);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-height:92dvh;overflow-y:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.m-drag{width:32px;height:4px;border-radius:2px;background:var(--border);margin:12px auto 4px}
.m-hd{padding:8px 16px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.m-title{font-size:15px;font-weight:600}
.m-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--ink3);line-height:1}
.m-body{padding:14px 16px;overflow-x:hidden}
/* FORMS */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.ff{display:flex;flex-direction:column;gap:4px}
.ff.full{grid-column:1/-1}
.ff label{font-size:9px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.07em}
.ff input,.ff select,.ff textarea{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--ink);font-size:14px;padding:9px 10px;font-family:var(--font);outline:none;width:100%;-webkit-appearance:none}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--accent);background:var(--bg2)}
.ff textarea{resize:vertical;min-height:56px}
.btn{width:100%;padding:12px;border-radius:var(--r);border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);margin-top:8px}
.btn:active{opacity:.85}
.btn.sec{background:var(--bg3);color:var(--ink2);border:1.5px solid var(--border)}
.btn.danger{background:var(--red);color:#fff}
.msg{text-align:center;padding:8px;font-size:12px;font-weight:500;border-radius:var(--r-sm);margin-top:6px;display:none}
.msg.ok{background:var(--accent-bg);color:var(--accent)}
.msg.err{background:var(--red-bg);color:var(--red)}
/* COMPONENTS */
.sec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.sec-hd{font-size:9px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.sec-act{font-size:11px;font-weight:500;color:var(--accent);text-transform:none;letter-spacing:0;cursor:pointer}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.metrics.c3{grid-template-columns:1fr 1fr 1fr}
.mc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:11px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.mc-lbl{font-size:9px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.mc-val{font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.1}
.mc-sub{font-size:10px;color:var(--ink3);margin-top:1px}
.vg{color:var(--accent)}.vr{color:var(--red)}.va{color:var(--amber)}.vb{color:var(--blue)}
.ri{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-bottom:1px solid var(--border)}
.ri:last-child{border-bottom:none}
.ri-ic{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:2px}
.ri-b{flex:1;min-width:0}
.ri-t{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri-s{font-size:11px;color:var(--ink3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri-r{text-align:right;flex-shrink:0;margin-left:8px}
.ri-amt{font-size:12px;font-weight:600;white-space:nowrap}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;white-space:nowrap;cursor:default}
.bg{background:var(--accent-bg);color:var(--accent)}
.br{background:var(--red-bg);color:var(--red)}
.ba{background:var(--amber-bg);color:var(--amber)}
.bb{background:var(--blue-bg);color:var(--blue)}
.bgr{background:var(--bg3);color:var(--ink3)}
.po-actions{display:flex;gap:5px;margin-top:2px}
.po-act{border:1px solid var(--border);background:var(--bg3);color:var(--ink2);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:700;line-height:1;cursor:pointer}
.po-act.danger{background:var(--red-bg);border-color:rgba(139,34,34,.2);color:var(--red)}
.pbar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.pf{height:100%;border-radius:2px;background:var(--accent)}
.pf.warn{background:var(--amber)}.pf.danger{background:var(--red)}
.empty{text-align:center;padding:28px 16px;color:var(--ink3)}
.empty-ico{font-size:26px;margin-bottom:6px}
.pg-title{font-size:20px;font-weight:600;letter-spacing:-.4px;margin-bottom:2px}
.pg-sub{font-size:12px;color:var(--ink3);margin-bottom:14px}
.fbar{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.fbar::-webkit-scrollbar{display:none}
.chip{padding:5px 11px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg3);font-size:11px;font-weight:500;color:var(--ink3);white-space:nowrap;cursor:pointer;flex-shrink:0;font-family:var(--font);-webkit-appearance:none;outline:none}
.chip.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.fsearch{width:100%;padding:8px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);font-size:12px;font-family:var(--font);color:var(--ink);outline:none;margin-bottom:10px;-webkit-appearance:none}
.fsearch:focus{border-color:var(--accent)}
.toast{position:fixed;top:max(70px,calc(env(safe-area-inset-top)+58px));left:50%;transform:translateX(-50%) translateY(-4px);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;z-index:999;opacity:0;transition:all .2s;pointer-events:none;white-space:nowrap;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* LOGIN */
.login{position:fixed;inset:0;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;padding:24px 20px}
.login.hidden{display:none}
.login-logo{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.login-logo img{height:52px;width:auto}
.login-tag{font-size:11px;color:rgba(255,255,255,.65);margin-bottom:28px;text-align:center}
.login-card{background:#fff;border-radius:var(--r-xl);padding:22px 18px;width:100%;max-width:360px}
.login-title{font-size:17px;font-weight:600;margin-bottom:2px;color:#1c1a17}
.login-sub{font-size:12px;color:#8a8278;margin-bottom:16px}
.lf{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.lf label{font-size:9px;font-weight:700;color:#8a8278;text-transform:uppercase;letter-spacing:.07em}
.lf input{background:#f7f5f2;border:1.5px solid #ddd8d0;border-radius:8px;color:#1c1a17;font-size:15px;padding:10px 12px;font-family:var(--font);outline:none;width:100%;-webkit-appearance:none}
.lf input:focus{border-color:#2d5a3d}
.login-btn{width:100%;padding:13px;border-radius:var(--r);border:none;background:#2d5a3d;color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:2px;font-family:var(--font)}
.login-err{background:#fdf0f0;color:#8b2222;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:500;margin-top:8px;display:none;text-align:center}
/* ACTIONS */
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ac{display:flex;align-items:center;gap:9px;padding:12px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--bg2);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ac:active{transform:scale(.97);background:var(--bg3)}
.ac-ic{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ac-t{font-size:12px;font-weight:600;color:var(--ink)}.ac-s{font-size:10px;color:var(--ink3);margin-top:1px}
/* SETTINGS */
.sg-title{font-size:9px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin:14px 0 7px;padding:0 2px}
.si2{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;cursor:pointer}
.si2:active{background:var(--bg3)}
.si2-l{display:flex;align-items:center;gap:9px}
.si2-ic{font-size:16px;width:28px;text-align:center}
.si2-label{font-size:13px;font-weight:500}
.si2-sub{font-size:10px;color:var(--ink3)}
.si2-arr{color:var(--ink4);font-size:16px}
/* NOTIF */
.ni{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.ni:last-child{border-bottom:none}
.ni.unread{background:var(--accent-bg);margin:0 -14px;padding:11px 14px;border-radius:var(--r-sm)}
.ni-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ni-title{font-size:13px;font-weight:500}
.ni-msg{font-size:11px;color:var(--ink3);margin-top:2px}
.ni-time{font-size:10px;color:var(--ink4);margin-top:2px}

@supports(padding: max(0px)) {
  .bnav { padding-bottom: max(env(safe-area-inset-bottom), 0px) !important; }
  .scroll { padding-bottom: max(calc(80px + env(safe-area-inset-bottom)), 90px) !important; }
  .fab { bottom: max(calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px), 82px) !important; }
  .sheet { padding-bottom: max(calc(14px + env(safe-area-inset-bottom)), 24px) !important; }
  .m { padding-bottom: max(calc(20px + env(safe-area-inset-bottom)), 24px) !important; }
}

/* Mobile layout fixes */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom on focus */
.page, .m-body, .sec, .metrics, .fg { overflow-x: hidden !important; }
.metrics { grid-template-columns: 1fr 1fr; }
.metrics.c3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 360px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics.c3 { grid-template-columns: 1fr 1fr; }
  .fg { grid-template-columns: 1fr !important; }
  .ff.full { grid-column: 1; }
}
/* Fix fbar horizontal overflow */
.fbar { flex-wrap: nowrap; overflow-x: auto; }
/* Fix tables on mobile */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Final iPhone/PWA viewport fixes */
html, body { width:100%; min-height:100%; height:100%; overflow:hidden; background:var(--bg) !important; }
@supports (height: 100dvh) {
  html, body, .app, .login { height:100dvh !important; min-height:100dvh !important; }
}
@supports (height: 100svh) {
  html, body, .app, .login { height:100svh !important; min-height:100svh !important; }
}
.login { bottom:0 !important; min-height:100vh; justify-content:center; padding-bottom:max(24px, env(safe-area-inset-bottom)) !important; }
.app { height:100vh !important; max-height:100vh !important; }
@supports (height: 100dvh) { .app { height:100dvh !important; max-height:100dvh !important; } }
.bnav { min-height:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.scroll { padding-bottom:16px !important; }
.mo { align-items:flex-end !important; }
.m { max-height:calc(100dvh - env(safe-area-inset-top) - 8px) !important; padding-bottom:max(18px, env(safe-area-inset-bottom)) !important; }


/* === PWA iPhone scroll fix === */
html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
  overscroll-behavior: none;
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-h, 70px) + env(safe-area-inset-bottom) + 24px);
}

.page {
  min-height: auto;
  padding-bottom: calc(var(--nav-h, 70px) + env(safe-area-inset-bottom) + 36px);
}

.bnav {
  flex-shrink: 0;
}



/* === cPanel modular compatibility === */
#app{display:flex!important}
.page{display:none}
.page.active{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:11px}
.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:7px 4px;text-align:left}
.tbl th{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.kv:last-child{border-bottom:none}
.kv span:first-child{color:var(--ink3)}
.kv span:last-child{font-weight:500;text-align:right;color:var(--ink)}
.line-card{border:1px solid var(--border);border-radius:var(--r);padding:10px;margin-bottom:8px;background:var(--bg3)}
.invoice-paper{background:#fff!important;color:#1c1a17!important;border:1px solid #ddd8d0;border-radius:12px;padding:16px}
.invoice-paper .muted{color:#8a8278!important}
.invoice-total-box{margin-top:10px;border-top:1px solid #ddd8d0;padding-top:10px;text-align:right}
[data-theme=dark] .m,[data-theme=dark] .sheet,[data-theme=dark] .mo,[data-theme=dark] .line-card{background:var(--bg2)!important;color:var(--ink)!important;border-color:var(--border)!important}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:var(--bg3)!important;color:var(--ink)!important;border-color:var(--border)!important}

/* INVOICE */
.invoice-paper{background:#fff;color:#1c1a17;padding:20px;border-radius:var(--r);font-size:12px;margin-bottom:10px}
.tbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:11px}
.tbl th{background:var(--bg3);padding:6px 8px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;color:var(--ink3)}
.tbl td{padding:6px 8px;border-bottom:1px solid var(--border)}
.invoice-total-box{text-align:right;padding:8px 0;border-top:1px solid var(--border);font-size:12px}
.muted{color:var(--ink3);font-size:11px}
/* KEY-VALUE */
.kv{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.kv:last-child{border-bottom:none}
.kv span:first-child{color:var(--ink3);font-size:11px}
.kv span:last-child{font-weight:500}
/* LINE CARD */
.line-card{background:var(--bg3);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;border:1px solid var(--border)}

/* Share/download action buttons: compact old-app style */
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.share-actions .btn{margin-top:0}
@media(max-width:360px){.share-actions{grid-template-columns:1fr}}


/* =========================================================
   CEDAR OLD-LAYOUT LOCK - DO NOT REMOVE
   Preserve the old single-index Cedar frontend while modularizing.
   ========================================================= */

/* 1) Bottom navigation must NEVER become vertical */
.bnav,
#bottomNav,
.bottom-nav,
nav.bnav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 480px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: column !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  z-index: 90 !important;
}

.bnav > *,
#bottomNav > *,
.bottom-nav > *,
nav.bnav > * {
  min-width: 0 !important;
}

.bnav .nb,
#bottomNav .nb,
.bottom-nav .nb,
nav.bnav .nb {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: var(--nav-h, 72px) !important;
  padding: 7px 0 calc(7px + env(safe-area-inset-bottom)) !important;
  gap: 4px !important;
  float: none !important;
  clear: none !important;
  position: relative !important;
}

.bnav .nb svg,
#bottomNav .nb svg {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
}

.bnav .nb span,
#bottomNav .nb span {
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* 2) Scroll area must account for fixed nav */
.scroll,
#scroll,
main.scroll {
  padding-bottom: calc(var(--nav-h, 72px) + env(safe-area-inset-bottom) + 18px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 3) More sheet must match old 3-column grid */
.sh-grid,
#moreGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}

.sh-grid .si,
#moreGrid .si {
  min-height: 94px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.sh-grid .si-ic,
#moreGrid .si-ic {
  font-size: 28px !important;
  line-height: 1 !important;
}

/* 4) Share/download must look like old header icons */
.m-hd,
.modal-header,
.sheet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.m-tools,
.modal-tools,
.sheet-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.share-mini,
.download-mini,
.detail-icon-btn,
.icon-btn.share,
.icon-btn.download {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  background: var(--bg3, rgba(255,255,255,.05)) !important;
  color: var(--ink, #fff) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Hide oversized duplicate download buttons on non-invoice detail sheets */
.download-actions:not(.invoice-actions),
.detail-download-actions:not(.invoice-actions) {
  display: none !important;
}

/* 5) Dark mode consistency */
[data-theme="dark"] .m,
[data-theme="dark"] .sheet,
[data-theme="dark"] .mo,
[data-theme="dark"] .sec,
[data-theme="dark"] .mc,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark !important;
}

@supports(padding:max(0px)){
  .scroll,
  #scroll,
  main.scroll {
    padding-bottom: max(calc(var(--nav-h, 72px) + env(safe-area-inset-bottom) + 18px), 96px) !important;
  }
}

/* =========================================================
   CEDAR POLISH LOCK - OLD APP DETAIL / BANK / EXPORT STYLE
   ========================================================= */
.m-subtitle{font-size:12px;color:var(--ink3);margin-top:2px;text-transform:uppercase;letter-spacing:.02em}
.m-tools{display:flex!important;align-items:center!important;gap:8px!important}
.m-tools .m-close{width:38px!important;height:38px!important;border-radius:50%!important;border:1px solid var(--border)!important;background:var(--bg3)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:17px!important;color:var(--ink3)!important}
.detail-icon-btn,.share-mini,.download-mini{width:38px!important;height:38px!important;border-radius:50%!important;border:1px solid var(--border)!important;background:var(--bg3)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;line-height:1!important;color:var(--ink)!important}
.value-card{border:1px solid rgba(74,166,103,.35);background:rgba(49,132,78,.18);border-radius:18px;padding:16px;margin-bottom:12px}
.value-card .vc-lbl{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
.value-card .vc-val{font-size:26px;font-weight:600;color:var(--accent);letter-spacing:-.04em;margin-top:4px}.value-card .vc-sub{font-size:13px;color:var(--ink3)}
.detail-box{border:1px solid var(--border);border-radius:20px;padding:14px;margin-bottom:12px;background:var(--bg2)}
.detail-box-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}.detail-line{padding:10px 0;border-bottom:1px solid var(--border)}.detail-line:last-child{border-bottom:0}.detail-label{font-size:12px;color:var(--ink3);margin-bottom:2px}.detail-value{font-size:15px;color:var(--ink);font-weight:500}.detail-value.sub{color:var(--ink3);font-size:13px;margin-top:2px}.old-action-btn{width:100%;border:1px solid var(--border);border-radius:18px;background:var(--bg2);color:var(--ink2);padding:15px;font-size:15px;font-weight:600;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.bank-row-old{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1.25fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.bank-row-old:last-child{border-bottom:0}.bank-name-old{font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bank-bar-old{height:5px;border-radius:99px;background:var(--bg3);overflow:hidden}.bank-fill-old{height:100%;border-radius:99px;background:var(--accent)}.bank-fill-old.neg{background:var(--red)}.bank-amt-old{font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}.bank-amt-old.neg{color:var(--red)}
.client-statement{width:794px;min-height:1123px;background:#f7f5f2;color:#171512;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;padding:0}.client-statement .cs-head{background:#2d5a3d;color:white;padding:34px 40px}.client-statement .cs-brand{font-size:34px;font-weight:700}.client-statement .cs-sub{font-size:19px;margin-top:8px}.client-statement .cs-body{padding:32px 40px}.client-statement .cs-title{font-size:34px;font-weight:700;margin-bottom:8px}.client-statement .cs-muted{color:#81786f;font-size:20px;line-height:1.45}.client-statement .cs-box{border:2px solid #ddd8d0;border-radius:12px;background:white;padding:16px 22px;margin:24px 0}.client-statement .cs-label{font-size:18px;font-weight:700;color:#81786f;text-transform:uppercase}.client-statement .cs-val{font-size:30px;font-weight:700;margin-top:6px}.client-statement .green{color:#2d5a3d}.client-statement .amber{color:#8a6500}.client-statement .cs-section{font-size:24px;font-weight:700;margin-top:34px;margin-bottom:18px}.client-statement .cs-row{display:grid;grid-template-columns:1fr auto;gap:16px;font-size:18px;margin:12px 0}.client-statement .cs-foot{position:absolute;bottom:28px;left:40px;color:#81786f;font-size:16px;line-height:1.5}.export-stage{position:fixed;left:-99999px;top:0;z-index:-1;background:#fff}


/* =========================================================
   DASHBOARD POLISH PATCH
   - smaller banks card font
   - smaller bottom nav icons
   - old-style project card proportions
   ========================================================= */

.bank-card .bank-row,
.banks-card .bank-row,
#banksCard .bank-row {
  padding: 10px 0 !important;
  gap: 10px !important;
}

.bank-card .bank-name,
.banks-card .bank-name,
#banksCard .bank-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  max-width: 135px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bank-card .bank-amount,
.banks-card .bank-amount,
#banksCard .bank-amount {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.bank-card .bank-bar,
.banks-card .bank-bar,
#banksCard .bank-bar {
  height: 5px !important;
  border-radius: 999px !important;
  min-width: 95px !important;
}

/* If the banks card was built using generic row classes */
.sec .bank-line,
.sec .bank-item {
  font-size: 14px !important;
}

.sec .bank-line .amt,
.sec .bank-item .amt {
  font-size: 13px !important;
}

/* Bottom nav old-app compact scale */
.bnav .nb svg,
#bottomNav .nb svg,
.bottom-nav .nb svg {
  width: 21px !important;
  height: 21px !important;
}

.bnav .nb span,
#bottomNav .nb span,
.bottom-nav .nb span {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

.bnav .nb,
#bottomNav .nb,
.bottom-nav .nb {
  gap: 3px !important;
  height: var(--nav-h, 68px) !important;
}

/* Old-style dashboard project card */
.project-card,
.projects-card .project-card,
#projectsCard .project-card,
.dashboard-project-card {
  min-height: 118px !important;
  padding: 18px 18px 16px !important;
  border-radius: 22px !important;
}

.project-card .project-title,
.dashboard-project-card .project-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.project-card .project-sub,
.dashboard-project-card .project-sub {
  font-size: 13px !important;
  color: var(--ink3) !important;
}

.project-card .project-amount,
.dashboard-project-card .project-amount {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.project-card .project-status,
.dashboard-project-card .project-status {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}

.project-card .project-progress,
.dashboard-project-card .project-progress {
  height: 6px !important;
  border-radius: 999px !important;
  margin-top: 12px !important;
}

/* Heading should mirror old app greeting */
.pg-title,
.home-title,
.dashboard-title {
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}


/* Workflow registry patch */
.bank-row-old{display:grid!important;grid-template-columns:minmax(120px,160px) 1fr auto!important;gap:10px!important;align-items:center!important;padding:9px 0!important}
.bank-name-old{font-size:14px!important;font-weight:500!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.bank-amt-old{font-size:13px!important;font-weight:600!important;white-space:nowrap!important}
.bank-bar-old{height:5px!important;border-radius:999px!important;overflow:hidden!important;background:rgba(255,255,255,.035)!important}
.bank-fill-old{height:100%!important;border-radius:999px!important;background:var(--accent)!important}.bank-fill-old.neg{background:var(--red)!important}.bank-amt-old.neg{color:var(--red)!important}
.detail-icon-btn{width:38px!important;height:38px!important;border-radius:50%!important;font-size:18px!important}
.dashboard-project-card{border-bottom:1px solid var(--border);padding:12px 0;cursor:pointer}.dashboard-project-card:last-child{border-bottom:0}.project-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.project-title{font-size:17px;font-weight:500}.project-sub{font-size:12px;color:var(--ink3);margin-top:2px}.project-side{text-align:right}.project-amount{font-size:14px;font-weight:600}.project-progress{height:6px;border-radius:99px;background:var(--bg3);margin-top:10px;overflow:hidden;max-width:110px}.project-progress>div{height:100%;background:var(--red);border-radius:99px}


/* =========================================================
   PAGE COMPLETION PATCH
   Profitability, Salary, Expenses, Items, Payables
   ========================================================= */
.profit-good{color:var(--green,#4CAF7A)!important}
.profit-bad{color:var(--red,#e06060)!important}
.small-action-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.small-action-row .chip{cursor:pointer}
.payee-name,.supplier-name{font-weight:500!important}
.registry-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--border)}
.registry-row:last-child{border-bottom:none}
.registry-row-title{font-size:16px;font-weight:500;color:var(--ink)}
.registry-row-sub{font-size:13px;color:var(--ink3);margin-top:2px}
.registry-row-actions{display:flex;gap:6px}
.mini-danger{background:var(--red-bg,rgba(255,0,0,.12))!important;color:var(--red,#e06060)!important;border:1px solid rgba(255,0,0,.12)!important}


/* =========================================================
   PRE-UPLOAD FIX PATCH
   Old popup forms + CEO-only invoice + compact page polish
   ========================================================= */

.old-sheet-form .fg{gap:12px!important}
.old-sheet-form .ff label{letter-spacing:.11em!important}
.old-sheet-form .ff input,
.old-sheet-form .ff select,
.old-sheet-form .ff textarea{
  min-height:50px!important;
}
.old-sheet-form .readonly-green{
  background:var(--green-bg,rgba(45,150,90,.15))!important;
  color:var(--green,#4CAF7A)!important;
  font-weight:600!important;
}
.old-sheet-form .full-btn{
  margin-top:14px!important;
  height:56px!important;
  border-radius:14px!important;
}
.loan-summary-pill{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.invoice-only-ceo-hidden{display:none!important}
.project-cost-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin:14px 0!important;
}
.project-cost-box{
  border-radius:14px!important;
  padding:12px 8px!important;
  text-align:center!important;
  background:var(--bg3)!important;
}
.project-cost-box .lbl{
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  color:var(--ink3)!important;
  font-weight:700!important;
}
.project-cost-box .val{
  font-size:14px!important;
  margin-top:6px!important;
  font-weight:600!important;
}
@media(max-width:380px){
  .project-cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* LOGIN SUBTITLE REMOVED */
.login-tag{display:none!important}


/* =========================================================
   PROJECT + INVOICE FIX PATCH
   ========================================================= */

/* Dashboard project card: compact like old app */
.dashboard-project-card,
.project-card,
#projectsCard .project-card,
.projects-card .project-card,
.sec.projects .project-card,
.home-project-card {
  min-height: 92px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

.dashboard-project-card .project-title,
.project-card .project-title,
.home-project-card .project-title {
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
}

.dashboard-project-card .project-sub,
.project-card .project-sub,
.home-project-card .project-sub {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.dashboard-project-card .project-amount,
.project-card .project-amount,
.home-project-card .project-amount {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.dashboard-project-card .project-status,
.project-card .project-status,
.home-project-card .project-status {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.dashboard-project-card .project-progress,
.project-card .project-progress,
.home-project-card .project-progress,
.project-card .pbar {
  height: 5px !important;
  margin-top: 8px !important;
}

/* Project detail: old app readable section layout */
.project-detail-old .metrics {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}

.project-detail-old .mc {
  min-height: 78px !important;
  padding: 12px 13px !important;
  border-radius: 16px !important;
}

.project-detail-old .mc-lbl {
  font-size: 10px !important;
}

.project-detail-old .mc-val {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.project-detail-old .project-cost-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 8px !important;
}

.project-detail-old .project-cost-box {
  min-height: 66px !important;
  padding: 10px 6px !important;
}

.project-detail-old .project-cost-box .lbl {
  font-size: 9px !important;
}

.project-detail-old .project-cost-box .val {
  font-size: 13px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.project-detail-old .sec-hd {
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
}

.project-detail-old .ri {
  min-height: 58px !important;
  padding: 9px 0 !important;
}

.project-detail-old .ri-t {
  font-size: 15px !important;
}

.project-detail-old .ri-s {
  font-size: 12px !important;
}

.project-detail-old .ri-amt {
  font-size: 14px !important;
}

/* Fix "ETB by number" wrapping */
.money-nowrap,
.ri-amt,
.mc-val,
.project-cost-box .val {
  white-space: nowrap !important;
}

/* invoice error message should not cover bottom */
#inv-msg, .invoice-error {
  margin-bottom: 16px !important;
}

@media(max-width:390px){
  .project-detail-old .project-cost-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ===== Cedar module audit patch: real project/card/pages fixes ===== */
.project-list{display:flex;flex-direction:column;gap:10px}
.project-list-card{background:var(--bg2);border:1px solid var(--border);border-radius:22px;padding:16px;cursor:pointer}
.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.project-card-title{font-size:17px;font-weight:600;color:var(--ink);line-height:1.2}
.project-card-sub{font-size:12px;color:var(--ink3);margin-top:4px}
.project-card-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.mini-edit{border:1px solid var(--border);background:var(--bg3);color:var(--ink3);border-radius:999px;padding:6px 14px;font:inherit;font-size:12px;font-weight:600}
.project-card-money{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.project-card-money span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);font-weight:700;margin-bottom:6px}
.project-card-money b{display:block;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink)}
.project-card-progress{display:flex;justify-content:space-between;color:var(--ink3);font-size:12px;margin-bottom:6px}
.dashboard-project-card{min-height:82px!important;padding:12px 14px!important;border-radius:18px!important}
.dashboard-project-card .project-title{font-size:15px!important;font-weight:600!important;line-height:1.15!important}
.dashboard-project-card .project-sub{font-size:11px!important;line-height:1.2!important}
.dashboard-project-card .project-amount{font-size:13px!important;font-weight:600!important;white-space:nowrap!important}
.dashboard-project-card .project-progress{height:5px!important;margin-top:8px!important;background:var(--bg3);border-radius:999px;overflow:hidden}
.dashboard-project-card .project-progress div{height:100%;background:var(--red);border-radius:999px}
.project-detail-old .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.project-detail-old .mc{min-height:80px!important;padding:13px 14px!important;border-radius:16px!important}
.project-detail-old .mc-val{font-size:18px!important;white-space:nowrap!important}
.project-cost-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:16px 0 12px!important}
.project-cost-box{border-radius:15px;padding:12px 6px;min-height:68px;text-align:center;background:var(--bg3)}
.project-cost-box .lbl{font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink3)}
.project-cost-box .val{font-size:13px;font-weight:600;margin-top:7px;white-space:nowrap;line-height:1.15}
.project-cost-box.labor{background:rgba(180,40,40,.16)}.project-cost-box.material{background:rgba(180,125,0,.16)}.project-cost-box.other{background:rgba(35,95,180,.16)}.project-cost-box.total{background:rgba(255,255,255,.035)}
.section-note{font-size:13px;color:var(--ink3);line-height:1.35;margin:6px 0 16px}
.project-detail-actions{display:flex;justify-content:center;gap:10px;margin:20px 0}
.danger-link{color:var(--red)!important;border-color:rgba(224,96,96,.25)!important}
@media(max-width:390px){.project-cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.project-card-money{grid-template-columns:repeat(3,1fr)}}

/* Cashflow clickable detail patch */
.ri.clickable{cursor:pointer;}
.ri.clickable:active{transform:scale(.995);opacity:.88;}
.cashflow-detail-card .kv span:last-child{text-align:right;max-width:58%;overflow-wrap:anywhere;}
.cashflow-detail-card .kv{gap:12px;}

/* Project card compact enforcement */
.dashboard-project-card,.home-project-card,#projectsCard .project-card,.projects-card .project-card{min-height:86px!important;padding:13px 16px!important;border-radius:18px!important;}
.dashboard-project-card .project-title,.home-project-card .project-title,.project-card .project-title{font-size:15px!important;line-height:1.15!important;font-weight:500!important;}
.dashboard-project-card .project-sub,.home-project-card .project-sub,.project-card .project-sub{font-size:12px!important;line-height:1.25!important;}
.dashboard-project-card .project-amount,.home-project-card .project-amount,.project-card .project-amount{font-size:14px!important;font-weight:600!important;}
.dashboard-project-card .project-status,.home-project-card .project-status,.project-card .project-status{font-size:11px!important;padding:4px 10px!important;}