/* MBOK LAUNDRY 2.0 — CSS GLOBAL
   Sumber: gaya mboklaundry.id + komponen new_ml.
   Seluruh tampilan aplikasi dipusatkan di file ini; CSS per halaman tidak digunakan.
*/

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#f6f7fb; margin:0}
.container{max-width:960px;margin:40px auto;padding:0 16px}
.card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.06);padding:24px}
h1,h2,h3{margin:0 0 12px}
.input{width:100%;padding:12px;border:1px solid #dcdfe6;border-radius:10px;background:#fff}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:none;cursor:pointer}
.btn-primary{background:#3b82f6;color:#fff}
.btn-ghost{background:#eef2ff;color:#374151}
.topbar{background:#111827;color:#fff;padding:12px 0}
.topbar .wrap{max-width:960px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center}
.nav a{color:#fff;text-decoration:none;margin-left:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.alert{padding:10px 12px;border-radius:8px;background:#fee2e2;color:#991b1b;margin-bottom:12px}
.success{background:#dcfce7;color:#166534}




/* =======================================================
   UI GLOBAL — MBOK LAUNDRY
   2 MODE (≤1279 & ≥1280) + MAKS LEBAR KONTEN
   Catatan:
   - Nilai --primary & --primary-600 akan dioverride dari header.php (ambil dari app_settings.tema_warna)
   ======================================================= */

/* ---------- Reset & variabel ---------- */
*,*::before,*::after { box-sizing: border-box; }
:root{
  /* batas lebar global */
  --page-max: 880px;

  --bg:#f6f7fb; --card:#ffffff; --bd:#e6e8ef; --txt:#111827; --muted:#6b7280;

  /* DEFAULT (akan dioverride dari header.php sesuai app_settings.tema_warna) */
  --primary:#2563eb;
  --primary-600:#1d4ed8;

  --success:#16a34a;   --success-600:#15803d;
  --danger:#ef4444;    --danger-600:#dc2626;
  --warning:#f59e0b;   --warning-600:#d97706;

  --radius:14px;
}

/* TERIMA LAUNDRY — PILIH PROMO / VOUCHER */
.modal-ml .box.order-promo-modal-box{display:flex;width:min(520px,calc(100vw - 28px))!important;max-width:100%;flex-direction:column;max-height:min(88dvh,760px);overflow:hidden}
.modal-ml .body.order-promo-modal-body{overflow-y:auto;overscroll-behavior:contain;padding:14px!important;scrollbar-gutter:stable}
.order-promo-choice-group+.order-promo-choice-group{margin-top:18px;padding-top:16px;border-top:8px solid #f3f6f7}
.order-promo-choice-group>h4{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;color:#173d43;font-size:14px;font-weight:800}
.order-promo-choice-group>h4 span{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 7px;border-radius:999px;background:#e9f7f7;color:var(--primary);font-size:11px}
.order-promo-choice-group.is-muted>h4{color:#64767b}
.order-promo-card-list{display:grid;gap:10px}
.order-promo-card{position:relative;overflow:hidden;border:1px solid #dfe7ea;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(26,69,76,.05);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.order-promo-card[data-eligible="1"]{cursor:pointer}
.order-promo-card[data-eligible="1"]:hover{border-color:#8fcfd0;box-shadow:0 5px 14px rgba(7,135,149,.12);transform:translateY(-1px)}
.order-promo-card.is-selected{border-color:var(--primary);box-shadow:0 0 0 1px rgba(7,135,149,.13)}
.order-promo-recommended{position:absolute;top:0;right:0;z-index:3;display:inline-flex;align-items:center;min-height:22px;padding:3px 9px 4px 11px;border-radius:0 0 0 8px;background:#f45b2d;color:#fff;font-size:9px;font-weight:850;line-height:1;letter-spacing:.1px}
.order-promo-modal-head{position:relative;display:flex!important;align-items:center;gap:10px;padding-right:66px!important}
.order-promo-modal-head .title{min-width:0;flex:1;align-self:center}
.order-promo-modal-head #orderPromotionClose{position:absolute;top:50%;right:14px;margin:0;transform:translateY(-50%)}
.order-promo-terms-back{display:inline-grid;width:36px;height:36px;place-items:center;padding:0;border:0;border-radius:10px;background:transparent;color:var(--primary);cursor:pointer;font-size:22px}
.order-promo-terms-back:hover{background:#edf9f9}
.order-promo-terms-back[hidden]{display:none!important}
.order-promo-card-main{display:grid;height:112px;grid-template-columns:112px minmax(0,1fr) 44px;align-items:stretch}
.order-promo-card-icon{position:relative;display:flex;width:112px;height:112px;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;color:#fff;text-align:center;background:#078795}
.order-promo-card-icon::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:radial-gradient(circle at 0 7px,#fff 0 3px,transparent 3.5px) 0 0/6px 14px repeat-y;opacity:.95}
.order-promo-card-icon i{font-size:34px;line-height:1}
.order-promo-card-icon small{color:inherit;font-size:9px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.25px}
.order-promo-card.is-discount .order-promo-card-icon{background:linear-gradient(145deg,#ff6b4a,#f0442e)}
.order-promo-card.is-promo-voucher .order-promo-card-icon{background:linear-gradient(145deg,#25cec0,#079da7)}
.order-promo-card.is-gift .order-promo-card-icon{background:linear-gradient(145deg,#b275ef,#7643cf)}
.order-promo-card.is-customer-voucher .order-promo-card-icon{background:linear-gradient(145deg,#45adef,#1974bd)}
.order-promo-card-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:13px 12px}
.order-promo-card-copy>strong{display:-webkit-box;overflow:hidden;color:#153d43;font-size:15px;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.order-promo-card-copy>.order-promo-card-benefit{display:-webkit-box;overflow:hidden;color:#ef5b2a;font-size:13px;font-weight:800;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.order-promo-card-meta{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.order-promo-card-meta>small{min-width:0;color:#71838a;font-size:11px;line-height:1.3}
.order-promo-card-radio-input{align-self:center;display:block!important;flex:0 0 21px;width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;max-width:21px!important;max-height:21px!important;margin:0 11px 0 0!important;padding:0!important;border:initial!important;border-radius:50%!important;background:initial!important;box-shadow:none!important;accent-color:var(--primary);cursor:pointer;-webkit-appearance:radio!important;appearance:auto!important}
.order-promo-card-radio-input[disabled]{cursor:not-allowed;opacity:.62}
.order-promo-card-terms{display:inline-flex;width:auto;min-height:0;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:4px;padding:1px 0;border:0;background:transparent;color:var(--primary);font-size:11px;font-weight:800;cursor:pointer}
.order-promo-card-terms i{font-size:10px}
.order-promo-card-reason{display:flex;align-items:flex-start;gap:6px;padding:8px 11px;border-top:1px solid #f0d7bf;background:#fff7ed;color:#9a521d;font-size:11px;font-weight:700;line-height:1.35}
.order-promo-card-reason i{flex:0 0 auto;margin-top:1px}
.order-promo-card-reason span{min-width:0}
.order-promo-card.is-unavailable{border-color:#e3e8ea;background:#f8fafb;box-shadow:none}
.order-promo-card.is-unavailable .order-promo-card-icon{filter:saturate(.35);opacity:.68}
.order-promo-card.is-unavailable .order-promo-card-copy>strong,.order-promo-card.is-unavailable .order-promo-card-copy>.order-promo-card-benefit{color:#75858a}
.order-promo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px;border:1px dashed #cedadd;border-radius:12px;color:#71838a;text-align:center}
.order-promo-empty i{font-size:30px;color:#91a5aa}
.modal-ml .foot.order-promo-modal-foot{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px!important;background:#fff;box-shadow:0 -6px 16px rgba(18,59,66,.06)}
.order-promo-modal-summary{min-width:0;display:flex;flex-direction:column;gap:2px}
.order-promo-modal-summary small{color:#73858b;font-size:10px}
.order-promo-modal-summary strong{overflow:hidden;color:#173d43;font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.order-promo-modal-summary span{overflow:hidden;color:#ef5b2a;font-size:11px;font-weight:800;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.order-promo-modal-actions{display:flex;align-items:center;gap:8px}
.order-promo-modal-actions .btn{min-width:92px}
.order-promo-modal-box.is-showing-terms .order-promo-modal-foot{display:none!important}
.order-promo-terms-view[hidden]{display:none!important}
.order-promo-terms-view{display:grid;gap:18px;padding-bottom:8px}
.order-promo-terms-hero{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:stretch;overflow:hidden;border:1px solid #dfe7ea;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(20,67,74,.08)}
.order-promo-terms-hero-icon{display:flex;min-height:104px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 7px;background:linear-gradient(145deg,#20c7bc,#079aa4);color:#fff;text-align:center}
.order-promo-terms-hero-icon.is-discount{background:linear-gradient(145deg,#ff704f,#f0442e)}
.order-promo-terms-hero-icon.is-gift{background:linear-gradient(145deg,#ab74e8,#7547c7)}
.order-promo-terms-hero-icon.is-customer-voucher{background:linear-gradient(145deg,#48a1df,#176fab)}
.order-promo-terms-hero-icon i{font-size:34px;line-height:1}
.order-promo-terms-hero-icon small{font-size:9px;font-weight:850;line-height:1.2;text-transform:uppercase}
.order-promo-terms-hero>div:last-child{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:5px;padding:14px}
.order-promo-terms-hero strong{color:#173d43;font-size:16px;line-height:1.3}
.order-promo-terms-hero span{color:#536a70;font-size:13px;line-height:1.4}
.order-promo-terms-view section{display:grid;gap:6px}
.order-promo-terms-view section h4{margin:0;color:#173d43;font-size:14px;font-weight:850}
.order-promo-terms-view section p{margin:0;color:#52666c;font-size:13px;line-height:1.55;white-space:pre-line}

@media(max-width:560px){
  .modal-ml .box.order-promo-modal-box{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 96px)}
  .modal-ml .body.order-promo-modal-body{padding:12px!important}
  .order-promo-card-main{height:104px;grid-template-columns:104px minmax(0,1fr) 40px}
  .order-promo-card-icon{width:104px;height:104px;padding:12px 6px}
  .order-promo-card-icon i{font-size:30px}
  .order-promo-card-copy{padding:11px 9px}
  .order-promo-card-copy>strong{font-size:14px}
  .order-promo-card-copy>.order-promo-card-benefit{font-size:12px}
  .order-promo-card-radio-input{margin-right:7px!important}
  .modal-ml .foot.order-promo-modal-foot{grid-template-columns:1fr;padding:10px 12px!important}
  .order-promo-modal-actions{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .order-promo-modal-actions .btn-primary{width:100%}
}

html, body { height: 100%; }
body{ background:var(--bg); color:var(--txt); margin:0; }

/* ---------- Kontainer halaman (dibatasi max width) ---------- */
.page{
  width:100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width:480px){ .page{ padding:0 8px; } }

/* ---------- Toolbar, kartu, dll. ---------- */
.container .card{ border-radius: var(--radius); }
.nav a.active{ font-weight:700; }

.toolbar-wrap{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--radius);
  padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:12px;
}
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar .search{ display:flex; gap:8px; flex:1 1 auto; align-items:center; }

.form-card{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--radius);
  padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Input ---------- */
.input, select.input, textarea.input{
  display:block; width:100%; max-width:100%;
  border:1px solid var(--bd); border-radius:10px; padding:10px 12px; background:#fff;
  font-size:14px; line-height:1.4; outline:none; transition:.15s;
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
textarea.input{ min-height:44px; resize:vertical; }

/* ---------- Group & label ---------- */
.group{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
label, .label{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:700;
  color: var(--primary); letter-spacing:.2px;
}
.hint{ font-size:12px; color:var(--muted); }

/* ---------- Grid utilitas (2 kolom hanya di desktop) ---------- */
.row-2{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:1280px){ .row-2{ grid-template-columns:1fr 1fr; } }

/* =======================================================
   HEADER (bar ikut tema), isi header dibatasi --page-max
   ======================================================= */
.app-header {
  position: relative; z-index: 900;
  background:var(--primary); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* bungkus baris header agar align dengan .page */
.app-header .row-1,
.app-header .row-2{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 10px 16px;
}

.app-header .row-1{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:10px;
}
.app-header .menu-btn,
.app-header .notif-btn{
  display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12); color:#fff; text-decoration:none; transition:.15s;
}
.app-header .menu-btn:hover,
.app-header .notif-btn:hover{ background:rgba(255,255,255,.20); }
.app-header .icon{ width:18px; height:18px; }
.app-header .avatar{
  width:36px; height:36px; border-radius:999px; object-fit:cover;
  border:2px solid rgba(255,255,255,.45); background:#e5e7eb;
}
.app-header .user-name{
  font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-header .notif-btn{ position:relative; }
.app-header .notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#f43f5e; color:#fff; font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--primary);
}
.app-header .row-2{ display:flex; align-items:center; justify-content:center; }
.app-header .page-title{ font-size:18px; font-weight:800; text-align:center; color:#fff; }
.app-header .inline-title{ display:none; font-weight:800; }
.app-header .user-chip{ display:none; align-items:center; gap:10px; }

/* desktop only */
@media (min-width:1280px){
  .app-header .row-1{ grid-template-columns:auto auto 1fr auto auto; padding:12px 16px; }
  .app-header .inline-title{ display:inline-flex; align-items:center; gap:10px; font-size:20px; }
  .app-header .row-2{ display:none; }
  .app-header .user-chip{ display:inline-flex; }
  .app-header .user-name.mobile-slot{ display:none; }
}

/* =======================================================
   BUTTONS
   ======================================================= */
a.btn, a.btn:visited, a.btn:hover, a.btn:focus,
a.icon-btn, a.icon-link,
a.btn-block, a.btn-sm, a.btn-lg { text-decoration: none !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:9px 16px; border-radius:10px;
  font-weight:600; font-size:14px; line-height:1;
  cursor:pointer; user-select:none;
  border:1px solid transparent; background:#fff; color:#111827;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.btn:hover   { transform: translateY(-1px); box-shadow:0 3px 6px rgba(0,0,0,.16); }
.btn:active  { transform: translateY(0);    box-shadow:0 1px 3px rgba(0,0,0,.12); }

.btn-primary{ background:var(--primary); border-color:var(--primary-600); color:#fff; }
.btn-primary:hover{ background:var(--primary-600); }
.btn-success{ background:var(--success); border-color:var(--success-600); color:#fff; }
.btn-success:hover{ background:var(--success-600); }
.btn-danger{ background:var(--danger); border-color:var(--danger-600); color:#fff; }
.btn-danger:hover{ background:var(--danger-600); }
.btn-warning{ background:var(--warning); border-color:var(--warning-600); color:#fff; }
.btn-warning:hover{ background:var(--warning-600); }

.btn-sm{ padding:7px 12px; font-size:13px; border-radius:8px; }
.btn-lg{ padding:12px 18px; font-size:15px; border-radius:12px; }
.btn-block{ display:inline-flex; width:100%; }
.btn .icon{ width:18px; height:18px; display:block; }

.icon-btn,.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--bd);
  background:#fff; color:#111827; cursor:pointer; transition:.15s; text-decoration:none !important;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.icon-btn:hover,.icon-link:hover{ transform: translateY(-1px); box-shadow:0 3px 6px rgba(0,0,0,.12); }
.icon-btn.primary,.icon-link.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.icon-btn.primary:hover,.icon-link.primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }
.icon-btn.danger{ border-color:#fca5a5; color:#b91c1c; }
.icon-btn.danger:hover{ background:#fef2f2; }
.icon-svg{ width:18px; height:18px; display:block; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn .icon-svg, .icon-btn .icon-svg, .icon-link .icon-svg{ stroke:currentColor; fill:none; }
.btn.btn-primary .icon-svg, .icon-btn.primary .icon-svg, .icon-link.primary .icon-svg{ stroke:#fff; }

/* =======================================================
   CARDS / LISTS
   ======================================================= */
.cards{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:1280px){ .cards{ grid-template-columns:1fr 1fr; } }

.card-proc{
  background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:14px;
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.card-proc h3{ margin:0 0 6px 0; font-size:16px; }
.card-proc h3 a{ color:#111827; text-decoration:none; }
.card-proc h3 a:hover{ text-decoration:underline; }
.meta{ font-size:12px; color:#64748b; line-height:1.6; }
.actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:156px; }
.actions form{ display:inline; }
.muted{ color:#9ca3af; }

/* =======================================================
   BADGES
   ======================================================= */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; border:1px solid #e6e8ef;
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 0 0 1px rgba(255,255,255,.4);
  letter-spacing:.2px;
}
.badge .dot{ width:8px; height:8px; border-radius:999px; flex:0 0 8px; box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.badge.active{ background:linear-gradient(135deg,#ecfdf5 0%,#e6fffb 100%); color:#065f46; border-color:#a7f3d0; }
.badge.active .dot{ background:#10b981; }
.badge.inactive{ background:linear-gradient(135deg,#f8fafc 0%,#f3f4f6 100%); color:#475569; border-color:#e5e7eb; }
.badge.inactive .dot{ background:#ef4444; }

/* =======================================================
   HEADER SEDERHANA
   ======================================================= */
.header-simple{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 14px; }
.header-simple .title{ font-size:20px; font-weight:700; color: var(--primary); }

/* =======================================================
   SIDEBAR
   ======================================================= */
.app-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.app-overlay.show{ opacity: 1; pointer-events: auto; }
.app-sidebar{
  position: fixed; top: 0; left: 0; height: 100%; width: 260px;
  background: #1e3a8a; color: #fff; z-index: 1010;
  transform: translateX(-100%); transition: transform .25s ease;
  box-shadow: 2px 0 12px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
}
.app-sidebar.show{ transform: translateX(0); }
.sidebar-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background: rgba(255,255,255,.06); }
.sidebar-header .brand{ font-weight:700; letter-spacing:.3px; }
.sidebar-close{ background:transparent; color:#fff; border:0; font-size:18px; cursor:pointer; }
.sidebar-nav{ list-style:none; padding:10px 8px 16px; margin:0; }
.sidebar-nav li{ margin: 2px 0; }
.sidebar-nav a{ position: relative; display:block; padding:10px 12px; border-radius:10px; color:#fff; text-decoration:none; }
.sidebar-nav a:hover{ background: rgba(255,255,255,.12); }
.sidebar-nav a.active, .sidebar-nav a[aria-current="page"]{ background: rgba(255,255,255,.18); font-weight:700; }
.sidebar-nav a.active::before, .sidebar-nav a[aria-current="page"]::before{
  content:""; position:absolute; left:-8px; top:10px; bottom:10px; width:4px; border-radius:4px; background:#93c5fd;
}
.sidebar-nav .nav-label{ margin:10px 8px 4px; padding:0 4px; font-size:12px; font-weight:700; letter-spacing:.2px; opacity:.75; pointer-events:none; }

/* =======================================================
   AUTH / LOGIN
   ======================================================= */
.auth-shell{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 16px;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(900px 500px at 90% 100%, rgba(16,185,129,.05), transparent 60%),
    var(--bg);
}
.auth-card{
  width:100%; max-width:480px;
  background:var(--card); border:1px solid var(--bd);
  border-radius:18px; box-shadow:0 18px 40px rgba(17,24,39,.08); overflow:hidden;
}
.auth-card.pro{
  background:linear-gradient(#fff, #fff) padding-box,
             linear-gradient(135deg, rgba(37,99,235,.35), rgba(14,165,233,.25), rgba(16,185,129,.25)) border-box;
  border:1px solid transparent;
}
.auth-head{ padding:24px 22px 12px; border-bottom:1px solid var(--bd); display:flex; align-items:center; justify-content:center; }
.auth-logo{ display:flex; align-items:center; justify-content:center; }
.logo-auth{ height:72px; width:auto; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.auth-body{ padding:0 22px 22px; }
.auth-body .group{ margin:14px 0; }
.auth-meta{ margin:6px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.auth-meta-right{justify-content:flex-end}
.checkbox{ display:flex; align-items:center; gap:8px; color:#374151; }
.checkbox input{ width:16px; height:16px; }
.form-actions.center{ display:flex; justify-content:center; align-items:center; margin-top:10px; }
.btn-auth{
  padding:11px 18px; border-radius:12px; font-weight:700;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 6px 18px rgba(37,99,235,.20);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color:#fff;
}

/* =======================================================
   SHEET / MODAL
   ======================================================= */
[hidden]{display:none !important;}
.sheet{position:fixed;inset:0;z-index:1000;}
.sheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:12px 12px 0 0;padding:12px;}
body.modal-open{overflow:hidden;}

/* =======================================================
   TOMBOL DI DALAM .form-card
   ======================================================= */
.form-card .actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.form-card .actions .btn{ box-shadow:0 1px 2px rgba(0,0,0,.06); }
.form-card .actions .btn .icon-svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.8; }

/* =======================================================
   ALERTS
   ======================================================= */
.alert{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; margin:12px 0;
  border:1px solid transparent; border-radius:10px;
  font-size:14px; line-height:1.5;
}
.alert-success{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.alert-danger { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.alert-warning{ background:#fef9c3; color:#854d0e; border-color:#fde68a; }
.alert-info   { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }

/* util kecil yang sempat mengganggu posisi label HP */
#hpChosen { position: static; margin-top: 6px; }

/* =======================================================
   GLOBAL: tabel responsif
   Scroll dimiliki wrapper, bukan elemen <table>. Menjadikan table sebagai block
   membuat lebar kolom dan garis tabel rusak pada layar kecil.
   ======================================================= */
.page table{max-width:100%}
.table-wrap,.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.desktop-only{display:block}
.mobile-only{display:none}
@media (max-width:900px){
  .page .table-wrap table:not(.table-mini),
  .page .table-scroll table:not(.table-mini){display:table;width:100%;overflow:visible}
  .page .table-wrap table:not(.table-mini) th,
  .page .table-wrap table:not(.table-mini) td,
  .page .table-scroll table:not(.table-mini) th,
  .page .table-scroll table:not(.table-mini) td{white-space:nowrap}
}
@media (max-width:767px){
  .desktop-only{display:none!important}
  .mobile-only{display:block!important}
}


.section-title,
.section-subtitle{
  color: var(--primary);
  font-weight: 800;
}
.section-subtitle{ margin-bottom:10px; }

/* ===== FIX: biarkan table-mini tetap table agar sticky kolom bekerja ===== */
@media (max-width: 900px){
  .page table.table-mini{
    display: table !important;
    overflow: visible !important; /* scroll tetap di .table-wrap, bukan di table */
  }
  .page table.table-mini thead{ display: table-header-group !important; }
  .page table.table-mini tbody{ display: table-row-group !important; }
  .page table.table-mini tr{ display: table-row !important; }
  .page table.table-mini th,
  .page table.table-mini td{ display: table-cell !important; }
}


:root{
  --primary:#078795;
  --primary-600:#066f7a;
  --secondary:#078795;
  --secondary-600:#066f7a;
  --tertiary:#078795;
  --tertiary-600:#066f7a;
}

[hidden]{display:none!important}

/* Header Laravel mengikuti header mboklaundry.id */
.app-header{position:sticky;top:0;z-index:900;background:var(--primary);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.app-header .row-1,.app-header .row-2{max-width:var(--page-max);margin:0 auto;padding:10px 16px}
.app-header .row-1{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.left-group,.right-group,.user-chip{display:flex;align-items:center}.left-group{gap:10px}.right-group{justify-content:flex-end}.app-header .user-chip{display:flex;gap:8px;min-width:0}
.header-btn{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.header-btn:hover{background:rgba(255,255,255,.20)}.header-btn.plain{background:transparent;border:0;box-shadow:none}
.outlet-context-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:220px;height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:12px;font-weight:800;line-height:1;cursor:pointer;box-shadow:none;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.outlet-context-chip:hover{transform:translateY(-1px)}
.outlet-context-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outlet-context-chip.is-ready{background:#dcfce7;border-color:#86efac;color:#166534}
.outlet-context-chip.is-ready:hover{background:#bbf7d0;border-color:#4ade80}
.outlet-context-chip.is-detecting{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.outlet-context-chip.is-stale{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.outlet-context-chip.is-error{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.outlet-context-spin{animation:outlet-context-spin .8s linear infinite}
@keyframes outlet-context-spin{to{transform:rotate(360deg)}}
@media(max-width:899px){.outlet-context-chip{max-width:min(36vw,170px)}}
@media(max-width:520px){.outlet-context-chip{max-width:125px;height:30px;padding:0 8px;font-size:11.5px}}
.hdr-avatar{width:34px;height:34px;border-radius:999px;object-fit:cover;border:2px solid rgba(255,255,255,.45);background:#e5e7eb}
.user-copy{min-width:0}.user-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-copy small{display:block;font-size:11px;margin-top:2px;opacity:.9}
.center-title{text-align:center;font-weight:600;letter-spacing:.2px;font-size:18px;color:#fff}
.app-header .row-2{display:none;text-align:center;font-weight:600;letter-spacing:.2px;font-size:18px;padding-top:6px}
@media(max-width:899px){.app-header .row-1{display:flex}.center-title{display:none}.right-group{margin-left:auto}.user-copy small{display:none}.app-header .row-2{display:block}}

/* Drawer hanya pengganti include sidebar lama; isi/menu tetap mengikuti donor */
.app-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s ease}
.app-overlay.show,body.menu-open .app-overlay{opacity:1;pointer-events:auto}
.app-drawer{position:fixed;top:0;left:0;height:100%;width:260px;background:#1e3a8a;color:#fff;z-index:1010;transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 12px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:auto}
.app-drawer.show,body.menu-open .app-drawer{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(255,255,255,.06)}
.drawer-brand{display:flex;align-items:center;gap:8px;font-weight:700}.drawer-brand img{width:42px;height:42px;object-fit:contain}.drawer-close{background:transparent;color:#fff;border:0;font-size:18px;cursor:pointer}
.drawer-body{padding:10px 8px 16px}.menu-section{margin:2px 0}.menu-section-title{margin:10px 8px 4px;padding:0 4px;font-size:12px;font-weight:700;letter-spacing:.2px;opacity:.75;text-transform:uppercase}
.menu-link,.menu-parent{position:relative;display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#fff;text-decoration:none;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit}
.menu-link:hover,.menu-parent:hover{background:rgba(255,255,255,.12)}.menu-link.active{background:rgba(255,255,255,.18);font-weight:700}.menu-link.active:before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:4px;border-radius:4px;background:#93c5fd}
.menu-icon{width:20px;text-align:center}.menu-parent .chev{margin-left:auto}.submenu{padding-left:15px}.submenu .menu-link{padding:9px 12px;font-size:13px}
.drawer-foot{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,.16)}.drawer-foot .muted{color:rgba(255,255,255,.72)}.drawer-logout{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;padding:10px;border-radius:10px;font-weight:700;cursor:pointer}

/* Konten: lebar dan ruang mengikuti .page bawaan mboklaundry.id */
.page-wrap{width:100%;padding:0 0 34px}.page.page-wide{max-width:none!important;width:100%!important}.page.page-medium{max-width:1100px}
.flash{max-width:var(--page-max);margin:12px auto 0;padding:10px 12px;border-radius:8px}.flash.ok{background:#dcfce7;color:#166534}.flash.err{background:#fee2e2;color:#991b1b}.flash ul{margin:0;padding-left:18px}
.page-wide~.flash,.page-wide .flash{max-width:none}

/* Elemen tambahan yang tidak ada di CSS donor */
.select,.textarea{display:block;width:100%;max-width:100%;border:1px solid var(--bd);border-radius:10px;padding:10px 12px;background:#fff;font-size:14px;line-height:1.4;outline:none;transition:.15s}.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.textarea{resize:vertical}
.toolbar-stack{display:grid;gap:10px;margin:12px 0}.toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-primary-ml,.btn-save-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.btn-primary-ml:hover,.btn-save-primary:hover{filter:brightness(1.05)}.btn-danger-ml{background:var(--danger)!important;color:#fff!important}
.card.table-card,.roles-card,.outlets-card,.users-card{padding:0!important;overflow:hidden}.table-scroll{overflow:auto}.table-card .table,.roles-card .table,.outlets-card .table,.users-card .table{width:100%!important;margin:0!important}.table-card .table thead th,.roles-card .table thead th,.outlets-card .table thead th,.users-card .table thead th{background:var(--primary)!important;color:#fff!important;border-bottom:0!important}.table-card .table thead th:first-child,.roles-card .table thead th:first-child,.outlets-card .table thead th:first-child,.users-card .table thead th:first-child{border-top-left-radius:12px}.table-card .table thead th:last-child,.roles-card .table thead th:last-child,.outlets-card .table thead th:last-child,.users-card .table thead th:last-child{border-top-right-radius:12px}
.empty{text-align:center!important;color:#64748b;padding:18px!important}.small,.muted{color:#64748b;font-size:12px}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;border:1px solid var(--bd);font-weight:600}.badge.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}.badge.muted{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}.badge.pending{background:#fff7ed;border-color:#fed7aa;color:#9a3412}.badge.level{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.badge.level-none{background:#f8fafc;border-color:#e2e8f0;color:#64748b}
.aksi-group{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap;white-space:nowrap}.aksi-group form{display:inline}.btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--bd);background:#fff;text-decoration:none;cursor:pointer;padding:0;transition:transform .06s ease,box-shadow .12s ease,background .12s ease}.btn-icon:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}.btn-icon i{font-size:16px;line-height:1}.btn-icon:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.btn-outline-primary{border-color:rgba(37,99,235,.35);color:var(--primary)}.btn-outline-warning{border-color:rgba(245,158,11,.45);color:#d97706}.btn-outline-info{border-color:rgba(13,202,240,.45);color:#0aa2c0}.btn-outline-success{border-color:rgba(22,163,74,.35);color:var(--success)}.btn-outline-danger{border-color:rgba(239,68,68,.35);color:var(--danger)}
.fab{position:fixed;right:18px;bottom:18px;z-index:20;width:52px;height:52px;border-radius:999px;border:0;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.18);text-decoration:none;cursor:pointer}.fab:hover{filter:brightness(1.05)}.fab i{font-size:22px;color:#fff;line-height:1}

/* Modal donor */
.ml-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:99998!important}.ml-modal.show{display:block!important}.ml-modal .modal-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 28px));background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.22);padding:16px;z-index:99999!important;max-height:calc(100vh - 28px);overflow:auto}.ml-modal .modal-card.wide{width:min(760px,calc(100vw - 28px))}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.modal-title{font-size:18px;font-weight:800;margin:0;color:var(--primary)}.modal-close{border:1px solid var(--bd);background:#fff;width:34px;height:34px;border-radius:10px;cursor:pointer}.modal-close:hover{background:#f3f4f6}.modal-body{margin-top:8px}.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.form-row label{font-size:13px;font-weight:700;color:var(--secondary)}.form-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:10px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.help{font-size:12px;color:#64748b}.outlet-chip-list{display:flex;flex-wrap:wrap;gap:8px}.check-chip{border:1px solid var(--bd);border-radius:999px;padding:7px 10px;display:flex;align-items:center;gap:6px;background:#fff}
.switch-line{display:flex;align-items:center;gap:10px}.switch{position:relative;width:44px;height:24px;display:inline-block}.switch input{display:none}.slider{position:absolute;inset:0;background:#e5e7eb;border:1px solid #d1d5db;border-radius:999px;cursor:pointer}.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:2px;background:#fff;border:1px solid #cbd5e1;border-radius:50%;transition:.15s}.switch input:checked+.slider{background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.35)}.switch input:checked+.slider:before{transform:translateX(19px)}

/* Matriks hak akses memang full width pada mboklaundry.id */
.matrix-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.save-indicator{margin-left:auto;font-size:12px;color:#64748b}.save-indicator:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#94a3b8;margin-right:6px}.save-indicator.work:before{background:#f59e0b}.save-indicator.ok:before{background:#22c55e}.save-indicator.err:before{background:#ef4444}
.matrix-wrap{overflow:auto;max-height:calc(100vh - 205px);border:1px solid var(--bd);border-radius:12px;background:#fff}.matrix-table{border-collapse:separate;border-spacing:0;min-width:100%;width:max-content}.matrix-table th,.matrix-table td{padding:10px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;background:#fff;white-space:nowrap}.matrix-table th{position:sticky;top:0;background:var(--primary);color:#fff;z-index:3;text-align:left}.matrix-table .sticky-col-1{position:sticky;left:0;z-index:4;min-width:205px}.matrix-table .sticky-col-2{position:sticky;left:205px;z-index:4;min-width:290px}.matrix-table td.sticky-col-1,.matrix-table td.sticky-col-2{background:#fff}.matrix-table th.sticky-col-1,.matrix-table th.sticky-col-2{z-index:6;background:var(--primary)}.matrix-table .feature-name{padding-left:30px;color:#64748b;font-size:13px}.matrix-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.matrix-table input:disabled{cursor:not-allowed;opacity:.6}.role-sub{font-size:11px;margin-top:4px}.matrix-center{text-align:center!important;min-width:120px}.role-rule-table{min-width:760px}.role-rule-table th,.role-rule-table td{text-align:center}.role-rule-table th:first-child,.role-rule-table td:first-child{text-align:left;position:sticky;left:0;z-index:2;background:#fff}.role-rule-table th:first-child{background:var(--primary);z-index:4}

/* User & outlet mobile */
.mobile-cards{display:none}.mobile-card{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:13px;margin-bottom:10px}.mobile-card-head{display:flex;justify-content:space-between;gap:10px}.profile-line{display:flex;gap:10px;align-items:center}.profile-line img{width:42px;height:42px;border-radius:50%;object-fit:cover}.profile-copy strong{display:block}.profile-copy small{display:block;color:#64748b;margin-top:3px}.mobile-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}.tabs{display:flex;border-bottom:1px solid var(--bd);margin:0 0 12px}.tab{padding:10px 15px;color:#64748b;text-decoration:none;font-weight:700;border-bottom:3px solid transparent}.tab.active{color:var(--primary);border-color:var(--primary)}

/* Auth Laravel mengikuti donor */
.auth-page{background:#f4f7fb}.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}.auth-card.pro{width:min(500px,100%);background:#fff;border:1px solid #cbd5e1;border-radius:18px;overflow:hidden;box-shadow:0 16px 42px rgba(15,23,42,.09)}.auth-head{padding:34px 24px 26px;text-align:center;border-bottom:1px solid #e5e7eb}.logo-auth{width:150px;height:auto}.auth-body{padding:26px}.input-wrap{position:relative}.toggle-pass{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-size:.9rem;color:var(--primary);cursor:pointer;font-weight:700}.captcha-wrap{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.captcha-chip{padding:.65rem .8rem;border-radius:.65rem;font-weight:700;background:#fff;color:var(--primary);border:1px solid var(--bd)}.auth-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 0}.checkbox{display:flex;align-items:center;gap:8px}.link-soft{color:var(--primary);font-weight:700;text-decoration:none}.btn-auth.pretty{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.15rem;border:0;border-radius:.9rem;background:var(--primary);color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,.10);cursor:pointer;min-width:170px}

.pagination{display:flex;gap:5px;align-items:center;justify-content:flex-end;padding:12px}.pagination a,.pagination span{padding:6px 10px;border:1px solid var(--bd);border-radius:8px;text-decoration:none}.pagination .active{background:var(--primary);color:#fff}

@media(max-width:767px){.desktop-table{display:none}.mobile-cards{display:block;padding-bottom:90px}.field-grid{grid-template-columns:1fr}.page-wrap{padding-bottom:84px}.fab{right:14px;bottom:14px}.toolbar .input{min-width:100%}.matrix-wrap{max-height:calc(100vh - 240px)}}

.role-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0}.role-rule-check{width:22px;height:22px;accent-color:var(--primary);cursor:pointer}.role-rule-check:disabled{cursor:not-allowed;opacity:.55}

.permission-search-row{margin:12px 0 10px}.permission-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.permission-action-row .save-indicator{margin-left:auto}



/* =======================================================
   C.1 — SATU CSS GLOBAL
   Semua halaman internal dan autentikasi memakai file ini.
   Ubah tema/ukuran global melalui variabel :root di bawah.
   ======================================================= */
:root{
  --page-max:1180px;
  --primary:#078795;
  --primary-600:#066f7a;
  --primary-700:#055e68;
  --primary-soft:#e9f8fa;
  --bg:#f4f7fb;
  --card:#ffffff;
  --bd:#dfe5ec;
  --bd-strong:#cbd5e1;
  --txt:#111827;
  --muted:#64748b;
  --success:#16a34a;
  --success-600:#15803d;
  --danger:#ef4444;
  --danger-600:#dc2626;
  --warning:#f59e0b;
  --warning-600:#d97706;
  --radius:12px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --header-height:62px;
}

html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt)}
body{font-family:inherit;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.45}
a{color:var(--primary)}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(7,135,149,.22);
  outline-offset:2px;
}

/* Header */
.app-header{min-height:var(--header-height)}
.app-header .row-1{min-height:var(--header-height);padding:9px 16px}
.app-header .row-1,.app-header .row-2{max-width:var(--page-max)}
.header-btn{box-shadow:none}
.center-title{font-weight:700}
.user-copy strong{font-size:14px}
.user-copy small{font-size:11px}

/* Page */
.page-wrap{min-height:calc(100vh - var(--header-height));padding:0 0 40px}
.page{max-width:var(--page-max);padding:0 16px}
.page.page-medium{max-width:1100px}
.page.page-wide{max-width:none;padding-left:20px;padding-right:20px}
.flash{max-width:var(--page-max);margin:12px auto 0}
@media(max-width:700px){
  .page,.page.page-wide{padding-left:10px;padding-right:10px}
}

/* Common cards */
.card,.toolbar-wrap,.form-card,.table-card,.roles-card,.outlets-card,.users-card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card{padding:16px}
.card.table-card,.roles-card,.outlets-card,.users-card{padding:0!important}
.toolbar-stack{
  margin:12px 0;
  padding:0;
  gap:10px;
}
.toolbar-actions{gap:9px}
.toolbar-actions .select{flex:0 1 220px}
.input,.select,.textarea,select.input,textarea.input{
  min-height:42px;
  border-color:var(--bd-strong);
  border-radius:10px;
  padding:9px 12px;
  background:#fff;
}
.input:hover,.select:hover,.textarea:hover{border-color:#94a3b8}
.input:focus,.select:focus,.textarea:focus,select.input:focus,textarea.input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(7,135,149,.12);
}

/* Buttons */
.btn{
  min-height:38px;
  padding:9px 15px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-weight:650;
  box-shadow:0 1px 3px rgba(15,23,42,.10);
}
.btn:hover{border-color:#b8c3cf;background:#f8fafc}
.btn-primary-ml,.btn-save-primary,.btn-primary{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
}
.btn-primary-ml:hover,.btn-save-primary:hover,.btn-primary:hover{background:var(--primary-600)!important}
.btn-danger-ml,.btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
.btn-sm{min-height:32px;padding:7px 11px}
.btn-icon{width:34px;height:34px;border-radius:9px}

/* Tabs */
.tabs{margin:0 0 12px;border-bottom:1px solid var(--bd)}
.tab{padding:11px 16px}
.tab.active{color:var(--primary);border-color:var(--primary)}

/* Tables */
.table-scroll{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
}
.table th,.table td{
  padding:11px 12px;
  border-bottom:1px solid var(--bd);
  vertical-align:middle;
  text-align:left;
}
.table thead th{
  position:relative;
  background:var(--primary)!important;
  color:#fff!important;
  font-size:12px;
  font-weight:750;
  text-transform:none;
  letter-spacing:0;
  white-space:nowrap;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#f8fbfc}
.table td strong{font-weight:750}
.table td{font-size:13px}
.table-card .table thead th:first-child,
.roles-card .table thead th:first-child,
.outlets-card .table thead th:first-child,
.users-card .table thead th:first-child{border-top-left-radius:0}
.table-card .table thead th:last-child,
.roles-card .table thead th:last-child,
.outlets-card .table thead th:last-child,
.users-card .table thead th:last-child{border-top-right-radius:0}
.empty{padding:28px 16px!important}

/* Status */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
}
.badge.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge.pending{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.badge.muted{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.badge.level{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}

/* Pagination — anchor biasa, bukan Livewire */
.pagination-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-top:1px solid var(--bd);
  background:#fff;
}
.pagination-summary{
  color:var(--muted);
  font-size:12px;
}
.pagination-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.page-link{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid var(--bd-strong);
  border-radius:9px;
  background:#fff;
  color:#1f2937;
  font-size:13px;
  font-weight:650;
  text-decoration:none!important;
  transition:.15s;
}
.page-link:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.page-link.active{background:var(--primary);border-color:var(--primary);color:#fff}
.page-link.disabled{opacity:.42;cursor:not-allowed;background:#f8fafc}
.page-ellipsis{padding:0 4px;color:var(--muted)}
.pagination-mobile{display:none}

/* Modal */
.ml-modal{backdrop-filter:blur(1px)}
.ml-modal .modal-card{border:1px solid var(--bd);padding:0;overflow:hidden}
.modal-head{padding:14px 16px;margin:0;border-bottom:1px solid var(--bd)}
.modal-body{padding:16px;margin:0}
.modal-title{font-size:18px;color:var(--primary)}
.form-actions{padding-top:4px}

/* Drawer */
.app-drawer{width:260px;background:#1f3f92}
.drawer-head{min-height:68px}
.menu-link,.menu-parent{min-height:42px}
.submenu .menu-link{min-height:38px}

/* Mobile */
.mobile-cards{padding:0 0 82px}
.mobile-card{box-shadow:var(--shadow-sm)}
@media(max-width:767px){
  .desktop-table{display:none!important}
  .mobile-cards{display:block}
  .pagination-desktop{display:none}
  .pagination-mobile{display:flex}
  .pagination-shell{justify-content:center}
  .pagination-summary{width:100%;text-align:center}
  .pagination-controls{width:100%;justify-content:center}
  .page-number-desktop{display:none}
  .toolbar-actions{align-items:stretch}
  .toolbar-actions .select,.toolbar-actions .btn{flex:1 1 145px;max-width:none!important}
}
@media(min-width:768px){
  .desktop-table{display:block}
  .mobile-cards{display:none!important}
}

/* Auth */
.auth-card.pro{border-radius:16px}
.auth-body{padding:24px}
.auth-head{padding:28px 24px 20px}
.logo-auth{width:145px;height:auto}

/* Utility */
[hidden]{display:none!important}
.text-center{text-align:center}
.nowrap{white-space:nowrap}
.w-full{width:100%}



/* =======================================================
   C.1 — KOMPONEN MODUL FONDASI
   Ditempatkan global agar halaman tidak menyimpan CSS inline.
   ======================================================= */

/* Akun Saya */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.account-card{padding:16px}
.account-card h3{margin:0 0 12px;color:var(--primary)}

/* Riwayat pelanggan */
.history-card{padding:0!important;overflow:hidden}
.action-badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:12px;font-weight:700}
.customer-history-card{padding-bottom:12px!important}
.customer-history-toolbar{justify-content:space-between;align-items:center;gap:12px}
.customer-history-toolbar>.btn{flex:0 0 auto!important;width:auto!important;min-width:0}
.customer-history-customer{text-align:right}
.customer-history-table-wrap{padding:0 0 8px}
.customer-history-table{width:100%;table-layout:auto}
.customer-history-table th,.customer-history-table td{vertical-align:top}
.customer-history-two-column-table th:nth-child(-n+3),.customer-history-two-column-table td:nth-child(-n+3){width:1%}
.customer-history-two-column-table th:nth-child(-n+3),.customer-history-two-column-table td:nth-child(1),.customer-history-two-column-table td:nth-child(3){white-space:nowrap}
.customer-history-two-column-table td:nth-child(2) .action-badge{white-space:nowrap}
.customer-history-two-column-table td:nth-child(2) .customer-history-reason{white-space:normal;min-width:150px}
.customer-history-col-before,.customer-history-col-after{width:38%}
.customer-history-change-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.customer-history-panel{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;background:#fff}
.customer-history-panel h4{margin:0 0 8px;font-size:13px;color:var(--primary)}
.customer-history-fields{display:grid;gap:8px}
.customer-history-field{display:grid;gap:4px}
.customer-history-field span{font-size:12px;color:var(--muted)}
.customer-history-field strong{font-size:13px;line-height:1.45;color:var(--text);word-break:break-word}
.customer-history-empty{font-size:13px;color:var(--muted)}
.customer-history-reason{margin-top:8px;font-size:12px;color:#475569}
.customer-history-mobile-cards{padding:12px 12px 82px}
.customer-history-mobile-card{margin-bottom:10px}
.customer-history-meta{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 10px;margin-top:10px;font-size:13px}
.customer-history-meta span{color:var(--muted)}
.customer-history-meta strong{word-break:break-word}
.customer-history-mobile-sections{display:grid;gap:10px;margin-top:12px}
.customer-history-reason-mobile{margin-top:10px}

/* Pelanggan */
.master-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.master-toolbar .input{min-width:260px;flex:1}
.master-toolbar .spacer{flex:1}
.master-card{padding:0!important;overflow:hidden}
.badge-status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid}
.badge-aktif{background:rgba(34,197,94,.10);color:#166534;border-color:rgba(34,197,94,.25)}
.badge-nonaktif{background:rgba(239,68,68,.10);color:#991b1b;border-color:rgba(239,68,68,.25)}
.pelanggan-cards{display:none}
.pelanggan-card{min-height:112px;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm);margin-bottom:10px;position:relative}
.pelanggan-card .name{padding-right:92px;font-weight:700;line-height:1.35}
.customer-name-link{color:inherit;font-weight:700;text-decoration:none}
.customer-name-link:hover,.customer-name-link:focus-visible{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.pelanggan-card .phone{display:inline-block;margin-top:5px;color:var(--primary);font-size:13px}
.pelanggan-card .status{position:absolute;top:11px;right:11px}
.pelanggan-card .actions{display:flex;justify-content:flex-end;margin-top:8px}
.pelanggan-card .actions .aksi-group{justify-content:flex-end}

/* Modal lama yang dipertahankan untuk halaman konversi */
.modal-ml{position:fixed;inset:0;z-index:9999;background:rgba(2,6,23,.55);display:none;align-items:flex-start;justify-content:center;padding:14px;overflow:auto}
.modal-ml.show{display:flex}
.modal-ml .box{width:min(720px,100%);background:#fff;border-radius:16px;border:1px solid var(--bd);box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:calc(100dvh - 28px);overflow:auto;display:flex;flex-direction:column}
.modal-ml .head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd)}
.modal-ml .head .title,.modal-ml .title{font-weight:800;color:var(--primary)}
.modal-ml .body{padding:16px}
.modal-ml .foot{padding:14px 16px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:10px}
.btn-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--bd);background:#fff;cursor:pointer}
.btn-x:hover{background:#f8fafc}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:#ef4444}
.form-hint{font-size:12px;color:#b91c1c;margin-top:5px}
.small-muted{font-size:12px;color:#64748b}

/* Detail pelanggan */
.customer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.customer-title{font-size:22px;font-weight:900;color:var(--primary)}
.customer-meta{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-top:12px;font-size:14px}
.customer-meta .k{color:#64748b}
.ml-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);margin-top:14px}
.ml-tabbtn{border:0;background:transparent;padding:12px 16px;font-weight:800;color:#64748b;cursor:pointer;border-bottom:3px solid transparent}
.ml-tabbtn.active{color:var(--primary);border-color:var(--primary)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.addr-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd)}
.addr-title{font-size:17px;font-weight:800;color:var(--primary)}
.addr-cards{display:none}
.addr-card{border:1px solid var(--bd);border-radius:14px;padding:12px;margin-bottom:10px}
.addr-card .label-name{font-weight:800}
.addr-card .address{margin-top:6px;color:#475569;font-size:13px}
.addr-card .actions{margin-top:10px}
.customer-address-table-wrap{overflow-x:hidden}
.customer-address-table{width:100%;min-width:0!important;table-layout:auto}
.customer-detail-page .customer-address-table th,.customer-detail-page .customer-address-table td{white-space:normal!important}
.customer-address-table .customer-address-label,.customer-address-table .customer-address-primary,.customer-address-table .customer-address-actions{width:1%;white-space:nowrap!important}
.customer-address-table td.customer-address-primary,.customer-address-table td.customer-address-actions{display:table-cell;vertical-align:middle}
.customer-address-table td.customer-address-actions>.aksi-group{justify-content:center}
.customer-address-table .customer-address-main{width:auto;min-width:0}
.customer-address-text{line-height:1.45;overflow-wrap:anywhere;word-break:normal}
.customer-address-location{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.customer-address-coordinates{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.customer-address-coordinate-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--primary);font-weight:700}
.customer-address-coordinate-link:hover{text-decoration:underline}
.customer-address-location-mobile{align-items:flex-start;flex-direction:column;gap:5px}
.customer-address-source{font-size:11px;color:var(--muted);word-break:break-word}
.placeholder-pane{padding:30px;text-align:center;color:#64748b}

/* Master Alamat */
.regions-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0}
.regions-toolbar .left form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-mini{padding:0!important;overflow:hidden}
.table-mini{width:100%;border-collapse:collapse}
.table-mini th{background:var(--primary);color:#fff;padding:12px;text-align:left}
.table-mini td{padding:11px 12px;border-bottom:1px solid var(--bd)}
.table-mini .center{text-align:center}
.badge-mini{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.badge-on{background:rgba(22,163,74,.12);color:#166534;border:1px solid rgba(22,163,74,.25)}
.badge-off{background:rgba(239,68,68,.10);color:#991b1b;border:1px solid rgba(239,68,68,.25)}
.region-cards{display:none}
.region-card{background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shadow-sm);padding:12px;margin-bottom:12px}
.region-card .title{font-weight:900;color:var(--primary)}
.region-card .sub{font-size:12px;color:#64748b;margin-top:4px}
.region-kv{display:grid;grid-template-columns:110px 1fr;gap:6px;margin-top:10px;font-size:13px}
.region-card .aksi{margin-top:12px}
.hint-small{font-size:12px;color:#64748b;margin-top:5px}

@media(max-width:767px){
  .account-grid{grid-template-columns:1fr}
  .master-card .table-wrap{display:none}
  .customer-list-card{overflow:visible;border:0;background:transparent;box-shadow:none}
  .pelanggan-cards{display:block}
  .form-grid-2{grid-template-columns:1fr}
  .modal-ml{padding:72px 12px 24px}
  .master-toolbar .input{min-width:100%}
  .customer-meta{grid-template-columns:110px 1fr}
  .desktop-addresses{display:none}
  .addr-cards{display:block;padding:12px}
  .card-mini{display:none}
  .region-cards{display:block;padding-bottom:90px}
  .regions-toolbar .left,.regions-toolbar .left form,.regions-toolbar .left .input{width:100%}
}


/* =======================================================
   C.1.1 — PEMBERSIHAN STYLE INLINE
   Seluruh presentasi halaman aplikasi menggunakan kelas global.
   ======================================================= */
.menu-link.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.drawer-user{margin-bottom:10px}
.drawer-user-name{color:var(--primary)}
.captcha-answer{max-width:150px}
.page.mt-12{margin-top:12px}
.mt-4{margin-top:4px}
.mt-5{margin-top:5px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.m-0{margin:0}
.p-0{padding:0!important}
.p-16{padding:16px}
.overflow-hidden{overflow:hidden}
.text-primary{color:var(--primary)}
.text-muted{color:#64748b}
.text-center{text-align:center!important}
.font-600{font-weight:600}
.font-800{font-weight:800}
.icon-30{font-size:30px}
.inline-flex-gap-8{display:flex;gap:8px}
.is-hidden{display:none!important}
.max-w-105{max-width:105px}
.max-w-150{max-width:150px}
.max-w-210{max-width:210px}
.min-w-120{min-width:120px}
.min-w-240{min-width:240px}
.w-14pct{width:14%}
.w-16pct{width:16%}
.w-24pct{width:24%}
.w-80{width:80px}
.w-120{width:120px}
.w-130{width:130px}
.w-140{width:140px}
.w-150{width:150px}
.w-160{width:160px}
.w-170{width:170px}
.w-180{width:180px}
.w-190{width:190px}
.w-210{width:210px}
.w-225{width:225px}
.modal-width-520{width:min(520px,100%)!important}
.modal-width-420{width:min(420px,100%)!important}
.modal-width-620{width:min(620px,100%)!important}
.outlet-map-canvas{height:420px;border-radius:12px;border:1px solid var(--bd)}

@media(max-width:767px){
  .max-w-210,.max-w-150,.min-w-240{max-width:none;min-width:0}
}

/* =======================================================
   TAHAP D — MODUL FONDASI DATABASE BERSAMA
   ======================================================= */
.account-profile-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:18px}
.account-profile-main{display:flex;align-items:center;gap:14px;min-width:0}
.account-profile-main h2{margin:0 0 5px;color:var(--primary)}
.account-avatar{width:82px;height:82px;border-radius:999px;object-fit:cover;border:3px solid rgba(7,135,149,.18);background:#e5e7eb;flex:0 0 auto}
.account-status-list{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.account-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-kv{display:grid;grid-template-columns:135px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--bd);font-size:13px}
.account-kv:last-child{border-bottom:0}
.account-kv span{color:var(--muted)}
.account-kv strong{word-break:break-word}
.account-pending-box{margin:12px 0;padding:10px 12px;border:1px solid #fcd34d;border-radius:10px;background:#fffbeb;color:#92400e;font-size:13px}
.avatar-upload-preview{display:flex;align-items:center;justify-content:center;margin:2px 0 14px}
.avatar-upload-preview img{width:112px;height:112px;border-radius:999px;object-fit:cover;border:3px solid var(--bd);background:#e5e7eb}

.table-avatar{width:38px;height:38px;border-radius:999px;object-fit:cover;border:1px solid var(--bd);background:#e5e7eb}
.profile-line{display:flex;align-items:center;gap:10px;min-width:0}
.profile-line img{width:44px;height:44px;border-radius:999px;object-fit:cover;background:#e5e7eb;border:1px solid var(--bd)}
.profile-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.profile-copy strong,.profile-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-copy small{color:var(--muted)}
.role-check-grid,.outlet-chip-list,.day-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check-chip{display:flex;align-items:center;gap:8px;margin:0;padding:9px 10px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:#334155;font-weight:600;cursor:pointer}
.check-chip:hover{border-color:var(--primary);background:#f0fdfa}
.check-chip input{accent-color:var(--primary)}
.checkbox-line{display:flex;align-items:center;gap:9px;margin:0;color:#334155;cursor:pointer}
.checkbox-line input{accent-color:var(--primary);width:17px;height:17px}
.readonly-soft,[readonly].input{background:#f8fafc;color:#64748b}

.employee-table{min-width:1160px}
.employee-modal-card{width:min(780px,100%)}
.employee-mobile-kv,.audit-mobile-body{display:grid;grid-template-columns:90px minmax(0,1fr);gap:7px 10px;margin-top:12px;font-size:13px}
.employee-mobile-kv span,.audit-mobile-body span{color:var(--muted)}
.employee-mobile-kv strong,.audit-mobile-body strong{word-break:break-word}

.audit-filter-grid{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) 150px 150px auto auto;width:100%}
.audit-table{min-width:1120px}
.audit-details{margin-top:8px}
.audit-details summary{cursor:pointer;color:var(--primary);font-weight:700}
.audit-json-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.audit-json-grid pre{max-width:360px;max-height:260px;overflow:auto;padding:10px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc;font-size:11px;white-space:pre-wrap;word-break:break-word}

.badge.pending,.pending{background:#fffbeb;color:#92400e;border-color:#fcd34d}

@media(max-width:767px){
  .account-profile-card{align-items:flex-start;flex-direction:column}
  .account-status-list{justify-content:flex-start}
  .account-grid-wide{grid-template-columns:1fr}
  .account-kv{grid-template-columns:105px minmax(0,1fr)}
  .role-check-grid,.outlet-chip-list,.day-check-grid{grid-template-columns:1fr}
  .audit-filter-grid{grid-template-columns:1fr 1fr}
  .audit-filter-grid .btn{width:100%}
  .audit-json-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .audit-filter-grid{grid-template-columns:1fr}
}

/* =======================================================
   TAHAP D.1 — FOTO PROFIL INTERAKTIF
   Digunakan bersama oleh Aktivasi Akun dan Akun Saya.
   ======================================================= */
.avatar-cropper{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin:2px 0 16px;
}
.avatar-cropper-label{
  align-self:stretch;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.2px;
}
.avatar-cropper-preview-wrap{
  position:relative;
  width:220px;
  height:220px;
  max-width:calc(100vw - 88px);
  max-height:calc(100vw - 88px);
}
.avatar-cropper-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:4px solid #fff;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow:0 0 0 2px var(--bd),0 10px 28px rgba(15,23,42,.15);
  outline:none;
  touch-action:none;
}
.avatar-cropper-stage:focus-visible{
  box-shadow:0 0 0 4px rgba(7,135,149,.20),0 10px 28px rgba(15,23,42,.15);
}
.avatar-cropper-stage.is-active{cursor:grab}
.avatar-cropper-stage.is-dragging{cursor:grabbing}
.avatar-cropper-stage img{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--avatar-preview-width,100%);
  height:var(--avatar-preview-height,100%);
  max-width:none;
  object-fit:var(--avatar-preview-fit,cover);
  transform:var(--avatar-preview-transform,translate(-50%,-50%));
  transform-origin:center;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.avatar-camera-button{
  position:absolute;
  right:4px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:3px solid #fff;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.24);
  cursor:pointer;
  transition:transform .15s,background .15s,opacity .15s;
}
.avatar-camera-button:hover{background:var(--primary-600);transform:translateY(-1px)}
.avatar-camera-button:active{transform:translateY(0)}
.avatar-camera-button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.avatar-camera-button svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.avatar-cropper-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.avatar-select-button{margin:0;color:#334155}
.avatar-file-input,.avatar-camera-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.avatar-zoom-control{
  display:grid;
  grid-template-columns:22px minmax(0,240px) 22px;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(300px,100%);
  margin-top:13px;
  color:#64748b;
  font-weight:800;
  text-align:center;
}
.avatar-zoom-control input[type="range"]{
  width:100%;
  accent-color:var(--primary);
  cursor:pointer;
}
.avatar-zoom-control input[type="range"]:disabled{cursor:not-allowed;opacity:.5}
.avatar-cropper-hint,.avatar-cropper-help,.avatar-cropper-error{
  width:100%;
  margin:7px 0 0;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
.avatar-cropper-hint{color:#475569}
.avatar-cropper-help{color:var(--muted)}
.avatar-cropper-error{color:#b91c1c;font-weight:700}

@media(max-width:420px){
  .avatar-cropper-preview-wrap{
    width:196px;
    height:196px;
    max-width:calc(100vw - 72px);
    max-height:calc(100vw - 72px);
  }
  .avatar-camera-button{width:44px;height:44px;right:2px;bottom:10px}
}

/* =======================================================
   TAHAP G — MASTER LAYANAN, PROSES, KUOTA, PEMBAYARAN,
   HARI LIBUR, DAN PENGATURAN APLIKASI
   Seluruh style modul tetap berada pada CSS global.
   ======================================================= */
:root{--app-secondary:#1f3f92}
.app-drawer{background:var(--app-secondary)}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.section-title-row label{margin:0}
.repeat-list{display:grid;gap:8px}
.repeat-row{display:grid;align-items:center;gap:8px;padding:9px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.service-process-row{grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr) 36px}
.quota-item-row{grid-template-columns:minmax(210px,1.4fr) 110px 120px minmax(145px,.8fr) 36px}
.master-mobile-kv{display:grid;grid-template-columns:105px minmax(0,1fr);gap:7px 10px;margin-top:12px;font-size:13px}
.master-mobile-kv span{color:var(--muted)}
.master-mobile-kv strong{word-break:break-word}
.service-table{min-width:1320px}.process-table{min-width:1450px}.quota-table{min-width:1200px}
.master-checkbox{width:19px;height:19px;accent-color:var(--primary);cursor:pointer}
.master-checkbox:disabled{opacity:.55;cursor:not-allowed}
.quota-thumb{display:flex;width:54px;height:68px;border:1px solid var(--bd);border-radius:8px;object-fit:cover;background:#f8fafc}
.quota-thumb-empty{align-items:center;justify-content:center;color:#94a3b8;font-size:20px}
.quota-item-summary{display:flex;flex-direction:column;gap:4px;min-width:250px;font-size:12px;color:#475569}
.quota-mobile-head{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:start;gap:10px}
.payment-filter-grid{display:grid;grid-template-columns:minmax(230px,1.4fr) repeat(4,minmax(145px,.75fr)) auto auto;gap:9px;align-items:center;margin:12px 0}
.payment-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.payment-table{min-width:1500px}
.payment-table .input,.payment-table .select{min-height:36px;padding:7px 9px;font-size:13px}
.payment-table td{text-align:left}
.setting-field label{color:var(--primary)}
.settings-page{padding-bottom:45px}
.settings-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 0 8px;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;padding:9px 13px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:#475569;font-weight:700;cursor:pointer}
.settings-tab:hover{border-color:var(--primary);color:var(--primary)}
.settings-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.settings-save-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--muted);font-size:12px}
.settings-panel{display:none}.settings-panel.active{display:block}
.settings-section-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--bd)}
.settings-section-head>i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-size:20px;flex:0 0 auto}
.settings-section-head h2{margin:0 0 3px;font-size:18px;color:var(--primary)}
.settings-section-head p{margin:0;color:var(--muted);font-size:12px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.setting-field{min-width:0}
.setting-field-wide{grid-column:1/-1}
.setting-color-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}
.setting-color{width:48px;height:42px;padding:3px;border:1px solid var(--bd-strong);border-radius:9px;background:#fff;cursor:pointer}
.setting-file-row{display:grid;gap:7px}
.setting-file-preview{display:flex;min-height:96px;align-items:center;justify-content:center;padding:10px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc;color:var(--muted);font-size:12px;overflow:hidden}
.setting-file-preview img{display:block;max-width:100%;width:auto;max-height:74px;object-fit:contain}
.setting-file-preview-favicon img{width:48px;height:48px;object-fit:contain}
.setting-file-current{padding:8px 10px;border:1px dashed var(--bd-strong);border-radius:9px;background:#f8fafc;color:var(--muted);font-size:12px;word-break:break-all}

@media(max-width:1000px){
  .payment-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payment-filter-grid .btn{width:100%}
}
@media(max-width:767px){
  .service-process-row,.quota-item-row{grid-template-columns:1fr}
  .repeat-row .repeat-remove{justify-self:end}
  .settings-grid{grid-template-columns:1fr}
  .setting-field-wide{grid-column:auto}
  .payment-filter-grid{grid-template-columns:1fr 1fr}
  .payment-action-row .toolbar-actions{width:100%}
  .payment-action-row .toolbar-actions form{flex:1 1 145px}
  .payment-action-row .toolbar-actions .btn{width:100%}
}
@media(max-width:440px){
  .payment-filter-grid{grid-template-columns:1fr}
  .settings-tab span{display:none}
  .settings-tab{width:42px;justify-content:center;padding:8px}
}

/* Tahap G - Pengaturan aplikasi */
.pickup-rule-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.pickup-rule-head .help{margin:0;max-width:760px}.pickup-rules-table th:first-child,.pickup-rules-table td:first-child{width:68px}.pickup-rules-table th:last-child,.pickup-rules-table td:last-child{width:84px}.pickup-rules-table .input{min-width:150px}.settings-extra-group+.settings-extra-group{margin-top:22px}.settings-extra-group h3{margin:0 0 12px;color:var(--app-secondary);font-size:15px}.setting-field>label{overflow-wrap:anywhere}@media(max-width:720px){.pickup-rule-head{align-items:stretch;flex-direction:column}.pickup-rule-head .btn{width:100%}.pickup-rules-table{min-width:720px}}

/* =======================================================
   PERBAIKAN GLOBAL MODAL — isi panjang dapat digulir
   Berlaku untuk seluruh popup aplikasi, termasuk Tahap G.
   ======================================================= */
.ml-modal.show{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden;
}
.ml-modal .modal-card{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  display:flex;
  flex-direction:column;
  width:min(560px,100%);
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  overflow:hidden!important;
}
.ml-modal .modal-card.wide{width:min(760px,100%)}
.ml-modal .modal-head{
  flex:0 0 auto;
}
.ml-modal .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-ml .box{
  overflow:hidden;
}
.modal-ml .body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Master Proses — seluruh pembatasan dari tabel msproses. */
.process-table{min-width:2140px}
.form-section{
  padding:14px;
  margin-bottom:14px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:#fff;
}
.form-section-title{
  margin:0 0 12px;
  color:var(--primary);
  font-size:14px;
  font-weight:800;
}
.process-rule-list{display:grid;gap:10px}
.process-rule-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:#f8fafc;
  cursor:pointer;
}
.process-rule-card>input{flex:0 0 auto;margin-top:2px}
.process-rule-card span{display:grid;gap:3px;min-width:0}
.process-rule-card strong{color:#1f2937;font-size:13px}
.process-rule-card small{color:var(--muted);font-size:12px;line-height:1.45}
.process-rule-card-with-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,220px);
  align-items:end;
  cursor:default;
}
.process-rule-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.process-rule-toggle>input{flex:0 0 auto;margin-top:2px}
.process-rule-hours{display:grid;gap:5px}
.process-rule-hours>label{color:var(--primary);font-size:12px;font-weight:700}

@media(max-width:767px){
  .ml-modal.show{
    align-items:flex-start;
    padding:10px;
  }
  .ml-modal .modal-card{
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .process-rule-card-with-input{grid-template-columns:1fr}
}

/* Master Promo */
.promo-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.promo-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:#fff;
  color:var(--secondary);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.promo-tab:hover{border-color:var(--primary);color:var(--primary)}
.promo-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.promo-table{min-width:1550px}
.promo-title-cell{display:flex;align-items:center;gap:10px;min-width:230px}
.promo-title-cell img{width:86px;height:36px;object-fit:cover;border-radius:8px;border:1px solid var(--bd);background:#f8fafc}
.badge.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.badge.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.ml-modal .modal-card.extra-wide{width:min(1040px,calc(100vw - 28px))}
.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.promo-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.promo-time-row{grid-template-columns:minmax(160px,1fr) minmax(120px,.7fr) minmax(120px,.7fr) auto}
.promo-image-preview{
  aspect-ratio:12/5;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--bd);
  border-radius:12px;
  background:#f8fafc;
  color:var(--muted);
  overflow:hidden;
}
.promo-image-preview img{width:100%;height:100%;object-fit:cover}
.promo-image-preview span{padding:20px;text-align:center}

@media(max-width:767px){
  .field-grid.three,.promo-check-grid{grid-template-columns:1fr}
  .promo-time-row{grid-template-columns:1fr 1fr}
  .promo-time-row select{grid-column:1/-1}
  .promo-time-row .repeat-remove{justify-self:end}
  .ml-modal .modal-card.extra-wide{width:calc(100vw - 20px)}
}

/* Master Promo */
.promo-terms-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.promo-terms-head > label{margin:0}
.promo-terms-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.status-pill.neutral{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#475569;
}
@media (max-width:640px){
  .promo-terms-head{align-items:flex-start;flex-direction:column}
  .promo-terms-tools{justify-content:flex-start}
}

/* Stabilisasi master data */
.compact-repeat-table{border:1px solid var(--line,#d9e2ec);border-radius:12px;overflow:hidden;background:#fff}.compact-repeat-head,.compact-repeat-row{display:grid;grid-template-columns:70px minmax(180px,1fr) minmax(120px,.45fr) 126px;gap:10px;align-items:center;padding:10px 12px}.compact-repeat-head{font-size:.78rem;font-weight:700;color:var(--muted,#64748b);background:#f7fafc;border-bottom:1px solid var(--line,#d9e2ec)}.compact-repeat-row+.compact-repeat-row{border-top:1px solid var(--line,#d9e2ec)}.compact-repeat-row .input,.compact-repeat-row .select{min-height:38px}.quota-items-head,.quota-item-compact{grid-template-columns:82px minmax(200px,1.25fr) minmax(115px,.55fr) minmax(100px,.5fr) minmax(145px,.7fr) 126px}.legacy-label{display:block;font-size:.68rem;color:#64748b;line-height:1.15}.quota-row-actions{display:flex;gap:5px}.inline-master-form{display:flex;gap:10px;align-items:end;margin-bottom:16px}.inline-master-form .input{flex:1}.access-managed-note{padding:11px 13px;border-radius:10px;background:#ecfeff;color:#0e7490;font-weight:600;margin-bottom:12px}.employee-modal-card{width:min(980px,calc(100vw - 24px))}.employee-page .role-check-grid,.employee-page .outlet-chip-list{max-height:190px;overflow:auto}.modal-body{overscroll-behavior:contain}
@media(max-width:760px){.compact-repeat-head{display:none}.compact-repeat-row,.quota-item-compact{grid-template-columns:1fr;padding:12px}.compact-repeat-row>.repeat-number,.quota-item-compact>span:first-child{font-weight:700}.quota-row-actions{justify-content:flex-end}.inline-master-form{align-items:stretch;flex-direction:column}.employee-modal-card{width:calc(100vw - 12px)}}

.compact-row-actions{display:flex;justify-content:flex-end;gap:5px}
@media(max-width:760px){.compact-row-actions{justify-content:flex-end}}

/* Master Bonus */
.bonus-tier-head,.bonus-tier-row{grid-template-columns:110px minmax(150px,1fr) minmax(170px,1fr) minmax(180px,1fr) 52px}
.bonus-tier-row .bonus-tier-remove{justify-self:end}
@media(max-width:760px){.bonus-tier-head{display:none}.bonus-tier-row{grid-template-columns:1fr}.bonus-tier-row .bonus-tier-remove{justify-self:end}}

/* Perbaikan daftar berulang di dalam modal: cegah kolom terpotong. */
.compact-repeat-table{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-gutter:stable;
}
.compact-repeat-head,.compact-repeat-row{min-width:550px}
.quota-items-head,.quota-item-compact{min-width:850px}
.bonus-tier-head,.bonus-tier-row{min-width:850px}
.bonus-scheme-modal-card,.quota-modal-card{
  width:min(1040px,calc(100vw - 28px))!important;
}
.bonus-tier-footer{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.bonus-tier-add-button{flex:0 0 auto}
.bonus-tier-help{
  flex:1 1 360px;
  padding-top:8px;
  line-height:1.5;
}
@media(max-width:760px){
  .compact-repeat-head,.compact-repeat-row,
  .quota-items-head,.quota-item-compact,
  .bonus-tier-head,.bonus-tier-row{min-width:0}
  .bonus-scheme-modal-card,.quota-modal-card{
    width:calc(100vw - 20px)!important;
  }
  .bonus-tier-footer{align-items:stretch}
  .bonus-tier-add-button{
    width:100%;
    justify-content:center;
  }
  .bonus-tier-help{
    flex-basis:100%;
    padding-top:0;
  }
}

/* =======================================================
   SDM DASAR — CUTI, IZIN, SAKIT, DAN TUKAR OFF
   ======================================================= */
.sdm-leave-page{padding-bottom:88px}
.sdm-leave-page .sdm-leave-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.sdm-leave-page .sdm-leave-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:10px;border:1px solid var(--bd);border-radius:11px;background:#fff;color:#64748b;text-decoration:none;font-weight:750;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.sdm-leave-page .sdm-leave-tab:hover{border-color:var(--primary);color:var(--primary)}
.sdm-leave-page .sdm-leave-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.sdm-leave-page .sdm-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px}
.sdm-leave-page .sdm-leave-tab.active .sdm-tab-count{background:#fff;color:#dc2626}
.sdm-leave-page .summary-grid{display:grid;gap:10px;margin-bottom:12px}
.sdm-leave-page .summary-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sdm-leave-page .summary-card{min-width:0;padding:14px;border:1px solid var(--bd);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.sdm-leave-page .summary-card span{display:block;color:#64748b;font-size:12px;margin-bottom:5px}
.sdm-leave-page .summary-card strong{display:block;color:var(--primary);font-size:19px}
.sdm-leave-page .info-strip{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:11px 13px;border:1px solid #bae6fd;border-radius:11px;background:#f0f9ff;color:#075985;font-size:13px;line-height:1.5}
.sdm-leave-page .info-strip i{margin-top:2px}
.sdm-leave-page .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:14px 0 10px}
.sdm-leave-page .section-head h2{margin:0;color:var(--primary);font-size:18px}
.sdm-leave-page .section-head p{margin:4px 0 0;color:#64748b;font-size:13px}
.sdm-leave-page .badge.waiting{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.sdm-leave-page .badge.danger-soft{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.sdm-leave-page .empty-state{grid-column:1/-1;display:flex;min-height:180px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:1px dashed #cbd5e1;border-radius:13px;background:#fff;color:#64748b;text-align:center}
.sdm-leave-page .empty-state i{font-size:30px;color:var(--primary)}
.sdm-leave-page .empty-state.compact{min-height:auto;flex-direction:row;justify-content:flex-start;margin-bottom:12px;padding:12px;text-align:left}
.sdm-leave-page .approval-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sdm-leave-page .approval-card{display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid var(--bd);border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.sdm-leave-page .approval-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sdm-leave-page .approval-card h3{margin:2px 0 0;font-size:17px}
.sdm-leave-page .eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.sdm-leave-page .approval-card p{margin:0;color:#334155;line-height:1.5}
.sdm-leave-page .approval-meta{display:flex;flex-wrap:wrap;gap:10px;color:#64748b;font-size:12px}
.sdm-leave-page .approval-meta span{display:inline-flex;align-items:center;gap:5px}
.sdm-leave-page .approval-actions{display:flex;gap:8px;margin-top:auto}
.sdm-leave-page .table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sdm-leave-page .sdm-date-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sdm-leave-page .sdm-date-chips span{display:inline-flex;padding:4px 7px;border:1px solid #dbeafe;border-radius:999px;background:#eff6ff;color:#1e40af;font-size:11px;font-weight:700}
.sdm-leave-page .document-link{display:inline-flex;align-items:center;gap:5px;margin-top:7px;color:var(--primary);font-size:12px;font-weight:700;text-decoration:none}
.sdm-leave-page .document-link:hover{text-decoration:underline}
.sdm-leave-page .form-error-list{margin:7px 0 0;padding-left:18px}
.sdm-leave-page .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
@media(max-width:767px){
  .sdm-leave-page .sdm-leave-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdm-leave-page .summary-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdm-leave-page .section-head{align-items:stretch;flex-direction:column}
  .sdm-leave-page .section-head .btn{width:100%}
  .sdm-leave-page .approval-grid{grid-template-columns:1fr}
  .sdm-leave-page .approval-actions .btn{flex:1}
  .sdm-leave-page .table-card{margin-bottom:0}
}
@media(max-width:390px){
  .sdm-leave-page .sdm-leave-tab{font-size:12px;padding:8px 5px}
  .sdm-leave-page .summary-card strong{font-size:16px}
}

/* =======================================================
   SDM — DISKRESI DAN RIWAYAT PERSETUJUAN
   ======================================================= */
.sdm-discretion-page{padding-bottom:88px}
.sdm-discretion-page .summary-grid{display:grid;gap:10px;margin-bottom:12px}
.sdm-discretion-page .summary-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sdm-discretion-page .summary-card{min-width:0;padding:14px;border:1px solid var(--bd);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.sdm-discretion-page .summary-card span{display:block;color:#64748b;font-size:12px;margin-bottom:5px}
.sdm-discretion-page .summary-card strong{display:block;color:var(--primary);font-size:19px}
.sdm-discretion-page .info-strip{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:11px 13px;border:1px solid #bae6fd;border-radius:11px;background:#f0f9ff;color:#075985;font-size:13px;line-height:1.5}
.sdm-discretion-page .info-strip i{margin-top:2px}
.sdm-discretion-page .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:14px 0 10px}
.sdm-discretion-page .section-head h2{margin:0;color:var(--primary);font-size:18px}
.sdm-discretion-page .section-head p{margin:4px 0 0;color:#64748b;font-size:13px}
.sdm-discretion-page .filter-card{padding:14px;margin-bottom:12px}
.sdm-discretion-page .field-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sdm-discretion-page .table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sdm-discretion-page .sdm-reason-cell{min-width:220px;max-width:360px;white-space:normal;line-height:1.45}
.sdm-discretion-page .empty-state{display:flex;min-height:160px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:1px dashed #cbd5e1;border-radius:13px;background:#fff;color:#64748b;text-align:center}
.sdm-discretion-page .empty-state.compact{min-height:auto;flex-direction:row;justify-content:flex-start;margin-bottom:12px;padding:12px;text-align:left}
.sdm-discretion-page .pagination-wrap{display:flex;justify-content:center;margin-top:14px}
.sdm-history-list{display:grid;gap:10px}
.sdm-history-item{padding:12px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.sdm-history-item p{margin:7px 0 0;color:#334155;line-height:1.5}
.sdm-history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
@media(max-width:767px){
  .sdm-discretion-page .summary-grid-3{grid-template-columns:1fr}
  .sdm-discretion-page .field-grid-3{grid-template-columns:1fr}
  .sdm-discretion-page .section-head{align-items:stretch;flex-direction:column}
  .sdm-discretion-page .section-head .btn{width:100%}
  .sdm-history-head{flex-direction:column;gap:3px}
}

/* =======================================================
   TAHAP 3A — MASTER DAN KEBIJAKAN PEMBAYARAN
   ======================================================= */
.payment-master-page{padding-bottom:56px}
.payment-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.payment-summary-card{display:flex;flex-direction:column;gap:5px;padding:15px}
.payment-summary-label{color:var(--muted);font-size:12px;font-weight:700}
.payment-summary-card strong{color:var(--primary);font-size:20px;line-height:1.2}
.payment-summary-card small{color:var(--muted);line-height:1.45}
.payment-policy-card,.payment-channel-card{margin-bottom:12px}
.payment-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--bd)}
.payment-section-head h2{margin:0 0 4px;color:var(--primary);font-size:18px}
.payment-section-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.payment-section-head-wrap{align-items:center;flex-wrap:wrap}
.payment-policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.payment-policy-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;grid-column:span 1;padding:13px;border:1px solid var(--bd);border-radius:11px;background:#f8fafc;cursor:pointer}
.payment-policy-switch span{display:flex;min-width:0;flex-direction:column;gap:4px}
.payment-policy-switch strong{color:#0f172a;font-size:13px}
.payment-policy-switch small{color:var(--muted);font-size:11px;line-height:1.45}
.payment-policy-switch input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--primary)}
.payment-policy-action{display:flex;align-items:flex-end;justify-content:flex-end}
.payment-save-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.payment-filter-grid{grid-template-columns:minmax(230px,1.4fr) repeat(3,minmax(145px,.75fr)) auto auto}
.payment-table{min-width:1120px}
.payment-table code{white-space:nowrap;color:#334155}
.payment-table .badge{white-space:nowrap}
.payment-table input:disabled{background:#f8fafc;color:#64748b}
@media(max-width:980px){
  .payment-summary-grid{grid-template-columns:1fr}
  .payment-policy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payment-policy-action{grid-column:1/-1}
}
@media(max-width:700px){
  .payment-policy-grid{grid-template-columns:1fr}
  .payment-policy-action{grid-column:auto}
  .payment-policy-action .btn{width:100%}
  .payment-section-head{align-items:stretch;flex-direction:column}
  .payment-section-head .toolbar-actions{width:100%}
  .payment-section-head .toolbar-actions form{flex:1 1 170px}
  .payment-section-head .toolbar-actions .btn{width:100%}
  .payment-save-row{align-items:flex-start;flex-direction:column}
}

/* =======================================================
   TAHAP 3B — KAS OUTLET DASAR
   ======================================================= */
.outlet-cash-page{padding-bottom:64px}
.cash-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.cash-summary-card{display:flex;min-width:0;flex-direction:column;gap:5px;padding:15px}
.cash-summary-card span{color:var(--muted);font-size:12px;font-weight:700}
.cash-summary-card strong{color:var(--primary);font-size:21px;line-height:1.2}
.cash-summary-card small{color:var(--muted);line-height:1.45}
.cash-info-strip{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:12px 14px;border:1px solid #bae6fd;border-radius:12px;background:#f0f9ff;color:#075985;font-size:13px;line-height:1.5}
.cash-info-strip i{margin-top:2px;font-size:17px}
.cash-info-strip strong{display:block;margin-bottom:2px}
.cash-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 10px}
.cash-section-head h2{margin:0;color:var(--primary);font-size:18px}
.cash-section-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.cash-section-head-bordered{align-items:flex-start;margin:0 0 14px;padding-bottom:13px;border-bottom:1px solid var(--bd)}
.cash-outlet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.cash-outlet-card{display:flex;min-width:0;flex-direction:column;gap:14px;padding:15px}
.cash-outlet-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cash-outlet-card-head h3{margin:4px 0 0;color:#0f172a;font-size:17px}
.cash-outlet-code{display:inline-block;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cash-outlet-balance{display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid #dbeafe;border-radius:11px;background:#f8fbff}
.cash-outlet-balance span{color:#64748b;font-size:12px}
.cash-outlet-balance strong{color:#0f172a;font-size:22px;line-height:1.2}
.cash-opening-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:#64748b;font-size:12px}
.cash-opening-meta span{display:inline-flex;align-items:center;gap:5px}
.cash-outlet-note{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.cash-empty-state{grid-column:1/-1;display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;color:#64748b;text-align:center}
.cash-empty-state i{font-size:28px;color:var(--primary)}
.cash-empty-state.compact{min-height:auto;flex-direction:row;justify-content:flex-start;text-align:left}
.cash-movement-card{padding:15px}
.cash-filter-grid{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(150px,.75fr) minmax(150px,.75fr) auto auto;gap:10px;align-items:end;margin-bottom:12px}
.cash-filter-date{margin:0}
.cash-filter-date label{font-size:11px}
.cash-table-card{margin:0;border:0;box-shadow:none}
.cash-movement-table{min-width:980px}
.cash-description-cell{min-width:260px;max-width:420px;white-space:normal;line-height:1.45}
.cash-amount{white-space:nowrap;font-weight:800}
.cash-amount-in{color:#15803d}
.cash-amount-out{color:#b91c1c}
.cash-mobile-cards{margin-top:0}
.cash-mobile-card p{margin:10px 0;color:#334155;line-height:1.5}
.cash-mobile-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#64748b;font-size:12px}
.cash-permanent-warning{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:12px;border:1px solid #fed7aa;border-radius:11px;background:#fff7ed;color:#9a3412;font-size:13px;line-height:1.5}
.cash-permanent-warning i{margin-top:2px;font-size:18px}
.cash-permanent-warning strong{display:block;margin-bottom:2px}
.money-prefix-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}
.money-prefix-field>span{display:flex;align-items:center;padding:0 11px;border:1px solid var(--bd);border-right:0;border-radius:10px 0 0 10px;background:#f8fafc;color:#475569;font-weight:800}
.money-prefix-field>.input{border-radius:0 10px 10px 0}
.cash-confirm-check{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:11px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc;color:#334155;font-size:12px;line-height:1.5;cursor:pointer}
.cash-confirm-check input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--primary)}
@media(max-width:980px){
  .cash-summary-grid,.cash-outlet-grid{grid-template-columns:1fr}
  .cash-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cash-filter-grid>select{grid-column:1/-1}
}
@media(max-width:700px){
  .cash-section-head{align-items:stretch;flex-direction:column}
  .cash-filter-grid{grid-template-columns:1fr}
  .cash-filter-grid>select{grid-column:auto}
  .cash-filter-grid .btn{width:100%}
  .cash-outlet-card-head{flex-direction:column}
  .cash-outlet-balance strong{font-size:19px}
  .cash-mobile-foot{align-items:flex-start;flex-direction:column}
}

/* Buku Kas Karyawan — koreksi Tahap 3B-3D */
.employee-cash-page{padding-bottom:64px}
.employee-cash-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.employee-cash-summary-card{display:flex;min-width:0;flex-direction:column;gap:5px;padding:15px}
.employee-cash-summary-card span{color:var(--muted);font-size:12px;font-weight:700}
.employee-cash-summary-card strong{color:var(--primary);font-size:20px;line-height:1.25}
.employee-cash-summary-card small{color:var(--muted);line-height:1.45}
.employee-cash-private-card{border-style:dashed}
.employee-cash-action-head{align-items:center}
.employee-cash-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.employee-cash-no-session{min-height:170px;margin-bottom:14px}
.employee-cash-no-session strong{color:#0f172a}
.employee-cash-no-session span{max-width:520px}
.employee-cash-history-card{margin-top:14px;padding:15px}
.employee-cash-movement-table{min-width:1050px}
.employee-cash-session-table{min-width:900px}
.employee-cash-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) repeat(2,minmax(150px,.8fr)) auto auto;gap:10px;align-items:end;margin-bottom:12px}
.employee-cash-error-list{margin:8px 0 0;padding-left:18px}
.employee-cash-difference{white-space:nowrap;font-weight:800}
.employee-cash-difference.is-zero{color:#15803d}
.employee-cash-difference.has-difference{color:#b91c1c}

@media (max-width:1100px){
  .employee-cash-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .employee-cash-filter-grid .btn{width:100%}
}
@media (max-width:767px){
  .employee-cash-summary-grid{grid-template-columns:1fr}
  .employee-cash-action-head{align-items:stretch;flex-direction:column}
  .employee-cash-actions{justify-content:stretch}
  .employee-cash-actions .btn{width:100%}
  .employee-cash-filter-grid{grid-template-columns:1fr}
}

/* Tahap 4A — Penjualan / Top Up Paket */
.quota-sale-layout,.quota-payment-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}.quota-sale-main{display:grid;gap:14px}.quota-sale-section,.quota-sale-summary,.quota-payment-card,.quota-payment-head{padding:16px}.section-title-row,.quota-payment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.section-title-row h2,.quota-sale-summary h2,.quota-payment-card h2,.quota-payment-head h2{margin:0;font-size:18px}.section-title-row p,.quota-payment-head p{margin:4px 0 0;color:var(--muted)}.customer-search-box{position:relative;margin-top:14px}.customer-search-results{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:280px;overflow:auto}.customer-search-results button{display:flex;width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:12px;text-align:left;flex-direction:column;gap:3px;cursor:pointer}.customer-search-results button:hover{background:var(--soft)}.customer-search-results button span{color:var(--muted);font-size:13px}.selected-customer{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);display:flex;justify-content:space-between;align-items:center;gap:10px}.selected-customer div{display:flex;flex-direction:column}.selected-customer small{color:var(--muted);margin-top:3px}.quota-package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.quota-package-card{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;cursor:pointer;background:#fff}.quota-package-card:has(.quota-package-check:checked){border-color:var(--primary);box-shadow:0 0 0 2px rgba(7,135,149,.12)}.quota-package-check{margin-top:4px}.quota-package-copy{display:flex;flex-direction:column;gap:5px}.quota-package-copy small{color:var(--muted);font-size:12px}.quota-package-copy b{color:var(--primary)}.promo-current{display:flex;flex-direction:column;gap:4px;border:1px dashed var(--line);border-radius:12px;padding:12px;margin-top:12px}.quota-sale-summary{position:sticky;top:92px}.summary-items{display:grid;gap:8px;margin:12px 0}.summary-items>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}.summary-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.summary-line.benefit strong{color:#078f64}.summary-line.total{font-size:18px}.quota-sale-submit{width:100%;margin-top:14px}.promo-picker-modal .box{max-width:560px}.promo-picker-list{display:grid;gap:10px;max-height:55vh;overflow:auto}.promo-choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px;cursor:pointer}.promo-choice:has(input:checked){border-color:var(--primary);background:var(--soft)}.promo-choice>span{display:flex;flex-direction:column;gap:4px}.promo-choice small{color:var(--muted)}.promo-terms{border:0;background:none;color:var(--primary);padding:0;width:max-content;cursor:pointer;font-weight:700}.promo-picker-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:14px 16px}.promo-picker-footer>div{display:flex;flex-direction:column;gap:3px}.quota-payment-head{margin-bottom:14px}.payment-action-card{display:grid;gap:12px}.payment-value-box{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:5px}.payment-value-box strong{font-size:22px;letter-spacing:1px}.qr-container{display:flex;justify-content:center;align-items:center;padding:12px}.qr-container img,.qr-container canvas{max-width:240px;width:100%;height:auto}.btn-block{width:100%;justify-content:center}.payment-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px;border-radius:14px;background:#ecfdf5;color:#087a55}.payment-success i{font-size:34px}.public-payment-body{background:#f2f6f8}.public-payment-page{max-width:520px;margin:0 auto;padding:24px 14px}.public-payment-card{padding:20px;display:grid;gap:14px}.public-payment-brand{display:flex;align-items:center;gap:8px;color:var(--primary)}.public-payment-card h1{margin:4px 0 0}.public-payment-card p{margin:0;color:var(--muted)}.public-payment-total{text-align:center;background:var(--soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:5px}.public-payment-total strong{font-size:28px}.btn-danger-soft{background:#fff1f2;color:#be123c;border-color:#fecdd3}
@media(max-width:900px){.quota-sale-layout,.quota-payment-layout{grid-template-columns:1fr}.quota-sale-summary{position:static}.quota-package-grid{grid-template-columns:1fr}}@media(max-width:560px){.quota-package-card{grid-template-columns:auto minmax(0,1fr);}.section-title-row{flex-direction:column}.section-title-row .btn{width:100%;justify-content:center}.promo-picker-modal .box{height:min(88vh,760px);max-height:none;display:flex;flex-direction:column}.promo-picker-modal .body{flex:1;overflow:auto}.promo-picker-footer{position:sticky;bottom:0;background:#fff}.quota-payment-head{flex-direction:column}}

/* Tahap 4A — penyederhanaan halaman Top Up mengikuti kuota_jual */
.quota-sale-simple{max-width:var(--page-max);margin-left:auto;margin-right:auto}
.quota-sale-simple-card{padding:18px}
.quota-sale-location-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.quota-sale-location-row h1{margin:0;font-size:22px}
.quota-sale-location-row p{margin:4px 0 0;color:var(--muted)}
.quota-location-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.quota-location-badge{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
.quota-location-badge.info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.quota-location-badge.ok{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.quota-location-badge.bad{border-color:#fecaca;background:#fff1f2;color:#b91c1c}
.quota-location-dot{width:10px;height:10px;flex:0 0 auto;border-radius:999px;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.65)}
.quota-simple-section{padding:15px 0;border-bottom:1px solid var(--line)}
.quota-simple-section:last-of-type{border-bottom:0}
.quota-inline-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:start}
.form-hint{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45}
.quota-package-picker-grid{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:10px;align-items:end}
.quota-package-picker-grid .group{margin:0}
.quota-package-add-action{display:flex;align-items:flex-end}
.quota-package-add-action .btn{white-space:nowrap}
.quota-selected-packages{display:grid;gap:8px;margin-top:12px}
.quota-selected-package-row{display:grid;grid-template-columns:minmax(0,1fr) 82px minmax(105px,auto) 38px;gap:10px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff}
.quota-selected-package-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.quota-selected-package-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quota-selected-package-copy small{color:var(--muted);font-size:12px;line-height:1.35}
.quota-selected-package-qty{display:flex;flex-direction:column;gap:3px}
.quota-selected-package-qty label{color:var(--muted);font-size:11px;font-weight:800}
.quota-selected-package-qty .input{height:38px;padding:7px 8px;text-align:center}
.quota-selected-package-row>strong{text-align:right;white-space:nowrap;color:var(--primary)}
.quota-price-summary{display:grid;gap:0}
.quota-price-summary .summary-line.no-border{border-top:0}
.quota-promo-benefit{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:10px 11px;border:1px dashed var(--line);border-radius:11px;background:var(--soft)}
.quota-promo-benefit span{font-size:12px;color:var(--muted)}
.quota-promo-button{width:max-content;margin-top:9px}
.quota-payment-picker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.quota-payment-picked{color:var(--muted);font-size:13px}
.quota-sale-form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px}
.quota-payment-method-modal .box{max-width:520px}
.quota-payment-method-list{display:grid;gap:9px}
.quota-payment-method-option{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-align:left;cursor:pointer}
.quota-payment-method-option:hover{background:var(--soft)}
.quota-payment-method-option.selected{border-color:var(--primary);background:var(--soft);box-shadow:0 0 0 2px rgba(7,135,149,.10)}
.quota-payment-method-icon{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;background:var(--soft);color:var(--primary);font-size:19px}
.quota-payment-method-option>span:nth-child(2){display:flex;min-width:0;flex-direction:column;gap:3px}
.quota-payment-method-option small{color:var(--muted)}
.quota-payment-check{color:#94a3b8;font-size:19px}
.quota-payment-method-option.selected .quota-payment-check::before{content:"\f26a"}
.quota-payment-method-option.selected .quota-payment-check{color:var(--primary)}
.report-filter-grid{display:grid;grid-template-columns:minmax(210px,1.3fr) minmax(160px,.8fr) minmax(145px,.65fr) minmax(145px,.65fr) auto;gap:10px;align-items:end}
.report-filter-grid .group{margin:0}
.report-filter-actions{display:flex;gap:8px;align-items:center}
.date-input-wrap{display:flex;width:100%;min-width:0;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.date-input-wrap input{display:block;width:100%;min-width:0;border:0;background:transparent;padding:0;color:inherit;font:inherit;outline:none}
@media(max-width:900px){
  .quota-sale-simple{max-width:none}
  .report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-filter-actions{grid-column:1/-1}
}
@media(max-width:700px){
  .quota-sale-simple-card{padding:14px}
  .quota-sale-location-row{flex-direction:column}
  .quota-location-actions{width:100%;justify-content:flex-start}
  .quota-location-badge{max-width:calc(100% - 86px)}
  .quota-inline-search{grid-template-columns:minmax(0,1fr) auto}
  .quota-inline-search .btn{padding-left:11px;padding-right:11px}
  .quota-package-picker-grid{grid-template-columns:minmax(0,1fr) 92px}
  .quota-package-add-action{grid-column:1/-1}
  .quota-package-add-action .btn{width:100%;justify-content:center}
  .quota-selected-package-row{grid-template-columns:minmax(0,1fr) 72px 38px}
  .quota-selected-package-row>strong{grid-column:1/2;grid-row:2;text-align:left}
  .quota-selected-package-row>.remove-package{grid-column:3;grid-row:1/3}
  .quota-payment-picker-row{align-items:stretch;flex-direction:column}
  .quota-payment-picker-row .btn,.quota-promo-button{width:100%;justify-content:center}
  .quota-sale-form-actions .btn{flex:1;justify-content:center}
  .report-filter-grid{grid-template-columns:1fr}
  .report-filter-actions{grid-column:auto;flex-direction:column}
  .report-filter-actions .btn{width:100%;justify-content:center}
}

/* Koreksi Top Up Paket — outlet berbasis role, kartu paket, dan promo-metode bayar */
.quota-sale-fieldset{min-width:0;margin:0;padding:0;border:0}
.quota-sale-fieldset.is-location-locked{opacity:.62}
.quota-sale-fieldset:disabled{cursor:not-allowed}
.quota-sale-fieldset:disabled .quota-simple-section,.quota-sale-fieldset:disabled .quota-sale-form-actions{pointer-events:none}
.quota-sale-simple-card.is-operational-locked{padding:22px}
.quota-work-lock{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;padding:20px;border:1px solid #fdbaaa;border-radius:18px;background:linear-gradient(135deg,#fff9f2 0%,#fff1f2 100%);box-shadow:0 12px 30px rgba(127,29,29,.08)}
.quota-work-lock-icon{display:flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#f97316 0%,#dc2626 100%);box-shadow:0 8px 18px rgba(220,38,38,.22);color:#fff;font-size:24px}
.quota-work-lock-copy{min-width:0}
.quota-work-lock-kicker{display:block;color:#b45309;font-size:11px;font-weight:900;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}
.quota-work-lock h1{margin:5px 0 7px;color:#7f1d1d;font-size:20px;line-height:1.22}
.quota-work-lock p{margin:0;color:#7c2d12;font-size:14px;line-height:1.55}
.quota-work-lock-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid rgba(194,65,12,.16);border-radius:12px;background:rgba(255,255,255,.74);color:#92400e;font-size:12px;font-weight:700;line-height:1.45}
.quota-work-lock-note i{flex:0 0 auto;margin-top:1px;color:#c2410c}
.quota-work-lock-actions{display:flex;justify-content:flex-end;margin-top:16px}
.quota-work-lock-actions .btn{min-height:44px}
.operational-readonly-notice{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;margin:14px 0;padding:16px;border:1px solid #fdbaaa;border-radius:16px;background:linear-gradient(135deg,#fff9f2 0%,#fff1f2 100%);box-shadow:0 8px 24px rgba(127,29,29,.07)}
.operational-readonly-notice-icon{display:flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,#f97316 0%,#dc2626 100%);box-shadow:0 7px 16px rgba(220,38,38,.2);color:#fff;font-size:20px}
.operational-readonly-notice-copy{display:grid;min-width:0;gap:4px;overflow-wrap:anywhere}
.operational-readonly-notice-kicker{color:#b45309;font-size:10px;font-weight:900;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}
.operational-readonly-notice-title{color:#7f1d1d;font-size:15px;line-height:1.3}
.operational-readonly-notice p{margin:1px 0 0;color:#7c2d12;font-size:13px;line-height:1.5}
.operational-readonly-notice-note{margin-top:5px;padding-top:7px;border-top:1px solid rgba(194,65,12,.13);color:#92400e;font-size:12px;font-weight:700;line-height:1.4}
.quota-add-customer-button{min-height:42px;align-self:start;white-space:nowrap}
.quota-selected-packages{gap:10px}
.quota-selected-package-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.quota-selected-package-icon{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:#fff;color:var(--primary);font-size:19px;border:1px solid var(--line)}
.quota-selected-package-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.quota-selected-package-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.quota-selected-package-copy small{color:var(--muted);font-size:12px;line-height:1.35}
.quota-selected-package-copy span{color:var(--primary);font-size:12px;font-weight:800}
.quota-selected-package-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.quota-package-stepper{display:grid;grid-template-columns:32px 46px 32px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.quota-stepper-button{display:flex;height:36px;align-items:center;justify-content:center;border:0;background:#fff;color:var(--primary);cursor:pointer}
.quota-stepper-button:hover{background:var(--soft)}
.quota-package-stepper input{width:46px;height:36px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fff;text-align:center;font:inherit;font-weight:800;outline:none;-moz-appearance:textfield}
.quota-package-stepper input::-webkit-outer-spin-button,.quota-package-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quota-package-line-total{min-width:105px;text-align:right;color:var(--primary);white-space:nowrap}
.quota-promo-payment-notice{margin-top:9px;padding:9px 11px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.45}
.quota-promo-payment-notice.removed{border:1px solid #fecaca;background:#fff1f2;color:#b91c1c}
.quota-promo-payment-notice.restored{border:1px solid #a7f3d0;background:#ecfdf5;color:#047857}
.quota-payment-promo-tag{display:inline-flex;width:max-content;margin-top:3px;padding:3px 7px;border-radius:999px;font-size:11px;font-style:normal;font-weight:800}
.quota-payment-promo-tag.compatible{background:#ecfdf5;color:#047857}
.quota-payment-promo-tag.incompatible{background:#fff1f2;color:#b91c1c}
.quota-payment-method-option.promo-incompatible{border-color:#fecaca}
.quota-payment-warning-box{max-width:480px}
.quota-payment-warning-message{margin:0;line-height:1.55}
.quota-sale-form-actions .btn,.quota-payment-picker-row .btn,.quota-promo-button{width:auto;min-width:0}
@media(max-width:700px){
  .quota-inline-search{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .quota-add-customer-button{min-height:44px;padding-left:14px;padding-right:14px}
  .quota-selected-package-card{grid-template-columns:40px minmax(0,1fr);align-items:start}
  .quota-selected-package-icon{width:38px;height:38px}
  .quota-selected-package-controls{grid-column:1/-1;justify-content:space-between;padding-top:3px}
  .quota-package-line-total{margin-left:auto;min-width:0}
  .quota-payment-picker-row{align-items:center;flex-direction:row}
  .quota-payment-picker-row .btn,.quota-promo-button{width:auto;justify-content:center}
  .quota-sale-form-actions{justify-content:flex-end}
  .quota-sale-form-actions .btn{flex:0 0 auto;min-width:92px;justify-content:center}
}
@media(max-width:420px){
  .quota-inline-search{grid-template-columns:1fr}
  .quota-add-customer-button{width:max-content}
  .quota-selected-package-controls{flex-wrap:wrap}
  .quota-package-line-total{order:3;width:100%;text-align:left}
}


/* Finalisasi UI Top Up Paket — perataan pelanggan, kartu ringkas, dan alur promo lebih dahulu */
.quota-sale-location-row{justify-content:flex-end}
.quota-sale-location-row .quota-location-actions{width:100%}
.quota-inline-search{align-items:stretch}
.quota-inline-search .customer-search-box{margin-top:0;min-width:0}
.quota-inline-search .customer-search-box .input{min-height:44px}
.quota-add-customer-button{height:44px;min-height:44px;align-self:stretch}
.quota-selected-customer-compact{margin-top:8px;background:#fff}
.quota-selected-customer-compact div{gap:2px}
.quota-selected-customer-compact span{color:var(--muted);font-size:13px}
.quota-selected-package-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;background:#fff;padding:12px 13px}
.quota-selected-package-copy{gap:5px}
.quota-selected-package-copy strong{white-space:normal;font-size:15px}
.quota-package-detail-list{display:grid;gap:2px}
.quota-package-detail-line{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.quota-promo-choice-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.quota-promo-choice-row .quota-promo-benefit{flex:1;min-width:0;margin-top:0}
.quota-promo-choice-row .quota-promo-button{flex:0 0 auto;margin-top:0}
.quota-price-summary.is-simple .summary-line.total{border-top:0;padding-top:4px}
.quota-sale-form-actions .btn:disabled,.quota-payment-picker-row .btn:disabled,.quota-promo-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:700px){
  .quota-inline-search{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  .quota-add-customer-button{height:44px;min-height:44px;align-self:stretch}
  .quota-selected-package-card{grid-template-columns:1fr;padding:11px 12px}
  .quota-selected-package-controls{grid-column:auto;justify-content:flex-start;flex-wrap:wrap}
  .quota-package-line-total{margin-left:auto}
  .quota-promo-choice-row{align-items:stretch;flex-direction:column}
  .quota-promo-choice-row .quota-promo-button{width:max-content}
}
@media(max-width:420px){
  .quota-inline-search{grid-template-columns:minmax(0,1fr) auto}
  .quota-add-customer-button{width:auto;padding-left:12px;padding-right:12px}
  .quota-package-line-total{order:initial;width:auto;text-align:right}
}

/* Hotfix Top Up Paket — simpan/metode bayar dan hierarki kartu paket */
.quota-selected-package-copy > strong{
  color:var(--primary);
  font-weight:800;
}
.quota-selected-package-copy .quota-package-detail-line{
  color:var(--txt);
  font-weight:400;
}
.quota-selected-package-copy > span:not(.quota-package-detail-line){
  color:var(--txt);
  font-weight:400;
}
.quota-package-line-total{
  color:var(--primary);
  font-weight:800;
}
.quota-package-stepper{
  display:flex;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.quota-stepper-button{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:0 0 34px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:var(--primary);
  cursor:pointer;
}
.quota-stepper-button:hover{
  border-color:var(--primary);
  background:var(--soft);
}
.quota-package-stepper input.selected-package-qty-input{
  display:block;
  width:48px;
  height:34px;
  padding:0 6px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:var(--txt);
  text-align:center;
  font:inherit;
  font-weight:800;
  line-height:32px;
  outline:none;
  -moz-appearance:textfield;
  appearance:textfield;
}
.quota-package-stepper input.selected-package-qty-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(7,135,149,.12);
}
.quota-payment-validation-notice{
  margin-top:9px;
  padding:9px 11px;
  border:1px solid #fecaca;
  border-radius:10px;
  background:#fff1f2;
  color:#b91c1c;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

/* Tahap 4C — tampilan saldo, lot, dan riwayat kuota pelanggan */
.customer-quota-panel{padding:16px}
.customer-quota-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.customer-quota-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.customer-quota-summary>div{display:flex;min-height:72px;flex-direction:column;justify-content:center;gap:4px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--primary-soft)}
.customer-quota-summary span{color:var(--muted);font-size:12px}
.customer-quota-summary strong{color:var(--primary);font-size:18px}
.customer-quota-section{margin-top:18px}
.customer-quota-section-title{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.customer-quota-section-title small{color:var(--muted)}
.customer-quota-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.customer-quota-card{display:grid;gap:8px;padding:13px 14px;border:1px solid var(--bd);border-left-width:4px;border-radius:13px;background:#fff}
.customer-quota-card.legacy{border-left-color:#64748b}
.customer-quota-card.accumulative{border-left-color:var(--primary)}
.customer-quota-card.non-accumulative{border-left-color:#8b5cf6}
.customer-quota-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.customer-quota-card-top strong{font-size:15px}
.customer-quota-card-top span{color:var(--primary);font-size:16px;font-weight:800;white-space:nowrap}
.customer-quota-card-package{color:var(--txt);font-size:13px}
.customer-quota-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
.customer-quota-card-meta span{display:inline-flex;align-items:center;gap:5px}
.customer-quota-empty{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--muted);text-align:center}
.customer-quota-empty i{color:var(--primary);font-size:30px}
.customer-quota-empty strong{color:var(--txt);font-size:16px}
.badge.quota-source{white-space:nowrap}
.badge.quota-source.legacy{background:#eef2f7;color:#475569}
.badge.quota-source.new,.badge.quota-source.accumulative{background:#e6f7f8;color:#087985}
.badge.quota-source.non-accumulative{background:#f3e8ff;color:#7e22ce}
.customer-quota-history-table{min-width:780px}
.customer-quota-history-table td{vertical-align:middle}
.quota-delta{white-space:nowrap}
.quota-delta.positive{color:#087985}
.quota-delta.negative{color:#b91c1c}
.quota-history-focus td{background:#ecfeff}
.customer-quota-history-card .pagination-wrap{padding:12px 16px;border-top:1px solid var(--bd)}

@media (max-width:760px){
 .customer-quota-head{align-items:center;flex-direction:row}
 .customer-quota-head .aksi-group{justify-content:flex-start}
 .customer-quota-summary{grid-template-columns:1fr}
 .customer-quota-summary>div{min-height:62px}
 .customer-quota-grid{grid-template-columns:1fr}
 .customer-quota-section-title{align-items:flex-start;flex-direction:column;gap:5px}
 .customer-quota-card-meta{align-items:flex-start;flex-direction:column;gap:4px}
}

/* Hotfix Tahap 4C — tanda pemakaian dan saldo setelah transaksi */
.quota-delta.neutral{color:var(--muted)}
.quota-balance{color:var(--txt);white-space:nowrap}

/* Ringkasan kuota per layanan dan masa aktif */
.customer-quota-summary-wrap{border-top:1px solid var(--bd)}
.customer-quota-summary-table{min-width:620px}
.customer-quota-summary-table th,.customer-quota-summary-table td{vertical-align:middle}
.customer-quota-summary-table th:nth-child(2),.customer-quota-summary-table td:nth-child(2){width:170px}
.customer-quota-summary-table th:nth-child(3),.customer-quota-summary-table td:nth-child(3){width:190px}
.customer-quota-inactive-toggle{display:flex;justify-content:flex-start;padding:12px 16px;border-top:1px solid var(--bd);background:#fafafa}
.customer-quota-inactive-toggle .btn{display:inline-flex;align-items:center;gap:7px}
.customer-quota-inactive-head{border-top:1px solid var(--bd);background:#fff}
.customer-quota-inactive .customer-quota-summary-table td{color:#475569}
.quota-detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.quota-detail-summary>div{display:flex;min-height:68px;flex-direction:column;justify-content:center;gap:5px;padding:11px 13px;border:1px solid var(--bd);border-radius:11px;background:var(--primary-soft)}
.quota-detail-summary span{color:var(--muted);font-size:12px}
.quota-detail-summary strong{color:var(--txt);font-size:16px}

@media (max-width:760px){
 .quota-detail-summary{grid-template-columns:1fr}
 .quota-detail-summary>div{min-height:58px}
}


/* Penyederhanaan Detail Pelanggan dan tabel kuota pada layar kecil */
.customer-identity{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.customer-phone{color:var(--muted);font-size:14px;text-decoration:none}
.customer-phone:hover{color:var(--primary)}
.customer-status{margin-top:2px}
.quota-history-mobile{display:none}

@media (max-width:760px){
 .customer-head{gap:14px}
 .customer-head>.aksi-group{width:100%;justify-content:flex-start}
 .customer-title{font-size:21px;line-height:1.2}
 .customer-quota-head{flex-direction:row;align-items:center;flex-wrap:wrap}
 .customer-quota-head>.btn{width:auto;flex:0 0 auto;justify-content:center}
 .customer-quota-summary-wrap{overflow:visible}
 .customer-quota-summary-table{min-width:0;width:100%;table-layout:fixed}
 .customer-quota-summary-table th,.customer-quota-summary-table td{padding:10px 8px;font-size:12px}
 .customer-quota-summary-table th:nth-child(1),.customer-quota-summary-table td:nth-child(1){width:28%}
 .customer-quota-summary-table th:nth-child(2),.customer-quota-summary-table td:nth-child(2){width:22%}
 .customer-quota-summary-table th:nth-child(3),.customer-quota-summary-table td:nth-child(3){width:30%}
 .customer-quota-summary-table th:nth-child(4),.customer-quota-summary-table td:nth-child(4){width:20%;padding-left:8px;padding-right:14px}
 .customer-quota-summary-table .btn-icon{width:34px;height:34px}
 .customer-quota-summary-table .quota-balance{white-space:normal}
 .quota-detail-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .quota-detail-summary>div{min-height:66px;padding:9px 8px}
 .quota-detail-summary strong{font-size:14px;line-height:1.25}
 .quota-history-desktop{display:none}
 .quota-history-mobile{display:block}
 .customer-quota-history-mobile-table{width:100%;table-layout:fixed}
 .customer-quota-history-mobile-table th,.customer-quota-history-mobile-table td{padding:9px 8px;font-size:12px;vertical-align:top}
 .customer-quota-history-mobile-table th:nth-child(1),.customer-quota-history-mobile-table td:nth-child(1){width:48%}
 .customer-quota-history-mobile-table th:nth-child(2),.customer-quota-history-mobile-table td:nth-child(2){width:26%}
 .customer-quota-history-mobile-table th:nth-child(3),.customer-quota-history-mobile-table td:nth-child(3){width:26%}
 .quota-mobile-description{display:flex;flex-direction:column;gap:2px;min-width:0}
 .quota-mobile-description strong{font-size:12px}
 .quota-mobile-description span{color:var(--txt)}
 .quota-mobile-description small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
 .customer-quota-history-mobile-table .quota-delta,.customer-quota-history-mobile-table .quota-balance{white-space:normal;line-height:1.25}
}


/* Perapian Detail Pelanggan pada layar kecil */
.customer-detail-page{min-width:0;overflow-x:hidden}
@media (max-width:760px){
 .customer-head>.customer-actions{display:grid;width:100%;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;white-space:normal}
 .customer-actions .btn{min-width:0;width:100%;padding-left:8px;padding-right:8px;justify-content:center;white-space:nowrap}
 .customer-detail-page .ml-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .customer-detail-page .ml-tabbtn{min-width:0;padding-left:6px;padding-right:6px}
 .customer-detail-page .addr-head{gap:10px}
 .customer-detail-page #tab-alamat .addr-head{align-items:center;flex-direction:row;flex-wrap:wrap}
 .customer-detail-page #tab-alamat .addr-head>.btn,
 .customer-detail-page #tab-kuota .customer-quota-head>.btn{width:auto;flex:0 0 auto;justify-content:center}
 .customer-detail-page .addr-cards>.empty{padding:8px 4px!important;text-align:left!important;line-height:1.55;overflow-wrap:anywhere}
}
/* Hotfix tabel kuota mobile: pertahankan struktur tabel penuh dan garis baris utuh */
@media (max-width:760px){
 .customer-quota-summary-wrap,
 .quota-history-mobile{
  width:100%;
  overflow:hidden;
 }
 .customer-quota-summary-table,
 .customer-quota-history-mobile-table{
  display:table!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  table-layout:fixed!important;
  overflow:visible!important;
 }
 .customer-quota-summary-table thead,
 .customer-quota-history-mobile-table thead{display:table-header-group!important}
 .customer-quota-summary-table tbody,
 .customer-quota-history-mobile-table tbody{display:table-row-group!important}
 .customer-quota-summary-table tr,
 .customer-quota-history-mobile-table tr{display:table-row!important}
 .customer-quota-summary-table th,
 .customer-quota-summary-table td,
 .customer-quota-history-mobile-table th,
 .customer-quota-history-mobile-table td{
  display:table-cell!important;
  white-space:normal!important;
  border-bottom:1px solid var(--bd)!important;
 }
 .customer-quota-summary-table tbody tr:last-child td,
 .customer-quota-history-mobile-table tbody tr:last-child td{border-bottom:0!important}
 .quota-mobile-description{display:flex;flex-direction:column;gap:2px;min-width:0}
}

/* Tahap 5A — penerimaan dan nota dasar */
.order-stage5-page{max-width:1180px;margin-left:auto;margin-right:auto}
.order-stage5-card,.order-detail-card{padding:18px}
.order-stage5-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.order-stage5-head h1{margin:0;color:var(--primary);font-size:22px;line-height:1.25}
.order-stage5-head p{margin:5px 0 0;color:var(--muted)}
.order-alert ul{margin:6px 0 0;padding-left:20px}
.order-section{padding:17px 0;border-top:1px solid var(--bd)}
.order-section:first-of-type{border-top:0}
.order-section h2,.order-section-title-row h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--primary);font-size:15px}
.order-section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.order-field-max{max-width:620px}
.order-delivery-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px}
.order-readonly-field{display:flex;max-width:620px;flex-direction:column;gap:5px;padding:11px 13px;border:1px solid var(--bd);border-radius:11px;background:#f8fafc}
.order-readonly-field span{color:var(--muted);font-size:12px}
.order-location-box{display:flex;max-width:760px;align-items:center;gap:11px;padding:11px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc}
.order-location-box>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.order-location-box small{color:var(--muted)}
.order-location-box.is-valid{border-color:#86efac;background:#f0fdf4}
.order-location-box.is-invalid{border-color:#fca5a5;background:#fff1f2}
.order-location-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.13)}
.order-location-box.is-valid .order-location-dot{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.13)}
.order-location-box.is-invalid .order-location-dot{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.order-customer-search-row{display:flex;max-width:760px;align-items:stretch;gap:10px}
.order-search-wrap{position:relative;min-width:0;flex:1}
.order-customer-search-row>.btn{min-height:44px;align-self:stretch}
.order-search-results{position:absolute;z-index:25;top:calc(100% + 5px);right:0;left:0;overflow:hidden;border:1px solid var(--bd);border-radius:11px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.14)}
.order-search-results button{display:flex;width:100%;flex-direction:column;gap:2px;padding:10px 12px;border:0;border-bottom:1px solid var(--bd);background:#fff;text-align:left;cursor:pointer}
.order-search-results button:last-child{border-bottom:0}
.order-search-results button:hover{background:var(--primary-soft)}
.order-search-results button span{color:var(--muted);font-size:12px}
.order-selected-customer{display:flex;max-width:760px;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.order-selected-customer>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.order-selected-customer span{color:var(--muted);font-size:13px}
.order-radio-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.order-radio-row label,.order-check{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 11px;border:1px solid var(--bd);border-radius:10px;background:#fff;cursor:pointer}
.order-address-block{margin-top:12px}
.order-address-select-row{display:flex;align-items:stretch;gap:9px}
.order-address-select-row .input{min-width:0;flex:1}
.order-address-select-row .btn{flex:0 0 auto;white-space:nowrap}
.order-address-modal-box>form{display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
.order-address-modal-box>form>.body{min-height:0;flex:1 1 auto;overflow-y:auto}
.order-address-modal-box>form>.foot{flex:0 0 auto}
.order-address-modal-box>.order-address-form-shell{display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
.order-address-modal-box>.order-address-form-shell>.body{min-height:0;flex:1 1 auto;overflow-y:auto}
.order-address-modal-box>.order-address-form-shell>.foot{flex:0 0 auto}
@media (max-width:760px){
 #orderAddressModal,#modalAddress{padding:12px}
 #orderAddressModal .order-address-modal-box,#modalAddress .order-address-modal-box{max-height:calc(100dvh - 24px)}
}
.order-qty-input{display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--bd);border-radius:10px;background:#fff}
.order-qty-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,140,153,.12)}
.order-qty-input .input{min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.order-qty-unit{display:flex;align-items:center;justify-content:center;min-width:48px;padding:0 10px;border-left:1px solid var(--bd);color:var(--muted);font-weight:700}
.order-item-composer{display:grid;grid-template-columns:minmax(250px,2.1fr) minmax(105px,.7fr) minmax(105px,.7fr) minmax(120px,.8fr);gap:10px;align-items:end;padding:13px;border:1px solid var(--bd);border-radius:13px;background:#f8fafc}
.order-note-field{grid-column:1/4}
.order-composer-action{display:flex;flex-wrap:wrap;gap:8px;align-self:end}
.order-items-desktop{margin-top:13px}
.order-items-mobile{display:none;margin-top:12px}
.order-service-speed{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,280px);align-items:center;gap:18px;margin-top:14px;padding:14px 16px;border:1px solid #f3cf91;border-radius:13px;background:linear-gradient(135deg,#fffaf0 0%,#fff4dc 100%)}
.order-service-speed[hidden]{display:none}
.order-service-speed-heading{display:flex;min-width:0;align-items:center;gap:12px}
.order-service-speed-heading .label{display:block;margin:0 0 3px;color:#8a4b0f;font-size:14px}
.order-service-speed-icon{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:12px;background:#f59e0b;color:#fff;font-size:19px;box-shadow:0 7px 16px rgba(217,119,6,.2)}
.order-service-speed .input{border-color:#e9bd72;background:#fff}
.order-service-unit-price{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.order-item-note,.order-table-sub{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:400}
.order-total-box{display:flex;max-width:500px;margin:14px 0 0 auto;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.order-total-box>div,.order-detail-total>div{display:flex;align-items:center;justify-content:space-between;gap:16px}
.order-grand-total,.order-detail-total .grand{padding-top:9px;border-top:1px solid var(--bd);font-size:17px}
.order-grand-total strong,.order-detail-total .grand strong{color:var(--primary);font-size:20px}
.order-form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:16px;border-top:1px solid var(--bd)}
.order-list-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px 220px auto auto 1fr auto;gap:9px;align-items:center}
.order-list-toolbar .spacer{min-width:0}
.order-list-card{overflow:hidden}
.order-list-mobile{display:none}
.order-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.order-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.order-detail-grid>div{display:flex;min-height:76px;flex-direction:column;gap:4px;padding:11px 12px;border:1px solid var(--bd);border-radius:11px;background:#f8fafc}
.order-detail-grid span{color:var(--muted);font-size:12px}
.order-detail-grid small{color:var(--muted);line-height:1.4}
.order-detail-card+.order-detail-card{margin-top:12px}
.order-detail-total{display:flex;max-width:480px;margin:13px 0 0 auto;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--bd);border-radius:11px}

@media (max-width:900px){
 .order-address-select-row{flex-direction:column}
 .order-address-select-row .btn{align-self:flex-start}
 .order-qty-unit{min-width:44px}
 .order-item-composer{grid-template-columns:repeat(2,minmax(0,1fr))}
 .order-service-field,.order-note-field{grid-column:1/-1}
 .order-composer-action{grid-column:1/-1}
 .order-list-toolbar{grid-template-columns:1fr 1fr}
 .order-list-toolbar>input:first-child{grid-column:1/-1}
 .order-list-toolbar .spacer{display:none}
}

@media (max-width:760px){
 .order-stage5-page{max-width:none}
 .order-stage5-card,.order-detail-card{padding:15px}
 .order-stage5-head{align-items:flex-start;flex-direction:column}
 .order-stage5-head h1{font-size:20px}
 .order-location-box{align-items:flex-start;flex-wrap:wrap}
 .order-location-box .btn{margin-left:22px}
 .order-location-box.is-valid{align-items:center;flex-wrap:nowrap}
 .order-location-box.is-valid .btn{margin-left:0}
 .order-customer-search-row{align-items:stretch}
 .order-customer-search-row>.btn{min-width:104px}
 .order-item-composer{grid-template-columns:1fr 1fr;padding:11px}
 .order-service-field,.order-note-field,.order-composer-action{grid-column:1/-1}
 .order-express-field{align-self:stretch}
 .order-items-desktop{display:none}
 .order-items-mobile{display:grid;gap:9px}
 .order-item-card{display:grid;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
 .order-item-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
 .order-item-card-pricing{display:grid;grid-template-columns:minmax(112px,1fr) minmax(108px,auto) minmax(96px,auto);gap:7px 10px;align-items:baseline;font-size:13px}
 .order-item-funding{display:grid;gap:7px;padding-top:9px;border-top:1px solid var(--bd);font-size:13px}
 .order-item-funding-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
 .order-item-funding-row strong{flex:0 0 auto;text-align:right;white-space:nowrap}
 .order-item-label{color:var(--muted);white-space:nowrap}
 .order-price-detail{justify-self:end;text-align:right;white-space:nowrap;font-weight:400}
 .order-main-value{justify-self:end;text-align:right;white-space:nowrap}
 .order-total-label{grid-column:1;color:var(--text);font-weight:700;white-space:nowrap}
 .order-total-price{grid-column:3;justify-self:end;text-align:right;font-weight:700}
 .order-grand-label{grid-column:1/3;font-weight:700;white-space:nowrap}
 .order-grand-value{grid-column:3;justify-self:end;text-align:right;white-space:nowrap;font-size:16px;font-weight:800}
 .order-grand-accent{color:var(--primary)}
 .order-item-divider-short{grid-column:1/3;height:1px;background:var(--bd);margin:2px 0}
 .order-item-divider-full{grid-column:1/-1;height:1px;background:var(--bd);margin:2px 0}
 .order-charge-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:baseline;font-size:13px}
 .order-charge-summary>span{color:var(--muted)}
 .order-charge-summary>strong{text-align:right;white-space:nowrap}
 .order-charge-grand-label{grid-column:1;color:var(--primary);text-align:left!important;font-weight:700}
 .order-charge-grand-value{grid-column:2;color:var(--primary);text-align:right!important;font-size:16px;font-weight:800}
 .order-total-box{max-width:none;margin-left:0}
 .order-form-actions{flex-wrap:wrap}
 .order-form-actions .btn{flex:1 1 auto;justify-content:center}
 .order-list-toolbar{display:grid;grid-template-columns:1fr 1fr}
 .order-list-toolbar>input:first-child,.order-list-toolbar>select:nth-of-type(2){grid-column:1/-1}
 .order-list-desktop{display:none}
 .order-list-mobile{display:grid;gap:10px;padding:12px}
 .order-list-mobile-card{display:grid;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
 .order-list-mobile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
 .order-list-mobile-head>div{display:flex;flex-direction:column;gap:3px}
 .order-list-mobile-head span{color:var(--muted);font-size:12px}
 .order-list-mobile-grid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:5px 10px;font-size:13px}
 .order-list-mobile-grid span{color:var(--muted)}
 .order-detail-grid{grid-template-columns:1fr}
 .order-detail-items-table{min-width:700px}
}

/* Tahap 5B — reservasi dan pemakaian kuota nota */
.order-quota-box{margin-top:18px;padding:16px;border:1px solid var(--app-border,#dbe3ec);border-radius:14px;background:#f8fbfc}
.order-quota-box h3{margin:0;color:var(--alterna-primary,#008c99);font-size:1rem}
.order-quota-preview-table th,.order-quota-preview-table td{vertical-align:top}
.order-quota-total{display:flex;justify-content:flex-end;gap:28px;padding-top:12px}
.order-quota-total div{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.order-shortage-choice{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-border,#dbe3ec)}
.order-funding-resolution{margin-bottom:0}
.order-funding-resolution .input{max-width:520px}
.order-choice-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;margin-bottom:7px}
.order-funding-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.order-funding-summary>div{padding:13px;border:1px solid var(--app-border,#dbe3ec);border-radius:12px;background:#f5fbfc;display:flex;flex-direction:column;gap:4px}
.order-funding-summary span{font-size:.8rem;color:var(--app-muted,#64748b)}
.order-funding-summary strong{font-size:1rem}
.public-payment-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.public-payment-summary>div{padding:12px;border:1px solid var(--app-border,#dbe3ec);border-radius:12px;display:flex;flex-direction:column;gap:4px}
.public-choice-actions{display:grid;gap:10px}
.quota-source-order-alert{margin:0 0 12px}
@media(max-width:700px){
  .quota-sale-simple-card.is-operational-locked{padding:14px}
  .quota-work-lock{grid-template-columns:46px minmax(0,1fr);gap:12px;padding:16px;border-radius:16px}
  .quota-work-lock-icon{width:46px;height:46px;border-radius:14px;font-size:21px}
  .quota-work-lock h1{font-size:18px}
  .quota-work-lock-actions .btn{width:100%;justify-content:center}
  .operational-readonly-notice{grid-template-columns:40px minmax(0,1fr);gap:11px;padding:14px;border-radius:15px}
  .operational-readonly-notice-icon{width:40px;height:40px;border-radius:12px;font-size:18px}
  .operational-readonly-notice-title{font-size:14px}
  .operational-readonly-notice p{font-size:12.5px;line-height:1.48}
  .order-quota-box{padding:12px}
  .order-quota-preview-table{table-layout:fixed;width:100%}
  .order-quota-preview-table th,.order-quota-preview-table td{padding:9px 7px;font-size:.82rem}
  .order-quota-preview-table th:nth-child(1){width:31%}.order-quota-preview-table th:nth-child(2){width:23%}.order-quota-preview-table th:nth-child(3){width:25%}.order-quota-preview-table th:nth-child(4){width:21%}
  .order-quota-total{justify-content:space-between;gap:10px}
  .order-quota-total div{align-items:flex-start}
  .order-choice-buttons{display:grid;grid-template-columns:1fr}
  .order-funding-summary{grid-template-columns:1fr 1fr}
  .public-payment-summary{grid-template-columns:1fr}
}

/* Tahap 5C — pendanaan dan pembayaran nota */
.order-payment-card{display:grid;gap:18px}.order-payment-head{align-items:flex-start}.order-payment-head h2{display:flex;align-items:center;gap:8px}.order-payment-head p{margin:4px 0 0;color:var(--muted)}.order-payment-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.order-payment-summary>div{padding:14px;border:1px solid var(--bd);border-radius:12px;background:#f8fafc}.order-payment-summary span,.order-payment-current span{display:block;color:var(--muted);font-size:13px}.order-payment-summary strong{display:block;margin-top:5px;font-size:17px}.order-payment-due strong{color:var(--primary)}.order-payment-current{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid var(--bd);border-radius:12px}.order-payment-current>div:first-child{display:grid;gap:3px}.order-payment-current small{color:var(--muted)}.order-payment-current.paid{border-color:#a7f3d0;background:#ecfdf5}.order-payment-actions{display:flex;gap:8px;flex-wrap:wrap}.order-payment-empty{margin:0;color:var(--muted)}.order-payment-history{margin-top:2px}.payment-modal-total{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;margin-bottom:14px;border-radius:12px;background:var(--primary-soft)}.payment-modal-total strong{font-size:20px;color:var(--primary)}
@media(max-width:760px){.order-payment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.order-payment-current{align-items:flex-start;flex-direction:column}.order-payment-actions{width:100%}.order-payment-actions .btn{flex:1}.order-payment-history table{min-width:620px}}

/* Tahap 5C.1 — Promo Nota */
.order-promotion-box{margin-top:14px;padding:14px;border:1px solid var(--border,#dfe5eb);border-radius:12px;background:#fff}
.order-promotion-selected{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--primary-soft,#e9f8f6)}
.order-promotion-selected strong{color:var(--primary,#0f766e)}
.order-promo-choice{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;margin-bottom:8px;border:1px solid var(--border,#dfe5eb);border-radius:10px;background:#fff;text-align:left;cursor:pointer}
.order-promo-choice:hover,.order-promo-choice.is-selected{border-color:var(--primary,#0f766e);background:var(--primary-soft,#e9f8f6)}
.order-promo-choice span,.order-promo-choice small{font-weight:400;color:#111827}
.order-promotion-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px}
.order-promotion-detail>div:not(.alert){display:flex;flex-direction:column;gap:4px}
.order-promotion-detail span{font-size:.82rem;color:var(--muted,#64748b)}
@media(max-width:700px){.order-promotion-detail{grid-template-columns:1fr}.order-promotion-box{padding:12px}}

/* Tahap 5D — nota digital, lembar pakaian, dan verifikasi QR */
.order-filter-card{padding:16px;margin-bottom:14px}
.order-filter-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(155px,1fr));gap:12px;align-items:end}
.order-filter-search{grid-column:span 1}
.order-filter-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border,#e5e7eb)}
.order-operational-table .badge-status{white-space:nowrap}
.order-inline-form{display:inline-flex;margin:0}
.order-operational-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.order-operational-status-grid>div{border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:13px;background:#fff}
.order-operational-status-grid span,.order-operational-status-grid small,.order-digital-delivery-status span,.order-digital-delivery-status small{display:block;color:var(--muted,#64748b)}
.order-operational-status-grid strong{display:block;margin:5px 0;font-size:15px}
.order-digital-delivery-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--app-primary-soft,#eefafa)}
.order-digital-delivery-status span{margin-right:auto}

.digital-receipt-body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 8%,rgba(255,255,255,.06),transparent 35%),linear-gradient(155deg,#073b40,#0b5d5e);color:#1e3a34;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.qr-public-verification-body{margin:0;min-height:100vh;background:#f3f7f8;color:#17212b;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.digital-receipt-page{width:min(480px,calc(100% - 24px));margin:0 auto;padding:34px 0 56px}
.digital-receipt-card{position:relative;padding:27px 24px 25px;border:0;border-radius:25px;background:#fffdf8;box-shadow:0 26px 60px -22px rgba(0,0,0,.48);overflow:hidden;-webkit-mask:radial-gradient(circle at 9px 0,transparent 0 6px,#000 6.5px) 0 0/18px 100% repeat-x,radial-gradient(circle at 9px 100%,transparent 0 6px,#000 6.5px) 9px 0/18px 100% repeat-x;-webkit-mask-composite:source-in;mask:radial-gradient(circle at 9px 0,transparent 0 6px,#000 6.5px) 0 0/18px 100% repeat-x,radial-gradient(circle at 9px 100%,transparent 0 6px,#000 6.5px) 9px 0/18px 100% repeat-x;mask-composite:intersect}
.digital-receipt-brand{display:flex;align-items:center;justify-content:center;min-height:88px;padding:0 10px 20px;border-bottom:1px solid #e2dacb}
.digital-receipt-brand img{display:block;width:auto;max-width:min(290px,100%);height:auto;max-height:78px;object-fit:contain}
.digital-receipt-head{padding:19px 0 20px;border-bottom:1px solid #e2dacb}
.digital-receipt-label{display:block;margin-bottom:5px;color:#8a9a93;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.digital-receipt-number-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.digital-receipt-number-row h1{min-width:0;margin:0;color:#1e3a34;font-family:"Copperplate Gothic Bold",Copperplate,Rockwell,"Rockwell Extra Bold",Georgia,serif;font-size:25px;font-weight:800;letter-spacing:.045em;line-height:1.1;overflow-wrap:anywhere}
.digital-receipt-number-row .badge-status{flex:0 0 auto;padding:6px 12px;border:0;color:#fff;box-shadow:0 4px 10px -6px rgba(0,0,0,.45)}
.digital-receipt-number-row .badge-aktif{background:#4fa65b}.digital-receipt-number-row .badge-pending{background:#e48a38}.digital-receipt-number-row .badge-nonaktif{background:#dc5b5b}
.digital-receipt-head p{margin:6px 0 0;color:#4b655f;font-size:12px}
.digital-receipt-summary{margin:0;padding:18px 0 20px;border-bottom:1px solid #e2dacb}
.digital-receipt-summary-identity{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.digital-receipt-summary-customer,.digital-receipt-summary-delivery>div,.digital-receipt-summary-meta>div>div{min-width:0}
.digital-receipt-summary-customer strong{display:block;color:#357a45;font-size:16px;overflow-wrap:anywhere}
.digital-receipt-summary-customer small{display:block;margin-top:3px;color:#4b655f;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
.digital-receipt-summary-delivery{display:flex;align-items:center;justify-content:flex-end;gap:6px;max-width:58%;padding:7px 10px;border-radius:10px;background:#ebf4ec;color:#1e3a34;text-align:right}
.digital-receipt-summary-delivery>i{flex:0 0 auto;color:#357a45;font-size:14px}
.digital-receipt-summary-delivery strong{display:block;font-size:11px;overflow-wrap:anywhere}
.digital-receipt-summary-delivery small{display:block;margin-top:2px;color:#4b655f;font-size:10px;line-height:1.35}
.digital-receipt-summary-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;margin-top:14px;padding-top:14px;border-top:1px solid #e2ddd2}
.digital-receipt-summary-meta>div{display:flex;align-items:flex-start;gap:6px;min-width:0}
.digital-receipt-qris-link{display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;margin-left:auto;border:1px solid #b8dfc0;border-radius:9px;background:#ebf4ec;color:#357a45;text-decoration:none}
.digital-receipt-qris-link:hover{border-color:#357a45;background:#dff0e2;color:#245c31}
.digital-receipt-summary-meta .digital-receipt-qris-link i{margin:0;color:inherit;font-size:17px}
.digital-receipt-summary-meta>div:nth-child(3){grid-column:1/-1;padding-top:11px;border-top:1px solid #e2ddd2}
.digital-receipt-summary-meta i{flex:0 0 auto;margin-top:1px;color:#7d948c;font-size:13px}
.digital-receipt-summary-meta span,.digital-receipt-note span{display:block;margin-bottom:4px;color:#8a9a93;font-size:10px}
.digital-receipt-summary-meta strong,.digital-receipt-note strong{display:block;overflow-wrap:anywhere}
.digital-receipt-summary-meta strong{color:#1e3a34;font-size:12.5px;line-height:1.35}
.digital-receipt-summary-meta small{display:block;margin-top:2px;color:#c2591f;font-size:10.5px;font-weight:700}
.digital-receipt-order-detail{margin-top:20px;padding:18px;border:0;border-radius:18px;background:#ebf4ec;overflow:hidden}
.digital-receipt-order-title{padding:0;border:0;background:transparent}
.digital-receipt-order-title h2{display:flex;align-items:center;gap:7px;margin:0 0 15px;color:#357a45;font-size:15px}
.digital-receipt-order-title h2 i{font-size:14px}
.digital-receipt-service-list{display:grid}
.digital-receipt-service-item{min-width:0;padding:0 0 14px;border-bottom:1px solid rgba(30,58,52,.12)}
.digital-receipt-service-item:last-child{padding-bottom:0;border-bottom:0}
.digital-receipt-service-item+.digital-receipt-service-item{padding-top:14px}
.digital-receipt-service-item h3{margin:0 0 10px;color:#1e3a34;font-size:14px}
.digital-receipt-bill-summary{display:grid;gap:0}
.digital-receipt-bill-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:4px 0;font-size:12px}
.digital-receipt-bill-row>span{min-width:0;color:#4b655f}
.digital-receipt-bill-row>strong{flex:0 0 auto;color:#1e3a34;font-weight:500;text-align:right;white-space:nowrap}
.digital-receipt-bill-quantity>strong{font-weight:700}
.digital-receipt-bill-divider{height:1px;margin:7px 0;background:rgba(30,58,52,.12)}
.digital-receipt-bill-base{padding:6px 0;font-size:13px}
.digital-receipt-bill-base>strong:first-child{font-weight:700;text-align:left}
.digital-receipt-bill-base>strong:last-child{color:#c2591f;font-weight:800}
.digital-receipt-bill-addon{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:5px 0;border:0}
.digital-receipt-bill-addon>strong{font-size:12px;font-weight:500;color:#4b655f}
.digital-receipt-bill-addon .digital-receipt-bill-row{display:contents}
.digital-receipt-bill-addon .digital-receipt-bill-row>span{font-size:11px;color:#4b655f}
.digital-receipt-bill-addon .digital-receipt-bill-row>strong{font-size:12px;color:#4b655f;font-weight:500}
.digital-receipt-service-note{display:grid;gap:3px;margin-top:10px;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,.45)}
.digital-receipt-service-note span{color:#64748b;font-size:11px}
.digital-receipt-empty{margin:0;padding:12px;color:#64748b;text-align:center}
.digital-receipt-order-detail .order-charge-card-list{margin:12px 0 0;padding:0}
.digital-receipt-order-detail .order-group-charge-card{box-shadow:none;background:rgba(255,255,255,.45)}
.digital-receipt-total{margin:12px 0 0;padding:14px 0 0;border-top:2px dashed rgba(30,58,52,.2);background:transparent}
.digital-receipt-total>div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:12px}
.digital-receipt-total .grand{margin:0;padding-top:4px;border:0;font-size:15px}
.digital-receipt-total .grand:first-child{margin-top:0;padding-top:4px;border-top:0}
.digital-receipt-total .grand strong{color:#357a45;font-size:21px;font-weight:800}
.digital-receipt-qr-section{text-align:center;padding:20px 0 21px;border-bottom:1px solid #e2dacb}
.digital-receipt-qr-section h2{margin:0 0 5px;color:#1e3a34;font-size:16px}
.digital-receipt-qr-section>p{max-width:300px;margin:0 auto 17px;color:#4b655f;font-size:11px;line-height:1.5}
.digital-receipt-qr{position:relative;display:flex;align-items:center;justify-content:center;width:250px;min-height:250px;margin:0 auto 14px;padding:14px;border:2px dashed #e96f2c;border-radius:16px;background:#fffdf8;box-shadow:0 8px 18px -12px rgba(233,111,44,.55)}
.digital-receipt-qr::before{content:"";position:absolute;top:10px;left:10px;width:9px;height:9px;border:3px solid #fffdf8;border-radius:50%;background:#0b5d5e}
.digital-receipt-qr.is-expired{opacity:.35}
.digital-receipt-qr img,.digital-receipt-qr canvas{max-width:100%;height:auto}
.digital-receipt-countdown{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:2px}
.digital-receipt-timer-ring{display:block;width:38px;height:38px}
.digital-receipt-timer-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.digital-receipt-timer-track,.digital-receipt-timer-progress{fill:none;stroke-width:4}
.digital-receipt-timer-track{stroke:#efe4d5}
.digital-receipt-timer-progress{stroke:#e96f2c;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.digital-receipt-countdown strong{color:#c2591f;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;font-variant-numeric:tabular-nums}
.digital-receipt-qr-section>.small-muted{margin:5px auto 0;color:#8a9a93;font-size:10px}
.digital-receipt-qr-message{margin:12px auto;max-width:320px}
.digital-receipt-note{padding:13px;border-radius:11px;background:#fff8e8;margin-top:16px}
.digital-receipt-footer{text-align:center;color:#64748b;font-size:12px;margin:20px 0 0}
.text-right{text-align:right}

.qr-public-verification-page{width:min(480px,calc(100% - 24px));margin:0 auto;padding:48px 0}
.qr-public-verification-card{text-align:center;padding:28px;border-radius:18px}
.qr-public-verification-icon{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-size:38px}
.qr-public-verification-icon.is-valid{background:#e7f8ef;color:#138a4b}
.qr-public-verification-icon.is-invalid{background:#fdecec;color:#c53030}
.qr-public-verification-card h1{margin:0 0 8px}
.qr-public-verification-card>p{color:#64748b}
.qr-public-verification-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left;padding:14px;border-radius:10px;background:#f5f7f8;margin:18px 0}
.qr-public-verification-summary span{color:#64748b}
.qr-public-verification-summary strong{text-align:right}

.work-tag-toolbar{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:14px}
.work-tag-print-options{display:flex;align-items:end;gap:8px}
.work-tag-print-options label{font-size:12px;font-weight:700;color:#475569}
.work-tag-print-options .input{width:155px;min-height:38px}
.work-tag-sheet{width:74mm;max-width:100%;margin:0 auto;background:#fff;border:2px solid #111;padding:4mm;color:#000;box-sizing:border-box}
.work-tag-size-58 .work-tag-sheet{width:54mm;padding:2.5mm}
.work-tag-head{display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:2px solid #111;padding-bottom:3mm}
.work-tag-logo{display:block;width:auto;max-width:46mm;max-height:16mm;object-fit:contain;filter:grayscale(1) brightness(.55) contrast(10)}
.work-tag-size-58 .work-tag-logo{max-width:42mm;max-height:14mm}
.work-tag-title{margin-top:2mm}
.work-tag-title>span{font-weight:900;letter-spacing:.08em;font-size:10px}
.work-tag-title h1{font-size:26px;line-height:1;margin:2mm 0 1mm;word-break:break-all}
.work-tag-title p{margin:0;font-size:11px;font-weight:700}
.work-tag-qr{width:45mm;height:45mm;display:flex;align-items:center;justify-content:center;padding:1mm;margin-top:3mm;border:1px solid #111;box-sizing:border-box}
.work-tag-size-58 .work-tag-qr{width:42mm;height:42mm}
.work-tag-qr img,.work-tag-qr canvas{max-width:100%;height:auto}
.work-tag-customer{width:100%;padding-top:2.5mm;position:relative;box-sizing:border-box}
.work-tag-customer-name,.work-tag-customer-phone{display:block;overflow-wrap:anywhere}
.work-tag-customer-name{font-size:26px;line-height:1.05;font-weight:900}
.work-tag-customer-phone{margin-top:1mm;font-size:11px;font-weight:700}
.work-tag-markers{display:flex;align-items:center;justify-content:center;gap:5mm;margin-top:2mm;min-height:8mm}
.work-tag-marker{display:inline-flex;align-items:center;justify-content:center;color:#000;line-height:1}
.work-tag-marker-express{font-size:28px}
.work-tag-marker-delivery{font-size:25px}
.work-tag-primary-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #111;border-bottom:0;margin-top:3mm}
.work-tag-primary-grid>div{padding:2mm;border-right:1px solid #111;border-bottom:1px solid #111;min-width:0}
.work-tag-primary-grid>div:nth-child(even){border-right:0}
.work-tag-primary-grid span,.work-tag-note>span{display:block;font-size:8px;text-transform:uppercase;font-weight:800;margin-bottom:1mm}
.work-tag-primary-grid strong{display:block;font-size:10px;overflow-wrap:anywhere}
.work-tag-items{border:1px solid #111;border-bottom:0}
.work-tag-item{padding:2mm;border-bottom:1px solid #111}
.work-tag-item-main,.work-tag-addon-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:2mm}
.work-tag-item-main strong{font-size:11px;overflow-wrap:anywhere}
.work-tag-item-main span{font-size:10px;font-weight:800;white-space:nowrap}
.work-tag-addon-list{display:grid;gap:1mm;margin-top:1.5mm;padding-top:1.5mm;border-top:1px dashed #777}
.work-tag-addon-list span{font-size:9px;overflow-wrap:anywhere}
.work-tag-addon-list>div>span:last-child{white-space:nowrap}
.work-tag-addon-label{font-weight:800}
.work-tag-addon-express{font-size:17px!important;line-height:1}
.work-tag-item>small{display:block;margin-top:1.5mm;font-size:8px;overflow-wrap:anywhere}
.work-tag-note{border:1px solid #111;border-top:0;padding:2mm;min-height:12mm;font-size:10px;overflow-wrap:anywhere}
.work-tag-note>strong{display:block}

.qr-pair-card,.qr-pair-result{padding:18px}
.qr-pair-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.qr-pair-form .group small{display:block;color:#64748b;margin-top:5px}
.qr-scan-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;resize:vertical}
.qr-pair-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.qr-pair-result{margin-top:14px;border-left:5px solid #dc2626}
.qr-pair-result.is-ready{border-left-color:#15803d}
.qr-pair-result.is-warning{border-left-color:#d97706}
.qr-pair-result-head{display:flex;align-items:flex-start;gap:12px}
.qr-pair-result-head>i{font-size:32px}
.qr-pair-result-head h2{margin:0 0 4px}
.qr-pair-result-head p{margin:0;color:#64748b}
.qr-pair-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}
.qr-pair-result-grid>div{padding:11px;background:#f6f8f9;border-radius:9px}
.qr-pair-result-grid span{display:block;color:#64748b;font-size:12px;margin-bottom:4px}
.qr-pair-result-actions{display:flex;justify-content:flex-end;margin-top:14px}

@media(max-width:900px){
  .order-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-operational-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-pair-result-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .order-filter-grid,.qr-pair-form{grid-template-columns:1fr}
  .digital-receipt-summary{padding:12px 2px}
  .digital-receipt-summary-identity{gap:12px}
  .digital-receipt-summary-delivery{max-width:56%}
  .digital-receipt-summary-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px}
  .digital-receipt-summary-meta>div{padding:0 9px}
  .digital-receipt-summary-meta>div:first-child{padding-left:0}
  .digital-receipt-summary-meta>div:nth-child(2){padding-right:0}
  .digital-receipt-summary-meta>div:nth-child(3){grid-column:1/-1;padding:9px 0 0;border-top:1px solid #e2ddd2;border-left:0}
  .order-filter-actions>*{flex:1 1 auto;justify-content:center}
  .order-operational-status-grid{grid-template-columns:1fr}
  .digital-receipt-card{padding:16px}
  .digital-receipt-brand{min-height:78px;padding:0 8px 14px}
  .digital-receipt-brand img{max-height:70px}
  .digital-receipt-number-row h1{font-size:23px}
  .digital-receipt-qr{width:246px;min-height:246px}
  .work-tag-toolbar,.work-tag-print-options{align-items:stretch;flex-direction:column}
  .work-tag-print-options .input{width:100%}
  .qr-pair-actions{grid-column:auto;flex-direction:column}
  .qr-pair-result-grid{grid-template-columns:1fr}
}

@media print{
  body{background:#fff!important}
  .app-header,.app-overlay,.app-drawer,.no-print,.flash{display:none!important}
  .page-wrap,.page,.work-tag-page{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
  .work-tag-sheet{box-sizing:border-box;box-shadow:none!important;page-break-inside:avoid;margin:0 auto!important}
}
@page{size:auto;margin:0}
.work-tag-scan-card{padding:20px}
.work-tag-scan-head{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border,#e5e7eb);padding-bottom:16px}
.work-tag-scan-head>div:nth-child(2){min-width:0;flex:1}.work-tag-scan-head span,.work-tag-scan-grid span,.work-tag-scan-note span{display:block;color:var(--muted,#64748b);font-size:12px}.work-tag-scan-head h1{margin:3px 0;font-size:26px;word-break:break-word}.work-tag-scan-head p{margin:0;color:var(--muted,#64748b)}
.work-tag-scan-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--app-primary-soft,#e9f8fa);color:var(--app-primary,#078795);font-size:26px}
.work-tag-scan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.work-tag-scan-grid>div{padding:12px;border-radius:10px;background:#f6f8f9}.work-tag-scan-grid strong{display:block;margin-top:4px}
.work-tag-scan-items{border:1px solid var(--border,#e5e7eb);border-radius:12px;overflow:hidden;margin-bottom:14px}.work-tag-scan-items article{padding:12px;border-bottom:1px solid var(--border,#e5e7eb)}.work-tag-scan-items article:last-child{border-bottom:0}.work-tag-scan-items strong,.work-tag-scan-items span,.work-tag-scan-items small{display:block}.work-tag-scan-items span,.work-tag-scan-items small{margin-top:3px;color:var(--muted,#64748b)}
.work-tag-scan-note{padding:12px;border-radius:10px;background:#fff8e8;margin-bottom:14px}.work-tag-scan-actions{display:flex;justify-content:flex-end;margin-top:14px}
@media(max-width:700px){.work-tag-scan-head{align-items:flex-start;flex-wrap:wrap}.work-tag-scan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Penyederhanaan tampilan pemakaian kuota pada form nota */
.order-items-funding-table th,.order-items-funding-table td{vertical-align:top}
.order-items-funding-table th:nth-child(1){width:24%}
.order-items-funding-table th:nth-child(2){width:14%}
.order-items-funding-table th:nth-child(3){width:20%}
.order-items-funding-table th:nth-child(4){width:18%}
.order-items-funding-table th:nth-child(5){width:14%}
.order-items-funding-table th:nth-child(6){width:10%}
.order-items-funding-table th:nth-child(4),.order-items-funding-table th:nth-child(5),.order-items-funding-table td:nth-child(4),.order-items-funding-table td:nth-child(5){text-align:right;white-space:nowrap}
.order-quota-box.order-quota-box-compact{margin-top:14px;padding:0;border:0;background:transparent}
.order-quota-due{display:flex;max-width:500px;margin-left:auto;align-items:center;justify-content:space-between;gap:18px;padding:13px 15px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.order-quota-due span{font-size:15px}
.order-quota-due strong{color:var(--primary);font-size:21px}
.order-quota-box-compact>.small-muted{display:block;max-width:500px;margin:6px 0 0 auto;text-align:right}
.order-quota-box-compact .order-shortage-choice{max-width:760px;margin-left:auto}
@media(max-width:760px){
  .order-quota-due{max-width:none;margin-left:0}
  .order-quota-box-compact>.small-muted{text-align:left}
  .order-quota-box-compact .order-shortage-choice{max-width:none;margin-left:0}
}

/* Master layanan: kelompok, opsi tambahan, dan upah Cuci Tangan */
.group-create-panel{padding:14px;border:1px solid var(--line,#d9e2ec);border-radius:12px;background:#f8fbfd;margin-bottom:16px}
.service-modal-card{width:min(980px,calc(100vw - 28px))!important}
#service-unit[readonly]{background:#f1f5f9;color:#475569;cursor:not-allowed}
.service-option-list{display:grid;gap:10px}
.service-option-row{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(280px,1.1fr);gap:16px;align-items:center;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.service-option-toggle{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--txt);cursor:pointer}
.service-option-toggle input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);flex:0 0 auto}
.service-option-toggle span{display:grid;gap:3px}
.service-option-toggle strong{font-size:14px;color:#1f2937}
.service-option-toggle small{font-size:12px;line-height:1.4;color:var(--muted);font-weight:500}
.service-option-value{display:grid;grid-template-columns:minmax(130px,auto) minmax(170px,1fr);gap:10px;align-items:center}
.service-option-value>label{margin:0;color:var(--secondary)}
.service-process-repeat-grid{grid-template-columns:70px minmax(180px,1fr) minmax(150px,.55fr) minmax(160px,.6fr) 126px}
.service-handwash-wage-cell{display:flex;align-items:center;min-height:40px}
.service-handwash-wage-cell>.money-prefix-field{width:100%}
.service-not-applicable{display:flex;align-items:center;justify-content:center;width:100%;color:var(--muted);font-weight:700}
.compact-money-field>span{padding-inline:9px}
.service-form-actions{align-items:center;flex-wrap:wrap}
.service-form-actions>.check-inline{margin-right:auto}
.account-page .card{background:var(--card);border:1px solid var(--bd);box-shadow:var(--shadow-sm)}
.account-page .account-card h3,.account-page .account-profile-main h2{color:var(--primary)}
.account-page .account-avatar{border-color:var(--primary)}
@media(max-width:760px){
  .service-modal-card{width:calc(100vw - 12px)!important}
  .service-option-row{grid-template-columns:1fr;gap:10px}
  .service-option-value{grid-template-columns:1fr}
  .service-process-repeat-grid{grid-template-columns:1fr}
  .service-form-actions>.check-inline{width:100%;margin-right:0}
}

/* Order: pilihan tambahan per layanan */
.order-option-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:42px}
.order-option-list .order-check{margin:0}
.order-option-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
@media(max-width:760px){.order-delivery-settings{grid-template-columns:1fr}.order-option-list{align-items:stretch;flex-direction:column}.order-option-list .order-check{width:100%}}
@media(max-width:760px){.order-service-speed{grid-template-columns:1fr;gap:11px;padding:13px}.order-service-speed .input{width:100%}}
.order-group-charge-row td{background:#f8fbfc;border-top:1px dashed var(--bd)}
.order-group-charge-row td:first-child strong,.order-group-charge-card .order-item-card-head strong{color:var(--primary)}
.order-charge-title{display:inline-flex;align-items:center;gap:7px}
.order-charge-icon{width:17px;height:17px;flex:0 0 17px;color:#d96542}
.order-charge-card-list{display:grid;gap:9px;margin-top:12px}
.order-group-charge-card{display:grid;gap:10px;padding:12px;border:1px dashed var(--bd);border-radius:12px;background:#f8fbfc}

/* Sidebar putih dan lembut mengikuti pola tampilan mboklaundry.id. */
.app-drawer{
  width:268px;
  overflow:hidden;
  background:#fff;
  color:#1f2937;
  border-right:1px solid #e5e7eb;
  box-shadow:3px 0 18px rgba(15,23,42,.08);
}
.drawer-head{
  min-height:58px;
  padding:11px 14px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
.drawer-brand{gap:10px;color:var(--primary)}
.drawer-brand img{
  width:34px;
  height:34px;
  padding:3px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}
.drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #e5e7eb;
  border-radius:11px;
  background:#fff;
  color:#64748b;
}
.drawer-close:hover{border-color:#cbd5e1;background:#f3f4f6;color:#334155}
.drawer-body{
  flex:1 1 auto;
  min-height:0;
  padding:10px 10px 22px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#94a3b8 transparent;
}
.drawer-body::-webkit-scrollbar{width:7px}
.drawer-body::-webkit-scrollbar-thumb{border:2px solid #fff;border-radius:999px;background:#94a3b8}
.menu-section{margin:3px 0}
.menu-link,.menu-parent{
  min-height:42px;
  margin:0;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#1f2937;
  font-weight:400;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.menu-link:hover,.menu-parent:hover{border-color:#e5e7eb;background:#f3f4f6;color:#111827}
.menu-parent[aria-expanded="true"]{color:var(--primary)}
.menu-link.active{
  border-color:var(--primary-soft);
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:650;
}
.menu-link.active:before{left:-5px;top:8px;bottom:8px;width:3px;background:var(--primary)}
.submenu{
  margin:6px 0 10px 14px;
  padding:6px 0 6px 12px;
  border-left:2px solid #e5e7eb;
}
.submenu .menu-link{min-height:38px;padding:8px 10px;font-size:13px;border-radius:10px}
.drawer-foot{
  margin-top:0;
  padding:11px 12px 12px;
  border-top:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 -4px 14px rgba(15,23,42,.025);
}
.drawer-foot .muted{color:#64748b}
.drawer-logout{
  min-height:46px;
  border:1px solid #fecaca;
  border-radius:12px;
  background:#fee2e2;
  color:#b91c1c;
}
.drawer-logout:hover{border-color:#fca5a5;background:#fecaca;color:#991b1b}
@media(max-width:899px){
  .app-header .user-chip{display:flex;min-width:0}
  .app-header .user-copy{display:block;max-width:min(44vw,180px)}
  .app-header .user-copy strong{font-size:13px}
  .app-header .hdr-avatar{width:32px;height:32px}
  .app-drawer{width:min(88vw,268px)}
}
@media(max-width:420px){
  .app-header .user-copy{max-width:38vw}
}

/* =========================================================
   RESPONSIVE APPLICATION SYSTEM — OWNER 2026-08
   Tiga mode: desktop, tablet, dan mobile.
   ========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.date-range-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.date-range-grid .group{min-width:0;margin:0}

.compact-filter-bar{position:relative;padding:10px 12px;margin-bottom:12px;overflow:visible!important}
.compact-filter-row{display:flex;align-items:center;gap:8px;min-width:0}
.compact-filter-search{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:150px}
.compact-filter-search>i{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.compact-filter-search .input{min-width:0;padding-left:36px}
.compact-filter-submit{flex:0 0 auto}
.compact-filter-details{position:relative;flex:0 0 auto}
.compact-filter-details>summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;white-space:nowrap}
.compact-filter-details>summary::-webkit-details-marker{display:none}
.compact-filter-details[open]>summary{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.compact-filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:800}
.compact-filter-panel{position:absolute;z-index:45;top:calc(100% + 8px);right:0;width:min(760px,calc(100vw - 32px));padding:14px;border:1px solid var(--bd);border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.compact-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.compact-filter-grid>.group,.compact-filter-grid .group{min-width:0;margin:0}
.compact-filter-date-range{grid-column:span 2}
.compact-filter-panel-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.compact-filter-create{flex:0 0 auto;white-space:nowrap}
.service-groups-button{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap}
.order-handwash-minimum-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:6px 0 3px;padding:4px 8px;border:1px solid #f3cf91;border-radius:999px;background:#fff5df;color:#9a570c;font-size:11px;font-weight:800;line-height:1.2}
.order-handwash-minimum-badge i{flex:0 0 auto;font-size:11px}
.order-handwash-minimum-inline{margin-top:6px}

.mobile-card-compact{display:grid;gap:8px;min-height:0}
.mobile-card-compact .mobile-card-head{align-items:flex-start}
.mobile-card-compact .mobile-card-head>strong,.mobile-card-compact .mobile-card-head>div{min-width:0;overflow-wrap:anywhere}
.mobile-card-compact .mobile-actions{justify-content:flex-end;margin-top:2px;padding-top:7px;border-top:1px solid #edf1f5}
.mobile-card-compact .aksi-group{display:flex}
.mobile-card-compact .btn-icon{flex:0 0 auto}
.order-mobile-customer{display:grid;gap:2px;min-width:0}
.order-mobile-customer strong{overflow-wrap:anywhere}
.order-mobile-customer span{color:var(--muted);font-size:12px}
.order-mobile-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.order-mobile-footer>div{display:grid;gap:2px}
.order-mobile-footer .badge-status{max-width:56%;text-align:center;white-space:normal}

/* Layar besar */
@media(min-width:1024px){
  .page{padding-left:16px;padding-right:16px}
  .compact-filter-panel{width:760px}
  .table th,.table td{padding-left:12px;padding-right:12px}
}

/* Tablet */
@media(min-width:768px) and (max-width:1023px){
  .page{max-width:none;padding-left:12px;padding-right:12px}
  .card{border-radius:12px}
  .table-scroll,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{font-size:12px}
  .table th,.table td{padding:9px 8px}
  .btn-icon{width:34px;height:34px}
  .compact-filter-panel{width:min(680px,calc(100vw - 36px))}
  .compact-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact-filter-date-range{grid-column:1/-1}
  .field-grid-3,.form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media(max-width:767px){
  .page{max-width:none;padding-left:8px;padding-right:8px}
  .card{border-radius:12px}
  .compact-filter-bar{padding:8px;margin-bottom:10px}
  .compact-filter-row{gap:6px}
  .compact-filter-search{flex-basis:auto;min-width:0}
  .compact-filter-search .input{height:40px}
  .compact-filter-details{position:static}
  .compact-filter-details>summary{width:40px;height:40px;padding:0;justify-content:center}
  .compact-filter-details>summary>span:not(.compact-filter-count){display:none}
  .compact-filter-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;font-size:9px}
  .compact-filter-panel{position:fixed;z-index:99997;top:76px;left:10px;right:10px;width:auto;max-height:calc(100vh - 88px);overflow-y:auto;padding:12px}
  .compact-filter-grid{grid-template-columns:1fr}
  .compact-filter-date-range{grid-column:auto}
  .compact-filter-panel-actions{position:sticky;bottom:-12px;margin-left:-12px;margin-right:-12px;padding:10px 12px;background:#fff}
  .compact-filter-panel-actions .btn{flex:1;justify-content:center}
  .compact-filter-create{height:40px;padding-left:11px;padding-right:11px}
  .service-groups-button{width:40px;height:40px;padding:0;justify-content:center}
  .service-groups-button-label{display:none}
  .mobile-card,.order-list-mobile-card,.region-card{padding:11px;margin-bottom:8px;border-radius:11px;box-shadow:0 2px 8px rgba(15,23,42,.055)}
  .mobile-card-head{align-items:flex-start}
  .mobile-actions{justify-content:flex-end;gap:6px}
  .mobile-actions .btn-icon,.mobile-card .btn-icon,.order-list-mobile-card .btn-icon,.region-card .btn-icon{width:36px;height:36px;border-radius:9px}
  .master-mobile-kv{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px 10px}
  .date-range-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .date-range-grid .input{min-width:0;padding-left:8px;padding-right:4px;font-size:12px}
  .pagination{justify-content:center;padding-left:4px;padding-right:4px}
  .pagination a,.pagination span{padding:6px 8px}
}

@media(max-width:420px){
  .compact-filter-submit{display:none}
  .compact-filter-create span{display:none}
  .compact-filter-create{width:40px;justify-content:center;padding:0}
  .order-mobile-footer .badge-status{max-width:52%;font-size:10px}
}
/* RESPONSIVE APPLICATION REFINEMENTS — OWNER 2026-08 */
.compact-filter-label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--secondary);font-weight:700}
.compact-filter-label i{color:var(--primary);font-size:18px}
.compact-filter-panel-small{width:min(420px,calc(100vw - 32px))}
.compact-filter-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-card-summary{display:-webkit-box;margin:0;color:#475569;font-size:13px;line-height:1.45;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mobile-card .master-mobile-kv{display:none}
.payment-mobile-cards{margin-top:10px}
.payment-mobile-fields{display:grid;gap:8px}
.payment-mobile-card .mobile-actions{align-items:center}
.payment-mobile-card .btn-icon{cursor:pointer}
.payment-mobile-card .btn-icon input:disabled+i{opacity:.45}

@media(max-width:767px){
  .compact-filter-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .compact-filter-panel-small{width:auto}
  .compact-filter-grid-2{grid-template-columns:1fr}
  .regions-toolbar{align-items:center;display:flex;gap:6px;flex-wrap:nowrap}
  .regions-toolbar .left{flex:1;min-width:0}
  .regions-toolbar .left form{display:flex;gap:6px;min-width:0}
  .regions-toolbar .left .input{min-width:0!important;flex:1}
  .regions-toolbar .left .btn{width:40px;min-width:40px;padding:0;font-size:0;justify-content:center}
  .regions-toolbar .left .btn i{font-size:16px}
  .regions-toolbar .right .btn{width:40px;height:40px;padding:0;font-size:0;justify-content:center}
  .regions-toolbar .right .btn i{font-size:16px}
  .sdm-work-calendar-filters{display:flex!important;flex-wrap:nowrap!important;max-width:100%;overflow-x:auto;padding-bottom:2px}
  .sdm-work-calendar-filters .input{flex:0 0 150px;min-width:150px}
}
/* KALENDER KERJA RESPONSIF DAN PERBAIKAN TABEL TABLET */
.sdm-work-calendar-card{overflow:hidden;border:1px solid var(--bd);border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.06)}
.sdm-work-calendar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid var(--bd);background:linear-gradient(180deg,#fff 0%,#fbfdfe 100%)}
.sdm-work-calendar-head>div{min-width:0}
.sdm-work-calendar-head h2{display:flex;align-items:center;gap:8px;margin:0;color:var(--primary);font-size:20px;line-height:1.25}
.sdm-work-calendar-head h2 i{font-size:18px}
.sdm-work-calendar-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.sdm-work-calendar-filters{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;min-width:0}
.sdm-work-calendar-filter{display:grid;flex:1 1 170px;gap:4px;min-width:145px}
.sdm-work-calendar-filter label{color:var(--muted);font-size:11px;font-weight:750}
.sdm-work-calendar-filter .input{height:40px;min-width:0;padding:8px 32px 8px 10px}
.sdm-work-calendar-scroll{width:100%;padding:14px 16px 10px;overflow:hidden}
.sdm-work-calendar-weekdays,.sdm-work-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%}
.sdm-work-calendar-weekdays{margin-bottom:6px}
.sdm-work-calendar-weekdays span{padding:5px 2px;color:var(--muted);font-size:11px;font-weight:800;text-align:center;text-transform:uppercase}
.sdm-work-calendar-empty{min-height:78px;border-radius:10px;background:#f8fafc}
.sdm-work-calendar-day{position:relative;display:flex;min-width:0;min-height:78px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;padding:9px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--txt);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .08s}
.sdm-work-calendar-day:hover{z-index:1;border-color:var(--primary);box-shadow:0 5px 14px rgba(7,135,149,.13);transform:translateY(-1px)}
.sdm-work-calendar-day:focus-visible{outline:3px solid rgba(7,135,149,.2);outline-offset:1px}
.sdm-work-calendar-day.is-selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(7,135,149,.17)}
.sdm-work-calendar-number{font-size:14px;font-weight:800;line-height:1}
.sdm-work-calendar-marker{position:absolute;top:7px;right:7px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.78);font-size:10px;font-weight:900;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.sdm-work-calendar-assignment{display:inline-flex;max-width:100%;padding:3px 6px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:9px;font-weight:800;white-space:nowrap}
.sdm-work-calendar-day.is-today .sdm-work-calendar-number{display:grid;place-items:center;width:25px;height:25px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--primary);color:#fff}
.sdm-work-calendar-day.status-allowed{background:#fff}
.sdm-work-calendar-day.status-holiday{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.sdm-work-calendar-day.status-off{border-color:#ddd6fe;background:#f5f3ff;color:#6d28d9}
.sdm-work-calendar-day.status-leave{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.sdm-work-calendar-day.status-permission{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
.sdm-work-calendar-day.status-sick{border-color:#fbcfe8;background:#fdf2f8;color:#9d174d}
.sdm-work-calendar-day.status-inactive{border-color:#cbd5e1;background:#f1f5f9;color:#475569}
.sdm-work-calendar-day.status-work-on-off{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.sdm-work-calendar-info{margin:2px 16px 12px;padding:10px 12px;border:1px solid #bae6fd;border-radius:10px;background:#f0f9ff;color:#075985;font-size:12px;line-height:1.45}
.sdm-work-calendar-legend{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 15px;border-top:1px solid var(--bd);background:#fbfdfe}
.sdm-work-calendar-legend>span{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--bd);border-radius:999px;background:#fff;color:#475569;font-size:11px;white-space:nowrap}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:999px;background:#cbd5e1}
.legend-dot.holiday{background:#ef4444}.legend-dot.off{background:#8b5cf6}.legend-dot.leave{background:#3b82f6}.legend-dot.permission{background:#f59e0b}.legend-dot.sick{background:#ec4899}.legend-dot.work-on-off{background:#10b981}
.legend-tag{display:inline-flex;padding:2px 5px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:8px;font-style:normal;font-weight:900}
@media(min-width:768px) and (max-width:1023px){
 .sdm-work-calendar-head{align-items:stretch;flex-direction:column;gap:12px}
 .sdm-work-calendar-filters{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
 .sdm-work-calendar-filter{flex:1 0 180px}
 .sdm-work-calendar-day,.sdm-work-calendar-empty{min-height:70px}
 .customer-quota-summary-table{display:table!important;width:100%!important;min-width:0!important;table-layout:fixed}
}
@media(min-width:761px) and (max-width:900px){
 .page .table-wrap table:not(.table-mini),.page .table-scroll table:not(.table-mini){display:table;overflow:visible}
}
@media(max-width:767px){
 .sdm-leave-page .sdm-leave-tabs{display:flex;grid-template-columns:none;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
 .sdm-leave-page .sdm-leave-tabs::-webkit-scrollbar,.sdm-work-calendar-filters::-webkit-scrollbar{display:none}
 .sdm-work-calendar-filters{scrollbar-width:none}
 .sdm-leave-page .sdm-leave-tab{flex:0 0 auto;min-height:40px;padding:8px 12px;white-space:nowrap}
 .sdm-work-calendar-card{border-radius:12px}
 .sdm-work-calendar-head{align-items:stretch;flex-direction:column;gap:10px;padding:12px}
 .sdm-work-calendar-head h2{font-size:18px}
 .sdm-work-calendar-filters{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:3px}
 .sdm-work-calendar-filter{flex:1 0 calc(50% - 4px);min-width:132px}
 .sdm-work-calendar-scroll{padding:9px 7px 7px}
 .sdm-work-calendar-weekdays,.sdm-work-calendar-grid{gap:3px}
 .sdm-work-calendar-weekdays{margin-bottom:3px}
 .sdm-work-calendar-weekdays span{padding:4px 0;font-size:9px}
 .sdm-work-calendar-day,.sdm-work-calendar-empty{min-height:56px;border-radius:8px}
 .sdm-work-calendar-day{padding:7px 5px}
 .sdm-work-calendar-number{font-size:12px}
 .sdm-work-calendar-marker{top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;font-size:8px}
 .sdm-work-calendar-day.is-today .sdm-work-calendar-number{width:21px;height:21px;margin:-3px 0 0 -2px}
 .sdm-work-calendar-assignment{padding:2px 4px;font-size:7px}
 .sdm-work-calendar-info{margin:2px 8px 8px;padding:8px 9px}
 .sdm-work-calendar-legend{gap:5px;padding:9px 8px 11px}
 .sdm-work-calendar-legend>span{padding:4px 6px;font-size:9px}
}
/* RINGKASAN ASAL TAGIHAN LAYANAN ORDER */
.order-service-item-count{color:var(--muted);font-weight:750;white-space:nowrap}
.order-items-funding-table tbody tr:not(.order-group-charge-row)>td:first-child>strong{color:var(--primary);font-weight:800}
.order-global-bill-summary{max-width:500px;margin-left:auto;padding:12px 15px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.order-global-bill-row,.order-global-promo-calc{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.order-global-bill-row{padding:4px 0}
.order-global-bill-row>span:first-child,.order-global-promo-calc>span:first-child{color:var(--muted)}
.order-global-bill-row>span:last-child,.order-global-promo-calc>span:last-child{flex:0 0 auto;font-weight:400;text-align:right;white-space:nowrap}
.order-global-promo{display:grid;gap:3px;margin:8px 0 7px;padding-left:12px}
.order-global-promo>strong{color:var(--primary);font-weight:750}
.order-global-promo-calc{padding-left:8px}
.order-global-promo-calc>span:last-child{color:var(--danger,#dc2626)}
.order-global-bill-divider{height:1px;margin:6px 0;background:var(--bd)}
.order-global-bill-summary .order-quota-due{max-width:none;margin:0;padding:6px 0 0;border:0;border-radius:0;background:transparent}
.order-global-bill-summary .order-quota-due>span{font-weight:750}
.order-payment-adjustment{margin-top:8px}
.order-payment-paid-row{color:var(--success-600)}
.order-global-bill-summary .order-payment-paid-row>span:first-child{color:var(--success-600)}
.order-global-bill-summary .order-payment-paid-row>span:last-child{font-weight:400}
.order-payment-paid-row i,.order-payment-difference-label i{margin-right:4px}
.order-payment-difference-row{margin-top:7px;padding:9px 11px;border:1px solid rgba(245,158,11,.28);border-radius:9px;background:#fff7ed;color:var(--warning-600)}
.order-global-bill-summary .order-payment-difference-row>span:first-child{color:var(--warning-600)}
.order-payment-difference-label{display:inline-flex;align-items:center}
.order-payment-difference-row.is-refund{border-color:rgba(37,99,235,.22);background:#eff6ff;color:#1d4ed8}
.order-global-bill-summary .order-payment-difference-row.is-refund>span:first-child{color:#1d4ed8}
@media(max-width:760px){
 .order-global-bill-summary{max-width:none;margin-left:0}
}
@media(max-width:767px){
 .order-items-mobile .order-item-card:not(.order-group-charge-card)>.order-item-card-head>strong{color:var(--primary);font-weight:800}
 .order-item-card-pricing.order-bill-summary{display:grid;grid-template-columns:1fr;gap:0;font-size:13px}
 .order-bill-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:4px 0}
 .order-bill-row>span{min-width:0;color:var(--muted)}
 .order-bill-row>strong{flex:0 0 auto;font-weight:400;text-align:right;white-space:nowrap}
 .order-bill-quantity>strong{font-weight:750}
 .order-bill-divider{height:1px;margin:4px 0;background:var(--bd)}
.order-bill-base{padding:5px 0;font-size:14px}
.order-bill-base>strong:first-child{font-weight:750;text-align:left}
.order-bill-base>strong:first-child small{font-size:11px;font-weight:600;color:var(--muted)}
.order-bill-base>strong:last-child{color:var(--primary);font-weight:800}
.order-bill-addon{display:grid;gap:2px;margin:9px 0 0 12px;padding:9px 0 0 8px;border-top:1px dashed var(--bd)}
 .order-bill-addon-title{display:inline-flex;align-items:center;gap:6px;font-size:13px}
 .order-bill-addon-title :is(i,svg){width:16px;height:16px;flex:0 0 16px;font-size:14px;line-height:1;text-align:center}
 .order-bill-addon-express .order-bill-addon-title :is(i,svg){color:#f59e0b;filter:drop-shadow(0 1px 1px rgba(180,83,9,.18))}
 .order-bill-addon-handwash .order-bill-addon-title :is(i,svg){color:#0ea5e9}
 .order-bill-addon-chemical .order-bill-addon-title :is(i,svg){color:#8b5cf6}
 .order-bill-addon-charge{margin:0;padding:0;border-top:0}
 .order-bill-addon-charge .order-bill-addon-title :is(i,svg){color:#d96542}
 .order-bill-addon .order-bill-row{padding:1px 0}
 .order-bill-addon .order-bill-row>span{font-size:12px}
.order-bill-subtotal{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:11px;padding:11px 0 2px;border-top:2px solid color-mix(in srgb,var(--primary) 22%,var(--bd));font-size:14px}
.order-bill-subtotal>strong:first-child{font-weight:800}
.order-bill-subtotal>strong:first-child small{font-size:11px;font-weight:600;color:var(--muted)}
.order-bill-subtotal .order-bill-minimum-badge{display:inline-flex;align-items:center;min-height:20px;margin-left:5px;padding:2px 7px;border-radius:999px;background:#fff1dc;color:#b35d00;font-size:9px;font-weight:850;line-height:1;letter-spacing:.25px;vertical-align:middle}
.order-bill-subtotal>strong:last-child{color:var(--primary);font-size:15px;font-weight:850;white-space:nowrap}
 .order-charge-addon-card{border-style:solid;background:#fff}
 .order-charge-addon-card .order-charge-subtotal{border-top-color:color-mix(in srgb,#d96542 32%,var(--bd))}
}

/* Perapian halaman Terima Laundry dan Ubah Nota */
.order-selected-address{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.order-selected-address>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.order-selected-address span{color:var(--muted);font-size:13px;line-height:1.45}
.order-selected-address .btn{flex:0 0 auto}
.order-auto-grow{field-sizing:content;min-height:42px;overflow-y:hidden;resize:none;line-height:1.45}
.order-note-field{grid-column:1/4;align-self:end;margin-bottom:0}
.order-note-field .order-auto-grow{width:100%}
.order-composer-action{grid-column:4;align-self:end;align-items:flex-end}
.order-composer-action .btn{min-height:42px}
.order-global-bill-summary.has-payment-difference .order-quota-due>span{color:var(--muted);font-size:13px;font-weight:500}
.order-global-bill-summary.has-payment-difference .order-quota-due>strong{color:var(--text);font-size:15px;font-weight:700}
.order-global-bill-summary.has-payment-difference .order-payment-difference-row{margin-top:10px;padding:12px 13px;border-width:2px}
.order-global-bill-summary.has-payment-difference .order-payment-difference-label strong{font-size:15px;font-weight:850}
.order-global-bill-summary.has-payment-difference .order-payment-difference-row>strong:last-child{font-size:24px;font-weight:900;line-height:1}

@media(max-width:900px){
 .order-note-field,.order-composer-action{grid-column:1/-1}
 .order-composer-action{justify-content:flex-start}
}

@media(max-width:760px){
 .order-selected-address{align-items:flex-start}
 .order-selected-address .btn{align-self:center}
}

/* Riwayat versi nota dan konfirmasi perubahan */
.order-history-meta-grid,
.order-history-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.order-history-meta-grid>div,
.order-history-summary-grid>div{
  display:flex;
  min-height:72px;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border:1px solid var(--bd);
  border-radius:11px;
  background:#f8fafc;
}
.order-history-meta-grid span,
.order-history-summary-grid span{
  color:var(--muted);
  font-size:12px;
}
.order-history-snapshot-table th,
.order-history-snapshot-table td{
  vertical-align:top;
}
@media (max-width:900px){
  .order-history-meta-grid,
  .order-history-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .order-history-meta-grid,
  .order-history-summary-grid{grid-template-columns:1fr}
}

/* Perapian responsif Detail Nota dan Versi Nota */
.order-detail-page .order-detail-sheet{
  padding:0;
  overflow:visible;
}
.order-detail-section{
  padding:20px;
}
.order-detail-section+.order-detail-section{
  border-top:1px solid var(--bd);
}
.order-detail-section .card-head{
  margin-bottom:14px;
}
.order-detail-section .card-head h2{
  margin:0;
  font-size:18px;
}
.order-detail-page .order-stage5-head{
  margin-bottom:12px;
}
.order-detail-page .order-detail-actions{
  margin:0 0 18px;
}
.order-detail-page .order-detail-grid{
  gap:0;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:12px;
}
.order-detail-page .order-detail-grid>div{
  min-height:0;
  padding:13px 14px;
  border:0;
  border-radius:0;
  background:#fff;
}
.order-detail-page .order-detail-grid>div:nth-child(odd){
  border-right:1px solid var(--bd);
}
.order-detail-page .order-detail-grid>div:nth-child(n+3){
  border-top:1px solid var(--bd);
}
.order-detail-page .order-operational-status-grid{
  gap:0;
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:#f8fafc;
}
.order-detail-page .order-operational-status-grid>div{
  padding:12px 14px;
  border:0;
  border-right:1px solid var(--bd);
  border-radius:0;
  background:transparent;
}
.order-detail-page .order-operational-status-grid>div:last-child{
  border-right:0;
}
.order-detail-page .order-digital-delivery-status{
  margin-top:0;
  border-top:1px solid var(--bd);
  border-radius:0 0 12px 12px;
}
.order-detail-page .order-promotion-detail{
  gap:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:12px;
}
.order-detail-page .order-promotion-detail>div:not(.alert){
  padding:12px 14px;
  border-right:1px solid var(--bd);
}
.order-detail-page .order-promotion-detail>div:not(.alert):last-child{
  border-right:0;
}
.order-detail-page .order-payment-card{
  display:block;
}
.order-detail-page .order-payment-summary{
  gap:0;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:12px;
}
.order-detail-page .order-payment-summary>div{
  padding:13px 14px;
  border:0;
  border-right:1px solid var(--bd);
  border-radius:0;
  background:#fff;
}
.order-detail-page .order-payment-summary>div:last-child{
  border-right:0;
}
.order-detail-page .order-payment-current,
.order-detail-page .alert,
.order-detail-page .order-payment-empty{
  margin-top:14px;
}
.order-detail-page .order-payment-history{
  margin-top:14px;
}
.order-detail-page .order-table-desktop{
  width:100%;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:12px;
}
.order-detail-page .order-responsive-table{
  width:100%;
  margin:0;
  table-layout:auto;
}
.order-detail-page .order-responsive-table th,
.order-detail-page .order-responsive-table td{
  vertical-align:top;
  white-space:normal;
}
.order-detail-page .order-reference{
  display:inline-block;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
}
.order-detail-page .order-charge-card-list{
  margin-top:14px;
}
.order-detail-page .order-group-charge-card{
  border-radius:10px;
  box-shadow:none;
}
.order-detail-page .order-detail-total{
  max-width:560px;
  margin-top:16px;
  padding:14px 0 0;
  border:0;
  border-top:1px solid var(--bd);
  border-radius:0;
}
.order-detail-page .order-detail-total .grand{
  margin-top:2px;
}
.order-history-audit{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,1.7fr);
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:12px;
  background:#fff8db;
}
.order-history-audit>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
  padding:11px 13px;
  border-right:1px solid #eadca0;
}
.order-history-audit>div:last-child{
  border-right:0;
}
.order-history-audit span{
  color:#806800;
  font-size:12px;
}
.order-history-audit strong{
  overflow-wrap:anywhere;
}
.order-history-floating-badge{
  position:fixed;
  z-index:70;
  top:76px;
  right:18px;
  padding:8px 13px;
  border:1px solid #d59d00;
  border-radius:999px;
  background:#facc15;
  color:#3b2a00;
  box-shadow:0 7px 20px rgba(120,84,0,.2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  pointer-events:none;
}

@media(max-width:900px){
  .order-detail-section{
    padding:17px;
  }
  .order-detail-page .order-detail-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .order-detail-page .order-detail-actions>.btn,
  .order-detail-page .order-detail-actions>form,
  .order-detail-page .order-detail-actions>form .btn{
    width:100%;
    justify-content:center;
  }
  .order-detail-page .order-detail-grid,
  .order-detail-page .order-operational-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .order-detail-page .order-operational-status-grid>div:nth-child(2n){
    border-right:0;
  }
  .order-detail-page .order-operational-status-grid>div:nth-child(n+3){
    border-top:1px solid var(--bd);
  }
  .order-history-audit{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .order-history-audit>div:nth-child(2n){
    border-right:0;
  }
  .order-history-audit>div:nth-child(n+3){
    border-top:1px solid #eadca0;
  }
  .order-history-audit .order-history-reason{
    grid-column:1/-1;
    border-right:0;
  }
  .order-detail-page .order-responsive-table,
  .order-detail-page .order-responsive-table tbody,
  .order-detail-page .order-responsive-table tr,
  .order-detail-page .order-responsive-table td{
    display:block;
    width:100%;
  }
  .order-detail-page .order-responsive-table thead{
    display:none;
  }
  .order-detail-page .order-responsive-table tr{
    padding:10px 13px;
    border-bottom:1px solid var(--bd);
  }
  .order-detail-page .order-responsive-table tr:last-child{
    border-bottom:0;
  }
  .order-detail-page .order-responsive-table td{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:10px;
    padding:6px 0;
    border:0;
    text-align:left;
    overflow-wrap:anywhere;
  }
  .order-detail-page .order-responsive-table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:500;
  }
  .order-detail-page .order-detail-items-table td[data-label="Layanan"]{
    grid-template-columns:1fr;
    padding-bottom:8px;
  }
  .order-detail-page .order-detail-items-table td[data-label="Layanan"]::before{
    display:none;
  }
  .order-detail-page .order-history-table td[data-label="Aksi"] .btn{
    width:max-content;
  }
  .order-detail-page .order-reference{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media(max-width:600px){
  .order-detail-page .order-detail-sheet{
    border-radius:12px;
  }
  .order-detail-section{
    padding:14px;
  }
  .order-detail-page .order-stage5-head{
    gap:10px;
  }
  .order-detail-page .order-detail-actions{
    gap:7px;
  }
  .order-detail-page .order-detail-actions .btn{
    min-height:40px;
    padding:8px 9px;
    font-size:12px;
  }
  .order-detail-page .order-detail-grid,
  .order-detail-page .order-operational-status-grid,
  .order-detail-page .order-payment-summary,
  .order-detail-page .order-promotion-detail{
    grid-template-columns:1fr;
  }
  .order-detail-page .order-detail-grid>div,
  .order-detail-page .order-operational-status-grid>div,
  .order-detail-page .order-payment-summary>div,
  .order-detail-page .order-promotion-detail>div:not(.alert){
    border-right:0;
    border-top:1px solid var(--bd);
  }
  .order-detail-page .order-detail-grid>div:first-child,
  .order-detail-page .order-operational-status-grid>div:first-child,
  .order-detail-page .order-payment-summary>div:first-child,
  .order-detail-page .order-promotion-detail>div:not(.alert):first-child{
    border-top:0;
  }
  .order-detail-page .order-responsive-table td{
    grid-template-columns:104px minmax(0,1fr);
  }
  .order-detail-page .order-responsive-table td[data-label="Aksi"]{
    align-items:center;
  }
  .order-history-audit{
    grid-template-columns:1fr;
  }
  .order-history-audit>div,
  .order-history-audit>div:nth-child(2n),
  .order-history-audit .order-history-reason{
    grid-column:auto;
    border-right:0;
    border-top:1px solid #eadca0;
  }
  .order-history-audit>div:first-child{
    border-top:0;
  }
  .order-history-floating-badge{
    top:110px;
    right:12px;
    padding:7px 11px;
    font-size:11px;
  }
}

/* Detail Nota bergaya lembar e-Nota dan pusat aksi di Daftar Nota */
.order-admin-receipt-page{max-width:920px}
.order-admin-receipt-sheet{overflow:hidden;border:1px solid var(--bd);border-radius:18px;background:#fffdf8;box-shadow:0 10px 28px rgba(15,23,42,.08)}
.order-admin-receipt-head{position:relative;padding:24px 26px 20px;border-bottom:1px solid var(--bd)}
.order-admin-back{margin-bottom:18px}
.order-admin-receipt-label{display:block;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.order-admin-receipt-number-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:5px}
.order-admin-receipt-number-row h1{margin:0;color:var(--primary);font-size:30px;line-height:1.1}
.order-admin-receipt-head p{margin:7px 0 0;color:var(--muted)}
.order-admin-summary{padding:0 26px 22px}
.order-admin-summary-identity{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--bd)}
.order-admin-summary-identity>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:18px 0}
.order-admin-summary-identity>div+div{padding-left:24px;border-left:1px solid var(--bd)}
.order-admin-summary span,.order-admin-simple-rows span,.order-admin-payment-summary span,.order-admin-history-list span,.order-history-audit-strip span{color:var(--muted);font-size:12px}
.order-admin-summary small{color:var(--muted);line-height:1.45}
.order-admin-summary-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--bd)}
.order-admin-summary-status>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 9px;padding:17px 14px;border-left:1px solid var(--bd)}
.order-admin-summary-status>div:first-child{padding-left:0;border-left:0}
.order-admin-summary-status i{grid-row:1/4;color:var(--primary);font-size:16px}
.order-admin-summary-status span,.order-admin-summary-status strong,.order-admin-summary-status small{grid-column:2}
.order-admin-summary-notes{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding-top:17px}
.order-admin-summary-notes>div{display:flex;min-width:0;flex-direction:column;gap:4px}
.order-admin-section{padding:22px 26px;border-top:1px solid var(--bd)}
.order-admin-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.order-admin-section-title h2{margin:0;font-size:18px}
.order-admin-section-title h2 i{margin-right:7px;color:var(--primary)}
.order-admin-order-detail{background:#edf7ef}
.order-admin-service-list{display:grid;gap:0}
.order-admin-service-item{padding:17px 0;border-top:1px solid rgba(60,94,68,.18)}
.order-admin-service-item:first-child{padding-top:0;border-top:0}
.order-admin-service-name{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:11px}
.order-admin-service-name h3{margin:0;font-size:15px}
.order-admin-service-name>strong{white-space:nowrap}
.order-admin-bill-summary{display:grid;gap:8px}
.order-admin-bill-summary>div:not(.order-admin-short-divider):not(.order-admin-full-divider),.order-admin-addon>div,.order-admin-charge-row>div:not(.order-admin-full-divider){display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.order-admin-bill-summary span,.order-admin-charge-row span{color:#53675a;font-size:13px}
.order-admin-short-divider{width:62%;height:1px;background:rgba(60,94,68,.18)}
.order-admin-full-divider{height:1px;background:rgba(60,94,68,.18)}
.order-admin-base-total{font-weight:700}
.order-admin-addon{display:grid!important;gap:5px;padding-top:5px}
.order-admin-addon>strong{font-size:13px}
.order-admin-addon span{font-size:12px}
.order-admin-service-total{margin-top:3px;padding-top:9px;border-top:1px dashed rgba(60,94,68,.25);font-weight:700}
.order-admin-service-note{display:flex;gap:12px;margin-top:11px;padding:9px 11px;border-left:3px solid var(--primary);background:rgba(255,255,255,.5);font-size:12px}
.order-admin-service-note span{color:var(--muted)}
.order-admin-charge-list{display:grid;gap:10px;margin-top:13px}
.order-admin-charge-row{display:grid;gap:8px;padding:14px;border:1px dashed rgba(0,140,153,.28);border-radius:12px;background:rgba(255,255,255,.58)}
.order-admin-charge-row>strong{color:var(--primary)}
.order-admin-total{display:grid;gap:9px;margin-top:16px;padding-top:14px;border-top:2px dashed rgba(60,94,68,.28)}
.order-admin-total>div{display:flex;align-items:center;justify-content:space-between;gap:18px}
.order-admin-total .grand{padding-top:8px;border-top:1px solid rgba(60,94,68,.18);font-size:17px}
.order-admin-total .grand strong{color:#37834b;font-size:24px}
.order-admin-inline-section{background:#fff}
.order-admin-simple-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.order-admin-simple-rows>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:13px 16px;border-left:1px solid var(--bd)}
.order-admin-simple-rows>div:first-child{padding-left:0;border-left:0}
.order-admin-payment-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.order-admin-payment-summary>div{display:flex;min-width:0;flex-direction:column;gap:5px;padding:14px 15px;border-left:1px solid var(--bd)}
.order-admin-payment-summary>div:first-child{padding-left:0;border-left:0}
.order-admin-payment-summary .focus strong{font-size:21px}
.order-admin-payment-summary .warning strong{color:#c66a00}
.order-admin-payment-summary .danger strong{color:var(--danger)}
.order-admin-payment-summary .success strong{color:var(--primary)}
.order-admin-disclosure{border-top:1px solid var(--bd)}
.order-admin-disclosure.order-admin-section{padding:0}
.order-admin-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 26px;cursor:pointer;font-size:17px;font-weight:800;list-style:none}
.order-admin-disclosure>summary::-webkit-details-marker{display:none}
.order-admin-disclosure>summary::after{content:'+';color:var(--primary);font-size:22px;font-weight:400}
.order-admin-disclosure[open]>summary::after{content:'−'}
.order-admin-disclosure>summary span{min-width:24px;padding:2px 7px;border-radius:999px;background:#e6f6f7;color:var(--primary);font-size:12px;text-align:center}
.order-admin-disclosure-body{padding:0 26px 20px}
.order-admin-history-list{display:grid;gap:0;padding:0 26px 20px}
.order-admin-payment-section .order-admin-history-list{padding:14px 0 0}
.order-admin-history-list article{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 0;border-top:1px solid var(--bd)}
.order-admin-history-list article:first-child{border-top:0}
.order-admin-history-list article>div{display:flex;min-width:0;flex-direction:column;gap:4px}
.order-admin-history-list article .wide{grid-column:1/-1}
.order-admin-history-list article small{grid-column:1/-1;overflow-wrap:anywhere;color:var(--muted)}
.order-history-audit-strip{display:grid;grid-template-columns:160px 180px 100px minmax(0,1fr);gap:0;margin:0 26px 22px;border-top:1px solid #eadca0;border-bottom:1px solid #eadca0;background:#fff8db}
.order-history-audit-strip>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:12px 14px;border-left:1px solid #eadca0}
.order-history-audit-strip>div:first-child{padding-left:0;border-left:0}
.order-history-audit-strip strong{overflow-wrap:anywhere}
.order-history-version-page .order-admin-receipt-sheet{position:relative}

/* Pusat tindakan pada Daftar Nota */
.order-list-card,.order-list-desktop{overflow:visible}
.order-list-actions,.order-mobile-actions{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:thin}
.order-list-actions{justify-content:center}
.order-mobile-actions{justify-content:flex-start}
.order-list-actions .btn-icon,.order-mobile-actions .btn-icon{flex:0 0 32px}
.order-list-actions form,.order-mobile-actions form{display:inline-flex;flex:0 0 auto;margin:0}

@media(max-width:900px){
  .order-admin-summary-status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-admin-summary-status>div:nth-child(3){border-left:0}
  .order-admin-summary-status>div:nth-child(n+3){border-top:1px solid var(--bd)}
  .order-admin-payment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-admin-payment-summary>div:nth-child(3){border-left:0;border-top:1px solid var(--bd)}
  .order-admin-payment-summary>div:nth-child(4){border-top:1px solid var(--bd)}
  .order-admin-history-list article{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-history-audit-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-history-audit-strip>div:nth-child(3){border-left:0;border-top:1px solid #eadca0}
  .order-history-audit-strip>div:nth-child(4){border-top:1px solid #eadca0}
}

@media(max-width:600px){
  .order-admin-receipt-page{padding:0 7px}
  .order-admin-receipt-sheet{border-radius:13px}
  .order-admin-receipt-head{padding:17px 16px 15px}
  .order-admin-receipt-number-row h1{font-size:24px}
  .order-admin-summary{padding:0 16px 17px}
  .order-admin-summary-identity{grid-template-columns:1fr}
  .order-admin-summary-identity>div+div{padding-left:0;border-top:1px solid var(--bd);border-left:0}
  .order-admin-summary-status{grid-template-columns:1fr 1fr}
  .order-admin-summary-status>div{padding:13px 8px}
  .order-admin-summary-status>div:nth-child(odd){border-left:0}
  .order-admin-summary-notes{grid-template-columns:1fr;gap:12px}
  .order-admin-section{padding:18px 16px}
  .order-admin-section-title h2{font-size:16px}
  .order-admin-service-name{align-items:flex-start}
  .order-admin-simple-rows{grid-template-columns:1fr}
  .order-admin-simple-rows>div,.order-admin-simple-rows>div:first-child{padding:11px 0;border-top:1px solid var(--bd);border-left:0}
  .order-admin-simple-rows>div:first-child{border-top:0}
  .order-admin-payment-summary{grid-template-columns:1fr}
  .order-admin-payment-summary>div,.order-admin-payment-summary>div:first-child,.order-admin-payment-summary>div:nth-child(3),.order-admin-payment-summary>div:nth-child(4){padding:11px 0;border-top:1px solid var(--bd);border-left:0}
  .order-admin-payment-summary>div:first-child{border-top:0}
  .order-admin-disclosure>summary{padding:15px 16px;font-size:15px}
  .order-admin-disclosure-body,.order-admin-history-list{padding-right:16px;padding-left:16px}
  .order-admin-payment-section .order-admin-history-list{padding-right:0;padding-left:0}
  .order-admin-history-list article{grid-template-columns:1fr 1fr;gap:10px}
  .order-history-audit-strip{grid-template-columns:1fr;margin:0 16px 17px}
  .order-history-audit-strip>div,.order-history-audit-strip>div:first-child,.order-history-audit-strip>div:nth-child(3),.order-history-audit-strip>div:nth-child(4){padding:10px 0;border-top:1px solid #eadca0;border-left:0}
  .order-history-audit-strip>div:first-child{border-top:0}
  .order-history-floating-badge{top:106px;right:10px}
  .order-mobile-actions{width:100%}
}

/* Persetujuan jumlah pakaian saat penerimaan */
.item-count-public-card{max-width:620px}.item-count-public-logo{display:flex;justify-content:center;padding:2px 0 8px}.item-count-public-logo img{display:block;max-width:min(230px,70%);max-height:92px;width:auto;height:auto;object-fit:contain}.item-count-consent-warning{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:flex-start;margin:18px 0;padding:14px 16px;border:2px solid #f59e0b;border-radius:12px;background:#fff7d6;color:#713f12;animation:item-count-warning-border 1.6s ease-in-out infinite}.item-count-consent-warning>i{margin-top:2px;font-size:1.35rem;color:#ea580c;animation:item-count-warning-icon 1.1s ease-in-out infinite}.item-count-consent-warning strong{display:block;margin-bottom:4px;color:#9a3412}.item-count-consent-warning p{margin:0;color:#713f12;line-height:1.55}.item-count-result-list{border:1px solid var(--border,#e5e7eb);border-radius:12px;overflow:hidden;margin:16px 0}.item-count-result-list>div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid var(--border,#e5e7eb)}.item-count-result-list>div:last-child{border-bottom:0}.item-count-result-total{background:#f8fafc}.item-count-result-total strong{font-size:1.05rem}@keyframes item-count-warning-border{0%,100%{border-color:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{border-color:#fbbf24;box-shadow:0 0 0 4px rgba(245,158,11,.16)}}@keyframes item-count-warning-icon{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.item-count-consent-warning,.item-count-consent-warning>i{animation:none}}
.order-item-count-status{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 24px 18px;padding:14px 16px;border:1px solid #f2c46d;border-radius:12px;background:#fffaf0}.order-item-count-status>div{display:grid;gap:4px}.order-item-count-status strong{color:#7c4a03}.order-item-count-status span{font-size:.9rem;color:#6b7280}.order-item-count-modal-panel{max-width:420px}.order-item-count-question{margin:0;text-align:center;font-weight:700}.order-item-count-choice-grid{display:flex;justify-content:center;gap:10px;margin-top:18px}.order-item-count-choice-grid>.btn{min-width:92px}.order-item-count-choice{display:grid;gap:7px;text-align:left;padding:18px;border:1px solid #d9dee7;border-radius:14px;background:#fff;cursor:pointer;color:#111827}.order-item-count-choice:hover{border-color:var(--alterna-primary,#7f1d1d);box-shadow:0 6px 18px rgba(15,23,42,.08)}.order-item-count-choice i{font-size:1.7rem;color:var(--alterna-primary,#7f1d1d)}.order-item-count-choice strong{font-size:1rem}.order-item-count-choice span{font-size:.86rem;color:#6b7280;line-height:1.45}.order-item-count-back{margin-top:16px}.order-item-count-qr{width:250px;min-height:250px;margin:18px auto;display:grid;place-items:center;padding:10px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}.order-item-count-qr img,.order-item-count-qr canvas{max-width:100%;height:auto}.order-item-count-wait{text-align:center;color:#6b7280}.order-item-composer.is-count-result-locked{opacity:.68;pointer-events:none}
@media(max-width:680px){.order-item-count-status{align-items:flex-start;flex-direction:column;margin-left:14px;margin-right:14px}.order-item-count-status .btn{width:100%}}
.order-admin-item-count-section .order-admin-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.order-admin-count-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.order-admin-count-form>.btn{grid-column:1/-1;justify-self:start}.order-admin-count-input{display:flex;align-items:center;gap:8px}.order-admin-count-input .input{min-width:0}.order-admin-count-input span{color:#6b7280}.order-admin-count-result-list{max-width:620px}@media(max-width:680px){.order-admin-count-form{grid-template-columns:1fr}.order-admin-item-count-section .order-admin-section-title{align-items:flex-start;flex-direction:column}}
.work-tag-sort-count-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.work-tag-sort-count-form>.btn{grid-column:1/-1;justify-self:start}@media(max-width:680px){.work-tag-sort-count-form{grid-template-columns:1fr}}
.digital-receipt-item-count-alert{margin:0 26px 18px;line-height:1.55}.digital-receipt-item-count-alert strong{display:block;margin-bottom:3px}@media(max-width:600px){.digital-receipt-item-count-alert{margin:0 16px 15px}}
/* Kalender pemilihan tanggal Cuti, Izin, Sakit, dan Tukar Off */
.flatpickr-calendar{z-index:1400}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.sdm-date-unavailable{display:inline-flex!important;visibility:visible!important;opacity:1!important;cursor:not-allowed!important;color:rgba(100,116,139,.38)!important;background:transparent!important;border-color:transparent!important;position:relative}
.flatpickr-day.sdm-date-holiday,.flatpickr-day.sdm-date-holiday:hover{color:rgba(220,38,38,.7)!important;background:#fef2f2!important}
.flatpickr-day.sdm-date-off,.flatpickr-day.sdm-date-off:hover{color:rgba(217,119,6,.72)!important;background:#fff7ed!important}
.sdm-date-reason-tooltip{margin:5px 8px 8px;padding:7px 9px;border-radius:7px;background:#183b46;color:#fff;font-size:11px;font-weight:600;line-height:1.3;text-align:center;box-shadow:0 3px 10px rgba(15,23,42,.16)}
.sdm-date-reason-tooltip[hidden]{display:none!important}
.sdm-date-legend{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:7px;color:#64748b;font-size:12px}
.sdm-date-legend span{display:inline-flex;align-items:center;gap:5px}.sdm-date-legend i{width:9px;height:9px;border-radius:50%;background:#cbd5e1}.sdm-date-legend i.is-holiday{background:#dc2626}.sdm-date-legend i.is-off{background:#d97706}.sdm-date-legend i.is-unavailable{background:#94a3b8}
.flatpickr-day:not(.flatpickr-disabled):not(.sdm-date-unavailable){cursor:pointer}
.sdm-pin-confirm-card{max-width:420px}
.flatpickr-day.sdm-date-preview,.flatpickr-day.sdm-date-preview:hover{color:#fff!important;background:#2795e8!important;border-color:#2795e8!important;box-shadow:0 0 0 2px rgba(39,149,232,.16)}
.sdm-date-legend i.is-selected{background:#2795e8}.sdm-absence-preview{margin:0 0 14px;padding:9px 11px;border:1px solid #bae6fd;border-radius:9px;background:#f0f9ff;color:#075985;font-size:13px;font-weight:600}.sdm-absence-preview.is-error{border-color:#fecaca;background:#fff1f2;color:#b91c1c}

/* Terima Laundry — alur input berurutan dan penguncian operasional */
.order-step-locked{
  opacity:.52;
  pointer-events:none;
  user-select:none;
}
.order-outlet-message{
  margin-top:9px;
  padding:10px 12px;
  border:1px solid #f1b7b7;
  border-radius:10px;
  background:#fff1f1;
  color:#b42318;
  font-size:13px;
  font-weight:700;
}
.order-outlet-message.is-work-restriction{
  border-color:#f0a7a7;
  background:#fff0f0;
}

/* Tahap 6A — Proses Kerja */
.process-work-page,.process-review-page{max-width:1180px}
.process-scan-card{max-width:680px;margin:0 auto;padding:22px}
.process-page-head{margin-bottom:18px}
.process-page-head h1,.process-order-head h1,.process-entry-head h1,.process-review-head h1{margin:0;color:var(--primary);font-size:24px}
.process-page-head p,.process-order-head p,.process-review-head p{margin:5px 0 0;color:var(--muted)}
.process-scan-form{display:grid;gap:14px}
.process-scan-actions,.process-entry-actions,.process-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.process-camera{position:relative;overflow:hidden;margin-bottom:15px;border:1px solid var(--bd);border-radius:14px;background:#111;aspect-ratio:4/3}
.process-camera video{width:100%;height:100%;object-fit:cover}
.process-camera-frame{position:absolute;inset:15%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.process-order-sheet,.process-review-sheet,.process-entry-card{padding:22px}
.process-order-head,.process-entry-head,.process-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--bd)}
.process-eyebrow{display:block;margin-bottom:4px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.process-order-summary,.process-quantity-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:17px;border:1px solid var(--bd);border-radius:12px;background:#f8fafc}
.process-order-summary>div,.process-quantity-summary>div{display:flex;min-height:76px;flex-direction:column;gap:5px;padding:13px;border-right:1px solid var(--bd)}
.process-order-summary>div:last-child,.process-quantity-summary>div:last-child{border-right:0}
.process-order-summary span,.process-quantity-summary span,.process-review-grid span,.process-review-note span{color:var(--muted);font-size:12px}
.process-order-note,.process-review-note{margin-top:13px;padding:13px;border-left:4px solid var(--primary);border-radius:9px;background:#f5fbfc}
.process-order-note p,.process-review-note p{margin:5px 0 0;white-space:pre-wrap}
.process-priority-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.process-priority-alert>div{min-width:0}
.process-priority-alert form{flex:0 0 auto}
.process-priority-alert .btn{white-space:nowrap}
.process-service-list{display:grid;gap:14px;margin-top:18px}
.process-service-block{padding:16px;border:1px solid var(--bd);border-radius:13px;background:#fff}
.process-service-block.has-issue{border-color:#f0ad4e;background:#fffaf1}
.process-service-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.process-service-head h2{margin:0;font-size:17px}
.process-service-head p{margin:4px 0 0;color:var(--muted);font-weight:700}
.process-option-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.process-option-tags span{padding:4px 8px;border:1px solid var(--bd);border-radius:999px;background:#fff;font-size:11px;font-weight:700}
.process-service-note{margin:10px 0 0;color:var(--muted);white-space:pre-wrap}
.process-issue-note{display:flex;align-items:center;gap:7px;margin-top:10px;color:#9a5d00;font-weight:700}
.process-stepper{display:flex;overflow-x:auto;gap:0;margin-top:16px;padding:4px 1px 8px;scrollbar-width:thin}
.process-step{position:relative;display:flex;min-width:115px;flex:1 0 115px;align-items:center;flex-direction:column;gap:7px;padding:0 8px;color:var(--muted);text-align:center;text-decoration:none;font-size:12px;font-weight:700}
.process-step:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 18px);right:calc(-50% + 18px);height:3px;background:#d7dde5}
.process-step-dot{position:relative;z-index:2;display:grid;width:36px;height:36px;place-items:center;border:2px solid #cfd7e2;border-radius:50%;background:#fff;color:#8b95a5}
.process-step.is-completed .process-step-dot{border-color:#20a464;background:#e9f9f0;color:#11834c}
.process-step.is-completed:not(:last-child)::after{background:#20a464}
.process-step.is-active{color:#8a4a00;cursor:pointer}
.process-step.is-active .process-step-dot{border-color:#f59e0b;background:#fff4df;color:#b56700;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.process-step.has-issue .process-step-dot{border-color:#dc3545;background:#fff0f1;color:#dc3545}
.process-entry-card{max-width:780px;margin:0 auto}
.process-entry-grid{margin-top:17px}
.process-unit-input{display:flex;align-items:stretch}
.process-unit-input .input{min-width:0;border-radius:10px 0 0 10px}
.process-unit-input span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--bd);border-left:0;border-radius:0 10px 10px 0;background:#f8fafc;font-weight:700}
.process-entry-actions{margin-top:17px;padding-top:14px;border-top:1px solid var(--bd)}
.process-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:17px;border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.process-review-grid>div{display:flex;min-height:82px;flex-direction:column;gap:4px;padding:13px;border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.process-review-grid>div:nth-child(3n){border-right:0}
.process-review-grid>div:nth-last-child(-n+3){border-bottom:0}
.process-review-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--bd)}
.process-review-form h2{margin:0 0 13px;font-size:18px}
.process-history-details{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.process-history-details summary{cursor:pointer;font-weight:800;color:var(--primary)}
.process-history-list{display:grid;gap:8px;margin-top:10px}
.process-history-list>div{padding:10px 12px;border:1px solid var(--bd);border-radius:9px}
.process-history-list p{margin:4px 0 0;color:var(--muted)}
.process-discretion-form{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--bd)}

@media(max-width:760px){
 .process-scan-card,.process-order-sheet,.process-review-sheet,.process-entry-card{padding:15px}
 .process-order-head,.process-entry-head,.process-review-head{flex-direction:column}
 .process-order-summary,.process-quantity-summary{grid-template-columns:1fr}
 .process-order-summary>div,.process-quantity-summary>div{min-height:auto;border-right:0;border-bottom:1px solid var(--bd)}
 .process-order-summary>div:last-child,.process-quantity-summary>div:last-child{border-bottom:0}
 .process-priority-alert{align-items:stretch;flex-direction:column}
 .process-priority-alert .btn{width:100%;justify-content:center}
 .process-service-head{flex-direction:column}
 .process-option-tags{justify-content:flex-start}
 .process-review-grid{grid-template-columns:1fr}
 .process-review-grid>div,.process-review-grid>div:nth-child(3n),.process-review-grid>div:nth-last-child(-n+3){border-right:0;border-bottom:1px solid var(--bd)}
 .process-review-grid>div:last-child{border-bottom:0}
 .process-entry-actions .btn,.process-scan-actions .btn{flex:1 1 auto;justify-content:center}
}
.menu-count{display:inline-grid;min-width:20px;height:20px;margin-left:auto;place-items:center;padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;font-size:10px;font-weight:800}

/* Master Proses — pilihan icon sistem dan icon stepper */
.process-name-with-icon{display:inline-flex;align-items:center;gap:8px;min-width:0}
.process-name-icon{display:inline-grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border:1px solid var(--bd);border-radius:8px;background:#f8fafc;color:var(--primary);font-size:14px}
.process-icon-field{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:start}
.process-icon-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.process-icon-choice{display:flex;min-width:0;min-height:68px;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:9px 7px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--text);cursor:pointer;font:inherit;text-align:center}
.process-icon-choice i{color:var(--primary);font-size:20px;line-height:1}
.process-icon-choice span{font-size:11px;font-weight:700;line-height:1.25}
.process-icon-choice:hover,.process-icon-choice:focus-visible{border-color:var(--primary);outline:0}
.process-icon-choice.is-selected{border-color:var(--primary);background:var(--primary-soft,#eefbfc);box-shadow:0 0 0 2px rgba(7,135,149,.12)}
.process-icon-preview{display:flex;min-height:76px;align-items:center;gap:10px;padding:11px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.process-icon-preview-box{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border:1px solid var(--bd);border-radius:50%;background:#fff;color:var(--primary);font-size:22px}
.process-icon-preview>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.process-icon-preview small{color:var(--muted);font-size:11px}
.process-icon-preview strong{font-size:12px;line-height:1.3}
.process-view-icon{display:inline-flex;align-items:center;gap:8px}
.process-view-icon i{color:var(--primary);font-size:17px}
.process-step-icon{font-size:16px;line-height:1}
.process-step-complete-mark{position:absolute;right:-3px;bottom:-3px;display:grid;width:15px;height:15px;place-items:center;border:2px solid #fff;border-radius:50%;background:#20a464;color:#fff;font-size:8px;line-height:1}
.process-step-complete-mark i{font-size:8px;line-height:1}
.process-step.has-issue .process-step-complete-mark{background:#dc3545}

@media(max-width:900px){
  .process-icon-field{grid-template-columns:1fr}
  .process-icon-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process-icon-preview{min-height:64px}
}

@media(max-width:520px){
  .process-icon-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-icon-choice{min-height:64px}
  .process-name-icon{width:25px;height:25px;flex-basis:25px}
  .process-step-icon{font-size:15px}
}

/* Proses Kerja: penekanan konfirmasi hitung dan pembagian proses sebagian */
.process-count-attention{display:flex;align-items:flex-start;gap:12px;margin:10px 0 14px;padding:14px 15px;border:2px solid #f59e0b;border-left:6px solid #ea580c;border-radius:12px;background:#fff3cd;color:#7c2d12;line-height:1.5;box-shadow:0 0 0 3px rgba(245,158,11,.10),0 4px 12px rgba(234,88,12,.08)}
.process-count-attention>div{min-width:0}
.process-count-attention strong{display:block;margin:0 0 4px;color:#c2410c;font-size:14px;font-weight:800}
.process-count-attention p{margin:0;color:#7c2d12;font-size:13px;font-weight:700}
.process-count-attention-icon{flex:0 0 auto;margin-top:1px;color:#f97316;font-size:25px;line-height:1;filter:drop-shadow(0 0 4px rgba(249,115,22,.55));animation:process-warning-blink .75s ease-in-out infinite}
.process-count-confirm-label{color:#ea580c!important;font-weight:800}
.process-count-confirm-label .req{color:#ea580c}
.process-allocation-summary,.process-allocation-locked{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.process-allocation-summary span,.process-allocation-locked span{color:var(--muted);font-size:12px}
.process-allocation-summary strong,.process-allocation-locked strong{white-space:nowrap}
.process-allocation-explainer,.process-work-mode-intro{display:flex;align-items:flex-start;gap:12px;margin:14px 0;padding:13px 14px;border:1px solid #9bd9df;border-radius:11px;background:#eefbfc;color:#165c63}
.process-allocation-explainer>i,.process-work-mode-intro>i{flex:0 0 auto;margin-top:1px;color:var(--primary);font-size:20px}
.process-allocation-explainer strong,.process-work-mode-intro strong{display:block;margin-bottom:3px;color:#0d6d76}
.process-allocation-explainer p,.process-work-mode-intro p{margin:0;font-size:13px;line-height:1.5}
.process-allocation-instruction{margin:13px 0 16px;padding:13px 15px;border:1px solid #d8e2ea;border-radius:11px;background:#f8fafc}
.process-allocation-instruction strong{display:block;margin-bottom:7px;color:var(--text)}
.process-allocation-instruction ol{margin:0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.6}
.process-work-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.process-work-mode-options form{margin:0}
.process-work-mode-card{display:flex;width:100%;height:100%;align-items:center;gap:12px;padding:15px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.process-work-mode-card:hover{border-color:#7ccbd3;box-shadow:0 6px 18px rgba(15,118,128,.10);transform:translateY(-1px)}
.process-work-mode-card-primary{border-color:#69c7cf;background:#f2fcfd}
.process-work-mode-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:50%;background:#e8f8fa;color:var(--primary);font-size:19px}
.process-work-mode-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}
.process-work-mode-copy strong{color:#0d6d76;font-size:14px}
.process-work-mode-copy small{color:var(--muted);font-size:12px;line-height:1.45}
.process-work-mode-arrow{flex:0 0 auto;color:#8aa0ad}
.process-allocation-review{margin:14px 0;padding:15px;border:1px solid #9bd9df;border-radius:12px;background:#f8feff}
.process-allocation-review-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.process-allocation-review-head>i{color:var(--primary);font-size:21px}
.process-allocation-review-head strong{display:block;color:#0d6d76}
.process-allocation-review-head p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.process-allocation-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.process-allocation-review-grid>div{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid #d7e6ea;border-radius:9px;background:#fff}
.process-allocation-review-grid span{color:var(--muted);font-size:11px}
.process-allocation-review-grid strong{font-size:14px}
.process-allocation-review-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:13px}
.process-stage-track{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:center;margin:4px 0 16px;padding:12px 13px;border:1px solid var(--bd);border-radius:11px;background:#fbfdff}
.process-stage-track-item{display:flex;align-items:flex-start;gap:9px;min-width:0;color:#8a98a8}
.process-stage-track-item>span:last-child{display:flex;min-width:0;flex-direction:column;gap:1px}
.process-stage-track-item strong{font-size:12px;line-height:1.3}
.process-stage-track-item small{font-size:11px;line-height:1.35}
.process-stage-track-number{display:grid;flex:0 0 25px;width:25px;height:25px;place-items:center;border:1px solid #cad5df;border-radius:50%;background:#fff;color:#7b8794;font-size:11px;font-weight:800}
.process-stage-track-item.is-active{color:#0d6d76}
.process-stage-track-item.is-active .process-stage-track-number{border-color:var(--primary);background:#e8f8fa;color:var(--primary)}
.process-stage-track-item.is-done{color:#26764c}
.process-stage-track-item.is-done .process-stage-track-number{border-color:#75c49a;background:#eaf8f0;color:#21824f}
.process-stage-track-line{height:2px;background:#d8e2ea}
@keyframes process-warning-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.15;transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.process-count-attention-icon{animation:none}}
@media(max-width:760px){
  .process-stage-track{grid-template-columns:1fr;gap:8px}
  .process-stage-track-line{display:none}
  .process-work-mode-options{grid-template-columns:1fr}
}
@media(max-width:640px){
  .process-allocation-summary,.process-allocation-locked{align-items:flex-start;flex-direction:column;gap:4px}
  .process-allocation-explainer,.process-work-mode-intro{padding:12px}
  .process-allocation-review-grid{grid-template-columns:1fr}
  .process-allocation-review-actions{flex-direction:column-reverse}
  .process-allocation-review-actions .btn{width:100%}
}


/* Audit UI 2026-08-07: riwayat proses kerja mobile */
@media(max-width:767px){
  .process-history-mobile .master-mobile-kv{display:grid}
  .process-history-mobile-kv{grid-template-columns:86px minmax(0,1fr)}
  .process-history-mobile .badge-status{max-width:46%;white-space:normal;text-align:center}
}

/* Audit UI 2026-08-07: laporan Top Up mobile */
.quota-report-mobile-grid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px 10px;font-size:13px}
.quota-report-mobile-grid span{color:var(--muted)}
.quota-report-mobile-grid strong{overflow-wrap:anywhere}

/* ===== Konfirmasi PIN tindakan ===== */
.action-pin-modal{z-index:1300}
.action-pin-card{max-width:460px}
.action-pin-subtitle{margin:4px 0 0;color:var(--muted,#64748b);font-size:.92rem;line-height:1.45}
.action-pin-input{font-size:1.35rem;letter-spacing:.28em;text-align:center;font-weight:700;-webkit-text-security:disc}
.pin-mask-input{-webkit-text-security:disc}
.action-pin-warning{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:12px 14px;border:1px solid #fdba74;border-left:4px solid #f97316;border-radius:10px;background:#fff7ed;color:#9a3412;font-weight:700;line-height:1.45}
.action-pin-warning i{color:#f97316;font-size:1.15rem;margin-top:1px}

/* ===== Status hitung pada stepper proses kerja ===== */
.process-step-status{display:inline-flex;align-items:center;justify-content:center;margin-top:4px;padding:2px 7px;border-radius:999px;font-size:.68rem;font-weight:700;line-height:1.2;white-space:nowrap}
.process-step.is-needs-count{color:#7f1d1d}
.process-step.is-needs-count .process-step-dot{border-color:#991b1b;background:#fff1f2;color:#991b1b;box-shadow:0 0 0 4px rgba(153,27,27,.12)}
.process-step.is-needs-count .process-step-status{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
.process-step.is-ready-process,.process-step.is-partial-process{color:#9a3412}
.process-step.is-ready-process .process-step-dot,.process-step.is-partial-process .process-step-dot{border-color:#f59e0b;background:#fff7ed;color:#c2410c;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.process-step.is-ready-process .process-step-status,.process-step.is-partial-process .process-step-status{background:#ffedd5;color:#9a3412;border:1px solid #fdba74}
@media(max-width:640px){.process-step-status{font-size:.62rem;padding:2px 5px}.action-pin-card{width:min(94vw,460px)}}

/* =======================================================
   Pengaturan Aplikasi — pengelompokan Operasional / SDM
   ======================================================= */
.settings-main-card{padding:16px}
.settings-block-list{display:grid;gap:14px}
.settings-block{padding:16px;border:1px solid #dce5ee;border-radius:14px;background:#fbfdff;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.settings-block-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #e7edf3}
.settings-block-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:17px}
.settings-block-head h3{margin:0 0 3px;color:#0f5961;font-size:15px;line-height:1.3}
.settings-block-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.settings-grid-grouped{gap:12px 14px}
.settings-block .setting-field label{display:block;margin-bottom:7px;font-size:12.5px;font-weight:700}
.settings-block .setting-field .help{display:block;margin-top:6px;line-height:1.4}
.settings-block-legacy{border-style:dashed;background:#fff}
.settings-extra-group+.settings-extra-group{margin-top:16px}
.settings-extra-group h4{margin:0 0 10px;color:#475569;font-size:13px}
.settings-block-pickup .pickup-rule-head{margin-top:-2px}

@media(max-width:767px){
  .settings-main-card{padding:14px}
  .settings-block{padding:13px}
  .settings-block-head{gap:9px}
  .settings-block-icon{width:34px;height:34px;flex-basis:34px}
}

/* Pengaturan Aplikasi — pasangan field tetap berdampingan pada mobile */
@media(max-width:767px){
  .settings-grid.settings-grid-grouped{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 8px;
  }
  .settings-grid.settings-grid-grouped .setting-field{
    min-width:0;
  }
  .settings-grid.settings-grid-grouped .setting-field-wide{
    grid-column:1/-1;
  }
  .settings-grid.settings-grid-grouped .setting-field label{
    font-size:11.5px;
    line-height:1.3;
  }
  .settings-grid.settings-grid-grouped .setting-field .input,
  .settings-grid.settings-grid-grouped .setting-field input,
  .settings-grid.settings-grid-grouped .setting-field select,
  .settings-grid.settings-grid-grouped .setting-field textarea{
    width:100%;
    min-width:0;
  }
}

/* =======================================================
   Pemenuhan Laundry & Operasional Kurir
   ======================================================= */
.fulfillment-page,.work-tag-access-page{max-width:1120px;margin-inline:auto}
.fulfillment-scan-card,.work-tag-access-card{max-width:760px;margin-inline:auto}
.fulfillment-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 18px}
.fulfillment-steps span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:#f8fafc;color:#64748b;font-size:12px;font-weight:700;text-align:center}
.fulfillment-steps span.active{border-color:#67e8f9;background:#ecfeff;color:#0e7490}
.fulfillment-result{display:grid;gap:3px;margin:12px 0;padding:13px 14px;border:1px solid #bae6fd;border-radius:12px;background:#f0f9ff}
.fulfillment-result strong{font-size:15px;color:#075985}.fulfillment-result span{font-weight:700}.fulfillment-result small{color:#64748b}
.fulfillment-section{padding:14px;border:1px solid #e2e8f0;border-radius:13px;background:#fbfdff}
.fulfillment-section>h2{margin:0 0 12px;color:#0f5961;font-size:16px}
.inline-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0}.inline-form .input{width:auto;min-width:160px}.inline-form+.inline-form{margin-top:7px}
.courier-task-page{display:grid;gap:16px}
.courier-task-page-head{margin-bottom:0}
.courier-task-section{overflow:hidden;border:1px solid #d9e5e9;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,89,97,.06)}
.courier-task-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e5eef1;background:#f7fbfc;color:#0f5961;font-weight:800}
.courier-task-section-head>div{display:flex;align-items:center;gap:9px}.courier-task-section-head i{font-size:18px}
.courier-task-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#e0f4f5;color:#087f89;font-size:12px}
.courier-task-list{display:grid;gap:12px;padding:14px}
.courier-task-card{display:grid;gap:13px;padding:15px;border:1px solid #dbe7eb;border-radius:15px;background:#fff}
.courier-task-card-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.courier-task-card-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;font-size:20px}
.courier-task-card-icon.is-pickup{background:#e8f7f5;color:#078c8c}.courier-task-card-icon.is-delivery{background:#eef7fb;color:#287a9b}
.courier-task-card-copy{display:grid;gap:5px;min-width:0}.courier-task-card-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.courier-task-card-copy h2{margin:0;color:#123b43;font-size:16px;line-height:1.3}.courier-task-card-copy p{display:flex;align-items:flex-start;gap:6px;margin:0;color:#526a73;font-size:13px;line-height:1.5}.courier-task-card-copy p i{margin-top:2px;color:#078c8c}.courier-task-card-copy small{color:#71868d;font-size:11px}
.courier-task-kind{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.courier-task-kind.is-pickup{background:#e8f7f5;color:#078c8c}.courier-task-kind.is-delivery{background:#eef7fb;color:#287a9b}
.courier-task-state{padding:9px 11px;border-radius:10px;background:#f5f8f9;color:#667c84;font-size:12px;line-height:1.4}.courier-task-state.is-ready{background:#eaf8f0;color:#167348}.courier-task-state.is-error{background:#fff3f1;color:#a13c32}
.courier-task-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.courier-task-actions form{display:flex;margin:0}.courier-task-action-btn{min-width:88px;min-height:38px;padding:8px 13px;border-radius:9px;justify-content:center}.courier-task-fail-context,.courier-task-choice-context{margin:3px 0 0;color:#64748b;font-size:13px}.courier-task-fail-modal .modal-body{display:grid;gap:14px}.courier-task-choice-copy{margin:0;color:#526a73;line-height:1.5}.courier-task-choice-state{min-height:20px;color:#a13c32;font-size:12px;line-height:1.45}.courier-task-choice-state:empty{display:none}.courier-task-choice-actions{display:grid;grid-template-columns:1fr 1fr}.courier-task-choice-actions .btn{width:100%;justify-content:center}
.courier-task-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:74px;color:#789097;font-size:13px}.courier-task-empty i{color:#43a47a;font-size:18px}
.pickup-tag-card{max-width:780px;margin-inline:auto}.pickup-tag-print{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:20px;border:2px solid #0f8f99;border-radius:16px;background:#fff}.pickup-tag-print strong{display:block;font-size:22px;color:#0f5961}.pickup-tag-print span{display:block;margin-top:5px;font-size:15px}.pickup-tag-print p{margin:8px 0 0;line-height:1.45}.pickup-tag-print #pickupTagQr{padding:8px;border:1px solid #dbe4ec;border-radius:10px;background:#fff}
.work-tag-access-card{display:grid;gap:14px}.work-tag-access-state{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:13px;border:1px solid #dbe4ec}.work-tag-access-state>i{font-size:25px;line-height:1}.work-tag-access-state>div{display:grid;gap:4px}.work-tag-access-state span{color:#64748b;line-height:1.45}.work-tag-access-state.is-ready{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}.work-tag-access-state.is-printed{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}.work-tag-reprint-form{display:grid;gap:12px}
.courier-workday-panel{margin-top:14px}.courier-workday-list{display:grid;gap:10px}.courier-workday-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid #dbe4ec;border-radius:12px;background:#fbfdff}.courier-workday-card>div:first-child{display:grid;gap:2px}.courier-workday-card span{color:#64748b;font-size:12px}

@media(max-width:767px){
  .fulfillment-steps{gap:5px}.fulfillment-steps span{padding:6px 4px;font-size:10.5px}
  .inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto}.inline-form .input{width:100%;min-width:0}.inline-form+.inline-form{display:block}
  .courier-task-page{gap:13px}.courier-task-list{padding:10px}.courier-task-card{padding:13px}.courier-task-actions{justify-content:flex-end}.courier-task-actions .btn,.courier-task-actions form{width:auto}
  .pickup-tag-print{grid-template-columns:1fr;justify-items:center;text-align:center}.pickup-tag-print strong{font-size:19px}
  .courier-workday-card{align-items:stretch;flex-direction:column}.courier-workday-card .btn-row{display:grid;grid-template-columns:1fr 1fr}.courier-workday-card .btn-row form,.courier-workday-card .btn-row .btn{width:100%}
}

@media print{
  .pickup-tag-card{box-shadow:none;border:0;padding:0}.pickup-tag-card>.page-head{display:none}.pickup-tag-print{border:2px solid #000;break-inside:avoid}.pickup-tag-print strong{color:#000}
}
.pickup-address-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.fulfillment-history{padding:12px 14px;border:1px solid #dbe4ec;border-radius:12px;background:#fff}.fulfillment-history>summary{cursor:pointer;color:#0f5961;font-weight:800}
@media(max-width:520px){.pickup-address-row{grid-template-columns:1fr}.pickup-address-row .btn{width:100%}}

/* Scanner QR kamera reusable untuk Pemenuhan & Kurir */
.qr-input-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.qr-camera-overlay{position:fixed;inset:0;z-index:1900;background:rgba(15,23,42,.72);display:grid;place-items:center;padding:18px}
.qr-camera-panel{width:min(520px,100%);background:#fff;border-radius:18px;padding:14px;box-shadow:0 24px 70px rgba(15,23,42,.34)}
.qr-camera-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.qr-camera-head>div{display:grid;gap:2px}.qr-camera-head strong{font-size:17px;color:#0f172a}.qr-camera-head span{font-size:13px;color:#64748b}
.qr-camera-video{display:block;width:100%;max-height:62vh;aspect-ratio:3/4;object-fit:cover;background:#0f172a;border-radius:14px}
.qr-camera-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;color:#475569;font-size:13px}
@media (max-width:640px){.qr-camera-overlay{padding:10px}.qr-camera-panel{border-radius:14px;padding:10px}.qr-camera-video{max-height:68vh}}

/* LOGIN CAPTCHA COMPACT 20260809 */
.captcha-inline-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  width:100%;
}
.captcha-inline-row .captcha-chip{
  flex:0 0 auto;
  white-space:nowrap;
}
.captcha-answer-input{
  width:78px !important;
  min-width:78px !important;
  max-width:78px !important;
  flex:0 0 78px;
  text-align:center;
  padding-left:8px;
  padding-right:8px;
}
.captcha-refresh-btn{
  flex:0 0 34px;
}
.captcha-refresh-glyph{
  display:inline-block;
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.captcha-refresh-btn.is-loading .captcha-refresh-glyph{
  animation:captcha-refresh-spin .7s linear infinite;
}
@keyframes captcha-refresh-spin{to{transform:rotate(360deg)}}
@media (max-width:480px){
  .captcha-inline-row{gap:7px}
  .captcha-answer-input{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    flex-basis:72px;
  }
}
/* END LOGIN CAPTCHA COMPACT 20260809 */

/* AUTH PASSWORD RESET / FORGOT PASSWORD 20260809 */
.auth-password-intro{margin:0 0 20px}
.auth-password-intro h2{margin:0;color:var(--txt);font-size:22px;line-height:1.25;font-weight:800}
.auth-password-intro p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.auth-password-form{display:grid;gap:0}
.auth-password-form .group{margin:0}
.auth-password-form .group+.group{margin-top:15px}
.auth-password-actions{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:20px;padding-top:2px}
.auth-password-submit{min-width:220px;max-width:100%}
.auth-back-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--primary);font-weight:700;text-decoration:none;padding:7px 10px;border-radius:9px;transition:background .12s ease,color .12s ease}
.auth-back-link:hover{background:var(--primary-soft);color:var(--primary-700)}
@media(max-width:480px){
  .auth-password-intro{margin-bottom:18px}
  .auth-password-intro h2{font-size:21px}
  .auth-password-actions{margin-top:18px}
  .auth-password-submit{width:100%;min-width:0}
}
/* END AUTH PASSWORD RESET / FORGOT PASSWORD 20260809 */

/* =======================================================
   ROLE CREATION RULES — RESPONSIVE COLUMN WIDTH
   Mobile/tablet: kolom mengikuti ruang layar, namun header
   tidak dipaksa lebih sempit dari teksnya.
   ======================================================= */
@media(max-width:1024px){
  .role-rule-table{
    width:100%!important;
    min-width:100%!important;
    table-layout:auto;
  }
  .role-rule-table th,
  .role-rule-table td{
    width:auto!important;
  }
  .role-rule-table th{
    white-space:nowrap;
  }
  .role-rule-table .min-w-120,
  .role-rule-table .min-w-240{
    min-width:0!important;
  }
  .role-rule-table th:first-child,
  .role-rule-table td:first-child{
    min-width:max-content!important;
  }
  .role-rule-table th:not(:first-child),
  .role-rule-table td:not(:first-child){
    padding-left:10px;
    padding-right:10px;
  }
}


/* =======================================================
   PENGATURAN HAK AKSES — RESPONSIVE MATRIX + AKUN SAYA
   Mobile/tablet: lebar kolom mengikuti ruang layar dan
   header menjadi batas minimum alami tiap kolom.
   ======================================================= */
.permission-matrix-table .permission-locked-row td{background:#f8fafc}
.permission-matrix-table .permission-locked-row td.sticky-col-1,
.permission-matrix-table .permission-locked-row td.sticky-col-2{background:#f8fafc}
.permission-matrix-table .permission-locked-row input:disabled{opacity:1;accent-color:var(--primary)}
@media(max-width:1024px){
  .permission-matrix-table{
    width:max-content!important;
    min-width:100%!important;
    table-layout:auto;
  }
  .permission-matrix-table th,
  .permission-matrix-table td{
    width:auto!important;
  }
  .permission-matrix-table th{white-space:nowrap}
  .permission-matrix-table .sticky-col-1{
    position:sticky!important;
    left:0!important;
    min-width:160px!important;
    max-width:160px!important;
  }
  .permission-matrix-table .sticky-col-2{
    position:static!important;
    left:auto!important;
    min-width:180px!important;
    max-width:180px!important;
  }
  .permission-matrix-table td.sticky-col-1,
  .permission-matrix-table td.sticky-col-2{
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .permission-matrix-table .matrix-center{
    min-width:110px!important;
    padding-left:9px;
    padding-right:9px;
  }
}


@media(max-width:767px){
  .customer-history-toolbar{align-items:center;flex-wrap:wrap;justify-content:space-between}
  .customer-history-toolbar>.btn{flex:0 0 auto!important;width:auto!important}
  .customer-history-customer{text-align:right;min-width:0}
  .customer-history-table-wrap{display:none!important}
  .customer-history-change-grid{grid-template-columns:1fr}
}
@media(min-width:768px){
  .customer-history-mobile-cards{display:none!important}
}


/* VOUCHER PELANGGAN - KARTU TIKET LANDSCAPE 20260810 */
.customer-voucher-list{
  display:grid;
  grid-template-columns:minmax(0,720px);
  justify-content:start;
  gap:18px;
  padding:20px 24px 24px;
}
.customer-voucher-list.is-history{background:#f7fafb}
.customer-voucher-ticket{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 176px;
  min-height:188px;
  color:var(--txt);
  filter:drop-shadow(0 14px 18px rgba(15,80,88,.18)) drop-shadow(0 4px 6px rgba(15,80,88,.10));
}
.customer-voucher-ticket-main{
  --voucher-main-border:#b8e0e3;
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px 26px 18px 28px;
  border:1px solid var(--voucher-main-border);
  border-right:0;
  border-radius:18px 0 0 18px;
  background:
    radial-gradient(circle at 9% 10%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    linear-gradient(135deg,#f8ffff 0%,#e8f8f8 100%);
  -webkit-mask-image:radial-gradient(circle 7px at left 13px,transparent 0 6px,#000 6.5px);
  -webkit-mask-size:100% 26px;
  -webkit-mask-repeat:repeat-y;
  mask-image:radial-gradient(circle 7px at left 13px,transparent 0 6px,#000 6.5px);
  mask-size:100% 26px;
  mask-repeat:repeat-y;
}
.customer-voucher-ticket-main::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:radial-gradient(circle 7px at left 13px,transparent 0 6.45px,var(--voucher-main-border) 6.45px 7.45px,transparent 7.45px) left top/8px 26px repeat-y;
  pointer-events:none;
}
.customer-voucher-ticket-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#38727a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1.3;
  text-transform:uppercase;
}
.customer-voucher-ticket-kicker span{display:inline-flex;align-items:center;gap:6px}
.customer-voucher-ticket h3{
  margin:12px 0 3px;
  color:#075f69;
  font-size:20px;
  line-height:1.2;
}
.customer-voucher-ticket-benefit{
  color:#073b42;
  font-size:22px;
  font-weight:850;
  line-height:1.25;
}
.customer-voucher-ticket-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:18px;
}
.customer-voucher-ticket-meta>span{
  display:grid;
  grid-template-columns:18px auto;
  align-items:center;
  min-width:132px;
}
.customer-voucher-ticket-meta i{grid-row:1/3;color:var(--primary);font-size:14px}
.customer-voucher-ticket-meta small{color:var(--muted);font-size:10px;line-height:1.15}
.customer-voucher-ticket-meta strong{color:#244b51;font-size:12px;line-height:1.3}
.customer-voucher-ticket-note{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:12px;
  color:#4e747a;
  font-size:11px;
  line-height:1.35;
}
.customer-voucher-ticket-stub{
  --voucher-stub-border:#087e89;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px 16px;
  overflow:hidden;
  border:1px solid var(--voucher-stub-border);
  border-left:2px dashed rgba(255,255,255,.72);
  border-radius:0 18px 18px 0;
  background:linear-gradient(145deg,#0795a1 0%,#057987 100%);
  color:#fff;
  text-align:center;
  -webkit-mask-image:radial-gradient(circle 7px at right 13px,transparent 0 6px,#000 6.5px);
  -webkit-mask-size:100% 26px;
  -webkit-mask-repeat:repeat-y;
  mask-image:radial-gradient(circle 7px at right 13px,transparent 0 6px,#000 6.5px);
  mask-size:100% 26px;
  mask-repeat:repeat-y;
}
.customer-voucher-ticket-stub::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  pointer-events:none;
}
.customer-voucher-ticket-stub::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:8px;
  background:radial-gradient(circle 7px at right 13px,transparent 0 6.45px,var(--voucher-stub-border) 6.45px 7.45px,transparent 7.45px) right top/8px 26px repeat-y;
  pointer-events:none;
}
.customer-voucher-ticket-stub .badge{
  position:absolute;
  top:16px;
  left:50%;
  z-index:1;
  min-width:62px;
  background:#fff;
  color:#08747f;
  transform:translateX(-50%);
}
.customer-voucher-ticket-icon{margin:18px 0 9px;font-size:29px;opacity:.9}
.customer-voucher-ticket-stub small{font-size:10px;line-height:1.2;opacity:.82}
.customer-voucher-ticket-stub strong{margin-top:4px;font-size:15px;line-height:1.2}
.customer-voucher-ticket-stub>span:not(.badge){font-size:11px;opacity:.82}
.customer-voucher-ticket.is-inactive{filter:drop-shadow(0 12px 16px rgba(51,65,68,.14)) drop-shadow(0 4px 6px rgba(51,65,68,.08))}
.customer-voucher-ticket.is-inactive .customer-voucher-ticket-main{
  --voucher-main-border:#d9e2e4;
  background:linear-gradient(135deg,#fff 0%,#f2f5f6 100%);
}
.customer-voucher-ticket.is-inactive .customer-voucher-ticket-stub{
  --voucher-stub-border:#778a8e;
  background:linear-gradient(145deg,#81979b 0%,#687d82 100%);
}
.customer-voucher-ticket.is-inactive .customer-voucher-ticket-benefit{color:#4b6064}
.customer-voucher-ticket.is-inactive .customer-voucher-ticket-stub .badge{color:#576b70}
.customer-voucher-empty{grid-column:1/-1;min-height:150px}
.customer-voucher-history-head{border-top:1px solid var(--line)}
@media(max-width:640px){
  .customer-voucher-list{gap:15px;padding:16px 18px 20px}
  .customer-voucher-ticket{grid-template-columns:minmax(0,1fr) 116px;min-height:180px;filter:drop-shadow(0 10px 14px rgba(15,80,88,.16)) drop-shadow(0 3px 5px rgba(15,80,88,.09))}
  .customer-voucher-ticket-main{padding:17px 14px 14px 19px;border-radius:15px 0 0 15px}
  .customer-voucher-ticket-stub{padding:14px 8px;border-radius:0 15px 15px 0}
  .customer-voucher-ticket-kicker{gap:8px;font-size:9px;letter-spacing:.035em}
  .customer-voucher-ticket-kicker>span:last-child{font-size:8px}
  .customer-voucher-ticket h3{margin-top:10px;font-size:16px}
  .customer-voucher-ticket-benefit{font-size:17px}
  .customer-voucher-ticket-meta{display:grid;gap:7px;margin-top:14px}
  .customer-voucher-ticket-meta>span{min-width:0}
  .customer-voucher-ticket-note{padding-top:10px;font-size:10px}
  .customer-voucher-ticket-stub .badge{top:13px;min-width:54px;font-size:10px}
  .customer-voucher-ticket-icon{margin:20px 0 8px;font-size:25px}
  .customer-voucher-ticket-stub strong{font-size:13px}
}
/* END VOUCHER PELANGGAN - KARTU TIKET LANDSCAPE 20260810 */

/* PAYROLL NEW_ML 20260810 */
.payroll-page-card,.payroll-detail-head,.payroll-cutoff-card,.payroll-history-card,.payroll-post-card,.payroll-payment-card,.payroll-paid-card{padding:16px}
.payroll-legacy-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--primary);padding:0 0 12px}
.payroll-legacy-summary::-webkit-details-marker{display:none}
.payroll-history-card[open]>.payroll-legacy-summary{border-bottom:1px solid var(--bd);margin-bottom:12px}
.payroll-head,.payroll-detail-head .page-head{align-items:flex-start}
.payroll-search{margin-bottom:12px}
.payroll-list-table td{vertical-align:top}
.payroll-mobile-list{padding-top:8px}
.payroll-mobile-kv{display:grid!important}
.payroll-section-title{margin:0;color:var(--primary);font-size:17px}
.payroll-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.payroll-period-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.payroll-period-grid>div{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc;display:grid;gap:3px}
.payroll-period-grid span,.payroll-component span{font-size:12px;color:var(--muted)}
.payroll-period-grid strong{font-size:14px}
.payroll-compact-alert{margin:12px 0 0}
.payroll-cutoff-card{display:flex;align-items:end;justify-content:space-between;gap:16px}
.payroll-cutoff-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.payroll-cutoff-form .input{width:auto;min-width:170px}
.payroll-component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.payroll-component{padding:14px;display:grid;gap:5px;min-width:0}
.payroll-component strong{font-size:20px;color:#0f172a;word-break:break-word}
.payroll-total-component{background:#ecfeff;border-color:#99e6eb}
.payroll-total-component strong{color:var(--primary);font-size:23px}
.payroll-details{padding:0;overflow:hidden}
.payroll-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:800;color:var(--primary);border-bottom:1px solid transparent}
.payroll-details[open]>summary{border-bottom-color:var(--bd)}
.payroll-details>summary::-webkit-details-marker{display:none}
.payroll-details>summary span{display:inline-flex;align-items:center;gap:8px}
.payroll-details-body{padding:14px 16px}
.payroll-day-zero{background:#f8fafc}
.payroll-calendar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}
.payroll-calendar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;background:#fff;font-size:13px}
.payroll-calendar-row strong{display:flex;align-items:center;gap:6px}
.payroll-calendar-row small{color:var(--muted);font-weight:600}
.payroll-adjustment-list{display:grid;gap:8px;margin-bottom:12px}
.payroll-adjustment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.payroll-adjustment-form{display:grid;grid-template-columns:180px 160px minmax(220px,1fr) auto;gap:8px;align-items:end}
.payroll-post-card,.payroll-paid-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.payroll-early-warning{display:flex;align-items:flex-start;gap:12px;color:#92400e}
.payroll-early-warning>i{font-size:24px;color:#d97706}
.payroll-early-warning p{margin:4px 0 0;color:#92400e}
.payroll-payment-card{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr)}
.payroll-payment-form{display:grid;grid-template-columns:160px minmax(180px,.8fr) minmax(220px,1fr) auto;gap:8px;align-items:end}
.payroll-paid-card>div{display:grid;gap:4px}
.payroll-paid-card>div>strong{font-size:24px;color:var(--primary)}
.payroll-slip-page{max-width:860px;margin-left:auto;margin-right:auto}
.payroll-slip{padding:26px}
.payroll-slip-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:2px solid var(--primary);padding-bottom:14px}
.payroll-slip-head h1{margin:0;color:var(--primary)}
.payroll-slip-head>div{display:grid;gap:3px}
.payroll-slip-identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:18px 0}
.payroll-slip-identity>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px}
.payroll-slip-identity span{color:var(--muted)}
.payroll-slip-table{margin-top:8px}
.payroll-slip-total{background:#ecfeff}
.payroll-slip-payment{margin-top:16px;padding:12px;border:1px solid var(--bd);border-radius:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.payroll-slip-days{margin-top:16px}
.payroll-slip-days summary{cursor:pointer;font-weight:800;color:var(--primary);margin-bottom:10px}
@media(max-width:900px){
  .payroll-period-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-adjustment-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-payment-card{grid-template-columns:1fr}
  .payroll-payment-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .payroll-page-card,.payroll-detail-head,.payroll-cutoff-card,.payroll-history-card,.payroll-post-card,.payroll-payment-card,.payroll-paid-card{padding:12px}
  .payroll-head-actions{width:100%;justify-content:flex-start}
  .payroll-period-grid{grid-template-columns:1fr 1fr}
  .payroll-cutoff-card,.payroll-post-card,.payroll-paid-card{align-items:stretch;flex-direction:column}
  .payroll-cutoff-form{display:grid;grid-template-columns:1fr auto;width:100%}
  .payroll-cutoff-form .input{width:100%;min-width:0}
  .payroll-component-grid{grid-template-columns:1fr 1fr;gap:8px}
  .payroll-component{padding:11px}
  .payroll-component strong{font-size:17px}
  .payroll-total-component strong{font-size:20px}
  .payroll-details>summary{padding:12px}
  .payroll-details-body{padding:10px 12px}
  .payroll-calendar-grid{grid-template-columns:1fr}
  .payroll-adjustment-form,.payroll-payment-form{grid-template-columns:1fr}
  .payroll-slip{padding:16px}
  .payroll-slip-identity{grid-template-columns:1fr}
}
@media(max-width:420px){
  .payroll-period-grid,.payroll-component-grid{grid-template-columns:1fr}
}
@media print{
  .print-hide,.app-header,.app-drawer,.drawer-backdrop{display:none!important}
  .page.payroll-slip-page{max-width:none;margin:0;padding:0}
  .payroll-slip{border:0;box-shadow:none;padding:0}
}
/* END PAYROLL NEW_ML 20260810 */
.payroll-negative{color:#b91c1c!important}

/* Payroll drill-down rincian harian */
.payroll-drilldown-head{align-items:center}
.payroll-drilldown-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.payroll-drilldown-title-wrap h3{min-width:0}
.payroll-drilldown-back{flex:0 0 auto}
@media(max-width:640px){
  .payroll-drilldown-title-wrap{gap:7px}
  .payroll-drilldown-back{padding-left:10px;padding-right:10px}
}

/* OPNAME & KAS TERPADU 20260811 */
.cash-summary-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opname-info{display:flex;align-items:flex-start;gap:9px;margin:0 16px 14px}
.opname-mobile-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.opname-mobile-counters span{padding:8px;border:1px solid var(--bd);border-radius:9px;color:var(--muted);font-size:11px;text-align:center}
.opname-mobile-counters strong{display:block;margin-top:2px;color:var(--txt);font-size:17px}
.opname-scan-card{padding:16px}
.opname-scan-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.opname-scan-head h1{margin:0 0 4px;color:var(--primary);font-size:22px}
.opname-scan-head p{margin:0}
.opname-counter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.opname-counter-grid>div{padding:12px;border:1px solid var(--bd);border-radius:11px;background:#f8fafc;text-align:center}
.opname-counter-grid span{display:block;color:var(--muted);font-size:11px;font-weight:700}
.opname-counter-grid strong{display:block;margin-top:3px;color:var(--primary);font-size:24px}
.opname-camera-shell{position:relative;width:min(680px,100%);margin:0 auto;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0f172a}
.opname-camera{display:block;width:100%;height:100%;object-fit:cover}
.opname-camera-guide{position:absolute;inset:20%;border:2px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 0 0 999px rgba(15,23,42,.22);pointer-events:none}
.opname-scan-feedback{display:flex;align-items:center;gap:10px;width:min(680px,100%);margin:12px auto 0;padding:12px 14px;border-radius:11px;border:1px solid var(--bd)}
.opname-scan-feedback i{font-size:25px}.opname-scan-feedback strong,.opname-scan-feedback span{display:block}.opname-scan-feedback span{margin-top:2px;font-size:12px}
.opname-scan-feedback.is-ready{background:#f8fafc}.opname-scan-feedback.is-success{background:#ecfdf5;border-color:#86efac;color:#166534}.opname-scan-feedback.is-warning{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.opname-scan-manual{display:flex;gap:8px;width:min(680px,100%);margin:10px auto 0}.opname-scan-manual .input{flex:1}
.opname-warning-card{max-width:520px;border:2px solid #dc2626}.opname-warning-body{text-align:center;padding:28px 22px}.opname-warning-body>i{display:block;color:#dc2626;font-size:55px}.opname-warning-body>span{display:block;margin-top:8px;color:#991b1b;font-size:24px;font-weight:900}.opname-warning-body h2{margin:4px 0 8px;color:#b91c1c;font-size:22px}.opname-warning-body p{margin:0 0 20px;color:#7f1d1d;font-size:15px;font-weight:700}.opname-warning-continue{min-width:180px}
.opname-courier-groups{display:grid;gap:12px;padding:14px}.opname-courier-group{border:1px solid var(--bd);border-radius:11px;overflow:hidden}.opname-courier-group h3{margin:0;padding:10px 12px;background:#f8fafc;color:var(--primary);font-size:14px}.opname-check-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--bd)}.opname-check-row span strong,.opname-check-row span small{display:block}.opname-check-row span small{color:var(--muted);margin-top:2px}
@media(max-width:767px){.cash-summary-row{grid-template-columns:1fr}.opname-scan-head{flex-direction:column}.opname-scan-head form,.opname-scan-head .btn{width:100%}.opname-counter-grid{grid-template-columns:repeat(2,1fr)}.opname-counter-grid strong{font-size:21px}.opname-camera-shell{aspect-ratio:1/1}.opname-scan-manual{display:grid;grid-template-columns:1fr auto}.opname-check-row{grid-template-columns:auto minmax(0,1fr)}.opname-check-row>a{grid-column:2}.opname-info{margin-left:12px;margin-right:12px}}
/* END OPNAME & KAS TERPADU 20260811 */

/* =======================================================
   KAS + OPNAME — penyelarasan UI New_ML 2026-08-11
   ======================================================= */
.cash-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px}
.cash-page-head-bordered{padding-bottom:14px;border-bottom:1px solid var(--bd)}
.cash-page-head h1{margin:0;color:var(--primary);font-size:22px;line-height:1.25}
.cash-page-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.cash-page-count{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 10px;border:1px solid #bfe4e8;border-radius:999px;background:#f1fbfc;color:var(--primary);font-size:11px;font-weight:800;white-space:nowrap}
.cash-title-with-icon{display:flex;align-items:flex-start;gap:10px}.cash-title-with-icon>i{margin-top:2px;color:var(--primary);font-size:22px}
.cash-empty-state-compact{min-height:120px}
.cash-modal-context{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:11px 12px;border:1px solid #cfe7ea;border-radius:11px;background:#f3fbfc;color:#24565c}
.cash-modal-context>i{flex:0 0 auto;margin-top:1px;color:var(--primary);font-size:19px}.cash-modal-context span,.cash-modal-context strong{display:block}.cash-modal-context span{font-size:11px;color:var(--muted)}.cash-modal-context strong{margin-top:2px;font-size:13px;line-height:1.45}.cash-modal-context.is-danger{border-color:#fecaca;background:#fff7f7}.cash-modal-context.is-danger>i{color:#dc2626}
.cash-module-modal-foot,.opname-module-modal-foot,.cash-account-modal-actions{display:flex;flex:0 0 auto;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--bd);background:#fff}
.cash-module-modal-foot .btn,.opname-module-modal-foot .btn,.cash-account-modal-actions .btn{min-width:92px;justify-content:center}

/* Master Akun Kas */
.cash-account-card{min-height:0}.cash-account-card>.cash-page-head{border-bottom:1px solid var(--bd)}
.cash-account-table-wrap{margin:0}.cash-account-table th:first-child,.cash-account-table td:first-child{width:80px}.cash-account-table th:last-child,.cash-account-table td:last-child{width:170px}.cash-account-table th:nth-child(4),.cash-account-table td:nth-child(4){width:120px}
.cash-account-mobile-list{padding:12px!important}.cash-account-mobile-card{margin-bottom:9px}.cash-account-mobile-card .mobile-actions{margin-top:10px;padding-top:9px;border-top:1px solid var(--bd)}
.cash-account-inline-status{margin:0 0 12px}.cash-account-help{margin:2px 0 0}.cash-account-modal-card .modal-body{padding-bottom:14px}

/* Kas Umum */
.cash-overview-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.cash-overview-card{display:flex;align-items:center;gap:13px;padding:15px}.cash-overview-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:12px;background:#e9f8fa;color:var(--primary);font-size:20px}.cash-overview-card>div:last-child{display:flex;min-width:0;flex-direction:column;gap:3px}.cash-overview-card span{color:var(--muted);font-size:11px;font-weight:700}.cash-overview-card strong{color:#123c42;font-size:19px;line-height:1.25}.cash-overview-card small{color:var(--muted);font-size:11px;line-height:1.4}.cash-overview-primary{border-color:#b8e2e6;background:#fbffff}
.cash-ledger-card,.cash-review-card{padding:0!important;overflow:visible!important}.cash-ledger-card>.compact-filter-bar,.cash-review-card>.compact-filter-bar{margin:12px 14px}.cash-ledger-table-wrap,.cash-review-table-wrap{border-top:1px solid var(--bd)}
.cash-ledger-table td,.cash-review-table td{vertical-align:middle}.cash-ledger-table .cash-description-cell{min-width:220px;max-width:430px}
.cash-ledger-empty,.cash-review-empty{margin:14px;min-height:170px}.general-cash-mobile-list,.cash-review-mobile-list{padding:12px!important}.general-cash-mobile-card,.cash-review-mobile-card{margin-bottom:9px}.general-cash-mobile-meta{display:flex;margin-top:8px}.general-cash-mobile-card .mobile-actions,.cash-review-mobile-card .mobile-actions{margin-top:9px;padding-top:8px;border-top:1px solid var(--bd)}
/* Form transaksi Kas Umum: header/footer tetap terlihat, isi form dapat digulir pada layar pendek. */
.general-cash-entry-card>.general-cash-entry-form{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden}
.general-cash-entry-form>.modal-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.general-cash-entry-foot{flex:0 0 auto}

/* Pemeriksaan Kas */
.cash-review-mobile-grid{display:grid;grid-template-columns:minmax(92px,.8fr) minmax(0,1.2fr);gap:6px 10px;margin-top:11px;font-size:12px}.cash-review-mobile-grid span{color:var(--muted)}.cash-review-mobile-grid strong{word-break:break-word}.cash-review-note{margin-top:10px;padding:9px 10px;border-radius:9px;background:#f8fafc}.cash-review-note span{color:var(--muted);font-size:11px}.cash-review-note p{margin:3px 0 0;font-size:12px;line-height:1.45}

/* Buku Kas Karyawan */
.employee-cash-current-card{padding:0!important;overflow:hidden}.employee-cash-current-head{align-items:center}.employee-cash-head-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.employee-cash-head-actions .btn-warning-ml,.employee-cash-head-actions .employee-cash-transaction-btn{background:var(--warning)!important;border-color:var(--warning-600)!important;color:#fff!important}.employee-cash-head-actions .btn-warning-ml:hover,.employee-cash-head-actions .employee-cash-transaction-btn:hover{background:var(--warning-600)!important;border-color:var(--warning-600)!important;color:#fff!important}
.employee-cash-session-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--bd)}.employee-cash-session-strip>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:12px 14px;border-right:1px solid var(--bd)}.employee-cash-session-strip>div:last-child{border-right:0}.employee-cash-session-strip span{color:var(--muted);font-size:11px}.employee-cash-session-strip strong{color:#173e43;font-size:13px;line-height:1.35;word-break:break-word}
.cash-privacy-note{display:flex;align-items:flex-start;gap:10px;margin:12px 14px;padding:11px 12px;border:1px dashed #a8d9df;border-radius:10px;background:#f8feff;color:#285a60}.cash-privacy-note>i{margin-top:1px;color:var(--primary);font-size:18px}.cash-privacy-note strong,.cash-privacy-note span{display:block}.cash-privacy-note strong{font-size:12px}.cash-privacy-note span{margin-top:2px;color:var(--muted);font-size:11px}
.employee-cash-no-session{margin:14px;min-height:190px}.employee-cash-no-session .btn{margin-top:4px}
.employee-cash-active-card,.employee-cash-history-card{padding:14px!important}.employee-cash-active-card{margin-top:20px!important}.employee-cash-history-card{margin-top:20px!important}.employee-cash-history-card>.compact-filter-bar{margin:0 0 12px;padding:9px 10px;border:1px solid var(--bd);border-radius:11px;background:#fbfdff}
.employee-cash-movement-table .text-end{text-align:right}.employee-cash-opening-row td{background:#fbfdff}.employee-cash-total-row td{border-top:2px solid #cbd5e1;background:#f8fafc}.employee-cash-order-link{color:var(--primary);font-weight:800;text-decoration:none}.employee-cash-order-link:hover{text-decoration:underline}
.employee-cash-movement-mobile-list,.employee-cash-session-mobile-list{padding:0!important}.employee-cash-session-mobile-card{margin-bottom:9px}.employee-cash-movement-mobile-list .cash-mobile-card{margin-bottom:9px}.employee-cash-opening-mobile-card{background:#fbfdff}

/* Opname index */
.opname-index-card{min-height:0}.opname-index-card>.cash-page-head{border-bottom:1px solid var(--bd)}
.opname-info-strip{display:flex;align-items:flex-start;gap:10px;margin:12px 14px;padding:11px 12px;border:1px solid #bae6fd;border-radius:11px;background:#f0f9ff;color:#075985}.opname-info-strip>i{flex:0 0 auto;margin-top:1px;font-size:18px}.opname-info-strip strong,.opname-info-strip span{display:block}.opname-info-strip strong{font-size:12px}.opname-info-strip span{margin-top:2px;font-size:11px;line-height:1.45}
.opname-index-empty{margin:14px;min-height:190px}.opname-index-table-wrap{border-top:1px solid var(--bd)}.opname-index-table td{vertical-align:middle}.opname-session-mobile-list{padding:12px!important}.opname-session-mobile-card{margin-bottom:9px}.opname-session-mobile-card .mobile-actions{margin-top:10px;padding-top:9px;border-top:1px solid var(--bd)}

/* Opname scan */
.opname-scan-page{max-width:980px;margin-left:auto;margin-right:auto}.opname-scan-card{padding:16px!important}.opname-scan-head{padding-bottom:14px;border-bottom:1px solid var(--bd)}.opname-scan-head .cash-title-with-icon{min-width:0}.opname-scan-head .cash-title-with-icon h1{margin:0 0 3px;color:var(--primary);font-size:22px}.opname-scan-head .cash-title-with-icon p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.opname-counter-grid>div.is-success{border-color:#bbf7d0;background:#f0fdf4}.opname-counter-grid>div.is-success strong{color:#15803d}.opname-counter-grid>div.is-warning{border-color:#fed7aa;background:#fffaf3}.opname-counter-grid>div.is-warning strong{color:#b45309}.opname-counter-grid>div.is-danger{border-color:#fecaca;background:#fff7f7}.opname-counter-grid>div.is-danger strong{color:#b91c1c}
.opname-camera-area{width:min(720px,100%);margin:0 auto}.opname-camera-shell{width:100%;box-shadow:0 10px 24px rgba(15,23,42,.12)}.opname-scan-feedback{width:100%}.opname-manual-details{margin-top:10px;border:1px solid var(--bd);border-radius:10px;background:#fff}.opname-manual-details>summary{display:flex;align-items:center;gap:7px;padding:10px 12px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;list-style:none}.opname-manual-details>summary::-webkit-details-marker{display:none}.opname-manual-details[open]>summary{color:var(--primary);border-bottom:1px solid var(--bd)}.opname-scan-manual{width:100%;margin:0;padding:10px}
.opname-warning-card{width:min(500px,100%)!important}.opname-warning-foot{justify-content:center}.opname-warning-body{padding-bottom:18px}.opname-warning-body>span:empty{display:none}

/* Detail opname */
.opname-detail-toolbar{justify-content:space-between}.opname-detail-toolbar .btn{flex:0 0 auto!important}.opname-detail-summary-card{padding:0!important;overflow:hidden}.opname-detail-summary-card>.cash-page-head{padding-bottom:14px}.opname-detail-counters{margin:14px 16px 16px}
.opname-detail-section{padding:14px!important}.opname-detail-section .cash-section-head{margin-bottom:12px}.opname-section-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}.opname-courier-groups{padding:0}.opname-courier-group h3{display:flex;align-items:center;gap:7px}.opname-check-row>a{justify-self:end}
.opname-detail-mobile-list{padding:0!important}.opname-detail-mobile-list .mobile-card{margin-bottom:8px}
.opname-result-details{border:0}.opname-result-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0;color:var(--primary);font-weight:800;cursor:pointer;list-style:none}.opname-result-details>summary::-webkit-details-marker{display:none}.opname-result-details>summary span{display:flex;align-items:center;gap:8px}.opname-result-details>summary small{color:var(--muted);font-size:11px;font-weight:600}.opname-result-details-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}

@media(max-width:1000px){
  .employee-cash-session-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-cash-session-strip>div:nth-child(2){border-right:0}.employee-cash-session-strip>div:nth-child(-n+2){border-bottom:1px solid var(--bd)}
}
@media(max-width:900px){
  .cash-account-page .desktop-table,.general-cash-page .desktop-table,.cash-review-page .desktop-table,.opname-page .desktop-table,.opname-detail-page .desktop-table{display:none!important}
  .cash-account-page .mobile-cards,.general-cash-page .mobile-cards,.cash-review-page .mobile-cards,.opname-page .mobile-cards,.opname-detail-page .mobile-cards{display:block!important}
}
@media(max-width:767px){
  .cash-page-head{align-items:flex-start;padding:13px 14px}.cash-page-head h1{font-size:19px}.cash-page-count{min-height:27px;padding:4px 8px}
  .cash-overview-grid{grid-template-columns:1fr}.cash-overview-card strong{font-size:18px}
  .cash-ledger-card>.compact-filter-bar,.cash-review-card>.compact-filter-bar{margin:10px}
  .cash-ledger-empty,.cash-review-empty,.opname-index-empty{margin:10px;min-height:150px}
  .cash-module-modal-foot,.opname-module-modal-foot,.cash-account-modal-actions{padding:10px;gap:7px}.cash-module-modal-foot .btn,.opname-module-modal-foot .btn,.cash-account-modal-actions .btn{min-width:0;flex:1}
  .general-cash-entry-foot{flex-wrap:wrap}.general-cash-entry-foot #generalCashAddAgain{order:3;flex-basis:100%}
  .cash-account-modal-actions{flex-wrap:wrap}.cash-account-modal-actions #cashAccountAddAgain{order:3;flex-basis:100%}
  .employee-cash-current-head{align-items:stretch;flex-direction:column}.employee-cash-head-actions{justify-content:stretch}.employee-cash-head-actions .btn{flex:1}
  .employee-cash-session-strip{grid-template-columns:1fr}.employee-cash-session-strip>div{border-right:0!important;border-bottom:1px solid var(--bd)!important}.employee-cash-session-strip>div:last-child{border-bottom:0!important}
  .cash-privacy-note{margin:10px}.employee-cash-no-session{margin:10px}
  .employee-cash-active-card,.employee-cash-history-card{padding:11px!important}
  .cash-review-mobile-grid{grid-template-columns:92px minmax(0,1fr)}
  .opname-info-strip{margin:10px}.opname-session-mobile-list{padding:10px!important}
  .opname-scan-card{padding:12px!important}.opname-scan-head{gap:10px}.opname-scan-head form,.opname-scan-head .btn{width:100%}.opname-camera-area{width:100%}.opname-camera-shell{border-radius:12px}.opname-counter-grid{gap:7px}.opname-counter-grid>div{padding:9px 6px}.opname-counter-grid span{font-size:10px}.opname-counter-grid strong{font-size:20px}
  .opname-detail-toolbar{gap:8px}.opname-detail-toolbar .btn{width:auto!important}.opname-detail-counters{margin:10px}.opname-detail-section{padding:11px!important}.opname-section-actions .btn{width:100%}
  .opname-check-row{grid-template-columns:auto minmax(0,1fr) auto}.opname-check-row>a{grid-column:auto}
}

/* Buku Kas Karyawan - form transaksi pada layar pendek */
.employee-cash-transaction-modal-card>.employee-cash-transaction-form{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  overflow:hidden;
}
.employee-cash-transaction-form>.modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.employee-cash-transaction-form>.cash-module-modal-foot{flex:0 0 auto}

/* Notification Center */
.notification-center{position:relative;display:inline-flex}
.notification-center-trigger{position:relative}
.notification-badge{position:absolute;top:1px;right:0;display:inline-flex;min-width:17px;height:17px;padding:0 4px;align-items:center;justify-content:center;border:2px solid var(--primary);border-radius:999px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;line-height:1}
.notification-dropdown{position:absolute;z-index:1300;top:calc(100% + 9px);right:0;width:min(380px,calc(100vw - 20px));overflow:hidden;border:1px solid var(--bd);border-radius:14px;background:#fff;box-shadow:0 18px 46px rgba(15,23,42,.18);color:var(--txt)}
.notification-dropdown-head{display:flex;min-height:50px;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--bd)}
.notification-dropdown-head strong{color:var(--primary);font-size:16px}
.notification-dropdown-head form{margin:0}.notification-dropdown-head button{border:0;background:transparent;color:var(--primary);cursor:pointer;font-size:11px;font-weight:800}
.notification-dropdown-list{max-height:390px;overflow:auto}
.notification-dropdown-item{margin:0;border-bottom:1px solid var(--bd)}
.notification-dropdown-item>button{display:flex;width:100%;gap:10px;padding:11px 12px;border:0;background:#fff;color:inherit;text-align:left;cursor:pointer}
.notification-dropdown-item.is-unread>button{background:#eefbfc}
.notification-dropdown-item>button:hover{background:#f8fafc}
.notification-dropdown-icon{display:inline-flex;flex:0 0 34px;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#eaf8fa;color:var(--primary);font-size:16px}
.notification-dropdown-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.notification-dropdown-copy strong{font-size:13px}.notification-dropdown-copy span{color:#475569;font-size:12px;line-height:1.4}.notification-dropdown-copy small{color:var(--muted);font-size:10px}
.notification-dropdown-empty{display:flex;min-height:115px;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px}
.notification-dropdown-all{display:block;padding:11px 12px;border-top:1px solid var(--bd);color:var(--primary);font-size:12px;font-weight:800;text-align:center;text-decoration:none}
.notification-page-card{padding:16px}.notification-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.notification-page-head h2{color:var(--primary);font-size:20px}.notification-page-head p{margin:3px 0 0}
.notification-page-list{margin-top:8px}.notification-page-item{margin:0;border-bottom:1px solid var(--bd)}.notification-page-item:last-child{border-bottom:0}
.notification-page-item>button{display:flex;width:100%;gap:12px;padding:13px 10px;border:0;background:#fff;color:inherit;text-align:left;cursor:pointer}.notification-page-item.is-unread>button{background:#eefbfc}.notification-page-item>button:hover{background:#f8fafc}
.notification-page-icon{display:inline-flex;flex:0 0 38px;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:#eaf8fa;color:var(--primary);font-size:18px}
.notification-page-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.notification-page-copy strong{font-size:14px}.notification-page-copy span{color:#475569;font-size:12px;line-height:1.5}.notification-page-copy small{color:var(--muted);font-size:10px}
.employee-cash-forced-close-alert{display:flex;align-items:center;gap:8px;background:#fff7ed;color:#9a3412}.employee-cash-forced-close-alert span{font-size:12px}
.employee-cash-overdue-date{display:inline!important;color:#7f1d1d!important;font-size:inherit!important;font-weight:900}
@media(max-width:600px){.notification-dropdown{position:fixed;top:58px;right:8px;left:8px;width:auto}.notification-page-head{flex-direction:column}.notification-page-head .btn{width:100%}}

/* Notification Center final - status baca dan tindakan terpisah */
.notification-title-row{display:flex!important;min-width:0;align-items:center;gap:7px;color:var(--txt)!important}
.notification-title-row strong{min-width:0}
.notification-unread-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.notification-meta-row{display:flex!important;align-items:center;flex-wrap:wrap;gap:6px 8px;color:var(--muted)!important}
.notification-meta-row small{display:inline-flex;align-items:center}
.notification-action-chip,.notification-priority,.notification-read-state{min-height:20px;padding:2px 7px;border-radius:999px;font-size:9px!important;font-weight:800;line-height:1.2}
.notification-action-chip.is-pending{background:#fff3cd;color:#805b00}
.notification-action-chip.is-done{background:#e8f7ef;color:#18794e}
.notification-priority.is-urgent{background:#fff0f0;color:#b42318}
.notification-priority.is-normal{background:#eef6ff;color:#245ea8}
.notification-read-state{background:#f1f5f9;color:#64748b}
.notification-dropdown-item.is-unread>button,.notification-page-item.is-unread>button{box-shadow:inset 3px 0 0 var(--primary)}
.notification-dropdown-item.is-read>button,.notification-page-item.is-read>button{background:#fff}
.notification-filter-tabs{display:flex;gap:7px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none}
.notification-filter-tabs::-webkit-scrollbar{display:none}
.notification-filter-tabs a{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid var(--bd);border-radius:999px;background:#fff;color:#475569;font-size:12px;font-weight:800;text-decoration:none}
.notification-filter-tabs a span{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:10px}
.notification-filter-tabs a.is-active{border-color:var(--primary);background:#eaf8fa;color:var(--primary)}
.notification-filter-tabs a.is-active span{background:var(--primary);color:#fff}
.notification-page-empty{margin-top:12px}
.notification-page-copy>.notification-meta-row{margin-top:2px}
.notification-dropdown-copy>.notification-meta-row{margin-top:1px}
@media(max-width:600px){.notification-page-card{padding:12px}.notification-filter-tabs{margin-right:-3px}.notification-read-state{display:none}}

/* Penyelesaian selisih Buku Kas */
.employee-cash-discrepancy-card{margin-top:20px!important;padding:0!important;overflow:hidden}
.employee-cash-discrepancy-head{align-items:center;padding:14px 16px}.employee-cash-discrepancy-head h2{margin:0;color:var(--primary);font-size:18px}.employee-cash-discrepancy-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.employee-cash-discrepancy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--bd)}.employee-cash-discrepancy-grid>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:12px 14px;border-right:1px solid var(--bd)}.employee-cash-discrepancy-grid>div:last-child{border-right:0}.employee-cash-discrepancy-grid span{color:var(--muted);font-size:11px}.employee-cash-discrepancy-grid strong{color:#173e43;font-size:13px;line-height:1.35;word-break:break-word}
.employee-cash-discrepancy-note{margin:12px 14px;padding:10px 12px;border-radius:10px;background:#f8fafc}.employee-cash-discrepancy-note span{color:var(--muted);font-size:11px}.employee-cash-discrepancy-note p{margin:4px 0 0;font-size:12px;line-height:1.5}
.employee-cash-discrepancy-actions{display:flex;justify-content:flex-end;padding:12px 14px}.employee-cash-discrepancy-movement td{background:#fffdf7}.employee-cash-discrepancy-movement.mobile-card{border-color:#f3d49a;background:#fffdf7}
.cash-discrepancy-modal-card>.cash-discrepancy-form{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden}.cash-discrepancy-form>.modal-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.cash-discrepancy-modal-subtitle{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
.general-cash-reference-row td{background:#fbfdff}.general-cash-reference-note{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:600}.general-cash-reference-amount{font-weight:800;color:#475569;white-space:nowrap}

@media(max-width:1000px){.employee-cash-discrepancy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.employee-cash-discrepancy-grid>div:nth-child(3){border-right:0}.employee-cash-discrepancy-grid>div:nth-child(-n+3){border-bottom:1px solid var(--bd)}}
@media(max-width:767px){.employee-cash-discrepancy-head{align-items:flex-start;gap:10px}.employee-cash-discrepancy-grid{grid-template-columns:1fr}.employee-cash-discrepancy-grid>div{border-right:0!important;border-bottom:1px solid var(--bd)!important}.employee-cash-discrepancy-grid>div:last-child{border-bottom:0!important}.employee-cash-discrepancy-actions .btn{width:100%}}

/* Kas Umum: desktop dan tablet memakai tabel; kartu hanya untuk layar ponsel. */
@media(min-width:768px) and (max-width:900px){
  .general-cash-page .desktop-table{display:block!important}
  .general-cash-page .mobile-cards{display:none!important}
}


/* Penjualan Barang & Persediaan Barang */
.merchandise-master-page,.merchandise-sales-page,.merchandise-inventory-page,.merchandise-sale-form-page,.merchandise-sale-detail{--merch-gap:14px}
.merchandise-filter,.merchandise-sales-filter,.merchandise-inventory-filter{margin:12px 0;align-items:end}
.merchandise-sales-filter{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(150px,1fr) minmax(170px,1fr) 150px 150px auto auto;gap:8px}
.page.page-wide.merchandise-sale-form-page{max-width:var(--page-max)!important;margin-left:auto!important;margin-right:auto!important}
.merchandise-sale-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.merchandise-sale-main,.merchandise-sale-summary{padding:16px}.merchandise-sale-summary{position:sticky;top:92px}.merchandise-sale-summary h2,.merchandise-items-head h2{margin:0;font-size:18px}
.merchandise-form-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:12px}.merchandise-customer-group{min-width:0}.customer-search-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.customer-search-wrap .customer-search-results{grid-column:1/-1;top:calc(100% + 4px)}
.merchandise-outlet-locked{display:flex;align-items:center;background:var(--soft);color:var(--text)}
.merchandise-items-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}.merchandise-items-head p{margin:3px 0 0}.merchandise-lines-wrap{overflow-x:auto}.merchandise-lines-table{min-width:720px}.merchandise-lines-table td{vertical-align:top}.merchandise-lines-table td:first-child{min-width:250px}.merchandise-qty{min-width:88px;width:100px}.merchandise-lines-empty{margin-top:8px}.merchandise-edit-note{margin:10px 0}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented label{cursor:pointer}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:flex;justify-content:center;align-items:center;min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700}.segmented input:checked+span{border-color:var(--primary);background:var(--soft);color:var(--primary)}
.merchandise-stock-card{text-decoration:none;color:inherit}.merchandise-stock-number{font-size:22px;color:var(--primary)}.merchandise-stock-balance{display:flex;flex-direction:column;text-align:right;gap:4px}.merchandise-stock-balance span{color:var(--muted);font-size:13px}.merchandise-stock-balance strong{font-size:28px;color:var(--primary)}
.merchandise-history-mobile{display:grid;gap:8px}.merchandise-history-mobile section{border:1px solid var(--line);border-radius:12px;padding:10px}.merchandise-history-mobile section>span{display:block;font-weight:800;margin-bottom:6px}.merchandise-history-mobile section>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}.merchandise-history-mobile small{color:var(--muted)}
.merchandise-inventory-table .clickable-row{cursor:pointer}.merchandise-inventory-table .clickable-row:hover{background:var(--soft)}
@media(max-width:1100px){.merchandise-sales-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.merchandise-sale-layout{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:760px){.merchandise-sales-filter{grid-template-columns:1fr}.merchandise-sale-layout{grid-template-columns:1fr}.merchandise-sale-summary{position:static}.merchandise-form-grid{grid-template-columns:1fr}.merchandise-items-head{align-items:flex-start;flex-direction:column}.merchandise-lines-wrap{margin-inline:-4px}.merchandise-stock-balance strong{font-size:24px}}

/* Persediaan Barang: ringkasan stok dan riwayat responsif — cache rev. 20260826c */
.inventory-direction-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #cbdadd;border-radius:13px;background:#edf3f4}.inventory-direction-toggle label{display:block;cursor:pointer}.inventory-direction-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.inventory-direction-toggle span{display:flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border-radius:9px;color:#5f767c;font-weight:800;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.inventory-direction-toggle input:focus-visible+span{outline:3px solid rgba(8,140,140,.2);outline-offset:1px}.inventory-direction-toggle .is-in input:checked+span{background:#0b927f;color:#fff;box-shadow:0 5px 12px rgba(11,146,127,.22)}.inventory-direction-toggle .is-out input:checked+span{background:#d6515b;color:#fff;box-shadow:0 5px 12px rgba(214,81,91,.2)}.inventory-direction-toggle span i{font-size:16px}
.inventory-overview-card{padding:18px}
.inventory-overview-head,.inventory-overview-title,.inventory-list-head,.inventory-history-head{display:flex;align-items:center}
.inventory-overview-head{justify-content:space-between;gap:18px}
.inventory-overview-title{min-width:0;gap:12px}
.inventory-overview-title h1,.inventory-list-head h2,.inventory-history-head h2{margin:0;color:var(--primary-900)}
.inventory-overview-title h1{font-size:22px}.inventory-overview-title p,.inventory-list-head p,.inventory-history-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.inventory-section-icon{display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;border-radius:14px;background:linear-gradient(145deg,#e7f8f8,#d6f0f0);color:var(--primary);font-size:20px;box-shadow:inset 0 0 0 1px rgba(8,127,134,.08)}
.inventory-adjust-button{min-height:43px;white-space:nowrap}
.inventory-filter-panel{display:grid;grid-template-columns:minmax(220px,420px) auto;gap:10px;align-items:end;margin:17px 0;padding:13px;border:1px solid #d7e5e8;border-radius:14px;background:#f7fafb}
.inventory-filter-panel label{display:grid;gap:6px}.inventory-filter-panel label>span{color:#31545b;font-size:12px;font-weight:800}.inventory-filter-actions{display:flex;gap:8px}.inventory-filter-actions .btn{min-height:42px}
.inventory-list-head{justify-content:space-between;margin:18px 0 10px}.inventory-list-head h2{font-size:17px}
.inventory-table-wrap{overflow:hidden;border:1px solid #d8e3e6;border-radius:14px}.inventory-table-wrap .table{margin:0}.inventory-item-cell{display:flex;align-items:center;gap:9px}.inventory-item-cell>i{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:#e9f7f7;color:var(--primary)}.inventory-table-stock{color:var(--primary);font-size:16px}.inventory-table-stock.is-empty{color:#c2414f}
.inventory-stock-list{display:none}.inventory-stock-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto 14px;gap:10px;align-items:center;padding:12px 13px;border:1px solid #d8e4e7;border-left:4px solid var(--primary);border-radius:14px;background:linear-gradient(135deg,#fff,#f5fbfb);box-shadow:0 5px 14px rgba(39,67,73,.06);color:inherit;text-decoration:none}.inventory-stock-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#e5f6f6;color:var(--primary);font-size:18px}.inventory-stock-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}.inventory-stock-copy>strong{overflow:hidden;max-width:100%;color:#173f46;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.inventory-stock-copy>small{overflow:hidden;max-width:100%;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.inventory-stock-value{display:flex;min-width:58px;flex-direction:column;align-items:flex-end}.inventory-stock-value strong{color:var(--primary);font-size:21px;line-height:1}.inventory-stock-value small{margin-top:4px;color:#6d858b;font-size:8px;white-space:nowrap}.inventory-stock-chevron{color:#8ba0a5;font-size:13px}.inventory-stock-card.is-empty{border-left-color:#d45a67;background:linear-gradient(135deg,#fff,#fff5f6)}.inventory-stock-card.is-empty .inventory-stock-icon{background:#fff0f2;color:#c43f50}.inventory-stock-card.is-empty .inventory-stock-value strong,.inventory-stock-card.is-empty .inventory-stock-value small{color:#c43f50}.inventory-empty-state{display:grid;min-height:150px;place-items:center;align-content:center;gap:7px;border:1px dashed #cfdde0;border-radius:14px;color:var(--muted);text-align:center}.inventory-empty-state i{color:var(--primary);font-size:26px}.inventory-empty-state strong{color:var(--text)}
.inventory-balance-card{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;overflow:hidden;padding:20px;border-radius:18px;background:linear-gradient(135deg,#0a8b95,#076c76);box-shadow:0 10px 25px rgba(7,108,118,.2);color:#fff}.inventory-balance-card::after{position:absolute;right:-35px;bottom:-62px;width:150px;height:150px;border:25px solid rgba(255,255,255,.09);border-radius:50%;content:""}.inventory-balance-icon{position:relative;z-index:1;display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:17px;background:rgba(255,255,255,.14);font-size:25px}.inventory-balance-copy{position:relative;z-index:1;min-width:0}.inventory-balance-copy small{font-size:11px;opacity:.82}.inventory-balance-copy h1{margin:4px 0 0;overflow:hidden;font-size:22px;text-overflow:ellipsis;white-space:nowrap}.inventory-balance-copy p{margin:3px 0 0;font-size:12px;opacity:.82}.inventory-balance-value{position:relative;z-index:1;display:grid;align-content:center;justify-items:end;min-width:100px}.inventory-balance-value span{font-size:10px;opacity:.8}.inventory-balance-value strong{margin-top:3px;font-size:34px;line-height:1}.inventory-balance-value small{margin-top:3px;font-size:10px;font-weight:800;opacity:.85}
.inventory-history-card{border:1px solid #d9e4e7;border-radius:17px}.inventory-history-head{gap:11px;padding:15px 17px;border-bottom:1px solid #e2eaec}.inventory-history-head .inventory-section-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px;font-size:17px}.inventory-history-head h2{font-size:17px}.inventory-history-table{margin:0;min-width:760px}.inventory-history-table td{font-weight:400;vertical-align:middle}.inventory-movement-type{color:#214850}.inventory-change{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;font-weight:400;white-space:nowrap}.inventory-change.is-in{color:#16824d}.inventory-change.is-out{color:#cf3e50}.inventory-history-balance{color:#173e45;font-weight:850;white-space:nowrap}.inventory-history-mobile{display:none}.inventory-history-card .pagination-wrap{padding:12px 16px;border-top:1px solid #e2eaec}
@media(max-width:760px){
 .inventory-overview-card{padding:12px}.inventory-overview-head{align-items:stretch;flex-direction:column}.inventory-overview-title{align-items:flex-start}.inventory-overview-title h1{font-size:18px}.inventory-overview-title p{font-size:11px;line-height:1.45}.inventory-section-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:18px}.inventory-adjust-button{width:100%;justify-content:center}
 .inventory-filter-panel{grid-template-columns:1fr;margin:14px 0;padding:11px}.inventory-filter-actions{display:grid;grid-template-columns:1fr 1fr}.inventory-filter-actions .btn{justify-content:center}.inventory-list-head{margin:15px 2px 9px}.inventory-list-head h2{font-size:15px}.inventory-list-head p{font-size:10px}.inventory-table-wrap{display:none!important}.inventory-stock-list{display:grid;gap:9px}.inventory-stock-card{grid-template-columns:38px minmax(0,1fr) auto 12px;padding:11px}.inventory-stock-icon{width:38px;height:38px;border-radius:12px;font-size:16px}
 .merchandise-inventory-history-page .toolbar-actions .btn{width:auto}.inventory-balance-card{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:15px 13px;border-radius:16px}.inventory-balance-icon{width:46px;height:46px;border-radius:14px;font-size:20px}.inventory-balance-copy h1{font-size:16px}.inventory-balance-copy small,.inventory-balance-copy p{font-size:9px}.inventory-balance-value{min-width:60px}.inventory-balance-value span{font-size:8px}.inventory-balance-value strong{font-size:25px}.inventory-history-head{padding:12px}.inventory-history-head h2{font-size:14px}.inventory-history-head p{font-size:9px}.inventory-history-desktop{display:none}.inventory-history-mobile{display:block;overflow:hidden}.inventory-history-mobile-table{display:table!important;width:100%;table-layout:fixed;border-collapse:collapse}.inventory-history-mobile-table thead{display:table-header-group!important}.inventory-history-mobile-table tbody{display:table-row-group!important}.inventory-history-mobile-table tr{display:table-row!important}.inventory-history-mobile-table th,.inventory-history-mobile-table td{display:table-cell!important;padding:10px 8px;border-bottom:1px solid #e5ecee!important;font-size:10px;line-height:1.3;vertical-align:middle}.inventory-history-mobile-table th{background:#087f8c;color:#fff;font-size:9px;font-weight:850}.inventory-history-mobile-table th:first-child,.inventory-history-mobile-table td:first-child{width:50%;padding-left:12px;text-align:left}.inventory-history-mobile-table th:nth-child(2),.inventory-history-mobile-table td:nth-child(2){width:25%}.inventory-history-mobile-table th:last-child,.inventory-history-mobile-table td:last-child{width:25%;padding-right:12px}.inventory-history-mobile-table tbody tr:last-child td{border-bottom:0!important}.inventory-mobile-description{display:flex;min-width:0;flex-direction:column;gap:2px}.inventory-mobile-description>span{overflow:hidden;color:#214850;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.inventory-mobile-description small{overflow:hidden;color:#74878d;font-size:8.5px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.inventory-mobile-description time{color:#8a989d;font-size:8px}.inventory-history-mobile-table .inventory-change{font-size:10px}.inventory-history-mobile-table .inventory-history-balance{font-size:10.5px}
}

/* Laporan New_ML */
.report-page{display:grid;gap:12px}
.report-tabs{padding-top:0}
.report-filter-card{padding:0!important;overflow:visible}
.report-summary-grid,.payroll-mine-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.report-summary-grid .summary-card,.payroll-mine-summary .summary-card{display:flex;min-width:0;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.report-summary-grid .summary-card span,.payroll-mine-summary .summary-card span{color:var(--muted);font-size:11px}
.report-summary-grid .summary-card strong,.payroll-mine-summary .summary-card strong{color:var(--primary-900);font-size:16px;line-height:1.35;word-break:break-word}
.report-ledger-card{padding:0!important;overflow:hidden}
.report-ledger-card>.table-wrap{border:0;border-radius:0}
.report-money-in{color:#047857}.report-money-out{color:#b42318}
.report-internal-row{background:#f8fafc}.report-internal-row td{color:#64748b}
.report-action-group{justify-content:center}
.report-financial-summary{padding:0!important;overflow:hidden}
.report-summary-section{padding:14px 16px;border-top:1px solid var(--bd)}
.report-summary-section h2{margin:0 0 10px;color:var(--primary-900);font-size:17px}
.report-summary-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:7px 16px}
.report-summary-section .report-summary-line{padding:6px 0}
.report-summary-line span{min-width:0}.report-summary-line strong{text-align:right;white-space:nowrap}
.report-summary-opening,.report-summary-closing{padding-top:13px;padding-bottom:13px;background:#f8fafc}
.report-summary-total{margin-top:5px;padding-top:10px!important;border-top:1px dashed var(--bd);font-weight:800}
.report-summary-result{border-top:1px solid var(--bd);padding-top:12px;padding-bottom:12px}
.report-summary-closing{border-top:1px solid var(--bd);font-size:16px}
.report-qty-summary{font-size:14px!important}.report-mobile-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;margin-top:10px}.report-mobile-kv span{color:var(--muted)}.report-mobile-kv strong{text-align:right}.report-mobile-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;margin-top:9px;border-top:1px solid var(--bd)}

/* Daftar Nota - tab laporan operasional */
.order-report-tabs{margin-bottom:0}.order-unfinished-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff}.order-unfinished-summary span{color:var(--muted);font-size:12px}.order-unfinished-summary strong{color:var(--primary-900);font-size:18px}
.order-process-report-list{display:grid;gap:8px}.order-process-report-row{display:grid;gap:4px}.order-process-report-row>strong{font-size:12px;color:var(--primary-900)}.order-process-report-steps{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.order-process-mini-step{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border:1px solid var(--bd);border-radius:999px;background:#f8fafc;color:#64748b;font-size:10px;line-height:1.2;white-space:nowrap}.order-process-mini-step.is-completed{border-color:#bbf7d0;background:#ecfdf5;color:#047857}.order-process-mini-step.is-active{border-color:#fed7aa;background:#fff7ed;color:#c2410c;font-weight:800}.order-process-arrow{color:#94a3b8;font-size:9px}.order-ready-icons{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px}.order-ready-express{color:#ea8a20}.order-ready-delivery{color:#2563eb}.order-list-actions{justify-content:center}

/* Gaji Saya - periode berjalan */
.payroll-mine-page{display:grid;gap:12px}.payroll-mine-card{padding:0!important;overflow:hidden}.payroll-mine-card>.table-wrap{border:0;border-radius:0}.payroll-mine-table tfoot td{font-weight:800;background:#f8fafc}.payroll-mine-amount{padding:0;border:0;background:transparent;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}.payroll-mine-amount:hover{text-decoration:underline}
.payroll-mine-modal{position:fixed;inset:0;z-index:1350;display:none;align-items:flex-start;justify-content:center;padding:24px;background:rgba(15,23,42,.48);overflow:auto}.payroll-mine-modal.is-open{display:flex}.payroll-mine-modal-card{width:min(560px,100%);margin:auto;background:#fff;border-radius:16px;box-shadow:0 20px 55px rgba(15,23,42,.25);overflow:hidden}.payroll-mine-modal-wide{width:min(900px,100%)}.payroll-mine-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bd)}.payroll-mine-modal-head h2{margin:0;color:var(--primary-900);font-size:18px}.payroll-mine-modal-body{padding:14px 16px;max-height:70vh;overflow:auto}.payroll-mine-detail-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--bd)}.payroll-mine-detail-row:last-child{border-bottom:0}.payroll-mine-detail-row span{color:var(--muted)}.payroll-mine-detail-row strong{text-align:right}

@media(max-width:900px){.report-summary-grid,.payroll-mine-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.report-summary-grid,.payroll-mine-summary{grid-template-columns:1fr 1fr}.order-process-report-steps{align-items:flex-start}.order-process-report-mobile .order-process-report-steps{display:grid;grid-template-columns:1fr}.order-process-report-mobile .order-process-arrow{display:none}.payroll-mine-modal{padding:10px}.payroll-mine-modal-body{padding:12px}.payroll-mine-detail-row{grid-template-columns:1fr auto}}
@media(max-width:480px){.report-summary-grid,.payroll-mine-summary{grid-template-columns:1fr}}

/* Dashboard role-based New_ML */
.role-dashboard{display:grid;width:100%;max-width:var(--page-max);gap:16px;margin:0 auto;padding:0 16px 22px}
.role-dashboard-cashier{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
.cashier-bottom-nav{position:fixed;z-index:905;right:0;bottom:0;left:0;display:grid;align-items:center;min-height:72px;padding:5px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid #dbe5e8;background:rgba(255,255,255,.97);box-shadow:0 -6px 22px rgba(15,69,75,.08);backdrop-filter:blur(10px)}
.cashier-bottom-nav-items-1{grid-template-columns:1fr}.cashier-bottom-nav-items-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-bottom-nav-items-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cashier-bottom-nav-items-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cashier-bottom-nav-items-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cashier-bottom-nav-link{display:flex;min-width:0;height:56px;align-self:center;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-radius:12px;color:var(--primary);font-size:10px;font-weight:800;line-height:1.1;text-align:center;text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease;opacity:.92}
.cashier-bottom-nav-link:hover,.cashier-bottom-nav-link:focus-visible{background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);outline:none;opacity:1}
.cashier-bottom-nav-link.is-active:not(.is-primary){background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);opacity:1}
.cashier-bottom-nav-link i{font-size:20px;line-height:1}
.cashier-bottom-nav-link span{display:block;max-width:100%;overflow-wrap:anywhere}
.cashier-bottom-nav-link.is-primary{position:relative;top:-9px;width:64px;height:64px;margin:0 auto;padding:5px 6px;border:5px solid #f5f7fa;border-radius:50%;background:linear-gradient(145deg,#ffb431,#ea7a00);color:#fff;box-shadow:0 10px 24px rgba(234,122,0,.30);opacity:1}
.cashier-bottom-nav-link.is-primary:hover,.cashier-bottom-nav-link.is-primary:focus-visible{background:linear-gradient(145deg,#ffbd48,#df7000);color:#fff;transform:translateY(-1px)}
.cashier-bottom-nav-link.is-primary i{font-size:21px}
.cashier-bottom-nav-link.is-primary span{font-size:9px;line-height:1.05}
.cashier-bottom-nav-link.is-primary.is-active{color:#fff}
.dashboard-welcome-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;padding:22px 24px;border:1px solid #bfe4e7;border-radius:18px;background:linear-gradient(135deg,#f8ffff 0%,#eefbfc 62%,#e4f7f9 100%);box-shadow:0 8px 28px rgba(15,69,75,.06)}
.dashboard-welcome-card:after{content:"";position:absolute;right:-55px;top:-85px;width:230px;height:230px;border-radius:50%;background:rgba(7,135,149,.07);pointer-events:none}
.dashboard-welcome-copy{position:relative;z-index:1;min-width:0}.dashboard-eyebrow,.dashboard-section-kicker{display:block;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.dashboard-welcome-copy h1{margin:5px 0 8px;color:#0e4650;font-size:clamp(22px,2.2vw,32px);line-height:1.18}.dashboard-welcome-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:12px}.dashboard-welcome-meta span{display:inline-flex;align-items:center;gap:6px}.dashboard-notification-cta{position:relative;z-index:1;display:flex;align-items:center;gap:9px;min-width:190px;padding:12px 14px;border:1px solid #cfe7ea;border-radius:14px;background:#fff;color:#24565c;text-decoration:none;box-shadow:0 4px 14px rgba(15,69,75,.04)}.dashboard-notification-cta>i:first-child{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#edf8f9;color:var(--primary)}.dashboard-notification-cta span{display:flex;min-width:0;flex:1;flex-direction:column;font-size:11px}.dashboard-notification-cta span strong{font-size:18px;line-height:1.1}.dashboard-notification-cta.has-attention{border-color:#fed7aa;background:#fffaf5;color:#9a4b09}.dashboard-notification-cta.has-attention>i:first-child{background:#fff0df;color:#e47b12}
.dashboard-section{display:grid;gap:10px}.dashboard-section-title,.dashboard-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.dashboard-section-title h2,.dashboard-panel-head h2{margin:2px 0 0;color:#0e5260;font-size:19px}.dashboard-section-title>a,.dashboard-panel-head>a,.dashboard-text-link{display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}.dashboard-panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.dashboard-quick-grid{display:grid;gap:12px}.dashboard-quick-grid-1{grid-template-columns:1fr}.dashboard-quick-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-quick-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-quick-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-quick-card{position:relative;display:flex;min-height:112px;align-items:center;gap:14px;padding:17px;border:1px solid var(--bd);border-radius:16px;background:#fff;color:#183f46;text-decoration:none;box-shadow:0 5px 18px rgba(15,69,75,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.dashboard-quick-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,69,75,.09);border-color:#addbe0}.dashboard-quick-icon{display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;border-radius:15px;background:#eaf8fa;color:var(--primary);font-size:24px}.dashboard-quick-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}.dashboard-quick-copy strong{font-size:15px}.dashboard-quick-copy small{color:var(--muted);font-size:11px;line-height:1.35}.dashboard-quick-arrow{align-self:flex-start;color:#9db7bb;font-size:14px}.dashboard-quick-card.tone-secondary .dashboard-quick-icon{background:#eef2ff;color:#4658a8}.dashboard-quick-card.tone-success .dashboard-quick-icon{background:#ecfdf5;color:#078154}.dashboard-quick-card.tone-warning .dashboard-quick-icon{background:#fff6e8;color:#d97706}
.dashboard-panel{padding:16px 18px;border:1px solid var(--bd);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(15,69,75,.045)}.dashboard-two-column{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:14px;align-items:stretch}.dashboard-two-column>.dashboard-panel{height:100%}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dashboard-kpi-card{display:flex;min-height:116px;align-items:center;gap:13px;padding:16px;border:1px solid var(--bd);border-radius:16px;background:#fff;color:#173f46;text-decoration:none;box-shadow:0 5px 18px rgba(15,69,75,.045);transition:transform .18s ease,box-shadow .18s ease}.dashboard-kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,69,75,.09)}.dashboard-kpi-icon{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;border-radius:14px;background:#eaf8fa;color:var(--primary);font-size:20px}.dashboard-kpi-card>div{display:flex;min-width:0;flex-direction:column;gap:3px}.dashboard-kpi-card span{color:var(--muted);font-size:11px;font-weight:700}.dashboard-kpi-card strong{color:#0b4b56;font-size:21px;line-height:1.2}.dashboard-kpi-card small{color:var(--muted);font-size:10px}.dashboard-kpi-card.tone-secondary .dashboard-kpi-icon{background:#eef2ff;color:#4658a8}.dashboard-kpi-card.tone-success .dashboard-kpi-icon{background:#ecfdf5;color:#078154}.dashboard-kpi-card.tone-warning .dashboard-kpi-icon{background:#fff6e8;color:#d97706}.dashboard-kpi-card.tone-info .dashboard-kpi-icon{background:#eff6ff;color:#2563eb}.dashboard-kpi-card.tone-neutral .dashboard-kpi-icon{background:#f1f5f9;color:#475569}
.dashboard-owner-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:14px}.dashboard-chart-panel,.dashboard-composition-panel{min-height:310px}.dashboard-bar-chart{display:flex;height:200px;align-items:flex-end;gap:5px;margin-top:18px;padding:8px 4px 0;overflow-x:auto}.dashboard-bar-item{display:flex;flex:1 0 20px;min-width:20px;height:100%;flex-direction:column;align-items:center;gap:5px}.dashboard-bar-track{display:flex;width:100%;height:168px;align-items:flex-end;justify-content:center;border-radius:8px;background:linear-gradient(to top,#f5fbfc,transparent)}.dashboard-bar{display:block;width:72%;min-height:6px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#0ba1af,#078795);box-shadow:0 3px 8px rgba(7,135,149,.18)}.dashboard-bar.h-1{height:10%}.dashboard-bar.h-2{height:20%}.dashboard-bar.h-3{height:30%}.dashboard-bar.h-4{height:40%}.dashboard-bar.h-5{height:50%}.dashboard-bar.h-6{height:60%}.dashboard-bar.h-7{height:70%}.dashboard-bar.h-8{height:80%}.dashboard-bar.h-9{height:90%}.dashboard-bar.h-10{height:100%}.dashboard-bar-item small{color:#82989c;font-size:9px}.dashboard-chart-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:10px}.dashboard-chart-foot strong{color:#55767b;font-size:10px}.dashboard-composition-row{display:grid;grid-template-columns:minmax(0,1fr) 76px 38px;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid #eef3f4}.dashboard-composition-row:last-child{border-bottom:0}.dashboard-composition-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.dashboard-composition-copy span{color:var(--muted);font-size:11px}.dashboard-composition-copy strong{font-size:13px;color:#193f46}.dashboard-progress{height:8px;overflow:hidden;border-radius:999px;background:#edf3f4}.dashboard-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0a929f,#46bec8)}.dashboard-progress .w-0{width:0}.dashboard-progress .w-1{width:10%}.dashboard-progress .w-2{width:20%}.dashboard-progress .w-3{width:30%}.dashboard-progress .w-4{width:40%}.dashboard-progress .w-5{width:50%}.dashboard-progress .w-6{width:60%}.dashboard-progress .w-7{width:70%}.dashboard-progress .w-8{width:80%}.dashboard-progress .w-9{width:90%}.dashboard-progress .w-10{width:100%}.dashboard-composition-row>small{text-align:right;color:var(--muted);font-size:10px;font-weight:800}
.dashboard-flow-grid{display:grid;grid-template-columns:repeat(7,minmax(0,auto));align-items:center;justify-content:space-between;gap:10px;margin-top:16px}.dashboard-flow-grid>div{display:grid;min-width:120px;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:0 9px;align-items:center}.dashboard-flow-icon{display:grid;grid-row:1/3;width:38px;height:38px;place-items:center;border-radius:12px;background:#eaf8fa;color:var(--primary);font-size:17px}.dashboard-flow-icon.is-warning{background:#fff6e8;color:#d97706}.dashboard-flow-icon.is-success{background:#ecfdf5;color:#078154}.dashboard-flow-icon.is-info{background:#eff6ff;color:#2563eb}.dashboard-flow-grid span:not(.dashboard-flow-icon){color:var(--muted);font-size:10px}.dashboard-flow-grid strong{font-size:19px;color:#163f46}.dashboard-flow-arrow{color:#b7c8cb;font-size:14px}.dashboard-operational-value{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding-top:12px;border-top:1px solid var(--bd)}.dashboard-operational-value span{color:var(--muted);font-size:11px}.dashboard-operational-value strong{color:#0b5964;font-size:17px}
.dashboard-attention-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dashboard-attention-card{display:flex;min-height:82px;align-items:center;gap:10px;padding:13px;border:1px solid var(--bd);border-radius:14px;background:#fff;color:#173f46;text-decoration:none}.dashboard-attention-icon{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;border-radius:12px;background:#f1f5f9;color:#64748b;font-size:18px}.dashboard-attention-card>div{display:flex;min-width:0;flex:1;flex-direction:column}.dashboard-attention-card>div strong{font-size:20px;line-height:1.1}.dashboard-attention-card>div span{margin-top:2px;color:var(--muted);font-size:10px}.dashboard-attention-card>i{color:#b3c4c7}.dashboard-attention-card.is-warning{border-color:#fed7aa;background:#fffbf6}.dashboard-attention-card.is-warning .dashboard-attention-icon{background:#fff1dc;color:#d97706}.dashboard-attention-card.is-warning>div strong{color:#a9560b}.dashboard-attention-card.is-danger{border-color:#fecaca;background:#fff9f9}.dashboard-attention-card.is-danger .dashboard-attention-icon{background:#fee2e2;color:#dc2626}.dashboard-attention-card.is-danger>div strong{color:#b42318}.dashboard-attention-card.is-clear{opacity:.84}
.dashboard-cash-card{display:flex;min-height:180px;flex-direction:column}.dashboard-cash-state{display:flex;align-items:center;gap:13px;margin-top:16px;padding:13px;border-radius:14px;background:#f8fbfc}.dashboard-cash-icon{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;border-radius:14px;background:#e9f8fa;color:var(--primary);font-size:22px}.dashboard-cash-state>div{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}.dashboard-cash-state strong{font-size:14px}.dashboard-cash-state small{color:var(--muted);font-size:10px}.dashboard-cash-state.is-required{background:#fff8ed}.dashboard-cash-state.is-required .dashboard-cash-icon{background:#fff0d8;color:#d97706}.dashboard-cash-state.is-empty{background:#fafcfc}
.dashboard-stat-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:15px}.dashboard-stat-mini-grid>div,.dashboard-stat-mini-grid>a{display:flex;min-height:75px;flex-direction:column;justify-content:center;padding:11px 12px;border:1px solid #e6eef0;border-radius:12px;background:#fbfdfd;color:#173f46;text-decoration:none}.dashboard-stat-mini-grid span{color:var(--muted);font-size:10px}.dashboard-stat-mini-grid strong{margin:2px 0;color:#0d5964;font-size:19px}.dashboard-stat-mini-grid small{color:#718b90;font-size:10px}
.dashboard-payroll-card{position:relative;overflow:hidden}.dashboard-payroll-card:after{content:"";position:absolute;right:-42px;bottom:-58px;width:150px;height:150px;border-radius:50%;background:rgba(7,135,149,.05)}.dashboard-payroll-total{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:14px;padding:15px;border-radius:14px;background:linear-gradient(135deg,#edfafa,#f9ffff)}.dashboard-payroll-total span{color:var(--muted);font-size:10px}.dashboard-payroll-total strong{color:#075966;font-size:24px}.dashboard-payroll-breakdown{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.dashboard-payroll-breakdown>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid #e5edef;border-radius:11px}.dashboard-payroll-breakdown span{color:var(--muted);font-size:10px}.dashboard-payroll-breakdown strong{font-size:13px}.dashboard-payroll-period{position:relative;z-index:1;display:block;margin-top:9px;color:var(--muted);font-size:10px}.dashboard-payroll-card.is-compact{height:100%}.dashboard-empty-copy{display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px;border-radius:12px;background:#f8fafc;color:var(--muted)}
.dashboard-action-strip{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid #cfe9dc;border-radius:14px;background:#f7fffb;color:#235646;text-decoration:none}.dashboard-action-strip-icon{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:12px;background:#e6f7ef;color:#078154;font-size:18px}.dashboard-action-strip>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.dashboard-action-strip strong{font-size:12px}.dashboard-action-strip small{margin-top:2px;color:var(--muted);font-size:10px}.dashboard-action-strip>i{color:#aac4bb}.dashboard-action-strip.has-attention{border-color:#fed7aa;background:#fffaf5;color:#92500c}.dashboard-action-strip.has-attention .dashboard-action-strip-icon{background:#fff0dc;color:#d97706}
.dashboard-courier-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr);gap:14px}.dashboard-courier-main,.dashboard-courier-split{padding:18px;border:1px solid var(--bd);border-radius:17px;background:#fff;box-shadow:0 5px 18px rgba(15,69,75,.045)}.dashboard-courier-main{background:linear-gradient(135deg,#f9ffff,#edfafa)}.dashboard-courier-number{display:flex;align-items:baseline;gap:7px;margin:7px 0 1px}.dashboard-courier-number strong{color:#075966;font-size:42px;line-height:1}.dashboard-courier-number span{color:var(--muted);font-size:13px}.dashboard-courier-main p{margin:7px 0 11px;color:var(--muted);font-size:11px}.dashboard-courier-progress{width:min(360px,100%);height:9px;margin-bottom:14px}.dashboard-courier-split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dashboard-courier-split>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 5px;text-align:center}.dashboard-round-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#eaf8fa;color:var(--primary);font-size:18px}.dashboard-courier-split span:not(.dashboard-round-icon){color:var(--muted);font-size:10px}.dashboard-courier-split strong{font-size:22px;color:#16454d}.dashboard-session-state{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px;border-radius:13px;background:#f8fafc}.dashboard-session-state>i{font-size:24px;color:#94a3b8}.dashboard-session-state>div{display:flex;flex-direction:column;gap:2px}.dashboard-session-state strong{font-size:13px}.dashboard-session-state span{color:var(--muted);font-size:10px}.dashboard-session-state.is-open{background:#f0fdf7}.dashboard-session-state.is-open>i{color:#078154}.dashboard-session-panel .dashboard-text-link{margin-top:12px}
.dashboard-production-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:14px}.dashboard-process-callout{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px;border:1px solid #fed7aa;border-radius:18px;background:linear-gradient(135deg,#fffdf9,#fff7e9);box-shadow:0 6px 20px rgba(180,100,20,.06)}.dashboard-process-icon{display:grid;width:70px;height:70px;place-items:center;border-radius:20px;background:#fff0d9;color:#d97706;font-size:31px}.dashboard-process-callout h2{margin:3px 0;color:#8e4c0d;font-size:24px}.dashboard-process-callout p{margin:0;color:#856b54;font-size:11px;line-height:1.5}.dashboard-production-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dashboard-production-stats>a{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--bd);border-radius:15px;background:#fff;color:#173f46;text-decoration:none;box-shadow:0 5px 18px rgba(15,69,75,.04)}.dashboard-production-stats>a>div{display:flex;min-width:0;flex:1;flex-direction:column}.dashboard-production-stats span:not(.dashboard-round-icon){color:var(--muted);font-size:10px}.dashboard-production-stats strong{font-size:24px;color:#16454d}.dashboard-production-stats>a>i{color:#b6c8cb}.dashboard-round-icon.is-warning{background:#fff1dd;color:#d97706}.dashboard-round-icon.is-success{background:#ecfdf5;color:#078154}
.dashboard-large-metric{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding:18px;border-radius:14px;background:#f8fbfc}.dashboard-large-metric strong{font-size:36px;color:#0b5964}.dashboard-large-metric span{color:var(--muted);font-size:11px}.dashboard-courier-workday-panel{padding:18px}.dashboard-courier-workday-list{margin-top:14px}
@media(max-width:1100px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-owner-grid,.dashboard-courier-hero,.dashboard-production-grid{grid-template-columns:1fr}.dashboard-quick-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-flow-grid{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch}.dashboard-flow-arrow{display:none}.dashboard-flow-grid>div{min-width:0}}
@media(max-width:767px){.role-dashboard{gap:12px;padding-left:10px;padding-right:10px}.dashboard-welcome-card{align-items:flex-start;flex-direction:column;padding:17px}.dashboard-notification-cta{width:100%}.dashboard-welcome-copy h1{font-size:23px}.dashboard-kpi-grid,.dashboard-two-column,.dashboard-production-stats{grid-template-columns:1fr}.dashboard-quick-grid-2,.dashboard-quick-grid-3,.dashboard-quick-grid-4{grid-template-columns:1fr 1fr}.dashboard-quick-card{min-height:94px;padding:13px}.dashboard-quick-icon{width:44px;height:44px;flex-basis:44px;font-size:20px}.dashboard-quick-copy strong{font-size:13px}.dashboard-quick-copy small{display:none}.dashboard-owner-grid{grid-template-columns:1fr}.dashboard-composition-panel{min-height:0}.dashboard-attention-grid{grid-template-columns:1fr 1fr}.dashboard-flow-grid{grid-template-columns:1fr 1fr}.dashboard-flow-grid>div{padding:8px 0}.dashboard-courier-split{grid-template-columns:repeat(3,1fr)}.dashboard-process-callout{grid-template-columns:56px 1fr;padding:16px}.dashboard-process-icon{width:56px;height:56px;font-size:25px}.dashboard-process-callout .btn{grid-column:1/-1;width:100%;justify-content:center}.dashboard-bar-chart{height:180px}.dashboard-bar-track{height:150px}}
@media(max-width:480px){.dashboard-quick-grid-2,.dashboard-quick-grid-3,.dashboard-quick-grid-4,.dashboard-attention-grid{grid-template-columns:1fr}.dashboard-kpi-grid{grid-template-columns:1fr 1fr}.dashboard-kpi-card{min-height:104px;align-items:flex-start;flex-direction:column;padding:13px}.dashboard-kpi-icon{width:38px;height:38px;flex-basis:38px;font-size:17px}.dashboard-kpi-card strong{font-size:17px}.dashboard-kpi-card small{display:none}.dashboard-courier-split{padding:10px}.dashboard-courier-split>div{padding:8px 2px}.dashboard-panel{padding:14px}.dashboard-payroll-total{align-items:flex-start;flex-direction:column}.dashboard-payroll-total strong{font-size:22px}.dashboard-flow-grid{grid-template-columns:1fr}.dashboard-flow-grid>div{grid-template-columns:38px 1fr}.dashboard-stat-mini-grid{grid-template-columns:1fr 1fr}}

/* Dashboard internal: cegah grid dan grafik mendorong halaman keluar layar kecil. */
@media(max-width:767px){
  .role-dashboard,
  .role-dashboard>*{min-width:0;max-width:100%}
  .role-dashboard .dashboard-kpi-grid,
  .role-dashboard .dashboard-owner-grid,
  .role-dashboard .dashboard-two-column,
  .role-dashboard .dashboard-panel,
  .role-dashboard .dashboard-welcome-card{min-width:0;max-width:100%}
  .role-dashboard .dashboard-owner-grid>*{min-width:0}
  .role-dashboard .dashboard-bar-chart{width:100%;min-width:0;max-width:100%}
  .role-dashboard .dashboard-kpi-card{min-width:0}
  .role-dashboard .dashboard-kpi-card>div{width:100%;min-width:0}
  .role-dashboard .dashboard-kpi-card strong{max-width:100%;overflow-wrap:anywhere}
}

/* Pada layar sangat sempit, satu kolom menjaga nilai KPI tetap mudah dibaca. */
@media(max-width:340px){
  .role-dashboard .dashboard-kpi-grid{grid-template-columns:1fr}
  .role-dashboard .dashboard-kpi-card{min-height:88px;align-items:center;flex-direction:row}
}
.dashboard-cash-state .status-pill{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;color:#475569;font-size:9px;font-weight:800}.dashboard-cash-state .status-pill.success{border-color:#a7e7c9;background:#ecfdf5;color:#067647}.dashboard-cash-state .status-pill.warning{border-color:#fed7aa;background:#fff7ed;color:#b45309}.dashboard-process-callout .btn-warning-ml{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#e88b18;border-color:#d97706;color:#fff}.dashboard-process-callout .btn-warning-ml:hover{background:#d97706;border-color:#c56b05;color:#fff}

/* =========================================================
   PINJAMAN KARYAWAN
   ========================================================= */
.employee-loan-page{padding-bottom:86px}
.employee-loan-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.employee-loan-list-card,.employee-loan-history-card,.employee-loan-detail-head{margin-bottom:12px}
.employee-loan-filter-fields{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto auto;gap:8px;align-items:center;width:100%}
.employee-loan-table td{vertical-align:middle}
.employee-loan-mobile-values{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;color:var(--muted);font-size:12px}
.employee-loan-mobile-values span{display:flex;flex-direction:column;gap:2px}
.employee-loan-mobile-values strong{color:var(--text);font-size:14px}
.employee-loan-modal-body{max-height:min(68vh,620px);overflow:auto}
.employee-loan-switch{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff;cursor:pointer}
.employee-loan-switch input{margin-top:3px}
.employee-loan-switch span{display:grid;gap:2px}
.employee-loan-switch small{color:var(--muted);line-height:1.4}
.employee-loan-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.employee-loan-history-label{font-weight:700}
.payroll-loan-box{margin-top:14px;padding:13px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc}
.payroll-loan-box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.payroll-loan-box-head>div{display:grid;gap:2px}
.payroll-loan-box-head span{color:var(--muted);font-size:13px}
.payroll-loan-box-head i{font-size:22px;color:var(--primary)}
.payroll-loan-deduction-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.payroll-loan-deduction-form .group{margin:0}
.payroll-loan-posted-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px dashed var(--bd)}
.payroll-mine-loan-card{margin-bottom:12px}
.payroll-mine-loan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.payroll-mine-loan-head>div{display:grid;gap:3px}
.payroll-mine-loan-head>div>span,.payroll-mine-loan-head small{color:var(--muted);font-size:12px}
.payroll-mine-loan-head>div>strong{font-size:24px;color:var(--primary)}
.payroll-mine-loan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.payroll-mine-loan-grid>div,.payroll-mine-loan-modal-summary>div{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.payroll-mine-loan-grid span,.payroll-mine-loan-modal-summary span{font-size:12px;color:var(--muted)}
.payroll-mine-loan-modal-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.payroll-mine-loan-note{margin-top:10px}
@media (max-width:900px){
  .employee-loan-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .employee-loan-filter-fields{grid-template-columns:1fr 160px auto}
  .employee-loan-filter-fields .btn:last-child{grid-column:auto}
}
@media (max-width:640px){
  .employee-loan-summary-grid{grid-template-columns:1fr}
  .employee-loan-filter-fields{grid-template-columns:1fr}
  .payroll-loan-deduction-form{grid-template-columns:1fr}
  .payroll-mine-loan-head{align-items:flex-start;flex-direction:column}
  .payroll-mine-loan-grid{grid-template-columns:1fr}
  .payroll-mine-loan-modal-summary{grid-template-columns:1fr}
}

/* =========================================================
   KONSOLIDASI SISTEM UI - SCREENING MENYELURUH 2026-08-13
   Komponen lintas modul diletakkan di bagian akhir agar halaman lama
   memperoleh standar yang sama tanpa mengubah alur bisnisnya.
   ========================================================= */
.page-head,.page-header,.cash-page-head,.fulfillment-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.page-head>div:first-child,.page-header>div:first-child,.cash-page-head>div:first-child,.fulfillment-page-head>div:first-child{min-width:0}
.page-head h1,.page-header h1,.cash-page-head h1,.fulfillment-page-head h1,.page-head h2,.page-header h2{margin:0;color:var(--primary-900);line-height:1.25}
.page-head p,.page-header p,.cash-page-head p,.fulfillment-page-head p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.page-head>.aksi-group,.page-header>.aksi-group,.cash-page-head>.aksi-group,.fulfillment-page-head>.aksi-group,.fulfillment-primary-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}

.filter-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.filter-row>.group{min-width:150px;margin:0}
.filter-row>.group:first-child{flex:1 1 220px}
.filter-row>.btn,.filter-row>.aksi-group{flex:0 0 auto}
.compact-filter-bar{border:1px solid var(--bd);border-radius:13px;background:#fbfdfd}

.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:13px 16px;border-top:1px solid var(--bd);background:#fbfdfd}
.modal-foot>.btn,.modal-foot>form{flex:0 0 auto}
.modal-close,.btn-icon,[data-modal-close]{touch-action:manipulation}
.modal-close:focus-visible,.btn-icon:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(8,145,155,.28);outline-offset:2px}
body.modal-open{overflow:hidden}

.mobile-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:10px}
.mobile-card-grid>div{display:grid;gap:2px;min-width:0}
.mobile-card-grid span,.mobile-card-grid small{color:var(--muted);font-size:11px}
.mobile-card-grid strong{color:var(--text);font-size:13px;overflow-wrap:anywhere}

.fulfillment-card,.fulfillment-form-card,.fulfillment-list-card{border:1px solid var(--bd);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(15,69,75,.045)}
.fulfillment-card,.fulfillment-form-card{padding:16px}
.fulfillment-list-card{overflow:hidden}
.fulfillment-stage-block{display:grid;gap:12px;padding:14px;border:1px solid var(--bd);border-radius:14px;background:#fbfdfd}
.fulfillment-stage-block+.fulfillment-stage-block{margin-top:12px}
.fulfillment-primary-actions{margin-left:auto}

.ui-icon-only{display:inline-grid;place-items:center;min-width:38px;min-height:38px}
.ui-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:767px){
  .page-head,.page-header,.cash-page-head,.fulfillment-page-head{align-items:stretch;flex-direction:column;gap:10px;margin-bottom:12px}
  .page-head>.aksi-group,.page-header>.aksi-group,.cash-page-head>.aksi-group,.fulfillment-page-head>.aksi-group,.fulfillment-primary-actions{width:100%;justify-content:flex-start}
  .filter-row{display:grid;grid-template-columns:1fr 1fr;align-items:end;width:100%}
  .filter-row>.group,.filter-row>.group:first-child{min-width:0;width:100%}
  .fulfillment-card,.fulfillment-form-card{padding:13px}
}
@media(max-width:520px){
  .page-head>.aksi-group .btn,.page-header>.aksi-group .btn,.cash-page-head>.aksi-group .btn,.fulfillment-page-head>.aksi-group .btn{justify-content:center}
  .filter-row{grid-template-columns:1fr}
  .filter-row>.btn,.filter-row>.aksi-group{width:100%}
  .filter-row>.btn{justify-content:center}
  .modal-foot{display:grid;grid-template-columns:1fr 1fr;padding:12px}
  .modal-foot>.btn,.modal-foot>form,.modal-foot>form>.btn{width:100%;justify-content:center}
  .modal-foot>.btn:only-child{grid-column:1/-1}
  .mobile-card-grid{grid-template-columns:1fr 1fr}
}

/* RINCIAN TRANSAKSI KUOTA PELANGGAN */
.quota-history-row-link{cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease}
.quota-transaction-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quota-transaction-modal-grid>div,.quota-transaction-modal-note{display:grid;gap:5px;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.quota-transaction-modal-grid span,.quota-transaction-modal-note span{font-size:12px;color:var(--muted)}
.quota-transaction-modal-grid strong,.quota-transaction-modal-note strong{font-size:14px;line-height:1.4;word-break:break-word}
.quota-transaction-modal-note{margin-top:10px}
@media(max-width:520px){.quota-transaction-modal-grid{grid-template-columns:1fr}}
.quota-history-row-link:hover,.quota-history-row-link:focus{background:#eefafb;outline:none;box-shadow:inset 3px 0 0 var(--primary)}
.quota-history-row-link:focus-visible{outline:2px solid rgba(8,145,155,.28);outline-offset:-2px}
.quota-history-row-link td:last-child{position:relative;padding-right:34px}
.quota-history-row-link td:last-child::after{content:"›";position:absolute;right:14px;top:50%;font-size:22px;font-weight:700;color:var(--primary);transform:translateY(-50%)}
@media(max-width:767px){.quota-history-row-link td:last-child{padding-right:10px}.quota-history-row-link td:last-child::after{display:none}}

/* RINCIAN TOP UP KUOTA LAMA */
.quota-legacy-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quota-legacy-detail-grid>div{display:grid;gap:5px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:#f8fafc}
.quota-legacy-detail-grid span{font-size:12px;color:var(--muted)}
.quota-legacy-detail-grid strong{font-size:14px;line-height:1.4;word-break:break-word}
@media(max-width:640px){.quota-legacy-detail-grid{grid-template-columns:1fr}}

/* RINCIAN PENGGAJIAN — UI DETAIL STANDAR NEW_ML */
.payroll-detail-page{display:grid;gap:12px}
.payroll-detail-head-card,.payroll-detail-summary-card,.payroll-detail-action-card{overflow:hidden}
.payroll-detail-head-card{padding:0!important}
.payroll-detail-head-card>.cash-page-head{margin:0;padding:14px 16px;border-bottom:1px solid var(--bd)}
.payroll-detail-head-card .cash-page-head h1{font-size:22px;color:var(--primary)}
.payroll-employee-name{color:var(--primary)}
.payroll-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.payroll-meta-strip{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(130px,.55fr) minmax(0,1.15fr);border-top:0;background:#fbfdfe}
.payroll-meta-strip>div{display:grid;gap:3px;min-width:0;padding:11px 14px;border-right:1px solid var(--bd)}
.payroll-meta-strip>div:last-child{border-right:0}
.payroll-meta-strip span{color:var(--muted);font-size:11px;font-weight:700;line-height:1.35}
.payroll-meta-strip strong{color:#173e43;font-size:13px;line-height:1.4;overflow-wrap:anywhere}

.payroll-detail-summary-card,.payroll-detail-action-card{padding:14px 16px!important}
.payroll-section-head{margin:0 0 6px;padding-bottom:10px}
.payroll-section-head h2{font-size:18px}
.payroll-summary-list,.payroll-detail-list{display:grid}
.payroll-summary-list{gap:0}
.payroll-summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:27px;padding:1px 0;border-bottom:0;line-height:1.3}
.payroll-summary-row .label{min-width:0;color:var(--text);font-size:13px}
.payroll-summary-row .value{color:var(--text);font-size:13px;text-align:right;white-space:nowrap}
.payroll-summary-row.total{min-height:34px;margin-top:4px;padding-top:7px;border-top:1px solid var(--bd);border-bottom:0}
.payroll-summary-row.total .label,.payroll-summary-row.total .value{font-size:14px;font-weight:800}
.payroll-summary-row.total .value{color:var(--primary)}
.payroll-summary-value-btn{padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:400;cursor:pointer;text-align:right;white-space:nowrap}
.payroll-summary-value-btn:hover{text-decoration:underline}
.payroll-negative{color:#b91c1c!important}
.payroll-calendar-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:11px;border-top:1px solid var(--bd)}
.payroll-calendar-link-row>div{display:grid;gap:2px;min-width:0}
.payroll-calendar-link-row strong{font-size:13px}
.payroll-calendar-link-row .payroll-calendar-btn{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.payroll-calendar-link-row .payroll-calendar-btn:hover{background:var(--primary-600)!important;border-color:var(--primary-600)!important;color:#fff!important}
.payroll-calendar-link-row span{color:var(--muted);font-size:11px}

.payroll-loan-box{margin-top:12px;padding:12px;border:1px solid #cbd5e1;border-radius:11px;background:#f8fafc}
.payroll-loan-box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.payroll-loan-box-head>div{display:grid;gap:2px}.payroll-loan-box-head span{color:var(--muted);font-size:12px}.payroll-loan-box-head i{font-size:20px;color:var(--primary)}
.payroll-loan-deduction-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end}.payroll-loan-posted-note{display:flex;align-items:center;justify-content:space-between;gap:10px}

.payroll-payment-form{display:block}
.payroll-payment-grid{display:grid;grid-template-columns:minmax(180px,.6fr) minmax(280px,1.4fr);gap:10px;align-items:end}
.payroll-payment-grid .group{margin:0}
.payroll-payment-actions{justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.payroll-payment-actions .btn{min-width:160px;justify-content:center}
.payroll-strong-post-btn{background:#d97706!important;border-color:#b45309!important;color:#fff!important;box-shadow:0 4px 10px rgba(180,83,9,.18)}
.payroll-strong-post-btn:hover{background:#b45309!important;border-color:#92400e!important;color:#fff!important}
.payroll-paid-box{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.payroll-paid-amount{font-size:24px;color:var(--primary)}

/* Modal payroll memakai komponen modal global New_ML. */
.payroll-modal-backdrop{background:rgba(15,23,42,.45)}
.payroll-modal{margin:0!important;background:#fff}
.payroll-modal.small{width:min(760px,100%)}
.payroll-modal-head{gap:10px}
.payroll-modal-head .modal-title{font-size:18px;color:var(--primary)}
.payroll-modal-close{flex:0 0 34px}
.payroll-modal-body{min-height:0}
.payroll-drilldown-head{align-items:center}
.payroll-drilldown-title-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.payroll-drilldown-title-wrap h3{min-width:0}
.payroll-drilldown-back{flex:0 0 auto}

/* Tabel rincian payroll: lebar modal tetap luas, kolom proporsional sesuai isi, seluruh isi kolom dipusatkan. */
#modal-daily-payroll .payroll-daily-modal{width:min(980px,100%);max-width:980px}
#modal-daily-payroll .payroll-modal-body{padding:14px 18px 16px}
#modal-daily-payroll .payroll-table-wrap{width:100%;max-width:100%;overflow-x:hidden;border:1px solid var(--bd);border-radius:11px;background:#fff}
#modal-daily-payroll .payroll-daily-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
/* Desktop/tablet: width auto membuat kolom mengikuti kebutuhan isi, bukan ditarik ke tepi tabel. */
#modal-daily-payroll .payroll-daily-table .col-hari,#modal-daily-payroll .payroll-daily-table .col-tanggal,#modal-daily-payroll .payroll-daily-table .col-jumlah,#modal-daily-payroll .payroll-daily-table .col-gaji,#modal-daily-payroll .payroll-daily-table .col-upah{width:auto}
#modal-daily-payroll .payroll-daily-table th,#modal-daily-payroll .payroll-daily-table td{box-sizing:border-box;padding:9px 12px;line-height:1.25;vertical-align:middle;white-space:nowrap;text-align:center!important}
#modal-daily-payroll .payroll-daily-table tbody tr{height:38px}
#modal-daily-payroll .payroll-daily-table th:first-child,#modal-daily-payroll .payroll-daily-table td:first-child{padding-left:18px}
#modal-daily-payroll .payroll-daily-table th:last-child,#modal-daily-payroll .payroll-daily-table td:last-child{padding-right:18px}
#modal-daily-payroll .payroll-daily-table th{font-size:12px}
#modal-daily-payroll .payroll-daily-table td{font-size:12.5px}
#modal-daily-payroll .payroll-daily-table .text-right{text-align:center!important}
#modal-daily-payroll .payroll-daily-table tfoot td{background:#f8fafc;font-weight:800;border-top:1px solid var(--bd)}
#modal-daily-payroll .payroll-process-detail-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto}
#modal-daily-payroll .payroll-process-detail-table th,#modal-daily-payroll .payroll-process-detail-table td{padding:9px 10px;line-height:1.3;vertical-align:middle;text-align:center!important}
#modal-daily-payroll .payroll-process-detail-table .text-right{text-align:center!important}
#modal-daily-payroll .payroll-process-detail-table th:first-child,#modal-daily-payroll .payroll-process-detail-table td:first-child{padding-left:16px}
#modal-daily-payroll .payroll-process-detail-table th:last-child,#modal-daily-payroll .payroll-process-detail-table td:last-child{padding-right:16px}
#modal-daily-payroll .payroll-process-detail-table tfoot td{background:#f8fafc;font-weight:800;border-top:1px solid var(--bd)}


/* Payroll: informasi tambahan periode dibuat sebagai satu catatan ringkas. */
.payroll-extension-alert{align-items:center;margin:0;padding:9px 12px;line-height:1.4}
.payroll-extension-alert>i{flex:0 0 auto;font-size:15px}
.payroll-extension-alert>span{min-width:0}

/* Payroll: rincian bonus produktivitas transparan, ringkas, dan bertingkat. */
.payroll-bonus-modal{width:min(900px,100%)}
.payroll-bonus-modal-body{padding:14px 16px 16px}
.payroll-bonus-groups{display:grid;gap:12px}
.payroll-bonus-group{overflow:hidden;border:1px solid var(--bd);border-radius:12px;background:#fff}
.payroll-bonus-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--bd);background:#fbfdfe}
.payroll-bonus-group-head>div{display:grid;gap:2px;min-width:0}
.payroll-bonus-group-head strong{font-size:13px;color:var(--primary)}
.payroll-bonus-group-head span:not(.badge){font-size:10.5px;color:var(--muted)}
.payroll-bonus-tiers{display:grid}
.payroll-bonus-tier{border-bottom:1px solid var(--bd);background:#fff}
.payroll-bonus-tier:last-child{border-bottom:0}
.payroll-bonus-tier-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:9px;width:100%;padding:10px 13px;border:0;background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.payroll-bonus-tier-toggle:hover{background:#fbfdfe}
.payroll-bonus-tier-toggle.is-open{background:#fbfdfe}
.payroll-bonus-tier-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.payroll-bonus-tier-title strong{font-size:13px}
.payroll-bonus-tier-title small{font-size:10.5px;color:var(--muted);font-weight:500}
.payroll-bonus-status{font-size:10.5px;font-weight:700;color:#64748b;white-space:nowrap}
.payroll-bonus-status.is-achieved{color:#047857}
.payroll-bonus-tier-toggle>i{font-size:11px;color:var(--muted);transition:transform .15s ease}
.payroll-bonus-tier-toggle.is-open>i{transform:rotate(180deg)}
.payroll-bonus-tier-body{padding:0 13px 11px;background:#fff}
.payroll-bonus-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--bd);border-radius:10px;background:#fff}
.payroll-bonus-metric{position:relative;display:grid;gap:3px;align-content:center;min-width:0;min-height:58px;padding:8px 10px;border:0;border-right:1px solid var(--bd);background:#fff;text-align:center;color:var(--text)}
.payroll-bonus-metric:last-child{border-right:0}
button.payroll-bonus-metric{font:inherit;cursor:pointer}
button.payroll-bonus-metric:hover,button.payroll-bonus-metric.is-open{background:#f4fbfc}
.payroll-bonus-metric>span{font-size:10.5px;color:var(--muted);line-height:1.2}
.payroll-bonus-metric>strong{min-width:0;font-size:13px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.payroll-bonus-metric.is-clickable>strong{color:var(--primary)}
.payroll-bonus-metric.is-shortfall>strong{color:#b45309}
.payroll-bonus-metric>i{position:absolute;top:8px;right:8px;font-size:9px;color:var(--muted);transition:transform .15s ease}
.payroll-bonus-metric.is-open>i{transform:rotate(180deg)}
.payroll-bonus-detail-panel{padding-top:8px}
.payroll-bonus-table-wrap{overflow:hidden;border:1px solid var(--bd);border-radius:9px;background:#fff}
.payroll-bonus-target-table,.payroll-bonus-achievement-table,.payroll-bonus-transaction-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto;font-variant-numeric:tabular-nums}
.payroll-bonus-target-table th,.payroll-bonus-target-table td,.payroll-bonus-achievement-table th,.payroll-bonus-achievement-table td,.payroll-bonus-transaction-table th,.payroll-bonus-transaction-table td{padding:7px 9px;text-align:center!important;vertical-align:middle}
.payroll-bonus-target-table th,.payroll-bonus-achievement-table th,.payroll-bonus-transaction-table th{font-size:10px;line-height:1.15}
.payroll-bonus-target-table td,.payroll-bonus-achievement-table td,.payroll-bonus-transaction-table td{font-size:11px}
.payroll-bonus-target-table th{white-space:normal;overflow:visible;text-overflow:clip;word-break:normal}
.payroll-bonus-target-table td,.payroll-bonus-achievement-table th,.payroll-bonus-achievement-table td,.payroll-bonus-transaction-table th,.payroll-bonus-transaction-table td{white-space:nowrap}
.payroll-bonus-target-table th:first-child,.payroll-bonus-target-table td:first-child,.payroll-bonus-achievement-table th:first-child,.payroll-bonus-achievement-table td:first-child,.payroll-bonus-transaction-table th:first-child,.payroll-bonus-transaction-table td:first-child{padding-left:13px}
.payroll-bonus-target-table th:last-child,.payroll-bonus-target-table td:last-child,.payroll-bonus-achievement-table th:last-child,.payroll-bonus-achievement-table td:last-child,.payroll-bonus-transaction-table th:last-child,.payroll-bonus-transaction-table td:last-child{padding-right:13px}
.payroll-bonus-target-table tfoot td,.payroll-bonus-achievement-table tfoot td,.payroll-bonus-transaction-table tfoot td{background:#f8fafc;border-top:1px solid var(--bd)}
.payroll-bonus-amount-link{padding:0;border:0;background:transparent;color:var(--primary);font:inherit;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.payroll-bonus-formula-note{margin:5px 2px 0}
.payroll-bonus-empty-note{padding:8px 9px;border:1px dashed var(--bd);border-radius:8px;color:var(--muted);font-size:11px;line-height:1.4}
.payroll-bonus-transactions{margin-top:8px}
.payroll-bonus-transactions-head{margin:0 0 5px;font-size:11px;font-weight:800;color:var(--text)}
.payroll-bonus-transaction-wrap{overflow:hidden;border:1px solid var(--bd);border-radius:9px;background:#fff}
.payroll-bonus-transaction-table td:nth-child(3){max-width:260px;overflow:hidden;text-overflow:ellipsis}
.payroll-bonus-group-total,.payroll-bonus-grand-total{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:800}
.payroll-bonus-group-total{padding:9px 13px;border-top:1px solid var(--bd);background:#fbfdfe}
.payroll-bonus-group-total strong,.payroll-bonus-grand-total strong{color:var(--primary)}
.payroll-bonus-grand-total{padding:10px 2px 2px;font-size:13px}


.payroll-calendar-wrap{display:grid;gap:14px}
.payroll-calendar-month{border:1px solid var(--bd);border-radius:12px;padding:12px;background:#fff}
.payroll-calendar-title{margin:0 0 10px;color:var(--primary-900);font-weight:800}
.payroll-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.payroll-calendar-cell{min-height:64px;padding:8px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.payroll-calendar-dow{min-height:auto;padding:4px 2px;border:0;background:transparent;color:var(--muted);font-weight:700;text-align:center}
.payroll-calendar-cell.empty{background:transparent;border-style:dashed;opacity:.35}.payroll-calendar-cell .day{margin-bottom:5px;color:var(--text);font-weight:800}
.payroll-calendar-cell.worked{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25)}.payroll-calendar-cell.work-no-salary{background:rgba(100,116,139,.07);border-color:rgba(100,116,139,.2)}.payroll-calendar-cell.leave{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.22)}.payroll-calendar-cell.permission{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.24)}.payroll-calendar-cell.sick{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.22)}.payroll-calendar-cell.off{background:#fff}.payroll-calendar-cell.off .day{color:#dc2626}.payroll-calendar-cell.no-activity{background:#f1f5f9}.payroll-calendar-cell.no-activity .day{color:#94a3b8}
.payroll-calendar-symbol{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;font-size:14px;font-weight:800}.payroll-calendar-symbol.worked{background:rgba(16,185,129,.14);color:#047857}.payroll-calendar-symbol.work-no-salary{background:rgba(100,116,139,.14);color:#475569}.payroll-calendar-symbol.leave{background:rgba(59,130,246,.14);color:#1d4ed8}.payroll-calendar-symbol.permission{background:rgba(245,158,11,.15);color:#b45309}.payroll-calendar-symbol.sick{background:rgba(239,68,68,.13);color:#b91c1c}
.payroll-calendar-extra{margin-top:3px;color:#b45309;font-size:10px;font-weight:700}.payroll-calendar-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:12px;color:var(--muted);font-size:12px}.payroll-calendar-legend span{display:inline-flex;align-items:center;gap:5px}.payroll-calendar-legend .off-date{color:#dc2626;font-weight:800}.payroll-calendar-legend .no-activity-date{color:#94a3b8;font-weight:800}
.payroll-detail-list{gap:0;padding:10px;border:1px solid var(--bd);border-radius:11px;background:#fff}.payroll-detail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:8px 0;border-bottom:1px solid #edf2f4}.payroll-detail-row:last-child{border-bottom:0}.payroll-detail-row .label{color:var(--muted)}.payroll-detail-row.total{margin-top:2px;padding-top:10px;border-top:1px solid var(--bd);border-bottom:0;font-weight:800}.payroll-adjustment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.payroll-adjustment-form{display:grid;grid-template-columns:1fr 120px 1.2fr auto;gap:8px;margin-top:12px;align-items:end}
#payrollDailyBaseList .payroll-detail-row{grid-template-columns:minmax(120px,.34fr) minmax(0,1fr);align-items:start}
#payrollDailyBaseList .payroll-detail-row .value{text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.payroll-workday-correction{display:grid;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--bd)}
.payroll-workday-correction-head{display:grid;gap:2px}.payroll-workday-correction-head strong{font-size:13px}.payroll-workday-correction-head span{font-size:11px;color:var(--muted);line-height:1.4}
.payroll-workday-correction-form{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(220px,1.45fr) auto;gap:8px;align-items:center}.payroll-workday-correction-form .input{margin:0}.payroll-workday-correction-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.mt-12{margin-top:12px}

@media(max-width:900px){
  .payroll-payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-payment-note{grid-column:1/-1}
}
@media(max-width:768px){
  .payroll-detail-page{gap:10px}
  .payroll-detail-head-card>.cash-page-head{padding:12px 13px}
  .payroll-detail-head-card .cash-page-head{align-items:flex-start;flex-direction:column;gap:9px}
  .payroll-detail-head-card .cash-page-head h1{font-size:19px}
  .payroll-head-actions{width:100%;justify-content:space-between}
  .payroll-meta-strip{grid-template-columns:minmax(95px,.62fr) minmax(0,1.38fr)}
  .payroll-meta-strip>div{padding:9px 11px;border-right:0;border-bottom:1px solid var(--bd)}
  .payroll-meta-strip>div:first-child{grid-column:1/-1}
  .payroll-meta-strip>div:nth-child(2){border-right:1px solid var(--bd);border-bottom:0}
  .payroll-meta-strip>div:nth-child(3){border-bottom:0}
  .payroll-meta-strip span{font-size:10px}.payroll-meta-strip strong{font-size:12px}
  .payroll-detail-summary-card,.payroll-detail-action-card{padding:12px 13px!important}
  .payroll-section-head h2{font-size:16px}
  .payroll-summary-row{min-height:25px;padding:0;gap:8px;line-height:1.25}.payroll-summary-row .label,.payroll-summary-row .value{font-size:12px}.payroll-summary-row.total{min-height:31px;margin-top:3px;padding-top:6px}.payroll-summary-row.total .label,.payroll-summary-row.total .value{font-size:13px}
  .payroll-calendar-link-row span{display:none}
  .payroll-loan-deduction-form,.payroll-payment-grid,.payroll-adjustment-form{grid-template-columns:1fr}.payroll-payment-note{grid-column:auto}
  .payroll-payment-actions{justify-content:stretch}.payroll-payment-actions .btn{width:100%}
  .payroll-paid-box{align-items:stretch;flex-direction:column}.payroll-paid-box .btn{width:100%;justify-content:center}
  .payroll-modal-head .modal-title{font-size:16px;line-height:1.3}
  .payroll-drilldown-title-wrap{gap:6px}.payroll-drilldown-back{min-height:32px;padding:6px 9px;font-size:11px}
  #modal-daily-payroll .payroll-daily-modal{width:100%;max-width:none}
  #modal-daily-payroll .payroll-modal-body{padding:12px 14px 14px}
  #modal-daily-payroll .payroll-daily-table{table-layout:fixed;font-size:10.5px}
  #modal-daily-payroll .payroll-daily-table .col-hari{width:12%}
  #modal-daily-payroll .payroll-daily-table .col-tanggal{width:24%}
  #modal-daily-payroll .payroll-daily-table .col-jumlah{width:12%}
  #modal-daily-payroll .payroll-daily-table .col-gaji{width:26%}
  #modal-daily-payroll .payroll-daily-table .col-upah{width:26%}
  #modal-daily-payroll .payroll-daily-table tbody tr{height:34px}
  #modal-daily-payroll .payroll-table-wrap{border-radius:9px}
  #modal-daily-payroll .payroll-daily-table th,#modal-daily-payroll .payroll-daily-table td{padding:7px 4px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:center!important}
  #modal-daily-payroll .payroll-daily-table th:first-child,#modal-daily-payroll .payroll-daily-table td:first-child{padding-left:7px}
  #modal-daily-payroll .payroll-daily-table th:last-child,#modal-daily-payroll .payroll-daily-table td:last-child{padding-right:7px}
  #modal-daily-payroll .payroll-daily-table th{font-size:10px}
  #modal-daily-payroll .payroll-daily-table td{font-size:10.5px}
  #modal-daily-payroll .payroll-summary-value-btn{max-width:100%;font-size:inherit;white-space:nowrap}
  #modal-daily-payroll .payroll-process-detail-table{table-layout:fixed;font-size:clamp(7.8px,2.05vw,9.3px)}
  #modal-daily-payroll .payroll-process-detail-table th,#modal-daily-payroll .payroll-process-detail-table td{padding:7px 4px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center!important}
  #modal-daily-payroll .payroll-process-detail-table a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #modal-daily-payroll .payroll-process-detail-table th:nth-child(1),#modal-daily-payroll .payroll-process-detail-table td:nth-child(1){width:19%;padding-left:7px}
  #modal-daily-payroll .payroll-process-detail-table th:nth-child(2),#modal-daily-payroll .payroll-process-detail-table td:nth-child(2){width:28%}
  #modal-daily-payroll .payroll-process-detail-table th:nth-child(3),#modal-daily-payroll .payroll-process-detail-table td:nth-child(3){width:19%}
  #modal-daily-payroll .payroll-process-detail-table th:nth-child(4),#modal-daily-payroll .payroll-process-detail-table td:nth-child(4){width:15%}
  #modal-daily-payroll .payroll-process-detail-table th:nth-child(5),#modal-daily-payroll .payroll-process-detail-table td:nth-child(5){width:19%;padding-right:7px}
  #payrollDailyBaseList .payroll-detail-row{grid-template-columns:92px minmax(0,1fr);gap:8px;padding:7px 0}
  #payrollDailyBaseList .payroll-detail-row .label,#payrollDailyBaseList .payroll-detail-row .value{font-size:11px}
  .payroll-workday-correction-form{grid-template-columns:1fr}.payroll-workday-correction-actions{display:grid;grid-template-columns:1fr 1fr}.payroll-workday-correction-actions .btn{justify-content:center}
  .payroll-bonus-modal{width:100%;max-width:none}
  .payroll-bonus-modal-body{padding:10px 11px 12px}
  .payroll-bonus-group-head{padding:9px 10px}
  .payroll-bonus-tier-toggle{padding:9px 10px;grid-template-columns:minmax(0,1fr) auto 14px;gap:6px}
  .payroll-bonus-tier-title{gap:5px}.payroll-bonus-tier-title strong{font-size:11.5px}.payroll-bonus-tier-title small,.payroll-bonus-status{font-size:9px}
  .payroll-bonus-tier-body{padding:0 10px 9px}
  .payroll-bonus-comparison{border-radius:8px}
  .payroll-bonus-metric{min-height:52px;padding:7px 4px;gap:2px}
  .payroll-bonus-metric>span{font-size:9px}.payroll-bonus-metric>strong{font-size:10.8px}.payroll-bonus-metric>i{top:6px;right:5px;font-size:8px}
  .payroll-bonus-detail-panel{padding-top:7px}
  .payroll-bonus-target-table,.payroll-bonus-transaction-table{table-layout:fixed}
  .payroll-bonus-target-table th{padding:5px 1px;font-size:7.9px;line-height:1.08;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .payroll-bonus-target-table td{padding:6px 1.5px;font-size:8.5px;white-space:nowrap;overflow:visible;text-overflow:clip}
  .payroll-bonus-target-table th:nth-child(1),.payroll-bonus-target-table td:nth-child(1){width:19%;padding-left:4px}
  .payroll-bonus-target-table th:nth-child(2),.payroll-bonus-target-table td:nth-child(2){width:12%}
  .payroll-bonus-target-table th:nth-child(3),.payroll-bonus-target-table td:nth-child(3){width:15%}
  .payroll-bonus-target-table th:nth-child(4),.payroll-bonus-target-table td:nth-child(4){width:25%}
  .payroll-bonus-target-table th:nth-child(5),.payroll-bonus-target-table td:nth-child(5){width:29%;padding-right:4px}
  .payroll-bonus-achievement-table th,.payroll-bonus-achievement-table td{padding:6px 7px;font-size:10px}
  .payroll-bonus-transaction-table th,.payroll-bonus-transaction-table td{padding:6px 2px;font-size:clamp(7.6px,2vw,9px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .payroll-bonus-transaction-table th:nth-child(1),.payroll-bonus-transaction-table td:nth-child(1){width:20%;padding-left:5px}
  .payroll-bonus-transaction-table th:nth-child(2),.payroll-bonus-transaction-table td:nth-child(2){width:21%}
  .payroll-bonus-transaction-table th:nth-child(3),.payroll-bonus-transaction-table td:nth-child(3){width:27%;max-width:none}
  .payroll-bonus-transaction-table th:nth-child(4),.payroll-bonus-transaction-table td:nth-child(4){width:14%}
  .payroll-bonus-transaction-table th:nth-child(5),.payroll-bonus-transaction-table td:nth-child(5){width:18%;padding-right:5px}
  .payroll-bonus-transaction-table a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .payroll-extension-alert{margin:0;padding:8px 10px;font-size:11px}
  .payroll-calendar-grid{gap:4px}.payroll-calendar-dow{padding:3px 1px}.payroll-calendar-cell{min-height:58px;padding:6px}
}
@media(max-width:420px){
  #modal-daily-payroll .payroll-daily-table th,#modal-daily-payroll .payroll-daily-table td{font-size:9.8px}
  #modal-daily-payroll .payroll-process-detail-table th,#modal-daily-payroll .payroll-process-detail-table td{font-size:8.8px;padding-left:3px;padding-right:3px}
}

.ui-toast-region{position:fixed;z-index:12050;top:18px;right:18px;display:grid;width:min(390px,calc(100vw - 28px));gap:9px;pointer-events:none}
.ui-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--bd);border-radius:13px;background:#fff;color:var(--text);box-shadow:0 16px 38px rgba(15,23,42,.18);pointer-events:auto}
.ui-toast>i{margin-top:2px;color:var(--primary)}
.ui-toast>span{line-height:1.45;overflow-wrap:anywhere}
.ui-toast.is-success{border-color:#a7e7c9;background:#f3fff9}.ui-toast.is-success>i{color:#078154}
.ui-toast.is-warning{border-color:#fed7aa;background:#fffaf3}.ui-toast.is-warning>i{color:#d97706}
.ui-toast.is-danger{border-color:#fecaca;background:#fff8f8}.ui-toast.is-danger>i{color:#dc2626}
.ui-toast-close{display:grid;width:28px;height:28px;place-items:center;margin:-5px -5px 0 0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.ui-toast-close:hover{background:rgba(15,23,42,.06);color:var(--text)}
.ui-confirm-card{overflow:hidden}
.ui-confirm-copy{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:flex-start}
.ui-confirm-copy>i{font-size:25px;color:var(--primary)}
.ui-confirm-copy>p{margin:1px 0 0;line-height:1.55;white-space:pre-line}
@media(max-width:520px){.ui-toast-region{top:10px;right:10px;width:calc(100vw - 20px)}}

/* DISTRIBUSI KURIR - DIKONSOLIDASIKAN 2026-08-13 */
/* Distribusi Kurir — UI standar New_ML 2026-08-10 */
.courier-dispatch-page{max-width:1220px;margin-inline:auto}
.courier-dispatch-card{overflow:hidden}
.courier-dispatch-head{margin-bottom:4px}

/* Ringkasan kurir dibuat collapsible agar halaman utama tetap ringkas. */
.courier-overview-details{margin-top:18px;border:1px solid var(--bd);border-radius:13px;background:#fff;overflow:hidden}
.courier-overview-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:800;color:#0f5961;background:#fbfdff}
.courier-overview-details>summary::-webkit-details-marker{display:none}
.courier-overview-details>summary::after{content:"\F282";font-family:"bootstrap-icons";font-size:13px;transition:transform .18s ease}
.courier-overview-details[open]>summary::after{transform:rotate(180deg)}
.courier-overview-summary-title{display:inline-flex;align-items:center;gap:8px;min-width:0}
.courier-overview-summary-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-left:auto}
.courier-summary-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid var(--bd);font-size:11px;font-weight:700;white-space:nowrap}
.courier-summary-badge.is-open{background:#f0fdf4;border-color:#86efac;color:#166534}
.courier-summary-badge.is-ready{background:#f0f9ff;border-color:#bae6fd;color:#075985}
.courier-summary-badge.is-closed{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.courier-overview-body{padding:14px;border-top:1px solid var(--bd)}
.courier-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.courier-status-card{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.courier-status-copy{display:grid;gap:2px;min-width:0}
.courier-status-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.courier-status-card small{color:var(--muted);font-size:11px;line-height:1.3;text-align:right}
.courier-status-label{font-size:11px;font-weight:700}
.courier-status-card.is-open{border-color:#86efac;background:#f0fdf4}.courier-status-card.is-open .courier-status-label{color:#166534}
.courier-status-card.is-ready{border-color:#bae6fd;background:#f0f9ff}.courier-status-card.is-ready .courier-status-label{color:#075985}
.courier-status-card.is-closed{border-color:#fdba74;background:#fff7ed}.courier-status-card.is-closed .courier-status-label{color:#9a3412}
.courier-status-card.is-unavailable{border-color:#e2e8f0;background:#f8fafc}.courier-status-card.is-unavailable .courier-status-label{color:#64748b}

.courier-status-date-filter{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 11px;border:1px solid var(--bd);border-radius:10px;background:#f8fafc}
.courier-status-date-filter .group{margin:0;min-width:190px}
.courier-status-date-filter .input{height:38px;min-width:170px}
.courier-summary-date{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#f8fafc;border:1px solid var(--bd);color:#475569;font-size:11px;font-weight:700;white-space:nowrap}
.courier-session-history-inline{margin-top:14px;border-top:1px solid var(--bd)}
.courier-session-history-inline>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 2px;cursor:pointer;list-style:none;color:#0f5961;font-weight:800;font-size:14px}
.courier-session-history-inline>summary::-webkit-details-marker{display:none}
.courier-session-history-inline>summary>span:first-child{display:inline-flex;align-items:center;gap:7px}
.courier-session-history-inline>summary::after{content:"\F282";font-family:"bootstrap-icons";font-size:12px;margin-left:6px;transition:transform .18s ease}
.courier-session-history-inline[open]>summary::after{transform:rotate(180deg)}
.courier-history-count{margin-left:auto;color:var(--muted);font-size:11px;font-weight:700}
.courier-session-history-content{padding-top:10px}
.courier-history-empty{padding:16px 6px}
.courier-session-history-table-wrap{border:1px solid var(--bd);border-radius:10px;overflow:auto}
.courier-session-history-table{margin:0}
.courier-session-history-table th,.courier-session-history-table td{vertical-align:top}
.courier-session-history-mobile{padding:0}
.courier-session-history-item{margin-bottom:8px}
.courier-session-history-kv{display:grid;grid-template-columns:68px minmax(0,1fr);gap:6px 10px;margin-top:10px;font-size:12px}.courier-session-history-kv span{color:var(--muted)}

/* Beri napas yang jelas antarblok utama. */
.courier-dispatch-card>.fulfillment-dispatch-section{margin-top:20px!important}
.courier-dispatch-card>.fulfillment-dispatch-section+.fulfillment-dispatch-section{margin-top:22px!important}
.courier-followup-history{margin-top:22px!important}

.courier-section-title,.courier-section-head h2{display:flex;align-items:center;gap:8px;color:#0f5961}
.courier-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.courier-section-head h2{margin:7px 0 0;font-size:16px;white-space:nowrap}
.courier-section-tools{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.courier-outlet-filter{display:flex;align-items:center;gap:6px;min-width:250px}
.courier-outlet-filter .input{width:210px;min-width:150px}
.courier-filter-note{display:flex;align-items:flex-start;gap:6px;margin:-3px 0 11px;color:var(--muted);font-size:12px;line-height:1.4}
.courier-filter-note i{margin-top:1px;color:var(--primary)}
.courier-bulk-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.courier-bulk-controls .input{width:190px;min-width:150px}
.courier-selected-count{min-width:65px;color:var(--muted);font-size:12px;text-align:right}
.courier-dispatch-table-wrap{overflow-x:auto}
.courier-dispatch-table{width:100%;table-layout:auto}
.courier-dispatch-table th,.courier-dispatch-table td{vertical-align:top}
.courier-dispatch-table .courier-check-col{width:42px;text-align:center}
.courier-dispatch-table th:nth-last-child(1){min-width:250px}
.courier-dispatch-table td:first-child .master-checkbox{margin-top:3px}
.courier-address-cell{min-width:260px;max-width:430px;line-height:1.42;overflow-wrap:anywhere}
.courier-map-link{display:inline-flex;align-items:flex-start;gap:5px;color:inherit;text-decoration:none}
.courier-map-link i{flex:0 0 auto;margin-top:1px;color:var(--primary)}
.courier-map-link:hover,.courier-detail-link:hover{color:var(--primary);text-decoration:underline}
.courier-detail-link{color:inherit;text-decoration:none}
.js-detail-row{cursor:pointer}.js-detail-row:hover td{background:#f8fbfc}
.courier-row-actions{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0}
.courier-row-actions form{margin:0}
.courier-assign-form{display:grid;grid-template-columns:minmax(145px,1fr) 36px;gap:6px;min-width:195px}
.courier-assign-form .input{min-width:0}
.courier-dispatch-mobile-cards{padding:0 0 72px}
.courier-task-card{display:grid;gap:9px}
.courier-mobile-title{display:flex;align-items:flex-start;gap:9px;min-width:0}
.courier-mobile-title>div{min-width:0}
.courier-mobile-address{font-size:13px;line-height:1.45;color:#334155}
.courier-mobile-kv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;font-size:13px}.courier-mobile-kv span{color:var(--muted)}
.courier-mobile-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.courier-mobile-actions form{margin:0}
.courier-mobile-assign-form{display:flex;align-items:center;gap:7px;flex:1;min-width:220px}.courier-mobile-assign-form .input{min-width:0;flex:1}
.courier-session-history{border:1px solid var(--bd);border-radius:12px;background:#fff;overflow:hidden}.courier-session-history>summary{cursor:pointer;padding:12px 14px;font-weight:800;color:#0f5961}.courier-session-history .table-wrap{margin:0!important;border-top:1px solid var(--bd)}

/* Modal buka kembali sesi. */
.courier-reopen-modal .modal-card{width:min(520px,calc(100vw - 28px))}
.courier-reopen-modal .modal-head{margin:0;padding:14px 18px}
.courier-reopen-modal .modal-body{margin:0;padding:18px}
.courier-reopen-note{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border:1px solid #bfdbfe;border-radius:11px;background:#eff6ff;color:#1e40af}
.courier-reopen-note>i{flex:0 0 auto;margin-top:1px;font-size:18px}
.courier-reopen-note>div{display:grid;gap:3px;min-width:0}
.courier-reopen-note strong{color:#1e3a8a}
.courier-reopen-note span{font-size:13px;line-height:1.45}
.courier-reopen-reason{margin-top:16px}
.courier-reopen-reason .label{display:block;margin-bottom:7px}
.courier-reopen-reason textarea{min-height:112px;resize:vertical}
.courier-reopen-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:14px 18px 18px;border-top:1px solid var(--bd);background:#fff}
.courier-reopen-actions .btn{margin:0}

@media(max-width:767px){
  .courier-dispatch-card{padding:12px}
  .courier-overview-details{margin-top:14px}
  .courier-overview-details>summary{align-items:flex-start;flex-wrap:wrap;padding:11px 12px}
  .courier-overview-summary-meta{width:100%;justify-content:flex-start;margin-left:0;padding-left:25px}
  .courier-overview-body{padding:11px}
  .courier-status-date-filter{display:grid;grid-template-columns:1fr auto;padding:9px}
  .courier-status-date-filter .group{grid-column:1/-1;min-width:0}
  .courier-status-date-filter .input{width:100%;min-width:0}
  .courier-status-date-filter .btn{justify-content:center}
  .courier-status-grid{grid-template-columns:1fr}
  .courier-status-card{align-items:center;min-height:58px}
  .courier-session-history-table-wrap{display:none!important}
  .courier-session-history-mobile{display:block}
  .courier-section-head{align-items:stretch;flex-direction:column}
  .courier-section-head h2{margin:0}
  .courier-section-tools{width:100%;display:grid;gap:8px}
  .courier-outlet-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;min-width:0}
  .courier-outlet-filter .input{width:100%;min-width:0}
  .courier-bulk-form{width:100%}.courier-bulk-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px}.courier-bulk-controls .input{width:100%}.courier-bulk-controls .btn{grid-column:1/-1;width:100%;justify-content:center}.courier-selected-count{text-align:left}
  .courier-dispatch-table-wrap{display:none!important}
  .courier-dispatch-mobile-cards{display:block}
  .courier-mobile-actions{display:grid;grid-template-columns:1fr auto}.courier-mobile-assign-form{min-width:0;display:grid;grid-template-columns:1fr auto}.courier-mobile-assign-form .btn{white-space:nowrap}
  .courier-session-history .table{min-width:680px}
  .courier-reopen-actions{display:grid;grid-template-columns:1fr 1fr;padding:12px 14px 14px}
  .courier-reopen-actions .btn{width:100%;justify-content:center}
  .courier-reopen-modal .modal-body{padding:14px}
}
@media(min-width:768px){.courier-dispatch-mobile-cards,.courier-session-history-mobile{display:none!important}}
@media(max-width:420px){.courier-mobile-actions{grid-template-columns:1fr}.courier-mobile-assign-form{grid-template-columns:1fr}.courier-mobile-assign-form .btn,.courier-mobile-actions>form>.btn{width:100%;justify-content:center}.courier-reopen-actions{grid-template-columns:1fr}}

/* RAPiKAN KONTROL FILTER + DISTRIBUSI CEPAT 20260810-R5 */
.courier-section-head-clean{
  position:relative;
  align-items:center;
  margin-bottom:10px;
}
.courier-section-head-clean h2{margin:0}
.courier-filter-menu{position:relative;flex:0 0 auto}
.courier-filter-menu>summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.courier-filter-menu>summary::-webkit-details-marker{display:none}
.courier-filter-menu>summary::after{
  content:"\F282";
  font-family:"bootstrap-icons";
  margin-left:7px;
  font-size:10px;
  opacity:.65;
  transition:transform .16s ease;
}
.courier-filter-menu[open]>summary::after{transform:rotate(180deg)}
.courier-filter-menu.is-active>summary{
  border-color:#67c9d1;
  background:#eefbfc;
  color:#087984;
}
.courier-filter-menu.is-active>summary i{color:#087984}
.courier-filter-popover{
  position:absolute;
  z-index:35;
  top:calc(100% + 7px);
  right:0;
  width:min(310px,calc(100vw - 34px));
  padding:12px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 32px rgba(15,23,42,.14);
}
.courier-outlet-filter-popover{
  display:grid;
  gap:8px;
  min-width:0;
}
.courier-outlet-filter-popover .label{margin:0;font-size:12px}
.courier-outlet-filter-popover .input{width:100%;min-width:0}
.courier-filter-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding-top:2px;
}
.courier-filter-note{
  margin:0 0 10px;
  padding:7px 9px;
  border-radius:9px;
  background:#f8fafc;
}
.courier-bulk-bar{
  margin:0 0 11px;
  padding:8px 9px;
  border:1px solid #b6e7eb;
  border-radius:11px;
  background:#f2fcfd;
}
.courier-bulk-bar[hidden]{display:none!important}
.courier-bulk-bar-inner{
  display:grid;
  grid-template-columns:auto minmax(180px,240px) auto;
  align-items:center;
  justify-content:end;
  gap:8px;
}
.courier-bulk-bar .courier-selected-count{
  min-width:0;
  padding:4px 9px;
  border:1px solid #a7dfe4;
  border-radius:999px;
  background:#fff;
  color:#0f5961;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}
.courier-bulk-bar .input{width:100%;min-width:0}
.courier-bulk-bar .btn{white-space:nowrap}

@media(max-width:767px){
  .courier-section-head-clean{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .courier-section-head-clean h2{font-size:16px}
  .courier-section-tools{display:flex;width:auto}
  .courier-filter-popover{
    position:fixed;
    z-index:10050;
    top:auto;
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
    border-radius:15px;
    box-shadow:0 18px 50px rgba(15,23,42,.22);
  }
  .courier-filter-actions .btn{flex:1;justify-content:center}
  .courier-bulk-bar{padding:9px}
  .courier-bulk-bar-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    justify-content:stretch;
    gap:7px;
  }
  .courier-bulk-bar .courier-selected-count{font-size:11px;padding:4px 7px}
  .courier-bulk-bar .btn{padding-left:10px;padding-right:10px}
}
@media(max-width:520px){
  .courier-bulk-bar-inner{grid-template-columns:auto minmax(0,1fr)}
  .courier-bulk-bar .btn{grid-column:1/-1;width:100%;justify-content:center}
}
/* END RAPiKAN KONTROL FILTER + DISTRIBUSI CEPAT 20260810-R5 */

/* DAFTAR PENGAMBILAN FULFILLMENT - DIKONSOLIDASIKAN 2026-08-13 */
.fulfillment-pickup-list-page{max-width:1120px;margin-inline:auto}
.fulfillment-pickup-list-card{overflow:hidden}
.fulfillment-pickup-filter{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:14px 0 16px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:#fbfdff}
.fulfillment-pickup-filter-field{display:grid;gap:6px;min-width:220px;max-width:360px;flex:1}
.fulfillment-pickup-filter-field .label{display:flex;align-items:center;gap:6px;margin:0}
.fulfillment-pickup-filter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fulfillment-pickup-table{width:100%;table-layout:auto}
.fulfillment-pickup-table th,.fulfillment-pickup-table td{vertical-align:top}
.fulfillment-pickup-table th:nth-child(1),.fulfillment-pickup-table td:nth-child(1){width:1%;white-space:nowrap}
.fulfillment-pickup-table th:nth-child(3),.fulfillment-pickup-table td:nth-child(3){width:160px}
.fulfillment-pickup-table th:nth-child(4),.fulfillment-pickup-table td:nth-child(4){width:130px}
.fulfillment-pickup-table th:nth-child(5),.fulfillment-pickup-table td:nth-child(5){width:70px}
.js-pickup-detail-row{cursor:pointer}.js-pickup-detail-row:hover td{background:#f8fbfc}
.fulfillment-note-link{color:inherit;text-decoration:none}.fulfillment-note-link:hover{color:var(--primary);text-decoration:underline}
.fulfillment-pickup-mobile-cards{padding:10px 0 76px}
.fulfillment-pickup-mobile-card{display:grid;gap:10px}
.fulfillment-pickup-mobile-kv{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 10px;font-size:13px}.fulfillment-pickup-mobile-kv span{color:var(--muted)}
@media(max-width:767px){.fulfillment-pickup-list-card{padding:12px}.fulfillment-pickup-table-wrap{display:none!important}.fulfillment-pickup-mobile-cards{display:block}.fulfillment-pickup-head{align-items:stretch}.fulfillment-pickup-head .btn{align-self:flex-start}.fulfillment-pickup-filter{align-items:stretch;flex-direction:column;margin-top:12px;padding:11px}.fulfillment-pickup-filter-field{max-width:none;min-width:0}.fulfillment-pickup-filter-actions{display:grid;grid-template-columns:1fr 1fr}.fulfillment-pickup-filter-actions .btn{width:100%;justify-content:center}.fulfillment-pickup-filter-actions .btn:only-child{grid-column:1/-1}}
@media(min-width:768px){.fulfillment-pickup-mobile-cards{display:none!important}}

/* PERMINTAAN PENJEMPUTAN - DIKONSOLIDASIKAN 2026-08-13 */
/* Penjemputan — standar UI New_ML 2026-08-10 */
.pickup-request-list-page,.pickup-request-create-page{max-width:1120px;margin-inline:auto}
.pickup-list-head{margin-bottom:4px}
.pickup-request-list-card{overflow:hidden}
.pickup-request-table-wrap{overflow-x:auto}
.pickup-request-table{width:100%;table-layout:auto}
.pickup-request-table th,.pickup-request-table td{vertical-align:top}
.pickup-request-table th:nth-child(1),.pickup-request-table td:nth-child(1){width:1%;white-space:nowrap}
.pickup-request-table th:nth-child(2),.pickup-request-table td:nth-child(2){width:160px}
.pickup-request-table th:nth-child(3),.pickup-request-table td:nth-child(3){width:auto;min-width:260px}
.pickup-request-table th:nth-child(4),.pickup-request-table td:nth-child(4){width:145px}
.pickup-request-table th:nth-child(5),.pickup-request-table td:nth-child(5){width:140px}
.pickup-request-table th:nth-child(6),.pickup-request-table td:nth-child(6){width:84px;white-space:nowrap}
.pickup-address-cell{line-height:1.45;overflow-wrap:anywhere}
.pickup-request-actions-inline{justify-content:center}
.pickup-badge-progress{background:#fff7ed;color:#9a3412;border-color:#fdba74}
.pickup-badge-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.pickup-request-mobile-cards{padding:10px 0 82px}
.pickup-request-mobile-card{gap:10px}
.pickup-mobile-address{display:flex;align-items:flex-start;gap:7px;color:#334155;font-size:13px;line-height:1.45}
.pickup-mobile-address i{margin-top:1px;color:var(--primary)}
.pickup-mobile-courier{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;font-size:13px}
.pickup-mobile-courier span{color:var(--muted)}

.pickup-request-form-card{max-width:860px;margin-inline:auto}
.pickup-form-section{padding:16px 0;border-top:1px solid var(--bd)}
.pickup-form-section:first-of-type{border-top:0;padding-top:4px}
.pickup-form-section h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#0f5961;font-size:16px}
.pickup-customer-search-row,.pickup-selected-customer{max-width:none}
.pickup-selected-customer small{color:var(--muted);font-size:12px}
.pickup-selected-address{max-width:none;align-items:flex-start}
.pickup-selected-address>div:first-child{gap:4px}
.pickup-selected-address-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.pickup-address-select-row{align-items:stretch}
.pickup-address-select-row .btn{white-space:nowrap}
.pickup-note-group{max-width:none}
.pickup-request-actions{justify-content:flex-end}

.pickup-data-modal{padding:12px}
.pickup-data-modal .box{display:flex;max-height:calc(100dvh - 24px);overflow:hidden;flex-direction:column}
.pickup-data-modal .box>form{display:flex;min-height:0;flex:1;flex-direction:column}
.pickup-data-modal .body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.pickup-data-modal .foot{position:relative;z-index:2;flex:0 0 auto;background:#fff}
.pickup-address-form-grid{align-items:start}
.pickup-address-wide{grid-column:1/-1}

/* Tag Jemput thermal 58mm */
.pickup-tag-card-thermal{max-width:760px;margin-inline:auto}
.pickup-tag-preview{display:flex;justify-content:center;padding:20px 10px 24px;background:#f8fafc;border-radius:12px}
.pickup-tag-thermal{box-sizing:border-box;width:58mm;padding:3mm;background:#fff;color:#111;box-shadow:0 9px 24px rgba(15,23,42,.18);font-family:Arial,sans-serif}
.pickup-tag-thermal-head{display:grid;gap:1.2mm;text-align:center}
.pickup-tag-thermal-head strong{font-size:14px;letter-spacing:.04em}
.pickup-tag-thermal-head span{font-size:11px;font-weight:700}
.pickup-tag-thermal-divider{height:1px;margin:2.5mm 0;background:#111}
.pickup-tag-thermal-divider.is-dashed{height:0;border-top:1px dashed #111;background:none}
.pickup-tag-thermal-customer{display:grid;gap:1mm}
.pickup-tag-thermal-customer strong{font-size:15px;line-height:1.2}
.pickup-tag-thermal-customer span{font-size:11px}
.pickup-tag-thermal-address{margin-top:2.6mm}
.pickup-tag-thermal-label{display:block;margin-top:1.5mm;font-size:9px;font-weight:700;text-transform:uppercase}
.pickup-tag-thermal-address p{margin:1mm 0 0;font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.pickup-tag-thermal-qr{display:flex;justify-content:center;margin:2mm auto 0}
.pickup-tag-thermal-qr img,.pickup-tag-thermal-qr canvas{display:block;width:40mm!important;height:40mm!important}
.pickup-tag-thermal-reference{margin-top:1.8mm;font-size:8.5px;line-height:1.35;text-align:center}

@media(max-width:767px){
  .pickup-request-list-card{padding:12px}
  .pickup-request-mobile-cards{display:block}
  .pickup-request-table-wrap{display:none!important}
  .pickup-request-form-card{padding:14px}
  .pickup-selected-address{display:grid;gap:10px}
  .pickup-selected-address-actions{width:100%;justify-content:flex-end}
  .pickup-selected-address-actions .btn{flex:0 0 auto}
  .pickup-address-select-row{display:grid;grid-template-columns:1fr auto auto;gap:7px}
  .pickup-address-select-row .input{grid-column:1/-1}
  .pickup-data-modal{padding:6px}
  .pickup-data-modal .box{max-height:calc(100dvh - 12px);border-radius:14px}
  .pickup-address-form-grid{grid-template-columns:1fr}
  .pickup-address-wide{grid-column:auto}
  .pickup-tag-screen-head{align-items:stretch}
  .pickup-tag-screen-head .btn{align-self:flex-start}
  .pickup-tag-preview{padding:14px 4px 18px}
}

@media(min-width:768px){
  .pickup-request-mobile-cards{display:none!important}
}

@media(max-width:480px){
  .pickup-selected-address-actions{display:flex;justify-content:flex-end}
  .pickup-selected-address-actions .btn{width:auto}
  .pickup-address-select-row{grid-template-columns:1fr 1fr}
  .pickup-address-select-row .btn{width:100%}
  .pickup-request-actions{display:grid;grid-template-columns:1fr 1fr}
  .pickup-request-actions .btn{width:100%;justify-content:center}
}

@media print{
  @page{margin:0}
  body{margin:0!important;background:#fff!important}
  body *{visibility:hidden!important}
  .pickup-tag-thermal,.pickup-tag-thermal *{visibility:visible!important}
  .pickup-tag-thermal{position:absolute;top:0;left:0;width:58mm!important;min-height:0;padding:3mm;box-shadow:none!important}
  .pickup-tag-thermal-qr img,.pickup-tag-thermal-qr canvas{width:40mm!important;height:40mm!important}
}

/* FORM PENJUALAN BARANG - KARTU RESPONSIF */
@media(max-width:767px){
  .merchandise-sale-form-page,.merchandise-sale-layout,.merchandise-sale-main,.merchandise-sale-summary,.merchandise-form-grid,.merchandise-lines-wrap{min-width:0}
  .merchandise-lines-wrap{overflow:visible;border:0;background:transparent}
  .merchandise-lines-table,.merchandise-lines-table tbody{display:block;width:100%;min-width:0!important}
  .merchandise-lines-table thead{display:none}
  .merchandise-lines-table tbody{display:grid;gap:10px}
  .merchandise-lines-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border:1px solid var(--bd);border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(15,69,75,.04)}
  .merchandise-lines-table td{display:grid;gap:4px;padding:0!important;border:0!important;text-align:left!important;vertical-align:top}
  .merchandise-lines-table td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:700}
  .merchandise-lines-table .merchandise-line-item{grid-column:1/-1}
  .merchandise-lines-table .merchandise-line-action{display:flex;grid-column:1/-1;align-items:center;justify-content:flex-end}
  .merchandise-lines-table .merchandise-line-action::before{display:none}
  .merchandise-lines-table .merchandise-qty{width:100%}
}


/* Riwayat lokasi kurir pada Detail Pelanggan */
.customer-location-history-modal{width:min(980px,100%)!important}
.customer-location-history-subtitle{margin-top:3px;font-size:12px;color:var(--muted)}
.customer-location-history-current{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:12px}
.customer-location-history-current>div{border:1px solid var(--bd);border-radius:10px;padding:10px 12px;background:#f8fafc;display:grid;gap:3px}
.customer-location-history-current strong{color:#0f5961;overflow-wrap:anywhere}
.customer-location-history-table td{vertical-align:middle}.customer-location-history-table th{white-space:nowrap}
.customer-location-history-mobile{display:none}.customer-location-history-card{border:1px solid var(--bd);border-radius:12px;padding:11px;background:#fff;display:grid;gap:7px}
.customer-location-history-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.customer-location-history-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}.customer-location-history-card-meta span{border-top:1px solid var(--bd);padding-top:6px;display:flex;justify-content:space-between;gap:8px}
@media(max-width:767px){.customer-location-history-current{grid-template-columns:1fr}.customer-location-history-table-wrap{display:none}.customer-location-history-mobile{display:grid;gap:9px}}

/* =======================================================
   CUSTOMER APP — my.mboklaundry.com
   Mobile-first, memakai tema dan komponen global New_ML.
   ======================================================= */
.customer-app-body{min-height:100dvh;padding-bottom:84px;background:#f5f7fa;color:var(--txt)}
.customer-app-main{width:100%;max-width:680px;margin:0 auto;padding:14px 14px 24px}
.customer-app-header{position:sticky;top:0;z-index:920}
.customer-app-header .row-1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px}
.customer-app-header .right-group{display:flex;justify-content:flex-end}
.customer-app-header .row-2{display:none}
.customer-brand-mini{display:flex;align-items:center;gap:8px;min-width:0}
.customer-brand-mini img{width:30px;height:30px;object-fit:contain}
.customer-brand-mini strong{overflow:hidden;color:#fff;font-size:14px;white-space:nowrap;text-overflow:ellipsis}
.customer-app-header .center-title{color:#fff;font-size:15px;font-weight:800;text-align:center;white-space:nowrap}
.customer-app-header .notification-center{position:relative}
.customer-app-header .notification-center-trigger{position:relative;display:grid;width:40px;height:40px;padding:0;place-items:center;border:0;border-radius:12px;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.customer-app-header .notification-dropdown{right:0;left:auto;width:min(390px,calc(100vw - 28px));max-height:min(560px,75dvh)}

.customer-bottom-nav{position:fixed;z-index:910;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:68px;padding:4px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid var(--bd);background:rgba(255,255,255,.97);box-shadow:0 -6px 22px rgba(15,23,42,.07);backdrop-filter:blur(10px)}
.customer-bottom-nav a{display:flex;min-width:0;height:56px;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-radius:12px;color:#6b7280;font-size:10px;font-weight:700;text-decoration:none}
.customer-bottom-nav a i{font-size:20px;line-height:1}
.customer-bottom-nav a.is-active{color:var(--primary)}
.customer-bottom-nav .customer-bottom-main{position:relative;top:-8px;width:62px;height:62px;margin:0 auto;border:5px solid #f5f7fa;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 7px 20px rgba(15,69,75,.2)}
.customer-bottom-nav .customer-bottom-main i{font-size:22px}
.customer-bottom-nav .customer-bottom-main span{font-size:9px}
.customer-bottom-nav .customer-bottom-main.is-active{color:#fff}

.customer-welcome{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.customer-welcome span{display:block;margin-bottom:2px;color:var(--muted);font-size:13px}
.customer-welcome h1{margin:0;color:#16393d;font-size:23px;line-height:1.2}
.customer-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.customer-quick-card{display:flex;min-height:92px;align-items:center;gap:11px;padding:15px;border:1px solid var(--bd);border-radius:16px;background:#fff;color:var(--txt);text-decoration:none;box-shadow:0 3px 14px rgba(15,23,42,.04)}
.customer-quick-card>i{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:13px;background:#eef7f8;color:var(--primary);font-size:21px}
.customer-quick-card span{display:grid;min-width:0;gap:3px}
.customer-quick-card strong{font-size:14px}
.customer-quick-card small{color:var(--muted);font-size:11px;line-height:1.3}
.customer-quick-card.is-primary{border-color:transparent;background:var(--primary);color:#fff}
.customer-quick-card.is-primary>i{background:rgba(255,255,255,.18);color:#fff}
.customer-quick-card.is-primary small{color:rgba(255,255,255,.8)}

.customer-section{margin:0 0 18px}
.customer-section-first{margin-top:2px}
.customer-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 9px}
.customer-section-head h2{margin:0;color:#174b51;font-size:16px}
.customer-section-head>a{color:var(--primary);font-size:12px;font-weight:750;text-decoration:none}
.customer-section-note{margin:-2px 2px 10px;color:var(--muted);font-size:12px;line-height:1.5}
.customer-muted{color:var(--muted)!important;font-size:12px;line-height:1.45}

.customer-status-card,.customer-order-row{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--bd);border-radius:15px;background:#fff;color:var(--txt);text-decoration:none;box-shadow:0 3px 12px rgba(15,23,42,.035)}
.customer-status-card>i:last-child,.customer-order-row>i:last-child{margin-left:auto;color:#9ca3af}
.customer-status-icon{display:grid;width:40px;height:40px;flex:0 0 40px;place-items:center;border-radius:12px;background:#edf8f9;color:var(--primary);font-size:19px}
.customer-status-copy,.customer-order-main{display:grid;min-width:0;flex:1;gap:4px}
.customer-status-copy strong{font-size:13px}
.customer-status-copy small,.customer-order-main>small{overflow:hidden;color:var(--muted);font-size:11.5px;line-height:1.4;text-overflow:ellipsis}
.customer-order-list{display:grid;gap:8px}
.customer-order-list-page{gap:9px}
.customer-order-row{min-height:78px}
.customer-order-row.is-static{cursor:default}
.customer-order-top{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px}
.customer-order-top>strong{overflow:hidden;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.customer-order-status{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#eef7f8;color:#12626b;font-size:10px;font-weight:750;white-space:nowrap}
.customer-order-meta{display:flex;flex-wrap:wrap;gap:5px 10px;color:var(--muted)}
.customer-order-meta small{font-size:10.5px}
.customer-card-link{display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-size:12px;font-weight:750;text-decoration:none}

.customer-quota-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #dcecef;border-radius:15px;background:#f2fafb;color:var(--txt);text-decoration:none}
.customer-quota-summary>span:first-child{display:grid;gap:3px}
.customer-quota-summary small{color:var(--muted);font-size:11px}
.customer-quota-summary strong{color:#0f5961;font-size:16px}
.customer-quota-summary>span:last-child{color:var(--primary);font-size:11px;font-weight:750}

.customer-primary-btn,.customer-secondary-btn,.customer-small-btn,.customer-location-btn{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border:1px solid transparent;border-radius:11px;font:inherit;font-size:13px;font-weight:750;text-align:center;text-decoration:none;cursor:pointer}
.customer-primary-btn{background:var(--primary);color:#fff}
.customer-secondary-btn{border-color:var(--bd);background:#fff;color:#334155}
.customer-small-btn{min-height:34px;padding:7px 10px;background:var(--primary);color:#fff;font-size:11px}
.customer-inline-btn{min-height:36px;margin-top:4px;padding:8px 11px;font-size:11px}
.customer-link-btn,.customer-danger-link{padding:3px 0;border:0;background:transparent;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.customer-link-btn{color:var(--primary)}
.customer-danger-link{color:var(--danger)}
.customer-primary-btn:disabled,.customer-location-btn:disabled{opacity:.6;cursor:wait}

.customer-form-card,.customer-detail-card,.customer-process-card,.customer-pickup-card,.customer-address-card,.customer-package-card,.customer-promo-card{padding:15px;border:1px solid var(--bd);border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.035)}
.customer-form-stack{display:grid;gap:13px}
.customer-form-stack label,.customer-package-buy-form label{display:grid;gap:6px;margin:0;color:var(--primary);font-size:12px;font-weight:750}
.customer-form-stack label>span,.customer-package-buy-form label>span{color:var(--muted);font-weight:500}
.customer-form-stack label>small{color:var(--muted);font-size:10.5px;font-weight:500;line-height:1.45}
.customer-form-stack input,.customer-form-stack select,.customer-form-stack textarea,.customer-package-buy-form select{width:100%;min-height:44px;padding:10px 11px;border:1px solid #d9dee7;border-radius:10px;background:#fff;color:var(--txt);font:inherit;font-size:13px;outline:none}
.customer-form-stack textarea{min-height:82px;resize:vertical}
.customer-form-stack input:focus,.customer-form-stack select:focus,.customer-form-stack textarea:focus,.customer-package-buy-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.customer-form-two{display:grid;grid-template-columns:1fr 110px;gap:10px}
.customer-form-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:2px}
[data-address-entry-form] input,[data-address-entry-form] select,[data-address-entry-form] textarea{font-weight:400!important}
.address-complex-control{display:grid;width:100%;min-width:0;grid-template-columns:96px minmax(0,1fr);align-items:stretch}
.address-complex-control>[data-complex-type],.address-complex-control>[data-complex-name]{width:100%;min-width:0;height:42px;min-height:0;margin:0}
.address-complex-control>[data-complex-type]{position:relative;z-index:1;border-radius:10px 0 0 10px}
.address-complex-control>[data-complex-name]{border-left:0;border-radius:0 10px 10px 0}
.address-complex-control>[data-complex-name][readonly]{background:#f3f6f7;color:#819197;cursor:not-allowed}
.address-complex-control:focus-within>[data-complex-type],.address-complex-control:focus-within>[data-complex-name]{border-color:var(--primary)}
.address-complex-control:focus-within>[data-complex-type]{box-shadow:-3px 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.address-complex-control:focus-within>[data-complex-name]{box-shadow:3px 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.address-complex-notice{grid-column:1/-1;padding-top:5px;color:#c2410c!important;font-size:10px!important;font-weight:650!important;line-height:1.35}
.customer-form-stack .address-complex-control>[data-complex-type],.customer-form-stack .address-complex-control>[data-complex-name]{height:auto;min-height:46px;border-radius:0;box-shadow:none}
.customer-form-stack .address-complex-control>[data-complex-type]{border-radius:12px 0 0 12px}
.customer-form-stack .address-complex-control>[data-complex-name]{border-radius:0 12px 12px 0}

.customer-flash{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.45}
.customer-flash.is-success{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534}
.customer-flash.is-error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.customer-flash i{margin-top:1px;font-size:15px}

.customer-empty{display:grid;justify-items:center;gap:7px;padding:24px 12px;color:var(--muted);text-align:center}
.customer-empty i{font-size:24px;color:#9aa8b4}
.customer-empty p{margin:0;font-size:12px;line-height:1.45}
.customer-empty-card{border:1px dashed #cdd7df;border-radius:15px;background:#fff}
.customer-chip{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border-radius:999px;background:#eaf7f8;color:#12626b;font-size:9px;font-weight:800}

.customer-pickup-list,.customer-address-list,.customer-package-list,.customer-promo-list{display:grid;gap:10px}
.customer-pickup-card{display:grid;gap:9px}
.customer-pickup-top,.customer-address-head,.customer-package-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.customer-pickup-top strong{color:#164c52;font-size:13px}
.customer-pickup-top small{color:var(--muted);font-size:10px}
.customer-pickup-card p,.customer-address-card p,.customer-package-card p,.customer-promo-card p{margin:0;color:#475569;font-size:12px;line-height:1.5}
.customer-pickup-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--muted);font-size:10.5px}
.customer-pickup-meta span{display:inline-flex;align-items:center;gap:5px}

.customer-address-head>div{display:flex;align-items:center;gap:7px}
.customer-address-head strong{font-size:13px}
.customer-address-head>a{color:var(--primary);font-size:15px}
.customer-address-card>small{color:var(--muted);font-size:10.5px}
.customer-location-state{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;font-size:10.5px;font-weight:650}
.customer-location-state.is-ready{background:#ecfdf5;color:#166534}
.customer-location-state.is-missing{background:#fff7ed;color:#9a3412}
.customer-location-btn{min-height:36px;padding:8px 11px;border:0;color:#fff;font-size:11px;white-space:nowrap;box-shadow:0 5px 12px rgba(15,23,42,.12)}
.customer-location-btn.is-missing{background:linear-gradient(135deg,#f59e0b,#e67e00)}
.customer-location-btn.is-ready{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 76%,var(--secondary)))}
.customer-section-head>.customer-address-add-btn{min-height:36px;padding:8px 11px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 76%,var(--secondary)));color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 20%,transparent)}
.customer-app-body .customer-address-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:3px}
.customer-address-actions-left,.customer-address-actions-right{display:flex;align-items:center;gap:7px}
.customer-address-actions-right{margin-left:auto}
.customer-app-body .customer-address-actions form{margin:0}
.customer-address-action-btn{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:5px;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:#fff;font:inherit;font-size:10.5px;font-weight:750;white-space:nowrap;cursor:pointer}
.customer-address-action-btn.is-primary{border-color:#9edfe3;background:#effafa;color:#087580}
.customer-address-action-btn.is-danger{border-color:#fecaca;background:#fff5f5;color:#dc2626}
.customer-action-label-short{display:none}
.customer-address-action-btn:active,.customer-location-btn:active,.customer-address-add-btn:active{transform:scale(.98)}
.customer-location-feedback{margin-top:8px}

@media(max-width:380px){
 .customer-location-btn,.customer-address-action-btn{padding:7px 8px;font-size:10px}
 .customer-address-actions-left,.customer-address-actions-right{gap:5px}
 .customer-app-body .customer-address-actions{gap:6px}
}
@media(max-width:340px){
 .customer-address-list,.customer-address-card{min-width:0}
 .customer-action-label-full{display:none}
 .customer-action-label-short{display:inline}
}

.customer-order-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--primary),#155b66);color:#fff}
.customer-order-hero small,.customer-order-hero span{font-size:10.5px;opacity:.85}
.customer-order-hero h1{margin:3px 0;color:#fff;font-size:19px}
.customer-hero-badge{flex:0 0 auto;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:750;white-space:nowrap}
.customer-action-alert{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;padding:13px;border:1px solid #fbd38d;border-radius:14px;background:#fffaf0;color:#7c4700}
.customer-action-alert>i{margin-top:1px;font-size:19px}
.customer-action-alert strong{font-size:13px}
.customer-action-alert p{margin:3px 0 7px;font-size:11.5px;line-height:1.45}
.customer-detail-card{display:grid;gap:0;padding-top:4px;padding-bottom:4px}
.customer-detail-card>small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}
.customer-detail-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #edf0f3;font-size:12px}
.customer-detail-line:last-child{border-bottom:0}
.customer-detail-line>div{display:grid;gap:2px}
.customer-detail-line small{color:var(--muted);font-size:10.5px}
.customer-detail-line>strong{white-space:nowrap}
.customer-detail-line.is-total{font-size:14px;font-weight:800}
.customer-process-card{display:grid;gap:11px;margin-bottom:8px}
.customer-process-card>strong{font-size:12.5px}
.customer-process-steps{display:grid;gap:0}
.customer-process-step{position:relative;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:7px;min-height:31px;color:#94a3b8;font-size:11.5px}
.customer-process-step:not(:last-child)::after{position:absolute;top:22px;bottom:-8px;left:10px;width:2px;background:#e3e8ee;content:""}
.customer-process-dot{position:relative;z-index:1;display:grid;width:20px;height:20px;place-items:center;border:2px solid #d9e0e7;border-radius:50%;background:#fff;font-size:10px}
.customer-process-step.is-done{color:#23734d;font-weight:650}
.customer-process-step.is-done .customer-process-dot{border-color:#34a36b;background:#34a36b;color:#fff}
.customer-process-step.is-done:not(:last-child)::after{background:#8bd3ac}
.customer-process-step.is-current{color:#9a5d00;font-weight:800}
.customer-process-step.is-current .customer-process-dot{border-color:#f59e0b;background:#fff8e6;box-shadow:0 0 0 3px #fff1c2}
.customer-order-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;margin-top:6px}

.customer-quota-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.customer-quota-card{display:grid;gap:4px;padding:13px;border:1px solid #dfe7ec;border-radius:14px;background:#fff}
.customer-quota-card small{color:var(--muted);font-size:10.5px}
.customer-quota-card strong{color:#125a62;font-size:17px}
.customer-quota-card span{color:var(--muted);font-size:9.5px}
.customer-package-card{display:grid;gap:11px}
.customer-package-head>div{display:grid;gap:3px}
.customer-package-head strong{font-size:14px}
.customer-package-head small{color:var(--primary);font-size:13px;font-weight:800}
.customer-package-head>i{color:var(--primary);font-size:24px}
.customer-package-items{display:flex;flex-wrap:wrap;gap:6px}
.customer-package-items span{padding:5px 7px;border-radius:8px;background:#f4f7f8;color:#516069;font-size:10px}
.customer-package-buy-form{display:grid;gap:9px;padding-top:2px}
.customer-promo-card{display:grid;gap:6px}
.customer-promo-card>strong{font-size:13px}
.customer-promo-card>small{color:var(--muted);font-size:10px}
.customer-mutation-list{overflow:hidden;border:1px solid var(--bd);border-radius:14px;background:#fff}
.customer-mutation-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid #edf0f3}
.customer-mutation-row:last-child{border-bottom:0}
.customer-mutation-row>span{display:grid;gap:2px}
.customer-mutation-row strong{font-size:11.5px}
.customer-mutation-row small{color:var(--muted);font-size:9.5px}
.customer-mutation-row>strong.is-plus{color:#15803d}
.customer-mutation-row>strong.is-minus{color:#b91c1c}

.customer-profile-head{display:flex;align-items:center;gap:11px;margin:2px 0 14px;padding:14px;border:1px solid var(--bd);border-radius:15px;background:#fff}
.customer-profile-avatar{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#eaf7f8;color:var(--primary);font-size:22px}
.customer-profile-head>div{display:grid;gap:2px}
.customer-profile-head strong{font-size:15px}
.customer-profile-head small{color:var(--muted);font-size:11px}
.customer-account-links{overflow:hidden;border:1px solid var(--bd);border-radius:15px;background:#fff}
.customer-account-links>a,.customer-account-links form>button{display:flex;width:100%;min-height:51px;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border:0;border-bottom:1px solid #edf0f3;background:#fff;color:var(--txt);font:inherit;text-decoration:none;cursor:pointer}
.customer-account-links form:last-child>button{border-bottom:0;color:#b91c1c}
.customer-account-links>a>span,.customer-account-links form>button>span{display:flex;align-items:center;gap:9px}
.customer-account-links strong{font-size:12px}
.customer-account-links span>i{width:21px;color:var(--primary);font-size:16px;text-align:center}
.customer-account-links form:last-child span>i{color:#b91c1c}
.customer-account-links>a>i,.customer-account-links form>button>i{color:#a1aab5}

.customer-pagination{margin-top:10px}
.customer-pagination nav{display:flex;justify-content:center}
.customer-pagination svg{width:16px;height:16px}

/* Customer auth */
.customer-auth-body{min-height:100dvh;background:linear-gradient(180deg,#eef9fa 0,#f6f7fb 45%,#f6f7fb 100%)}
.customer-auth-shell{display:grid;width:min(100%,440px);min-height:100dvh;margin:0 auto;align-content:center;padding:24px 16px}
.customer-auth-brand{display:grid;justify-items:center;gap:7px;margin-bottom:18px;text-align:center}
.customer-auth-brand img{width:68px;height:68px;object-fit:contain}
.customer-auth-brand strong{color:#164f55;font-size:19px}
.customer-auth-brand small{color:var(--muted);font-size:11px}
.customer-auth-brand p{margin:0;color:var(--muted);font-size:11px}
.customer-auth-card{padding:20px;border:1px solid var(--bd);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(15,69,75,.08)}
.customer-auth-card h1{margin:0 0 5px;color:#164f55;font-size:20px}
.customer-auth-card>p{margin:0 0 17px;color:var(--muted);font-size:12px;line-height:1.5}
.customer-auth-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:11px}
.customer-auth-actions a{color:var(--primary);font-weight:700;text-decoration:none}
.customer-otp-input{font-size:21px!important;font-weight:800;letter-spacing:.22em;text-align:center}

/* Customer notification page: memakai bentuk Notification Center internal */
.notification-page-card{padding:0;border:1px solid var(--bd);border-radius:15px;background:#fff;overflow:hidden}
.notification-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px}
.notification-page-head h2{margin:0;font-size:16px}
.notification-page-head p{margin:3px 0 0;font-size:10.5px}
.notification-filter-tabs{display:flex;gap:7px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:none}
.notification-filter-tabs::-webkit-scrollbar{display:none}
.notification-filter-tabs a{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;background:#f3f5f7;color:#586675;font-size:10px;font-weight:700;text-decoration:none;white-space:nowrap}
.notification-filter-tabs a.is-active{background:#e8f7f8;color:#0d6570}
.notification-filter-tabs a span{font-size:9px}
.notification-page-list{border-top:1px solid #edf0f3}
.notification-page-item{margin:0;border-bottom:1px solid #edf0f3;background:#fff}
.notification-page-item:last-child{border-bottom:0}
.notification-page-item>button{display:grid;width:100%;grid-template-columns:36px 1fr;gap:9px;padding:12px 14px;border:0;background:transparent;color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.notification-page-item.is-unread{background:#f4fbfc}
.notification-page-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#eaf7f8;color:var(--primary);font-size:16px}
.notification-page-copy{display:grid;min-width:0;gap:3px;font-size:11px;line-height:1.4}
.notification-page-copy>span:not(.notification-title-row):not(.notification-meta-row){color:#5d6875}
.notification-page-empty{padding:30px 12px}

@media(max-width:520px){
  .customer-app-main{padding-right:10px;padding-left:10px}
  .customer-brand-mini strong{display:none}
  .customer-app-header .row-1{grid-template-columns:44px 1fr 44px;padding-right:10px;padding-left:10px}
  .customer-app-header .center-title{overflow:hidden;text-overflow:ellipsis}
  .customer-quick-card{padding:12px 11px}
  .customer-quick-card>i{width:38px;height:38px;flex-basis:38px}
  .customer-quota-grid{grid-template-columns:1fr}
}
@media(min-width:768px){
  .customer-app-main{padding-top:18px}
  .customer-bottom-nav{right:50%;left:50%;width:680px;transform:translateX(-50%);border-right:1px solid var(--bd);border-left:1px solid var(--bd);border-radius:18px 18px 0 0}
}

/* =======================================================
   CUSTOMER APP R2 — visual hierarchy and semantic status
   ======================================================= */
.customer-app-body{
  --customer-bg:#f3f7f8;
  --customer-surface:#fff;
  --customer-ink:#15383d;
  --customer-soft-shadow:0 8px 26px rgba(15,69,75,.07);
  background:
    radial-gradient(circle at 8% 0,color-mix(in srgb,var(--primary) 9%,transparent) 0,transparent 28%),
    var(--customer-bg);
}
.customer-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Header pelanggan dibuat mandiri agar tidak terpengaruh breakpoint header admin. */
.customer-app-header{min-height:64px!important;border:0!important;background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 88%,#06424a),var(--primary) 64%,color-mix(in srgb,var(--secondary) 28%,var(--primary)))!important;box-shadow:0 8px 24px rgba(7,83,92,.18)!important}
.customer-app-header .row-1{display:grid!important;width:100%!important;max-width:680px!important;min-height:64px!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:10px!important;margin:0 auto!important;padding:8px 12px!important}
.customer-app-header .row-2{display:none!important}
.customer-brand-mini{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:rgba(255,255,255,.11);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.customer-brand-mini img{width:29px;height:29px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.customer-app-header .center-title{display:grid!important;min-width:0;align-content:center;gap:1px;color:#fff!important;text-align:center!important;line-height:1.15}
.customer-app-header .center-title strong{overflow:hidden;font-size:15px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.customer-app-header .center-title small{color:rgba(255,255,255,.72);font-size:9px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.customer-app-header .right-group{display:flex!important;margin:0!important;justify-content:flex-end!important}
.customer-app-header .notification-center-trigger{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);border-radius:13px;transition:background .2s ease,transform .2s ease}
.customer-app-header .notification-center-trigger:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.customer-app-header .notification-badge{top:-2px;right:-2px;border-color:#087c88}

.customer-app-main{max-width:700px;padding:18px 14px 28px}
.customer-flash{border-radius:14px;box-shadow:0 5px 16px rgba(15,23,42,.04)}
.customer-flash.is-info{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8}

/* Navigasi bawah: aksi utama tetap mudah dijangkau, halaman aktif lebih tegas. */
.customer-bottom-nav{height:72px;padding-top:6px;border-color:#dbe5e8;background:rgba(255,255,255,.96);box-shadow:0 -10px 32px rgba(15,69,75,.09)}
.customer-bottom-nav a{height:54px;gap:4px;border-radius:14px;color:#75828e;font-size:10px;transition:background .18s ease,color .18s ease,transform .18s ease}
.customer-bottom-nav a i{font-size:19px}
.customer-bottom-nav a.is-active:not(.customer-bottom-main){background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary)}
.customer-bottom-nav a.is-active:not(.customer-bottom-main) span{font-weight:850}
.customer-bottom-nav .customer-bottom-main{top:-9px;width:60px;height:60px;border:5px solid var(--customer-bg);background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 84%,#fff),var(--primary));box-shadow:0 9px 24px rgba(7,135,149,.3)}
.customer-bottom-nav .customer-bottom-main:active{transform:scale(.96)}

/* Beranda dan kartu pintas. */
.customer-welcome{position:relative;overflow:hidden;margin-bottom:12px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 16%,#fff);border-radius:20px;background:linear-gradient(135deg,#fff 0,color-mix(in srgb,var(--primary) 8%,#fff) 100%);box-shadow:var(--customer-soft-shadow)}
.customer-welcome::after{position:absolute;right:-28px;bottom:-45px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--primary) 8%,transparent);content:""}
.customer-welcome-copy{position:relative;z-index:1;min-width:0}
.customer-welcome span{margin:0;color:#547178;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.customer-welcome h1{margin:4px 0 5px;color:var(--customer-ink);font-size:22px;letter-spacing:-.02em}
.customer-welcome p{margin:0;color:#647980;font-size:11px;line-height:1.45}
.customer-welcome-icon{position:relative;z-index:1;display:grid!important;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:14px;background:var(--primary);color:#fff!important;font-size:20px!important;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 26%,transparent)}
.customer-quick-grid{gap:12px;margin-bottom:22px}
.customer-quick-card{min-height:96px;border-color:#dfe8eb;border-radius:18px;box-shadow:var(--customer-soft-shadow);transition:transform .18s ease,box-shadow .18s ease}
.customer-quick-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,69,75,.11)}
.customer-quick-card.is-primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,var(--secondary)))}

.customer-section{margin-bottom:22px}
.customer-section-head{margin:0 2px 11px}
.customer-section-head>div{display:grid;min-width:0;gap:2px}
.customer-section-head h2{color:var(--customer-ink);font-size:16px;letter-spacing:-.01em}
.customer-section-head p{margin:0;color:#7a8b94;font-size:10.5px;line-height:1.4}
.customer-section-head>a{flex:0 0 auto;padding:6px 8px;border-radius:9px;background:color-mix(in srgb,var(--primary) 8%,#fff)}

/* Warna status bermakna dan konsisten pada seluruh area pelanggan. */
.customer-status-badge{display:inline-flex;max-width:55%;align-items:center;justify-content:flex-end;gap:4px;padding:5px 8px;border:1px solid transparent;border-radius:999px;font-size:9.5px;font-weight:800;line-height:1.2;text-align:right;white-space:normal}
.customer-status-badge i{flex:0 0 auto;font-size:10px}
.customer-status-badge.is-info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.customer-status-badge.is-progress{border-color:#d8ccff;background:#f3f0ff;color:#6542b5}
.customer-status-badge.is-warning{border-color:#f9d99a;background:#fff8e7;color:#9a5b05}
.customer-status-badge.is-success{border-color:#b8e6c9;background:#ecfdf3;color:#167343}
.customer-status-badge.is-danger{border-color:#fecaca;background:#fff1f2;color:#b42336}
.customer-status-badge.is-neutral{border-color:#dfe4e8;background:#f3f5f7;color:#64717d}
.customer-status-icon.is-info,.customer-order-state-icon.is-info{background:#eff6ff;color:#2563eb}
.customer-status-icon.is-progress,.customer-order-state-icon.is-progress{background:#f3f0ff;color:#6d49bd}
.customer-status-icon.is-warning,.customer-order-state-icon.is-warning{background:#fff7e5;color:#b46b06}
.customer-status-icon.is-success,.customer-order-state-icon.is-success{background:#ecfdf3;color:#16814a}
.customer-status-icon.is-danger,.customer-order-state-icon.is-danger{background:#fff1f2;color:#c2283c}
.customer-status-icon.is-neutral,.customer-order-state-icon.is-neutral{background:#f0f3f5;color:#71808c}

.customer-status-card,.customer-order-row{position:relative;border-color:#dfe7ea;border-radius:17px;background:#fff;box-shadow:var(--customer-soft-shadow);transition:transform .18s ease,box-shadow .18s ease}
.customer-status-card:hover,.customer-order-row:not(.is-static):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,69,75,.1)}
.customer-status-card::before,.customer-order-row::before,.customer-pickup-card::before{position:absolute;top:13px;bottom:13px;left:0;width:3px;border-radius:0 4px 4px 0;background:#cbd5dc;content:""}
.customer-status-card.is-info::before,.customer-order-row.is-info::before,.customer-pickup-card.is-info::before{background:#3b82f6}
.customer-status-card.is-progress::before,.customer-order-row.is-progress::before,.customer-pickup-card.is-progress::before{background:#8062ce}
.customer-status-card.is-warning::before,.customer-order-row.is-warning::before,.customer-pickup-card.is-warning::before{background:#e49a20}
.customer-status-card.is-success::before,.customer-order-row.is-success::before,.customer-pickup-card.is-success::before{background:#2ca66a}
.customer-status-card.is-danger::before,.customer-order-row.is-danger::before,.customer-pickup-card.is-danger::before{background:#e04459}
.customer-status-card.is-neutral::before,.customer-order-row.is-neutral::before,.customer-pickup-card.is-neutral::before{background:#a8b2bb}
.customer-status-card{min-height:80px;padding:14px 15px}
.customer-status-copy .customer-status-badge{width:max-content;max-width:100%}
.customer-order-row{min-height:96px;padding:14px 13px 14px 14px;gap:10px}
.customer-order-state-icon{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:13px;font-size:17px}
.customer-order-main{gap:5px}
.customer-order-top>strong{color:#122f34;font-size:13.5px;letter-spacing:.01em}
.customer-order-main>small{color:#536b72;font-size:11.5px}
.customer-order-meta{gap:5px 11px}
.customer-order-meta small{display:inline-flex;align-items:center;gap:4px;color:#829098;font-size:9.5px}
.customer-order-meta small i{font-size:9px}
.customer-payment-label.is-success{color:#187249}
.customer-payment-label.is-warning{color:#9a5b05}
.customer-payment-label.is-danger{color:#b42336}
.customer-payment-label.is-info{color:#1d5fab}
.customer-payment-label.is-neutral{color:#667480}
.customer-order-row>i:last-child{width:20px;flex:0 0 20px;color:#a3afb7;text-align:right}

.customer-filter-tabs{display:flex;gap:7px;margin:0 0 14px;padding:4px;overflow-x:auto;border:1px solid #dfe7ea;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(15,69,75,.045);scrollbar-width:none}
.customer-filter-tabs::-webkit-scrollbar{display:none}
.customer-filter-tabs a{display:inline-flex;min-height:36px;flex:1;align-items:center;justify-content:center;padding:7px 11px;border-radius:10px;color:#6d7d86;font-size:10.5px;font-weight:750;text-decoration:none;white-space:nowrap}
.customer-filter-tabs a.is-active{background:var(--primary);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 22%,transparent)}

.customer-intro-card{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:16px;border:1px solid color-mix(in srgb,var(--primary) 14%,#fff);border-radius:19px;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--primary) 7%,#fff));box-shadow:var(--customer-soft-shadow)}
.customer-intro-card>span{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border-radius:15px;background:var(--primary);color:#fff;font-size:21px}
.customer-intro-card>div{min-width:0}
.customer-intro-card h1{margin:0 0 3px;color:var(--customer-ink);font-size:16px;line-height:1.25}
.customer-intro-card p{margin:0;color:#667c83;font-size:11px;line-height:1.45}
.customer-intro-card.is-quota>span{background:linear-gradient(145deg,#684bb7,#866ed2)}
.customer-intro-card.is-warning>span{background:linear-gradient(145deg,#d88613,#eda834)}

.customer-form-card,.customer-detail-card,.customer-process-card,.customer-pickup-card,.customer-address-card,.customer-package-card,.customer-promo-card{border-color:#dfe7ea;border-radius:17px;box-shadow:var(--customer-soft-shadow)}
.customer-form-stack{gap:15px}
.customer-form-stack input,.customer-form-stack select,.customer-form-stack textarea,.customer-package-buy-form select{min-height:46px;border-color:#d6e0e4;border-radius:12px;background:#fbfcfd}
.customer-primary-btn,.customer-secondary-btn,.customer-small-btn,.customer-location-btn{min-height:44px;border-radius:12px;transition:transform .16s ease,box-shadow .16s ease}
.customer-primary-btn{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 76%,var(--secondary)));box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 18%,transparent)}
.customer-primary-btn:active,.customer-secondary-btn:active{transform:scale(.98)}
.customer-secondary-btn{border-color:#d6e0e4;background:#fff}
.customer-confirmation-actions{display:grid;gap:9px}

.customer-pickup-card{position:relative;padding-left:17px}
.customer-pickup-top{align-items:center}
.customer-pickup-top small{white-space:nowrap}
.customer-pickup-card p{padding-left:1px}

.customer-order-hero{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;overflow:hidden;padding:17px;border-radius:19px;background:linear-gradient(135deg,var(--primary),#155b66);box-shadow:0 12px 28px rgba(15,69,75,.16)}
.customer-order-hero::after{position:absolute;right:-38px;bottom:-70px;width:145px;height:145px;border-radius:50%;background:rgba(255,255,255,.08);content:""}
.customer-order-hero.is-info{background:linear-gradient(135deg,#2870bd,#398cd0)}
.customer-order-hero.is-progress{background:linear-gradient(135deg,#6246aa,#8064c8)}
.customer-order-hero.is-warning{background:linear-gradient(135deg,#b56c10,#dc952c)}
.customer-order-hero.is-success{background:linear-gradient(135deg,#187547,#28a064)}
.customer-order-hero.is-danger{background:linear-gradient(135deg,#b7283d,#dc455a)}
.customer-order-hero.is-neutral{background:linear-gradient(135deg,#52636e,#75858f)}
.customer-order-hero-icon{position:relative;z-index:1;display:grid;width:40px;height:40px;place-items:center;border-radius:13px;background:rgba(255,255,255,.17);font-size:18px}
.customer-order-hero>div,.customer-hero-badge{position:relative;z-index:1}
.customer-hero-badge{display:inline-flex;max-width:150px;align-items:center;gap:5px;padding:6px 9px;text-align:right;white-space:normal}
.customer-payment-row{align-items:center}
.customer-payment-row .customer-status-badge{max-width:62%}

.customer-quota-summary{justify-content:flex-start;border-color:#d8e6ea;border-radius:17px;background:linear-gradient(135deg,#fff,#eef9fa);box-shadow:var(--customer-soft-shadow)}
.customer-quota-summary-icon{display:grid!important;width:40px;height:40px;flex:0 0 40px;place-items:center;border-radius:13px;background:var(--primary);color:#fff!important;font-size:18px!important}
.customer-quota-summary>span:last-child{margin-left:auto}
.customer-quota-card{border-color:#dce6e9;border-radius:16px;background:linear-gradient(145deg,#fff,#f7fbfc);box-shadow:0 6px 18px rgba(15,69,75,.05)}
.customer-quota-card strong{color:var(--primary)}

.customer-profile-head{padding:16px;border-color:#dce6e9;border-radius:18px;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--primary) 7%,#fff));box-shadow:var(--customer-soft-shadow)}
.customer-profile-avatar{width:50px;height:50px;background:var(--primary);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 20%,transparent)}
.customer-account-links{border-color:#dce6e9;border-radius:17px;box-shadow:var(--customer-soft-shadow)}
.customer-account-links>a,.customer-account-links form>button{min-height:56px}
.customer-address-card{background:linear-gradient(145deg,#fff,#fbfdfd)}

.notification-page-card{border-color:#dce6e9;border-radius:18px;box-shadow:var(--customer-soft-shadow)}
.notification-filter-tabs a{min-height:34px;padding:8px 11px}
.notification-filter-tabs a.is-active{background:var(--primary);color:#fff}
.notification-page-item.is-unread{background:color-mix(in srgb,var(--primary) 6%,#fff)}
.notification-page-icon{border-radius:12px}

.customer-auth-body{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--primary) 15%,transparent),transparent 34%),linear-gradient(180deg,#f3fbfc,#f5f7f9 54%)}
.customer-auth-shell{width:min(100%,450px);padding:28px 18px}
.customer-auth-brand{gap:5px;margin-bottom:20px}
.customer-auth-brand img{width:76px;height:76px}
.customer-auth-brand strong{font-size:18px}
.customer-auth-card{padding:22px;border-color:#dce6e9;border-radius:20px;box-shadow:0 18px 46px rgba(15,69,75,.11)}
.customer-local-otp-box{display:grid;gap:5px;margin:14px 0 18px;padding:14px 16px;border:1px dashed var(--primary);border-radius:13px;background:color-mix(in srgb,var(--primary) 7%,#fff);text-align:center}
.customer-local-otp-box small{color:#587078;font-size:10px}
.customer-local-otp-box strong{color:var(--primary);font-size:28px;letter-spacing:6px}

@media(max-width:520px){
  .customer-app-main{padding:16px 10px 26px}
  .customer-app-header .row-1{padding-right:10px!important;padding-left:10px!important}
  .customer-app-header .notification-dropdown{position:fixed;top:70px;right:10px;left:10px;width:auto;max-height:calc(100dvh - 150px)}
  .customer-quick-card{min-height:90px}
  .customer-order-row{padding-right:10px;padding-left:12px}
  .customer-order-state-icon{width:35px;height:35px;flex-basis:35px}
  .customer-order-hero{grid-template-columns:40px minmax(0,1fr) auto;padding:15px 13px;gap:8px}
  .customer-hero-badge{max-width:118px;font-size:9px}
}
@media(max-width:370px){
  .customer-quick-grid{grid-template-columns:1fr}
  .customer-quick-card{min-height:78px}
  .customer-order-state-icon{display:none}
  .customer-order-row{min-height:90px}
  .customer-status-badge{max-width:50%;font-size:9px}
  .customer-filter-tabs a{padding-right:9px;padding-left:9px}
}
@media(min-width:768px){
  .customer-app-main{padding-top:22px}
  .customer-bottom-nav{width:700px}
}

/* CUSTOMER APP R4 — ticket nota, kuota milik pelanggan, dan ruang aman navigasi */
.customer-app-body{padding-bottom:0}
.customer-app-main{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
.customer-pagination{margin-top:14px;padding-bottom:22px}
.customer-bottom-nav{height:auto;min-height:72px;padding-bottom:max(7px,env(safe-area-inset-bottom))}

.customer-location-feedback{padding:9px 11px;border:1px solid transparent;border-radius:10px;font-size:10.5px;font-weight:650;line-height:1.4}
.customer-location-feedback.is-error{border-color:#fecaca;background:#fff1f2;color:#a82035}
.customer-location-feedback.is-success{border-color:#b8e6c9;background:#ecfdf3;color:#167343}

/* Nota memakai bahasa visual tiket/voucher, dengan warna berdasarkan status. */
.customer-order-ticket{
  --ticket-border:#b9d9f5;
  --ticket-main-a:#f8fcff;
  --ticket-main-b:#edf7ff;
  --ticket-stub-a:#438fd3;
  --ticket-stub-b:#2473bc;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 116px;
  min-height:132px;
  color:var(--customer-ink);
  text-decoration:none;
  filter:drop-shadow(0 10px 16px rgba(15,69,75,.11));
  transition:transform .18s ease,filter .18s ease;
}
.customer-order-ticket:hover{transform:translateY(-2px);filter:drop-shadow(0 14px 20px rgba(15,69,75,.15))}
.customer-order-ticket.is-progress{--ticket-border:#d1c4f4;--ticket-main-a:#fcfbff;--ticket-main-b:#f1edff;--ticket-stub-a:#8068c7;--ticket-stub-b:#654caf}
.customer-order-ticket.is-warning{--ticket-border:#f3d39d;--ticket-main-a:#fffdfa;--ticket-main-b:#fff4df;--ticket-stub-a:#dfa03b;--ticket-stub-b:#bd7617}
.customer-order-ticket.is-success{--ticket-border:#b8e2c8;--ticket-main-a:#fbfffc;--ticket-main-b:#eafaf0;--ticket-stub-a:#36a96d;--ticket-stub-b:#187c49}
.customer-order-ticket.is-danger{--ticket-border:#f3bec6;--ticket-main-a:#fffafb;--ticket-main-b:#fff0f2;--ticket-stub-a:#dc5365;--ticket-stub-b:#b7283d}
.customer-order-ticket.is-neutral{--ticket-border:#d5dde2;--ticket-main-a:#fff;--ticket-main-b:#f0f4f6;--ticket-stub-a:#87969f;--ticket-stub-b:#65757e}
.customer-order-ticket-main{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:15px 16px 14px 20px;
  border:1px solid var(--ticket-border);
  border-right:0;
  border-radius:17px 0 0 17px;
  background:linear-gradient(135deg,var(--ticket-main-a),var(--ticket-main-b));
  -webkit-mask-image:radial-gradient(circle 6px at left 11px,transparent 0 5.5px,#000 6px);
  -webkit-mask-size:100% 22px;
  -webkit-mask-repeat:repeat-y;
  mask-image:radial-gradient(circle 6px at left 11px,transparent 0 5.5px,#000 6px);
  mask-size:100% 22px;
  mask-repeat:repeat-y;
}
.customer-order-ticket-main::before{position:absolute;inset:0 auto 0 0;width:7px;background:radial-gradient(circle 6px at left 11px,transparent 0 5.45px,var(--ticket-border) 5.5px 6.5px,transparent 6.55px) left top/7px 22px repeat-y;content:"";pointer-events:none}
.customer-order-ticket-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;color:color-mix(in srgb,var(--ticket-stub-b) 74%,#314b51);font-size:9px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}
.customer-order-ticket-kicker>span{display:inline-flex;align-items:center;gap:5px}
.customer-order-ticket-kicker>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-order-ticket-service{margin-top:9px;color:#123b41;font-size:16px;font-weight:850;line-height:1.25}
.customer-order-ticket-meta{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:12px}
.customer-order-ticket-meta>span{display:grid;grid-template-columns:15px auto;min-width:105px;align-items:center}
.customer-order-ticket-meta i{grid-row:1/3;color:var(--ticket-stub-b);font-size:12px}
.customer-order-ticket-meta small{color:#74868d;font-size:8.5px;line-height:1.1}
.customer-order-ticket-meta strong{color:#38565c;font-size:10.5px;line-height:1.25}
.customer-order-ticket-meta strong.is-success{color:#187249}.customer-order-ticket-meta strong.is-warning{color:#9a5b05}.customer-order-ticket-meta strong.is-danger{color:#b42336}.customer-order-ticket-meta strong.is-info{color:#1d5fab}.customer-order-ticket-meta strong.is-neutral{color:#667480}
.customer-order-ticket-stub{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px 9px;
  overflow:hidden;
  border:1px solid var(--ticket-stub-b);
  border-left:2px dashed rgba(255,255,255,.75);
  border-radius:0 17px 17px 0;
  background:linear-gradient(145deg,var(--ticket-stub-a),var(--ticket-stub-b));
  color:#fff;
  text-align:center;
  -webkit-mask-image:radial-gradient(circle 6px at right 11px,transparent 0 5.5px,#000 6px);
  -webkit-mask-size:100% 22px;
  -webkit-mask-repeat:repeat-y;
  mask-image:radial-gradient(circle 6px at right 11px,transparent 0 5.5px,#000 6px);
  mask-size:100% 22px;
  mask-repeat:repeat-y;
}
.customer-order-ticket-stub::before{position:absolute;inset:8px;border:1px solid rgba(255,255,255,.2);border-radius:10px;content:"";pointer-events:none}
.customer-order-ticket-stub::after{position:absolute;inset:0 0 0 auto;width:7px;background:radial-gradient(circle 6px at right 11px,transparent 0 5.45px,var(--ticket-stub-b) 5.5px 6.5px,transparent 6.55px) right top/7px 22px repeat-y;content:"";pointer-events:none}
.customer-ticket-status{position:relative;z-index:1;display:inline-flex;max-width:96px;align-items:center;justify-content:center;gap:4px;padding:5px 7px;border-radius:999px;background:#fff;color:var(--ticket-stub-b);font-size:8.5px;font-weight:850;line-height:1.2}
.customer-ticket-icon{position:relative;z-index:1;margin:10px 0 5px;font-size:24px;opacity:.95}
.customer-order-ticket-stub>small{position:relative;z-index:1;font-size:8.5px;opacity:.8}
.customer-ticket-arrow{position:absolute;right:8px;bottom:8px;font-size:10px;opacity:.65}
.customer-order-ticket.has-progress{min-height:182px}
.customer-order-mini-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:auto;padding-top:14px}
.customer-order-mini-stepper>span{position:relative;display:grid;justify-items:center;gap:4px;color:#96a5ab;text-align:center}
.customer-order-mini-stepper>span:not(:last-child)::after{position:absolute;z-index:0;top:6px;left:calc(50% + 7px);width:calc(100% - 14px);height:2px;background:#d9e1e4;content:""}
.customer-order-mini-stepper i{position:relative;z-index:1;display:grid;width:14px;height:14px;place-items:center;border:2px solid #cdd8dc;border-radius:50%;background:var(--ticket-main-a);font-size:8px;font-style:normal}
.customer-order-mini-stepper small{font-size:7.5px;font-weight:700;line-height:1.15}
.customer-order-mini-stepper>span.is-done{color:#187d55}
.customer-order-mini-stepper>span.is-done i{border-color:#219563;background:#219563;color:#fff}
.customer-order-mini-stepper>span.is-done:not(:last-child)::after{background:#73c59a}
.customer-order-mini-stepper>span.is-current{color:#b86100}
.customer-order-mini-stepper>span.is-current i{border-color:#f59e0b;background:#fff4dc;color:#c76b00;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.customer-order-mini-stepper>span.is-attention{color:#b86100}
.customer-order-mini-stepper>span.is-attention i{border-color:#f59e0b;background:#fff4dc;animation:customer-order-payment-pulse 1.15s ease-in-out infinite}
@keyframes customer-order-payment-pulse{0%,100%{box-shadow:0 0 0 2px rgba(245,158,11,.16);transform:scale(1)}50%{box-shadow:0 0 0 6px rgba(245,158,11,.05);transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.customer-order-mini-stepper>span.is-attention i{animation:none}}

/* Halaman utama Kuota hanya memuat kuota pelanggan; katalog dibuka lewat aksi khusus. */
.customer-quota-intro{flex-wrap:wrap}
.customer-quota-intro>div{flex:1}
.customer-buy-quota-btn{min-height:38px;padding:8px 11px;font-size:11px;white-space:nowrap}
.customer-page-action-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.customer-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}
.customer-owned-quota-list{display:grid;gap:9px}
.customer-owned-quota-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px 14px;border:1px solid #dce5e9;border-radius:16px;background:linear-gradient(135deg,#fff,#f5fbfc);box-shadow:var(--customer-soft-shadow)}
.customer-owned-quota-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:13px;background:linear-gradient(145deg,#8068c7,#654caf);color:#fff;font-size:17px}
.customer-owned-quota-copy{display:grid;min-width:0;gap:3px}
.customer-owned-quota-copy strong{overflow:hidden;color:#173d43;font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.customer-owned-quota-copy small{color:#788b92;font-size:9.5px}
.customer-owned-quota-balance{display:grid;justify-items:end;gap:1px;color:#654caf}
.customer-owned-quota-balance strong{font-size:19px;line-height:1}.customer-owned-quota-balance small{font-size:9px;font-weight:750}
.customer-package-unavailable{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;background:#f3f6f7;color:#687a82;font-size:10.5px}
.customer-mutation-balance{display:grid;flex:0 0 auto;justify-items:end;gap:2px}.customer-mutation-balance>strong{font-size:11px}.customer-mutation-balance>small{color:#87949a;font-size:8.5px}

@media(max-width:520px){
  .customer-app-main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .customer-order-ticket{grid-template-columns:minmax(0,1fr) 102px;min-height:132px}
  .customer-order-ticket-main{padding:14px 11px 13px 18px}
  .customer-order-ticket-service{font-size:14px}
  .customer-order-ticket-meta{gap:7px 10px}
  .customer-order-ticket-meta>span{min-width:94px}
  .customer-ticket-status{max-width:85px;font-size:8px}
  .customer-order-ticket.has-progress{min-height:178px}
  .customer-order-mini-stepper small{font-size:7px}
}
@media(max-width:370px){
  .customer-order-ticket{grid-template-columns:minmax(0,1fr) 88px}
  .customer-order-ticket-meta>span{min-width:88px}
  .customer-ticket-status{max-width:73px;padding-right:5px;padding-left:5px}
  .customer-quota-intro{display:grid;grid-template-columns:46px minmax(0,1fr)}
  .customer-buy-quota-btn{grid-column:1/-1;width:100%}
}

/* CUSTOMER APP R5: kuota bersumber sama dengan rincian internal */
.customer-quota-wallet-list{display:grid;gap:12px}
.customer-quota-wallet-card{--quota-card-a:#7354c5;--quota-card-b:#51349d;--quota-card-soft:#f2edff;position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;min-height:132px;overflow:hidden;padding:17px 16px;border:1px solid color-mix(in srgb,var(--quota-card-a) 28%,#dbe5e8);border-radius:22px;background:linear-gradient(135deg,#fff 0%,var(--quota-card-soft) 100%);box-shadow:0 9px 24px rgba(48,69,76,.08);color:#173c43;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.customer-quota-wallet-card::after{position:absolute;right:-34px;bottom:-48px;width:140px;height:140px;border:26px solid color-mix(in srgb,var(--quota-card-a) 10%,transparent);border-radius:50%;content:"";pointer-events:none}
.customer-quota-wallet-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(48,69,76,.12)}
.customer-quota-wallet-card.is-expiring{--quota-card-a:#d79020;--quota-card-b:#a96706;--quota-card-soft:#fff5df}.customer-quota-wallet-card.is-exhausted{--quota-card-a:#87969f;--quota-card-b:#63747c;--quota-card-soft:#f0f4f6}.customer-quota-wallet-card.is-expired{--quota-card-a:#d65d6c;--quota-card-b:#a83445;--quota-card-soft:#fff0f2}
.customer-quota-wallet-orb{position:relative;z-index:1;display:grid;width:50px;height:50px;place-items:center;border-radius:17px;background:linear-gradient(145deg,var(--quota-card-a),var(--quota-card-b));box-shadow:0 8px 18px color-mix(in srgb,var(--quota-card-a) 24%,transparent);color:#fff;font-size:22px}
.customer-quota-wallet-copy{position:relative;z-index:1;display:flex;min-width:0;flex-direction:column;align-items:flex-start}.customer-quota-wallet-kicker{display:flex;width:100%;align-items:center;gap:6px;margin-bottom:7px}.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--quota-card-a) 11%,#fff);color:var(--quota-card-b);font-size:8px;font-style:normal;font-weight:800;letter-spacing:.025em;text-transform:uppercase}.customer-quota-wallet-kicker em{background:var(--quota-card-a);color:#fff}
.customer-quota-wallet-copy>strong{max-width:100%;overflow:hidden;color:#153d44;font-size:15px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.customer-quota-wallet-copy>small{margin-top:2px;color:#6d8087;font-size:10px}.customer-quota-wallet-expiry{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px;color:#61777e;font-size:9px}.customer-quota-wallet-expiry i{color:var(--quota-card-b)}
.customer-quota-wallet-balance{position:relative;z-index:1;display:grid;min-width:68px;align-content:center;justify-items:end;color:var(--quota-card-b)}.customer-quota-wallet-balance strong{font-size:25px;font-weight:900;line-height:1}.customer-quota-wallet-balance small{margin-top:3px;font-size:10px;font-weight:800}.customer-quota-wallet-balance i{margin-top:13px;font-size:14px}
.customer-quota-inactive-section{padding-top:0}.customer-quota-inactive-disclosure{overflow:hidden;border:1px solid #dce5e8;border-radius:18px;background:#fff;box-shadow:0 7px 20px rgba(48,69,76,.06)}.customer-quota-inactive-disclosure>summary{display:flex;min-height:70px;cursor:pointer;list-style:none;align-items:center;justify-content:space-between;padding:13px 15px;color:#244c53}.customer-quota-inactive-disclosure>summary::-webkit-details-marker{display:none}.customer-quota-inactive-disclosure>summary>span{display:flex;align-items:center;gap:11px}.customer-quota-inactive-disclosure>summary>span>i{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:#eef3f5;color:#71828a;font-size:17px}.customer-quota-inactive-disclosure>summary>span>span{display:flex;flex-direction:column}.customer-quota-inactive-disclosure>summary strong{font-size:13px;font-weight:850}.customer-quota-inactive-disclosure>summary small{margin-top:2px;color:#7c8c92;font-size:9px}.customer-quota-inactive-disclosure>summary>em{display:grid;min-width:28px;height:28px;place-items:center;border-radius:999px;background:#edf2f4;color:#65767d;font-size:10px;font-style:normal;font-weight:850}.customer-quota-inactive-disclosure[open]>summary{border-bottom:1px solid #e3eaed}.customer-quota-inactive-disclosure .customer-quota-wallet-list{padding:12px}.customer-quota-wallet-list.is-inactive .customer-quota-wallet-card{min-height:122px;box-shadow:none;filter:saturate(.78)}
.customer-quota-detail-balance{--quota-detail-a:#7354c5;--quota-detail-b:#51349d;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;overflow:hidden;padding:19px 17px 45px;border-radius:22px;background:linear-gradient(135deg,var(--quota-detail-a),var(--quota-detail-b));box-shadow:0 12px 28px color-mix(in srgb,var(--quota-detail-a) 26%,transparent);color:#fff}.customer-quota-detail-balance.is-expired{--quota-detail-a:#d65d6c;--quota-detail-b:#a83445}.customer-quota-detail-balance.is-exhausted{--quota-detail-a:#8999a1;--quota-detail-b:#607078}.customer-quota-detail-balance::after{position:absolute;right:-36px;bottom:-55px;width:145px;height:145px;border:26px solid rgba(255,255,255,.1);border-radius:50%;content:""}
.customer-quota-detail-icon{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:17px;background:rgba(255,255,255,.15);font-size:23px}.customer-quota-detail-balance>div{min-width:0}.customer-quota-detail-balance>div small{font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.8}.customer-quota-detail-balance h1{margin:4px 0 0;overflow:hidden;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.customer-quota-detail-balance p{margin:2px 0 0;font-size:10px;opacity:.82}.customer-quota-detail-amount{display:grid;align-content:center;justify-items:end}.customer-quota-detail-amount strong{font-size:27px;font-weight:900;line-height:1}.customer-quota-detail-amount small{margin-top:4px;font-size:10px;font-weight:800}.customer-quota-detail-expiry{position:absolute;right:17px;bottom:15px;left:81px;display:flex;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.17);padding-top:9px;font-size:9px;opacity:.9}
.customer-quota-history-wrap{overflow:hidden;border:1px solid #dae4e7;border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(48,69,76,.06)}.customer-quota-history-grid{width:100%;border-collapse:collapse;table-layout:fixed}.customer-quota-history-grid th{padding:11px 7px;background:#087f8c;color:#fff;font-size:9px;font-weight:850;text-align:right}.customer-quota-history-grid th:first-child{width:43%;padding-left:12px;text-align:left}.customer-quota-history-grid th:nth-child(2),.customer-quota-history-grid th:nth-child(3){width:18%}.customer-quota-history-grid th:last-child{width:21%;padding-right:11px}.customer-quota-history-grid td{padding:12px 7px;border-bottom:1px solid #e7edef;color:#4a6067;font-size:9px;font-weight:400;line-height:1.25;text-align:right;vertical-align:middle}.customer-quota-history-grid tr:last-child td{border-bottom:0}.customer-quota-history-grid td:first-child{padding-left:12px;text-align:left}.customer-quota-history-grid td:last-child{padding-right:11px}.customer-quota-history-grid td:first-child>a,.customer-quota-history-grid td:first-child>span{display:block;overflow:hidden;color:#087f8c;font-weight:400;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.customer-quota-history-grid td:first-child>a{text-decoration:underline;text-decoration-color:#a7d4d8;text-underline-offset:2px}.customer-quota-history-grid td small{display:block;margin-top:3px;color:#849299;font-size:7.5px;font-weight:400;white-space:nowrap}.customer-quota-history-grid td>strong{color:#173e45;font-size:9.5px;font-weight:900;white-space:nowrap}.customer-quota-history-qty{font-weight:400;white-space:nowrap}.customer-quota-history-qty.is-in{color:#16824d}.customer-quota-history-qty.is-out{color:#cf3e50}.customer-quota-history-empty{color:#a5b0b4}.customer-quota-history-empty-row{text-align:center!important;color:#7e8d92!important}
.customer-quota-purchase-form{display:grid;gap:12px;margin-top:13px}.customer-purchase-panel{padding:15px;border:1px solid #dce6e8;border-radius:19px;background:#fff;box-shadow:0 7px 20px rgba(48,69,76,.06)}.customer-purchase-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.customer-purchase-panel-head>span{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:#ecf8f9;color:#087f8c;font-size:17px}.customer-purchase-panel-head h2{margin:0;color:#173e45;font-size:14px}.customer-purchase-panel-head p{margin:2px 0 0;color:#7b8c92;font-size:9px}
.customer-quota-picker{display:grid;grid-template-columns:minmax(0,1fr) 74px auto;gap:8px;align-items:end}.customer-quota-picker label,.customer-quota-payment-select,.customer-quota-promo-field{display:grid;gap:6px;color:#31535a;font-size:10px;font-weight:750}.customer-quota-picker select,.customer-quota-picker input,.customer-quota-payment-select select,.customer-quota-promo-field select{width:100%;height:42px;border:1px solid #cad9dd;border-radius:11px;background:#fff;padding:0 10px;color:#1d4047;font:inherit;outline:none}.customer-quota-picker select:focus,.customer-quota-picker input:focus,.customer-quota-payment-select select:focus,.customer-quota-promo-field select:focus{border-color:#0793a0;box-shadow:0 0 0 3px rgba(7,147,160,.1)}.customer-quota-add-package{height:42px;white-space:nowrap}
.customer-quota-order-wrap{overflow:hidden;border:1px solid #e0e8ea;border-radius:13px}.customer-quota-order-table{width:100%;border-collapse:collapse;table-layout:fixed}.customer-quota-order-table th{padding:9px 7px;background:#f0f6f7;color:#597077;font-size:8px;font-weight:850;text-align:left}.customer-quota-order-table th:first-child{width:44%;padding-left:10px}.customer-quota-order-table th:nth-child(2){width:18%}.customer-quota-order-table th:nth-child(3){width:29%;text-align:right}.customer-quota-order-table th:last-child{width:9%}.customer-quota-order-table td{padding:10px 7px;border-top:1px solid #e5ecee;color:#34545b;font-size:9px;vertical-align:middle}.customer-quota-order-table td:first-child{padding-left:10px}.customer-quota-order-table td:nth-child(3){text-align:right}.customer-quota-order-table td>span{display:block;color:#173f46;font-size:10px;font-weight:750}.customer-quota-order-table td>small{display:block;margin-top:2px;color:#849399;font-size:7px;line-height:1.2}.customer-quota-order-table input{width:48px;height:31px;border:1px solid #d3dfe2;border-radius:8px;padding:0 5px;text-align:center}.customer-quota-order-table button{border:0;background:transparent;color:#cf3e50;cursor:pointer;font-size:14px}.customer-quota-order-empty{height:58px;text-align:center!important;color:#85949a!important}
.customer-quota-bill-lines{display:grid;gap:9px}.customer-quota-bill-lines>div{display:flex;align-items:center;justify-content:space-between;color:#61777e;font-size:10px}.customer-quota-bill-lines strong{color:#23474e;font-size:11px;font-weight:800}.customer-quota-bill-lines strong.is-discount{color:#16824d}.customer-quota-bill-lines .is-total{margin-top:3px;border-top:1px dashed #cad8dc;padding-top:12px;color:#173f46;font-size:12px;font-weight:800}.customer-quota-bill-lines .is-total strong{color:#087f8c;font-size:17px;font-weight:900}.customer-quota-promo-field{margin-top:13px}.customer-quota-payment-fixed{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #bfe0d0;border-radius:13px;background:#f0fbf5;padding:11px;color:#177548}.customer-quota-payment-fixed>i:first-child{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:#dff5e8;font-size:17px}.customer-quota-payment-fixed>span{display:flex;flex-direction:column}.customer-quota-payment-fixed strong{font-size:11px}.customer-quota-payment-fixed small{margin-top:2px;color:#648175;font-size:8px}.customer-quota-payment-fixed>i:last-child{font-size:16px}.customer-quota-submit{width:100%;min-height:48px;justify-content:center}.customer-quota-submit:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.52}
.customer-quota-legacy-detail{display:grid;gap:0;margin-top:13px;overflow:hidden;border:1px solid #dbe5e8;border-radius:17px;background:#fff}.customer-quota-legacy-detail>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;border-bottom:1px solid #e8eef0;color:#718188;font-size:10px}.customer-quota-legacy-detail>div:last-child{border-bottom:0}.customer-quota-legacy-detail strong{color:#24474e;font-size:10px;text-align:right}
@media(max-width:430px){.customer-quota-wallet-card{grid-template-columns:44px minmax(0,1fr) 61px;gap:10px;min-height:127px;padding:15px 12px}.customer-quota-wallet-orb{width:44px;height:44px;border-radius:15px;font-size:19px}.customer-quota-wallet-copy>strong{font-size:14px}.customer-quota-wallet-balance{min-width:58px}.customer-quota-wallet-balance strong{font-size:22px}.customer-quota-picker{grid-template-columns:minmax(0,1fr) 64px}.customer-quota-add-package{grid-column:1/-1;width:100%;justify-content:center}.customer-purchase-panel{padding:13px 11px}.customer-quota-order-table th:first-child{width:40%}.customer-quota-order-table th:nth-child(2){width:19%}.customer-quota-order-table th:nth-child(3){width:31%}.customer-quota-order-table th:last-child{width:10%}}
@media(max-width:360px){.customer-quota-history-grid th,.customer-quota-history-grid td{padding-right:4px;padding-left:4px;font-size:8px}.customer-quota-history-grid th:first-child,.customer-quota-history-grid td:first-child{padding-left:8px}.customer-quota-history-grid th:last-child,.customer-quota-history-grid td:last-child{padding-right:7px}.customer-quota-history-grid td>strong{font-size:8.5px}.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:3px 5px;font-size:7px}.customer-quota-wallet-expiry{font-size:8px}}

/* MASTER LAYANAN PAKET: tema tetap dan pemilih ikon SVG Tabler */
:is(.package-theme-swatch,.package-theme-preview).is-mint-teal,.customer-quota-wallet-card.theme-mint-teal{--package-theme-start:#e8f7f5;--package-theme-end:#cdefea;--package-theme-primary:#078c8c}
:is(.package-theme-swatch,.package-theme-preview).is-ice-blue,.customer-quota-wallet-card.theme-ice-blue{--package-theme-start:#eef7fb;--package-theme-end:#d9edf5;--package-theme-primary:#287a9b}
:is(.package-theme-swatch,.package-theme-preview).is-peach-coral,.customer-quota-wallet-card.theme-peach-coral{--package-theme-start:#fff1e8;--package-theme-end:#ffdcc9;--package-theme-primary:#d96542}
:is(.package-theme-swatch,.package-theme-preview).is-lavender,.customer-quota-wallet-card.theme-lavender{--package-theme-start:#f4eeff;--package-theme-end:#e4d6fa;--package-theme-primary:#6c43c0}
:is(.package-theme-swatch,.package-theme-preview).is-rose,.customer-quota-wallet-card.theme-rose{--package-theme-start:#fff0f4;--package-theme-end:#fad8e2;--package-theme-primary:#c94e72}
:is(.package-theme-swatch,.package-theme-preview).is-sand-gold,.customer-quota-wallet-card.theme-sand-gold{--package-theme-start:#fff8e7;--package-theme-end:#f5e8c0;--package-theme-primary:#a77a20}
:is(.package-theme-swatch,.package-theme-preview).is-sage-green,.customer-quota-wallet-card.theme-sage-green{--package-theme-start:#eff7ee;--package-theme-end:#dcecd9;--package-theme-primary:#4f7e59}
:is(.package-theme-swatch,.package-theme-preview).is-slate-indigo,.customer-quota-wallet-card.theme-slate-indigo{--package-theme-start:#eef0f8;--package-theme-end:#dce0f0;--package-theme-primary:#4a5f9e}
.package-service-svg{display:block;width:1em;height:1em}
.package-service-table th:nth-child(1){min-width:210px}.package-service-table th:nth-child(3){min-width:190px}.package-service-table th:nth-child(4){min-width:190px}.package-service-theme-display,.package-service-icon-display{display:inline-flex;align-items:center;gap:10px}.package-service-theme-display>span:last-child{display:flex;flex-direction:column}.package-service-theme-display strong{font-size:12px}.package-service-theme-display small{margin-top:2px;color:#78898f;font-size:9px}.package-theme-swatch{display:block;flex:0 0 48px;width:48px;height:30px;border:1px solid color-mix(in srgb,var(--package-theme-primary) 28%,#fff);border-radius:9px;background:linear-gradient(135deg,var(--package-theme-start),var(--package-theme-end));box-shadow:inset 0 0 0 1px rgba(255,255,255,.52)}.package-service-icon-display>.package-service-svg{display:grid;width:38px;height:38px;box-sizing:border-box;padding:7px;border-radius:11px;background:#eef7f8;color:#087f8c}.package-service-icon-display>span{font-size:11px}.package-service-mobile-card{display:grid;gap:13px}.package-service-mobile-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}.package-service-mobile-head>.package-service-icon-display>.package-service-svg{width:42px;height:42px}.package-service-mobile-head>span:nth-child(2){display:flex;min-width:0;flex-direction:column}.package-service-mobile-head>span:nth-child(2)>small{margin-top:2px;color:#75868c;font-size:10px}.package-service-mobile-theme{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;padding-top:11px;border-top:1px solid #e5edef;color:#31545b;font-size:11px}.package-service-mobile-theme small{color:#788a90;text-align:right}.package-service-modal{max-width:900px}.package-service-choice-section{margin:18px 0 0;border:0;padding:0}.package-service-choice-section>legend{color:#087f8c;font-size:13px;font-weight:850}.package-service-choice-section>p{margin:3px 0 10px;color:#76898f;font-size:10px}.package-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.package-theme-option,.package-icon-option{position:relative;cursor:pointer}.package-theme-option>input,.package-icon-option>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.package-theme-preview{position:relative;display:grid;min-height:74px;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 9px;align-content:center;border:2px solid transparent;border-radius:13px;background:linear-gradient(135deg,var(--package-theme-start),var(--package-theme-end));padding:11px;color:var(--package-theme-primary);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.package-theme-preview>span{grid-row:1/3;width:30px;height:30px;border:7px solid color-mix(in srgb,var(--package-theme-primary) 18%,#fff);border-radius:50%;background:var(--package-theme-primary)}.package-theme-preview strong{align-self:end;font-size:10px}.package-theme-preview small{align-self:start;font-size:8px;opacity:.78}.package-theme-preview>i{position:absolute;top:6px;right:7px;display:none;width:20px;height:20px;place-items:center;border-radius:999px;background:var(--package-theme-primary);color:#fff;font-size:10px}.package-theme-option>input:checked+.package-theme-preview{border-color:var(--package-theme-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--package-theme-primary) 12%,transparent)}.package-theme-option>input:checked+.package-theme-preview>i{display:grid}.package-theme-option:hover .package-theme-preview{transform:translateY(-1px)}.package-icon-search{position:relative;margin-bottom:10px}.package-icon-search>i{position:absolute;top:50%;left:13px;z-index:1;color:#789097;transform:translateY(-50%)}.package-icon-search>.input{padding-left:38px}.package-icon-grid{display:grid;max-height:310px;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:auto;padding:3px}.package-icon-option>span{position:relative;display:grid;min-height:88px;place-items:center;align-content:center;gap:7px;border:1px solid #d9e4e7;border-radius:12px;background:#fff;padding:9px 6px;color:#4a6269;text-align:center;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.package-icon-option .package-service-svg{width:27px;height:27px;color:#087f8c}.package-icon-option small{min-height:23px;font-size:8px;line-height:1.25}.package-icon-option i{position:absolute;top:6px;right:6px;display:none;color:#087f8c;font-size:13px}.package-icon-option>input:checked+span{border-color:#07919d;background:#eefafa;box-shadow:0 0 0 2px rgba(7,145,157,.12)}.package-icon-option>input:checked+span i{display:block}.package-icon-option:hover>span{border-color:#8bcbd1}.package-icon-empty{padding:14px;border:1px dashed #d4e0e3;border-radius:11px;color:#7b8b91!important;text-align:center}

/* CUSTOMER APP R7: kartu kuota berbentuk tag harga per layanan */
.customer-quota-wallet-list{gap:19px;padding-left:14px}.customer-quota-wallet-card{--package-theme-start:#e8f7f5;--package-theme-end:#cdefea;--package-theme-primary:#078c8c;position:relative;display:grid;min-height:150px;grid-template-columns:minmax(0,1fr) 84px;gap:10px;overflow:visible;border:0;border-radius:0;background:transparent;padding:24px 22px 24px 82px;box-shadow:none;color:#173c43;text-decoration:none;transition:transform .18s ease,filter .18s ease}.customer-quota-wallet-card::after{content:none}.customer-quota-wallet-card:hover{box-shadow:none;transform:translateY(-2px)}.customer-quota-tag-layer,.customer-quota-tag-surface{position:absolute;inset:0;clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%);border-radius:19px 19px 19px 15px}.customer-quota-tag-layer{top:8px;background:color-mix(in srgb,var(--package-theme-primary) 28%,var(--package-theme-end));box-shadow:0 13px 25px rgba(40,66,72,.18)}.customer-quota-tag-surface{z-index:1;overflow:hidden;background:linear-gradient(135deg,var(--package-theme-start),var(--package-theme-end))}.customer-quota-tag-decoration{position:absolute;z-index:1;top:-37px;right:-25px;width:136px;height:136px;color:rgba(255,255,255,.82);filter:drop-shadow(0 3px 2px rgba(30,65,70,.12));stroke-width:2.15;transform:rotate(20deg)}.customer-quota-tag-stitch{position:absolute;z-index:2;inset:7px 7px 10px 7px;width:calc(100% - 14px);height:calc(100% - 17px);overflow:visible;color:color-mix(in srgb,var(--package-theme-primary) 58%,transparent);pointer-events:none}.customer-quota-tag-stitch path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.customer-quota-tag-rope{position:absolute;z-index:5;top:calc(50% - 6px);left:-13px;width:54px;height:9px;border-radius:999px;background:repeating-linear-gradient(-22deg,#d1ad75 0 3px,#f0d4a5 3px 5px,#a9814f 5px 7px);box-shadow:0 2px 3px rgba(76,55,31,.24);transform:rotate(-7deg);transform-origin:right center}.customer-quota-tag-rope::after{position:absolute;top:5px;left:-4px;width:51px;height:8px;border-radius:999px;background:repeating-linear-gradient(22deg,#c79f68 0 3px,#efd2a0 3px 5px,#9c7446 5px 7px);box-shadow:0 2px 3px rgba(76,55,31,.18);content:"";transform:rotate(13deg);transform-origin:right center}.customer-quota-tag-eyelet{position:absolute;z-index:6;top:50%;left:31px;width:28px;height:28px;border:1px solid #7b858a;border-radius:50%;background:radial-gradient(circle at 50% 50%,#5a6468 0 24%,#dce2e4 25% 38%,#858e92 43%,#f8fbfc 56%,#9aa3a7 72%,#eef2f3 84%,#717b7f 100%);box-shadow:0 2px 5px rgba(31,47,53,.34),inset 2px 2px 2px rgba(255,255,255,.9);transform:translateY(-50%)}.customer-quota-wallet-copy,.customer-quota-wallet-balance{z-index:4}.customer-quota-wallet-copy{position:relative;display:flex;min-width:0;flex-direction:column;align-items:flex-start}.customer-quota-wallet-kicker{display:flex;width:100%;align-items:center;gap:6px;margin-bottom:8px}.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--package-theme-primary) 13%,#fff);color:var(--package-theme-primary);font-size:8px;font-style:normal;font-weight:850;letter-spacing:.03em;text-transform:uppercase}.customer-quota-wallet-kicker em{background:var(--package-theme-primary);color:#fff}.customer-quota-wallet-card.is-expiring .customer-quota-wallet-kicker em{background:#d98616}.customer-quota-wallet-copy>strong{display:-webkit-box;max-width:100%;overflow:hidden;color:var(--package-theme-primary);font-size:17px;font-weight:900;line-height:1.18;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.customer-quota-wallet-copy>small{margin-top:3px;color:#647a80;font-size:9px}.customer-quota-wallet-expiry{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px;color:#4c686f;font-size:9px}.customer-quota-wallet-expiry i{color:var(--package-theme-primary)}.customer-quota-wallet-balance{position:relative;display:grid;min-width:68px;align-content:center;justify-items:end;color:var(--package-theme-primary);text-align:right}.customer-quota-wallet-balance::before{position:absolute;top:17%;bottom:17%;left:-9px;border-left:1px dashed color-mix(in srgb,var(--package-theme-primary) 48%,transparent);content:""}.customer-quota-wallet-balance strong{font-size:28px;font-weight:950;line-height:.95}.customer-quota-wallet-balance small{margin-top:4px;font-size:10px;font-weight:850}.customer-quota-wallet-balance i{margin-top:14px;font-size:15px}.customer-quota-wallet-card.is-expired,.customer-quota-wallet-card.is-exhausted{opacity:.78;filter:saturate(.62)}.customer-quota-wallet-list.is-inactive .customer-quota-wallet-card{min-height:136px;box-shadow:none}.customer-quota-inactive-disclosure .customer-quota-wallet-list{padding:17px 12px 17px 26px}
@media(max-width:720px){.package-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.package-icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:430px){.customer-quota-wallet-list{gap:17px;padding-left:12px}.customer-quota-wallet-card{min-height:143px;grid-template-columns:minmax(0,1fr) 70px;gap:7px;padding:21px 15px 21px 70px}.customer-quota-tag-layer,.customer-quota-tag-surface{clip-path:polygon(9% 0,100% 0,100% 100%,9% 100%,0 50%);border-radius:17px 17px 17px 13px}.customer-quota-tag-decoration{top:-29px;right:-25px;width:112px;height:112px}.customer-quota-tag-eyelet{left:26px;width:25px;height:25px}.customer-quota-tag-rope{left:-12px;width:47px}.customer-quota-wallet-copy>strong{font-size:14px}.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:3px 6px;font-size:7px}.customer-quota-wallet-balance{min-width:58px}.customer-quota-wallet-balance::before{left:-6px}.customer-quota-wallet-balance strong{font-size:23px}.customer-quota-inactive-disclosure .customer-quota-wallet-list{padding-left:24px}.package-theme-preview{min-height:68px}.package-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.package-icon-option>span{min-height:82px}.package-service-mobile-theme{grid-template-columns:44px minmax(0,1fr)}.package-service-mobile-theme small{grid-column:1/-1;text-align:left}}
@media(max-width:360px){.customer-quota-wallet-card{min-height:146px;grid-template-columns:minmax(0,1fr) 61px;padding-right:12px;padding-left:63px}.customer-quota-tag-eyelet{left:23px;width:23px;height:23px}.customer-quota-wallet-copy>strong{font-size:13px}.customer-quota-wallet-expiry{font-size:7.5px}.customer-quota-wallet-balance strong{font-size:20px}.package-theme-grid{grid-template-columns:1fr}.package-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CUSTOMER APP R6: onboarding dan pemilih alamat responsif */
.customer-quota-add-package{border-color:#087f8c;background:linear-gradient(135deg,#0997a4,#087684);box-shadow:0 6px 14px rgba(8,127,140,.2);color:#fff}
.customer-quota-add-package:hover{border-color:#076d78;background:linear-gradient(135deg,#078b97,#076d78)}
.customer-address-picker{position:relative;display:grid;min-width:0;gap:6px}.customer-address-picker>label{color:#31535a;font-size:11px;font-weight:750}.customer-address-picker-trigger{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #cad9dd;border-radius:12px;background:#fff;padding:10px 12px;color:#173f46;font:inherit;text-align:left;cursor:pointer}.customer-address-picker-trigger:focus,.customer-address-picker.is-open .customer-address-picker-trigger{border-color:#0793a0;box-shadow:0 0 0 3px rgba(7,147,160,.1);outline:none}.customer-address-picker-trigger>span{display:grid;min-width:0;gap:3px}.customer-address-picker-trigger strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.customer-address-picker-trigger small{overflow:hidden;color:#75878d;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.customer-address-picker-trigger>i{color:#087f8c;font-size:13px;transition:transform .16s ease}.customer-address-picker.is-open .customer-address-picker-trigger>i{transform:rotate(180deg)}
.customer-address-picker-menu{position:absolute;z-index:35;top:calc(100% + 7px);right:0;left:0;max-width:100%;overflow:hidden;border:1px solid #cbdadd;border-radius:14px;background:#fff;box-shadow:0 16px 36px rgba(23,62,69,.18)}.customer-address-picker-list{display:grid;max-height:min(48vh,330px);overflow-y:auto;overscroll-behavior:contain}.customer-address-picker-list>button{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:0;border-bottom:1px solid #e7edef;background:#fff;padding:11px 12px;color:#23474e;font:inherit;text-align:left;cursor:pointer}.customer-address-picker-list>button:hover,.customer-address-picker-list>button[aria-selected=true]{background:#eff9fa}.customer-address-picker-list>button>span{display:grid;min-width:0;gap:3px}.customer-address-picker-list strong{display:flex;align-items:center;gap:6px;font-size:11px}.customer-address-picker-list strong em{border-radius:999px;background:#daf3f0;padding:2px 6px;color:#087b72;font-size:7px;font-style:normal}.customer-address-picker-list small{color:#687c83;font-size:8.5px;line-height:1.4;overflow-wrap:anywhere}.customer-address-picker-list small.is-warning{color:#a86115}.customer-address-picker-list>button>i{color:#0b8f99;opacity:0}.customer-address-picker-list>button[aria-selected=true]>i{opacity:1}.customer-address-picker-add{display:flex;min-height:43px;align-items:center;justify-content:center;gap:7px;background:#087f8c;color:#fff;font-size:10px;font-weight:800;text-decoration:none}.customer-address-picker-add:hover{background:#076d78}
.customer-profile-completion{text-align:center}.customer-profile-completion-icon{display:grid;width:54px;height:54px;margin:0 auto 12px;place-items:center;border-radius:18px;background:linear-gradient(135deg,#0a99a4,#087684);box-shadow:0 9px 20px rgba(8,127,140,.22);color:#fff;font-size:24px}.customer-profile-completion .customer-form-stack{text-align:left}.customer-profile-completion .customer-form-stack small{display:block;margin-top:5px;color:#72868d;font-size:9px}.customer-profile-completion-logout{margin-top:14px;text-align:center}
@media(max-width:430px){.customer-quota-picker{grid-template-columns:minmax(0,1fr) 58px 88px;gap:6px}.customer-quota-add-package{grid-column:auto;width:100%;padding-right:8px;padding-left:8px;font-size:11px}.customer-quota-picker select,.customer-quota-picker input{padding-right:7px;padding-left:7px}}
@media(max-width:350px){.customer-quota-picker{grid-template-columns:minmax(0,1fr) 54px 82px}.customer-quota-add-package{gap:4px;font-size:10px}}

/* CUSTOMER APP R7: GPS wajib pada alamat baru */
.customer-address-gps-state{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #cfdde0;border-radius:14px;background:#f7fafb;padding:11px 12px}.customer-address-gps-state>span{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#e6f3f5;color:#087f8c;font-size:18px}.customer-address-gps-state>div{display:grid;min-width:0;gap:3px}.customer-address-gps-state strong{color:#21474e;font-size:11px}.customer-address-gps-state small{color:#6e8188;font-size:8.5px;line-height:1.35}.customer-address-gps-state>button{display:inline-flex;min-height:34px;align-items:center;justify-content:center;gap:5px;border:1px solid currentColor;border-radius:10px;background:#fff;padding:7px 9px;color:#ad3e4e;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.customer-address-gps-state.is-reading>span i{animation:customer-gps-pulse 1.25s ease-in-out infinite}.customer-address-gps-state.is-ready{border-color:#b9dfcc;background:#f0faf5}.customer-address-gps-state.is-ready>span{background:#daf3e6;color:#16824d}.customer-address-gps-state.is-error{border-color:#efc4ca;background:#fff5f6}.customer-address-gps-state.is-error>span{background:#fbe2e6;color:#c93f53}.customer-address-gps-state.is-error strong{color:#a72f42}.customer-form-actions .customer-primary-btn:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.52}@keyframes customer-gps-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.55}}
@media(max-width:420px){.customer-address-gps-state{grid-template-columns:38px minmax(0,1fr)}.customer-address-gps-state>span{width:38px;height:38px}.customer-address-gps-state>button{grid-column:1/-1;width:100%}}

/* CUSTOMER APP R19: original rope asset split into front and back layers */
.customer-quota-wallet-list{
  gap:30px;
  overflow:visible;
  padding:7px 2px 13px 28px;
}
.customer-quota-wallet-card{
  --package-theme-start:#e8f7f5;
  --package-theme-end:#cdefea;
  --package-theme-primary:#078c8c;
  --quota-eyelet-x:30px;
  --quota-eyelet-hole:10px;
  position:relative;
  isolation:isolate;
  display:grid;
  min-height:clamp(164px,42.5vw,195px);
  grid-template-columns:minmax(0,1fr) clamp(110px,40.3%,134px);
  gap:clamp(12px,3.5vw,20px);
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  padding:clamp(30px,7.2vw,37px) clamp(20px,5.4vw,28px) clamp(29px,7vw,36px) clamp(68px,15vw,72px);
  box-shadow:none;
  color:#173c43;
  text-decoration:none;
  transition:transform .18s ease,filter .18s ease;
}
.customer-quota-wallet-card::after{content:none}
.customer-quota-wallet-card:hover{box-shadow:none;filter:brightness(1.012);transform:translateY(-2px)}
.customer-quota-wallet-card:focus-visible{outline:3px solid color-mix(in srgb,var(--package-theme-primary) 30%,transparent);outline-offset:4px}
.customer-quota-tag-layer,.customer-quota-tag-surface{
  position:absolute;
  clip-path:polygon(16% 0,100% 0,100% 100%,16% 100%,0 73%,0 29%);
  border-radius:15px 15px 15px 12px;
  -webkit-mask-image:radial-gradient(circle at var(--quota-eyelet-x) 50%,transparent 0 calc(var(--quota-eyelet-hole) - 1px),#000 var(--quota-eyelet-hole));
  mask-image:radial-gradient(circle at var(--quota-eyelet-x) 50%,transparent 0 calc(var(--quota-eyelet-hole) - 1px),#000 var(--quota-eyelet-hole));
}
.customer-quota-tag-layer{
  z-index:0;
  inset:2px 0 -2px;
  background:color-mix(in srgb,var(--package-theme-end) 62%,#edf3f4);
  filter:drop-shadow(0 9px 14px color-mix(in srgb,var(--package-theme-end) 50%,rgba(46,75,79,.08)));
  -webkit-mask-image:radial-gradient(circle at var(--quota-eyelet-x) calc(50% - 2px),transparent 0 calc(var(--quota-eyelet-hole) - 1px),#000 var(--quota-eyelet-hole));
  mask-image:radial-gradient(circle at var(--quota-eyelet-x) calc(50% - 2px),transparent 0 calc(var(--quota-eyelet-hole) - 1px),#000 var(--quota-eyelet-hole));
}
.customer-quota-tag-layer::after{content:none}
.customer-quota-tag-surface{
  z-index:1;
  inset:0;
  overflow:hidden;
  background:linear-gradient(108deg,color-mix(in srgb,var(--package-theme-start) 66%,#fff) 0%,color-mix(in srgb,var(--package-theme-start) 90%,#fff) 47%,var(--package-theme-end) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--package-theme-primary) 15%,rgba(255,255,255,.76)),inset 0 1px 0 rgba(255,255,255,.92);
}
.customer-quota-tag-surface::before{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.21) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(22deg,color-mix(in srgb,var(--package-theme-primary) 4%,transparent) 0 1px,transparent 1px 7px),
    radial-gradient(circle at 24% 21%,rgba(255,255,255,.5),transparent 38%);
  content:"";
  opacity:.6;
  pointer-events:none;
}
.customer-quota-tag-surface::after{
  position:absolute;
  z-index:2;
  top:-48px;
  right:-58px;
  width:272px;
  height:190px;
  background:repeating-radial-gradient(ellipse at 100% 0,transparent 0 21px,color-mix(in srgb,var(--package-theme-primary) 11%,transparent) 22px 23px,transparent 24px 39px);
  content:"";
  opacity:.22;
  pointer-events:none;
  transform:rotate(-5deg);
}
.customer-quota-tag-decoration{
  position:absolute;
  z-index:3;
  top:clamp(-48.8px,-9.6vw,-39.2px);
  right:clamp(-48.8px,-8.8vw,-35.2px);
  width:clamp(118.4px,29.6vw,148.8px);
  height:clamp(118.4px,29.6vw,148.8px);
  color:rgba(255,255,255,.9);
  filter:drop-shadow(0 5px 4px rgba(31,72,76,.15));
  stroke-width:2.85;
  transform:translate(-19px,22px) rotate(20deg);
  transform-origin:center;
}
.customer-quota-tag-stitch{
  position:absolute;
  z-index:4;
  inset:3px 3px 5px;
  width:calc(100% - 6px);
  height:calc(100% - 8px);
  overflow:visible;
  color:color-mix(in srgb,var(--package-theme-primary) 64%,transparent);
  pointer-events:none;
}
.customer-quota-tag-stitch path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.15;
  stroke-dasharray:2.8 3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.customer-quota-tag-rope,.customer-quota-tag-rope-bridge{
  position:absolute;
  top:50%;
  left:-68px;
  width:142px;
  height:71px;
  border:0;
  border-radius:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  box-shadow:none;
  filter:none;
  transform:translateY(-50%);
  pointer-events:none;
}
.customer-quota-tag-rope{z-index:0;background-image:url("../img/customer-quota-rope-lower-r1.png")}
.customer-quota-tag-rope::before,.customer-quota-tag-rope::after{content:none}
.customer-quota-tag-hole{
  position:absolute;
  z-index:5;
  top:50%;
  left:calc(var(--quota-eyelet-x) - var(--quota-eyelet-hole));
  width:calc(var(--quota-eyelet-hole) + var(--quota-eyelet-hole));
  height:calc(var(--quota-eyelet-hole) + var(--quota-eyelet-hole));
  border-radius:50%;
  background:transparent;
  box-shadow:inset 1px 2px 3px rgba(34,58,62,.3),0 0 0 1px rgba(255,255,255,.72);
  transform:translateY(-50%);
  pointer-events:none;
}
.customer-quota-tag-rope-bridge{
  z-index:7;
  background-image:url("../img/customer-quota-rope-upper-ring-r1.png");
  filter:drop-shadow(0 3px 2px rgba(83,55,29,.28));
}
.customer-quota-wallet-copy,.customer-quota-wallet-balance{position:relative;z-index:6}
.customer-quota-wallet-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
}
.customer-quota-wallet-kicker{
  display:flex;
  width:100%;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{
  max-width:100%;
  overflow:hidden;
  padding:4px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--package-theme-primary) 12%,#fff);
  color:var(--package-theme-primary);
  font-size:8.5px;
  font-style:normal;
  font-weight:850;
  letter-spacing:.045em;
  line-height:1.25;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.customer-quota-wallet-kicker em{background:var(--package-theme-primary);color:#fff}
.customer-quota-wallet-card.is-expiring .customer-quota-wallet-kicker em{background:#d98616}
.customer-quota-wallet-copy>strong{
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  color:var(--package-theme-primary);
  font-size:clamp(18px,5.25vw,26px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.012em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
}
.customer-quota-wallet-copy>small{margin-top:6px;color:#62787e;font-size:9.5px;line-height:1.25}
.customer-quota-wallet-expiry{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:17px;
  color:#455f66;
  font-size:clamp(9px,2.5vw,11px);
  line-height:1.2;
}
.customer-quota-wallet-expiry i{color:var(--package-theme-primary);font-size:1.05em}
.customer-quota-wallet-balance{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr) 16px;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  justify-items:end;
  padding-left:22px;
  color:var(--package-theme-primary);
  text-align:right;
}
.customer-quota-wallet-balance::before{
  position:absolute;
  top:12%;
  bottom:12%;
  left:0;
  border-left:1px dashed color-mix(in srgb,var(--package-theme-primary) 48%,transparent);
  content:"";
}
.customer-quota-wallet-balance strong{
  grid-column:1;
  grid-row:1;
  font-size:clamp(34px,10.3vw,52px);
  font-weight:950;
  letter-spacing:-.035em;
  line-height:.92;
}
.customer-quota-wallet-balance small{
  grid-column:1;
  grid-row:2;
  margin-top:5px;
  font-size:12px;
  font-weight:850;
  line-height:1;
}
.customer-quota-wallet-balance i{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin:0 0 0 9px;
  font-size:18px;
}
.customer-quota-wallet-card.is-expired,.customer-quota-wallet-card.is-exhausted{opacity:.76;filter:saturate(.62)}
.customer-quota-wallet-list.is-inactive .customer-quota-wallet-card{min-height:158px;box-shadow:none}
.customer-quota-inactive-disclosure .customer-quota-wallet-list{padding:18px 12px 20px 28px}

@media(max-width:430px){
  .customer-quota-wallet-list{gap:25px;padding:5px 1px 10px 18px}
  .customer-quota-wallet-card{
    min-height:clamp(164px,42.5vw,183px);
    grid-template-columns:minmax(0,1fr) clamp(94px,39%,116px);
    gap:9px;
    padding:29px 14px 28px clamp(64px,17vw,70px);
  }
  .customer-quota-tag-layer,.customer-quota-tag-surface{clip-path:polygon(16% 0,100% 0,100% 100%,16% 100%,0 73%,0 29%);border-radius:14px 14px 14px 11px}
  .customer-quota-tag-decoration{top:clamp(-44px,-9.6vw,-36.8px);right:-24.8px;width:clamp(105.6px,29.6vw,127.2px);height:clamp(105.6px,29.6vw,127.2px)}
  .customer-quota-tag-stitch{inset:3px 3px 5px;width:calc(100% - 6px);height:calc(100% - 8px)}
  .customer-quota-tag-rope,.customer-quota-tag-rope-bridge{left:-60px;width:126px;height:63px}
  .customer-quota-wallet-card{--quota-eyelet-x:26px;--quota-eyelet-hole:9px}
  .customer-quota-wallet-kicker{gap:5px;margin-bottom:12px}
  .customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:3px 7px;font-size:7.5px}
  .customer-quota-wallet-copy>strong{font-size:clamp(17px,5vw,21px)}
  .customer-quota-wallet-copy>small{font-size:8px}
  .customer-quota-wallet-expiry{padding-top:14px;font-size:9px}
  .customer-quota-wallet-balance{padding-left:14px}
  .customer-quota-wallet-balance strong{font-size:clamp(31px,9.5vw,41px)}
  .customer-quota-wallet-balance small{font-size:10px}
  .customer-quota-inactive-disclosure .customer-quota-wallet-list{padding-left:25px}
}
@media(max-width:360px){
  .customer-quota-wallet-list{gap:23px;padding-left:14px}
  .customer-quota-wallet-card{min-height:160px;grid-template-columns:minmax(0,1fr) 88px;gap:7px;padding:27px 10px 26px 61px}
  .customer-quota-tag-layer,.customer-quota-tag-surface{clip-path:polygon(17% 0,100% 0,100% 100%,17% 100%,0 73%,0 29%)}
  .customer-quota-tag-decoration{top:-35.2px;right:-21.6px;width:102.4px;height:102.4px}
  .customer-quota-tag-rope,.customer-quota-tag-rope-bridge{left:-56px;width:116px;height:58px}
  .customer-quota-wallet-card{--quota-eyelet-x:24px;--quota-eyelet-hole:8px}
  .customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em{padding:3px 5px;font-size:6.5px}
  .customer-quota-wallet-copy>strong{font-size:16px}
  .customer-quota-wallet-copy>small{font-size:7.5px}
  .customer-quota-wallet-expiry{gap:4px;padding-top:12px;font-size:8px}
  .customer-quota-wallet-balance{grid-template-columns:minmax(0,1fr) 12px;padding-left:10px}
  .customer-quota-wallet-balance strong{font-size:29px}
  .customer-quota-wallet-balance small{font-size:9px}
  .customer-quota-wallet-balance i{margin-left:4px;font-size:12px}
}
@media(min-width:600px){
  .customer-quota-wallet-list{gap:32px;padding-left:24px}
  .customer-quota-wallet-card{min-height:clamp(210px,31vw,238px);grid-template-columns:minmax(0,1fr) 132px;padding:40px 34px 39px 112px}
  .customer-quota-tag-decoration{top:-55.2px;right:-33.6px;width:168px;height:168px}
  .customer-quota-tag-rope,.customer-quota-tag-rope-bridge{left:-76px;width:168px;height:84px}
  .customer-quota-wallet-card{--quota-eyelet-x:39px;--quota-eyelet-hole:12px}
  .customer-quota-wallet-copy>strong{font-size:28px}
  .customer-quota-wallet-balance strong{font-size:56px}
}
@media(min-width:900px){
  .customer-quota-tag-rope,.customer-quota-tag-rope-bridge{left:-185px;width:300px;height:150px}
  .customer-quota-tag-rope{background-image:url("../img/customer-quota-rope-loop-lower-r1.png")}
  .customer-quota-tag-rope-bridge{background-image:url("../img/customer-quota-rope-loop-upper-ring-r1.png")}
  .customer-quota-wallet-card{--quota-eyelet-x:32px;--quota-eyelet-hole:19px}
}

/* CUSTOMER APP VOUCHER R1 */
.customer-voucher-page-head{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:21px;
  padding:16px;
  border:1px solid #dce8eb;
  border-radius:19px;
  background:linear-gradient(135deg,#fff 0%,#f6f1ff 100%);
  box-shadow:var(--customer-soft-shadow);
}
.customer-voucher-page-icon{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#835bd1,#633bb8);
  box-shadow:0 9px 17px rgba(108,67,192,.22);
  color:#fff;
  font-size:23px;
}
.customer-voucher-page-head>span:nth-child(2){display:grid;min-width:0;gap:3px}
.customer-voucher-page-head>span:nth-child(2)>strong{color:#163f46;font-size:17px;line-height:1.2}
.customer-voucher-page-head>span:nth-child(2)>small{color:#6e8288;font-size:10px;line-height:1.45}
.customer-voucher-count{display:grid;min-width:50px;justify-items:center;padding:8px 10px;border-radius:13px;background:#fff;color:#6c43c0;box-shadow:0 5px 13px rgba(58,45,92,.1)}
.customer-voucher-count strong{font-size:18px;line-height:1}
.customer-voucher-count small{margin-top:3px;font-size:9px;font-weight:750;text-transform:uppercase}
.customer-voucher-section{margin-top:0}
.customer-voucher-app-list{grid-template-columns:minmax(0,1fr);gap:17px;padding:0}
.customer-voucher-app-list.is-history{padding:16px;background:#f5f7f8}
.customer-voucher-app-list .customer-voucher-ticket{width:100%}
.customer-voucher-app-list .customer-voucher-ticket-meta a{color:var(--primary);font-weight:850;text-decoration:none}
.customer-voucher-app-list .customer-voucher-ticket-meta a:hover{text-decoration:underline}
.customer-voucher-app-list .customer-voucher-empty{min-height:145px;padding:24px 18px;border-radius:17px}
.customer-voucher-app-list .customer-voucher-empty small{color:#829096;font-size:10px;line-height:1.4}
.customer-voucher-disclosure{overflow:hidden;border:1px solid #dce6e9;border-radius:18px;background:#fff;box-shadow:var(--customer-soft-shadow)}
.customer-voucher-disclosure>summary{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;color:#174b51;cursor:pointer;list-style:none}
.customer-voucher-disclosure>summary::-webkit-details-marker{display:none}
.customer-voucher-disclosure>summary>span{display:grid;grid-template-columns:25px auto;align-items:center;gap:1px 8px}
.customer-voucher-disclosure>summary>span>i{grid-row:1/3;color:#6c43c0;font-size:18px}
.customer-voucher-disclosure>summary strong{font-size:13px}
.customer-voucher-disclosure>summary small{color:#7a8b94;font-size:9px}
.customer-voucher-disclosure>summary>i{color:#8d9aa0;transition:transform .18s ease}
.customer-voucher-disclosure[open]>summary{border-bottom:1px solid #e4eaec}
.customer-voucher-disclosure[open]>summary>i{transform:rotate(180deg)}
.customer-voucher-summary{border-color:#e5dcf5;background:linear-gradient(135deg,#fff,#f5f0ff)}
.customer-voucher-summary .customer-quota-summary-icon{background:linear-gradient(145deg,#835bd1,#633bb8);box-shadow:0 7px 15px rgba(108,67,192,.2)}
.customer-voucher-summary strong{color:#59349e}
@media(max-width:430px){
  .customer-voucher-page-head{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:14px}
  .customer-voucher-page-icon{width:46px;height:46px;border-radius:14px;font-size:20px}
  .customer-voucher-page-head>span:nth-child(2)>strong{font-size:15px}
  .customer-voucher-count{min-width:44px;padding:7px 8px}
  .customer-voucher-app-list .customer-voucher-ticket{grid-template-columns:minmax(0,1fr) 106px;min-height:176px}
  .customer-voucher-app-list .customer-voucher-ticket-main{padding:16px 12px 13px 17px}
  .customer-voucher-app-list .customer-voucher-ticket-stub{padding-right:6px;padding-left:6px}
  .customer-voucher-app-list .customer-voucher-ticket-kicker{font-size:8px}
  .customer-voucher-app-list .customer-voucher-ticket-kicker>span:first-child{white-space:nowrap}
}
@media(max-width:360px){
  .customer-voucher-page-head{grid-template-columns:42px minmax(0,1fr) 40px;padding:12px}
  .customer-voucher-page-icon{width:42px;height:42px}
  .customer-voucher-page-head>span:nth-child(2)>small{font-size:9px}
  .customer-voucher-app-list .customer-voucher-ticket{grid-template-columns:minmax(0,1fr) 96px}
  .customer-voucher-app-list .customer-voucher-ticket-main{padding-left:15px}
  .customer-voucher-app-list .customer-voucher-ticket-kicker{gap:5px;font-size:7px;letter-spacing:.025em}
  .customer-voucher-app-list .customer-voucher-ticket-kicker>span:last-child{font-size:7px}
  .customer-voucher-app-list .customer-voucher-ticket-stub strong{font-size:11px}
}


/* CUSTOMER APP BERANDA PROMO R1 */
.customer-welcome-compact{padding:15px 17px;margin-bottom:16px}
.customer-welcome-compact .customer-welcome-icon{width:38px;height:38px;flex-basis:38px;border-radius:13px;font-size:18px!important}
.customer-promo-section{margin:0 0 18px}
.customer-promo-carousel{display:grid;gap:8px}
.customer-promo-viewport{position:relative;overflow:hidden;border:1px solid #d8e6ea;border-radius:18px;background:#fff;box-shadow:var(--customer-soft-shadow)}
.customer-promo-track{display:flex;width:100%;transition:transform .42s ease;touch-action:pan-y}
.customer-promo-carousel[data-active-index="0"] .customer-promo-track{transform:translateX(0)}
.customer-promo-carousel[data-active-index="1"] .customer-promo-track{transform:translateX(-100%)}
.customer-promo-carousel[data-active-index="2"] .customer-promo-track{transform:translateX(-200%)}
.customer-promo-carousel[data-active-index="3"] .customer-promo-track{transform:translateX(-300%)}
.customer-promo-carousel[data-active-index="4"] .customer-promo-track{transform:translateX(-400%)}
.customer-promo-slide{display:block;flex:0 0 100%;aspect-ratio:12/5;background:#eef4f5;text-decoration:none}
.customer-promo-slide img{display:block;width:100%;height:100%;object-fit:cover}
.customer-promo-arrow{position:absolute;top:50%;z-index:2;display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(12,64,70,.55);color:#fff;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(4px)}
.customer-promo-arrow.is-prev{left:9px}.customer-promo-arrow.is-next{right:9px}
.customer-promo-arrow:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent);outline-offset:2px}
.customer-promo-dots{display:flex;min-height:10px;align-items:center;justify-content:center;gap:6px}
.customer-promo-dots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:#b8c8cd;cursor:pointer;transition:width .2s ease,background .2s ease}
.customer-promo-dots button.is-active{width:18px;background:var(--primary)}
.customer-voucher-home-section{margin-bottom:18px}
.customer-promo-detail{display:grid;gap:14px}
.customer-promo-detail-back{display:inline-flex;width:max-content;align-items:center;gap:6px;color:var(--primary);font-size:11px;font-weight:800;text-decoration:none}
.customer-promo-detail-banner{overflow:hidden;aspect-ratio:12/5;border:1px solid #d8e6ea;border-radius:18px;background:#eef4f5;box-shadow:var(--customer-soft-shadow)}
.customer-promo-detail-banner img{display:block;width:100%;height:100%;object-fit:cover}
.customer-promo-detail-card{padding:18px;border:1px solid #dce7ea;border-radius:18px;background:#fff;box-shadow:var(--customer-soft-shadow)}
.customer-promo-detail-type{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.customer-promo-detail-card h1{margin:10px 0 7px;color:var(--customer-ink);font-size:21px;line-height:1.25}
.customer-promo-detail-period{display:flex;align-items:flex-start;gap:7px;margin:0;color:#71858b;font-size:10px;line-height:1.5}
.customer-promo-detail-section{margin-top:18px;padding-top:16px;border-top:1px solid #e5ecee}
.customer-promo-detail-section h2{margin:0 0 8px;color:#183d43;font-size:14px}
.customer-promo-detail-section p{margin:0;color:#536b72;font-size:12px;line-height:1.7;white-space:pre-line}
.customer-promo-detail-section.is-terms{padding:14px;border:1px solid #e2e8ea;border-radius:13px;background:#f7fafb}
.customer-promo-detail-section.is-terms h2{margin-top:0}

/* E-NOTA DI DALAM APLIKASI PELANGGAN R1 */
.customer-app-main .digital-receipt-page{width:100%;max-width:520px;margin:0 auto;padding:0 0 18px}
.customer-app-main .digital-receipt-card{box-shadow:var(--customer-soft-shadow)}
.digital-receipt-action-box{display:grid;gap:9px;margin:16px 0 0;padding:13px;border:1px solid #dfe7ea;border-radius:13px;background:#f8fbfb}
.digital-receipt-action-box>div{display:grid;gap:3px}
.digital-receipt-action-box strong{color:#173d43;font-size:12px}
.digital-receipt-action-box p{margin:0;color:#667b82;font-size:10px;line-height:1.45}
.digital-receipt-action-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.digital-receipt-action-buttons a{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:10px;text-decoration:none;font-size:10px;font-weight:850}
.digital-receipt-action-buttons .is-primary{background:var(--primary);color:#fff}
.digital-receipt-action-buttons .is-secondary{border:1px solid #c9dcdf;background:#fff;color:var(--primary)}
.digital-receipt-progress{margin:18px 0 0;padding:16px;border:1px solid #dfe8e9;border-radius:16px;background:#fff}
.digital-receipt-progress>h2{display:flex;align-items:center;gap:7px;margin:0 0 12px;color:#357a45;font-size:14px}
.digital-receipt-progress-item+.digital-receipt-progress-item{margin-top:14px;padding-top:14px;border-top:1px solid #e3e9e7}
.digital-receipt-progress-item>strong{display:block;margin-bottom:9px;color:#1e3a34;font-size:12px}
.digital-receipt-progress-steps{display:grid;gap:8px}
.digital-receipt-progress-step{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:center;color:#83918d;font-size:10px}
.digital-receipt-progress-step i{display:grid;width:18px;height:18px;place-items:center;border:1px solid #cbd8d4;border-radius:50%;background:#fff;font-size:8px}
.digital-receipt-progress-step.is-done{color:#287143;font-weight:750}
.digital-receipt-progress-step.is-done i{border-color:#4fa65b;background:#4fa65b;color:#fff}
.digital-receipt-progress-step.is-current{color:#c2591f;font-weight:800}
.digital-receipt-progress-step.is-current i{border:5px solid #e9b18c;background:#fff}
.digital-receipt-delivery-status{display:grid;gap:5px;margin:16px 0 0;padding:13px;border:1px solid #dce7ea;border-radius:13px;background:#f8fbfb}
.digital-receipt-delivery-status span{color:#7b8e93;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.digital-receipt-delivery-status strong{color:#173d43;font-size:12px}
.digital-receipt-delivery-status small{color:#60767d;font-size:10px;line-height:1.45}
@media(max-width:430px){
  .customer-promo-arrow{width:29px;height:29px}
  .customer-promo-detail-card{padding:15px}
  .customer-promo-detail-card h1{font-size:19px}
  .digital-receipt-action-buttons{display:grid;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.customer-promo-track{transition:none}}

/* CUSTOMER APP PERLU TINDAKAN R1 */
.customer-action-modal-open{overflow:hidden}
.customer-action-modal{position:fixed;inset:0;z-index:1400;display:grid;align-items:end;justify-items:center;padding:18px 12px max(18px,env(safe-area-inset-bottom));opacity:0;transition:opacity .18s ease}
.customer-action-modal.is-open{opacity:1}
.customer-action-modal-backdrop{position:absolute;inset:0;background:rgba(16,35,39,.58);backdrop-filter:blur(3px)}
.customer-action-sheet{position:relative;z-index:1;width:min(100%,520px);max-height:min(82vh,720px);overflow:hidden;border:1px solid #ead6cf;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(31,42,46,.28);transform:translateY(24px);transition:transform .18s ease}
.customer-action-modal.is-open .customer-action-sheet{transform:translateY(0)}
.customer-action-sheet-handle{width:42px;height:4px;margin:9px auto 3px;border-radius:999px;background:#d8dfe1}
.customer-action-sheet-head{display:grid;grid-template-columns:46px minmax(0,1fr) 34px;gap:11px;align-items:start;padding:13px 16px 14px;border-bottom:1px solid #eee3df;background:linear-gradient(135deg,#fff8f4,#fff)}
.customer-action-sheet-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:15px;background:#fff0e8;color:#cc5f28;font-size:21px}
.customer-action-sheet-head>div{display:grid;gap:2px}
.customer-action-sheet-head small{color:#b7643d;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.045em}
.customer-action-sheet-head h2{margin:0;color:#442c26;font-size:19px;line-height:1.18}
.customer-action-sheet-head p{margin:2px 0 0;color:#78645e;font-size:10px;line-height:1.45}
.customer-action-sheet-head>button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:11px;background:#f6efec;color:#725d57;cursor:pointer}
.customer-action-sheet-list{display:grid;gap:9px;max-height:52vh;overflow:auto;padding:13px 14px}
.customer-action-sheet-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid #eaded9;border-radius:15px;background:#fff;text-decoration:none}
.customer-action-sheet-item>span{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:#fff3ed;color:#c45825;font-size:17px}
.customer-action-sheet-item>div{display:grid;min-width:0;gap:2px}
.customer-action-sheet-item strong{color:#43342f;font-size:11px;line-height:1.25}
.customer-action-sheet-item p{margin:0;color:#786b67;font-size:9.5px;line-height:1.4}
.customer-action-sheet-item small{color:#a36548;font-size:8.5px;font-weight:800}
.customer-action-sheet-item em{display:flex;align-items:center;gap:3px;color:var(--primary);font-size:9px;font-style:normal;font-weight:850;white-space:nowrap}
.customer-action-sheet-later{display:block;width:calc(100% - 28px);min-height:40px;margin:0 14px 14px;border:1px solid #d8e2e4;border-radius:12px;background:#f8fafb;color:#60777d;font-size:10px;font-weight:850;cursor:pointer}
.customer-urgent-home-section{overflow:hidden;margin-top:0;border:1px solid #efd5c8;border-radius:19px;background:linear-gradient(135deg,#fff8f4,#fff);box-shadow:var(--customer-soft-shadow)}
.customer-urgent-summary{display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;align-items:center;padding:14px 15px 12px}
.customer-urgent-summary-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;background:#ffede4;color:#c7541e;font-size:20px}
.customer-urgent-summary-copy{display:grid;gap:2px}
.customer-urgent-summary-copy>small{color:#be6138;font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.customer-urgent-summary-copy>strong{color:#493027;font-size:15px}
.customer-urgent-summary-copy>span{color:#7f6b63;font-size:9.5px}
.customer-urgent-action-list{display:grid;border-top:1px solid #f0dfd8}
.customer-urgent-action-item{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 14px;color:inherit;text-decoration:none}
.customer-urgent-action-item+.customer-urgent-action-item{border-top:1px solid #f2e8e4}
.customer-urgent-action-item>i{display:grid;width:31px;height:31px;place-items:center;border-radius:10px;background:#fff1ea;color:#c85d2c}
.customer-urgent-action-item>span{display:grid;min-width:0;gap:1px}
.customer-urgent-action-item strong{color:#483730;font-size:10.5px}
.customer-urgent-action-item small{overflow:hidden;color:#806f69;font-size:8.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.customer-urgent-action-item em{display:flex;align-items:center;gap:3px;color:var(--primary);font-size:8.5px;font-style:normal;font-weight:850;white-space:nowrap}
.customer-urgent-more{display:block;padding:10px 14px;border-top:1px solid #f0dfd8;color:var(--primary);font-size:9.5px;font-weight:850;text-align:center;text-decoration:none}
.customer-order-ticket.has-urgent-action{border-color:#e9b89f;box-shadow:0 11px 26px rgba(176,88,45,.13)}
.customer-order-ticket.has-urgent-action .customer-order-ticket-stub{background:linear-gradient(160deg,#fff3ec,#ffe5d8)}
.customer-order-ticket.has-urgent-action .customer-ticket-status{color:#b24a1d}
.customer-order-ticket-urgent{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 9px;border:1px solid #efc8b5;border-radius:10px;background:#fff6f1;color:#ba4e1f}
.customer-order-ticket-urgent>i{font-size:14px}
.customer-order-ticket-urgent>span{display:grid;gap:1px}
.customer-order-ticket-urgent strong{font-size:9px;text-transform:uppercase;letter-spacing:.035em}
.customer-order-ticket-urgent small{color:#7c5e50;font-size:8px}
.customer-action-page-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:14px;padding:15px;border:1px solid #e7d9d3;border-radius:18px;background:linear-gradient(135deg,#fff8f4,#fff);box-shadow:var(--customer-soft-shadow)}
.customer-action-page-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:16px;background:#ffede4;color:#c7541e;font-size:22px}
.customer-action-page-card>div{display:grid;gap:2px}.customer-action-page-card small{color:#a96849;font-size:9px;font-weight:850}.customer-action-page-card h1{margin:0;color:#48342c;font-size:17px}.customer-action-page-card p{margin:0;color:#796b65;font-size:10px}
.customer-pending-action-panel{display:grid;gap:13px;padding:15px;border:1px solid #e8ddd8;border-radius:18px;background:#fff;box-shadow:var(--customer-soft-shadow)}
.customer-pending-action-panel.is-warning{border-color:#efc9b7;background:#fffaf7}
.customer-pending-action-panel-head{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:start}.customer-pending-action-panel-head>i{color:#c95e2c;font-size:20px}.customer-pending-action-panel-head>div{display:grid;gap:3px}.customer-pending-action-panel-head strong{color:#46342e;font-size:12px}.customer-pending-action-panel-head p{margin:0;color:#786963;font-size:10px;line-height:1.55}
.customer-action-form-stack{display:grid;gap:8px}.customer-action-form-stack form{margin:0}.customer-action-form-stack button{width:100%}
.customer-count-result-list{display:grid;overflow:hidden;border:1px solid #eadfd9;border-radius:12px;background:#fff}.customer-count-result-list>div{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;color:#685750;font-size:10px}.customer-count-result-list>div+div{border-top:1px solid #eee5e1}.customer-count-result-list .is-total{background:#fff5ef;color:#4a352d;font-weight:850}
.customer-order-topup-context{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;margin:0 0 14px;padding:12px;border:1px solid #efc8b5;border-radius:14px;background:#fff7f2;color:#b84e20}.customer-order-topup-context>i{font-size:19px}.customer-order-topup-context>div{display:grid;gap:2px}.customer-order-topup-context strong{font-size:11px}.customer-order-topup-context p{margin:0;color:#7b665d;font-size:9.5px;line-height:1.5}
.customer-form-alert.is-info{border-color:#cfe2e5;background:#f1fafb;color:#35666d}
.digital-receipt-action-box.is-urgent{border-color:#edc8b8;background:#fff8f4}
.digital-receipt-action-box.is-urgent>div:first-child>strong{display:flex;align-items:center;gap:6px;color:#a9461d}
.digital-receipt-action-buttons form{display:flex;margin:0}
.digital-receipt-action-buttons button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:0;border-radius:10px;cursor:pointer;font-size:10px;font-weight:850}
.digital-receipt-action-buttons button.is-primary{background:var(--primary);color:#fff}
.digital-receipt-action-buttons button.is-secondary{border:1px solid #c9dcdf;background:#fff;color:var(--primary)}
.digital-receipt-action-note{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0!important;padding:8px;border-radius:9px;background:#fff1e9;color:#8b543b!important}
@media(max-width:430px){
  .customer-action-sheet-item{grid-template-columns:36px minmax(0,1fr)}
  .customer-action-sheet-item>em{grid-column:2;justify-self:start;margin-top:2px}
  .customer-urgent-action-item{grid-template-columns:30px minmax(0,1fr)}
  .customer-urgent-action-item>em{grid-column:2;justify-self:start;margin-top:1px}
  .digital-receipt-action-buttons form,.digital-receipt-action-buttons button{width:100%}
}
@media(prefers-reduced-motion:reduce){.customer-action-modal,.customer-action-sheet{transition:none}}

/* Customer e-Nota payment choice */
.digital-receipt-customer-payment-form{
  display:grid;
  gap:8px;
  width:100%;
}
.digital-receipt-customer-payment-form label{
  font-size:12px;
  font-weight:800;
  color:#5d6670;
}
.digital-receipt-customer-payment-form select{
  width:100%;
  min-height:44px;
  border:1px solid #d7e1e5;
  border-radius:12px;
  background:#fff;
  padding:0 12px;
  font:inherit;
  color:#16343a;
}


/* PATCH 20260817 R2 - Detail Pelanggan mobile */
.customer-topup-label-mobile{display:none}
@media (max-width:760px){
  .customer-detail-page .customer-head>.customer-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    width:100%!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .customer-detail-page .customer-actions>.btn{
    display:inline-flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:8px 6px!important;
    white-space:nowrap!important;
  }
  .customer-topup-label-desktop{display:none!important}
  .customer-topup-label-mobile{display:inline!important}
  .customer-detail-page #tab-alamat .addr-head,
  .customer-detail-page #tab-kuota .customer-quota-head,
  .customer-detail-page #tab-voucher .addr-head{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .customer-detail-page #tab-alamat .addr-head>.btn,
  .customer-detail-page #tab-kuota .customer-quota-head>.btn,
  .customer-detail-page #tab-voucher .addr-head>.btn{
    width:auto!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    min-height:38px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    justify-content:center!important;
  }
}


/* STAGE 1 20260818 - GLOBAL UI STANDARDS
   Fondasi bersama: token visual, validasi, status, tap target, dan typography mobile.
   Perubahan halaman khusus tetap dilakukan bertahap agar tidak merusak layout yang sudah berjalan. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --control-height:42px;
  --tap-target:44px;
  --radius-control:10px;
  --radius-card:14px;
  --status-success-bg:#ecfdf5;
  --status-success-bd:#a7f3d0;
  --status-success-txt:#065f46;
  --status-warning-bg:#fff7ed;
  --status-warning-bd:#fed7aa;
  --status-warning-txt:#9a3412;
  --status-danger-bg:#fef2f2;
  --status-danger-bd:#fecaca;
  --status-danger-txt:#991b1b;
  --status-neutral-bg:#f8fafc;
  --status-neutral-bd:#e2e8f0;
  --status-neutral-txt:#475569;
  --status-info-bg:#eff6ff;
  --status-info-bd:#bfdbfe;
  --status-info-txt:#1d4ed8;
}

.input,.select,select.input,textarea.input,.textarea{min-height:var(--control-height)}
textarea.input,.textarea{height:auto}
.req,[data-required-marker]{color:#c62828;font-weight:800}
.ml-field-invalid,.input.ml-field-invalid,.select.ml-field-invalid,.textarea.ml-field-invalid{
  border-color:#dc2626!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.10)!important;
}
.ml-field-invalid:focus{outline:none}

/* Satu bahasa warna status: hijau=selesai/aktif, oranye=menunggu, merah=masalah, abu=netral/nonaktif, biru=informasi. */
.badge.ok,.badge.active{background:var(--status-success-bg);border-color:var(--status-success-bd);color:var(--status-success-txt)}
.badge.pending{background:var(--status-warning-bg);border-color:var(--status-warning-bd);color:var(--status-warning-txt)}
.badge.danger{background:var(--status-danger-bg);border-color:var(--status-danger-bd);color:var(--status-danger-txt)}
.badge.muted,.badge.inactive,.badge.neutral{background:var(--status-neutral-bg);border-color:var(--status-neutral-bd);color:var(--status-neutral-txt)}
.badge.level,.badge.info{background:var(--status-info-bg);border-color:var(--status-info-bd);color:var(--status-info-txt)}
.badge-status.badge-aktif{background:var(--status-success-bg);border-color:var(--status-success-bd);color:var(--status-success-txt)}
.badge-status.badge-pending{background:var(--status-warning-bg);border-color:var(--status-warning-bd);color:var(--status-warning-txt)}
.badge-status.badge-nonaktif{background:var(--status-neutral-bg);border-color:var(--status-neutral-bd);color:var(--status-neutral-txt)}

/* Hierarki aksi global. */
.btn,.btn-primary,.btn-primary-ml,.btn-save-primary,.btn-danger,.btn-danger-ml{min-height:var(--control-height)}
.btn-danger,.btn-danger-ml{background:var(--danger)!important;border-color:var(--danger-600)!important;color:#fff!important}
.btn-danger:hover,.btn-danger-ml:hover{background:var(--danger-600)!important}

/* Nominal tetap terasa sebagai input Rupiah walaupun nilai yang dikirim ke server adalah integer. */
.money-input{font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .btn,.btn-sm,.btn-lg,.btn-primary,.btn-primary-ml,.btn-save-primary{min-height:var(--tap-target)}
  .btn-icon,.icon-btn,.icon-link,.header-btn,.drawer-close{min-width:var(--tap-target);min-height:var(--tap-target)}
  .input,.select,select.input,textarea.input,.textarea{min-height:var(--tap-target);font-size:14px}
  .mobile-card{font-size:14px;line-height:1.4}
  .mobile-card .muted,.mobile-card small{font-size:11px;line-height:1.35}

  /* Area pelanggan: jangan mengecilkan informasi sampai 7–9px demi mengejar ruang. */
  body.customer-app-body,body.customer-auth-body{font-size:14px}
  body.customer-app-body small,body.customer-auth-body small{font-size:11px!important;line-height:1.35}
  .customer-app-header .center-title small{font-size:10px!important}
  .customer-bottom-nav a span,.customer-bottom-nav .customer-bottom-main span{font-size:11px!important}
  .customer-chip,.customer-status-badge,.customer-ticket-status,
  .customer-order-ticket-kicker,.customer-order-ticket-kicker>span,
  .customer-voucher-ticket-kicker,.customer-voucher-ticket-kicker>span,
  .customer-voucher-ticket-kicker>span:last-child,
  .customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em,
  .customer-address-picker-list strong em,.customer-promo-detail-type,
  .customer-action-sheet-head small,.customer-action-sheet-item em,
  .customer-order-ticket-urgent strong,.customer-action-page-card small{
    font-size:10px!important;
    line-height:1.25;
  }
  .customer-order-mini-stepper small,.customer-address-picker-list small,
  .customer-address-picker-trigger small,.customer-address-gps-state small,
  .customer-order-ticket-urgent small,.customer-quota-wallet-expiry,
  .customer-owned-quota-balance small,.customer-voucher-count small,
  .customer-voucher-disclosure>summary small{
    font-size:11px!important;
    line-height:1.35;
  }
  .customer-address-picker-trigger strong,.customer-address-picker-list strong,
  .customer-address-gps-state strong{font-size:12px!important}
  .customer-address-gps-state>button{min-height:40px;font-size:11px!important}
  .notification-action-chip,.notification-priority,.notification-read-state{font-size:10px!important;min-height:22px}
}


/* STAGE 1 CORRECTION 20260818 — completion of approved global standards */
.ml-field-error{margin-top:5px;color:#b91c1c;font-size:11px;font-weight:700;line-height:1.35}
.ml-field-invalid+.ml-field-error{display:block}

/* Semantic status aliases for modules that use alternate class names. */
.badge.success,.badge.completed,.badge.paid,.badge.open{background:var(--status-success-bg);border-color:var(--status-success-bd);color:var(--status-success-txt)}
.badge.warning,.badge.waiting,.badge.processing{background:var(--status-warning-bg);border-color:var(--status-warning-bd);color:var(--status-warning-txt)}
.badge.error,.badge.failed,.badge.cancelled{background:var(--status-danger-bg);border-color:var(--status-danger-bd);color:var(--status-danger-txt)}
.badge.closed{background:var(--status-neutral-bg);border-color:var(--status-neutral-bd);color:var(--status-neutral-txt)}

@media(max-width:760px){
  /* Custom controls must meet the same touch target as standard buttons. */
  .customer-action-sheet-head>button,.customer-action-sheet-later,
  .digital-receipt-action-buttons button,.customer-address-gps-state>button,
  .payroll-mine-modal [data-payroll-mine-close]{min-width:40px;min-height:40px}

  /* Remaining customer microcopy: simplify space with readable text instead of 6–9px labels. */
  .customer-order-ticket-meta small,.customer-ticket-status,.customer-order-ticket-stub>small,
  .customer-order-mini-stepper small,.customer-mutation-balance>small,
  .customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em,
  .customer-voucher-ticket-kicker,.customer-voucher-ticket-kicker>span,
  .customer-promo-detail-type,.customer-action-sheet-head small,
  .customer-action-sheet-item p,.customer-action-sheet-item small,.customer-action-sheet-item em,
  .customer-urgent-summary-copy>small,.customer-urgent-summary-copy>span,
  .customer-urgent-action-item small,.customer-urgent-action-item em,.customer-urgent-more,
  .customer-order-ticket-urgent strong,.customer-order-ticket-urgent small,
  .customer-action-page-card small,.customer-order-topup-context p,
  .digital-receipt-delivery-status span,.digital-receipt-delivery-status small{
    font-size:11px!important;line-height:1.35!important;
  }
  .customer-order-ticket-kicker,.customer-chip,.customer-status-badge{font-size:10.5px!important}

  /* Icon/action controls stay easy to tap even if the visible glyph remains compact. */
  .aksi-group>.btn-icon,.mobile-actions .btn-icon{min-width:42px;min-height:42px}
}

/* GLOBAL UI STANDARDS FINAL R3 — 2026-08-18
   Final cascade layer for the approved shared UX rules. Legacy page CSS remains
   in place, but effective common controls use these tokens consistently. */
:root{
  --ui-font-body:14px;
  --ui-font-secondary:12px;
  --ui-font-micro:11px;
  --ui-control-height:42px;
  --ui-touch-target:44px;
  --ui-radius-sm:9px;
  --ui-radius-md:12px;
  --ui-radius-lg:16px;
  --ui-gap-xs:6px;
  --ui-gap-sm:8px;
  --ui-gap-md:12px;
  --ui-gap-lg:16px;
  --ui-border:#d8e1e5;
  --ui-surface:#fff;
  --ui-surface-soft:#f8fafb;
  --ui-text:#173d43;
  --ui-muted:#667b82;
}

/* Action hierarchy: neutral first, primary last, destructive clearly separate. */
.form-actions,.modal-foot{align-items:center;gap:var(--ui-gap-sm)}
.form-actions>.btn-primary,.form-actions>.btn-primary-ml,.form-actions>.btn-save-primary,
.modal-foot>.btn-primary,.modal-foot>.btn-primary-ml,.modal-foot>.btn-save-primary{margin-inline-start:auto}
.form-actions>.btn-danger,.form-actions>.btn-danger-ml,.modal-foot>.btn-danger,.modal-foot>.btn-danger-ml{color:#fff}

/* Semantic status palette, including module-specific aliases. */
.courier-status-card.is-open{border-color:var(--status-success-bd);background:var(--status-success-bg)}
.courier-status-card.is-open .courier-status-label{color:var(--status-success-txt)}
.courier-status-card.is-ready{border-color:var(--status-info-bd);background:var(--status-info-bg)}
.courier-status-card.is-ready .courier-status-label{color:var(--status-info-txt)}
.courier-status-card.is-closed,.courier-status-card.is-unavailable{border-color:var(--status-neutral-bd);background:var(--status-neutral-bg)}
.courier-status-card.is-closed .courier-status-label,.courier-status-card.is-unavailable .courier-status-label{color:var(--status-neutral-txt)}
.customer-status-badge.is-success{border-color:var(--status-success-bd);background:var(--status-success-bg);color:var(--status-success-txt)}
.customer-status-badge.is-warning{border-color:var(--status-warning-bd);background:var(--status-warning-bg);color:var(--status-warning-txt)}
.customer-status-badge.is-danger{border-color:var(--status-danger-bd);background:var(--status-danger-bg);color:var(--status-danger-txt)}
.customer-status-badge.is-neutral{border-color:var(--status-neutral-bd);background:var(--status-neutral-bg);color:var(--status-neutral-txt)}
.customer-status-badge.is-info,.customer-status-badge.is-progress{border-color:var(--status-info-bd);background:var(--status-info-bg);color:var(--status-info-txt)}

/* Responsive defaults: forms and tables remain usable instead of being visually shrunk. */
.table-wrap,.table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.filter-row,.compact-filter-row,.page-head,.page-header,.cash-page-head,.fulfillment-page-head{min-width:0}

@media(max-width:760px){
  /* Touch targets for controls that previously bypassed .btn/.btn-icon rules. */
  .modal-close,.btn-x,.drawer-close,.header-btn,.compact-filter-submit,
  .customer-promo-arrow,.customer-action-sheet-head>button,.customer-address-gps-state>button,
  .payroll-mine-modal [data-payroll-mine-close],.customer-action-sheet-later,
  .sdm-work-calendar-day button,.sdm-work-calendar-nav button{
    min-width:var(--ui-touch-target)!important;
    min-height:var(--ui-touch-target)!important;
  }
  .customer-promo-arrow{width:var(--ui-touch-target)!important;height:var(--ui-touch-target)!important}
  .form-actions>.btn-primary,.form-actions>.btn-primary-ml,.form-actions>.btn-save-primary,
  .modal-foot>.btn-primary,.modal-foot>.btn-primary-ml,.modal-foot>.btn-save-primary{margin-inline-start:0}

  /* Internal mobile microcopy. */
  .compact-filter-count,.notification-badge,.notification-action-chip,.notification-priority,.notification-read-state,
  .sdm-work-calendar-assignment,.legend-tag,.sdm-work-calendar-weekdays span,
  .sdm-work-calendar-marker,.sdm-work-calendar-legend>span,
  .dashboard-bar-item small,.dashboard-cash-state .status-pill{font-size:10px!important;line-height:1.25!important}

  /* Customer app readability: minimum useful text sizes. Icons/glyphs are intentionally excluded. */
  .customer-promo-detail-period,.customer-promo-detail-type,.customer-promo-detail-back,
  .digital-receipt-action-box p,.digital-receipt-action-buttons a,
  .digital-receipt-progress-step,.digital-receipt-delivery-status span,.digital-receipt-delivery-status small,
  .customer-action-sheet-head small,.customer-action-sheet-head p,
  .customer-action-sheet-item strong,.customer-action-sheet-item p,.customer-action-sheet-item small,.customer-action-sheet-item em,
  .customer-urgent-summary-copy>small,.customer-urgent-summary-copy>span,
  .customer-urgent-action-item small,.customer-urgent-action-item em,.customer-urgent-more,
  .customer-order-ticket-urgent strong,.customer-order-ticket-urgent small,
  .customer-action-page-card small,.customer-order-topup-context p,
  .customer-chip,.customer-status-badge,.customer-order-meta small,
  .customer-order-ticket-kicker,.customer-order-ticket-meta small,.customer-ticket-status,.customer-order-ticket-stub>small,
  .customer-order-mini-stepper small,.customer-owned-quota-copy small,.customer-owned-quota-balance small,
  .customer-mutation-balance>small,.customer-quota-wallet-kicker span,.customer-quota-wallet-kicker em,
  .customer-quota-wallet-copy>small,.customer-quota-wallet-expiry,
  .customer-address-picker-trigger small,.customer-address-picker-list strong em,.customer-address-picker-list small,
  .customer-address-picker-add,.customer-profile-completion .customer-form-stack small,
  .customer-address-gps-state small,.customer-address-gps-state>button,
  .customer-voucher-count small,.customer-voucher-disclosure>summary small,
  .customer-voucher-app-list .customer-voucher-ticket-kicker,
  .customer-voucher-app-list .customer-voucher-ticket-kicker>span:last-child{
    font-size:11px!important;
    line-height:1.35!important;
  }

  .customer-app-main p,.customer-form-card p,.customer-detail-line,.customer-card-copy{line-height:1.45}

  /* Do not compress action groups below usable touch targets. */
  .mobile-actions .btn,.mobile-actions .btn-icon,.aksi-group>.btn-icon{min-width:42px;min-height:42px}
  .customer-bottom-nav a,.customer-bottom-nav button{min-height:var(--ui-touch-target)}

  /* Generic narrow-screen fallback for pages that do not yet have dedicated cards. */
  .page,.page-wide{max-width:100%}
  .table-wrap table,.table-scroll table{font-size:12px}
  .table-wrap th,.table-wrap td,.table-scroll th,.table-scroll td{white-space:normal}
}


/* GLOBAL STANDARDS CLOSURE R4 — 2026-08-18
   Penutup Tahap Global: effective cascade only. Legacy selectors remain for
   compatibility, while shared UI follows the final tokens below. */
:root{
  --ui-control-height:44px;
  --ui-touch-target:44px;
  --ui-font-body:14px;
  --ui-font-secondary:12px;
  --ui-font-micro:11px;
  --ui-action-primary-bg:var(--primary);
  --ui-action-primary-border:var(--primary-600);
  --ui-action-secondary-bg:#fff;
  --ui-action-secondary-border:var(--ui-border);
  --ui-action-danger-bg:var(--danger);
}

/* One visual hierarchy for shared actions. */
.btn,.btn-primary,.btn-primary-ml,.btn-save-primary,.btn-danger,.btn-danger-ml{
  border-radius:var(--ui-radius-md);
}
.form-actions>.btn:not(.btn-primary):not(.btn-primary-ml):not(.btn-save-primary):not(.btn-danger):not(.btn-danger-ml),
.modal-foot>.btn:not(.btn-primary):not(.btn-primary-ml):not(.btn-save-primary):not(.btn-danger):not(.btn-danger-ml){
  background:var(--ui-action-secondary-bg);
  border-color:var(--ui-action-secondary-border);
  color:var(--ui-text);
}

/* Semantic status mapping is applied by ui-standards.js based on domain text. */
.ml-status-success{background:var(--status-success-bg)!important;border-color:var(--status-success-bd)!important;color:var(--status-success-txt)!important}
.ml-status-warning{background:var(--status-warning-bg)!important;border-color:var(--status-warning-bd)!important;color:var(--status-warning-txt)!important}
.ml-status-danger{background:var(--status-danger-bg)!important;border-color:var(--status-danger-bd)!important;color:var(--status-danger-txt)!important}
.ml-status-neutral{background:var(--status-neutral-bg)!important;border-color:var(--status-neutral-bd)!important;color:var(--status-neutral-txt)!important}
.ml-status-info{background:var(--status-info-bg)!important;border-color:var(--status-info-bd)!important;color:var(--status-info-txt)!important}

/* Shared narrow-screen behavior: reflow first, never shrink important controls. */
@media(max-width:760px){
  .page-head,.page-header,.header-simple,.cash-page-head,.fulfillment-page-head,
  .toolbar,.toolbar-actions,.filter-row,.compact-filter-row,.form-actions,.modal-foot{
    min-width:0;
    flex-wrap:wrap;
  }
  .field-grid,.row-2,.form-grid,.grid-2,.two-column,.two-cols{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .form-actions>.btn,.modal-foot>.btn{min-height:var(--ui-control-height)}
  .btn-icon,.icon-btn,.icon-link,.modal-close,.drawer-close,.btn-x,.header-btn,
  .compact-filter-submit,.customer-promo-arrow,.customer-action-sheet-head>button,
  .customer-address-action-btn,.customer-location-btn,.customer-small-btn,.customer-inline-btn,
  .customer-section-head>.customer-address-add-btn,.customer-buy-quota-btn,
  .customer-address-gps-state>button,.payroll-mine-modal [data-payroll-mine-close],
  .sdm-work-calendar-day button,.sdm-work-calendar-nav button{
    min-width:var(--ui-touch-target)!important;
    min-height:var(--ui-touch-target)!important;
  }
  .btn-icon,.icon-btn,.icon-link{width:var(--ui-touch-target)!important;height:var(--ui-touch-target)!important}
  .customer-promo-arrow{width:var(--ui-touch-target)!important;height:var(--ui-touch-target)!important}

  /* Customer readability: microcopy has a hard floor; simplify layout instead of 7–9px text. */
  .customer-app-main small,
  .customer-app-main [class*="kicker"],
  .customer-app-main [class*="meta"] small,
  .customer-app-main [class*="status"] small,
  .customer-app-main [class*="expiry"],
  .customer-app-main [class*="period"],
  .customer-app-main [class*="count"] small,
  .customer-app-main [class*="step"] small,
  .customer-app-main [class*="stub"] small,
  .customer-app-main [class*="badge"]{
    font-size:var(--ui-font-micro)!important;
    line-height:1.35!important;
  }
  .customer-app-main p,.customer-app-main li,.customer-app-main .customer-detail-line{font-size:max(var(--ui-font-secondary),1em);line-height:1.45}

  /* Mobile action groups may wrap, but controls keep their touch size. */
  .aksi-group,.mobile-actions{flex-wrap:wrap;white-space:normal}
  .customer-section-head,.customer-page-action-head{min-width:0;gap:var(--ui-gap-sm)}
  .customer-section-head>*{min-width:0}

  /* Tables that have no dedicated card stay scrollable, never compressed below readability. */
  .table-wrap,.table-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .table-wrap table,.table-scroll table{min-width:max-content;font-size:12px}
  .table-wrap th,.table-wrap td,.table-scroll th,.table-scroll td{white-space:nowrap}
}

/* Terima Laundry — lapisan kontras visual percobaan 2026-08-19 */
.order-stage5-card{
  border-color:#d5e3e8;
  box-shadow:0 12px 30px rgba(15,77,84,.07);
}
.order-stage5-card .order-section h2>i,
.order-stage5-card .order-section-title-row h2>i{
  display:inline-grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:#e4f5f5;
  color:#087f86;
  box-shadow:inset 0 0 0 1px rgba(8,127,134,.08);
}
.order-stage5-card .input{border-color:#c6d5de}
.order-selected-customer,
.order-selected-address{
  border-color:#b9dfe2;
  background:linear-gradient(135deg,#f3fbfb 0%,#edf8fa 100%);
  box-shadow:0 5px 14px rgba(15,118,128,.06);
}
#orderChangeCustomer,
#orderChangeAddress,
#orderAddCustomer,
#orderAddAddress{
  border-color:#87cdd1;
  background:#e2f5f4;
  color:#076d74;
  font-weight:750;
}
#orderChangeCustomer:hover,
#orderChangeAddress:hover,
#orderAddCustomer:hover,
#orderAddAddress:hover{
  border-color:#5eb8bd;
  background:#d3efed;
}
#orderRetryLocation{
  border-color:#79d39a;
  background:#dcf8e5;
  color:#166534;
  font-weight:750;
}
.order-delivery-settings{
  padding:12px;
  border:1px solid #d7e2e8;
  border-radius:12px;
  background:#f7fafc;
}
.order-item-composer{
  border-color:#addadd;
  background:linear-gradient(135deg,#f4fbfb 0%,#eaf7f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(15,118,128,.05);
}
#orderAddItem{
  border-color:#078c8c;
  background:#078c8c;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 14px rgba(7,140,140,.2);
}
#orderAddItem:hover{
  border-color:#067878;
  background:#067878;
}
#orderCancelEditItem{
  border-color:#cbd5df;
  background:#eef2f6;
  color:#475569;
}
.order-items-desktop{
  overflow:hidden;
  border:1px solid #c9dfe2;
  border-radius:12px;
  box-shadow:0 5px 14px rgba(15,118,128,.05);
}
.order-global-bill-summary{
  border-color:#9fd4d7;
  background:linear-gradient(135deg,#effafa 0%,#e4f5f5 100%);
  box-shadow:0 7px 18px rgba(7,140,140,.09);
}
.order-global-bill-summary .order-quota-due>strong{
  color:#067f85;
  font-size:23px;
  font-weight:850;
}
.order-promotion-box{
  border-color:#d2c4ee;
  border-left:4px solid #7652bd;
  background:linear-gradient(135deg,#faf8ff 0%,#f2edff 100%);
  box-shadow:0 6px 16px rgba(108,67,192,.07);
}
.order-promotion-box .order-section-title-row h3{color:#6542a6}
.order-promotion-box .order-section-title-row h3>i{color:#7652bd}
.order-promotion-selected{
  border:1px solid #d8caf3;
  background:#eae3fb;
}
.order-promotion-selected strong{color:#5f3e9e}
#orderPromotionOpen{
  border-color:#7652bd;
  background:#7652bd;
  color:#fff;
  font-weight:750;
  box-shadow:0 5px 12px rgba(108,67,192,.18);
}
#orderPromotionOpen:hover{
  border-color:#6241a2;
  background:#6241a2;
}
.order-shortage-choice{
  margin-top:14px;
  padding:14px;
  border:1px solid #acd7df;
  border-radius:12px;
  background:linear-gradient(135deg,#f1fafb 0%,#e8f5f8 100%);
  box-shadow:0 5px 14px rgba(40,122,155,.07);
}
.order-funding-resolution .label{
  color:#176b7b;
  font-weight:800;
}
.order-funding-resolution .input{
  border-color:#83bcc8;
  background:#fff;
}
#orderPaymentSection{
  margin-top:16px;
  padding:15px;
  border:1px solid #c8dce5;
  border-radius:12px;
  background:#f5f9fb;
}
#orderPaymentSection h2{color:#287a9b}
#orderNotesSection{
  margin-top:16px;
  padding:15px;
  border:1px solid #dde3e8;
  border-radius:12px;
  background:#fafbfc;
}
.order-form-actions>.btn:not(.btn-primary){
  border-color:#c7d1db;
  background:#eef2f5;
  color:#334155;
  font-weight:750;
}
.order-form-actions>.btn-primary{box-shadow:0 8px 18px rgba(7,140,140,.22)}

@media (max-width:760px){
  .order-stage5-card{box-shadow:0 8px 22px rgba(15,77,84,.06)}
  .order-delivery-settings{padding:10px}
  .order-item-card{
    border-color:#b9dfe2;
    border-left:4px solid #159ba1;
    background:linear-gradient(135deg,#fff 0%,#f2fbfb 100%);
    box-shadow:0 6px 16px rgba(15,118,128,.07);
  }
  #orderAddItem{width:auto}
  .order-promotion-box .order-section-title-row{align-items:center}
  #orderPromotionOpen{max-width:180px}
  #orderPaymentSection,
  #orderNotesSection{
    margin-right:-2px;
    margin-left:-2px;
    padding:13px;
  }
}

/* Terima Laundry — koreksi tombol dan struktur Pembayaran 2026-08-19 */
#orderAddCustomer,
#orderAddAddress{
  border-color:#078c8c;
  background:#078c8c;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 14px rgba(7,140,140,.22);
}
#orderAddCustomer:hover,
#orderAddAddress:hover{
  border-color:#067878;
  background:#067878;
  color:#fff;
}
#orderChangeCustomer,
#orderChangeAddress{
  border-color:#e97816;
  background:#e97816;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 14px rgba(217,101,66,.22);
}
#orderChangeCustomer:hover,
#orderChangeAddress:hover{
  border-color:#c85f0c;
  background:#c85f0c;
  color:#fff;
}
#orderPaymentSection{
  margin-top:0;
  padding:17px 0;
  border:0;
  border-top:1px solid var(--bd);
  border-radius:0;
  background:transparent;
}
#orderPaymentSection>h2{color:var(--primary)}
#orderPaymentSection>.group{
  padding:13px;
  border:1px solid #c8dce5;
  border-radius:12px;
  background:#f5f9fb;
}

@media (max-width:760px){
  #orderPaymentSection{
    margin-right:0;
    margin-left:0;
    padding:17px 0;
  }
  #orderPaymentSection>.group{padding:12px}
}

/* Terima Laundry — perapian alur layanan, promo, dan pembayaran 2026-08-19 */
.order-item-composer[hidden]~.order-items-desktop,
.order-item-composer[hidden]~.order-items-mobile{
  margin-top:0;
}
.order-service-speed-heading>div{
  display:flex;
  align-items:center;
  min-height:42px;
}
.order-service-speed-heading .label{margin:0}
.order-promotion-box .order-section-title-row{align-items:center}
.order-promotion-box .order-section-title-row h3{margin:0}
#orderPaymentSection>.order-payment-form-card{
  padding:13px;
  border:1px solid #c8dce5;
  border-radius:12px;
  background:linear-gradient(135deg,#f5f9fb 0%,#edf6f8 100%);
}
#orderPaymentSection .order-shortage-choice{
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#orderPaymentSection .order-funding-resolution,
#orderPaymentMethodGroup{
  width:100%;
  max-width:none;
}
#orderShortageChoice:not([hidden])+#orderPaymentMethodGroup:not([hidden]){
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid #c8dce5;
}

@media (max-width:760px){
  #orderPaymentSection>.order-payment-form-card{padding:12px}
}

/* Top Up Paket — satu bahasa visual dengan Terima Laundry 2026-08-20 */
.quota-topup-card{
  border-color:#d5e3e8;
  box-shadow:0 12px 30px rgba(15,77,84,.07);
}
.quota-topup-page-title{
  margin:0 0 8px;
  color:var(--primary);
  font-size:22px;
  line-height:1.25;
}
.quota-topup-section{
  padding:17px 0;
  border-bottom:1px solid var(--line);
}
.quota-topup-section>h2,
.quota-topup-section-title-row>h2{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  color:var(--primary);
  font-size:15px;
  line-height:1.3;
}
.quota-topup-section>h2>i,
.quota-topup-section-title-row>h2>i{
  display:inline-grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:#e4f5f5;
  color:#087f86;
  box-shadow:inset 0 0 0 1px rgba(8,127,134,.08);
}
.quota-topup-outlet-section{padding-top:9px}
.quota-topup-outlet-section .quota-sale-location-row{
  padding:0;
  border:0;
}
.quota-topup-outlet-section .quota-location-actions{
  width:100%;
  justify-content:space-between;
  padding:12px;
  border:1px solid #79d39a;
  border-radius:12px;
  background:linear-gradient(135deg,#effcf4 0%,#e5f9ec 100%);
  box-shadow:0 5px 14px rgba(22,101,52,.06);
}
.quota-topup-outlet-section .quota-location-badge{
  padding:0;
  border:0;
  background:transparent;
  font-size:13px;
  box-shadow:none;
}
.quota-topup-outlet-section #retryLocation{
  min-height:42px;
  border-color:#79d39a;
  background:#dcf8e5;
  color:#166534;
  font-weight:800;
}
.quota-topup-section .quota-inline-search .input,
.quota-topup-section .input{border-color:#c6d5de}
.quota-add-customer-button,
#addPackage{
  border-color:#078c8c;
  background:#078c8c;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 14px rgba(7,140,140,.2);
}
.quota-add-customer-button:hover,
#addPackage:hover{
  border-color:#067878;
  background:#067878;
  color:#fff;
}
.quota-selected-customer-compact{
  border-color:#b9dfe2;
  background:linear-gradient(135deg,#f3fbfb 0%,#edf8fa 100%);
  box-shadow:0 5px 14px rgba(15,118,128,.06);
}
#clearCustomer{
  border-color:#e97816;
  background:#e97816;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 14px rgba(217,101,66,.2);
}
.quota-topup-composer{
  padding:13px;
  border:1px solid #addadd;
  border-radius:12px;
  background:linear-gradient(135deg,#f4fbfb 0%,#eaf7f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(15,118,128,.05);
}
.quota-topup-package-section .quota-selected-packages{margin-top:12px}
.quota-topup-package-section .quota-selected-package-card{
  border-color:#b9dfe2;
  border-left:4px solid #159ba1;
  background:linear-gradient(135deg,#fff 0%,#f2fbfb 100%);
  box-shadow:0 6px 16px rgba(15,118,128,.07);
}
.quota-topup-bill-summary{
  margin:16px 0;
  padding:15px;
  border:1px solid #9fd4d7!important;
  border-radius:12px;
  background:linear-gradient(135deg,#effafa 0%,#e4f5f5 100%);
  box-shadow:0 7px 18px rgba(7,140,140,.09);
}
.quota-topup-bill-summary .summary-line.total strong{
  color:#067f85;
  font-size:23px;
  font-weight:850;
}
.quota-topup-promotion-box{
  margin:0 0 16px;
  padding:15px;
  border:1px solid #d2c4ee!important;
  border-left:4px solid #7652bd!important;
  border-radius:12px;
  background:linear-gradient(135deg,#faf8ff 0%,#f2edff 100%);
  box-shadow:0 6px 16px rgba(108,67,192,.07);
}
.quota-topup-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.quota-topup-section-title-row>h2{
  margin:0;
  color:#6542a6;
}
.quota-topup-section-title-row>h2>i{
  background:#eee7fd;
  color:#7652bd;
}
.quota-topup-promotion-box .quota-promo-button{
  margin:0;
  border-color:#7652bd;
  background:#7652bd;
  color:#fff;
  font-weight:800;
  box-shadow:0 5px 12px rgba(108,67,192,.18);
}
.quota-topup-promotion-box .quota-promo-benefit{
  margin-top:12px;
  border:1px solid #d8caf3;
  background:#eae3fb;
}
.quota-topup-promotion-box .quota-promo-benefit strong{color:#5f3e9e}
.quota-topup-payment-section{padding-top:17px}
.quota-topup-payment-card{
  padding:13px;
  border:1px solid #c8dce5;
  border-radius:12px;
  background:linear-gradient(135deg,#f5f9fb 0%,#edf6f8 100%);
}
.quota-topup-payment-card .quota-payment-picker-row>.btn{
  border-color:#287a9b;
  background:#287a9b;
  color:#fff;
  font-weight:800;
}
.quota-topup-payment-card .quota-payment-picker-row>.btn:disabled{opacity:.45}
.quota-sale-form-actions>.btn:not(.btn-primary-ml){
  border-color:#c7d1db;
  background:#eef2f5;
  color:#334155;
  font-weight:750;
}
.quota-sale-form-actions>.btn-primary-ml{
  background:#078c8c;
  color:#fff;
  box-shadow:0 8px 18px rgba(7,140,140,.22);
}
.order-promo-modal-head #promoClose{
  position:absolute;
  top:50%;
  right:14px;
  margin:0;
  transform:translateY(-50%);
}
.order-promo-terms-hero-icon.is-promo-voucher{background:linear-gradient(145deg,#25cec0,#079da7)}

@media(max-width:700px){
  .quota-topup-card{box-shadow:0 8px 22px rgba(15,77,84,.06)}
  .quota-topup-page-title{font-size:20px}
  .quota-topup-outlet-section .quota-location-actions{align-items:center}
  .quota-topup-outlet-section .quota-location-badge{max-width:calc(100% - 132px)}
  .quota-topup-composer{padding:12px}
  .quota-topup-section-title-row{align-items:center}
  .quota-topup-promotion-box{padding:13px}
  .quota-topup-promotion-box .quota-promo-button{max-width:180px}
  .quota-topup-payment-card{padding:12px}
}

/* Penjualan Barang — satu bahasa visual dengan Terima Laundry 2026-08-20 */
.page.merchandise-sale-form-page{max-width:var(--page-max)!important;margin-right:auto!important;margin-left:auto!important}
.merchandise-sale-layout{grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.merchandise-sale-panel{
  border-color:#d5e3e8;
  box-shadow:0 12px 30px rgba(15,77,84,.07);
}
.merchandise-sale-main,.merchandise-sale-summary{padding:18px}
.merchandise-sale-head h1{margin:0;color:var(--primary);font-size:22px;line-height:1.25}
.merchandise-sale-head p{margin:5px 0 0;color:var(--muted)}
.merchandise-sale-section{padding:17px 0;border-top:1px solid var(--bd)}
.merchandise-sale-head+.merchandise-sale-section{border-top:0}
.merchandise-sale-section>h2,
.merchandise-items-head h2{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  color:var(--primary);
  font-size:15px;
  line-height:1.3;
}
.merchandise-sale-section>h2>i,
.merchandise-items-head h2>i{
  display:inline-grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:#e4f5f5;
  color:#087f86;
  box-shadow:inset 0 0 0 1px rgba(8,127,134,.08);
}
.merchandise-optional{
  margin-left:-3px;
  color:#7b8794;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
}
.merchandise-outlet-group{margin:0}
.merchandise-location-box{
  display:flex;
  align-items:center;
  min-height:58px;
  gap:11px;
  padding:13px 15px;
  border:1px solid #7ddd9f;
  border-radius:13px;
  background:linear-gradient(135deg,#effdf3 0%,#e5f9eb 100%);
  color:#14532d;
  box-shadow:0 5px 14px rgba(22,163,74,.07);
}
.merchandise-location-dot{
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  background:#1fb85b;
  box-shadow:0 0 0 5px rgba(31,184,91,.12);
}
.merchandise-location-box strong{font-size:15px}
.merchandise-customer-group{
  margin:0;
  padding:13px;
  border:1px solid #addadd;
  border-radius:13px;
  background:linear-gradient(135deg,#f4fbfb 0%,#eaf7f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(15,118,128,.05);
}
.merchandise-customer-group .input{border-color:#b8d2da;background:#fff}
#clearMerchandiseCustomer{
  border-color:#f0b06f;
  background:#fff4e8;
  color:#c45d0b;
}
.merchandise-items-section{padding-bottom:0}
.merchandise-items-head{align-items:center;margin:0 0 12px}
.merchandise-items-head h2{margin:0}
.merchandise-items-head p{margin:4px 0 0}
.merchandise-lines-wrap{
  overflow:hidden;
  border:1px solid #c9dfe2;
  border-radius:13px;
  background:#fff;
  box-shadow:0 5px 14px rgba(15,118,128,.05);
}
.merchandise-lines-table{margin:0}
.merchandise-lines-table thead th{background:#eef8f9;color:#176b72}
.merchandise-lines-empty{margin-top:10px;border-color:#c9dfe2;background:#f8fbfc;color:var(--muted)}
.merchandise-sale-summary{position:sticky;top:92px}
.merchandise-payment-section{padding-top:0;border-top:0}
.merchandise-payment-card{
  padding:13px;
  border:1px solid #c8dce5;
  border-radius:12px;
  background:linear-gradient(135deg,#f5f9fb 0%,#edf6f8 100%);
}
.merchandise-payment-card .group{margin:0}
.merchandise-payment-section .merchandise-bill-summary{margin:0 0 14px}
.merchandise-quantity-control{display:block}
.merchandise-quantity-unit{display:none}
.merchandise-stock-warning{margin-top:4px;color:#b45309;font-weight:750}
.merchandise-bill-summary{
  display:grid;
  gap:9px;
  margin-top:16px;
  padding:15px;
  border:1px solid #9fd4d7;
  border-radius:13px;
  background:linear-gradient(135deg,#effafa 0%,#e4f5f5 100%);
  box-shadow:0 7px 18px rgba(7,140,140,.09);
}
.merchandise-bill-summary .summary-line{margin:0;padding:0;border:0}
.merchandise-bill-summary .summary-line.total{
  margin-top:3px;
  padding-top:12px;
  border-top:1px solid #b8dfe1;
}
.merchandise-bill-summary .summary-line.total strong{color:#067f85;font-size:23px;font-weight:850}
.merchandise-form-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px;margin-top:16px}
.merchandise-form-actions>.btn{min-width:0}
.merchandise-form-actions>.btn:not(.btn-primary-ml){border-color:#c7d1db;background:#eef2f5;color:#334155;font-weight:750}
.merchandise-form-actions>.btn-primary-ml{background:#078c8c;color:#fff;font-weight:800;box-shadow:0 8px 18px rgba(7,140,140,.22)}

@media(max-width:1100px){
  .merchandise-sale-layout{grid-template-columns:minmax(0,1fr) 300px}
}

@media(max-width:760px){
  .merchandise-sale-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .merchandise-sale-main,.merchandise-sale-summary{padding:14px}
  .merchandise-sale-summary{position:static}
  .merchandise-sale-head h1{font-size:20px}
  .merchandise-items-head{align-items:center;flex-direction:row}
  .merchandise-items-head>div{min-width:0}
  .merchandise-lines-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .merchandise-lines-table tbody{gap:12px}
  .merchandise-lines-table tr{
    position:relative;
    border-color:#b9dfe2;
    border-left:4px solid #159ba1;
    background:linear-gradient(135deg,#fff 0%,#f2fbfb 100%);
    box-shadow:0 6px 16px rgba(15,118,128,.07);
  }
  .merchandise-lines-table .js-unit{display:none}
  .merchandise-lines-table .merchandise-quantity-cell{grid-column:1}
  .merchandise-lines-table .js-price{grid-column:2;text-align:right!important}
  .merchandise-quantity-control{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
  }
  .merchandise-quantity-control .merchandise-qty{
    min-width:0;
    width:100%;
    border-radius:10px 0 0 10px;
  }
  .merchandise-quantity-unit{
    display:flex;
    min-width:58px;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid #b8d2da;
    border-left:0;
    border-radius:0 10px 10px 0;
    background:#f8fbfc;
    color:#64748b;
    font-weight:800;
  }
  .merchandise-lines-table .merchandise-line-subtotal{
    display:flex;
    grid-column:1/-1;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:2px;
    padding-top:12px!important;
    border-top:2px solid #9fd4d7!important;
    color:#078c8c;
    font-size:16px;
    font-weight:850;
    text-align:right!important;
  }
  .merchandise-lines-table .merchandise-line-subtotal::before{
    color:#1f2937;
    font-size:14px;
    font-weight:800;
  }
  .merchandise-form-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}

/* Penjualan Barang — form input tunggal dan keranjang ringkas 2026-08-20 */
.merchandise-item-entry{
  padding:14px;
  border:1px solid #addadd;
  border-radius:14px;
  background:linear-gradient(135deg,#f4fbfb 0%,#eaf7f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(15,118,128,.05);
}
.merchandise-entry-item{margin:0}
.merchandise-entry-details{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(145px,.7fr);
  gap:14px;
  align-items:end;
  margin-top:13px;
}
.merchandise-entry-details>.group{margin:0}
.merchandise-entry-price{
  display:grid;
  min-height:70px;
  align-content:center;
  justify-items:end;
  gap:8px;
  padding:8px 4px;
}
.merchandise-entry-price>span{color:#64748b;font-size:12px;font-weight:750}
.merchandise-entry-price>strong{color:#1f2937;font-size:16px}
.merchandise-item-entry .merchandise-quantity-control,
.merchandise-cart-table .merchandise-quantity-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:100%;
}
.merchandise-item-entry .merchandise-qty,
.merchandise-cart-table .merchandise-qty{
  min-width:0;
  width:100%;
  border-radius:10px 0 0 10px;
}
.merchandise-item-entry .merchandise-quantity-unit,
.merchandise-cart-table .merchandise-quantity-unit{
  display:flex;
  min-width:58px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #b8d2da;
  border-left:0;
  border-radius:0 10px 10px 0;
  background:#f8fbfc;
  color:#64748b;
  font-weight:800;
}
.merchandise-add-to-cart{
  min-width:150px;
  margin-top:14px;
  background:#078c8c;
  color:#fff;
  font-weight:800;
  box-shadow:0 7px 16px rgba(7,140,140,.2);
}
.merchandise-add-to-cart:disabled{border-color:#cbd5e1;background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}
.merchandise-cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 9px}
.merchandise-cart-head h3{display:flex;align-items:center;gap:9px;margin:0;color:var(--primary);font-size:15px;line-height:1.3}
.merchandise-cart-head h3>i{display:inline-grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:9px;background:#e4f5f5;color:#087f86;box-shadow:inset 0 0 0 1px rgba(8,127,134,.08)}
.merchandise-cart-head .badge{background:#e5f7f7;color:#087f86}
.merchandise-cart-table td:first-child{min-width:190px}
.merchandise-cart-item strong,.merchandise-cart-item small{display:block}
.merchandise-cart-item strong{color:#174f54}
.merchandise-cart-item small{margin-top:4px;color:#64748b;font-size:11px}
.merchandise-cart-table .merchandise-quantity-control{min-width:130px}
.merchandise-cart-table .merchandise-line-subtotal{color:#078c8c;font-weight:850}

/* PENJUALAN BARANG - KERANJANG GAYA STRUK */
.merchandise-entry-details{align-items:start}
.merchandise-entry-price{
  grid-template-rows:auto 44px;
  min-height:0;
  align-content:start;
  gap:6px;
  padding:0 4px;
}
.merchandise-entry-price>strong{display:flex;height:44px;align-items:center;justify-content:flex-end}
.merchandise-receipt-cart{display:grid;gap:0;border:1px solid #c7e0e2;border-radius:14px;background:#fff;padding:2px 14px}
.merchandise-receipt-line{padding:13px 0;border-bottom:1px dashed #b9cfd1}
.merchandise-receipt-line:last-child{border-bottom:0}
.merchandise-receipt-line-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.merchandise-receipt-line-head>strong{min-width:0;color:#174f54;font-size:15px;overflow-wrap:anywhere}
.merchandise-receipt-remove{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border:1px solid #fecaca;border-radius:8px;background:#fff;color:#e5484d;cursor:pointer}
.merchandise-receipt-calc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;color:#475569}
.merchandise-receipt-stepper{display:grid;width:110px;height:38px;min-width:110px;grid-template-columns:34px 40px 34px;align-items:stretch;gap:0;box-sizing:border-box;padding:0;overflow:hidden;border:1px solid #a9ced1;border-radius:10px;background:#fff;box-shadow:inset 0 1px 2px rgba(8,127,134,.05)}
.merchandise-receipt-stepper button{display:grid;width:auto!important;height:100%;min-width:0!important;max-width:none!important;place-items:center;padding:0!important;border:0;border-radius:0;background:#eef8f9;color:#078c8c;font:inherit;line-height:1;cursor:pointer}
.merchandise-receipt-stepper button>span{display:block;line-height:1;font-size:18px;font-weight:500;transform:translateY(-2px)}
.merchandise-receipt-stepper button:first-child{border-right:1px solid #c8e0e2}
.merchandise-receipt-stepper button:last-child{border-left:1px solid #c8e0e2}
.merchandise-receipt-stepper button:active{background:#d8eeee}
.merchandise-receipt-qty{display:flex;width:40px;height:100%;min-width:40px;flex:0 0 40px;align-items:center;justify-content:center;border:0;background:#fff;color:#173e42;font-size:14px;font-weight:850;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.merchandise-receipt-rate{display:flex;min-width:0;align-items:center;gap:5px;white-space:nowrap}
.merchandise-receipt-unit{font-size:12px;font-weight:800;color:#64748b}
.merchandise-receipt-times{color:#078c8c;font-size:12px;font-weight:900}
.merchandise-receipt-price{white-space:nowrap;font-size:13px}
.merchandise-receipt-line-total{min-width:0;color:#1f2937;text-align:right;white-space:nowrap;font-size:14px}
.merchandise-receipt-total{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:13px 3px 2px;border-top:2px solid #94c8cc;color:#1f2937;font-weight:850}
.merchandise-receipt-total strong{color:#078c8c;font-size:18px}

@media(max-width:760px){
  .merchandise-entry-details{grid-template-columns:minmax(0,1fr) minmax(125px,.72fr);gap:10px}
  .merchandise-entry-price{min-height:68px;padding-right:2px}
  .merchandise-add-to-cart{width:auto;min-width:138px}
  .merchandise-cart-table tr{grid-template-columns:minmax(0,1fr) minmax(110px,.7fr)}
  .merchandise-cart-table .merchandise-cart-item{grid-column:1/-1}
  .merchandise-cart-table .merchandise-cart-price{grid-column:1;text-align:left!important}
  .merchandise-cart-table .merchandise-quantity-cell{grid-column:2}
  .merchandise-cart-table .merchandise-line-subtotal{grid-column:1/-1}
  .merchandise-cart-table .merchandise-line-action{grid-column:1/-1}
  .merchandise-receipt-cart{padding:1px 11px}
  .merchandise-receipt-calc{grid-template-columns:auto minmax(0,1fr) auto;gap:7px}
  .merchandise-receipt-price{font-size:12px}
  .merchandise-receipt-line-total{font-size:13px}
}

@media(max-width:380px){
  .merchandise-receipt-calc{grid-template-columns:auto minmax(0,1fr) auto;gap:5px}
  .merchandise-receipt-rate{gap:3px}
  .merchandise-receipt-price{font-size:11px}
}

/* Dashboard kurir & produksi — bottom action 2026-08-20 */
.role-dashboard-courier{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
.role-dashboard-production:has(.production-bottom-action){padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.courier-bottom-nav{position:fixed;z-index:905;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;min-height:72px;padding:5px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid #dbe5e8;background:rgba(255,255,255,.97);box-shadow:0 -6px 22px rgba(15,69,75,.08);backdrop-filter:blur(10px)}
.courier-bottom-nav-link{display:flex;min-width:0;height:56px;align-self:center;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-radius:12px;color:var(--primary);font-size:10px;font-weight:800;line-height:1.1;text-align:center;text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease;opacity:.92}
.courier-bottom-nav-link:hover,.courier-bottom-nav-link:focus-visible{background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);outline:none;opacity:1}
.courier-bottom-nav-link i{font-size:20px;line-height:1}
.courier-bottom-nav-link span{display:block;max-width:100%;overflow-wrap:anywhere}
.courier-bottom-nav-link.is-primary{position:relative;top:-9px;width:64px;height:64px;margin:0 auto;padding:5px 6px;border:5px solid #f5f7fa;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 84%,#fff),var(--primary));color:#fff;box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 30%,transparent);opacity:1}
.courier-bottom-nav-link.is-primary:hover,.courier-bottom-nav-link.is-primary:focus-visible{background:var(--primary);color:#fff;transform:translateY(-1px)}
.courier-bottom-nav-link.is-primary i{font-size:21px}
.courier-bottom-nav-link.is-primary span{font-size:9px;line-height:1.05}
.production-bottom-action{position:fixed;z-index:905;right:0;bottom:0;left:0;display:flex;min-height:34px;align-items:flex-end;justify-content:center;padding:0 max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid #dbe5e8;background:rgba(255,255,255,.97);box-shadow:0 -4px 14px rgba(15,69,75,.06);backdrop-filter:blur(10px)}
.production-bottom-action-link{position:relative;top:-18px;display:flex;width:64px;height:64px;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:5px 6px;border:5px solid #f5f7fa;border-radius:50%;background:linear-gradient(145deg,#ffb431,#ea7a00);color:#fff;font-size:9px;font-weight:800;line-height:1.05;text-align:center;text-decoration:none;box-shadow:0 10px 24px rgba(234,122,0,.30);transition:background .18s ease,transform .18s ease}
.production-bottom-action-link:hover,.production-bottom-action-link:focus-visible{background:linear-gradient(145deg,#ffbd48,#df7000);color:#fff;outline:none;transform:translateY(-1px)}
.production-bottom-action-link i{font-size:21px;line-height:1}

/* Proses Nota — penyegaran visual 2026-08-20 */
.process-work-page{max-width:900px}
.process-order-sheet{max-width:860px;margin-right:auto;margin-left:auto;border:1px solid #dbe5e8;box-shadow:0 6px 22px rgba(15,69,75,.06)}
.process-order-head{align-items:center;padding-bottom:14px}
.process-order-head>div{min-width:0}
.process-order-head h1{font-size:28px;line-height:1.15;letter-spacing:.01em}
.process-order-head p{font-size:13px;line-height:1.4}
.process-order-head .btn{flex:0 0 auto;min-height:38px;padding:8px 12px;border-color:#cfe7ea;border-radius:10px;background:#f4fbfc;color:var(--primary);font-size:12px;font-weight:800;box-shadow:none}
.process-order-head .btn:hover,.process-order-head .btn:focus-visible{border-color:color-mix(in srgb,var(--primary) 35%,#cfe7ea);background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary)}
.process-order-sheet>.alert-success{margin:14px 0 0;padding:10px 12px;border:1px solid #a8e0bf;border-radius:10px;background:#effcf4;color:#24724a;font-size:13px;font-weight:700;line-height:1.4;box-shadow:none}
.process-order-summary{margin-top:14px;overflow:hidden;border-color:#dfe7ea;background:#fbfcfd}
.process-order-summary>div{min-height:68px;justify-content:center;padding:11px 13px}
.process-order-summary span{font-size:11px}
.process-order-summary strong{font-size:13px;line-height:1.35}
.process-service-list{min-width:0;gap:12px;margin-top:14px}
.process-service-block{min-width:0;overflow:hidden;padding:14px;border-color:#dfe7ea;border-radius:14px;box-shadow:0 4px 14px rgba(15,69,75,.035)}
.process-service-head>div:first-child{min-width:0}
.process-service-head h2{font-size:18px;line-height:1.25}
.process-service-head p{font-size:13px}
.process-stepper{width:100%;min-width:0;overflow-x:auto;margin-top:15px;padding:4px 0 7px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.process-stepper::-webkit-scrollbar{display:none}
.process-step{min-width:88px;flex:1 1 88px;gap:6px;padding:0 4px;font-size:11px;line-height:1.2}
.process-step:not(:last-child)::after{top:16px;left:calc(50% + 17px);right:calc(-50% + 17px);height:2px}
.process-step-dot{width:34px;height:34px}
.process-step-icon{font-size:15px}
.process-step-status{margin-top:2px;padding:2px 6px;font-size:.62rem}
.process-issue-note{align-items:flex-start;gap:8px;margin-top:12px;padding:9px 10px;border:1px solid #f1d398;border-radius:10px;background:#fffaf0;color:#8a5a00;font-size:12px;font-weight:700;line-height:1.45}
.process-issue-note i{flex:0 0 auto;margin-top:1px}

@media(max-width:760px){
  .process-order-sheet{padding:14px}
  .process-order-head{align-items:center;flex-direction:row;gap:10px;padding-bottom:12px}
  .process-order-head h1{font-size:25px}
  .process-order-head p{margin-top:4px;font-size:12px}
  .process-order-head .btn{min-height:36px;padding:7px 10px;white-space:nowrap}
  .process-order-summary{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
  .process-order-summary>div{min-height:61px;padding:9px 10px;border-right:0;border-bottom:1px solid var(--bd)}
  .process-order-summary>div:nth-child(1){border-right:1px solid var(--bd)}
  .process-order-summary>div:nth-child(2){border-right:0}
  .process-order-summary>div:nth-child(3){grid-column:1/-1;border-bottom:0}
  .process-service-block{padding:13px 11px}
  .process-service-head{align-items:flex-start;flex-direction:row}
  .process-service-head h2{font-size:17px}
  .process-option-tags{justify-content:flex-end}
  .process-step{min-width:76px;flex:1 1 76px;gap:5px;padding:0 2px;font-size:10.5px}
  .process-step:not(:last-child)::after{left:calc(50% + 16px);right:calc(-50% + 16px)}
  .process-step-dot{width:32px;height:32px}
  .process-step-status{font-size:.58rem;padding:2px 5px}
  .process-issue-note{padding:8px 9px;font-size:11.5px}
}

@media(max-width:380px){
  .process-order-head{align-items:flex-start}
  .process-order-head .btn{padding:7px 8px;font-size:11px}
  .process-step{min-width:72px;flex-basis:72px}
}

/* Detail Nota ringkas — identitas, status ikon, layanan, proses, versi 2026-08-20 */
.order-detail-page{width:100%;max-width:760px;margin-right:auto;margin-left:auto;padding-right:14px;padding-bottom:28px;padding-left:14px}
.order-detail-card{overflow:visible;padding:0!important;border:1px solid #dbe5e8;border-radius:16px;background:#fff;box-shadow:0 7px 24px rgba(15,69,75,.055)}
.order-detail-head{display:grid;gap:0;padding:14px 16px 12px}
.order-detail-back{display:inline-flex;width:max-content;align-items:center;gap:5px;margin-bottom:11px;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}
.order-detail-back i{font-size:15px}
.order-detail-outlet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#284f56;font-size:12px}
.order-detail-outlet-row>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-detail-number-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}
.order-detail-number-row h1{display:flex;min-width:0;align-items:center;gap:5px;margin:0;color:var(--txt);font-size:18px;line-height:1.15;letter-spacing:.01em;font-weight:850}
.order-detail-express{color:#f59e0b;font-size:.78em;filter:drop-shadow(0 2px 4px rgba(245,158,11,.18))}
.order-detail-version-badge,.order-detail-version-readonly{display:inline-flex;width:auto;min-width:0;min-height:0;flex:0 0 auto;align-items:center;gap:4px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--primary) 20%,#dbe5e8);border-radius:999px;background:color-mix(in srgb,var(--primary) 6%,#fff);color:var(--primary);font-size:9px;font-weight:800;line-height:1.15;text-decoration:none;white-space:nowrap}
button.order-detail-version-badge{cursor:pointer}
.order-detail-version-readonly{width:max-content;margin:0 0 10px auto;color:#60777c;border-color:#dce7e9;background:#f7fafb}
.order-detail-customer{display:flex;min-width:0;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:7px;color:var(--txt);font-size:12px}
.order-detail-customer strong{color:var(--txt);font-size:19px;line-height:1.2}.order-detail-customer span{color:var(--muted);font-size:11px}
.order-detail-date{margin-top:3px;color:#71868b;font-size:11px}
.order-detail-actor{margin-top:3px;color:#7a8c90;font-size:10.5px}.order-detail-actor strong{color:#516a70;font-weight:800}
.order-detail-delivery{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:7px 9px;border-radius:9px;background:#f3f8ff;color:#2563eb;font-size:11px;font-weight:750;line-height:1.35;text-decoration:none}
.order-detail-delivery>i:first-child{flex:0 0 auto;margin-top:1px;font-size:14px}.order-detail-delivery>span{min-width:0;flex:1}.order-detail-delivery>i:last-child{flex:0 0 auto;color:#7aa2e9;font-size:10px}
.order-detail-note{display:flex;align-items:flex-start;gap:7px;margin-top:8px;color:#6b7d81;font-size:11px;line-height:1.4}.order-detail-note i{flex:0 0 auto;margin-top:1px;color:#8ca1a6}
.order-detail-cancelled{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:9px 10px;border:1px solid #fecaca;border-radius:10px;background:#fff7f7;color:#a33b3b}.order-detail-cancelled>i{margin-top:1px;font-size:16px}.order-detail-cancelled>div{display:flex;min-width:0;flex-direction:column;gap:2px}.order-detail-cancelled strong{font-size:12px}.order-detail-cancelled span{font-size:10.5px;line-height:1.35}

.order-detail-overall-stepper{display:flex;width:min(220px,calc(100% - 48px));align-items:center;justify-content:center;margin:0 auto;padding:7px 0 9px;border-top:1px solid #eef3f4}
.order-detail-overall-step{display:flex;flex:0 0 26px;align-items:center;justify-content:center}
.order-detail-overall-step>span{display:grid;width:24px;height:24px;place-items:center;border:0;border-radius:50%;background:transparent;color:#a6b3b6;font-size:13px;transition:.18s ease}
.order-detail-overall-step.is-completed>span{background:transparent;color:var(--primary)}
.order-detail-overall-step.is-active>span{background:transparent;color:#b1bdc0;box-shadow:none}
.order-detail-overall-step.is-locked>span{background:transparent;color:#b1bdc0}
.order-detail-step-line{display:block;height:1px;min-width:18px;flex:1;background:#dde5e7}.order-detail-step-line.is-completed{background:color-mix(in srgb,var(--primary) 52%,#dde5e7)}

.order-detail-count-section{margin:0 14px 12px!important;padding:12px!important;border-radius:11px!important;box-shadow:none!important}.order-detail-count-section .order-admin-section-title{margin-bottom:8px}.order-detail-count-section .order-admin-section-title h2{font-size:13px}.order-detail-count-section .alert{margin:7px 0;padding:8px 9px;font-size:11px}.order-detail-count-section .group{margin-bottom:8px}

.order-detail-services{display:grid;border-top:1px solid #e9eff0}
.order-detail-service{padding:12px 16px;border-bottom:1px solid #edf2f3;background:#fff}
.order-detail-service-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.order-detail-service-title{display:flex;min-width:0;align-items:center;gap:5px;color:var(--txt)}.order-detail-service-title>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);font-size:13px;line-height:1.25}
.order-detail-addon-icons{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;color:var(--primary);font-size:13px}.order-detail-addon-icons .bi-droplet-fill{color:#2563eb}
.order-detail-service-values{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}.order-detail-value-separator{color:#c7d0d3;font-size:10px;font-style:normal;font-weight:400}
.order-detail-amount{min-height:0!important;padding:0;border:0;background:transparent;color:var(--txt);font:inherit;font-size:12px;font-weight:900;cursor:pointer;text-decoration:none}.order-detail-amount:hover,.order-detail-amount:focus-visible{color:var(--primary);text-decoration:underline;outline:none}

.order-detail-process-track{display:flex;width:min(220px,100%);align-items:center;margin-top:6px}
.order-detail-process-icon{position:relative;display:grid;flex:0 0 24px;width:24px;height:24px;min-height:0!important;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#a8b4b7;font-size:12px;line-height:1;appearance:none;transition:color .16s ease,background .16s ease}
button.order-detail-process-icon{cursor:pointer}.order-detail-process-icon.is-completed{background:transparent;color:var(--primary)}.order-detail-process-icon.is-active{background:transparent;color:#b3bec1;box-shadow:none}.order-detail-process-icon.is-locked{color:#b3bec1;background:transparent}.order-detail-process-icon.is-final{font-size:12px}
.order-detail-process-icon:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:1px}
.order-detail-process-check{display:none}
.order-detail-process-line{display:block;height:1px;min-width:10px;flex:1;background:#dfe6e8}.order-detail-process-line.is-completed{background:color-mix(in srgb,var(--primary) 50%,#dfe6e8)}

.order-detail-minimum-line,.order-detail-promo-line{display:flex;align-items:center;gap:7px;margin:0;padding:9px 16px;border-bottom:1px solid #edf2f3;background:#fbfdfd;font-size:11px;line-height:1.3}.order-detail-minimum-line>i{color:#74898e}.order-detail-minimum-line>span{flex:1;color:#718489}.order-detail-minimum-line>strong{color:#294d54}.order-detail-promo-line{background:#fffbf2;color:#805d15}.order-detail-promo-line>i{color:#e79b17;font-size:14px}.order-detail-promo-line>strong{font-size:11px}.order-detail-promo-line>span{min-width:0;flex:1}.order-detail-promo-line>em{padding:2px 6px;border-radius:999px;background:#fff0c9;font-size:9px;font-style:normal;font-weight:800}

.order-detail-payment{margin:0;padding:12px 16px 14px;border-top:0;background:#fff}.order-detail-payment>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.order-detail-payment h2{margin:0;color:#264b52;font-size:13px}.order-detail-payment-lines{display:grid;gap:5px}.order-detail-payment-lines>div{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#657b80;font-size:11px}.order-detail-payment-lines strong{color:#20474f;font-size:12px}.order-detail-payment-lines .is-due strong,.order-detail-payment-lines .is-refund strong{color:#c2410c}.order-detail-payment-lines .is-pending strong{color:#9a6a0c}.order-detail-payment-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.order-detail-payment-actions .btn{min-height:34px;padding:7px 10px;font-size:10.5px}.order-detail-payment-legacy{color:#8b6a2c;font-size:10.5px}
.order-detail-disclosure{margin:9px 0 0;border:1px solid #e6edef;border-radius:10px;background:#fbfdfd}.order-detail-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;color:#536d72;font-size:10.5px;font-weight:800;cursor:pointer;list-style:none}.order-detail-disclosure>summary::-webkit-details-marker{display:none}.order-detail-disclosure>summary span{display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:999px;background:#eaf4f5;color:var(--primary);font-size:9px}.order-detail-disclosure .order-admin-history-list,.order-detail-disclosure .order-admin-disclosure-body{padding:0 10px 10px}.order-detail-simulator{margin:10px 14px 14px}

/* Bottom sheet untuk rincian layanan, proses, dan versi nota */
body.order-detail-sheet-open{overflow:hidden}
.order-detail-page .order-detail-sheet,.order-detail-sheet{position:fixed!important;z-index:1450!important;inset:0!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;overflow:hidden!important;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.order-detail-page .order-detail-sheet.show,.order-detail-sheet.show{visibility:visible;opacity:1;pointer-events:none}
.order-detail-sheet-backdrop{position:absolute;z-index:0;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(15,23,42,.46);pointer-events:none}
.order-detail-sheet-panel{position:relative;z-index:1;width:min(680px,100%);max-height:min(78dvh,720px);overflow:hidden;pointer-events:auto;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -18px 50px rgba(15,23,42,.24);transform:translateY(14px);transition:transform .18s ease}
.order-detail-sheet.show .order-detail-sheet-panel{transform:translateY(0)}
.order-detail-sheet-handle{width:38px;height:4px;margin:7px auto 2px;border-radius:999px;background:#d3dddf}
.order-detail-sheet-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 14px 9px;border-bottom:1px solid #e9eff0}.order-detail-sheet-panel>header>div{min-width:0}.order-detail-sheet-panel>header small{display:block;margin-bottom:2px;color:#819296;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.order-detail-sheet-panel>header h2{margin:0;color:#1d474f;font-size:16px;line-height:1.25}.order-detail-sheet-panel>header>button{display:grid;flex:0 0 32px;width:32px;height:32px;place-items:center;padding:0;border:0;border-radius:9px;background:#f1f5f6;color:#5e7479;cursor:pointer}
.order-detail-sheet-body{max-height:calc(min(78dvh,720px) - 74px);overflow:auto;padding:12px 14px max(16px,env(safe-area-inset-bottom))}
.order-detail-work-log{padding:10px 0;border-bottom:1px solid #edf2f3}.order-detail-work-log:first-child{padding-top:0}.order-detail-work-log:last-child{padding-bottom:0;border-bottom:0}.order-detail-work-log-head,.order-detail-work-log-qty{display:flex;align-items:center;justify-content:space-between;gap:10px}.order-detail-work-log-head strong{color:#21464e;font-size:12px}.order-detail-work-log-head span{color:#849499;font-size:9.5px}.order-detail-work-log-qty{justify-content:flex-start;gap:7px;margin-top:5px}.order-detail-work-log-qty span{padding:3px 7px;border-radius:999px;background:#edf6f7;color:#416269;font-size:10px;font-weight:800}.order-detail-work-log p{margin:7px 0 0;color:#60757a;font-size:10.5px;line-height:1.4}.order-detail-sheet-empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px;color:#89999d;font-size:11px}.order-detail-sheet-empty i{font-size:23px;color:#a8b6b9}
.order-detail-calc-list{display:grid;gap:0}.order-detail-calc-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid #edf2f3;color:#5f7479;font-size:11px;line-height:1.35}.order-detail-calc-list span{min-width:0}.order-detail-calc-list strong{flex:0 0 auto;color:#21474f;font-size:11px}.order-detail-calc-list .is-discount strong{color:#078154}
.order-detail-quota-block{margin-top:11px;padding:10px;border:1px solid #d9eaec;border-radius:10px;background:#f8fcfc}.order-detail-quota-block>strong{display:block;margin-bottom:8px;color:#27545c;font-size:11px}.order-detail-quota-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;text-align:center}.order-detail-quota-table span{color:#809095;font-size:9px}.order-detail-quota-table strong{color:#1f515a;font-size:11px}.order-detail-quota-reserved{display:flex;align-items:center;gap:7px;margin-top:11px;padding:8px 9px;border-radius:9px;background:#f5f9fa;color:#647a7f;font-size:10.5px}.order-detail-quota-reserved i{color:var(--primary)}.order-detail-quota-reserved span{flex:1}.order-detail-quota-reserved strong{color:#24535b}
.order-detail-sheet-note{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 9px;border-radius:9px;background:#fffaf0;color:#795d24;font-size:10.5px;line-height:1.4}.order-detail-sheet-note i{flex:0 0 auto;margin-top:1px}.order-detail-calc-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:2px solid #e4ecee;color:#526b71;font-size:11px}.order-detail-calc-total strong{color:#0e5560;font-size:17px}
.order-detail-version-list{display:grid;gap:6px}.order-detail-version-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #e2eaec;border-radius:10px;background:#fff;color:#254a52;text-decoration:none}.order-detail-version-row>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.order-detail-version-row strong{font-size:11px}.order-detail-version-row span{color:#72868b;font-size:9.5px}.order-detail-version-row small{color:#536e74;font-size:9.5px;line-height:1.35}.order-detail-version-row>i{flex:0 0 auto;color:#9bacae}.order-detail-version-row.is-current{border-color:color-mix(in srgb,var(--primary) 22%,#e2eaec);background:color-mix(in srgb,var(--primary) 5%,#fff)}.order-detail-version-row.is-current>i{color:var(--primary)}

.order-history-version-page .order-detail-card{position:relative}.order-history-version-page .order-detail-head{padding-top:14px}

@media(max-width:600px){
  .order-detail-page{margin-top:8px!important;padding-right:8px;padding-bottom:18px;padding-left:8px}
  .order-detail-card{border-right:0;border-left:0;border-radius:12px}
  .order-detail-head{padding:11px 12px 10px}
  .order-detail-back{margin-bottom:8px;font-size:11px}
  .order-detail-number-row h1{font-size:17px}
  .order-detail-version-badge{padding:3px 7px;font-size:8.5px}
  .order-detail-customer{margin-top:5px;font-size:11px}.order-detail-customer strong{font-size:18px}.order-detail-customer span{font-size:10.5px}
  .order-detail-date,.order-detail-actor{font-size:10px}
  .order-detail-delivery{margin-top:7px;padding:6px 8px;font-size:10.5px}
  .order-detail-overall-stepper{width:min(200px,calc(100% - 56px));padding:6px 0 8px}.order-detail-overall-step{flex-basis:24px}.order-detail-overall-step>span{width:22px;height:22px;font-size:12px}
  .order-detail-service{padding:10px 12px}.order-detail-service-main{gap:7px}.order-detail-service-title>strong{font-size:12px}.order-detail-addon-icons{gap:3px;font-size:12px}.order-detail-service-values{gap:4px;font-size:10px}.order-detail-value-separator{font-size:9px}.order-detail-amount{font-size:11px}
  .order-detail-process-track{width:min(210px,100%);margin-top:5px}.order-detail-process-icon{flex-basis:22px;width:22px;height:22px;font-size:11px}.order-detail-process-line{min-width:8px}
  .order-detail-minimum-line,.order-detail-promo-line{padding:8px 12px;font-size:10px}.order-detail-payment{padding:10px 12px 12px}
  .order-detail-sheet-panel{max-height:82dvh}.order-detail-sheet-body{max-height:calc(82dvh - 72px)}
}
@media(max-width:380px){
  .order-detail-service-main{grid-template-columns:minmax(0,1fr) auto;gap:5px}.order-detail-service-values{gap:5px;font-size:9.5px}.order-detail-amount{font-size:10.5px}.order-detail-service-title>strong{font-size:11.5px}
  .order-detail-process-track{width:min(200px,100%)}.order-detail-process-icon{flex-basis:21px;width:21px;height:21px}.order-detail-process-line{min-width:6px}
}
.order-detail-outlet-row .badge-status.badge-nonaktif{border-color:#fecaca;background:#fff1f2;color:#b42318}

/* =========================================================
   Daftar Nota — kartu seragam + stepper ringkas 2026-08-21
   ========================================================= */
.order-index-page{padding-top:0}

/* Tab mengikuti gaya Chrome pada promo.php */
.order-tabs-chrome{
  display:flex;
  align-items:flex-end;
  gap:0;
  margin:6px 0 12px;
  padding:0 2px;
  border-bottom:2px solid var(--bd);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.order-tab-chrome{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border:1px solid var(--bd);
  border-bottom:0;
  border-top-left-radius:14px;
  border-top-right-radius:14px;
  background:#f3f4f6;
  color:var(--muted);
  white-space:nowrap;
  text-decoration:none;
}
.order-tab-chrome span{font-size:13px;font-weight:900;letter-spacing:.1px}
.order-tab-chrome:hover{filter:brightness(.98)}
.order-tab-chrome.is-active{
  z-index:2;
  transform:translateY(1px);
  border-color:var(--bd);
  background:#fff;
  color:var(--primary);
}
.order-tab-chrome.is-active::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-2px;
  left:0;
  height:2px;
  background:#fff;
}

.order-list-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:9px 12px;
  border:1px solid var(--bd);
  border-radius:11px;
  background:#fff;
}
.order-list-summary span{color:var(--muted);font-size:12px}
.order-list-summary strong{color:var(--primary-900);font-size:17px}

.order-table-number-row,.order-mobile-number-row{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.order-table-number-row strong,.order-mobile-number-row strong{
  color:var(--primary);
  font-weight:900;
}
.order-flag-express{color:#e58a00;font-size:14px}
.order-flag-delivery{color:#2563eb;font-size:15px}
.order-table-customer{color:var(--primary);font-weight:800}
.order-table-customer small{color:inherit;font-size:inherit;font-weight:600}
.order-table-qty{display:flex;align-items:center;justify-content:space-between;gap:7px;white-space:nowrap}

.order-note-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:3px 9px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  line-height:1.1;
  white-space:nowrap;
}
.order-note-state.is-normal{border-color:#a7e7ce;background:#ecfdf5;color:#087a55}
.order-note-state.is-edited{border-color:#fed7aa;background:#fff7ed;color:#b45309}
.order-note-state.is-cancelled{border-color:#fecaca;background:#fff1f2;color:#b42318}

.order-list-addon-icons{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:var(--primary);
  font-size:14px;
}
.order-list-addon-icons .bi-droplet-fill{color:#2563eb}

/* Stepper umum: pembayaran (bila perlu) - terima - proses - selesai */
.order-card-stepper{
  display:flex;
  width:min(230px,100%);
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.order-card-step{
  display:grid;
  flex:0 0 28px;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid #ccd8dc;
  border-radius:50%;
  background:#fff;
  color:#94a3b8;
  font-size:12px;
  line-height:1;
}
.order-card-step.is-completed{border-color:#75cbd3;background:#effbfc;color:var(--primary)}
.order-card-step.is-active{border-color:#f2b963;background:#fff8ec;color:#c46a08;box-shadow:0 0 0 2px rgba(234,138,0,.08)}
.order-card-step-line{display:block;flex:1 1 18px;height:1.5px;background:#d9e2e5}
.order-card-step-line.is-completed{background:#5ab7c0}
.order-card-stepper.is-cancelled{opacity:.48;filter:grayscale(.45)}

.order-unified-table .order-card-stepper{min-width:150px}
.order-unified-table td{vertical-align:middle}
.order-unified-table .order-note-state{font-size:10px}

/* Kartu mobile seluruh tab memakai struktur yang sama */
.order-unified-mobile-card{gap:9px!important}
.order-unified-mobile-card .order-list-mobile-head{position:relative;align-items:flex-start}
.order-mobile-heading-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px;padding-right:7px}
.order-mobile-number-row strong{font-size:14px}
.order-unified-mobile-card .order-list-mobile-head>span:not(.order-note-state),
.order-mobile-heading-copy>span{color:var(--muted);font-size:11px}
.order-unified-mobile-card .order-mobile-customer{gap:4px}
.order-unified-mobile-card .order-mobile-customer>strong{
  color:var(--primary);
  font-size:13px;
  font-weight:850;
  line-height:1.35;
}
.order-unified-mobile-card .order-mobile-customer>strong small{color:inherit;font-size:11px;font-weight:600}
.order-mobile-qty-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.order-mobile-qty-row>span:first-child{color:var(--muted);font-size:11px}
.order-unified-mobile-card>.order-card-stepper{width:min(205px,72%);margin:2px auto 0}
.order-unified-mobile-card>.order-card-stepper .order-card-step{width:26px;height:26px;flex-basis:26px;font-size:11px}
.order-unified-mobile-card .order-mobile-actions{margin-top:1px}

/* Badge jumlah filter harus menempel pada tombol filter, bukan tombol tambah */
@media(max-width:767px){
  .order-tabs-chrome{padding:0;margin-top:4px}
  .order-tab-chrome{padding:6px 12px;margin:0 2px 0 0}
  .order-tab-chrome span{font-size:11px}
  .order-index-page .compact-filter-details{position:relative}
  .order-index-page .compact-filter-count{top:-5px;right:-5px}
  .order-list-summary{margin-bottom:8px;padding:8px 11px}
  .order-list-card{border:0;background:transparent;box-shadow:none;overflow:visible}
  .order-list-mobile{padding:0;gap:9px}
  .order-unified-mobile-card{margin-bottom:0!important;padding:11px 12px!important;border-radius:12px!important}
}

@media(max-width:390px){
  .order-tab-chrome{padding-left:10px;padding-right:10px}
  .order-tab-chrome span{font-size:10px}
  .order-unified-mobile-card>.order-card-stepper{width:min(190px,70%)}
}


/* =========================================================
   Detail Nota — blok section + kartu layanan 2026-08-21
   Tampilan utama saja; halaman riwayat versi tetap memakai gaya lama.
   ========================================================= */
.order-detail-current{display:block}
.order-detail-current>.order-detail-back{margin:2px 2px 10px}
.order-detail-current .order-detail-section{margin:0 0 14px;padding:0!important;border:0!important;background:transparent!important}
.order-detail-section-head{display:flex;align-items:center;gap:8px;padding:0 3px 8px;border-bottom:1px solid color-mix(in srgb,var(--primary) 15%,#dce6e8)}
.order-detail-section-icon{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 28%,#fff);border-radius:9px;background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary);font-size:15px}
.order-detail-section-head h2{margin:0;color:var(--primary);font-size:13px;font-weight:900}
.order-detail-section-extra{margin-left:auto;color:#74878c;font-size:9.5px;white-space:nowrap}
.order-detail-section-block{margin-top:9px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 28%,#fff);border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(27,70,76,.035)}

.order-detail-identity-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.order-detail-customer-name{margin:0;color:var(--primary);font-size:22px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.order-detail-phone-link{display:inline-block;margin-top:4px;color:#5f777d;font-size:10.5px;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
.order-detail-phone-link:hover,.order-detail-phone-link:focus,.order-detail-phone-link:active{color:#5f777d;text-decoration:none}
.order-detail-phone-link.is-static{cursor:default}
.order-detail-phone-link.is-flashing{animation:orderDetailPhoneFlash .34s ease}
@keyframes orderDetailPhoneFlash{0%{opacity:1}35%{opacity:.28}70%{opacity:1}85%{opacity:.45}100%{opacity:1}}
.order-detail-note-status{display:inline-flex;min-width:0;min-height:0;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-size:9.5px;font-weight:850;line-height:1.2;white-space:nowrap}
button.order-detail-note-status{cursor:pointer}
.order-detail-note-status.is-edited{border:1px solid #f0cf72;background:#fff8db;color:#8b6200}
.order-detail-note-status.is-cancelled{border:1px solid #ef9aa3;background:#fff0f2;color:#b42332}
.order-detail-identity-grid{display:grid;grid-template-columns:82px minmax(0,1fr);gap:6px 10px;margin-top:11px;font-size:10.5px}
.order-detail-identity-grid>span{color:#73868b}
.order-detail-identity-grid>strong{min-width:0;color:#405b61;font-weight:700}
.order-detail-note-number{display:inline-flex;align-items:center;gap:4px;color:var(--primary)!important;font-weight:500!important}
.order-detail-note-number .order-detail-express{margin-left:1px;font-size:15px}
.order-detail-truck{color:#2187cf;font-size:14px}
.order-detail-current-outlet{color:#405b61}
.order-detail-outlet-transfer{display:inline-grid;grid-template-columns:auto 22px auto;grid-template-rows:auto auto;align-items:center;column-gap:5px}
.order-detail-outlet-transfer>.is-origin{grid-column:1;grid-row:1;color:#5f7479;font-weight:700}
.order-detail-outlet-transfer>i{grid-column:2;grid-row:1 / span 2;align-self:center;color:#a6b4b8;font-size:12px;text-align:center}
.order-detail-outlet-transfer>.is-current{grid-column:3;grid-row:1;color:var(--primary);font-weight:900}
.order-detail-outlet-transfer>small{margin-top:1px;color:#98a8ac;font-size:8px;font-weight:700;line-height:1}
.order-detail-outlet-transfer>.origin-label{grid-column:1;grid-row:2}
.order-detail-outlet-transfer>.current-label{grid-column:3;grid-row:2}
.order-detail-current .order-detail-note{margin-top:10px;padding-top:9px;border-top:1px dashed #d8e3e5}
.order-detail-current .order-detail-cancelled{margin-top:10px}
.order-detail-overall-wrap{margin-top:11px;padding-top:10px;border-top:1px dashed #d8e3e5}
.order-detail-overall-wrap>small{display:block;margin-bottom:6px;color:#73868b;font-size:9.5px;font-weight:800}
.order-detail-current .order-detail-overall-stepper{width:min(230px,100%);justify-content:flex-start;margin:0;padding:0;border:0}
.order-detail-current .order-detail-overall-step{flex:0 0 25px!important}.order-detail-current .order-detail-overall-step>span{width:25px!important;min-width:25px!important;max-width:25px!important;height:25px!important;min-height:25px!important;max-height:25px!important;padding:0!important;border:1px solid #cbd7da!important;border-radius:50%!important;background:#fff;color:#aab6ba;font-size:12px;line-height:1!important}
.order-detail-current .order-detail-overall-step.is-completed>span{border-color:color-mix(in srgb,var(--primary) 28%,#fff);background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary)}
.order-detail-current .order-detail-overall-step.is-active>span{border-color:color-mix(in srgb,#ef8516 50%,#fff);background:#fff4e8;color:#ef8516;box-shadow:none}
.order-detail-current .order-detail-overall-step.is-locked>span{border-color:#cbd7da;background:#fff;color:#aab6ba}
.order-detail-current .order-detail-step-line{min-width:14px;background:#d8e1e3}
.order-detail-current .order-detail-step-line.is-completed{background:color-mix(in srgb,var(--primary) 60%,#d8e1e3)}

.order-detail-delivery-box{display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:10px;background:#f3f9ff;color:#276e9e;font-size:10.5px;font-weight:700;line-height:1.45;text-decoration:none}
.order-detail-delivery-box>i:first-child{flex:0 0 auto;margin-top:1px;font-size:15px}
.order-detail-delivery-box>span{min-width:0;flex:1}
.order-detail-delivery-box>i:last-child{flex:0 0 auto;color:#7aa2e9;font-size:10px}
.order-detail-delivery-box:hover,.order-detail-delivery-box:focus{color:#276e9e;text-decoration:none}

.order-detail-current .order-detail-count-section{margin:0 0 14px!important}
.order-detail-services-section .order-detail-services{display:grid;gap:8px;margin-top:9px;border:0}
.order-detail-current .order-detail-service{padding:11px 11px 10px;border:1px solid #dce6e8;border-radius:12px;background:#fff;box-shadow:none}
.order-detail-current .order-detail-service-main{gap:8px}
.order-detail-current .order-detail-service-title>strong{color:var(--primary);font-size:12.5px;font-weight:900}
.order-detail-current .order-detail-addon-icons{gap:4px;font-size:0}
.order-detail-addon-svg{display:inline-block;width:15px;height:15px;flex:0 0 15px;vertical-align:-2px}
.order-detail-addon-icons .order-detail-addon-svg.is-handwash,.order-detail-calc-addon.is-handwash .order-detail-addon-svg{color:#0ea5e9}
.order-detail-addon-icons .order-detail-addon-svg.is-chemical,.order-detail-calc-addon.is-chemical .order-detail-addon-svg{color:#8b5cf6}
.order-detail-current .order-detail-service-values{gap:5px;color:#6b8085;font-size:9.8px}
.order-detail-current .order-detail-amount{color:var(--primary);font-size:10.8px;font-weight:900}
.order-detail-current .order-detail-amount:hover,.order-detail-current .order-detail-amount:focus-visible{color:var(--primary);text-decoration:none}
.order-detail-current .order-detail-process-track{width:min(230px,100%);margin-top:10px}
.order-detail-current .order-detail-process-icon{flex:0 0 25px!important;flex-basis:25px!important;width:25px!important;min-width:0!important;max-width:25px!important;height:25px!important;min-height:0!important;max-height:25px!important;padding:0!important;border:1px solid #cbd7da!important;border-radius:50%!important;background:#fff;color:#aab6ba;font-size:12px;line-height:1!important}
.order-detail-current .order-detail-process-icon.is-completed{border-color:color-mix(in srgb,var(--primary) 28%,#fff);background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary)}
.order-detail-current .order-detail-process-icon.is-active{border-color:color-mix(in srgb,#ef8516 50%,#fff);background:#fff4e8;color:#ef8516;box-shadow:none}
.order-detail-current .order-detail-process-icon.is-locked{border-color:#cbd7da;background:#fff;color:#aab6ba}
.order-detail-current .order-detail-process-line{background:#d8e1e3}
.order-detail-current .order-detail-process-line.is-completed{background:color-mix(in srgb,var(--primary) 60%,#d8e1e3)}
.order-detail-service-empty{margin:9px 0 0;padding:12px;border:1px solid #dce6e8;border-radius:12px;background:#fff}
.order-detail-reward-card{padding:11px 12px;border:1px solid #f6c58f;border-radius:12px;background:#fff8ef}
.order-detail-reward-head{display:flex;align-items:center;gap:8px}
.order-detail-reward-icon{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border:1px solid #f3b66d;border-radius:8px;background:#fff;color:#ef8516;font-size:15px}
.order-detail-reward-head>strong{color:var(--primary);font-size:12.5px;font-weight:900;line-height:1.2}
.order-detail-reward-divider{height:1px;margin:10px 0 9px;background:#f3d6b3}
.order-detail-reward-content{display:grid;gap:4px;padding-left:36px}
.order-detail-reward-name{color:#ef8516;font-size:13px;font-weight:900;line-height:1.25}
.order-detail-reward-benefit{color:#536a70;font-size:10.8px;font-weight:700;line-height:1.35}
.order-detail-calc-addon>span{display:flex;align-items:center;gap:5px}
.order-detail-calc-list .is-discount strong{color:#ef8516}

.order-detail-current .order-detail-section-block.order-detail-payment{margin-top:9px!important;padding:12px!important;border:1px solid color-mix(in srgb,var(--primary) 28%,#fff)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 4px 14px rgba(27,70,76,.035)!important}
.order-detail-payment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.order-detail-payment-head>strong{color:var(--primary);font-size:12.5px}
.order-detail-no-charge-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border:1px solid #ffc98f;border-radius:999px;background:#fff7ed;color:#b95a00;font-size:9.5px;font-weight:850;white-space:nowrap}
.order-detail-cost-lines{display:grid}
.order-detail-cost-lines>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #edf2f3;color:#697f84;font-size:10.5px}
.order-detail-cost-lines>div>strong{flex:0 0 auto;color:#405b61;font-size:11px}
.order-detail-cost-lines>div.is-discount{margin:4px -4px 0;padding:8px 7px;border:0;border-radius:9px;background:#fff9e9;color:#825b0d}
.order-detail-cost-lines>div.is-discount>span{display:flex;min-width:0;align-items:center;gap:5px}
.order-detail-cost-lines>div.is-discount>strong{color:#ef8516}
.order-detail-cost-lines>div.is-promo{color:#825b0d}
.order-detail-cost-lines>div.is-quota>strong{color:#405b61}
.order-detail-bill-total{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 10px;border-bottom:1px solid #e7edef}
.order-detail-bill-total.is-zero-charge{padding-top:10px;border-top:1px solid #edf2f3}
.order-detail-bill-total span{color:#73868b;font-size:10px}
.order-detail-bill-total strong{color:var(--primary);font-size:17px}
.order-detail-payment-subtitle{margin:9px 0 3px;color:#5f777d;font-size:9.5px;font-weight:850}
.order-detail-current .order-detail-payment-lines{gap:0}
.order-detail-current .order-detail-payment-lines>div{padding:4px 0;color:#6b8085;font-size:10.5px}
.order-detail-current .order-detail-payment-lines>div>span{min-width:0}
.order-detail-current .order-detail-payment-lines>div>span>i{padding:0 3px;color:#bdc9cc;font-style:normal}
.order-detail-current .order-detail-payment-lines strong{color:#405b61;font-size:11px}
.order-detail-current .order-detail-payment-lines .is-pending strong{color:#9a6a0c}
.order-detail-paid-total,.order-detail-remaining-total{display:flex;align-items:center;justify-content:space-between;gap:10px}
.order-detail-paid-total{margin-top:5px;padding-top:7px;border-top:1px dashed #d7e1e3}
.order-detail-paid-total span,.order-detail-remaining-total span{color:#73868b;font-size:10px}
.order-detail-paid-total strong{color:var(--primary);font-size:14px}
.order-detail-remaining-total{margin-top:8px;padding-top:8px;border-top:1px solid #e7edef}
.order-detail-remaining-total strong{font-size:15px}
.order-detail-remaining-total .is-amount{color:#405b61}
.order-detail-remaining-total .is-refund{color:#b45309}
.order-detail-remaining-total .is-paid{color:#ef8516;font-weight:900;letter-spacing:.03em}
.order-detail-current .order-detail-disclosure>summary{color:var(--primary)}
.order-detail-current .order-detail-simulator{margin:0 0 14px}

@media(max-width:600px){
  .order-detail-page{padding-right:9px;padding-left:9px}
  .order-detail-current>.order-detail-back{margin-bottom:9px}
  .order-detail-current .order-detail-section{margin-bottom:13px;padding:0!important;border:0!important}
  .order-detail-section-head{padding-bottom:7px}
  .order-detail-section-icon{width:29px;height:29px;flex-basis:29px}
  .order-detail-section-block{padding:11px}
  .order-detail-customer-name{font-size:21px}
  .order-detail-identity-grid{grid-template-columns:76px minmax(0,1fr);gap:6px 9px;font-size:10px}
  .order-detail-current .order-detail-service{padding:10px}
  .order-detail-current .order-detail-service-main{gap:6px}
  .order-detail-current .order-detail-service-title>strong{font-size:12px}
  .order-detail-current .order-detail-service-values{gap:4px;font-size:9.3px}
  .order-detail-current .order-detail-amount{font-size:10.3px}
  .order-detail-current .order-detail-process-track{width:min(220px,100%)}
  .order-detail-current .order-detail-process-icon{flex:0 0 24px!important;flex-basis:24px!important;width:24px!important;max-width:24px!important;height:24px!important;max-height:24px!important;font-size:11px}
}
@media(max-width:380px){
  .order-detail-identity-grid{grid-template-columns:72px minmax(0,1fr)}
  .order-detail-current .order-detail-service-main{grid-template-columns:minmax(0,1fr) auto}
  .order-detail-current .order-detail-service-values{font-size:9px}
  .order-detail-current .order-detail-amount{font-size:10px}
  .order-detail-current .order-detail-process-track{width:min(210px,100%)}
  .order-detail-current .order-detail-process-icon{flex:0 0 23px!important;flex-basis:23px!important;width:23px!important;max-width:23px!important;height:23px!important;max-height:23px!important}
}


/* =========================================================
   Detail Nota — koreksi konflik CSS legacy 2026-08-21
   Menjaga struktur prototype blok tanpa mengubah jenis icon stepper.
   ========================================================= */
.order-detail-current .order-detail-section,
.order-detail-current .order-detail-section + .order-detail-section{
  padding:0!important;
  border-top:0!important;
  background:transparent!important;
}
.order-detail-current .order-detail-section .card-head{margin-bottom:0!important}
.order-detail-current .order-detail-section-head{margin:0!important}
.order-detail-current .order-detail-section-block{box-sizing:border-box}
.order-detail-current .order-detail-section-block.order-detail-payment{
  margin-top:9px!important;
  padding:12px!important;
  border:1px solid color-mix(in srgb,var(--primary) 28%,#fff)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(27,70,76,.035)!important;
}
.order-detail-current .order-detail-process-icon,
.order-detail-current button.order-detail-process-icon{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
}
.order-detail-current .order-detail-process-check{
  width:10px!important;
  height:10px!important;
  right:-3px!important;
  bottom:-3px!important;
  border-width:2px!important;
  font-size:6px!important;
}
.order-detail-current .order-detail-process-line{height:1px!important}
.order-detail-current .order-detail-services-section .order-detail-services{border-top:0!important}
@media(max-width:600px){
  .order-detail-current .order-detail-section{padding:0!important}
  .order-detail-current .order-detail-section-block.order-detail-payment{padding:11px!important}
}


/* =======================================================
   PATCH 2026-08-21 — Terima Laundry: alert validasi + PIN mobile
   ======================================================= */
.order-stage5-page .order-alert{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:12px 0 14px;
  padding:11px 13px;
  border:1px solid #fecaca;
  border-left:4px solid #ef4444;
  border-radius:12px;
  background:#fff5f5;
  color:#991b1b;
  box-shadow:0 2px 8px rgba(153,27,27,.04);
}
.order-stage5-page .order-alert-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fee2e2;
  color:#dc2626;
  font-size:14px;
}
.order-stage5-page .order-alert-content{min-width:0}
.order-stage5-page .order-alert-content>strong{
  display:block;
  margin:0;
  color:#991b1b;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
}
.order-stage5-page .order-alert-content ul{
  list-style:none;
  margin:3px 0 0;
  padding:0;
}
.order-stage5-page .order-alert-content li{
  margin:0;
  color:#b4232f;
  font-size:12.5px;
  line-height:1.45;
}
.order-stage5-page .order-alert-content li+li{margin-top:3px}

@media(max-width:767px){
  /* Modal PIN: berada di bagian atas viewport dengan jarak aman, termasuk saat keyboard terbuka. */
  .action-pin-modal.show{
    padding:0!important;
    overflow:hidden!important;
  }
  .action-pin-modal .action-pin-card{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:calc(env(safe-area-inset-top, 0px) + 18px)!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:min(94vw,460px)!important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 36px)!important;
    margin:0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  .action-pin-modal .modal-head{
    padding:13px 15px 11px;
    gap:10px;
  }
  .action-pin-modal .modal-body{
    padding:12px 15px 15px;
  }
  .action-pin-modal .modal-title{font-size:17px}
  .action-pin-modal .action-pin-subtitle{
    font-size:12px;
    line-height:1.4;
  }
  .action-pin-modal .action-pin-input{
    min-height:46px;
    font-size:1.15rem;
  }
  .action-pin-modal .form-actions{
    margin-top:12px;
    flex-wrap:nowrap;
  }
}


/* =======================================================
   PATCH 2026-08-21 — PIN mobile: top aman mengikuti visual viewport
   Chrome Android dapat menggeser visual viewport saat keyboard terbuka.
   Posisi modal mengikuti offset visual viewport agar header tidak terpotong.
   ======================================================= */
@media(max-width:767px){
  .action-pin-modal.show{
    --action-pin-vv-top:0px;
    --action-pin-vv-height:100dvh;
  }
  .action-pin-modal .action-pin-card{
    top:calc(var(--action-pin-vv-top, 0px) + 14px)!important;
    max-height:calc(var(--action-pin-vv-height, 100dvh) - 28px)!important;
  }
}


/* Unified Detail Nota stepper + custom Laundry Process icons — 2026-08-21 */
.laundry-process-icon,
.order-status-icon{
  display:inline-grid;
  place-items:center;
  color:currentColor;
  line-height:1;
}
.laundry-process-icon svg,
.order-status-icon>svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.laundry-process-icon>i{
  font-size:1em;
  line-height:1;
}

/* Master Proses: SVG baru tetap statis dan jelas pada daftar/picker/preview. */
.process-name-icon .laundry-process-icon{
  width:20px;
  height:20px;
}
.process-icon-choice-symbol{
  display:grid!important;
  width:26px;
  height:26px;
  place-items:center;
  color:var(--primary);
  font-size:20px!important;
  line-height:1!important;
}
.process-icon-choice-symbol .laundry-process-icon{
  width:26px;
  height:26px;
}
.process-icon-preview-symbol,
.process-view-icon-symbol{
  display:grid;
  place-items:center;
  color:var(--primary);
}
.process-icon-preview-symbol{
  width:30px;
  height:30px;
}
.process-view-icon-symbol{
  width:24px;
  height:24px;
}
.process-icon-preview-symbol .laundry-process-icon,
.process-view-icon-symbol .laundry-process-icon{
  width:100%;
  height:100%;
}
.process-icon-choice .process-icon-choice-symbol+span{
  font-size:11px;
  font-weight:700;
  line-height:1.25;
}

/* Satu stepper untuk seluruh Nota. */
.order-detail-status-stepper{
  display:flex;
  width:100%;
  align-items:flex-start;
  margin-top:2px;
  padding:2px 0 1px;
}
.order-detail-status-step{
  display:flex;
  width:38px;
  min-width:38px;
  flex:0 0 38px;
  flex-direction:column;
  align-items:center;
  color:#9aa8ac;
  text-align:center;
}
.order-detail-status-circle{
  display:grid;
  width:38px;
  height:38px;
  min-width:38px;
  place-items:center;
  border:1.5px solid #cbd5d8;
  border-radius:50%;
  background:#fff;
  color:#9aa8ac;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.order-detail-status-step>small{
  display:block;
  width:max-content;
  max-width:48px;
  margin-top:5px;
  overflow:hidden;
  color:currentColor;
  font-size:7.8px;
  font-weight:850;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-detail-status-line{
  display:block;
  height:1.5px;
  min-width:4px;
  flex:1 1 auto;
  margin-top:18px;
  background:#d8e1e3;
}
.order-detail-status-line.is-completed{
  background:#56a977;
}

/* Belum: abu + diam. */
.order-detail-status-step.is-pending{
  color:#9aa8ac;
}
.order-detail-status-step.is-pending .order-detail-status-circle{
  border-color:#cbd5d8;
  background:#fff;
  color:#9aa8ac;
}

/* Selesai: hijau + diam. */
.order-detail-status-step.is-completed{
  color:#27885a;
}
.order-detail-status-step.is-completed .order-detail-status-circle{
  border-color:#89c8a6;
  background:#edf8f2;
  color:#27885a;
}

/* Aktif umum: oranye + animasi. */
.order-detail-status-step.is-active{
  color:#e67c0d;
}
.order-detail-status-step.is-active .order-detail-status-circle{
  border-color:#f0b36f;
  background:#fff4e8;
  color:#e67c0d;
}

/* Bayar aktif: merah + animasi. */
.order-detail-status-step.is-active-payment{
  color:#d74848;
}
.order-detail-status-step.is-active-payment .order-detail-status-circle{
  border-color:#e79a9a;
  background:#fff0f0;
  color:#d74848;
}

/* Final sukses: step terakhir biru + diam. */
.order-detail-status-step.is-final{
  color:#247fc7;
}
.order-detail-status-step.is-final .order-detail-status-circle{
  border-color:#8dbde4;
  background:#eef6fd;
  color:#247fc7;
}

/* Proporsi icon final sesuai simulasi 38px. */
.order-status-icon.is-payment{width:25px;height:25px}
.order-status-icon.is-receive{width:24px;height:24px}
.order-status-icon.is-process{width:30px;height:30px}
.order-status-icon.is-pickup{width:31px;height:31px}
.order-status-icon.is-delivery{width:30px;height:25px}

.order-status-icon.is-process>.laundry-process-icon.is-washing-machine{width:26px;height:26px}
.order-status-icon.is-process>.laundry-process-icon.is-dryer{width:30px;height:30px}
.order-status-icon.is-process>.laundry-process-icon.is-iron{width:30px;height:30px}
.order-status-icon.is-process>.laundry-process-icon.is-package{width:22px;height:22px}
.order-status-icon.is-process>.laundry-process-icon:not(.is-washing-machine):not(.is-dryer):not(.is-iron):not(.is-package){
  width:22px;
  height:22px;
  font-size:19px;
}

/* Animasi hanya dijalankan ketika komponen diberi is-animated. */
.order-status-icon.is-payment.is-animated{
  transform-origin:center;
  animation:orderStatusPayPulse .72s ease-in-out infinite alternate;
}
@keyframes orderStatusPayPulse{
  from{transform:scale(.91)}
  to{transform:scale(1.07)}
}

.order-status-icon.is-receive.is-animated .osi-receive-sack{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:orderStatusReceive .8s ease-in-out infinite alternate;
}
@keyframes orderStatusReceive{
  from{transform:translateY(.7px)}
  to{transform:translateY(-1px)}
}

.laundry-process-icon.is-washing-machine.is-animated .lp-washer-body{
  transform-box:fill-box;
  transform-origin:center;
  animation:laundryWasherShake .5s ease-in-out infinite alternate;
}
.laundry-process-icon.is-washing-machine.is-animated .lp-washer-drum{
  transform-box:fill-box;
  transform-origin:center;
  animation:laundryWasherSpin .95s linear infinite;
}
@keyframes laundryWasherSpin{
  to{transform:rotate(360deg)}
}
@keyframes laundryWasherShake{
  from{transform:translateX(-.35px)}
  to{transform:translateX(.35px)}
}

.laundry-process-icon.is-dryer .lp-dry-basket{
  transform-box:fill-box;
  transform-origin:center bottom;
}
.laundry-process-icon.is-dryer.is-animated .lp-dry-shirt{
  transform-box:fill-box;
  transform-origin:center;
  animation:laundryDryDrop 1.25s ease-in-out infinite;
}
@keyframes laundryDryDrop{
  0%{opacity:0;transform:translateY(-2px) rotate(-5deg) scale(.98)}
  18%{opacity:1}
  58%{opacity:1;transform:translateY(4px) rotate(2deg) scale(1)}
  78%,100%{opacity:0;transform:translateY(6px) scale(.9)}
}

.laundry-process-icon.is-iron.is-animated .lp-iron-body{
  transform-box:fill-box;
  transform-origin:center;
  animation:laundryIronSlide .72s ease-in-out infinite alternate;
}
.laundry-process-icon.is-iron.is-animated .lp-iron-steam path{
  transform-box:fill-box;
  transform-origin:center top;
  animation:laundryIronSteam .9s ease-out infinite;
}
.laundry-process-icon.is-iron.is-animated .lp-iron-steam path:nth-child(2),
.laundry-process-icon.is-iron.is-animated .lp-iron-steam path:nth-child(5){
  animation-delay:.12s;
}
.laundry-process-icon.is-iron.is-animated .lp-iron-steam path:nth-child(3),
.laundry-process-icon.is-iron.is-animated .lp-iron-steam path:nth-child(6){
  animation-delay:.24s;
}
@keyframes laundryIronSlide{
  from{transform:translateX(-24px)}
  to{transform:translateX(24px)}
}
@keyframes laundryIronSteam{
  0%{opacity:0;transform:translateY(-3px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(8px)}
}

.laundry-process-icon.is-package.is-animated .lp-pack-stack{
  transform-box:fill-box;
  transform-origin:center;
  animation:laundryPackMove .9s ease-in-out infinite alternate;
}
@keyframes laundryPackMove{
  from{transform:translateY(2px) scale(.98)}
  to{transform:translateY(-4px) scale(1.03)}
}

.order-status-icon.is-delivery.is-animated .osi-delivery-car{
  transform-box:fill-box;
  transform-origin:center;
  animation:orderStatusDeliveryRun .7s ease-in-out infinite alternate;
}
.order-status-icon.is-delivery.is-animated .osi-delivery-wheel{
  transform-box:fill-box;
  transform-origin:center;
  animation:orderStatusDeliveryWheel .65s linear infinite;
}
@keyframes orderStatusDeliveryRun{
  from{transform:translateX(-2px)}
  to{transform:translateX(2px)}
}
@keyframes orderStatusDeliveryWheel{
  to{transform:rotate(360deg)}
}

.order-detail-status-circle.is-clickable{
  padding:0;
  appearance:none;
  cursor:pointer;
}
.order-detail-status-circle.is-clickable:focus-visible{
  outline:2px solid color-mix(in srgb,currentColor 45%,transparent);
  outline-offset:2px;
}
.order-detail-sheet-empty .laundry-process-icon{
  width:28px;
  height:28px;
  color:#a8b6b9;
}

@media(max-width:380px){
  .order-detail-status-step>small{
    max-width:43px;
    font-size:7.2px;
  }
}
@media(prefers-reduced-motion:reduce){
  .order-status-icon.is-animated,
  .order-status-icon.is-animated *,
  .laundry-process-icon.is-animated,
  .laundry-process-icon.is-animated *{
    animation:none!important;
  }
}

/* Pengaturan Notifikasi */
.notif-edit-page .toggle-card.is-locked{
  cursor:not-allowed;
  border-style:dashed;
  background:#f8fafc;
  color:#94a3b8;
}
.notif-edit-page .toggle-card.is-locked span{
  display:grid;
  gap:2px;
}
.notif-edit-page .toggle-card.is-locked small{
  font-size:11px;
  font-weight:600;
}
.notif-edit-page .notif-recipient-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
  color:#334155;
}
.notif-edit-page .notif-recipient-line i{
  margin-top:1px;
  color:var(--primary);
}
.notif-edit-page .escalation-box{
  display:block!important;
  margin-top:10px;
  padding:14px;
  border:1px solid #d7e2e8;
  border-radius:12px;
  background:#fbfdfe;
}
.notif-edit-page .escalation-order-list{
  display:grid;
  gap:9px;
  margin:10px 0 6px;
}
.notif-edit-page .escalation-step{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
}
.notif-edit-page .escalation-step-number{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-weight:800;
}
.notif-edit-page .escalation-step .select{
  width:100%;
}
@media(max-width:700px){
  .notif-edit-page .toggle-grid.three{
    grid-template-columns:1fr!important;
  }
}

.notif-edit-page{
  display:grid;
  gap:14px;
  padding-bottom:80px;
}
.notif-edit-page,
.notif-edit-page #notificationPolicyForm,
.notif-edit-page .notif-section,
.notif-edit-page .notif-edit-top>div,
.notif-edit-page .template-head>div,
.notif-edit-page .template-block,
.notif-edit-page .preview-card{
  min-width:0;
}
.notif-edit-page #notificationPolicyForm{
  display:grid;
  gap:14px;
}
.notif-edit-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.notif-edit-top h1{
  margin:1px 0 3px;
  font-size:22px;
  color:var(--primary);
  line-height:1.25;
}
.notif-edit-top p{
  margin:0;
  color:#64748b;
  line-height:1.45;
}
.notif-code-lg{
  font-size:12px;
  font-weight:900;
  color:#64748b;
}
.notif-section{
  padding:18px;
}
.notif-section h2{
  margin:0 0 14px;
  font-size:17px;
}
.toggle-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:10px;
}
.toggle-grid.three{
  grid-template-columns:repeat(3,minmax(120px,1fr));
}
.toggle-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  min-height:48px;
  margin:0;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
}
.toggle-card input[type=checkbox]{
  position:absolute;
  opacity:0;
}
.switch-ui{
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:22px;
  border-radius:999px;
  background:#cbd5e1;
}
.switch-ui:after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}
.toggle-card input:checked+.switch-ui{
  background:var(--primary);
}
.toggle-card input:checked+.switch-ui:after{
  transform:translateX(16px);
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
}
.check-row input[type=checkbox]{
  flex:0 0 auto;
  margin-top:3px;
}
.template-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.template-head h2{
  margin-bottom:3px;
}
.template-head p{
  margin:0;
  color:#64748b;
  line-height:1.45;
}
.template-block{
  margin-top:14px;
  border-top:1px solid #e2e8f0;
  padding-top:14px;
}
.template-block h3{
  margin:0 0 10px;
  font-size:14px;
}
.preview-card{
  margin-top:16px;
  border:1px solid #bae6fd;
  border-radius:12px;
  padding:14px;
  background:#f0f9ff;
}
.preview-title{
  margin-bottom:10px;
  color:#075985;
  font-weight:800;
}
.preview-section{
  margin-top:8px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  padding:10px;
  background:#fff;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.variable-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.variable-chip{
  border:1px solid #99f6e4;
  border-radius:999px;
  padding:8px 11px;
  background:#f0fdfa;
  color:#0f766e;
  font-weight:700;
}
.notif-save-bar{
  position:sticky;
  bottom:8px;
  z-index:20;
  display:flex;
  justify-content:flex-end;
}
.notif-save-bar .btn{
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

@media(max-width:700px){
  .notif-edit-page{
    width:100%;
    max-width:100%;
    padding-right:10px;
    padding-bottom:104px;
    padding-left:10px;
    overflow-x:clip;
  }
  .notif-edit-page #notificationPolicyForm{
    gap:10px;
  }
  .notif-edit-top{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:10px;
  }
  .notif-edit-top>.btn{
    min-height:40px;
    padding:9px 12px;
    white-space:nowrap;
  }
  .notif-edit-top h1{
    margin-top:0;
    font-size:19px;
    overflow-wrap:anywhere;
  }
  .notif-edit-top p{
    font-size:12px;
    overflow-wrap:anywhere;
  }
  .notif-section{
    width:100%;
    max-width:100%;
    border-radius:14px;
    padding:14px;
    overflow:hidden;
  }
  .notif-section h2{
    margin-bottom:12px;
    font-size:16px;
  }
  .notif-edit-page .toggle-grid,
  .notif-edit-page .toggle-grid.three{
    grid-template-columns:1fr!important;
    gap:8px;
  }
  .notif-edit-page .toggle-card{
    width:100%;
    min-height:46px;
    padding:10px 12px;
  }
  .notif-edit-page .notif-recipient-line{
    width:100%;
    margin-bottom:10px;
    padding:10px 12px;
    font-size:13px;
    overflow-wrap:anywhere;
  }
  .notif-edit-page .check-row{
    font-size:13px;
    line-height:1.45;
  }
  .notif-edit-page .escalation-box{
    width:100%;
    max-width:100%;
    margin-top:10px;
    padding:10px;
  }
  .notif-edit-page .escalation-order-list{
    gap:8px;
  }
  .notif-edit-page .escalation-step{
    grid-template-columns:26px minmax(0,1fr);
    gap:8px;
  }
  .notif-edit-page .escalation-step-number{
    width:26px;
    height:26px;
    font-size:12px;
  }
  .notif-edit-page .escalation-step .select{
    width:100%;
    min-width:0;
  }
  .notif-edit-page .form-grid-2{
    grid-template-columns:1fr;
  }
  .notif-edit-page .template-head{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .notif-edit-page .template-head .btn{
    width:100%;
    justify-content:center;
  }
  .notif-edit-page .template-block .group{
    min-width:0;
  }
  .notif-edit-page .template-block .input,
  .notif-edit-page .template-block .textarea{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .notif-edit-page .preview-card{
    padding:10px;
  }
  .notif-edit-page .preview-section{
    padding:9px;
    font-size:12px;
    line-height:1.45;
  }
  .notif-edit-page .help{
    display:block;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .notif-save-bar{
    bottom:10px;
    width:100%;
  }
  .notif-save-bar .btn{
    width:100%;
    min-height:48px;
    justify-content:center;
  }
  .notif-edit-page+.ml-modal .modal-card{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
}
/* Pengaturan Notifikasi */
.notification-settings-page {
  display: grid;
  gap: 14px;
}

.notification-settings-head {
  padding: 18px 20px;
}

.notification-settings-head h1 {
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--primary);
}

.notification-settings-head p {
  margin: 0;
  color: #64748b;
}

.notif-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px auto;
  gap: 10px;
}

.notif-table-card {
  padding: 0;
}

.notif-table {
  min-width: 1180px;
}

.notif-table th {
  white-space: nowrap;
}

.notif-code {
  color: var(--primary);
}

.notif-trigger {
  max-width: 420px;
  margin-top: 3px;
  font-size: 12px;
}

.notif-pill {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}

.notif-pill.on {
  color: #166534;
  background: #dcfce7;
}

.notif-pill.off {
  color: #64748b;
  background: #f1f5f9;
}

.notif-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.notif-actions form {
  margin: 0;
}

@media (max-width: 700px) {
  .notif-filter {
    grid-template-columns: 1fr;
  }

  .notification-settings-head {
    padding: 15px;
  }
}

/* =========================================================
   Master Proses: icon penerimaan + icon karpet — 2026-08-24
   Animasi hanya aktif bila komponen memiliki .is-animated.
   ========================================================= */
.laundry-process-icon.is-carpet-wavy,
.laundry-process-icon.is-carpet-rolled{
  position:relative;
  overflow:visible;
}

.laundry-process-icon.is-sack.is-animated .lp-sack-body{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:laundryReceiveSack .8s ease-in-out infinite alternate;
}
@keyframes laundryReceiveSack{
  from{transform:translateY(.7px)}
  to{transform:translateY(-1px)}
}

.lp-carpet-wavy-static{
  display:block;
  width:100%;
  height:72%;
  background:currentColor;
  -webkit-mask:url("../img/process-icons/carpet-wavy-mask.png") center/contain no-repeat;
  mask:url("../img/process-icons/carpet-wavy-mask.png") center/contain no-repeat;
}
.lp-carpet-wavy-wave{
  position:relative;
  display:none;
  width:100%;
  height:72%;
}
.lp-carpet-wavy-wave>i{
  position:absolute;
  top:0;
  left:var(--lp-rug-left);
  width:7.5%;
  height:100%;
  background:currentColor;
  -webkit-mask-image:url("../img/process-icons/carpet-wavy-mask.png");
  mask-image:url("../img/process-icons/carpet-wavy-mask.png");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:1400% 100%;
  mask-size:1400% 100%;
  -webkit-mask-position:var(--lp-rug-pos) center;
  mask-position:var(--lp-rug-pos) center;
  animation:laundryCarpetWave 1.05s ease-in-out infinite;
  animation-delay:var(--lp-rug-delay);
}
.laundry-process-icon.is-carpet-wavy.is-animated .lp-carpet-wavy-static{display:none}
.laundry-process-icon.is-carpet-wavy.is-animated .lp-carpet-wavy-wave{display:block}
@keyframes laundryCarpetWave{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-2px)}
  50%{transform:translateY(0)}
  75%{transform:translateY(2px)}
}

.laundry-process-icon.is-carpet-wash .lp-carpet-wash-roller-spin{
  color:#078795;
  stroke:#078795;
  transform-box:fill-box;
  transform-origin:center;
}
.laundry-process-icon.is-carpet-wash .lp-carpet-wash-foam,
.laundry-process-icon.is-carpet-wash .lp-carpet-wash-drop{
  stroke:#4aa8df;
}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-roller-travel{
  animation:laundryCarpetRollTravel 1.65s ease-in-out infinite alternate;
}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-roller-spin{
  animation:laundryCarpetRollSpin .85s linear infinite;
}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-foam,
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-drop{
  transform-box:fill-box;
  transform-origin:center;
}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-foam{
  animation:laundryCarpetFoam 1.45s ease-in-out infinite;
}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-foam-2{animation-delay:.22s}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-foam-3{animation-delay:.42s}
.laundry-process-icon.is-carpet-wash.is-animated .lp-carpet-wash-drop{
  animation:laundryCarpetDrop 1.05s ease-in-out infinite;
}
@keyframes laundryCarpetRollTravel{
  from{transform:translateX(-38px)}
  to{transform:translateX(0)}
}
@keyframes laundryCarpetRollSpin{to{transform:rotate(360deg)}}
@keyframes laundryCarpetFoam{
  0%{opacity:0;transform:translateY(2px) scale(.88)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-5px) scale(1.08)}
}
@keyframes laundryCarpetDrop{
  0%{opacity:0;transform:translateY(-1px)}
  18%{opacity:.95}
  100%{opacity:0;transform:translateY(6px)}
}

.lp-carpet-rolled-shape{
  display:block;
  width:100%;
  height:66%;
  background:currentColor;
  -webkit-mask:url("../img/process-icons/carpet-rolled-mask.png") center/contain no-repeat;
  mask:url("../img/process-icons/carpet-rolled-mask.png") center/contain no-repeat;
  transform-origin:center;
}
.laundry-process-icon.is-carpet-rolled.is-animated .lp-carpet-rolled-shape{
  animation:laundryCarpetRolled .9s ease-in-out infinite alternate;
}
@keyframes laundryCarpetRolled{
  from{transform:translateX(-1.3px) rotate(-1deg)}
  to{transform:translateX(1.3px) rotate(1deg)}
}

/* Master Proses selalu statis karena picker tidak mengirim animated=true. */
.process-icon-choice-symbol .laundry-process-icon.is-carpet-wash,
.process-icon-preview-symbol .laundry-process-icon.is-carpet-wash,
.process-view-icon-symbol .laundry-process-icon.is-carpet-wash{
  overflow:visible;
}

/* Detail Nota: proporsi icon karpet sesuai simulasi final. */
.order-status-icon.is-receive>.laundry-process-icon{
  width:24px;
  height:24px;
}
.order-status-icon.is-receive>.laundry-process-icon.is-carpet-wavy{
  width:31px;
  height:31px;
}
.order-status-icon.is-process>.laundry-process-icon.is-carpet-wash{
  width:39px;
  height:39px;
}
.order-status-icon.is-process>.laundry-process-icon.is-carpet-rolled,
.order-status-icon.is-process>.laundry-process-icon.is-carpet-wavy{
  width:30px;
  height:30px;
}
.order-status-icon.is-process>.laundry-process-icon.is-sack{
  width:24px;
  height:24px;
}

/* =========================================================
   Daftar Nota: Bayar -> Terima -> Proses -> Selesai -> final.
   Proses hanya satu step; icon mengikuti layanan urutan pertama.
   ========================================================= */
.order-card-stepper{
  width:min(260px,100%);
}
.order-card-step{
  overflow:visible;
}
.order-card-step.is-pending{
  border-color:#ccd8dc;
  background:#fff;
  color:#94a3b8;
  box-shadow:none;
}
.order-card-step.is-completed{
  border-color:#8fd3a0;
  background:#f1fbf4;
  color:#2f9d50;
  box-shadow:none;
}
.order-card-step.is-active{
  border-color:#f2b963;
  background:#fff8ec;
  color:#d97706;
  box-shadow:0 0 0 2px rgba(234,138,0,.08);
}
.order-card-step.is-active-payment{
  border-color:#e98a8a;
  background:#fff0f0;
  color:#d74848;
  box-shadow:0 0 0 2px rgba(215,72,72,.07);
  animation:orderListPayPulse .72s ease-in-out infinite alternate;
}
.order-card-step.is-final{
  border-color:#8dbde4;
  background:#eef6fd;
  color:#247fc7;
  box-shadow:none;
}
.order-card-step-line.is-completed{background:#69bd7c}
@keyframes orderListPayPulse{
  from{transform:scale(.94)}
  to{transform:scale(1.04)}
}
.order-card-step>.order-status-icon{
  width:22px;
  height:22px;
}
.order-card-step>.order-status-icon.is-receive>.laundry-process-icon{
  width:21px;
  height:21px;
}
.order-card-step>.order-status-icon.is-receive>.laundry-process-icon.is-carpet-wavy{
  width:25px;
  height:25px;
}
.order-card-step>.order-status-icon.is-process>.laundry-process-icon{
  width:23px;
  height:23px;
}
.order-card-step>.order-status-icon.is-process>.laundry-process-icon.is-carpet-wash{
  width:30px;
  height:30px;
}
.order-card-step>.order-status-icon.is-process>.laundry-process-icon.is-carpet-rolled,
.order-card-step>.order-status-icon.is-process>.laundry-process-icon.is-carpet-wavy{
  width:24px;
  height:24px;
}
.order-card-step>.order-status-icon.is-pickup{
  width:25px;
  height:25px;
}
.order-card-step>.order-status-icon.is-delivery{
  width:25px;
  height:20px;
}
.order-unified-table .order-card-stepper{min-width:205px}
.order-unified-mobile-card>.order-card-stepper{width:min(235px,86%)}

@media(max-width:380px){
  .order-unified-mobile-card>.order-card-stepper{width:min(220px,92%)}
  .order-card-step{width:25px;height:25px;flex-basis:25px}
  .order-card-step>.order-status-icon{transform:scale(.9)}
}
@media(prefers-reduced-motion:reduce){
  .lp-carpet-wavy-wave>i,
  .laundry-process-icon.is-carpet-wash *,
  .laundry-process-icon.is-carpet-rolled *,
  .laundry-process-icon.is-sack *,
  .order-card-step.is-active-payment{
    animation:none!important;
  }
}

/* =========================================================
   FIX FINAL 2026-08-24 — proporsi icon Stepper Daftar Nota
   Hanya Daftar Nota. Selector memakai aria-label yang sudah
   ada pada markup lama maupun baru, jadi tidak bergantung cache Blade.
   ========================================================= */
.order-card-step[aria-label="Bayar"] > .bi-credit-card{
  font-size:19px!important;
  line-height:1!important;
}
.order-card-step[aria-label="Selesai"] > .order-status-icon.is-process{
  width:18px!important;
  height:18px!important;
}
.order-card-step[aria-label="Selesai"] > .order-status-icon.is-process > .laundry-process-icon{
  width:18px!important;
  height:18px!important;
}

/* Peringatan pekerjaan kurir tertunda */
.courier-carryover-warning{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:0;
  padding:13px 14px;
  border:1px solid #f1d78a;
  border-radius:14px;
  background:#fffaf0;
  box-shadow:0 4px 14px rgba(133,77,14,.05);
  color:#66420b;
}
.courier-carryover-warning-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:#fff0bf;
  color:#9a6700;
  font-size:18px;
}
.courier-carryover-warning-copy{display:grid;gap:5px;min-width:0}
.courier-carryover-warning-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.courier-carryover-warning-head strong{
  color:#5f3d09;
  font-size:14px;
  line-height:1.35;
}
.courier-carryover-warning-head span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border:1px solid #efd28a;
  border-radius:999px;
  background:#fff;
  color:#8a5a0b;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
.courier-carryover-warning-copy p{
  margin:0;
  color:#7b5b24;
  font-size:12px;
  line-height:1.5;
}
@media(max-width:767px){
  .courier-carryover-warning{
    grid-template-columns:34px minmax(0,1fr);
    gap:10px;
    padding:12px;
    border-radius:13px;
  }
  .courier-carryover-warning-icon{width:34px;height:34px;border-radius:10px;font-size:16px}
  .courier-carryover-warning-head{display:grid;justify-content:stretch;gap:5px}
  .courier-carryover-warning-head strong{font-size:13px}
  .courier-carryover-warning-head span{justify-self:start;min-height:22px;padding:2px 8px;font-size:10px}
  .courier-carryover-warning-copy p{font-size:11.5px;line-height:1.45}
}

/* === Kurir: aksi kendala tugas === */
.btn-courier-issue{
  background:#f59e0b;
  color:#fff;
  border-color:#d97706;
  box-shadow:0 6px 14px rgba(217,119,6,.18);
}
.btn-courier-issue:hover{
  background:#d97706;
  color:#fff;
  border-color:#b45309;
}
.btn-courier-issue:focus-visible{
  outline:3px solid rgba(245,158,11,.28);
  outline-offset:2px;
}
.btn-courier-issue:disabled{
  background:#f6b94f;
  color:#fff;
  border-color:#e4a43a;
  box-shadow:none;
  opacity:.78;
}
.courier-task-choice-actions .btn-courier-issue,
.courier-task-fail-modal .btn-courier-issue{
  font-weight:800;
}

/* Customer e-Nota payment fee preview — follows PaymentDecisionService */
.digital-receipt-payment-preview{
  display:grid;
  gap:7px;
  margin-top:2px;
  padding:10px 11px;
  border:1px solid #dce7ea;
  border-radius:11px;
  background:#fff;
}
.digital-receipt-payment-preview[hidden]{display:none!important}
.digital-receipt-payment-preview>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:#65767d;
}
.digital-receipt-payment-preview>div strong{color:#173d43;font-size:12px}
.digital-receipt-payment-preview>div.is-total{
  padding-top:7px;
  border-top:1px dashed #d6e2e5;
  color:#173d43;
  font-weight:800;
}
.digital-receipt-payment-preview>div.is-total strong{font-size:14px;color:var(--primary)}
.digital-receipt-customer-payment-form button:disabled{opacity:.5;cursor:not-allowed}

/* Nota payment charge preview — fee only appears when customer bears it. */
.payment-modal-charge-preview{display:grid;gap:7px;margin:-4px 0 14px;padding:10px 12px;border:1px solid #dce7ea;border-radius:11px;background:#fff}
.payment-modal-charge-preview[hidden]{display:none!important}
.payment-modal-charge-preview>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.payment-modal-charge-preview>div strong{color:var(--fg)}
.payment-modal-charge-preview>div.is-total{padding-top:7px;border-top:1px dashed #d5e2e6;font-weight:800;color:var(--fg)}
.payment-modal-charge-preview>div.is-total strong{font-size:16px;color:var(--primary)}

.order-payment-charge-preview{display:grid;gap:6px;margin-top:8px;padding:9px 10px;border:1px solid #dce7ea;border-radius:10px;background:#fff}
.order-payment-charge-preview[hidden]{display:none!important}
.order-payment-charge-preview>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.order-payment-charge-preview>div strong{color:var(--fg)}
.order-payment-charge-preview>div.is-total{padding-top:6px;border-top:1px dashed #d5e2e6;font-weight:800;color:var(--fg)}
.order-payment-charge-preview>div.is-total strong{font-size:15px;color:var(--primary)}

.pickup-payment-charge-preview{display:grid;gap:6px;margin-top:8px;padding:9px 10px;border:1px solid #dce7ea;border-radius:10px;background:#fff}
.pickup-payment-charge-preview[hidden]{display:none!important}
.pickup-payment-charge-preview>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.pickup-payment-charge-preview>div strong{color:var(--fg)}
.pickup-payment-charge-preview>div.is-total{padding-top:6px;border-top:1px dashed #d5e2e6;font-weight:800;color:var(--fg)}
.pickup-payment-charge-preview>div.is-total strong{font-size:15px;color:var(--primary)}

/* === Payroll history table + stable return flow 20260901 === */
.payroll-employee-name{color:var(--primary)}
.payroll-history-table-wrap{overflow-x:auto}
.payroll-history-table{width:100%;min-width:0;table-layout:auto}
.payroll-history-table th,.payroll-history-table td{vertical-align:middle}
.payroll-history-table th:last-child,.payroll-history-table td:last-child{width:1%;white-space:nowrap;text-align:center}
.payroll-history-total{white-space:nowrap;text-align:right}
.payroll-history-period{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

@media(max-width:767px){
  .payroll-history-table-wrap{overflow-x:hidden;container-type:inline-size}
  .page .table-wrap .payroll-history-table{display:table!important;width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:clamp(12px,4.6cqw,15px)}
  .page .table-wrap .payroll-history-table th,
  .page .table-wrap .payroll-history-table td{padding:clamp(7px,2.35cqw,10px) clamp(4px,1.55cqw,7px)!important;font-size:inherit!important;line-height:1.28;text-align:center!important;white-space:normal!important;overflow:visible;text-overflow:clip}
  .page .table-wrap .payroll-history-table th{font-size:clamp(11px,4cqw,13px)!important}
  .payroll-history-table th:nth-child(1),.payroll-history-table td:nth-child(1){width:24%;padding-left:clamp(6px,2cqw,9px)!important}
  .payroll-history-table th:nth-child(2),.payroll-history-table td:nth-child(2){width:31%}
  .payroll-history-table th:nth-child(3),.payroll-history-table td:nth-child(3){width:31%}
  .payroll-history-table th:nth-child(4),.payroll-history-table td:nth-child(4){width:14%;padding-right:clamp(5px,1.7cqw,8px)!important}
  .payroll-history-period{display:grid;justify-items:center;gap:1px;white-space:normal;line-height:1.22}
  .payroll-history-period-separator{display:none}
  .payroll-history-total{white-space:nowrap!important;font-size:inherit!important;text-align:center!important}
  .payroll-history-table .btn-icon{width:clamp(36px,11.5cqw,42px)!important;height:clamp(36px,11.5cqw,42px)!important;min-width:clamp(36px,11.5cqw,42px)!important;min-height:clamp(36px,11.5cqw,42px)!important}
}

/* Employee loan UI refinement 2026-09-01 */
.employee-loan-summary-single{grid-template-columns:minmax(0,420px);margin-bottom:12px}
.employee-loan-filter{margin-bottom:12px}
.employee-loan-employee-name,.employee-loan-detail-name{color:#087f8c;font-weight:800}
.employee-loan-switch-spaced{margin-top:12px}
.employee-loan-detail-head{display:block}
.employee-loan-detail-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 6px}
.employee-loan-detail-copy{min-width:0}
.employee-loan-detail-copy h1{margin:0;font-size:24px;line-height:1.2}
.employee-loan-detail-copy p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.employee-loan-detail-status{flex:0 0 auto;margin-top:0}
.employee-loan-detail-head-bottom{display:flex;justify-content:flex-end;padding:4px 16px 14px}
.employee-loan-summary-card{margin-bottom:12px;padding:0;overflow:hidden}
.employee-loan-summary-table{margin:0;table-layout:fixed}
.employee-loan-summary-table th,.employee-loan-summary-table td{width:33.333%;text-align:center;vertical-align:middle}
.employee-loan-summary-table td{font-weight:700}
.employee-loan-summary-table td strong{color:#087f8c}
.employee-loan-deduction-note{margin:0;padding:10px 14px 12px;color:#62777d;font-size:12px}
.employee-loan-history-mobile{display:none}
.employee-loan-history-mobile-table{width:100%;table-layout:fixed;border-collapse:collapse}
.employee-loan-history-mobile-table th,.employee-loan-history-mobile-table td{padding:10px 8px;border-bottom:1px solid #e5ecee;vertical-align:middle}
.employee-loan-history-mobile-table th{background:#087f8c;color:#fff;font-weight:850;text-align:center}
.employee-loan-history-mobile-table th:first-child,.employee-loan-history-mobile-table td:first-child{width:50%;text-align:left}
.employee-loan-history-mobile-table th:nth-child(2),.employee-loan-history-mobile-table td:nth-child(2){width:25%;text-align:center}
.employee-loan-history-mobile-table th:last-child,.employee-loan-history-mobile-table td:last-child{width:25%;text-align:center}
.employee-loan-history-mobile-table tbody tr:last-child td{border-bottom:0}
.employee-loan-mobile-description{display:flex;min-width:0;flex-direction:column;gap:2px}
.employee-loan-mobile-description>span{color:#214850;font-weight:700}
.employee-loan-mobile-description small{overflow:hidden;color:#74878d;text-overflow:ellipsis;white-space:nowrap}
.employee-loan-mobile-description time{color:#8a989d}
.employee-loan-history-change{font-weight:750}
.employee-loan-history-change.is-payment{color:#16824d}
.employee-loan-history-change.is-disbursement{color:#9a5a09}
@media(max-width:760px){
  .employee-loan-summary-single{grid-template-columns:1fr}
  .employee-loan-detail-head-top{gap:10px;padding:13px 13px 5px}
  .employee-loan-detail-copy h1{font-size:20px}
  .employee-loan-detail-copy p{font-size:11px}
  .employee-loan-detail-head-bottom{padding:3px 13px 12px}
  .employee-loan-summary-table th{font-size:clamp(9px,2.65vw,11px);padding:9px 5px}
  .employee-loan-summary-table td{font-size:clamp(11px,3.2vw,14px);padding:12px 5px}
  .employee-loan-deduction-note{font-size:clamp(10px,2.8vw,12px)}
  .employee-loan-history-card .desktop-table{display:none!important}
  .employee-loan-history-mobile{display:block;overflow:hidden}
  .employee-loan-history-mobile-table th{font-size:clamp(9px,2.6vw,11px);line-height:1.15}
  .employee-loan-history-mobile-table td{font-size:clamp(10px,2.9vw,12.5px);line-height:1.28}
  .employee-loan-mobile-description small{font-size:clamp(8px,2.3vw,10px)}
  .employee-loan-mobile-description time{font-size:clamp(8px,2.15vw,9.5px)}
}


/* Employee loan list card + history refinement 2026-09-01 */
.employee-loan-summary-single .cash-overview-card strong{color:#087f8c}
.employee-loan-card-summary-wrap{margin-top:10px;overflow:hidden;border:1px solid #dbe6e9;border-radius:10px;background:#fff}
.employee-loan-card-summary-table{width:100%;table-layout:fixed;border-collapse:collapse}
.employee-loan-card-summary-table th,.employee-loan-card-summary-table td{width:33.333%;text-align:center;vertical-align:middle}
.employee-loan-card-summary-table th{padding:6px 4px;background:#087f8c;color:#fff;font-size:11px;font-weight:800;line-height:1.15}
.employee-loan-card-summary-table td{padding:8px 4px;color:#172b31;font-size:13px;font-weight:750;white-space:nowrap}
.employee-loan-card-summary-table td+td{border-left:1px solid #edf2f3}
.employee-loan-history-title{color:#087f8c!important}
@media(max-width:767px){
  .employee-loan-list-card{margin-bottom:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  .employee-loan-list-card>.mobile-cards{padding-bottom:82px}
  .employee-loan-list-card>.mobile-cards>.mobile-card{margin-bottom:10px}
  .employee-loan-card-summary-table th{font-size:clamp(9px,2.7vw,11px);padding:6px 3px}
  .employee-loan-card-summary-table td{font-size:clamp(11px,3.25vw,13px);padding:8px 3px}
}

/* =======================================================
   BUKU KAS — penyempurnaan UI 2026-09-03
   ======================================================= */
.employee-cash-current-card{padding:0!important;overflow:hidden}
.employee-cash-head-actions{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:12px 14px 8px;
}
.employee-cash-head-actions .btn{flex:1 1 0;justify-content:center;min-height:44px}
.employee-cash-head-actions .employee-cash-transaction-btn{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
}
.employee-cash-head-actions .employee-cash-transaction-btn:hover{
  filter:brightness(.95);
}
.employee-cash-head-actions .employee-cash-close-btn{
  background:#f59e0b!important;
  border-color:#e58d00!important;
  color:#fff!important;
}
.employee-cash-head-actions .employee-cash-close-btn:hover{
  background:#e58d00!important;
  border-color:#d68100!important;
  color:#fff!important;
}

.employee-cash-session-summary{
  margin:0 14px 12px;
  padding:9px 0 0;
  border-top:1px solid var(--bd);
}
.employee-cash-session-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.employee-cash-session-outlet{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px;
  color:#173e43;
}
.employee-cash-session-outlet>i{flex:0 0 auto;color:var(--primary);font-size:14px}
.employee-cash-session-outlet>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.employee-cash-session-status{flex:0 0 auto}
.employee-cash-session-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.employee-cash-session-meta strong{color:#173e43;font-size:10px}
.employee-cash-session-meta-separator{color:#94a3b8}

.employee-cash-active-card{margin-top:14px!important;padding:11px!important}
.employee-cash-active-head{display:block!important;margin:0 0 10px!important;padding:0!important}
.employee-cash-active-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.employee-cash-active-head h2{font-size:17px}
.employee-cash-movement-count{min-width:86px;min-height:27px;padding:4px 10px}
.employee-cash-movement-mobile-list{padding:0!important}
.employee-cash-movement-card{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  margin:0;
  padding:10px 10px 9px;
  border:1px solid var(--bd);
  border-radius:11px;
  background:#fff;
}
.employee-cash-movement-card+.employee-cash-movement-card{margin-top:8px}
.employee-cash-movement-icon{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  margin-top:1px;
  border-radius:999px;
  background:#edf9fa;
  color:var(--primary);
  font-size:13px;
}
.employee-cash-movement-main{min-width:0}
.employee-cash-movement-name{
  display:block;
  overflow:hidden;
  color:#173e43;
  font-size:12px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.employee-cash-movement-time{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}
.employee-cash-movement-note{
  display:block;
  margin-top:6px;
  color:#334155;
  font-size:10px;
  line-height:1.3;
}
.employee-cash-movement-side{
  display:flex;
  min-height:58px;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.employee-cash-movement-amount{
  font-size:12px;
  font-weight:500!important;
  line-height:1.3;
  white-space:nowrap;
}
.employee-cash-movement-amount.is-out{color:#dc2626}
.employee-cash-movement-amount.is-in{color:#15803d}
.employee-cash-movement-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.employee-cash-movement-actions .btn-icon{
  width:29px;
  height:29px;
  min-width:29px;
  padding:0;
  border-radius:9px;
  font-size:12px;
}

.employee-cash-open-warning{
  margin:0 0 14px;
  padding:10px 11px;
  border-radius:10px;
}
.employee-cash-open-warning>i{flex:0 0 auto;margin-top:1px;font-size:16px}
.employee-cash-open-warning span,.employee-cash-open-warning strong{display:block}
.employee-cash-open-warning span{font-size:10px;font-weight:500;opacity:.82}
.employee-cash-open-warning strong{margin-top:2px;font-size:12px;line-height:1.4}
.employee-cash-detected-outlet{
  display:flex;
  min-height:54px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:1px solid #bfe4e8;
  border-radius:10px;
  background:#f8feff;
  color:#285a60;
}
.employee-cash-detected-outlet>i{flex:0 0 auto;color:var(--primary);font-size:18px}
.employee-cash-detected-outlet strong,.employee-cash-detected-outlet span{display:block}
.employee-cash-detected-outlet strong{font-size:12px}
.employee-cash-detected-outlet span{margin-top:2px;color:var(--muted);font-size:10px}
.employee-cash-detected-outlet.is-missing{border-color:#fde68a;background:#fffdf3;color:#854d0e}
.employee-cash-detected-outlet.is-missing>i{color:#d97706}

@media(max-width:767px){
  .employee-cash-head-actions{padding:10px 10px 7px;gap:8px}
  .employee-cash-head-actions .btn{min-height:44px}
  .employee-cash-session-summary{margin:0 10px 10px;padding-top:8px}
  .employee-cash-session-meta{flex-wrap:nowrap;gap:3px;white-space:nowrap}
  .employee-cash-active-card{padding:10px!important}
  .employee-cash-active-head{margin-bottom:9px!important}
  .employee-cash-movement-card{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:9px}
  .employee-cash-movement-side{min-height:56px}
}

.quota-fee-default-warning{display:block;margin-top:6px;color:#c62828;font-size:.75rem;font-weight:700;line-height:1.35}
.quota-fee-default-warning[hidden]{display:none!important}