:root{
  /* Brand Sumatra Diesel — teal logo + orange piston */
  --bg:#F3F7F6;
  --bg-soft:#E7F0EE;
  --panel:#FFFFFF;
  --line:#D5E3DF;
  --ink:#12201E;
  --ink-soft:#3D4F4B;
  --ink-faint:#7C908A;
  --accent:#E8631C;
  --accent-soft:#F08A4B;
  --accent-bg:rgba(232,99,28,.12);
  --teal:#0F9E96;
  --teal-bg:rgba(15,158,150,.10);
  --red:#D45B4A;
  --red-bg:rgba(212,91,74,.10);
  --sidebar:#0F1E1B;
  --sidebar-2:#173330;
  --sidebar-text:#A3BBB5;
  --sidebar-line:rgba(255,255,255,.08);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px -18px rgba(15,30,27,.16);
  --shadow-sm:0 4px 14px -8px rgba(15,30,27,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#app-screen,#login-screen{position:relative; z-index:1;}
h1,h2,h3{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700; margin:0; letter-spacing:-.02em;}
table{border-collapse:collapse; width:100%;}
.mono{font-weight:600; font-variant-numeric:tabular-nums;}
button,input,select,textarea{font-family:inherit;}
button{cursor:pointer;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes softIn{from{opacity:0}to{opacity:1}}

/* SPLASH */
.login-splash{
  position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center;
  background:linear-gradient(165deg, #0C1917 0%, #0F1E1B 45%, #173330 100%);
}
.login-splash.is-on{display:flex !important;}
.login-splash::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(232,99,28,.18), transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, #000 15%, transparent 75%);
}
.login-splash__logo-wrap{
  position:relative; z-index:1; width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
  border-radius:26px; margin-bottom:28px;
  background:#fff; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  opacity:0; transform:scale(.88);
  animation:sd-logo-in 1.25s cubic-bezier(.16,1,.3,1) forwards;
  overflow:hidden;
}
.login-splash__logo{width:100%; height:100%; object-fit:contain; display:block;}
.login-splash__typing{
  position:relative; z-index:1; min-height:1.5em; margin:0;
  font-size:clamp(18px, 3vw, 24px); font-weight:700; color:#F8FAFC; letter-spacing:-.02em;
}
.login-splash__sub{
  position:relative; z-index:1; margin:10px 0 0; max-width:28ch;
  font-size:clamp(11px, 2.2vw, 13px); font-weight:500; line-height:1.45;
  color:#A8C0BA; letter-spacing:.01em;
  opacity:0; transform:translateY(6px);
  transition:opacity .55s ease, transform .55s ease;
}
.login-splash__sub.is-on{opacity:1; transform:translateY(0); transition-duration:.7s;}
.login-splash__cursor{
  display:inline-block; width:2px; height:1em; margin-left:4px;
  background:var(--accent-soft); vertical-align:text-bottom;
  animation:sd-cursor-blink 1.15s ease-in-out infinite;
}
.login-splash--out{animation:sd-splash-out .9s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none;}
@keyframes sd-logo-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes sd-cursor-blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
@keyframes sd-splash-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02);visibility:hidden}}

/* LOGIN */
#login-screen{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity .95s var(--ease), transform .95s var(--ease), visibility .95s;
}
#login-screen.login-screen--visible{opacity:1; visibility:visible; transform:translateY(0);}
#login-screen.hidden,#app-screen.hidden{display:none !important;}

