:root{
  --app-height:100vh;
  --paper:#F1F3EF;
  --card:#FFFFFF;
  --ink:#16241F;
  --ink-soft:#3F4E48;
  --muted:#6E7871;
  --slate:#6E7871;
  --primary:#0E6E55;
  --primary-dark:#0A5443;
  --primary-tint:#E3F1EB;
  --primary-soft:#F0F7F4;
  --amber:#C9820F;
  --amber-tint:#FBF0DC;
  --coral:#C6392E;
  --coral-tint:#FBE7E4;
  --line:#DEDACD;
  --line-soft:#E9E6DB;
  --bg-start:#E7E3D6;
  --bg-end:#DEDACC;
  --radius:18px;
  --shadow:0 16px 40px rgba(38,50,45,.10);
  --shadow-soft:0 5px 18px rgba(38,50,45,.07);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}
@supports (height:100dvh){:root{--app-height:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(145deg,var(--bg-start),var(--bg-end));color:var(--ink);overflow-x:hidden}
body{min-height:var(--app-height);-webkit-text-size-adjust:100%}
.hidden{display:none!important}
button,input,select{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* AUTH */
.auth-screen{min-height:var(--app-height);display:grid;place-items:center;padding:24px}
.auth-shell{width:min(430px,100%)}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:0 4px}
.brand-mark{width:62px;height:62px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.82);display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.brand-mark img{width:48px;height:48px;object-fit:contain}
.brand-kicker,.section-kicker,.top-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--primary);text-transform:uppercase}
.auth-brand h1{margin:2px 0 1px;font-size:26px;letter-spacing:-.02em}.auth-brand p{margin:0;color:var(--muted);font-size:13px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.auth-heading{margin-bottom:18px}.auth-heading h2{font-size:20px;margin:5px 0 0}

/* APP SHELL — UDHMA CONTRACT */
.app{min-height:var(--app-height)}
.side-nav{position:fixed;left:18px;top:18px;bottom:18px;width:238px;z-index:40;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px 12px;display:flex;flex-direction:column;overflow:hidden}
.side-brand{width:52px;height:52px;border-radius:16px;background:var(--primary-tint);border:1px solid #CDE6DB;display:grid;place-items:center;margin:1px 8px 7px}.side-brand img{width:41px;height:41px;object-fit:contain}
.side-brand-copy{padding:0 10px 14px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}.side-brand-copy strong{display:block;font-size:16px}.side-brand-copy small{color:var(--muted);font-size:11px}
.side-icons{display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;min-height:0}.side-icons::-webkit-scrollbar{display:none}.side-bottom{margin-top:auto;padding-top:9px;border-top:1px solid var(--line-soft)}
.nav-item{border:0;background:transparent;color:var(--ink-soft);display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 13px;border-radius:13px;font-weight:750;font-size:13px;text-align:left;transition:background .14s,color .14s,transform .14s}.nav-item svg{width:21px;height:21px;flex:0 0 21px}.nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-item:hover{background:var(--primary-soft);color:var(--primary)}.nav-item.active{background:var(--primary-tint);color:var(--primary-dark);box-shadow:inset 0 0 0 1px #CDE6DB}.nav-item:active{transform:scale(.985)}
.main-shell{margin-left:274px;min-height:var(--app-height);padding:18px 18px 20px 0;min-width:0}
.topbar{height:70px;position:sticky;top:18px;z-index:30;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}
.topbar-left,.topbar-actions{display:flex;align-items:center;gap:11px;min-width:0}.topbar-left strong{display:block;font-size:18px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-brand{display:none;width:42px;height:42px;border-radius:13px;background:var(--primary-tint);border:1px solid #CDE6DB;place-items:center;flex:0 0 42px}.mobile-brand img{width:34px;height:34px;object-fit:contain}
.local-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--primary-soft);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;color:var(--ink-soft)}.local-chip i,.status-badge i{width:7px;height:7px;border-radius:50%;background:var(--primary);display:inline-block}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink-soft);display:grid;place-items:center}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{background:var(--primary-soft);color:var(--primary);border-color:#CDE6DB}
.pages{width:min(1220px,100%);margin:0 auto;padding-top:16px;min-width:0}.page{display:none;min-width:0}.page.active{display:block}.bottom-dock{display:none}

/* WORKSPACE */
.workspace-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-soft);overflow:hidden;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px;padding-bottom:17px;border-bottom:1px solid var(--line-soft)}.page-head>div{min-width:0}.page-head h1{font-size:24px;line-height:1.18;margin:5px 0 4px;letter-spacing:-.025em}.page-head p{margin:0;color:var(--muted);font-size:13px}.status-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--primary-tint);border:1px solid #CDE6DB;color:var(--primary-dark);padding:8px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.section-block{border-top:1px solid var(--line-soft);margin-top:22px;padding-top:20px;min-width:0}.compact-block{margin-top:18px}.section-inline{margin-top:14px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title>div{min-width:0}.section-title h3{margin:0;font-size:16px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.kpi{background:var(--primary-soft);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}.kpi small{display:block;color:var(--muted);font-size:11px}.kpi strong{display:block;margin-top:5px;font-size:19px;overflow-wrap:anywhere}
.process-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;min-width:0}.process-flow span{position:relative;display:flex;align-items:center;gap:8px;min-width:0;background:var(--primary-tint);border:1px solid #CDE6DB;color:var(--primary-dark);padding:10px 11px;border-radius:12px;font-size:12px;font-weight:800;white-space:normal;overflow-wrap:anywhere}.process-flow span i{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),2px 2px 5px rgba(63,69,64,.08);font-style:normal;font-size:10px;font-weight:900}

/* FORMS */
.stack{display:flex;flex-direction:column;gap:13px}.gap10{gap:10px}.form-grid{display:grid;gap:12px;min-width:0}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft);min-width:0}.field{width:100%;min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;color:var(--ink);font-size:14px;outline:none;transition:border .14s,box-shadow .14s}.field:hover{border-color:#CAC5B6}.field:focus{border-color:#70A994;box-shadow:0 0 0 3px rgba(14,110,85,.11)}
.primary,.soft,.danger,.ghost{border-radius:12px;padding:11px 15px;font-weight:800;font-size:13px;border:1px solid transparent;min-height:42px}.primary{background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(14,110,85,.16)}.primary:hover{background:var(--primary-dark)}.soft{background:var(--primary-soft);border-color:var(--line);color:var(--primary-dark)}.soft:hover{background:var(--primary-tint);border-color:#CDE6DB}.danger{background:var(--coral);color:#fff}.ghost{background:transparent;color:var(--muted)}.wide{width:100%}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric-strip{display:grid;grid-template-columns:1fr 1fr;background:var(--primary-soft);border:1px solid var(--line);border-radius:14px;margin-top:14px;overflow:hidden}.metric-strip>div{padding:12px 14px}.metric-strip>div+div{border-left:1px solid var(--line)}.metric-strip small{display:block;color:var(--muted);font-size:11px}.metric-strip strong{display:block;margin-top:4px;font-size:16px}.checkline{display:flex;flex-direction:row;align-items:center;gap:9px;margin-bottom:12px}.checkline input{width:18px;height:18px;accent-color:var(--primary)}
.summary-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:12px;margin-top:12px;border-top:1px solid var(--line-soft);font-size:15px}.summary-line strong{text-align:right}.summary-line.muted{font-size:12px;color:var(--muted);margin-top:8px;padding-top:0;border-top:0}
.item-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(86px,.8fr) minmax(88px,.8fr) 42px;gap:9px;align-items:end;padding:12px;background:var(--primary-soft);border:1px solid var(--line);border-radius:14px;min-width:0}.item-row .remove{width:42px;height:42px;border:1px solid #F0C9C5;border-radius:11px;background:var(--coral-tint);color:var(--coral);font-size:20px;font-weight:800}.correction-box{margin:16px 0;padding:14px;border:1px solid #ECD6A7;background:var(--amber-tint);border-radius:14px}.correction-box>strong{display:block;color:#8A5A08;margin-bottom:10px}

/* LISTS */
.list{display:flex;flex-direction:column;gap:8px;min-width:0}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--line-soft);border-radius:13px;background:#fff;min-width:0}.list-row>div:first-child{min-width:0}.list-row strong{display:block;overflow-wrap:anywhere}.list-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere}.list-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}.mini-btn{border:1px solid #CDE6DB;background:var(--primary-tint);color:var(--primary-dark);border-radius:9px;padding:7px 9px;font-size:11px;font-weight:800}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 8px;font-size:10px;font-weight:800}.badge.ok{background:var(--primary-tint);color:var(--primary-dark)}.badge.warn{background:var(--amber-tint);color:var(--amber)}.badge.blue{background:#E7EEF5;color:#31586D}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--primary-soft);padding:5px;border:1px solid var(--line);border-radius:13px;margin-bottom:16px}.segmented button{border:0;background:transparent;color:var(--muted);padding:9px 11px;border-radius:9px;font-weight:800}.segmented button.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(38,50,45,.07)}
.settings-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-soft)}.settings-item:last-child{border-bottom:0}.settings-item small{display:block;color:var(--muted);margin-top:4px}.danger-row strong{color:var(--coral)}.year{width:120px}.topgap{margin-top:14px}

