:root{--bg:#f5f7fb;--panel:#fff;--text:#18212f;--muted:#748094;--line:#e6eaf0;--primary:#146c5a;--primary2:#0f594b;--soft:#e8f5f1;--warning:#a76b00;--danger:#b42318;--shadow:0 12px 32px rgba(29,41,57,.07);--radius:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#10231f;color:white;padding:22px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 24px}.brand-mark{width:40px;height:40px;border-radius:14px;background:#2bb293;display:grid;place-items:center;font-size:22px}.brand strong{display:block;font-size:18px}.brand span{display:block;color:#a8c5bd;font-size:12px;margin-top:2px}nav{display:flex;flex-direction:column;gap:6px}.nav-item{border:0;background:transparent;color:#bcd0ca;text-align:left;padding:11px 12px;border-radius:12px;cursor:pointer;display:flex;gap:10px;align-items:center}.nav-item:hover,.nav-item.active{background:#1c3a33;color:white}.sidebar-footer{margin-top:auto;color:#89a59d;padding:10px}.main{margin-left:245px;width:calc(100% - 245px)}.topbar{height:82px;padding:14px 30px;background:rgba(245,247,251,.93);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}.topbar h1{font-size:22px;margin:0}.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}.top-left,.top-actions{display:flex;align-items:center;gap:12px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%;background:#1f9d72}.page{display:none;padding:28px 30px 50px}.page.active{display:block}.hero-card{background:linear-gradient(135deg,#123f35,#176c59);color:white;border-radius:24px;padding:28px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.hero-card h2{margin:7px 0 8px;font-size:28px}.hero-card p{margin:0;color:#cde8df;max-width:620px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#9bd7c8}.primary,.secondary{border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:700}.primary{background:var(--primary);color:#fff}.primary:hover{background:var(--primary2)}.hero-card .primary{background:#fff;color:#134c40}.secondary{background:#fff;border:1px solid var(--line);color:var(--text)}.full{width:100%;padding:14px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.stats-grid.compact{margin-top:0}.stat{background:var(--panel);padding:18px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 5px 14px rgba(20,30,50,.03)}.stat span,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:23px;margin:7px 0}.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 5px 14px rgba(20,30,50,.03)}.panel h3{margin:0 0 14px}.panel-head,.section-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head{margin-bottom:18px}.section-head h2{margin:0 0 5px}.section-head p{margin:0;color:var(--muted)}.text-btn{border:0;background:transparent;color:var(--primary);font-weight:700;cursor:pointer}.muted{color:var(--muted)}.list-empty{color:var(--muted);padding:26px 8px;text-align:center}.toolbar{margin-bottom:14px;justify-content:flex-start}.toolbar input{min-width:280px}.toolbar input,.toolbar select,.field input,.field select,.field textarea{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 12px;outline:none;width:100%}.toolbar input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#6fb9a7;box-shadow:0 0 0 3px #e6f6f1}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}th,td{padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef2f6;font-size:11px;font-weight:700}.badge.good{background:#e9f7ef;color:#18734b}.badge.warn{background:#fff4da;color:#8a6100}.badge.danger{background:#feecea;color:#a2271d}.action{border:0;background:#f2f5f7;border-radius:9px;padding:7px 9px;cursor:pointer}.cards-list{display:grid;gap:12px}.medical-card{border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;justify-content:space-between;gap:14px}.medical-card h4{margin:0 0 4px}.medical-card p{margin:3px 0;color:var(--muted);font-size:13px}.rx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:9px}.rx-chip{background:#f6f8fa;border-radius:10px;padding:9px;font-size:12px}.sales-layout{display:grid;grid-template-columns:1.3fr .8fr;gap:18px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.product-card{border:1px solid var(--line);border-radius:14px;padding:13px;cursor:pointer;transition:.15s;background:#fff}.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#b9d8cf}.product-card h4{margin:0 0 6px;font-size:14px}.product-card p{margin:2px 0;color:var(--muted);font-size:12px}.product-card strong{display:block;margin-top:8px}.cart-items{display:grid;gap:8px;max-height:320px;overflow:auto;margin:10px 0}.cart-row{border:1px solid var(--line);border-radius:12px;padding:10px}.cart-row-top{display:flex;justify-content:space-between;gap:8px}.cart-row h4{margin:0;font-size:13px}.cart-row-controls{display:grid;grid-template-columns:70px 1fr 1fr auto;gap:7px;margin-top:8px}.cart-row-controls input,.cart-row-controls select{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px}.discount-box{background:#f7faf9;border:1px solid #dcebe6;border-radius:14px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.inline{display:flex}.inline select{width:70px;border-radius:11px 0 0 11px}.inline input{border-radius:0 11px 11px 0}.totals{margin:14px 0}.totals>div{display:flex;justify-content:space-between;padding:5px 0;color:var(--muted)}.totals .grand{border-top:1px dashed var(--line);padding-top:12px;margin-top:6px;color:var(--text)}.totals .grand strong{font-size:22px}.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mt{margin-top:18px}.orders-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}.order-col{background:#eef2f4;border-radius:16px;padding:10px;min-height:180px}.order-col h3{font-size:13px;margin:3px 4px 10px}.order-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:8px}.order-card h4{margin:0 0 5px;font-size:13px}.order-card p{margin:3px 0;color:var(--muted);font-size:11px}.rank-list{display:grid;gap:10px}.rank-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:9px}.form-panel{max-width:650px;display:grid;gap:14px}.modal{display:none;position:fixed;inset:0;background:rgba(9,22,19,.55);z-index:50;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-card{width:min(760px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.25)}.modal-head{position:sticky;top:0;background:#fff;padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;z-index:2}.modal-head h3{margin:0}.modal-body,.modal form{padding:18px 20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .fullspan{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.icon-btn{border:0;background:#edf2f1;border-radius:10px;width:36px;height:36px;cursor:pointer}.toast{position:fixed;right:24px;bottom:24px;background:#152720;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(15px);transition:.2s;pointer-events:none;z-index:70}.toast.show{opacity:1;transform:translateY(0)}.mobile-only{display:none}@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.sales-layout,.two-col{grid-template-columns:1fr}.orders-board{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.mobile-only{display:grid}.topbar{padding:12px 16px}.page{padding:20px 14px 40px}.hero-card{display:block}.hero-card .primary{margin-top:18px}.stats-grid{grid-template-columns:1fr 1fr}.section-head{align-items:flex-start;flex-direction:column}.toolbar{align-items:stretch;flex-direction:column}.toolbar input{min-width:0}.product-grid{grid-template-columns:1fr 1fr}.orders-board{grid-template-columns:1fr}.discount-box,.payment-grid,.form-grid{grid-template-columns:1fr}.form-grid .fullspan{grid-column:auto}.cart-row-controls{grid-template-columns:60px 1fr}.cart-row-controls .remove-btn{grid-column:2}.top-actions .muted,.status-dot{display:none}}@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.hero-card h2{font-size:23px}}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#10231f,#176c59)}.login-card{width:min(420px,100%);background:white;border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-card h1{margin:8px 0}.login-card .brand-mark{margin-bottom:10px}.login-card form{display:grid;gap:14px;margin-top:20px}.hidden{display:none!important}.role-badge{font-size:11px;background:#e8f5f1;color:#146c5a;border-radius:999px;padding:5px 8px;font-weight:800}.danger-btn{border:0;border-radius:10px;padding:8px 10px;background:#feecea;color:#a2271d;cursor:pointer}.scan-box{display:flex;gap:8px}.scan-box input{flex:1}.report-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.report-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:white}.report-card strong{display:block;font-size:20px;margin-top:7px}.audit-json{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.print-area{display:none}.barcode-svg{background:#fff;padding:10px}.security-note{font-size:12px;color:var(--muted);background:#f7faf9;border:1px solid #dcebe6;border-radius:12px;padding:12px}.permission-denied{padding:40px;text-align:center;color:var(--muted)}@media(max-width:1050px){.report-grid{grid-template-columns:repeat(2,1fr)}}@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{display:block!important;position:absolute;left:0;top:0;width:80mm;padding:6mm;font-family:monospace;color:#000}.no-print{display:none!important}}
.dashboard-charts{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0}.dashboard-charts canvas{width:100%;background:#fff;border-radius:12px}.status-select{min-width:140px;padding:6px}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.small{font-size:12px}.positive{color:#0f766e}.negative{color:#b91c1c}@media(max-width:900px){.dashboard-charts{grid-template-columns:1fr}}

/* =========================================================
   OPTIKPRO - THERMAL RECEIPT 80MM V2
   ========================================================= */

@page {
  size: 80mm auto;
  margin: 0;
}

@media print {
  html,
  body {
    width: 80mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  .print-area,
  .print-area * {
    visibility: visible !important;
  }

  .print-area {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 80mm !important;
    max-width: 80mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3mm 4mm !important;
    box-sizing: border-box !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #000 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  .print-area hr {
    border: 0 !important;
    border-top: 1px dashed #000 !important;
    margin: 5px 0 !important;
  }

  .print-area strong {
    font-weight: 700 !important;
  }

  .print-area div,
  .print-area span {
    max-width: 100% !important;
  }

  .no-print {
    display: none !important;
  }
}
/* =========================================================
   OPTIKPRO - WIDE MODAL
   Khusus tampilan yang membutuhkan ruang horizontal besar
   ========================================================= */

.modal-card.modal-wide{
  width:min(1120px,calc(100vw - 48px));
  max-width:1120px;
}

.modal-card.modal-wide .modal-body{
  overflow-x:hidden;
}

@media(max-width:900px){
  .modal-card.modal-wide{
    width:calc(100vw - 24px);
    max-width:none;
  }
}

/* ==========================================================
   OptikPro - Referral checkbox alignment
   Scoped only to medical referral checkbox
   ========================================================== */

.referral-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  cursor: pointer;
}

.referral-check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
}


/* =========================================================
   OPTIKPRO SIDEBAR SCROLL + FIXED LOGOUT
   ========================================================= */

.sidebar{
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.sidebar .brand{
  flex:0 0 auto;
}

.sidebar nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#55746b transparent;
}

.sidebar nav::-webkit-scrollbar{
  width:5px;
}

.sidebar nav::-webkit-scrollbar-track{
  background:transparent;
}

.sidebar nav::-webkit-scrollbar-thumb{
  background:#55746b;
  border-radius:999px;
}

.sidebar-footer{
  flex:0 0 auto;
  margin-top:8px;
  padding:10px;
  background:#10231f;
  position:relative;
  z-index:2;
}
/* =========================================================
   OPTIKPRO PRINT REMOVE HIDDEN LAYOUT
   Mencegah halaman kosong tambahan saat mencetak
   ========================================================= */
@media print {
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body > *:not(#printArea) {
    display: none !important;
  }

  body > #printArea {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}
/* =========================================================
   OPTIKPRO A4 PRINT LAYOUT
   Dipilih oleh printWithLayout('a4')
   ========================================================= */
@media print {
  html.print-layout-a4,
  body.print-layout-a4 {
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#fff !important;
  }

  body.print-layout-a4 > #printArea {
    display:block !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:12px !important;
    line-height:1.45 !important;
    color:#111 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  body.print-layout-a4 > #printArea table {
    width:100% !important;
    page-break-inside:auto;
  }

  body.print-layout-a4 > #printArea tr {
    page-break-inside:avoid;
    page-break-after:auto;
  }

  body.print-layout-a4 > #printArea hr {
    border:0 !important;
    border-top:1px solid #777 !important;
  }
}

/*
 * ============================================================
 * OPTIKPRO THERMAL PRINT DARKNESS
 * Mempertegas hasil raster nota thermal dari Android/Chrome.
 * Tidak memengaruhi tampilan layar maupun dokumen A4.
 * ============================================================
 */
@media print {
  html.print-layout-thermal,
  body.print-layout-thermal {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-layout-thermal .print-area {
    color: #000 !important;
    background: #fff !important;
    font-family:
      Arial,
      "Arial Narrow",
      sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    -webkit-font-smoothing: none !important;
    text-rendering: geometricPrecision !important;
  }

  .print-layout-thermal .print-area,
  .print-layout-thermal .print-area * {
    color: #000 !important;
    border-color: #000 !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-layout-thermal .print-area div,
  .print-layout-thermal .print-area span,
  .print-layout-thermal .print-area p,
  .print-layout-thermal .print-area small,
  .print-layout-thermal .print-area td,
  .print-layout-thermal .print-area th {
    font-weight: 600 !important;
  }

  .print-layout-thermal .print-area strong,
  .print-layout-thermal .print-area b,
  .print-layout-thermal .print-area h1,
  .print-layout-thermal .print-area h2,
  .print-layout-thermal .print-area h3,
  .print-layout-thermal .print-area h4 {
    color: #000 !important;
    font-weight: 800 !important;
  }

  .print-layout-thermal .print-area small {
    font-size: 10px !important;
  }

  .print-layout-thermal .print-area hr {
    border: 0 !important;
    border-top: 2px dashed #000 !important;
    opacity: 1 !important;
  }

  .print-layout-thermal .print-area table,
  .print-layout-thermal .print-area td,
  .print-layout-thermal .print-area th {
    border-color: #000 !important;
  }
}


/* OPTIKPRO LENS IMPORT FRAME V2 */

.modal-card.modal-wide{
  width:min(1320px,calc(100vw - 36px));
  max-width:1320px;
}

.modal-card.modal-wide .modal-head{
  padding:16px 20px;
}

.modal-card.modal-wide #modalBody{
  padding:0;
}

.lens-import-shell{
  padding:14px 16px 16px;
}

.lens-import-intro{
  margin-bottom:12px;
}

.lens-import-intro p{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.55;
  color:#344054;
}

.lens-import-top-grid{
  display:grid;
  grid-template-columns:1.02fr 1.02fr .9fr;
  gap:12px;
  align-items:stretch;
}

.lens-import-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:14px;
  min-width:0;
}

.lens-import-card h3{
  margin:0 0 12px;
  font-size:15px;
}

.lens-import-card h4{
  margin:12px 0 8px;
  font-size:13px;
}

.lens-import-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-bottom:12px;
}

.lens-import-tab{
  border:1px solid var(--line);
  background:#f7f9fb;
  padding:10px;
  cursor:pointer;
  font-weight:700;
}

.lens-import-tab:first-child{
  border-radius:10px 0 0 10px;
}

.lens-import-tab:last-child{
  border-radius:0 10px 10px 0;
}

.lens-import-tab.active{
  background:#fff;
  color:var(--primary);
  border-color:#6fb9a7;
  box-shadow:inset 0 2px 0 var(--primary);
}

.lens-import-dropzone{
  min-height:185px;
  border:1.5px dashed #aac2d8;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:18px;
  background:#fbfdff;
}

.lens-import-dropzone strong{
  font-size:15px;
}

.lens-import-dropzone small{
  color:var(--muted);
}

.lens-import-dropzone input[type=file]{
  max-width:300px;
}

.lens-import-upload-icon{
  font-size:35px;
  color:#60758b;
}

.lens-import-label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
}

#lensImportText{
  width:100%;
  min-height:185px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px 12px;
  outline:none;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
}

#lensImportText:focus{
  border-color:#6fb9a7;
  box-shadow:0 0 0 3px #e6f6f1;
}

.lens-import-preview-block{
  margin-top:14px;
}

.lens-import-preview-block h3{
  margin-bottom:4px;
}

.lens-import-preview-block p{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}

.lens-import-actions-left{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.lens-import-actions-left .primary{
  min-width:145px;
}

.lens-import-header-box{
  background:#eef5ff;
  border:1px solid #dce8f8;
  border-radius:11px;
  padding:10px;
}

.lens-import-header-box strong{
  display:block;
  font-size:12px;
  color:#1456a0;
  margin-bottom:8px;
}

.lens-import-header-box code{
  display:block;
  background:white;
  border:1px solid #d7e1ed;
  border-radius:7px;
  padding:9px;
  font-size:11px;
  overflow:auto;
  white-space:nowrap;
}

.lens-import-format-table{
  border:1px solid var(--line);
  border-radius:10px;
}

.lens-import-format-table table{
  font-size:11px;
}

.lens-import-format-table th,
.lens-import-format-table td{
  padding:7px 8px;
}

.lens-import-side{
  display:grid;
  grid-template-rows:1fr auto;
  gap:12px;
  min-width:0;
}

.lens-import-example{
  background:#f0fbf7;
  border-color:#d7eee6;
}

.lens-import-example h3{
  color:#16704f;
}

.lens-import-example pre{
  margin:0;
  background:white;
  border:1px solid #dce9e4;
  border-radius:9px;
  padding:10px;
  font-size:10px;
  line-height:1.55;
  overflow:auto;
  max-height:185px;
  white-space:pre;
}

.lens-import-note{
  background:#fff8e8;
  border-color:#f2dda6;
}

.lens-import-note h3{
  color:#865400;
}

.lens-import-note ul{
  margin:0;
  padding-left:19px;
  font-size:11px;
  line-height:1.55;
}

.lens-import-results{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.lens-import-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.lens-import-result-head h3{
  margin:0;
  font-size:16px;
}

.lens-import-result-head p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
}

.lens-import-ready{
  background:#ecf8f2;
  border:1px solid #c9eadb;
  color:#116b48;
  padding:8px 10px;
  border-radius:10px;
  font-size:11px;
}

.lens-import-stats{
  grid-template-columns:repeat(7,minmax(120px,1fr));
  gap:8px;
  margin:12px 0;
}

.lens-import-stats .stat{
  padding:12px;
  border-radius:11px;
  box-shadow:none;
}

.lens-import-stats .stat strong{
  font-size:21px;
  margin:5px 0 0;
}

.lens-import-results h3{
  font-size:14px;
}

.lens-import-results .table-wrap{
  border:1px solid var(--line);
  border-radius:10px;
}

.lens-import-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
}

@media(max-width:1150px){
  .lens-import-top-grid{
    grid-template-columns:1fr 1fr;
  }

  .lens-import-side{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }

  .lens-import-stats{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:760px){
  .modal-card.modal-wide{
    width:calc(100vw - 16px);
    max-height:94vh;
  }

  .lens-import-shell{
    padding:10px;
  }

  .lens-import-top-grid,
  .lens-import-side{
    grid-template-columns:1fr;
  }

  .lens-import-side{
    grid-column:auto;
  }

  .lens-import-stats{
    grid-template-columns:1fr 1fr;
  }

  .lens-import-result-head{
    flex-direction:column;
  }
}


/* OPTIKPRO LENS DETAIL STATS STYLE V3 */

.lens-detail-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.lens-detail-stat{
  min-width:0;
  min-height:112px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.lens-detail-stat span{
  display:block;
  font-size:12px;
  font-weight:700;
  opacity:.7;
  margin-bottom:7px;
}

.lens-detail-stat strong{
  display:block;
  font-size:28px;
  line-height:1;
  margin-bottom:7px;
}

.lens-detail-stat small{
  display:block;
  font-size:11px;
  line-height:1.35;
  opacity:.62;
}

@media(max-width:1100px){
  .lens-detail-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .lens-detail-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .lens-detail-stats{
    grid-template-columns:1fr;
  }
}


/* OPTIKPRO LENS DETAIL TOOLBAR STYLE V3 */

.lens-detail-toolbar{
  margin-bottom:18px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
}

.lens-detail-toolbar-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.lens-detail-toolbar-head small{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom:5px;
}

.lens-detail-toolbar-head h3{
  margin:0;
  font-size:18px;
}

.lens-detail-toolbar-head p{
  margin:6px 0 0;
  line-height:1.45;
  opacity:.68;
  max-width:760px;
}

.lens-detail-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.lens-detail-toolbar-actions button{
  min-height:40px;
}

@media(max-width:700px){
  .lens-detail-toolbar-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .lens-detail-toolbar-actions button{
    width:100%;
  }
}


/* OPTIKPRO LENS DETAIL FAMILY STYLE V3 */

.lens-detail-family{
  margin-bottom:18px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
}

.lens-detail-family-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.lens-detail-family-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.lens-detail-family-head small{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom:5px;
}

.lens-detail-family-head p{
  margin:0;
  line-height:1.45;
  opacity:.68;
}

.lens-detail-family-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.lens-detail-family-item{
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}

.lens-detail-family-item span{
  display:block;
  font-size:12px;
  opacity:.65;
  margin-bottom:6px;
}

.lens-detail-family-item strong{
  display:block;
  font-size:15px;
  overflow-wrap:anywhere;
}

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

@media(max-width:520px){
  .lens-detail-family-grid{
    grid-template-columns:1fr;
  }
}


/* OPTIKPRO LENS DETAIL POWER HEADER STYLE V3 */

.lens-detail-power-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 18px 14px;
  margin-top:2px;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:var(--card);
}

.lens-detail-power-head small{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom:5px;
}

.lens-detail-power-head h3{
  margin:0;
  font-size:18px;
}

.lens-detail-power-head p{
  margin:6px 0 0;
  line-height:1.45;
  opacity:.68;
}

.lens-detail-power-count{
  flex:0 0 auto;
  min-width:112px;
  padding:11px 16px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:12px;
}

.lens-detail-power-count strong{
  display:block;
  font-size:24px;
  line-height:1;
}

.lens-detail-power-count span{
  display:block;
  margin-top:5px;
  font-size:11px;
  opacity:.65;
}

.lens-detail-power-head + .table-wrap{
  border-radius:0 0 16px 16px;
}

@media(max-width:650px){
  .lens-detail-power-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .lens-detail-power-count{
    width:100%;
  }
}


/* OPTIKPRO LENS DETAIL FOOTNOTE STYLE V3 */

.lens-detail-footnote{
  margin-top:12px;
  padding:0 16px 12px;
  line-height:1.45;
  box-sizing:border-box;
}

/* =========================================================
   OPTIKPRO LENS POWER SCROLL TABLE V4
   Khusus tabel Daftar Power pada Detail Master Katalog Lensa
   ========================================================= */

.lens-power-table-wrap{
  max-height:460px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:0 0 16px 16px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.lens-power-table-wrap table{
  margin:0;
}

.lens-power-table-wrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fafbfc;
  box-shadow:0 1px 0 var(--line);
}

.lens-power-table-wrap::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.lens-power-table-wrap::-webkit-scrollbar-thumb{
  background:#c8d2d0;
  border-radius:999px;
}

.lens-power-table-wrap::-webkit-scrollbar-track{
  background:transparent;
}

@media(max-width:760px){
  .lens-power-table-wrap{
    max-height:55vh;
  }
}

/* ============================================================
   OPTIKPRO STOCK OPNAME MULTI ITEM UI V1
   Scope khusus modal tabel Stock Opname.
   ============================================================ */

.opname-table-wrap{
  max-height:430px !important;
  overflow:auto !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  background:#fff;
}

.opname-table-wrap table{
  margin:0;
  min-width:760px;
  table-layout:auto;
}

/* Header tetap terlihat ketika daftar produk digulir */
.opname-table-wrap thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#fafbfc;
  box-shadow:0 1px 0 var(--line);
}

/* Produk */
.opname-table-wrap th:nth-child(1),
.opname-table-wrap td:nth-child(1){
  min-width:190px;
  max-width:270px;
  white-space:normal;
}

/* Kode */
.opname-table-wrap th:nth-child(2),
.opname-table-wrap td:nth-child(2){
  min-width:190px;
  max-width:240px;
}

/* Kolom angka */
.opname-table-wrap th:nth-child(3),
.opname-table-wrap td:nth-child(3),
.opname-table-wrap th:nth-child(4),
.opname-table-wrap td:nth-child(4),
.opname-table-wrap th:nth-child(5),
.opname-table-wrap td:nth-child(5){
  text-align:center;
  min-width:105px;
}

/* Input stok fisik */
.opname-table-wrap .opname-physical-input{
  width:82px !important;
  min-width:82px;
  padding:8px 9px;
  text-align:center;
  font-weight:700;
}

/* Nilai selisih */
.opname-table-wrap .opname-difference{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:28px;
  padding:4px 8px;
  border-radius:8px;
  background:#f2f5f7;
  font-variant-numeric:tabular-nums;
}

/* Baris lebih mudah dipindai */
.opname-table-wrap tbody tr:hover td{
  background:#f8fbfa;
}

/* Scrollbar */
.opname-table-wrap::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.opname-table-wrap::-webkit-scrollbar-thumb{
  background:#c8d2d0;
  border-radius:999px;
}

.opname-table-wrap::-webkit-scrollbar-track{
  background:transparent;
}

/* Desktop lebar: beri ruang lebih nyaman pada modal opname */
@media(min-width:900px){
  .opname-table-wrap{
    max-height:460px !important;
  }
}

/* Tablet / HP */
@media(max-width:760px){
  .opname-table-wrap{
    max-height:55vh !important;
  }

  .opname-table-wrap table{
    min-width:690px;
    font-size:12px;
  }

  .opname-table-wrap th,
  .opname-table-wrap td{
    padding:10px 8px;
  }

  .opname-table-wrap th:nth-child(1),
  .opname-table-wrap td:nth-child(1){
    min-width:165px;
    max-width:210px;
  }

  .opname-table-wrap th:nth-child(2),
  .opname-table-wrap td:nth-child(2){
    min-width:170px;
  }

  .opname-table-wrap .opname-physical-input{
    width:72px !important;
    min-width:72px;
  }
}

/* ============================================================
   OPTIKPRO STOCK OPNAME VISUAL STATE V3
   ============================================================ */

.opname-table-wrap tbody tr.opname-row-filled td{
  background:#f4fbf8;
}

