:root{
  color-scheme:light;
  /* PBJ logo palette: navy, royal blue, cyan, red */
  --bg:#f3f8fc;
  --surface:#ffffff;
  --surface-2:#f7fbfe;
  --surface-3:#eaf5fc;
  --text:#0b2340;
  --muted:#62778d;
  --border:#d6e5f1;
  --border-soft:#e8f0f7;
  --primary:#0a65b2;
  --primary-strong:#063f88;
  --primary-soft:#e4f3fc;
  --accent:#059cdc;
  --accent-strong:#0284c7;
  --accent-soft:#e4f7fd;
  --brand-navy:#022463;
  --brand-blue:#0a65b2;
  --brand-cyan:#05a4df;
  --brand-sky:#3bbbe8;
  --brand-red:#cb0916;
  --sidebar:#021936;
  --sidebar-2:#063f88;
  --sidebar-3:#0a65b2;
  --sidebar-text:#edf7ff;
  --sidebar-muted:#a9c7df;
  --danger:#c80f1c;
  --danger-soft:#fff0f1;
  --warning:#b86b08;
  --warning-soft:#fff6df;
  --success:#087f5b;
  --success-soft:#e7f7f1;
  --shadow-sm:0 1px 3px rgba(2,36,99,.07);
  --shadow:0 10px 30px rgba(2,36,99,.09);
  --shadow-lg:0 24px 70px rgba(2,36,99,.16);
  --radius:16px;
  --sidebar-width:268px;
  --sidebar-collapsed:84px;
  --top-height:78px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#06111f;
  --surface:#0b192a;
  --surface-2:#0e2035;
  --surface-3:#122b46;
  --text:#eef7ff;
  --muted:#9db4c9;
  --border:#1d3a58;
  --border-soft:#17314c;
  --primary:#38bdf8;
  --primary-strong:#7dd3fc;
  --primary-soft:#0c2c45;
  --accent:#19a7e0;
  --accent-strong:#38bdf8;
  --accent-soft:#0c2c45;
  --brand-navy:#031b47;
  --brand-blue:#0a65b2;
  --brand-cyan:#21b7ee;
  --brand-sky:#6ed8f7;
  --brand-red:#ff4752;
  --sidebar:#020a16;
  --sidebar-2:#031f4f;
  --sidebar-3:#07548f;
  --sidebar-text:#f0f8ff;
  --sidebar-muted:#91b2cd;
  --danger:#ff6973;
  --danger-soft:#3a1620;
  --warning:#f7c65d;
  --warning-soft:#352a13;
  --success:#4fd1a1;
  --success-soft:#103329;
  --shadow-sm:0 1px 3px rgba(0,0,0,.28);
  --shadow:0 12px 36px rgba(0,0,0,.28);
  --shadow-lg:0 28px 80px rgba(0,0,0,.46);
}


*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease}
button,input,select,textarea{font:inherit}
a{color:var(--primary);text-underline-offset:3px}
svg.icon{width:20px;height:20px;display:block;flex:none}

.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns .22s ease}
.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--sidebar-width);background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:var(--sidebar-text);display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid rgba(255,255,255,.04);transition:width .22s ease,transform .25s ease;overflow:hidden}
.sidebar-head{min-height:58px;display:flex;align-items:center;gap:11px;padding:4px 6px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#2dd4bf,#0f766e);color:#fff;font-size:14px;font-weight:850;letter-spacing:.04em;box-shadow:0 7px 18px rgba(45,212,191,.2)}
.brand{min-width:0;flex:1;white-space:nowrap;overflow:hidden}
.brand strong{display:block;font-size:15px;font-weight:780;color:#fff;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:var(--sidebar-muted);font-size:11px;margin-top:2px;letter-spacing:.025em}
.sidebar-collapse{width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.07);color:var(--sidebar-muted);display:grid;place-items:center;cursor:pointer;transition:.18s ease}
.sidebar-collapse:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar-collapse .icon{width:17px;height:17px}
.main-nav{display:flex;flex-direction:column;gap:6px;padding:20px 0;flex:1;overflow-y:auto;scrollbar-width:thin}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 13px;border-radius:12px;color:var(--sidebar-text);text-decoration:none;font-weight:620;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav-link .icon{color:var(--sidebar-muted)}
.nav-link:hover{background:rgba(255,255,255,.075);color:#fff;transform:translateX(1px)}
.nav-link.active{background:linear-gradient(90deg,rgba(45,212,191,.19),rgba(45,212,191,.08));color:#fff;box-shadow:inset 3px 0 0 #2dd4bf}
.nav-link.active .icon{color:#5eead4}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.user-card{display:flex;align-items:center;gap:10px;padding:5px 8px 13px;min-width:0}
.avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(45,212,191,.14);color:#8ff3e3;font-weight:800;font-size:12px;border:1px solid rgba(94,234,212,.18)}
.avatar.small{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);border-color:var(--border);color:var(--primary)}
.user-meta{display:flex;flex-direction:column;min-width:0;white-space:nowrap;overflow:hidden}
.user-meta strong{font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.user-meta span{font-size:10px;color:var(--sidebar-muted);letter-spacing:.06em;margin-top:1px}
.logout-link{color:#f1c5c5;margin-top:2px}
.logout-link .icon{color:#dda8a8}
.sidebar-backdrop{display:none}

.main{grid-column:2;min-width:0;min-height:100vh}
.top{height:var(--top-height);position:sticky;top:0;z-index:35;background:color-mix(in srgb,var(--surface) 89%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(18px,2.4vw,34px)}
.top-left,.top-actions{display:flex;align-items:center;gap:12px;min-width:0}
.page-heading{min-width:0}
.eyebrow{display:block;color:var(--primary);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;margin-bottom:1px}
.top h1{font-size:clamp(19px,2vw,24px);line-height:1.2;margin:0;font-weight:780;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-icon{width:40px;height:40px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.mobile-menu{display:none}
.theme-toggle{height:40px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 13px;border-radius:12px;cursor:pointer;font-weight:650;box-shadow:var(--shadow-sm);transition:.18s ease}
.theme-toggle:hover,.top-icon:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--border));background:var(--surface-2)}
.theme-toggle .icon{width:17px;height:17px}
.theme-icon{display:none}
html[data-theme="light"] .theme-icon-moon{display:block}
html[data-theme="dark"] .theme-icon-sun{display:block}
.theme-toggle.icon-only{width:42px;padding:0;justify-content:center}
.top-user{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--border)}
.top-user>div:last-child{display:flex;flex-direction:column;line-height:1.25}
.top-user strong{font-size:12px;font-weight:750}
.top-user span{font-size:10px;color:var(--muted);margin-top:2px}
.content{padding:clamp(16px,2.2vw,30px);max-width:1720px;width:100%;margin:0 auto}

.app.sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}
.app.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}
.app.sidebar-collapsed .brand,.app.sidebar-collapsed .user-meta,.app.sidebar-collapsed .nav-link span{opacity:0;width:0;pointer-events:none}
.app.sidebar-collapsed .sidebar-head{justify-content:center;padding-left:0;padding-right:0}
.app.sidebar-collapsed .brand-mark{width:42px}
.app.sidebar-collapsed .sidebar-collapse{position:absolute;right:-13px;top:31px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow)}
.app.sidebar-collapsed .sidebar-collapse .icon{transform:rotate(180deg)}
.app.sidebar-collapsed .nav-link{justify-content:center;padding:0}
.app.sidebar-collapsed .nav-link.active{box-shadow:none;background:rgba(45,212,191,.17)}
.app.sidebar-collapsed .user-card{justify-content:center;padding-left:0;padding-right:0}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;min-height:126px;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 24%,var(--border));box-shadow:var(--shadow)}
.kpi::after{content:"";position:absolute;inset:auto -24px -40px auto;width:100px;height:100px;border-radius:50%;background:var(--primary-soft);opacity:.55;pointer-events:none}
.kpi-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-icon{width:38px;height:38px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.kpi-icon .icon{width:19px;height:19px}
.kpi span{display:block;color:var(--muted);font-weight:650;font-size:12px}
.kpi strong{position:relative;z-index:1;display:block;font-size:clamp(20px,2vw,27px);line-height:1.1;margin:14px 0 6px;color:var(--text);font-weight:800;letter-spacing:-.025em}
.kpi small{position:relative;z-index:1;color:var(--muted);font-size:11px}
.small-kpis .kpi{min-height:104px;padding:16px}
.small-kpis .kpi strong{font-size:21px;margin-top:12px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.grid2.unequal{grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,1.8vw,22px);margin-bottom:16px;box-shadow:var(--shadow-sm)}
.card h2{font-size:17px;line-height:1.3;margin:0 0 15px;font-weight:760;letter-spacing:-.012em}
.card h3{font-size:14px;margin:22px 0 9px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.card-head h2{margin-bottom:10px}
.card-head a{font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;padding:5px 0}
.card-head a:hover{text-decoration:underline}
.hint,.muted{color:var(--muted)}

.tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;padding:2px 1px}.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;text-decoration:none;background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:9px 14px;border-radius:11px;font-weight:700;box-shadow:var(--shadow-sm);transition:.18s ease}
.tab:hover{color:var(--text);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 25%,transparent)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px}
label{display:block;font-weight:680;margin:0 0 13px;color:var(--text);font-size:12px}
input,select,textarea{width:100%;font:inherit;margin-top:6px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);background:var(--surface)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
textarea{resize:vertical;min-height:88px}
.check{display:flex;align-items:center;gap:8px;font-weight:550}.check input{width:auto;margin:0;accent-color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border:1px solid transparent;background:var(--primary);color:#fff;padding:9px 15px;border-radius:11px;text-decoration:none;font-weight:750;cursor:pointer;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 20%,transparent);transition:.18s ease}
.btn:hover{background:var(--primary-strong);transform:translateY(-1px)}
.btn.secondary{background:var(--surface-3);color:var(--text);border-color:var(--border);box-shadow:none}.btn.secondary:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
.btn.wide{width:100%;margin-top:8px}
.icon-btn{border:1px solid color-mix(in srgb,var(--danger) 22%,var(--border));background:var(--danger-soft);color:var(--danger);border-radius:9px;width:34px;height:34px;cursor:pointer}

.table-wrap{width:100%;overflow-x:auto;border-radius:12px;border:1px solid var(--border-soft);scrollbar-width:thin;background:var(--surface)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top}
th{position:sticky;top:0;z-index:1;font-size:10px;text-transform:uppercase;letter-spacing:.065em;color:var(--muted);background:var(--surface-2);font-weight:800}
tbody tr{transition:background .15s ease}tbody tr:hover{background:color-mix(in srgb,var(--primary-soft) 45%,transparent)}
tbody tr:last-child td{border-bottom:0}td small{color:var(--muted)}
.badge{display:inline-flex;align-items:center;padding:4px 8px;background:var(--surface-3);border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em}.badge.ok{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}.badge.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 15%,transparent);color:var(--warning)}
.positive{color:var(--success)}.negative{color:var(--danger)}

