:root{
  --red:#e50914;--red2:#ff4d57;--ink:#101828;--muted:#667085;--line:#e4e7ec;
  --bg:#f6f8fb;--card:#fff;--soft:#fff1f2;--shadow:0 18px 45px rgba(16,24,40,.09);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:
radial-gradient(circle at 12% 2%,rgba(229,9,20,.11),transparent 28%),
radial-gradient(circle at 86% 0%,rgba(255,77,87,.10),transparent 26%),var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:50;background:rgba(246,248,251,.84);backdrop-filter:blur(14px);border-bottom:1px solid rgba(228,231,236,.85)}
.nav{max-width:1220px;margin:auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px}.logo-mark{width:46px;height:46px;border-radius:15px;object-fit:contain;display:block;box-shadow:0 10px 24px rgba(229,9,20,.25)}
.brand b{display:block;font-size:18px}.brand span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.navlinks{display:flex;gap:8px;align-items:center}.navlinks a{padding:10px 12px;font-weight:750;font-size:14px}.navlinks .pill{background:#fff;border:1px solid var(--line);border-radius:12px}
.nav-back-btn{display:inline-flex!important;padding:9px 14px!important;font-size:13px!important;border-radius:12px!important}
.shell{max-width:1220px;margin:auto;padding:28px 22px}.narrow{max-width:720px}
.hero{min-height:380px;padding:48px;border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.80));border:1px solid #e6e8ec;box-shadow:var(--shadow);display:flex;align-items:center;position:relative;overflow:hidden}
.hero:after{content:"SIGER";position:absolute;left:36%;bottom:-72px;font-weight:950;font-style:italic;font-size:190px;color:rgba(229,9,20,.045);pointer-events:none}
.hero h1{font-size:clamp(39px,5.5vw,70px);line-height:.98;letter-spacing:-.045em;margin:15px 0 18px;max-width:850px}.hero p{font-size:18px;line-height:1.65;color:var(--muted);max-width:800px}
.kicker{display:inline-flex;background:var(--soft);color:#b42318;border:1px solid #fecdd3;padding:7px 10px;border-radius:999px;font-weight:850;font-size:11px;letter-spacing:.06em}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.btn{border:0;border-radius:14px;padding:12px 16px;font:inherit;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn.primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 9px 24px rgba(229,9,20,.22)}.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}
.hero-card{background:#101828;color:#fff;border-radius:28px;padding:28px;box-shadow:0 25px 50px rgba(16,24,40,.18)}.mini-title{font-size:11px;color:#fda4af;font-weight:900;letter-spacing:.08em}.flow{display:flex;flex-direction:column;gap:10px;margin-top:20px}.flow b{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08)}.flow span{text-align:center;color:#fda4af}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.menu-card{padding:24px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.90);box-shadow:0 12px 28px rgba(16,24,40,.06)}.menu-card i{width:62px;height:62px;border-radius:19px;background:#fff;box-shadow:0 8px 20px rgba(16,24,40,.1);display:grid;place-items:center;font-style:normal;font-size:29px}.menu-card h3{margin:17px 0 6px}.menu-card p{color:var(--muted);line-height:1.5;font-size:14px;margin:0}
.panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow)}.panel h2{font-size:30px;margin:9px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.section-head.compact{align-items:center;margin-top:0}.region-chip,.scope-card{padding:13px 15px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);font-size:13px}.muted{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0 26px}.step{padding:13px;border-radius:15px;background:#f2f4f7;color:#667085;font-weight:800;text-align:center;font-size:13px}.step b{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#fff;margin-right:4px}.step.active{background:#fff1f2;color:#b42318;outline:1px solid #fecdd3}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:800}label small,.block small{font-weight:500;color:var(--muted)}
input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:14px;padding:13px 14px;background:#fff;color:var(--ink);font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#f97066;box-shadow:0 0 0 4px rgba(249,112,102,.12)}textarea{min-height:105px;resize:vertical}.top-gap{margin-top:18px}.block{display:flex}
.stack{display:grid;gap:18px;margin-top:22px}.wizard-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.item-row{display:grid;grid-template-columns:1.2fr 1fr .8fr 1.2fr .6fr 46px;gap:9px;align-items:end;padding:14px;border-radius:18px;background:#fafafa;border:1px solid var(--line);margin-bottom:10px}.item-row .btn{height:46px}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.totals>div{padding:17px;border-radius:18px;background:#f8fafc;border:1px solid var(--line)}.totals span{color:var(--muted);font-size:12px}.totals b{display:block;font-size:26px;margin-top:4px}.dashboard-totals{grid-template-columns:repeat(6,1fr)}
.info-box{padding:14px 16px;border-radius:15px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;line-height:1.5}
.alert{padding:13px 15px;border-radius:14px;margin:12px 0}.alert.error{background:#fef3f2;border:1px solid #fecdca;color:#b42318}.alert.success{background:#ecfdf3;border:1px solid #abefc6;color:#027a48}
.review-card{border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:12px}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-card small{color:var(--muted)}
.filters{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr auto;gap:10px;align-items:end}.filters label{min-width:0}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}table{width:100%;border-collapse:collapse;min-width:1180px}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:12px}th{background:#f8fafc;text-transform:uppercase;letter-spacing:.03em;color:#475467}
.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:850}.pending{background:#fff7ed;color:#c2410c}.done{background:#ecfdf3;color:#027a48}.follow{background:#eff8ff;color:#175cd3}.cancel{background:#fef3f2;color:#b42318}
.success-icon{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:#ecfdf3;color:#027a48;font-size:38px;font-weight:900}.center{text-align:center}.order-number{font-size:32px;font-weight:950;color:#e50914;margin:16px}.receipt{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0;text-align:left}.receipt>div,.receipt-list>div{padding:13px;border:1px solid var(--line);border-radius:14px;background:#fafafa}.receipt span,.receipt-list span{font-size:12px;color:var(--muted)}.receipt b{display:block;font-size:18px;margin-top:3px}.receipt-list{display:grid;gap:8px;text-align:left}.receipt-list>div{display:flex;justify-content:space-between}.center-actions{justify-content:center}
footer{text-align:center;color:var(--muted);font-size:12px;padding:34px}
@media(max-width:950px){.hero{grid-template-columns:1fr}.menu-grid{grid-template-columns:repeat(2,1fr)}.item-row{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr}.dashboard-totals{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.shell,.nav{padding-left:14px;padding-right:14px}.brand span{display:none}.navlinks>a:not(.pill){display:none}.hero{padding:28px;border-radius:25px}.menu-grid,.form-grid,.steps,.totals,.receipt,.review-grid{grid-template-columns:1fr}.panel{padding:20px;border-radius:24px}.section-head{flex-direction:column}.item-row{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.dashboard-totals{grid-template-columns:1fr 1fr}}

/* V2: single-scroll purchase form + Excel-like product grid */
.purchase-shell{max-width:1320px}
.form-section{display:grid;grid-template-columns:52px 1fr;column-gap:16px;row-gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.form-section:first-of-type{border-top:0;padding-top:8px}
.form-section .full-row{grid-column:1/-1}
.section-number{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;display:grid;place-items:center;font-size:18px;font-weight:950;box-shadow:0 8px 20px rgba(229,9,20,.18)}
.section-copy h3{margin:2px 0 4px;font-size:22px}.section-copy p{margin:0}
.product-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fafafa}.product-toolbar small{display:block;color:var(--muted);margin-top:3px}.compact-actions{margin:0}
.product-entry-wrap{border-radius:16px}.product-entry-table{min-width:900px}.product-entry-table th{text-align:center;white-space:nowrap}.product-entry-table td{padding:8px}.product-entry-table .brand-head{font-size:13px;background:#fff1f2;color:#b42318}.product-entry-table .validity-head,.product-entry-table .validity-cell{text-align:center;min-width:78px}.compact-input{min-width:108px;padding:9px 10px;border-radius:10px}.product-entry-table input{min-width:82px}.product-entry-table select:disabled,.product-entry-table input:disabled{background:#f2f4f7;color:#98a2b3}
.perdana-block{display:block;width:100%}
.submit-section{padding-bottom:6px}.submit-row{display:flex;justify-content:flex-end}.big-submit{min-width:220px;padding:15px 22px;font-size:15px}
.password-wrap{position:relative}.password-wrap input{padding-right:86px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#f2f4f7;border-radius:9px;padding:7px 10px;font-weight:800;cursor:pointer;color:#344054}.login-help{margin-top:20px;padding:15px 16px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);display:grid;gap:7px;font-size:13px}.login-help span,.login-help small{color:var(--muted)}.login-help code{color:#b42318;font-weight:800}
@media(max-width:760px){.form-section{grid-template-columns:42px 1fr}.product-toolbar,.perdana-block{display:flex;flex-direction:column;align-items:stretch}.compact-actions{display:grid;grid-template-columns:1fr 1fr}.submit-row{justify-content:stretch}.big-submit{width:100%}}


/* ===== SIGER V3: Excel-like voucher table with add-row per validity ===== */
.product-code-note{
  padding:12px 15px;
  border:1px solid #fed7aa;
  border-radius:14px;
  background:#fffbeb;
  color:#92400e;
  font-size:13px;
  line-height:1.5;
}
.excel-like-table{
  min-width:760px;
  border-collapse:collapse;
  background:#fff;
}
.excel-like-table th,
.excel-like-table td{
  border:1px solid #98a2b3 !important;
}
.excel-like-table thead th{
  background:#f8fafc;
  color:#101828;
  padding:8px 10px;
}
.excel-like-table .voucher-title-head{
  background:#fff;
  font-size:16px;
  text-align:center;
}
.excel-like-table .brand-head{
  background:#fff;
  color:#101828;
  font-size:14px;
}
.excel-like-table .byu-head{text-transform:none}
.excel-like-table .validity-cell{
  min-width:126px;
  vertical-align:middle;
  text-align:right;
  padding:8px 10px;
  background:#fff;
}
.excel-like-table .validity-cell > b{
  display:block;
  font-size:15px;
  text-align:right;
}
.excel-like-table .added-validity{
  background:#fcfcfd;
  color:#667085;
  text-align:right;
}
.add-row-btn{
  display:block;
  width:100%;
  margin-top:7px;
  border:0;
  background:transparent;
  color:#b42318;
  font-weight:800;
  font-size:11px;
  cursor:pointer;
  text-align:right;
  padding:2px 0;
}
.add-row-btn:hover{text-decoration:underline}
.remove-row-btn{
  margin-left:8px;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid #fda29b;
  background:#fff;
  color:#b42318;
  cursor:pointer;
  font-weight:900;
}
.excel-like-table .product-input{min-width:150px}
.excel-like-table .qty-input{min-width:105px}
.excel-like-table input{
  border:1px solid #d0d5dd;
  background:#fff;
}
@media(max-width:760px){
  .excel-like-table{min-width:720px}
}

.routing-note{
  padding:12px 15px;
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:13px;
  line-height:1.55;
}


/* ===== SIGER V6: Dashboard Order seperti tabel Excel ===== */
.dashboard-table-help{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid #d0d5dd;
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:#f8fafc;
  color:#475467;
  font-size:13px;
}
.dashboard-table-help b{color:#101828}
.dashboard-order-wrap{
  margin-top:0;
  border-radius:0 0 14px 14px;
  max-height:620px;
  overflow:auto;
  border:1px solid #d0d5dd;
}
.dashboard-order-table{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
.dashboard-order-table th,
.dashboard-order-table td{
  min-width:112px;
  max-width:220px;
  padding:9px 10px;
  border-right:1px solid #d0d5dd;
  border-bottom:1px solid #d0d5dd;
  vertical-align:top;
  background:#fff;
  white-space:normal;
}
.dashboard-order-table thead th{
  position:sticky;
  top:0;
  z-index:6;
  background:#f2f4f7;
  color:#344054;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.02em;
  text-align:center;
}
.dashboard-order-table thead tr:nth-child(2) th{
  top:38px;
  z-index:7;
}
.dashboard-order-table .group-head{
  font-size:12px;
  color:#101828;
}
.dashboard-order-table .simpati-head{background:#fee4e2}
.dashboard-order-table .byu-head-dash{background:#ede9fe}
.dashboard-order-table .sticky-col{
  position:sticky;
  z-index:4;
  background:#fff;
}
.dashboard-order-table thead .sticky-col{
  z-index:10;
  background:#f2f4f7;
}
.dashboard-order-table .col-order{
  left:0;
  min-width:115px;
  width:115px;
  text-align:center;
}
.dashboard-order-table .col-time{
  left:115px;
  min-width:142px;
  width:142px;
}
.dashboard-order-table .col-city{
  left:257px;
  min-width:110px;
  width:110px;
}
.dashboard-order-table .col-cluster{
  left:367px;
  min-width:120px;
  width:120px;
}
.dashboard-order-table .col-name{
  left:487px;
  min-width:170px;
  width:170px;
  box-shadow:5px 0 8px -8px #101828;
}
.col-order-th-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
}
.col-order-th-title {
  font-weight: 700;
  font-size: 11px;
  color: #344054;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dash-col-search {
  width: 96px;
  max-width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  transition: all .18s ease;
  box-sizing: border-box;
}
.dash-col-search:hover {
  border-color: #94a3b8;
}
.dash-col-search:focus {
  border-color: #e50914;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.18);
  background: #ffffff;
}
.dash-col-search::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 10.5px;
}
.col-name-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.col-name-wrap b {
  white-space: nowrap;
  font-weight: 700;
  color: #0f172a;
}
.btn-eye-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 25px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all .16s ease-in-out;
  color: #1e293b;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.btn-eye-detail .bed-icon {
  font-size: 12px;
  line-height: 1;
}
.btn-eye-detail:hover {
  background: #fff5f5;
  border-color: #e50914;
  color: #e50914;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(229, 9, 20, 0.16);
}
.btn-eye-detail:active {
  transform: translateY(0) scale(0.97);
}
.btn-eye-detail-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 750;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  color: #0f172a;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.btn-eye-detail-mobile:hover {
  background: #fff5f5;
  border-color: #e50914;
  color: #e50914;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.15);
}
.dashboard-order-table tbody tr:hover td{
  background:#fffdfd;
}
.dashboard-order-table tbody tr:hover .sticky-col{
  background:#fff8f7;
}
.dashboard-order-table .address-cell{
  min-width:210px;
  max-width:280px;
}
.dashboard-order-table .detail-cell{
  min-width:190px;
  max-width:260px;
  line-height:1.5;
}
.dashboard-order-table .number-cell{
  text-align:center;
  min-width:90px;
}
.dash-input,.dash-select{
  min-width:150px;
  width:100%;
  padding:9px 10px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  font:inherit;
}
.note-input{min-width:190px}
.note-placeholder-text{
  display:inline-block;
  padding:8px 4px;
  color:#667085;
  font-size:12px;
}
.req-star{
  color:#e50914;
  font-weight:900;
}
.status-select-compact{margin-top:7px}
.dash-save{
  min-width:82px;
  padding:9px 12px;
}
.col-action-time{
  min-width:140px;
  white-space:nowrap;
  color:#475467;
  font-size:11.5px;
}
.col-duration{
  min-width:115px;
  white-space:nowrap;
  color:#101828;
  font-weight:700;
  font-size:12px;
}
.col-wording{
  min-width:230px;
  max-width:320px;
  line-height:1.45;
  color:#344054;
  font-size:12px;
}
.wording-text{
  display:block;
  color:#344054;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
}
.row-done td{
  background:#fafcfd;
}
.row-done .sticky-col{
  background:#f8fafc;
}
tbody tr.row-done:hover td{
  background:#f0fdf4;
}
tbody tr.row-done:hover .sticky-col{
  background:#ecfdf5;
}
.dash-input:disabled,
.dash-select:disabled,
.mobile-field input:disabled,
.mobile-field select:disabled{
  background:#f2f4f7;
  color:#667085;
  cursor:not-allowed;
  border-color:#e4e7ec;
}
.btn-locked{
  background:#f2f4f7 !important;
  color:#98a2b3 !important;
  border-color:#d0d5dd !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}
.card-done{
  border-left:4px solid #12b76a;
}

/* ===== SIGER V8: Interactive Row Selection & Horizontal Read-Only Info Panel ===== */
.order-row {
  cursor: pointer;
  transition: background-color .15s ease;
}
.order-row:hover td {
  background: #f8fafc;
}
.order-row.row-selected td {
  background: #eff6ff !important;
  border-bottom-color: #93c5fd;
}
.order-row.row-selected .sticky-col {
  background: #e0f2fe !important;
}

.order-quick-info {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999 !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  overflow-y: auto;
  animation: fadeInModal 0.2s ease;
}
.order-quick-info.hidden {
  display: none !important;
}
@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.invoice-modal-container {
  width: 96%;
  max-width: 960px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: scaleInvoice 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scaleInvoice {
  from { opacity: 0; transform: scale(0.95) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Actions Toolbar above Invoice Sheet */
.invoice-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 16px;
  color: #fff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.invoice-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invoice-badge-live {
  background: #e50914;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}
.invoice-id-tag {
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.invoice-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .16s ease;
  line-height: 1;
}
.inv-btn-png {
  background: #e50914;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(229, 9, 20, 0.35);
}
.inv-btn-png:hover {
  background: #b42318;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.45);
}
.inv-btn-excel {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.inv-btn-excel:hover {
  background: #059669;
  transform: translateY(-1px);
}
.inv-btn-print {
  background: #334155;
  color: #f8fafc;
  border-color: #475467;
}
.inv-btn-print:hover {
  background: #1e293b;
  color: #ffffff;
}
.inv-btn-close {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.15);
  padding: 7px 12px;
}
.inv-btn-close:hover {
  background: #b42318;
  color: #ffffff;
  border-color: transparent;
}
.inv-action-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Spinner for Download PNG */
.inv-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: invSpin 0.7s linear infinite;
  display: inline-block;
}
@keyframes invSpin {
  to { transform: rotate(360deg); }
}

/* The Paper Sheet */
.invoice-paper {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  color: #0f172a;
}
.invoice-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #e50914 0%, #ff4b4b 60%, #1e3a5f 100%);
}

/* Header */
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 2px solid #f1f5f9;
}
.invoice-brand-block {
  flex: 1;
}
.invoice-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.invoice-logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
}
.invoice-company-name {
  font-size: 18px;
  font-weight: 900;
  color: #e50914;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.invoice-company-sub {
  font-size: 12px;
  color: #475467;
  font-weight: 600;
  margin-top: 2px;
}
.invoice-company-scope {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 3px;
}
.invoice-meta-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.invoice-heading-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #0f172a;
  line-height: 1;
}
.invoice-number-val {
  font-size: 16px;
  font-weight: 800;
  color: #e50914;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.invoice-date-val {
  font-size: 12px;
  color: #475467;
  font-weight: 500;
}
.invoice-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.invoice-status-pill.status-done {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.invoice-status-pill.status-process {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.invoice-status-pill.status-pending {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.invoice-status-pill.status-cancel {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Two-column Info Grid */
.invoice-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
.invoice-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invoice-card-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 4px;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 6px;
}
.invoice-buyer-name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.invoice-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.iir-label {
  color: #64748b;
  font-weight: 600;
  flex-shrink: 0;
}
.iir-val {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.iir-val.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.iir-address {
  text-align: right;
  line-height: 1.4;
  color: #334155;
}
.inv-badge-mini {
  background: #ecfdf5;
  color: #065f46;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
  margin-left: 4px;
}
.invoice-info-row.cancel-row {
  background: #fff1f2;
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 2px;
}
.text-red {
  color: #b91c1c !important;
}

/* Items Table */
.invoice-items-section {
  margin-top: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}
.invoice-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.invoice-table thead {
  background: #f1f5f9;
}
.invoice-table th {
  padding: 10px 10px;
  color: #334155;
  font-weight: 750;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid #cbd5e1;
}
.invoice-table th.th-no, .invoice-table td.th-no { width: 40px; text-align: center; }
.invoice-table th.th-item, .invoice-table td.th-item { width: 250px; text-align: left; }
.invoice-table th.th-cat, .invoice-table td.th-cat { width: 165px; text-align: left; }
.invoice-table th.th-qty, .invoice-table td.th-qty { width: 85px; text-align: center; }
.invoice-table th.th-validity, .invoice-table td.th-validity { width: 85px; text-align: center; }
.invoice-table th.th-price, .invoice-table td.th-price { width: 110px; text-align: right; }
.invoice-table th.th-subtotal, .invoice-table td.th-subtotal { width: 125px; text-align: right; }

.invoice-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
  word-break: break-word;
}
.invoice-table tbody tr:last-child td {
  border-bottom: none;
}
.invoice-table tbody tr:hover td {
  background: #f8fafc;
}

.inv-qty-pill {
  display: inline-block;
  text-align: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
}
.inv-qty-pill b {
  display: inline;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}
.inv-qty-pill small {
  display: inline;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-left: 3px;
}

.invoice-table tfoot {
  background: #f8fafc;
  border-top: 2px solid #cbd5e1;
}
.invoice-tfoot-row td {
  padding: 10px 12px;
  border-bottom: none;
}
.inv-tfoot-label {
  font-weight: 800;
  color: #334155;
  font-size: 11px;
  text-align: right;
  letter-spacing: 0.3px;
}
.inv-tfoot-qty {
  text-align: center;
}
.inv-total-qty-badge {
  display: inline-block;
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  color: #1d4ed8;
  font-weight: 850;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
}
.inv-tfoot-total-label {
  font-weight: 800;
  color: #334155;
  font-size: 11px;
  text-align: right;
  letter-spacing: 0.3px;
}
.inv-tfoot-total-val {
  font-weight: 850;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  color: #059669;
  text-align: right;
  background: #ecfdf5;
}
.inv-item-name {
  font-weight: 700;
  color: #0f172a;
}
.inv-brand-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
}
.inv-brand-pill.brand-simpati {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.inv-brand-pill.brand-byu {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.inv-brand-pill.brand-general {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Bottom Grid: Notes & Totals */
.invoice-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-top: 22px;
  align-items: start;
}
.invoice-notes-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invoice-wording-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
}
.iwb-title {
  font-size: 11px;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 4px;
}
.iwb-content {
  font-size: 12px;
  color: #166534;
  font-style: italic;
  line-height: 1.45;
}
.invoice-watermark-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  padding: 0 4px;
}
.iwn-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.invoice-summary-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #475467;
}
.inv-sum-row b {
  color: #0f172a;
}
.inv-sum-row.sub {
  font-size: 11.5px;
  color: #64748b;
  padding-left: 6px;
}
.inv-sum-divider {
  height: 1px;
  background: #cbd5e1;
  margin: 4px 0;
}
.inv-grand-total-box {
  background: linear-gradient(135deg, #e50914 0%, #b42318 100%);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(229, 9, 20, 0.25);
}
.igt-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.igt-amount {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Footer */
.invoice-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 10px;
}
.inv-foot-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-foot-left b {
  color: #0f172a;
  font-size: 11px;
}
.inv-foot-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.inv-stamp {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 800;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Print Styles */
@media print {
  body * {
    visibility: hidden !important;
  }
  #orderQuickInfo, #orderQuickInfo * {
    visibility: visible !important;
  }
  #orderQuickInfo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    z-index: 9999999 !important;
  }
  .no-print {
    display: none !important;
  }
  .invoice-paper {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px !important;
  }
}

/* Mobile responsive for invoice */
@media (max-width: 768px) {
  .invoice-paper {
    padding: 20px 16px;
  }
  .invoice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .invoice-meta-block {
    text-align: left;
    align-items: flex-start;
  }
  .invoice-info-grid {
    grid-template-columns: 1fr;
  }
  .invoice-bottom-grid {
    grid-template-columns: 1fr;
  }
  .invoice-table th, .invoice-table td {
    padding: 6px 8px;
    font-size: 11px;
  }
}


/* ===== SIGER V7: Responsive Mobile Dashboard ===== */
.mobile-order-cards{
  display:none;
}
@media(max-width:768px){
  .dashboard-order-wrap,
  .dashboard-table-help{
    display:none;
  }
  .mobile-order-cards{
    display:block;
    margin-top:16px;
  }
  .order-card{
    border:1px solid #e4e7ec;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 24px rgba(16,24,40,.06);
    overflow:hidden;
    margin-bottom:14px;
  }
  .order-card-summary{
    width:100%;
    border:0;
    background:#fff;
    padding:16px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    text-align:left;
    cursor:pointer;
  }
  .order-card-topline{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:5px;
  }
  .order-card-summary h3{
    margin:0 0 4px;
    font-size:18px;
    color:#101828;
  }
  .order-card-summary p{
    margin:0 0 4px;
    color:#475467;
    font-size:13px;
  }
  .order-card-summary small{
    color:#667085;
  }
  .order-card-qty{
    min-width:86px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:2px;
    color:#667085;
    font-size:11px;
  }
  .order-card-qty b{
    color:#101828;
    font-size:26px;
    line-height:1;
  }
  .order-card-open{
    margin-top:8px;
    color:#b42318;
    font-weight:800;
    white-space:nowrap;
  }
  .order-card-detail{
    border-top:1px solid #e4e7ec;
    padding:14px;
    background:#fcfcfd;
  }
  .mobile-section{
    background:#fff;
    border:1px solid #e4e7ec;
    border-radius:14px;
    padding:12px;
    margin-bottom:12px;
  }
  .mobile-section-title{
    font-weight:900;
    color:#101828;
    margin-bottom:8px;
    font-size:14px;
  }
  .mobile-detail-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:7px 0;
    border-bottom:1px dashed #eaecf0;
    font-size:13px;
  }
  .mobile-detail-row:last-child{border-bottom:0}
  .mobile-detail-row span{color:#667085}
  .mobile-detail-row b{
    color:#101828;
    text-align:right;
    font-weight:700;
  }
  .mobile-detail-row.stacked{
    display:block;
  }
  .mobile-detail-row.stacked b{
    display:block;
    margin-top:4px;
    text-align:left;
  }
  .mobile-empty,
  .mobile-empty-card{
    color:#667085;
    font-size:13px;
  }
  .mobile-empty-card{
    border:1px dashed #d0d5dd;
    border-radius:14px;
    padding:18px;
    background:#fff;
  }
  .mobile-field{
    display:block;
    font-size:12px;
    font-weight:800;
    color:#344054;
    margin-bottom:10px;
  }
  .mobile-field input,
  .mobile-field select{
    width:100%;
    margin-top:6px;
    padding:11px 12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    font:inherit;
  }
  .mobile-save-btn{
    width:100%;
    margin-top:4px;
  }
  .toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .toolbar .field,
  .toolbar .btn{
    width:100%;
    min-width:0 !important;
  }
  .summary{
    grid-template-columns:1fr 1fr !important;
  }
}


/* ===== SIGER V8: Quantity-first dashboard + compact status edit ===== */
.product-gb{
  color:#667085;
  font-weight:600;
  white-space:nowrap;
}
.status-display-wrap{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.edit-status-btn{
  border:0;
  background:transparent;
  color:#b42318;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  padding:2px 0;
  text-decoration:underline;
  text-underline-offset:2px;
}
.status-edit-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.status-select-compact{
  min-width:118px;
  margin-top:0 !important;
  padding:7px 8px;
}
.cancel-status-edit{
  border:0;
  background:transparent;
  color:#667085;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
}

/* ===== SIGER PHP V2: Final Flow ===== */
.qr-panel{max-width:980px;margin:0 auto}
.qr-grid{display:grid;grid-template-columns:1fr;gap:24px}
.qr-copy{background:#fff;border:1px solid #e4e7ec;border-radius:20px;padding:22px}
.copy-row{display:flex;gap:10px;margin:14px 0}
.copy-row input{flex:1}
@media(max-width:768px){
  .copy-row{display:block}
  .copy-row .btn{width:100%;margin-top:8px}
}


/* ===== SIGER PHP V3: QR Code Display ===== */
.qr-display-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:28px;
  align-items:center;
}
.qr-card{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:24px;
  padding:24px;
  box-shadow:0 12px 30px rgba(16,24,40,.08);
  text-align:center;
}
.qr-title{
  font-weight:900;
  color:#101828;
  margin-bottom:14px;
  letter-spacing:.04em;
}
#qrcode{
  display:flex;
  justify-content:center;
  align-items:center;
}
#qrcode canvas{
  max-width:100%;
  height:auto !important;
}
.qr-caption{
  margin-top:14px;
  color:#667085;
  font-size:13px;
}
.qr-info{margin:16px 0}
@media(max-width:768px){
  .qr-display-grid{grid-template-columns:1fr}
  .qr-card{max-width:340px;width:100%;margin:0 auto}
}


/* ===== SIGER PHP V4: Local QR Renderer ===== */
.qr-grid{
  grid-template-columns:minmax(320px,380px) 1fr;
  align-items:center;
}
.qr-visual-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:24px;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:24px;
  box-shadow:0 14px 32px rgba(16,24,40,.08);
}
.qr-caption{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.qr-caption b{font-size:16px;color:#101828}
.qr-caption span{font-size:13px;color:#667085}
.qr-mount{
  width:300px;
  height:300px;
  display:grid;
  place-items:center;
  border:10px solid #fff;
  border-radius:18px;
  background:#fff;
}
.qr-mount svg{
  display:block;
  max-width:100%;
  height:auto;
}
@media(max-width:768px){
  .qr-grid{grid-template-columns:1fr}
  .qr-mount{width:270px;height:270px}
}

/* ===== SIGER V5: Summary Table & View Tabs ===== */
.dash-view-tabs {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 16px;
  width: fit-content;
  border: 1px solid var(--line);
  margin-top: 22px;
}
.dash-tab-btn {
  border: none;
  background: transparent;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all .2s ease;
}
.dash-tab-btn:hover {
  color: var(--ink);
}
.dash-tab-btn.active {
  background: #fff;
  color: #e50914;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.summary-table-wrap {
  margin-top: 14px;
}
.summary-table {
  min-width: 900px;
  border-collapse: collapse;
}
.summary-table thead tr th {
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 850;
  color: #ffffff !important;
  text-align: center;
  border: 1px solid #ffffff !important;
  letter-spacing: .02em;
  vertical-align: middle;
}
.summary-table .th-red {
  background: #cc0018 !important;
  color: #ffffff !important;
}
.summary-table .th-navy {
  background: #001552 !important;
  color: #ffffff !important;
}
.summary-table thead .group-th {
  letter-spacing: .06em;
}
.summary-table tbody td {
  padding: 11px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
}
.summary-table tbody tr:hover {
  background: #f8fafc;
}
.summary-table .num-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sum-done-val { color: #027a48; font-weight: 700; }
.sum-pending-val { color: #c2410c; font-weight: 700; }
.sum-dt-val { color: #001552; font-weight: 600; }
.sum-dtgt-val { color: #dc2626; font-weight: 800; }

.summary-row-active {
  background: #fdfefe;
}
.summary-row-active:hover {
  background: #eff6ff !important;
}
.sum-total-val {
  color: #0f172a;
  font-weight: 750;
}

.summary-section-header td {
  background: #f1f5f9 !important;
  padding: 8px 12px !important;
  border-top: 2px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}
.summary-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #001552;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 2px 6px rgba(0, 21, 82, 0.15);
}

.summary-total-row {
  background: #e2e8f0;
  border-top: 2px solid #64748b;
}
.summary-total-row td {
  font-size: 13px;
  padding: 12px;
  font-weight: 850;
  border: 1px solid #cbd5e1;
}
.summary-total-row .total-label {
  text-align: center;
  letter-spacing: .05em;
  color: #0f172a;
  background: #e2e8f0;
}

.summary-kpi-totals {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ===== SIGER V6: Responsive App Sidebar & Navigation ===== */
.has-sidebar {
  min-height: 100vh;
  background: #f8fafc;
}
.app-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 90;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-user-badge {
  font-size: 12px;
  font-weight: 700;
  color: #475467;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #0f172a;
  color: #f8fafc;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
}
.sidebar-brand .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
}
.sidebar-brand b {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .02em;
  display: block;
  line-height: 1.2;
}
.sidebar-brand span {
  font-size: 11px;
  color: #94a3b8;
  display: block;
}
.sidebar-close-btn {
  display: none;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
}

.sidebar-user {
  margin: 14px 12px 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.user-role-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #e50914;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.user-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-scope {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.sidebar-nav-section {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: .08em;
  padding: 12px 10px 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s ease;
}
.nav-item .nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.nav-item .nav-text {
  flex: 1;
}
.nav-item .nav-arrow {
  font-size: 11px;
  color: #64748b;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.nav-item.active {
  background: linear-gradient(135deg, #e50914, #c8102e);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}
.nav-item-logout {
  color: #f87171;
}
.nav-item-logout:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.sidebar-footer {
  padding: 14px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: #64748b;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar Responsive Layout */
@media(min-width: 992px) {
  body.has-sidebar {
    padding-left: 260px;
  }
  .app-sidebar {
    transform: none !important;
  }
  .sidebar-toggle-btn {
    display: none;
  }
  .mobile-brand {
    display: none;
  }
}
@media(max-width: 991px) {
  body.has-sidebar {
    padding-left: 0;
  }
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close-btn {
    display: grid;
    place-items: center;
  }
  .sidebar-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
  }
  .sidebar-toggle-btn span {
    height: 2px;
    width: 100%;
    background: #334155;
    border-radius: 2px;
  }
  body.sidebar-locked {
    overflow: hidden;
  }
}

/* ===== Dedicated Summary Page Styling ===== */
.summary-control-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 20px;
}
.summary-geo-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.summary-geo-filters label {
  min-width: 0;
}
.summary-period-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.period-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.period-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475467;
}
.period-label input[type="date"] {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  width: 145px;
}
.period-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-export-excel {
  background: linear-gradient(135deg, #107c41, #15803d) !important;
  color: #ffffff !important;
  border: 1px solid #166534 !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.22) !important;
  transition: all 0.2s ease !important;
}
.btn-export-excel:hover {
  background: linear-gradient(135deg, #0b6a36, #166534) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.32) !important;
}
.btn-export-png {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22) !important;
  transition: all 0.2s ease !important;
}
.btn-export-png:hover {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.32) !important;
}
@media(max-width: 850px) {
  .summary-geo-filters {
    grid-template-columns: 1fr;
  }
  .summary-period-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .period-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  .period-label {
    justify-content: space-between;
  }
  .period-label input[type="date"] {
    width: 60%;
  }
  .period-buttons {
    justify-content: stretch;
  }
  .period-buttons .btn {
    flex: 1;
  }
}

/* ===== PERDANA 2-COLUMN GRID (SIMPATI LEFT, BYU RIGHT) ===== */
.perdana-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}
.perdana-table-col {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}
.perdana-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ec;
  font-size: 14px;
  font-weight: 700;
}
.simpati-brand-header {
  background: #fff5f5;
  color: #b42318;
}
.byu-brand-header {
  background: #f9f5ff;
  color: #6941c6;
}
.brand-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.simpati-badge {
  background: #e50914;
  color: #ffffff;
}
.byu-badge {
  background: #7f56d9;
  color: #ffffff;
}
.perdana-table-wrap {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  width: 100% !important;
}
.perdana-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}
.perdana-table th {
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid #e4e7ec;
  white-space: normal !important;
}
.perdana-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
  font-size: 13px;
  white-space: normal !important;
}
.perdana-table th:first-child,
.perdana-table td:first-child {
  vertical-align: middle !important;
}
.perdana-table th:last-child,
.perdana-table td:last-child {
  width: 110px !important;
  max-width: 110px !important;
  min-width: 85px !important;
  padding: 7px 10px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.perdana-table tbody tr:hover td {
  background: #fafbfc;
}
.perdana-table tbody tr:last-child td {
  border-bottom: none;
}
.perdana-table .qty-input {
  width: 100% !important;
  max-width: 85px !important;
  min-width: 60px !important;
  padding: 7px 8px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

@media (max-width: 860px) {
  .perdana-tables-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== HOME LANDING PAGE ENHANCEMENT ===== */
.home-shell {
  max-width: 1100px;
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;
}
.home-hero {
  width: 100%;
  min-height: 480px;
  padding: 60px 48px;
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88));
  border: 1px solid rgba(228, 231, 236, 0.95);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.home-hero:after {
  content: "SIGER";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 950;
  font-style: italic;
  font-size: 240px;
  color: rgba(229, 9, 20, 0.035);
  pointer-events: none;
  z-index: 1;
}
.hero-content-center {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-content-center .kicker {
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.08);
}
.hero-title {
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 16px 0;
  color: #101828;
  font-weight: 900;
}
.text-gradient {
  background: linear-gradient(135deg, #e50914 0%, #ff4d57 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: #667085;
  max-width: 680px;
  margin: 0 auto 28px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.btn-large {
  padding: 14px 22px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-large:hover {
  transform: translateY(-2px);
}
.hero-feature-tags {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid #f2f4f7;
  width: 100%;
}
.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475467;
  background: #f8fafc;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e4e7ec;
}
.feature-tag span {
  color: #027a48;
  font-weight: 900;
}

@media(max-width: 768px) {
  .home-hero {
    padding: 36px 20px;
    border-radius: 26px;
    min-height: auto;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn-large {
    width: 100%;
  }
  .hero-feature-tags {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* ===== LOGIN SHOW PASSWORD CHECKBOX ===== */
.login-shell {
  max-width: 540px;
  margin: 30px auto;
}
.login-panel {
  max-width: 500px;
  margin: 0 auto;
}
.show-password-row {
  margin: 10px 0 22px 0;
  display: flex;
  align-items: center;
}
.show-password-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #344054 !important;
}
.show-password-checkbox {
  width: 18px !important;
  height: 18px !important;
  accent-color: #e50914;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
}
.show-password-text {
  font-size: 13.5px;
  color: #475467;
}
.show-password-label:hover .show-password-text {
  color: #101828;
}

/* ===== SIGER PHASE 1: PRODUCT MANAGEMENT ===== */
.product-management-page{max-width:100%;}
.product-management-panel{overflow:hidden;}
.product-management-head{align-items:flex-start;gap:20px;}
.pm-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700;color:#475467;background:#f8fafc;border:1px solid #eaecf0;border-radius:14px;padding:10px 14px;}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.legend-dot.on{background:#12b76a}.legend-dot.off{background:#98a2b3}
.pm-info-note{margin:14px 0 18px;padding:12px 14px;border-radius:12px;background:#fff8e6;border:1px solid #fedf89;color:#7a2e0e;font-size:13px;}
.pm-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) minmax(240px,1.3fr) 120px;gap:12px;align-items:end;margin-bottom:16px;}
.pm-toolbar label{font-size:12px;font-weight:800;color:#344054;display:flex;flex-direction:column;gap:6px}.pm-toolbar select,.pm-toolbar input{min-height:42px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 10px;background:#fff;color:#101828}
.pm-counter{min-height:42px;border:1px solid #eaecf0;border-radius:10px;background:#f9fafb;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px}.pm-counter b{font-size:20px;color:#d71920}.pm-counter span{font-size:11px;color:#667085}
.pm-message{position:sticky;top:74px;z-index:40;margin:0 0 12px;padding:10px 14px;border-radius:10px;font-weight:700;font-size:13px}.pm-message.success{background:#ecfdf3;border:1px solid #abefc6;color:#067647}.pm-message.error{background:#fef3f2;border:1px solid #fecdca;color:#b42318}.pm-message.hidden{display:none}
.pm-table-wrap{max-height:68vh;overflow:auto;border:1px solid #eaecf0;border-radius:14px;}
.pm-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px;background:#fff}.pm-table th,.pm-table td{border-right:1px solid #eaecf0;border-bottom:1px solid #eaecf0;padding:8px 10px;text-align:center;white-space:nowrap}.pm-table thead th{position:sticky;top:0;z-index:15;background:#f9fafb;color:#344054;font-weight:800}.pm-table thead tr:nth-child(2) th{top:35px}.pm-table .pm-brand-head{color:#fff;font-size:13px}.pm-table .pm-brand-head.simpati{background:#d71920}.pm-table .pm-brand-head.byu{background:#344054}.pm-table td:nth-child(1),.pm-table td:nth-child(2),.pm-table td:nth-child(3){text-align:left}.pm-table tbody tr:hover td{background:#fffdf7}.pm-default-off-col{background:#fcfcfd}
.sticky-col{position:sticky!important;background:#fff!important;z-index:8}.sticky-col-1{left:0;min-width:120px}.sticky-col-2{left:120px;min-width:190px}.sticky-col-3{left:310px;min-width:190px;box-shadow:4px 0 8px rgba(16,24,40,.04)}.pm-table thead .sticky-col{z-index:25;background:#f9fafb!important}
.pm-toggle-cell{min-width:72px}.pm-toggle-cell.saving{opacity:.55}.pm-switch{position:relative;display:inline-block;width:42px;height:24px;vertical-align:middle}.pm-switch input{opacity:0;width:0;height:0}.pm-slider{position:absolute;inset:0;border-radius:999px;background:#d0d5dd;cursor:pointer;transition:.2s}.pm-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:.2s}.pm-switch input:checked + .pm-slider{background:#12b76a}.pm-switch input:checked + .pm-slider:before{transform:translateX(18px)}.pm-switch input:disabled + .pm-slider{cursor:wait}.pm-state{display:block;margin-top:3px;font-size:9px;font-weight:800;color:#667085}
@media(max-width:900px){.pm-toolbar{grid-template-columns:1fr 1fr}.pm-counter{grid-column:span 2}.product-management-head{flex-direction:column}.pm-table-wrap{max-height:72vh}.sticky-col-1{min-width:105px}.sticky-col-2{left:105px;min-width:150px}.sticky-col-3{left:255px;min-width:160px}}

/* ===== SIGER PHASE 2: REFINED PRODUCT + PRICE MANAGEMENT ===== */
.pmc-hero,.pmx-hero-panel{overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff7f7 58%,#f7f9fc 100%);border:1px solid #edf0f5!important;box-shadow:0 16px 45px rgba(16,24,40,.06)!important}.pmc-head,.pmx-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.pmc-head h2,.pmx-hero h2{margin:10px 0 8px;font-size:30px;letter-spacing:-.7px}.pmc-head-side{min-width:220px;border:1px solid #ffd4d4;background:rgba(255,255,255,.82);border-radius:18px;padding:14px 16px;text-align:right}.pmc-head-side small,.pmc-head-side b{display:block}.pmc-head-side small{margin-top:7px;color:#667085;font-size:11px}.pmc-head-side b{font-size:13px;color:#101828}.pmc-role-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff0f0;color:#cf1322;font-size:10px;font-weight:900;border:1px solid #ffc9ce}.pmc-summary-row{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) minmax(260px,1.3fr);gap:10px;margin-top:20px}.pmc-summary-row>div{background:rgba(255,255,255,.86);border:1px solid #eaecf0;border-radius:14px;padding:12px 14px}.pmc-summary-row span{display:block;font-weight:900;color:#101828}.pmc-summary-row small{display:block;margin-top:3px;color:#667085}.pmc-status-legend{display:flex;align-items:center;justify-content:center;gap:20px!important}.pmc-status-legend span{font-size:11px}.pmc-main{margin-top:14px}.pmc-toolbar-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.pmc-toolbar-title>div:first-child b,.pmc-toolbar-title>div:first-child span{display:block}.pmc-toolbar-title>div:first-child span{font-size:12px;color:#667085;margin-top:2px}.pm-table thead tr:nth-child(2) th small{display:block;font-size:9px;color:inherit;opacity:.75}.pm-state{display:inline-flex!important;margin-top:5px!important;padding:2px 6px;border-radius:999px}.pm-state.is-on{background:#ecfdf3;color:#067647}.pm-state.is-off{background:#f2f4f7;color:#667085}
.price-management-page{max-width:100%}.pmx-hero-panel{margin-bottom:14px}.pmx-access-badge{display:flex;align-items:center;gap:10px;min-width:180px;padding:12px 14px;border-radius:16px;border:1px solid}.pmx-access-badge span{font-size:24px}.pmx-access-badge small,.pmx-access-badge b{display:block}.pmx-access-badge small{font-size:9px;letter-spacing:.7px}.pmx-access-badge b{font-size:12px}.pmx-access-badge.editable{background:#ecfdf3;border-color:#abefc6;color:#067647}.pmx-access-badge.readonly{background:#f8fafc;border-color:#d0d5dd;color:#344054}.pmx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.pmx-kpi{padding:14px 16px;background:rgba(255,255,255,.9);border:1px solid #eaecf0;border-radius:16px}.pmx-kpi span,.pmx-kpi b,.pmx-kpi small{display:block}.pmx-kpi span{font-size:11px;color:#667085}.pmx-kpi b{font-size:26px;margin:4px 0;color:#101828}.pmx-kpi small{font-size:10px;color:#98a2b3}.pmx-kpi .pmx-kpi-time{font-size:15px;margin-top:10px}.pmx-main-panel{overflow:hidden}.pmx-toolbar{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr)) minmax(210px,1.3fr);gap:10px;margin-bottom:14px}.pmx-toolbar label{font-size:11px;font-weight:800;color:#344054;display:flex;flex-direction:column;gap:5px}.pmx-toolbar select,.pmx-toolbar input{height:40px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;padding:7px 9px;color:#101828}.pmx-table-headline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 2px}.pmx-table-headline>div:first-child{display:flex;align-items:baseline;gap:10px}.pmx-table-headline span{font-size:11px;color:#667085}.pmx-hint{font-size:11px;color:#667085}.pmx-table-wrap{max-height:62vh;overflow:auto;border:1px solid #eaecf0;border-radius:14px}.pmx-price-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:11px}.pmx-price-table th,.pmx-price-table td{padding:10px 11px;border-right:1px solid #eaecf0;border-bottom:1px solid #eaecf0;white-space:nowrap;vertical-align:middle}.pmx-price-table th{position:sticky;top:0;z-index:8;background:#0f1c36;color:#fff;font-weight:800}.pmx-price-table tbody tr:hover td{background:#fffafa}.pmx-price-table tr.saving{opacity:.6}.pmx-type-badge,.pmx-brand-badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900}.pmx-type-badge{background:#f2f4f7;color:#475467}.pmx-brand-badge.simpati{background:#fff0f1;color:#d71920}.pmx-brand-badge.byu{background:#f3f0ff;color:#6941c6}.pmx-product-cell{min-width:220px;white-space:normal!important}.pmx-product-cell small{display:block;color:#98a2b3;margin-top:3px}.pmx-price-input-wrap{display:flex;align-items:center;gap:5px;border:1px solid #d0d5dd;border-radius:9px;padding:2px 7px;background:#fff;min-width:125px}.pmx-price-input-wrap:focus-within{border-color:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.1)}.pmx-price-input-wrap span{font-size:10px;color:#667085}.pmx-price-input{border:0!important;outline:0!important;width:92px;height:32px!important;padding:0!important;font-weight:800}.pmx-read-price{font-weight:900;color:#101828}.pmx-read-price.empty{color:#98a2b3;font-weight:600}.pmx-save-btn{border:0;border-radius:9px;background:linear-gradient(135deg,#e8001d,#ff4655);color:#fff;font-weight:900;padding:9px 13px;cursor:pointer;box-shadow:0 5px 14px rgba(232,0,29,.18)}.pmx-save-btn:disabled{opacity:.55;cursor:wait}.pmx-updater{max-width:150px;overflow:hidden;text-overflow:ellipsis}.pmx-history-panel{margin-top:14px}.pmx-history-title{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px}.pmx-history-title h3{margin:6px 0 0}.pmx-history-note{font-size:11px;color:#667085}.pmx-history-wrap{max-height:360px;overflow:auto;border:1px solid #eaecf0;border-radius:14px}.pmx-history-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.pmx-history-table th,.pmx-history-table td{padding:10px;border-bottom:1px solid #eaecf0;text-align:left}.pmx-history-table th{position:sticky;top:0;background:#f8fafc;color:#344054}.pmx-empty-history{text-align:center!important;color:#98a2b3;padding:24px!important}
@media(max-width:1100px){.pmx-kpis{grid-template-columns:1fr 1fr}.pmx-toolbar{grid-template-columns:1fr 1fr 1fr}.pmc-summary-row{grid-template-columns:1fr 1fr}.pmc-status-legend{grid-column:span 2}}@media(max-width:760px){.pmc-head,.pmx-hero{flex-direction:column}.pmc-head-side,.pmx-access-badge{width:100%;text-align:left}.pmc-summary-row,.pmx-kpis{grid-template-columns:1fr 1fr}.pmx-toolbar{grid-template-columns:1fr 1fr}.pmx-search{grid-column:span 2}.pmc-summary-row{grid-template-columns:1fr 1fr}.pmc-status-legend{grid-column:span 2}.pmx-history-title{align-items:flex-start;flex-direction:column}}

/* SIGER UAT Phase 3 - Purchase Catalog Integration */
.purchase-catalog-note{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #d9e3f0;background:linear-gradient(135deg,#f8fbff,#fff);border-radius:16px;margin:12px 0 18px;color:#41516b}.purchase-catalog-note strong{color:#111827}.purchase-catalog-note .dot{width:10px;height:10px;border-radius:999px;background:#ef233c;box-shadow:0 0 0 5px rgba(239,35,60,.10)}
.catalog-status{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:#64748b}.catalog-status.loading::before{content:"";width:14px;height:14px;border:2px solid #cbd5e1;border-top-color:#ef233c;border-radius:50%;animation:catalogSpin .8s linear infinite}@keyframes catalogSpin{to{transform:rotate(360deg)}}
.catalog-status.ready{color:#047857}.catalog-status.error{color:#b91c1c}.catalog-status.empty{color:#92400e}
.catalog-select{width:100%;min-width:180px}.catalog-select:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.catalog-price{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:800}.catalog-price.missing{background:#fff7ed;color:#c2410c}.catalog-off{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:#f3f4f6;color:#6b7280;font-size:12px;font-weight:700}.catalog-off::before{content:"OFF";font-size:10px;padding:2px 5px;border-radius:5px;background:#e5e7eb;color:#6b7280}
.product-entry-table tr.catalog-hidden-validity{display:none}.product-entry-table td.catalog-disabled{background:#fafafa}.product-entry-table .qty-input:disabled{background:#f3f4f6;color:#9ca3af}.catalog-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.catalog-summary span{padding:7px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;color:#475569}.catalog-summary b{color:#111827}
@media(max-width:760px){.purchase-catalog-note{align-items:flex-start}.catalog-select{min-width:145px}.product-entry-table{min-width:760px}}

/* SIGER Phase 4 — Master Line Up */
.lineup-page{display:grid;gap:18px}.lu-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;background:linear-gradient(135deg,#fff 0%,#fff7f8 100%)}.lu-hero h2{margin:8px 0 8px;font-size:32px}.lu-add-btn{white-space:nowrap}.lu-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px}.lu-stat{background:#f8fafc;border:1px solid #e5eaf1;border-radius:16px;padding:17px}.lu-stat span,.lu-stat small{display:block;color:#667085}.lu-stat b{font-size:28px;display:block;margin:4px 0;color:#101828}.lu-stat .lu-source{font-size:18px}.lu-main{padding:20px}.lu-toolbar{display:grid;grid-template-columns:190px 190px 180px minmax(260px,1fr);gap:12px;margin-bottom:16px}.lu-toolbar label{font-weight:700;font-size:13px;color:#344054}.lu-toolbar select,.lu-toolbar input{margin-top:6px;width:100%}.lu-wrap{border:1px solid #e3e8ef;border-radius:18px;max-height:650px}.lu-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13px}.lu-table th{position:sticky;top:0;z-index:2;background:#0f1c35;color:#fff;padding:13px 12px;white-space:nowrap}.lu-table td{padding:12px;border-bottom:1px solid #edf0f4;vertical-align:top;background:#fff}.lu-table tr:hover td{background:#fbfcfe}.lu-sku{min-width:270px}.lu-sku small,.lu-table td small{display:block;color:#667085;margin-top:4px}.lu-edit-btn{border:1px solid #d0d5dd;background:#fff;border-radius:10px;padding:8px 13px;font-weight:800;cursor:pointer}.lu-edit-btn:hover{border-color:#ef233c;color:#d90429}.lu-switch{display:inline-flex;position:relative;width:44px;height:24px;vertical-align:middle}.lu-switch input{opacity:0;width:0;height:0}.lu-switch span{position:absolute;inset:0;border-radius:999px;background:#cfd5df;cursor:pointer;transition:.2s}.lu-switch span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:.2s}.lu-switch input:checked+span{background:#10b981}.lu-switch input:checked+span:after{transform:translateX(20px)}.lu-status-text{display:inline-block;margin-left:6px;font-weight:800}.lu-modal{position:fixed;inset:0;z-index:1000;background:#0b1220aa;display:grid;place-items:center;padding:20px}.lu-modal.hidden{display:none}.lu-modal-card{width:min(820px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 30px 80px #0004;padding:24px}.lu-modal-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #eee;padding-bottom:14px;margin-bottom:18px}.lu-modal-head h3{font-size:25px;margin:7px 0 0}.lu-modal-head button{border:0;background:#f2f4f7;border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}.lu-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.lu-form-grid label{font-weight:750;font-size:13px;color:#344054}.lu-form-grid input,.lu-form-grid select{display:block;width:100%;margin-top:6px}.lu-form-grid .span2{grid-column:span 2}.lu-active-field{display:flex!important;align-items:center;gap:8px;grid-column:span 3;background:#f8fafc;border:1px solid #e5e7eb;padding:12px;border-radius:12px}.lu-active-field input{width:auto;margin:0}.lu-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #eee}@media(max-width:1100px){.lu-summary{grid-template-columns:repeat(2,1fr)}.lu-toolbar{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.lu-hero{align-items:flex-start;flex-direction:column}.lu-hero h2{font-size:26px}.lu-add-btn{width:100%}.lu-summary,.lu-toolbar,.lu-form-grid{grid-template-columns:1fr}.lu-form-grid .span2,.lu-active-field{grid-column:span 1}.lu-main{padding:12px}}

/* =========================================================
   FIX LINE UP PAGE - HORIZONTAL SCROLL ONLY INSIDE TABLE
   ========================================================= */

.lineup-page {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.lineup-page .panel {
    min-width: 0;
    max-width: 100%;
}

.lu-hero,
.lu-summary,
.lu-main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table container */
.lu-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    max-height: 560px;
}

/* Table boleh lebar, tetapi hanya container ini yang scroll */
.lu-table {
    width: 100%;
    min-width: 1450px;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

/* Jangan biarkan text membuat halaman melebar */
.lu-table th,
.lu-table td {
    white-space: nowrap;
}

/* SKU tetap cukup luas */
.lu-table .lu-sku {
    min-width: 230px;
    max-width: 260px;
}

.lu-table .lu-sku small {
    white-space: normal;
    line-height: 1.35;
}

/* Activity / Stock / Rekomendasi dibuat lebih compact */
.lu-table th:nth-child(11),
.lu-table td:nth-child(11) {
    min-width: 160px;
    max-width: 190px;
    white-space: normal;
}

.lu-table th:nth-child(12),
.lu-table td:nth-child(12) {
    min-width: 145px;
    max-width: 175px;
    white-space: normal;
}

.lu-table th:nth-child(13),
.lu-table td:nth-child(13) {
    min-width: 130px;
    max-width: 155px;
    white-space: normal;
}

.lu-table th:nth-child(14),
.lu-table td:nth-child(14) {
    min-width: 145px;
}

/* Compact spacing */
.lu-table th {
    padding: 11px 10px;
    font-size: 12px;
}

.lu-table td {
    padding: 10px;
    font-size: 12px;
}

/* Toolbar jangan melebar */
.lu-toolbar {
    width: 100%;
    min-width: 0;
}

.lu-toolbar .lu-search {
    min-width: 0;
}

.lu-toolbar input,
.lu-toolbar select {
    max-width: 100%;
}

/* Hero lebih compact */
.lu-hero {
    padding: 22px 24px;
}

.lu-hero h2 {
    font-size: 28px;
    line-height: 1.15;
}

/* Cards lebih compact */
.lu-summary {
    gap: 10px;
}

.lu-stat {
    padding: 14px 16px;
}

.lu-stat b {
    font-size: 24px;
}

/* Prevent app layout from horizontal page overflow */
.app-shell,
.shell,
main {
    min-width: 0;
}

body {
    overflow-x: hidden;
}

/* SIGER Phase 5 — Line Up readability + 28D TBC */
.lu-guide{padding:20px 22px;background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);border:1px solid #e5eaf1}.lu-guide-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.lu-guide-title h3{margin:6px 0 0;font-size:20px;color:#101828}.lu-guide-chip{background:#fff1f3;color:#c1121f;border:1px solid #ffd6dc;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;white-space:nowrap}.lu-guide-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.lu-guide-grid>div{border:1px solid #e5eaf1;border-radius:13px;padding:11px 12px;background:#fff}.lu-guide-grid b{display:block;color:#111827;font-size:13px;margin-bottom:4px}.lu-guide-grid span{display:block;color:#667085;font-size:11px;line-height:1.35}.lu-guide-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#fff8e8;border:1px solid #ffe2a8;color:#7a4b00;font-size:12px}.lu-product-name{font-size:13px;color:#101828}.lu-tbc-badge{display:inline-flex;margin:5px 0 0 7px;padding:3px 7px;border-radius:999px;background:#fff4e5;color:#b54708;border:1px solid #fedf89;font-size:10px;font-weight:900;vertical-align:middle}.lu-form-help{margin:14px 0 0;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:11px 12px;color:#475467;font-size:12px;line-height:1.45}
/* preserve compact, page-stable table behavior */
.lineup-page{min-width:0;width:100%;max-width:100%;overflow-x:hidden}.lineup-page .panel{min-width:0;max-width:100%}.lu-hero,.lu-summary,.lu-main,.lu-guide{width:100%;max-width:100%;box-sizing:border-box}.lu-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid #e3e8ef;border-radius:16px;max-height:560px}.lu-table{width:100%;min-width:1450px;max-width:none;border-collapse:separate;border-spacing:0;table-layout:auto}.lu-table th,.lu-table td{white-space:nowrap}.lu-table .lu-sku{min-width:270px;max-width:310px}.lu-table .lu-sku small{white-space:normal;line-height:1.35}.lu-table th:nth-child(11),.lu-table td:nth-child(11){min-width:160px;max-width:190px;white-space:normal}.lu-table th:nth-child(12),.lu-table td:nth-child(12){min-width:145px;max-width:175px;white-space:normal}.lu-table th:nth-child(13),.lu-table td:nth-child(13){min-width:130px;max-width:155px;white-space:normal}.lu-table th:nth-child(14),.lu-table td:nth-child(14){min-width:145px}.lu-table th{padding:11px 10px;font-size:12px}.lu-table td{padding:10px;font-size:12px}.lu-toolbar{width:100%;min-width:0}.lu-toolbar .lu-search{min-width:0}.lu-toolbar input,.lu-toolbar select{max-width:100%}.app-shell,.shell,main{min-width:0}body{overflow-x:hidden}@media(max-width:1100px){.lu-guide-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.lu-guide-title{align-items:flex-start;flex-direction:column}.lu-guide-chip{white-space:normal}.lu-guide-grid{grid-template-columns:repeat(2,1fr)}}

/* SIGER Phase 6 - Cluster Price Control & Monitoring */
.price6-page{min-width:0;width:100%;max-width:100%;overflow-x:hidden}.price6-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 28px;background:linear-gradient(135deg,#fff 0%,#fff7f7 100%)}.price6-hero h2{margin:10px 0 8px;font-size:30px;line-height:1.15}.price6-hero p{margin:0;max-width:900px;color:#64748b;line-height:1.6}.price6-role-card{min-width:135px;text-align:center;border:1px solid #e5e7eb;border-radius:16px;padding:13px 16px;background:#fff}.price6-role-card b{display:block;font-size:13px}.price6-role-card span{display:block;margin-top:4px;color:#e11d2e;font-size:11px;font-weight:800}.price6-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0}.price6-stat{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px 18px;min-width:0}.price6-stat span,.price6-stat small{display:block;color:#64748b}.price6-stat b{display:block;font-size:28px;margin:7px 0 3px;color:#0f172a}.price6-stat .small-value{font-size:17px;line-height:1.3}.price6-stat.ready{background:#f0fdf4;border-color:#bbf7d0}.price6-stat.warning{background:#fff7ed;border-color:#fed7aa}.price6-stat.muted{background:#f8fafc}.price6-main{padding:22px}.price6-guide{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;margin-bottom:16px}.price6-guide>div:first-child{display:flex;flex-direction:column;gap:3px}.price6-guide span{color:#64748b}.price6-legend{display:flex;gap:7px;white-space:nowrap}.p6pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.02em}.p6pill.ready{background:#dcfce7;color:#067647}.p6pill.missing{background:#fff7ed;color:#c2410c}.p6pill.off{background:#e2e8f0;color:#475569}.price6-filters{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr)) minmax(200px,1.5fr);gap:10px;margin-bottom:16px}.price6-filters label{font-size:12px;font-weight:800;color:#334155}.price6-filters select,.price6-filters input{display:block;width:100%;margin-top:6px;border:1px solid #d8dee8;border-radius:12px;background:#fff;padding:11px 12px;font:inherit;box-sizing:border-box}.price6-section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:4px 0 10px}.price6-section-title>div:first-child{display:flex;gap:10px;align-items:center}.price6-section-title span,.price6-section-title>div:last-child{font-size:12px;color:#64748b}.price6-table-wrap,.price6-history-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid #e2e8f0;border-radius:15px;max-height:570px}.price6-table{border-collapse:separate;border-spacing:0;min-width:1780px;width:100%;font-size:12px}.price6-table th{position:sticky;top:0;z-index:3;background:#0f1f3c;color:#fff;text-align:left;padding:11px 10px;white-space:nowrap}.price6-table td{padding:10px;border-bottom:1px solid #edf1f5;vertical-align:middle;background:#fff}.price6-table tr:hover td{background:#fbfdff}.price6-product{min-width:270px}.price6-product b{display:block;font-size:12.5px}.price6-product small{display:block;margin-top:4px;color:#64748b}.price6-input-wrap{display:flex;align-items:center;border:1px solid #cfd8e3;border-radius:10px;background:#fff;overflow:hidden;min-width:125px}.price6-input-wrap span{padding-left:10px;font-weight:800;color:#475569}.price6-input{border:0!important;outline:none;width:100%;padding:9px 8px!important;background:transparent!important}.price6-input-wrap.disabled{background:#f1f5f9}.price6-lock-note{display:block;color:#94a3b8;margin-top:4px;max-width:150px;white-space:normal}.price6-read-price{font-weight:900;color:#0f172a}.price6-read-price.empty{color:#c2410c}.price6-diff b,.price6-diff small{display:block}.price6-diff.above{color:#b42318}.price6-diff.below{color:#067647}.price6-diff.same{color:#475569}.price6-save{border:0;border-radius:10px;background:#ed1b2f;color:#fff;font-weight:900;padding:9px 13px;cursor:pointer}.price6-save:disabled{background:#cbd5e1;cursor:not-allowed}.price6-history{margin-top:16px;padding:20px}.price6-history-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}.price6-history-head h3{margin:5px 0 0}.price6-history-head>span{color:#64748b;font-size:12px}.price6-history-wrap{max-height:360px}.price6-history table{min-width:1250px;width:100%;border-collapse:collapse;font-size:12px}.price6-history th{position:sticky;top:0;background:#f1f5f9;padding:10px;text-align:left}.price6-history td{padding:10px;border-bottom:1px solid #edf1f5}.price6-empty{text-align:center;color:#94a3b8;padding:30px!important}@media(max-width:1250px){.price6-stats{grid-template-columns:repeat(3,1fr)}.price6-filters{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.price6-hero,.price6-guide,.price6-section-title,.price6-history-head{align-items:flex-start;flex-direction:column}.price6-stats{grid-template-columns:repeat(2,1fr)}.price6-filters{grid-template-columns:1fr 1fr}.price6-filters .search{grid-column:1/-1}.price6-role-card{width:100%;box-sizing:border-box}}

/* PHASE 7 - Price Monitoring Dashboard */
.price7-page{min-width:0;width:100%;max-width:100%;overflow-x:hidden}.price7-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 28px;background:linear-gradient(135deg,#fff,#fff7f7)}.price7-hero h2{margin:8px 0 8px;font-size:30px}.price7-hero p{margin:0;color:#64748b;max-width:900px;line-height:1.55}.price7-role{padding:14px 18px;border:1px solid #e2e8f0;border-radius:16px;text-align:center;background:#fff}.price7-role span{display:block;font-size:11px;color:#64748b;margin-top:4px}.price7-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:18px 0}.price7-kpis>div{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px 18px;box-shadow:0 8px 28px rgba(15,23,42,.04)}.price7-kpis span,.price7-kpis small{display:block;color:#64748b}.price7-kpis b{display:block;font-size:27px;margin:5px 0}.price7-kpis b.date{font-size:16px}.price7-kpis .good b{color:#059669}.price7-kpis .warn b{color:#d97706}.price7-overview,.price7-main,.price7-history{padding:22px;margin-top:18px}.price7-section-head,.price7-tools,.price7-title{display:flex;justify-content:space-between;gap:16px;align-items:center}.price7-section-head h3{margin:5px 0 0}.price7-overview-wrap,.price7-table-wrap,.price7-history-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid #e2e8f0;border-radius:15px;margin-top:14px}.price7-overview table,.price7-history table{width:100%;border-collapse:collapse;min-width:900px}.price7-overview th,.price7-overview td,.price7-history th,.price7-history td{padding:11px 12px;border-bottom:1px solid #eef2f7;text-align:left;font-size:12px}.p7bar{width:90px;height:7px;background:#e5e7eb;border-radius:999px;display:inline-block;margin-right:8px;vertical-align:middle;overflow:hidden}.p7bar i{display:block;height:100%;background:#10b981}.price7-tools{background:#f8fafc;border:1px solid #e2e8f0;padding:13px 15px;border-radius:14px}.price7-tools span{display:block;color:#64748b;font-size:12px;margin-top:3px}.price7-export{border:0;background:#138a3d;color:#fff;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}.price7-filters{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr)) minmax(220px,1.5fr);gap:10px;margin:16px 0}.price7-filters label{font-size:12px;font-weight:800}.price7-filters select,.price7-filters input{width:100%;margin-top:6px;border:1px solid #dbe2ea;border-radius:12px;padding:11px;background:#fff}.price7-title span{display:block;color:#64748b;font-size:12px}.price7-table{border-collapse:collapse;min-width:1500px;width:100%}.price7-table th{position:sticky;top:0;z-index:2;background:#0f1f3d;color:#fff;padding:11px 10px;font-size:11px;white-space:nowrap}.price7-table td{padding:10px;border-bottom:1px solid #e8edf3;font-size:12px;vertical-align:middle}.p7pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.p7pill.ready{background:#dcfce7;color:#067647}.p7pill.missing{background:#fff7ed;color:#c2410c}.p7pill.off{background:#eef2f7;color:#64748b}.p7product{min-width:220px}.p7product small{display:block;color:#64748b;margin-top:3px}.p7input{display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff}.p7input span{padding-left:9px}.p7input input{border:0;outline:0;width:110px;padding:9px}.p7input.disabled{background:#f1f5f9}.p7diff small{display:block}.p7diff.above{color:#b42318}.p7diff.below{color:#067647}.p7save{border:0;background:#ef233c;color:#fff;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}.p7save:disabled{background:#cbd5e1}.price7-empty{text-align:center;color:#64748b;padding:20px!important}@media(max-width:1200px){.price7-kpis{grid-template-columns:repeat(3,1fr)}.price7-filters{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.price7-hero,.price7-section-head,.price7-tools,.price7-title{align-items:flex-start;flex-direction:column}.price7-kpis{grid-template-columns:repeat(2,1fr)}.price7-filters{grid-template-columns:1fr}.price7-hero h2{font-size:24px}}

/* SIGER Phase 8 - Perdana */
.perdana8-page{min-width:0;max-width:100%;overflow-x:hidden}.perdana8-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 28px;background:linear-gradient(135deg,#fff,#fff7f7)}.perdana8-hero h2{margin:8px 0;font-size:30px}.perdana8-hero p{margin:0;color:#667085}.perdana8-chip{padding:10px 14px;border-radius:999px;background:#fff0f1;color:#d71920;font-weight:800;white-space:nowrap}.perdana8-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.perdana8-kpi>div{background:#fff;border:1px solid #e7ebf0;border-radius:16px;padding:16px 18px}.perdana8-kpi span{display:block;color:#667085}.perdana8-kpi b{font-size:26px}.perdana8-main{padding:18px}.perdana8-tools{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.perdana8-tools div span{display:block;color:#667085;font-size:13px;margin-top:3px}.perdana8-tools input{width:min(420px,45%);padding:12px 14px;border:1px solid #d7dde5;border-radius:12px}.perdana8-wrap{width:100%;overflow:auto;border:1px solid #e3e8ef;border-radius:14px}.perdana8-wrap table{width:100%;min-width:900px;border-collapse:collapse}.perdana8-wrap th{position:sticky;top:0;background:#101d36;color:#fff;padding:12px;text-align:left;font-size:12px}.perdana8-wrap td{padding:12px;border-bottom:1px solid #edf0f4}.p8-brand{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.p8-brand.sim{background:#fff0f1;color:#d71920}.p8-brand.byu{background:#f3edff;color:#6b3fd6}.p8-state{display:block;font-weight:700;color:#667085;margin-top:3px}.perdana8-wrap code{font-size:12px}.perdana8-catalog-note{margin:10px 0 14px;padding:12px 14px;border-radius:12px;background:#f7f9fc;border:1px solid #e0e6ef;color:#526075}.perdana8-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.perdana8-card{border:1px solid #e3e8ef;border-radius:16px;overflow:hidden;background:#fff}.perdana8-card-head{padding:12px 14px;font-weight:800}.perdana8-card-head.sim{background:#fff1f2;color:#c91820}.perdana8-card-head.byu{background:#f5f0ff;color:#6d42d8}.perdana8-product{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid #edf0f4}.perdana8-product b{display:block}.perdana8-product small{display:block;color:#667085;margin-top:3px}.perdana8-product input{width:100%;padding:10px;border:1px solid #d7dde5;border-radius:10px}.perdana8-price{font-size:12px;font-weight:800;color:#07864b;margin-top:4px}.perdana8-empty{padding:18px;color:#8a95a5;text-align:center}.price7-table .p8cat{font-size:11px;font-weight:800;padding:4px 7px;border-radius:999px;background:#eef2f7;white-space:nowrap}@media(max-width:900px){.perdana8-kpi{grid-template-columns:1fr 1fr}.perdana8-grid{grid-template-columns:1fr}.perdana8-hero{align-items:flex-start;flex-direction:column}.perdana8-tools{align-items:stretch;flex-direction:column}.perdana8-tools input{width:100%}}

/* =========================================================
   SIGER UAT Phase 8.1 — Perdana catalog UX fix
   ========================================================= */
.perdana8-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
}

.perdana8-main { min-width: 0; }

.perdana8-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.perdana8-title-row > b {
  font-size: 16px;
  line-height: 1.35;
}

.perdana8-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.perdana8-badge.ready {
  background: #dcfce7;
  color: #08783e;
  border: 1px solid #bbf7d0;
}

.perdana8-badge.locked {
  background: #fff3e8;
  color: #b54708;
  border: 1px solid #fed7aa;
}

.perdana8-price {
  margin-top: 7px;
  font-weight: 800;
  color: #b54708;
}

.perdana8-price.ready { color: #079455; }

.perdana8-qty-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.perdana8-qty-wrap > span {
  font-size: 11px;
  font-weight: 700;
  color: #667085;
}

.perdana8-qty-wrap input {
  width: 100%;
  min-height: 48px;
}

.perdana8-product.is-locked {
  background: #fafafa;
}

.perdana8-product.is-locked input:disabled {
  background: #f2f4f7 !important;
  border-color: #e4e7ec !important;
  color: #98a2b3 !important;
  cursor: not-allowed;
  opacity: .75;
}

.perdana8-product.is-locked .perdana8-main > b,
.perdana8-product.is-locked .perdana8-title-row > b {
  color: #475467;
}

@media (max-width: 700px) {
  .perdana8-product {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .perdana8-qty-wrap { width: 100%; }
}

/* =========================================================
   SIGER PHASE 9 - MONITORING HARGA + PURCHASE CONSISTENCY
   Append to assets/style.css
   ========================================================= */
.price9-kpis > div { min-height: 116px; }
.price9-kpis .good b { color:#087a4b; }
.price7-page .price7-table-wrap { max-height: 620px; overflow:auto; }
.price7-table thead th { position:sticky; top:0; z-index:4; }
.price7-table tbody tr:hover { background:#fbfcff; }
.price7-table .p7pill { min-width:112px; text-align:center; }
.price7-table .p7pill.ready { background:#dcfce7; color:#087a4b; border-color:#a7efc5; }
.price7-table .p7pill.missing { background:#fff4e5; color:#b45309; border-color:#fed7aa; }
.price7-table .p7pill.off { background:#eef2f7; color:#667085; border-color:#d9e0e8; }
.price7-updater-note { display:block; margin-top:3px; font-size:11px; color:#7a8699; }

/* Voucher: product tetap terlihat ketika harga Cluster belum tersedia. */
#voucherTable .catalog-select option:disabled { color:#a65a00; }
#voucherTable .catalog-price.missing { color:#b45309; background:#fff7ed; border-color:#fed7aa; }
#voucherTable .catalog-off { padding:10px 12px; border-radius:10px; background:#f2f4f7; color:#667085; font-weight:700; }
#voucherTable .qty-input:disabled { background:#f4f6f9; color:#a0a8b5; cursor:not-allowed; }

@media (max-width: 900px) {
  .price9-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .price9-kpis { grid-template-columns:1fr; }
}






/* SIGER V2 public order tracking */
.catalog-detail{font-size:11px;line-height:1.4;color:#667085;margin-top:5px;max-width:420px}.public-status-shell{max-width:760px}.public-status-card{text-align:center}.status-check{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:linear-gradient(180deg,#86efac,#16a34a);color:#fff;font-size:52px;font-weight:800;box-shadow:0 12px 34px rgba(22,163,74,.18)}.status-lead{max-width:560px;margin:0 auto 18px}.status-receipt{max-width:610px;margin:18px auto}.status-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px auto 16px;max-width:620px}.status-progress>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;color:#98a2b3;font-size:12px;font-weight:700}.status-progress>div:after{content:"";position:absolute;height:3px;background:#e4e7ec;left:60%;right:-40%;top:17px;z-index:0}.status-progress>div:last-child:after{display:none}.status-progress i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f2f4f7;border:2px solid #d0d5dd;font-style:normal;z-index:1}.status-progress .active{color:#15803d}.status-progress .active i,.status-progress .done i{background:#22c55e;color:#fff;border-color:#22c55e}.status-progress .done:after{background:#22c55e}.status-message{max-width:620px;margin:16px auto;padding:16px 18px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:16px;font-weight:700;text-align:left}.public-items{max-width:620px;margin:14px auto;text-align:left}.public-item-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #eaecf0}.public-item-row small{display:block;color:#667085;margin-top:3px}.status-cancel .status-check{background:#ef4444}.badge.process{background:#fff7ed;color:#c2410c}.badge.delivery{background:#eff6ff;color:#1d4ed8}@media(max-width:640px){.status-progress{gap:2px}.status-progress>div{font-size:10px}.status-progress i{width:30px;height:30px}.status-progress>div:after{top:14px}.public-status-card{padding-left:14px;padding-right:14px}}


/* ===== SIGER V2 Public Order Status Lookup ===== */
.status-lookup-open{font:inherit;cursor:pointer;color:#101828}
.status-lookup-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px}
.status-lookup-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(4px)}
.status-lookup-dialog{position:relative;z-index:1;width:min(460px,100%);background:#fff;border:1px solid #e4e7ec;border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(15,23,42,.24)}
.status-lookup-dialog h3{font-size:25px;margin:14px 0 8px}.status-lookup-dialog>p{margin:0 0 20px;color:#667085;line-height:1.6;font-size:14px}
.status-lookup-close{position:absolute;right:15px;top:13px;width:36px;height:36px;border:0;border-radius:50%;background:#f2f4f7;color:#344054;font-size:25px;line-height:1;cursor:pointer}
.status-lookup-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.status-lookup-error{margin-top:12px;padding:11px 12px;border:1px solid #fecdca;border-radius:12px;background:#fef3f2;color:#b42318;font-size:13px;line-height:1.45}
body.modal-open{overflow:hidden}
@media(max-width:620px){.navlinks{gap:6px}.navlinks .pill{padding:9px 10px;font-size:12px;white-space:nowrap}.status-lookup-dialog{padding:24px 18px;border-radius:20px}.status-lookup-actions{display:grid;grid-template-columns:1fr 1fr}.status-lookup-actions .btn{width:100%}}

/* ===== SIGER V2 Multi-order public status lookup ===== */
.status-order-results>p{margin:0 0 16px;color:#667085;line-height:1.55;font-size:14px}
.status-order-list{display:grid;gap:12px;max-height:min(58vh,560px);overflow:auto;padding-right:3px;margin-top:14px}
.status-order-card{border:1px solid #e4e7ec;border-radius:18px;padding:16px;background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.05)}
.status-order-card-head,.status-order-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.status-order-card-head>div,.status-order-card-foot>div{display:grid;gap:3px}
.status-order-card-head b{font-size:16px;color:#101828}.status-order-card-head small,.status-order-card-foot small{font-size:11px;color:#667085}
.status-order-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.status-order-badge.pending{background:#f2f4f7;color:#475467}.status-order-badge.process{background:#fff7ed;color:#c2410c}.status-order-badge.delivery{background:#eff6ff;color:#1d4ed8}.status-order-badge.done{background:#ecfdf3;color:#027a48}.status-order-badge.cancel{background:#fef3f2;color:#b42318}
.status-order-products{display:grid;gap:4px;margin:13px 0;padding:11px 0;border-top:1px solid #f2f4f7;border-bottom:1px solid #f2f4f7}.status-order-product{font-size:12px;color:#344054;font-weight:700}.status-order-product span{color:#667085;font-weight:600}
.status-order-card-foot b{font-size:15px;color:#101828}.status-view-btn{padding:9px 12px;font-size:12px;text-decoration:none}.status-result-actions{margin-top:16px;display:flex;justify-content:flex-start}
@media(max-width:620px){.status-lookup-dialog{width:min(96vw,460px);max-height:92vh;overflow:auto}.status-order-card-head{align-items:flex-start}.status-order-card-foot{align-items:end}.status-view-btn{white-space:nowrap}.status-order-list{max-height:55vh}.status-result-actions .btn{width:100%}}

/* ===== SIGER V2 MERGE 20260911: LAPORAN JARINGAN ===== */
.network-report-panel {
  max-width: 860px;
  margin: 0 auto;
}
.network-success-panel {
  max-width: 640px;
  margin: 40px auto;
}
.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-unit input {
  padding-right: 64px !important;
}
.unit-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #f1f5f9;
  color: #475467;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  pointer-events: none;
}
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .upload-grid {
    grid-template-columns: 1fr;
  }
}
.upload-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.upload-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 4px;
}
.upload-icon {
  font-size: 18px;
}
.upload-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.file-drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  text-align: center;
  transition: all 0.2s ease;
}
.file-drop-area:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}
.file-drop-area input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #475467;
  pointer-events: none;
}
.drop-content svg {
  color: #64748b;
}
.drop-content span {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.drop-content small {
  font-size: 11px;
  color: #94a3b8;
}
.upload-img-preview {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.submit-report-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 12px;
}
.app-download-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #cbd5e1;
}
.hint-text {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.playstore-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #0284c7;
  border: 1px solid #bae6fd;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.08);
}
.playstore-link-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.28);
  transform: translateY(-1px);
}
.playstore-link-btn svg {
  flex-shrink: 0;
}

/* ===== IN-APP SPEED TEST WIDGET STYLES ===== */
.speedtest-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}
.speedtest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.st-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-idle {
  background: #f1f5f9;
  color: #475569;
}
.badge-running {
  background: #eff6ff;
  color: #1d4ed8;
  animation: pulseBadge 1.2s infinite alternate ease-in-out;
}
.badge-success {
  background: #dcfce7;
  color: #15803d;
}
.badge-error {
  background: #fee2e2;
  color: #b91c1c;
}
@keyframes pulseBadge {
  0% { transform: scale(0.97); opacity: 0.85; }
  100% { transform: scale(1.03); opacity: 1; }
}

.st-gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14px 0 16px;
}
.st-speed-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 55%, #f1f5f9 100%);
  border: 3px solid #e2e8f0;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.08), inset 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s ease;
}
.st-current-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.st-live-speed-num {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.st-live-speed-unit {
  font-size: 11px;
  font-weight: 600;
  color: #dc2626;
  margin-top: 1px;
}
.st-progress-bar-wrap {
  width: 80%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.st-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  border-radius: 4px;
  transition: width 0.2s linear;
}

.st-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .st-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.st-metric-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
}
.st-metric-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.highlight-dl {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.highlight-ul {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.st-m-icon {
  font-size: 13px;
  margin-bottom: 2px;
}
.st-m-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}
.st-m-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}
.st-m-val small {
  font-size: 9.5px;
  font-weight: 600;
  color: #64748b;
}

.st-btn-wrap {
  margin-top: auto;
}
.st-start-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  background: #b91c1c;
  border: 1px solid #991b1b;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.st-start-btn:hover:not(:disabled) {
  background: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
.st-start-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ===== GPS LOCATION WIDGET STYLES ===== */
.gps-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1.5px solid #bbf7d0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}
.gps-coords-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gps-coord-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.gps-coord-item .gps-label {
  color: #64748b;
  font-weight: 600;
}
.gps-coord-item .gps-val {
  color: #0f172a;
  font-family: monospace, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
}
.gps-coord-item .gps-val-acc {
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
}
.gps-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
.btn-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-maps-link:hover {
  background: #dbeafe;
  color: #1e40af;
}

/* ===== SIGER V2 Customer Service Component ===== */
.status-lookup-cs {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 18px;
}
.status-lookup-cs-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.status-lookup-cs-info {
  flex: 1;
  min-width: 0;
}
.status-lookup-cs-info span {
  display: block;
  font-size: 11px;
  color: #166534;
  font-weight: 500;
}
.status-lookup-cs-info b {
  display: block;
  font-size: 13.5px;
  color: #14532d;
  font-weight: 700;
}
.status-lookup-cs-info a {
  color: #15803d;
  text-decoration: underline;
}
.btn-cs-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #16a34a;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
  transition: all .2s ease;
}
.btn-cs-wa:hover {
  background: #15803d;
  transform: translateY(-1px);
}

.success-cs-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #86efac;
  border-radius: 20px;
  padding: 20px 24px;
  margin-top: 24px;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.08);
}
.success-cs-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.success-cs-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34,197,94,.3);
}
.success-cs-text .cs-kicker {
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  display: block;
}
.success-cs-text h3 {
  margin: 3px 0 4px;
  font-size: 18px;
  color: #14532d;
  font-weight: 800;
}
.success-cs-text p {
  margin: 0;
  color: #166534;
  font-size: 13px;
  line-height: 1.45;
}
.success-cs-actions {
  flex-shrink: 0;
}
.success-cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #16a34a !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(22,163,74,.3);
  transition: all .2s ease;
}
.success-cs-btn:hover {
  background: #15803d !important;
  transform: translateY(-2px);
}
.success-wa-btn {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(22,163,74,.25);
}
.success-wa-btn:hover {
  background: #15803d !important;
}

@media(max-width: 680px) {
  .status-lookup-cs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .btn-cs-wa {
    width: 100%;
    justify-content: center;
  }
  .success-cs-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  .success-cs-actions {
    width: 100%;
  }
  .success-cs-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   SIGER V2 - PURCHASE UX PATCH 2026-09-11
   Simple, guided, responsive public purchase experience
   ========================================================= */
.no-sidebar{background:#f7f8fb}
.no-sidebar .topbar{background:rgba(255,255,255,.92);border-bottom:1px solid #eceff3;box-shadow:0 3px 16px rgba(16,24,40,.04)}
.no-sidebar .nav{max-width:1380px;padding:16px 26px}
.no-sidebar .brand .logo-mark{width:50px;height:50px;border-radius:16px;background:#fff}
.no-sidebar .brand b{font-size:22px;letter-spacing:-.02em}
.no-sidebar .brand span{font-size:11px}
.purchase-nav-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.purchase-nav-actions .nav-action-btn{appearance:none;min-height:46px;padding:0 16px!important;display:inline-flex;align-items:center;gap:9px;background:#fff!important;border:1px solid #dfe3e8!important;border-radius:14px!important;font:inherit;font-size:13px!important;font-weight:800!important;color:#182230!important;cursor:pointer;box-shadow:0 4px 12px rgba(16,24,40,.035);transition:.18s ease}
.purchase-nav-actions .nav-action-btn:hover{transform:translateY(-1px);border-color:#f2a3aa!important;box-shadow:0 8px 18px rgba(16,24,40,.07)}
.nav-action-icon{display:inline-grid;place-items:center;color:#e50914;font-size:17px;line-height:1}
.purchase-shell.purchase-ux-page{max-width:1380px;padding-top:28px;padding-bottom:44px}
.purchase-hero-card{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:28px;min-height:188px;padding:30px 34px;border:1px solid #e6e9ee;border-radius:28px;background:linear-gradient(115deg,#fff 0%,#fff 67%,#fff1f2 100%);box-shadow:0 12px 34px rgba(16,24,40,.065)}
.purchase-hero-card:after{content:"";position:absolute;width:300px;height:300px;right:-90px;top:-100px;border-radius:50%;background:rgba(229,9,20,.06)}
.purchase-hero-copy{position:relative;z-index:1;max-width:760px}.purchase-hero-copy h1{margin:12px 0 8px;font-size:38px;line-height:1.05;letter-spacing:-.035em}.purchase-hero-copy p{margin:0;color:#667085;font-size:16px;line-height:1.55}
.purchase-hero-visual{position:relative;z-index:1;display:flex;align-items:center;gap:18px;min-width:330px;justify-content:center}.cart-visual{font-size:72px;filter:drop-shadow(0 10px 12px rgba(229,9,20,.12))}.purchase-hero-visual b{display:block;color:#d90429;font-size:19px;line-height:1.15}.purchase-hero-visual small{display:block;margin-top:8px;color:#667085;font-size:11px}
.quick-guide{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:16px 0;padding:14px 18px;background:linear-gradient(90deg,#fff9f4,#fff6f7);border:1px solid #f5d8da;border-radius:18px;color:#475467}.quick-guide-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff0c2;font-size:19px}.quick-guide b{display:block;color:#d90429;font-size:14px;margin-bottom:2px}.quick-guide span{font-size:12px;line-height:1.45}.quick-guide-close{border:0;background:transparent;color:#667085;font-size:22px;cursor:pointer;padding:6px}
.purchase-flow{display:grid;gap:16px}.ux-step-card{background:#fff;border:1px solid #e4e7ec;border-radius:24px;padding:24px;box-shadow:0 8px 24px rgba(16,24,40,.045)}.ux-step-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.ux-step-number{flex:0 0 36px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e50914,#ff4452);color:#fff;font-weight:950;box-shadow:0 7px 16px rgba(229,9,20,.2)}.ux-step-head h2{margin:0 0 3px;font-size:20px;letter-spacing:-.015em}.ux-step-head p{margin:0;color:#667085;font-size:12px;line-height:1.45}
.ux-form-grid{display:grid;gap:14px}.buyer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.geo-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}.ux-form-grid label,.ux-block-field{font-size:12px;color:#1d2939}.ux-form-grid input,.ux-form-grid select,.ux-block-field textarea{margin-top:2px;border-radius:12px;padding:12px 13px}.ux-form-grid input[readonly],.ux-form-grid select[disabled],.city-locked{background:#f8fafc!important;color:#475467!important;cursor:not-allowed!important}.ux-routing-note{margin:0;background:#f5f9ff;border-color:#cddffd;color:#1d4b91}.ux-block-field{display:flex;margin-top:14px}.ux-block-field textarea{min-height:86px}.ux-block-field small{margin-top:2px}
.digipos-matched-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;font-size:11px;margin-top:4px;font-weight:600}
.digipos-lock-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-size:12.5px;line-height:1.45;margin-top:12px;margin-bottom:6px}
.digipos-lock-notice b{color:#14532d}
.catalog-help-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.catalog-help-item{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#f8fafc;border:1px solid #e4e7ec;border-radius:14px}.catalog-help-item>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#fff;color:#d90429;font-size:12px;font-weight:900;box-shadow:0 3px 8px rgba(16,24,40,.06)}.catalog-help-item b,.catalog-help-item small{display:block}.catalog-help-item b{font-size:12px}.catalog-help-item small{font-size:10px;color:#667085;margin-top:2px}
.catalog-card{border:1px solid #e4e7ec;border-radius:18px;padding:16px;background:#fff;margin-top:12px}.catalog-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid #eef0f3}.catalog-card-head>div{display:flex;align-items:center;gap:10px}.catalog-card-head b,.catalog-card-head small{display:block}.catalog-card-head b{font-size:14px}.catalog-card-head small{font-size:10px;color:#667085;margin-top:2px}.catalog-type-icon{width:34px;height:34px;border-radius:10px;background:#fff1f2;color:#d90429;display:grid;place-items:center;font-weight:900}.catalog-ready-hint{font-size:10px;color:#667085;background:#f8fafc;border:1px solid #e4e7ec;border-radius:999px;padding:6px 9px}.voucher-catalog-card .purchase-catalog-note{margin:12px 0}.catalog-status{margin:8px 0}.catalog-summary{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.catalog-summary span{padding:7px 9px;border-radius:10px;background:#f8fafc;border:1px solid #e4e7ec;font-size:10px;color:#667085}.catalog-summary b{color:#101828}
.product-entry-wrap{max-height:560px}.excel-like-table thead th{position:sticky;top:0;z-index:3}.excel-like-table .voucher-title-head{background:#111c34;color:#fff}.excel-like-table .brand-head{background:#e50914;color:#fff}.excel-like-table .byu-head{background:#111c34;color:#fff}.perdana-block{width:100%}.perdana8-catalog-note{margin:12px 0 14px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;color:#667085;font-size:11px}
.ux-order-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}.ux-order-summary>div{padding:14px;border-radius:14px;background:#f8fafc;border:1px solid #e4e7ec}.ux-order-summary span{display:block;color:#667085;font-size:10px}.ux-order-summary b{display:block;margin-top:3px;font-size:22px}.ux-order-summary .ux-total-main{background:#fff1f2;border-color:#fecdd3}.ux-order-summary .ux-total-main b{color:#d90429}
.ux-submit-card{background:linear-gradient(135deg,#fff,#fffafb)}.submit-help{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:#f8fafc;border:1px solid #e4e7ec}.submit-help b,.submit-help small{display:block}.submit-help b{font-size:12px}.submit-help small{font-size:10px;color:#667085;margin-top:2px}.ux-submit-row{display:flex;justify-content:flex-end;margin-top:14px}.ux-submit-row .big-submit{min-width:220px;border-radius:12px;padding:13px 20px}
.payment-rekening-card{margin-top:10px;padding:16px 20px;border-radius:18px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1.5px solid #cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:all .2s ease}
.payment-rekening-card.is-empty{opacity:.75;background:#f8fafc;border-style:dashed}
.payment-rek-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.payment-rek-bank-badge{font-size:12px;font-weight:900;letter-spacing:.04em;padding:4px 10px;border-radius:8px;background:#0284c7;color:#fff;display:inline-flex;align-items:center;box-shadow:0 2px 6px rgba(2,132,199,.25)}
.payment-rek-cluster{font-size:11.5px;color:#475467;font-weight:600;background:#fff;padding:3px 9px;border-radius:6px;border:1px solid #e2e8f0}
.payment-rek-body{display:flex;flex-direction:column;gap:5px}
.payment-rek-num-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.payment-rek-number{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:22px;font-weight:800;letter-spacing:.05em;color:#0f172a}
.payment-rek-copy-btn{border:1px solid #0284c7;background:#fff;color:#0284c7;font-weight:700;font-size:11.5px;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .15s ease}
.payment-rek-copy-btn:hover:not(:disabled){background:#0284c7;color:#fff}
.payment-rek-copy-btn:disabled{opacity:.4;cursor:not-allowed;border-color:#cbd5e1;color:#94a3b8}
.payment-rek-owner{font-size:13px;color:#334155}
.payment-rek-owner b{color:#0f172a}
.payment-rek-foot{margin-top:10px;padding-top:8px;border-top:1px dashed #cbd5e1}
.payment-rek-note{font-size:11.5px;color:#b45309;display:block}
.public-status-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important}.print-status-btn{cursor:pointer}
@media print{.topbar,footer,.public-status-actions .btn.primary{display:none!important}.public-status-shell{padding:0!important}.public-status-card{box-shadow:none!important;border:0!important}}
@media(max-width:1050px){.buyer-grid,.geo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-hero-visual{min-width:260px}.catalog-help-row{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.no-sidebar .nav{align-items:flex-start;padding:12px 14px}.no-sidebar .brand span{display:none}.purchase-nav-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:10px}.no-sidebar .nav{flex-wrap:wrap}.purchase-nav-actions .nav-action-btn{min-height:42px;padding:0 10px!important;font-size:11px!important}.purchase-shell.purchase-ux-page{padding:16px 12px 30px}.purchase-hero-card{padding:22px;border-radius:22px;min-height:auto}.purchase-hero-copy h1{font-size:30px}.purchase-hero-visual{display:none}.quick-guide{grid-template-columns:auto 1fr;padding:12px}.quick-guide-close{grid-column:3;grid-row:1}.ux-step-card{padding:18px;border-radius:18px}.buyer-grid,.geo-grid,.catalog-help-row,.ux-order-summary{grid-template-columns:1fr}.catalog-card-head{align-items:flex-start;flex-direction:column}.ux-submit-row .big-submit{width:100%}.product-entry-wrap{max-height:none}.ux-step-head h2{font-size:18px}}

/* ===== SIGER V2 Dashboard UX Refresh 2026-09-11 ===== */
.dashboard-ux-page{max-width:100%;min-width:0;padding-bottom:36px}
.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:28px 30px;background:linear-gradient(135deg,#fff 0%,#fff9f9 63%,#f8fafc 100%);overflow:hidden;position:relative}
.dashboard-hero:after{content:"";position:absolute;right:-65px;top:-90px;width:230px;height:230px;border-radius:50%;background:rgba(237,27,47,.055);pointer-events:none}
.dashboard-hero-main{position:relative;z-index:1;min-width:0}.dashboard-hero h1{font-size:32px;line-height:1.15;letter-spacing:-.7px;margin:8px 0 8px;color:#0f172a}.dashboard-hero p{margin:0;color:#64748b;font-size:14px;line-height:1.6;max-width:780px}
.dashboard-identity{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.dashboard-user-chip,.dashboard-scope-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e5e7eb;border-radius:999px;background:rgba(255,255,255,.85);font-size:11px;font-weight:800;color:#475569}
.dashboard-hero-actions{position:relative;z-index:1;display:flex;align-items:stretch;gap:10px;min-width:360px}.dashboard-role-card{min-width:160px;padding:12px 15px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;text-align:left}.dashboard-role-card small,.dashboard-role-card b,.dashboard-role-card span{display:block}.dashboard-role-card small{font-size:9px;letter-spacing:.08em;color:#98a2b3;font-weight:900}.dashboard-role-card b{font-size:14px;margin:4px 0;color:#101828}.dashboard-role-card span{font-size:10px;color:#667085}.dashboard-primary-action{display:flex;align-items:center;justify-content:center;min-width:155px;padding:0 18px;border-radius:16px;background:linear-gradient(135deg,#ed1b2f,#ff4555);color:#fff;text-decoration:none;font-weight:900;font-size:13px;box-shadow:0 10px 26px rgba(237,27,47,.18)}
.dashboard-guide{margin-top:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:18px;border-color:#ffe2e5;background:linear-gradient(90deg,#fffaf9,#fff)}.dashboard-guide-copy{display:flex;align-items:center;gap:12px;min-width:0}.dashboard-guide-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fff1cf;font-size:20px;flex:0 0 auto}.dashboard-guide-copy b,.dashboard-guide-copy span{display:block}.dashboard-guide-copy b{font-size:13px;color:#b42318}.dashboard-guide-copy span{font-size:11px;color:#667085;margin-top:2px}.dashboard-guide-links{display:flex;gap:8px;flex:0 0 auto}.dashboard-guide-links a{padding:9px 12px;border:1px solid #e5e7eb;border-radius:11px;background:#fff;color:#344054;text-decoration:none;font-size:11px;font-weight:850}
.dashboard-control-panel{margin-top:14px;padding:22px 24px}.dashboard-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}.dashboard-section-title h2{font-size:21px;margin:5px 0 4px;letter-spacing:-.3px}.dashboard-section-title p{margin:0;color:#667085;font-size:11px}.dashboard-reset-btn{border:1px solid #d0d5dd;background:#fff;color:#475467;border-radius:11px;padding:9px 12px;font-size:11px;font-weight:850;cursor:pointer}.dashboard-filters{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) auto;gap:10px;align-items:end}.dashboard-filters label span{display:block;font-size:11px;font-weight:850;color:#344054;margin-bottom:6px}.dashboard-filters select,.dashboard-filters input[type="date"],.dashboard-filters .dash-date-input{border-radius:12px;min-height:44px;width:100%;border:1px solid #d0d5dd;background:#fff;padding:0 10px;font-size:12px;color:#101828;box-sizing:border-box}.dashboard-filter-btn{min-height:44px;border-radius:12px;padding:0 18px;white-space:nowrap}
.dashboard-kpi-section{margin-top:15px}.dashboard-kpi-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 3px 9px}.dashboard-kpi-head h2{font-size:20px;margin:4px 0 0}.dashboard-kpi-note{font-size:10px;color:#98a2b3}
.dashboard-kpi-grid,.dashboard-totals{display:grid;grid-template-columns:repeat(7,1fr)!important;margin:0;gap:9px}
.dashboard-kpi-card{background:#fff!important;border:1px solid #e7eaf0!important;border-radius:14px!important;padding:12px 13px!important;box-shadow:0 3px 12px rgba(15,23,42,.035);display:flex;flex-direction:column;justify-content:space-between;min-height:86px;transition:all .15s ease}
.dashboard-kpi-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.dashboard-kpi-card span{font-size:10px!important;font-weight:800;color:#64748b!important;line-height:1.25;margin-bottom:3px}
.dashboard-kpi-card b{font-size:21px!important;line-height:1.1;color:#0f172a;font-weight:900}
.dashboard-kpi-card small{display:block;margin-top:4px;color:#94a3b8;font-size:8.5px}
.dashboard-kpi-card.today{background:#f8fbff!important;border-color:#bfdbfe!important}.dashboard-kpi-card.today b{color:#1d4ed8}
.dashboard-kpi-card.vf-card{background:#fff8f8!important;border-color:#fecdd3!important}.dashboard-kpi-card.vf-card b{color:#be123c}
.dashboard-kpi-card.perdana-card{background:#fffbf0!important;border-color:#fed7aa!important}.dashboard-kpi-card.perdana-card b{color:#c2410c}
.dashboard-kpi-card.pct-card{background:#fbf8ff!important;border-color:#e9d5ff!important}.dashboard-kpi-card.pct-card b{color:#7e22ce}
.dashboard-kpi-card.product-card{background:#f8fafc!important;border-color:#cbd5e1!important}.dashboard-kpi-card.product-card b{color:#0f172a}
.dashboard-kpi-card.attention{background:#fff8f0!important;border-color:#fed7aa!important}.dashboard-kpi-card.attention b{color:#b45309}
.dashboard-kpi-card.progress-card{background:#eff6ff!important;border-color:#bfdbfe!important}.dashboard-kpi-card.progress-card b{color:#2563eb}
.dashboard-kpi-card.success{background:#f0fdf4!important;border-color:#bbf7d0!important}.dashboard-kpi-card.success b{color:#15803d}
.perdana-kpi-grid{grid-template-columns:repeat(5,1fr)!important}
.dashboard-orders-panel{margin-top:15px;padding:22px 24px;min-width:0}.dashboard-orders-title{align-items:center}.dashboard-status-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:#667085}.dashboard-status-legend span{display:flex;align-items:center;gap:5px}.dashboard-status-legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block}.dot.pending{background:#f59e0b}.dot.process{background:#3b82f6}.dot.done{background:#10b981}.dashboard-orders-panel .dashboard-table-help{margin-top:0;border-radius:12px;padding:10px 12px;background:#f8fafc}.dashboard-order-wrap{border-radius:14px}
.dashboard-export-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#059669,#047857);color:#ffffff!important;border:none;padding:9px 15px;border-radius:11px;font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(5,150,105,0.25);transition:all .15s ease;text-decoration:none;white-space:nowrap}
.dashboard-export-btn:hover{background:linear-gradient(135deg,#047857,#065f46);box-shadow:0 5px 14px rgba(5,150,105,0.35);transform:translateY(-1px)}
.dashboard-export-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(5,150,105,0.2)}
@media(max-width:1450px){.dashboard-kpi-grid,.dashboard-totals{grid-template-columns:repeat(5,1fr)!important}.perdana-kpi-grid{grid-template-columns:repeat(5,1fr)!important}}
@media(max-width:1150px){.dashboard-hero{align-items:flex-start}.dashboard-hero-actions{min-width:280px;flex-direction:column}.dashboard-primary-action{min-height:48px}.dashboard-filters{grid-template-columns:repeat(3,1fr)}.dashboard-filter-btn{grid-column:1 / -1;width:100%}.dashboard-kpi-grid,.dashboard-totals,.perdana-kpi-grid{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:850px){.dashboard-kpi-grid,.dashboard-totals,.perdana-kpi-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:760px){.dashboard-hero,.dashboard-guide,.dashboard-section-title,.dashboard-kpi-head,.dashboard-orders-title{flex-direction:column;align-items:stretch}.dashboard-hero{padding:22px}.dashboard-hero h1{font-size:27px}.dashboard-hero-actions{min-width:0;width:100%;display:grid;grid-template-columns:1fr 1fr}.dashboard-role-card{min-width:0}.dashboard-guide-links{width:100%;display:grid;grid-template-columns:1fr 1fr}.dashboard-guide-links a{text-align:center}.dashboard-control-panel,.dashboard-orders-panel{padding:18px}.dashboard-filters{grid-template-columns:1fr}.dashboard-filter-btn{width:100%}.dashboard-status-legend{margin-top:4px}}
@media(max-width:600px){.dashboard-kpi-grid,.dashboard-totals,.perdana-kpi-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:480px){.dashboard-hero-actions,.dashboard-guide-links{grid-template-columns:1fr!important}.dashboard-user-chip,.dashboard-scope-chip{width:100%;box-sizing:border-box}}
@media(max-width:380px){.dashboard-kpi-grid,.dashboard-totals,.perdana-kpi-grid{grid-template-columns:1fr!important}}


/* ===== SIGER V2 Order Review + Success UIUX 2026-09-16 ===== */
.submit-fund-help{background:#fff8e8!important;border-color:#fedf89!important;align-items:flex-start!important;padding:15px 16px!important}
.submit-fund-help .submit-fund-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#fff0c2;font-size:20px;flex:0 0 auto}
.submit-fund-help b{font-size:13px!important;color:#9a4b00}.submit-fund-help small{font-size:11px!important;color:#7a5b32!important;margin-top:4px!important}
.submit-confirm-note{margin-top:10px;padding:11px 13px;border-radius:12px;background:#eff8ff;border:1px solid #b2ddff;color:#175cd3;font-size:11px;font-weight:700}
/* =========================================================
   SIGER V2 - ORDER DETAIL CHECK & TRACKING (3-STEP STATUS)
   ========================================================= */
.order-success-shell {
  max-width: 860px;
  margin: 28px auto 48px;
  padding: 0 16px;
}
.order-success-card {
  text-align: left !important;
  padding: 32px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 26px !important;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
}

/* 1. Tracking Header */
.tracking-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1.5px solid #f1f5f9;
}
.thh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #e11d48;
  margin-bottom: 6px;
}
.thh-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e11d48;
}
.thh-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
}
.order-no-highlight {
  color: #e11d48;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.thh-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #64748b;
}
.thh-sep {
  color: #cbd5e1;
}
.thh-type-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.04em;
}
.thh-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.thh-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.thh-status-badge.status-pending {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #b45309;
}
.thh-status-badge.status-process {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1d4ed8;
}
.thh-status-badge.status-done {
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  color: #047857;
}
.thh-status-badge.status-cancel {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #b91c1c;
}

/* 2. Stepper Card */
.tracking-stepper-container {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #e2e8f0;
}
.status-progress-3step {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 4px 10px 18px;
}
.step-track-line {
  position: absolute;
  top: 21px;
  left: 12%;
  right: 12%;
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  z-index: 0;
  overflow: hidden;
}
.step-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 130px;
  cursor: default;
}
.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 3px solid #cbd5e1;
  font-size: 14px;
  font-weight: 850;
  color: #64748b;
  transition: all 0.35s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.step-circle-icon {
  display: block;
}
.step-check-icon {
  display: none;
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
}
.step-node.active .step-circle {
  border-color: #2563eb;
  color: #2563eb;
  background: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2), 0 6px 16px rgba(37, 99, 235, 0.25);
}
.step-node.done .step-circle {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.step-node.done .step-circle-icon {
  display: none;
}
.step-node.done .step-check-icon {
  display: block;
}
.step-text {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.step-title {
  font-size: 13px;
  font-weight: 800;
  color: #475467;
  transition: color 0.2s ease;
}
.step-node.active .step-title {
  color: #1d4ed8;
}
.step-node.done .step-title {
  color: #047857;
}
.step-desc {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.step-node.active .step-desc {
  color: #3b82f6;
}

/* Status Banner */
.tracking-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  margin-top: 10px;
  transition: all 0.3s ease;
}
.tracking-status-banner.status-bg-pending {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.tracking-status-banner.status-bg-process {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.tracking-status-banner.status-bg-done {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.tracking-status-banner.status-bg-cancel {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.tsb-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.tsb-title {
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.tsb-desc {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.92;
}

/* 3. Detail Pesanan Grid */
.success-detail-card, .success-products-card {
  margin-top: 20px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.success-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #f1f5f9;
  margin-bottom: 16px;
}
.sst-icon {
  font-size: 18px;
}
.success-section-title h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: #0f172a;
}
.order-info-modern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.oim-cell {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oim-full {
  grid-column: 1 / -1;
}
.oim-label {
  font-size: 11px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oim-val {
  font-size: 13.5px;
  font-weight: 750;
  color: #0f172a;
  word-break: break-word;
}

/* 4. Products Table & Summary */
.success-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.success-product-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
}
.success-product-table th {
  background: #0f172a;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 750;
  padding: 11px 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.success-product-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12.5px;
  vertical-align: middle;
}
.success-product-table tbody tr:hover {
  background: #f8fafc;
}
.spi-title {
  font-weight: 750;
  color: #0f172a;
  font-size: 13px;
}
.spi-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.success-total-summary-card {
  margin-top: 14px;
  padding: 16px 20px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stsc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #475467;
}
.stsc-grand {
  padding-top: 12px;
  border-top: 1.5px dashed #cbd5e1;
  margin-top: 4px;
}
.stsc-grand-label {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.04em;
}
.stsc-grand-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin-top: 1px;
}
.stsc-grand-amount {
  font-size: 22px;
  font-weight: 900;
  color: #e11d48;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 5. CS & CTA */
.success-status-cta {
  margin: 16px 0 20px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px 14px;
  align-items: center;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 18px;
}
.success-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #10b981;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
}
.success-status-copy b, .success-status-copy span {
  display: block;
}
.success-status-copy b {
  color: #047857;
  font-size: 13.5px;
}
.success-status-copy span {
  color: #334155;
  font-size: 12px;
  margin-top: 2px;
}
.success-status-btn {
  background: #059669 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  font-weight: 750 !important;
  cursor: pointer;
  white-space: nowrap;
}
.success-cs-card {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.success-cs-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.success-cs-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #10b981;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.cs-kicker {
  color: #047857;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.success-cs-text h3 {
  margin: 3px 0 2px;
  font-size: 16px;
  font-weight: 800;
  color: #065f46;
}
.success-cs-text p {
  margin: 0;
  font-size: 12px;
  color: #047857;
  line-height: 1.45;
}
.success-cs-btn {
  background: #059669 !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  padding: 11px 18px !important;
  border-radius: 12px !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.success-cs-btn:hover {
  background: #047857 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.success-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.success-actions .btn {
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-weight: 750 !important;
}

.live-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 11px;
  font-weight: 750;
}
.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media(max-width: 680px) {
  .tracking-hero-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .thh-right {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .status-progress-3step {
    margin: 4px 0 16px;
  }
  .step-node {
    width: 90px;
  }
  .step-circle {
    width: 38px;
    height: 38px;
    font-size: 12.5px;
  }
  .step-track-line {
    top: 18px;
    left: 15%;
    right: 15%;
  }
  .step-title {
    font-size: 11.5px;
  }
  .step-desc {
    font-size: 9.5px;
  }
  .order-info-modern-grid {
    grid-template-columns: 1fr;
  }
  .success-status-cta {
    grid-template-columns: 1fr;
  }
  .success-status-btn {
    width: 100%;
    justify-content: center;
  }
  .success-cs-card {
    flex-direction: column;
    align-items: stretch;
  }
  .success-cs-btn {
    justify-content: center;
  }
  .success-actions {
    justify-content: stretch;
  }
  .success-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  .success-status-cta,
  .success-actions,
  .topbar,
  footer,
  .live-sync-badge,
  .no-print {
    display: none !important;
  }
  .order-success-card {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .tracking-stepper-container {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
  }
}
/* ===== SIGER V2 - Checkout review before submit - 2026-09-16 ===== */
.order-review {
  margin: 18px 0;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.review-section-title {
  padding: 16px 18px 10px;
  font-size: 16px;
  color: #111827;
}
.review-product-title {
  border-top: 1px solid #eef2f7;
  margin-top: 4px;
}
.review-buyer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 0 18px 16px;
}
.review-buyer-grid > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: start;
}
.review-buyer-grid span {
  color: #64748b;
  font-size: 13px;
}
.review-buyer-grid b {
  color: #0f172a;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.review-empty {
  margin: 0 18px 16px;
  padding: 15px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}
.review-table-wrap {
  margin: 0 18px 14px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.review-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}
.review-table th {
  background: #102a56;
  color: #fff;
  padding: 11px 12px;
  font-size: 12px;
  text-align: left;
}
.review-table td {
  padding: 12px;
  border-bottom: 1px solid #e8edf4;
  font-size: 13px;
  vertical-align: middle;
}
.review-table tbody tr:last-child td {
  border-bottom: 0;
}
.review-table td:first-child,
.review-table th:first-child {
  text-align: center;
  width: 52px;
}
.review-table td:nth-child(3),
.review-table th:nth-child(3),
.review-table td:nth-child(5),
.review-table th:nth-child(5) {
  text-align: right;
}
.review-table td:nth-child(4),
.review-table th:nth-child(4) {
  text-align: center;
}
.review-table td small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
}
.review-total-box {
  margin: 0 18px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
}
.review-total-box > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 14px;
  font-size: 13px;
}
.review-total-box span {
  color: #475569;
}
.review-grand-total {
  margin-top: 4px;
  background: #fff1f2;
  border-top: 1px solid #fecdd3;
  padding: 14px !important;
}
.review-grand-total span,
.review-grand-total b {
  font-size: 17px !important;
  font-weight: 800;
  color: #e11d48 !important;
}
@media (max-width: 760px) {
  .review-buyer-grid {
    grid-template-columns: 1fr;
  }
  .review-buyer-grid > div {
    grid-template-columns: 120px 1fr;
  }
  .review-table-wrap {
    margin-left: 12px;
    margin-right: 12px;
  }
  .review-total-box {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* ==========================================================================
   Payment Fund & Rekening Inline Display
   ========================================================================== */
.submit-fund-help {
  margin: 18px 0 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.submit-fund-icon {
  font-size: 22px;
  line-height: 1;
  padding: 7px;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.submit-fund-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.submit-fund-content b {
  color: #166534;
  font-size: 14px;
  font-weight: 700;
}
.submit-fund-small {
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.rek-inline-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 4px;
  padding: 3px 10px;
  background: #ffffff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.08);
}
.rek-inline-wrap.is-empty {
  border: 1px dashed #cbd5e1;
  background: #f1f5f9;
  box-shadow: none;
}
.rek-inline-wrap.is-empty .rek-num-highlight {
  font-family: inherit;
  font-weight: normal;
  font-style: italic;
  color: #64748b;
  font-size: 12px;
  letter-spacing: normal;
}
.rek-bank-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: #1e40af;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.rek-num-highlight {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.8px;
  user-select: all;
}
.rek-owner-span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
  font-size: 13px;
  color: #475569;
  vertical-align: middle;
}
.rek-an-prefix {
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.rek-owner-span b {
  color: #0f172a !important;
  font-weight: 700;
  white-space: nowrap;
}
.rek-cluster-badge {
  font-size: 12px;
  color: #1e40af;
  font-weight: 600;
}
.btn-copy-rek-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #1d4ed8;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.btn-copy-rek-mini:hover:not(:disabled) {
  background: #1d4ed8;
  transform: translateY(-1px);
}
.btn-copy-rek-mini:active:not(:disabled) {
  transform: translateY(0);
}
.btn-copy-rek-mini:disabled {
  display: none;
}

/* Digipos Status & Lock notices */
.digipos-matched-tag {
  display: inline-block;
  color: #059669;
  font-weight: 600;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #a7f3d0;
  font-size: 11.5px;
  margin-top: 2px;
}
.digipos-lock-notice {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1e40af;
  line-height: 1.45;
}
.digipos-lock-notice b {
  color: #1e3a8a;
}
select.city-locked {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  cursor: not-allowed !important;
  border-color: #93c5fd !important;
}

/* ==========================================================================
   Universal Searchable Dropdown Component (SIGER Red Theme)
   ========================================================================== */
.siger-select-replaced {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.siger-searchable-dropdown {
  position: relative;
  width: 100%;
  display: block;
}

.siger-dropdown-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border: 1.5px solid #d0d7de;
  border-radius: 12px;
  background: #ffffff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dashboard-filters .siger-dropdown-trigger,
.pm-toolbar .siger-dropdown-trigger,
.p7-filters .siger-dropdown-trigger {
  min-height: 44px;
  height: 44px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 12px;
  border: 1px solid #d0d5dd;
}

.siger-dropdown-trigger:focus,
.siger-searchable-dropdown.open .siger-dropdown-trigger {
  background: #ffffff;
  border-color: #e50914;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
}

.siger-trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.siger-trigger-label.placeholder {
  color: #64748b;
  font-weight: 500;
}

.siger-trigger-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.siger-trigger-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.siger-trigger-clear:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.siger-trigger-arrow {
  color: #64748b;
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.siger-searchable-dropdown.open .siger-trigger-arrow {
  transform: rotate(180deg);
}

.siger-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  z-index: 1000;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: sigerDropdownFade 0.15s ease-out;
}

.siger-dropdown-menu[hidden],
.siger-searchable-dropdown:not(.open) .siger-dropdown-menu {
  display: none !important;
}

@keyframes sigerDropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.siger-dropdown-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2px;
}

.siger-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.siger-dropdown-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 0 28px 0 32px;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  transition: all 0.15s ease;
}

.siger-dropdown-search-input:focus {
  background: #ffffff;
  border-color: #e50914;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.12);
}

.siger-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.siger-search-clear:hover {
  color: #0f172a;
}

.siger-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.siger-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.siger-dropdown-item:hover,
.siger-dropdown-item.focused {
  background: #f1f5f9;
  color: #0f172a;
}

.siger-dropdown-item.selected {
  background: #fef2f2;
  color: #dc2626;
  font-weight: 750;
}

.siger-item-check {
  color: #dc2626;
  flex-shrink: 0;
  display: inline-flex;
}

.siger-dropdown-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

.siger-searchable-dropdown.disabled .siger-dropdown-trigger {
  background: #f1f5f9 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

.siger-searchable-dropdown.disabled .siger-trigger-clear {
  display: none !important;
}