.opname-table-wrap tbody tr.opname-row-filled:hover td{
  background:#eef8f4;
}

.opname-table-wrap tbody tr.opname-row-invalid td{
  background:#fff5f4;
}

.opname-table-wrap .opname-difference.opname-diff-positive{
  background:#e9f7ef;
  color:#18734b;
}

.opname-table-wrap .opname-difference.opname-diff-negative{
  background:#feecea;
  color:#a2271d;
}

.opname-table-wrap .opname-difference.opname-diff-zero{
  background:#edf7f3;
  color:#146c5a;
}

.opname-table-wrap .opname-difference.opname-diff-invalid{
  background:#feecea;
  color:#a2271d;
  min-width:82px;
}

.opname-table-wrap tr.opname-row-filled .opname-physical-input{
  border-color:#8bc8b8;
  background:#fbfffd;
}

.opname-table-wrap tr.opname-row-invalid .opname-physical-input{
  border-color:#d98d87;
  background:#fffafa;
}

/* OPTIKPRO RETURN SOURCE AUTOCOMPLETE */
.return-source-search-wrap{
  position:relative;
}

.return-source-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 4px);
  z-index:80;
  max-height:260px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 14px 34px rgba(20,30,50,.14);
}

.return-source-results[hidden]{
  display:none;
}

.return-source-result{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:left;
  padding:11px 12px;
  cursor:pointer;
}

.return-source-result:last-child{
  border-bottom:0;
}

.return-source-result:hover,
.return-source-result:focus{
  background:var(--soft);
  outline:none;
}

.return-source-result strong{
  display:block;
  font-size:13px;
  color:var(--text);
  margin-bottom:3px;
}

.return-source-result small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.return-source-empty{
  padding:12px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

@media(max-width:760px){
  .return-source-results{
    max-height:220px;
  }

  .return-source-result{
    padding:12px;
  }
}
/* OPTIKPRO MEDICAL PATIENT AUTOCOMPLETE */
.medical-patient-search-wrap{
  position:relative;
}

.medical-patient-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  z-index:80;
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #d9dee7;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.medical-patient-results[hidden]{
  display:none;
}

.medical-patient-result{
  display:block;
  width:100%;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid #eef1f5;
  background:#fff;
  text-align:left;
  cursor:pointer;
}

.medical-patient-result:last-child{
  border-bottom:0;
}

.medical-patient-result:hover,
.medical-patient-result:focus{
  background:#f5f7fa;
  outline:none;
}

.medical-patient-result strong{
  display:block;
  margin-bottom:2px;
}

.medical-patient-result small{
  display:block;
  opacity:.72;
}

.medical-patient-empty{
  padding:12px;
  text-align:center;
  opacity:.7;
}

@media(max-width:640px){
  .medical-patient-results{
    max-height:220px;
  }
}

/* OPTIKPRO MEDICAL WORKCARD */

.medical-workcard{
  width:100%;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.medical-workcard-section{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border, #dfe3e8);
  border-radius:12px;
  padding:16px;
  background:var(--card, #fff);
}

.medical-workcard-section h3{
  margin:0 0 16px;
  font-size:17px;
}

.medical-workcard-section h4{
  margin:18px 0 10px;
  font-size:14px;
}

.medical-workcard-section h4:first-of-type{
  margin-top:0;
}

.medical-workcard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

.medical-workcard-grid .field{
  min-width:0;
}

.medical-workcard .fullspan{
  grid-column:1 / -1;
}

.medical-rx-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:8px 0 14px;
  border:1px solid var(--border, #dfe3e8);
  border-radius:10px;
}

.medical-rx-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.medical-rx-table th,
.medical-rx-table td{
  padding:8px;
  border-bottom:1px solid var(--border, #e5e7eb);
  border-right:1px solid var(--border, #e5e7eb);
  vertical-align:middle;
}

.medical-rx-table th:last-child,
.medical-rx-table td:last-child{
  border-right:0;
}

.medical-rx-table tbody tr:last-child th,
.medical-rx-table tbody tr:last-child td{
  border-bottom:0;
}

.medical-rx-table thead th{
  text-align:center;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}

.medical-rx-table tbody th{
  text-align:center;
  white-space:nowrap;
  font-size:12px;
}

.medical-rx-table input{
  width:100%;
  min-width:82px;
  box-sizing:border-box;
}

.medical-workcard textarea{
  width:100%;
  min-height:72px;
  box-sizing:border-box;
  resize:vertical;
}

/*
 * Modal Rekam Medis membutuhkan ruang lebih besar karena
 * Kartu Kerja berisi tabel pemeriksaan OD/OS yang lebar.
 */
#modal .modal:has(.medical-workcard),
.modal:has(.medical-workcard){
  width:min(1180px,96vw);
  max-width:1180px;
}

/* Tablet */
@media (max-width:900px){
  .medical-workcard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .medical-workcard-section{
    padding:14px;
  }
}

/* HP */
@media (max-width:600px){
  .medical-workcard{
    gap:14px;
  }

  .medical-workcard-section{
    padding:12px;
    border-radius:10px;
  }

  .medical-workcard-grid{
    grid-template-columns:1fr;
  }

  .medical-rx-table{
    min-width:680px;
  }

  .medical-rx-table th,
  .medical-rx-table td{
    padding:6px;
  }

  .medical-rx-table input{
    min-width:76px;
  }
}


/* ============================================================
   OPTIKPRO ATTENDANCE MODAL LAYOUT
   ============================================================ */

#fAttendance .form-grid,
#fEditAttendance .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  align-items: start;
}

#fAttendance .form-grid > label,
#fEditAttendance .form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-weight: 500;
}

#fAttendance .form-grid input,
#fAttendance .form-grid select,
#fEditAttendance .form-grid input,
#fEditAttendance .form-grid select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#fAttendance > label,
#fEditAttendance > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  font-weight: 500;
}

#fAttendance textarea,
#fEditAttendance textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  box-sizing: border-box;
}

#fAttendance .form-actions,
#fEditAttendance .form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#fAttendance input:disabled,
#fEditAttendance input:disabled {
  opacity: 1;
}

@media (max-width: 760px) {
  #fAttendance .form-grid,
  #fEditAttendance .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* OPTIKPRO MOBILE TOPBAR FIX V1 */
@media (max-width:760px){

  .topbar{
    height:auto;
    min-height:82px;
    padding:12px 14px;
    gap:10px;
    align-items:flex-start;
  }

  .top-left{
    flex:1 1 auto;
    min-width:0;
    align-items:flex-start;
  }

  .top-left > div{
    min-width:0;
  }

  .topbar h1{
    font-size:20px;
    line-height:1.15;
    overflow-wrap:anywhere;
  }

  .topbar p{
    font-size:12px;
    line-height:1.35;
  }

  .top-actions{
    flex:0 0 auto;
    max-width:58%;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
  }

  #installPwaBtn{
    padding:8px 10px;
    line-height:1.15;
    max-width:120px;
    white-space:normal;
  }

  .role-badge{
    white-space:nowrap;
  }
}
/* ============================================================
   OPTIKPRO MEDICAL MOBILE AUTOFIT V1
   Rekam medis responsif pada HP tanpa mengubah desktop
   ============================================================ */

@media (max-width:600px){

  /* Modal memenuhi layar HP dengan margin kecil */
  .modal{
    padding:8px;
    align-items:flex-start;
  }

  .modal-card{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 16px);
    border-radius:16px;
    overflow-x:hidden;
  }

  .modal-head{
    padding:14px 14px;
  }

  .modal-body,
  .modal form{
    padding:12px;
  }

  /* Semua anak form boleh mengecil mengikuti viewport */
  .form-grid,
  .form-grid > *,
  .medical-workcard,
  .medical-workcard-section{
    min-width:0;
    max-width:100%;
  }

  .medical-workcard{
    width:100%;
  }

  .medical-workcard-section{
    width:100%;
    padding:10px;
  }

  /* Field biasa menjadi satu kolom */
  .medical-workcard-grid{
    grid-template-columns:1fr;
  }

  /*
   * Tabel resep:
   * jangan lagi dipaksa 680px pada HP.
   * Seluruh tabel mengikuti lebar layar.
   */
  .medical-rx-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .medical-rx-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
  }

  .medical-rx-table th,
  .medical-rx-table td{
    padding:4px 2px;
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:10px;
  }

  .medical-rx-table thead th,
  .medical-rx-table tbody th{
    white-space:normal;
    font-size:9px;
    line-height:1.15;
  }

  .medical-rx-table input{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:7px 3px;
    font-size:12px;
    text-align:center;
  }

  /* Kolom nama mata dibuat sedikit lebih sempit */
  .medical-rx-table th:first-child,
  .medical-rx-table td:first-child{
    width:44px;
  }

  textarea,
  input,
  select{
    max-width:100%;
  }
}


/* ============================================================
   OPTIKPRO MEDICAL MOBILE AUTOFIT V2 SAFE
   Singkatan header hanya untuk tabel resep 7 kolom
   ============================================================ */

@media (max-width:600px){

  .medical-rx-table:has(thead th:nth-child(7)) thead th{
    font-size:0;
    line-height:1;
    padding:7px 2px;
    overflow-wrap:normal;
    word-break:normal;
  }

  .medical-rx-table:has(thead th:nth-child(7)) thead th::after{
    font-size:10px;
    line-height:1.1;
    font-weight:700;
    white-space:nowrap;
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(1)::after{
    content:"MATA";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(2)::after{
    content:"SPH";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(3)::after{
    content:"CYL";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(4)::after{
    content:"AXIS";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(5)::after{
    content:"PRISM";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(6)::after{
    content:"VISUS";
  }

  .medical-rx-table:has(thead th:nth-child(7))
  thead th:nth-child(7)::after{
    content:"ADD";
  }

  .medical-rx-table input{
    min-height:38px;
    padding:6px 2px;
  }

}


/* ============================================================
   OPTIKPRO PRODUCTS MOBILE V1
   Tampilan Produk & Stok menjadi card pada HP.
   Desktop tetap menggunakan tabel normal.
   Scope HANYA #page-products.
   ============================================================ */

@media (max-width:760px){

  /* Panel produk dibuat lebih efisien di layar kecil */
  #page-products .panel{
    padding:12px;
  }

  /* Toolbar pencarian */
  #page-products .toolbar{
    gap:8px;
    margin-bottom:14px;
  }

  #page-products .toolbar input,
  #page-products .toolbar select{
    width:100%;
  }

  /* Tidak perlu horizontal scroll untuk daftar produk */
  #page-products .table-wrap{
    overflow:visible;
  }

  #page-products table,
  #page-products tbody{
    display:block;
    width:100%;
  }

  /* Header desktop disembunyikan */
  #page-products thead{
    display:none;
  }

  /* Setiap produk menjadi satu card */
  #page-products #productRows tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    width:100%;
    margin-bottom:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 10px rgba(20,30,50,.04);
  }

  /* Reset cell tabel */
  #page-products #productRows td{
    display:block;
    padding:7px 0;
    border-bottom:0;
    white-space:normal;
    min-width:0;
  }

  /* Kode */
  #page-products #productRows td:nth-child(1){
    grid-column:1;
    grid-row:2;
    padding-right:8px;
    color:var(--muted);
    font-size:12px;
  }

  #page-products #productRows td:nth-child(1)::before{
    content:"Kode";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Barcode */
  #page-products #productRows td:nth-child(2){
    grid-column:2;
    grid-row:2;
    padding-left:8px;
    color:var(--muted);
    font-size:12px;
    overflow-wrap:anywhere;
  }

  #page-products #productRows td:nth-child(2)::before{
    content:"Barcode";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Nama produk menjadi header card */
  #page-products #productRows td:nth-child(3){
    grid-column:1 / -1;
    grid-row:1;
    padding:0 0 11px;
    margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }

  #page-products #productRows td:nth-child(3) strong{
    display:block;
    font-size:15px;
    line-height:1.35;
    color:var(--text);
  }

  #page-products #productRows td:nth-child(3) small{
    display:inline-block;
    margin-top:3px;
    color:var(--muted);
  }

  #page-products #productRows td:nth-child(3) .badge{
    margin-top:6px;
  }

  /* Kategori */
  #page-products #productRows td:nth-child(4){
    grid-column:1;
    grid-row:3;
    padding-right:8px;
  }

  #page-products #productRows td:nth-child(4)::before{
    content:"Kategori";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Harga */
  #page-products #productRows td:nth-child(5){
    grid-column:2;
    grid-row:3;
    padding-left:8px;
    font-weight:700;
  }

  #page-products #productRows td:nth-child(5)::before{
    content:"Harga";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Stok */
  #page-products #productRows td:nth-child(6){
    grid-column:1 / -1;
    grid-row:4;
    padding-top:9px;
  }

  #page-products #productRows td:nth-child(6)::before{
    content:"Stok";
    display:inline-block;
    margin-right:8px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Tombol aksi */
  #page-products #productRows td:nth-child(7){
    grid-column:1 / -1;
    grid-row:5;
    margin-top:5px;
    padding-top:11px;
    border-top:1px solid var(--line);
  }

  #page-products #productRows td:nth-child(7) > div{
    display:flex !important;
    gap:6px !important;
    flex-wrap:wrap !important;
  }

  #page-products #productRows td:nth-child(7) .action{
    flex:1 1 auto;
    min-height:38px;
    padding:8px 10px;
  }

  /* Empty state tetap normal */
  #page-products #productRows tr:has(.list-empty){
    display:block;
    padding:0;
    border:0;
    box-shadow:none;
  }

  #page-products #productRows .list-empty{
    display:block;
    width:100%;
    padding:26px 8px;
    text-align:center;
  }
}


/* ============================================================
   OPTIKPRO ORDERS MOBILE V1
   Pesanan & Lab menjadi card pada HP.
   Desktop tetap tabel normal.
   Scope HANYA #page-orders.
   ============================================================ */

@media (max-width:760px){

  #page-orders .panel{
    padding:12px;
  }

  #page-orders .table-wrap{
    width:100%;
    overflow:visible;
  }

  #page-orders table,
  #page-orders tbody{
    display:block;
    width:100%;
  }

  /* Header tabel desktop tidak diperlukan pada card HP */
  #page-orders thead{
    display:none;
  }

  /* Satu pesanan = satu card */
  #page-orders #orderRows tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    min-width:0;
    gap:0;
    margin-bottom:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 10px rgba(20,30,50,.04);
  }

  #page-orders #orderRows td{
    display:block;
    min-width:0;
    padding:7px 0;
    border-bottom:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* No. Order sebagai header card */
  #page-orders #orderRows td:nth-child(1){
    grid-column:1 / -1;
    grid-row:1;
    padding:0 0 10px;
    margin-bottom:3px;
    border-bottom:1px solid var(--line);
  }

  #page-orders #orderRows td:nth-child(1)::before{
    content:"No. Order";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-orders #orderRows td:nth-child(1) strong{
    display:block;
    font-size:15px;
    line-height:1.35;
    color:var(--text);
  }

  /* Pasien */
  #page-orders #orderRows td:nth-child(2){
    grid-column:1 / -1;
    grid-row:2;
    padding-top:9px;
  }

  #page-orders #orderRows td:nth-child(2)::before{
    content:"Pasien";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-orders #orderRows td:nth-child(2) small{
    color:var(--muted);
  }

  /* Lab */
  #page-orders #orderRows td:nth-child(3){
    grid-column:1;
    grid-row:3;
    padding-right:8px;
  }

  #page-orders #orderRows td:nth-child(3)::before{
    content:"Lab";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Lensa */
  #page-orders #orderRows td:nth-child(4){
    grid-column:2;
    grid-row:3;
    padding-left:8px;
  }

  #page-orders #orderRows td:nth-child(4)::before{
    content:"Lensa";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Janji */
  #page-orders #orderRows td:nth-child(5){
    grid-column:1;
    grid-row:4;
    padding-right:8px;
  }

  #page-orders #orderRows td:nth-child(5)::before{
    content:"Janji";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* Total */
  #page-orders #orderRows td:nth-child(6){
    grid-column:2;
    grid-row:4;
    padding-left:8px;
    font-weight:700;
  }

  #page-orders #orderRows td:nth-child(6)::before{
    content:"Total";
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-orders #orderRows td:nth-child(6) small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-weight:400;
    overflow-wrap:anywhere;
  }

  /* Status memenuhi lebar card */
  #page-orders #orderRows td:nth-child(7){
    grid-column:1 / -1;
    grid-row:5;
    padding-top:10px;
  }

  #page-orders #orderRows td:nth-child(7)::before{
    content:"Status";
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-orders #orderRows td:nth-child(7) .status-select{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:42px;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
  }

  /* Semua aksi di bagian bawah */
  #page-orders #orderRows td:nth-child(8){
    grid-column:1 / -1;
    grid-row:6;
    margin-top:4px;
    padding-top:11px;
    border-top:1px solid var(--line);
  }

  #page-orders #orderRows td:nth-child(8)::before{
    content:"Aksi";
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-orders #orderRows td:nth-child(8) > div:first-child{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:7px !important;
    width:100%;
  }

  #page-orders #orderRows td:nth-child(8) .action{
    width:100%;
    min-width:0;
    min-height:40px;
    padding:8px 7px;
    white-space:normal;
    line-height:1.2;
  }

}

/* ============================================================
   OPTIKPRO MY ATTENDANCE MOBILE V2
   Scope: Absensi Saya saja.
   ============================================================ */

#page-myattendance button:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.45);
}

#page-myattendance #myAttendanceCheckInBtn:disabled,
#page-myattendance #myAttendanceCheckOutBtn:disabled{
  background:#e5e7eb;
  border-color:#d1d5db;
  color:#9ca3af;
  box-shadow:none;
}

@media(max-width:760px){

  #page-myattendance > .panel{
    padding:16px;
  }

  #page-myattendance .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  #page-myattendance #myAttendanceCheckInBtn,
  #page-myattendance #myAttendanceCheckOutBtn{
    width:100%;
    min-height:46px;
  }

  #page-myattendance #myAttendanceLocationInfo{
    line-height:1.45;
    margin-top:14px;
  }

  #page-myattendance .table-wrap{
    overflow:visible;
  }

  #page-myattendance #myAttendanceHistoryRows{
    display:block;
  }

  #page-myattendance #myAttendanceHistoryRows tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 16px;
    padding:16px;
    margin-bottom:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
  }

  #page-myattendance #myAttendanceHistoryRows td{
    display:block;
    min-width:0;
    padding:0;
    border:0;
    white-space:normal;
  }

  #page-myattendance #myAttendanceHistoryRows td::before{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(1)::before{
    content:"Tanggal";
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(2)::before{
    content:"Status";
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(3)::before{
    content:"Check-in";
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(4)::before{
    content:"Check-out";
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(5)::before{
    content:"Terlambat";
  }

  #page-myattendance #myAttendanceHistoryRows td:nth-child(6)::before{
    content:"Lembur";
  }

  #page-myattendance .table-wrap table:has(#myAttendanceHistoryRows) thead{
    display:none;
  }

  #page-myattendance .table-wrap table:has(#myAttendanceHistoryRows){
    display:block;
    width:100%;
    min-width:0;
  }

  #page-myattendance #myAttendanceHistoryRows tr:has(td[colspan]){
    display:block;
  }

  #page-myattendance #myAttendanceHistoryRows td[colspan]::before{
    display:none;
  }
}



/* ============================================================
   OPTIKPRO SIDEBAR GROUPED STYLE V1
   Accordion sidebar - desktop dan mobile
   ============================================================ */

#nav{
  gap:4px;
}

#nav > .nav-item{
  flex:0 0 auto;
}

/* Kelompok utama */
.nav-group{
  display:block;
  width:100%;
}

/* Tombol judul kelompok */
.nav-group-toggle{
  width:100%;
  border:0;
  background:transparent;
  color:#bcd0ca;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  text-align:left;
  font:inherit;
}

.nav-group-toggle:hover{
  background:#18342e;
  color:#fff;
}

.nav-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.nav-group-title > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Panah accordion */
.nav-group-arrow{
  flex:0 0 auto;
  font-size:12px;
  opacity:.75;
  transition:transform .18s ease;
}

/* Isi grup default tertutup */
.nav-group-items{
  display:none;
  padding:2px 0 5px 12px;
}

/* Grup terbuka */
.nav-group.open > .nav-group-items{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.nav-group.open > .nav-group-toggle{
  color:#fff;
  background:rgba(255,255,255,.045);
}

.nav-group.open > .nav-group-toggle .nav-group-arrow{
  transform:rotate(180deg);
}

/* Menu anak */
.nav-group-items .nav-item{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  gap:9px;

  position:relative;
}

/* Garis visual tipis di sisi submenu */
.nav-group-items .nav-item::before{
  content:"";
  position:absolute;
  left:-7px;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background:rgba(188,208,202,.16);
}

/* Halaman aktif lebih jelas */
.nav-group-items .nav-item.active::before{
  background:#56c8aa;
}

.nav-group-items .nav-item.active{
  background:#1c3a33;
  color:#fff;
}

/* Dashboard standalone */
#nav > .nav-item[data-page="dashboard"]{
  margin-bottom:3px;
}

/* HP */
@media(max-width:760px){

  .nav-group-toggle{
    min-height:44px;
    padding:10px 12px;
  }

  .nav-group-items{
    padding-left:10px;
  }

  .nav-group-items .nav-item{
    min-height:42px;
    padding:10px;
  }
}


/* ============================================================
   OPTIKPRO GLOBAL MOBILE MODAL AUTOFIT V1
   Semua modal menyesuaikan layar HP
   Desktop tidak diubah
   ============================================================ */

@media (max-width:600px){

  /* ========================================================
     OVERLAY MODAL
     ======================================================== */

  .modal{
    padding:6px !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }


  /* ========================================================
     SEMUA KARTU MODAL
     Termasuk modal-wide
     ======================================================== */

  .modal-card,
  .modal-card.modal-wide{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    max-height:calc(100dvh - 12px) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    border-radius:14px !important;
  }


  /* ========================================================
     HEADER MODAL
     ======================================================== */

  .modal-head,
  .modal-card.modal-wide .modal-head{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:12px 12px !important;
    gap:8px !important;
  }

  .modal-head h3{
    min-width:0 !important;
    max-width:calc(100% - 44px) !important;

    margin:0 !important;

    font-size:16px !important;
    line-height:1.25 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }


  /* ========================================================
     BODY MODAL
     ======================================================== */

  .modal-body,
  .modal form,
  .modal-card #modalBody,
  .modal-card.modal-wide #modalBody{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:10px !important;

    overflow-x:hidden !important;
  }


  /* ========================================================
     SEMUA ELEMEN DI DALAM MODAL BOLEH MENGECIL
     ======================================================== */

  .modal-card *,
  .modal-card *::before,
  .modal-card *::after{
    box-sizing:border-box;
  }

  .modal-card > *,
  .modal-body > *,
  .modal form > *,
  .modal .form-grid,
  .modal .form-grid > *,
  .modal .field,
  .modal .panel{
    min-width:0 !important;
    max-width:100%;
  }


  /* ========================================================
     FORM GRID
     Semua form modal menjadi 1 kolom pada HP
     ======================================================== */

  .modal .form-grid{
    width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }

  .modal .form-grid .fullspan{
    grid-column:1 !important;
  }


  /* ========================================================
     INPUT / SELECT / TEXTAREA
     ======================================================== */

  .modal input,
  .modal select,
  .modal textarea{
    width:100%;
    max-width:100% !important;
    min-width:0 !important;
  }

  .modal textarea{
    resize:vertical;
  }


  /* ========================================================
     INLINE FIELD
     ======================================================== */

  .modal .inline{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .modal .inline input{
    min-width:0 !important;
  }


  /* ========================================================
     FLEX / BUTTON ACTION
     Jangan menyebabkan modal melebar
     ======================================================== */

  .modal .form-actions{
    width:100%;
    max-width:100%;

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    justify-content:flex-end;
  }

  .modal .form-actions button{
    max-width:100%;
  }


  /* ========================================================
     TABEL DI DALAM MODAL
     Hanya tabel yang boleh scroll horizontal bila memang perlu.
     MODAL TIDAK IKUT MELEBAR.
     ======================================================== */

  .modal .table-wrap{
    display:block;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow-x:auto !important;
    overflow-y:visible;

    -webkit-overflow-scrolling:touch;
  }

  .modal .table-wrap table{
    max-width:none;
  }


  /* ========================================================
     GAMBAR / CANVAS / IFRAME
     ======================================================== */

  .modal img,
  .modal canvas,
  .modal video{
    max-width:100% !important;
    height:auto;
  }

  .modal iframe{
    width:100% !important;
    max-width:100% !important;
  }


  /* ========================================================
     TEKS PANJANG
     ======================================================== */

  .modal p,
  .modal span,
  .modal label,
  .modal div{
    overflow-wrap:anywhere;
  }


  /* ========================================================
     PRE / CODE
     Jangan memaksa modal melebar
     ======================================================== */

  .modal pre,
  .modal code{
    max-width:100%;
    overflow-x:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }


  /* ========================================================
     PROTEKSI TERHADAP WIDTH / MIN-WIDTH DESKTOP
     ======================================================== */

  .modal [style*="min-width"]{
    min-width:0 !important;
  }

  .modal [style*="width"]{
    max-width:100%;
  }

}


/* === END OPTIKPRO GLOBAL MOBILE MODAL AUTOFIT V1 === */