.alert{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:12px;margin-bottom:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}.alert .icon{width:18px;height:18px;margin-top:1px}.alert.success{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 18%,transparent);color:var(--success)}.alert.error{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}.alert.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 18%,transparent);color:var(--warning)}
.filters{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.filters form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.filters label{margin:0;min-width:150px}.filters .btn{margin-bottom:0}
.cost-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:9px;margin-bottom:9px}.cost-lines{margin-top:8px}
.calc-box{margin:14px 0;padding:15px;border-radius:13px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border))}.calc-box span,.calc-box small{display:block;color:var(--muted)}.calc-box strong{display:block;font-size:19px;margin:5px 0;color:var(--text)}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 28%),radial-gradient(circle at 90% 85%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 26%)}
.login-card{width:min(430px,100%);background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-radius:22px;padding:34px;box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.login-card h1{text-align:center;margin:12px 0 5px;font-size:24px;letter-spacing:-.02em}.login-card>p{text-align:center;color:var(--muted);margin:0 0 23px}.login-logo{width:62px;height:62px;border-radius:19px;background:linear-gradient(135deg,#2dd4bf,#0f766e);color:#fff;display:grid;place-items:center;font-weight:850;margin:auto;box-shadow:0 13px 30px rgba(15,118,110,.28)}
.login-theme{position:fixed;z-index:10;right:18px;top:18px}

@media(max-width:1200px){
  :root{--sidebar-width:240px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid2.unequal{grid-template-columns:1fr}
}

@media(max-width:900px){
  .app,.app.sidebar-collapsed{display:block}
  .main{grid-column:auto}
  .sidebar,.app.sidebar-collapsed .sidebar{width:min(300px,86vw);transform:translateX(-105%);box-shadow:var(--shadow-lg)}
  body.sidebar-open{overflow:hidden}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;z-index:45;inset:0;background:rgba(1,10,8,.48);opacity:0;visibility:hidden;transition:.2s ease;backdrop-filter:blur(2px)}
  body.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
  .sidebar-collapse{display:none}
  .app.sidebar-collapsed .brand,.app.sidebar-collapsed .user-meta,.app.sidebar-collapsed .nav-link span{opacity:1;width:auto;pointer-events:auto}
  .app.sidebar-collapsed .nav-link{justify-content:flex-start;padding:0 13px}
  .app.sidebar-collapsed .user-card{justify-content:flex-start;padding:5px 8px 13px}
  .mobile-menu{display:grid}
  .top{height:70px;padding-inline:14px}
  .content{padding:16px}
  .top-user{display:none}
}

@media(max-width:640px){
  .kpis{grid-template-columns:1fr;gap:11px}
  .kpi,.small-kpis .kpi{min-height:108px;padding:15px}
  .kpi strong{font-size:23px;margin-top:10px}
  .grid2{gap:11px}
  .card{border-radius:14px;padding:14px;margin-bottom:12px}
  .card-head{align-items:center}.card-head h2{font-size:15px}
  .form-grid{grid-template-columns:1fr;gap:3px}
  .cost-row{grid-template-columns:1fr}
  .theme-toggle:not(.icon-only){width:40px;padding:0;justify-content:center}.theme-toggle:not(.icon-only) .theme-text{display:none}
  .eyebrow{display:none}
  .top h1{font-size:19px}
  .tabs{margin-inline:-2px;padding-bottom:3px}
  .tab{padding:8px 12px;font-size:12px}
  .filters form{display:grid;grid-template-columns:1fr;width:100%}.filters label{min-width:0}.filters .btn{width:100%}
  .login-card{padding:25px 20px;border-radius:18px}
}

@media(max-width:390px){
  .content{padding:12px}
  .top{padding-inline:10px;gap:8px}
  .top-left,.top-actions{gap:8px}
  .top-icon,.theme-toggle{width:38px;height:38px}
  .page-heading{max-width:58vw}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ========================================================================== */
/* V2.2.0 - Responsive mobile, compact data panels, theme + language controls */
/* ========================================================================== */

/* Compact display controls */
.segmented{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  min-height:40px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  flex:none;
}
.segmented button{
  min-width:34px;
  height:32px;
  border:0;
  border-radius:9px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:750;
  font-size:11px;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.segmented button:hover{color:var(--text);background:var(--surface-2)}
.segmented button.active{
  color:var(--primary);
  background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent);
}
.segmented button .icon{width:16px;height:16px}
.language-segment button{min-width:35px;padding-inline:8px;letter-spacing:.03em}
.display-controls{display:flex;align-items:center;gap:8px}

/* Scroll stays inside data/list panels instead of making the full page huge. */
.table-wrap,
.data-scroll-panel{
  width:100%;
  max-width:100%;
  max-height:min(460px,52vh);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 45%,var(--border)) var(--surface-2);
}
.table-wrap::-webkit-scrollbar,.data-scroll-panel::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-track,.data-scroll-panel::-webkit-scrollbar-track{background:var(--surface-2);border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb,.data-scroll-panel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 42%,var(--border));border-radius:999px;border:2px solid var(--surface-2)}
.table-wrap:focus,.data-scroll-panel:focus{outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:2px}
.table-wrap table,.data-scroll-panel table{margin:0}
.table-wrap th,.data-scroll-panel th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--border-soft)}

/* Keep long values usable in compact cards. */
.kpi{min-width:0}
.kpi strong{overflow-wrap:anywhere}
.card{min-width:0}

