/* ==========================================================================
   PAGE / quotation-detail.css
   --------------------------------------------------------------------------
   Layout detail quotation — versi modern-minimalist.
   Menggantikan accordion produk dengan dua mode tampilan yang bisa
   di-toggle customer: Table (rapi, padat) dan List (kartu horizontal,
   lebih mudah dipindai di HP / oleh customer non-teknis).

   DEPENDS ON: design-system/index.css (token + semua komponen)
   Semua warna/spacing/radius/shadow WAJIB pakai token semantik, TIDAK ADA
   nilai hardcoded — konsisten dengan aturan _spacing.css & _semantic.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PAGE WRAPPER
   -------------------------------------------------------------------------- */
.quotation-detail-page {
  display:        flex;
  flex-direction: column;
  gap:             var(--spacing-gap-lg);   /* 24px antar section besar */
}


/* --------------------------------------------------------------------------
   1. HERO — identitas quotation + data customer
   Struktur DOM sama seperti detail.php lama (.quotation-hero,
   .quotation-hero-identity, .quotation-hero-data) supaya JS existing
   (quotation-detail.js, data-no-quotation dsb) tetap jalan tanpa
   perlu ubah selector.
   -------------------------------------------------------------------------- */
.quotation-hero {
  display:          flex;
  flex-wrap:        wrap;
  justify-content:  space-between;
  gap:              var(--size-800);
  padding:          var(--spacing-card-md);
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
}

.quotation-hero-identity {
  display:        flex;
  flex-direction: column;
  gap:            var(--size-400);
  min-width:      260px;
  flex:           1 1 320px;
}

.quotation-hero-name-block {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          var(--size-300);
}

.quotation-hero-name {
  font-size:      var(--text-heading-lg-size);
  font-weight:    var(--text-heading-lg-weight);
  line-height:    var(--text-heading-lg-leading);
  color:          var(--color-text-primary);
  margin:         0;
  letter-spacing: var(--tracking-tight);
}

.quotation-hero-customer {
  font-size:   var(--text-body-size);
  color:       var(--color-text-secondary);
  margin:      0;
}

.quotation-hero-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--size-200);
  margin-top: var(--size-100);
}

/* Panel kanan — grid data customer, 2 kolom di desktop */
.quotation-hero-data {
  display:               grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap:                   var(--size-500) var(--size-800);
  flex:                  1 1 420px;
  align-content:         start;
}

@media (max-width: 767px) {
  .quotation-hero { flex-direction: column; }
  .quotation-hero-data { grid-template-columns: 1fr; }
}

.data-item {
  display: flex;
  gap:     var(--size-300);
  min-width: 0;
}

.data-item-icon {
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--size-1000);
  height:           var(--size-1000);
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand);
  border-radius:    var(--radius-lg);
}

.data-item-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.data-item-content { min-width: 0; }

.data-item-label {
  font-size:      var(--text-label-sm-size);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin:         0 0 var(--size-100);
}

.data-item-value {
  font-size:   var(--text-body-sm-size);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   2. SUMMARY STAT CARDS — Diskon / Pajak / Grand Total
   Memakai pola .stat-card yang sudah ada di design system supaya total
   quotation langsung terlihat tanpa harus expand accordion.
   -------------------------------------------------------------------------- */
.quotation-summary-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   var(--spacing-gap-md);
}

.quotation-summary-cards .stat-card-value {
  font-size: var(--text-heading-md-size);
}

.quotation-summary-cards .stat-card-grand-total {
  border-color: var(--color-brand);
  background-color: var(--color-brand-subtle);
}
.quotation-summary-cards .stat-card-grand-total .stat-card-label,
.quotation-summary-cards .stat-card-grand-total .stat-card-value {
  color: var(--color-brand-text);
}
.quotation-summary-cards .stat-card-grand-total .stat-card-icon {
  background-color: var(--color-brand);
  color:            var(--color-text-inverse);
}


/* --------------------------------------------------------------------------
   3. SECTION SHELL — pengganti .accordion-container untuk Items & Notes
   Section biasa (bukan collapsible) supaya konten produk LANGSUNG
   terlihat oleh customer, tanpa perlu klik expand.
   -------------------------------------------------------------------------- */
.quotation-section {
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
  overflow:         hidden;
}

.quotation-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--size-400);
  flex-wrap:       wrap;
  padding:         var(--size-500) var(--spacing-card-sm);
  border-bottom:   1px solid var(--color-border-default);
}