/* ============================================================
   OPTIKPRO GLOBAL MOBILE PAGE AUTOFIT V1
   Mencegah isi HALAMAN melebar keluar viewport HP.
   Tabel kompleks tetap scroll di dalam table-wrap.
   ============================================================ */

@media (max-width:760px){

  html,
  body{
    max-width:100%;
  }

  .app-shell,
  .main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .main{
    margin-left:0 !important;
  }

  /* ---------- PAGE ---------- */

  .page,
  .page.active{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding-left:12px !important;
    padding-right:12px !important;
  }

  .page > *{
    min-width:0;
    max-width:100%;
  }

  /* ---------- PANEL / CARD ---------- */

  .page .panel,
  .page .hero-card,
  .page .stat,
  .page .report-card,
  .page .form-panel{
    width:100%;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ---------- GRID ---------- */

  .page .two-col,
  .page .sales-layout,
  .page .dashboard-charts,
  .page .report-grid{
    width:100%;
    max-width:100%;
    min-width:0;

    grid-template-columns:minmax(0,1fr) !important;
  }

  .page .stats-grid{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .page .stats-grid > *,
  .page .two-col > *,
  .page .sales-layout > *,
  .page .dashboard-charts > *,
  .page .report-grid > *{
    min-width:0 !important;
    max-width:100%;
  }

  /* ---------- HEADER / TOOLBAR ---------- */

  .page .section-head,
  .page .panel-head,
  .page .toolbar{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .page .section-head > *,
  .page .panel-head > *,
  .page .toolbar > *{
    min-width:0;
    max-width:100%;
  }

  /* ---------- FORM ---------- */

  .page input,
  .page select,
  .page textarea{
    max-width:100%;
    min-width:0;
  }

  /* ---------- TEKS PANJANG ---------- */

  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page p,
  .page span,
  .page strong,
  .page label{
    overflow-wrap:anywhere;
  }

  /* ==========================================================
     TABLE-WRAP
     Tabel lebar tidak boleh memperlebar seluruh halaman.
     Scroll horizontal hanya terjadi DI DALAM tabel.
     ========================================================== */

  .page .table-wrap{
    display:block;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow-x:auto !important;
    overflow-y:visible;

    -webkit-overflow-scrolling:touch;
  }

  /*
     Jangan memaksa tabel global menjadi 100% sempit.
     Tabel dengan banyak kolom tetap boleh mempunyai lebar
     intrinsik, tetapi dibatasi oleh table-wrap.
  */

  .page .table-wrap table{
    max-width:none;
  }

  /* ==========================================================
     LAPORAN KEUANGAN
     ========================================================== */

  #page-financialreports{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #page-financialreports > *{
    min-width:0 !important;
    max-width:100%;
  }

  #page-financialreports .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #page-financialreports .table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow-x:auto !important;
  }

  /* ---------- MEDIA ---------- */

  .page img,
  .page canvas,
  .page video{
    max-width:100% !important;
    height:auto;
  }

  .page iframe{
    width:100% !important;
    max-width:100% !important;
  }

}


/* === END OPTIKPRO GLOBAL MOBILE PAGE AUTOFIT V1 === */


/* ============================================================
   OPTIKPRO LENS CATALOG MOBILE V2
   Scope: halaman Master Katalog Lensa saja
   Desktop tidak diubah
   ============================================================ */

@media (max-width:760px){

  /* ----------------------------------------------------------
     PAGE / PANEL
     ---------------------------------------------------------- */

  #page-lenscatalog,
  #page-lenscatalog .panel,
  #page-lenscatalog .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #page-lenscatalog .panel{
    overflow:hidden;
  }

  /* ----------------------------------------------------------
     TOOLBAR FILTER
     ---------------------------------------------------------- */

  #page-lenscatalog .toolbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
    max-width:100%;
    gap:8px;
  }

  #page-lenscatalog .toolbar input,
  #page-lenscatalog .toolbar select,
  #page-lenscatalog .toolbar button{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* ----------------------------------------------------------
     TABEL UTAMA -> CARD MOBILE
     ---------------------------------------------------------- */

  #page-lenscatalog .table-wrap{
    overflow:visible !important;
  }

  #page-lenscatalog .table-wrap > table{
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:auto;
  }

  #page-lenscatalog .table-wrap > table > thead{
    display:none;
  }

  #page-lenscatalog #lensCatalogRows{
    display:block;
    width:100%;
    max-width:100%;
  }

  #page-lenscatalog #lensCatalogRows > tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 12px;
    padding:12px;
    gap:0;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
    box-sizing:border-box;
    overflow:hidden;
  }

  #page-lenscatalog #lensCatalogRows > tr > td{
    display:block;
    width:auto !important;
    max-width:100%;
    min-width:0 !important;
    padding:8px 7px !important;
    border:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    box-sizing:border-box;
  }

  /* Nama katalog memenuhi lebar card */
  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(1){
    grid-column:1 / -1;
    padding-bottom:10px !important;
    margin-bottom:4px;
    border-bottom:1px solid var(--line) !important;
    font-size:15px;
  }

  /* Kondisi stok memenuhi lebar card */
  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(9){
    grid-column:1 / -1;
  }

  /* Tombol aksi memenuhi lebar */
  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(11){
    grid-column:1 / -1;
    padding-top:10px !important;
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(11) button{
    width:100%;
    max-width:100%;
  }

  /* ----------------------------------------------------------
     LABEL KOLOM
     ---------------------------------------------------------- */

  #page-lenscatalog #lensCatalogRows > tr > td::before{
    display:block;
    margin-bottom:3px;
    font-size:10px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(1)::before{
    content:"Nama Katalog";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(2)::before{
    content:"Merek";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(3)::before{
    content:"Material";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(4)::before{
    content:"Coating";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(5)::before{
    content:"Design";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(6)::before{
    content:"Power";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(7)::before{
    content:"Produk Cabang";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(8)::before{
    content:"Total Stok";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(9)::before{
    content:"Kondisi Stok";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(10)::before{
    content:"Status";
  }

  #page-lenscatalog #lensCatalogRows > tr > td:nth-child(11)::before{
    content:"Aksi";
  }

  /* ----------------------------------------------------------
     BADGE
     ---------------------------------------------------------- */

  #page-lenscatalog #lensCatalogRows .badge{
    max-width:100%;
    white-space:normal;
  }

  /* ----------------------------------------------------------
     EMPTY / LOADING ROW
     colspan=11 jangan dibuat card dua kolom
     ---------------------------------------------------------- */

  #page-lenscatalog #lensCatalogRows > tr > td[colspan]{
    grid-column:1 / -1;
    width:100% !important;
    text-align:center;
  }

  #page-lenscatalog #lensCatalogRows > tr > td[colspan]::before{
    display:none;
  }

}

/* === END OPTIKPRO LENS CATALOG MOBILE V2 === */


/* ============================================================
   OPTIKPRO LENS POWER MOBILE CARD V1
   Scope: Daftar Power pada Detail Master Katalog Lensa
   Desktop tetap tabel
   ============================================================ */

@media (max-width:760px){

  /* Wrapper tidak lagi menjadi horizontal scroll */
  .lens-power-table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    box-sizing:border-box;
  }

  .lens-power-table-wrap > table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    table-layout:auto !important;
  }

  /* Header desktop disembunyikan */
  .lens-power-table-wrap > table > thead{
    display:none !important;
  }

  #lensPowerRows{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Satu power = satu card */
  #lensPowerRows > tr{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 0 12px !important;
    padding:12px !important;

    gap:0 !important;

    border:1px solid var(--line) !important;
    border-radius:14px !important;

    background:var(--panel) !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #lensPowerRows > tr > td{
    display:block !important;

    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:8px 7px !important;

    border:0 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;

    box-sizing:border-box !important;
  }

  /* -----------------------------------------------
     LABEL MOBILE
     Urutan:
     1 SPH
     2 CYL
     3 ADD
     4 Master
     5 Produk Cabang
     6 Stok
     7 Kondisi
     8 Aksi
     ----------------------------------------------- */

  #lensPowerRows > tr > td::before{
    display:block;
    margin-bottom:4px;

    font-size:10px;
    line-height:1.2;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:var(--muted);
  }

  #lensPowerRows > tr > td:nth-child(1)::before{
    content:"SPH";
  }

  #lensPowerRows > tr > td:nth-child(2)::before{
    content:"CYL";
  }

  #lensPowerRows > tr > td:nth-child(3)::before{
    content:"ADD";
  }

  #lensPowerRows > tr > td:nth-child(4)::before{
    content:"Master";
  }

  #lensPowerRows > tr > td:nth-child(5)::before{
    content:"Produk Cabang";
  }

  #lensPowerRows > tr > td:nth-child(6)::before{
    content:"Stok";
  }

  #lensPowerRows > tr > td:nth-child(7)::before{
    content:"Kondisi";
  }

  #lensPowerRows > tr > td:nth-child(8)::before{
    content:"Aksi";
  }

  /* Produk cabang perlu ruang penuh */
  #lensPowerRows > tr > td:nth-child(5){
    grid-column:1 / -1 !important;

    margin-top:3px;
    padding-top:10px !important;

    border-top:1px solid var(--line) !important;
  }

  /* Aksi juga penuh agar tombol tidak sempit */
  #lensPowerRows > tr > td:nth-child(8){
    grid-column:1 / -1 !important;

    margin-top:3px;
    padding-top:10px !important;

    border-top:1px solid var(--line) !important;
  }

  #lensPowerRows > tr > td:nth-child(8) button{
    max-width:100%;
    white-space:normal;
  }

  #lensPowerRows .badge{
    max-width:100%;
    white-space:normal;
  }

  /* Empty state / colspan */
  #lensPowerRows > tr > td[colspan]{
    grid-column:1 / -1 !important;
    width:100% !important;
    text-align:center !important;
  }

  #lensPowerRows > tr > td[colspan]::before{
    display:none !important;
  }

}

/* === END OPTIKPRO LENS POWER MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO STOCK MONITOR MOBILE CARD V1
   Scope: Monitoring Stok
   HP = card, desktop tetap tabel
   ============================================================ */

@media (max-width:760px){

  /* Jangan biarkan halaman Monitoring Stok melebar */
  #page-stockmonitor{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  #page-stockmonitor .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Filter mobile */
  #page-stockmonitor .toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #page-stockmonitor .toolbar input,
  #page-stockmonitor .toolbar select,
  #page-stockmonitor .toolbar button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Table wrapper tidak horizontal-scroll */
  #page-stockmonitor .table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  #page-stockmonitor .table-wrap > table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
  }

  #page-stockmonitor #stockMonitorHead{
    display:none !important;
  }

  #page-stockmonitor #stockMonitorRows{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Satu item stok = satu card */
  #page-stockmonitor #stockMonitorRows > tr{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 0 12px !important;
    padding:12px !important;

    border:1px solid var(--line) !important;
    border-radius:14px !important;

    background:var(--panel) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #page-stockmonitor #stockMonitorRows > tr > td{
    display:block !important;

    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:7px !important;
    border:0 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;

    box-sizing:border-box !important;
  }

  #page-stockmonitor #stockMonitorRows > tr > td::before{
    display:block;
    margin-bottom:4px;

    font-size:10px;
    line-height:1.2;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:var(--muted);
  }

  /*
   * MODE NORMAL
   * 1 Status
   * 2 Kode
   * 3 Produk
   * 4 Kategori
   * 5 Merek
   * 6 Atribut/Ukuran
   * 7 Stok
   * 8 Minimum
   * 9 Saran Pesan
   * 10 Cabang
   */

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(1)::before{
    content:"Status";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(2)::before{
    content:"Kode";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(3)::before{
    content:"Produk";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(4)::before{
    content:"Kategori";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(5)::before{
    content:"Merek";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(6)::before{
    content:"Atribut / Ukuran";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(7)::before{
    content:"Stok";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(8)::before{
    content:"Minimum";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(9)::before{
    content:"Saran Pesan";
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(10)::before{
    content:"Cabang";
  }

  /* Produk dan atribut diberi satu baris penuh */
  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(3),
  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(6){
    grid-column:1 / -1 !important;
  }

  #page-stockmonitor #stockMonitorRows > tr > td:nth-child(3){
    margin-top:3px;
    padding-top:10px !important;
    border-top:1px solid var(--line) !important;
  }

  #page-stockmonitor #stockMonitorRows .badge{
    max-width:100% !important;
    white-space:normal !important;
  }

  /* Empty/loading/error state */
  #page-stockmonitor #stockMonitorRows > tr > td[colspan]{
    grid-column:1 / -1 !important;
    width:100% !important;
    text-align:center !important;
  }

  #page-stockmonitor #stockMonitorRows > tr > td[colspan]::before{
    display:none !important;
  }

}

/* === END OPTIKPRO STOCK MONITOR MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO STOCK MONITOR MOBILE CARD V2
   Label khusus mode Saran Restock Lensa
   ============================================================ */

@media (max-width:760px){

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(1)::before{
    content:"Family Lensa";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(2)::before{
    content:"Merek";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(3)::before{
    content:"SPH";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(4)::before{
    content:"CYL";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(5)::before{
    content:"ADD";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(6)::before{
    content:"Stok";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(7)::before{
    content:"Minimum";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(8)::before{
    content:"Target";
  }

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(9)::before{
    content:"Saran Pesan";
  }

  /* Family lensa menjadi judul utama card */
  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(1){
    grid-column:1 / -1 !important;

    padding-bottom:10px !important;
    margin-bottom:3px !important;

    border-bottom:1px solid var(--line) !important;
  }

  /* Batalkan aturan full-width V1 pada kolom 3 & 6 */
  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(3),

  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(6){
    grid-column:auto !important;
  }

  /* Hilangkan separator V1 dari kolom ke-3 */
  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(3){
    margin-top:0 !important;
    padding-top:7px !important;
    border-top:0 !important;
  }

  /* Saran pesan diberi ruang penuh */
  #page-stockmonitor
  #stockMonitorRows[data-view="restock"]
  > tr > td:nth-child(9){
    grid-column:1 / -1 !important;

    margin-top:3px !important;
    padding-top:10px !important;

    border-top:1px solid var(--line) !important;
  }

}

/* === END OPTIKPRO STOCK MONITOR MOBILE CARD V2 === */

/* ============================================================
   OPTIKPRO STOCK OPNAME MOBILE CARD V1
   Riwayat Stock Opname -> card mobile
   Desktop tidak diubah
   ============================================================ */

@media (max-width: 768px) {

  /* halaman tidak boleh mendorong viewport */
  #page-stockopname,
  #page-stockopname .panel,
  #page-stockopname .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #page-stockopname .table-wrap {
    overflow: visible;
  }

  /* tabel menjadi kumpulan card */
  #page-stockopname .table-wrap > table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #page-stockopname .table-wrap > table > thead {
    display: none;
  }

  #page-stockopname #opnameRows {
    display: block;
    width: 100%;
  }

  #page-stockopname #opnameRows > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 18px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 16px;
    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;

    box-sizing: border-box;
  }

  #page-stockopname #opnameRows > tr > td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;

    padding: 0 !important;
    border: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;

    box-sizing: border-box;
  }

  /* label setiap field */
  #page-stockopname #opnameRows > tr > td::before {
    display: block;
    margin-bottom: 5px;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;

    color: var(--muted);
    text-transform: uppercase;
  }

  /* No */
  #page-stockopname #opnameRows > tr > td:nth-child(1)::before {
    content: "NO. STOCK OPNAME";
  }

  /* Tanggal */
  #page-stockopname #opnameRows > tr > td:nth-child(2)::before {
    content: "TANGGAL";
  }

  /* Cabang */
  #page-stockopname #opnameRows > tr > td:nth-child(3)::before {
    content: "CABANG";
  }

  /* Status */
  #page-stockopname #opnameRows > tr > td:nth-child(4)::before {
    content: "STATUS";
  }

  /* Catatan */
  #page-stockopname #opnameRows > tr > td:nth-child(5)::before {
    content: "CATATAN";
  }

  /* Aksi */
  #page-stockopname #opnameRows > tr > td:nth-child(6)::before {
    content: "AKSI";
  }

  /* No opname & catatan memakai lebar penuh */
  #page-stockopname #opnameRows > tr > td:nth-child(1),
  #page-stockopname #opnameRows > tr > td:nth-child(5),
  #page-stockopname #opnameRows > tr > td:nth-child(6) {
    grid-column: 1 / -1;
  }

  /* nomor dokumen lebih menonjol */
  #page-stockopname #opnameRows > tr > td:nth-child(1) strong {
    font-weight: 700;
  }

  /* tombol aksi tetap rapi */
  #page-stockopname #opnameRows > tr > td:nth-child(6) > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
    min-width: 0;
  }

  #page-stockopname #opnameRows > tr > td:nth-child(6) button {
    max-width: 100%;
  }

  /* baris kosong jangan dibuat card 2 kolom */
  #page-stockopname #opnameRows > tr > td.list-empty {
    grid-column: 1 / -1;
    text-align: center;
  }

  #page-stockopname #opnameRows > tr > td.list-empty::before {
    display: none;
  }
}

/* === END OPTIKPRO STOCK OPNAME MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO STOCK OPNAME MODAL MOBILE CARD V1
   Mobile autofit untuk daftar produk pada modal Stock Opname.
   Desktop tidak diubah.
   ============================================================ */

@media (max-width: 700px) {

  /* Wrapper daftar produk */
  .opname-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box;
  }

  /* Hilangkan min-width 760px versi desktop */
  .opname-table-wrap > table {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: auto !important;
  }

  /* Header tabel tidak diperlukan pada tampilan card */
  .opname-table-wrap > table > thead {
    display: none !important;
  }

  #opnameItemRows {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 10px !important;
    box-sizing: border-box;
  }

  /* Satu produk = satu card */
  #opnameItemRows > tr[data-opname-product-row="1"] {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 14px 16px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 12px !important;
    padding: 14px !important;

    border: 1px solid var(--line) !important;
    border-radius: 14px !important;

    background: #fff !important;

    box-sizing: border-box !important;
  }

  /* Reset semua TD dari aturan tabel desktop */
  #opnameItemRows > tr[data-opname-product-row="1"] > td {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 0 !important;
    border: 0 !important;

    text-align: left !important;
    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    box-sizing: border-box !important;
  }

  /* Label card */
  #opnameItemRows > tr[data-opname-product-row="1"] > td::before {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: .04em;

    color: var(--muted);

    text-transform: uppercase;
  }

  /* Produk menggunakan lebar penuh */
  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(1) {
    grid-column: 1 / -1;
  }

  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(1)::before {
    content: "PRODUK";
  }

  /* Kode juga lebar penuh */
  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(2) {
    grid-column: 1 / -1;

    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(2)::before {
    content: "KODE";
  }

  /* Stok sistem */
  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(3)::before {
    content: "STOK SISTEM";
  }

  /* Stok fisik */
  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(4)::before {
    content: "STOK FISIK";
  }

  /* Selisih menggunakan lebar penuh */
  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(5) {
    grid-column: 1 / -1;

    padding-top: 12px !important;
    border-top: 1px solid var(--line) !important;
  }

  #opnameItemRows > tr[data-opname-product-row="1"] > td:nth-child(5)::before {
    content: "SELISIH";
  }

  /* Input stok fisik harus nyaman disentuh di HP */
  #opnameItemRows .opname-physical-input {
    display: block !important;

    width: 100% !important;
    max-width: 140px !important;
    min-width: 0 !important;

    min-height: 42px;

    padding: 8px 10px !important;

    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700;

    box-sizing: border-box !important;
  }

  /* Badge/angka selisih */
  #opnameItemRows .opname-difference {
    min-width: 46px;
    max-width: 100%;

    box-sizing: border-box;
  }

}

/* === END OPTIKPRO STOCK OPNAME MODAL MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO EMPLOYEE MOBILE CARD V1
   Data Karyawan -> card mobile
   Desktop tidak diubah
   ============================================================ */

@media (max-width: 768px){

  /* ---------- PANEL DATA KARYAWAN ---------- */

  #page-employees #sdmEmployeePanel{
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmEmployeePanel .panel{
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }

  /* Search + filter */

  #page-employees #sdmEmployeePanel .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    min-width:0;
  }

  #page-employees #employeeSearch,
  #page-employees #employeeStatusFilter{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* ---------- TABLE -> CARD ---------- */

  #page-employees #sdmEmployeePanel .table-wrap{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:visible;
  }

  #page-employees #sdmEmployeePanel table{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmEmployeePanel table thead{
    display:none;
  }

  #page-employees #employeeRows{
    display:block;
    width:100%;
  }

  #page-employees #employeeRows tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px 16px;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 0 16px 0;
    padding:20px;

    border:1px solid #e2e6ea;
    border-radius:18px;
    background:#fff;

    box-sizing:border-box;
  }

  #page-employees #employeeRows td{
    display:block;
    width:auto;
    min-width:0;
    max-width:100%;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;

    box-sizing:border-box;
  }

  /* label umum */

  #page-employees #employeeRows td::before{
    display:block;
    margin-bottom:6px;

    font-size:12px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;

    color:#7b8798;
  }

  /* 1 No Karyawan */
  #page-employees #employeeRows td:nth-child(1)::before{
    content:"No. Karyawan";
  }

  /* 2 Nama + telepon */
  #page-employees #employeeRows td:nth-child(2)::before{
    content:"Nama";
  }

  /* 3 Jabatan */
  #page-employees #employeeRows td:nth-child(3)::before{
    content:"Jabatan";
  }

  /* 4 Cabang */
  #page-employees #employeeRows td:nth-child(4)::before{
    content:"Cabang";
  }

  /* 5 Status Kerja */
  #page-employees #employeeRows td:nth-child(5)::before{
    content:"Status Kerja";
  }

  /* 6 Gaji */
  #page-employees #employeeRows td:nth-child(6)::before{
    content:"Gaji Pokok";
  }

  /* 7 Tunjangan */
  #page-employees #employeeRows td:nth-child(7)::before{
    content:"Tunjangan Tetap";
  }

  /* 8 Status aktif */
  #page-employees #employeeRows td:nth-child(8)::before{
    content:"Status";
  }

  /* 9 Aksi */
  #page-employees #employeeRows td:nth-child(9)::before{
    content:"Aksi";
  }

  /* Nomor + Nama dibuat full width */

  #page-employees #employeeRows td:nth-child(1),
  #page-employees #employeeRows td:nth-child(2){
    grid-column:1 / -1;
  }

  /* Beri pemisah setelah identitas */

  #page-employees #employeeRows td:nth-child(2){
    padding-bottom:16px;
    border-bottom:1px solid #e5e7eb;
  }

  /* Status kerja */

  #page-employees #employeeRows td:nth-child(5) .badge,
  #page-employees #employeeRows td:nth-child(8) .badge{
    display:inline-flex;
    width:auto;
    max-width:100%;
  }

  /* Aksi full width */

  #page-employees #employeeRows td:nth-child(9){
    grid-column:1 / -1;

    padding-top:16px;
    border-top:1px solid #e5e7eb;
  }

  #page-employees #employeeRows td:nth-child(9) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #page-employees #employeeRows td:nth-child(9) button{
    width:auto;
    max-width:100%;
  }

  /* ---------- EMPTY STATE ---------- */

  #page-employees #employeeRows tr:has(td[colspan]){
    display:block;
  }

  #page-employees #employeeRows td[colspan]{
    display:block;
    width:100%;
    text-align:center;
    padding:18px;
  }

  #page-employees #employeeRows td[colspan]::before{
    content:none;
    display:none;
  }

}

/* === END OPTIKPRO EMPLOYEE MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO EMPLOYEE MOBILE CARD V1
   Data Karyawan -> card mobile
   Desktop tidak diubah
   ============================================================ */

@media (max-width: 768px){

  /* ---------- PANEL DATA KARYAWAN ---------- */

  #page-employees #sdmEmployeePanel{
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmEmployeePanel .panel{
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }

  /* Search + filter */

  #page-employees #sdmEmployeePanel .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    min-width:0;
  }

  #page-employees #employeeSearch,
  #page-employees #employeeStatusFilter{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* ---------- TABLE -> CARD ---------- */

  #page-employees #sdmEmployeePanel .table-wrap{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:visible;
  }

  #page-employees #sdmEmployeePanel table{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmEmployeePanel table thead{
    display:none;
  }

  #page-employees #employeeRows{
    display:block;
    width:100%;
  }

  #page-employees #employeeRows tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px 16px;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 0 16px 0;
    padding:20px;

    border:1px solid #e2e6ea;
    border-radius:18px;
    background:#fff;

    box-sizing:border-box;
  }

  #page-employees #employeeRows td{
    display:block;
    width:auto;
    min-width:0;
    max-width:100%;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;

    box-sizing:border-box;
  }

  /* label umum */

  #page-employees #employeeRows td::before{
    display:block;
    margin-bottom:6px;

    font-size:12px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;

    color:#7b8798;
  }

  /* 1 No Karyawan */
  #page-employees #employeeRows td:nth-child(1)::before{
    content:"No. Karyawan";
  }

  /* 2 Nama + telepon */
  #page-employees #employeeRows td:nth-child(2)::before{
    content:"Nama";
  }

  /* 3 Jabatan */
  #page-employees #employeeRows td:nth-child(3)::before{
    content:"Jabatan";
  }

  /* 4 Cabang */
  #page-employees #employeeRows td:nth-child(4)::before{
    content:"Cabang";
  }

  /* 5 Status Kerja */
  #page-employees #employeeRows td:nth-child(5)::before{
    content:"Status Kerja";
  }

  /* 6 Gaji */
  #page-employees #employeeRows td:nth-child(6)::before{
    content:"Gaji Pokok";
  }

  /* 7 Tunjangan */
  #page-employees #employeeRows td:nth-child(7)::before{
    content:"Tunjangan Tetap";
  }

  /* 8 Status aktif */
  #page-employees #employeeRows td:nth-child(8)::before{
    content:"Status";
  }

  /* 9 Aksi */
  #page-employees #employeeRows td:nth-child(9)::before{
    content:"Aksi";
  }

  /* Nomor + Nama dibuat full width */

  #page-employees #employeeRows td:nth-child(1),
  #page-employees #employeeRows td:nth-child(2){
    grid-column:1 / -1;
  }

  /* Beri pemisah setelah identitas */

  #page-employees #employeeRows td:nth-child(2){
    padding-bottom:16px;
    border-bottom:1px solid #e5e7eb;
  }

  /* Status kerja */

  #page-employees #employeeRows td:nth-child(5) .badge,
  #page-employees #employeeRows td:nth-child(8) .badge{
    display:inline-flex;
    width:auto;
    max-width:100%;
  }

  /* Aksi full width */

  #page-employees #employeeRows td:nth-child(9){
    grid-column:1 / -1;

    padding-top:16px;
    border-top:1px solid #e5e7eb;
  }

  #page-employees #employeeRows td:nth-child(9) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #page-employees #employeeRows td:nth-child(9) button{
    width:auto;
    max-width:100%;
  }

  /* ---------- EMPTY STATE ---------- */

  #page-employees #employeeRows tr:has(td[colspan]){
    display:block;
  }

  #page-employees #employeeRows td[colspan]{
    display:block;
    width:100%;
    text-align:center;
    padding:18px;
  }

  #page-employees #employeeRows td[colspan]::before{
    content:none;
    display:none;
  }

}