/* Better touch targets and wrapping for forms. */
input,select,textarea,.btn{min-width:0}
.form-grid>*{min-width:0}
.tabs{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

@media(max-width:900px){
  .top-actions{gap:7px}
  .segmented{min-height:38px;padding:2px}
  .segmented button{height:32px}
  .content{overflow-x:hidden}
  .table-wrap,.data-scroll-panel{max-height:min(420px,50vh)}
}

@media(max-width:640px){
  /* Two KPI columns reduce dashboard height substantially on phones. */
  .kpis,.small-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}
  .kpi,.small-kpis .kpi{min-height:96px;padding:12px;border-radius:13px}
  .kpi-head{align-items:flex-start;gap:5px}
  .kpi-icon{width:31px;height:31px;border-radius:9px}
  .kpi-icon .icon{width:16px;height:16px}
  .kpi span{font-size:10px;line-height:1.25;max-width:calc(100% - 34px)}
  .kpi strong,.small-kpis .kpi strong{font-size:17px;line-height:1.15;margin:9px 0 3px;letter-spacing:-.02em}
  .kpi small{font-size:9.5px;line-height:1.25}

  .top{height:64px;padding-inline:9px;gap:7px}
  .top-left{gap:7px;min-width:0;flex:1}
  .top-actions{gap:5px;flex:none}
  .top-icon{width:37px;height:37px;border-radius:10px}
  .page-heading{min-width:0;max-width:100%}
  .top h1{font-size:16px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mode-label{display:none}
  .theme-segment button{width:31px;min-width:31px;padding:0}
  .language-segment button{width:30px;min-width:30px;padding:0;font-size:10px}
  .segmented{min-height:37px;border-radius:10px}

  .content{padding:10px}
  .grid2,.grid2.unequal{gap:10px;margin-bottom:10px}
  .card{padding:12px;border-radius:13px;margin-bottom:10px}
  .card h2{font-size:14px;margin-bottom:11px}
  .card-head{gap:8px}
  .card-head a{font-size:10.5px}

  /* Tables remain local scroll areas: horizontal for columns, vertical for rows. */
  .table-wrap,.data-scroll-panel{
    max-height:320px;
    border-radius:10px;
  }
  table{min-width:590px;font-size:11px}
  th,td{padding:9px 10px;line-height:1.35}
  th{font-size:9px}

  .tabs{gap:5px;margin-bottom:12px}
  .tab{padding:8px 10px;font-size:11px;border-radius:9px}
  label{font-size:11px;margin-bottom:10px}
  input,select,textarea{padding:9px 10px;border-radius:9px;font-size:13px}
  .btn{min-height:38px;padding:8px 12px;border-radius:9px;font-size:12px}
  .filters{padding:11px;border-radius:12px}
}

@media(max-width:380px){
  .top{padding-inline:7px}
  .top-left{gap:5px}
  .top-actions{gap:4px}
  .top-icon{width:35px;height:35px}
  .segmented{min-height:35px;padding:2px}
  .segmented button{height:29px}
  .theme-segment button{width:28px;min-width:28px}
  .language-segment button{width:27px;min-width:27px}
  .top h1{font-size:15px}
  .content{padding:8px}
  .kpis,.small-kpis{gap:7px}
  .kpi,.small-kpis .kpi{padding:10px;min-height:91px}
  .kpi strong,.small-kpis .kpi strong{font-size:15.5px}
  .table-wrap,.data-scroll-panel{max-height:300px}
}
.language-segment button{min-width:auto}
.lang-short{font-weight:850}
.lang-label{font-weight:650}
@media(max-width:640px){
  .lang-label{display:none}
  .language-segment button{width:30px;min-width:30px;padding:0}
}
@media(max-width:380px){
  .language-segment button{width:27px;min-width:27px}
}

/* ========================================================================== */
/* V2.3 - QR / Barcode + Mobile Scanning                                      */
/* ========================================================================== */
.input-action{display:flex;gap:8px;align-items:stretch}.input-action>select,.input-action>input{flex:1;min-width:0}.scan-btn{white-space:nowrap}.scan-inline-status{min-height:26px;margin:6px 0 10px;font-size:.9rem}.hint-inline{font-weight:400;color:var(--muted)}
.form-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0}.btn.tiny{padding:6px 9px;font-size:.78rem;border-radius:8px;white-space:nowrap}.icon-btn.danger{color:#b91c1c}
.scan-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.scan-summary>div{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:10px 12px}.scan-summary span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:3px}.scan-summary strong{font-size:1.05rem}
.scanned-list{display:grid;gap:7px;margin:8px 0 14px;max-height:260px;overflow:auto;border:1px dashed var(--border);border-radius:12px;padding:8px}.scanned-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border)}.scanned-item strong,.scanned-item small{display:block}.scanned-item small{font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}.scanned-item>span{font-weight:700;white-space:nowrap}

.scanner-open{overflow:hidden}.scanner-modal[hidden]{display:none!important}.scanner-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:end center}.scanner-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(3px)}.scanner-sheet{position:relative;width:min(520px,100%);max-height:min(94vh,760px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:22px 22px 0 0;padding:15px;box-shadow:0 -18px 50px rgba(0,0,0,.28)}.scanner-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.scanner-head strong,.scanner-head small{display:block}.scanner-head small{color:var(--muted);margin-top:2px}.scanner-video-wrap{position:relative;aspect-ratio:4/3;background:#020617;border-radius:16px;overflow:hidden;border:1px solid var(--border)}.scanner-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}.scanner-frame{position:absolute;inset:18%;border:3px solid #2dd4bf;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.2);pointer-events:none}.scanner-message{margin:10px 0;padding:9px 10px;border-radius:10px;background:var(--surface-2);font-size:.88rem}.scanner-message.ok{color:#047857;background:rgba(16,185,129,.12)}.scanner-message.warn{color:#b45309;background:rgba(245,158,11,.13)}.scanner-message.error{color:#b91c1c;background:rgba(239,68,68,.12)}.scanner-manual{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.scanner-manual label{margin:0}.scanner-help{font-size:.76rem;color:var(--muted);margin:10px 0 0}.qr-svg{display:block;max-width:100%;height:auto}

.qr-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.qr-result{margin-top:12px}.qr-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qr-detail>div{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.qr-detail span{display:block;color:var(--muted);font-size:.76rem}.qr-detail strong{display:block;margin-top:3px;overflow-wrap:anywhere}.qr-result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

@media(max-width:700px){
  .input-action{display:grid;grid-template-columns:1fr}.scan-btn{width:100%}.receive-editor{max-height:52vh}.scan-summary{grid-template-columns:1fr 1fr}.scanned-list{max-height:220px}.scanner-sheet{border-radius:18px 18px 0 0;padding:12px}.scanner-manual{grid-template-columns:1fr}.scanner-manual .btn{width:100%}.qr-lookup{grid-template-columns:1fr}.qr-lookup .btn{width:100%}.qr-detail{grid-template-columns:1fr 1fr}.form-actions>.btn{flex:1 1 auto}}
@media(max-width:420px){.qr-detail{grid-template-columns:1fr}.scan-summary>div{padding:9px}.scanned-item{grid-template-columns:minmax(0,1fr) auto}.scanned-item>span{grid-column:1/2}.scanned-item>button{grid-column:2/3;grid-row:1/3}}

/* V2.3.1 printer queue */
.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.inline{display:inline;margin:0}.print-mode-strip{margin:-4px 0 14px;padding:8px 12px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;color:var(--muted)}code{padding:2px 5px;border-radius:6px;background:var(--surface-3);font-size:.9em}
@media(max-width:640px){.actions{align-items:stretch}.actions .btn,.actions form{flex:1 1 auto}.actions form .btn{width:100%}.print-mode-strip{font-size:11px}}

/* V2.4 Dynamic Label Designer */

/* ========================================================================== */
/* V2.5.0 - Workflow, transaction detail, control center                      */
/* ========================================================================== */
.sidebar-head{padding-right:12px}.sidebar-collapse{display:none!important}.sidebar-footer.simple{padding:12px;border-top:1px solid color-mix(in srgb,#fff 10%,transparent)}
.top{grid-template-columns:auto minmax(240px,540px) auto;display:grid}.top-left{min-width:0}.top-center{min-width:0;padding:0 18px}.top-actions{justify-self:end}
.single-toggle{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}.single-toggle:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}.single-toggle .icon{width:16px;height:16px}.single-toggle strong{font-size:10px;color:var(--primary)}.single-toggle.icon-only{width:40px;padding:0}.user-menu-wrap{position:relative}.user-menu-button{cursor:pointer;border:0;background:transparent}.user-menu-button .chevron{color:var(--muted);font-size:14px}.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 9px);width:210px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.15s ease;z-index:35}.user-menu-wrap.open .user-menu-dropdown{opacity:1;visibility:visible;transform:none}.user-menu-dropdown>div{padding:8px 10px;border-bottom:1px solid var(--border-soft);margin-bottom:5px}.user-menu-dropdown strong,.user-menu-dropdown small{display:block}.user-menu-dropdown small{color:var(--muted);margin-top:2px}.user-menu-dropdown a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;color:var(--danger);text-decoration:none;font-weight:750}.user-menu-dropdown a:hover{background:var(--danger-soft)}.user-menu-dropdown .icon{width:17px;height:17px}
.global-search{position:relative;width:100%}.global-search>input{width:100%;height:40px;padding:0 14px 0 36px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);outline:none}.global-search>input:focus{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);background:var(--surface)}.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px}.search-results{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:380px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lg);z-index:50;display:none}.search-results.open{display:block}.search-results button{width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:9px;color:var(--text);cursor:pointer}.search-results button:hover{background:var(--primary-soft)}.search-results strong,.search-results small{display:block}.search-results small{color:var(--muted);margin-top:3px}.search-empty{padding:14px;color:var(--muted);text-align:center}
.clickable-card{cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.clickable-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:var(--shadow)}.clickable-row{cursor:pointer}.clickable-row:hover td{background:color-mix(in srgb,var(--primary-soft) 70%,transparent)}.row-action{white-space:nowrap}.action-dots{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-weight:900}.action-dots:hover{color:var(--primary);background:var(--primary-soft)}
.action-center{margin-bottom:14px}.action-list{display:grid;gap:8px}.action-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 13px;border:1px solid var(--border);background:var(--surface);border-radius:12px;text-align:left;color:var(--text);cursor:pointer}.action-item:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));background:var(--primary-soft)}.action-item>div{min-width:0}.action-item strong,.action-item small{display:block}.action-item small{margin-top:3px;color:var(--muted)}.action-item .action-label{flex:none;font-size:10px;font-weight:850;color:var(--primary)}.priority-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--warning)}.action-item.danger .priority-dot{background:var(--danger)}.action-item.ok .priority-dot{background:var(--success)}
.detail-drawer{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden}.detail-drawer.open{pointer-events:auto;visibility:visible}.detail-drawer-backdrop{position:absolute;inset:0;background:rgba(2,12,10,.44);opacity:0;transition:.2s ease;backdrop-filter:blur(2px)}.detail-drawer.open .detail-drawer-backdrop{opacity:1}.detail-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(660px,92vw);background:var(--surface);border-left:1px solid var(--border);box-shadow:-18px 0 45px rgba(0,0,0,.16);transform:translateX(102%);transition:.22s ease;display:flex;flex-direction:column}.detail-drawer.open .detail-drawer-panel{transform:none}.detail-drawer-panel>header{min-height:75px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px)}.detail-drawer-panel header h2{font-size:18px;margin:2px 0 0}.detail-drawer-panel header small{color:var(--muted);font-weight:700}.detail-drawer-body{padding:16px 18px 28px;overflow:auto;overscroll-behavior:contain;flex:1}.detail-open{overflow:hidden}.detail-loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:30px 10px}.detail-loading span{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:pairan-spin .7s linear infinite}@keyframes pairan-spin{to{transform:rotate(360deg)}}
.detail-tabs{display:flex;gap:5px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:auto}.detail-tab{flex:1;min-width:max-content;border:0;background:transparent;color:var(--muted);padding:8px 11px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer}.detail-tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.detail-panel{display:none}.detail-panel.active{display:block}.detail-status-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}.detail-status-row>span:not(.badge){color:var(--muted);font-weight:700}.detail-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}.detail-metrics>div,.detail-grid>div{padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);min-width:0}.detail-metrics span,.detail-grid span{display:block;color:var(--muted);font-size:10px;font-weight:750;margin-bottom:4px}.detail-metrics strong,.detail-grid strong{display:block;font-size:14px;overflow-wrap:anywhere}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}.next-action{padding:13px 14px;border-radius:12px;border:1px solid var(--border);margin:10px 0}.next-action p{margin:5px 0 10px;color:var(--muted)}.next-action.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 20%,var(--border))}.next-action.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 20%,var(--border))}.next-action.ok{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 20%,var(--border))}.compact.table-wrap,.table-wrap.compact{max-height:360px;margin-bottom:12px}.timeline{position:relative;padding-left:15px}.timeline::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--border)}.timeline-item{position:relative;padding:0 0 16px 13px}.timeline-dot{position:absolute;left:-14px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.timeline-item strong,.timeline-item small{display:block}.timeline-item small{color:var(--muted);margin-top:2px}.timeline-item p{margin:4px 0;color:var(--text)}.notes-list,.attachment-list{display:grid;gap:8px;margin:12px 0}.note-item,.attachment-item{padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}.note-item strong,.note-item small,.attachment-item strong,.attachment-item small{display:block}.note-item small,.attachment-item small{color:var(--muted);margin-top:2px}.note-item p{margin:6px 0 0}.attachment-item{text-decoration:none;color:var(--text)}.attachment-item:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}.compact-form,.action-box{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:12px;margin-bottom:10px}.compact-form label,.action-box label{font-size:10px}.danger-zone{border-color:color-mix(in srgb,var(--danger) 25%,var(--border));background:var(--danger-soft)}.danger-soft{background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 22%,var(--border))}.btn.danger{background:var(--danger);color:white}.warn-btn{background:var(--warning);color:white}.investigation-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--warning-soft)}.investigation-summary span{color:var(--muted)}.pack-chip-list{display:flex;flex-wrap:wrap;gap:6px}.pack-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:10px}.entity-list{display:grid;gap:7px}.entity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}.entity-row:hover{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 26%,var(--border))}.entity-row span{min-width:0}.entity-row span:last-child{text-align:right}.entity-row strong,.entity-row small{display:block}.entity-row small{color:var(--muted);margin-top:3px}.empty-state{padding:20px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}
.app-toast{position:fixed;right:18px;bottom:18px;z-index:120;max-width:360px;padding:11px 14px;border-radius:11px;background:var(--text);color:var(--surface);box-shadow:var(--shadow-lg);transform:translateY(20px);opacity:0;visibility:hidden;transition:.18s ease}.app-toast.show{transform:none;opacity:1;visibility:visible}.app-toast.error{background:var(--danger);color:#fff}

@media(max-width:1080px){.top{grid-template-columns:auto 1fr auto}.top-center{padding:0 8px}.global-search{max-width:360px}.single-toggle span{display:none}.single-toggle{width:40px;padding:0}.lang-toggle{width:42px}}
@media(max-width:900px){.top{display:flex}.top-center{display:none}.sidebar-footer.simple{padding-bottom:max(12px,env(safe-area-inset-bottom))}.detail-drawer-panel{width:min(620px,95vw)}}
@media(max-width:640px){.detail-drawer-panel{width:100vw;border-left:0}.detail-drawer-panel>header{min-height:64px;padding:11px 13px}.detail-drawer-body{padding:12px 11px 22px}.detail-metrics,.detail-grid{grid-template-columns:1fr 1fr;gap:7px}.detail-metrics>div,.detail-grid>div{padding:9px}.detail-tab{padding:7px 9px}.action-item{padding:10px}.top-actions .top-user{display:flex}.top-user>div:not(.avatar),.top-user .chevron{display:none}.user-menu-button{padding:0}.user-menu-dropdown{right:0;top:45px}.single-toggle{height:37px;width:37px;border-radius:10px}.lang-toggle{width:38px}.app-toast{left:10px;right:10px;bottom:10px;max-width:none}}
.badge.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}

