/* ── DSM VIEW ── */
.dsm-layout {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden; gap: 0;
}

/* ── TOOLBAR ── */
.dsm-toolbar {
  display: flex; align-items: center;
  padding: 10px 16px; background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  flex-shrink: 0; gap: 8px;
  position: relative; z-index: 10; overflow: visible;
}
.dsm-toolbar > * { flex-shrink: 0; }
.dsm-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-hover); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--text-muted);
  flex: 1; min-width: 0;
}
.dsm-search-wrap input {
  border: none; background: none; outline: none;
  font-family: 'Poppins', sans-serif; font-size: 12px;
  color: var(--text-primary); flex: 1; min-width: 0;
}
.dsm-search-wrap input::placeholder { color: var(--text-muted); }

/* ── PAGINATION ── */
.dsm-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 8px 16px;
  background: var(--bg-page); border-bottom: 1px solid var(--border-card);
  flex-shrink: 0;
}
.dsm-page-btn {
  width: 28px; height: 28px; border: none;
  background: var(--bg-hover); border-radius: 8px;
  color: var(--text-muted); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.dsm-page-btn:hover:not(:disabled) { background: var(--brand-pale); color: var(--brand-primary); }
.dsm-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dsm-page-info {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  min-width: 80px; text-align: center;
}

/* ── TABLE WRAP ── */
.dsm-table-wrap {
  flex: 1; overflow: auto; scrollbar-width: thin;
  scrollbar-color: var(--border-card) transparent;
  cursor: grab;
}
.dsm-table-wrap.dragging { cursor: grabbing; user-select: none; }
.dsm-table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.dsm-table-wrap::-webkit-scrollbar-track { background: transparent; }
.dsm-table-wrap::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 4px; }

/* ── TABLE INNER ── */
.dsm-table-inner { display: block; min-width: 100%; }
.dsm-table-rekap {
  border-top: 2px solid var(--border-card);
  width: 100%;
}

/* ── TABLE BASE ── */
.dsm-table {
  border-collapse: collapse; font-size: 11px;
  white-space: nowrap; table-layout: fixed;
  width: 100%;
}
.dsm-table th, .dsm-table td {
  border: 1px solid rgba(0,0,0,0.25);
  padding: 6px 4px; text-align: center;
  overflow: hidden; text-overflow: ellipsis;
}
.dsm-table thead tr:nth-child(1) th {
  position: sticky; top: 0; z-index: 2;
}
.dsm-table thead tr:nth-child(2) th {
  position: sticky; top: 28px; z-index: 2;
}
.dsm-table td { color: var(--text-primary); font-weight: 700; }
.dsm-table tbody tr:hover td { background: var(--brand-pale) !important; }

/* kolom no dan nama sticky — desktop only */
@media (min-width: 769px) {
  .dsm-table th:nth-child(1),
  .dsm-table td:nth-child(1) {
    position: sticky; left: 0; z-index: 3;
  }
  .dsm-table th:nth-child(2),
  .dsm-table td:nth-child(2) {
    position: sticky; left: 36px; z-index: 3;
    text-align: left;
  }
}

/* footer total */
.dsm-table tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  border-top: 2px solid var(--border-card);
  font-size: 11px; color: #fff;
}