.login-brand{
  position:relative; color:#F8FAFC; padding:56px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  background:linear-gradient(160deg, #0C1917 0%, #0F1E1B 48%, #1A3D38 100%);
  animation:softIn .6s var(--ease);
}
.login-brand::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 360px at 20% 20%, rgba(232,99,28,.22), transparent 60%),
    radial-gradient(500px 300px at 90% 80%, rgba(15,158,150,.20), transparent 55%);
}
.login-brand > *{position:relative; z-index:1;}
.login-brand .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:24px;
}
.login-brand .mark{width:36px; height:3px; border-radius:99px; background:var(--accent); margin-bottom:22px;}
.login-brand h1{font-size:clamp(36px, 4.5vw, 52px); line-height:1.05; max-width:10ch; margin-bottom:16px;}
.login-brand .tagline{font-size:15px; line-height:1.7; color:#A8C0BA; max-width:32ch; font-weight:400;}
.login-brand .foot{
  font-size:12px; font-weight:500; color:#7A908A;
  border-top:1px solid rgba(255,255,255,.08); padding-top:20px; margin-top:40px;
}

.login-panel{
  display:flex; align-items:center; justify-content:center; padding:48px 40px;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(232,99,28,.08), transparent 50%),
    var(--bg);
  animation:fadeUp .55s var(--ease) .08s both;
}
.login-card{
  width:100%; max-width:400px; background:var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:32px 28px;
  box-shadow:var(--shadow);
}
.login-card-logo{
  width:72px; height:72px; margin:0 auto 16px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.login-card-logo img{width:100%; height:100%; object-fit:contain;}
.login-card .form-kicker{
  text-align:center; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
}
.login-card h2{text-align:center; font-size:28px; margin-bottom:8px;}
.login-card .lead{text-align:center; font-size:13.5px; color:var(--ink-soft); margin:0 0 24px; line-height:1.6;}

.setup-banner{
  font-size:12.5px; line-height:1.55; color:#8A5A12;
  background:#FFF8E8; border:1px solid #F3E0A8; border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:16px;
}
.setup-banner a{color:#C2410C; font-weight:600;}
.setup-banner[hidden]{display:none !important;}
.login-card.error-shake{animation:sd-shake .32s ease;}
@keyframes sd-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.field{margin-bottom:14px;}
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:7px;
}
.field input,.field select,.field textarea,
.search-row input,.toolbar input,.toolbar select{
  width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; font-size:14px; border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus,
.search-row input:focus,.toolbar input:focus,.toolbar select:focus{
  outline:none; border-color:#E8631C; background:#fff;
  box-shadow:0 0 0 3px var(--accent-bg);
}
.field textarea{min-height:72px; resize:vertical;}
.login-error{font-size:12.5px; color:var(--red); margin-bottom:12px; display:none;}
.login-error.show{display:block;}
.login-ok{font-size:12.5px; color:var(--teal); margin-bottom:12px; font-weight:600; line-height:1.45;}
.login-alt{margin:14px 0 0; text-align:center;}
.login-link{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:650; color:var(--teal);
  text-decoration:underline; text-underline-offset:3px;
}
.login-link:hover{color:#0D7370;}

.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:10px 14px; font-size:13px; font-weight:600; border-radius:var(--radius-sm);
  transition:border-color .2s, background .2s, color .2s;
}
.btn:hover{border-color:#CBD5E1; background:var(--bg-soft);}
.btn-primary{
  width:100%; background:linear-gradient(135deg, #0F1E1B, #173330); color:#fff;
  border:none; padding:14px; font-size:14px; font-weight:700; border-radius:12px;
  box-shadow:var(--shadow-sm); transition:transform .15s, filter .2s;
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{background:#CBD5E1; color:#7C908A; box-shadow:none; cursor:not-allowed; filter:none;}
.btn-danger{color:var(--red); border-color:#F1C9C3; background:var(--red-bg);}
.btn-sm{padding:7px 10px; font-size:12px;}

/* Tombol aksi icon (Lucide) — ukuran seragam */
.ico-btn{
  width:34px; height:34px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; flex:0 0 auto;
  border:1px solid var(--line); background:var(--panel); color:#334155;
  cursor:pointer; box-shadow:none;
  transition:background .15s, border-color .15s, color .15s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.ico-btn:hover{
  background:#E8F1EF; border-color:#CBD5E1; color:#0F172A;
}
.ico-btn:active{transform:translateY(1px);}
.ico-btn svg,
.ico-btn .lucide,
.ico-btn .lucide-ico,
.ico-btn i{
  width:16px; height:16px;
  pointer-events:none;
  stroke:currentColor !important;
  fill:none !important;
  color:inherit;
}
.ico-btn.ico-btn--primary{
  width:34px; height:34px; padding:0;
  background:linear-gradient(135deg, #0F1E1B, #173330);
  color:#fff;
  border:1px solid transparent;
  box-shadow:var(--shadow-sm);
}
.ico-btn.ico-btn--primary:hover{
  background:linear-gradient(135deg, #173330, #334155);
  color:#fff;
  border-color:transparent;
}
.ico-btn.ico-btn--danger{
  color:#B91C1C;
  border-color:#F1C9C3;
  background:var(--red-bg);
}
.ico-btn.ico-btn--danger:hover{
  background:#FEE2E2;
  color:#991B1B;
  border-color:#FECACA;
}
.ico-btn:disabled,
.ico-btn.ico-btn--primary:disabled,
.ico-btn.ico-btn--danger:disabled{
  opacity:.4; cursor:not-allowed; filter:none;
}

/* Pastikan aksi di semua tabel/kartu tidak meregang */
.pay-aksi .ico-btn,
.emp-aksi .ico-btn,
.emp-card-aksi .ico-btn,
.upah-aksi .ico-btn,
.upah-card-aksi .ico-btn,
.plg-aksi .ico-btn,
.plg-card-aksi .ico-btn,
.mb-act .ico-btn,
.ptg-td-act .ico-btn,
.ptg-col-act .ico-btn,
.svc-c-act .ico-btn,
.svc-td-act .ico-btn,
.svc-more .ico-btn,
.po-td-act .ico-btn,
.po-col-act .ico-btn,
.po-line-side .ico-btn,
.m-rw-nota-btn .ico-btn,
.m-rw-aksi .ico-btn{
  flex:0 0 auto !important;
  width:34px !important; min-width:34px !important; max-width:34px !important;
  height:34px !important; padding:0 !important;
}

/* SHELL */
.shell{display:flex; min-height:100vh; align-items:stretch;}
.sidebar{
  width:272px; flex-shrink:0;
  position:sticky; top:0; height:100vh; max-height:100vh;
  padding:20px 14px 16px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(500px 280px at 0% 0%, rgba(232,99,28,.14), transparent 55%),
    linear-gradient(180deg, #0E1C1A 0%, #0F1E1B 55%, #14302C 100%);
  color:var(--sidebar-text);
  border-right:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  transition:width .25s var(--ease), padding .25s var(--ease);
  z-index:20;
}
.sidebar-top{flex:1; min-height:0; display:flex; flex-direction:column;}
.sidebar .brand-row{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:10px 6px 18px; border-bottom:1px solid var(--sidebar-line); flex-shrink:0;
}
.sidebar .brand-logo{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:#fff; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.sidebar .brand-logo img{width:100%; height:100%; object-fit:contain;}
.sidebar .brand-text{min-width:0; flex:1;}
.sidebar .mark{display:none;}
.sidebar .brand{font-size:15px; font-weight:700; color:#F8FAFC; letter-spacing:-.02em; line-height:1.2; white-space:nowrap;}
.sidebar .sub{font-size:11px; font-weight:500; color:#7C8A9A; margin-top:2px; white-space:nowrap;}
.sidebar-collapse-btn{
  width:28px; height:28px; flex-shrink:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:#CBD5E1; font-size:16px; line-height:1; font-weight:700;
  transition:background .15s, color .15s, transform .2s;
}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.1); color:#fff;}
.nav{flex:1; overflow-y:auto; overflow-x:hidden; padding:0 4px 8px; min-height:0; scrollbar-width:thin; scrollbar-color:#334155 transparent;}
.nav-section{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#66758A; margin:16px 10px 6px; white-space:nowrap;
}
.nav-section.hidden{display:none;}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  padding:11px 12px; margin-bottom:3px; font-size:13.5px; font-weight:500;
  color:var(--sidebar-text); border-radius:12px; transition:background .18s, color .18s;
  position:relative;
}
.nav-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav-ico{
  width:22px; height:22px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; background:rgba(255,255,255,.05); color:#9AA8BA; flex-shrink:0;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#E8F1EF;}
.nav-item:hover .nav-ico{background:rgba(255,255,255,.1); color:#E2E8F0;}
.nav-item.active{
  background:linear-gradient(135deg, rgba(232,99,28,.28), rgba(232,99,28,.08));
  color:#FFD4A8;
  box-shadow:inset 0 0 0 1px rgba(232,99,28,.2);
}
.nav-item.active .nav-ico{background:rgba(232,99,28,.25); color:#FFD4A8;}
.nav-item.active::before{
  content:""; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:99px; background:var(--accent-soft);
}
.nav-item.hidden{display:none;}
.sidebar-foot{
  flex-shrink:0; margin-top:auto; padding:14px 10px 6px;
  border-top:1px solid var(--sidebar-line); background:rgba(0,0,0,.12);
}
.user-chip{display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:4px 2px;}
.user-avatar{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #E8631C, #C2410C); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  border:none; padding:0; cursor:pointer; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform .15s ease, box-shadow .15s ease;
}
.user-avatar:hover{transform:scale(1.04); box-shadow:0 0 0 2px rgba(232,99,28,.45);}
.user-avatar.has-photo{color:transparent; font-size:0;}
.user-meta{min-width:0; overflow:hidden;}
.role-name{font-size:13.5px; font-weight:700; color:#F8FAFC; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.role-meta{font-size:11px; font-weight:500; color:#7C8A9A; white-space:nowrap;}
.logout-btn{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--sidebar-line);
  color:var(--sidebar-text); padding:10px; font-size:12.5px; font-weight:600;
  border-radius:10px; transition:background .2s, color .2s;
}
.logout-btn:hover{background:rgba(212,91,74,.15); color:#FECACA; border-color:rgba(212,91,74,.35);}

/* Desktop icon rail */
.sidebar.collapsed{width:78px; padding:16px 10px;}
.sidebar.collapsed .brand-row{
  flex-direction:column; gap:10px; align-items:center; padding:6px 0 14px; margin-bottom:14px;
}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .user-meta,
.sidebar.collapsed .logout-label{display:none;}
.sidebar.collapsed .sidebar-collapse-btn{transform:rotate(180deg);}
.sidebar.collapsed .nav{padding:0;}
.sidebar.collapsed .nav-item{
  justify-content:center; padding:12px 8px; gap:0;
}
.sidebar.collapsed .nav-item.active::before{display:none;}
.sidebar.collapsed .nav-ico{width:28px; height:28px; border-radius:9px; font-size:13px;}
.sidebar.collapsed .user-chip{justify-content:center; margin-bottom:8px;}
.sidebar.collapsed .logout-btn{
  padding:10px 0; font-size:0; line-height:0;
}
.sidebar.collapsed .logout-btn::before{
  content:"⏻"; font-size:14px; line-height:1; display:block;
}

.main{flex:1; padding:32px 36px; min-width:0; transition:padding .25s var(--ease);}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; gap:16px; animation:fadeUp .4s var(--ease);}
.topbar h2{font-size:28px; letter-spacing:-.03em;}
.topbar .meta{font-size:13px; font-weight:500; color:var(--ink-faint); margin-top:6px;}
.topbar-right{
  font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.menu-toggle{
  display:none; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; font-size:12px; font-weight:600; border-radius:10px; margin-bottom:12px;
}
.menu-toggle:hover{border-color:#CBD5E1; background:var(--bg-soft);}
.sidebar-backdrop{display:none;}
.view{display:none;}
.view.active{display:block; animation:fadeUp .35s var(--ease);}

/* DASHBOARD */
.dash-hero{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  background:
    radial-gradient(500px 180px at 100% 0%, rgba(232,99,28,.16), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  color:#F8FAFC; border-radius:18px; padding:22px 24px; margin-bottom:18px;
  box-shadow:var(--shadow);
}
.dash-hero-kicker{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F08A4B; margin-bottom:8px;}
.dash-hero-title{font-size:24px; font-weight:700; letter-spacing:-.03em; margin:0 0 6px;}
.dash-hero-desc{margin:0; font-size:13.5px; color:#B6C0CE; line-height:1.5; max-width:46ch;}
.dash-hero-side{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.dash-hero-badge{
  flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#A7F3D0; background:rgba(15,158,150,.25); border:1px solid rgba(167,243,208,.35);
  border-radius:999px; padding:7px 12px;
}

/* PDF export overlay (pola Cost Dashboard / gitignore) */
#sdPdfOverlay{
  position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center;
  background:rgba(15,30,27,.55); backdrop-filter:blur(8px);
  display:flex; opacity:0; transition:opacity .35s ease; pointer-events:none;
}
#sdPdfOverlay.vis{opacity:1; pointer-events:all;}
#sdPdfCard{
  background:#fff; border-radius:20px; padding:40px 44px; width:min(400px,92vw); text-align:center;
  box-shadow:0 32px 80px rgba(15,30,27,.28);
}
#sdPdfSpinWrap{width:64px; height:64px; margin:0 auto 22px; position:relative;}
#sdPdfSpinOuter{
  position:absolute; inset:0; border:4px solid #E8F0ED; border-top-color:#0F1E1B;
  border-radius:50%; animation:sdPdfSpin 1s linear infinite;
}
#sdPdfSpinInner{
  position:absolute; inset:10px; border:3px solid #F3F7F6; border-bottom-color:#E8631C;
  border-radius:50%; animation:sdPdfSpin .7s linear infinite reverse;
}
@keyframes sdPdfSpin{to{transform:rotate(360deg);}}
#sdPdfTitle{font-size:16px; font-weight:700; color:#12201E; margin-bottom:5px;}
#sdPdfSub{font-size:12px; color:#7C908A; margin-bottom:22px; min-height:16px;}
#sdPdfBarWrap{background:#F3F7F6; border-radius:99px; height:6px; overflow:hidden; margin-bottom:8px;}
#sdPdfBar{height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,#0F1E1B,#0F9E96); transition:width .45s ease;}
#sdPdfPct{font-size:11px; color:#9EB0A8; text-align:right;}

/* Period control — satu tombol bulan + tahun (area klik besar di web) */
.period-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; padding:12px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-sm); user-select:none;
}
.period-bar-label{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.period-control{
  position:relative; display:inline-flex; align-items:center; cursor:pointer; margin:0;
  min-width:168px; outline:none;
}
.period-control:focus-visible .period-btn{
  box-shadow:0 0 0 3px rgba(232,99,28,.35);
}
.period-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:44px; padding:12px 18px; border-radius:12px;
  font-size:14px; font-weight:700;
  background:linear-gradient(135deg,#0F1E1B,#173330); border:1px solid transparent;
  color:#F8FAFC; white-space:nowrap; pointer-events:none;
}
.period-btn::after{content:"▾"; font-size:11px; color:#FFD4A8; margin-left:2px;}
.period-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; opacity:0; pointer-events:none;
}

.usr-you{
  display:inline-block; margin-left:6px; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--teal); background:var(--teal-bg); border-radius:999px; padding:2px 7px;
}
.usr-warn{color:#C2410C; font-weight:650;}
.usr-role-pill{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line);
}
.usr-role-pill.tone-amber{background:var(--accent-bg); color:#C2410C; border-color:rgba(232,99,28,.25);}
.usr-role-pill.tone-blue{background:#DBEAFE; color:#1D4ED8; border-color:#BFDBFE;}
.usr-role-pill.tone-teal{background:var(--teal-bg); color:var(--teal); border-color:rgba(15,158,150,.25);}
.usr-role-pill.tone-slate{background:#E2E8F0; color:#334155; border-color:#CBD5E1;}
.usr-role-pill.tone-ink{background:#0F1E1B; color:#F08A4B; border-color:rgba(15,30,27,.35);}
.usr-row-off td{opacity:.55;}
.usr-cards{display:none; gap:10px; padding:4px 0 8px;}
.usr-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:var(--shadow-sm);
}
.usr-card.is-off{opacity:.7;}
.usr-card-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:8px;}
.usr-card-name{font-weight:700; font-size:14px;}
.usr-card-user{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.usr-card-meta{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}
.usr-check{display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer;}
.usr-access{display:grid; gap:10px; padding:12px 16px 16px;}
.usr-access-card{
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg-soft);
}
.usr-access-role{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px;}
.usr-access-tags{display:flex; flex-wrap:wrap; gap:6px;}
.usr-tag{
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft);
}
@media (max-width:800px){
  #view-users .fin-table-wrap{display:none;}
  #view-users .usr-cards{display:grid;}
}

.fin-budget-table-wrap{overflow:auto; padding:0 4px 12px;}
.fin-budget-table{width:100%; border-collapse:collapse; font-size:13px;}
.fin-budget-table th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); padding:10px 12px; border-bottom:1px solid var(--line);
}
.fin-budget-table td{padding:10px 12px; border-bottom:1px solid var(--bg-soft); vertical-align:middle;}
.fin-budget-table tr.fin-bud-over td{background:rgba(212,91,74,.06);}
.fin-bud-input{
  width:100%; max-width:140px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-soft); font:inherit;
}
.fin-bud-input:focus{outline:none; border-color:var(--accent); background:#fff;}
.fin-bud-neg{color:var(--red); font-weight:700;}
.fin-bud-status{margin-left:8px; align-self:center;}
.fin-bud-status.is-dirty{color:var(--accent); font-weight:600;}

.mf-toolbar{align-items:flex-end;}
.mf-filters{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;}
.mf-toolbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
.mf-desk-actions{display:flex;}
.mf-table-wrap{
  overflow:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-sm);
}
.mf-table{width:100%; border-collapse:collapse; font-size:13px;}
.mf-table thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
  padding:12px 14px; border-bottom:1px solid var(--line); background:#F8FBFA;
  white-space:nowrap;
}
.mf-table thead th.num,
.mf-table tbody td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.mf-table thead th.mf-th-aksi,
.mf-table tbody td.mf-td-aksi{text-align:right;}
.mf-table tbody td{
  padding:11px 14px; border-bottom:1px solid #EEF3F1; vertical-align:middle;
}
.mf-table tbody tr:last-child td{border-bottom:0;}
.mf-table tbody tr:hover{background:#F8FAFC;}
.mf-table tbody tr.is-paid{opacity:.82;}
.mf-name{font-weight:700; color:var(--ink);}
.mf-sub{margin-top:2px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.mf-aksi{display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
.mf-btn-pay{
  flex:0 0 auto; min-width:64px; height:32px; padding:0 12px;
  border:0; border-radius:9px; cursor:pointer;
  background:var(--accent); color:#fff;
  font:inherit; font-size:12.5px; font-weight:700;
}
.mf-btn-pay:hover{filter:brightness(1.05);}
.mf-cards{display:none; flex-direction:column; gap:10px;}
.mf-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px; box-shadow:var(--shadow-sm);
}
.mf-card.is-paid{opacity:.92;}
.mf-card-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.mf-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding-top:10px; border-top:1px solid #E7F0EE;
}
.mf-card-foot b{font-size:14px;}
@media (max-width:800px){
  #view-fee_mekanik .fin-note,
  #view-fee_mekanik .mf-desk-actions{display:none !important;}
  #view-fee_mekanik .mf-toolbar{
    flex-direction:column; align-items:stretch; gap:8px; margin-bottom:10px;
  }
  #view-fee_mekanik .mf-filters{width:100%; gap:8px;}
  #view-fee_mekanik .mf-filters .pay-field{flex:1 1 calc(50% - 4px); min-width:0;}
  #view-fee_mekanik .mf-filters .pay-field:last-child{flex:1 1 100%;}
  #view-fee_mekanik .pay-summary{
    grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
  }
  #view-fee_mekanik .pay-stat{padding:10px 12px; border-radius:12px;}
  #view-fee_mekanik .pay-stat-main{grid-column:1 / -1;}
  #view-fee_mekanik .mf-table-wrap{display:none !important;}
  #view-fee_mekanik .mf-cards{display:flex;}
  #view-fee_mekanik .mf-card{padding:12px; border-radius:12px;}
  #view-fee_mekanik .mf-btn-pay{min-width:58px; height:30px; padding:0 10px; font-size:12px;}
}

.dash-sec-label{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:4px 0 10px;
}
.dash-sec-label[hidden],
#view-dashboard [data-fin-only][hidden],
#view-dashboard [data-hr-only][hidden],
#view-dashboard [data-payroll-only][hidden],
#view-dashboard [data-coaching-only][hidden],
#view-dashboard_owner [data-fin-only][hidden],
#view-dashboard_owner [data-hr-only][hidden],
#view-dashboard_owner [data-payroll-only][hidden],
#view-dashboard_owner [data-coaching-only][hidden]{display:none !important;}
.dash-jump{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;
}
.dash-jump-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600;
  box-shadow:var(--shadow-sm); transition:background .15s, border-color .15s, color .15s;
}
.dash-jump-btn:hover{
  border-color:rgba(15,158,150,.35); color:var(--teal); background:var(--teal-bg);
}
.stat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:14px;}
.stat-grid.dash-stat-4{grid-template-columns:repeat(4,1fr);}
.stat-grid[hidden]{display:none !important;}
.stat-card.is-jump{cursor:pointer;}
.stat-card.is-jump:hover{
  border-color:rgba(15,158,150,.35);
  box-shadow:0 8px 22px rgba(15,30,27,.08);
}
.debt-summary.dash-debt-4{grid-template-columns:repeat(4,1fr);}
.debt-summary.dash-debt-5{grid-template-columns:repeat(5,1fr);}
.debt-card.debt-stock::after{background:var(--accent);}
.debt-card.debt-pay::after{background:#3B82F6;}
.debt-card.debt-fee::after{background:var(--teal);}
.debt-card.debt-stock .value,
.debt-card.debt-pay .value,
.debt-card.debt-fee .value{color:var(--ink);}

.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.stat-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0;
  background:var(--line);
}
.stat-card.tone-amber::before{background:linear-gradient(180deg,#F08A4B,#E8631C);}
.stat-card.tone-blue::before{background:linear-gradient(180deg,#60A5FA,#3B82F6);}
.stat-card.tone-red::before{background:linear-gradient(180deg,#FCA5A5,#D45B4A);}
.stat-card.tone-teal::before{background:linear-gradient(180deg,#5EEAD4,#0F9E96);}
.stat-card.tone-slate::before{background:linear-gradient(180deg,#7C908A,#64748B);}
.stat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.stat-ico{
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; margin-bottom:12px;
  background:var(--bg-soft); color:var(--ink-soft);
}
.tone-amber .stat-ico{background:var(--accent-bg); color:#C2410C;}
.tone-blue .stat-ico{background:#DBEAFE; color:#1D4ED8;}
.tone-red .stat-ico{background:var(--red-bg); color:var(--red);}
.tone-teal .stat-ico{background:var(--teal-bg); color:var(--teal);}
.tone-slate .stat-ico{background:#E2E8F0; color:#3D4F4B;}
.stat-card .label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.stat-card .value{font-size:22px; font-weight:700; margin-bottom:6px; letter-spacing:-.03em;}
.stat-card .value.accent{color:var(--red);}
.stat-card .delta{font-size:12px; color:var(--ink-faint); font-weight:500;}

.debt-summary{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.debt-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.debt-card::after{
  content:""; position:absolute; right:-20px; top:-20px; width:90px; height:90px; border-radius:50%;
  opacity:.12;
}
.debt-in::after{background:var(--teal);}
.debt-out::after{background:var(--red);}
.debt-card .label{font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:12px;}
.debt-card .value{font-size:24px; font-weight:700; margin-bottom:6px; letter-spacing:-.03em;}
.debt-card .value.piutang{color:var(--teal);}
.debt-card .value.hutang{color:var(--red);}
.debt-card .sub{font-size:12px; color:var(--ink-faint); font-weight:500;}

.dash-mob-only{display:none;}
.dash-desk-only{display:flex;}

.dash-feed{padding:4px 8px 10px;}
.dash-feed-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px; border-bottom:1px solid #E7F0EE;
}
.dash-feed-item:last-child{border-bottom:none;}
.dfi-main{min-width:0; flex:1;}
.dfi-title{font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dfi-meta{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.dfi-tag{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line);
}
.dfi-val{font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap;}
.dash-feed-empty{padding:22px 16px; text-align:center; font-size:13px; color:var(--ink-faint); font-weight:500;}
.pm-wrap{padding:8px 16px 14px;}

.panel-row{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:16px;}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:16px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap;
  background:linear-gradient(180deg, #fff, var(--bg-soft));
}
.panel-head h3{font-size:15px; font-weight:700;}
.panel-head .tiny-note{font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase;}
.panel-body{padding:8px 20px 16px;}
.panel-pad{padding:18px 20px;}

th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; padding:12px 0 8px; border-bottom:1px solid var(--line);
}
td{font-size:13.5px; padding:12px 0; border-bottom:1px solid #E7F0EE; color:var(--ink-soft); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .15s;}
tbody tr:hover{background:#F8FAFC;}
.badge{
  font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--bg-soft); white-space:nowrap;
}
.badge.low,.badge.overdue{color:var(--red); border-color:#F1C9C3; background:var(--red-bg);}
.badge.owe{color:#C2410C; border-color:#F3E0A8; background:var(--accent-bg);}
.badge.late{color:var(--red); border-color:#F1C9C3; background:var(--red-bg);}
.badge.ok{color:var(--teal); border-color:#B7E0D8; background:var(--teal-bg);}
.badge.warn{color:#C2410C; border-color:#FFD4A8; background:#FFF4ED;}

.pm-row{
  display:grid; grid-template-columns:70px 1fr 90px; align-items:center;
  gap:12px; padding:12px 20px; border-bottom:1px solid #E7F0EE;
}
.pm-row:last-child{border-bottom:none;}
.pm-name{font-size:13px; font-weight:500; color:var(--ink-soft);}
.pm-bar-wrap{height:6px; background:var(--bg-soft); border-radius:99px; overflow:hidden;}
.pm-bar{
  height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  transform-origin:left; animation:barIn .7s var(--ease);
}
.pm-val{font-size:12.5px; font-weight:600; text-align:right; color:var(--ink);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 20px;}
.form-grid .full{grid-column:1 / -1;}
.toolbar{display:flex; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:flex-end; background:var(--bg-soft);}
.toolbar .field{margin:0; min-width:160px; flex:1;}
.search-row{padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg-soft);}

/* ===== KASIR ===== */
.kasir-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; align-items:start;}
.kasir-catalog,.kasir-cart{margin-bottom:0;}
.kasir-search-row{display:flex; align-items:center; gap:10px; position:relative;}
.kasir-search-row .search-ico{
  position:absolute; left:32px; color:var(--ink-faint); font-size:16px; pointer-events:none;
}
.kasir-search-row input{padding-left:36px !important; background:#fff !important;}
.item-list{max-height:560px; overflow:auto; padding:8px;}

/* Kasir desktop: isi viewport — tidak scroll halaman saat Hutang dibuka */
@media (min-width:801px){
  body.view-is-kasir .main{
    display:flex; flex-direction:column;
    height:100vh; max-height:100vh; overflow:hidden;
    padding-top:22px; padding-bottom:16px;
  }
  body.view-is-kasir .topbar{margin-bottom:12px; flex-shrink:0;}
  body.view-is-kasir .topbar h2{font-size:24px;}
  body.view-is-kasir .topbar .meta{margin-top:2px;}
  body.view-is-kasir .content{
    flex:1; min-height:0; display:flex; flex-direction:column;
  }
  #view-kasir.view.active{
    display:flex; flex-direction:column; flex:1; min-height:0; height:100%;
    animation:none;
  }
  #view-kasir .kasir-grid{
    flex:1; min-height:0; align-items:stretch;
    height:100%; gap:14px;
  }
  #view-kasir .kasir-catalog,
  #view-kasir .kasir-cart{
    display:flex; flex-direction:column; min-height:0; height:100%;
  }
  #view-kasir .kasir-cart.panel{overflow:visible;}
  #view-kasir .kasir-catalog .panel-head,
  #view-kasir .kasir-cart .panel-head{
    flex-shrink:0; padding:12px 14px;
  }
  #view-kasir .kasir-catalog .panel-head h3,
  #view-kasir .kasir-cart .panel-head h3{font-size:14.5px;}
  #view-kasir .kasir-search-row{flex-shrink:0; padding:8px 10px;}
  #view-kasir .kasir-search-row .search-ico{left:22px;}
  #view-kasir .item-list{
    flex:1; min-height:0; max-height:none; overflow:auto; padding:6px 8px;
  }
  #view-kasir .item-row{
    padding:10px 12px; margin-bottom:6px; border-radius:10px; gap:10px;
  }
  #view-kasir .item-row:hover{transform:none;}
  #view-kasir .item-row .name{font-size:13px;}
  #view-kasir .item-row .meta{font-size:11.5px; margin-top:2px;}
  #view-kasir .item-row .price{font-size:13px;}
  #view-kasir .kasir-keys-hint{max-width:200px; font-size:10px;}
  #view-kasir .cart-list{
    flex:1 1 auto; min-height:80px; max-height:none; overflow:auto;
    padding:6px 8px;
  }
  #view-kasir .cart-line{
    padding:10px; margin-bottom:6px; border-radius:10px; gap:8px; font-size:12.5px;
  }
  #view-kasir .cart-line .cl-price{font-size:11px; margin-top:2px;}
  #view-kasir .cart-line .cl-total{min-width:78px;}
  #view-kasir .qty-ctrl button{width:26px; height:26px; border-radius:7px;}
  #view-kasir .cart-summary{
    flex-shrink:0; padding:12px 14px 14px;
    position:relative; z-index:6; overflow:visible;
  }
  #view-kasir #hutang-fields .hf-suggest-drop{
    top:auto; bottom:calc(100% + 4px); max-height:160px;
  }
  #view-kasir .sum-row{margin-bottom:8px;}
  #view-kasir .sum-row.total{margin:10px 0 8px; padding-top:10px; font-size:18px;}
  #view-kasir .pay-label{margin:8px 0 6px;}
  #view-kasir .pay-chips{margin-bottom:8px; gap:6px;}
  #view-kasir .pay-chip{padding:8px 4px;}
  #view-kasir .extra-fields{margin-bottom:8px;}
  #view-kasir .checkout-btn,
  #view-kasir .checkout-print-btn{height:40px; font-size:13px;}
}
.item-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  width:100%; text-align:left; font:inherit;
  padding:10px 12px; margin-bottom:6px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.item-row:hover{
  background:#FFF8F0; border-color:#E8631C;
  box-shadow:0 2px 8px rgba(232,99,28,.12);
}
.item-row:active{background:#FFF4ED; border-color:#E8631C;}
.item-row .name{font-size:13px; font-weight:600; color:var(--ink);}
.item-row .meta{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.item-row .price-col{text-align:right; flex-shrink:0;}
.item-row .price{font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;}
.item-row .price.is-warn{color:var(--red); font-size:12px;}
.item-row.is-nosell{opacity:.88;}
.item-row.is-empty,
.item-row:disabled{
  opacity:.45; cursor:not-allowed; background:#F8FAFC;
}
.item-row.is-empty:hover,
.item-row:disabled:hover{
  border-color:var(--line); background:#F8FAFC; box-shadow:none;
}
.item-row .stok-pill{
  display:inline-block; margin-top:6px; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft);
}
.item-row .stok-pill.low{background:var(--red-bg); color:var(--red);}
.item-add{display:none;}
.item-row.just-added{
  border-color:#0F9E96; background:#ECFDF9;
  animation:svcPartPulse .28s ease;
}
.item-row.is-focus{
  border-color:#E8631C; background:#FFF8F0;
  box-shadow:0 0 0 2px rgba(232,99,28,.18);
}
.kasir-keys-hint{max-width:280px; text-align:right; line-height:1.35;}
.sum-diskon input{
  -moz-appearance:textfield;
  appearance:textfield;
}
.sum-diskon input::-webkit-outer-spin-button,
.sum-diskon input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.cf-enter-hint{font-weight:500; color:var(--ink-faint); text-transform:none; letter-spacing:0;}
.cf-cash-row{
  display:grid; grid-template-columns:1.15fr 1fr; gap:10px; align-items:end;
}
#cash-fields .cf-cash-row .field{margin:0; min-width:0;}
#cash-fields .cf-cash-row .field label{margin-bottom:4px; font-size:11px;}
.cf-money{
  display:flex; align-items:stretch; width:100%;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); overflow:hidden;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.cf-money-prefix{
  display:flex; align-items:center; padding:0 10px;
  font-size:12.5px; font-weight:700; color:var(--ink-faint);
  background:#fff; border-right:1px solid var(--line);
}
.cf-money input{
  width:100%; border:0 !important; border-radius:0 !important; background:transparent !important;
  box-shadow:none !important; padding:10px 12px !important;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.cf-money input:focus{outline:none;}
.cf-money:focus-within{
  border-color:#E8631C; background:#fff;
  box-shadow:0 0 0 3px var(--accent-bg);
}
.cf-money input::-webkit-outer-spin-button,
.cf-money input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.item-empty,.cart-empty{
  text-align:center; padding:40px 20px; color:var(--ink-faint); font-size:13.5px;
}
.item-empty b,.cart-empty b{display:block; color:var(--ink-soft); font-size:15px; margin-bottom:6px;}
.cart-empty-mob{display:none;}
.kasir-back-btn{display:none;}
.kasir-dock{display:none;}

.cart-list{min-height:160px; max-height:260px; overflow:auto; padding:8px 10px;}
.cart-line{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:12px; margin-bottom:8px; font-size:13px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
}
.cart-line .cl-name{font-weight:600; color:var(--ink);}
.cart-line .cl-price{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}
.cart-line .cl-total{font-weight:700; min-width:84px; text-align:right;}
.qty-ctrl{display:flex; align-items:center; gap:6px;}
.qty-ctrl button{
  width:28px; height:28px; border:1px solid var(--line); background:#fff;
  color:var(--ink); font-size:15px; border-radius:8px; font-weight:700;
  transition:background .15s, border-color .15s;
}
.qty-ctrl button:hover{border-color:var(--accent); background:var(--accent-bg);}
.qty-ctrl span{min-width:18px; text-align:center; font-weight:700;}

.cart-summary{padding:16px 18px 18px; border-top:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--bg-soft));}
.sum-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13.5px; color:var(--ink-soft); font-weight:500;}
.sum-row.total{
  color:var(--ink); font-size:20px; margin:14px 0 12px; font-weight:700;
  padding-top:12px; border-top:1px dashed var(--line);
}
.sum-diskon .diskon-wrap{
  display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:4px 10px;
}
.sum-diskon input{
  width:52px; border:0; background:transparent; text-align:right; font-weight:700; font-size:14px; padding:4px 0;
}
.pay-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:12px 0 8px;}
.pay-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px;}
.pay-chip{
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  padding:10px 6px; border-radius:10px; font-size:12px; font-weight:700;
  transition:background .15s, border-color .15s, color .15s;
}
.pay-chip:hover{border-color:#CBD5E1; background:var(--bg-soft);}
.pay-chip.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-sm);
}
.extra-fields{
  display:none; border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:12px; background:#fff;
}
.extra-fields.show{display:block;}
.extra-fields .hf-title{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
#hutang-fields{padding:10px 12px; position:relative; z-index:5;}
#hutang-fields .hf-title{margin-bottom:8px;}
#hutang-fields .hf-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 10px;
}
#hutang-fields .field{margin:0; min-width:0;}
#hutang-fields .field label{
  margin-bottom:4px; font-size:11px; letter-spacing:.02em;
}
#hutang-fields .field input{
  padding:8px 10px; font-size:13px; border-radius:10px;
}
.hf-suggest-wrap{position:relative;}
.hf-suggest-drop{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  max-height:180px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow);
}
.hf-suggest-opt{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:0; border-bottom:1px solid #E8F1EF;
  background:#fff; cursor:pointer; text-align:left; font:inherit;
}
.hf-suggest-opt:last-child{border-bottom:0;}
.hf-suggest-opt:hover,
.hf-suggest-opt:focus{background:#F8FAFC; outline:none;}
.hf-suggest-main{display:flex; flex-direction:column; gap:1px; min-width:0;}
.hf-suggest-main b{font-size:12.5px; color:var(--ink); font-weight:700;}
.hf-suggest-main span{font-size:11.5px; color:var(--ink-faint); font-weight:500;}
.hf-suggest-empty{
  padding:10px; font-size:12px; color:var(--ink-faint); font-weight:600; text-align:center;
}
.kembalian-box{
  display:flex; align-items:center; justify-content:flex-end;
  min-height:42px;
  background:var(--teal-bg); border:1px solid #B7E0D8; border-radius:10px;
  padding:10px 12px; font-weight:600; color:var(--teal);
}
.kembalian-box .mono{font-size:14px; font-weight:700; white-space:nowrap;}
.kasir-actions{
  display:grid; grid-template-columns:1fr 1.35fr; gap:8px; margin-top:4px;
}
.kasir-actions .btn,
.kasir-actions .btn-primary{
  width:100%; height:42px; margin:0; letter-spacing:.02em;
}
.checkout-btn{margin-top:4px; letter-spacing:.02em;}
.kasir-actions .checkout-btn{margin-top:0;}

/* ===== MASTER BARANG ===== */
.mb-mob-only{display:none;}
.mb-desk-only{display:inline-flex;}
.mb-head{align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.mb-title{
  margin:0; font-size:clamp(22px, 6vw, 26px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.mb-desc{margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.mb-readonly-hint{
  grid-column:1 / -1; margin:0 0 2px; padding:10px 14px; border-radius:12px;
  background:#FFF4ED; border:1px solid rgba(232,99,28,.25); color:#78350F;
  font-size:12.5px; font-weight:600;
}
.mb-summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px;
}
.mb-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.mb-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.mb-stat-value{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.mb-stat-value.accent{color:var(--red);}
.mb-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.mb-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 auto; min-width:0; margin:0; height:42px;
}
.mb-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:15px; pointer-events:none; line-height:1; z-index:1;
}
.mb-search input{
  width:100%; height:42px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 36px !important; background:#fff !important; font-size:13px;
  box-shadow:none !important;
}
.mb-search input:focus{outline:none; border-color:#CBD5E1;}
.mb-toolbar-actions{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.mb-toolbar .btn,
.mb-toolbar .btn-primary{
  width:auto; height:42px; padding:0 16px; white-space:nowrap; border-radius:11px;
  font-size:13px; font-weight:600; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.mb-btn-add{
  min-width:118px;
  box-shadow:var(--shadow-sm);
}
.mb-excel{position:relative; z-index:5; overflow:visible;}
.mb-btn-excel{
  min-width:96px; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.mb-excel-caret{font-size:11px; opacity:.7; line-height:1;}
.mb-excel-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:200px; padding:6px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(18,32,30,.12);
}
.mb-excel-item{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:10px 12px; border-radius:9px; font:inherit; font-size:13px; font-weight:600;
  color:var(--ink); cursor:pointer;
}
.mb-excel-item:hover{background:var(--bg-soft); color:var(--teal);}
.mb-excel-sheet{display:grid; gap:10px;}
.mb-excel-sheet .btn,
.mb-excel-sheet .btn-primary,
.mb-excel-sheet .mb-xl-file-label{
  width:100%; min-height:44px; justify-content:center;
  display:inline-flex; align-items:center; box-sizing:border-box; cursor:pointer;
}
.mb-excel-sheet .hint{font-size:12px; color:var(--ink-soft); margin:0;}
.mb-imp-report{display:grid; gap:14px;}
.mb-imp-sum{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mb-imp-stat{
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;
}
.mb-imp-stat--ok{border-color:rgba(15,158,150,.28); background:rgba(15,158,150,.06);}
.mb-imp-stat--fail{border-color:rgba(212,91,74,.28); background:rgba(212,91,74,.06);}
.mb-imp-stat-n{font-size:22px; font-weight:700; color:var(--ink); line-height:1.1;}
.mb-imp-stat-l{font-size:12px; font-weight:700; margin-top:4px; color:var(--ink);}
.mb-imp-stat-s{font-size:11px; color:var(--ink-soft); margin-top:2px;}
.mb-imp-sec{display:grid; gap:8px;}
.mb-imp-h{margin:0; font-size:13px; font-weight:700; color:var(--teal);}
.mb-imp-h--fail{color:var(--err, #D45B4A);}
.mb-imp-list{
  list-style:none; margin:0; padding:0; display:grid; gap:6px;
  max-height:220px; overflow:auto; border:1px solid var(--line);
  border-radius:12px; background:#fff; padding:6px;
}
.mb-imp-row{
  display:grid; grid-template-columns:40px 1fr auto; gap:8px; align-items:start;
  padding:8px 10px; border-radius:10px; background:var(--bg-soft, #F3F7F6);
}
.mb-imp-row--fail{background:rgba(212,91,74,.08);}
.mb-imp-line{font-size:11px; font-weight:700; color:var(--ink-faint); padding-top:2px;}
.mb-imp-main{display:grid; gap:2px; min-width:0;}
.mb-imp-main b{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-imp-main span{font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-imp-main small{font-size:11px; color:var(--ink-soft);}
.mb-imp-badge{
  font-size:10px; font-weight:700; padding:3px 7px; border-radius:999px;
  align-self:center; white-space:nowrap;
}
.mb-imp-badge--new{background:rgba(15,158,150,.14); color:#0B7A74;}
.mb-imp-badge--upd{background:rgba(232,99,28,.14); color:#C24E12;}
.mb-imp-badge--fail{background:rgba(212,91,74,.16); color:#B34436;}
.mb-imp-empty{padding:12px; text-align:center; font-size:12px; color:var(--ink-soft);}
.mb-imp-more{margin:0; font-size:11px; color:var(--ink-soft);}
.mb-head-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.mb-head-actions .mb-btn-excel{min-width:72px; height:40px; padding:0 12px;}
.mb-btn-markup{min-width:140px; background:#fff;}
.mb-toolbar,
.mb-toolbar-actions{overflow:visible;}
.mb-pct{
  display:flex; align-items:center; gap:6px;
  width:100%; height:42px; box-sizing:border-box;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 12px; transition:border-color .2s, box-shadow .2s, background .2s;
}
.mb-pct:focus-within{
  border-color:#E8631C; background:#fff;
  box-shadow:0 0 0 3px var(--accent-bg);
}
.mb-pct input{
  flex:1 1 auto; min-width:0; width:auto !important; height:100%;
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; margin:0; text-align:right;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);
}
.mb-pct input:focus{outline:none;}
.mb-pct-suffix{
  flex:0 0 auto; font-size:13px; font-weight:700; color:var(--ink-faint); line-height:1;
}
.mb-form-grid .mb-pct{max-width:none;}
.mb-hint-inline{font-weight:500; color:var(--ink-faint); text-transform:none; letter-spacing:0;}
.mb-mk-fill{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  padding:10px 12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
}
.mb-mk-fill .mb-hint{margin:0; flex:1 1 auto;}
.mb-mk-fill .mb-pct{width:96px; flex:0 0 96px; background:#fff;}
.mb-mk-fill .btn{height:36px; padding:0 12px; flex:0 0 auto;}
.mb-mk-list{
  display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto;
  margin-bottom:10px; padding-right:2px;
}
.mb-mk-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:12px;
}
.mb-mk-kat{min-width:0; flex:1;}
.mb-mk-kat b{display:block; font-size:13.5px; color:var(--ink);}
.mb-mk-kat span{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-faint); font-weight:500;}
.mb-mk-row .mb-pct{width:100px; flex:0 0 100px; background:var(--bg-soft);}

.mb-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow-x:auto; box-shadow:var(--shadow-sm);
}
.mb-table{width:100%; min-width:1100px; border-collapse:collapse; font-size:13px; table-layout:fixed;}
.mb-table thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
  vertical-align:middle;
}
.mb-table thead th.mb-th-center,
.mb-table tbody td.mb-td-center{text-align:center;}
.mb-table thead th.mb-th-right,
.mb-table tbody td.mb-td-right{text-align:right;}
.mb-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
  color:var(--ink);
}
.mb-table tbody tr:last-child td{border-bottom:0;}
.mb-table tbody tr:hover{background:#F8FAFC;}
.mb-table tbody tr.tone-bad td:first-child{box-shadow:inset 3px 0 0 var(--red);}
.mb-table tbody tr.tone-warn td:first-child{box-shadow:inset 3px 0 0 #F08A4B;}
/* foto · code · nama · kat · tipe · binlok · stok · beli · jual · aksi */
.mb-table th:nth-child(1),
.mb-table td:nth-child(1){width:52px;}
.mb-table th:nth-child(2),
.mb-table td:nth-child(2){width:96px;}
.mb-table th:nth-child(3),
.mb-table td:nth-child(3){width:18%; min-width:140px;}
.mb-table th:nth-child(4),
.mb-table td:nth-child(4){width:90px;}
.mb-table th:nth-child(5),
.mb-table td:nth-child(5){width:88px;}
.mb-table th:nth-child(6),
.mb-table td:nth-child(6){width:88px;}
.mb-table th:nth-child(7),
.mb-table td:nth-child(7){width:56px;}
.mb-table th:nth-child(8),
.mb-table td:nth-child(8){width:100px;}
.mb-table th:nth-child(9),
.mb-table td:nth-child(9){width:110px;}
.mb-table th:nth-child(10),
.mb-table td:nth-child(10){width:96px;}
.mb-th-foto,.mb-td-foto{width:52px; text-align:center;}
.mb-td-sku{font-weight:700; white-space:nowrap;}
.mb-name{font-size:13.5px; font-weight:700; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-price{font-weight:700; white-space:nowrap;}
.mb-price.is-bad,
.mb-td-right.is-bad{color:var(--red);}
.mb-price.is-warn,
.mb-td-right.is-warn{color:#C2410C;}
.mb-flag{font-size:10.5px; font-weight:600; color:inherit; opacity:.85; margin-top:2px;}
.mb-td-act{text-align:center; white-space:nowrap;}
.mb-act{display:inline-flex; gap:6px; align-items:center; justify-content:center;}
.mb-td-act .btn,
.mb-act .btn{
  height:32px; padding:0 10px; font-size:12px; font-weight:600; border-radius:9px;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.mb-empty{
  text-align:center; padding:48px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.mb-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}
.mb-list{display:flex; flex-direction:column; gap:8px;}
.mb-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); border-left:4px solid #CBD5E1;
}
.mb-card.tone-bad{border-left-color:var(--red);}
.mb-card.tone-warn{border-left-color:#F08A4B;}
.mb-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.mb-card-main{min-width:0; flex:1;}
.mb-sku{font-size:12px; font-weight:700; color:var(--ink-faint);}
.mb-card .mb-name{white-space:normal; margin-top:2px;}
.mb-binlok,.stk-binlok{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  padding:4px 8px; border-radius:8px; background:#E8F1EF; color:#0F1E1B;
  font-size:12px; font-weight:600; max-width:100%;
}
.mb-binlok span,.stk-binlok span{
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#5A6F69;
}
.mb-binlok b,.stk-binlok b{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-meta{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.mb-card-price{text-align:right;}
.mb-mini{font-size:11px; font-weight:600; color:var(--ink-faint);}
.mb-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding-top:10px; border-top:1px solid #E7F0EE;
}
.mb-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.mb-form-grid--3{grid-template-columns:1fr 1fr 1fr;}
.mb-form-grid--price{grid-template-columns:minmax(0,1.2fr) minmax(88px,.7fr) minmax(0,1.2fr);}
.mb-form-grid .field{margin:0;}
.mb-form-grid .mb-span-2{grid-column:span 2;}
.mb-hint{margin-top:4px; font-size:11px; color:var(--ink-faint); font-weight:500;}

.mb-form{display:flex; flex-direction:column; gap:8px;}
.mb-form-top{
  display:grid; grid-template-columns:108px minmax(0,1fr); gap:10px; align-items:start;
}
.mb-form-main{min-width:0;}
.mb-form-cols{
  display:grid; grid-template-columns:1fr 1.15fr; gap:8px; align-items:stretch;
}
.mb-form-sec{
  border:1px solid var(--line); border-radius:12px; background:#F8FAFC;
  padding:8px 10px 10px;
}
.mb-form-sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #E2E8F0;
}
.mb-form-sec-head h4{
  margin:0; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
}
.mb-form-sec-head span{
  font-size:10.5px; font-weight:500; color:var(--ink-faint); text-align:right;
  max-width:62%; line-height:1.3;
}
.mb-form .field label{
  display:block; margin-bottom:3px; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.mb-form .field input,
.mb-form .field select{
  height:36px; font-size:13px;
}
.mb-form .mb-pct{height:36px;}
.mb-form .cf-money{height:36px;}
.mb-form-grid{gap:8px 10px;}
.mb-form .item-foto-form{
  flex-direction:column; align-items:stretch; margin:0; gap:6px; padding:8px;
  border-radius:12px;
}
.mb-form .item-foto-preview{width:100%; height:86px; border-radius:10px;}
.mb-form .item-foto-form-actions{flex-direction:column; align-items:stretch; gap:6px;}
.mb-form .item-foto-form-actions .btn{width:100%; justify-content:center; min-height:32px; padding:0 8px; font-size:12px;}
.mb-form .item-foto-form-actions .mb-hint{margin:0; font-size:10px; text-align:center;}
.mb-form .audit-meta{
  margin:0; padding:6px 8px; border-radius:10px; gap:8px;
  background:transparent; border:1px dashed var(--line);
}
.mb-form .audit-meta-label{font-size:9.5px;}
.mb-form .audit-meta-val{font-size:11.5px;}

.modal-card--mb{
  max-width:780px;
  display:flex; flex-direction:column;
  overflow:hidden; max-height:min(94vh, 700px);
}
.modal-card--mb .modal-head{
  position:static; flex-shrink:0; padding:12px 16px;
}
.modal-card--mb .modal-foot{
  position:static; flex-shrink:0; padding:10px 16px 12px;
}
.modal-card--mb .modal-body{
  padding:10px 14px 8px;
  overflow:auto; flex:1 1 auto; min-height:0;
}
@media (min-width:901px){
  .modal-card--mb .modal-body{overflow:hidden;}
}

/* Foto barang — thumbnail + lightbox */
.item-foto{
  display:block; width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:#E8F0ED center/cover no-repeat; border:1px solid var(--line);
  padding:0; cursor:zoom-in; box-shadow:0 1px 3px rgba(15,30,27,.06);
  position:relative; z-index:1; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.item-foto--sm{width:36px; height:36px; border-radius:9px; margin:0 auto;}
.item-foto--card{width:52px; height:52px; border-radius:12px;}
.item-foto--empty{
  cursor:default; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#0F9E96,#0F1E1B); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.02em; border:0;
}
.item-foto-form{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  padding:12px; border-radius:14px; background:var(--bg-soft,#F3F7F6); border:1px solid var(--line);
}
.item-foto-preview{
  width:96px; height:96px; border-radius:14px; flex-shrink:0;
  background:#fff center/cover no-repeat; border:1px solid var(--line);
}
.item-foto-preview.is-empty{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#F8FBFA,#E8F0ED); color:var(--ink-faint);
  font-size:11px; font-weight:600; text-align:center; padding:8px;
}
.item-foto-form-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0;}
.item-foto-lightbox{text-align:center; padding:4px 0;}
.item-foto-lightbox img{
  max-width:100%; max-height:min(78vh, 720px); width:auto; height:auto;
  object-fit:contain; border-radius:12px; background:#0F1E1B;
  box-shadow:0 8px 28px rgba(15,30,27,.18);
}
.item-foto-form-actions .btn{min-height:36px;}
.photo-pick-sheet{display:flex; flex-direction:column; gap:0;}
.emp-detail-foto-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center;}

/* ===== STOK (view only) ===== */
.stk-mob-only{display:none;}
.stk-desk-only{display:initial;}
.btn.stk-desk-only{display:inline-flex;}
.stk-head{align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.stk-title{
  margin:0; font-size:clamp(22px, 6vw, 26px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.stk-desc{margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.stk-summary{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px;
}
.stk-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.stk-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.stk-stat-value{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.stk-stat-value.accent{color:var(--red);}
.stk-moving-summary{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px;
}
.stk-mov-stat{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; text-align:left; font:inherit;
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s;
}
.stk-mov-stat:hover{border-color:#CBD5E1;}
.stk-mov-stat.active{
  border-color:#0F1E1B; box-shadow:0 0 0 1px #0F1E1B;
}
.stk-mov-label{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint);
}
.stk-mov-short{display:none;}
.stk-mov-stat b{font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.stk-mov-stat.tone-fast.active{border-color:#0D7370; box-shadow:0 0 0 1px #0D7370;}
.stk-mov-stat.tone-medium.active{border-color:#C2410C; box-shadow:0 0 0 1px #C2410C;}
.stk-mov-stat.tone-slow.active{border-color:#64748B; box-shadow:0 0 0 1px #64748B;}
.stk-mov-stat.tone-dead.active{border-color:#BE123C; box-shadow:0 0 0 1px #BE123C;}
.stk-mov.badge{
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  border:1px solid transparent; letter-spacing:.02em;
}
.stk-mov.mov-fast{color:#0D7370; background:#F0FDFA; border-color:#99F6E4;}
.stk-mov.mov-medium{color:#C2410C; background:#FFF4ED; border-color:#FFD4A8;}
.stk-mov.mov-slow{color:#3D4F4B; background:#F8FAFC; border-color:#CBD5E1;}
.stk-mov.mov-dead{color:#BE123C; background:#FFF1F2; border-color:#FECDD3;}
.stk-filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px;
}
.stk-range-field{display:flex; align-items:center; gap:6px; margin:0;}
.stk-modes{display:flex; gap:6px; flex-wrap:wrap;}
.stk-mode{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.stk-mode.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.stk-period-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto;}
.stk-date-wrap{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.stk-date-wrap.is-hidden,
.stk-date-wrap[hidden]{display:none !important;}
.stk-date-wrap label{display:flex; align-items:center; gap:6px; margin:0;}
.stk-period-label{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
.stk-input{
  height:36px; margin:0; border:1px solid var(--line); border-radius:10px;
  padding:0 10px; background:#fff; font-size:13px; color:var(--ink);
}
.stk-period-text{
  font-size:12.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
}
.stk-period-controls .btn{
  width:auto; height:36px; padding:0 14px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
}
.stk-toolbar{
  display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;
}
.stk-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 220px; min-width:0; margin:0; height:42px;
}
.stk-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:15px; pointer-events:none; z-index:1;
}
.stk-search input{
  width:100%; height:42px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 36px !important; background:#fff !important; font-size:13px;
  box-shadow:none !important;
}
.stk-toolbar .btn,
.stk-toolbar .btn-primary{
  width:auto; height:42px; padding:0 16px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; white-space:nowrap;
}
.btn-primary.stk-desk-only{display:inline-flex;}
.stk-note{
  margin:0 0 12px; font-size:12.5px; color:var(--ink-faint); font-weight:500;
}
.stk-note b{color:var(--ink-soft);}
.stk-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-sm);
}
.stk-table{
  width:max-content; min-width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed;
}
.stk-table thead th{
  text-align:left; padding:9px 8px; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
}
.stk-table thead th.stk-th-center,
.stk-table tbody td.stk-td-center{text-align:center;}
.stk-table thead th.stk-th-right,
.stk-table tbody td.stk-td-right{text-align:right; white-space:nowrap;}
.stk-table tbody td{
  padding:9px 8px; border-bottom:1px solid #E7F0EE; vertical-align:middle; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis;
}
.stk-table tbody tr:last-child td{border-bottom:0;}
.stk-table tbody tr:hover{background:#F8FAFC;}
.stk-table tbody tr.tone-low td:first-child{box-shadow:inset 3px 0 0 var(--red);}
.stk-table tbody tr.tone-high td:first-child{box-shadow:inset 3px 0 0 #E8631C;}
.stk-th-foto,.stk-td-foto{width:44px; text-align:center; overflow:visible;}
/* foto · code · nama · kat · unit · binlok · gerak · stok · min · max · in · out · jual */
.stk-table th:nth-child(1), .stk-table td:nth-child(1){width:44px;}
.stk-table th:nth-child(2), .stk-table td:nth-child(2){width:88px;}
.stk-table th:nth-child(3), .stk-table td:nth-child(3){width:200px;}
.stk-table th:nth-child(4), .stk-table td:nth-child(4){width:78px;}
.stk-table th:nth-child(5), .stk-table td:nth-child(5){width:78px;}
.stk-table th:nth-child(6), .stk-table td:nth-child(6){width:78px;}
.stk-table th:nth-child(7), .stk-table td:nth-child(7){width:86px;}
.stk-table th:nth-child(8), .stk-table td:nth-child(8){width:52px;}
.stk-table th:nth-child(9), .stk-table td:nth-child(9){width:48px;}
.stk-table th:nth-child(10), .stk-table td:nth-child(10){width:48px;}
.stk-table th:nth-child(11), .stk-table td:nth-child(11){width:48px;}
.stk-table th:nth-child(12), .stk-table td:nth-child(12){width:48px;}
.stk-table th:nth-child(13), .stk-table td:nth-child(13){width:104px;}
.stk-td-code{font-weight:700; white-space:nowrap;}
.stk-name{font-size:13px; font-weight:700; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stk-table .badge{
  display:inline-flex; max-width:100%; justify-content:center;
  font-size:10.5px; padding:3px 7px; white-space:nowrap;
}
.stk-in{color:var(--teal); font-weight:700;}
.stk-out{color:var(--red); font-weight:700;}
.stk-empty{
  text-align:center; padding:48px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.stk-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}
.stk-list{display:flex; flex-direction:column; gap:8px;}
.stk-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); border-left:4px solid #CBD5E1;
}
.stk-card.tone-low{border-left-color:var(--red);}
.stk-card.tone-high{border-left-color:#E8631C;}
.stk-card.tone-mov-fast{border-left-color:#14B8A6;}
.stk-card.tone-mov-medium{border-left-color:#F59E0B;}
.stk-card.tone-mov-slow{border-left-color:#7C908A;}
.stk-card.tone-mov-dead{border-left-color:#FB7185;}
.stk-card.tone-low.tone-mov-fast,
.stk-card.tone-low.tone-mov-medium,
.stk-card.tone-low.tone-mov-slow,
.stk-card.tone-low.tone-mov-dead{border-left-color:var(--red);}
.stk-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.stk-card-main{min-width:0; flex:1;}
.stk-card-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.stk-code{font-size:12px; font-weight:700; color:var(--ink-faint);}
.stk-card .stk-name{white-space:normal; margin-top:4px; line-height:1.3;}
.stk-meta{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.stk-card-stok{text-align:right; flex:0 0 auto; min-width:52px;}
.stk-stok-val{margin-top:2px; font-size:18px; font-weight:800; letter-spacing:-.02em;}
.stk-stok-val .badge{font-size:14px; padding:3px 8px;}
.stk-mini{font-size:11px; font-weight:600; color:var(--ink-faint);}
.stk-card-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid #E7F0EE;
}
.stk-card-grid-5{grid-template-columns:repeat(5,1fr);}
.stk-card-grid span{display:block; font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase;}
.stk-card-grid b{display:block; margin-top:2px; font-size:12.5px;}
.stk-print-root[hidden]{display:none !important;}
.stk-sheet{color:#0F172A; font-size:12px;}
.stk-sheet-head{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:2px solid #0F1E1B;
}
.stk-sheet-brand{font-size:18px; font-weight:800; letter-spacing:.02em;}
.stk-sheet-sub{margin-top:2px; font-size:12px; color:#64748B;}
.stk-sheet-meta{text-align:right; font-size:11.5px; color:#64748B; line-height:1.5;}
.stk-sheet-sum{
  display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:12px;
  padding:10px 12px; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:10px;
  font-size:12px; color:#64748B;
}
.stk-sheet-sum b{color:#0F172A;}
.stk-sheet-table{width:100%; border-collapse:collapse;}
.stk-sheet-table th{
  text-align:left; padding:8px 6px; font-size:10px; text-transform:uppercase;
  letter-spacing:.04em; color:#64748B; border-bottom:1px solid #CBD5E1;
}
.stk-sheet-table td{padding:7px 6px; border-bottom:1px solid #E7F0EE; vertical-align:top;}
.stk-sheet-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.stk-sheet-foot{margin-top:14px; font-size:11px; color:#7C908A;}

/* ===== RIWAYAT ===== */
.riwayat-mob-only{display:none;}
.rw-modes{
  display:inline-flex; gap:4px; padding:4px; margin-bottom:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.rw-mode{
  border:0; background:transparent; cursor:pointer; font:inherit;
  padding:8px 14px; border-radius:9px; font-size:13px; font-weight:700; color:var(--ink-soft);
}
.rw-mode.active{background:#0F1E1B; color:#fff;}
.rw-period-bar{align-items:center;}
.rw-period-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px;
}
.rw-period-controls .period-control.is-hidden{display:none !important;}
.rw-pdf-btn{
  width:auto !important; height:44px; padding:0 16px; border-radius:12px; white-space:nowrap;
  font-size:13px; font-weight:600; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.rw-help-btn{
  width:auto !important; height:44px; padding:0 14px; border-radius:12px; white-space:nowrap;
  font-size:13px; font-weight:600; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
}
.rw-help-btn:hover{border-color:#0F9E96; color:#0F1E1B; background:#F3F7F6;}
.rw-help-ico{
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0F1E1B; color:#fff; font-size:12px; font-weight:800; line-height:1;
}
.modal-card--guide{
  max-width:min(760px, 96vw);
  max-height:min(90vh, 900px);
  display:flex; flex-direction:column; overflow:hidden !important;
}
.modal-card--guide .modal-head,
.modal-card--guide .modal-foot{flex-shrink:0;}
.modal-card--guide .modal-body{
  flex:1; min-height:0; overflow:auto; padding:14px 18px 10px;
  background:linear-gradient(180deg,#F8FBFA 0%, #F3F7F6 48%, #F3F7F6 100%);
}
/* Web: X saja (tanpa Tutup) · HP: Tutup saja (tanpa X) */
@media (min-width:801px){
  .modal-card--guide .guide-foot-close{display:none !important;}
}
@media (max-width:800px){
  .modal-card--guide .modal-x{display:none !important;}
  .modal-card--guide .modal-foot{display:flex !important;}
  .modal-card--guide .modal-foot .btn,
  .modal-card--guide .modal-foot .btn-primary{flex:1; min-height:46px;}
}
.guide-lead{
  margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); font-weight:500;
}
.guide-tabs{
  display:flex; gap:6px; padding:4px; margin-bottom:16px;
  background:#E8F1EF; border-radius:12px; position:sticky; top:0; z-index:2;
}
.guide-tab{
  flex:1; border:0; background:transparent; cursor:pointer; font:inherit;
  padding:10px 12px; border-radius:9px; font-size:13px; font-weight:700; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.guide-tab.active{background:#0F1E1B; color:#fff;}
.guide-tip{
  margin:0 0 14px; padding:12px 14px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(15,30,27,.04);
  font-size:13px; line-height:1.5; color:var(--ink); font-weight:500;
}
.guide-tip p{margin:0;}
.guide-tip-label{
  display:inline-block; margin-bottom:8px; padding:3px 8px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:#E8631C;
}
.guide-tip b{font-weight:800; color:#0F1E1B;}
.guide-sec{
  margin-bottom:14px; padding:14px 14px 12px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(15,30,27,.04);
}
.guide-sec-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.guide-sec-num{
  flex:0 0 auto; min-width:34px; height:28px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:#0F1E1B; color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.02em;
}
.guide-sec-title{
  margin:0; font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:#0F1E1B; line-height:1.3;
}
.guide-sec-intro{
  margin:0 0 12px; font-size:13px; line-height:1.45; color:var(--ink-soft); font-weight:500;
}
.guide-dl{margin:0; display:flex; flex-direction:column; gap:8px;}
.guide-term{
  display:grid; grid-template-columns:minmax(120px, 34%) 1fr; gap:10px 14px;
  padding:11px 12px; border-radius:12px; border:1px solid #E2EBE8; background:#F8FBFA;
}
.guide-term dt{
  margin:0; font-size:13px; font-weight:800; color:#0F1E1B; line-height:1.35;
}
.guide-term dd{
  margin:0; font-size:13px; line-height:1.45; color:var(--ink-soft); font-weight:500;
}
.guide-steps{
  margin:0 0 12px; padding:0; list-style:none; counter-reset:gstep;
  display:flex; flex-direction:column; gap:8px;
}
.guide-steps li{
  counter-increment:gstep;
  display:flex; gap:10px; align-items:flex-start;
  margin:0; padding:10px 12px; border-radius:12px;
  background:#F8FBFA; border:1px solid #E2EBE8;
  font-size:13px; line-height:1.45; color:var(--ink); font-weight:500;
}
.guide-steps li::before{
  content:counter(gstep);
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  border-radius:50%; background:#0F9E96; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.guide-step-body{flex:1; min-width:0;}
.guide-bullets{
  margin:0 0 4px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
}
.guide-bullets li{
  position:relative; margin:0; padding:0 0 0 16px;
  font-size:13px; line-height:1.45; color:var(--ink-soft); font-weight:500;
}
.guide-bullets li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:#E8631C;
}
.guide-bullets b,.guide-steps b{color:#0F1E1B; font-weight:800;}
.guide-flow{display:flex; flex-direction:column; gap:10px;}
.guide-flow-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border-radius:12px; border:1px solid #E2EBE8; background:#F8FBFA;
}
.guide-flow-tag{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#E8631C; color:#fff; font-size:12px; font-weight:800;
}
.guide-flow-card h5{
  margin:2px 0 8px; font-size:13px; font-weight:800; color:#0F1E1B;
}
.guide-flow-card .guide-steps,
.guide-flow-card .guide-bullets{margin-bottom:0;}
.guide-table-wrap{overflow:auto; border-radius:12px; border:1px solid var(--line); margin-bottom:8px;}
.guide-table{width:100%; border-collapse:collapse; font-size:12.5px; background:#fff;}
.guide-table th,.guide-table td{
  padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.4;
}
.guide-table th{
  background:#E8F1EF; font-size:10px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#5A6F69; white-space:nowrap;
}
.guide-table tr:last-child td{border-bottom:0;}
.guide-table b{font-weight:800; color:#0F1E1B;}
.guide-note{
  margin:10px 0 0; font-size:12px; line-height:1.45; color:var(--ink-faint); font-weight:500;
}
.guide-check-wrap{margin-top:4px;}
.guide-check-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; padding:8px 10px; border-radius:10px; background:#E8F1EF;
  font-size:12px; font-weight:700; color:#0F1E1B;
}
.guide-check-reset{
  border:0; background:transparent; color:#E8631C; font:inherit;
  font-size:12px; font-weight:800; cursor:pointer; padding:4px 6px;
}
.guide-check-reset:hover{text-decoration:underline;}
.guide-check{
  margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.guide-check-item{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:12px 12px; border-radius:12px; border:1px solid var(--line); background:#fff;
  transition:border-color .15s, background .15s;
  user-select:none;
}
.guide-check-item:hover{border-color:#0F9E96;}
.guide-check-item.is-on{
  border-color:rgba(15,158,150,.45); background:rgba(15,158,150,.08);
}
.guide-check-item input{position:absolute; opacity:0; pointer-events:none;}
.guide-check-box{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:6px;
  border:2px solid #0F9E96; background:#fff; position:relative;
}
.guide-check-item.is-on .guide-check-box{
  background:#0F9E96; border-color:#0F9E96;
}
.guide-check-item.is-on .guide-check-box::after{
  content:""; position:absolute; left:5px; top:2px;
  width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.guide-check-text{
  flex:1; font-size:13px; font-weight:650; color:var(--ink); line-height:1.4;
}
.guide-check-item.is-on .guide-check-text{
  color:#0F1E1B; text-decoration:line-through; text-decoration-color:rgba(15,30,27,.28);
}
.guide-details{
  margin:8px 0 4px; border:1px dashed #C5D5D0; border-radius:14px;
  background:rgba(255,255,255,.7); padding:0 12px;
}
.guide-details summary{
  cursor:pointer; padding:12px 4px; font-size:13px; font-weight:800; color:#0F1E1B;
  list-style:none; display:flex; align-items:center; gap:8px;
}
.guide-details summary::-webkit-details-marker{display:none;}
.guide-details-ico{
  width:22px; height:22px; border-radius:6px; background:#0F1E1B; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; line-height:1;
}
.guide-details[open] .guide-details-ico{background:#0F9E96;}
.guide-details[open] summary{border-bottom:1px solid var(--line); margin-bottom:4px;}
.guide-details-body{padding:4px 0 12px;}
.guide-details-body .guide-sec{box-shadow:none;}
@media (max-width:800px){
  .rw-help-btn{flex:1; min-width:0;}
  .guide-term{grid-template-columns:1fr; gap:4px;}
  .guide-tabs{flex-direction:column;}
  .modal-card--guide{max-height:94dvh; border-radius:18px 18px 0 0;}
  .guide-table th:nth-child(2),.guide-table td:nth-child(2){display:none;}
}
.rw-pdf-pick{display:flex; flex-direction:column; gap:10px;}
.rw-pdf-pick-note{
  margin:0; font-size:13px; color:var(--ink-soft); font-weight:500;
}
.rw-pdf-pick-note b{color:var(--ink);}
.rw-pdf-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  width:100%; text-align:left; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer;
  font:inherit; color:var(--ink); transition:border-color .15s, background .15s;
}
.rw-pdf-opt:hover{border-color:#0F1E1B; background:var(--bg-soft);}
.rw-pdf-opt b{font-size:14px; font-weight:800;}
.rw-pdf-opt span{font-size:12px; font-weight:500; color:var(--ink-faint);}
.riwayat-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px;}
.rw-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.rw-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.rw-value{font-size:22px; font-weight:700; letter-spacing:-.02em;}
.rw-value.accent{color:var(--red);}
.riwayat-panel{overflow:hidden;}
.riwayat-body-wrap{padding-top:4px;}
.riwayat-table td{padding:14px 0;}
.riwayat-table .nota{font-weight:700; color:var(--ink);}
.riwayat-table .tgl{font-size:12.5px; color:var(--ink-faint);}
.rw-sumber{
  display:inline-block; margin-top:4px; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:999px; padding:2px 7px;
}
.rw-actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;}
.method-pill{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line);
}
.method-pill.cash{background:#ECFDF5; color:#047857; border-color:#A7F3D0;}
.method-pill.qris{background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE;}
.method-pill.debit{background:#F5F3FF; color:#6D28D9; border-color:#DDD6FE;}
.method-pill.hutang{background:var(--accent-bg); color:#C2410C; border-color:#F3E0A8;}
.riwayat-empty{text-align:center; padding:36px 16px; color:var(--ink-faint);}
.riwayat-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}

/* ===== PIUTANG ===== */
/* Desktop: judul Piutang dari topbar — hindari dobel seperti Laporan */
.ptg-head{display:none;}
.ptg-kicker{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.ptg-title{
  margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.ptg-desc{margin:6px 0 0; font-size:13px; color:var(--ink-soft); font-weight:500;}
.ptg-desc-mob{display:none;}
.ptg-summary{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; margin-bottom:14px;
}
.ptg-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.ptg-stat-main{
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(232,99,28,.18), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none; color:#F8FAFC;
}
.ptg-stat-main .ptg-stat-label{color:#F08A4B;}
.ptg-stat-main .ptg-stat-value{color:#fff;}
.ptg-stat-main .ptg-stat-sub{color:rgba(248,250,252,.7);}
.ptg-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px;
}
.ptg-stat-value{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.ptg-stat-value.accent{color:var(--red);}
.ptg-stat-sub{margin-top:6px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.ptg-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap; margin-bottom:12px;
}
.ptg-tabs{display:flex; gap:6px; flex-wrap:nowrap; flex:0 0 auto;}
.ptg-tab{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 11px; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.ptg-tab b{font-variant-numeric:tabular-nums;}
.ptg-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.ptg-tab.active b{color:#FFD4A8;}
.ptg-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 180px; min-width:140px; max-width:320px; margin:0; height:40px;
}
.ptg-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:15px; pointer-events:none; line-height:1; z-index:1;
}
.ptg-search input{
  width:100%; height:40px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 36px !important; background:#fff !important; font-size:13px;
  box-shadow:none !important;
}
.ptg-add-manual{
  flex:0 0 auto; width:auto; max-width:max-content; align-self:flex-start;
  height:40px; padding:0 14px; border-radius:11px;
  white-space:nowrap; font-weight:700;
}
.ptg-add-manual[hidden]{display:none !important;}
.ptg-search input:focus{outline:none; border-color:#CBD5E1;}
.ptg-board{margin-top:2px;}
.ptg-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow-x:auto; box-shadow:var(--shadow-sm);
}
.ptg-table{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed;}
.ptg-table thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
  vertical-align:middle;
}
.ptg-table thead th.ptg-th-center,
.ptg-table tbody td.ptg-td-center{text-align:center;}
.ptg-table thead th.ptg-th-right,
.ptg-table tbody td.ptg-td-total{text-align:right;}
.ptg-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
  color:var(--ink);
}
.ptg-table tbody tr:last-child td{border-bottom:0;}
.ptg-table tbody tr:hover{background:#F8FAFC;}
.ptg-table tbody tr.tone-owe td:first-child{box-shadow:inset 3px 0 0 #F08A4B;}
.ptg-table tbody tr.tone-late td:first-child{box-shadow:inset 3px 0 0 var(--red);}
.ptg-table tbody tr.tone-ok td:first-child{box-shadow:inset 3px 0 0 #0F9E96;}
.ptg-table th:nth-child(1),
.ptg-table td:nth-child(1){width:110px;}
.ptg-table th:nth-child(2),
.ptg-table td:nth-child(2){width:18%;}
.ptg-table th:nth-child(3),
.ptg-table td:nth-child(3){width:160px;}
.ptg-table th:nth-child(4),
.ptg-table td:nth-child(4){width:90px;}
.ptg-table th:nth-child(5),
.ptg-table td:nth-child(5){width:110px;}
.ptg-table th:nth-child(6),
.ptg-table td:nth-child(6){width:120px;}
.ptg-table th:nth-child(7),
.ptg-table td:nth-child(7){width:110px;}
.ptg-table th:nth-child(8),
.ptg-table td:nth-child(8){width:112px;}
.ptg-td-nota{font-weight:700; white-space:nowrap;}
.ptg-td-total{font-weight:700; white-space:nowrap;}
.ptg-td-act{text-align:center; white-space:nowrap;}
.ptg-act-group{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.ptg-td-act .btn,
.ptg-td-act .btn-primary{
  height:32px; padding:0 12px; font-size:12px; font-weight:600; border-radius:9px;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.ptg-table .ptg-name{
  font-size:13.5px; font-weight:700; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ptg-table .ptg-tel{margin:0; font-size:12px;}
.ptg-table .ptg-sumber{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ptg-table .ptg-tempo{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ptg-hint{margin-top:2px; font-size:11px; font-weight:500; color:var(--ink-faint);}
.ptg-act-empty{color:var(--ink-faint);}
.ptg-list{display:flex; flex-direction:column; gap:8px; margin:0;}
.ptg-ticket{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; box-shadow:var(--shadow-sm);
  border-left:4px solid #CBD5E1; transition:border-color .15s, background .12s;
}
.ptg-ticket.tone-owe{border-left-color:#F08A4B;}
.ptg-ticket.tone-late{border-left-color:var(--red);}
.ptg-ticket.tone-ok{border-left-color:#0F9E96;}
.ptg-ticket:hover{border-color:#CBD5E1; background:#F8FAFC;}
.ptg-col{min-width:0;}
.ptg-nota{font-size:13px; font-weight:700; color:var(--ink);}
.ptg-sumber-pill{
  display:none; margin-top:4px; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:999px; padding:2px 7px; width:fit-content;
}
.ptg-name{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.ptg-tel{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; color:var(--ink-faint); text-decoration:none;
}
.ptg-tel.is-empty{opacity:.55;}
.ptg-tel:hover{color:var(--ink-soft); text-decoration:underline;}
.ptg-tel-ico{flex-shrink:0; opacity:.75;}
.ptg-sumber{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ptg-tempo{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ptg-tempo.is-late{color:var(--red);}
.ptg-tempo-hint{display:none;}
.ptg-total{font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap;}
.ptg-col-act{display:flex; align-items:center; justify-content:flex-end;}
.ptg-col-stat{display:flex; align-items:center; justify-content:flex-end;}
.ptg-lunas-btn{white-space:nowrap;}
.ptg-empty{
  text-align:center; padding:48px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.ptg-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}

/* ===== SDM: Karyawan / Upah / Absensi / Payroll ===== */
.hr-mob-only{display:none;}
.hr-head{align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.hr-kicker{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.hr-title{
  margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.hr-desc{margin:6px 0 0; font-size:13px; color:var(--ink-soft); font-weight:500;}
.hr-desc-mob{display:none;}
.hr-summary{
  display:grid; grid-template-columns:minmax(200px,1.3fr) repeat(2,minmax(110px,1fr));
  gap:10px; margin-bottom:14px;
}
.hr-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm); color:var(--ink);
}
.hr-stat-main{
  background-color:#0F1E1B;
  background-image:
    radial-gradient(220px 90px at 100% 0%, rgba(240,138,75,.22), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none; color:#F8FAFC;
  box-shadow:0 8px 20px rgba(27,36,48,.22);
}
.hr-stat-main .hr-stat-label{color:#F08A4B;}
.hr-stat-main .hr-stat-value{color:#FFFFFF;}
.hr-stat-main .hr-stat-sub{color:rgba(248,250,252,.78);}
.hr-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.hr-stat-value{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.hr-stat-value.accent{color:var(--red);}
.hr-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.hr-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.hr-search{position:relative; flex:1; min-width:180px; max-width:320px;}
.hr-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); pointer-events:none;
}
.hr-search input{
  width:100%; height:42px; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 34px; background:#fff; font:inherit; font-size:13px;
}
.hr-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.hr-tab{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer;
}
.hr-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.hr-pane.is-hidden{display:none !important;}
.hr-section-title{margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ink);}
.hr-section-note{margin:0; font-size:12.5px; color:var(--ink-faint); font-weight:500;}
.hr-compose{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.hr-form{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px;}
.hr-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.hr-field-full{grid-column:1 / -1;}
.hr-field label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);}
.hr-field input,.hr-field select{
  height:42px; border:1px solid var(--line); border-radius:11px; padding:0 12px;
  background:#fff; font:inherit; font-size:13.5px; color:var(--ink);
}
.hr-field-inline{
  display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;
}
.hr-field-inline input{
  height:40px; border:1px solid var(--line); border-radius:11px; padding:0 10px;
  background:#fff; font:inherit; font-size:13px; color:var(--ink);
}
.hr-list{display:flex; flex-direction:column; gap:8px;}
.hr-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px; border-left:4px solid #CBD5E1; box-shadow:var(--shadow-sm);
}
.hr-card.tone-ok{border-left-color:#0F9E96;}
.hr-card.tone-off{border-left-color:#7C908A; opacity:.92;}
.hr-card.tone-owe{border-left-color:#F08A4B;}
.hr-card-title{font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.hr-card-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;
  font-size:12px; color:var(--ink-faint); font-weight:500;
}
.hr-card-sub{margin-top:6px; font-size:12px; color:var(--ink-soft);}
.hr-card-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}
.hr-kv{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px;
}
.hr-kv > div,.hr-kv-modal > div{
  display:flex; justify-content:space-between; gap:8px; padding:8px 10px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  font-size:12px; color:var(--ink-faint);
}
.hr-kv b,.hr-kv-modal b{color:var(--ink);}
.hr-kv-modal{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:12px;}
.hr-empty{
  text-align:center; padding:40px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.hr-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}

/* Karyawan table / detail */
.emp-desk-only{display:initial;}
.btn.emp-desk-only,.btn-primary.emp-desk-only{display:inline-flex;}
.emp-add-btn{
  width:auto; height:42px; padding:0 16px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; font-size:13px; font-weight:600;
}
.emp-tabs{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto;}
.emp-tab{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.emp-tab b{font-variant-numeric:tabular-nums; font-weight:800; color:inherit;}
.emp-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.emp-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow-x:auto; overflow-y:hidden; box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;
}
.emp-table{
  width:100%; min-width:920px; border-collapse:collapse; font-size:13px; table-layout:fixed;
}
.emp-table thead th{
  text-align:left; padding:12px 14px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.emp-table thead th.emp-th-aksi{text-align:right;}
.emp-table tbody td{
  padding:12px 14px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis;
}
.emp-table tbody tr:last-child td{border-bottom:0;}
.emp-table tbody tr:hover{background:#F8FAFC;}
.emp-table tbody tr.tone-off{opacity:.78;}
.emp-table tbody tr.tone-warn td:first-child{box-shadow:inset 3px 0 0 var(--red);}
.emp-table th:nth-child(1), .emp-table td:nth-child(1){width:118px;}
.emp-table th:nth-child(2), .emp-table td:nth-child(2){width:24%; min-width:140px;}
.emp-table th:nth-child(3), .emp-table td:nth-child(3){width:16%; min-width:110px;}
.emp-table th:nth-child(4), .emp-table td:nth-child(4){width:130px;}
.emp-table th:nth-child(5), .emp-table td:nth-child(5){width:110px;}
.emp-table th:nth-child(6), .emp-table td:nth-child(6){width:90px;}
.emp-table th:nth-child(7), .emp-table td:nth-child(7){width:120px;}
.emp-td-code{font-weight:700; white-space:nowrap;}
.emp-name{
  font-size:13.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.emp-table td:nth-child(3){
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.emp-warn{margin-top:3px; font-size:11.5px; font-weight:700; color:var(--red); white-space:normal;}
.emp-td-aksi{text-align:right; overflow:visible !important;}
.emp-aksi,.emp-card-aksi,.upah-aksi,.upah-card-aksi{
  display:inline-flex; gap:6px; justify-content:flex-end; align-items:center; flex-wrap:nowrap;
}
.emp-cards{display:flex; flex-direction:column; gap:10px;}
.emp-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); border-left:4px solid #CBD5E1;
}
.emp-card.tone-ok{border-left-color:#0F9E96;}
.emp-card.tone-off{border-left-color:#7C908A; opacity:.92;}
.emp-card.tone-warn{border-left-color:var(--red);}
.emp-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.emp-code{font-size:12px; font-weight:700; color:var(--ink-faint);}
.emp-card .emp-name{margin-top:3px; font-size:15px;}
.emp-meta{margin-top:4px; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.emp-sub{margin-top:4px; font-size:12px; color:var(--ink-faint);}
.emp-card-aksi{
  display:flex; flex-wrap:nowrap; gap:8px; justify-content:stretch; align-items:center;
  margin-top:12px; padding-top:12px; border-top:1px solid #E7F0EE;
}
.emp-card-aksi .btn,
.emp-card-aksi .ico-btn{
  flex:1 1 0; min-width:0; width:auto; min-height:40px; border-radius:10px;
  justify-content:center;
}
.emp-form{display:flex; flex-direction:column; gap:12px;}
.emp-form-cols{
  display:grid; grid-template-columns:1.15fr .85fr; gap:12px; align-items:stretch;
}
.emp-form-sec{
  border:1px solid var(--line); border-radius:14px; background:#F8FAFC;
  padding:12px 14px 14px;
}
.emp-form-sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #E2E8F0;
}
.emp-form-sec-head h4,
.emp-detail-sec h4{
  margin:0; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
}
.emp-form-sec-head span{
  font-size:11.5px; font-weight:500; color:var(--ink-faint); text-align:right;
}
.emp-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.emp-form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.emp-form-grid .field{margin:0;}
.emp-form-grid .field label{
  display:flex; align-items:center; gap:6px; margin-bottom:5px;
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint);
}
.emp-form-grid .field input,
.emp-form-grid .field select,
.emp-form-grid .field textarea{
  width:100%; margin:0; border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink);
  min-height:40px; box-sizing:border-box;
}
.emp-form-grid .field input:focus,
.emp-form-grid .field select:focus,
.emp-form-grid .field textarea:focus{
  outline:none; border-color:#7C908A; box-shadow:0 0 0 3px rgba(148,163,184,.18);
}
.emp-form-grid .field input:disabled{
  background:#E7F0EE; color:var(--ink-soft); cursor:not-allowed;
}
.emp-field-full,.emp-span-2{grid-column:span 2;}
.emp-form-grid-3 .emp-span-2{grid-column:span 2;}
.emp-form-cols .emp-form-grid{grid-template-columns:1fr 1fr;}
.emp-form-cols .emp-span-2{grid-column:1 / -1;}
.emp-form textarea{
  min-height:56px; resize:vertical; line-height:1.4;
}
.emp-opt{
  font-weight:600; text-transform:none; letter-spacing:0;
  color:#7C908A; font-size:10.5px; background:#E7F0EE;
  border-radius:999px; padding:1px 7px;
}
.emp-detail{display:flex; flex-direction:column; gap:12px;}
.emp-detail-head{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px;
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(232,99,28,.12), transparent 60%),
    linear-gradient(135deg, #0F1E1B 0%, #173330 100%);
  color:#F8FAFC; border-color:transparent;
}
.emp-detail-head .emp-detail-code{color:rgba(248,250,252,.72);}
.emp-detail-head .emp-detail-name{color:#fff;}
.emp-detail-head .badge{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.18);}
.emp-detail-head .badge.ok{background:rgba(15,158,150,.28); border-color:rgba(15,158,150,.4);}
.emp-detail-head .badge.low{background:rgba(212,91,74,.28); border-color:rgba(212,91,74,.4);}
.emp-detail-code{font-size:12px; font-weight:700; color:var(--ink-faint);}
.emp-detail-name{margin-top:4px; font-size:20px; font-weight:800; letter-spacing:-.02em;}
.emp-detail-badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;}
.emp-detail-body{
  display:grid; grid-template-columns:1.2fr .8fr; gap:12px; align-items:start;
}
.emp-detail-side{display:flex; flex-direction:column; gap:12px; min-width:0;}
.emp-detail-sec{
  margin:0; border:1px solid var(--line); border-radius:14px; background:#F8FAFC;
  padding:12px 14px 14px;
}
.emp-detail-sec h4{
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid #E2E8F0;
}
.emp-kv{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.emp-kv--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.emp-kv > div{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  min-width:0;
}
.emp-kv span{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.emp-kv b{
  font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35;
  overflow-wrap:anywhere; word-break:break-word;
}
.emp-kv b.mono,
.emp-kv-nik{
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.emp-kv-full{grid-column:1 / -1;}
.emp-kv-full .emp-kv-nik{
  white-space:normal; overflow:visible; text-overflow:unset;
  font-size:14px; letter-spacing:.04em;
}
.emp-atasan-suggest{position:relative;}
.emp-atasan-suggest .hf-suggest-drop{z-index:40;}
.emp-detail-identity{display:flex; align-items:flex-start; gap:12px; min-width:0;}
.emp-detail-foto-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.emp-detail-head .emp-detail-foto-actions .btn{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff;
}
.emp-detail-head .emp-detail-foto-actions .btn:hover{
  background:rgba(255,255,255,.18);
}
.emp-detail-head .emp-foto{
  border-color:rgba(255,255,255,.25); box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.emp-foto{
  width:64px; height:80px; border-radius:10px; flex-shrink:0;
  background:#E8F0ED center/cover no-repeat; border:1px solid var(--line);
}
.emp-foto--lg{width:72px; height:90px;}
.emp-foto--empty{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#0F9E96,#0F1E1B); color:#fff;
  font-weight:800; font-size:18px; letter-spacing:.02em;
}

/* ID Card preview — kartu (CR80) + badge gantung · premium lux */
.idc-preview{display:flex; flex-direction:column; gap:12px; align-items:center;}
.idc-preview-tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.idc-format-tabs{padding:2px; background:var(--bg,#F3F7F6); border-radius:12px; border:1px solid var(--line);}
.idc-fmt.active,.idc-tab.active{background:var(--teal-soft,#E6F5F4); border-color:var(--teal,#0F9E96); color:var(--ink);}
.idc-stage{width:100%; display:flex; justify-content:center; padding:8px 0 4px; min-height:220px; align-items:center;}
.idc-side{display:none;}
.idc-side.is-on{display:block;}
.idc-hint{margin:0; font-size:12px; color:var(--ink-faint); text-align:center; line-height:1.4; max-width:380px;}
.idc{
  border-radius:12px; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  border:1px solid rgba(15,30,27,.14);
  box-shadow:0 10px 28px rgba(15,30,27,.2);
}
.idc--kartu{width:324px; height:204px;}
.idc--badge{width:204px; height:324px;}
.idc--lux.idc-front{
  background:
    radial-gradient(140px 80px at 100% 0%, rgba(232,99,28,.34), transparent 68%),
    radial-gradient(120px 70px at 0% 100%, rgba(15,158,150,.28), transparent 70%),
    linear-gradient(145deg, #0F1E1B 0%, #173330 100%);
  color:#F8FAFC;
}
.idc--lux.idc-back{
  background:linear-gradient(160deg, #F8FAFC 0%, #EEF4F2 100%);
  color:var(--ink);
}
.idc-slot{display:none; justify-content:center; padding:8px 0 4px;}
.idc--badge .idc-slot{display:flex;}
.idc-slot span{
  width:44px; height:8px; border-radius:6px; background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.idc-inner{
  position:relative; z-index:1; flex:1; min-height:0;
  display:flex; flex-direction:column; padding:12px 14px 10px;
}
.idc--badge .idc-inner{align-items:center; text-align:center; padding:8px 12px 10px;}
.idc-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.idc-top--center{flex-direction:column; justify-content:center; gap:4px; margin-bottom:8px;}
.idc-brand{display:flex; align-items:center; gap:8px; min-width:0;}
.idc-logo{
  width:30px; height:30px; object-fit:contain; border-radius:8px; flex-shrink:0;
  background:#fff; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.idc--badge .idc-logo{width:40px; height:40px; border-radius:10px;}
.idc-brand-name{
  font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  line-height:1.15; color:#fff;
}
.idc-brand-sub{font-size:10px; font-weight:600; color:rgba(248,250,252,.68); margin-top:1px;}
.idc-chip{
  flex-shrink:0; padding:3px 8px; border-radius:999px;
  background:rgba(232,99,28,.22); border:1px solid rgba(232,99,28,.4);
  color:#F6B48A; font-size:9.5px; font-weight:800; letter-spacing:.05em;
}
.idc-body{flex:1; display:flex; gap:12px; align-items:stretch; min-height:0;}
.idc-foto,.idc .emp-foto{
  width:76px; height:98px; border-radius:10px; flex-shrink:0;
  background:#E8F0ED center/cover no-repeat;
  border:1px solid rgba(255,255,255,.28); box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.idc-foto--badge,.idc--badge .emp-foto{
  width:96px; height:118px; border-radius:12px; margin:0 auto 8px;
}
.idc--badge .emp-foto--empty{font-size:26px;}
.idc-info{min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px;}
.idc-code-pill{
  display:inline-block; align-self:flex-start; padding:3px 8px; border-radius:999px;
  background:rgba(15,158,150,.2); border:1px solid rgba(15,158,150,.35);
  color:#9FE3DE; font-size:11px; font-weight:700;
}
.idc--badge .idc-code-pill{align-self:center; margin-top:4px;}
.idc-name{font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#fff;}
.idc--badge .idc-name{font-size:14px; margin-top:4px;}
.idc-role{font-size:12px; font-weight:600; color:#0F9E96;}
.idc-join{font-size:10px; color:rgba(248,250,252,.62); font-weight:600; margin-top:4px;}
.idc-meta-row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
.idc-meta-row span{
  display:block; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(248,250,252,.48);
}
.idc-meta-row b{display:block; font-size:11px; font-weight:700; color:#F8FAFC; margin-top:2px;}
.idc-accent{height:5px; flex-shrink:0; background:linear-gradient(90deg,#E8631C,#0F9E96);}
.idc-back .idc-brand-name{color:#0F1E1B;}
.idc-back .idc-brand-sub{color:var(--ink-faint);}
.idc-back .idc-chip{
  background:rgba(15,158,150,.12); border-color:rgba(15,158,150,.28); color:#0B7A74;
}
.idc-back-body{flex:1; display:flex; flex-direction:column; gap:8px; min-height:0;}
.idc--badge .idc-back-body{align-items:center; text-align:center;}
.idc-back-label{
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
.idc-back-val{margin-top:3px; font-size:12px; font-weight:600; color:var(--ink); line-height:1.35;}
.idc-back-foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:10px; font-weight:600; color:var(--ink-faint); width:100%;
}
.idc--badge .idc-back-foot{justify-content:center; flex-direction:column; gap:4px;}
.idc-back-foot b{color:#0F9E96; font-weight:700;}
.idc-back-foot .mono{color:#0F1E1B; font-weight:800; font-size:13px;}

/* ===== UPAH ===== */
.upah-summary{
  display:grid; grid-template-columns:minmax(200px,1.3fr) repeat(2,minmax(110px,1fr));
  gap:10px; margin-bottom:14px;
}
.upah-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.upah-stat-main{
  background-color:#0F1E1B;
  background-image:
    radial-gradient(220px 90px at 100% 0%, rgba(240,138,75,.22), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none; color:#F8FAFC;
  box-shadow:0 8px 20px rgba(27,36,48,.22);
}
.upah-stat-main .upah-stat-label{color:#F08A4B;}
.upah-stat-main .upah-stat-value{color:#fff;}
.upah-stat-main .upah-stat-sub{color:rgba(248,250,252,.78);}
.upah-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.upah-stat-value{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.upah-stat-value.accent{color:var(--red);}
.upah-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.upah-toolbar{margin-bottom:12px;}
.upah-search{
  position:relative; display:flex; align-items:center;
  max-width:360px; height:42px; margin:0;
}
.upah-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); pointer-events:none;
}
.upah-search input{
  width:100%; height:42px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 34px; background:#fff; font:inherit; font-size:13px;
}
.upah-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.upah-table{width:100%; border-collapse:collapse; font-size:13px;}
.upah-table thead th{
  text-align:left; padding:11px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
}
.upah-table thead th.num,
.upah-table tbody td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.upah-table thead th.upah-th-aksi,
.upah-table tbody td.upah-td-aksi{text-align:right;}
.upah-td-aksi .upah-aksi{width:100%;}
.upah-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
}
.upah-table tbody tr:last-child td{border-bottom:0;}
.upah-table tbody tr:hover{background:#F8FAFC;}
.upah-table tbody tr.tone-off{opacity:.78;}
.upah-name{font-size:13.5px; font-weight:700; color:var(--ink);}
.upah-sub{margin-top:2px; font-size:11.5px; color:var(--ink-faint); font-weight:500;}
.upah-code{font-size:12px; font-weight:700; color:var(--ink-faint);}
.upah-cards{display:flex; flex-direction:column; gap:10px;}
.upah-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); border-left:4px solid #0F9E96;
}
.upah-card.tone-off{border-left-color:#7C908A; opacity:.92;}
.upah-card.tone-owe{border-left-color:#F08A4B;}
.upah-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.upah-card .upah-name{margin-top:3px; font-size:15px;}
.upah-card-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid #E7F0EE;
}
.upah-card-grid span{
  display:block; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}
.upah-card-grid b{display:block; margin-top:2px; font-size:12.5px; color:var(--ink);}
.upah-card-aksi{margin-top:12px;}
.upah-card-aksi .btn{width:100%; min-height:40px; border-radius:10px;}
.upah-compose{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.upah-compose-head h4{margin:0 0 12px; font-size:15px; font-weight:700;}
.upah-loan-suggest{position:relative;}
.upah-loan-suggest .hf-suggest-drop{z-index:40;}
.upah-loan-form{
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr auto; gap:10px; align-items:end;
}
.upah-loan-form .field{margin:0;}
.upah-loan-form .field label{
  display:block; margin-bottom:5px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint);
}
.upah-loan-form .field input,
.upah-loan-form .field select{
  width:100%; height:40px; margin:0; border:1px solid var(--line); border-radius:10px;
  padding:0 11px; font:inherit; background:#fff;
}
.upah-loan-btn .btn-primary{
  width:auto; min-width:110px; height:40px; padding:0 16px; border-radius:10px;
}
.upah-form{display:flex; flex-direction:column; gap:12px;}
.upah-form-head{
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
  margin:0; padding:12px 14px; border-radius:14px;
  background:
    radial-gradient(160px 70px at 100% 0%, rgba(232,99,28,.14), transparent 60%),
    linear-gradient(135deg, #0F1E1B 0%, #173330 100%);
  color:#F8FAFC;
}
.upah-form-head .mono{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background:rgba(15,158,150,.22); border:1px solid rgba(15,158,150,.35);
  color:#9FE3DE; font-size:11px; font-weight:700;
}
.upah-form-head b{font-size:14px; font-weight:700; color:#fff;}
.upah-form-cols{
  display:grid; grid-template-columns:1.15fr .85fr; gap:12px; align-items:stretch;
}
.upah-form-sec{
  border:1px solid var(--line); border-radius:14px; background:#F8FAFC; padding:12px 14px;
}
.upah-form-sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #E2E8F0;
}
.upah-form-sec-head h4{
  margin:0; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
}
.upah-form-sec-head span{
  font-size:11.5px; font-weight:500; color:var(--ink-faint); text-align:right;
}
.upah-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.upah-form-grid .field{margin:0;}
.upah-form-grid .field label{
  display:block; margin-bottom:5px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint);
}
.upah-form-grid .field input,
.upah-form-grid .field select{
  width:100%; height:40px; margin:0; border:1px solid var(--line); border-radius:10px;
  padding:0 11px; font:inherit; background:#fff; box-sizing:border-box;
}
.upah-span-2{grid-column:span 2;}
.upah-pct-wrap{
  display:flex; align-items:stretch; gap:0;
}
.upah-pct-wrap input{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  flex:1;
}
.upah-pct-suffix{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; padding:0 10px;
  border:1px solid var(--line); border-left:0;
  border-radius:0 10px 10px 0;
  background:#EEF4F2; color:var(--ink-soft); font-weight:700; font-size:13px;
}
.upah-form-hint{
  margin:10px 0 0; font-size:12px; color:var(--ink-soft); font-weight:500; line-height:1.4;
}

/* ===== PAYROLL ===== */
.pay-desk-only{display:initial;}
.btn.pay-desk-only,.btn-primary.pay-desk-only{display:inline-flex;}
.pay-actions.pay-desk-only{display:flex;}
.pay-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.pay-tab{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer;
}
.pay-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.pay-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.pay-filters{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;}
.pay-field{
  display:flex; flex-direction:column; gap:5px; margin:0; min-width:0;
}
.pay-field span{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.pay-field input,
.pay-field select{
  height:40px; min-width:150px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px; background:#fff; font:inherit; font-size:13px; color:var(--ink);
}
.pay-actions{
  display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:nowrap;
  margin-left:auto;
}
.pay-actions .btn,
.pay-actions .btn-primary{
  width:auto; height:40px; padding:0 16px; border-radius:11px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
}
.pay-half-wrap.is-hidden{display:none !important;}
.pay-summary{
  display:grid; grid-template-columns:minmax(200px,1.3fr) repeat(2,minmax(110px,1fr));
  gap:10px; margin-bottom:14px;
}
.pay-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.pay-stat-main{
  background-color:#0F1E1B;
  background-image:
    radial-gradient(220px 90px at 100% 0%, rgba(240,138,75,.22), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none; color:#F8FAFC;
  box-shadow:0 8px 20px rgba(27,36,48,.22);
}
.pay-stat-main .pay-stat-label{color:#F08A4B;}
.pay-stat-main .pay-stat-value{color:#fff;}
.pay-stat-main .pay-stat-sub{color:rgba(248,250,252,.78);}
.pay-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.pay-stat-value{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.pay-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.pay-stat.is-hidden{display:none !important;}
.pay-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.pay-table{width:100%; border-collapse:collapse; font-size:13px;}
.pay-table thead th{
  text-align:left; padding:11px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
}
.pay-table thead th.num,
.pay-table tbody td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.pay-table thead th.pay-th-aksi,
.pay-table tbody td.pay-td-aksi{text-align:right;}
.pay-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
}
.pay-table tbody tr:last-child td{border-bottom:0;}
.pay-table tbody tr:hover{background:#F8FAFC;}
.pay-table tbody tr.tone-ok td:first-child{box-shadow:inset 3px 0 0 #0F9E96;}
.pay-name{font-size:13.5px; font-weight:700; color:var(--ink);}
.pay-sub{margin-top:2px; font-size:11.5px; color:var(--ink-faint); font-weight:500;}
.pay-code{font-size:12px; font-weight:700; color:var(--ink-faint);}
.pay-aksi{
  display:inline-flex; gap:6px; justify-content:flex-end; align-items:center;
  flex-wrap:nowrap; white-space:nowrap;
}
.pay-aksi .ico-btn,
.pay-aksi .btn-primary{width:34px; min-width:34px; height:34px; padding:0;}
.pay-cards{display:flex; flex-direction:column; gap:10px;}
.pay-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); border-left:4px solid #CBD5E1;
}
.pay-card.tone-ok{border-left-color:#0F9E96;}
.pay-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.pay-card .pay-name{margin-top:3px; font-size:15px;}
.pay-card-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid #E7F0EE;
}
.pay-card-grid span{
  display:block; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}
.pay-card-grid b{display:block; margin-top:2px; font-size:12.5px; color:var(--ink);}
.pay-card-grid .pay-span-2{grid-column:1 / -1;}
.pay-form{display:flex; flex-direction:column; gap:12px;}
.pay-form-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.pay-form-meta > div{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
}
.pay-form-meta span{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.pay-form-meta b{font-size:13px; color:var(--ink);}
.pay-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pay-form-grid .field{margin:0;}
.pay-form-grid .pay-span-2{grid-column:span 2;}

.att-summary{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin-bottom:12px;
}
.att-stat{
  padding:12px 14px; border-radius:14px; background:var(--panel);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.att-stat-main{
  background:linear-gradient(145deg, #0F1E1B 0%, #1F3D38 100%);
  border-color:transparent; color:#fff;
}
.att-stat-main .att-stat-label{color:#F08A4B;}
.att-stat-main .att-stat-value{color:#fff;}
.att-stat-main .att-stat-sub{color:rgba(248,250,252,.78);}
.att-stat-label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
}
.att-stat-value{margin-top:4px; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.att-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.att-toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:10px;
}
.att-field{
  display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.att-field input{
  height:40px; min-width:160px; padding:0 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); font-size:14px; font-weight:600; color:var(--ink);
}
.att-toolbar .btn-primary{
  width:auto; height:40px; padding:0 16px; border-radius:11px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; flex:0 0 auto;
}
.att-brush{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-bottom:8px; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.att-brush-label{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:4px;
}
.att-brush-btn{
  display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font:inherit; color:var(--ink); transition:box-shadow .15s, border-color .15s, transform .1s;
}
.att-brush-btn b{font-size:12px; font-weight:800; min-width:18px; text-align:center;}
.att-brush-btn span{font-size:11px; font-weight:600; color:var(--ink-soft);}
.att-brush-btn.is-on{
  border-color:#0F1E1B; box-shadow:0 0 0 2px rgba(27,36,48,.18);
  transform:translateY(-1px);
}
.att-brush-btn.hadir{background:#ECFDF5; color:#047857;}
.att-brush-btn.izin{background:#FFF4ED; color:#C2410C;}
.att-brush-btn.ib{background:#F5F3FF; color:#6D28D9;}
.att-brush-btn.sakit{background:#EFF6FF; color:#1D4ED8;}
.att-brush-btn.alpha{background:#FEF2F2; color:#B91C1C;}
.att-brush-btn.libur{background:#F8FAFC; color:#64748B;}
.att-brush-btn.kosong{background:#fff; border-style:dashed; color:#7C908A;}
.att-brush-btn.hadir span,
.att-brush-btn.izin span,
.att-brush-btn.ib span,
.att-brush-btn.sakit span,
.att-brush-btn.alpha span,
.att-brush-btn.libur span,
.att-brush-btn.kosong span{color:inherit; opacity:.85;}
.att-hint{
  margin:0 0 10px; font-size:12px; color:var(--ink-faint); font-weight:500; line-height:1.4;
}
.att-hint b{color:var(--ink-soft); font-weight:700;}
.att-wrap{
  overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel);
  max-height:min(70vh, 720px); user-select:none;
}
.att-table{min-width:max-content;}
.att-row{display:flex; align-items:stretch; border-bottom:1px solid #E7F0EE;}
.att-row:last-child{border-bottom:0;}
.att-head{background:var(--bg-soft); position:sticky; top:0; z-index:3;}
.att-name{
  position:sticky; left:0; z-index:2; width:220px; flex-shrink:0;
  padding:0; background:var(--panel); border-right:1px solid var(--line);
  display:flex; align-items:stretch; font-size:12px; color:var(--ink);
}
.att-head .att-name{background:var(--bg-soft); color:var(--ink-faint);}
.att-col-code{
  width:84px; flex-shrink:0; padding:8px 10px;
  display:flex; align-items:center;
  border-right:1px solid #E7F0EE;
  font-size:11px; font-weight:600; color:var(--ink-soft);
}
.att-head .att-col-code{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
}
.att-col-nama{
  flex:1; min-width:0; padding:8px 10px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.att-head .att-col-nama{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  justify-content:center;
}
.att-col-nama b{
  font-size:13px; font-weight:700; line-height:1.25; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.att-col-nama i{
  font-style:normal; font-size:11px; font-weight:500; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.att-progress-h,
.att-progress{
  position:sticky; right:0; z-index:2; flex-shrink:0;
  width:118px; padding:6px 10px;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-6px 0 12px rgba(15,23,42,.04);
}
.att-progress-h{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
}
.att-progress{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.att-progress b{
  font-size:13px; font-weight:800; line-height:1; color:#C2410C;
}
.att-progress.tone-ok b{color:#047857;}
.att-progress.tone-mid b{color:#C2410C;}
.att-progress.tone-low b{color:#B91C1C;}
.att-prog-bar{
  display:block; height:5px; border-radius:999px; background:#E2E8F0; overflow:hidden;
}
.att-prog-bar i{
  display:block; height:100%; border-radius:inherit; background:#F59E0B;
}
.att-progress.tone-ok .att-prog-bar i{background:#14B8A6;}
.att-progress.tone-mid .att-prog-bar i{background:#F59E0B;}
.att-progress.tone-low .att-prog-bar i{background:#F87171;}
.att-progress em{
  font-style:normal; font-size:10px; font-weight:600; color:var(--ink-faint);
}
.att-cell{
  width:30px; min-height:44px; flex-shrink:0; border:0; border-right:1px solid #E8F1EF;
  background:transparent; font-size:10.5px; font-weight:800; color:var(--ink-faint); cursor:crosshair;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.att-head .att-cell{cursor:default; color:var(--ink-faint); font-size:10px; font-weight:700; min-height:32px;}
.att-cell.weekend{background:#F8FAFC;}
.att-head .att-cell.weekend{color:#7C908A; background:#E8F1EF;}
.att-cell.hadir{background:#ECFDF5; color:#047857;}
.att-cell.izin{background:#FFF4ED; color:#C2410C;}
.att-cell.ib{background:#F5F3FF; color:#6D28D9;}
.att-cell.sakit{background:#EFF6FF; color:#1D4ED8;}
.att-cell.alpha{background:#FEF2F2; color:#B91C1C;}
.att-cell.libur{background:#F8FAFC; color:#64748B;}
.att-cell:hover{filter:brightness(.97);}

/* ===== ORDER BARANG (PO) ===== */
/* Desktop: judul dari topbar — hindari dobel */
.po-mob-only{display:none;}
.po-head{
  align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.po-kicker{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.po-title{
  margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.po-desc{margin:6px 0 0; font-size:13px; color:var(--ink-soft); font-weight:500;}
.po-desc-mob{display:none;}
.po-steps-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  margin:0 0 14px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  font-size:12.5px; color:var(--ink-soft); font-weight:600;
}
.po-steps-line > span{display:inline-flex; align-items:center; gap:6px;}
.po-steps-line b{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#0F1E1B; color:#fff; font-size:11px; font-weight:800;
}
.po-steps-sep{
  width:18px; height:2px; background:var(--line); border-radius:2px;
}
.po-flow{
  list-style:none; margin:0 0 12px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.po-flow li{
  font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; color:var(--ink-faint);
  background:var(--bg-soft); border:1px solid var(--line);
}
.po-flow li.is-done{color:#0B7A74; background:rgba(15,158,150,.12); border-color:rgba(15,158,150,.28);}
.po-flow li.is-now{color:#9A6700; background:#FFF7E6; border-color:#F08A4B;}
.po-metode-wrap.is-hidden,
.po-metode-wrap[hidden],
.po-dp-metode-wrap.is-hidden,
.po-dp-metode-wrap[hidden]{display:none !important;}
.po-pay-split{
  display:flex; flex-direction:column; gap:0;
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);
}
.po-pay-split.is-hidden,
.po-pay-split[hidden]{display:none !important;}
.po-compose-foot{
  display:flex; align-items:stretch; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:4px; padding-top:14px; border-top:1px solid var(--line);
}
.po-foot-sum{
  flex:1; min-width:220px;
  padding:12px 14px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--line);
}
.po-foot-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--ink-faint); font-weight:600;
}
.po-foot-row + .po-foot-row{margin-top:8px;}
.po-foot-row b{font-size:15px; color:var(--ink); font-weight:800;}
.po-foot-sum > .po-foot-row b{font-size:20px; letter-spacing:-.02em;}
.po-foot-sisa span{color:#9A6700;}
.po-foot-sisa b{color:#9A6700;}
.po-save-btn{
  width:auto; align-self:center; flex:0 0 auto;
  min-width:148px; min-height:42px; padding:0 18px;
  font-weight:700;
}
.po-money-sub{
  display:block; font-size:11px; font-weight:600; color:var(--ink-faint); margin-top:2px;
}
.po-money-sub.is-sisa{color:#9A6700;}
.po-lunas-breakdown{
  display:grid; gap:8px; margin:0 0 4px;
}
.po-lunas-breakdown > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-soft); border:1px solid var(--line);
  font-size:12px; color:var(--ink-faint); font-weight:600;
}
.po-lunas-breakdown b{color:var(--ink); font-size:14px;}
.po-lunas-breakdown .is-sisa{
  background:#FFF7E6; border-color:#F08A4B; color:#7A5410;
}
.po-lunas-breakdown .is-sisa b{color:#9A6700;}
.po-summary{
  display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(120px,1fr));
  gap:10px; margin-bottom:14px;
}
.po-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm); color:var(--ink);
}
.po-stat-main{
  background-color:#0F1E1B;
  background-image:
    radial-gradient(220px 90px at 100% 0%, rgba(240,138,75,.22), transparent 55%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none; color:#F8FAFC;
  box-shadow:0 8px 20px rgba(27,36,48,.22);
}
.po-stat-main .po-stat-label{color:#F08A4B;}
.po-stat-main .po-stat-value{color:#FFFFFF;}
.po-stat-main .po-stat-sub{color:rgba(248,250,252,.78);}
.po-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.po-stat-value{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.po-stat-value.accent{color:var(--red);}
.po-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}

.po-section-title{margin:0; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.po-section-note{margin:4px 0 0; font-size:12.5px; color:var(--ink-faint); font-weight:500;}

.po-action-bar{
  display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:0;
  align-items:stretch;
}
.po-history-head .po-action-bar{
  width:min(100%, 360px);
}
.po-action-bar .btn,
.po-action-bar .btn-primary{
  flex:1 1 0; min-width:0; min-height:42px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center;
}
.po-action-bar .btn.is-active{
  border-color:#0F1E1B; background:#E8F1EF; color:var(--ink);
}
.po-action-bar .btn-primary.is-active{
  box-shadow:0 0 0 2px rgba(27,36,48,.15);
}
.po-compose{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 18px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.po-compose.is-collapsed,
.po-compose[hidden],
.po-sup.is-collapsed,
.po-sup[hidden]{display:none !important;}
.po-compose-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.po-money{
  display:flex; align-items:stretch; width:100%;
  border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden;
}
.po-money-prefix{
  display:flex; align-items:center; padding:0 10px;
  font-size:12.5px; font-weight:800; color:var(--ink-faint);
  background:var(--bg-soft); border-right:1px solid var(--line);
}
.po-money input,
.po-field-qty input{
  width:100%; height:42px; border:0; border-radius:0; padding:0 12px;
  background:transparent; font:inherit; font-size:13.5px; color:var(--ink);
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.po-field-qty input{
  border:1px solid var(--line); border-radius:11px; background:#fff;
}
.po-money input:focus,
.po-field-qty input:focus{outline:none;}
.po-money:focus-within{border-color:#CBD5E1; box-shadow:0 0 0 2px rgba(15,158,150,.08);}
.po-money input::-webkit-outer-spin-button,
.po-money input::-webkit-inner-spin-button,
.po-field-qty input::-webkit-outer-spin-button,
.po-field-qty input::-webkit-inner-spin-button,
#po-dp::-webkit-outer-spin-button,
#po-dp::-webkit-inner-spin-button,
#po-harga::-webkit-outer-spin-button,
#po-harga::-webkit-inner-spin-button,
#po-qty::-webkit-outer-spin-button,
#po-qty::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.po-item-suggest{position:relative;}
.po-item-suggest input{
  width:100%; height:42px; border:1px solid var(--line); border-radius:11px;
  padding:0 12px; background:#fff; font:inherit; font-size:13.5px; color:var(--ink);
}
.po-item-drop{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  max-height:240px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow);
}
.po-item-opt{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:0; border-bottom:1px solid #E8F1EF;
  background:#fff; cursor:pointer; text-align:left; font:inherit;
}
.po-item-opt:last-child{border-bottom:0;}
.po-item-opt:hover,
.po-item-opt:focus{background:#F8FAFC; outline:none;}
.po-item-opt-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
.po-item-opt-main b{font-size:12.5px; color:var(--ink); font-weight:800;}
.po-item-opt-main span{
  font-size:12px; color:var(--ink-soft); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.po-item-opt-harga{font-size:12px; color:var(--ink-faint); font-weight:700; flex-shrink:0;}
.po-item-empty{
  padding:12px; font-size:12.5px; color:var(--ink-faint); font-weight:600; text-align:center;
}
.po-form{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-bottom:12px;
}
.po-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.po-field label,
.po-label-spacer{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.po-field input,
.po-field select{
  width:100%; height:42px; border:1px solid var(--line); border-radius:11px;
  padding:0 12px; background:#fff; font:inherit; font-size:13.5px; color:var(--ink);
}
.po-field .po-money input{
  border:0; border-radius:0; background:transparent; height:42px;
}
.po-field-full{grid-column:1 / -1;}
.po-tempo-wrap.is-hidden,
.po-tempo-wrap[hidden],
.po-dp-wrap.is-hidden,
.po-dp-wrap[hidden]{display:none !important;}

.po-line-builder{
  display:grid; grid-template-columns:minmax(0,2fr) 90px 140px auto; gap:10px;
  align-items:end; margin-bottom:12px;
}
.po-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.po-empty-lines{
  padding:16px; text-align:center; color:var(--ink-faint); font-size:13px;
  background:var(--bg-soft); border:1px dashed var(--line); border-radius:12px;
}
.po-line-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.po-line-sku{font-size:13.5px; font-weight:700; color:var(--ink);}
.po-line-meta{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.po-line-side{display:flex; align-items:center; gap:10px; flex-shrink:0;}

.po-sup{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 18px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.po-sup-body{padding:0;}
.po-sup-form{margin-bottom:12px;}
.po-sup-list{display:flex; flex-direction:column; gap:8px;}
.po-sup-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.po-sup-aksi{display:inline-flex; gap:6px; align-items:center; flex-shrink:0;}
.po-sup-form-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.po-sup-form-actions .btn,
.po-sup-form-actions .btn-primary{
  width:auto; flex:0 0 auto; min-width:140px; min-height:40px; padding:0 16px;
}
.po-sup-name{font-size:14px; font-weight:700; color:var(--ink);}
.po-sup-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; font-size:12px; color:var(--ink-faint);
}
.po-sup-tel{color:var(--teal); font-weight:600; text-decoration:none;}
.po-sup-alamat{margin-top:4px; font-size:12px; color:var(--ink-soft);}

.po-history{margin-bottom:8px;}
.po-history-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:12px; flex-wrap:wrap;
}
.po-history-text{min-width:0; flex:1;}
.po-history-head .po-action-bar{margin:0; flex-shrink:0;}
.po-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:10px;
}
.po-tabs{display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.po-tabs::-webkit-scrollbar{display:none;}
.po-tab{
  flex:0 0 auto; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.po-tab b{font-variant-numeric:tabular-nums; margin-left:4px;}
.po-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.po-tab.active b{color:#FFD4A8;}
.po-search{
  position:relative; flex:1; min-width:180px; max-width:280px;
}
.po-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:14px; pointer-events:none;
}
.po-search input{
  width:100%; height:40px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 34px; background:#fff; font:inherit; font-size:13px; color:var(--ink);
}
.po-search input:focus{outline:none; border-color:#CBD5E1;}

.po-board{margin-top:2px;}
.po-desk-hint{display:block;}
.po-mob-hint{display:none;}
.po-desk-only{display:block;}
.po-list.po-mob-only-list,
.po-mob-only-list{display:none !important;}

/* Desktop: tabel ringkas */
.po-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow:auto; box-shadow:var(--shadow-sm);
}
.po-table{width:100%; border-collapse:collapse; font-size:13px;}
.po-table thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
  vertical-align:middle;
}
.po-table thead th.po-th-center,
.po-table tbody td.po-td-center{
  text-align:center;
}
.po-table thead th.po-th-right,
.po-table tbody td.po-td-total{
  text-align:right;
}
.po-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
  color:var(--ink);
}
.po-table tbody tr:last-child td{border-bottom:0;}
.po-table tbody tr:hover{background:#F8FAFC;}
.po-table tbody tr.tone-owe td:first-child{box-shadow:inset 3px 0 0 #F08A4B;}
.po-table tbody tr.tone-late td:first-child{box-shadow:inset 3px 0 0 var(--red);}
.po-table tbody tr.tone-ok td:first-child{box-shadow:inset 3px 0 0 #0F9E96;}
.po-td-nota{font-weight:700; white-space:nowrap;}
.po-td-nota .po-att-flag,
.po-td-nota .po-short-chip{margin-left:6px; vertical-align:middle;}
.po-table .po-supname{
  font-size:13.5px; font-weight:700; margin:0;
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.po-table .po-muted{margin-top:2px; font-size:11.5px;}
.po-td-total{font-weight:700; white-space:nowrap;}
.po-td-act{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  white-space:nowrap;
}
.po-td-act .btn-sm{padding:5px 10px; font-size:12px; min-height:32px;}

/* Mobile cards (disembunyikan di desktop) */
.po-list{display:flex; flex-direction:column; gap:8px;}
.po-ticket{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; border-left:3px solid #CBD5E1;
}
.po-ticket.tone-owe{border-left-color:#F08A4B;}
.po-ticket.tone-late{border-left-color:var(--red);}
.po-ticket.tone-ok{border-left-color:#0F9E96;}
.po-col-main{min-width:0; flex:1;}
.po-ticket-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:2px;
}
.po-nota{font-size:13px; font-weight:700; color:var(--ink); line-height:1.2;}
.po-supname{
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.02em;
  line-height:1.25; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.po-muted{font-size:11.5px; color:var(--ink-faint); font-weight:500; margin-top:3px; line-height:1.3;}
.po-ticket-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:8px;
}
.po-ticket-meta .badge{font-size:10px; padding:3px 7px;}
.po-tempo{font-size:11.5px; font-weight:700; color:var(--ink-soft);}
.po-tempo.is-late{color:var(--red);}
.po-total{font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap;}
.po-col-act{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:6px; flex-shrink:0; max-width:100%;
}
.po-col-act .btn-sm{padding:6px 11px; font-size:12px; min-height:34px;}
.po-recv-btn{
  background:#0F9E96 !important; color:#fff !important; border:1px solid #0B7A74 !important;
  font-weight:700 !important;
}
.po-recv-btn:hover{background:#0C7366 !important;}
.po-recv-btn:disabled{opacity:.55; cursor:not-allowed;}
.po-lunas-btn{
  white-space:nowrap;
  background:#FFF7E6; color:#9A6700; border:1px solid #F08A4B;
  font-weight:700;
}
.po-lunas-btn:hover{background:#FFEEC2;}
.po-short-chip{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--red); background:var(--red-bg); border:1px solid #F1C9C3;
  border-radius:999px; padding:2px 7px;
}
.po-short-hint{
  color:var(--red); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.po-recv-note{
  margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:#FFF7E6; border:1px solid #F08A4B; color:#7A5410;
  font-size:12px; font-weight:600;
}
.po-qty-short{color:var(--red); font-weight:800;}
.po-detail-table tr.is-short td{background:rgba(220,38,38,.04);}
.po-recv-lead{font-size:13px; color:var(--ink-soft); margin:0 0 12px; line-height:1.45;}
.po-recv-table-wrap{overflow:auto; margin-bottom:10px;}
.po-recv-qty{
  width:72px; padding:7px 8px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:14px; font-weight:700; text-align:center;
}
.po-recv-summary{margin:0; font-size:12px; font-weight:700; padding:8px 10px; border-radius:8px;}
.po-recv-summary.is-ok{background:rgba(15,158,150,.1); color:#0B7A74;}
.po-recv-summary.is-warn{background:#FFF7E6; color:#9A6700;}
.po-lunas-total{margin:12px 0 0; font-size:13px; color:var(--ink-soft); font-weight:600;}
.po-lunas-total b{color:var(--ink); font-size:16px;}
.po-sheet-att{page-break-before:always; break-before:page;}
.po-sheet-att-head{
  display:flex; justify-content:space-between; gap:16px;
  border-bottom:2px solid #0F1E1B; padding-bottom:12px; margin-bottom:16px;
}
.po-sheet-att-img{
  display:flex; align-items:center; justify-content:center;
  min-height:60vh; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:8px;
  padding:12px;
}
.po-sheet-att-img img{max-width:100%; max-height:70vh; object-fit:contain;}
.po-empty{
  text-align:center; padding:40px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.po-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}
.po-detail-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.po-detail-meta > div{
  display:flex; flex-direction:column; gap:3px; padding:10px 12px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  font-size:11px; color:var(--ink-faint); font-weight:600;
}
.po-detail-meta b{font-size:13px; color:var(--ink); font-weight:700;}
.po-detail-table-wrap{overflow:auto;}
.po-detail-table{width:100%; border-collapse:collapse; font-size:13px;}
.po-detail-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); padding:8px 6px; border-bottom:1px solid var(--line);
}
.po-detail-table td{padding:9px 6px; border-bottom:1px solid #E7F0EE; color:var(--ink);}
.po-att-flag{
  display:inline-block; padding:2px 7px;
  font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#0F9E96; background:rgba(15,158,150,.12); border-radius:999px; line-height:1.4;
}
.po-att-sec{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.po-att-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-bottom:10px; flex-wrap:wrap;
}
.po-att-head b{display:block; font-size:14px; color:var(--ink);}
.po-att-hint{display:block; font-size:11px; color:var(--ink-faint); margin-top:2px; font-weight:600;}
.po-att-tools{flex-shrink:0;}
.po-att-empty{
  font-size:12px; color:var(--ink-faint); padding:14px 12px;
  background:var(--bg-soft); border:1px dashed var(--line); border-radius:10px;
}
.po-att-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px;
}
.po-att-item{margin:0; display:flex; flex-direction:column; gap:4px;}
.po-att-thumb{
  display:block; width:100%; aspect-ratio:1; padding:0; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:#0F172A; cursor:pointer;
}
.po-att-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.po-att-del{
  border:0; background:transparent; color:var(--red); font-size:11px; font-weight:700;
  cursor:pointer; padding:2px 0; text-align:center;
}
.po-att-lightbox{
  display:flex; align-items:center; justify-content:center;
  min-height:240px; background:#0F172A; border-radius:12px; overflow:hidden;
}
.po-att-lightbox img{max-width:100%; max-height:70vh; object-fit:contain; display:block;}
.po-print-root{display:none;}
.po-sheet{
  max-width:800px; margin:0 auto; padding:24px; color:#111; background:#fff;
  font-family:"Plus Jakarta Sans",sans-serif;
}
.po-sheet-head{
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:12px; margin-bottom:0;
}
.po-sheet-brand-row{display:flex; align-items:center; gap:12px;}
.po-sheet-logo{
  width:48px; height:48px; object-fit:contain; border-radius:10px; flex-shrink:0;
  background:#fff; border:1px solid #D5E0DC; padding:0;
}
.po-sheet-brand{font-size:22px; font-weight:800; letter-spacing:-.03em; color:#0F1E1B;}
.po-sheet-sub{font-size:13px; color:#7C908A; margin-top:4px;}
.po-sheet-accent{
  height:4px; margin:10px 0 16px; border-radius:4px;
  background:linear-gradient(90deg,#E8631C,#0F9E96,#0F1E1B);
}
.po-sheet-no{text-align:right; font-size:13px;}
.po-sheet-no .mono{font-size:18px; font-weight:800; color:#0F1E1B;}
.po-sheet-info{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;
}
.po-sheet-info > div{
  display:flex; flex-direction:column; gap:2px; font-size:12px; color:#64748B;
}
.po-sheet-info b{font-size:14px; color:#0F172A;}
.po-sheet-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:16px;}
.po-sheet-table th,.po-sheet-table td{
  border:1px solid #CBD5E1; padding:8px 10px; text-align:left;
}
.po-sheet-table th{
  background:#0F1E1B; color:#E8F1EF;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
}
.po-sheet-total{
  display:flex; justify-content:flex-end; gap:16px; align-items:baseline;
  font-size:14px; font-weight:600; margin-bottom:8px;
}
.po-sheet-total b{font-size:20px;}
.po-sheet-pay{
  display:flex; justify-content:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom:16px; font-size:12px; color:#64748B;
}
.po-sheet-pay > div{display:flex; gap:8px; align-items:baseline;}
.po-sheet-pay b{font-size:13px; color:#0F172A;}
.po-sheet-note{font-size:12px; color:#64748B; border-top:1px dashed #CBD5E1; padding-top:12px; margin-bottom:28px;}
.po-sheet-signs{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  margin-top:8px; page-break-inside:avoid; break-inside:avoid;
}
.po-sheet-sign{text-align:center;}
.po-sheet-sign-title{
  font-size:12px; font-weight:700; color:#0F172A; margin-bottom:4px;
}
.po-sheet-sign-space{height:72px;}
.po-sheet-sign-line{
  border-top:1px solid #334155; margin:0 auto 6px; max-width:200px;
}
.po-sheet-sign-meta{font-size:11px; color:#64748B;}

/* ===== LAPORAN ===== */
.lap-print-brand,
.lap-print-accent{display:none;}
/* Desktop: judul dari topbar saja — hindari "Laporan" dobel */
.lap-head.lap-mob-only{display:none;}
.lap-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.lap-head-text{min-width:0;}
.lap-kicker{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.lap-title{
  margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.lap-desc{margin:6px 0 0; font-size:13px; color:var(--ink-soft); font-weight:500;}
.lap-desc-mob{display:none;}
.lap-print-btn{flex-shrink:0;}
.lap-filters{margin-bottom:4px;}
.lap-period{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px;
}
.lap-modes{display:flex; gap:6px; flex-wrap:wrap;}
.lap-mode{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.lap-mode.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.lap-period-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto;}
.lap-period-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.lap-date-wrap{display:flex; align-items:center; gap:8px;}
.lap-date-wrap.is-hidden,
.lap-date-wrap[hidden]{display:none !important;}
.lap-date-row{display:flex; align-items:center; gap:4px;}
.lap-week-nav{
  width:34px; height:34px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.lap-week-nav:hover{background:#f3f5f7;}
.lap-week-nav.is-hidden,
.lap-week-nav[hidden]{display:none !important;}
.lap-period-label{font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.lap-input{
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff;
  font:inherit; font-size:13px; color:var(--ink);
}
.lap-period-text{font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
.lap-tabs{
  display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; margin-bottom:14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.lap-tabs::-webkit-scrollbar{display:none;}
.lap-tab{
  flex:0 0 auto; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:8px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.lap-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.lap-summary{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:14px;
}
.lap-bin-pick{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:12px; align-items:center;
}
.lap-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
  color:var(--ink); min-width:0;
  position:relative; overflow:hidden;
}
.lap-stat.main{
  /* fallback solid dulu — teks putih butuh latar gelap pasti */
  background-color:#0F1E1B;
  background-image:
    radial-gradient(220px 90px at 100% 0%, rgba(232,99,28,.28), transparent 55%),
    radial-gradient(180px 80px at 0% 100%, rgba(15,158,150,.25), transparent 50%),
    linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
  border:none;
  color:#F8FAFC;
  box-shadow:0 8px 20px rgba(27,36,48,.22);
  display:flex; flex-direction:column; justify-content:center;
  padding:18px 20px;
}
.lap-stat.main::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#E8631C,#0F9E96);
}
.lap-stat.main .lap-stat-label{color:#F08A4B;}
.lap-stat.main .lap-stat-value{color:#FFFFFF; font-size:26px;}
.lap-stat.main .lap-stat-sub{color:rgba(248,250,252,.78);}
.lap-stat.kasir{
  border-color:#C5DED9;
  background:linear-gradient(160deg,#FFFFFF 60%, #EEF7F5);
}
.lap-stat.kasir::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0F9E96;
}
.lap-stat.kasir .lap-stat-label{color:#0F9E96;}
.lap-stat.service{
  border-color:#F0D0BE;
  background:linear-gradient(160deg,#FFFFFF 60%, #FFF6F0);
}
.lap-stat.service::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#E8631C;
}
.lap-stat.service .lap-stat-label{color:#E8631C;}
.lap-stat.warn .lap-stat-value{color:var(--red);}
.lap-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.lap-stat-value{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.lap-stat-sub{margin-top:4px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.lap-body{display:flex; flex-direction:column; gap:12px;}
.lap-split{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}
@media (max-width:900px){
  .lap-summary{grid-template-columns:1fr 1fr;}
  .lap-stat.main{grid-column:1 / -1;}
  .lap-split{grid-template-columns:1fr;}
}
.lap-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-sm); min-width:0;
}
.lap-panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.lap-panel-head h4{margin:0; font-size:14px; font-weight:700; color:var(--ink);}
.lap-panel-body{padding:10px 14px 14px;}
.lap-table-wrap{overflow-x:auto; overflow-y:visible;}
.lap-table{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed;}
.lap-table th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--line);
}
.lap-table td{
  padding:9px 10px; border-bottom:1px solid #E7F0EE; vertical-align:middle; color:var(--ink);
}
.lap-table tr:last-child td{border-bottom:0;}
.lap-table th.num,
.lap-table td.num{
  text-align:right; white-space:nowrap;
}
.lap-table td:first-child{
  overflow:hidden; text-overflow:ellipsis;
}
.lap-table--detail td:nth-child(2){
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lap-table--detail td:nth-child(2) .lap-muted{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lap-table-wrap.is-compact .lap-table th.num,
.lap-table-wrap.is-compact .lap-table td.num{white-space:nowrap;}
.lap-muted{font-size:11px; color:var(--ink-faint); margin-top:2px; font-weight:500;}
.lap-empty{text-align:center; padding:28px 12px; color:var(--ink-faint);}
.lap-empty b{display:block; color:var(--ink-soft); margin-bottom:4px;}
.lap-aging{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
}
.lap-aging-item{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:12px;
}
.lap-aging-label{font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase;}
.lap-aging-val{font-size:16px; font-weight:700; margin-top:6px; color:var(--ink);}
.lap-aging-sub{font-size:11px; color:var(--ink-faint); margin-top:4px;}
.lap-kv{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.lap-kv > div{
  display:flex; justify-content:space-between; gap:10px; padding:10px 12px;
  background:var(--bg-soft); border-radius:10px; border:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}
.lap-kv b{color:var(--ink);}
.ptg-pay-info{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.ptg-pay-info > div{
  display:flex; flex-direction:column; gap:3px; padding:10px 12px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  font-size:12px; color:var(--ink-faint);
}
.ptg-pay-info b{font-size:14px; color:var(--ink);}
.lap-exp-form{
  display:grid; grid-template-columns:1fr 1.2fr 120px 110px auto; gap:8px;
  margin-bottom:12px; align-items:center;
}
.lap-exp-form input,.lap-exp-form select{
  border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:13px; background:#fff;
}
@media print{
  body.lap-printing,
  body.lap-printing *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
  }
  body.lap-printing .sidebar,
  body.lap-printing .topbar,
  body.lap-printing .menu-toggle,
  body.lap-printing .lap-print-btn,
  body.lap-printing .lap-modes,
  body.lap-printing .lap-tabs,
  body.lap-printing .lap-filters,
  body.lap-printing .lap-head{display:none !important;}
  body.lap-printing .main{padding:0; background:#fff;}
  body.lap-printing #view-laporan{max-width:100%;}
  body.lap-printing .lap-print-brand{
    display:flex !important; justify-content:space-between; align-items:flex-start; gap:16px;
    padding:0 0 10px; margin-bottom:0;
  }
  body.lap-printing .lap-print-accent{
    display:block !important; height:4px; margin:8px 0 14px; border-radius:4px;
    background:linear-gradient(90deg,#E8631C,#0F9E96,#0F1E1B);
  }
  body.lap-printing .lap-print-brand-left{display:flex; align-items:center; gap:12px;}
  body.lap-printing .lap-print-brand img{
    width:48px; height:48px; object-fit:contain; border-radius:10px;
    background:#fff; border:1px solid #D5E0DC; padding:0;
  }
  body.lap-printing .lap-print-name{font-size:18px; font-weight:800; color:#0F1E1B;}
  body.lap-printing .lap-print-sub{font-size:11px; color:#7C908A; font-weight:600; margin-top:2px;}
  body.lap-printing .lap-print-meta{text-align:right; font-size:11px; color:#3D4F4B; font-weight:600;}
  body.lap-printing .lap-print-title{
    font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#0F1E1B;
  }

  /* Ringkasan omzet — hero + 2 kartu berwarna */
  body.lap-printing .lap-summary{
    display:grid !important;
    grid-template-columns:1.4fr 1fr 1fr !important;
    gap:10px !important; margin-bottom:14px !important;
  }
  body.lap-printing .lap-stat{
    box-shadow:none !important; border-radius:10px !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  body.lap-printing .lap-stat.main{
    grid-column:auto !important;
    background-color:#0F1E1B !important;
    background-image:
      radial-gradient(180px 70px at 100% 0%, rgba(232,99,28,.3), transparent 55%),
      linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%) !important;
    color:#F8FAFC !important;
    border:none !important;
    padding:16px 18px !important;
  }
  body.lap-printing .lap-stat.main::before{
    content:"" !important; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:linear-gradient(180deg,#E8631C,#0F9E96) !important;
  }
  body.lap-printing .lap-stat.main .lap-stat-label{color:#F08A4B !important;}
  body.lap-printing .lap-stat.main .lap-stat-value{
    color:#FFFFFF !important; font-size:22px !important; font-weight:800 !important;
  }
  body.lap-printing .lap-stat.main .lap-stat-sub{color:rgba(248,250,252,.8) !important;}
  body.lap-printing .lap-stat.kasir{
    background:linear-gradient(160deg,#FFFFFF 55%, #EEF7F5) !important;
    border:1px solid #C5DED9 !important;
  }
  body.lap-printing .lap-stat.kasir::before{
    content:"" !important; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0F9E96 !important;
  }
  body.lap-printing .lap-stat.kasir .lap-stat-label{color:#0F9E96 !important;}
  body.lap-printing .lap-stat.service{
    background:linear-gradient(160deg,#FFFFFF 55%, #FFF6F0) !important;
    border:1px solid #F0D0BE !important;
  }
  body.lap-printing .lap-stat.service::before{
    content:"" !important; position:absolute; left:0; top:0; bottom:0; width:3px; background:#E8631C !important;
  }
  body.lap-printing .lap-stat.service .lap-stat-label{color:#E8631C !important;}
  body.lap-printing .lap-stat-value{color:#12201E !important; font-size:16px !important;}
  body.lap-printing .lap-stat-sub{color:#7C908A !important;}

  /* Panel & tabel — paksa layout desktop (bukan kartu HP) */
  body.lap-printing .lap-body{gap:12px !important;}
  body.lap-printing .lap-split{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important;
  }
  body.lap-printing .lap-panel{
    break-inside:avoid; box-shadow:none !important;
    border:1px solid #D5E0DC !important; border-radius:10px !important; overflow:hidden;
  }
  body.lap-printing .lap-panel-head{
    flex-direction:row !important; align-items:baseline !important;
    padding:10px 12px !important;
    background:#0F1E1B !important; border-bottom:none !important; color:#E8F1EF;
  }
  body.lap-printing .lap-panel-head h4{color:#F8FAFC !important; font-size:12px !important;}
  body.lap-printing .lap-panel-head .tiny-note{color:#9EB0A8 !important;}
  body.lap-printing .lap-panel-body{padding:0 !important;}
  body.lap-printing .lap-table-wrap{overflow:visible !important;}
  body.lap-printing .lap-table,
  body.lap-printing .lap-table thead,
  body.lap-printing .lap-table tbody,
  body.lap-printing .lap-table tr{
    display:table !important; width:100% !important;
  }
  body.lap-printing .lap-table{border-collapse:collapse !important; table-layout:fixed !important;}
  body.lap-printing .lap-table thead{display:table-header-group !important;}
  body.lap-printing .lap-table tbody{display:table-row-group !important;}
  body.lap-printing .lap-table tr{
    display:table-row !important; margin:0 !important; padding:0 !important;
    background:transparent !important; border:none !important; border-radius:0 !important;
  }
  body.lap-printing .lap-table th{
    display:table-cell !important; background:#E8F1EF !important; color:#0F1E1B !important;
    font-size:10px !important; text-transform:uppercase; letter-spacing:.04em;
    padding:7px 10px !important; border-bottom:1px solid #C5DED9 !important;
    text-align:left !important;
  }
  body.lap-printing .lap-table td{
    display:table-cell !important; padding:7px 10px !important;
    border-bottom:1px solid #E8F1EF !important; font-size:11.5px !important;
    background:#fff !important; vertical-align:top;
  }
  body.lap-printing .lap-table td::before{content:none !important; display:none !important;}
  body.lap-printing .lap-table td.num,
  body.lap-printing .lap-table th.num{text-align:right !important;}
  body.lap-printing .lap-muted{color:#7C908A !important; font-size:10px !important;}
  body.lap-printing .lap-aging{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.lap-printing .lap-kv{grid-template-columns:1fr 1fr !important;}
  body.lap-printing .lap-bin-pick{display:none !important;}

  body.stok-printing .sidebar,
  body.stok-printing .topbar,
  body.stok-printing .menu-toggle,
  body.stok-printing .sidebar-backdrop,
  body.stok-printing #view-stok > :not(.stk-print-root),
  body.stok-printing .modal-backdrop,
  body.stok-printing .modal{display:none !important;}
  body.stok-printing .main{padding:0; background:#fff;}
  body.stok-printing .stk-print-root{
    display:block !important; position:static !important; padding:24px;
  }

  body.po-printing .sidebar,
  body.po-printing .topbar,
  body.po-printing .menu-toggle,
  body.po-printing .sidebar-backdrop,
  body.po-printing #view-barangmasuk > :not(.po-print-root),
  body.po-printing .modal-backdrop,
  body.po-printing .modal{display:none !important;}
  body.po-printing .main{padding:0; background:#fff;}
  body.po-printing .po-print-root{
    display:block !important; position:static !important;
  }
  body.po-printing .po-sheet{box-shadow:none; max-width:100%;}
  body.po-printing .po-sheet-att{page-break-before:always; break-before:page;}
  body.po-printing .po-sheet-att-img{border:0; background:#fff; min-height:0;}
  body.po-printing .po-sheet-att-img img{max-height:85vh;}

  body.svc-printing .sidebar,
  body.svc-printing .topbar,
  body.svc-printing .menu-toggle,
  body.svc-printing .sidebar-backdrop,
  body.svc-printing #view-service > :not(.svc-print-root),
  body.svc-printing .modal-backdrop,
  body.svc-printing .modal{display:none !important;}
  body.svc-printing .main{padding:0; background:#fff;}
  body.svc-printing .svc-print-root{
    display:block !important; position:static !important;
  }
  body.svc-printing .po-sheet{box-shadow:none; max-width:100%;}
}

.mek-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding:16px 20px;}
.mek-card{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px;
}
.mek-card .mk-name{font-size:15px; font-weight:700;}
.mek-card .mk-role{font-size:11px; font-weight:700; color:#C2410C; letter-spacing:.06em; margin-top:4px; text-transform:uppercase;}
.mek-card .mk-stat{margin-top:12px; font-size:12px; color:var(--ink-faint); font-weight:500;}
.mek-card .mk-stat b{display:block; font-size:20px; color:var(--ink); font-weight:700; margin-top:4px;}

/* WO reuse po-sheet styles — hanya util kecil */
.svc-print-root{display:none;}
.po-sheet-table tr.wo-blank td{height:28px;}
.wo-fill-line{font-weight:500; color:#7C908A; letter-spacing:.04em;}

/* ===== SERVICE WORKFLOW ===== */
.svc-head{display:none;}
.svc-call-btn{
  background:linear-gradient(135deg,#0F1E1B,#173330) !important; color:#FFD4A8 !important;
  border-color:transparent !important;
}
.svc-kicker{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.svc-title{margin:0; font-size:24px; font-weight:700; letter-spacing:-.03em;}
.svc-desc{margin:6px 0 0; font-size:13px; color:var(--ink-faint); font-weight:500;}
.svc-desc-mob{display:none;}
.svc-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  margin-bottom:12px;
}
.svc-tabs{display:flex; gap:6px; flex-wrap:nowrap; flex:0 0 auto;}
.svc-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 180px; min-width:140px; max-width:280px; margin:0; height:40px;
}
.svc-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:15px; pointer-events:none; line-height:1; z-index:1;
}
.svc-search input{
  width:100%; height:40px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 36px !important; background:#fff !important; font-size:13px;
  box-shadow:none !important;
}
.svc-search input:focus{outline:none; border-color:#CBD5E1;}
.svc-tools{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; flex:0 0 auto; margin-left:auto;
}
.svc-display-btn{
  white-space:nowrap; text-decoration:none; font-weight:600; padding:8px 12px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-soft);
}
.svc-display-btn:hover{border-color:#CBD5E1; color:var(--ink); background:#fff;}
.svc-period-bar{margin:0; flex:0 0 auto; min-width:0;}
.svc-create-desk{white-space:nowrap; padding:8px 14px;}
.dash-mek-panel{margin-bottom:14px;}
.dash-mek-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; padding:14px 16px;
}
.dash-mek-card{
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-soft);
}
.dash-mek-card .mk-name{font-size:13.5px; font-weight:700; color:var(--ink);}
.dash-mek-card .mk-stat{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; font-size:12.5px; color:var(--ink-soft);
}
.dash-mek-card .mk-stat-sub{margin-top:4px; font-size:11.5px; color:var(--ink-faint); font-weight:500;}
.svc-tab{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:999px; padding:7px 11px; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.svc-tab b{font-variant-numeric:tabular-nums;}
.svc-tab.active{
  background:linear-gradient(135deg,#0F1E1B,#173330); color:#fff; border-color:transparent;
}
.svc-tab.active b{color:#FFD4A8;}

/* Service board — desktop tabel (gaya order barang), HP kartu */
.svc-board{margin-top:2px;}
.svc-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow-x:auto; overflow-y:visible; box-shadow:var(--shadow-sm);
}
.svc-table-wrap.is-menu-open{
  overflow:visible;
  position:relative;
  z-index:30;
}
.svc-table{width:100%; border-collapse:collapse; font-size:13px;}
.svc-table thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line); white-space:nowrap;
  vertical-align:middle;
}
.svc-table thead th.svc-th-center,
.svc-table tbody td.svc-td-center{text-align:center;}
.svc-table thead th.svc-th-right,
.svc-table tbody td.svc-td-total{text-align:right;}
.svc-table tbody td{
  padding:11px 12px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
  color:var(--ink);
}
.svc-table tbody tr:last-child td{border-bottom:0;}
.svc-table tbody tr:hover{background:#F8FAFC;}
.svc-table tbody tr{cursor:pointer;}
.svc-table tbody tr.tone-wait td:first-child{box-shadow:inset 3px 0 0 #F08A4B;}
.svc-table tbody tr.tone-run td:first-child{box-shadow:inset 3px 0 0 #3B82F6;}
.svc-table tbody tr.tone-done td:first-child{box-shadow:inset 3px 0 0 #0F9E96;}
.svc-table tbody tr.is-menu-open{z-index:5;}
.svc-td-code{font-weight:700; white-space:nowrap; color:var(--ink);}
.svc-td-total{font-weight:700; white-space:nowrap;}
.svc-td-act{text-align:center; white-space:normal; vertical-align:middle;}
.svc-td-act .svc-act-wrap{
  display:inline-flex; flex-wrap:nowrap; gap:6px; align-items:center; justify-content:center;
  white-space:nowrap; position:relative;
}
.svc-td-act .svc-c-act{flex:0 0 auto; display:flex; gap:6px;}
.svc-td-act .btn,
.svc-td-act .btn-primary{
  height:32px; padding:0 10px; font-size:12px; font-weight:600; border-radius:9px;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.svc-table .svc-name{
  font-size:13.5px; font-weight:700; margin:0;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-table .svc-unit{font-size:12px; color:var(--ink-soft); font-weight:500; margin:0;}
.svc-table .svc-mek-name{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.svc-table .svc-tel{margin:0; font-size:12px;}
.svc-table .svc-more{position:relative; flex:0 0 auto;}
.svc-table .svc-more-btn{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink-soft); font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}

.svc-list{display:none; flex-direction:column; gap:8px; margin:0;}
.svc-ticket{
  display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:border-color .15s, background .12s;
  border-left:4px solid #CBD5E1;
}
.svc-ticket.tone-wait{border-left-color:#F08A4B;}
.svc-ticket.tone-run{border-left-color:#3B82F6;}
.svc-ticket.tone-done{border-left-color:#0F9E96;}
.svc-ticket:hover{border-color:#CBD5E1; background:#F8FAFC;}
.svc-col{min-width:0;}
.svc-c-no{font-size:12.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.02em;}
.svc-name{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.svc-unit{font-size:12.5px; color:var(--ink-soft); font-weight:500; line-height:1.35;}
.svc-tel{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; color:var(--ink-faint); text-decoration:none;
}
.svc-tel.is-empty{opacity:.55; pointer-events:none;}
.svc-tel:hover{color:var(--ink-soft); text-decoration:underline;}
.svc-tel-ico{flex-shrink:0; opacity:.75;}
.svc-mek-name{font-size:13px; font-weight:600; color:var(--ink-soft);}
.svc-col-stat,
.svc-col-pay{display:flex; align-items:center;}
.svc-c-total{font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap;}
.svc-col-act{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
.svc-c-act{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-width:0;}
.svc-c-act .ico-btn:disabled{opacity:.45; cursor:not-allowed;}
.svc-ticket.is-menu-open{z-index:40; position:relative;}
.svc-line-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.svc-line-edit{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:8px; align-items:center;
  margin-top:8px;
}
.svc-line-qty,
.svc-line-harga{
  display:flex; flex-direction:column; gap:0; min-width:0;
}
.svc-line-qty input,
.svc-line-harga input{
  width:100%; height:36px; margin:0; padding:0 8px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
}
.svc-line-sub{
  font-size:13px; font-weight:700; color:var(--ink); padding-bottom:0; white-space:nowrap;
  align-self:center;
}
.svc-more{position:relative; flex:0 0 auto; z-index:2;}
.svc-more-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink-soft); font-size:18px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700;
}
.svc-more-btn:hover{background:#E7F0EE; color:var(--ink);}
.svc-more-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:80;
  min-width:180px; max-width:240px; padding:6px; border-radius:10px; border:1px solid var(--line);
  background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.14);
  display:flex; flex-direction:column; gap:2px; white-space:normal;
}
.svc-more-menu[hidden]{display:none !important;}
.svc-more-menu.is-fixed{
  position:fixed !important;
  right:auto !important;
  z-index:4000 !important;
  margin:0;
}
.svc-more-item{
  display:block; width:100%; box-sizing:border-box;
  text-align:left; border:0; background:transparent;
  padding:9px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap;
}
.svc-more-item:hover{background:var(--bg-soft);}
.svc-more-item.danger{color:var(--red);}
.svc-more-item.danger:hover{background:var(--red-bg);}
.svc-st{
  display:inline-flex; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-soft); color:var(--ink-soft);
}
.svc-st.wait{background:#FFF8E8; color:#C2410C; border-color:#F3E0A8;}
.svc-st.run{background:#FFF8E8; color:#92400E; border-color:#F08A4B;}
.svc-st.done{background:#E8F1EF; color:#3D4F4B; border-color:#CBD5E1;}
.badge.svc-pay{font-size:10.5px; padding:3px 7px; border-radius:999px; font-weight:700;}
.badge.svc-pay.unpaid{color:#BE123C; border-color:#FECDD3; background:#FFF1F2;}
.badge.svc-pay.paid{color:var(--teal); border-color:#B7E0D8; background:var(--teal-bg);}
.badge.svc-pay.owe{color:#C2410C; border-color:#F3E0A8; background:var(--accent-bg);}
.svc-empty{
  text-align:center; padding:48px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.svc-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}

/* Dashboard charts */
.dash-chart-wide{margin-bottom:14px;}
.dash-chart-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin-bottom:16px; align-items:stretch;
}
.dash-chart-row .dash-panel{margin:0; min-width:0;}
.dash-chart-box{padding:8px 16px 16px; height:220px;}
.dash-chart-box-sm{height:220px;}
.dash-chart-box canvas{width:100% !important; height:100% !important;}
.dash-pay-fallback{display:none;}

/* Detail modal + Isi kerja */
.svc-create-form,.svc-jasa-form{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.svc-create-form .full,.svc-jasa-form .full{grid-column:1 / -1;}
.svc-create-form .field{margin:0;}
.svc-create-form .field input,
.svc-create-form .field textarea{
  width:100%; margin:0; padding:11px 12px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:11px; font:inherit; font-weight:600;
}
.svc-create-form .field input{height:44px;}
.svc-create-form .field textarea{min-height:84px; resize:vertical; font-weight:500;}
.svc-detail-hero{margin-bottom:14px;}
.svc-detail-top{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:0;}
.svc-detail-name{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.svc-detail-unit{font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-weight:500;}
.svc-keluhan{margin-top:10px; padding:10px 12px; background:var(--bg-soft); border-radius:10px; font-size:13px; color:var(--ink-soft);}
.svc-keluhan-compact{margin:0 0 10px; padding:8px 10px; font-size:12.5px;}
.svc-block{
  border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; background:#fff;
}
.svc-block-head{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:linear-gradient(180deg,#fff,var(--bg-soft)); border-bottom:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink);
}
.svc-step{
  width:22px; height:22px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  background:#0F1E1B; color:#FFD4A8; font-size:11px; font-weight:800;
}
.svc-block-body{padding:12px 14px 14px;}
.svc-actions-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.svc-hint{margin:0 0 10px; font-size:12px; color:var(--ink-faint); font-weight:500; line-height:1.4;}

/* Assign + workdesk (kasir-like) */
.svc-mek-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px;
  margin-top:10px;
}
.svc-mek-grid--inline{margin-top:6px;}
.svc-mek-check{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  font-size:13px; font-weight:600; cursor:pointer;
}
.svc-mek-check input{width:16px; height:16px; accent-color:var(--teal);}
.svc-mek-check--sm{padding:7px 10px; font-size:12px; border-radius:10px;}
.svc-workdesk{display:flex; flex-direction:column; gap:10px; min-height:100%;}
/* Strip atas: HM | Tanggal | mekanik — 1 baris, tidak mengembang */
.svc-workdesk-top{
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.svc-workdesk-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex-shrink:0;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 10px;
  overflow:visible; position:relative; z-index:5;
}
.svc-workdesk-fee-panel{
  width:100%;
}
.svc-workdesk-fee-panel[hidden]{display:none !important;}
.svc-workdesk-fee-panel:not([hidden]){
  display:block;
}
.svc-mek-fees--work{
  margin-top:0; padding:12px 14px;
  background:linear-gradient(180deg,#FAFCFB 0%,#fff 100%);
  border-color:#D8E8E4;
}
.svc-mek-fee-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;
}
.svc-mek-fee-card{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.svc-mek-fee-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
}
.svc-mek-fee-card-head .svc-mek-fee-name{
  font-size:13px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-mek-fee-field{
  display:flex; flex-direction:column; gap:4px; margin:0;
}
.svc-mek-fee-field > span{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.svc-mek-fee-field .svc-mek-fee-input{
  width:100%; height:40px; font-size:14px;
}
.svc-meta-inline{
  display:inline-flex; align-items:center; gap:6px; margin:0; flex-shrink:0;
}
.svc-meta-inline > span{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}
.svc-meta-inline input{
  width:84px; height:36px; margin:0; padding:0 8px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; font-weight:600;
}
.svc-meta-inline--date input{width:148px;}
.svc-workdesk-meks{
  flex:1; min-width:0; overflow:visible;
}
.svc-mek-picker.is-compact{
  display:flex; flex-direction:row; align-items:center; gap:8px; max-width:100%;
}
.svc-mek-picker.is-compact .svc-mek-chips{
  display:flex; flex-wrap:nowrap; gap:6px; align-items:center;
  flex:1; min-width:0; max-height:none; min-height:0; margin:0;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.svc-mek-picker.is-compact .svc-mek-chips:empty{display:none;}
.svc-mek-picker.is-compact .svc-mek-chip{
  flex:0 0 auto; padding:5px 8px; font-size:11.5px; max-width:160px;
}
.svc-mek-picker.is-compact .svc-mek-chip span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px;
}
.svc-mek-picker.is-compact .svc-mek-search-wrap{
  position:relative; flex:0 0 150px; width:150px;
}
.svc-mek-picker.is-compact .svc-mek-search{
  padding:8px 10px 8px 32px; font-size:12.5px; border-radius:9px; height:36px; box-sizing:border-box;
}
.svc-mek-picker.is-compact .svc-mek-suggest{
  position:absolute; top:calc(100% + 4px); left:auto; right:0;
  width:min(280px, 70vw); max-height:220px; z-index:40;
}
.svc-mek-fees{
  display:grid; gap:8px; padding:10px 12px; margin-top:10px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.svc-mek-fees[hidden]{display:none !important;}
.svc-mek-fees-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:12px; font-weight:700; color:var(--ink);
}
.svc-mek-fees-h span{font-weight:500; color:var(--ink-faint); font-size:11px;}
.svc-mek-fee-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(110px,140px);
  align-items:center; gap:8px; margin:0;
}
.svc-mek-fee-name{
  font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-mek-fee-tag{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#0B7A74; background:#E7F7F6; border-radius:999px; padding:3px 8px;
}
.svc-mek-fee-input{
  width:100%; height:36px; margin:0; border:1px solid var(--line); border-radius:10px;
  padding:0 10px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--bg-soft,#F3F7F6);
}
.svc-mek-fee-input:focus{outline:2px solid rgba(15,158,150,.25); border-color:#0F9E96; background:#fff;}
.svc-mek-fee-note{font-size:11.5px; color:var(--ink-faint); font-weight:500; line-height:1.35;}
.svc-mek-picker.is-panel .svc-mek-fees{margin-top:12px; flex-shrink:0;}
.svc-mek-search-wrap{position:relative;}
/* Body kasir: input kiri + keranjang&total kanan */
.svc-workdesk-body{
  display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.38fr); gap:12px; align-items:stretch;
  flex:1; min-height:0;
}
.svc-workdesk-input{
  border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px;
  display:flex; flex-direction:column; gap:10px; min-height:0; overflow:auto;
}
.svc-workdesk-input[data-mode="jasa"]{
  border-color:#BFDBFE; background:linear-gradient(180deg,#F8FBFF,#F1F7FF);
}
.svc-workdesk-input[data-mode="part"]{
  border-color:#F3E0A8; background:linear-gradient(180deg,#FFFEF8,#FFF8E8);
}
.svc-workdesk-side{
  display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0;
}
.svc-workdesk-cart{
  border:1px solid var(--line); border-radius:14px; background:#fff;
  display:flex; flex-direction:column; min-height:0; overflow:hidden; flex:1;
}
.svc-workdesk-cart-h{
  flex-shrink:0; padding:10px 14px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  border-bottom:1px solid var(--line); background:var(--bg-soft,#F3F7F6);
  display:flex; justify-content:space-between; align-items:center;
}
.svc-cart-close{
  display:none; width:28px; height:28px; border-radius:8px;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  padding:0; align-items:center; justify-content:center;
  transition:all .15s ease; font-size:20px; line-height:1;
}
.svc-cart-close:hover{background:var(--bg-soft); border-color:var(--ink-soft); color:var(--ink);}
.svc-cart-toggle{
  display:none; width:100%; padding:14px 16px; margin-bottom:10px;
  background:linear-gradient(135deg,#E8631C,#F07B3C);
  color:#fff; border:none; border-radius:14px;
  font:inherit; font-weight:700; font-size:15px;
  box-shadow:0 4px 14px rgba(232,99,28,.3);
  cursor:pointer; transition:all .2s ease;
  position:relative; align-items:center; gap:10px; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.svc-cart-toggle:active{transform:scale(.97);}
.svc-cart-toggle-label{flex:1; text-align:center;}
.svc-cart-toggle-badge{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  min-width:28px; height:28px; border-radius:14px;
  background:#fff; color:#E8631C; font-weight:800; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 7px; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.svc-workdesk-lines{
  flex:1; min-height:0; overflow:auto; padding:0;
  -webkit-overflow-scrolling:touch;
}
.svc-workdesk-sum{
  flex-shrink:0; margin:0; padding:14px 16px 16px;
  border:1px solid #173330; border-radius:14px;
  background:linear-gradient(135deg,#0F1E1B,#173330) !important;
  box-shadow:0 4px 12px rgba(15,30,27,.2);
}
.svc-totals.svc-workdesk-sum{
  background:linear-gradient(135deg,#0F1E1B,#173330) !important;
}
/* Keranjang tabel ringkas */
.svc-cart-table{
  width:100%; border-collapse:collapse; font-size:12.5px;
}
.svc-cart-table thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
  background:var(--bg-soft,#F3F7F6); border-bottom:1px solid var(--line);
  padding:8px 8px; white-space:nowrap;
}
.svc-cart-table thead th:nth-child(2),
.svc-cart-table thead th:nth-child(3){text-align:right;}
.svc-cart-table tbody td{
  padding:6px 8px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
}
.svc-cart-row.is-jasa td:first-child{box-shadow:inset 3px 0 0 #3B82F6;}
.svc-cart-row.is-part td:first-child{box-shadow:inset 3px 0 0 #E8631C;}
.svc-cart-name{
  min-width:0; font-weight:600; color:var(--ink); line-height:1.3;
}
.svc-cart-name .svc-tag{margin-right:5px; vertical-align:middle;}
.svc-cart-name span{vertical-align:middle;}
.svc-cart-qty{width:56px; text-align:right;}
.svc-cart-harga{width:110px; text-align:right; font-weight:700; white-space:nowrap;}
.svc-cart-act{width:36px; text-align:right; padding-right:6px !important;}
.svc-cart-qty input,
.svc-cart-harga input{
  width:100%; height:32px; margin:0; padding:0 6px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font:inherit; font-weight:600; text-align:right; font-variant-numeric:tabular-nums;
}
.svc-cart-act .ico-btn{width:30px; height:30px;}
.svc-tot-diskon{
  align-items:center;
}
.svc-tot-diskon .diskon-wrap{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:10px; background:#fff; padding:4px 8px;
}
.svc-tot-diskon .diskon-wrap input{
  width:48px; border:0; outline:0; text-align:right; font:inherit; font-weight:700;
  background:transparent; color:var(--ink);
}
.svc-tot-diskon .diskon-wrap span{font-size:12px; font-weight:700; color:var(--ink-soft);}
.svc-workdesk-input[data-mode="jasa"] .svc-add-tab.active{background:#0F9E96; color:#fff;}
.svc-workdesk-input[data-mode="part"] .svc-add-tab.active{background:#0F1E1B; color:#FFD4A8;}
.svc-mek-scroll{
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.svc-mek-scroll .svc-mek-check{flex:0 0 auto; white-space:nowrap;}
.svc-mek-picker{position:relative; display:grid; gap:8px;}
.svc-mek-chips{display:flex; flex-wrap:wrap; gap:6px; min-height:32px; align-items:center;}
.svc-mek-empty{font-size:12px; color:var(--ink-faint); font-weight:500;}
.svc-mek-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(15,158,150,.28); background:rgba(15,158,150,.1);
  color:#0B7A74; border-radius:999px; padding:6px 10px;
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.svc-mek-chip:hover{background:rgba(212,91,74,.1); border-color:rgba(212,91,74,.35); color:#B34436;}
.svc-mek-chip-x{font-size:14px; line-height:1; opacity:.75;}
.svc-mek-search-wrap{
  position:relative; display:flex; align-items:center;
}
.svc-mek-search-ico{
  position:absolute; left:12px; color:var(--ink-faint); font-size:14px; pointer-events:none;
}
.svc-mek-search{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:11px 12px 11px 34px; font:inherit; background:#fff; color:var(--ink);
}
.svc-mek-search:focus{outline:2px solid rgba(15,158,150,.25); border-color:#0F9E96;}
.svc-mek-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(18,32,30,.12); max-height:220px; overflow:auto;
  padding:4px;
}
.svc-mek-suggest-item{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:10px 12px; border-radius:9px; font:inherit; font-size:13px; font-weight:600;
  color:var(--ink); cursor:pointer;
}
.svc-mek-suggest-item:hover{background:var(--bg-soft,#F3F7F6); color:var(--teal);}
.svc-mek-suggest-empty{padding:12px; text-align:center; font-size:12px; color:var(--ink-faint);}
/* Form Tugaskan — lebar, grid mekanik + panel dipilih */
.svc-assign{
  display:flex; flex-direction:column; gap:12px;
  height:100%; min-height:0;
}
.svc-assign-hero{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  flex-shrink:0; padding:0;
}
.svc-assign-hero .svc-detail-name{font-size:17px; margin:0;}
.svc-assign-hero .svc-detail-unit{margin-top:2px; font-size:13px;}
.svc-assign-flow{
  margin-top:8px; font-size:11.5px; font-weight:600; line-height:1.35;
  color:var(--ink-soft); max-width:42ch;
}
.svc-assign-meta{
  flex-shrink:0; font-size:12px; font-weight:700; color:var(--ink-faint);
  padding:6px 10px; border-radius:999px; background:var(--bg-soft,#F3F7F6);
  border:1px solid var(--line); white-space:nowrap;
}
.svc-assign .svc-mek-picker.is-panel{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:0;
}
.svc-assign-split{
  display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:12px;
  flex:1; min-height:0; height:100%;
}
.svc-assign-avail{
  display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.svc-assign-avail .svc-mek-search-wrap{flex-shrink:0; max-width:280px;}
.svc-assign-avail .svc-mek-search{
  padding-top:10px; padding-bottom:10px; font-size:13px; border-radius:10px;
}
.svc-mek-picker.is-panel .svc-mek-suggest.svc-mek-grid{
  position:static; left:auto; right:auto; top:auto;
  flex:1; min-height:0; max-height:none; overflow:auto;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px;
  box-shadow:none; border:0; border-radius:0; background:transparent; padding:0;
}
.svc-mek-picker.is-panel .svc-mek-suggest-item{
  padding:10px 12px; font-size:13px; font-weight:600; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-soft,#F3F7F6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.svc-mek-picker.is-panel .svc-mek-suggest-item:hover{
  border-color:#0F9E96; background:#E7F7F6; color:#0B7A74;
}
.svc-mek-picker.is-panel .svc-mek-suggest-empty{
  grid-column:1 / -1; padding:24px 12px;
}
.svc-assign-picked{
  display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0;
  padding:12px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,#F8FBFA,#F3F7F6);
}
.svc-assign-picked-h{
  flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.svc-assign-picked-h b{
  font-size:13px; letter-spacing:0; text-transform:none; color:var(--teal,#0F9E96);
}
.svc-assign-picked .svc-mek-chips{
  flex:1; min-height:0; overflow:auto; align-content:flex-start;
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:6px;
  min-height:0; max-height:none; margin:0;
}
.svc-assign-picked .svc-mek-chip{
  width:100%; justify-content:space-between; border-radius:10px; padding:9px 10px;
}
.svc-assign-picked .svc-mek-empty{padding:12px 4px; text-align:center;}
.svc-create-form .field textarea{min-height:64px;}

/* Work form layout */
.svc-work{display:flex; flex-direction:column; gap:0;}
.svc-work-hero{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  margin-bottom:10px;
}
.svc-work-hero-main{min-width:0;}
.svc-work-mek{
  display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center;
  margin-bottom:8px;
}
.svc-work-mek label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.svc-work-mek select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 11px;
  background:#fff; font:inherit; color:var(--ink);
}
.svc-work-add{
  border:1px solid var(--line); border-radius:14px; padding:12px;
  background:#F8FAFC; margin-bottom:12px; transition:border-color .15s, background .15s;
}
.svc-work-add[data-mode="jasa"]{
  border-color:#BFDBFE; background:linear-gradient(180deg,#F8FBFF,#F1F7FF);
}
.svc-work-add[data-mode="part"]{
  border-color:#F3E0A8; background:linear-gradient(180deg,#FFFEF8,#FFF8E8);
}
.svc-add-tabs{display:flex; gap:8px; margin-bottom:12px;}
.svc-add-tab{
  flex:1; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px;
  font-size:13px; font-weight:700; color:var(--ink-soft);
}
.svc-add-tab.active{color:#fff; border-color:transparent;}
.svc-work-add[data-mode="jasa"] .svc-add-tab.active{background:#1D4ED8;}
.svc-work-add[data-mode="part"] .svc-add-tab.active{background:#0F1E1B; color:#FFD4A8;}
.svc-work-jasa{
  display:grid; grid-template-columns:minmax(0,1.4fr) 64px minmax(110px,.9fr); gap:8px; align-items:stretch;
}
.svc-work-jasa .field{margin:0;}
.svc-work-jasa .field input,
.svc-workdesk-input .field input{
  height:44px; margin:0; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:11px; font:inherit; font-weight:600; width:100%;
}
.svc-add-submit{
  width:100%; margin-top:10px; padding:11px 14px; border-radius:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.svc-work-list{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
}
.svc-work-list-head{
  padding:9px 12px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.svc-work-list #svc-lines{padding:4px 12px 0;}
.svc-line{
  display:flex; flex-direction:column; gap:0;
  padding:12px 10px 12px 12px; border-bottom:1px solid #E7F0EE;
  border-left:3px solid transparent; background:#fff;
}
.svc-line.is-jasa{border-left-color:#3B82F6;}
.svc-line.is-part{border-left-color:#E8631C;}
.svc-line:last-child{border-bottom:0;}
.svc-line-name{
  font-size:13px; font-weight:600; color:var(--ink); line-height:1.35;
  min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.svc-line-meta{font-size:12px; color:var(--ink-faint); margin-top:4px;}
.svc-line-right{text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.svc-workdesk-lines .svc-line{border-radius:0; margin:0;}
.svc-workdesk-lines .svc-line .ico-btn{flex-shrink:0;}
.svc-tag{font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; margin-right:4px;}
.svc-tag.jasa{background:#DBEAFE; color:#1D4ED8;}
.svc-tag.part{background:var(--accent-bg); color:#C2410C;}
.svc-empty-lines{padding:16px 8px; text-align:center; color:var(--ink-faint); font-size:12.5px;}
.svc-totals{
  margin:0; padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px;
  background:linear-gradient(180deg,#fff,var(--bg-soft)); border-top:1px solid var(--line);
}
.svc-totals.svc-workdesk-sum{
  padding:14px 16px 16px;
  background:linear-gradient(135deg,#0F1E1B,#173330) !important;
  border:1px solid #173330 !important;
  border-top:1px solid #173330 !important;
}
.svc-tot-row{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft);}
.svc-tot-row.grand{
  font-size:15px; color:var(--ink); font-weight:600; padding-top:8px;
  margin-top:2px; border-top:1px dashed var(--line);
}
.svc-part-pick{display:flex; flex-direction:column; gap:6px; max-height:none; flex:1; min-height:180px; overflow:auto; margin-top:8px;}
.svc-workdesk-input .svc-add-panel{display:flex; flex-direction:column; flex:1; min-height:0;}
.svc-workdesk-input .svc-add-panel[hidden]{display:none !important;}
.svc-part-item{
  display:flex; justify-content:space-between; gap:10px; text-align:left; align-items:center;
  padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:12.5px;
  cursor:pointer; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.svc-part-item:hover{
  border-color:#E8631C; background:#FFF8F0;
  box-shadow:0 2px 8px rgba(232,99,28,.12);
}
.svc-part-item:active{background:#FFF4ED; border-color:#E8631C;}
.svc-part-item.is-busy{opacity:.65; pointer-events:none;}
.svc-part-item.is-empty{
  opacity:.45; cursor:not-allowed; background:#F8FAFC;
}
.svc-part-item.is-empty:hover{
  border-color:var(--line); background:#F8FAFC; box-shadow:none;
}
.svc-part-item.is-added{
  border-color:#0F9E96; background:#ECFDF9;
  animation:svcPartPulse .28s ease;
}
@keyframes svcPartPulse{
  0%{box-shadow:0 0 0 0 rgba(15,158,150,.35);}
  100%{box-shadow:0 0 0 8px rgba(15,158,150,0);}
}
.svc-paid-meta{margin-top:10px; font-size:13.5px; color:var(--ink-soft);}
.svc-add-box{padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-soft);}

.payroll-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg-soft);}
.ps-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px;}
.ps-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.ps-value{font-size:20px; font-weight:700; margin-top:8px; letter-spacing:-.02em;}

/* ===== PELANGGAN ===== */
.plg-mob-only{display:none;}
.plg-desk-only{display:inline-flex;}
.plg-head{align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.plg-head-text{min-width:0;}
.plg-title{
  margin:0; font-size:clamp(22px, 6vw, 26px); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.plg-desc{margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.plg-summary{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; margin-bottom:14px;
}
.plg-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.plg-stat-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.plg-stat-value{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.plg-stat-value.accent{color:var(--red);}
.plg-toolbar{
  display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;
}
.plg-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 220px; min-width:0; margin:0; height:42px;
}
.plg-search-ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:15px; pointer-events:none; z-index:1;
}
.plg-search input{
  width:100%; height:42px; margin:0; border:1px solid var(--line); border-radius:11px;
  padding:0 12px 0 36px !important; background:#fff !important; font-size:13px;
  box-shadow:none !important;
}
.plg-add-btn{
  width:auto; height:42px; padding:0 16px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; font-size:13px; font-weight:600;
}
.plg-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.plg-table{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed;}
.plg-table thead th{
  text-align:left; padding:12px 14px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  background:#F8FAFC; border-bottom:1px solid var(--line);
}
.plg-table thead th.plg-th-aksi{text-align:right;}
.plg-table tbody td{
  padding:12px 14px; border-bottom:1px solid #E7F0EE; vertical-align:middle;
}
.plg-table tbody tr:last-child td{border-bottom:0;}
.plg-table tbody tr:hover{background:#F8FAFC;}
.plg-table th:nth-child(1), .plg-table td:nth-child(1){width:104px;}
.plg-table th:nth-child(2), .plg-table td:nth-child(2){width:22%;}
.plg-table th:nth-child(3), .plg-table td:nth-child(3){width:168px;}
.plg-table th:nth-child(4), .plg-table td:nth-child(4){width:auto;}
.plg-table th:nth-child(5), .plg-table td:nth-child(5){width:132px;}
.plg-td-code{font-weight:700; white-space:nowrap;}
.plg-name{
  font-size:13.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plg-td-alamat{
  color:var(--ink-soft); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plg-td-aksi{text-align:right; white-space:nowrap;}
.plg-aksi{display:inline-flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap;}
.plg-td-tel,
.plg-table td:nth-child(3){white-space:nowrap;}
.plg-tel{
  color:var(--teal); font-weight:600; text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap; display:inline-block;
}
.plg-tel:hover{text-decoration:underline;}
.plg-muted{color:var(--ink-faint); font-weight:500;}
.plg-empty{
  text-align:center; padding:48px 16px; color:var(--ink-faint);
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}
.plg-empty b{display:block; color:var(--ink-soft); margin-bottom:6px; font-size:15px;}
.plg-cards{display:flex; flex-direction:column; gap:12px;}
.plg-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(140px 70px at 100% 0%, rgba(232,99,28,.14), transparent 55%),
    linear-gradient(160deg, #fff 0%, #F7FBFA 100%);
  border:1px solid var(--line); border-radius:16px;
  padding:14px 14px 12px; box-shadow:0 6px 18px rgba(15,30,27,.06);
}
.plg-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, #E8631C, #0F9E96);
}
.plg-card-brand{
  display:flex; align-items:center; gap:8px; margin:0 0 10px 4px;
}
.plg-card-logo{
  width:28px; height:28px; object-fit:contain; border-radius:8px;
  background:#fff; border:1px solid var(--line); padding:2px; flex-shrink:0;
}
.plg-card-brand-text{
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#0F1E1B;
}
.plg-card-brand-text span{
  display:block; font-size:10px; font-weight:600; letter-spacing:.04em;
  text-transform:none; color:var(--ink-faint); margin-top:1px;
}
.plg-card-top{display:flex; justify-content:space-between; gap:12px;}
.plg-card-main{min-width:0; flex:1; padding-left:4px;}
.plg-code{
  display:inline-block; font-size:11px; font-weight:700; color:#0F9E96;
  padding:3px 8px; border-radius:999px; background:rgba(15,158,150,.1);
}
.plg-card .plg-name{margin-top:8px; font-size:16px; line-height:1.3; font-weight:800; letter-spacing:-.02em;}
.plg-card .plg-tel,
.plg-card .plg-muted{display:inline-block; margin-top:6px; font-size:13px;}
.plg-alamat{
  margin-top:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plg-card-aksi{
  display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #E7F0EE;
}
.plg-card-aksi .btn,
.plg-card-aksi .ico-btn{
  flex:1 1 0; min-width:0; min-height:40px; border-radius:10px; justify-content:center;
}
.plg-form .field{margin-bottom:12px;}
.plg-form textarea{
  width:100%; min-height:72px; resize:vertical; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font:inherit; background:#fff;
}

.plg-id-wrap{display:flex; flex-direction:column; gap:12px; align-items:center;}
.plg-id-tabs{display:flex; gap:8px; justify-content:center;}
.plg-id-tab.active{
  background:var(--teal-soft,#E6F5F4); border-color:var(--teal,#0F9E96); color:var(--ink);
}
.plg-id-stage{width:100%; display:flex; justify-content:center; padding:4px 0; min-height:220px; align-items:center;}
.plg-id-side{display:none;}
.plg-id-side.is-on{display:block;}
.plg-id-hint{
  margin:0; font-size:12px; color:var(--ink-faint); text-align:center; line-height:1.4; max-width:340px;
}
.plg-id-card{
  position:relative; overflow:hidden;
  width:324px; height:204px;
  border-radius:12px; padding:0; border:1px solid rgba(15,30,27,.14);
  background:#0F1E1B; color:#F8FAFC;
  box-shadow:0 10px 28px rgba(15,30,27,.22);
  display:flex; flex-direction:column;
}
.plg-id-card::after{
  content:""; position:absolute; right:-36px; top:-36px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle, rgba(232,99,28,.32), transparent 68%);
  pointer-events:none;
}
.plg-id-card::before{
  content:""; position:absolute; left:-28px; bottom:-40px; width:110px; height:110px;
  border-radius:50%; background:radial-gradient(circle, rgba(15,158,150,.26), transparent 70%);
  pointer-events:none;
}
.plg-id-card.is-back{
  background:linear-gradient(160deg, #F8FAFC 0%, #EEF4F2 100%);
  color:var(--ink);
}
.plg-id-card.is-back::after,
.plg-id-card.is-back::before{opacity:.35;}
.plg-id-inner{
  position:relative; z-index:1; flex:1; min-height:0;
  display:flex; flex-direction:column; padding:14px 16px 12px;
}
.plg-id-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.plg-id-brand-row{display:flex; align-items:center; gap:8px; min-width:0;}
.plg-id-logo{
  width:34px; height:34px; object-fit:contain; border-radius:9px; flex-shrink:0;
  background:#fff; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.plg-id-brand{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; line-height:1.15;
}
.plg-id-tag{
  margin-top:2px; font-size:9.5px; font-weight:600; color:rgba(248,250,252,.68);
}
.plg-id-chip{
  flex-shrink:0; padding:3px 8px; border-radius:999px;
  background:rgba(232,99,28,.22); border:1px solid rgba(232,99,28,.4);
  color:#F6B48A; font-size:9.5px; font-weight:800; letter-spacing:.04em;
}
.plg-id-code{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(15,158,150,.2); border:1px solid rgba(15,158,150,.35);
  color:#9FE3DE; font-size:11px; font-weight:700;
}
.plg-id-name{
  margin-top:8px; font-size:18px; font-weight:800; letter-spacing:-.03em;
  line-height:1.15; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plg-id-meta{
  margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding-top:10px;
}
.plg-id-meta > div{display:flex; flex-direction:column; gap:1px; min-width:0;}
.plg-id-meta span{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(248,250,252,.5);
}
.plg-id-meta b{
  font-size:12px; font-weight:600; color:#F8FAFC; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plg-id-meta .plg-id-meta-full{grid-column:1 / -1;}
.plg-id-meta .plg-id-meta-full b{
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.plg-id-accent{
  height:4px; flex-shrink:0;
  background:linear-gradient(90deg, #E8631C, #0F9E96);
}
.plg-id-card.is-back .plg-id-brand{color:#0F1E1B;}
.plg-id-card.is-back .plg-id-tag{color:var(--ink-faint);}
.plg-id-card.is-back .plg-id-chip{
  background:rgba(15,158,150,.12); border-color:rgba(15,158,150,.28); color:#0B7A74;
}
.plg-id-back-body{flex:1; display:flex; flex-direction:column; gap:8px; min-height:0;}
.plg-id-back-label{
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
.plg-id-back-val{
  font-size:12px; font-weight:600; color:var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.plg-id-back-foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:10px; font-weight:600; color:var(--ink-faint);
}
.plg-id-back-foot b{color:#0F9E96; font-weight:700;}
.plg-id-wrap .audit-meta{width:100%; max-width:324px; margin-top:2px;}

@media (max-width:800px){
  .plg-id-card{width:min(324px, 92vw); height:auto; min-height:204px; aspect-ratio:85.6 / 54;}
}

.id-card{
  border:1px solid var(--line); border-radius:16px; padding:22px; max-width:320px;
  margin:0 auto; background:linear-gradient(160deg, #fff 55%, #F0FDFA);
  box-shadow:var(--shadow-sm);
}
.id-card .ic-brand{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#0D7370;
}
.id-card .ic-code{
  margin-top:10px; display:inline-block; padding:3px 8px; border-radius:999px;
  background:#ECFDF5; color:#0D7370; font-size:12px; font-weight:700;
}
.id-card .ic-name{font-size:22px; font-weight:700; margin-top:12px; letter-spacing:-.02em;}
.id-card .ic-meta{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.id-card .ic-meta > div{display:flex; flex-direction:column; gap:2px;}
.id-card .ic-meta span{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
}
.id-card .ic-meta b{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4;}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--sidebar); color:#F8FAFC;
  padding:13px 16px; font-size:13px; font-weight:500; display:none; z-index:80; max-width:320px;
  border-radius:12px; box-shadow:var(--shadow); border-left:3px solid var(--accent);
  animation:fadeUp .3s var(--ease);
}
.toast.show{display:block;}
.modal{
  position:fixed; inset:0; background:rgba(15,23,42,.4); display:none;
  align-items:center; justify-content:center; z-index:60; padding:20px; backdrop-filter:blur(2px);
}
.modal.show{display:flex;}
.modal-card{
  background:var(--panel); border:1px solid var(--line); width:100%; max-width:480px;
  max-height:90vh; overflow:auto; border-radius:18px; box-shadow:var(--shadow); animation:fadeUp .3s var(--ease);
}
.modal-card--wide{max-width:640px;}
.modal-card--emp{
  max-width:820px;
  display:flex; flex-direction:column;
  overflow:hidden; max-height:min(92vh, 820px);
}
.modal-card--emp .modal-head,
.modal-card--emp .modal-foot{
  position:static; flex-shrink:0;
}
.modal-card--emp .modal-body{
  padding:14px 16px 12px;
  overflow:auto; flex:1 1 auto; min-height:0;
}
.modal-card--svc .modal-body{padding:16px 18px 8px;}
/* Tugaskan: modal besar, isi fleksibel — scroll hanya di daftar */
.modal-card.modal-card--svc-assign{
  width:min(92vw, 760px);
  max-width:760px;
  height:min(84vh, 640px);
  max-height:min(84vh, 640px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-card.modal-card--svc-assign .modal-head{padding:14px 18px; flex-shrink:0;}
.modal-card.modal-card--svc-assign .modal-body{
  padding:12px 18px 10px; overflow:hidden; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
.modal-card.modal-card--svc-assign .modal-foot{
  padding:12px 18px 16px; flex-shrink:0;
}

/* Isi kerja fullscreen — harus di bawah .modal-card agar tidak kalah spesifisitas */
body.svc-work-open{overflow:hidden;}
.modal.modal--fullscreen{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  background:#F3F7F6;
}
.modal.modal--fullscreen .modal-card.modal-card--svc-work{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:var(--bg, #F3F7F6);
}
.modal.modal--fullscreen .modal-card--svc-work .modal-head{
  flex-shrink:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:12px 20px;
}
.modal.modal--fullscreen .modal-card--svc-work .modal-foot{
  flex-shrink:0;
  background:#fff;
  border-top:1px solid var(--line);
  padding:12px 20px;
  gap:10px;
}
.modal.modal--fullscreen .modal-card--svc-work .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  padding:10px 14px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  background:var(--bg, #F3F7F6);
}
.modal.modal--fullscreen .svc-workdesk{
  flex:1; min-height:0; gap:8px;
}
.modal.modal--fullscreen .svc-workdesk-body{
  flex:1; min-height:0;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.38fr);
  gap:14px;
}
.modal.modal--fullscreen .svc-workdesk-input{
  padding:14px;
}
.modal.modal--fullscreen .svc-workdesk-cart{
  min-height:0;
}
.modal.modal--fullscreen .svc-workdesk-side{
  min-height:0;
}
.modal.modal--fullscreen .svc-workdesk-lines{
  padding:0; flex:1; min-height:0; overflow:auto;
}
.modal.modal--fullscreen .svc-cart-table thead th{
  background:#fff;
  padding-left:12px; padding-right:10px;
}
.modal.modal--fullscreen .svc-cart-table tbody td{
  padding-left:12px; padding-right:10px;
}
.svc-workdesk-sum{color:#E7F0EE;}
.svc-workdesk-sum .svc-tot-row{color:#E7F0EE; font-size:13.5px;}
.svc-workdesk-sum .svc-tot-row span{color:#C5D4D1;}
.svc-workdesk-sum .svc-tot-row b{color:#fff; font-weight:700;}
.svc-workdesk-sum .svc-tot-row.grand{
  color:#fff; font-size:17px; padding-top:10px; margin-top:6px;
  border-top:1px solid rgba(255,255,255,.2);
}
.svc-workdesk-sum .svc-tot-row.grand span{color:#fff; font-size:14px;}
.svc-workdesk-sum .svc-tot-row.grand b{
  color:#FFD4A8; font-size:20px; letter-spacing:-.02em;
}
.svc-workdesk-sum .diskon-wrap{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25);
}
.svc-workdesk-sum .diskon-wrap input{color:#fff; background:transparent;}
.svc-workdesk-sum .diskon-wrap span{color:#E7F0EE;}
.modal.modal--fullscreen .svc-workdesk-bar{
  padding:8px 10px; overflow:visible; z-index:8;
}
.modal.modal--fullscreen .svc-add-tabs{margin-bottom:8px;}
.modal.modal--fullscreen .svc-add-tab{padding:9px;}
/* Preview foto: muat 1 layar tanpa scroll */
.modal-card--foto{
  max-width:min(880px, 96vw);
  max-height:min(92vh, 920px);
  display:flex; flex-direction:column;
  overflow:hidden !important;
}
.modal-card--foto .modal-head{flex-shrink:0;}
.modal-card--foto .modal-body{
  flex:1; min-height:0; overflow:hidden;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:center;
}
.modal-card--foto .modal-foot{flex-shrink:0;}
.modal-card--foto .item-foto-lightbox{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0; overflow:hidden;
}
.modal-card--foto .item-foto-lightbox img{
  max-width:100%;
  max-height:calc(92vh - 118px);
  width:auto; height:auto;
  object-fit:contain; border-radius:12px;
  background:#0F1E1B;
  box-shadow:0 8px 28px rgba(15,30,27,.18);
}
/* Web: hanya X · HP: hanya Tutup */
@media (min-width:801px){
  .modal-card--foto .modal-foot{display:none !important; padding:0; border:0;}
  .modal-card--foto .item-foto-lightbox img{max-height:calc(92vh - 72px);}
}
@media (max-width:800px){
  .modal-card--foto{
    max-width:100%; max-height:min(94dvh, 940px); width:100%;
    border-radius:18px 18px 0 0; margin-top:auto;
  }
  .modal-card--foto .modal-x{display:none !important;}
  .modal-card--foto .modal-foot{display:flex !important;}
  .modal-card--foto .modal-foot .btn,
  .modal-card--foto .modal-foot .btn-primary{flex:1; min-height:46px;}
  .modal-card--foto .item-foto-lightbox img{max-height:calc(94dvh - 140px);}
  .photo-pick-desk{display:none !important;}
  .photo-pick-mob{display:inline-flex !important;}
}
.photo-pick-mob{display:none;}
.photo-pick-desk{display:inline-flex;}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; background:var(--panel); z-index:2;}
.modal-head h3{font-size:16px; font-weight:700;}
.modal-x{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink); font-size:22px; line-height:1; font-weight:500;
}
.modal-x:hover{background:#E7F0EE;}
.modal-body{padding:18px 20px;}
.modal-foot{padding:12px 18px 16px; display:flex; gap:8px; justify-content:flex-end; align-items:center; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--panel); z-index:2;}
.modal-foot:empty{display:none; padding:0; border:0;}
.modal-foot .btn,
.modal-foot .btn-primary{
  width:auto; min-width:110px; height:42px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; font-size:13.5px; margin:0;
}
.modal-foot .btn-primary{flex:0 0 auto;}
#print-area{display:none;}

.rcpt-preview{display:flex; flex-direction:column; gap:10px;}
.rcpt-preview-note{
  margin:0; padding:10px 12px; border-radius:12px;
  background:#FFF7E6; border:1px solid rgba(232,99,28,.28);
  color:#7A5410; font-size:12.5px; font-weight:600; line-height:1.4;
}
.rcpt-preview-stage{
  display:flex; justify-content:center; align-items:flex-start;
  padding:14px 12px; border-radius:14px;
  background:#E8E8E8; border:1px solid var(--line);
  max-height:min(62vh, 560px); overflow-x:hidden; overflow-y:auto;
}
.rcpt-preview-frame{
  width:300px; max-width:100%; height:360px;
  border:0; background:transparent; display:block;
  overflow:hidden; flex-shrink:0;
}
.modal-card--wide:has(.rcpt-preview){max-width:420px;}
.modal-card--wide:has(.rcpt-preview) .modal-body{overflow-x:hidden;}

.drawer-pick{display:grid; gap:10px;}
.drawer-pick-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  width:100%; text-align:left; padding:14px 16px;
  border-radius:12px; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-family:inherit; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.drawer-pick-btn:hover{
  border-color:#0F9E96; background:#F3F7F6;
}
.drawer-pick-btn strong{font-size:15px; font-weight:700;}
.drawer-pick-btn span{font-size:12.5px; font-weight:500; color:var(--ink-soft);}
.drawer-setup{display:flex; flex-direction:column; gap:0;}
.drawer-setup-status{
  margin:0 0 14px; padding:10px 12px; border-radius:10px;
  background:var(--bg-soft); border:1px solid var(--line);
  font-size:12.5px; font-weight:500; color:var(--ink-soft); line-height:1.4;
}
.drawer-setup-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.drawer-setup-grid .field{margin-bottom:12px;}
.drawer-setup-printer{display:flex; gap:8px; align-items:stretch;}
.drawer-setup-printer select{flex:1; min-width:0;}
.drawer-setup-printer .btn{flex:0 0 auto; height:auto;}
.drawer-setup-help{
  margin-top:4px; border:1px solid var(--line); border-radius:10px;
  padding:4px 12px 10px; background:#fff;
}
.drawer-setup-help summary{
  cursor:pointer; font-size:13px; font-weight:600; color:var(--ink);
  padding:8px 0; list-style-position:inside;
}
.drawer-setup-help ol{
  margin:0 0 10px 18px; padding:0;
  font-size:12.5px; color:var(--ink-soft); line-height:1.5; font-weight:500;
}
.drawer-setup-help-actions{display:flex; flex-wrap:wrap; gap:8px;}
@media (max-width:640px){
  .drawer-setup-grid{grid-template-columns:1fr;}
}

@media (max-width:1100px){
  .stat-grid,
.stat-grid.dash-stat-4{grid-template-columns:repeat(3,1fr);}
.debt-summary.dash-debt-4{grid-template-columns:repeat(2,1fr);}
.debt-summary.dash-debt-5{grid-template-columns:repeat(2,1fr);}
  .kasir-grid,.panel-row,.form-grid{grid-template-columns:1fr;}
  #hutang-fields .hf-grid{grid-template-columns:1fr;}
  .cf-cash-row{grid-template-columns:1fr 1fr; gap:8px;}
  .pay-chips{grid-template-columns:repeat(2,1fr);}
  .svc-toolbar{flex-wrap:wrap;}
  .svc-search{max-width:none; flex:1 1 160px;}
  .ptg-toolbar{flex-wrap:wrap;}
  .ptg-search{max-width:none; flex:1 1 160px;}
  .ptg-summary{grid-template-columns:1fr 1fr;}
  .ptg-stat-main{grid-column:1 / -1;}
  .dash-chart-row{grid-template-columns:1fr;}
  /* Karyawan: layar sempit / bagi layar → kartu (tabel terlalu sempit) */
  body.view-is-karyawan .emp-table-wrap{display:none !important;}
}
@media (max-width:800px){
  .menu-toggle{display:inline-block;}
  .sidebar-collapse-btn{display:none !important;}
  .sidebar,
  .sidebar.collapsed{
    position:fixed; left:0; top:0; bottom:0; z-index:40; width:min(86vw,300px); height:100vh;
    padding:20px 14px 16px;
    transform:translateX(-100%); transition:transform .25s var(--ease);
  }
  .sidebar.collapsed .brand-row{
    flex-direction:row; gap:10px; align-items:center; padding:10px 6px 18px; margin-bottom:22px;
  }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section,
  .sidebar.collapsed .user-meta,
  .sidebar.collapsed .logout-label{display:initial;}
  .sidebar.collapsed .nav-section{display:block;}
  .sidebar.collapsed .nav-label{display:inline;}
  .sidebar.collapsed .brand-text,.sidebar.collapsed .user-meta{display:block;}
  .sidebar.collapsed .logout-label{display:inline;}
  .sidebar.collapsed .logout-btn{font-size:12.5px; line-height:normal; padding:10px;}
  .sidebar.collapsed .logout-btn::before{content:none;}
  .sidebar.collapsed .nav-item{justify-content:flex-start; padding:11px 12px; gap:10px;}
  .sidebar.collapsed .nav-item.active::before{display:block;}
  .sidebar.collapsed .nav-ico{width:22px; height:22px; border-radius:7px; font-size:12px;}
  .sidebar.collapsed .user-chip{justify-content:flex-start;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.show{
    display:block; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:30;
  }
  .main{
    padding:12px 14px calc(20px + env(safe-area-inset-bottom,0px));
    max-width:100vw;
  }
  .topbar{margin-bottom:14px; align-items:center;}
  .topbar h2{font-size:22px;}
  .topbar .meta{font-size:12px; margin-top:4px;}
  .topbar-right{display:none;}
  .payroll-summary{grid-template-columns:1fr;}

  /* Login HP: hanya kartu form di tengah — panel brand disembunyikan */
  #login-screen{
    grid-template-columns:1fr;
    min-height:100vh; min-height:100dvh;
    align-items:center; justify-items:center;
  }
  #login-screen .login-brand{display:none !important;}
  #login-screen .login-panel{
    width:100%; min-height:100vh; min-height:100dvh;
    padding:max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(520px 280px at 50% 0%, rgba(232,99,28,.10), transparent 55%),
      radial-gradient(420px 240px at 80% 100%, rgba(15,158,150,.10), transparent 50%),
      var(--bg);
  }
  #login-screen .login-card{
    width:100%; max-width:380px; padding:26px 20px 24px;
    border-radius:20px;
  }
  #login-screen .login-card .lead{font-size:13px; margin-bottom:20px;}
  #login-screen .login-card h2{font-size:26px;}
  #login-screen .login-card-logo{width:64px; height:64px; border-radius:16px;}

  /* ===== Dashboard = mobile: sapaan saja, tanpa judul dobel ===== */
  body.view-is-dashboard .topbar h2,
  body.view-is-dashboard .topbar .meta,
  body.view-is-dashboard_owner .topbar h2,
  body.view-is-dashboard_owner .topbar .meta{display:none;}
  body.view-is-dashboard .topbar,
  body.view-is-dashboard_owner .topbar{margin-bottom:8px;}
  body.view-is-dashboard .menu-toggle,
  body.view-is-dashboard_owner .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px;
    box-shadow:var(--shadow-sm);
  }
  .period-bar{margin-bottom:12px; padding:10px 12px; border-radius:14px;}
  .period-btn{padding:9px 14px; font-size:13px;}
  body.view-is-dashboard .main,
  body.view-is-dashboard_owner .main{
    padding-top:10px;
    background:
      radial-gradient(420px 220px at 100% -40px, rgba(232,99,28,.12), transparent 60%),
      var(--bg);
  }

  .dash-desk-only{display:none !important;}
  .dash-mob-only{display:block;}

  .m-mon-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom:14px; padding:4px 2px 2px;
  }
  .m-mon-kicker{display:none !important;}
  .m-mon-title{
    margin:0; font-size:clamp(24px, 6.5vw, 30px); font-weight:750;
    letter-spacing:-.03em; color:var(--ink); line-height:1.15;
  }
  .m-mon-date{margin:6px 0 0; font-size:12.5px; font-weight:500; color:var(--ink-faint);}
  .m-mon-live{
    flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
    margin-top:4px; padding:7px 10px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--teal); background:var(--teal-bg); border:1px solid #B7E0D8;
  }
  .m-mon-dot{
    width:7px; height:7px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 0 0 rgba(15,158,150,.45);
    animation:mPulse 1.8s ease-out infinite;
  }
  @keyframes mPulse{
    0%{box-shadow:0 0 0 0 rgba(15,158,150,.45);}
    70%{box-shadow:0 0 0 8px rgba(15,158,150,0);}
    100%{box-shadow:0 0 0 0 rgba(15,158,150,0);}
  }

  #view-dashboard .dash-sec-label,
  #view-dashboard_owner .dash-sec-label{margin:2px 0 8px;}
  #view-dashboard .dash-jump,
  #view-dashboard_owner .dash-jump{gap:6px; margin-bottom:12px;}
  #view-dashboard .dash-jump-btn,
  #view-dashboard_owner .dash-jump-btn{padding:6px 10px; font-size:11px;}
  #view-dashboard .stat-grid,
  #view-dashboard .stat-grid.dash-stat-4,
  #view-dashboard_owner .stat-grid,
  #view-dashboard_owner .stat-grid.dash-stat-4{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px;
  }
  #view-dashboard .debt-summary,
  #view-dashboard .debt-summary.dash-debt-4,
  #view-dashboard .debt-summary.dash-debt-5,
  #view-dashboard_owner .debt-summary,
  #view-dashboard_owner .debt-summary.dash-debt-4,
  #view-dashboard_owner .debt-summary.dash-debt-5{
    grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
  }
  #view-dashboard .stat-card,
  #view-dashboard_owner .stat-card{
    padding:14px 12px 12px; border-radius:14px;
  }
  #view-dashboard .stat-card:hover,
  #view-dashboard_owner .stat-card:hover{transform:none; box-shadow:var(--shadow-sm);}
  #view-dashboard .stat-ico,
  #view-dashboard_owner .stat-ico{width:26px; height:26px; border-radius:8px; font-size:11px; margin-bottom:8px;}
  #view-dashboard .stat-card .label,
  #view-dashboard_owner .stat-card .label{font-size:10px; margin-bottom:6px;}
  #view-dashboard .stat-card .value,
  #view-dashboard_owner .stat-card .value{font-size:clamp(15px, 4.2vw, 18px); margin-bottom:4px;}
  #view-dashboard .stat-card .delta,
  #view-dashboard_owner .stat-card .delta{font-size:11px;}

  #view-dashboard .stat-featured,
  #view-dashboard_owner .stat-featured{
    grid-column:1 / -1;
    padding:18px 16px;
    background:
      radial-gradient(280px 120px at 100% 0%, rgba(232,99,28,.2), transparent 55%),
      linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
    border:none; color:#F8FAFC;
  }
  #view-dashboard .stat-featured::before,
  #view-dashboard_owner .stat-featured::before{display:none;}
  #view-dashboard .stat-featured .stat-ico,
  #view-dashboard_owner .stat-featured .stat-ico{
    background:rgba(232,99,28,.22); color:#FFD4A8; margin-bottom:10px;
  }
  #view-dashboard .stat-featured .label,
  #view-dashboard_owner .stat-featured .label{color:#F08A4B;}
  #view-dashboard .stat-featured .value,
  #view-dashboard_owner .stat-featured .value{
    font-size:clamp(26px, 8vw, 34px); color:#fff; margin-bottom:4px;
  }
  #view-dashboard .stat-featured .delta,
  #view-dashboard_owner .stat-featured .delta{color:#B6C0CE;}

  #view-dashboard .debt-card,
  #view-dashboard_owner .debt-card{padding:14px 12px; border-radius:14px;}
  #view-dashboard .debt-card .label,
  #view-dashboard_owner .debt-card .label{font-size:11px; margin-bottom:8px;}
  #view-dashboard .debt-card .value,
  #view-dashboard_owner .debt-card .value{font-size:clamp(15px, 4.4vw, 18px); margin-bottom:4px;}
  #view-dashboard .debt-card .sub,
  #view-dashboard_owner .debt-card .sub{font-size:11px;}

  #view-dashboard .panel-row,
  #view-dashboard_owner .panel-row{
    grid-template-columns:1fr; gap:12px; margin-bottom:12px;
  }
  #view-dashboard .panel,
  #view-dashboard_owner .panel{
    margin-bottom:0; border-radius:16px;
  }
  #view-dashboard .panel-head,
  #view-dashboard_owner .panel-head{
    padding:12px 14px; background:#fff;
  }
  #view-dashboard .panel-head h3,
  #view-dashboard_owner .panel-head h3{font-size:14px;}
  #view-dashboard .dash-feed,
  #view-dashboard_owner .dash-feed{padding:2px 6px 8px;}
  #view-dashboard .dash-feed-item,
  #view-dashboard_owner .dash-feed-item{
    padding:12px 10px; border-radius:12px; border-bottom:none; margin-bottom:4px;
    background:var(--bg-soft);
  }
  #view-dashboard .dash-feed-item:last-child,
  #view-dashboard_owner .dash-feed-item:last-child{margin-bottom:0;}
  #view-dashboard .dfi-title,
  #view-dashboard_owner .dfi-title{font-size:13px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  #view-dashboard .dfi-val,
  #view-dashboard_owner .dfi-val{font-size:13px;}
  #view-dashboard .pm-wrap,
  #view-dashboard_owner .pm-wrap{padding:6px 12px 12px;}
  #view-dashboard .pm-row,
  #view-dashboard_owner .pm-row{gap:8px; margin-bottom:10px;}
  #view-dashboard .pm-name,
  #view-dashboard_owner .pm-name{min-width:52px; font-size:12px;}
  #view-dashboard .pm-val,
  #view-dashboard_owner .pm-val{min-width:72px; font-size:12px;}

  /* ===== Kasir mobile POS (2 langkah) ===== */
  body.view-is-kasir .topbar{margin-bottom:10px;}
  body.view-is-kasir .topbar h2{font-size:20px;}
  body.view-is-kasir .topbar .meta{display:none;}
  body.view-is-kasir.kasir-dock-visible .main{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }
  body.view-is-kasir.kasir-checkout-open .topbar{display:none;}
  body.view-is-kasir.kasir-checkout-open .main{
    padding:0; padding-bottom:env(safe-area-inset-bottom,0px);
  }

  #view-kasir .kasir-grid{
    display:block; gap:0;
  }
  #view-kasir .kasir-catalog{
    margin:0; border-radius:16px; overflow:hidden;
  }
  #view-kasir .kasir-catalog .panel-head{padding:12px 14px;}
  #view-kasir .kasir-catalog .panel-head h3{font-size:14px;}
  #view-kasir .kasir-keys-hint{display:none;}
  #view-kasir .kasir-search-row{padding:10px 12px;}
  #view-kasir .kasir-search-row .search-ico{left:24px;}
  #view-kasir .item-list{
    max-height:none;
    min-height:42vh;
    padding:8px;
    padding-bottom:12px;
  }
  #view-kasir .item-row{
    position:relative; padding:12px 14px; margin-bottom:6px; min-height:62px;
    transform:none; -webkit-tap-highlight-color:transparent;
  }
  #view-kasir .item-row:hover{transform:none;}
  #view-kasir .item-row:active{background:#FFF4ED; border-color:#E8631C;}
  #view-kasir .item-row .name{font-size:14px;}
  #view-kasir .item-row .price{font-size:14px;}
  #view-kasir .item-add{
    display:none;
    align-items:center; justify-content:center;
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:9px;
    background:linear-gradient(135deg,#0F1E1B,#173330); color:#FFD4A8;
    font-size:16px; font-weight:700; line-height:1;
  }
  #view-kasir .cart-empty-desk{display:none;}
  #view-kasir .cart-empty-mob{display:inline;}

  #view-kasir .kasir-cart{
    display:none;
    position:fixed; inset:0; z-index:45;
    margin:0; border:0; border-radius:0;
    max-height:none; overflow:auto;
    background:var(--bg);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #view-kasir .kasir-grid.is-checkout .kasir-catalog{display:none;}
  #view-kasir .kasir-grid.is-checkout .kasir-cart{display:flex; flex-direction:column;}
  #view-kasir .kasir-cart .panel-head{
    position:sticky; top:0; z-index:2;
    padding:12px 14px; gap:10px; align-items:center;
    background:#fff; border-bottom:1px solid var(--line);
  }
  #view-kasir .kasir-back-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    border:1px solid var(--line); background:var(--bg-soft);
    color:var(--ink); font-size:22px; font-weight:700; line-height:1;
  }
  #view-kasir .kasir-cart .cart-list{
    flex:1; max-height:none; min-height:120px; padding:10px 12px;
  }
  #view-kasir .cart-line{
    grid-template-columns:1fr auto;
    grid-template-areas:"name total" "qty total";
    gap:6px 10px; padding:12px;
  }
  #view-kasir .cart-line > div:first-child{grid-area:name;}
  #view-kasir .cart-line .qty-ctrl{grid-area:qty;}
  #view-kasir .cart-line .cl-total{grid-area:total; align-self:center; font-size:13px;}
  #view-kasir .kasir-cart .cart-summary{
    position:sticky; bottom:0; z-index:2;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(15,23,42,.06);
  }
  #view-kasir .pay-chips{grid-template-columns:repeat(2,1fr); gap:8px;}
  #view-kasir .pay-chip{padding:12px 8px; font-size:13px;}
  #view-kasir .sum-row.total{font-size:18px; margin:12px 0 10px;}
  #view-kasir .checkout-btn{width:100%; padding:14px 16px; font-size:15px; border-radius:12px;}

  .kasir-dock{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; left:14px; right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    z-index:42; width:auto; border:0; cursor:pointer;
    padding:14px 16px; border-radius:16px;
    background:linear-gradient(135deg,#0F1E1B,#173330); color:#F8FAFC;
    box-shadow:0 12px 28px rgba(15,23,42,.28);
    -webkit-tap-highlight-color:transparent;
  }
  .kasir-dock[hidden]{display:none !important;}
  .kasir-dock-left{display:flex; align-items:center; gap:10px; min-width:0;}
  .kasir-dock-badge{
    min-width:26px; height:26px; padding:0 7px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent); color:#0F1E1B; font-size:12px; font-weight:800;
  }
  .kasir-dock-label{font-size:13.5px; font-weight:600; white-space:nowrap;}
  .kasir-dock-total{font-size:15px; font-weight:700; color:#FFD4A8; white-space:nowrap;}

  /* ===== Riwayat mobile (pantau, tanpa hapus) ===== */
  .rw-modes{width:100%; display:flex;}
  .rw-mode{flex:1; text-align:center;}
  .rw-period-bar{flex-direction:column; align-items:stretch; gap:8px;}
  .rw-period-controls{width:100%;}
  .rw-period-controls .period-control{flex:1; min-width:0;}
  .rw-pdf-btn{flex:0 0 auto; width:auto;}
  body.view-is-riwayat .topbar h2,
  body.view-is-riwayat .topbar .meta{display:none;}
  body.view-is-riwayat .topbar{margin-bottom:8px;}
  body.view-is-riwayat .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-riwayat .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 0% -30px, rgba(15,158,150,.08), transparent 55%),
      var(--bg);
  }

  .riwayat-desk-only{display:none !important;}
  .riwayat-mob-only{display:block;}
  .m-rw-head.riwayat-mob-only{display:flex;}
  .riwayat-mob-list.riwayat-mob-only{display:flex;}

  .m-rw-head{
    align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom:12px; padding:2px;
  }
  .m-rw-kicker{
    margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .m-rw-title{
    margin:0; font-size:clamp(22px, 6vw, 28px); font-weight:700;
    letter-spacing:-.03em; color:var(--ink); line-height:1.15;
  }
  .m-rw-live{
    flex-shrink:0; margin-top:4px; padding:7px 10px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line);
  }

  #view-riwayat .riwayat-summary{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
  }
  #view-riwayat .rw-card{
    padding:12px; border-radius:14px;
  }
  #view-riwayat .rw-card-main{
    grid-column:1 / -1;
    background:
      radial-gradient(240px 100px at 100% 0%, rgba(232,99,28,.18), transparent 55%),
      linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%);
    border:none; color:#F8FAFC;
  }
  #view-riwayat .rw-card-main .rw-label{color:#F08A4B;}
  #view-riwayat .rw-card-main .rw-value{color:#fff; font-size:clamp(22px, 7vw, 28px);}
  /* Total transaksi | Belum lunas — sejajar kiri kanan */
  #view-riwayat .rw-card:not(.rw-card-main){
    min-width:0;
  }
  #view-riwayat .rw-label{font-size:10px; margin-bottom:6px;}
  #view-riwayat .rw-value{font-size:clamp(16px, 4.5vw, 20px);}

  #view-riwayat .riwayat-panel{
    border:none; background:transparent; box-shadow:none; margin-bottom:0;
  }
  #view-riwayat .kasir-search-row{
    padding:0 0 12px; border:none; background:transparent;
  }
  #view-riwayat .kasir-search-row input{
    border-radius:14px !important; padding:12px 14px 12px 38px !important;
    box-shadow:var(--shadow-sm);
  }
  #view-riwayat .kasir-search-row .search-ico{left:14px;}

  .riwayat-mob-list{display:flex; flex-direction:column; gap:8px; padding-bottom:8px;}
  .m-rw-card{
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    padding:14px; box-shadow:var(--shadow-sm);
    -webkit-tap-highlight-color:transparent;
    transition:transform .15s, border-color .15s;
  }
  .m-rw-card:active{transform:scale(.985); border-color:#CBD5E1;}
  .m-rw-top{
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    margin-bottom:12px;
  }
  .m-rw-nota{font-size:14px; font-weight:700; color:var(--ink);}
  .m-rw-tgl{font-size:12px; color:var(--ink-faint); margin-top:3px; font-weight:500;}
  .m-rw-cust{font-size:12px; color:var(--ink-soft); margin-top:4px; font-weight:500;}
  .m-rw-amount{font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap;}
  .m-rw-bottom{
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    padding-top:10px; border-top:1px solid #E7F0EE;
  }
  .m-rw-aksi{margin-left:auto; display:inline-flex; gap:6px; align-items:center;}
  .m-rw-nota-btn{margin-left:0;}

  /* Service mobile — kartu, bukan tabel web */
  body.view-is-service .topbar h2,
  body.view-is-service .topbar .meta{display:none;}
  body.view-is-service .topbar{margin-bottom:8px;}
  body.view-is-service .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  .svc-head{
    display:flex; flex-direction:column; gap:10px; margin-bottom:10px;
  }
  .svc-desc-mob{display:block; font-size:12.5px;}
  .svc-title{font-size:clamp(22px, 6vw, 26px);}
  .svc-kicker{display:none;}
  .svc-head-actions{width:100%;}
  .svc-head-actions .btn-primary{width:100%; padding:12px 14px; border-radius:12px;}
  .svc-create-desk{display:none !important;}
  .svc-toolbar{flex-direction:column; align-items:stretch; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
  .svc-tabs{
    display:flex; flex-wrap:nowrap; gap:6px; width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px;
  }
  .svc-tabs::-webkit-scrollbar{display:none;}
  .svc-tab{
    flex:0 0 auto; justify-content:center; border-radius:999px;
    padding:8px 12px; white-space:nowrap;
  }
  .svc-search{
    max-width:none; width:100%; height:42px; margin:0;
  }
  .svc-search input{
    height:42px; border-radius:12px; padding:0 12px 0 36px !important;
    background:#fff !important; border:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  .svc-search-ico{left:12px;}
  .svc-tools{width:100%; margin-left:0; display:flex; gap:0;}
  .svc-display-btn{display:none !important;}
  .svc-period-bar{min-width:0; width:100%;}
  .svc-table-wrap{display:none !important;}
  /* HP: kartu padat */
  .svc-list{display:flex; gap:6px; margin-bottom:8px; overflow:visible;}
  .svc-ticket{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:9px 11px; border-radius:12px; position:relative;
    overflow:visible;
  }
  .svc-ticket:hover{background:#fff;}
  .svc-ticket:active{transform:scale(.985);}
  .svc-ticket.is-menu-open{z-index:60;}
  .svc-col-code{order:1; margin-bottom:0;}
  .svc-col-cust{order:2; padding-right:100px;}
  .svc-col-unit{order:3; margin-top:1px;}
  .svc-col-tel{order:4; margin-top:2px;}
  .svc-col-mek{order:5; margin-top:2px;}
  .svc-mek-name{font-size:11px; color:var(--ink-faint); font-weight:500; line-height:1.25;}
  .svc-mek-name::before{content:'Mekanik · ';}
  .svc-col-stat{
    order:2; position:absolute; right:40px; top:8px; align-items:flex-end;
  }
  .svc-col-pay{
    order:2; position:absolute; right:40px; top:30px; align-items:flex-end;
  }
  .svc-col-total{order:6; margin-top:2px;}
  .svc-name{font-size:13.5px; margin:0; line-height:1.2;}
  .svc-unit{font-size:11px; margin-top:0; line-height:1.25;}
  .svc-tel{margin-top:0; font-size:11px; gap:4px;}
  .svc-c-total{font-size:12.5px;}
  .svc-col-act{
    order:7; width:100%; margin-top:6px; padding-top:0; border-top:0;
    display:flex; align-items:stretch; gap:6px;
  }
  .svc-c-act{width:auto; flex:0 0 auto;}
  .svc-more{
    order:0; position:absolute; right:6px; top:6px; z-index:3;
  }
  .svc-more-btn{
    width:32px; height:32px; border-radius:8px;
    background:var(--bg-soft); border:1px solid var(--line);
  }
  .svc-more-menu{
    right:0; top:calc(100% + 4px); z-index:80;
    background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.18);
  }
  .svc-desc-mob{font-size:12px; margin-top:2px;}
  .svc-head{margin-bottom:6px; gap:6px;}
  .svc-head-actions .btn-primary{padding:10px 14px;}
  .svc-c-no{font-size:11px;}
  .svc-st,.badge.svc-pay{font-size:10px; padding:2px 6px;}
  .dash-chart-box{height:200px;}
  .dash-chart-box-sm{height:200px;}
  .dash-chart-row{display:flex; flex-direction:column; gap:12px;}
  .svc-create-form,.svc-jasa-form{grid-template-columns:1fr;}
  .svc-jasa-form .field:not(.full){grid-column:auto;}
  .svc-jasa-form{grid-template-columns:1fr 1fr;}
  .svc-jasa-form .full{grid-column:1 / -1;}
  .modal:not(.modal--fullscreen){align-items:flex-end; padding:0;}
  .modal:not(.modal--fullscreen) .modal-card,
  .modal:not(.modal--fullscreen) .modal-card--wide{
    max-width:100%; max-height:92vh; border-radius:18px 18px 0 0;
    border-left:0; border-right:0; border-bottom:0;
  }
  .modal.modal--fullscreen .modal-card--svc-work .modal-body{
    padding:10px 12px 12px !important; display:flex !important; flex-direction:column !important;
  }
  .svc-workdesk{display:flex; flex-direction:column; flex:1; min-height:0;}
  .svc-workdesk-bar{margin-bottom:10px;}
  .modal.modal--fullscreen .svc-workdesk-body{
    display:flex !important; flex-direction:column !important; gap:0 !important;
    flex:1; min-height:0; position:relative;
  }
  .svc-workdesk-input{
    order:1; flex:1; min-height:0; overflow:auto;
  }
  .svc-cart-toggle{
    display:flex; order:2; margin:10px 0 0;
  }
  .svc-workdesk-side{
    order:3; position:fixed; left:0; right:0; bottom:0; z-index:100;
    background:#fff; border-radius:20px 20px 0 0;
    box-shadow:0 -8px 32px rgba(15,30,27,.25);
    transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; gap:10px;
    max-height:75vh; padding:0; margin:0;
  }
  .svc-workdesk-side.is-open{
    transform:translateY(0);
  }
  .svc-workdesk-cart{
    flex:1; min-height:0; display:flex; flex-direction:column;
    border:none; border-radius:20px 20px 0 0; margin:0;
  }
  .svc-workdesk-cart-h{
    border-radius:20px 20px 0 0; padding:14px 16px;
  }
  .svc-cart-close{
    display:inline-flex;
  }
  .svc-workdesk-lines{
    flex:1; min-height:200px;
  }
  .svc-workdesk-sum{
    margin:0 10px 10px; border-radius:14px;
  }
  .svc-add-panel{
    max-height:220px;
  }
  .svc-part-pick{
    max-height:160px;
  }
  .svc-part-item{
    padding:12px 14px; min-height:62px;
  }
  .svc-part-item > div:first-child > div:first-child{
    font-size:14px;
  }
  .svc-part-item > div:last-child{
    font-size:14px;
  }
  .svc-add-tab{
    padding:12px 16px; font-size:14px;
  }
  .modal-card--foto{
    max-height:min(94dvh, 940px) !important;
    overflow:hidden !important;
  }
  .modal-card--foto .modal-x{display:none !important;}
  .modal-card--foto .modal-foot{display:flex !important;}
  .modal-card--svc .modal-body{padding:12px 14px 6px;}
  .modal-head{padding:12px 14px;}
  .modal-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom, 0px));}
  .modal-foot .btn-primary,
  .modal-foot .btn{flex:1; min-width:0; height:44px; padding:0 14px; border-radius:12px;}
  .svc-block{border-radius:12px; margin-bottom:10px;}
  .svc-block-head{padding:10px 12px; font-size:12.5px;}
  .svc-block-body{padding:10px 12px 12px;}
  .svc-detail-name{font-size:16px;}
  .svc-work-jasa{grid-template-columns:1fr 1fr; gap:8px;}
  .svc-work-jasa .grow{grid-column:1 / -1;}
  .svc-work-jasa .qty{grid-column:1;}
  .svc-work-jasa .harga{grid-column:2;}
  .svc-line-edit{grid-template-columns:56px 1fr; gap:8px;}
  .svc-line-sub{grid-column:1 / -1; padding-bottom:0; text-align:right;}
  .svc-work-mek{grid-template-columns:1fr; gap:6px;}
  .svc-work-hero{flex-direction:column; gap:8px;}
  .svc-workdesk-bar{
    flex-wrap:wrap; gap:8px; align-items:stretch;
  }
  .svc-meta-inline{flex:1 1 auto;}
  .svc-meta-inline input{width:100%;}
  .svc-meta-inline--date{flex:1 1 100%;}
  .svc-meta-inline--date input{width:100%;}
  .svc-workdesk-meks{flex:1 1 100%; width:100%;}
  .svc-mek-picker.is-compact .svc-mek-search-wrap{flex:0 0 130px; width:130px;}
  .svc-workdesk-sum{flex-shrink:0; margin-top:0;}
  .modal-card.modal-card--svc-assign{
    width:100%; max-width:100%;
    height:min(92dvh, 720px); max-height:min(92dvh, 720px);
    border-radius:18px 18px 0 0;
  }
  .svc-assign-split{grid-template-columns:1fr; grid-template-rows:1fr auto;}
  .svc-assign-avail{min-height:0;}
  .svc-mek-picker.is-panel .svc-mek-suggest.svc-mek-grid{grid-template-columns:1fr;}
  .svc-assign-picked{max-height:140px;}
  .svc-assign-avail .svc-mek-search-wrap{max-width:none;}
  .svc-cart-table{font-size:12px;}
  .svc-cart-qty{width:52px;}
  .svc-cart-harga{width:100px;}
  .svc-cart-table thead th{font-size:10px; padding:6px 8px;}
  .svc-cart-table tbody td{padding:8px;}
  .svc-cart-qty input,
  .svc-cart-harga input{
    font-size:13px; padding:6px 8px; min-height:36px;
  }
  .modal.modal--fullscreen .modal-card--svc-work .modal-foot{
    flex-wrap:wrap; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .modal.modal--fullscreen .modal-card--svc-work .modal-foot .btn{
    flex:1 1 calc(50% - 4px); min-height:46px; font-size:13px;
  }
  .modal.modal--fullscreen .modal-card--svc-work .modal-foot .btn-primary{
    flex:1 1 100%; min-height:50px; font-size:14.5px; font-weight:700;
  }
  .svc-add-tab{padding:11px 8px;}
  .svc-add-submit{padding:13px 14px;}
  .svc-part-pick{max-height:min(40vh, 320px); min-height:140px;}
  .svc-actions-row .btn,
  .svc-actions-row .btn-primary,
  .svc-actions-row .btn-danger{flex:1; min-width:0; justify-content:center;}
  /* SDM mobile */
  body.view-is-karyawan .topbar h2,
  body.view-is-karyawan .topbar .meta,
  body.view-is-finance .topbar h2,
  body.view-is-finance .topbar .meta,
  body.view-is-organisasi .topbar h2,
  body.view-is-organisasi .topbar .meta,
  body.view-is-upah .topbar h2,
  body.view-is-upah .topbar .meta,
  body.view-is-absensi .topbar h2,
  body.view-is-absensi .topbar .meta,
  body.view-is-coaching .topbar h2,
  body.view-is-coaching .topbar .meta,
  body.view-is-payroll .topbar h2,
  body.view-is-payroll .topbar .meta{display:none;}
  body.view-is-karyawan .topbar,
  body.view-is-finance .topbar,
  body.view-is-organisasi .topbar,
  body.view-is-upah .topbar,
  body.view-is-absensi .topbar,
  body.view-is-coaching .topbar,
  body.view-is-payroll .topbar{margin-bottom:8px;}
  body.view-is-karyawan .menu-toggle,
  body.view-is-finance .menu-toggle,
  body.view-is-organisasi .menu-toggle,
  body.view-is-upah .menu-toggle,
  body.view-is-absensi .menu-toggle,
  body.view-is-coaching .menu-toggle,
  body.view-is-payroll .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  .hr-mob-only{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .hr-kicker{display:none;}
  .hr-title{font-size:clamp(22px, 6vw, 26px);}
  .hr-desc-mob{display:block; font-size:12.5px; margin-top:4px;}
  .hr-summary{grid-template-columns:1fr 1fr; gap:8px;}
  .hr-stat-main{grid-column:1 / -1;}
  .hr-stat-main .hr-stat-value{color:#FFFFFF; font-size:clamp(22px, 7vw, 28px);}
  .hr-stat-main .hr-stat-label{color:#F08A4B;}
  .hr-toolbar{flex-direction:column; align-items:stretch;}
  .hr-search{max-width:none; width:100%;}
  .hr-toolbar .btn-primary,
  .hr-toolbar .btn{width:100%; min-height:44px;}
  .hr-form{grid-template-columns:1fr;}
  .hr-card{flex-direction:column;}
  .hr-card-side{width:100%; flex-direction:row; align-items:center; justify-content:space-between;}

  /* Upah mobile */
  body.view-is-upah .topbar h2,
  body.view-is-upah .topbar .meta{display:none;}
  .upah-summary{grid-template-columns:1fr 1fr; gap:8px;}
  .upah-stat-main{grid-column:1 / -1;}
  .upah-stat{padding:10px 12px; border-radius:12px;}
  .upah-stat-value{font-size:clamp(14px, 4vw, 17px);}
  .upah-stat-main .upah-stat-value{font-size:clamp(18px, 5.5vw, 24px);}
  .upah-search{max-width:none; width:100%; height:44px;}
  .upah-search input{height:44px; border-radius:12px; font-size:14px;}
  .upah-table-wrap{display:none !important;}
  .upah-loan-form{grid-template-columns:1fr;}
  .upah-loan-btn label{display:none;}
  .upah-loan-btn .btn-primary{width:100%; min-height:44px;}
  .upah-form-cols{grid-template-columns:1fr;}
  .upah-form-grid{grid-template-columns:1fr;}
  .upah-span-2{grid-column:auto;}
  .upah-form-sec-head{flex-wrap:wrap;}
  .upah-form-sec-head span{text-align:left;}
  .upah-span-2{grid-column:auto;}

  .emp-desk-only{display:none !important;}
  .emp-add-btn{height:40px; padding:0 14px; flex:0 0 auto; width:auto;}
  body.view-is-karyawan .hr-toolbar .btn-primary{display:none !important;}
  body.view-is-karyawan .hr-toolbar{gap:8px;}
  .emp-tabs{display:none !important;}
  .emp-table-wrap{display:none !important;}
  .modal-card--emp{max-width:100%; max-height:92dvh;}
  .emp-form{gap:10px;}
  .emp-form-sec{padding:12px; border-radius:12px;}
  .emp-form-cols{grid-template-columns:1fr;}
  .emp-form-grid,
  .emp-form-grid-3,
  .emp-form-cols .emp-form-grid{grid-template-columns:1fr;}
  .emp-field-full,.emp-span-2,
  .emp-form-grid-3 .emp-span-2,
  .emp-form-cols .emp-span-2{grid-column:auto;}
  .emp-form-sec-head{flex-wrap:wrap;}
  .emp-form-sec-head span{text-align:left;}
  .emp-kv,
  .emp-kv--3{grid-template-columns:1fr;}
  .emp-detail-body{grid-template-columns:1fr;}
  .emp-detail-head{flex-direction:column;}
  .emp-detail-badges{justify-content:flex-start;}
  .att-name{width:110px;}
  .att-cell{width:26px; min-height:32px;}

  /* Payroll mobile: view-only, hanya filter */
  .pay-desk-only,
  .pay-actions{display:none !important;}
  .pay-tabs{width:100%;}
  .pay-tab{flex:1; text-align:center;}
  .pay-summary{grid-template-columns:1fr 1fr; gap:8px;}
  .pay-stat-main{grid-column:1 / -1;}
  .pay-stat{padding:10px 12px; border-radius:12px;}
  .pay-stat-value{font-size:clamp(14px, 4vw, 17px);}
  .pay-stat-main .pay-stat-value{font-size:clamp(18px, 5.5vw, 24px);}
  .pay-toolbar{flex-direction:column; align-items:stretch; gap:8px;}
  .pay-filters{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  body.view-is-payroll .pay-filters:not(:has(.pay-half-wrap:not(.is-hidden))){
    grid-template-columns:1fr;
  }
  .pay-field{width:100%;}
  .pay-field input,
  .pay-field select{width:100%; min-width:0; height:42px;}
  .pay-table-wrap{display:none !important;}
  .pay-form-grid,
  .pay-form-meta{grid-template-columns:1fr;}
  .pay-form-grid .pay-span-2{grid-column:auto;}

  /* Absensi mobile */
  .att-summary{grid-template-columns:1fr 1fr; gap:8px;}
  .att-stat-main{grid-column:1 / -1;}
  .att-stat{padding:10px 12px; border-radius:12px;}
  .att-stat-value{font-size:clamp(14px, 4vw, 17px);}
  .att-stat-main .att-stat-value{font-size:clamp(18px, 5.5vw, 24px);}
  .att-toolbar{flex-direction:row; align-items:flex-end; flex-wrap:wrap;}
  .att-field{flex:1 1 140px; min-width:0;}
  .att-field input{width:100%; min-width:0; height:42px;}
  .att-toolbar .btn-primary{height:42px; padding:0 14px; font-size:12.5px;}
  .att-name{width:148px;}
  .att-col-code{width:0; padding:0; border:0; overflow:hidden; font-size:0;}
  .att-col-nama{padding:8px;}
  .att-col-nama b{font-size:12px;}
  .att-col-nama i{font-size:10px;}
  .att-brush{padding:8px; gap:5px; border-radius:12px;}
  .att-brush-label{display:none;}
  .att-brush-btn{height:32px; padding:0 8px; border-radius:9px;}
  .att-brush-btn span{display:none;}
  .att-progress-h,.att-progress{width:96px; padding:5px 8px;}
  .att-progress b{font-size:12px;}
  .att-progress em{font-size:9px;}
  .att-cell{width:28px; min-height:40px; font-size:10px;}
  .att-wrap{max-height:min(62vh, 560px); border-radius:12px;}
  .att-hint{font-size:11.5px;}

  /* Order Barang mobile */
  body.view-is-barangmasuk .topbar h2,
  body.view-is-barangmasuk .topbar .meta{display:none;}
  body.view-is-barangmasuk .topbar{margin-bottom:8px;}
  body.view-is-barangmasuk .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-barangmasuk .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 100% -30px, rgba(232,99,28,.10), transparent 55%),
      radial-gradient(380px 180px at 0% -20px, rgba(15,158,150,.07), transparent 50%),
      var(--bg);
  }
  .po-mob-only{display:flex;}
  .po-head{margin-bottom:12px; align-items:flex-start;}
  .po-kicker{display:none;}
  .po-title{font-size:clamp(22px, 6vw, 26px);}
  .po-desc-mob{display:block; font-size:12.5px; margin-top:4px;}
  .po-steps-line{
    margin-bottom:12px; padding:9px 12px; gap:6px 8px;
    font-size:11.5px; border-radius:11px;
  }
  .po-steps-line b{width:18px; height:18px; font-size:10px;}
  .po-steps-sep{width:12px;}
  .po-flow{margin:0 0 10px;}
  .po-flow li{font-size:9.5px; padding:3px 7px;}

  .po-summary{grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
  .po-stat{padding:12px; border-radius:14px;}
  .po-stat-main{
    grid-column:1 / -1; padding:14px 16px; border-radius:16px;
    background-color:#0F1E1B !important;
    background-image:
      radial-gradient(220px 90px at 100% 0%, rgba(240,138,75,.22), transparent 55%),
      linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%) !important;
    color:#F8FAFC;
  }
  .po-stat-main .po-stat-label{color:#F08A4B;}
  .po-stat-main .po-stat-value{color:#FFFFFF; font-size:clamp(22px, 7vw, 28px);}
  .po-stat-main .po-stat-sub{color:rgba(248,250,252,.78);}
  .po-stat-label{font-size:10px; margin-bottom:5px;}
  .po-stat-value{font-size:clamp(16px, 4.5vw, 20px);}
  .po-stat-sub{font-size:11px;}

  .po-history-head{flex-direction:column; align-items:stretch; gap:10px;}
  .po-history-head .po-action-bar{
    width:100%; flex-direction:row; flex-wrap:nowrap;
  }
  .po-action-bar .btn,
  .po-action-bar .btn-primary{flex:1 1 0; width:auto;}
  .po-compose{padding:14px; border-radius:14px; margin-bottom:12px;}
  .po-form{grid-template-columns:1fr; gap:10px;}
  .po-line-builder{grid-template-columns:1fr 1fr; gap:8px;}
  .po-field-item{grid-column:1 / -1;}
  .po-field-add{grid-column:1 / -1;}
  .po-field-add .btn{width:100%; min-height:44px;}
  .po-field input,
  .po-field select{height:44px; font-size:14px;}
  .po-line-card{align-items:flex-start; flex-wrap:wrap;}
  .po-line-side{width:100%; justify-content:space-between;}
  .po-compose-foot{flex-direction:column; align-items:stretch;}
  .po-save-btn{width:100%; min-height:48px;}
  .po-sup-form-actions .btn,
  .po-sup-form-actions .btn-primary{width:100%; min-width:0;}

  .po-sup{border-radius:14px; margin-bottom:12px; padding:14px;}
  .po-sup-form{grid-template-columns:1fr;}
  .po-sup-card{flex-direction:column; gap:10px;}
  .po-sup-aksi{width:100%; justify-content:flex-end;}
  .po-sup-card .btn{width:100%;}

  .po-toolbar{flex-direction:column; align-items:stretch; gap:8px;}
  .po-tabs{
    width:100%; padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .po-tab{padding:9px 13px; font-size:12.5px;}
  .po-search{max-width:none; width:100%;}
  .po-search input{height:42px; border-radius:12px;}

  .po-desk-hint{display:none;}
  .po-mob-hint{display:block;}
  .po-desk-only{display:none !important;}
  .po-mob-only-list{display:flex !important;}

  .po-ticket{
    flex-direction:column; gap:10px; padding:12px; border-radius:14px;
  }
  .po-ticket:active{transform:scale(.985);}
  .po-ticket-top{margin-bottom:0;}
  .po-total{font-size:15px;}
  .po-col-act{
    width:100%; justify-content:flex-end; gap:6px;
  }
  .po-detail-meta{grid-template-columns:1fr;}
  .po-empty{padding:36px 14px; border-radius:14px;}

  /* Pelanggan mobile */
  body.view-is-pelanggan .topbar h2,
  body.view-is-pelanggan .topbar .meta{display:none;}
  body.view-is-pelanggan .topbar{margin-bottom:6px;}
  body.view-is-pelanggan .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-pelanggan .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 0% -30px, rgba(15,158,150,.07), transparent 55%),
      var(--bg);
  }
  .plg-mob-only{display:flex;}
  .plg-desk-only{display:none !important;}
  .plg-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:10px;
  }
  .plg-title{font-size:clamp(22px, 6vw, 26px);}
  .plg-desc{font-size:12px; margin-top:2px;}
  .plg-add-btn{
    flex:0 0 auto; height:40px; padding:0 14px; border-radius:11px;
  }
  .plg-summary{
    grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
  }
  .plg-stat-main{grid-column:1 / -1;}
  .plg-stat{padding:10px 12px; border-radius:12px;}
  .plg-stat-label{font-size:10px; margin-bottom:4px;}
  .plg-stat-value{font-size:clamp(15px, 4.2vw, 18px);}
  .plg-stat-main .plg-stat-value{font-size:clamp(20px, 6vw, 26px);}
  .plg-toolbar{margin-bottom:10px;}
  .plg-search{width:100%; height:44px; flex:1 1 auto;}
  .plg-search input{height:44px; font-size:14px; border-radius:12px;}
  .plg-table-wrap{display:none !important;}
  .plg-cards{gap:10px;}
  .plg-card{padding:12px; border-radius:14px;}
  .plg-card .plg-name{font-size:16px;}
  .plg-empty{padding:32px 14px; border-radius:14px; font-size:13px;}
  .plg-id-card{width:min(324px, 92vw); max-width:100%;}

  /* Stok mobile */
  body.view-is-stok .topbar h2,
  body.view-is-stok .topbar .meta{display:none;}
  body.view-is-stok .topbar{margin-bottom:6px;}
  body.view-is-stok .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-stok .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 0% -30px, rgba(15,158,150,.07), transparent 55%),
      var(--bg);
  }
  .stk-mob-only{display:flex;}
  .stk-desk-only{display:none !important;}
  .stk-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:10px;
  }
  .stk-head-text{min-width:0;}
  .stk-title{font-size:clamp(22px, 6vw, 26px);}
  .stk-desc{font-size:12px; margin-top:2px;}
  .stk-print-btn{
    flex:0 0 auto; width:auto; height:40px; padding:0 14px;
    border-radius:11px; font-size:13px; font-weight:700;
  }

  .stk-filters{
    flex-direction:column; align-items:stretch; gap:8px;
    margin-bottom:10px; padding:10px; border-radius:14px;
    background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  }
  .stk-modes{
    width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
    background:#E8F1EF; border-radius:11px; padding:3px;
  }
  .stk-mode{
    flex:none; text-align:center; border:0; background:transparent;
    border-radius:9px; padding:9px 6px; font-size:12.5px; color:var(--ink-soft);
  }
  .stk-mode.active{
    background:#fff; color:var(--ink);
    box-shadow:0 1px 3px rgba(15,23,42,.12);
  }
  .stk-period-controls{
    margin-left:0; width:100%; gap:8px;
  }
  .stk-date-wrap{
    width:100%; display:flex; flex-direction:column; align-items:stretch; gap:4px;
  }
  .stk-date-wrap#stk-wrap-range{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .stk-date-wrap#stk-wrap-range.is-hidden{display:none !important;}
  .stk-range-field{
    display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0;
  }
  .stk-period-label{font-size:10px;}
  .stk-input{
    width:100%; height:40px; flex:none; min-width:0;
    font-size:14px; border-radius:10px;
  }
  .stk-period-text{
    width:100%; font-size:11.5px; color:var(--ink-faint);
    white-space:normal; line-height:1.35;
  }

  .stk-moving-summary{
    display:flex; grid-template-columns:none; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 -4px 10px; padding:2px 4px 8px;
    scrollbar-width:none;
  }
  .stk-moving-summary::-webkit-scrollbar{display:none;}
  .stk-mov-stat{
    flex:0 0 auto; min-width:76px; padding:8px 12px; border-radius:12px;
    flex-direction:column; gap:2px;
  }
  .stk-mov-stat:first-child{min-width:70px;}
  .stk-mov-full{display:none;}
  .stk-mov-short{display:inline;}
  .stk-mov-label{font-size:10px;}
  .stk-mov-stat b{font-size:15px;}

  .stk-summary{
    grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
  }
  .stk-stat{padding:10px 12px; border-radius:12px;}
  .stk-stat-label{font-size:10px; margin-bottom:4px;}
  .stk-stat-value{font-size:clamp(14px, 4vw, 17px);}

  .stk-toolbar{margin-bottom:10px;}
  .stk-search{width:100%; height:44px;}
  .stk-search input{height:44px; font-size:14px; border-radius:12px;}
  .stk-table-wrap{display:none !important;}

  .stk-list{gap:10px;}
  .stk-card{padding:12px; border-radius:14px;}
  .stk-card-stok .stk-stok-val{font-size:20px;}
  .stk-card-grid{
    grid-template-columns:repeat(4,1fr); gap:6px;
  }
  .stk-card-grid-5{grid-template-columns:repeat(3,1fr);}
  .stk-card-grid span{font-size:9.5px;}
  .stk-card-grid b{font-size:12px;}
  .stk-empty{padding:32px 14px; border-radius:14px; font-size:13px;}

  /* Master Barang mobile */
  body.view-is-masterbarang .topbar h2,
  body.view-is-masterbarang .topbar .meta{display:none;}
  body.view-is-masterbarang .topbar{margin-bottom:8px;}
  body.view-is-masterbarang .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  .mb-mob-only{display:flex;}
  .mb-desk-only{display:none !important;}
  .mb-summary{grid-template-columns:1fr 1fr; gap:8px;}
  .mb-stat:first-child{grid-column:1 / -1;}
  .mb-stat{padding:12px; border-radius:12px;}
  .mb-stat-value{font-size:clamp(16px, 4.5vw, 20px);}
  .mb-toolbar{margin-bottom:8px; flex-direction:column; align-items:stretch; gap:8px; overflow:visible;}
  .mb-search{max-width:none; width:100%; height:42px;}
  .mb-search input{height:42px; border-radius:12px;}
  .mb-toolbar-actions{width:100%; overflow:visible;}
  /* Di mobile: Excel lewat tombol header + modal — sembunyikan dropdown toolbar */
  .mb-toolbar-actions .mb-excel{display:none;}
  .mb-toolbar-actions .btn,
  .mb-toolbar-actions .btn-primary{flex:1; min-height:44px;}
  .mb-btn-add,
  .mb-btn-markup{min-width:0;}
  .mb-excel-menu{
    position:fixed; left:12px; right:12px; top:auto; bottom:12px;
    min-width:0; z-index:80;
  }
  .mb-table-wrap{display:none !important;}
  .mb-form-grid,
  .mb-form-grid--3,
  .mb-form-grid--price{grid-template-columns:1fr;}
  .mb-form-grid .mb-span-2{grid-column:auto;}
  .mb-form-top{grid-template-columns:1fr;}
  .mb-form-cols{grid-template-columns:1fr;}
  .mb-form .item-foto-form{
    flex-direction:row; align-items:center; gap:12px; padding:12px;
  }
  .mb-form .item-foto-preview{width:88px; height:88px; flex-shrink:0;}
  .mb-form .item-foto-form-actions{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .mb-form .item-foto-form-actions .btn{width:auto;}
  .mb-form-sec-head{flex-direction:column; align-items:flex-start; gap:4px;}
  .mb-form-sec-head span{text-align:left; max-width:none;}
  .modal-card--mb{max-width:100%; max-height:92dvh;}
  .modal-card--mb .modal-body{overflow:auto;}
  .mb-mk-fill{flex-wrap:wrap;}
  .mb-mk-fill .mb-pct{width:88px; flex-basis:88px;}
  .mb-mk-row{padding:10px;}
  .mb-mk-row .mb-pct{width:88px; flex-basis:88px;}

  /* Piutang mobile */
  body.view-is-piutang .topbar h2,
  body.view-is-piutang .topbar .meta{display:none;}
  body.view-is-piutang .topbar{margin-bottom:8px;}
  body.view-is-piutang .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-piutang .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 0% -30px, rgba(15,158,150,.08), transparent 55%),
      var(--bg);
  }
  .ptg-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
  .ptg-kicker{display:none;}
  .ptg-title{font-size:clamp(22px, 6vw, 26px);}
  .ptg-desc-mob{display:block; font-size:12.5px; margin-top:4px;}
  .ptg-summary{
    grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
  }
  .ptg-stat{padding:12px; border-radius:14px;}
  .ptg-stat-main{grid-column:1 / -1;}
  .ptg-stat-main .ptg-stat-value{font-size:clamp(22px, 7vw, 28px);}
  .ptg-stat-label{font-size:10px; margin-bottom:6px;}
  .ptg-stat-value{font-size:clamp(16px, 4.5vw, 20px);}
  .ptg-stat-sub{font-size:11px; margin-top:4px;}
  .ptg-toolbar{
    flex-direction:column; align-items:stretch; gap:8px; margin-bottom:8px;
  }
  .ptg-tabs{
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px;
  }
  .ptg-tabs::-webkit-scrollbar{display:none;}
  .ptg-tab{
    flex:0 0 auto; border-radius:999px; padding:8px 12px; white-space:nowrap;
  }
  .ptg-search{max-width:none; width:100%; height:42px;}
  .ptg-search input{
    height:42px; border-radius:12px; padding:0 12px 0 36px !important;
  }
  .ptg-add-manual{
    width:auto; max-width:max-content; align-self:flex-end; height:42px;
  }
  .ptg-table-wrap{display:none !important;}
  .ptg-list{gap:6px;}
  .ptg-ticket{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:10px 12px; border-radius:12px; position:relative;
  }
  .ptg-ticket:hover{background:#fff;}
  .ptg-ticket:active{transform:scale(.985);}
  .ptg-col-nota{order:1; margin-bottom:2px;}
  .ptg-col-cust{order:2;}
  .ptg-col-tel{order:3; margin-top:2px;}
  .ptg-col-src{display:none;}
  .ptg-col-tempo{order:4; margin-top:4px;}
  .ptg-col-total{
    order:1; position:absolute; right:12px; top:10px; text-align:right;
  }
  .ptg-col-stat{order:5; justify-content:flex-start; margin-top:8px;}
  .ptg-col-act{
    order:5; position:absolute; right:12px; bottom:10px;
    margin:0; justify-content:flex-end;
  }
  .ptg-nota{font-size:12.5px; padding-right:110px;}
  .ptg-sumber-pill{display:inline-block;}
  .ptg-name{font-size:13.5px; line-height:1.2;}
  .ptg-tel{font-size:11px; gap:4px;}
  .ptg-tempo{font-size:11.5px;}
  .ptg-tempo-hint{
    display:block; margin-top:1px; font-size:10.5px; font-weight:700; color:var(--red);
  }
  .ptg-total{font-size:13.5px;}
  .ptg-lunas-btn{
    min-height:36px; padding:8px 12px; border-radius:10px; font-size:12.5px;
  }
  .ptg-empty{padding:36px 14px; border-radius:14px;}

  /* Laporan mobile — pantauan analitik */
  body.view-is-laporan .topbar h2,
  body.view-is-laporan .topbar .meta{display:none;}
  body.view-is-laporan .topbar{margin-bottom:8px;}
  body.view-is-laporan .menu-toggle{
    margin-bottom:0; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm);
  }
  body.view-is-laporan .main{
    padding-top:10px;
    background:
      radial-gradient(420px 200px at 100% -30px, rgba(232,99,28,.10), transparent 55%),
      radial-gradient(380px 180px at 0% -20px, rgba(15,158,150,.07), transparent 50%),
      var(--bg);
  }
  .lap-head.lap-mob-only{display:flex;}
  .lap-head{
    margin-bottom:12px; align-items:flex-start; padding:2px 0;
  }
  .lap-kicker{display:none;}
  .lap-title{font-size:clamp(22px, 6vw, 26px);}
  .lap-desc-mob{display:block; font-size:12.5px; margin-top:4px;}
  .lap-print-btn{
    margin-top:2px; padding:9px 12px; font-size:12.5px; border-radius:11px;
    min-height:40px;
  }
  .lap-print-desk{display:none !important;}

  .lap-filters{margin-bottom:12px;}
  .lap-period{
    flex-direction:column; align-items:stretch; gap:8px; margin-bottom:8px;
  }
  .lap-modes{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
    width:100%; padding:4px; border-radius:14px;
    background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  }
  .lap-mode{
    text-align:center; border:none; border-radius:10px;
    padding:10px 4px; font-size:12px; background:transparent;
  }
  .lap-mode.active{box-shadow:0 1px 2px rgba(15,23,42,.12);}

  .lap-period-controls{
    margin-left:0; width:100%; flex-direction:column; align-items:stretch; gap:8px;
  }
  .lap-date-wrap{
    flex-direction:column; align-items:stretch; gap:6px; width:100%;
    padding:10px 12px; border-radius:14px;
    background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  }
  .lap-date-wrap.is-hidden,
  .lap-date-wrap[hidden]{display:none !important;}
  .lap-date-row{width:100%;}
  .lap-date-row .lap-input{flex:1; min-width:0; height:42px;}
  .lap-input{width:100%; height:42px; border-radius:11px; font-size:14px;}
  .lap-week-nav{width:42px; height:42px; border-radius:11px; font-size:20px; flex-shrink:0;}

  .lap-period-meta{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%;
  }
  .lap-period-text{
    flex:1; min-width:0; white-space:normal; line-height:1.35;
    font-size:12.5px; font-weight:700; color:var(--ink);
    padding:10px 12px; border-radius:12px;
    background:rgba(27,36,48,.04); border:1px solid var(--line);
  }

  .lap-tabs{
    position:sticky; top:0; z-index:6; margin:0 -2px 12px;
    padding:8px 2px; gap:6px;
    background:linear-gradient(180deg, var(--bg) 70%, transparent);
  }
  .lap-tab{
    padding:9px 13px; font-size:12.5px; border-radius:999px;
    box-shadow:var(--shadow-sm);
  }
  .lap-tab.active{box-shadow:0 2px 8px rgba(27,36,48,.18);}

  .lap-summary{grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
  .lap-stat{padding:12px; border-radius:14px;}
  .lap-stat.main{
    grid-column:1 / -1; padding:14px 16px; border-radius:16px;
    background-color:#0F1E1B !important;
    background-image:
      radial-gradient(220px 90px at 100% 0%, rgba(232,99,28,.28), transparent 55%),
      linear-gradient(135deg, #0F1E1B 0%, #1A3D38 100%) !important;
    color:#F8FAFC;
  }
  .lap-stat.main .lap-stat-label{color:#F08A4B;}
  .lap-stat.main .lap-stat-value{
    font-size:clamp(22px, 7vw, 28px);
    color:#FFFFFF;
  }
  .lap-stat.main .lap-stat-sub{color:rgba(248,250,252,.78);}
  .lap-stat-label{font-size:10px; margin-bottom:5px;}
  .lap-stat-value{font-size:clamp(15px, 4.5vw, 18px);}
  .lap-stat-sub{font-size:11px; margin-top:3px;}
  /* Mode bulan/tahun: picker sudah cukup — sembunyikan label periode dobel */
  .lap-period-text.is-dup{display:none !important;}

  .lap-body{gap:10px;}
  .lap-panel{border-radius:14px;}
  .lap-panel-head{
    flex-direction:column; align-items:flex-start; gap:2px;
    padding:12px 14px 10px;
  }
  .lap-panel-head h4{font-size:13.5px;}
  .lap-panel-body{padding:10px 12px 12px;}

  .lap-aging{grid-template-columns:1fr 1fr; gap:8px;}
  .lap-aging-item{padding:10px; border-radius:12px;}
  .lap-aging-val{font-size:14px;}
  .lap-kv{grid-template-columns:1fr; gap:8px;}
  .lap-exp-form{grid-template-columns:1fr 1fr; gap:8px;}
  .lap-exp-form #lap-exp-add{grid-column:1 / -1; min-height:44px;}
  .lap-exp-form select,
  .lap-exp-form input{min-height:44px; width:100%;}

  /* Tabel → kartu baris di mobile */
  .lap-table-wrap{overflow:visible;}
  .lap-table,
  .lap-table tbody{display:block; width:100%;}
  .lap-table thead{display:none;}
  .lap-table tr{
    display:block; margin-bottom:8px; padding:10px 12px;
    background:#fff; border:1px solid var(--line); border-radius:12px;
  }
  .lap-table tr:last-child{margin-bottom:0;}
  .lap-table tr:active{transform:scale(.99);}
  .lap-table td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    padding:7px 0; border-bottom:1px solid #E8F1EF; font-size:13px;
  }
  .lap-table td:last-child{border-bottom:0; padding-bottom:0;}
  .lap-table td:first-child{padding-top:0;}
  .lap-table td::before{
    content:attr(data-label);
    flex:0 0 34%; max-width:110px;
    font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-faint); line-height:1.3; padding-top:2px;
  }
  .lap-table td > *{text-align:right;}
  .lap-table td.mono{justify-content:space-between; text-align:right;}
  .lap-empty{padding:32px 14px; border-radius:12px; background:var(--bg-soft);}
}

@media (max-width:380px){
  #view-dashboard .stat-card, #view-dashboard_owner .stat-card .value{font-size:14px;}
  #view-dashboard .debt-card, #view-dashboard_owner .debt-card .value{font-size:14px;}
  #view-dashboard .stat-featured, #view-dashboard_owner .stat-featured .value{font-size:24px;}
  #view-kasir .kasir-dock-label{font-size:12.5px;}
  #view-riwayat .m-rw-amount{font-size:13.5px;}
  .svc-tabs{grid-template-columns:1fr 1fr;}
  body.view-is-laporan .lap-mode{font-size:11px; padding:9px 2px;}
  body.view-is-laporan .lap-period-text{font-size:11.5px;}
  body.view-is-laporan .lap-stat.main .lap-stat-value{font-size:22px;}
}

/* ===== Stok Opname (gaya sama Stok / Karyawan) ===== */
#view-stokopname .is-hidden{display:none!important;}
#view-stokopname .opn-panel{width:100%;}
.opn-status-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
#view-stokopname .stk-toolbar .btn-primary{
  width:auto; min-width:96px; flex:0 0 auto;
}
.opn-head-row{display:flex; align-items:flex-start; gap:10px; width:100%;}
.opn-detail-titles{flex:1; min-width:0;}
.opn-select-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:12px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:13px; color:var(--ink-soft);
}
.opn-select-actions{display:flex; align-items:center; gap:10px;}
.opn-select-count{font-weight:600; color:var(--ink);}
.opn-check{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.opn-link{
  background:none; border:0; padding:0; color:#0D7370; font-weight:600; cursor:pointer; font:inherit;
}
.opn-link:hover{text-decoration:underline;}
.opn-td-act{white-space:nowrap;}
.opn-td-act .ico-btn{margin:0 2px;}
.opn-desk-only{display:block;}
.opn-mob-only{display:none;}
.opn-create-box{max-width:560px;}
.opn-create-form{margin-top:0;}
.opn-preview{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:#F8FAFC; border:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}
.opn-create-actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:14px;
}
.opn-detail-actions{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center;
}
.opn-save-hint{margin-left:auto; font-size:12.5px; color:#0F9E96; font-weight:600;}
.opn-qty,.opn-ket{
  width:100%; max-width:96px; height:36px;
  border:1px solid var(--line); border-radius:10px; padding:0 8px;
  background:#fff; font:inherit; font-size:13px;
}
.opn-ket{max-width:140px;}
.opn-qty-mob,.opn-ket-mob{
  max-width:none; width:100%; height:40px; margin-top:4px;
}
#view-stokopname .is-var,
#view-stokopname .is-minus{color:#BE123C; font-weight:700;}
#view-stokopname .is-plus{color:#0D7370; font-weight:700;}
.opn-card-open{
  display:block; width:100%; background:none; border:0; padding:0;
  text-align:left; cursor:pointer; font:inherit; color:inherit;
}
.opn-card-check{margin-bottom:8px;}
.opn-card-acts{display:flex; gap:4px;}
#view-stokopname .hr-card-main{min-width:0; flex:1;}

@media (max-width:800px){
  body.view-is-stokopname .topbar h2,
  body.view-is-stokopname .topbar .meta{display:none;}
  body.view-is-stokopname .topbar{margin-bottom:8px;}
  .opn-status-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .opn-desk-only{display:none!important;}
  .opn-mob-only{display:flex; flex-direction:column; gap:8px;}
  #view-stokopname .stk-toolbar{align-items:stretch;}
  #view-stokopname .stk-search{flex:1 1 100%; max-width:none;}
  #view-stokopname .stk-date-wrap{width:100%;}
  #view-stokopname .stk-input{flex:1; width:100%;}
  .opn-create-box{max-width:none;}
  .opn-create-form{grid-template-columns:1fr;}
  .opn-create-actions{flex-direction:column-reverse;}
  .opn-create-actions .btn,
  .opn-create-actions .btn-primary{width:100%; min-height:44px;}
  .opn-detail-actions .btn,
  .opn-detail-actions .btn-primary{flex:1; min-height:44px;}
  .opn-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
}

/* ── Struktur Organisasi (kanvas penuh) ── */
@media (min-width:801px){
  body.view-is-organisasi .main{
    display:flex; flex-direction:column;
    height:100vh; max-height:100vh; overflow:hidden;
    padding-top:18px; padding-bottom:14px;
  }
  body.view-is-organisasi .topbar{margin-bottom:10px; flex-shrink:0;}
  body.view-is-organisasi .content{
    flex:1; min-height:0; display:flex; flex-direction:column;
  }
  #view-organisasi.view.active{
    display:flex; flex-direction:column; flex:1; min-height:0; height:100%;
    animation:none;
  }
}
#view-organisasi.view.active{
  display:flex; flex-direction:column; flex:1; min-height:0;
}
#view-organisasi .hr-head{flex-shrink:0;}

.org-panel{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(240,138,75,.10), transparent 52%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(15,158,150,.07), transparent 50%),
    linear-gradient(165deg, #F4F7FA 0%, #FFFFFF 45%, #F0F7F5 100%);
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  padding:10px;
  box-shadow:0 1px 2px rgba(27,36,48,.04), 0 16px 40px -24px rgba(27,36,48,.18);
  overflow:hidden;
}
.org-canvas-toolbar{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  padding:2px 6px 10px;
}
.org-canvas-hint{
  font-size:12px; color:var(--ink-faint); font-weight:500; line-height:1.4;
}
.org-canvas-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.org-btn{
  font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:999px;
  border:1px solid #E2E8F0; background:#fff; color:#3D4F4B;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.org-btn:hover{background:#F8FAFC; border-color:#CBD5E1; color:#0F1E1B;}
.org-btn:active{transform:translateY(1px);}
.org-btn-pdf{
  background:linear-gradient(135deg,#0F1E1B,#1A3D38); color:#F08A4B;
  border-color:transparent;
}
.org-btn-pdf:hover{
  background:linear-gradient(135deg,#173330,#0F1E1B); color:#FFD4A8; border-color:transparent;
}
.org-zoom-group{
  display:flex; align-items:center; gap:2px;
  border:1px solid #E2E8F0; border-radius:999px; padding:2px; background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.org-zoom-group .org-btn{
  border:none; box-shadow:none; width:30px; padding:5px 0; text-align:center;
}
.org-zoom-label{
  font-size:11px; font-weight:700; color:#64748B;
  min-width:44px; text-align:center; font-variant-numeric:tabular-nums;
}

.org-viewport{
  flex:1 1 auto; min-height:360px;
  overflow:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  border-radius:14px;
  background:
    linear-gradient(rgba(148,163,184,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.09) 1px, transparent 1px),
    linear-gradient(180deg, #FBFDFF 0%, #F8FAFC 100%);
  background-size:28px 28px, 28px 28px, auto;
  position:relative;
  border:1px solid rgba(226,232,240,.7);
}
.org-viewport.is-panning{cursor:grabbing; user-select:none;}
.org-stage{position:relative; margin:0;}
.org-inner{position:relative; transform-origin:top left;}
.org-svg{
  position:absolute; top:0; left:0;
  pointer-events:none; overflow:visible;
  width:100%; height:100%;
}
.org-edge{
  fill:none; stroke:#7C908A; stroke-width:2; stroke-linecap:round; opacity:.92;
}
.org-edge--root{
  stroke:#E8631C; stroke-width:2.4; opacity:1;
}

.org-unit{
  position:absolute; box-sizing:border-box;
  cursor:grab; user-select:none; touch-action:none;
}
.org-unit.is-dragging{
  z-index:50; cursor:grabbing;
  filter:drop-shadow(0 14px 24px rgba(27,36,48,.22));
}
.org-card{
  --org-accent:#0F9E96;
  --org-soft:rgba(15,158,150,.10);
  --org-border:rgba(15,158,150,.28);
  --org-role:#0D7370;
  position:relative;
  text-align:center;
  width:100%; box-sizing:border-box;
  padding:14px 12px 12px;
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFCFB 100%);
  border:1px solid var(--org-border);
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 2px 4px rgba(27,36,48,.04),
    0 10px 24px -12px rgba(27,36,48,.16);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.org-unit:hover .org-card{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 6px 12px rgba(27,36,48,.06),
    0 18px 36px -14px rgba(27,36,48,.2);
}
.org-card-accent{
  position:absolute; top:0; left:14px; right:14px; height:3.5px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(90deg, var(--org-accent), color-mix(in srgb, var(--org-accent) 55%, #fff));
}
.org-avatar{
  width:44px; height:44px; margin:2px auto 8px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg, #0F1E1B, #1A3D38);
  color:#F08A4B;
  font-size:14px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(27,36,48,.18);
  border:2px solid rgba(255,255,255,.12);
}
.org-card-name{
  font-size:13.5px; font-weight:750; color:#0F172A;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25; letter-spacing:-.01em;
}
.org-card-role{
  margin-top:4px;
  display:inline-block;
  max-width:100%;
  font-size:10.5px; font-weight:750; letter-spacing:.04em; text-transform:uppercase;
  color:var(--org-role);
  background:var(--org-soft);
  border-radius:999px;
  padding:3px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-card-meta{
  margin-top:7px;
  font-size:11px; color:#64748B; font-weight:600;
}

/* Tone per jabatan — warna jelas beda */
.org-card.tone-owner{
  --org-accent:#E8631C; --org-soft:rgba(240,138,75,.18); --org-border:rgba(232,99,28,.45); --org-role:#9A3412;
  background:linear-gradient(165deg, #FFFFFF 0%, #FFF4ED 100%);
}
.org-card.tone-owner .org-avatar{
  background:linear-gradient(145deg, #0F1E1B, #3D2818);
  color:#F08A4B;
  width:48px; height:48px; font-size:15px;
}
.org-card.tone-managerial{
  --org-accent:#0F1E1B; --org-soft:rgba(15,30,27,.10); --org-border:rgba(15,30,27,.35); --org-role:#0F1E1B;
  background:linear-gradient(165deg, #FFFFFF 0%, #E8F1EF 100%);
}
.org-card.tone-managerial .org-avatar{
  background:linear-gradient(145deg, #0F1E1B, #173330); color:#F08A4B;
}
.org-card.tone-admin{
  --org-accent:#475569; --org-soft:rgba(71,85,105,.12); --org-border:rgba(71,85,105,.32); --org-role:#334155;
  background:linear-gradient(165deg, #FFFFFF 0%, #F1F5F9 100%);
}
.org-card.tone-admin .org-avatar{background:linear-gradient(145deg, #0F1E1B, #475569); color:#E2E8F0;}
.org-card.tone-kasir-lead,
.org-card.tone-kasir{
  --org-accent:#EA580C; --org-soft:rgba(234,88,12,.12); --org-border:rgba(234,88,12,.32); --org-role:#C2410C;
  background:linear-gradient(165deg, #FFFFFF 0%, #FFF7ED 100%);
}
.org-card.tone-kasir-lead .org-avatar,
.org-card.tone-kasir .org-avatar{background:linear-gradient(145deg, #9A3412, #EA580C); color:#FFF7ED;}
.org-card.tone-gudang-lead,
.org-card.tone-gudang{
  --org-accent:#0284C7; --org-soft:rgba(2,132,199,.12); --org-border:rgba(2,132,199,.32); --org-role:#0369A1;
  background:linear-gradient(165deg, #FFFFFF 0%, #F0F9FF 100%);
}
.org-card.tone-gudang-lead .org-avatar,
.org-card.tone-gudang .org-avatar{background:linear-gradient(145deg, #0C4A6E, #0284C7); color:#E0F2FE;}
.org-card.tone-mek-lead,
.org-card.tone-supervisor{
  --org-accent:#0F9E96; --org-soft:rgba(15,158,150,.14); --org-border:rgba(15,158,150,.36); --org-role:#0D7370;
  background:linear-gradient(165deg, #FFFFFF 0%, #EEF8F7 100%);
}
.org-card.tone-mek-lead .org-avatar,
.org-card.tone-supervisor .org-avatar{
  background:linear-gradient(145deg, #0F1E1B, #0F9E96); color:#E6F5F4;
}
.org-card.tone-mekanik{
  --org-accent:#059669; --org-soft:rgba(5,150,105,.12); --org-border:rgba(5,150,105,.30); --org-role:#047857;
  background:linear-gradient(165deg, #FFFFFF 0%, #ECFDF5 100%);
}
.org-card.tone-mekanik .org-avatar{background:linear-gradient(145deg, #064E3B, #059669); color:#ECFDF5;}
.org-card.tone-vendor{
  --org-accent:#B45309; --org-soft:rgba(180,83,9,.14); --org-border:rgba(180,83,9,.42); --org-role:#92400E;
  background:linear-gradient(165deg, #FFFFFF 0%, #FFF7ED 55%, #FFEDD5 100%);
  border-style:dashed;
}
.org-card.tone-vendor .org-avatar{
  background:linear-gradient(145deg, #7C2D12, #EA580C); color:#FFF7ED;
}
.org-card.tone-vendor .org-card-role{
  background:rgba(234,88,12,.14); color:#9A3412;
}
.org-card.tone-helper{
  --org-accent:#D97706; --org-soft:rgba(217,119,6,.12); --org-border:rgba(217,119,6,.30); --org-role:#B45309;
  background:linear-gradient(165deg, #FFFFFF 0%, #FFFBEB 100%);
}
.org-card.tone-helper .org-avatar{
  background:linear-gradient(145deg, #78350F, #D97706); color:#FFFBEB;
}
.org-card.tone-advisor{
  --org-accent:#0D9488; --org-soft:rgba(13,148,136,.12); --org-border:rgba(13,148,136,.30); --org-role:#0F766E;
  background:linear-gradient(165deg, #FFFFFF 0%, #F0FDFA 100%);
}
.org-card.tone-advisor .org-avatar{
  background:linear-gradient(145deg, #115E59, #0D9488); color:#F0FDFA;
}
.org-card.tone-support,
.org-card.tone-staff{
  --org-accent:#64748B; --org-soft:rgba(100,116,139,.12); --org-border:rgba(100,116,139,.28); --org-role:#475569;
  background:linear-gradient(165deg, #FFFFFF 0%, #F8FAFC 100%);
}
.org-card.tone-support .org-avatar,
.org-card.tone-staff .org-avatar{
  background:linear-gradient(145deg, #334155, #64748B); color:#F1F5F9;
}

@media (max-width:800px){
  body.view-is-organisasi .main{
    display:flex; flex-direction:column;
    min-height:100dvh; height:100dvh; max-height:100dvh;
    overflow:hidden; padding:10px 12px 12px;
  }
  body.view-is-organisasi .content{
    flex:1; min-height:0; display:flex; flex-direction:column;
  }
  body.view-is-organisasi .topbar{margin-bottom:6px; flex-shrink:0;}
  #view-organisasi.view.active{
    display:flex; flex-direction:column; flex:1; min-height:0; height:100%;
    animation:none;
  }
  #view-organisasi .hr-head{margin-bottom:8px;}
  .org-panel{
    flex:1 1 auto; min-height:0;
    border-radius:14px; padding:8px;
  }
  .org-viewport{
    flex:1 1 auto;
    min-height:0;
    border-radius:12px;
    background-size:22px 22px, 22px 22px, auto;
  }
  .org-canvas-toolbar{
    padding:0 2px 8px; gap:6px;
  }
  .org-canvas-hint{
    font-size:11px;
    flex:1 1 100%;
    order:2;
  }
  .org-canvas-actions{
    width:100%;
    justify-content:space-between;
  }
  .org-btn{min-height:36px; padding:7px 12px;}
  .org-zoom-group .org-btn{min-height:32px; width:34px;}
  .org-card{padding:10px 8px 9px; border-radius:14px;}
  .org-avatar{width:36px; height:36px; font-size:12px; margin-bottom:5px; border-radius:11px;}
  .org-card.tone-owner .org-avatar{width:40px; height:40px; font-size:13px;}
  .org-card-name{font-size:12px;}
  .org-card-role{font-size:9.5px; padding:2px 6px;}
  .org-card-meta{font-size:10px; margin-top:5px;}
  .org-unit:hover .org-card{transform:none;}
}

/* ── Finance ── */
.audit-meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px 16px;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-soft); line-height:1.4; flex-wrap:wrap;
}
.audit-meta-item{display:flex; flex-direction:column; gap:2px; min-width:0;}
.audit-meta-right{text-align:right; margin-left:auto;}
.audit-meta-label{font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-faint);}
.audit-meta-val{color:var(--ink-soft);}
.audit-meta b{color:var(--ink); font-weight:700;}
.rw-by,.m-rw-audit{font-size:11px; color:var(--ink-faint); margin-top:2px; font-weight:500;}
.po-sup-card .audit-meta{margin-top:8px; padding-top:8px;}
@media (max-width:520px){
  .audit-meta{flex-direction:column; gap:8px;}
  .audit-meta-right{text-align:left; margin-left:0;}
}

.fin-note{
  margin:0 0 12px; font-size:12.5px; color:var(--ink-faint); font-weight:500; line-height:1.45;
}
.fin-note b{color:var(--ink-soft);}
.fin-tabs{margin-bottom:12px;}
.fin-toolbar{margin-bottom:12px;}
.fin-date{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-faint);
}
.fin-date .stk-input{height:42px;}
.fin-toolbar .btn-primary,
.fin-add-desk{width:auto; min-width:110px; height:42px; padding:0 16px; border-radius:11px;}
.fin-form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.fin-field-full{grid-column:1 / -1;}
.fin-list{margin-top:4px;}
.fin-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  overflow-x:auto; box-shadow:var(--shadow-sm);
}
.fin-table{width:100%; border-collapse:collapse; font-size:13px;}
.fin-table th{
  text-align:left; padding:10px 12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
  border-bottom:1px solid var(--line); background:#F8FAFC;
}
.fin-table td{padding:11px 12px; border-bottom:1px solid #E8F1EF; vertical-align:middle;}
.fin-table tr:last-child td{border-bottom:0;}
.fin-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.fin-th-aksi,.fin-td-aksi{width:120px; text-align:right;}
.fin-aksi,.fin-card-aksi{display:flex; gap:4px; justify-content:flex-end;}
.fin-cards{display:flex; flex-direction:column; gap:10px;}
.fin-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px; box-shadow:var(--shadow-sm);
}
.fin-card.tone-bank{border-left:3px solid #0284C7;}
.fin-card-top{display:flex; justify-content:space-between; gap:10px;}
.fin-card-date{font-size:11px; color:var(--ink-faint); font-weight:600;}
.fin-card-title{font-size:15px; font-weight:750; color:var(--ink); margin-top:2px;}
.fin-card-sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.fin-card-amt{font-size:16px; font-weight:800; color:#0F172A; white-space:nowrap;}
.fin-card-meta{
  margin-top:8px; display:flex; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--ink-faint); font-weight:600;
}
.fin-card-aksi{margin-top:10px;}
.fin-att-flag{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700; color:var(--teal);
  background:var(--teal-bg); border:1px solid #B7E0D8;
  border-radius:999px; padding:2px 8px;
}
.fin-att-miss{color:#7C908A; font-weight:600; font-size:12px;}
.fin-detail{display:flex; flex-direction:column; gap:14px;}
.fin-kv{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.fin-kv > div{
  background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px; padding:10px 12px;
}
.fin-kv span{display:block; font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.fin-kv b{display:block; margin-top:4px; font-size:14px; color:var(--ink);}
.fin-kv-full{grid-column:1 / -1;}
.fin-att-sec{
  border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff;
}
.fin-att-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.fin-att-hint{margin-left:8px; font-size:12px; color:var(--ink-faint); font-weight:600;}
.fin-att-empty{
  text-align:center; padding:20px; color:var(--ink-faint); font-size:13px;
  border:1px dashed var(--line); border-radius:12px;
}
.fin-att-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px;
}
.fin-att-item{margin:0; display:flex; flex-direction:column; gap:6px;}
.fin-att-thumb{
  display:block; width:100%; aspect-ratio:1; border:0; padding:0; border-radius:12px;
  overflow:hidden; cursor:pointer; background:#E8F1EF;
}
.fin-att-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.fin-att-del{
  border:1px solid #FECACA; background:#FEF2F2; color:#BE123C;
  border-radius:8px; font-size:11px; font-weight:700; padding:5px 8px; cursor:pointer;
}
.fin-lightbox{text-align:center;}
.fin-lightbox img{max-width:100%; max-height:70vh; border-radius:12px;}
.lap-fin-link{margin:12px 0 0; font-size:12.5px; color:var(--ink-faint); font-weight:500;}
.lap-link-btn{
  border:0; background:none; padding:0; font:inherit; font-weight:750;
  color:var(--teal); cursor:pointer; text-decoration:underline;
}

@media (max-width:800px){
  #view-finance .fin-note{display:none !important;}
  #view-finance .fin-toolbar{align-items:stretch;}
  #view-finance .fin-date{width:100%; flex-direction:column; align-items:stretch; gap:4px;}
  #view-finance .stk-search{flex:1 1 100%; max-width:none;}
  #view-finance .fin-add-desk{display:none;}
  .fin-form{grid-template-columns:1fr;}
  .fin-kv{grid-template-columns:1fr;}
}

/* COACHING — selaras Karyawan / Payroll */
#view-coaching .hr-summary{
  grid-template-columns:minmax(180px,1.25fr) repeat(3,minmax(120px,1fr));
}
#view-coaching .hr-toolbar{
  align-items:flex-end;
}
#view-coaching .hr-toolbar .emp-tabs{
  flex:1 1 auto;
  align-self:flex-end;
  padding-bottom:2px;
}
#view-coaching .hr-toolbar .hr-search{
  max-width:260px;
}
#view-coaching .hr-toolbar .emp-add-btn{
  margin-left:auto;
}
#view-coaching .pay-field select,
#view-coaching .pay-field input[type="month"]{
  min-width:148px;
}
.ck-hint{
  margin:-4px 0 12px;
  font-size:12px; color:var(--ink-faint); font-weight:500;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.ck-badge-ar{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
}
.ck-badge-ar.is-high, .ck-ar-score.is-high{background:rgba(15,158,150,.12); color:#0a7a74;}
.ck-badge-ar.is-mid, .ck-ar-score.is-mid{background:rgba(232,99,28,.14); color:var(--accent);}
.ck-badge-ar.is-low, .ck-ar-score.is-low{background:rgba(212,91,74,.16); color:var(--red);}
.ck-ar-score{
  display:inline-block; min-width:48px; text-align:center;
  font-size:12px; font-weight:800; padding:3px 8px; border-radius:8px; font-variant-numeric:tabular-nums;
}
.ck-table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow-x:auto; overflow-y:hidden; box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;
}
.ck-table.emp-table{
  min-width:980px;
  table-layout:fixed;
}
#view-coaching .ck-table.emp-table th,
#view-coaching .ck-table.emp-table td{
  width:auto !important;
  min-width:0 !important;
}
.ck-table .ck-th-num,
.ck-table .ck-num{
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  width:64px !important;
}
.ck-table .ck-num.is-hot{color:var(--red);}
.ck-table .ck-num.is-mid{color:var(--accent);}
.ck-table .ck-num.is-info{color:#0a7a74;}
.ck-table .ck-num.is-mute{color:var(--ink-faint); font-weight:600;}
.ck-table .ck-num-hadir{color:#0a7a74;}
.ck-table-ar th:nth-child(1), .ck-table-ar td:nth-child(1){width:22% !important; min-width:160px !important;}
.ck-table-ar th:nth-child(2), .ck-table-ar td:nth-child(2){width:16% !important;}
.ck-table-ar th:nth-child(8), .ck-table-ar td:nth-child(8){width:16% !important;}
.ck-table-ar th:nth-child(9), .ck-table-ar td:nth-child(9),
#view-coaching .ck-table.emp-table td.emp-td-aksi,
#view-coaching .ck-table.emp-table th.emp-th-aksi{
  width:128px !important;
  min-width:128px !important;
}
.ck-hist-list{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.ck-hist-item{
  padding:10px 14px; background:var(--bg-soft); border-radius:10px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  border:1px solid var(--line);
}
.ck-hist-item__side{text-align:right; font-size:11.5px; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.ck-hist-wipe{margin:0 0 18px;}
.ck-hist-wipe .btn{min-height:40px;}
.ck-table-docs{min-width:1080px;}
.ck-table-docs th:nth-child(1), .ck-table-docs td:nth-child(1){width:150px !important;}
.ck-table-docs th:nth-child(2), .ck-table-docs td:nth-child(2){width:20% !important; min-width:140px !important;}
.ck-table-docs th:nth-child(7), .ck-table-docs td:nth-child(7){width:22% !important;}
.ck-table-docs th:nth-child(8), .ck-table-docs td:nth-child(8){width:72px !important;}
.ck-table .emp-td-aksi{overflow:visible !important;}
.ck-code{display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.ck-badge-stage{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
}
.ck-badge-stage.is-coaching{background:rgba(15,158,150,.12); color:#0a7a74;}
.ck-badge-stage.is-konseling{background:rgba(232,99,28,.12); color:#C2410C;}
.ck-badge-stage.is-sp1{background:rgba(245,158,11,.16); color:#B45309;}
.ck-badge-stage.is-sp2{background:rgba(232,99,28,.16); color:#C2410C;}
.ck-badge-stage.is-sp3{background:rgba(212,91,74,.16); color:#D45B4A;}
.ck-tag-bebas{
  display:inline-block; font-size:11px; font-weight:700; color:#0a7a74;
  background:rgba(15,158,150,.12); padding:3px 8px; border-radius:999px;
}
.ck-badge-status{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;}
.ck-badge-status.is-active{background:rgba(15,158,150,.12); color:#0a7a74;}
.ck-badge-status.is-expired{background:#EEF2F0; color:#7C908A;}
.ck-badge-status.is-done{background:#EEF2F0; color:#4A635E;}
.ck-reason-cell{
  max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--ink-soft); font-size:12.5px;
}
.ck-ar-tag{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 6px; border-radius:6px; margin:2px 3px 2px 0;
}
.ck-ar-tag.is-alpha{background:rgba(212,91,74,.15); color:var(--red);}
.ck-ar-tag.is-izin{background:rgba(232,99,28,.15); color:var(--accent);}
.ck-ar-tag.is-sakit{background:rgba(15,158,150,.14); color:#0a7a74;}
.ck-ar-tag.is-stage{background:#EEF2F0; color:#4A635E;}
.ck-scan-link, .ck-scan-upload{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700; color:var(--teal);
  background:transparent; border:0; padding:0;
  cursor:pointer; font-family:inherit; text-decoration:none;
}
.ck-scan-link:hover, .ck-scan-upload:hover{text-decoration:underline;}
.ck-scan-upload{color:var(--ink-faint); font-weight:600;}

.ck-modal-form{display:flex; flex-direction:column; gap:12px;}
.ck-form-row{display:flex; gap:12px;}
.ck-modal-form textarea{
  resize:vertical; min-height:64px; font-family:inherit; font-size:13px; line-height:1.45;
  border:1px solid var(--line); border-radius:8px; padding:10px; background:var(--panel);
}
.ck-modal-form textarea:focus{border-color:var(--teal);}

@media (max-width:1100px){
  #view-coaching .hr-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:800px){
  #view-coaching .hr-summary{grid-template-columns:1fr 1fr;}
  #view-coaching .hr-stat-main{grid-column:1 / -1;}
  #view-coaching .emp-tabs{display:flex !important;}
  .ck-form-row{flex-direction:column; gap:10px;}
  .ck-hist-item{flex-direction:column;}
  .ck-hist-item__side{text-align:left; align-items:flex-start; width:100%;}
  .ck-hist-item__side .btn{width:100%; min-height:40px; justify-content:center;}
  .ck-hist-wipe .btn{width:100%;}
}