/* V2.6 Finance & Accounting */
.finance-period{display:flex;align-items:end;justify-content:space-between;gap:12px}.period-badge{padding-bottom:2px}.finance-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.finance-statement{display:grid;gap:0}.finance-statement>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.finance-statement .total{font-weight:700;border-top:2px solid var(--line)}.finance-statement .grand-total{font-weight:800;font-size:1.08rem;border-top:2px solid var(--accent)}.finance-checklist{display:grid;gap:8px;margin:14px 0}.finance-checklist>div{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-form label{margin:0;min-width:190px}.mini-payment{display:grid;gap:6px;min-width:220px;padding:10px 0}.actions.vertical{display:grid;gap:8px}.btn.danger{background:#b42318;color:#fff}.btn.danger:hover{filter:brightness(.95)}
@media(max-width:1000px){.finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.finance-period{align-items:stretch;flex-direction:column}.finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-payment{min-width:180px}}

/* V2.6.1 Simple Finance Workflow */
.simple-finance-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.simple-finance-head h1{margin:0;font-size:1.55rem}.simple-finance-head .eyebrow{margin:0 0 3px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.12em}.simple-finance-head .hint{margin:5px 0 0}.simple-finance-tabs{margin-bottom:14px}.simple-month-filter{display:flex;justify-content:space-between;align-items:end}.simple-finance-kpis,.recap-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-link{text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.kpi-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 8px 22px #0f172a0d}.simple-finance-grid{align-items:stretch}.today-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.today-money>div{padding:14px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;gap:6px}.today-money span{font-size:.8rem;color:var(--muted)}.today-money strong{font-size:1.1rem}.account-balance-list,.category-recap-list{display:grid;gap:0}.account-balance-list>div,.category-recap-list>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.account-balance-list>div:last-child,.category-recap-list>div:last-child{border-bottom:0}.recent-money-list{display:grid}.money-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.money-row:last-child{border-bottom:0}.money-row>div{display:grid;gap:2px}.money-row small{color:var(--muted)}.quick-balance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.quick-balance a{display:grid;gap:4px;padding:16px;border-radius:13px;border:1px solid var(--line);background:var(--soft);color:inherit;text-decoration:none}.quick-balance a:hover{border-color:var(--accent)}.quick-balance span,.quick-balance small{color:var(--muted)}.quick-balance strong{font-size:1.25rem}.finance-admin-tools{margin-top:14px}.finance-admin-tools>summary{cursor:pointer;font-weight:800;color:var(--muted)}.admin-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}.admin-tool-grid>div{padding:14px;background:var(--soft);border:1px solid var(--line);border-radius:12px}.admin-tool-grid h3{margin-top:0}.simple-input-shell{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.65fr);gap:14px;align-items:start}.simple-transaction-card{max-width:900px}.money-kind-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}.kind-option{margin:0;cursor:pointer}.kind-option input{position:absolute;opacity:0;pointer-events:none}.kind-option span{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.kind-option input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.kind-option.receipt input:checked+span b{color:var(--success,#16815d)}.kind-option.expense input:checked+span b{color:var(--danger,#b42318)}.kind-option small{font-weight:500;color:var(--muted)}.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.simple-post-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.simple-post-note>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:900}.simple-post-note p{margin:0}.btn.large{padding:12px 20px;font-size:1rem}.simple-input-help ol{padding-left:20px;line-height:1.6}.notice-soft{padding:13px;border-radius:11px;background:var(--soft);border:1px solid var(--line)}.notice-soft p{margin:6px 0 0}.recap-filter-card{margin-bottom:14px}.recap-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.recap-filter{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:12px}.scope-switch{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.scope-switch label{margin:0}.scope-switch input{position:absolute;opacity:0}.scope-switch span{display:block;padding:9px 13px;cursor:pointer;background:var(--surface)}.scope-switch input:checked+span{background:var(--accent);color:white;font-weight:700}.category-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.category-dot.in{background:#16815d}.category-dot.out{background:#c2413d}.finance-recap-table table{min-width:1180px}.row-actions{position:relative}.row-actions>summary{cursor:pointer;font-size:1.2rem;list-style:none}.row-actions form{position:absolute;right:0;z-index:5;width:220px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #0002}.row-actions form input{margin-bottom:7px}
@media(max-width:1050px){.admin-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.simple-input-shell{grid-template-columns:1fr}.simple-input-help{order:2}}
@media(max-width:760px){.simple-finance-head{align-items:stretch;flex-direction:column}.simple-finance-actions .btn{width:100%}.simple-finance-kpis,.recap-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.today-money{grid-template-columns:1fr}.quick-balance{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}.money-kind-switch{grid-template-columns:1fr 1fr}.admin-tool-grid{grid-template-columns:1fr}.recap-filter-head{align-items:stretch;flex-direction:column}.recap-filter-head .btn{width:100%}.recap-filter{display:grid;grid-template-columns:1fr}.scope-switch{display:grid;grid-template-columns:repeat(3,1fr)}.scope-switch span{text-align:center}.simple-month-filter{align-items:stretch;flex-direction:column}}

/* ========================================================================== */
/* V2.6.2 - Monthly Finance Recap                                             */
/* ========================================================================== */
.monthly-transaction-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.month-navigation{display:flex;align-items:center;gap:13px}.month-navigation>div{display:grid;gap:2px;text-align:center;min-width:180px}.month-navigation span,.month-navigation small{font-size:.78rem;color:var(--muted)}.month-navigation strong{font-size:1.15rem}.month-arrow{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--soft);color:var(--text);text-decoration:none;font-size:1.65rem;line-height:1}.month-arrow:hover{border-color:var(--accent);color:var(--accent)}.monthly-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.month-picker-inline{margin:0}.month-picker-inline input{min-width:145px}.monthly-recap-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.monthly-recap-strip>div{display:grid;gap:4px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.monthly-recap-strip span{font-size:.78rem;color:var(--muted)}.monthly-recap-strip strong{font-size:1.06rem}.transaction-filter-bar{display:grid;grid-template-columns:minmax(220px,1.7fr) repeat(3,minmax(130px,.65fr)) auto;gap:10px;align-items:end;margin-bottom:12px}.transaction-filter-bar label{margin:0}.transaction-filter-bar .btn{margin-bottom:1px}.monthly-transaction-list{display:grid;gap:12px}.transaction-day{padding:0;overflow:visible}.transaction-day-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--soft) 70%,transparent)}.transaction-day-head h2{display:flex;align-items:baseline;gap:8px;margin:0;font-size:.85rem;letter-spacing:.06em;color:var(--muted)}.transaction-day-head h2 span{font-size:1.45rem;color:var(--text);letter-spacing:0}.transaction-day-head p{margin:2px 0 0;color:var(--muted);font-size:.78rem}.transaction-day-totals{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.transaction-day-totals span{font-size:.76rem;color:var(--muted)}.transaction-day-totals b{margin-left:4px}.finance-actions-cell{display:flex;align-items:center;gap:6px}.monthly-empty{margin-top:12px}.finance-modal[hidden]{display:none!important}.finance-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .13s ease}.finance-modal.open{opacity:1}.finance-modal-backdrop{position:absolute;inset:0;background:#0f172a80;backdrop-filter:blur(2px)}.finance-modal-panel{position:relative;z-index:1;width:min(780px,96vw);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 24px 70px #0005;transform:translateY(10px) scale(.99);transition:transform .13s ease}.finance-modal.open .finance-modal-panel{transform:translateY(0) scale(1)}.finance-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line)}.finance-modal-head h2{margin:0}.finance-modal-head .eyebrow{margin:0 0 3px;color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.12em}.modal-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-size:1.35rem;cursor:pointer}.modal-close:hover{border-color:var(--accent);color:var(--accent)}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:14px}.modal-open{overflow:hidden}.finance-detail-panel{width:min(680px,96vw)}.finance-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.finance-detail-grid>div{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.finance-detail-grid .wide{grid-column:1/-1}.finance-detail-grid dt{font-size:.75rem;color:var(--muted);margin-bottom:5px}.finance-detail-grid dd{margin:0;font-weight:700;overflow-wrap:anywhere}.transaction-day[hidden],.finance-transaction-row[hidden]{display:none!important}

@media(max-width:980px){.monthly-transaction-head{align-items:stretch;flex-direction:column}.monthly-head-actions{justify-content:flex-start}.transaction-filter-bar{grid-template-columns:1fr 1fr}.transaction-filter-bar .transaction-search{grid-column:1/-1}.transaction-filter-bar .btn{width:max-content}.transaction-day-head{align-items:flex-start;flex-direction:column}.monthly-recap-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.monthly-head-actions{display:grid;grid-template-columns:1fr 1fr}.monthly-head-actions .month-picker-inline{grid-column:1/-1}.monthly-head-actions .month-picker-inline input{width:100%}.monthly-head-actions .btn{width:100%}.month-navigation{justify-content:space-between}.transaction-filter-bar{grid-template-columns:1fr}.transaction-filter-bar .transaction-search{grid-column:auto}.transaction-day-totals{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:6px}.transaction-day-totals span{display:grid;gap:2px;padding:8px;background:var(--surface);border-radius:9px;border:1px solid var(--line)}.transaction-day-totals b{margin:0}.finance-modal{padding:0;align-items:flex-end}.finance-modal-panel{width:100%;max-height:94vh;border-radius:18px 18px 0 0}.finance-detail-grid{grid-template-columns:1fr}.finance-detail-grid .wide{grid-column:auto}}


/* ========================================================================== */
/* V2.6.3 - Finance UI cleanup & cache-safe monthly recap                      */
/* ========================================================================== */
:root{--line:var(--border);--soft:var(--surface-2);--accent:var(--primary)}
.finance-primary-nav{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding:2px 1px}.finance-primary-nav::-webkit-scrollbar{display:none}.finance-primary-nav .tab,.finance-primary-nav .finance-add-action{flex:none;min-height:38px;display:inline-flex;align-items:center;justify-content:center}.finance-primary-nav .finance-add-action{text-decoration:none;padding-inline:15px;box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 18%,transparent)}
.simple-finance-head{align-items:flex-start;margin-bottom:10px}.simple-finance-head>div:first-child{max-width:820px}.simple-finance-tabs{display:none!important}
.monthly-transaction-head{padding:16px 18px;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-bottom:12px}.month-navigation{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}.month-navigation>div{display:grid!important;gap:2px!important;text-align:left!important;min-width:210px}.month-navigation span{font-size:.72rem!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.month-navigation strong{font-size:1.18rem!important;line-height:1.2}.month-navigation small{font-size:.78rem!important;color:var(--muted)}.month-arrow{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;flex:none;border-radius:10px!important;border:1px solid var(--border)!important;background:var(--surface-2)!important;color:var(--text)!important;text-decoration:none!important;font-size:1.55rem!important;line-height:1!important}.month-arrow:hover{border-color:var(--primary)!important;color:var(--primary)!important;background:var(--primary-soft)!important}.monthly-head-actions{display:flex!important;align-items:end!important;justify-content:flex-end;gap:9px!important;flex-wrap:wrap}.month-picker-inline{margin:0!important}.month-picker-inline label{display:grid;gap:4px;margin:0;font-size:.72rem;font-weight:700;color:var(--muted)}.month-picker-inline input{min-width:165px!important;height:38px}.monthly-head-actions .btn{height:38px;display:inline-flex;align-items:center}
.monthly-recap-strip{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0 0 12px!important}.monthly-recap-strip>div{display:grid!important;gap:5px!important;padding:14px 15px!important;background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow-sm)!important}.monthly-recap-strip span{font-size:.75rem!important;color:var(--muted)!important}.monthly-recap-strip strong{font-size:1.12rem!important}
.transaction-filter-bar{display:grid!important;grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(150px,.7fr)) auto!important;gap:10px!important;align-items:end!important;padding:14px 16px!important;margin:0 0 12px!important}.transaction-filter-bar label{display:grid;gap:5px;margin:0!important;font-size:.75rem;font-weight:700;color:var(--text)}.transaction-filter-bar input,.transaction-filter-bar select{width:100%;min-height:38px}.transaction-filter-bar .btn{height:38px;margin:0!important;align-self:end}.monthly-empty{margin-top:12px!important}
.transaction-day{overflow:hidden!important}.transaction-day-head{background:var(--surface-2)!important;border-bottom:1px solid var(--border)!important}.finance-recap-table{margin:0}.finance-recap-table table{min-width:1120px}.finance-recap-table th{white-space:nowrap}.finance-recap-table td{vertical-align:middle}.finance-actions-cell{white-space:nowrap}
.finance-modal-panel{border-color:var(--border)!important}.finance-detail-grid>div,.simple-post-note,.kind-option span{border-color:var(--border)!important;background:var(--surface-2)!important}
@media(max-width:980px){.monthly-transaction-head{align-items:stretch!important;flex-direction:column!important}.monthly-head-actions{justify-content:flex-start!important}.transaction-filter-bar{grid-template-columns:1fr 1fr!important}.transaction-filter-bar .transaction-search{grid-column:1/-1}.monthly-recap-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){.finance-primary-nav{gap:6px}.finance-primary-nav .tab,.finance-primary-nav .finance-add-action{padding:8px 11px;font-size:11px}.monthly-transaction-head{padding:14px!important}.month-navigation{justify-content:space-between!important;width:100%}.month-navigation>div{min-width:0!important;text-align:center!important;flex:1}.monthly-head-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.monthly-head-actions .month-picker-inline{grid-column:1/-1}.monthly-head-actions .month-picker-inline input{width:100%!important}.monthly-head-actions .btn{width:100%;justify-content:center}.transaction-filter-bar{grid-template-columns:1fr!important}.transaction-filter-bar .transaction-search{grid-column:auto}.monthly-recap-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}.transaction-day-head{align-items:flex-start!important;flex-direction:column!important}.transaction-day-totals{display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;gap:6px!important}.transaction-day-totals span{display:grid;gap:2px;padding:8px;background:var(--surface);border-radius:9px;border:1px solid var(--border)}.transaction-day-totals b{margin:0!important}}