/* === END OPTIKPRO EMPLOYEE MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO PAYROLL MOBILE CARD V1
   Penggajian -> card mobile
   Desktop tidak diubah
   ============================================================ */

@media (max-width: 768px){

  /* ---------- PANEL ---------- */

  #page-employees #sdmPayrollPanel{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmPayrollPanel .panel{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }


  /* ---------- TOOLBAR ---------- */

  #page-employees #sdmPayrollPanel .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;

    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #payrollPeriod,
  #page-employees #refreshPayroll,
  #page-employees #generatePayroll{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }


  /* ---------- TABLE WRAPPER ---------- */

  #page-employees #sdmPayrollPanel .table-wrap{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:visible;
  }


  /* ---------- TABLE -> CARD ---------- */

  #page-employees #sdmPayrollPanel table{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmPayrollPanel table thead{
    display:none;
  }

  #page-employees #payrollRows{
    display:block;
    width:100%;
    min-width:0;
  }


  /* ---------- SATU PAYROLL = SATU CARD ---------- */

  #page-employees #payrollRows tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:18px 14px;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 0 16px 0;
    padding:18px;

    border:1px solid #e5e7eb;
    border-radius:16px;

    box-sizing:border-box;
  }


  /* ---------- CELL ---------- */

  #page-employees #payrollRows td{
    display:block;

    width:auto;
    min-width:0;
    max-width:100%;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;

    box-sizing:border-box;
  }


  /* ---------- LABEL ---------- */

  #page-employees #payrollRows td::before{
    display:block;

    margin-bottom:6px;

    font-size:11px;
    line-height:1.25;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:#7b8798;
  }


  /* 1 Karyawan */

  #page-employees #payrollRows td:nth-child(1)::before{
    content:"Karyawan";
  }


  /* 2 Jabatan */

  #page-employees #payrollRows td:nth-child(2)::before{
    content:"Jabatan";
  }


  /* 3 Gaji Pokok */

  #page-employees #payrollRows td:nth-child(3)::before{
    content:"Gaji Pokok";
  }


  /* 4 Tunjangan */

  #page-employees #payrollRows td:nth-child(4)::before{
    content:"Tunjangan";
  }


  /* 5 Tambahan */

  #page-employees #payrollRows td:nth-child(5)::before{
    content:"Tambahan";
  }


  /* 6 Potongan */

  #page-employees #payrollRows td:nth-child(6)::before{
    content:"Potongan";
  }


  /* 7 Gaji Bersih */

  #page-employees #payrollRows td:nth-child(7)::before{
    content:"Gaji Bersih";
  }


  /* 8 Status */

  #page-employees #payrollRows td:nth-child(8)::before{
    content:"Status";
  }


  /* 9 Pembayaran */

  #page-employees #payrollRows td:nth-child(9)::before{
    content:"Pembayaran";
  }


  /* 10 Aksi */

  #page-employees #payrollRows td:nth-child(10)::before{
    content:"Aksi";
  }


  /* ---------- IDENTITAS ---------- */

  #page-employees #payrollRows td:nth-child(1),
  #page-employees #payrollRows td:nth-child(2){
    grid-column:1 / -1;
  }

  #page-employees #payrollRows td:nth-child(2){
    padding-bottom:14px;
    border-bottom:1px solid #e5e7eb;
  }


  /* ---------- GAJI BERSIH ---------- */

  #page-employees #payrollRows td:nth-child(7){
    grid-column:1 / -1;

    padding:14px;

    border-radius:12px;
    background:rgba(0,0,0,.035);
  }

  #page-employees #payrollRows td:nth-child(7) strong{
    font-size:17px;
  }


  /* ---------- STATUS & PEMBAYARAN ---------- */

  #page-employees #payrollRows td:nth-child(8),
  #page-employees #payrollRows td:nth-child(9){
    min-width:0;
  }


  /* ---------- AKSI ---------- */

  #page-employees #payrollRows td:nth-child(10){
    grid-column:1 / -1;

    padding-top:14px;
    border-top:1px solid #e5e7eb;
  }

  #page-employees #payrollRows td:nth-child(10) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #page-employees #payrollRows td:nth-child(10) button{
    flex:1 1 120px;
    min-width:0;
    max-width:100%;
  }


  /* ---------- EMPTY / LOADING STATE ---------- */

  #page-employees #payrollRows tr:has(td[colspan]){
    display:block;
  }

  #page-employees #payrollRows td[colspan]{
    display:block;
    width:100%;

    padding:18px;

    text-align:center;
  }

  #page-employees #payrollRows td[colspan]::before{
    content:none;
    display:none;
  }

}

/* === END OPTIKPRO PAYROLL MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO ATTENDANCE MOBILE CARD V1
   Scope: Karyawan & SDM -> Absensi
   Desktop tetap tabel
   ============================================================ */

@media (max-width:768px){

  /* ==============================
     PANEL
     ============================== */

  #page-employees #sdmAttendancePanel{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmAttendancePanel .panel{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }


  /* ==============================
     FILTER / TOOLBAR
     ============================== */

  #page-employees #sdmAttendancePanel .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;

    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #attendanceDate,
  #page-employees #attendanceStatusFilter,
  #page-employees #attendanceSearch,
  #page-employees #refreshAttendance{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;

    box-sizing:border-box;
  }


  /* ==============================
     TABLE WRAPPER
     ============================== */

  #page-employees #sdmAttendancePanel .table-wrap{
    width:100%;
    min-width:0;
    max-width:100%;

    overflow:visible;
  }


  /* ==============================
     TABLE -> CARD
     ============================== */

  #page-employees #sdmAttendancePanel table{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-employees #sdmAttendancePanel table thead{
    display:none;
  }

  #page-employees #attendanceRows{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;
  }


  /* ==============================
     SATU ABSENSI = SATU CARD
     ============================== */

  #page-employees #attendanceRows tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:16px 14px;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 0 16px 0;
    padding:18px;

    border:1px solid #e5e7eb;
    border-radius:16px;

    box-sizing:border-box;
  }


  /* ==============================
     SEMUA CELL
     ============================== */

  #page-employees #attendanceRows td{
    display:block;

    width:auto;
    min-width:0;
    max-width:100%;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;

    box-sizing:border-box;
  }


  /* ==============================
     LABEL CELL
     ============================== */

  #page-employees #attendanceRows td::before{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    line-height:1.25;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:#7b8798;
  }


  /* 1 */
  #page-employees #attendanceRows td:nth-child(1)::before{
    content:"Tanggal";
  }

  /* 2 */
  #page-employees #attendanceRows td:nth-child(2)::before{
    content:"No. Karyawan";
  }

  /* 3 */
  #page-employees #attendanceRows td:nth-child(3)::before{
    content:"Nama";
  }

  /* 4 */
  #page-employees #attendanceRows td:nth-child(4)::before{
    content:"Jabatan";
  }

  /* 5 */
  #page-employees #attendanceRows td:nth-child(5)::before{
    content:"Status";
  }

  /* 6 */
  #page-employees #attendanceRows td:nth-child(6)::before{
    content:"Jam Masuk";
  }

  /* 7 */
  #page-employees #attendanceRows td:nth-child(7)::before{
    content:"Jam Pulang";
  }

  /* 8 */
  #page-employees #attendanceRows td:nth-child(8)::before{
    content:"Terlambat";
  }

  /* 9 */
  #page-employees #attendanceRows td:nth-child(9)::before{
    content:"Lembur";
  }

  /* 10 */
  #page-employees #attendanceRows td:nth-child(10)::before{
    content:"Catatan";
  }

  /* 11 */
  #page-employees #attendanceRows td:nth-child(11)::before{
    content:"Aksi";
  }


  /* ==============================
     IDENTITAS UTAMA
     ============================== */

  #page-employees #attendanceRows td:nth-child(1){
    grid-column:1 / -1;
  }

  #page-employees #attendanceRows td:nth-child(3){
    grid-column:1 / -1;

    font-weight:700;
    font-size:16px;
  }

  #page-employees #attendanceRows td:nth-child(4){
    grid-column:1 / -1;

    padding-bottom:14px;
    border-bottom:1px solid #e5e7eb;
  }


  /* ==============================
     STATUS
     ============================== */

  #page-employees #attendanceRows td:nth-child(5){
    grid-column:1 / -1;
  }


  /* ==============================
     CATATAN
     ============================== */

  #page-employees #attendanceRows td:nth-child(10){
    grid-column:1 / -1;

    padding-top:12px;
    border-top:1px solid #e5e7eb;
  }


  /* ==============================
     AKSI
     ============================== */

  #page-employees #attendanceRows td:nth-child(11){
    grid-column:1 / -1;

    padding-top:12px;
    border-top:1px solid #e5e7eb;
  }

  #page-employees #attendanceRows td:nth-child(11) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #page-employees #attendanceRows td:nth-child(11) button{
    flex:1 1 120px;

    min-width:0;
    max-width:100%;
  }


  /* ==============================
     EMPTY STATE
     ============================== */

  #page-employees #attendanceRows tr:has(td[colspan]){
    display:block;
  }

  #page-employees #attendanceRows td[colspan]{
    display:block;

    width:100%;

    padding:18px;

    text-align:center;
  }

  #page-employees #attendanceRows td[colspan]::before{
    content:none;
    display:none;
  }

}

/* === END OPTIKPRO ATTENDANCE MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO TARGET BONUS MOBILE CARD V1
   Scope: Target & Bonus -> Ringkasan Bulanan
   Desktop tetap tabel
   ============================================================ */

@media (max-width:768px){

  /* ==============================
     HALAMAN
     ============================== */

  #page-targetbonus{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-targetbonus .panel{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }


  /* ==============================
     TOOLBAR PERIODE
     ============================== */

  #page-targetbonus .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;

    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-targetbonus #targetBonusPeriod,
  #page-targetbonus #targetBonusRefresh{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;

    box-sizing:border-box;
  }

  #page-targetbonus #targetBonusInfo{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;

    white-space:normal;
    overflow-wrap:anywhere;
  }


  /* ==============================
     TABLE WRAPPER
     ============================== */

  #page-targetbonus .table-wrap{
    width:100%;
    min-width:0;
    max-width:100%;

    overflow:visible;
  }


  /* ==============================
     TABLE -> CARD
     ============================== */

  #page-targetbonus table{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;
  }

  #page-targetbonus table thead{
    display:none;
  }

  #page-targetbonus #targetBonusRows{
    display:block;

    width:100%;
    min-width:0;
    max-width:100%;
  }


  /* ==============================
     SATU KARYAWAN = SATU CARD
     ============================== */

  #page-targetbonus #targetBonusRows tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:16px 14px;

    width:100%;
    min-width:0;
    max-width:100%;

    margin:0 0 16px 0;
    padding:18px;

    border:1px solid #e5e7eb;
    border-radius:16px;

    box-sizing:border-box;
  }


  /* ==============================
     CELL DASAR
     ============================== */

  #page-targetbonus #targetBonusRows td{
    display:block;

    width:auto;
    min-width:0;
    max-width:100%;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;

    box-sizing:border-box;
  }


  /* ==============================
     LABEL
     ============================== */

  #page-targetbonus #targetBonusRows td::before{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    line-height:1.25;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:#7b8798;
  }


  #page-targetbonus #targetBonusRows td:nth-child(1)::before{
    content:"Karyawan";
  }

  #page-targetbonus #targetBonusRows td:nth-child(2)::before{
    content:"Jabatan";
  }

  #page-targetbonus #targetBonusRows td:nth-child(3)::before{
    content:"Target Bulanan";
  }

  #page-targetbonus #targetBonusRows td:nth-child(4)::before{
    content:"Realisasi Bersih";
  }

  #page-targetbonus #targetBonusRows td:nth-child(5)::before{
    content:"Capaian";
  }

  #page-targetbonus #targetBonusRows td:nth-child(6)::before{
    content:"Sisa Target";
  }

  #page-targetbonus #targetBonusRows td:nth-child(7)::before{
    content:"Bonus Target";
  }

  #page-targetbonus #targetBonusRows td:nth-child(8)::before{
    content:"Bonus Pengerjaan";
  }

  #page-targetbonus #targetBonusRows td:nth-child(9)::before{
    content:"Total Bonus";
  }

  #page-targetbonus #targetBonusRows td:nth-child(10)::before{
    content:"Pembayaran";
  }


  /* ==============================
     IDENTITAS KARYAWAN
     ============================== */

  #page-targetbonus #targetBonusRows td:nth-child(1){
    grid-column:1 / -1;

    font-size:16px;
    font-weight:700;
  }

  #page-targetbonus #targetBonusRows td:nth-child(2){
    grid-column:1 / -1;

    padding-bottom:14px;
    border-bottom:1px solid #e5e7eb;
  }


  /* ==============================
     TARGET / REALISASI
     ============================== */

  #page-targetbonus #targetBonusRows td:nth-child(3),
  #page-targetbonus #targetBonusRows td:nth-child(4),
  #page-targetbonus #targetBonusRows td:nth-child(6),
  #page-targetbonus #targetBonusRows td:nth-child(7),
  #page-targetbonus #targetBonusRows td:nth-child(8){
    font-variant-numeric:tabular-nums;
  }


  /* ==============================
     CAPAIAN
     ============================== */

  #page-targetbonus #targetBonusRows td:nth-child(5){
    font-weight:700;
  }


  /* ==============================
     TOTAL BONUS
     ============================== */

  #page-targetbonus #targetBonusRows td:nth-child(9){
    grid-column:1 / -1;

    padding:14px;

    border-radius:12px;

    background:rgba(15,118,110,.06);

    font-size:16px;
    font-weight:700;
  }


  /* ==============================
     PEMBAYARAN
     ============================== */

  #page-targetbonus #targetBonusRows td:nth-child(10){
    grid-column:1 / -1;

    padding-top:14px;
    border-top:1px solid #e5e7eb;
  }

  #page-targetbonus #targetBonusRows td:nth-child(10) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #page-targetbonus #targetBonusRows td:nth-child(10) button{
    width:100%;
    min-width:0;
    max-width:100%;

    box-sizing:border-box;
  }


  /* ==============================
     EMPTY / LOADING STATE
     ============================== */

  #page-targetbonus #targetBonusRows tr:has(td[colspan]){
    display:block;
  }

  #page-targetbonus #targetBonusRows td[colspan]{
    display:block;

    width:100%;

    padding:18px;

    text-align:center;
  }

  #page-targetbonus #targetBonusRows td[colspan]::before{
    content:none;
    display:none;
  }

}

/* === END OPTIKPRO TARGET BONUS MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO EXPENSES MOBILE CARD V1
   Scope  : #page-expenses
   Mobile : <= 768px
   Desktop tetap tabel normal
   ============================================================ */

@media (max-width: 768px){

  /* ----------------------------------------------------------
     PAGE
     ---------------------------------------------------------- */

  #page-expenses{
    min-width:0;
    overflow-x:hidden;
  }

  #page-expenses .section-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  #page-expenses .section-head > div{
    min-width:0;
  }

  #page-expenses #addExpense{
    width:100%;
    min-height:44px;
  }


  /* ----------------------------------------------------------
     PANEL / TABLE WRAPPER
     ---------------------------------------------------------- */

  #page-expenses .panel{
    min-width:0;
    overflow:visible;
    padding:10px;
  }

  #page-expenses .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
  }

  #page-expenses .table-wrap > table{
    display:block;
    width:100%;
    min-width:0 !important;
    max-width:100%;
    border-collapse:separate;
  }


  /* ----------------------------------------------------------
     HIDE DESKTOP HEADER
     ---------------------------------------------------------- */

  #page-expenses table > thead{
    display:none;
  }


  /* ----------------------------------------------------------
     TBODY
     ---------------------------------------------------------- */

  #page-expenses #expenseRows{
    display:block;
    width:100%;
    min-width:0;
  }


  /* ----------------------------------------------------------
     EACH EXPENSE = CARD
     ---------------------------------------------------------- */

  #page-expenses #expenseRows > tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    width:100%;
    min-width:0;
    margin:0 0 12px 0;
    padding:12px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:12px;
    background:#fff;
    box-sizing:border-box;
  }


  /* ----------------------------------------------------------
     CELL BASE
     ---------------------------------------------------------- */

  #page-expenses #expenseRows > tr > td{
    display:block;
    min-width:0;
    width:auto;
    padding:8px 6px;
    border:0;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    box-sizing:border-box;
  }

  #page-expenses #expenseRows > tr > td::before{
    display:block;
    margin-bottom:3px;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    opacity:.62;
  }


  /* ----------------------------------------------------------
     LABEL SESUAI 9 KOLOM ASLI
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(1)::before{
    content:"Tanggal";
  }

  #page-expenses #expenseRows td:nth-child(2)::before{
    content:"Jenis";
  }

  #page-expenses #expenseRows td:nth-child(3)::before{
    content:"Kategori";
  }

  #page-expenses #expenseRows td:nth-child(4)::before{
    content:"Keterangan";
  }

  #page-expenses #expenseRows td:nth-child(5)::before{
    content:"Nominal";
  }

  #page-expenses #expenseRows td:nth-child(6)::before{
    content:"Metode Pembayaran";
  }

  #page-expenses #expenseRows td:nth-child(7)::before{
    content:"Status";
  }

  #page-expenses #expenseRows td:nth-child(8)::before{
    content:"Pencatat";
  }

  #page-expenses #expenseRows td:nth-child(9)::before{
    content:"Aksi";
  }


  /* ----------------------------------------------------------
     FIELD PENTING FULL WIDTH
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(3),
  #page-expenses #expenseRows td:nth-child(4),
  #page-expenses #expenseRows td:nth-child(9){
    grid-column:1 / -1;
  }


  /* ----------------------------------------------------------
     KATEGORI
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(3){
    font-weight:600;
    padding-top:9px;
  }


  /* ----------------------------------------------------------
     KETERANGAN
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(4){
    padding-top:9px;
    padding-bottom:10px;
  }


  /* ----------------------------------------------------------
     NOMINAL LEBIH MENONJOL
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(5){
    font-weight:700;
    font-size:15px;
  }


  /* ----------------------------------------------------------
     BADGE STATUS
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(7) .badge{
    display:inline-flex;
    max-width:100%;
    white-space:normal;
  }


  /* ----------------------------------------------------------
     ACTION
     ---------------------------------------------------------- */

  #page-expenses #expenseRows td:nth-child(9){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    padding-top:10px;
    margin-top:4px;
    border-top:1px solid rgba(0,0,0,.08);
  }

  #page-expenses #expenseRows td:nth-child(9)::before{
    flex:0 0 100%;
    width:100%;
    margin-bottom:2px;
  }

  #page-expenses #expenseRows td:nth-child(9) button{
    flex:1 1 90px;
    min-width:0;
    min-height:40px;
    margin:0 !important;
    white-space:normal;
  }


  /* ----------------------------------------------------------
     SAFETY
     ---------------------------------------------------------- */

  #page-expenses button,
  #page-expenses input,
  #page-expenses select,
  #page-expenses textarea{
    max-width:100%;
    box-sizing:border-box;
  }

}

/* === END OPTIKPRO EXPENSES MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO FINANCIAL REPORT MOBILE CARD V1
   Scope: #page-financialreports
   Mobile <= 768px
   Desktop tidak diubah
   ============================================================ */

@media (max-width:768px){

  /* ==========================================================
     PAGE / TOOLBAR
     ========================================================== */

  #page-financialreports{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #page-financialreports > .toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #page-financialreports > .toolbar select,
  #page-financialreports > .toolbar input,
  #page-financialreports > .toolbar button{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }


  /* ==========================================================
     SUMMARY CARDS
     ========================================================== */

  #page-financialreports .report-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #page-financialreports .report-card{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #page-financialreports .report-card strong{
    overflow-wrap:anywhere;
    word-break:break-word;
  }


  /* ==========================================================
     PANEL / TABLE WRAPPER
     Override overflow-x:auto CSS lama
     ========================================================== */

  #page-financialreports .panel{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #page-financialreports .table-wrap{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    overflow:visible !important;
  }

  #page-financialreports .table-wrap > table{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    table-layout:auto !important;
  }

  #page-financialreports .table-wrap > table > thead{
    display:none !important;
  }


  /* ==========================================================
     SEMUA TBODY
     ========================================================== */

  #page-financialreports #financialSalesRows,
  #page-financialreports #financialProductRows,
  #page-financialreports #financialExpenseRows{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }


  /* ==========================================================
     SEMUA ROW -> CARD
     ========================================================== */

  #page-financialreports #financialSalesRows > tr,
  #page-financialreports #financialProductRows > tr,
  #page-financialreports #financialExpenseRows > tr{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:14px 12px !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 0 14px 0 !important;
    padding:14px !important;

    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:14px !important;

    background:#fff;

    box-sizing:border-box !important;
  }


  /* ==========================================================
     CELL DASAR
     ========================================================== */

  #page-financialreports #financialSalesRows td,
  #page-financialreports #financialProductRows td,
  #page-financialreports #financialExpenseRows td{
    display:block !important;

    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    padding:0 !important;
    border:0 !important;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;

    box-sizing:border-box !important;
  }

  #page-financialreports #financialSalesRows td::before,
  #page-financialreports #financialProductRows td::before,
  #page-financialreports #financialExpenseRows td::before{
    display:block;

    margin-bottom:4px;

    font-size:11px;
    line-height:1.2;
    font-weight:700;

    letter-spacing:.03em;
    text-transform:uppercase;

    opacity:.60;
  }


  /* ==========================================================
     1. RINCIAN PENJUALAN / PEMASUKAN
     12 KOLOM
     ========================================================== */

  #page-financialreports #financialSalesRows td:nth-child(1)::before{
    content:"Tanggal";
  }

  #page-financialreports #financialSalesRows td:nth-child(2)::before{
    content:"Invoice";
  }

  #page-financialreports #financialSalesRows td:nth-child(3)::before{
    content:"Pasien";
  }

  #page-financialreports #financialSalesRows td:nth-child(4)::before{
    content:"Sales";
  }

  #page-financialreports #financialSalesRows td:nth-child(5)::before{
    content:"Cabang";
  }

  #page-financialreports #financialSalesRows td:nth-child(6)::before{
    content:"Qty";
  }

  #page-financialreports #financialSalesRows td:nth-child(7)::before{
    content:"Subtotal";
  }

  #page-financialreports #financialSalesRows td:nth-child(8)::before{
    content:"Diskon";
  }

  #page-financialreports #financialSalesRows td:nth-child(9)::before{
    content:"Total";
  }

  #page-financialreports #financialSalesRows td:nth-child(10)::before{
    content:"Dibayar";
  }

  #page-financialreports #financialSalesRows td:nth-child(11)::before{
    content:"Metode";
  }

  #page-financialreports #financialSalesRows td:nth-child(12)::before{
    content:"Status";
  }


  /* Invoice */
  #page-financialreports #financialSalesRows td:nth-child(2){
    font-weight:700;
  }

  /* Pasien + Sales full width */
  #page-financialreports #financialSalesRows td:nth-child(3),
  #page-financialreports #financialSalesRows td:nth-child(4){
    grid-column:1 / -1;
  }

  /* Total */
  #page-financialreports #financialSalesRows td:nth-child(9){
    font-weight:700;
  }

  /* Status full width */
  #page-financialreports #financialSalesRows td:nth-child(12){
    grid-column:1 / -1;

    padding-top:10px !important;
    border-top:1px solid rgba(0,0,0,.08) !important;
  }


  /* ==========================================================
     2. RESUME PRODUK TERJUAL
     11 KOLOM
     ========================================================== */

  #page-financialreports #financialProductRows td:nth-child(1)::before{
    content:"Kode";
  }

  #page-financialreports #financialProductRows td:nth-child(2)::before{
    content:"Produk";
  }

  #page-financialreports #financialProductRows td:nth-child(3)::before{
    content:"Kategori";
  }

  #page-financialreports #financialProductRows td:nth-child(4)::before{
    content:"Brand";
  }

  #page-financialreports #financialProductRows td:nth-child(5)::before{
    content:"Qty";
  }

  #page-financialreports #financialProductRows td:nth-child(6)::before{
    content:"Unit";
  }

  #page-financialreports #financialProductRows td:nth-child(7)::before{
    content:"Penjualan Bruto";
  }

  #page-financialreports #financialProductRows td:nth-child(8)::before{
    content:"Diskon Item";
  }

  #page-financialreports #financialProductRows td:nth-child(9)::before{
    content:"Penjualan";
  }

  #page-financialreports #financialProductRows td:nth-child(10)::before{
    content:"HPP";
  }

  #page-financialreports #financialProductRows td:nth-child(11)::before{
    content:"Laba Kotor";
  }


  /* Produk full width */
  #page-financialreports #financialProductRows td:nth-child(2){
    grid-column:1 / -1;

    font-size:15px;
    font-weight:700;
  }

  /* Kategori full width */
  #page-financialreports #financialProductRows td:nth-child(3){
    grid-column:1 / -1;
  }

  /* Laba Kotor */
  #page-financialreports #financialProductRows td:nth-child(11){
    grid-column:1 / -1;

    padding:12px !important;

    border-radius:10px !important;

    background:rgba(15,118,110,.06);

    font-size:15px;
    font-weight:700;
  }


  /* ==========================================================
     3. RINCIAN PENGELUARAN
     7 KOLOM
     ========================================================== */

  #page-financialreports #financialExpenseRows td:nth-child(1)::before{
    content:"Tanggal";
  }

  #page-financialreports #financialExpenseRows td:nth-child(2)::before{
    content:"Kategori";
  }

  #page-financialreports #financialExpenseRows td:nth-child(3)::before{
    content:"Jenis";
  }

  #page-financialreports #financialExpenseRows td:nth-child(4)::before{
    content:"Keterangan";
  }

  #page-financialreports #financialExpenseRows td:nth-child(5)::before{
    content:"Cabang";
  }

  #page-financialreports #financialExpenseRows td:nth-child(6)::before{
    content:"Metode";
  }

  #page-financialreports #financialExpenseRows td:nth-child(7)::before{
    content:"Jumlah";
  }


  /* Keterangan full width */
  #page-financialreports #financialExpenseRows td:nth-child(4){
    grid-column:1 / -1;
  }

  /* Jumlah full width */
  #page-financialreports #financialExpenseRows td:nth-child(7){
    grid-column:1 / -1;

    padding:12px !important;

    border-radius:10px !important;

    background:rgba(15,118,110,.06);

    font-size:15px;
    font-weight:700;
  }


  /* ==========================================================
     EMPTY STATE
     ========================================================== */

  #page-financialreports #financialSalesRows tr:has(td[colspan]),
  #page-financialreports #financialProductRows tr:has(td[colspan]),
  #page-financialreports #financialExpenseRows tr:has(td[colspan]){
    display:block !important;
  }

  #page-financialreports td[colspan]{
    display:block !important;

    width:100% !important;

    padding:18px !important;

    text-align:center !important;
  }

  #page-financialreports td[colspan]::before{
    content:none !important;
    display:none !important;
  }

}

