/* BlendTea Manager v2 — "Midnight Orchid" modern theme.
   Loaded after styles.css and overrides its look only (no layout logic, no business logic).
   To go back to the previous look, remove the theme-modern.css <link> from index.html. */
:root{
 --brand:#7048E8;--brand-strong:#5B32D6;--brand-2:#C04BF2;--brand-soft:#F1ECFF;--brand-line:#E1D8FA;
 --grad:linear-gradient(135deg,#7C4DFF 0%,#A24BF0 55%,#E0569F 100%);
 --grad-soft:linear-gradient(135deg,rgba(124,77,255,.12),rgba(224,86,159,.10));
 --canvas:#F5F3FA;--surface:#FFFFFF;--text-main:#1D1630;--text-muted:#6E6680;--line:rgba(44,25,84,.08);
 --side:#16102A;--side-2:#221840;--side-text:#B8AFD0;
 --radius:18px;--radius-sm:12px;
 --shadow:0 1px 2px rgba(29,22,48,.04),0 10px 30px -8px rgba(29,22,48,.10);
 --shadow-lift:0 2px 4px rgba(29,22,48,.05),0 20px 40px -12px rgba(80,40,160,.22);
 --font:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{background:var(--canvas)}
body{font-family:var(--font);font-size:14px;color:var(--text-main);letter-spacing:-.005em;
 background:radial-gradient(1100px 520px at 85% -120px,rgba(162,75,240,.16),transparent 70%),radial-gradient(900px 480px at 15% -160px,rgba(124,77,255,.14),transparent 70%),var(--canvas);background-attachment:fixed}
::selection{background:#D9CCFF}

/* ---------- Sidebar ---------- */
.nav{background:linear-gradient(180deg,var(--side) 0%,var(--side-2) 100%);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:16px 12px;gap:3px;
 box-shadow:0 24px 60px -20px rgba(22,16,42,.55);scrollbar-color:#3A2E5C transparent}
.nav::before{content:"BLENDTEA";display:flex;align-items:center;gap:10px;padding:8px 12px 18px;margin:0 0 8px;border-bottom:1px solid rgba(255,255,255,.08);
 color:#fff;font-size:15px;font-weight:800;letter-spacing:2.5px;
 background:linear-gradient(90deg,#fff 0%,#D9C8FF 60%,#F7A8D0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-item{color:var(--side-text);font-size:13px;font-weight:600;min-height:42px;padding:10px 14px;border-radius:12px;gap:12px;transition:background .18s,color .18s,transform .18s}
.nav-item span{font-size:13px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--grad);color:#fff;font-weight:700;box-shadow:0 8px 22px -6px rgba(162,75,240,.65),inset 0 1px 0 rgba(255,255,255,.25)}

/* ---------- Top area ---------- */
.topbar{position:sticky;top:0;z-index:15;border-bottom:0;margin-bottom:14px;padding:14px 0;
 background:linear-gradient(180deg,rgba(245,243,250,.92) 60%,rgba(245,243,250,0));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand-logo{border-radius:14px;box-shadow:0 6px 18px -4px rgba(112,72,232,.45);outline:2px solid #fff}
.brand-title{font-size:20px;font-weight:800;letter-spacing:-.6px;color:var(--text-main)}
.brand-sub{font-size:12px;color:var(--text-muted)}
.notice{background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:12px;color:#4E4566;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.notice .dot{background:#22C58B;box-shadow:0 0 0 4px rgba(34,197,139,.18)}
.outlet-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}
.outlet-row label{font-size:12px;color:var(--text-muted)}
.outlet-row select{border-radius:10px;border-color:#E4DEF3;min-height:40px;font-size:13px;font-weight:600}
.master-date{font-size:12px}

/* ---------- Page headings ---------- */
.page-head{margin:8px 0 22px}
.eyebrow,.dash-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand)}
.page-title,.dash-welcome h1{font-size:32px;font-weight:800;letter-spacing:-1.2px;line-height:1.12;color:var(--text-main)}
.subtext,.dash-welcome p{font-size:13px;color:var(--text-muted)}

/* ---------- Surfaces ---------- */
.card,.dash-panel,.dash-stat,.dash-date,.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:22px}
.section-title{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--text-main);border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:16px}
.module{border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
@media(hover:hover){.card:hover,.module:hover{transform:none;box-shadow:var(--shadow)!important}
 .dash-stat:hover,.dash-action:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}}

/* ---------- Home dashboard ---------- */
.dash-welcome{margin:6px 0 28px}
.dash-date{padding:12px 16px}.dash-date b{font-size:12px}.dash-date small{font-size:11px}
.dash-date-icon,.dash-panel-mark,.dash-workbook-icon{background:var(--grad);color:#fff;border-radius:12px;box-shadow:0 6px 16px -6px rgba(124,77,255,.7)}
.dash-section-head h2,.dash-panel-head h2{font-size:17px;font-weight:800;letter-spacing:-.4px}
.dash-section-head p,.dash-panel-head p{font-size:12px}
.dash-live{font-size:12px}.dash-live i{background:#22C58B;box-shadow:0 0 0 4px rgba(34,197,139,.18)}
.dash-stats-grid{gap:16px}
.dash-stat{padding:18px 18px 16px;border-radius:20px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.dash-stat::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--grad-soft)}
.dash-stat-icon{width:40px;height:40px;border-radius:13px;font-size:18px;color:#fff;background:linear-gradient(135deg,#7C4DFF,#A24BF0);box-shadow:0 8px 18px -8px rgba(124,77,255,.8);position:relative;z-index:1}
.dash-stat.green .dash-stat-icon{background:linear-gradient(135deg,#16B981,#4AD9A4);color:#fff;box-shadow:0 8px 18px -8px rgba(22,185,129,.8)}
.dash-stat.rose .dash-stat-icon{background:linear-gradient(135deg,#F0457A,#FF8BA7);color:#fff;box-shadow:0 8px 18px -8px rgba(240,69,122,.8)}
.dash-stat.amber .dash-stat-icon{background:linear-gradient(135deg,#F59E0B,#FCC54E);color:#fff;box-shadow:0 8px 18px -8px rgba(245,158,11,.8)}
.dash-stat-label{font-size:12px;font-weight:600;color:var(--text-muted)}
.dash-stat-value{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--text-main)}
.dash-stat-foot{font-size:11px}
.dash-panel{padding:22px;border-radius:20px}
.dash-action{border:1px solid var(--line);border-radius:14px;padding:12px;transition:transform .2s,box-shadow .2s,border-color .2s}
.dash-action-icon,.dash-activity-icon{background:var(--brand-soft);color:var(--brand);border-radius:12px}
.dash-action-copy b,.dash-activity-row b{font-size:13px}.dash-action-copy small,.dash-activity-row small{font-size:11px}
.dash-activity-row>strong{font-size:13px}
.dash-outline-link{font-size:12px;color:var(--brand)}
.dash-workbook-copy b{font-size:13px}.dash-workbook-copy small{font-size:11px}
.dash-local-note{border-radius:14px;background:var(--grad-soft);border:1px solid var(--brand-line)}.dash-local-note p{font-size:12px}
.stat-label{font-size:12px}.stat-value{font-size:28px;font-weight:800;letter-spacing:-1px}.stat-foot{font-size:11px}

/* ---------- Buttons ---------- */
.install-btn,.primary,.secondary,.danger{border-radius:12px;font-size:13px;font-weight:700;min-height:42px;padding:10px 18px;letter-spacing:-.1px}
.install-btn,.primary{background:var(--grad);border:0;color:#fff;box-shadow:0 8px 20px -8px rgba(124,77,255,.75),inset 0 1px 0 rgba(255,255,255,.22);background-size:140% 140%;transition:transform .18s,box-shadow .18s,background-position .3s}
.install-btn:hover,.primary:hover{background:var(--grad);background-size:140% 140%;background-position:100% 0;transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(124,77,255,.85)}
.secondary{background:#fff;color:var(--brand-strong);border:1px solid #E1D8FA;box-shadow:0 1px 2px rgba(29,22,48,.04)}
.secondary:hover{background:var(--brand-soft);border-color:#CDBDF7}
.danger{background:#FFF1F4;color:#C2264F;border:1px solid #FBD0DB}
.form-actions button,.button-row button{min-height:40px;font-size:13px;padding:9px 16px}
.subnav button{border-radius:999px}.subnav button.active{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px -6px rgba(124,77,255,.7)}

/* ---------- Forms ---------- */
.field label{font-size:12px;font-weight:700;color:#4E4566}
.field input,.field select,.field textarea,.toolbar input,.toolbar select{min-height:44px;border:1px solid #E4DEF3;border-radius:12px;background:#FCFBFF;font-size:14px;color:var(--text-main);padding:10px 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus{background:#fff;border-color:#9A7BFF;box-shadow:0 0 0 4px rgba(124,77,255,.14);outline:0}
.hint,.small{font-size:12px}

/* ---------- Lists, tables, pills ---------- */
.record{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.record:hover{border-color:#D6CAFB;box-shadow:0 8px 22px -12px rgba(80,40,160,.3)}
.record strong{font-size:14px;color:var(--text-main)}.record .meta{font-size:12px;color:var(--text-muted)}.record .amount{font-size:14px;color:var(--brand-strong)}
.record select{border-radius:10px}
.pill{border-radius:999px;font-size:11px;font-weight:700;padding:4px 10px;background:var(--brand-soft);color:var(--brand-strong);border:0}
.pill.amber{background:#FFF4DB;color:#A0620A}.pill.red{background:#FFE9EE;color:#C2264F}
.split-line{font-size:13px}
.table-wrap{overflow:auto}
th{background:#F8F6FE;color:#6E6680;font-size:11px;letter-spacing:.6px}td{font-size:13px;color:#3B3350}tr:hover td{background:#FAF8FF}
.empty{border:1.5px dashed #DDD3FA;background:linear-gradient(180deg,#FDFCFF,#F8F5FF);border-radius:16px;color:var(--text-muted);font-size:13px}
.note,.muted-box{border-radius:14px;background:var(--grad-soft);border-color:var(--brand-line)}
.card:has(#payrollPreviewForm),.card:has(#countForm){border-top:0;position:relative;overflow:hidden}
.card:has(#payrollPreviewForm)::before,.card:has(#countForm)::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}

/* ---------- Toast & footer ---------- */
.toast{background:rgba(29,22,48,.94);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:12px 20px;font-size:13px;font-weight:600;box-shadow:0 18px 40px -12px rgba(29,22,48,.6);backdrop-filter:blur(10px)}
footer{border-top:1px solid var(--line);font-size:11px;color:#8E86A0}

/* ---------- Stock check page ---------- */
.record-list button.record.sr-selected{outline:2px solid var(--brand)}
.sr-order{background:#FBFAFF;border:1px solid var(--brand-line);border-radius:14px;font-size:13px}
.sr-cat{color:var(--brand-strong);font-size:14px}
#srBody a.sr-wa{background:linear-gradient(135deg,#16B981,#22C55E);box-shadow:0 8px 20px -8px rgba(22,185,129,.8)}

/* ---------- Phone ---------- */
@media(max-width:700px){
 body{background-attachment:scroll}
 .topbar{padding:10px 0;margin-bottom:10px}
 .brand-title{font-size:17px}.brand-sub{font-size:11px}
 .notice{border-radius:14px;font-size:11px}
 .page-title,.dash-welcome h1{font-size:25px}
 .card{padding:16px;border-radius:16px}
 .dash-stat{padding:14px;border-radius:18px}.dash-stat-value{font-size:20px}.dash-stat-icon{width:36px;height:36px}
 .dash-action-copy b{font-size:12px}.dash-action-copy small{font-size:10px}
 .nav,.app-shell>.nav.nav-expanded{background:linear-gradient(180deg,var(--side),var(--side-2));border:1px solid rgba(255,255,255,.08);border-radius:22px;bottom:96px;box-shadow:0 24px 60px -16px rgba(22,16,42,.7)}
 .nav.nav-expanded .nav-item{border-radius:14px;min-height:56px}
 .mobile-dock{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));border-radius:22px;padding:6px;
  background:rgba(22,16,42,.92);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px -12px rgba(22,16,42,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 .mobile-dock .nav-item,.mobile-dock>button{color:var(--side-text);border-radius:16px;font-size:10px;font-weight:600}
 .mobile-dock .nav-item span:not(.dock-icon){font-size:10px}
 .mobile-dock .dock-icon{color:inherit;-webkit-text-fill-color:currentColor}
 .mobile-dock .nav-item.active{background:var(--grad);color:#fff;box-shadow:0 8px 18px -8px rgba(162,75,240,.8)}
 .app-shell{padding-bottom:104px}
}
/* Stock check: tabs + Master Reff editor */
.sr-tabs{display:flex;gap:8px;margin:0 0 16px}.sr-tabs button{min-height:40px;padding:9px 18px;font:inherit;font-size:13px;font-weight:700;background:#fff;border:1px solid #E1D8FA;color:var(--brand-strong);cursor:pointer}
.mr-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.mr-actions button{min-height:34px;padding:6px 11px;font-size:12px}
.record.mr-edit{display:block;border-color:#CDBDF7;box-shadow:0 0 0 4px rgba(124,77,255,.10)}
@media(max-width:700px){.mr-actions{width:100%;justify-content:flex-start}.mr-actions button{flex:1}}
/* Kehadiran & Gaji */
.dp-summary{position:sticky;top:84px;z-index:5}
.dp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dp-stats>div{background:#FBFAFF;border:1px solid var(--line);border-radius:14px;padding:12px 14px}.dp-stats small{display:block;font-size:11px;color:var(--text-muted);font-weight:600}.dp-stats b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px;margin-top:4px}
.dp-stats .dp-total{background:var(--grad);border:0;color:#fff}.dp-stats .dp-total small{color:rgba(255,255,255,.85)}
.dp-status{margin-top:12px}.dp-warn{background:#FFF7E6;border:1px solid #F8DFAE;border-radius:12px;padding:10px 12px;color:#8A5300}
.dp-row{display:grid;grid-template-columns:minmax(150px,1.2fr) 150px minmax(0,2.4fr);gap:14px;align-items:center}
.dp-row.dp-in{border-left:4px solid #22C58B}
.dp-row select{min-height:40px;border:1px solid #E4DEF3;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;background:#FCFBFF}
.dp-pay{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr)) minmax(110px,1fr);gap:10px;align-items:end}
.dp-pay label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--text-muted)}
.dp-pay input{min-height:40px;border:1px solid #E4DEF3;border-radius:10px;padding:8px 10px;font:inherit;font-size:14px;font-weight:700;background:#FCFBFF;width:100%}
.dp-pay input:focus,.dp-row select:focus{outline:0;border-color:#9A7BFF;box-shadow:0 0 0 4px rgba(124,77,255,.14);background:#fff}
.dp-pay input:disabled,.dp-row select:disabled{opacity:.6}
.dp-net{text-align:right}.dp-net small{display:block;font-size:11px;color:var(--text-muted)}.dp-net b{font-size:16px;color:var(--brand-strong)}.dp-net .pill{margin-left:6px}
.dp-monthly{display:block;color:var(--text-muted);font-size:12px}
@media(max-width:900px){.dp-row{grid-template-columns:1fr 140px}.dp-pay{grid-column:1/-1}}
@media(max-width:700px){.dp-summary{position:static}.dp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dp-stats b{font-size:17px}.dp-row{grid-template-columns:1fr 130px;gap:10px}.dp-pay{grid-template-columns:repeat(3,minmax(0,1fr));}.dp-net{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:left}}
/* POS (Manager) */
.pa-stats{margin:6px 0 10px}.record.pa-void{opacity:.55}.record.pa-void strong{text-decoration:line-through}
#paBody a.primary,#paBody a.secondary{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.pa-pin{flex-wrap:wrap;gap:12px}.pa-pin-fields{display:flex;gap:8px;flex-wrap:wrap}.pa-pin-fields input{min-height:42px;border:1px solid #E4DEF3;border-radius:12px;padding:8px 12px;font:inherit;width:190px;background:#FCFBFF}
@media(max-width:700px){.pa-pin-fields{width:100%}.pa-pin-fields input,.pa-pin-fields button{flex:1;width:auto;min-width:0}}