/* V2.8.1 - Operasional / Barang Masuk layout */
.receive-top-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;
}
.receive-entry-card,.receive-recent-card{min-width:0}
.receive-recent-card{display:flex;flex-direction:column}
.receive-recent-table{flex:1;max-height:430px}
.receive-input-table{max-height:none}
.raw-global-card{margin-bottom:16px}
.raw-global-table{max-height:420px}
@media (max-width:900px){
  .receive-top-grid{grid-template-columns:1fr}
  .receive-recent-table,.raw-global-table{max-height:360px}
}
/* V2.9 Dynamic HPP & Landed Cost */
.costing-box{margin:14px 0;border:1px solid var(--line,#d8e4e2);border-radius:12px;padding:10px 12px;background:var(--card,#fff)}
.costing-box summary{cursor:pointer;font-weight:700;margin-bottom:6px}
.landed-cost-row{grid-template-columns:1.25fr .85fr 1fr 1.2fr}
@media(max-width:900px){.landed-cost-row{grid-template-columns:1fr 1fr}.landed-cost-row input:last-child{grid-column:1/-1}}
@media(max-width:620px){.landed-cost-row{grid-template-columns:1fr}.landed-cost-row input:last-child{grid-column:auto}}

/* ========================================================================== */
/* V3.0 - PBJ Simple Workflow                                                  */
/* ========================================================================== */
.simple-main-nav{gap:5px}
.nav-section-label{margin:14px 12px 4px;color:var(--sidebar-muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

.simple-workflow-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.simple-workflow-bar a{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 11px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:750;transition:.16s ease}
.simple-workflow-bar a:hover{background:var(--surface-2);color:var(--text)}
.simple-workflow-bar a.active{background:var(--primary-soft);color:var(--primary)}
.simple-workflow-bar b{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1px solid currentColor;border-radius:50%;font-size:10px}
.simple-workflow-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.simple-two-col{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);gap:14px;align-items:start;margin-bottom:14px}
.simple-entry-card{min-width:0}
.simple-entry-card .card-head{align-items:flex-start}
.simple-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.simple-form-grid>label{min-width:0}
.full{grid-column:1/-1}

.simple-scan-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:12px 0 14px;padding:14px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary-soft) 52%,var(--surface))}
.simple-scan-panel>div{min-width:0}
.simple-scan-panel strong{display:block;font-size:13px;margin-bottom:2px}
.simple-scan-panel small{display:block;color:var(--muted)}
.scan-primary{min-width:150px;justify-content:center}

