/* ===================================================================
   BisenLedger — design system
   Desktop / laptop / tablet: sidebar + topbar.
   Mobile (<=768px): app-like — slide-in drawer + fixed bottom nav + FAB.
   =================================================================== */
:root{
  --navy:#16314F; --accent:#185FA5; --accent-700:#0C447C; --accent-50:#E6F1FB;
  --gold:#B0892F; --amber:#854F0B; --amber-50:#FAEEDA;
  --green:#0F6E56; --green-50:#E1F5EE; --green-ink:#04342C;
  --red:#A32D2D; --red-50:#FCEBEB;
  --ink:#1C2733; --muted:#5C6B7A; --faint:#8A97A4;
  --line:#E3E9F0; --line2:#CFD9E4; --bg:#EEF2F6; --card:#FFFFFF; --sec:#F3F7FB;
  --r-sm:6px; --r-md:9px; --r-lg:13px;
  --sidebar-w:240px;
  --shadow:0 1px 2px rgba(16,40,70,.06);
  --shadow-pop:0 8px 30px rgba(16,40,70,.16);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.ti{line-height:1;}

/* ---------- Brand logo ---------- */
.logo{width:34px;height:34px;border-radius:var(--r-md);background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;flex:none;}
.logo.lg{width:44px;height:44px;font-size:22px;}

/* ===================== APP SHELL ===================== */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;}
.app-main{min-width:0;display:flex;flex-direction:column;}
.app-content{padding:20px 24px 40px;max-width:1180px;width:100%;margin:0 auto;}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:16px 16px;border-bottom:1px solid var(--line);}
.brand-name{font-size:17px;font-weight:600;color:var(--navy);}
.sidebar-nav{flex:1;overflow-y:auto;padding:10px 10px;display:flex;flex-direction:column;gap:2px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);color:var(--muted);font-size:14px;}
.nav-item .ti{font-size:19px;}
.nav-item:hover{background:var(--sec);color:var(--ink);}
.nav-item.on{background:var(--accent-50);color:var(--accent-700);font-weight:600;}
.nav-item.locked{opacity:.55;cursor:default;}
.nav-item.locked:hover{background:none;color:var(--muted);}
.nav-item .lock{margin-left:auto;font-size:14px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);padding:14px 12px 4px;}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line);}
.who{min-width:0;flex:1;}
.who-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.who-role{font-size:11px;color:var(--faint);}
.logout{width:32px;height:32px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;}
.logout:hover{background:var(--red-50);color:var(--red);}

.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;}
.avatar.is-admin{background:var(--green-50);color:var(--green);}
.avatar.is-manager{background:var(--amber-50);color:var(--amber);}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:11px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.topbar-title{font-size:16px;font-weight:600;color:var(--ink);}
.menu-toggle{display:none;}
.topbar-search{margin-left:auto;position:relative;width:min(280px,32vw);}
.topbar-search .ti{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:16px;}
.topbar-search input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--line2);border-radius:var(--r-md);font-size:13px;background:var(--sec);outline:none;}
.topbar-search input:focus{border-color:var(--accent);background:#fff;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.icon-btn{position:relative;width:38px;height:38px;border:none;background:transparent;border-radius:var(--r-md);color:var(--muted);font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.icon-btn:hover{background:var(--sec);color:var(--ink);}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red);}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.page-title{font-size:20px;font-weight:600;margin:0;color:var(--ink);}
.page-sub{font-size:13px;color:var(--muted);margin:3px 0 0;}

/* ---------- Cards / metrics ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px;}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow);}
.metric-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.metric-label .ti{font-size:15px;}
.metric-value{font-size:24px;font-weight:600;line-height:1.1;}

.welcome{display:flex;gap:14px;align-items:flex-start;}
.welcome-icon{width:42px;height:42px;border-radius:var(--r-md);background:var(--accent-50);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:22px;flex:none;}
.welcome-title{font-size:15px;font-weight:600;margin-bottom:4px;}
.welcome-text{font-size:13px;color:var(--muted);margin:0;}

/* ---------- Buttons ---------- */
.btn-primary,.btn-amber{border:none;border-radius:var(--r-md);padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#13518f;}
.btn-amber{background:var(--amber);color:#fff;}
.btn-amber:hover{background:#6f4109;}
.btn-block{width:100%;}

/* ---------- Forms ---------- */
.field-label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px;}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line2);border-radius:var(--r-md);padding:10px 12px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,95,165,.13);}
.field-icon{position:relative;margin-bottom:14px;}
.field-icon>.ti{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:18px;}
.field-icon input{padding-left:38px;}
.field-icon .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--faint);cursor:pointer;font-size:18px;padding:4px;}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;}
.check input{width:15px;height:15px;accent-color:var(--accent);}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:9px;border-radius:var(--r-md);padding:11px 14px;font-size:13px;margin-bottom:14px;}
.flash .ti{font-size:18px;}
.flash-success{background:var(--green-50);color:var(--green-ink);}
.flash-error{background:var(--red-50);color:var(--red);}
.flash-info{background:var(--accent-50);color:var(--accent-700);}