/* GROUP POPUP / SHEET */
.menu-sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px}.sheet-scrim{position:absolute;inset:0;border:0;background:rgba(22,36,31,.30)}.sheet-panel{position:relative;width:min(520px,100%);max-height:calc(var(--app-height) - 36px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px 18px 18px;box-shadow:0 22px 58px rgba(38,50,45,.22)}.sheet-handle{width:42px;height:4px;border-radius:999px;background:#C9C6BA;margin:0 auto 14px}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.sheet-head h3{margin:3px 0 0}.menu-grid{display:grid;grid-template-columns:1fr;gap:8px}.menu-option{width:100%;border:1px solid var(--line-soft);background:#fff;border-radius:14px;min-height:66px;padding:10px 12px;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:11px;text-align:left;color:var(--ink)}.menu-option:hover{background:var(--primary-soft);border-color:#CDE6DB}.menu-option-icon{width:44px;height:44px;border-radius:13px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center}.menu-option-icon svg{width:22px;height:22px}.menu-option strong{display:block;font-size:13px}.menu-option small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.menu-chevron{width:19px;height:19px;color:#89968F}

/* PDF + TOAST */
.modal{position:fixed;inset:0;z-index:100;background:rgba(22,36,31,.32);display:grid;place-items:end center;padding:16px}.pdf-panel{width:min(500px,100%);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow);text-align:center}.pdf-icon{width:58px;height:58px;border-radius:16px;background:var(--coral);color:#fff;display:grid;place-items:center;margin:0 auto 12px;font-weight:900}.pdf-panel h3{margin:4px 0}.pdf-panel p{color:var(--muted);font-size:12px;margin:6px 0 16px}.pdf-panel .button-row{margin:10px 0}.toast{position:fixed;left:50%;bottom:26px;max-width:calc(100% - 24px);transform:translate(-50%,18px);background:var(--ink);color:#fff;padding:10px 14px;border-radius:11px;font-size:12px;z-index:200;opacity:0;pointer-events:none;transition:.16s;white-space:normal;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

/* TABLET / NARROW DESKTOP — COMPACT SIDEBAR */
@media (min-width:768px) and (max-width:1100px){
  .side-nav{width:88px;left:14px;top:14px;bottom:14px;padding:12px 8px;border-radius:21px;align-items:center}.side-brand{margin:0 auto 12px}.side-brand-copy{display:none}.side-icons{width:100%;align-items:center}.side-bottom{width:100%}.nav-item{width:54px;height:50px;min-height:50px;padding:0;display:grid;place-items:center}.nav-item span{display:none}.nav-item svg{width:22px;height:22px}.main-shell{margin-left:116px;padding:14px 14px 18px 0}.topbar{top:14px;border-radius:19px}.pages{padding-top:14px}.workspace-panel{border-radius:19px}
}

/* PHONE — UDHMA BOTTOM NAV */
@media (max-width:767px){
  .process-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    html,body{background:var(--paper)}.side-nav{display:none}.main-shell{margin-left:0;padding:0;min-height:var(--app-height);background:var(--paper)}.mobile-brand{display:grid}.topbar{height:64px;top:0;border-radius:0;border-width:0 0 1px;border-color:var(--line);box-shadow:none;padding:0 12px;background:#fff}.topbar-left strong{font-size:16px}.top-kicker{font-size:9px}.local-chip{display:none}.pages{width:100%;padding:10px 9px calc(86px + env(safe-area-inset-bottom));margin:0}.workspace-panel{border:0;border-radius:0;padding:9px 5px 18px;background:transparent;box-shadow:none;overflow:visible}.page-head{margin-bottom:15px;padding:2px 0 13px}.page-head h1{font-size:21px}.page-head p{font-size:12px}.status-badge{padding:7px 9px}.bottom-dock{position:fixed;left:9px;right:9px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:70;height:66px;background:rgba(255,255,255,.99);border:1px solid var(--line);border-radius:19px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:5px;box-shadow:0 10px 28px rgba(38,50,45,.16)}.bottom-dock .nav-item{min-width:0;width:100%;height:54px;min-height:54px;padding:4px 2px;display:flex;flex-direction:column;justify-content:center;gap:3px;border-radius:13px;font-size:9px;font-weight:800;text-align:center}.bottom-dock .nav-item svg{width:20px;height:20px;flex:0 0 20px}.bottom-dock .nav-item span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}.bottom-dock .nav-item.active{background:var(--primary-tint);color:var(--primary-dark)}.section-block{margin-top:18px;padding-top:17px}.list-row,.kpi,.metric-strip,.item-row,.segmented{background:#fff}.toast{bottom:88px}
  .menu-sheet{place-items:end center;padding:0}.sheet-panel{width:100%;max-height:calc(var(--app-height) - 64px);border-radius:24px 24px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));border-width:1px 0 0}.menu-grid{gap:7px}
}
@media (max-width:560px){.form-grid.two{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-strip{grid-template-columns:1fr 1fr}.page-head{align-items:center}.page-head p{max-width:270px}.list-row{align-items:flex-start}.item-row{grid-template-columns:minmax(0,1fr) 84px 88px 40px;gap:7px;padding:10px}.item-row .field{padding-left:9px;padding-right:9px}}
@media (max-width:420px){.pages{padding-left:7px;padding-right:7px}.workspace-panel{padding-left:3px;padding-right:3px}.kpi-grid{gap:8px}.kpi{padding:12px}.kpi strong{font-size:17px}.item-row{grid-template-columns:minmax(0,1fr) 70px 74px 38px;gap:6px}.item-row .remove{width:38px}.button-row{grid-template-columns:1fr}.topbar-actions{gap:6px}.topbar .icon-btn{width:38px;height:38px}}
@media (max-width:360px){.topbar{padding:0 9px}.mobile-brand{width:38px;height:38px;flex-basis:38px}.mobile-brand img{width:30px;height:30px}.page-head h1{font-size:19px}.bottom-dock{left:6px;right:6px}.bottom-dock .nav-item{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* =========================================================
   FN PANEL 3D COLOR UI — UDHMA VISUAL DIRECTION
   Visual-only layer. No business flow or navigation changes.
   ========================================================= */
:root{
  --ui-green:#0E6E55;
  --ui-green-dark:#08513F;
  --ui-green-light:#DDF4E8;
  --ui-blue:#2877C7;
  --ui-blue-light:#E1F0FF;
  --ui-amber:#D79119;
  --ui-amber-light:#FFF0CE;
  --ui-coral:#D85C52;
  --ui-coral-light:#FFE4DF;
  --ui-purple:#7558C8;
  --ui-purple-light:#EEE8FF;
  --ui-cyan:#168D9F;
  --ui-cyan-light:#DFF6F8;
  --surface-hi:#FFFFFF;
  --surface-low:#E4E1D6;
  --shadow-3d:10px 10px 24px rgba(65,70,63,.13),-8px -8px 18px rgba(255,255,255,.78);
  --shadow-3d-soft:6px 6px 14px rgba(65,70,63,.11),-5px -5px 12px rgba(255,255,255,.76);
  --shadow-pressed:inset 4px 4px 9px rgba(66,72,65,.12),inset -4px -4px 9px rgba(255,255,255,.86);
}
html,body{
  background:
    radial-gradient(circle at 9% 8%,rgba(14,110,85,.10),transparent 25%),
    radial-gradient(circle at 92% 18%,rgba(40,119,199,.08),transparent 24%),
    linear-gradient(145deg,#ECE9DE 0%,#E1DED2 58%,#DAD7CB 100%);
}

/* Shell: soft 3D, same Udhma geometry */
.side-nav{
  background:linear-gradient(145deg,#FBFAF5,#EEECE3);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:12px 12px 30px rgba(58,65,59,.15),-8px -8px 22px rgba(255,255,255,.78);
}
.side-brand,.mobile-brand{
  background:linear-gradient(145deg,#0F6F59,#084B3D);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:5px 5px 12px rgba(21,69,55,.24),-4px -4px 10px rgba(255,255,255,.82),inset 1px 1px 0 rgba(255,255,255,.24);
}
.side-brand{width:60px;height:60px;border-radius:18px}
.side-brand img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.mobile-brand img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.topbar{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,238,230,.98));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:8px 8px 22px rgba(62,69,63,.12),-6px -6px 16px rgba(255,255,255,.75);
}
.local-chip{
  background:linear-gradient(145deg,#F7FFF9,#DFEFE7);
  box-shadow:var(--shadow-3d-soft);
  border-color:rgba(14,110,85,.12);
}
.icon-btn{
  background:linear-gradient(145deg,#FFFFFF,#E7E6DF);
  border-color:rgba(255,255,255,.92);
  box-shadow:4px 4px 10px rgba(59,66,60,.13),-3px -3px 8px rgba(255,255,255,.9);
}
.icon-btn:active{box-shadow:var(--shadow-pressed);transform:translateY(1px)}

/* Sidebar / bottom nav: colorful 3D icon states */
.nav-item{position:relative;border:1px solid transparent}
.nav-item svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.side-icons .nav-item:nth-child(1),.bottom-dock .nav-item:nth-child(1){--nav-accent:var(--ui-green);--nav-tint:var(--ui-green-light)}
.side-icons .nav-item:nth-child(2),.bottom-dock .nav-item:nth-child(2){--nav-accent:var(--ui-blue);--nav-tint:var(--ui-blue-light)}
.side-icons .nav-item:nth-child(3),.bottom-dock .nav-item:nth-child(3){--nav-accent:var(--ui-cyan);--nav-tint:var(--ui-cyan-light)}
.side-icons .nav-item:nth-child(4),.bottom-dock .nav-item:nth-child(4){--nav-accent:var(--ui-amber);--nav-tint:var(--ui-amber-light)}
.side-icons .nav-item:nth-child(5),.bottom-dock .nav-item:nth-child(5){--nav-accent:var(--ui-purple);--nav-tint:var(--ui-purple-light)}
.side-icons .nav-item:nth-child(6){--nav-accent:var(--ui-coral);--nav-tint:var(--ui-coral-light)}
.nav-item:hover{background:linear-gradient(145deg,#fff,var(--nav-tint,var(--primary-soft)));color:var(--nav-accent,var(--primary));box-shadow:var(--shadow-3d-soft)}
.nav-item.active{
  color:var(--nav-accent,var(--primary-dark));
  background:linear-gradient(145deg,#FFFFFF,var(--nav-tint,var(--primary-tint)));
  border-color:rgba(255,255,255,.92);
  box-shadow:5px 5px 12px rgba(61,68,62,.12),-4px -4px 10px rgba(255,255,255,.86),inset 1px 1px 0 rgba(255,255,255,.9);
}
.nav-item.active svg{color:var(--nav-accent,var(--primary))}

/* One connected working surface, but with tactile depth */
.workspace-panel{
  background:linear-gradient(145deg,#FFFFFF,#F2F0E8);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow-3d);
}
.page-head{border-bottom-color:rgba(75,84,77,.10)}
.section-block{border-top-color:rgba(75,84,77,.10)}

/* Dashboard: intentionally colorful like Udhma, not flat */
.kpi{
  border:1px solid rgba(255,255,255,.88);
  box-shadow:6px 6px 15px rgba(63,69,64,.11),-5px -5px 12px rgba(255,255,255,.86),inset 1px 1px 0 rgba(255,255,255,.72);
  position:relative;
  overflow:hidden;
}
.kpi::after{content:"";position:absolute;width:64px;height:64px;right:-22px;top:-25px;border-radius:50%;background:rgba(255,255,255,.34)}
.kpi:nth-child(6n+1){background:linear-gradient(145deg,#F4FFFA,var(--ui-green-light));color:#124C3C}
.kpi:nth-child(6n+2){background:linear-gradient(145deg,#F6FBFF,var(--ui-blue-light));color:#194F84}
.kpi:nth-child(6n+3){background:linear-gradient(145deg,#FFF9EA,var(--ui-amber-light));color:#80560C}
.kpi:nth-child(6n+4){background:linear-gradient(145deg,#FFF5F3,var(--ui-coral-light));color:#8C3D36}
.kpi:nth-child(6n+5){background:linear-gradient(145deg,#FAF8FF,var(--ui-purple-light));color:#4F3B8D}
.kpi:nth-child(6n+6){background:linear-gradient(145deg,#F2FCFD,var(--ui-cyan-light));color:#176773}
.kpi small{color:currentColor;opacity:.72}.kpi strong{position:relative;z-index:1}
.process-flow span{
  border-color:rgba(255,255,255,.9);
  box-shadow:4px 4px 10px rgba(63,69,64,.10),-3px -3px 8px rgba(255,255,255,.85);
}
.process-flow span:nth-of-type(1){background:linear-gradient(145deg,#F5FFFA,var(--ui-green-light));color:#12523F}
.process-flow span:nth-of-type(2){background:linear-gradient(145deg,#F7FBFF,var(--ui-blue-light));color:#225B91}
.process-flow span:nth-of-type(3){background:linear-gradient(145deg,#FFF8E7,var(--ui-amber-light));color:#865907}
.process-flow span:nth-of-type(4){background:linear-gradient(145deg,#FFF5F3,var(--ui-coral-light));color:#8D4039}
.process-flow span:nth-of-type(5){background:linear-gradient(145deg,#F8F6FF,var(--ui-purple-light));color:#554092}

/* Fields and controls: soft pressed 3D */
.field{
  background:linear-gradient(145deg,#F9F8F3,#FFFFFF);
  border-color:rgba(158,158,148,.25);
  box-shadow:inset 2px 2px 5px rgba(75,81,75,.07),inset -2px -2px 5px rgba(255,255,255,.92);
}
.field:focus{background:#fff;box-shadow:inset 2px 2px 5px rgba(75,81,75,.05),0 0 0 3px rgba(14,110,85,.14),4px 4px 10px rgba(51,85,70,.09)}
.primary,.soft,.danger,.ghost,.mini-btn{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.primary{
  background:linear-gradient(145deg,#168664,#0B5D49);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 8px 16px rgba(8,81,62,.22),inset 1px 1px 0 rgba(255,255,255,.30),inset -1px -1px 0 rgba(0,0,0,.07);
}
.soft{
  background:linear-gradient(145deg,#FFFFFF,#E9E7DF);
  border-color:rgba(255,255,255,.85);
  box-shadow:5px 5px 12px rgba(62,68,63,.11),-4px -4px 10px rgba(255,255,255,.84);
}
.danger{
  background:linear-gradient(145deg,#EC746B,#B94239);
  border-color:rgba(255,255,255,.26);
  box-shadow:0 7px 15px rgba(180,63,54,.20),inset 1px 1px 0 rgba(255,255,255,.28);
}
.primary:active,.soft:active,.danger:active,.mini-btn:active{transform:translateY(2px);box-shadow:var(--shadow-pressed)}

.metric-strip,.item-row,.correction-box,.segmented,.list-row{
  border-color:rgba(255,255,255,.86);
  box-shadow:5px 5px 13px rgba(63,69,64,.08),-4px -4px 10px rgba(255,255,255,.82);
}
.metric-strip{background:linear-gradient(145deg,#F8FFFB,#E1F1E8)}
.item-row{background:linear-gradient(145deg,#FBFFFD,#E7F2EC)}
.list-row{background:linear-gradient(145deg,#FFFFFF,#F1F0EA)}
.segmented{background:linear-gradient(145deg,#E8E6DE,#F6F5F0);box-shadow:var(--shadow-pressed)}
.segmented button.active{background:linear-gradient(145deg,#FFFFFF,#EEF6F2);box-shadow:4px 4px 9px rgba(63,69,64,.10),-3px -3px 8px rgba(255,255,255,.86)}
.mini-btn{background:linear-gradient(145deg,#F7FFFA,#DDF1E7);box-shadow:3px 3px 8px rgba(52,89,72,.10),-2px -2px 6px rgba(255,255,255,.82)}

/* Popup / bottom sheet: colorful 3D menu tiles */
.sheet-scrim{background:rgba(27,38,33,.36)}
.sheet-panel{
  background:linear-gradient(145deg,#FCFBF6,#E9E7DF);
  border-color:rgba(255,255,255,.9);
  box-shadow:16px 20px 52px rgba(42,49,44,.27),-8px -8px 22px rgba(255,255,255,.42);
}
.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.menu-option{
  min-height:94px;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto;
  border-color:rgba(255,255,255,.9);
  box-shadow:6px 6px 14px rgba(61,67,62,.12),-5px -5px 12px rgba(255,255,255,.85),inset 1px 1px 0 rgba(255,255,255,.72);
  transition:transform .12s ease,box-shadow .12s ease;
}
.menu-option .menu-chevron{display:none}
.menu-option:nth-child(6n+1){background:linear-gradient(145deg,#F7FFFB,var(--ui-green-light));--menu-color:var(--ui-green)}
.menu-option:nth-child(6n+2){background:linear-gradient(145deg,#F7FBFF,var(--ui-blue-light));--menu-color:var(--ui-blue)}
.menu-option:nth-child(6n+3){background:linear-gradient(145deg,#FFF9EB,var(--ui-amber-light));--menu-color:var(--ui-amber)}
.menu-option:nth-child(6n+4){background:linear-gradient(145deg,#FFF6F4,var(--ui-coral-light));--menu-color:var(--ui-coral)}
.menu-option:nth-child(6n+5){background:linear-gradient(145deg,#FAF8FF,var(--ui-purple-light));--menu-color:var(--ui-purple)}
.menu-option:nth-child(6n+6){background:linear-gradient(145deg,#F4FCFD,var(--ui-cyan-light));--menu-color:var(--ui-cyan)}
.menu-option-icon{
  width:48px;height:48px;border-radius:15px;
  background:linear-gradient(145deg,#FFFFFF,rgba(255,255,255,.44));
  color:var(--menu-color,var(--primary));
  border:1px solid rgba(255,255,255,.94);
  box-shadow:4px 4px 10px rgba(61,67,62,.12),-3px -3px 8px rgba(255,255,255,.86);
}
.menu-option:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.95);filter:saturate(1.04)}
.menu-option:active{transform:translateY(2px);box-shadow:var(--shadow-pressed)}

/* PDF and auth surfaces keep the same tactile language */
.auth-card,.pdf-panel{
  background:linear-gradient(145deg,#FFFFFF,#EEECE4);
  border-color:rgba(255,255,255,.90);
  box-shadow:var(--shadow-3d);
}
.brand-mark{
  background:linear-gradient(145deg,#FFFFFF,#DCEDE4);
  border-color:rgba(255,255,255,.92);
  box-shadow:var(--shadow-3d-soft);
}

@media (max-width:767px){
  html,body{background:linear-gradient(145deg,#ECE9DE,#DEDBCF)}
  .topbar{
    background:linear-gradient(145deg,#FFFFFF,#EFEEE8);
    border-bottom:1px solid rgba(255,255,255,.9);
    box-shadow:0 7px 18px rgba(62,69,63,.11);
  }
  .pages{padding-top:12px}
  .workspace-panel{
    padding:14px 12px 20px;
    border:1px solid rgba(255,255,255,.90);
    border-radius:24px;
    background:linear-gradient(145deg,#FAF9F4,#ECEAE1);
    box-shadow:8px 8px 20px rgba(62,69,63,.12),-5px -5px 14px rgba(255,255,255,.72);
  }
  .bottom-dock{
    background:linear-gradient(145deg,#FFFFFF,#EAE8E0);
    border-color:rgba(255,255,255,.92);
    box-shadow:0 12px 28px rgba(54,62,56,.19),inset 1px 1px 0 rgba(255,255,255,.84);
  }
  .bottom-dock .nav-item.active{background:linear-gradient(145deg,#FFFFFF,var(--nav-tint,var(--primary-tint)));box-shadow:4px 4px 10px rgba(62,68,63,.11),-3px -3px 8px rgba(255,255,255,.87)}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .menu-option{min-height:88px;padding:10px;grid-template-columns:44px minmax(0,1fr);gap:9px}
  .menu-option-icon{width:44px;height:44px}
}
@media (max-width:380px){
  .menu-grid{grid-template-columns:1fr}
  .menu-option{min-height:70px}
}

/* =========================================================
   PELANGGAN — UDHMA CUSTOMER READ MODEL
   Summary + filter periode + search + contained table/card.
   ========================================================= */
.customer-page .page-head{margin-bottom:14px}
.customer-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.customer-stat-card{min-width:0;padding:15px 14px;border:1px solid rgba(255,255,255,.9);border-radius:16px;background:linear-gradient(145deg,#fff,#F0EFE8);box-shadow:5px 5px 13px rgba(63,69,64,.08),-4px -4px 10px rgba(255,255,255,.82);display:flex;flex-direction:column;justify-content:center}
.customer-stat-card:nth-child(4n+1){background:linear-gradient(145deg,#F4FFFA,var(--ui-green-light));color:#124C3C}
.customer-stat-card:nth-child(4n+2){background:linear-gradient(145deg,#F6FBFF,var(--ui-blue-light));color:#194F84}
.customer-stat-card:nth-child(4n+3){background:linear-gradient(145deg,#FFF9EA,var(--ui-amber-light));color:#80560C}
.customer-stat-card:nth-child(4n+4){background:linear-gradient(145deg,#FAF8FF,var(--ui-purple-light));color:#4F3B8D}
.customer-stat-card small{font-size:10px;font-weight:700;opacity:.72}.customer-stat-card strong{font-size:18px;line-height:1.2;margin-top:5px;overflow-wrap:anywhere}.customer-stat-card span{font-size:9.5px;line-height:1.35;margin-top:5px;opacity:.74}
.customer-filter-section{padding:15px 0 5px;border-top:1px solid rgba(75,84,77,.10)}
.customer-filter-section .section-title{margin-bottom:9px}
.customer-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;overflow:visible}
.customer-chips button{appearance:none;border:1px solid rgba(255,255,255,.88);background:linear-gradient(145deg,#FFFFFF,#E9E7DF);color:var(--ink-soft);border-radius:999px;padding:9px 13px;font:inherit;font-size:11px;font-weight:800;box-shadow:4px 4px 10px rgba(62,68,63,.09),-3px -3px 8px rgba(255,255,255,.82);cursor:pointer}
.customer-chips button.active{background:linear-gradient(145deg,#168664,#0B5D49);color:#fff;border-color:rgba(255,255,255,.25);box-shadow:0 7px 14px rgba(8,81,62,.18),inset 1px 1px 0 rgba(255,255,255,.28)}
.customer-custom-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;padding:11px 12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.85);border-radius:14px;background:linear-gradient(145deg,#F8F7F1,#ECEAE1);box-shadow:inset 2px 2px 5px rgba(75,81,75,.05),inset -2px -2px 5px rgba(255,255,255,.8)}
.customer-custom-range label,.customer-search-label{display:grid;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.customer-custom-range .primary{min-height:42px;margin:0}
.customer-search-label{margin-top:8px}.customer-search-wrap{position:relative}.customer-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--slate);stroke-width:2;pointer-events:none}.customer-search-wrap .field{padding-left:38px}
.customer-list-title{margin:16px 0 9px}
.customer-table-card{width:100%;max-width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:16px;background:linear-gradient(145deg,#FFFFFF,#F1F0EA);box-shadow:5px 5px 13px rgba(63,69,64,.08),-4px -4px 10px rgba(255,255,255,.82)}
.customer-table-wrap{width:100%;max-width:100%;overflow:hidden}
.customer-summary-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;text-align:left}
.customer-summary-table th,.customer-summary-table td{min-width:0;padding:11px 9px;border-bottom:1px solid var(--line-soft);vertical-align:middle;box-sizing:border-box;overflow-wrap:anywhere}.customer-summary-table th{background:rgba(241,243,239,.86);color:var(--slate);font-size:9px;line-height:1.15;font-weight:800;letter-spacing:.025em;white-space:normal}.customer-summary-table td{font-size:10.5px;line-height:1.3}.customer-summary-table tbody tr:last-child td{border-bottom:0}
.customer-summary-table th:nth-child(1),.customer-summary-table td:nth-child(1){width:28%}.customer-summary-table th:nth-child(2),.customer-summary-table td:nth-child(2){width:18%}.customer-summary-table th:nth-child(3),.customer-summary-table td:nth-child(3){width:19%}.customer-summary-table th:nth-child(4),.customer-summary-table td:nth-child(4){width:23%}.customer-summary-table th:nth-child(5),.customer-summary-table td:nth-child(5){width:12%}
.customer-name-cell .customer-master-link{appearance:none;display:block;max-width:100%;padding:0;border:0;background:none;color:var(--primary-dark);font:inherit;font-weight:800;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer}.customer-name-cell>span,.customer-summary-table td>span{display:block;margin-top:3px;color:var(--slate);font-size:9px;line-height:1.3;font-weight:500}.customer-money-cell b{font-size:11px;white-space:normal}.customer-action-cell{text-align:right}.customer-detail-btn{width:100%;min-width:0;min-height:30px;padding:6px 5px;border-radius:9px;font-size:9px;white-space:nowrap}
.customer-table-pager{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-top:1px solid var(--line-soft)}.customer-table-pager:empty{display:none}.customer-table-pager span{flex:1;min-width:0;text-align:center;font-size:10px;color:var(--slate)}.customer-table-pager .soft{padding:8px 10px;font-size:10px}.customer-table-pager button:disabled{opacity:.45;pointer-events:none}.customer-empty{padding:18px!important;text-align:center!important;color:var(--slate)!important}
.customer-detail-panel{max-width:620px}.customer-detail-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}.customer-detail-meta{display:grid;gap:7px;padding:11px 12px;margin-bottom:14px;border:1px solid var(--line-soft);border-radius:13px;background:rgba(255,255,255,.58);font-size:11px}.customer-detail-meta span{display:flex;justify-content:space-between;gap:12px}.customer-history-list{max-height:38vh;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.58);margin-bottom:12px}.customer-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line-soft)}.customer-history-row:last-child{border-bottom:0}.customer-history-row>div{min-width:0}.customer-history-row b{display:block;font-size:11px}.customer-history-row span{display:block;margin-top:3px;font-size:9px;color:var(--slate)}.customer-history-row>strong{font-size:11px;white-space:nowrap}.customer-history-action{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.customer-history-action>strong{font-size:11px;white-space:nowrap}
@media(max-width:760px){.customer-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-custom-range{grid-template-columns:1fr 1fr}.customer-custom-range .primary{grid-column:1/-1}}
@media(max-width:560px){.customer-table-wrap{overflow:visible}.customer-summary-table,.customer-summary-table tbody{display:block;width:100%}.customer-summary-table thead{display:none}.customer-summary-table tr{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:7px 9px;border-bottom:1px solid var(--line-soft);box-sizing:border-box}.customer-summary-table tr:last-child{border-bottom:0}.customer-summary-table td,.customer-summary-table td:nth-child(n){display:flex;width:auto;min-width:0;align-items:flex-start;justify-content:space-between;gap:8px;padding:6px 5px;border:0;box-sizing:border-box}.customer-summary-table td::before{content:attr(data-label);flex:0 0 auto;max-width:46%;font-size:8px;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.02em}.customer-summary-table td.customer-name-cell{grid-column:1/-1;display:block;padding-top:8px}.customer-summary-table td.customer-name-cell::before{display:block;margin-bottom:3px;max-width:none}.customer-summary-table td.customer-action-cell{grid-column:1/-1;display:block;padding-bottom:8px}.customer-summary-table td.customer-action-cell::before{display:none}.customer-action-cell .customer-detail-btn{width:100%}.customer-summary-table td[colspan]{grid-column:1/-1;display:block;width:100%}.customer-summary-table td[colspan]::before{display:none}.customer-custom-range{grid-template-columns:1fr}.customer-custom-range .primary{grid-column:auto}.customer-chips{gap:7px}.customer-chips button{flex:1 1 calc(33.333% - 7px);padding:8px 9px;font-size:10px}.customer-detail-stats{grid-template-columns:1fr 1fr}}

/* =========================================================
   DATA TOOLBAR + TABLE — UDHMA WAGE/Gaji PATTERN
   Compact filters, contained table, mobile cards, no page-x scroll.
   ========================================================= */
.data-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;min-width:0;margin:0 0 9px}
.data-tool-select,.data-search input,.data-reset,.data-page-btn{min-height:38px;border:1px solid rgba(255,255,255,.92);border-radius:11px;background:linear-gradient(145deg,#FFFFFF,#E9E7DF);color:var(--ink-soft);box-shadow:3px 3px 8px rgba(62,68,63,.08),-2px -2px 6px rgba(255,255,255,.80);font:inherit;font-size:10.5px;font-weight:750;outline:none}
.data-tool-select{max-width:190px;padding:0 31px 0 11px;cursor:pointer}
.data-tool-select:focus,.data-search input:focus{border-color:#70A994;box-shadow:0 0 0 3px rgba(14,110,85,.10),inset 1px 1px 2px rgba(73,82,76,.04)}
.data-search{position:relative;display:block;flex:1 1 220px;min-width:150px}.data-search svg{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);stroke:var(--slate);fill:none;stroke-width:2;pointer-events:none}.data-search input{width:100%;padding:0 11px 0 34px;font-weight:600}
.data-reset{padding:0 13px;color:var(--primary-dark);cursor:pointer}.data-reset:hover,.data-page-btn:hover:not(:disabled){background:linear-gradient(145deg,#F5FFFA,#DDEFE6);color:var(--primary-dark)}
.data-custom-dates{display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px;margin:-1px 0 10px;border:1px solid rgba(255,255,255,.82);border-radius:12px;background:rgba(255,255,255,.48)}.data-custom-dates span{font-size:9px;font-weight:800;color:var(--slate)}.data-custom-dates .data-tool-select{max-width:none;flex:1 1 160px}
.data-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:0 2px}.data-filter-summary>span{font-size:10.5px;font-weight:850;color:var(--primary-dark)}.data-filter-summary small{font-size:9px;color:var(--slate);text-align:right}
.data-table-card{width:100%;max-width:100%;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:15px;background:linear-gradient(145deg,#FFFFFF,#F0EFE9);box-shadow:5px 5px 13px rgba(63,69,64,.07),-4px -4px 10px rgba(255,255,255,.80)}
.data-table-wrap{width:100%;max-width:100%;min-width:0;overflow:hidden}
.data-table{width:100%;min-width:0;max-width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.data-table th,.data-table td{min-width:0;padding:10px 9px;border-bottom:1px solid var(--line-soft);vertical-align:middle;box-sizing:border-box;overflow-wrap:anywhere}
.data-table th{background:linear-gradient(180deg,rgba(238,240,235,.94),rgba(232,233,227,.94));color:var(--slate);font-size:8.7px;line-height:1.2;font-weight:850;text-transform:uppercase;letter-spacing:.035em;white-space:normal}
.data-table td{font-size:10.3px;line-height:1.3;color:var(--ink-soft)}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover td{background:rgba(227,241,235,.36)}
.data-table td b{color:var(--ink);font-size:10.6px}.data-table td span:not(.table-status){display:block;margin-top:3px;color:var(--slate);font-size:8.9px;line-height:1.3}.data-main-cell b{color:var(--primary-dark)}.data-money-cell{text-align:right}.data-money-cell b{white-space:normal}.data-action-cell{text-align:right}
.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.table-actions .mini-btn{min-height:29px;padding:5px 7px;font-size:8.8px;border-radius:8px}
.table-status{display:inline-flex!important;align-items:center;justify-content:center;max-width:100%;margin:0!important;padding:5px 7px;border-radius:999px;font-size:8.5px!important;line-height:1.1!important;font-weight:850!important;white-space:normal;text-align:center}.table-status.ok{background:var(--ui-green-light);color:#0C644B}.table-status.warn{background:var(--ui-amber-light);color:#855906}.table-status.danger{background:var(--ui-coral-light);color:#923C35}.table-status.blue{background:var(--ui-blue-light);color:#245E96}
.amount-in{color:#137052!important}.amount-out{color:#B23F37!important}.data-empty{padding:20px 12px!important;text-align:center!important;color:var(--slate)!important;font-weight:600}
.data-pager{display:flex;align-items:center;gap:8px;width:100%;padding:9px 3px 0}.data-pager span{flex:1;min-width:0;text-align:center;color:var(--slate);font-size:9px}.data-page-btn{padding:0 11px;cursor:pointer}.data-page-btn:disabled{opacity:.42;cursor:default;box-shadow:none}

/* Data hosts must never force a page-level horizontal scroll. */
#receiptList,#inventoryList,#shipmentList,#customerList,#financeList,#productList,#bossInvoiceList,#employeeList,#operationalReportList,#reportList{width:100%;max-width:100%;min-width:0;overflow:hidden}

@media(max-width:760px){
  .data-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.data-tool-select{width:100%;max-width:none}.data-search{grid-column:1/-1;min-width:0}.data-reset{width:100%}.data-custom-dates{display:grid;grid-template-columns:1fr auto 1fr}.data-filter-summary{align-items:flex-start}.data-filter-summary small{max-width:52%}
}
@media(max-width:560px){
  .data-toolbar{grid-template-columns:1fr 1fr}.data-search{grid-column:1/-1}.data-reset{grid-column:1/-1}.data-custom-dates{grid-template-columns:1fr}.data-custom-dates span{display:none}
  .data-table-card,.data-table-wrap{overflow:visible}.data-table,.data-table tbody{display:block;width:100%}.data-table thead{display:none}.data-table tr{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:7px 9px;border-bottom:1px solid var(--line-soft);box-sizing:border-box}.data-table tr:last-child{border-bottom:0}.data-table td,.data-table td:nth-child(n){display:flex;width:auto;min-width:0;align-items:flex-start;justify-content:space-between;gap:8px;padding:6px 5px;border:0;text-align:right;box-sizing:border-box}.data-table td::before{content:attr(data-label);flex:0 0 auto;max-width:45%;font-size:7.8px;font-weight:850;color:var(--slate);text-transform:uppercase;letter-spacing:.025em;text-align:left}.data-table td.data-main-cell{grid-column:1/-1;display:block;text-align:left;padding-top:8px}.data-table td.data-main-cell::before{display:block;max-width:none;margin-bottom:3px}.data-table td.data-action-cell{grid-column:1/-1;display:block;padding-bottom:8px}.data-table td.data-action-cell::before{display:none}.data-table td.data-action-cell .table-actions{justify-content:stretch}.data-table td.data-action-cell .mini-btn{flex:1 1 auto}.data-table td[colspan]{grid-column:1/-1;display:block;width:100%;text-align:center}.data-table td[colspan]::before{display:none}.data-filter-summary small{display:none}.data-pager{padding-top:8px}.data-page-btn{padding:0 8px;font-size:9px}.data-pager span{font-size:8px}
}

/* =========================================================
   UDHMA PROJECT MASTER 2026-10-26 — WAGE RECAP CARD PATTERN
   Official FN PANEL list pattern: one record = one recap card.
   No horizontal table scrolling. Filters remain above each list.
   ========================================================= */
.wage-recap-list{display:grid;gap:10px;width:100%;min-width:0;max-width:100%}
.wage-recap-card{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,4px 5px 12px rgba(62,68,63,.06)}
.wage-recap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.wage-recap-person{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;min-width:0}
.wage-recap-person strong{min-width:0;color:var(--ink);font-size:14px;font-weight:850;line-height:1.25;overflow-wrap:anywhere}
.wage-recap-person span{display:inline-flex;align-items:center;min-height:22px;padding:4px 8px;border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);font-size:9px;font-weight:850;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wage-recap-meta{margin-top:7px;color:var(--slate);font-size:9.5px;line-height:1.35;overflow-wrap:anywhere}
.wage-recap-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}
.wage-recap-metrics.count-1{grid-template-columns:minmax(0,1fr)}
.wage-recap-metrics.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wage-recap-metrics.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wage-recap-metric{min-width:0;padding:8px 9px;border:1px solid var(--line-soft);border-radius:10px;background:var(--paper)}
.wage-recap-metric span{display:block;margin-bottom:3px;color:var(--slate);font-size:9px;font-weight:700;line-height:1.2}
.wage-recap-metric b{display:block;min-width:0;color:var(--ink);font-size:12.5px;font-weight:850;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.wage-recap-due b{color:var(--primary-dark)}
.wage-recap-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.wage-recap-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;flex-wrap:wrap}
.wage-recap-actions .mini-btn,.wage-recap-actions .soft,.wage-recap-actions .primary{min-height:32px;padding:6px 11px;font-size:10px;white-space:nowrap}
.wage-recap-empty{padding:18px 12px;border:1px dashed var(--line);border-radius:13px;background:rgba(255,255,255,.45);color:var(--slate);font-size:10px;text-align:center}
.customer-recap-host{width:100%;min-width:0;max-width:100%}
.customer-recap-host .customer-table-pager{margin-top:8px;border:0;padding:8px 2px 0}

/* Old spreadsheet hosts stay contained if legacy markup appears, but current lists use recap cards. */
.data-table-card,.data-table-wrap,.customer-table-card,.customer-table-wrap{max-width:100%;overflow:hidden}

@media(max-width:700px){
  .wage-recap-card{padding:12px}
  .wage-recap-metrics,.wage-recap-metrics.count-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wage-recap-metric b{font-size:12px}
}
@media(max-width:420px){
  .wage-recap-person{display:grid;gap:6px}
  .wage-recap-person span{width:max-content;max-width:100%}
  .wage-recap-metrics{gap:6px}
  .wage-recap-metric{padding:7px 8px}
  .wage-recap-foot{align-items:stretch;flex-direction:column}
  .wage-recap-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .wage-recap-actions>*{width:100%}
  .wage-recap-actions>*:only-child{grid-column:1/-1}
}


/* =========================================================
   RINCIAN / DETAIL SHEET — follows Udhma wage detail pattern
   ========================================================= */
.record-detail-panel{max-width:680px}
.record-detail-hero{display:grid;gap:10px;margin-bottom:12px}
.record-detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.record-detail-meta>div,.record-detail-metric{min-width:0;padding:9px 10px;border:1px solid var(--line-soft);border-radius:11px;background:var(--paper)}
.record-detail-meta span,.record-detail-metric span{display:block;margin-bottom:3px;color:var(--slate);font-size:8.8px;font-weight:750;line-height:1.2}
.record-detail-meta b,.record-detail-metric b{display:block;color:var(--ink);font-size:11.5px;font-weight:850;line-height:1.3;overflow-wrap:anywhere}
.record-detail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:13px}
.record-detail-metric.accent b{color:var(--primary-dark)}
.record-detail-section{margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft)}
.record-detail-section h4{margin:0 0 8px;color:var(--ink);font-size:11px;font-weight:900}
.record-detail-list{display:grid;gap:7px}
.record-detail-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;padding:9px 10px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.58)}
.record-detail-row>div{min-width:0}.record-detail-row b{display:block;color:var(--ink);font-size:10.5px;line-height:1.3;overflow-wrap:anywhere}.record-detail-row small{display:block;margin-top:3px;color:var(--slate);font-size:8.7px;line-height:1.35;overflow-wrap:anywhere}.record-detail-row>strong{flex:0 0 auto;color:var(--primary-dark);font-size:10.5px;text-align:right;white-space:normal}
.record-detail-note{margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--primary-tint);color:var(--ink-soft);font-size:9.4px;line-height:1.45;overflow-wrap:anywhere}
.record-detail-empty{padding:12px;border:1px dashed var(--line);border-radius:10px;color:var(--slate);font-size:9px;text-align:center}
@media(max-width:560px){.customer-history-row{align-items:flex-start}.customer-history-action{width:100%;justify-content:space-between}.record-detail-meta,.record-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.record-detail-row{display:grid;gap:5px}.record-detail-row>strong{text-align:left}}

/* v0.3.8 - Udhma-style nested transaction detail */
.record-detail-row-end{display:flex;align-items:flex-start;justify-content:flex-end;gap:7px;flex-wrap:wrap;min-width:0}
.record-detail-related-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.record-detail-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:8px 0 12px;font-size:9px;color:var(--slate)}
.customer-history-row.is-voided{opacity:.62}
.customer-history-row.is-voided b,.customer-history-row.is-voided strong{text-decoration:line-through}
@media(max-width:560px){.record-detail-row-end{justify-content:flex-start}.record-detail-related-actions{justify-content:flex-start}.record-detail-pager{justify-content:space-between}.record-detail-row-end>strong{text-align:left}}

/* =========================================================
   PDF PREVIEW GATEWAY — UDHMA PATTERN
   One final file, internal preview, stable native actions.
   ========================================================= */
#pdfPanel.modal{place-items:center;padding:24px}
.pdf-panel.pdf-preview-shell{width:min(1120px,100%);max-height:calc(var(--app-height) - 48px);overflow-y:auto;overflow-x:hidden;text-align:left;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:22px}
.pdf-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0}
.pdf-preview-head>div{min-width:0}.pdf-preview-head h3{margin:0 0 5px;font-size:20px;overflow-wrap:anywhere}.pdf-preview-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.pdf-preview-size{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.66);font-size:12px;font-weight:800;white-space:nowrap;box-shadow:2px 2px 6px rgba(61,67,62,.06),-2px -2px 5px rgba(255,255,255,.7)}
.pdf-preview-native-hint{display:grid;gap:7px;place-items:center;text-align:center;min-height:220px;padding:32px;border:1px solid rgba(255,255,255,.9);border-radius:18px;background:linear-gradient(145deg,#FFFFFF,#EEECE4);box-shadow:5px 5px 13px rgba(63,69,64,.08),-4px -4px 10px rgba(255,255,255,.8)}
.pdf-preview-native-hint b{font-size:20px;color:var(--ink)}.pdf-preview-native-hint span{max-width:620px;color:var(--muted);font-size:12px;line-height:1.55}
.pdf-preview-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px;flex-wrap:wrap}.pdf-preview-actions button{min-width:150px;min-height:50px}.pdf-preview-actions button:disabled{opacity:.55;cursor:wait;transform:none}
@media(max-width:767px){#pdfPanel.modal{place-items:end center;padding:0}.pdf-panel.pdf-preview-shell{width:100%;max-height:calc(var(--app-height) - 64px);border-radius:24px 24px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}.pdf-preview-head{display:grid}.pdf-preview-size{justify-self:start}.pdf-preview-native-hint{min-height:220px;padding:28px 18px}.pdf-preview-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}.pdf-preview-actions button{width:100%;min-width:0;min-height:48px}}

/* PRODUCT CODE + ITEM INPUT LAYOUT v0.5.0 */
.item-row{grid-template-columns:minmax(0,1fr) minmax(96px,.55fr) 42px;align-items:end}
.item-row .item-product{grid-column:1/-1;min-width:0}
.item-row .item-product .field{width:100%}
.item-row .item-qty{grid-column:1/2;min-width:0}
.item-row .item-unit{grid-column:2/3;min-width:0}
.item-row .remove{grid-column:3/4}
.product-code{display:inline-flex;max-width:100%;margin-right:6px;padding:3px 7px;border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);font-size:9px;font-weight:900;letter-spacing:.04em;vertical-align:middle}
@media(max-width:560px){.item-row{grid-template-columns:minmax(0,1fr) minmax(88px,.5fr) 40px}.item-row .item-product{grid-column:1/-1}.item-row .item-qty{grid-column:1/2}.item-row .item-unit{grid-column:2/3}.item-row .remove{grid-column:3/4}}
@media(max-width:420px){.item-row{grid-template-columns:minmax(0,1fr) 78px 38px}.item-row .item-product{grid-column:1/-1}}

/* Master Produk: one record, two price groups, no horizontal overflow. */
.product-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:9px;margin:0 0 15px;min-width:0}
.product-action-grid button{min-width:0;min-height:43px;white-space:normal}
.product-price-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.product-price-box{border:1px solid var(--line);background:var(--primary-soft);border-radius:16px;padding:15px;min-width:0}
.product-price-box h4{font-size:14px;margin:0 0 5px;color:var(--primary-dark)}
.product-price-box p,.product-excel-note{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 13px}
.product-price-box .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-price-box label{min-width:0}
.product-price-box input{max-width:100%}
.product-excel-summary{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.product-excel-summary span{font-size:12px;font-weight:800;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:#fff}
#productExcelPreviewRows{max-height:320px;overflow-y:auto;overflow-x:hidden;margin:10px 0 14px}
@media(max-width:700px){.product-price-groups{grid-template-columns:1fr}}
@media(max-width:390px){.product-price-box .form-grid.two{grid-template-columns:1fr}}


/* FN PANEL — finance summary and entry panels (scope: Keuangan) */
#page-finance .page-head{gap:12px;flex-wrap:wrap}
.finance-action-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.finance-action-buttons .primary,.finance-action-buttons .soft{flex:1 1 auto;white-space:normal;min-width:128px}
.finance-overview{margin:2px 0 19px;min-width:0}
.finance-overview-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 11px;flex-wrap:wrap}
.finance-overview-head h3{margin:0;font-size:14px}
.finance-overview-head span{font-size:10px;font-weight:700;color:var(--slate)}
.finance-overview-grid{display:flex;flex-wrap:wrap;gap:10px;min-width:0;align-items:stretch}
.finance-summary-card{flex:1 1 175px;min-width:0;min-height:104px;box-sizing:border-box;padding:15px 12px;border:1px solid rgba(255,255,255,.9);border-radius:17px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;box-shadow:4px 5px 12px rgba(63,69,64,.085),inset 1px 1px 0 #fff;overflow:hidden}
.finance-summary-card:nth-child(5n+1){background:linear-gradient(145deg,#F4FFFA,var(--ui-green-light))}
.finance-summary-card:nth-child(5n+2){background:linear-gradient(145deg,#F6FBFF,var(--ui-blue-light))}
.finance-summary-card:nth-child(5n+3){background:linear-gradient(145deg,#FFF9EA,var(--ui-amber-light))}
.finance-summary-card:nth-child(5n+4){background:linear-gradient(145deg,#FAF8FF,var(--ui-purple-light))}
.finance-summary-card:nth-child(5n+5){background:linear-gradient(145deg,#F2FCFD,var(--ui-cyan-light))}
.finance-summary-card span{font-size:11px;color:#344b43;font-weight:800;overflow-wrap:anywhere}
.finance-summary-card strong{font-size:clamp(15px,1.38vw,21px);line-height:1.2;letter-spacing:-.02em;font-weight:900;color:#183c32;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.finance-summary-card small{font-size:9px;line-height:1.35;color:#687671;overflow-wrap:anywhere}
#incomeEntryPanel,#financeEntryPanel{min-width:0}
#incomeEntryPanel>label,#financeEntryPanel>label{display:block;margin:12px 0}
#incomeBankWrap:not(.hidden){margin-top:12px}
@media(max-width:650px){.finance-overview-grid{flex-direction:column;gap:8px}.finance-summary-card{flex:0 0 auto;width:100%;min-height:90px}.finance-summary-card strong{font-size:20px}.finance-action-buttons{width:100%}.finance-action-buttons .primary,.finance-action-buttons .soft{flex:1 1 calc(50% - 8px);min-width:0;padding-inline:8px}}

/* Operasional: identitas warna tetap pada menu walau posisi kartu ditukar. */
.menu-grid-operations>.menu-option[data-menu-page="shipment"]{background:linear-gradient(145deg,#FFF9EB,var(--ui-amber-light));--menu-color:var(--ui-amber)}
.menu-grid-operations>.menu-option[data-menu-page="warehouse"]{background:linear-gradient(145deg,#F7FBFF,var(--ui-blue-light));--menu-color:var(--ui-blue)}
/* Operasional: 3 kartu mengisi grid tanpa slot kosong (scope revisi menu). */
.menu-grid-operations>.menu-option:last-child{grid-column:1/-1;justify-content:center;grid-template-columns:48px minmax(0,max-content)}
@media(max-width:380px){.menu-grid-operations>.menu-option:last-child{grid-template-columns:44px minmax(0,1fr);justify-content:stretch}}

/* Pembelian Barang: compact layout only; no data, price or payment logic changes. */
#receiptEntryPanel > .section-block{margin-top:16px;padding-top:14px}
#receiptEntryPanel > .section-block .section-title{margin-bottom:10px}
#receiptItems{gap:9px}
.receipt-item-row{
  grid-template-columns:minmax(0,1fr) minmax(86px,.33fr) minmax(118px,1.1fr) 42px;
  gap:9px;align-items:end;padding:11px;
}
.receipt-item-row label{gap:5px;font-size:11px;line-height:1.3}
.receipt-item-row .item-product:first-child{grid-column:1/3}
.receipt-item-row .item-product:nth-child(2){grid-column:3/5}
.receipt-item-row .item-qty{grid-column:1/2;min-width:0}
.receipt-item-row .item-unit{grid-column:2/3;min-width:0}
.receipt-item-row .item-price{grid-column:3/4;min-width:0}
.receipt-item-row .remove{grid-column:4/5}
.receipt-item-row .field{width:100%;min-width:0;min-height:42px;padding:9px 11px}
.receipt-item-row .remove{height:42px}
.receipt-choice-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px 22px;
  margin:0 0 12px;padding:2px 0;
}
.receipt-choice-row .checkline{
  flex:1 1 185px;min-width:0;min-height:27px;
  flex-direction:row;align-items:center;gap:8px;
  padding:0;margin:0;background:transparent;border:0;border-radius:0;
  font-size:12px;line-height:1.35;font-weight:750;
}
.receipt-choice-row .checkline input{width:17px;height:17px;flex:0 0 17px;margin:0}
.receipt-choice-row .receipt-bon-locked input:disabled{opacity:1;cursor:default}
.receipt-summary-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px;row-gap:0;margin-top:14px;padding:10px 14px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(145deg,#FBFFFC,#ECF5EF);min-width:0;
}
.receipt-summary-grid .summary-line,
.receipt-summary-grid .summary-line.muted{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-width:0;margin:0;padding:7px 0;
  border:0;background:transparent;color:var(--muted);
  font-size:11px;line-height:1.3;
}
.receipt-summary-grid .summary-line span{min-width:0;overflow-wrap:anywhere}
.receipt-summary-grid .summary-line strong{
  color:var(--ink);font-size:12px;font-weight:850;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.receipt-summary-grid .summary-line:first-child{
  grid-column:1/-1;border-bottom:1px solid var(--line);margin-bottom:3px;
  padding:2px 0 10px;color:var(--ink);font-size:14px;font-weight:850;
}
.receipt-summary-grid .summary-line:first-child strong{font-size:18px;color:var(--primary-dark)}
#receiptEntryPanel > #finalizeReceipt{min-height:46px;margin-top:16px}
@media(max-width:700px){
  .receipt-item-row{grid-template-columns:minmax(0,1fr) 90px minmax(100px,.54fr) 40px;gap:8px}
  .receipt-item-row .item-product:first-child{grid-column:1/-1}
  .receipt-item-row .item-product:nth-child(2){grid-column:1/-1}
}
@media(max-width:560px){
  .receipt-item-row{grid-template-columns:minmax(0,1fr) minmax(85px,.45fr) 40px;gap:8px;padding:10px}
  .receipt-item-row .item-qty{grid-column:1/2}
  .receipt-item-row .item-unit{grid-column:2/3}
  .receipt-item-row .item-price{grid-column:1/3}
  .receipt-item-row .remove{grid-column:3/4}
  .receipt-choice-row{flex-wrap:nowrap;gap:12px}
  .receipt-choice-row .checkline{flex:1 1 0;font-size:11px;gap:6px}
  .receipt-summary-grid{column-gap:12px;padding:9px 11px}
  .receipt-summary-grid .summary-line,.receipt-summary-grid .summary-line.muted{font-size:10.5px;gap:6px}
  .receipt-summary-grid .summary-line strong{font-size:11.5px}
}
@media(max-width:390px){
  .receipt-summary-grid{grid-template-columns:1fr}
  .receipt-summary-grid .summary-line,.receipt-summary-grid .summary-line.muted{padding:5px 0;font-size:11px}
  .receipt-summary-grid .summary-line strong{font-size:12px}
  .receipt-summary-grid .summary-line:first-child{font-size:13px}
  .receipt-summary-grid .summary-line:first-child strong{font-size:17px}
}
@media(max-width:330px){
  .receipt-choice-row{flex-wrap:wrap;gap:7px}
  .receipt-choice-row .checkline{flex:1 1 100%}
}

/* Invoice Bos Pusat: 4 kartu ringkasan di atas riwayat, mengikuti filter periode. */
#page-boss .boss-overview{margin:3px 0 18px;min-width:0}
#page-boss .boss-overview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px}
#page-boss .boss-overview-head h3{font-size:14px;line-height:1.4;margin:0}
#page-boss .boss-overview-head span{font-size:11px;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
#page-boss .boss-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch;min-width:0}
#page-boss .boss-summary-card{box-sizing:border-box;min-width:0;min-height:107px;padding:14px 13px;border:1px solid rgba(255,255,255,.9);border-radius:17px;box-shadow:4px 5px 12px rgba(63,69,64,.085),inset 1px 1px 0 #fff;display:flex;flex-direction:column;justify-content:space-between;gap:7px}
#page-boss .boss-summary-card:nth-child(1){background:linear-gradient(145deg,#F4FFFA,var(--ui-green-light))}
#page-boss .boss-summary-card:nth-child(2){background:linear-gradient(145deg,#F6FBFF,var(--ui-blue-light))}
#page-boss .boss-summary-card:nth-child(3){background:linear-gradient(145deg,#F2FCFD,var(--ui-cyan-light))}
#page-boss .boss-summary-card:nth-child(4){background:linear-gradient(145deg,#FFF9EA,var(--ui-amber-light))}
#page-boss .boss-summary-card span{font-size:11px;color:#344b43;font-weight:800;overflow-wrap:anywhere}
#page-boss .boss-summary-card strong{font-size:clamp(15px,1.32vw,21px);line-height:1.2;font-weight:900;letter-spacing:-.02em;color:#183c32;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#page-boss .boss-summary-card small{font-size:10px;line-height:1.35;color:#687671;overflow-wrap:anywhere}
@media(max-width:1100px){#page-boss .boss-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){#page-boss .boss-overview-grid{gap:8px}#page-boss .boss-summary-card{padding:12px 10px;min-height:102px}#page-boss .boss-summary-card strong{font-size:16px}}


/* Empat ringkasan operasional baru: tanpa kartu kosong atau scroll horizontal. */
.operations-summary{margin:3px 0 18px;min-width:0}
.operations-summary-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.operations-summary-head h3{font-size:14px;line-height:1.4;margin:0}
.operations-summary-head span{font-size:11px;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.operations-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch;min-width:0}
.operations-summary-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.operations-summary-card{box-sizing:border-box;min-width:0;min-height:107px;padding:14px 13px;border:1px solid rgba(255,255,255,.9);border-radius:17px;box-shadow:4px 5px 12px rgba(63,69,64,.085),inset 1px 1px 0 #fff;display:flex;flex-direction:column;justify-content:space-between;gap:7px}
.operations-summary-card:nth-child(4n+1){background:linear-gradient(145deg,#F4FFFA,var(--ui-green-light))}
.operations-summary-card:nth-child(4n+2){background:linear-gradient(145deg,#F6FBFF,var(--ui-blue-light))}
.operations-summary-card:nth-child(4n+3){background:linear-gradient(145deg,#F2FCFD,var(--ui-cyan-light))}
.operations-summary-card:nth-child(4n+4){background:linear-gradient(145deg,#FFF9EA,var(--ui-amber-light))}
.operations-summary-card span{font-size:11px;color:#344b43;font-weight:800;overflow-wrap:anywhere}
.operations-summary-card strong{font-size:clamp(15px,1.32vw,21px);line-height:1.2;font-weight:900;letter-spacing:-.02em;color:#183c32;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.operations-summary-card small{font-size:10px;line-height:1.35;color:#687671;overflow-wrap:anywhere}
@media(max-width:1100px){.operations-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.operations-summary-grid.three{grid-template-columns:1fr}}
@media(max-width:420px){.operations-summary-grid{gap:8px}.operations-summary-card{padding:12px 10px;min-height:102px}.operations-summary-card strong{font-size:16px}}

/* Saldo per Bos: terpisah dari kartu ringkasan invoice periode. */
#page-boss .boss-balance-overview{margin:0 0 18px;min-width:0}
#page-boss .boss-balance-grid{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
#page-boss .boss-balance-card{box-sizing:border-box;flex:1 1 260px;min-width:0;padding:14px;border:1px solid rgba(255,255,255,.93);border-radius:17px;background:linear-gradient(145deg,#f7fcfa,#e9f5ef);box-shadow:4px 5px 12px rgba(63,69,64,.08),inset 1px 1px 0 #fff;display:flex;flex-direction:column;gap:8px}
#page-boss .boss-balance-title{font-weight:900;color:#234a3b;font-size:14px;overflow-wrap:anywhere}
#page-boss .boss-balance-status{font-size:10px;font-weight:800;color:#52665c}
#page-boss .boss-balance-status.negative,#page-boss .boss-balance-value.negative{color:#a23c34}
#page-boss .boss-balance-status.positive,#page-boss .boss-balance-value.positive{color:#08734e}
#page-boss .boss-balance-value{display:block;font-size:clamp(18px,2vw,24px);line-height:1.2;letter-spacing:-.025em;color:#234a3b;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#page-boss .boss-balance-details{display:grid;gap:5px;padding-top:8px;border-top:1px solid rgba(70,100,85,.14)}
#page-boss .boss-balance-details span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;color:#4b6055}
#page-boss .boss-balance-details b{font-size:12px;color:#244638;text-align:right;overflow-wrap:anywhere}
#page-boss .boss-balance-note{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0 0}
@media(max-width:460px){#page-boss .boss-balance-card{flex-basis:100%;padding:12px}#page-boss .boss-balance-value{font-size:21px}}


/* Penjualan Barang: pencarian stok per baris, mengikuti pola Pembelian. */
#shipmentItems .shipment-item-row{
  grid-template-columns:minmax(0,1fr) 90px minmax(110px,1.1fr) 42px;
  gap:9px;align-items:end;padding:11px;
}
#shipmentItems .shipment-item-row .item-product{min-width:0;grid-column:auto}
#shipmentItems .shipment-item-row .s-search-label{grid-column:1/3}
#shipmentItems .shipment-item-row .s-select-label{grid-column:3/5}
#shipmentItems .shipment-item-row .item-qty{grid-column:1/3;min-width:0}
#shipmentItems .shipment-item-row .item-unit{grid-column:3/4;min-width:0}
#shipmentItems .shipment-item-row .remove{grid-column:4/5;height:42px}
#shipmentItems .shipment-item-row .field{width:100%;min-width:0;min-height:42px;padding:9px 11px}
@media(max-width:700px){
  #shipmentItems .shipment-item-row{grid-template-columns:minmax(0,1fr) minmax(85px,.43fr) 40px;gap:8px}
  #shipmentItems .shipment-item-row .s-search-label,
  #shipmentItems .shipment-item-row .s-select-label{grid-column:1/-1}
  #shipmentItems .shipment-item-row .item-qty{grid-column:1/2}
  #shipmentItems .shipment-item-row .item-unit{grid-column:2/3}
  #shipmentItems .shipment-item-row .remove{grid-column:3/4}
}

/* Dedicated dismantle form; styles scoped to the new workflow only. */
#dismantleOutputs .dismantle-output-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(90px,.6fr) minmax(92px,.55fr) minmax(135px,.8fr) 42px;gap:10px;align-items:end;padding:12px;border:1px solid var(--line,#d8ddd8);border-radius:16px;background:rgba(216,241,232,.24)}
#dismantleOutputs .dismantle-output-row label{min-width:0;font-size:12px;font-weight:650}
#dismantleOutputs .dismantle-output-row .field{display:block;width:100%;min-width:0;margin-top:5px}
#dismantleOutputs .dismantle-output-row button.remove{height:42px;width:40px}
@media(max-width:800px){#dismantleOutputs .dismantle-output-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px;gap:8px}#dismantleOutputs .dismantle-output-row .dm-result-product{grid-column:1/-1}#dismantleOutputs .dismantle-output-row .dm-result-cost{grid-column:1/3}#dismantleOutputs .dismantle-output-row .remove{grid-column:3;grid-row:3}}
@media(max-width:390px){#dismantleOutputs .dismantle-output-row{padding:9px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px}}

/* New operations: keep 2-column cards and use the full last row for the 5th card. */
.menu-grid-operations>.menu-option[data-menu-page="dismantle"]{background:linear-gradient(145deg,#FFF9EB,var(--ui-amber-light));--menu-color:var(--ui-amber)}
.menu-grid-operations>.menu-option[data-menu-page="dismantle-warehouse"]{background:linear-gradient(145deg,#F7FBFF,var(--ui-blue-light));--menu-color:var(--ui-blue)}
.dismantle-result-summary{display:flex;flex-wrap:wrap;gap:6px}.dismantle-result-summary span{display:inline-block;padding:4px 8px;border-radius:9px;background:rgba(16,128,105,.09);font-size:11px}

/* Proses Bongkar & Gudang Bongkar: filters fill rows without a stranded Reset button. */
@media (max-width:1100px){
  #page-dismantle .data-toolbar,
  #page-dismantle-warehouse .data-toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  #page-dismantle .data-toolbar>.data-tool-select,
  #page-dismantle-warehouse .data-toolbar>.data-tool-select{
    flex:0 0 calc(50% - 4px)!important;
    width:calc(50% - 4px)!important;
    max-width:calc(50% - 4px)!important;
    min-width:0!important;
  }
  #page-dismantle .data-toolbar>.data-search,
  #page-dismantle-warehouse .data-toolbar>.data-search{
    grid-column:auto!important;
    flex:1 1 calc(100% - 84px)!important;
    min-width:0!important;
  }
  #page-dismantle .data-toolbar>.data-reset,
  #page-dismantle-warehouse .data-toolbar>.data-reset{
    grid-column:auto!important;
    flex:0 0 76px!important;
    width:76px!important;
    max-width:76px!important;
    padding:0 8px!important;
  }
}

/* Penjualan Barang: setiap baris memilih Gudang Utama atau Gudang Bongkar. */
#shipmentItems .shipment-item-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) 42px;
}
#shipmentItems .shipment-item-row .s-warehouse-label{grid-column:1/2;min-width:0}
#shipmentItems .shipment-item-row .s-search-label{grid-column:2/3}
#shipmentItems .shipment-item-row .s-select-label{grid-column:3/5}
#shipmentItems .shipment-item-row .item-qty{grid-column:1/3}
#shipmentItems .shipment-item-row .item-unit{grid-column:3/4}
#shipmentItems .shipment-item-row .remove{grid-column:4/5}
@media(max-width:700px){
  #shipmentItems .shipment-item-row{grid-template-columns:minmax(0,1fr) minmax(85px,.43fr) 40px}
  #shipmentItems .shipment-item-row .s-warehouse-label,
  #shipmentItems .shipment-item-row .s-search-label,
  #shipmentItems .shipment-item-row .s-select-label{grid-column:1/-1}
  #shipmentItems .shipment-item-row .item-qty{grid-column:1/2}
  #shipmentItems .shipment-item-row .item-unit{grid-column:2/3}
  #shipmentItems .shipment-item-row .remove{grid-column:3/4}
}

/* PDF browser preview only: existing APK panel/layout remains unchanged. */
.pdf-browser-frame{display:block;width:100%;height:min(69vh,680px);border:1px solid var(--line,#d9ddd8);border-radius:12px;background:white;margin:12px 0;}
.pdf-browser-frame.hidden{display:none;}