/* === END OPTIKPRO FINANCIAL REPORT MOBILE CARD V1 === */


/* ==========================================================
   OPTIKPRO BRANCHES MOBILE CARD V1
   Mobile only - desktop tetap tabel
   ========================================================== */

@media (max-width: 768px){

  /* --------------------------------------------------------
     PAGE / PANEL
     -------------------------------------------------------- */

  #page-branches{
    min-width: 0;
    max-width: 100%;
  }

  #page-branches .section-head{
    min-width: 0;
    max-width: 100%;
    gap: 14px;
    align-items: flex-start;
  }

  #page-branches .section-head > div{
    min-width: 0;
  }

  #page-branches #addBranch{
    flex: 0 0 auto;
  }

  #page-branches .panel{
    min-width: 0;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }


  /* --------------------------------------------------------
     HILANGKAN PERILAKU TABLE DESKTOP
     -------------------------------------------------------- */

  #page-branches .table-wrap{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  #page-branches .table-wrap > table{
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border: 0;
    background: transparent;
  }

  #page-branches .table-wrap > table > thead{
    display: none;
  }

  #page-branches #branchRows{
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }


  /* --------------------------------------------------------
     SATU CABANG = SATU CARD
     -------------------------------------------------------- */

  #page-branches #branchRows tr{
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0 0 16px;
    padding: 18px;

    gap: 16px 18px;

    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 18px;

    box-sizing: border-box;
    overflow: hidden;
  }

  #page-branches #branchRows td{
    display: block;

    width: auto;
    min-width: 0;
    max-width: 100%;

    padding: 0;
    border: 0;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    text-align: left;
    vertical-align: top;
  }


  /* --------------------------------------------------------
     LABEL
     -------------------------------------------------------- */

  #page-branches #branchRows td::before{
    display: block;
    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;

    color: #7b8491;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  #page-branches #branchRows td:nth-child(1)::before{
    content: "Kode";
  }

  #page-branches #branchRows td:nth-child(2)::before{
    content: "Nama";
  }

  #page-branches #branchRows td:nth-child(3)::before{
    content: "Telepon";
  }

  #page-branches #branchRows td:nth-child(4)::before{
    content: "Alamat";
  }

  #page-branches #branchRows td:nth-child(5)::before{
    content: "Status";
  }

  #page-branches #branchRows td:nth-child(6)::before{
    content: "Aksi";
  }


  /* --------------------------------------------------------
     KODE + NAMA
     -------------------------------------------------------- */

  #page-branches #branchRows td:nth-child(1){
    grid-column: 1;
  }

  #page-branches #branchRows td:nth-child(2){
    grid-column: 2;
  }

  #page-branches #branchRows td:nth-child(1) strong{
    font-weight: 800;
  }


  /* --------------------------------------------------------
     TELEPON FULL WIDTH
     -------------------------------------------------------- */

  #page-branches #branchRows td:nth-child(3){
    grid-column: 1 / -1;
  }


  /* --------------------------------------------------------
     ALAMAT FULL WIDTH
     Penting agar alamat panjang tidak terpotong
     -------------------------------------------------------- */

  #page-branches #branchRows td:nth-child(4){
    grid-column: 1 / -1;

    padding-top: 14px;
    border-top: 1px solid #e6e9ed;

    line-height: 1.5;
    overflow-wrap: anywhere;
  }


  /* --------------------------------------------------------
     STATUS FULL WIDTH
     -------------------------------------------------------- */

  #page-branches #branchRows td:nth-child(5){
    grid-column: 1 / -1;

    padding-top: 14px;
    border-top: 1px solid #e6e9ed;
  }

  #page-branches #branchRows td:nth-child(5) .badge{
    display: inline-flex;
    max-width: 100%;
  }

  #page-branches #branchRows td:nth-child(5) small{
    display: block;
    margin-top: 8px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }


  /* --------------------------------------------------------
     AKSI FULL WIDTH
     -------------------------------------------------------- */

  #page-branches #branchRows td:nth-child(6){
    grid-column: 1 / -1;

    padding-top: 14px;
    border-top: 1px solid #e6e9ed;
  }

  #page-branches #branchRows td:nth-child(6) > div{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    width: 100%;
    min-width: 0;
  }

  #page-branches #branchRows td:nth-child(6) button{
    flex: 1 1 130px;
    min-width: 0;
    min-height: 42px;

    white-space: normal;
  }


  /* --------------------------------------------------------
     EMPTY STATE
     -------------------------------------------------------- */

  #page-branches #branchRows tr:has(td[colspan]){
    display: block;

    padding: 22px 16px;

    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 18px;
  }

  #page-branches #branchRows tr:has(td[colspan]) td{
    display: block;
    width: 100%;
    text-align: center;
  }

  #page-branches #branchRows tr:has(td[colspan]) td::before{
    display: none;
    content: none;
  }

}

/* === END OPTIKPRO BRANCHES MOBILE CARD V1 === */


/* ==========================================================
   OPTIKPRO AUDIT TRAIL MOBILE CARD V1
   Mobile only - desktop tetap tabel
   ========================================================== */

@media (max-width: 768px){

  /* PAGE */
  #page-audit{
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  #page-audit .panel{
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }


  /* MATIKAN PERILAKU TABLE DESKTOP DI HP */
  #page-audit .table-wrap{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
  }

  #page-audit .table-wrap > table{
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border: 0;
    background: transparent;
  }

  #page-audit .table-wrap > table > thead{
    display: none;
  }

  #page-audit #auditRows{
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }


  /* SATU LOG = SATU CARD */
  #page-audit #auditRows tr{
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0 0 14px;
    padding: 17px;

    gap: 15px 18px;

    box-sizing: border-box;

    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 18px;

    overflow: hidden;
  }


  /* SEMUA CELL */
  #page-audit #auditRows td{
    display: block;

    width: auto;
    min-width: 0;
    max-width: 100%;

    padding: 0;
    border: 0;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;

    text-align: left;
    vertical-align: top;
  }


  /* LABEL */
  #page-audit #auditRows td::before{
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;

    color: #7b8491;

    text-transform: uppercase;
    letter-spacing: .02em;
  }

  #page-audit #auditRows td:nth-child(1)::before{
    content: "Waktu";
  }

  #page-audit #auditRows td:nth-child(2)::before{
    content: "User";
  }

  #page-audit #auditRows td:nth-child(3)::before{
    content: "Aksi";
  }

  #page-audit #auditRows td:nth-child(4)::before{
    content: "Entitas";
  }

  #page-audit #auditRows td:nth-child(5)::before{
    content: "ID";
  }

  #page-audit #auditRows td:nth-child(6)::before{
    content: "IP";
  }


  /* WAKTU */
  #page-audit #auditRows td:nth-child(1){
    grid-column: 1 / -1;

    padding-bottom: 13px;
    border-bottom: 1px solid #e6e9ed;

    font-weight: 700;
  }


  /* USER */
  #page-audit #auditRows td:nth-child(2){
    grid-column: 1 / -1;

    font-weight: 600;
    line-height: 1.4;
  }


  /* AKSI */
  #page-audit #auditRows td:nth-child(3){
    grid-column: 1;
  }


  /* ENTITAS */
  #page-audit #auditRows td:nth-child(4){
    grid-column: 2;
  }


  /* ID */
  #page-audit #auditRows td:nth-child(5){
    grid-column: 1 / -1;

    padding-top: 13px;
    border-top: 1px solid #e6e9ed;

    font-size: 13px;
    overflow-wrap: anywhere;
  }


  /* IP */
  #page-audit #auditRows td:nth-child(6){
    grid-column: 1 / -1;

    font-size: 13px;
    color: #5f6875;
  }


  /* JAGA AGAR TEKS PANJANG TIDAK MELEBARKAN CARD */
  #page-audit #auditRows td:nth-child(2),
  #page-audit #auditRows td:nth-child(3),
  #page-audit #auditRows td:nth-child(4),
  #page-audit #auditRows td:nth-child(5),
  #page-audit #auditRows td:nth-child(6){
    overflow-wrap: anywhere;
    max-width: 100%;
  }

}

/* === END OPTIKPRO AUDIT TRAIL MOBILE CARD V1 === */


/* ==========================================================
   OPTIKPRO PURCHASES MOBILE CARD V1
   Pembelian Supplier - mobile only
   Desktop tetap tabel
   ========================================================== */

@media (max-width: 768px){

  /* ========================================================
     PAGE
     ======================================================== */

  #page-purchases{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }


  /* ========================================================
     HEADER + TOMBOL
     ======================================================== */

  #page-purchases > .section-head{
    display: block;
    width: 100%;
    min-width: 0;
  }

  #page-purchases > .section-head > div:first-child{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #page-purchases > .section-head > div:last-child{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    gap: 10px;
    margin-top: 14px;
  }

  #page-purchases #addSupplier,
  #page-purchases #manageSuppliers,
  #page-purchases #addPurchase{
    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0;
    min-height: 44px;

    white-space: normal;
    overflow-wrap: anywhere;
  }

  #page-purchases #addPurchase{
    grid-column: 1 / -1;
  }


  /* ========================================================
     PANEL
     ======================================================== */

  #page-purchases > .panel{
    width: 100%;
    min-width: 0;
    max-width: 100%;

    padding: 0;

    border: 0;
    box-shadow: none;
    background: transparent;

    overflow: visible;
  }


  /* ========================================================
     MATIKAN HORIZONTAL TABLE DESKTOP DI HP
     ======================================================== */

  #page-purchases > .panel > .table-wrap{
    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow: visible !important;
  }

  #page-purchases > .panel > .table-wrap > table{
    display: block;

    width: 100%;
    min-width: 0 !important;
    max-width: 100%;

    border: 0;
    background: transparent;
  }

  #page-purchases > .panel > .table-wrap > table > thead{
    display: none;
  }

  #page-purchases #purchaseRows{
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;
  }


  /* ========================================================
     SATU PEMBELIAN = SATU CARD
     ======================================================== */

  #page-purchases #purchaseRows tr{
    display: grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    width: 100%;
    min-width: 0;
    max-width: 100%;

    margin: 0 0 14px;
    padding: 17px;

    gap: 15px 18px;

    box-sizing: border-box;

    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 18px;

    overflow: hidden;
  }


  /* ========================================================
     CELL
     ======================================================== */

  #page-purchases #purchaseRows td{
    display: block;

    width: auto;
    min-width: 0;
    max-width: 100%;

    padding: 0;
    border: 0;

    text-align: left;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }


  /* ========================================================
     LABEL
     ======================================================== */

  #page-purchases #purchaseRows td::before{
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;

    color: #7b8491;

    text-transform: uppercase;
    letter-spacing: .02em;
  }

  #page-purchases #purchaseRows td:nth-child(1)::before{
    content: "No Pembelian";
  }

  #page-purchases #purchaseRows td:nth-child(2)::before{
    content: "Tanggal";
  }

  #page-purchases #purchaseRows td:nth-child(3)::before{
    content: "Supplier";
  }

  #page-purchases #purchaseRows td:nth-child(4)::before{
    content: "Total";
  }

  #page-purchases #purchaseRows td:nth-child(5)::before{
    content: "Dibayar";
  }

  #page-purchases #purchaseRows td:nth-child(6)::before{
    content: "Status Bayar";
  }

  #page-purchases #purchaseRows td:nth-child(7)::before{
    content: "Status Barang";
  }

  #page-purchases #purchaseRows td:nth-child(8)::before{
    content: "Aksi";
  }


  /* ========================================================
     NO PEMBELIAN
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(1){
    grid-column: 1 / -1;

    padding-bottom: 13px;
    border-bottom: 1px solid #e6e9ed;

    font-weight: 700;
  }


  /* ========================================================
     TANGGAL
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(2){
    grid-column: 1 / -1;
  }


  /* ========================================================
     SUPPLIER + CABANG
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(3){
    grid-column: 1 / -1;

    font-weight: 600;
    line-height: 1.4;
  }

  #page-purchases #purchaseRows td:nth-child(3) small{
    display: block;
    margin-top: 3px;

    font-weight: 400;

    white-space: normal;
    overflow-wrap: anywhere;
  }


  /* ========================================================
     TOTAL / DIBAYAR
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(4){
    grid-column: 1;
  }

  #page-purchases #purchaseRows td:nth-child(5){
    grid-column: 2;
  }

  #page-purchases #purchaseRows td:nth-child(4),
  #page-purchases #purchaseRows td:nth-child(5){
    font-weight: 600;
  }


  /* ========================================================
     STATUS BAYAR / STATUS BARANG
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(6),
  #page-purchases #purchaseRows td:nth-child(7){
    padding-top: 13px;
    border-top: 1px solid #e6e9ed;
  }

  #page-purchases #purchaseRows td:nth-child(6){
    grid-column: 1;
  }

  #page-purchases #purchaseRows td:nth-child(7){
    grid-column: 2;
  }

  #page-purchases #purchaseRows td:nth-child(6) .badge,
  #page-purchases #purchaseRows td:nth-child(7) .badge{
    display: inline-flex;

    max-width: 100%;

    white-space: normal;
    overflow-wrap: anywhere;
  }


  /* ========================================================
     AKSI
     ======================================================== */

  #page-purchases #purchaseRows td:nth-child(8){
    grid-column: 1 / -1;

    padding-top: 14px;
    border-top: 1px solid #e6e9ed;
  }

  #page-purchases #purchaseRows td:nth-child(8) > div{
    display: flex !important;

    width: 100%;
    min-width: 0;

    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  #page-purchases #purchaseRows td:nth-child(8) button{
    flex: 1 1 120px;

    min-width: 0;
    min-height: 42px;

    white-space: normal;
  }


  /* ========================================================
     EMPTY STATE
     ======================================================== */

  #page-purchases #purchaseRows tr:has(td[colspan]){
    display: block;

    padding: 22px 16px;

    text-align: center;
  }

  #page-purchases #purchaseRows td[colspan]{
    display: block;

    width: 100%;
    max-width: 100%;

    text-align: center;
  }

  #page-purchases #purchaseRows td[colspan]::before{
    display: none;
    content: none;
  }

}

/* === END OPTIKPRO PURCHASES MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO KRIPTOK SPH ADD MODAL LAYOUT V1.4B SAFE V2 START
   Scope hanya: #fLensPowerAddMatrix
   ============================================================ */

#fLensPowerAddMatrix{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 18px;
  align-items:end;
}

#fLensPowerAddMatrix > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

#fLensPowerAddMatrix > label input{
  width:100%;
  min-width:0;
  min-height:42px;
  box-sizing:border-box;
}

#fLensPowerAddMatrix > .muted{
  grid-column:1 / -1 !important;
  margin-top:2px;
  padding:11px 13px;
  border:1px solid #dcebe6;
  border-radius:10px;
  background:#f7faf9;
  line-height:1.5;
}

#fLensPowerAddMatrix > .modal-actions{
  grid-column:1 / -1 !important;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
  margin-top:0;
}

#fLensPowerAddMatrix > .modal-actions button{
  min-height:40px;
}

/*
 * Hanya modal yang benar-benar berisi generator ini
 * yang dipersempit.
 */
.modal-card:has(#fLensPowerAddMatrix){
  width:min(820px,calc(100vw - 36px));
  max-width:820px;
}

@media(max-width:760px){

  #fLensPowerAddMatrix{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #fLensPowerAddMatrix > .muted,
  #fLensPowerAddMatrix > .modal-actions{
    grid-column:1 !important;
  }

  .modal-card:has(#fLensPowerAddMatrix){
    width:100% !important;
    max-width:100% !important;
  }

  #fLensPowerAddMatrix > .modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  #fLensPowerAddMatrix > .modal-actions button{
    width:100%;
  }
}

/* OPTIKPRO KRIPTOK SPH ADD MODAL LAYOUT V1.4B SAFE V2 END */


/* OPTIKPRO LENS DETAIL ACTION BUTTONS V1.5B SAFE V2 START */

/*
 * Penegasan visual khusus tombol pada Detail Master Katalog Lensa.
 * Tidak mengubah fungsi tombol dan tidak mengubah button global.
 */

.lens-detail-toolbar-actions button{
  min-height:44px;
  padding:10px 16px;
  border-radius:11px;
  font-weight:750;
  line-height:1.2;
  white-space:normal;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

/* Tombol secondary: lebih tegas tetapi tetap bukan aksi utama */
.lens-detail-toolbar-actions button.secondary{
  background:#fff;
  border:1px solid #cbd5d1;
  color:var(--text);
  box-shadow:0 1px 2px rgba(16,35,31,.04);
}

.lens-detail-toolbar-actions button.secondary:hover{
  background:#f3f8f6;
  border-color:#8fb8ad;
  color:var(--primary2);
  box-shadow:0 2px 5px rgba(16,35,31,.08);
}

/* Tombol primary tetap memakai identitas hijau aplikasi */
.lens-detail-toolbar-actions button.primary{
  border:1px solid var(--primary);
  box-shadow:0 2px 5px rgba(20,108,90,.14);
}

.lens-detail-toolbar-actions button.primary:hover{
  box-shadow:0 4px 10px rgba(20,108,90,.18);
}

/* Fokus keyboard */
.lens-detail-toolbar-actions button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(111,185,167,.28);
}

.lens-detail-toolbar-actions button:active{
  transform:translateY(1px);
}

/*
 * Aksi lanjutan utama setelah Master Power:
 * Buat Produk Cabang Massal.
 */
.lens-detail-toolbar-actions #bulkCreateLensProductsBtn{
  padding-left:18px;
  padding-right:18px;
}

/*
 * Pengaturan stok tetap secondary,
 * tetapi dibuat sedikit lebih mudah dikenali.
 */
.lens-detail-toolbar-actions #bulkLensMinStockBtn{
  border-width:1.5px;
}

/* Pertahankan autofit HP yang sudah berjalan */
@media(max-width:700px){
  .lens-detail-toolbar-actions button{
    width:100%;
    min-height:46px;
    padding:11px 14px;
  }

  .lens-detail-toolbar-actions #bulkCreateLensProductsBtn{
    padding-left:14px;
    padding-right:14px;
  }
}

/* OPTIKPRO LENS DETAIL ACTION BUTTONS V1.5B SAFE V2 END */

/* OPTIKPRO ORDER DETAIL MODAL SPACING V1 START */

/*
 * Khusus Detail Pesanan.
 * Memberi ruang dalam agar isi tidak menempel ke tepi modal.
 */

.modal-card:has(.order-detail-modal-content) .modal-body{
  padding:22px 24px 26px;
}

.order-detail-modal-content{
  min-width:0;
}

/* Field utama */
.order-detail-modal-content .field{
  min-width:0;
}

.order-detail-modal-content .field label{
  display:block;
  margin-bottom:6px;
  line-height:1.3;
}

.order-detail-modal-content .field input,
.order-detail-modal-content .field textarea{
  width:100%;
  min-width:0;
}

/* Input read-only lebih nyaman dilihat */
.order-detail-modal-content input:disabled,
.order-detail-modal-content textarea:disabled{
  padding-left:12px;
  padding-right:12px;
}

/* Deskripsi/catatan tidak terlalu sesak */
.order-detail-modal-content textarea:disabled{
  line-height:1.45;
}

/*
 * HP / tablet:
 * modal tetap autofit, tetapi masih memiliki ruang aman dari tepi.
 */
@media(max-width:700px){

  .modal-card:has(.order-detail-modal-content) .modal-body{
    padding:14px 12px 18px !important;
  }

  .order-detail-modal-content{
    width:100%;
    min-width:0;
  }

  .order-detail-modal-content .field{
    min-width:0;
    max-width:100%;
  }

  .order-detail-modal-content input,
  .order-detail-modal-content textarea{
    max-width:100%;
  }
}

/* OPTIKPRO ORDER DETAIL MODAL SPACING V1 END */

/* OPTIKPRO ORDER DETAIL MODAL LAYOUT V2 START */

/* Area keseluruhan */
.order-detail-modal-content{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Informasi pesanan */
.order-detail-modal-content .order-detail-info-grid{
  padding:18px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  gap:16px 18px !important;
}

/* Resep */
.order-detail-modal-content .order-detail-rx-section{
  margin-top:0 !important;
}

.order-detail-modal-content .order-detail-rx-section > label{
  margin:0 0 8px !important;
  font-weight:750;
  font-size:14px;
  color:#334155;
}

.order-detail-modal-content .order-detail-rx-section > div{
  padding:18px !important;
  border-radius:14px !important;
  border-color:#dbe4ea !important;
  background:#f8fafc !important;
}

/* Ringkasan keuangan */
.order-detail-modal-content .order-detail-finance-grid{
  margin-top:0 !important;
  padding:18px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:14px;
  background:#fff;
  gap:14px !important;
}

/* Catatan */
.order-detail-modal-content > .field{
  margin-top:0 !important;
  padding:16px 18px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}

/* Riwayat */
.order-detail-modal-content .order-detail-history{
  margin-top:0 !important;
  padding:18px !important;
  border-color:#e2e8f0 !important;
  border-radius:14px !important;
  background:#f8fafc !important;
}

/* Field lebih lega */
.order-detail-modal-content .field label{
  margin-bottom:7px;
  font-weight:650;
  color:#475569;
}

.order-detail-modal-content .field input,
.order-detail-modal-content .field textarea{
  min-height:42px;
  border-radius:9px;
}

/*
 * Desktop sedang:
 * 3 kolom utama tetap dipertahankan,
 * finance menjadi lebih proporsional.
 */
@media(min-width:701px){
  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media(max-width:700px){

  .order-detail-modal-content{
    gap:14px;
  }

  .order-detail-modal-content .order-detail-info-grid{
    grid-template-columns:1fr !important;
    padding:14px !important;
    gap:12px !important;
  }

  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:1fr 1fr !important;
    padding:14px !important;
    gap:12px !important;
  }

  .order-detail-modal-content .order-detail-rx-section > div{
    padding:14px !important;
  }

  .order-detail-modal-content .order-detail-history{
    padding:14px !important;
  }

  .order-detail-modal-content > .field{
    padding:14px;
  }
}

@media(max-width:430px){
  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:1fr !important;
  }
}

/* OPTIKPRO ORDER DETAIL MODAL LAYOUT V2 END */

/* OPTIKPRO ORDER DETAIL MODAL FINAL V3 START */

/* =====================================================
   FINAL VISUAL STRUCTURE
   ===================================================== */

