/* ============================================================================
   MYWAFFIY — Stylesheet
   Tema default: Teal. Tema alternatif: Niagawan Blue (lihat html[data-theme="blue"]).
   Font: system-ui (ikut sistem OS, tiada Google Font)
   ============================================================================ */

:root {
  /* === Brand: Maroon primary, shadcn-inspired neutrals === */
  --mw-blue: #800020;           /* Maroon brand primary */
  --mw-blue-dark: #5a0016;      /* Maroon dark (hover) */
  --mw-blue-light: #fff1f3;     /* Maroon light tint */
  --mw-blue-rgb: 128, 0, 32;    /* Maroon RGB (for rgba()) */

  --mw-sidebar-bg: #ffffff;     /* white sidebar */
  --mw-text-dark: #0f172a;      /* slate-900 */
  --mw-text-muted: #64748b;     /* slate-500 */
  --mw-green: #16a34a;
  --mw-red: #dc2626;
  --mw-border: #e2e8f0;         /* slate-200 */
  --mw-cream: #f8fafc;          /* slate-50 page bg */

  /* Gold accent (UI elements only — sparingly) */
  --mw-gold: #b5870a;

  /* Legacy aliases */
  --mw-maroon: var(--mw-blue);
  --mw-maroon-dark: var(--mw-blue-dark);
  --mw-text: var(--mw-text-dark);
}

/* ---------- Tema alternatif: Gold accent ---------- */
html[data-theme="blue"] {
  --mw-blue: #800020;
  --mw-blue-dark: #5a0016;
  --mw-blue-light: #fff1f3;
  --mw-blue-rgb: 128, 0, 32;
}

/* Swatch bulat kecil — pilihan tema dalam dropdown user (topbar) */
.mw-theme-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--mw-border); cursor: pointer; padding: 0;
}
.mw-theme-swatch.active { box-shadow: 0 0 0 2px var(--mw-text-dark); }

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--mw-cream);
  color: var(--mw-text-dark);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mw-text-dark);
  font-weight: 700;
}

a { color: var(--mw-blue); text-decoration: none; }
a:hover { color: var(--mw-blue-dark); }