.quotation-section-heading {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
}

.quotation-section-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--size-1000);
  height:           var(--size-1000);
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand);
  border-radius:    var(--radius-lg);
  flex-shrink:      0;
}
.quotation-section-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.quotation-section-title {
  font-size:   var(--text-heading-xs-size);
  font-weight: var(--text-heading-xs-weight);
  line-height: var(--text-heading-xs-leading);
  color:       var(--color-text-primary);
  margin:      0;
}

.quotation-section-desc {
  font-size: var(--text-body-sm-size);
  color:     var(--color-text-secondary);
  margin:    var(--size-50) 0 0;
}

.quotation-section-meta {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
}

.quotation-section-body { padding: var(--spacing-card-sm); }

/* Body tanpa padding — dipakai saat isi section adalah tabel full-bleed */
.quotation-section-body-flush { padding: 0; }


/* --------------------------------------------------------------------------
   4. VIEW TOGGLE — Table / List switch untuk Items
   Pola segmented control sederhana, dibangun dari token yang sama
   dengan .btn supaya menyatu visual, tanpa perlu komponen baru.
   -------------------------------------------------------------------------- */
.view-toggle {
  display:          inline-flex;
  align-items:      center;
  padding:          var(--size-50);
  background-color: var(--color-bg-sunken);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-lg);
  gap:              var(--size-50);
}

.view-toggle-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--size-200);
  padding:          var(--size-200) var(--size-400);
  font-size:        var(--text-label-sm-size);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-secondary);
  background:       transparent;
  border:           none;
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       var(--transition-interactive);
}

.view-toggle-btn svg {
  width:  var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
}

.view-toggle-btn:hover {
  color:            var(--color-text-primary);
  background-color: var(--color-bg-elevated);
}

.view-toggle-btn[aria-pressed="true"] {
  background-color: var(--color-bg-surface);
  color:             var(--color-brand-text);
  box-shadow:        var(--shadow-xs);
}

.view-toggle-btn:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   5. ITEMS — TABLE VIEW
   Tabel data produk dipakai lewat class data-table yang sudah ada di
   design system (organisms/data-table). Override kecil di bawah untuk
   menyesuaikan kolom angka & produk supaya rapi rata kanan/kiri.
   -------------------------------------------------------------------------- */
.quotation-items-table .data-table-td,
.quotation-items-table .data-table-th { vertical-align: middle; }

/* data-table-td default punya white-space:nowrap (didesain utk data admin
   yang ringkas) — di sini kita override khusus kolom produk supaya nama
   produk panjang tetap bisa wrap rapi, tidak mendorong tabel melebar/scroll. */
.quotation-items-table .data-table-td:first-child {
  white-space: normal;
  min-width:   200px;
}

.quotation-item-product {
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
}

.quotation-item-sku {
  color:     var(--color-text-secondary);
  font-size: var(--text-caption-size);
}


/* --------------------------------------------------------------------------
   6. ITEMS — LIST VIEW (kartu horizontal)
   Satu baris = satu produk, dibaca seperti "kuitansi" — mudah dipindai
   customer awam tanpa perlu mengerti struktur tabel.
   -------------------------------------------------------------------------- */
.quotation-item-list {
  display:        flex;
  flex-direction: column;
}

.quotation-item-row {
  display:         flex;
  align-items:     center;
  gap:             var(--size-400);
  padding:         var(--size-500) var(--spacing-card-sm);
  border-bottom:   1px solid var(--color-border-default);
}

.quotation-item-row:last-child { border-bottom: none; }

.quotation-item-row-icon {
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--size-avatar-md);
  height:           var(--size-avatar-md);
  background-color: var(--color-bg-sunken);
  color:            var(--color-text-secondary);
  border-radius:    var(--radius-lg);
}
.quotation-item-row-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.quotation-item-row-main {
  flex:      1 1 auto;
  min-width: 0;
}

.quotation-item-row-name {
  font-size:   var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
  margin:      0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.quotation-item-row-sub {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--size-100) var(--size-300);
  margin:      var(--size-100) 0 0;
  font-size:   var(--text-body-sm-size);
  color:       var(--color-text-secondary);
}

.quotation-item-row-sub .dot-sep::before {
  content:      '·';
  margin-right: var(--size-300);
  color:        var(--color-border-strong);
}

.quotation-item-row-numbers {
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  gap:            var(--size-600);
  text-align:     right;
}