.simple-input-table{max-height:none;margin-top:8px}
.simple-input-table table{min-width:820px}
.simple-input-table td{vertical-align:middle}
.simple-input-table input,.simple-input-table select{min-width:115px}

.simple-advanced{margin:13px 0 0;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}
.simple-advanced>summary{cursor:pointer;padding:11px 13px;font-weight:750;color:var(--muted);list-style:none}
.simple-advanced>summary::-webkit-details-marker{display:none}
.simple-advanced[open]>summary{border-bottom:1px solid var(--border);color:var(--text)}
.simple-advanced>*:not(summary){margin-left:13px;margin-right:13px}
.simple-advanced>*:last-child{margin-bottom:13px}

.btn.simple-submit{display:flex;min-width:190px;justify-content:center;margin:14px 0 0 auto}

.simple-stock-list{display:grid;gap:7px;margin-top:8px}
.simple-stock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.simple-stock-row>div{display:grid;gap:2px;min-width:0}
.simple-stock-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simple-stock-row small{color:var(--muted)}
.simple-stock-row>b{flex:none}
a.simple-stock-row{text-decoration:none;color:var(--text)}
a.simple-stock-row:hover{border-color:color-mix(in srgb,var(--primary) 36%,var(--border));background:var(--primary-soft)}

.simple-step-box,.simple-result-box,.simple-target{display:grid;gap:4px;padding:12px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
.simple-step-box span,.simple-result-box span,.simple-target span{font-size:11px;color:var(--muted)}
.simple-step-box strong,.simple-result-box strong,.simple-target strong{font-size:14px}
.simple-result-box{margin-top:12px}
.simple-target{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.simple-target>div{display:grid;gap:3px;padding-right:10px;border-right:1px solid var(--border)}
.simple-target>div:last-child{border-right:0}

.material-lines{display:grid;gap:8px;margin:10px 0}
.material-row{display:grid;grid-template-columns:minmax(190px,1fr) 130px 70px;gap:8px;align-items:center}
.material-row select,.material-row input{width:100%}
.material-unit{color:var(--muted);font-size:11px}

.simple-kpis,.simple-stock-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.simple-kpi-link{text-decoration:none;color:inherit}
.simple-kpi-link{height:100%;transition:.15s ease}
.simple-kpi-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}

.simple-activity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.simple-activity-grid>*{display:grid;gap:4px;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);text-decoration:none}
.simple-activity-grid>*:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));background:var(--primary-soft)}
.simple-activity-grid span{font-size:11px;color:var(--muted)}
.simple-activity-grid strong{font-size:16px}

.simple-quick-card{margin-bottom:14px}
.simple-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.simple-quick-actions .btn{min-height:48px;justify-content:center;text-align:center}

.simple-tabs{display:flex;gap:7px;overflow-x:auto;margin:0 0 13px;padding-bottom:2px;scrollbar-width:none}
.simple-tabs::-webkit-scrollbar{display:none}
.simple-tabs .tab{flex:none}

.simple-qr-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:13px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.simple-qr-card .btn{min-width:145px}
.simple-qr-card>div{min-width:0}
.simple-qr-card strong{display:block}
.simple-qr-card small{display:block;color:var(--muted);overflow-wrap:anywhere}

.simple-opname-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.simple-opname-choice label{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);cursor:pointer}
.simple-opname-choice input{width:auto}

.simple-help-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:8px}
.simple-help-flow>*{position:relative;padding:9px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);text-align:center;font-size:11px;font-weight:700}
.simple-help-flow>*:not(:last-child)::after{content:'›';position:absolute;right:-7px;top:50%;transform:translateY(-50%);z-index:2;color:var(--muted);font-size:16px}
.simple-help-flow.vertical{grid-template-columns:1fr}
.simple-help-flow.vertical>*{text-align:left}
.simple-help-flow.vertical>*:not(:last-child)::after{content:'↓';right:auto;left:20px;top:auto;bottom:-13px;transform:none}

.scan-list{display:grid;gap:7px;margin:9px 0}
.scan-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.scan-item>span{display:flex;align-items:center;gap:9px;min-width:0}
.scan-item small{color:var(--muted)}

@media(max-width:1100px){
  .simple-workflow-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .simple-two-col{grid-template-columns:1fr}
  .simple-kpis,.simple-stock-kpis,.simple-quick-actions,.simple-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .simple-workflow-bar{display:flex;overflow-x:auto;scrollbar-width:none}
  .simple-workflow-bar a{flex:0 0 auto}
  .simple-form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .simple-scan-panel{grid-template-columns:1fr}
  .scan-primary{width:100%}
  .btn.simple-submit{width:100%;min-width:0;margin-left:0}
  .material-row{grid-template-columns:1fr 110px 55px}
  .simple-target{grid-template-columns:1fr}
  .simple-target>div{padding:0 0 8px;border-right:0;border-bottom:1px solid var(--border)}
  .simple-target>div:last-child{padding-bottom:0;border-bottom:0}
  .simple-qr-card{grid-template-columns:1fr}
  .simple-qr-card .btn{width:100%}
}
@media(max-width:500px){
  .simple-kpis,.simple-stock-kpis,.simple-quick-actions,.simple-activity-grid{grid-template-columns:1fr 1fr}
  .material-row{grid-template-columns:1fr 95px}
  .material-unit{grid-column:2}
  .simple-opname-choice{grid-template-columns:1fr}
}

/* V3.5 - Dual QR / Code128 scanner input */
.delivery-dual-scan{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:10px;align-items:center}
.delivery-dual-scan .scan-inline-status{grid-column:1/-1}
.barcode-keyboard-input{display:flex;gap:8px;min-width:0}
.barcode-keyboard-input input{min-width:0;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.03em}
@media(max-width:720px){.delivery-dual-scan{grid-template-columns:1fr}.delivery-dual-scan .scan-inline-status{grid-column:1}.barcode-keyboard-input{width:100%}}