/* ---------- Buttons ---------- */
.btn-mw-primary {
  background-color: var(--mw-blue);
  border-color: var(--mw-blue);
  color: #fff;
}
.btn-mw-primary:hover, .btn-mw-primary:focus {
  background-color: var(--mw-blue-dark);
  border-color: var(--mw-blue-dark);
  color: #fff;
}
.btn-mw-accent {
  background-color: var(--mw-blue-light);
  border-color: var(--mw-blue);
  color: var(--mw-blue-dark);
  font-weight: 600;
}
.btn-mw-outline {
  background: #fff;
  border: 1px solid var(--mw-blue);
  color: var(--mw-blue);
  font-weight: 600;
}
.btn-mw-outline:hover { background: var(--mw-blue-light); color: var(--mw-blue-dark); }
.btn-mw-whatsapp { background-color: var(--mw-green); border-color: var(--mw-green); color: #fff; font-weight: 600; }
.btn-mw-whatsapp:hover { background-color: #1ebc59; border-color: #1ebc59; color:#fff; }
.btn-mw-danger-outline { background:#fff; border:1px solid var(--mw-red); color: var(--mw-red); font-weight:600; }
.btn-mw-danger-outline:hover { background:#fdeeee; color:#b02a37; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F4F7FA 60%, var(--mw-blue-light) 100%);
}
.login-card {
  background: #fff;
  border-radius: 10px;
  padding: 40px 36px;
  width: 380px;
  box-shadow: 0 10px 30px rgba(var(--mw-blue-rgb), 0.15);
}
.login-card .accent-bar {
  width: 48px;
  height: 4px;
  background: var(--mw-blue);
  margin: 8px 0 22px;
}

/* ---------- App Shell ---------- */
.mw-shell { display: flex; min-height: 100vh; }

.mw-sidebar {
  width: 250px;
  background: var(--mw-sidebar-bg);
  color: var(--mw-text-dark);
  flex-shrink: 0;
  min-height: 100vh;
  border-right: 1px solid var(--mw-border);
}
.mw-sidebar .brand {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--mw-blue);
  font-size: 19px;
  font-weight: 800;
  padding: 10px 20px;
  border-bottom: 1px solid var(--mw-border);
  letter-spacing: .3px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw-sidebar .brand .brand-logo { max-width: 100%; max-height: 64px; object-fit: contain; }
.mw-sidebar .brand small { display:block; font-family: 'DM Sans', system-ui, sans-serif; font-size:11px; color: var(--mw-text-muted); font-weight:500; letter-spacing:.3px; }

.mw-sidebar nav { padding: 8px 0; }

.mw-nav-group { border-bottom: 1px solid transparent; }
.mw-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.mw-nav-group-toggle .mw-nav-icon { color: var(--mw-blue); width: 18px; display:inline-flex; justify-content:center; margin-right: 10px; font-size: 15px; }
.mw-nav-group-toggle .mw-chevron { color: var(--mw-text-muted); font-size: 11px; transition: transform .15s; }
.mw-nav-group-toggle:hover { background: rgba(var(--mw-blue-rgb),.05); color: var(--mw-text-dark); }
.mw-nav-group.open .mw-chevron { transform: rotate(180deg); }
.mw-nav-group.has-active .mw-nav-group-toggle { color: var(--mw-blue); }
.mw-nav-group.has-active .mw-nav-group-toggle .mw-nav-icon { color: var(--mw-blue); }

.mw-nav-sublist { list-style:none; margin:0; padding: 2px 0 8px; display:none; }
.mw-nav-group.open .mw-nav-sublist { display:block; }
.mw-nav-sublist .nav-link {
  display:block;
  color: var(--mw-text-muted);
  padding: 7px 18px 7px 46px;
  font-size: 13px;
  border-radius: 0;
  transition: color .1s, background .1s;
}
.mw-nav-sublist .nav-link:hover { background: rgba(var(--mw-blue-rgb),.06); color: var(--mw-blue-dark); }
.mw-nav-sublist .nav-link.active {
  background: var(--mw-blue);
  color: #fff;
  font-weight: 600;
  margin: 2px 10px;
  border-radius: 7px;
  padding-left: 36px;
  width: calc(100% - 20px);
}
.mw-nav-sublist span.nav-link[style] { padding-left: 46px !important; }

.mw-main { flex: 1; min-width: 0; }
.mw-topbar {
  background: #fff;
  border-bottom: 1px solid var(--mw-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.mw-topbar h5 { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.mw-content { padding: 28px; }

.mw-card {
  background: #fff;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
.mw-stat-value { font-family: system-ui, sans-serif; font-size: 28px; font-weight:700; color: var(--mw-blue-dark); }
.mw-stat-label { font-size: 12px; color: var(--mw-text-muted); text-transform: uppercase; letter-spacing:.4px; }

.badge-status-paid { background:#1a9e4f; }
.badge-status-unpaid { background:var(--mw-red); }
.badge-status-partial { background:#d99a1a; }
.badge-status-not_deliver { background:var(--mw-red); }
.badge-status-delivered { background:#1a9e4f; }
.badge-status-new { background:#6c757d; }
.badge-status-confirm { background:#1a9e4f; }
.badge-status-converted { background:var(--mw-blue); }
.badge-status-cancelled { background:#6c757d; }
.badge-status-to_receive { background:#d99a1a; }
.badge-status-received { background:#1a9e4f; }
.badge-status-active { background:#1a9e4f; }
.badge-status-inactive { background:#6c757d; }

/* --- Product unit lifecycle (Product/Service & Warranty modules) [P4] --- */
.badge-status-in_stock { background:#6c757d; }
.badge-status-sold { background:#1a9e4f; }
.badge-status-under_warranty { background:var(--mw-blue); }
.badge-status-service { background:#d99a1a; }

/* --- Phase 4: Service Ticket --- */
.badge-status-open { background:var(--mw-red); }
.badge-status-in_progress { background:#d99a1a; }
.badge-status-closed { background:#1a9e4f; }

/* --- Phase 4: Warranty --- */
.badge-status-expired { background:var(--mw-red); }
.badge-status-claimed { background:var(--mw-blue); }

/* --- Phase 4: Maintenance Schedule --- */
.badge-status-upcoming { background:var(--mw-blue); }
.badge-status-notified { background:#d99a1a; }
.badge-status-done { background:#1a9e4f; }

/* --- Phase 4: Installment Plan / Payment Schedule --- */
.badge-status-pending { background:#d99a1a; }
.badge-status-overdue { background:var(--mw-red); }
.badge-status-completed { background:#1a9e4f; }
.badge-status-defaulted { background:var(--mw-red); }

/* --- Phase 4: Overdue followup --- */
.badge-status-contacted { background:#d99a1a; }
.badge-status-resolved { background:#1a9e4f; }

/* --- Phase 4: Service Ticket priority --- */
.badge-status-low { background:#6c757d; }
.badge-status-normal { background:var(--mw-blue); }
.badge-status-high { background:#d99a1a; }
.badge-status-urgent { background:var(--mw-red); }

/* --- Phase 5: Commission Transaction (beza dengan badge-status-approve sedia ada — itu Receipt) --- */
.badge-status-approved { background:var(--mw-blue); }

/* --- Phase 5: WhatsApp Queue (pending/cancelled reuse class sedia ada di atas) --- */
.badge-status-sent { background:#1a9e4f; }
.badge-status-failed { background:var(--mw-red); }

.table thead th { font-size:12px; text-transform:uppercase; color:var(--mw-text-muted); border-bottom:2px solid var(--mw-border); }
.table td { vertical-align: middle; font-size: 14px; }

/* ---------- Item rows (Quotation/Invoice form) — drag reorder + multi-line description ---------- */
.item-desc { resize:vertical; min-height:31px; overflow:hidden; }
.drag-handle { cursor:move; }
.drag-handle:active { cursor:grabbing; }
.title-row td { background:#f8f6f0; }
.ui-sortable-placeholder { visibility: visible !important; background:#f1f3f5; border:1px dashed var(--mw-border); }

.gold-underline { width:36px; height:3px; background: var(--mw-blue); margin-bottom:14px; }

/* ---------- Document view (Quotation / DO / Invoice print-style page) ---------- */
.mw-doc-wrap { display:flex; gap:20px; align-items:flex-start; }
.mw-doc-paper { background:#fff; border:1px solid var(--mw-border); border-radius:8px; padding:36px 40px; flex:1; min-width:0; }
.mw-doc-actions { width: 210px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.mw-doc-actions .btn { width:100%; font-size:14px; padding:9px 12px; }
.mw-doc-actions hr { margin: 6px 0; border-color: var(--mw-border); }
.mw-doc-logo { max-height:70px; max-width:200px; object-fit:contain; }
.mw-doc-title { font-size:30px; font-weight:700; letter-spacing:.5px; color:var(--mw-text-dark); text-align:right; }
.mw-doc-company { text-align:right; font-size:12.5px; color:var(--mw-text-dark); line-height:1.55; max-width:300px; margin-left:auto; }
.mw-doc-company strong { font-size:13.5px; }
.mw-doc-meta-label { color: var(--mw-text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.mw-doc-table th { font-size:12px; text-transform:uppercase; color:var(--mw-text-muted); border-bottom:2px solid var(--mw-border); padding-bottom:8px; }
.mw-doc-table td { padding:10px 8px; font-size:13.5px; border-bottom:1px solid #f1f3f5; }
.mw-doc-item-spec { font-size:12.5px; color:var(--mw-text-muted); white-space:pre-line; }
.mw-doc-total-row td { border-top:2px solid var(--mw-border); border-bottom:none; font-weight:700; font-size:15px; }
.mw-doc-terms { font-size:11.5px; color:var(--mw-text-muted); margin-top:30px; white-space:pre-line; line-height:1.6; }

/* ---------- Copy Link modal (Whatsapp-style share text) ---------- */
.mw-copylink-box { position: relative; }
.mw-copylink-box textarea, .mw-copylink-box input { resize: vertical; padding-right: 42px; font-size: 13.5px; }
.mw-copylink-btn { position: absolute; top: 8px; right: 8px; padding: 4px 9px; line-height:1; }
.mw-copylink-box input ~ .mw-copylink-btn { top: 4px; }

/* ---------- Searchable picker (gantikan <select> biasa — cth: Customer dalam Quotation) ---------- */
.mw-search-select { position: relative; }
/* Versi inline untuk baris item dynamic (cth: pilih Product dalam baris Quotation/PO/PI/Goods Received) */
.mw-inline-search-select { position: relative; min-width: 140px; }
.mw-search-select-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1070;
  background: #fff; border: 1px solid var(--mw-border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
}
.mw-search-select-item { padding: 8px 14px; font-size: 13.5px; cursor: pointer; }
.mw-search-select-item:hover { background: var(--mw-blue-light); }

/* ---------- Dashboard (tab Business / Admin / Sale — ikut struktur Niagawan) ---------- */
.mw-dash-tabs { border-bottom: none; gap: 4px; }
.mw-dash-tabs .nav-link {
  border: 1px solid var(--mw-border); border-radius: 8px 8px 0 0; color: var(--mw-text-muted);
  font-weight: 600; font-size: 13.5px; padding: 7px 18px;
}
.mw-dash-tabs .nav-link.active {
  color: var(--mw-blue-dark); background: #fff; border-color: var(--mw-border) var(--mw-border) #fff;
}
.dash-quicklinks .mw-card { padding: 16px 10px; transition: box-shadow .15s; }
.dash-quicklinks .mw-card:hover { box-shadow: 0 4px 14px rgba(var(--mw-blue-rgb), .18); }
.dash-quicklinks i { color: var(--mw-blue); }
.dash-quicklinks div { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--mw-text-dark); }
.dash-link-disabled { opacity: .45; cursor: not-allowed; }
.mw-search-select-empty { font-size: 13px; }
.mw-search-select-addnew {
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--mw-blue-dark);
  border-top: 1px solid var(--mw-border); cursor: pointer;
}
.mw-search-select-addnew:hover { background: var(--mw-blue-light); }
.mw-search-select-addnew i { margin-right: 6px; }

.mw-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .mw-sidebar { position: fixed; left: -250px; top:0; z-index: 1000; transition: left .2s; }
  .mw-sidebar.open { left: 0; }
  .mw-doc-wrap { flex-direction: column; }
  .mw-doc-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .mw-doc-actions .btn { width: auto; flex: 1 1 120px; }
  .mw-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 999; opacity: 0; visibility: hidden; transition: opacity .2s;
  }
  .mw-sidebar-backdrop.show { opacity: 1; visibility: visible; }
}

.mw-report-print-header { display:none; }

@media print {
  .mw-sidebar, .mw-topbar, .mw-doc-actions, .doc-action-panel, #pivActionsHolder,
  #dovActionsHolder, #sivActionsHolder, #qvActionsHolder, #docActionsHolder,
  .mw-print-hide, .mw-report-toolbar { display:none !important; }

  /* Header syarikat (logo+nama+SSM+alamat) untuk cetak Report — tengah, atas sekali. */
  .mw-report-print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mw-maroon, #800020);
  }
  .mw-report-print-header img {
    max-height: 70px;
    max-width: 220px;
    margin: 0 auto 8px;
    display: block;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .mw-report-print-header .mw-report-print-company {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--mw-maroon, #800020);
  }
  .mw-report-print-header .mw-report-print-meta {
    font-size: 11px;
    color: #444;
    margin-top: 2px;
    line-height: 1.5;
  }
  .mw-report-print-header .mw-report-print-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 15px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mw-content { padding: 0; }
  .mw-doc-paper { border:none; padding:0; }
  .mw-doc-wrap { display:block; }

  /* Gambar produk dalam document table — pastikan cetak dengan warna betul */
  .mw-doc-table img, table img {
    display: block !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }
  /* NOTA: sebelum ni ada rule sembunyikan .mw-doc-img-cell:empty semasa print —
     tapi ini buang cell badan (td) sahaja, bukan header (th) "Img" yang sentiasa ada
     teks. Bila satu/semua item dalam dokumen tiada gambar, cell badan hilang tapi
     header kekal → kolum Description/Unit/Price/Amount tershifting ke kiri, salah
     susun (bug dilaporkan pada Proforma Invoice). Rule tu DIBUANG — cell gambar kosong
     kekal render (kosong sahaja, lebar tetap) supaya kiraan kolum header & badan
     sentiasa sepadan, konsisten dengan semua doc view yang guna pattern Img column ni
     (Sale Invoice, Proforma Invoice, Quotation, Delivery Order). */
}

/* ============ Report Pages — Print/Export Toolbar ============ */
.mw-report-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.mw-report-toolbar .btn {
  border-color: var(--mw-blue, #2563eb);
  color: var(--mw-blue, #2563eb);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 14px;
}
.mw-report-toolbar .btn:hover {
  background: var(--mw-blue, #2563eb);
  color: #fff;
}
.mw-report-toolbar .btn i { margin-right: 4px; }

/* ============ List Pages — Filter Bar ============ */
.mw-filter-bar {
  background: #f8fafc;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  padding: 16px 20px;
}
.mw-filter-bar .form-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px;
}
.mw-filter-bar .form-control,
.mw-filter-bar .form-select {
  border-color: var(--mw-border);
  border-radius: 8px;
  font-size: 13px;
}
.mw-filter-bar .form-control:focus,
.mw-filter-bar .form-select:focus {
  border-color: var(--mw-blue);
  box-shadow: 0 0 0 3px rgba(var(--mw-blue-rgb), 0.1);
}

/* ============ List Pages — Table ============ */
.mw-list-table { font-size: 13px; }
.mw-list-table thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #94a3b8;
  border-top: none; border-bottom: 1px solid #f1f5f9;
  padding: 8px 12px; background: transparent;
}
.mw-list-table tbody td { padding: 11px 12px; border-color: #f8fafc; }
.mw-list-table tbody tr:hover td { background: #f8fafc; }
.mw-list-table tbody tr:last-child td { border-bottom: none; }

/* ============ Dashboard Admin — Stat Blocks ============ */
.mw-adm-stat {
  flex: 1; padding: 10px 12px; border-radius: 10px; text-align: center;
}
.mw-adm-stat-count {
  display: block; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.5px;
}
.mw-adm-stat-count--sm { font-size: 14px; font-weight: 700; }
.mw-adm-stat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 4px; display: block; opacity: 0.75;
}
.mw-adm-stat--danger  { background: #fef2f2; color: #dc2626; }
.mw-adm-stat--warning { background: #fffbeb; color: #d97706; }
.mw-adm-stat--info    { background: #eff6ff; color: #2563eb; }
.mw-adm-stat--success { background: #f0fdf4; color: #16a34a; }
.mw-adm-stat--muted   { background: #f9fafb; color: #6b7280; }

/* ============ Dashboard Sale — Rank Table ============ */
.mw-rank-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; font-weight: 600; border-bottom: 1px solid #f3f4f6;
}
.mw-rank-table tbody tr:hover td { background: #fafafa; }

/* ============ Dashboard KPI Stat Cards (shadcn-inspired) ============ */
.mw-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  transition: box-shadow 0.18s;
  margin-bottom: 0;
  height: 100%;
}
.mw-kpi-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.mw-kpi-icon {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--mw-blue-rgb), 0.1);
  color: var(--mw-blue); font-size: 16px;
}
.mw-kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #6b7280; margin-bottom: 8px;
}
.mw-kpi-value {
  font-size: 22px; font-weight: 700; color: #111827;
  line-height: 1.2; margin-bottom: 6px;
}
.mw-kpi-sub { font-size: 11px; color: #9ca3af; min-height: 18px; }