.quotation-item-row-qty {
  min-width: 64px;
  font-size: var(--text-body-sm-size);
  color:     var(--color-text-secondary);
}

.quotation-item-row-qty strong {
  color:       var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.quotation-item-row-discount {
  min-width: 56px;
  font-size: var(--text-body-sm-size);
  color:     var(--color-warning-text);
}

.quotation-item-row-subtotal {
  min-width:   110px;
  font-size:   var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
}

@media (max-width: 639px) {
  .quotation-item-row {
    flex-wrap: wrap;
  }
  .quotation-item-row-numbers {
    width:           100%;
    justify-content: space-between;
    padding-left:    calc(var(--size-avatar-md) + var(--size-400));
    gap:             var(--size-300);
  }
}

/* Empty state — dipakai baik utk table maupun list saat items kosong */
.quotation-items-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            var(--size-300);
  padding:        var(--size-1600) var(--size-400);
  color:          var(--color-text-secondary);
  text-align:     center;
}
.quotation-items-empty svg {
  width:  var(--size-icon-2xl);
  height: var(--size-icon-2xl);
  color:  var(--color-text-disabled);
}


/* --------------------------------------------------------------------------
   7. SUMMARY FOOTER (dipakai di dalam section Items — total ringkas)
   -------------------------------------------------------------------------- */
.quotation-summary {
  display:         flex;
  flex-direction:  column;
  gap:             var(--size-200);
  padding:         var(--size-500) var(--spacing-card-sm);
  background-color: var(--color-bg-sunken);
  border-top:      1px solid var(--color-border-default);
}

.quotation-summary-row {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--text-body-sm-size);
  color:           var(--color-text-secondary);
}

.quotation-summary-row-total {
  padding-top: var(--size-300);
  margin-top:  var(--size-100);
  border-top:  1px dashed var(--color-border-default);
  font-size:   var(--text-heading-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}


/* --------------------------------------------------------------------------
   8. NOTES SECTION
   Catatan customer vs internal dibedakan SANGAT jelas secara visual:
   internal notes dapat panel warna warning + badge "Internal Only"
   supaya siapapun yang lihat layar (mis. screen-share ke customer)
   langsung sadar bagian itu tidak boleh terekspos.
   -------------------------------------------------------------------------- */
.quotation-note-block + .quotation-note-block { margin-top: var(--size-600); }

.quotation-note-block-header {
  display:     flex;
  align-items: center;
  gap:         var(--size-200);
  margin-bottom: var(--size-200);
}

.quotation-note-block-header .data-item-label { margin: 0; }

.quotation-note-body {
  font-size:   var(--text-body-sm-size);
  color:       var(--color-text-primary);
  line-height: var(--leading-normal);
  margin:      0;
  white-space: pre-line;
}

/* Panel khusus internal notes — background warning-subtle + border kiri tebal */
.quotation-note-internal {
  padding:          var(--size-400);
  background-color: var(--color-warning-subtle);
  border:           1px solid var(--color-warning-border);
  border-left:      3px solid var(--color-warning);
  border-radius:    var(--radius-lg);
}

.quotation-note-internal .quotation-note-body { color: var(--color-warning-text); }

/* Badge "Internal Only" — dipakai langsung .badge.badge-filled-warning.badge-sm
   dari atoms/badge/badge.css (background solid amber + teks gray-900, paling
   mencolok utk internal-only). Override kecil di bawah hanya utk mengakomodasi
   ikon lock di dalamnya, karena badge-sm dasar didesain teks-only. */
.badge-internal-flag {
  gap:     var(--size-100);
  padding-inline: var(--size-300);
}
.badge-internal-flag svg {
  width:  10px;
  height: 10px;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   9. STATUS BADGE MAPPING
   Design system HANYA punya varian semantik (brand/success/warning/error/
   info + default netral) — bukan warna literal (gray/blue/indigo/green/
   red/amber) seperti di STATUS_META lama. Mapping status quotation ke
   varian semantik yang paling sesuai maknanya:

     draft    → default (netral abu, belum ada aksi)
     sent     → badge-info    (biru, sedang berjalan/menunggu respon)
     reviewed → badge-brand   (sudah ditinjau tim internal)
     accepted → badge-success (hijau, disetujui customer)
     rejected → badge-error   (merah, ditolak)
     expired  → badge-warning (kuning, kedaluwarsa/butuh perhatian)

   Lihat catatan pemakaian di quotation-detail-view.php ($statusMeta).
   -------------------------------------------------------------------------- */