/* V3.5.1 - PBJ logo branding */
.brand-mark.brand-logo{background:#fff;padding:3px;overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.brand-mark.brand-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:9px}
.top-title-logo{width:38px;height:38px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:10px;padding:2px;box-shadow:var(--shadow-sm)}
.login-logo.image-logo{width:132px;height:132px;border-radius:24px;background:#fff;padding:7px;overflow:hidden;box-shadow:0 15px 36px rgba(15,118,110,.18)}
.login-logo.image-logo img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:640px){.top-title-logo{width:34px;height:34px}.login-logo.image-logo{width:112px;height:112px}}


/* V3.5.2 — PBJ Blue Gradient Theme
   Colors are derived from the PBJ logo: #022463, #063F88, #0A65B2,
   #059CDC, #3BBBE8 and red accent #CB0916. */
html,body{min-height:100%}
body{
  background:
    radial-gradient(circle at 8% -6%,color-mix(in srgb,var(--brand-cyan) 11%,transparent),transparent 29rem),
    radial-gradient(circle at 96% 8%,color-mix(in srgb,var(--brand-blue) 8%,transparent),transparent 32rem),
    linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--surface-3) 32%,var(--bg)));
  background-attachment:fixed;
}

.sidebar{
  background:
    radial-gradient(circle at 15% 4%,rgba(59,187,232,.20),transparent 18rem),
    linear-gradient(165deg,var(--sidebar) 0%,var(--sidebar-2) 53%,var(--sidebar-3) 118%);
  border-right:1px solid rgba(122,211,250,.13);
  box-shadow:12px 0 38px rgba(2,36,99,.12);
}
.sidebar::after{content:"";position:absolute;inset:auto -80px -95px auto;width:210px;height:210px;border-radius:50%;background:rgba(59,187,232,.10);filter:blur(1px);pointer-events:none}
.brand-only-head{min-height:64px;padding:7px 10px 20px;align-items:center}
.brand.brand-only{overflow:visible;white-space:normal}
.brand.brand-only strong{font-size:18px;font-weight:850;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.18)}
.brand.brand-only strong::after{content:"";display:block;width:42px;height:3px;margin-top:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand-sky),var(--brand-cyan),rgba(255,255,255,.25));box-shadow:0 0 14px rgba(59,187,232,.28)}
.nav-section-label{color:color-mix(in srgb,var(--sidebar-muted) 90%,#fff)}
.nav-link{border:1px solid transparent}
.nav-link .icon{color:#9bc7e4}
.nav-link:hover{background:linear-gradient(90deg,rgba(59,187,232,.13),rgba(10,101,178,.12));border-color:rgba(125,211,252,.09);color:#fff}
.nav-link.active{background:linear-gradient(90deg,rgba(5,156,220,.34),rgba(10,101,178,.22));border-color:rgba(125,211,252,.12);box-shadow:inset 3px 0 0 var(--brand-sky),0 8px 22px rgba(0,0,0,.12);color:#fff}
.nav-link.active .icon{color:#7dd3fc;filter:drop-shadow(0 0 6px rgba(56,189,248,.28))}
.logout-link{color:#ffd6d9}.logout-link .icon{color:#ff9ba2}.logout-link:hover{background:rgba(203,9,22,.16);border-color:rgba(255,105,115,.12)}

.top{
  background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface-2) 89%,transparent));
  border-bottom:1px solid color-mix(in srgb,var(--primary) 10%,var(--border-soft));
  box-shadow:0 8px 28px rgba(2,36,99,.035);
}
html[data-theme="dark"] .top{box-shadow:0 10px 34px rgba(0,0,0,.16)}
.eyebrow{color:var(--primary);background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .eyebrow{background:linear-gradient(90deg,var(--brand-sky),var(--brand-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.top-title-logo{border-color:color-mix(in srgb,var(--primary) 20%,var(--border));box-shadow:0 6px 18px rgba(2,36,99,.10)}

.card,.kpi,.filters,.simple-workflow-bar,.login-card{
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 70%,var(--surface)));
  border-color:color-mix(in srgb,var(--primary) 8%,var(--border));
}
.card{box-shadow:var(--shadow-sm)}
.card:hover{border-color:color-mix(in srgb,var(--primary) 16%,var(--border))}
.kpi::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,var(--brand-navy),var(--brand-blue),var(--brand-cyan));opacity:.9}
.kpi::after{background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb,var(--brand-cyan) 14%,transparent));}
.kpi-icon{background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border))}

.btn:not(.secondary):not(.danger){background:linear-gradient(135deg,var(--brand-blue),var(--accent));border-color:color-mix(in srgb,var(--brand-blue) 75%,#fff);box-shadow:0 7px 18px color-mix(in srgb,var(--brand-blue) 22%,transparent)}
.btn:not(.secondary):not(.danger):hover{background:linear-gradient(135deg,var(--primary-strong),var(--brand-blue));box-shadow:0 10px 24px color-mix(in srgb,var(--brand-blue) 27%,transparent)}
html[data-theme="dark"] .btn:not(.secondary):not(.danger){color:#fff;background:linear-gradient(135deg,#075a99,#0b84c6)}
.btn.secondary,.single-toggle,.top-icon{background:linear-gradient(145deg,var(--surface),var(--surface-2))}
.single-toggle:hover,.top-icon:hover,.btn.secondary:hover{border-color:color-mix(in srgb,var(--brand-cyan) 36%,var(--border));box-shadow:0 5px 16px color-mix(in srgb,var(--brand-blue) 9%,transparent)}
.single-toggle strong{color:var(--primary)}

input,select,textarea{background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--surface) 45%,var(--surface-2)));border-color:var(--border)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-cyan) 15%,transparent),0 6px 18px color-mix(in srgb,var(--brand-blue) 7%,transparent)}

.simple-workflow-bar a.active{background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent)}
.calc-box{background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));border-color:color-mix(in srgb,var(--brand-cyan) 20%,var(--border))}

.login-wrap{
  background:
    radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--brand-cyan) 28%,transparent),transparent 30rem),
    radial-gradient(circle at 88% 86%,color-mix(in srgb,var(--brand-blue) 18%,transparent),transparent 34rem),
    linear-gradient(145deg,color-mix(in srgb,var(--bg) 92%,#fff),var(--bg));
}
html[data-theme="dark"] .login-wrap{
  background:
    radial-gradient(circle at 12% 12%,rgba(5,156,220,.18),transparent 30rem),
    radial-gradient(circle at 88% 86%,rgba(10,101,178,.20),transparent 34rem),
    linear-gradient(145deg,#04101e,#071829 58%,#06111f);
}
.login-card{box-shadow:0 30px 80px color-mix(in srgb,var(--brand-navy) 20%,transparent);backdrop-filter:blur(18px)}
.login-logo.image-logo{box-shadow:0 18px 42px color-mix(in srgb,var(--brand-blue) 20%,transparent);border:1px solid color-mix(in srgb,var(--brand-cyan) 18%,var(--border))}

/* Red from the rooster is deliberately reserved for warnings/destructive actions. */
.badge.error,.btn.danger,.negative{--danger:var(--brand-red)}

html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .simple-workflow-bar,
html[data-theme="dark"] .login-card{background:linear-gradient(145deg,rgba(14,32,53,.97),rgba(8,24,41,.97));border-color:#1c3a57}
html[data-theme="dark"] .kpi::before{background:linear-gradient(90deg,#07548f,#0b84c6,#38bdf8)}
html[data-theme="dark"] .top-title-logo{background:#f8fbff}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:linear-gradient(145deg,#0d2035,#0a1a2c)}

@media(max-width:900px){
  .brand-only-head{padding-left:12px}
  .brand.brand-only strong{font-size:17px}
}

/* V3.6 — Payroll & Employee Cost Control */
.payroll-tabs{margin-bottom:14px;overflow:auto;white-space:nowrap}.payroll-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 78%,var(--surface)),color-mix(in srgb,var(--accent-soft) 65%,var(--surface)));box-shadow:var(--shadow-sm)}.payroll-hero h2{font-size:28px;margin:2px 0 6px}.payroll-hero p{margin:0;color:var(--muted)}.period-nav{display:flex;align-items:center;gap:7px}.period-nav input{width:auto;min-width:145px}.payroll-kpis .kpi strong{font-size:24px}.payroll-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0 18px}.payroll-flow div{position:relative;padding:10px 7px;border:1px solid var(--border);border-radius:10px;text-align:center;background:var(--surface-2);font-size:11px;font-weight:800}.payroll-flow div.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));box-shadow:0 8px 18px color-mix(in srgb,var(--brand-blue) 20%,transparent)}.payroll-period-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}.payroll-period-status>div{padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.payroll-period-status span{display:block;font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;margin-bottom:4px}.payroll-actions{margin-bottom:12px}.payroll-process-table table{min-width:1450px}.payroll-process-table td{vertical-align:top}.payroll-process-table td:first-child{min-width:180px}.payroll-process-table small,.payroll-employee-list small{display:block;margin-top:3px}.payroll-num{width:72px;min-width:72px}.payroll-money-input{width:110px;min-width:110px}.payroll-employee-grid{align-items:start}.payroll-employee-form h3{margin:18px 0 8px}.payroll-components-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payroll-components-grid label{margin:0;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.payroll-components-grid label span{display:block;font-size:11px;font-weight:800;margin-bottom:5px}.payroll-components-grid small{color:var(--muted);font-weight:600}.payroll-secondary-grid{margin-top:14px;align-items:start}.payroll-component-form{grid-template-columns:1fr 1.6fr 1fr auto auto;align-items:end}.payroll-component-form .check{margin-bottom:8px}.payroll-loan-form{margin-bottom:14px}.payroll-pay-amount{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;margin-bottom:12px;border-radius:12px;background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));border:1px solid color-mix(in srgb,var(--brand-cyan) 20%,var(--border))}.payroll-pay-amount span{font-weight:800;color:var(--muted)}.payroll-pay-amount strong{font-size:22px;color:var(--primary)}.payroll-setup-card code{display:inline-block;padding:8px 10px;border-radius:8px;background:var(--surface-3)}
@media(max-width:1050px){.payroll-flow{grid-template-columns:repeat(3,1fr)}.payroll-component-form{grid-template-columns:1fr 1fr}.payroll-period-status{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:720px){.payroll-hero{align-items:flex-start;flex-direction:column}.period-nav{width:100%}.period-nav input{flex:1}.payroll-flow{grid-template-columns:1fr 1fr}.payroll-period-status{grid-template-columns:1fr}.payroll-components-grid{grid-template-columns:1fr}.payroll-component-form{grid-template-columns:1fr}.payroll-kpis{grid-template-columns:1fr 1fr}}

/* V3.7 — Attendance & Fingerprint Sync */
.attendance-tabs{margin-bottom:14px;overflow:auto;white-space:nowrap}
.attendance-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 10%,var(--surface)),color-mix(in srgb,var(--brand-cyan) 9%,var(--surface)))}
.attendance-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0 18px}.attendance-flow span{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-weight:800;font-size:12px}.attendance-flow b{color:var(--brand-cyan);font-size:18px}
.attendance-rebuild-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:10px 0;border:1px dashed color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--primary-soft) 45%,var(--surface));color:var(--muted)}
.api-key-alert{border-color:color-mix(in srgb,var(--warning) 45%,var(--border))}.api-key-copy{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}.api-key-copy code{padding:9px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--border);overflow-wrap:anywhere}
.danger-inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.agent-config-example{margin:0;padding:14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(145deg,var(--surface-3),var(--surface-2));overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text)}
.attendance-tabs+.card table small,.attendance-tabs~.card table small{display:block;color:var(--muted);margin-top:2px}
html[data-theme="dark"] .attendance-hero{background:linear-gradient(135deg,rgba(7,84,143,.28),rgba(5,156,220,.13))}
@media(max-width:760px){.attendance-rebuild-bar{align-items:flex-start;flex-direction:column}.attendance-flow{gap:6px}.attendance-flow span{font-size:11px}.api-key-copy{align-items:stretch;flex-direction:column}}