.order-detail-modal-content{
  gap:12px !important;
}

/* Card section */
.order-detail-modal-content .order-detail-section{
  margin:0 !important;
  padding:12px 14px !important;
  border:1px solid #dce7f1 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(15,23,42,.035);
  min-width:0;
}

/* Judul setiap section */
.order-detail-modal-content .order-detail-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:0;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  color:#0f172a;
}

.order-detail-modal-content .order-detail-section-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:18px;
  font-size:15px;
  line-height:1;
}

/* =====================================================
   INFORMASI PESANAN
   ===================================================== */

.order-detail-modal-content .order-detail-info-grid{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  gap:12px 16px !important;
}

.order-detail-modal-content .order-detail-info-grid .field label{
  margin-bottom:5px;
}

.order-detail-modal-content .order-detail-info-grid input,
.order-detail-modal-content .order-detail-info-grid textarea{
  min-height:38px;
}

/* =====================================================
   RESEP
   ===================================================== */

.order-detail-modal-content .order-detail-rx-section{
  padding:12px 14px !important;
}

.order-detail-modal-content .order-detail-rx-section > div:not(.order-detail-section-title){
  padding:12px 14px !important;
  border:1px solid #dbe5ef !important;
  border-radius:9px !important;
  background:#fbfdff !important;
}

/* =====================================================
   RINGKASAN PEMBAYARAN
   ===================================================== */

.order-detail-modal-content .order-detail-finance-section{
  padding:12px 14px !important;
}

.order-detail-modal-content .order-detail-finance-grid{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px 14px !important;
}

.order-detail-modal-content .order-detail-finance-grid input{
  min-height:38px;
}

/* Sisa lebih mudah dikenali */
.order-detail-modal-content .order-detail-finance-grid .field:nth-child(5) input{
  font-weight:800 !important;
}

/* =====================================================
   CATATAN
   ===================================================== */

.order-detail-modal-content .order-detail-notes{
  padding:10px 14px !important;
}

.order-detail-modal-content .order-detail-notes .field{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.order-detail-modal-content .order-detail-notes .field > label{
  display:none;
}

.order-detail-modal-content .order-detail-notes textarea{
  min-height:42px;
  resize:vertical;
}

/* =====================================================
   RIWAYAT STATUS
   ===================================================== */

.order-detail-modal-content .order-detail-history{
  padding:10px 14px !important;
  background:#fff !important;
}

.order-detail-modal-content .order-detail-history .order-detail-section-title{
  margin-bottom:8px;
}

/* =====================================================
   FOOTER
   ===================================================== */

.order-detail-modal-content .order-detail-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:2px 0 0;
}

.order-detail-modal-content .order-detail-footer button{
  min-height:38px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:700;
}

.order-detail-modal-content .order-detail-print-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media(max-width:900px){
  .order-detail-modal-content .order-detail-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:700px){

  .order-detail-modal-content{
    gap:10px !important;
  }

  .order-detail-modal-content .order-detail-section{
    padding:11px 12px !important;
  }

  .order-detail-modal-content .order-detail-info-grid{
    grid-template-columns:1fr !important;
  }

  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .order-detail-modal-content .order-detail-rx-section > div:not(.order-detail-section-title){
    padding:11px !important;
  }

  .order-detail-modal-content .order-detail-footer{
    padding-bottom:4px;
  }
}

@media(max-width:430px){

  .order-detail-modal-content .order-detail-finance-grid{
    grid-template-columns:1fr !important;
  }

  .order-detail-modal-content .order-detail-footer{
    flex-direction:column;
  }

  .order-detail-modal-content .order-detail-footer button{
    width:100%;
  }

  .order-detail-modal-content .order-detail-print-btn{
    justify-content:center;
  }
}

/* OPTIKPRO ORDER DETAIL MODAL FINAL V3 END */

/* OPTIKPRO ORDER DETAIL RX MOBILE V3.1 START */

/*
 * Desktop tetap menggunakan struktur OD | OS yang lama.
 * Perubahan hanya berlaku pada layar HP.
 */
@media(max-width:700px){

  /*
   * OD di atas, OS di bawah.
   */
  .order-detail-modal-content .order-detail-rx-eyes{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .order-detail-modal-content .order-detail-rx-eye{
    min-width:0;
  }

  /*
   * Hilangkan garis pemisah vertikal OS versi desktop.
   * Ganti dengan pemisah horizontal.
   */
  .order-detail-modal-content .order-detail-rx-os{
    border-left:0 !important;
    padding-left:0 !important;
    border-top:1px solid #e5e7eb;
    padding-top:14px;
  }

  /*
   * Lima parameter mendapat seluruh lebar HP.
   */
  .order-detail-modal-content .order-detail-rx-values{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100%;
  }

  .order-detail-modal-content .order-detail-rx-values > div{
    min-width:0;
    text-align:center;
  }

  .order-detail-modal-content .order-detail-rx-values small{
    display:block;
    white-space:nowrap;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
  }
}

/*
 * HP sangat sempit.
 * Tetap 5 kolom, tetapi rapatkan sedikit.
 */
@media(max-width:430px){

  .order-detail-modal-content .order-detail-rx-values{
    gap:3px !important;
  }

  .order-detail-modal-content .order-detail-rx-values small{
    font-size:10px;
  }
}

/* OPTIKPRO ORDER DETAIL RX MOBILE V3.1 END */

/* OPTIKPRO SUPPLIER LAB MOBILE CARD V1 START */

/*
 * Kelola Supplier / Lab:
 * desktop tetap tabel biasa.
 * HP mengubah setiap supplier menjadi card vertikal.
 */
@media(max-width:700px){

  /*
   * Filter modal tetap satu kolom dan memenuhi lebar modal.
   */
  .modal-card:has(.supplier-manager-mobile-scope) .toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100%;
    min-width:0;
  }

  .modal-card:has(.supplier-manager-mobile-scope) .toolbar input,
  .modal-card:has(.supplier-manager-mobile-scope) .toolbar select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /*
   * Hilangkan horizontal scroll khusus daftar supplier.
   */
  .modal-card .supplier-manager-mobile-scope{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .modal-card .supplier-manager-mobile-scope > table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
  }

  .modal-card .supplier-manager-mobile-scope > table > thead{
    display:none !important;
  }

  .modal-card .supplier-manager-mobile-scope > table > tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  /*
   * Satu TR = satu card Supplier/Lab.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 0 12px 0 !important;
    padding:14px !important;

    border:1px solid #e1e8e5 !important;
    border-radius:14px !important;
    background:#fff !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /*
   * Semua cell menjadi blok card.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    padding:9px 8px !important;
    border:0 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    box-sizing:border-box !important;
  }

  /*
   * Label masing-masing field.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td::before{
    display:block;
    margin-bottom:4px;

    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;

    color:#718096;
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(1)::before{
    content:"Kode";
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(2)::before{
    content:"Nama";
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(3)::before{
    content:"Jenis";
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(4)::before{
    content:"Telepon";
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(5)::before{
    content:"Status";
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(6)::before{
    content:"Aksi";
  }

  /*
   * Nama supplier dibuat paling menonjol dan satu baris penuh.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(2){
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    font-weight:750;
    font-size:15px;
  }

  /*
   * Kode dan Jenis berdampingan.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(1){
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(3){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  /*
   * Telepon satu baris penuh agar nomor tidak terpotong.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(4){
    grid-column:1 / -1 !important;
    grid-row:3 !important;
  }

  /*
   * Status satu baris penuh.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(5){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
  }

  /*
   * Aksi satu baris penuh dan tombol boleh membungkus.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(6){
    grid-column:1 / -1 !important;
    grid-row:5 !important;

    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;

    padding-top:12px !important;
    margin-top:3px !important;
    border-top:1px solid #edf1ef !important;
  }

  /*
   * Karena td Aksi memakai flex, label ::before harus satu baris penuh.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td:nth-child(6)::before{
    flex:0 0 100%;
    width:100%;
    margin-bottom:0;
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows button{
    min-height:40px;
    max-width:100%;
    white-space:normal;
  }

  /*
   * Empty state jangan dipaksa mengikuti layout 6 kolom.
   */
  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td.list-empty{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    text-align:center !important;
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td.list-empty::before{
    display:none !important;
  }
}

/* HP sempit */
@media(max-width:430px){

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr{
    padding:12px !important;
  }

  .modal-card .supplier-manager-mobile-scope #supplierManagerRows > tr > td{
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

/* OPTIKPRO SUPPLIER LAB MOBILE CARD V1 END */

/* OPTIKPRO LAB INVOICE MOBILE CARD V1 SAFE V2 START */

@media(max-width:700px){

  /*
   * Scope hanya halaman Tagihan Lab.
   * Desktop tidak berubah.
   */
  #page-labinvoices,
  #page-labinvoices .panel{
    min-width:0;
    max-width:100%;
  }

  /*
   * Filter mobile.
   */
  #page-labinvoices .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    min-width:0;
  }

  #page-labinvoices .toolbar select,
  #page-labinvoices .toolbar button{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /*
   * Hilangkan scroll horizontal tabel desktop.
   */
  #page-labinvoices .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
  }

  #page-labinvoices table,
  #page-labinvoices tbody{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #page-labinvoices thead{
    display:none;
  }

  /*
   * Satu tagihan = satu card.
   */
  #page-labinvoices #labInvoiceRows tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px 16px;

    width:100%;
    max-width:100%;
    min-width:0;

    margin:0 0 14px;
    padding:16px;
    box-sizing:border-box;

    border:1px solid #dfe5e3;
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,35,31,.04);
  }

  #page-labinvoices #labInvoiceRows td{
    display:block;
    width:auto;
    max-width:100%;
    min-width:0;
    padding:0;
    border:0;

    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /*
   * Label kolom untuk mode card.
   */
  #page-labinvoices #labInvoiceRows td::before{
    display:block;
    margin-bottom:5px;

    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#718096;
  }

  #page-labinvoices #labInvoiceRows td:nth-child(1)::before{
    content:"Invoice Lab";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(2)::before{
    content:"Pesanan / Pasien";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(3)::before{
    content:"Laboratorium";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(4)::before{
    content:"Tanggal / Jatuh Tempo";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(5)::before{
    content:"Tagihan";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(6)::before{
    content:"Dibayar";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(7)::before{
    content:"Sisa";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(8)::before{
    content:"Status";
  }

  #page-labinvoices #labInvoiceRows td:nth-child(9)::before{
    content:"Aksi";
  }

  /*
   * Identitas utama full width.
   */
  #page-labinvoices #labInvoiceRows td:nth-child(1),
  #page-labinvoices #labInvoiceRows td:nth-child(2),
  #page-labinvoices #labInvoiceRows td:nth-child(3),
  #page-labinvoices #labInvoiceRows td:nth-child(4){
    grid-column:1 / -1;
  }

  /*
   * Keuangan:
   * Tagihan | Dibayar
   * Sisa    | Status
   */
  #page-labinvoices #labInvoiceRows td:nth-child(5),
  #page-labinvoices #labInvoiceRows td:nth-child(6),
  #page-labinvoices #labInvoiceRows td:nth-child(7),
  #page-labinvoices #labInvoiceRows td:nth-child(8){
    min-width:0;
  }

  /*
   * Aksi full width.
   */
  #page-labinvoices #labInvoiceRows td:nth-child(9){
    grid-column:1 / -1;
    padding-top:12px;
    border-top:1px solid #edf0ef;
  }

  #page-labinvoices #labInvoiceRows td:nth-child(9) > div{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
  }

  #page-labinvoices #labInvoiceRows td:nth-child(9) button{
    max-width:100%;
    white-space:normal;
  }

  /*
   * EMPTY STATE.
   * Baris kosong hanya mempunyai satu td.list-empty.
   * Jadikan satu area penuh tanpa label kolom.
   */
  #page-labinvoices #labInvoiceRows tr > td.list-empty{
    grid-column:1 / -1;
    width:100%;
    padding:22px 10px;
    text-align:center;
    color:#7b8490;
  }

  #page-labinvoices #labInvoiceRows tr > td.list-empty::before{
    content:none !important;
    display:none !important;
  }
}

/*
 * Refinement HP kecil.
 */
@media(max-width:430px){

  #page-labinvoices #labInvoiceRows tr{
    gap:13px 12px;
    padding:14px;
  }
}

/* OPTIKPRO LAB INVOICE MOBILE CARD V1 SAFE V2 END */

/*
 * OPTIKPRO RECEIVABLES MOBILE CARD V1 START
 * Piutang Pelanggan - mobile autofit
 * Scope: #page-receivables
 */
@media (max-width:700px){

  #page-receivables{
    min-width:0;
  }

  #page-receivables > .panel{
    min-width:0;
    padding:14px;
    overflow:hidden;
  }

  #page-receivables .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
  }

  #page-receivables .table-wrap table{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #page-receivables .table-wrap thead{
    display:none;
  }

  #page-receivables #receivableRows{
    display:block;
    width:100%;
    max-width:100%;
  }

  #page-receivables #receivableRows tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 16px;

    width:100%;
    max-width:100%;
    min-width:0;

    margin:0 0 14px;
    padding:16px;

    box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
  }

  #page-receivables #receivableRows td{
    display:block;
    width:auto;
    min-width:0;
    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
  }

  #page-receivables #receivableRows td::before{
    display:block;
    margin-bottom:5px;

    font-size:11px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;

    color:var(--muted);
  }

  #page-receivables #receivableRows td:nth-child(1)::before{
    content:"Invoice";
  }

  #page-receivables #receivableRows td:nth-child(2)::before{
    content:"Pasien";
  }

  #page-receivables #receivableRows td:nth-child(3)::before{
    content:"Total";
  }

  #page-receivables #receivableRows td:nth-child(4)::before{
    content:"Retur";
  }

  #page-receivables #receivableRows td:nth-child(5)::before{
    content:"Tagihan Bersih";
  }

  #page-receivables #receivableRows td:nth-child(6)::before{
    content:"Dibayar";
  }

  #page-receivables #receivableRows td:nth-child(7)::before{
    content:"Sisa";
  }

  #page-receivables #receivableRows td:nth-child(8)::before{
    content:"Status";
  }

  #page-receivables #receivableRows td:nth-child(9)::before{
    content:"Aksi";
  }

  /* Identitas transaksi */
  #page-receivables #receivableRows td:nth-child(1),
  #page-receivables #receivableRows td:nth-child(2){
    grid-column:1 / -1;
  }

  /* Nilai utama */
  #page-receivables #receivableRows td:nth-child(5),
  #page-receivables #receivableRows td:nth-child(7){
    font-weight:700;
  }

  /* Area aksi */
  #page-receivables #receivableRows td:nth-child(9){
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }

  #page-receivables #receivableRows td:nth-child(9)::before{
    flex:0 0 100%;
  }

  #page-receivables #receivableRows td:nth-child(9) button,
  #page-receivables #receivableRows td:nth-child(9) .action{
    max-width:100%;
    min-width:0;
  }

  /* Empty state colspan=9 */
  #page-receivables #receivableRows td.list-empty{
    grid-column:1 / -1;
    width:100%;
    padding:22px 12px;
    box-sizing:border-box;
    text-align:center;
    color:var(--muted);
  }

  #page-receivables #receivableRows td.list-empty::before{
    display:none;
    content:none;
  }
}

/* OPTIKPRO RECEIVABLES MOBILE CARD V1 END */


/* ============================================================
   OPTIKPRO EXPENSES DESKTOP FIT V1
   Scope   : #page-expenses
   Desktop : >= 769px
   Tujuan  : 9 kolom muat dalam panel tanpa horizontal scroll
   Mobile  : tidak diubah
   ============================================================ */

@media (min-width:769px){

  #page-expenses{
    min-width:0;
  }

  #page-expenses .panel{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #page-expenses .table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  #page-expenses .table-wrap > table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }

  #page-expenses .table-wrap th,
  #page-expenses .table-wrap td{
    min-width:0 !important;
    box-sizing:border-box;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    vertical-align:middle;
  }

  /* 1. Tanggal */
  #page-expenses .table-wrap th:nth-child(1),
  #page-expenses .table-wrap td:nth-child(1){
    width:8%;
  }

  /* 2. Jenis */
  #page-expenses .table-wrap th:nth-child(2),
  #page-expenses .table-wrap td:nth-child(2){
    width:6%;
  }

  /* 3. Kategori */
  #page-expenses .table-wrap th:nth-child(3),
  #page-expenses .table-wrap td:nth-child(3){
    width:10%;
  }

  /* 4. Keterangan - ruang terbesar */
  #page-expenses .table-wrap th:nth-child(4),
  #page-expenses .table-wrap td:nth-child(4){
    width:28%;
  }

  /* 5. Nominal */
  #page-expenses .table-wrap th:nth-child(5),
  #page-expenses .table-wrap td:nth-child(5){
    width:9%;
  }

  /* 6. Metode pembayaran */
  #page-expenses .table-wrap th:nth-child(6),
  #page-expenses .table-wrap td:nth-child(6){
    width:11%;
  }

  /* 7. Status */
  #page-expenses .table-wrap th:nth-child(7),
  #page-expenses .table-wrap td:nth-child(7){
    width:10%;
  }

  /* 8. Pencatat */
  #page-expenses .table-wrap th:nth-child(8),
  #page-expenses .table-wrap td:nth-child(8){
    width:11%;
  }

  /* 9. Aksi */
  #page-expenses .table-wrap th:nth-child(9),
  #page-expenses .table-wrap td:nth-child(9){
    width:7%;
  }

  #page-expenses .table-wrap td:nth-child(5){
    white-space:nowrap;
  }

  #page-expenses .table-wrap td:nth-child(7) .badge{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }

  #page-expenses .table-wrap td:nth-child(9) button{
    max-width:100%;
  }

}

/* === END OPTIKPRO EXPENSES DESKTOP FIT V1 === */


/* ============================================================
   OPTIKPRO EXPENSES DESKTOP ACTIONS V1.1
   Scope   : #page-expenses
   Desktop : >= 769px
   Tujuan  : beri ruang cukup untuk Edit / Print / Batalkan
   Mobile  : tidak diubah
   ============================================================ */

@media (min-width:769px){

  /* Keterangan: 28% -> 24% */
  #page-expenses .table-wrap th:nth-child(4),
  #page-expenses .table-wrap td:nth-child(4){
    width:24%;
  }

  /* Pencatat: 11% -> 10% */
  #page-expenses .table-wrap th:nth-child(8),
  #page-expenses .table-wrap td:nth-child(8){
    width:10%;
  }

  /* Aksi: 7% -> 12% */
  #page-expenses .table-wrap th:nth-child(9),
  #page-expenses .table-wrap td:nth-child(9){
    width:12%;
  }

  /*
   * app.js memberi inline white-space:nowrap pada TD Aksi.
   * Override agar tombol boleh membungkus.
   */
  #page-expenses .table-wrap td:nth-child(9){
    white-space:normal !important;
  }

  #page-expenses .table-wrap td:nth-child(9) .action{
    display:inline-block;
    width:auto;
    max-width:100%;
    margin:2px 2px 2px 0;
    white-space:nowrap;
  }

}

/* === END OPTIKPRO EXPENSES DESKTOP ACTIONS V1.1 === */


/* ============================================================
   OPTIKPRO MASTER LENS CATALOG DESKTOP FIT V1
   Scope   : #page-lenscatalog
   Desktop : >= 769px
   Tujuan  : 11 kolom tabel muat dalam panel tanpa horizontal scroll
   Mobile  : tidak diubah
   ============================================================ */

@media (min-width:769px){

  #page-lenscatalog{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #page-lenscatalog > .panel,
  #page-lenscatalog .panel{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* Filter tetap muat dalam panel desktop */
  #page-lenscatalog .toolbar{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #page-lenscatalog .toolbar input,
  #page-lenscatalog .toolbar select,
  #page-lenscatalog .toolbar button{
    min-width:0;
    box-sizing:border-box;
  }

  /* Hilangkan kebutuhan horizontal scroll pada tabel utama */
  #page-lenscatalog .table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box;
  }

  #page-lenscatalog .table-wrap > table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }

  #page-lenscatalog .table-wrap th,
  #page-lenscatalog .table-wrap td{
    min-width:0 !important;
    box-sizing:border-box;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    vertical-align:middle;
  }

  /* 1. Nama Katalog */
  #page-lenscatalog .table-wrap th:nth-child(1),
  #page-lenscatalog .table-wrap td:nth-child(1){
    width:24%;
  }

  /* 2. Merek */
  #page-lenscatalog .table-wrap th:nth-child(2),
  #page-lenscatalog .table-wrap td:nth-child(2){
    width:7%;
  }

  /* 3. Material */
  #page-lenscatalog .table-wrap th:nth-child(3),
  #page-lenscatalog .table-wrap td:nth-child(3){
    width:6%;
  }

  /* 4. Coating */
  #page-lenscatalog .table-wrap th:nth-child(4),
  #page-lenscatalog .table-wrap td:nth-child(4){
    width:7%;
  }

  /* 5. Design */
  #page-lenscatalog .table-wrap th:nth-child(5),
  #page-lenscatalog .table-wrap td:nth-child(5){
    width:9%;
  }

  /* 6. Power */
  #page-lenscatalog .table-wrap th:nth-child(6),
  #page-lenscatalog .table-wrap td:nth-child(6){
    width:5%;
    text-align:center;
  }

  /* 7. Produk Cabang */
  #page-lenscatalog .table-wrap th:nth-child(7),
  #page-lenscatalog .table-wrap td:nth-child(7){
    width:7%;
    text-align:center;
  }

  /* 8. Stok */
  #page-lenscatalog .table-wrap th:nth-child(8),
  #page-lenscatalog .table-wrap td:nth-child(8){
    width:5%;
    text-align:center;
  }

  /* 9. Kondisi Stok */
  #page-lenscatalog .table-wrap th:nth-child(9),
  #page-lenscatalog .table-wrap td:nth-child(9){
    width:14%;
  }

  /* 10. Status */
  #page-lenscatalog .table-wrap th:nth-child(10),
  #page-lenscatalog .table-wrap td:nth-child(10){
    width:8%;
    text-align:center;
  }

  /* 11. Aksi */
  #page-lenscatalog .table-wrap th:nth-child(11),
  #page-lenscatalog .table-wrap td:nth-child(11){
    width:8%;
    text-align:center;
  }

  /* Badge Kondisi Stok boleh membungkus */
  #page-lenscatalog .table-wrap td:nth-child(9) .badge{
    display:inline-block;
    max-width:100%;
    margin:2px 2px 2px 0;
    white-space:normal;
    text-align:center;
  }

  /* Status tetap ringkas */
  #page-lenscatalog .table-wrap td:nth-child(10) .badge{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }

  /* Tombol Detail tidak boleh memaksa lebar tabel */
  #page-lenscatalog .table-wrap td:nth-child(11) button{
    width:auto;
    max-width:100%;
    padding-left:10px;
    padding-right:10px;
    white-space:nowrap;
  }

}

/* === END OPTIKPRO MASTER LENS CATALOG DESKTOP FIT V1 === */


/* ============================================================
   OPTIKPRO MASTER LENS CATALOG FILTER DESKTOP V1
   Scope   : #page-lenscatalog
   Desktop : >= 769px
   Tujuan  : rapikan filter tanpa mengubah tabel / mobile
   ============================================================ */

@media (min-width:769px){

  #page-lenscatalog .toolbar{
    display:grid !important;

    grid-template-columns:
      minmax(190px,1.45fr)
      minmax(125px,1fr)
      minmax(125px,1fr)
      minmax(125px,1fr)
      minmax(125px,1fr)
      minmax(125px,1fr)
      auto !important;

    gap:10px;
    align-items:center;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* Search mendapat ruang terbesar */
  #page-lenscatalog #lensCatalogSearch{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Semua dropdown boleh menyusut mengikuti grid */
  #page-lenscatalog #lensCatalogBrandFilter,
  #page-lenscatalog #lensCatalogMaterialFilter,
  #page-lenscatalog #lensCatalogCoatingFilter,
  #page-lenscatalog #lensCatalogDesignFilter,
  #page-lenscatalog #lensCatalogStockFilter{
    display:block;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Reset hanya memakai ruang yang dibutuhkan */
  #page-lenscatalog #resetLensCatalogFilter{
    width:auto !important;
    min-width:max-content !important;
    max-width:none !important;
    white-space:nowrap;
  }

}

/* === END OPTIKPRO MASTER LENS CATALOG FILTER DESKTOP V1 === */


/* ============================================================
   OPTIKPRO STOCK MONITOR DESKTOP FIT V1
   Desktop only.
   Mobile Card V1/V2 tetap tidak berubah.
   ============================================================ */