/* ---------- Error page ---------- */
.error-page{text-align:center;padding:60px 20px;}
.error-code{font-size:54px;font-weight:700;color:var(--navy);}
.error-title{font-size:18px;font-weight:600;margin-top:6px;}
.error-text{font-size:14px;color:var(--muted);margin:6px 0 18px;}

/* ===================== AUTH SCREENS ===================== */
.auth-body{background:linear-gradient(180deg,#F4F7FB 0%,var(--bg) 100%);min-height:100vh;}
.auth-wrap{max-width:430px;margin:0 auto;padding:42px 18px 60px;}
.auth-card-wrap{display:flex;flex-direction:column;gap:18px;}
.auth-brand{display:flex;align-items:center;gap:12px;justify-content:center;}
.auth-brand-name{font-size:18px;font-weight:600;color:var(--navy);}
.auth-brand-sub{font-size:12px;color:var(--muted);}
.auth-steps{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--muted);}
.step{display:inline-flex;align-items:center;gap:6px;}
.step.on{color:var(--accent-700);font-weight:600;}
.step.on.amber{color:var(--amber);}
.step-no{width:18px;height:18px;border-radius:50%;background:var(--sec);border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.step.on .step-no{background:var(--accent);color:#fff;border-color:var(--accent);}
.step.on.amber .step-no{background:var(--amber);color:#fff;border-color:var(--amber);}
.step.done .step-no{background:var(--green);color:#fff;border-color:var(--green);}
.step-line{width:26px;height:1px;background:var(--line2);}
.step-line.on{background:var(--green);}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-pop);}
.auth-title{font-size:17px;font-weight:600;margin:0 0 3px;}
.auth-desc{font-size:13px;color:var(--muted);margin:0 0 18px;}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px;}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:16px;font-size:11px;color:var(--faint);flex-wrap:wrap;}
.auth-foot .ti{font-size:14px;vertical-align:-2px;margin-right:3px;}
.auth-link{display:block;text-align:center;font-size:12px;color:var(--accent);margin-top:14px;}
.passcode-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.passcode-shield{width:38px;height:38px;border-radius:var(--r-md);background:var(--amber-50);color:var(--amber);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:none;}

/* ===================== MOBILE BOTTOM NAV + SHEET ===================== */
.bottomnav{display:none;}
.bnav-fab{display:none;}
.sheet{display:none;}
.scrim{display:none;}

/* ===================== RESPONSIVE ===================== */
/* Tablet: keep the shell, slightly tighter content. */
@media (max-width:1024px){
  :root{--sidebar-w:208px;}
  .app-content{padding:18px 18px 40px;}
  .topbar{padding:11px 18px;}
}

/* Mobile: app-like. Drawer sidebar + fixed bottom nav + FAB. */
@media (max-width:768px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{position:fixed;top:0;left:0;z-index:60;width:268px;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-pop);}
  .app-body.drawer-open .sidebar{transform:translateX(0);}
  .menu-toggle{display:inline-flex;}
  .topbar{position:sticky;top:0;}
  .topbar-title{font-size:17px;}
  .topbar-search{display:none;}
  .app-content{padding:16px 14px calc(78px + env(safe-area-inset-bottom));}
  .page-title{font-size:19px;}

  /* Scrim behind drawer */
  .scrim{display:block;position:fixed;inset:0;background:rgba(12,24,40,.45);z-index:55;}
  .app-body:not(.drawer-open) .scrim{display:none;}

  /* Bottom nav */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--card);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:center;box-shadow:0 -2px 14px rgba(16,40,70,.08);}
  .bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--faint);flex:1;padding:4px 0;}
  .bnav-item .ti{font-size:22px;}
  .bnav-item.on{color:var(--accent);}
  .bnav-fab{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-22px;
    border:none;border-radius:50%;background:var(--accent);color:#fff;font-size:26px;
    box-shadow:0 6px 18px rgba(24,95,165,.4);cursor:pointer;}

  /* Quick-add sheet */
  .sheet{display:block;position:fixed;inset:0;z-index:70;background:rgba(12,24,40,.45);}
  .sheet[hidden]{display:none;}
  .sheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--card);
    border-radius:18px 18px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));
    animation:sheetUp .2s ease;}
  @keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:6px auto 12px;}
  .sheet-title{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;}
  .sheet-action{display:flex;align-items:center;gap:12px;padding:14px 8px;font-size:15px;border-bottom:1px solid var(--line);}
  .sheet-action .ti{font-size:21px;color:var(--accent);}
  .sheet-cancel{width:100%;margin-top:12px;padding:13px;border:1px solid var(--line2);background:var(--sec);border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;}

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

@media (max-width:380px){
  .metric-grid{grid-template-columns:1fr;}
}