/* V3.8 — Gmail & Email Integration */
.email-tabs{margin-bottom:14px;overflow:auto;white-space:nowrap}
.email-inbox-list{display:grid;gap:9px}.email-message{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);overflow:hidden}.email-message.is-new{border-color:color-mix(in srgb,var(--brand-cyan) 40%,var(--border));box-shadow:inset 4px 0 0 var(--brand-cyan)}.email-message summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}.email-message summary::-webkit-details-marker{display:none}.email-message summary>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}.email-message summary span,.email-message summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-message summary small{color:var(--muted)}.email-message summary>div:last-child{display:flex;align-items:center;gap:8px;flex-shrink:0}.email-message-body{padding:16px;border-top:1px solid var(--border);background:var(--surface)}.email-message-body p{max-height:340px;overflow:auto;white-space:normal}.email-attachments{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 14px}.email-document-grid{align-items:start}.email-document-grid table{min-width:760px}.email-compose-grid,.email-settings-grid{align-items:start}.email-connect-actions{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.email-queue-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.email-queue-summary>div{padding:16px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}.email-queue-summary span{display:block;color:var(--muted);font-size:12px;font-weight:800}.email-queue-summary strong{display:block;margin-top:4px;font-size:25px}.email-settings-grid details{margin:13px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.email-settings-grid details summary{cursor:pointer;margin-bottom:10px}.email-settings-grid code,.email-tabs~.card code{overflow-wrap:anywhere}
html[data-theme="dark"] .email-message-body{background:#0c1d30}
@media(max-width:900px){.email-document-grid,.email-compose-grid,.email-settings-grid{grid-template-columns:1fr}.email-message summary{align-items:flex-start}.email-message summary>div:last-child{flex-direction:column;align-items:flex-end}.email-queue-summary{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.email-queue-summary{grid-template-columns:1fr}.email-message summary{padding:12px}.email-message-body{padding:12px}.email-message summary span{max-width:68vw}.email-attachments .btn{width:100%;justify-content:flex-start}}

/* PBJ Complete V3.8.3 */
.health-code{white-space:pre-wrap;overflow:auto;max-height:320px;padding:14px;border:1px solid var(--line,#d7e5f0);border-radius:12px;background:#f8fbfe;font-size:12px;line-height:1.55}
.weighing-table{min-width:1320px}
.weighing-table input,.weighing-table select{min-width:112px}
.weighing-table .product-select{min-width:210px}
.profile-summary{display:grid;gap:8px;padding:12px;border:1px solid var(--line,#d7e5f0);border-radius:12px;background:#f8fbfe}
.system-health-grid{align-items:start}
@media(max-width:760px){.weighing-table{min-width:1180px}.health-code{max-height:220px}}


/* =========================================================
   PBJ V3.9.0 — PWA / Android standalone enhancements
   ========================================================= */
.pwa-install-button[hidden]{display:none!important}
.pwa-install-button{gap:7px;white-space:nowrap}
.pwa-install-icon{font-size:18px;line-height:1;font-weight:800}
.network-status{position:fixed;z-index:10020;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,140%);max-width:min(92vw,520px);padding:11px 16px;border-radius:999px;background:#7f1d1d;color:#fff;font-weight:800;font-size:13px;box-shadow:0 14px 34px rgba(0,0,0,.24);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:none;text-align:center}
.network-status.show{transform:translate(-50%,0);opacity:1}
.network-status.online{background:#087443}
.pwa-update-toast{position:fixed;z-index:10021;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;max-width:min(92vw,430px);padding:12px 14px;border:1px solid var(--line,#cbddeb);border-radius:14px;background:var(--panel,#fff);color:var(--text,#10233d);box-shadow:0 16px 38px rgba(4,40,80,.2)}
.pwa-update-toast button{border:0;border-radius:10px;padding:8px 12px;background:#0a65b2;color:#fff;font-weight:800;cursor:pointer}
@media (display-mode:standalone){
  html,body{overscroll-behavior-y:none}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .top{padding-top:env(safe-area-inset-top)}
  .sidebar{padding-bottom:env(safe-area-inset-bottom)}
  .pwa-install-button{display:none!important}
}
@media (max-width:760px){
  .pwa-install-button span[data-pwa-install-label]{display:none}
  .pwa-install-button{min-width:40px;justify-content:center;padding-inline:10px}
  .network-status{font-size:12px}
}

/* PBJ PWA STAGE1 BEGIN */
.pwa-install-button[hidden]{display:none!important}
.pwa-install-button{gap:7px;white-space:nowrap}
.pwa-install-icon{font-size:18px;line-height:1;font-weight:800}
.network-status{position:fixed;z-index:10020;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,140%);max-width:min(92vw,520px);padding:11px 16px;border-radius:999px;background:#7f1d1d;color:#fff;font-weight:800;font-size:13px;box-shadow:0 14px 34px rgba(0,0,0,.24);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:none;text-align:center}
.network-status.show{transform:translate(-50%,0);opacity:1}
.network-status.online{background:#087443}
.pwa-update-toast{position:fixed;z-index:10021;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;max-width:min(92vw,430px);padding:12px 14px;border:1px solid var(--line,#cbddeb);border-radius:14px;background:var(--panel,#fff);color:var(--text,#10233d);box-shadow:0 16px 38px rgba(4,40,80,.2)}
.pwa-update-toast button{border:0;border-radius:10px;padding:8px 12px;background:#0a65b2;color:#fff;font-weight:800;cursor:pointer}
@media (display-mode:standalone){
  html,body{overscroll-behavior-y:none}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .top{padding-top:env(safe-area-inset-top)}
  .sidebar{padding-bottom:env(safe-area-inset-bottom)}
  .pwa-install-button{display:none!important}
}
@media (max-width:760px){
  .pwa-install-button span[data-pwa-install-label]{display:none}
  .pwa-install-button{min-width:40px;justify-content:center;padding-inline:10px}
  .network-status{font-size:12px}
}
/* PBJ PWA STAGE1 END */

/* PWA INSTALL HELP V392 */
.pwa-install-help{position:fixed;inset:0;z-index:12000;background:rgba(3,20,38,.6);display:grid;place-items:center;padding:18px}.pwa-install-help[hidden]{display:none}.pwa-install-help-card{position:relative;max-width:540px;width:100%;background:var(--panel,#fff);color:var(--text,#10233d);border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.3)}.pwa-install-help-card h3{margin-top:0}.pwa-install-help-card li{margin:9px 0}.pwa-install-help-card a{font-weight:800}.pwa-install-help-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer;color:inherit}