@media (min-width:769px){

  #page-stockmonitor .panel,
  #page-stockmonitor .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #page-stockmonitor .table-wrap{
    overflow-x:hidden;
  }

  #page-stockmonitor table{
    width:100%;
    max-width:100%;
    min-width:0 !important;
    table-layout:fixed;
  }

  #page-stockmonitor th,
  #page-stockmonitor td{
    min-width:0 !important;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    vertical-align:middle;
  }


  /* ==========================================================
     MODE NORMAL - 10 KOLOM
     Status | Kode | Produk | Kategori | Merek |
     Atribut | Stok | Minimum | Saran | Cabang
     Total = 100%
     ========================================================== */

  #page-stockmonitor #stockMonitorRows[data-view="normal"] ~ *{
    box-sizing:border-box;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(1),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(1){
    width:10%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(2),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(2){
    width:12%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(3),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(3){
    width:15%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(4),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(4){
    width:9%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(5),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(5){
    width:8%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(6),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(6){
    width:16%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(7),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(7){
    width:7%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(8),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(8){
    width:7%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(9),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(9){
    width:9%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    th:nth-child(10),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="normal"])
    td:nth-child(10){
    width:7%;
  }


  /* ==========================================================
     MODE SARAN RESTOCK - 9 KOLOM
     Family | Merek | SPH | CYL | ADD |
     Stok | Minimum | Target | Saran Pesan
     Total = 100%
     ========================================================== */

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(1),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(1){
    width:24%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(2),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(2){
    width:12%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(3),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(3),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(4),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(4),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(5),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(5){
    width:8%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(6),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(6){
    width:9%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(7),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(7){
    width:9%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(8),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(8){
    width:9%;
  }

  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    th:nth-child(9),
  #page-stockmonitor table:has(#stockMonitorRows[data-view="restock"])
    td:nth-child(9){
    width:13%;
  }

}

/* END OPTIKPRO STOCK MONITOR DESKTOP FIT V1 */


/* ============================================================
   OPTIKPRO STOCK MONITOR FILTER DESKTOP V1
   Scope   : #page-stockmonitor
   Desktop : >= 769px
   Tujuan  : search + status + kategori + merek satu baris
   Mobile  : tidak diubah
   ============================================================ */

@media (min-width:769px){

  #page-stockmonitor .toolbar{
    display:grid !important;

    grid-template-columns:
      minmax(320px,2fr)
      minmax(160px,1fr)
      minmax(160px,1fr)
      minmax(160px,1fr) !important;

    gap:10px;
    align-items:center;

    width:100%;
    max-width:100%;
    min-width:0;
  }

  #page-stockmonitor #stockMonitorSearch,
  #page-stockmonitor #stockMonitorStatus,
  #page-stockmonitor #stockMonitorCategory,
  #page-stockmonitor #stockMonitorBrand{
    display:block;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    box-sizing:border-box;
  }

}

/* === END OPTIKPRO STOCK MONITOR FILTER DESKTOP V1 === */


/* ============================================================
   OPTIKPRO CUSTOMER CREDIT MOBILE CARD V1
   Scope  : #page-customercredits
   Mobile : <= 768px
   Tujuan : tabel Kredit Pelanggan menjadi card mobile
   ============================================================ */

@media (max-width:768px){

  /* ---------- PAGE ---------- */

  #page-customercredits{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #page-customercredits .section-head,
  #page-customercredits .panel,
  #page-customercredits .stats-grid{
    width:100%;
    max-width:100%;
    min-width:0;
  }


  /* ---------- SUMMARY ---------- */

  #page-customercredits .stats-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px;
  }

  #page-customercredits .stat{
    min-width:0;
  }


  /* ---------- SEARCH ---------- */

  #page-customercredits .toolbar{
    display:block !important;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #page-customercredits #customerCreditSearch{
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
    margin:0 !important;
  }


  /* ---------- TABLE WRAPPER ---------- */

  #page-customercredits .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible !important;
  }

  #page-customercredits table{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0 !important;
  }

  #page-customercredits thead{
    display:none !important;
  }

  #page-customercredits tbody{
    display:block;
    width:100%;
  }


  /* ---------- CUSTOMER CARD ---------- */

  #page-customercredits #customerCreditRows > tr{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:100%;
    min-width:0;

    margin:0 0 12px;
    padding:12px;

    border:1px solid var(--border);
    border-radius:12px;

    background:var(--panel);
    box-sizing:border-box;
  }

  #page-customercredits #customerCreditRows > tr > td{
    display:grid;
    grid-template-columns:minmax(92px,38%) minmax(0,1fr);
    gap:8px;

    width:100%;
    max-width:100%;
    min-width:0;

    padding:7px 0 !important;
    border:0 !important;
    border-bottom:1px solid var(--border) !important;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
    box-sizing:border-box;
  }

  #page-customercredits #customerCreditRows > tr > td:last-child{
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }


  /* ---------- LABEL 7 KOLOM ---------- */

  #page-customercredits #customerCreditRows > tr > td:nth-child(1)::before{
    content:"Pasien";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(2)::before{
    content:"No. RM";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(3)::before{
    content:"HP";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(4)::before{
    content:"Cabang";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(5)::before{
    content:"Saldo Kredit";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(6)::before{
    content:"Transaksi Terakhir";
  }

  #page-customercredits #customerCreditRows > tr > td:nth-child(7)::before{
    content:"Aksi";
  }

  #page-customercredits #customerCreditRows > tr > td::before{
    font-weight:700;
    opacity:.72;
    line-height:1.35;
  }


  /* ---------- ACTION BUTTONS ---------- */

  #page-customercredits #customerCreditRows > tr > td:nth-child(7) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    min-width:0;
  }

  #page-customercredits #customerCreditRows .action{
    width:auto !important;
    max-width:100%;
    margin:0 !important;
    white-space:nowrap;
  }


  /* ---------- EMPTY STATE ----------
     renderCustomerCredits memakai:
     <tr><td colspan="7" class="list-empty">...</td></tr>
     Maka row kosong jangan dirender seperti card data biasa.
     ---------------------------------------------------------- */

  #page-customercredits #customerCreditRows > tr:has(td.list-empty){
    display:block;
    margin:0;
    padding:0;

    border:0;
    border-radius:0;
    background:transparent;
  }

  #page-customercredits #customerCreditRows > tr:has(td.list-empty) > td.list-empty{
    display:block !important;

    width:100%;
    max-width:100%;
    min-width:0;

    padding:20px 12px !important;

    border:0 !important;

    text-align:center;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  #page-customercredits #customerCreditRows > tr:has(td.list-empty) > td.list-empty::before{
    content:none !important;
    display:none !important;
  }

}

/* === END OPTIKPRO CUSTOMER CREDIT MOBILE CARD V1 === */


/* ============================================================
   OPTIKPRO MOBILE TOPBAR FIX V2
   Scope  : global topbar
   Mobile : <= 760px
   Tujuan :
   - judul tidak pecah di tengah kata
   - install tetap ringkas di kanan
   - cabang + role + avatar pada baris kedua
   - desktop tidak diubah
   ============================================================ */

@media (max-width:760px){

  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left install"
      "account account";

    width:100%;
    max-width:100%;
    min-width:0;

    height:auto;
    min-height:0;

    padding:12px 14px;
    gap:10px 12px;

    align-items:start;
    box-sizing:border-box;
  }

  .top-left{
    grid-area:left;

    width:100%;
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  .top-left > div{
    flex:1 1 auto;
    min-width:0;
  }

  .topbar h1{
    margin:0;

    font-size:20px;
    line-height:1.15;

    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none;
  }

  .topbar p{
    margin-top:6px;

    font-size:12px;
    line-height:1.35;
  }

  .top-actions{
    display:contents !important;
    max-width:none !important;
  }

  #installPwaBtn{
    grid-area:install;

    align-self:start;

    width:auto !important;
    max-width:112px !important;

    margin:0 !important;
    padding:8px 10px;

    line-height:1.15;
    white-space:normal;
  }

  #activeBranchWrap{
    grid-area:account;

    min-width:0;
    max-width:100%;

    display:flex;
    align-items:center;
    gap:6px;
  }

  #activeBranchWrap.hidden{
    display:none !important;
  }

  #activeBranch{
    min-width:0;
    max-width:100%;
  }

  #roleBadge{
    grid-area:account;

    justify-self:end;
    align-self:end;

    margin-right:48px;
    margin-bottom:2px;

    white-space:nowrap;
  }

  #userName{
    display:none !important;
  }

  #avatar{
    grid-area:account;

    justify-self:end;
    align-self:end;

    position:relative;
    z-index:2;
  }

}

/* === END OPTIKPRO MOBILE TOPBAR FIX V2 === */

/* ============================================================
   OPTIKPRO MOBILE TOPBAR FIX V2.1
   Fix: role OWNER tidak menimpa dropdown Cabang Aktif
   Scope: mobile <= 760px
   ============================================================ */

@media (max-width:760px){

  .topbar{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "left left install"
      "branch role avatar";
  }

  #activeBranchWrap{
    grid-area:branch;

    width:100%;
    min-width:0;
    max-width:none;

    display:grid;
    grid-template-columns:auto minmax(0,1fr);

    align-items:center;
    gap:6px;
  }

  #activeBranchWrap.hidden{
    display:none !important;
  }

  #activeBranchWrap .active-branch-label{
    white-space:nowrap;
  }

  #activeBranch{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  #roleBadge{
    grid-area:role;

    justify-self:end;
    align-self:center;

    margin:0 !important;

    white-space:nowrap;
  }

  #avatar{
    grid-area:avatar;

    justify-self:end;
    align-self:center;

    margin:0 !important;
  }

}

/* === END OPTIKPRO MOBILE TOPBAR FIX V2.1 === */

/* ============================================================
   OPTIKPRO MOBILE TOPBAR FIX V2.2
   Layout:
   Row 1 = title + install
   Row 2 = active branch full width
   Row 3 = role + avatar
   Scope  = mobile <= 760px
   ============================================================ */

@media (max-width:760px){

  .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left install"
      "branch branch"
      "account account";
  }

  #activeBranchWrap{
    grid-area:branch;

    width:100%;
    max-width:100%;
    min-width:0;

    display:grid;
    grid-template-columns:auto minmax(0,1fr);

    align-items:center;
    gap:8px;
  }

  #activeBranchWrap.hidden{
    display:none !important;
  }

  #activeBranchWrap .active-branch-label{
    white-space:nowrap;
  }

  #activeBranch{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    box-sizing:border-box;
  }

  #roleBadge{
    grid-area:account;

    justify-self:end;
    align-self:center;

    margin:0 52px 0 0 !important;

    white-space:nowrap;
  }

  #avatar{
    grid-area:account;

    justify-self:end;
    align-self:center;

    margin:0 !important;

    position:relative;
    z-index:2;
  }

}

/* === END OPTIKPRO MOBILE TOPBAR FIX V2.2 === */

/* ============================================================
   OPTIKPRO RETURNS MOBILE CARD V1
   Scope : #page-returns
   Mobile: <= 760px
   11 kolom tabel Retur -> card vertikal
   Desktop tidak diubah
   ============================================================ */

@media (max-width:760px){

  #page-returns{
    min-width:0;
  }

  #page-returns .section-head{
    gap:14px;
  }

  #page-returns .section-head .primary{
    width:auto;
    min-width:0;
  }

  #page-returns .panel{
    padding:12px;
    min-width:0;
    overflow:hidden;
  }

  #page-returns .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible !important;
  }

  #page-returns table,
  #page-returns tbody{
    display:block;
    width:100%;
    min-width:0;
  }

  #page-returns thead{
    display:none;
  }

  #page-returns tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    width:100%;
    min-width:0;

    margin:0 0 14px;
    padding:14px;

    gap:12px 14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:#fff;
  }

  #page-returns tbody tr:last-child{
    margin-bottom:0;
  }

  #page-returns tbody td{
    display:block;

    min-width:0;
    width:auto;

    padding:0;

    border:0;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;

    font-size:13px;
    line-height:1.4;
  }

  #page-returns tbody td::before{
    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:10px;
    line-height:1.2;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-returns tbody td:nth-child(1)::before{
    content:"No Retur";
  }

  #page-returns tbody td:nth-child(2)::before{
    content:"Tanggal";
  }

  #page-returns tbody td:nth-child(3)::before{
    content:"Cabang";
  }

  #page-returns tbody td:nth-child(4)::before{
    content:"Jenis";
  }

  #page-returns tbody td:nth-child(5)::before{
    content:"Transaksi Asal";
  }

  #page-returns tbody td:nth-child(6)::before{
    content:"Produk / Qty";
  }

  #page-returns tbody td:nth-child(7)::before{
    content:"Total";
  }

  #page-returns tbody td:nth-child(8)::before{
    content:"Alasan";
  }

  #page-returns tbody td:nth-child(9)::before{
    content:"Pencatat";
  }

  #page-returns tbody td:nth-child(10)::before{
    content:"Status";
  }

  #page-returns tbody td:nth-child(11)::before{
    content:"Aksi";
  }

  /* Informasi panjang memakai lebar penuh card */
  #page-returns tbody td:nth-child(5),
  #page-returns tbody td:nth-child(6),
  #page-returns tbody td:nth-child(8),
  #page-returns tbody td:nth-child(11){
    grid-column:1 / -1;
  }

  /* Nomor retur tetap mudah dibaca */
  #page-returns tbody td:nth-child(1) strong{
    overflow-wrap:anywhere;
  }

  /* Area aksi boleh membungkus tanpa overflow */
  #page-returns tbody td:nth-child(11){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
  }

  #page-returns tbody td:nth-child(11)::before{
    flex:0 0 100%;
  }

  #page-returns tbody td:nth-child(11) button{
    max-width:100%;
    margin:0;
  }

}

/* === END OPTIKPRO RETURNS MOBILE CARD V1 === */

/* =========================================================
   OPTIKPRO SHIFT MANAGEMENT MOBILE V1
   Scope: Karyawan & SDM > Shift Kerja
   Desktop layout tetap dipertahankan.
   ========================================================= */

@media (max-width: 768px) {

  #sdmShiftPanel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #sdmShiftPanel .panel,
  #sdmShiftPanel .card,
  #sdmShiftPanel .table-wrap,
  #sdmShiftPanel .table-container {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #sdmShiftPanel .table-wrap,
  #sdmShiftPanel .table-container {
    overflow-x: visible !important;
  }

  /* ---------- MASTER SHIFT ---------- */

  #sdmShiftPanel table:has(#workShiftRows) {
    display: block !important;
    width: 100% !important;
  }

  #sdmShiftPanel table:has(#workShiftRows) thead {
    display: none !important;
  }

  #workShiftRows {
    display: block !important;
    width: 100% !important;
  }

  #workShiftRows tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid var(--border, #ddd) !important;
    border-radius: 12px !important;
    background: var(--card, #fff) !important;
  }

  #workShiftRows td {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-wrap: anywhere;
  }

  #workShiftRows td::before {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    opacity: .68;
  }

  #workShiftRows td:nth-child(1)::before {
    content: "Nama Shift";
  }

  #workShiftRows td:nth-child(2)::before {
    content: "Cabang";
  }

  #workShiftRows td:nth-child(3)::before {
    content: "Jam Kerja";
  }

  #workShiftRows td:nth-child(4)::before {
    content: "Toleransi";
  }

  #workShiftRows td:nth-child(5)::before {
    content: "Lembur";
  }

  #workShiftRows td:nth-child(6)::before {
    content: "Status";
  }

  #workShiftRows td:nth-child(7)::before {
    content: "Aksi";
  }

  #workShiftRows td:nth-child(1),
  #workShiftRows td:nth-child(7) {
    grid-column: 1 / -1;
  }


  /* ---------- PENUGASAN SHIFT ---------- */

  #sdmShiftPanel table:has(#shiftAssignmentRows) {
    display: block !important;
    width: 100% !important;
  }

  #sdmShiftPanel table:has(#shiftAssignmentRows) thead {
    display: none !important;
  }

  #shiftAssignmentRows {
    display: block !important;
    width: 100% !important;
  }

  #shiftAssignmentRows tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid var(--border, #ddd) !important;
    border-radius: 12px !important;
    background: var(--card, #fff) !important;
  }

  #shiftAssignmentRows td {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-wrap: anywhere;
  }

  #shiftAssignmentRows td::before {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    opacity: .68;
  }

  #shiftAssignmentRows td:nth-child(1)::before {
    content: "Karyawan";
  }

  #shiftAssignmentRows td:nth-child(2)::before {
    content: "Shift";
  }

  #shiftAssignmentRows td:nth-child(3)::before {
    content: "Jam";
  }

  #shiftAssignmentRows td:nth-child(4)::before {
    content: "Mulai";
  }

  #shiftAssignmentRows td:nth-child(5)::before {
    content: "Sampai";
  }

  #shiftAssignmentRows td:nth-child(6)::before {
    content: "Status";
  }

  #shiftAssignmentRows td:nth-child(7)::before {
    content: "Aksi";
  }

  #shiftAssignmentRows td:nth-child(1),
  #shiftAssignmentRows td:nth-child(7) {
    grid-column: 1 / -1;
  }


  /* ---------- BUTTONS / FORMS ---------- */

  #sdmShiftPanel button {
    max-width: 100%;
  }

  #sdmShiftPanel .actions,
  #sdmShiftPanel .form-actions {
    flex-wrap: wrap !important;
  }

  #sdmShiftPanel input,
  #sdmShiftPanel select,
  #sdmShiftPanel textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/*
 * ============================================================
 * OPTIKPRO SHIFT ASSIGNMENT MOBILE LABEL FIX V1
 * Memperbaiki label 8 kolom kartu Penugasan Shift di mobile:
 * Karyawan | Posisi | Shift | Jam | Mulai | Sampai | Status | Aksi
 * Desktop tidak diubah.
 * ============================================================
 */
@media (max-width: 768px) {

  #employeeShiftAssignmentRows tr > td:nth-child(1)::before {
    content: "Karyawan";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(2)::before {
    content: "Posisi";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(3)::before {
    content: "Shift";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(4)::before {
    content: "Jam";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(5)::before {
    content: "Mulai";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(6)::before {
    content: "Sampai";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(7)::before {
    content: "Status";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(8)::before {
    content: "Aksi";
  }

  #employeeShiftAssignmentRows tr > td:nth-child(8) {
    grid-column: 1 / -1;
  }
}


/*
 * ============================================================
 * OPTIKPRO SHIFT ASSIGNMENT MOBILE LABEL FIX V2
 * Active tbody: #shiftAssignmentRows
 * Mapping 8 kolom:
 * Karyawan | Jabatan | Shift | Jam | Mulai | Sampai | Status | Aksi
 * Desktop tidak diubah.
 * ============================================================
 */
@media (max-width: 768px) {

  #shiftAssignmentRows > tr > td:nth-child(1)::before {
    content: "Karyawan";
  }

  #shiftAssignmentRows > tr > td:nth-child(2)::before {
    content: "Jabatan";
  }

  #shiftAssignmentRows > tr > td:nth-child(3)::before {
    content: "Shift";
  }

  #shiftAssignmentRows > tr > td:nth-child(4)::before {
    content: "Jam";
  }

  #shiftAssignmentRows > tr > td:nth-child(5)::before {
    content: "Mulai";
  }

  #shiftAssignmentRows > tr > td:nth-child(6)::before {
    content: "Sampai";
  }

  #shiftAssignmentRows > tr > td:nth-child(7)::before {
    content: "Status";
  }

  #shiftAssignmentRows > tr > td:nth-child(8)::before {
    content: "Aksi";
  }

  /*
   * Override layout lama:
   * sebelumnya kolom 7 dianggap Aksi.
   */
  #shiftAssignmentRows > tr > td:nth-child(7) {
    grid-column: auto;
  }

  #shiftAssignmentRows > tr > td:nth-child(1),
  #shiftAssignmentRows > tr > td:nth-child(8) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================
   OPTIKPRO PAYMENT PROOF FILE INPUT V1
   Scoped only to supplier payment proof.
   ========================================================== */

#purchasePaymentProof{
  width:100%;
  padding:6px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
}

#purchasePaymentProof::file-selector-button{
  margin-right:10px;
  border:0;
  border-radius:8px;
  padding:8px 12px;
  background:var(--soft);
  color:var(--primary2);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

#purchasePaymentProof::-webkit-file-upload-button{
  margin-right:10px;
  border:0;
  border-radius:8px;
  padding:8px 12px;
  background:var(--soft);
  color:var(--primary2);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

#purchasePaymentProofWrap small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* ============================================================
   OPTIKPRO PURCHASE PAYMENT HISTORY LAYOUT V1
   Scoped only to supplier payment history.
   ============================================================ */

.purchase-payment-history-table{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.purchase-payment-history-table table{
  width:100%;
  table-layout:fixed;
}

.purchase-payment-history-table th,
.purchase-payment-history-table td{
  padding:10px 8px;
  vertical-align:top;
  white-space:normal;
  overflow-wrap:anywhere;
}

.purchase-payment-history-table th:nth-child(1),
.purchase-payment-history-table td:nth-child(1){
  width:14%;
}

.purchase-payment-history-table th:nth-child(2),
.purchase-payment-history-table td:nth-child(2){
  width:14%;
}

.purchase-payment-history-table th:nth-child(3),
.purchase-payment-history-table td:nth-child(3){
  width:11%;
}

.purchase-payment-history-table th:nth-child(4),
.purchase-payment-history-table td:nth-child(4){
  width:22%;
}

.purchase-payment-history-table th:nth-child(5),
.purchase-payment-history-table td:nth-child(5){
  width:14%;
}

.purchase-payment-history-table th:nth-child(6),
.purchase-payment-history-table td:nth-child(6){
  width:11%;
}

.purchase-payment-history-table th:nth-child(7),
.purchase-payment-history-table td:nth-child(7){
  width:14%;
}

.purchase-payment-history-table td:nth-child(7) .action{
  display:block;
  width:100%;
  margin:0 0 6px;
  padding:7px 6px;
  white-space:normal;
}

.purchase-payment-history-table td:nth-child(7) .action:last-child{
  margin-bottom:0;
}

@media(max-width:760px){
  .purchase-payment-history-table table{
    font-size:12px;
  }

  .purchase-payment-history-table th,
  .purchase-payment-history-table td{
    padding:8px 5px;
  }

  .purchase-payment-history-table th{
    font-size:10px;
  }

  .purchase-payment-history-table td:nth-child(7) .action{
    font-size:11px;
    padding:6px 4px;
  }
}
/* ============================================================
   OPTIKPRO SHIFT MODAL LAYOUT V1 SAFE START
   Scope: #workShiftForm only
   ============================================================ */

#workShiftForm .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 24px;
  align-items:start;
}

#workShiftForm .form-grid > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  font-weight:500;
}

#workShiftForm .form-grid > label input,
#workShiftForm .form-grid > label select,
#workShiftForm .form-grid > label textarea{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;

  border:1px solid var(--line);
  background:#fff;
  border-radius:11px;
  padding:10px 12px;
  outline:none;
}

#workShiftForm .form-grid > label input:focus,
#workShiftForm .form-grid > label select:focus,
#workShiftForm .form-grid > label textarea:focus{
  border-color:#6fb9a7;
  box-shadow:0 0 0 3px #e6f6f1;
}

#workShiftForm .form-grid > label.fullspan{
  grid-column:1 / -1;
}

#workShiftForm textarea{
  min-height:90px;
  resize:vertical;
}

#workShiftForm .form-actions{
  grid-column:1 / -1;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;

  gap:10px;
  margin-top:4px;
}

@media(max-width:760px){

  #workShiftForm .form-grid{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  #workShiftForm .form-grid > label.fullspan,
  #workShiftForm .form-actions{
    grid-column:1;
  }
}

/* OPTIKPRO SHIFT MODAL LAYOUT V1 SAFE END */

/* OPTIKPRO SHIFT MODAL ACTIONS V1 START */

#workShiftForm > .form-actions{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:18px;
}

/* Pada HP tombol tetap rapi dan tidak menyebabkan overflow */
@media(max-width:600px){
  #workShiftForm > .form-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }
}

/* OPTIKPRO SHIFT MODAL ACTIONS V1 END */

/* OPTIKPRO SHIFT MODAL ACTIONS V2 START */

/*
   Struktur aktual:
   #workShiftForm
     .form-grid
     .modal-actions
*/

#workShiftForm > .modal-actions{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:18px;
  box-sizing:border-box;
}

@media(max-width:600px){
  #workShiftForm > .modal-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }
}

/* OPTIKPRO SHIFT MODAL ACTIONS V2 END */

/* OPTIKPRO SHIFT MOBILE ACTIONS V3 START */

@media(max-width:760px){

  #workShiftForm > .modal-actions{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    box-sizing:border-box;
  }

  #workShiftForm > .modal-actions > button{
    width:auto;
    max-width:none;
    flex:0 0 auto;
  }

}

/* OPTIKPRO SHIFT MOBILE ACTIONS V3 END */

/* OPTIKPRO SHIFT ASSIGNMENT MODAL LAYOUT V1 START */

/*
   Scoped only to:
   Tugaskan Shift Karyawan / Edit Penugasan Shift

   Desktop:
   - 2 kolom seimbang
   - Catatan full width
   - tombol kanan bawah

   Mobile:
   - 1 kolom
   - semua field autofit
*/

#shiftAssignmentForm .form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px 24px;
  width:100%;
}

#shiftAssignmentForm .form-grid > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  margin:0;
  font-weight:500;
}

#shiftAssignmentForm .form-grid > label > input,
#shiftAssignmentForm .form-grid > label > select,
#shiftAssignmentForm .form-grid > label > textarea{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

#shiftAssignmentForm .form-grid > label > input,
#shiftAssignmentForm .form-grid > label > select{
  min-height:42px;
}

#shiftAssignmentForm #shiftAssignmentNotes{
  min-height:90px;
  resize:vertical;
}

#shiftAssignmentForm > .modal-actions{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:18px;
  box-sizing:border-box;
}

#shiftAssignmentForm > .modal-actions > button{
  flex:0 0 auto;
  width:auto;
}