/* ── GROUP COLOR CLASSES (ganti inline style) ── */
.dsm-th-base   { background:#1a5fb4; color:#fff; }
.dsm-td-base   { background: var(--bg-hover); }
.dsm-td-total  { text-align:left; font-weight:700; background:#1a5fb4; color:#fff; }
.dsm-td-totalval { font-weight:700; color:#fff; }
.dsm-td-nama   { background: var(--bg-card); }
.dsm-nama-empty { background: #ffcccc !important; }
.dsm-highlight { background: #ffeb3b80 !important; border: 2px solid #f5a623 !important; }

/* total sum — warna kontras */
tfoot td.dsm-col-kemarin    { background:#1a5fb4; color:#fff; }
tfoot td.dsm-col-return     { background:#b02020; color:#fff; }
tfoot td.dsm-col-expired    { background:#c05020; color:#fff; }
tfoot td.dsm-col-konsinyasi { background:#6123a8; color:#fff; }
tfoot td.dsm-col-cash       { background:#1a7080; color:#fff; }
tfoot td.dsm-col-lainnya    { background:#2d6b2d; color:#fff; }
tfoot td.dsm-col-pay        { background:#b05c00; color:#fff; }

td.dsm-rk-order    { background:rgba(26,95,180,0.10); }
td.dsm-rk-fee      { background:rgba(97,35,168,0.10); }
td.dsm-rk-disable  { background:rgba(176,32,32,0.10); }
td.dsm-rk-output   { background:rgba(30,122,69,0.10); }
td.dsm-rk-saldo    { background:rgba(176,92,0,0.10); }
td.dsm-rk-pay      { background:rgba(26,112,128,0.10); }
td.dsm-rk-customer { background:rgba(112,64,192,0.13); }
td.dsm-rk-omset    { background:rgba(45,107,45,0.10); font-weight:700; color:#2d6b2d; }

/* header th — warna solid */
th.dsm-th-group, th.dsm-th-sub { color:#fff; }
th.dsm-th-group { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; }
th.dsm-th-sub   { font-weight:700; opacity:0.85; }

th.dsm-col-kemarin    { background:#1a5fb4; }
th.dsm-col-return     { background:#b02020; }
th.dsm-col-expired    { background:#c05020; }
th.dsm-col-konsinyasi { background:#6123a8; }
th.dsm-col-cash       { background:#1a7080; }
th.dsm-col-lainnya    { background:#2d6b2d; }
th.dsm-col-pay        { background:#b05c00; }

th.dsm-rk-order    { background:#1a5fb4; }
th.dsm-rk-fee      { background:#6123a8; }
th.dsm-rk-disable  { background:#b02020; }
th.dsm-rk-output   { background:#1e7a45; }
th.dsm-rk-saldo    { background:#b05c00; }
th.dsm-rk-pay      { background:#1a7080; }
th.dsm-rk-customer { background:#7040c0; }
th.dsm-rk-omset    { background:#2d6b2d; }

/* aksi btn */
.dsm-btn-aksi {
  width: 22px; height: 22px; border: none;
  background: var(--brand-pale); border-radius: 6px;
  color: var(--brand-primary); font-size: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.dsm-btn-aksi:hover { background: var(--brand-light); color: #fff; }

/* nilai kosong */
.dsm-td-empty { color: var(--text-muted) !important; }

/* ── STATUS BADGE ── */
.dsm-status-badge {
  display: inline-block; margin-left: 6px;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  cursor: pointer; vertical-align: middle;
}
.dsm-badge-tutup   { background: rgba(208,80,80,0.15); color: #d05050; }
.dsm-badge-pending { background: rgba(245,166,35,0.15); color: #f5a623; }
.dsm-badge-putus   { background: rgba(112,64,192,0.15); color: #7040c0; }

/* ── FOTO POPUP ── */
.dsm-foto-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dsm-foto-box {
  background: var(--bg-card); border-radius: 16px;
  padding: 16px; max-width: 480px; width: 100%;
}
.dsm-foto-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px; text-align: center;
}
.dsm-foto-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dsm-foto-item { display: flex; flex-direction: column; gap: 6px; }
.dsm-foto-item-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; text-align: center;
}
.dsm-foto-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; background: var(--bg-hover);
}
.dsm-foto-item-empty {
  width: 100%; aspect-ratio: 1; border-radius: 10px;
  background: var(--bg-hover); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 11px;
}
.dsm-foto-close {
  margin-top: 14px; width: 100%; height: 38px; border: none;
  background: var(--brand-pale); color: var(--brand-primary);
  border-radius: 10px; font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ── ANALISA TRIKOTOMI POPUP ── */
.dsm-analisa-overlay {
  display: none; position: fixed; inset: 0; z-index: 5000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.dsm-analisa-overlay.show { display: flex; }
.dsm-analisa-box {
  background: var(--bg-page); border-radius: 16px;
  width: 100%; max-width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow-lg);
}
.dsm-analisa-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: var(--bg-card);
  border-bottom: 1px solid var(--border-card); flex-shrink: 0;
}
.dsm-badge-fee { background: rgba(26,95,180,0.15); color: #1a5fb4; }
.dsm-badge-disable { background: rgba(176,32,32,0.15); color: #b02020; }
.dsm-analisa-title { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.dsm-analisa-subtitle { font-size: 12px; color: var(--brand-mid); font-weight: 600; margin-top: 3px; }
.dsm-analisa-close {
  width: 32px; height: 32px; border: none; background: var(--bg-hover);
  border-radius: 8px; color: var(--text-muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dsm-analisa-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--bg-card); border-bottom: 1px solid var(--border-card);
  flex-shrink: 0; overflow: visible;
  position: relative; z-index: 10;
}
.dsm-analisa-toolbar-row2 {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.dsm-analisa-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-hover); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; color: var(--text-muted);
  width: 160px; border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.dsm-analisa-search-wrap:focus-within {
  border-color: var(--brand-mid); background: var(--bg-card);
}
.dsm-analisa-search-wrap input {
  border: none; background: none; outline: none;
  font-family: 'Poppins', sans-serif; font-size: 12px;
  color: var(--text-primary); flex: 1; min-width: 0;
}
.dsm-analisa-search-wrap input::placeholder { color: var(--text-muted); }
.dsm-analisa-filter-chips {
  display: flex; gap: 6px; flex: 1;
  overflow-x: auto; scrollbar-width: none;
}
.dsm-analisa-filter-chips::-webkit-scrollbar { display: none; }
.dsm-analisa-chip {
  padding: 7px 14px; border: 1px solid var(--border-card);
  background: var(--bg-card); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.dsm-analisa-chip:hover {
  border-color: var(--brand-mid); color: var(--brand-primary); background: var(--brand-pale);
}
.dsm-analisa-chip.active {
  background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--shadow-sm);
}
.dsm-analisa-summary {
  display: flex; gap: 8px; padding: 12px 16px;
  background: var(--bg-page); flex-shrink: 0;
}
.dsm-analisa-sum-card {
  flex: 1; border-radius: 14px; padding: 12px 8px; text-align: center;
  border: 1px solid transparent; transition: transform .15s;
}
.dsm-analisa-sum-card.green  { background: rgba(58,154,98,0.10);  border-color: rgba(58,154,98,0.25); }
.dsm-analisa-sum-card.yellow { background: rgba(245,166,35,0.10); border-color: rgba(245,166,35,0.25); }
.dsm-analisa-sum-card.red    { background: rgba(208,80,80,0.10);  border-color: rgba(208,80,80,0.25); }
.dsm-analisa-sum-card.grey   { background: rgba(120,120,120,0.10);border-color: rgba(120,120,120,0.25); }
.dsm-analisa-sum-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.dsm-analisa-sum-card.green  .dsm-analisa-sum-val { color: #3a9a62; }
.dsm-analisa-sum-card.yellow .dsm-analisa-sum-val { color: #f5a623; }
.dsm-analisa-sum-card.red    .dsm-analisa-sum-val { color: #d05050; }
.dsm-analisa-sum-card.grey   .dsm-analisa-sum-val { color: #787878; }
.dsm-analisa-sum-label {
  font-size: 10px; color: var(--text-secondary); margin-top: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.dsm-analisa-groups { flex: 1; overflow-y: auto; padding: 12px 16px; }
.dsm-analisa-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  height: 100%;
}
.dsm-analisa-col {
  display: flex; flex-direction: column;
  background: var(--bg-card); border-radius: 14px;
  border: 1px solid var(--border-card);
  box-shadow: 0 2px 8px var(--shadow-sm);
  overflow: hidden; min-height: 0;
}
.dsm-analisa-col-header {
  font-size: 13px; font-weight: 700; padding: 12px;
  border-bottom: 1px solid var(--border-card); flex-shrink: 0;
  background: var(--bg-page);
}

/* warna per kategori — seluruh badan kolom ikut ke-tint */
.dsm-analisa-col-green  { border-color: rgba(58,154,98,0.3);  background: rgba(58,154,98,0.06); }
.dsm-analisa-col-yellow { border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.06); }
.dsm-analisa-col-red    { border-color: rgba(208,80,80,0.3);  background: rgba(208,80,80,0.06); }
.dsm-analisa-col-grey   { border-color: rgba(120,120,120,0.3);background: rgba(120,120,120,0.06); }

.dsm-analisa-col-green  .dsm-analisa-col-header { background: rgba(58,154,98,0.14); }
.dsm-analisa-col-yellow .dsm-analisa-col-header { background: rgba(245,166,35,0.14); }
.dsm-analisa-col-red    .dsm-analisa-col-header { background: rgba(208,80,80,0.14); }
.dsm-analisa-col-grey   .dsm-analisa-col-header { background: rgba(120,120,120,0.14); }

.dsm-analisa-col-green  .dsm-analisa-item { background: var(--bg-card); border-left: 3px solid rgba(58,154,98,0.5); }
.dsm-analisa-col-yellow .dsm-analisa-item { background: var(--bg-card); border-left: 3px solid rgba(245,166,35,0.5); }
.dsm-analisa-col-red    .dsm-analisa-item { background: var(--bg-card); border-left: 3px solid rgba(208,80,80,0.5); }
.dsm-analisa-col-grey   .dsm-analisa-item { background: var(--bg-card); border-left: 3px solid rgba(120,120,120,0.5); }
.dsm-analisa-col-list {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.dsm-analisa-col-empty {
  font-size: 11px; color: var(--text-muted); text-align: center; padding: 20px 0;
}
.dsm-analisa-item {
  background: var(--bg-page); border-radius: 10px;
  padding: 11px 13px; transition: background .15s;
}
.dsm-analisa-item:hover { background: var(--bg-hover); }
.dsm-analisa-item-nama { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dsm-analisa-item-info { display: flex; align-items: center; gap: 8px; margin-top: 5px; justify-content: space-between; }
.dsm-analisa-item-badge {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.dsm-analisa-item-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ── CATATAN CUSTOMER ── */
.dsm-analisa-item-catatan {
  margin-top: 8px; padding: 8px 10px;
  background: var(--brand-pale); border-radius: 8px;
  font-size: 11.5px; color: var(--text-primary); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 6px;
  max-width: 100%;
}
.dsm-analisa-item-catatan i { color: var(--brand-primary); margin-top: 2px; flex-shrink: 0; }
.dsm-analisa-item-catatan-text {
  flex: 1; min-width: 0;
  word-break: break-word; overflow-wrap: break-word;
  white-space: pre-wrap;
}
.dsm-analisa-item-catatan-btn {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--border-card); background: var(--bg-card);
  border-radius: 6px; font-size: 10px;
  color: var(--brand-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.dsm-analisa-item-catatan-btn:hover { background: var(--brand-pale); border-color: var(--brand-mid); }
.dsm-catatan-textarea {
  width: 100%; margin-top: 6px; padding: 10px;
  border: 1px solid var(--border-card); border-radius: 10px;
  background: var(--bg-page); font-family: 'Poppins', sans-serif;
  font-size: 13px; color: var(--text-primary); outline: none;
  resize: vertical; min-height: 90px;
  transition: border-color .15s;
}
.dsm-catatan-textarea:focus { border-color: var(--brand-primary); }
.dsm-catatan-counter {
  text-align: right; font-size: 10.5px; color: var(--text-muted);
  margin-top: 4px;
}

/* ── POPUP INFO PENJELASAN TRIKOTOMI ── */
.dsm-info-overlay {
  display: none; position: fixed; inset: 0; z-index: 6000;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 20px;
}
.dsm-info-overlay.show { display: flex; }
.dsm-info-box {
  background: var(--bg-page); border-radius: 16px;
  width: 100%; max-width: 480px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow-lg);
}
.dsm-info-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: var(--bg-card);
  border-bottom: 1px solid var(--border-card); flex-shrink: 0;
}
.dsm-info-title { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; }
.dsm-info-close {
  width: 32px; height: 32px; border: none; background: var(--bg-hover);
  border-radius: 8px; color: var(--text-muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dsm-info-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.dsm-info-section {
  display: flex; gap: 12px;
  padding: 13px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-card);
  box-shadow: 0 1px 4px var(--shadow-sm);
}
.dsm-info-section-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.dsm-info-section-icon.green  { background: rgba(58,154,98,0.15); color: #3a9a62; }
.dsm-info-section-icon.yellow { background: rgba(245,166,35,0.15); color: #f5a623; }
.dsm-info-section-icon.red    { background: rgba(208,80,80,0.15); color: #d05050; }
.dsm-info-section-icon.grey   { background: rgba(120,120,120,0.15); color: #787878; }
.dsm-info-section-icon.blue   { background: rgba(26,95,180,0.15); color: #1a5fb4; }
.dsm-info-section-text { flex: 1; min-width: 0; }
.dsm-info-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
}
.dsm-info-section-desc {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
}
.dsm-info-section-desc b { color: var(--text-primary); }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .dsm-layout {
    padding-bottom: 80px;
  }
  .dsm-toolbar {
    flex-wrap: wrap; padding: 8px 10px;
    overflow: visible;
  }
  .dsm-search-wrap {
    order: 99; flex: 1 1 auto; width: auto;
  }
  .dsm-search-wrap input { width: 100%; }
  #dsmAnalisaBtn {
    order: 99;
    flex-shrink: 0;
  }
  .dsm-analisa-overlay { padding: 0; }
  .dsm-analisa-box { border-radius: 0; }

  .dsm-analisa-toolbar {
    flex-wrap: wrap;
    padding: 8px 10px;
  }
  .dsm-analisa-filter-chips {
    order: 1; flex: 1 1 100%;
    gap: 4px;
  }
  .dsm-analisa-chip {
    flex: 1 1 0; min-width: 0;
    padding: 6px 4px; font-size: 10.5px;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dsm-analisa-toolbar-row2 {
    order: 2; flex: 1 1 100%;
    gap: 6px;
  }
  .dsm-analisa-search-wrap {
    flex: 1; width: auto; min-width: 0;
    padding: 6px 8px;
  }
  .dsm-analisa-toolbar-row2 .peta-filter-btn {
    padding: 0 8px; font-size: 11px; gap: 4px;
  }
  #dsmAnalisaHapusCatatanBtn,
  #dsmAnalisaNotifBtn {
    flex-shrink: 0;
  }

  .dsm-analisa-grid {
    display: flex;
    grid-template-columns: unset;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .dsm-analisa-col {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}