@media(max-width:760px){

  #shiftAssignmentForm .form-grid{
    grid-template-columns:minmax(0,1fr);
    gap:13px;
  }

  #shiftAssignmentForm .form-grid > label{
    grid-column:1 / -1 !important;
  }

  #shiftAssignmentForm > .modal-actions{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }

  #shiftAssignmentForm > .modal-actions > button{
    width:auto;
    max-width:100%;
    flex:0 0 auto;
  }

}

/* OPTIKPRO SHIFT ASSIGNMENT MODAL LAYOUT V1 END */

/* OPTIKPRO LATE DEDUCTION CHECKBOX ALIGN V1 START */

/*
   Scoped only to:
   Pengaturan > Kebijakan Potongan Keterlambatan
*/

.field label:has(> input[name="late_deduction_enabled"]){
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:auto !important;
  max-width:100%;
  cursor:pointer;
}

.field label > input[name="late_deduction_enabled"]{
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  flex:0 0 16px !important;
  margin:0 !important;
  padding:0 !important;
}

/* OPTIKPRO LATE DEDUCTION CHECKBOX ALIGN V1 END */

/* OPTIKPRO BRAND LOGO IMAGE S4C */
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}
/* OPTIKPRO SIDEBAR SVG ICONS S4D-3 */
.sidebar .nav-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sidebar .nav-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sidebar .nav-group-title > span{
  min-width:0;
}

.sidebar .nav-group-toggle{
  align-items:center;
}
/* OPTIKPRO SIDEBAR DESKTOP WIDTH S4E-2 */
@media (min-width:761px){
  .sidebar{
    width:270px;
  }

  .main{
    margin-left:270px;
    width:calc(100% - 270px);
  }
}
/* =========================================================
   OPTIKPRO PATIENT MOBILE CARD V1
   Mobile only - desktop table preserved
   ========================================================= */

@media (max-width:760px){

  #page-patients{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  #page-patients > .panel{
    min-width:0;
    max-width:100%;
  }

  #page-patients .table-wrap{
    width:100%;
    max-width:100%;
    overflow:visible !important;
  }

  #page-patients .table-wrap > table{
    display:block;
    width:100%;
    min-width:0 !important;
  }

  #page-patients .table-wrap > table > thead{
    display:none;
  }

  #page-patients #patientRows{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
  }

  #page-patients #patientRows > tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--panel);
  }

  #page-patients #patientRows > tr > td{
    display:block;

    min-width:0;
    width:auto;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
  }

  #page-patients #patientRows > tr > td::before{
    display:block;
    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-patients #patientRows > tr > td:nth-child(1)::before{
    content:"No. RM";
  }

  #page-patients #patientRows > tr > td:nth-child(2)::before{
    content:"Nama";
  }

  #page-patients #patientRows > tr > td:nth-child(3)::before{
    content:"HP";
  }

  #page-patients #patientRows > tr > td:nth-child(4)::before{
    content:"Tgl Lahir";
  }

  #page-patients #patientRows > tr > td:nth-child(5)::before{
    content:"Gender";
  }

  #page-patients #patientRows > tr > td:nth-child(6){
    grid-column:1 / -1;

    display:flex;
    flex-wrap:wrap;
    gap:8px;

    padding-top:4px;
  }

  #page-patients #patientRows > tr > td:nth-child(6)::before{
    content:"Aksi";
    flex-basis:100%;
  }

  #page-patients #patientRows > tr > td:nth-child(6) button{
    max-width:100%;
  }
}

/* OPTIKPRO PATIENT MOBILE CARD V1 END */

/* =========================================================
   OPTIKPRO RECENT SALES MOBILE CARD V1
   Mobile only - desktop table preserved
   ========================================================= */

@media (max-width:760px){

  #page-sales{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  #page-sales > .panel.mt{
    min-width:0;
    max-width:100%;
  }

  #page-sales > .panel.mt > .table-wrap{
    width:100%;
    max-width:100%;
    overflow:visible !important;
  }

  #page-sales > .panel.mt > .table-wrap > table{
    display:block;
    width:100%;
    min-width:0 !important;
  }

  #page-sales > .panel.mt > .table-wrap > table > thead{
    display:none;
  }

  #page-sales #salesRows{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
  }

  #page-sales #salesRows > tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--panel);
  }

  #page-sales #salesRows > tr > td{
    display:block;

    width:auto;
    min-width:0;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
  }

  #page-sales #salesRows > tr > td::before{
    display:block;
    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-sales #salesRows > tr > td:nth-child(1)::before{
    content:"Invoice";
  }

  #page-sales #salesRows > tr > td:nth-child(2)::before{
    content:"Tanggal";
  }

  #page-sales #salesRows > tr > td:nth-child(3)::before{
    content:"Pasien";
  }

  #page-sales #salesRows > tr > td:nth-child(4)::before{
    content:"Total";
  }

  #page-sales #salesRows > tr > td:nth-child(5)::before{
    content:"Status";
  }

  #page-sales #salesRows > tr > td:nth-child(6){
    grid-column:1 / -1;
    padding-top:4px;
  }

  #page-sales #salesRows > tr > td:nth-child(6)::before{
    content:"Aksi";
  }

  #page-sales #salesRows > tr > td:nth-child(6) > div{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    max-width:100%;
  }

  #page-sales #salesRows > tr > td:nth-child(6) button{
    max-width:100%;
  }

  /*
    Empty-state rows use colspan=6.
    Keep them as one normal full-width message rather than
    presenting them as a six-column transaction card.
  */
  #page-sales #salesRows > tr:has(td[colspan]){
    display:block;
    padding:0;
    border:0;
    background:transparent;
  }

  #page-sales #salesRows > tr:has(td[colspan]) > td{
    display:block;
    width:100%;
    padding:26px 8px;
    text-align:center;
  }

  #page-sales #salesRows > tr:has(td[colspan]) > td::before{
    content:none;
  }
}

/* OPTIKPRO RECENT SALES MOBILE CARD V1 END */

/* =========================================================
   OPTIKPRO BPJS CLAIM MOBILE CARD V1
   Mobile only - BPJS logic untouched
   ========================================================= */

@media (max-width:760px){

  #page-bpjs{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  #page-bpjs > .panel{
    min-width:0;
    max-width:100%;
  }

  #page-bpjs .table-wrap{
    width:100%;
    max-width:100%;
    overflow:visible !important;
  }

  #page-bpjs .table-wrap > table{
    display:block;
    width:100%;
    min-width:0 !important;
  }

  #page-bpjs .table-wrap > table > thead{
    display:none;
  }

  #page-bpjs #bpjsClaimRows{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
  }

  #page-bpjs #bpjsClaimRows > tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--panel);
  }

  #page-bpjs #bpjsClaimRows > tr > td{
    display:block;

    width:auto;
    min-width:0;

    padding:0;
    border:0;

    white-space:normal;
    overflow-wrap:anywhere;
  }

  #page-bpjs #bpjsClaimRows > tr > td::before{
    display:block;
    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(1)::before{
    content:"Invoice / Tanggal";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(2)::before{
    content:"Pasien";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(3)::before{
    content:"No. Peserta";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(4)::before{
    content:"Nilai Klaim";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(5)::before{
    content:"Dibayar BPJS";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(6)::before{
    content:"Sisa BPJS";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(7)::before{
    content:"Status";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(8){
    grid-column:1 / -1;
    padding-top:4px;
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(8)::before{
    content:"Aksi";
  }

  #page-bpjs #bpjsClaimRows > tr > td:nth-child(8) button{
    max-width:100%;
    margin:2px 4px 2px 0;
  }

  /*
    Empty/error state tetap menjadi satu pesan,
    bukan card 8 kolom.
  */
  #page-bpjs #bpjsClaimRows > tr:has(td[colspan]){
    display:block;
    padding:0;
    border:0;
    background:transparent;
  }

  #page-bpjs #bpjsClaimRows > tr:has(td[colspan]) > td{
    display:block;
    width:100%;
    padding:26px 8px;
    text-align:center;
  }

  #page-bpjs #bpjsClaimRows > tr:has(td[colspan]) > td::before{
    content:none;
  }
}

/* OPTIKPRO BPJS CLAIM MOBILE CARD V1 END */

/* ============================================================
   OPTIKPRO MASTER SHIFT MOBILE CARD V1 START
   Scope: Master Shift card only
   Mobile only - desktop unchanged
   ============================================================ */

@media (max-width: 768px) {

  /* Setiap field Master Shift menjadi satu baris penuh */
  #workShiftRows tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #workShiftRows td {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Label tetap berada di atas nilai */
  #workShiftRows td::before {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    box-sizing: border-box !important;
  }

  /* Nilai panjang seperti nama cabang/lembur boleh membungkus */
  #workShiftRows td:nth-child(2),
  #workShiftRows td:nth-child(3),
  #workShiftRows td:nth-child(4),
  #workShiftRows td:nth-child(5) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Tombol aksi jangan melebar */
  #workShiftRows td:nth-child(7) button {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* OPTIKPRO MASTER SHIFT MOBILE CARD V1 END */

/* OPTIKPRO INTEROPERABILITY READINESS UI V1 */
.interop-notice{
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid var(--border,#ddd);
  border-radius:10px;
}
.interop-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.interop-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.interop-card strong{
  font-size:1.35rem;
}
.interop-card small{
  opacity:.75;
}
.interop-status{
  margin:10px 0;
  line-height:1.5;
}
@media(max-width:768px){
  .interop-grid{
    grid-template-columns:1fr;
  }
  #page-interoperability{
    min-width:0;
    overflow-x:hidden;
  }
  #page-interoperability .panel{
    min-width:0;
    max-width:100%;
  }
}

/* OPTIKPRO INTEROPERABILITY BRANCH FORM V1 */
.interop-form-panel{margin-bottom:16px}
.interop-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.interop-form-grid label{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.interop-form-grid input,
.interop-form-grid select{
  width:100%;
  max-width:100%;
  min-width:0;
}
.interop-form-panel .form-actions{
  margin-top:16px;
}
#interopBranchMessage{
  margin-top:10px;
}
@media(max-width:768px){
  .interop-form-grid{grid-template-columns:1fr}
  #interopSaveBranch{width:100%}
}
\n
/* OPTIKPRO INTEROPERABILITY PATIENT FORM V1 */
#interopPatientPanel{
  margin-bottom:16px;
}
#interopPatientPanel .interop-sensitive-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--border,#ddd);
  border-radius:8px;
  font-size:.9rem;
  line-height:1.45;
  opacity:.85;
}
#interopPatientMessage{
  margin-top:10px;
}
#interopPatientPanel input[readonly]{
  opacity:.85;
}
@media(max-width:768px){
  #interopSavePatient{
    width:100%;
  }
}
/* OPTIKPRO INTEROPERABILITY PATIENT FORM V1 END */
\n

/* OPTIKPRO INTEROPERABILITY PRACTITIONER FORM V1 */
#interopPractitionerPanel .interop-practitioner-wide{
  grid-column:1 / -1;
}

#interopPractitionerPanel label small{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.4;
  opacity:.75;
}

#interopPractitionerPanel .interop-check-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
}

#interopPractitionerPanel .interop-check-label input{
  width:auto;
  margin:0;
}

@media (max-width:700px){
  #interopPractitionerPanel .interop-practitioner-wide{
    grid-column:auto;
  }
}
/* OPTIKPRO INTEROPERABILITY PRACTITIONER FORM V1 END */


/* OPTIKPRO INTEROPERABILITY ENCOUNTER FORM V1 */
#interopEncounterPanel .interop-note{
  margin-top:4px;
}

#interopEncounterPanel input[readonly]{
  opacity:.85;
}

@media(max-width:700px){
  #interopEncounterPanel .interop-form-grid{
    grid-template-columns:1fr;
  }
}
/* OPTIKPRO INTEROPERABILITY ENCOUNTER FORM V1 END */

/* OPTIKPRO INTEROPERABILITY PRACTITIONER CHECKBOX ALIGN V3 */
#interopPractitionerPanel .interop-form-grid > .interop-check-label{
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  min-height:42px;
  text-align:left !important;
}

#interopPractitionerPanel .interop-form-grid > .interop-check-label input[type="checkbox"]{
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  flex:0 0 16px !important;
  margin:0 !important;
  padding:0 !important;
}
/* OPTIKPRO INTEROPERABILITY PRACTITIONER CHECKBOX ALIGN V3 END */

/* ============================================================
   OPTIKPRO BULK LENS PRODUCT CODE COLUMN UI V1
   Scope: Buat Produk Cabang Massal only
   Tujuan:
   - kode produk panjang terbaca utuh
   - tidak mengubah generator / value kode
   - tabel tetap scrollable pada viewport sempit
   ============================================================ */

#fLensBranchProductsBulk > .table-wrap{
  overflow-x:auto;
  max-width:100%;
}

#fLensBranchProductsBulk > .table-wrap table{
  min-width:720px;
}

#fLensBranchProductsBulk > .table-wrap th:nth-child(5),
#fLensBranchProductsBulk > .table-wrap td:nth-child(5){
  min-width:280px;
  width:280px;
}

#fLensBranchProductsBulk .lensBulkProductCode{
  width:100%;
  min-width:260px;
  box-sizing:border-box;
}

@media(max-width:600px){

  #fLensBranchProductsBulk > .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  #fLensBranchProductsBulk > .table-wrap table{
    min-width:680px;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(5),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(5){
    min-width:270px;
    width:270px;
  }

  #fLensBranchProductsBulk .lensBulkProductCode{
    min-width:250px;
    width:100%;
  }
}

/* ============================================================
   OPTIKPRO BULK LENS PRODUCT CODE COLUMN UI V1.1
   Desktop autofit refinement
   - desktop: no forced horizontal table width
   - product code receives largest available column
   - mobile keeps safe horizontal scroll
   ============================================================ */

@media(min-width:601px){

  #fLensBranchProductsBulk > .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  #fLensBranchProductsBulk > .table-wrap table{
    width:100%;
    min-width:0;
    table-layout:fixed;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(1),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(1){
    width:8%;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(2),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(2){
    width:14%;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(3),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(3){
    width:14%;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(4),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(4){
    width:14%;
  }

  #fLensBranchProductsBulk > .table-wrap th:nth-child(5),
  #fLensBranchProductsBulk > .table-wrap td:nth-child(5){
    width:50%;
    min-width:0;
  }

  #fLensBranchProductsBulk .lensBulkProductCode{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
}

/* =====================================================
   OPTIKPRO EMPLOYEE SUMMARY LOAD BUTTON ALIGN V1
   Scope: Rekap Karyawan only
   ===================================================== */
#employeeSummaryLoad {
  align-self: flex-end;
}


/* =========================================================
   OPTIKPRO MOBILE UI CLEANUP V1 START
   Scope:
   - menu icon mobile
   - absence approval mobile cards
   - employee summary mobile cards
   - transaction attachment mobile cards
   Desktop untouched
   ========================================================= */

@media (max-width:760px){

  /* =======================================================
     A. HEADER MENU ICON
     ======================================================= */

  #menuBtn{
    display:grid !important;
    place-items:center !important;

    flex:0 0 36px !important;

    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;

    height:36px !important;
    min-height:36px !important;

    padding:0 !important;

    font-size:22px !important;
    line-height:1 !important;
    font-weight:700;

    overflow:hidden;
  }

  .top-left{
    min-width:0;
    gap:10px !important;
  }

  .top-left > div{
    min-width:0;
  }

  #pageTitle{
    min-width:0;
  }


  /* =======================================================
     B. PERSETUJUAN KETIDAKHADIRAN
     ======================================================= */

  #sdmAbsenceApprovalPanel{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #sdmAbsenceApprovalPanel > .panel{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #sdmAbsenceApprovalPanel .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;

    overflow:visible !important;
  }

  #sdmAbsenceApprovalPanel .table-wrap > table{
    display:block;

    width:100%;
    max-width:100%;
    min-width:0 !important;
  }

  #sdmAbsenceApprovalPanel .table-wrap > table > thead{
    display:none;
  }

  #absenceApprovalRows{
    display:grid;

    grid-template-columns:1fr;
    gap:12px;

    width:100%;
    max-width:100%;
  }

  #absenceApprovalRows > tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--panel);
  }

  #absenceApprovalRows > tr > td{
    display:block;

    width:auto;
    min-width:0;

    padding:0;
    border:0;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #absenceApprovalRows > tr > td::before{
    display:block;

    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #absenceApprovalRows > tr > td:nth-child(1){
    grid-column:1 / -1;
    font-weight:700;
  }

  #absenceApprovalRows > tr > td:nth-child(1)::before{
    content:"Karyawan";
  }

  #absenceApprovalRows > tr > td:nth-child(2)::before{
    content:"Jenis";
  }

  #absenceApprovalRows > tr > td:nth-child(3)::before{
    content:"Periode";
  }

  #absenceApprovalRows > tr > td:nth-child(4)::before{
    content:"Hari";
  }

  #absenceApprovalRows > tr > td:nth-child(5){
    grid-column:1 / -1;
  }

  #absenceApprovalRows > tr > td:nth-child(5)::before{
    content:"Alasan";
  }

  #absenceApprovalRows > tr > td:nth-child(6)::before{
    content:"Status";
  }

  #absenceApprovalRows > tr > td:nth-child(7)::before{
    content:"Pengajuan";
  }

  #absenceApprovalRows > tr > td:nth-child(8){
    grid-column:1 / -1;

    padding-top:4px;
  }

  #absenceApprovalRows > tr > td:nth-child(8)::before{
    content:"Aksi";
  }

  #absenceApprovalRows > tr > td:nth-child(8) > div{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px !important;

    max-width:100%;
  }

  #absenceApprovalRows > tr > td[colspan]{
    grid-column:1 / -1;

    padding:14px;

    text-align:center;
  }

  #absenceApprovalRows > tr > td[colspan]::before{
    display:none !important;
    content:none !important;
  }


  /* =======================================================
     C. REKAP KARYAWAN
     14 columns -> mobile cards
     ======================================================= */

  #sdmEmployeeSummaryPanel{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #sdmEmployeeSummaryPanel .panel{
    max-width:100%;
    min-width:0;
  }

  #employeeSummaryTable{
    display:block;

    width:100%;
    max-width:100%;
    min-width:0 !important;

    table-layout:auto !important;
  }

  #employeeSummaryTable > thead{
    display:none;
  }

  #employeeSummaryRows{
    display:grid;

    grid-template-columns:1fr;
    gap:12px;

    width:100%;
    max-width:100%;
  }

  #employeeSummaryRows > tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--panel);
  }

  #employeeSummaryRows > tr > td{
    display:block;

    width:auto;
    min-width:0;

    padding:0;
    border:0;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #employeeSummaryRows > tr > td::before{
    display:block;

    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  #employeeSummaryRows > tr > td:nth-child(1){
    grid-column:1 / -1;

    padding-bottom:4px;

    font-size:15px;
    font-weight:700;
  }

  #employeeSummaryRows > tr > td:nth-child(1)::before{
    content:"Karyawan";
  }

  #employeeSummaryRows > tr > td:nth-child(2)::before{
    content:"Hadir";
  }

  #employeeSummaryRows > tr > td:nth-child(3)::before{
    content:"Terlambat";
  }

  #employeeSummaryRows > tr > td:nth-child(4)::before{
    content:"Izin";
  }

  #employeeSummaryRows > tr > td:nth-child(5)::before{
    content:"Sakit";
  }

  #employeeSummaryRows > tr > td:nth-child(6)::before{
    content:"Cuti";
  }

  #employeeSummaryRows > tr > td:nth-child(7)::before{
    content:"Alpa";
  }

  #employeeSummaryRows > tr > td:nth-child(8)::before{
    content:"Gaji Pokok";
  }

  #employeeSummaryRows > tr > td:nth-child(9)::before{
    content:"Tunjangan";
  }

  #employeeSummaryRows > tr > td:nth-child(10)::before{
    content:"Bonus";
  }

  #employeeSummaryRows > tr > td:nth-child(11)::before{
    content:"Potongan";
  }

  #employeeSummaryRows > tr > td:nth-child(12){
    grid-column:1 / -1;

    padding:10px 12px;

    border-radius:10px;

    background:rgba(15,118,110,.06);

    font-weight:700;
  }

  #employeeSummaryRows > tr > td:nth-child(12)::before{
    content:"Gaji Bersih";
  }

  #employeeSummaryRows > tr > td:nth-child(13)::before{
    content:"Status";
  }

  #employeeSummaryRows > tr > td:nth-child(14){
    grid-column:1 / -1;

    padding-top:4px;
  }

  #employeeSummaryRows > tr > td:nth-child(14)::before{
    content:"Aksi";
  }

  #employeeSummaryRows > tr > td:nth-child(14) > div{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px !important;

    max-width:100%;
  }

  #employeeSummaryRows > tr > td[colspan]{
    grid-column:1 / -1;

    padding:14px;

    text-align:center;

    font-size:13px;
    font-weight:400;
  }

  #employeeSummaryRows > tr > td[colspan]::before{
    display:none !important;
    content:none !important;
  }


  /* =======================================================
     D. DOKUMEN / BUKTI TRANSAKSI
     Scope hanya modal attachment yang memiliki
     tombol data-attachment-take-photo.
     ======================================================= */

  .modal-card:has([data-attachment-take-photo]){
    max-width:100% !important;
    min-width:0 !important;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;

    overflow:visible !important;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table{
    display:block;

    width:100%;
    max-width:100%;
    min-width:0 !important;

    table-layout:auto !important;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table > thead{
    display:none;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table > tbody{
    display:grid;

    grid-template-columns:1fr;
    gap:12px;

    width:100%;
    max-width:100%;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table > tbody > tr{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:10px 12px;

    width:100%;
    min-width:0;

    padding:14px;

    border:1px solid var(--line);
    border-radius:14px;

    background:#fff;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table > tbody > tr > td{
    display:block;

    width:auto;
    min-width:0;

    padding:0;
    border:0;

    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .modal-card:has([data-attachment-take-photo])
  .table-wrap > table > tbody > tr > td::before{
    display:block;

    margin-bottom:3px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(1)::before{
    content:"Waktu";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(2)::before{
    content:"Jenis";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(3){
    grid-column:1 / -1;
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(3)::before{
    content:"File";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(4){
    grid-column:1 / -1;
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(4)::before{
    content:"Catatan";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(5)::before{
    content:"Pengunggah";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(6){
    grid-column:1 / -1;
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td:nth-child(6)::before{
    content:"Aksi";
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td[colspan]{
    grid-column:1 / -1;

    padding:14px;

    text-align:center;
  }

  .modal-card:has([data-attachment-take-photo])
  tbody > tr > td[colspan]::before{
    display:none !important;
    content:none !important;
  }

}

/* OPTIKPRO MOBILE UI CLEANUP V1 END */

/* ==================================================
   OPTIKPRO MONTHLY SALES HISTORY V1
   Scoped transaction-history controls
   ================================================== */

#page-sales .monthly-sales-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 16px;
}

#page-sales .monthly-sales-period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

#page-sales .monthly-sales-period label {
  font-size: 13px;
  font-weight: 600;
}

#page-sales #salesHistoryMonth {
  box-sizing: border-box;
  width: 100%;
  max-width: 240px;
  min-height: 40px;
}

#page-sales .monthly-sales-count {
  font-size: 13px;
  color: #475569;
}

#page-sales .monthly-sales-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
}

#page-sales .monthly-sales-pagination button {
  min-height: 38px;
}

#page-sales #salesHistoryPageInfo {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 520px) {
  #page-sales .monthly-sales-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #page-sales .monthly-sales-period {
    width: 100%;
    min-width: 0;
  }

  #page-sales #salesHistoryMonth {
    max-width: none;
  }

  #page-sales .monthly-sales-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #page-sales #salesHistoryPageInfo {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #page-sales .monthly-sales-pagination button {
    width: 100%;
    min-width: 0;
  }
}
/* Tablet header: branch selector and account must wrap within the main pane. */
@media (min-width:761px) and (max-width:1024px) {
  .topbar {
    height:auto;
    min-height:82px;
    flex-wrap:wrap;
    gap:12px;
  }
  .topbar .top-left {
    min-width:0;
    flex:1 1 180px;
  }
  .topbar .top-actions {
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar #activeBranchWrap {
    min-width:0;
    max-width:100%;
  }
  .topbar #activeBranch {
    min-width:0;
    max-width:100%;
  }
}

/* Bulk preview columns differ from the editable power-selection table. */
#fLensBranchProductsBulk #lensBulkProductPreview .table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#fLensBranchProductsBulk #lensBulkProductPreview table{
  width:100%;
  min-width:560px;
  table-layout:fixed;
}
#lensBulkProductPreview th:first-child,
#lensBulkProductPreview td:first-child{
  width:40%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
#lensBulkProductPreview th:not(:first-child),
#lensBulkProductPreview td:not(:first-child){
  width:15%;
  white-space:nowrap;
}
#lensBulkProductPreview td{
  vertical-align:top;
  line-height:1.5;
}

/* Persistent bulk code validation, independent of preview table columns. */
#lensBulkCodeIssues{margin:12px 0;padding:16px;border:1px solid #e4a08d;border-radius:12px;background:#fff6f2;color:#783622;overflow-wrap:anywhere;}
#lensBulkCodeIssues[hidden]{display:none;}
#lensBulkCodeIssues ul{padding-left:22px;}
#lensBulkCodeIssues li{margin:12px 0;line-height:1.6;}
#lensBulkCodeIssues button{white-space:normal;max-width:100%;}
#lensBulkProductRows .lens-bulk-code-conflict{background:#fff1ed;}
#lensBulkProductRows input[aria-invalid="true"]{border:2px solid #b42318;outline-color:#b42318;}