/* =============================================================
   WS GROUP — EXTREME UI REDESIGN
   Dark Luxury Corporate Theme
   Loaded LAST — overrides all previous CSS.
   Does NOT affect @media print.
   ============================================================= */

/* ── 1. CSS Variables ─────────────────────────────────────── */
body.app-shell {
  --wsg-black: #111111;
  --wsg-dark: #1a1a2e;
  --wsg-gold: #c9a227;
  --wsg-gold-soft: #f4e7b8;
  --wsg-gold-muted: #a68a1a;
  --wsg-white: #ffffff;
  --wsg-bg: #f4f5f7;
  --wsg-card: #ffffff;
  --wsg-text: #111827;
  --wsg-muted: #6b7280;
  --wsg-line: #e5e7eb;
  --wsg-radius: 12px;
  --wsg-radius-sm: 8px;
  --wsg-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --wsg-shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --wsg-danger: #dc2626;
  --wsg-success: #16a34a;
  --wsg-warning: #f59e0b;
  --wsg-info: #2563eb;
}

/* ── 2. Body & Main Layout ────────────────────────────────── */
body.app-shell {
  background: var(--wsg-bg) !important;
  color: var(--wsg-text) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

body.app-shell main.app-main,
body.app-shell .app-main {
  background: var(--wsg-bg) !important;
  padding: 20px 24px 36px !important;
}

/* ── 3. Page Title Row ────────────────────────────────────── */
body.app-shell .page-title-row,
body.app-shell .page-title-row.ws-auto-page-title {
  background: var(--wsg-card) !important;
  border: 1px solid var(--wsg-line) !important;
  border-left: 4px solid var(--wsg-gold) !important;
  border-radius: var(--wsg-radius) !important;
  padding: 16px 20px !important;
  margin: 0 0 20px !important;
  box-shadow: var(--wsg-shadow) !important;
}

body.app-shell .page-title-row h2,
body.app-shell .ws-auto-page-title h2 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--wsg-text) !important;
  letter-spacing: -0.01em !important;
}

body.app-shell .ws-auto-page-title .note,
body.app-shell .ws-auto-page-title .ws-page-subtitle {
  color: var(--wsg-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 4px 0 0 !important;
  line-height: 1.55 !important;
  max-width: 72ch;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── 4. Cards — all types ─────────────────────────────────── */
body.app-shell .card,
body.app-shell .page-card,
body.app-shell .menu-page-card,
body.app-shell .fin-card,
body.app-shell .fl-card,
body.app-shell .foav-card,
body.app-shell .fopv-card,
body.app-shell .fhs-card,
body.app-shell .rev520-card,
body.app-shell .frf-card,
body.app-shell .frf-wrap,
body.app-shell .rev333-wrap,
body.app-shell .apm-lap-card,
body.app-shell .ws-panel,
body.app-shell .hrd-section,
body.app-shell .panel,
body.app-shell .ws-card,
body.app-shell .form-card,
body.app-shell .box-panel,
body.app-shell .pf-card,
body.app-shell .pgm-card,
body.app-shell .ums-card,
body.app-shell .section,
body.app-shell .ws-section,
body.app-shell .box-panel.ws-section-operan {
  background: var(--wsg-card) !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius) !important;
  box-shadow: var(--wsg-shadow) !important;
  padding: 18px 20px !important;
  margin: 0 0 16px !important;
}

body.app-shell .card > h3,
body.app-shell .page-card > h3,
body.app-shell .menu-page-card > h3,
body.app-shell .fl-card > h3,
body.app-shell .foav-card > h3,
body.app-shell .fopv-card > h3,
body.app-shell .apm-lap-card > h3,
body.app-shell .rev520-card > h3,
body.app-shell .frf-card > h3 {
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--wsg-line) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--wsg-text) !important;
}

/* ── 5. KPI / Dashboard Cards ─────────────────────────────── */
body.app-shell .dashboard-grid,
body.app-shell .stat-grid,
body.app-shell .fin-kpi,
body.app-shell .fst-kpi,
body.app-shell .kpi-row,
body.app-shell .rev627-kpi,
body.app-shell .flpt-grid,
body.app-shell .foav-grid,
body.app-shell .fopv-grid,
body.app-shell .fhs-grid,
body.app-shell .rev520-grid,
body.app-shell .finance-kpi,
body.app-shell .finance-grid-2,
body.app-shell .apm-lap-kpi,
body.app-shell .asr-fin-kpi {
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body.app-shell .stat-card,
body.app-shell .dashboard-card,
body.app-shell .kpi-box,
body.app-shell .rev627-kpi .box,
body.app-shell .flpt-card,
body.app-shell .foav-stat,
body.app-shell .fopv-stat,
body.app-shell .fhs-stat,
body.app-shell .rev520-stat,
body.app-shell .fst-kpi-card,
body.app-shell .fin-kpi-card,
body.app-shell .hrd-card,
body.app-shell .summary-card,
body.app-shell .apm-lap-kpi-item,
body.app-shell .asr-fin-kpi > div,
body.app-shell .summary-money .box,
body.app-shell .finance-card,
body.app-shell .dashboard-grid .box,
body.app-shell .pf-stat,
body.app-shell .pf-card .box {
  background: var(--wsg-card) !important;
  color: var(--wsg-text) !important;
  border: 1px solid var(--wsg-line) !important;
  border-top: 3px solid var(--wsg-gold) !important;
  border-radius: var(--wsg-radius) !important;
  padding: 16px 18px !important;
  box-shadow: var(--wsg-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.app-shell .stat-card::after,
body.app-shell .dashboard-card::after,
body.app-shell .hrd-card::after,
body.app-shell .finance-card::after {
  display: none !important;
}

body.app-shell .stat-card span,
body.app-shell .stat-card small,
body.app-shell .dashboard-card span,
body.app-shell .dashboard-card small,
body.app-shell .kpi-box small,
body.app-shell .rev627-kpi small,
body.app-shell .flpt-card span,
body.app-shell .foav-stat small,
body.app-shell .fopv-stat small,
body.app-shell .fst-kpi-card small,
body.app-shell .fin-kpi-card small,
body.app-shell .apm-lap-kpi-item small,
body.app-shell .asr-fin-kpi small,
body.app-shell .hrd-card span,
body.app-shell .finance-card small {
  display: block !important;
  color: var(--wsg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

body.app-shell .stat-card b,
body.app-shell .dashboard-card b,
body.app-shell .kpi-box b,
body.app-shell .rev627-kpi b,
body.app-shell .flpt-card b,
body.app-shell .foav-stat b,
body.app-shell .fopv-stat b,
body.app-shell .fst-kpi-card b,
body.app-shell .fin-kpi-card b,
body.app-shell .apm-lap-kpi-item b,
body.app-shell .asr-fin-kpi b,
body.app-shell .hrd-card b {
  display: block !important;
  font-size: 1.5rem !important;
  line-height: 1.15 !important;
  color: var(--wsg-text) !important;
  margin-top: 6px !important;
  font-weight: 700 !important;
}

body.app-shell .stat-card.ok b,
body.app-shell .hrd-card.ok b {
  color: var(--wsg-success) !important;
}
body.app-shell .stat-card.warn b,
body.app-shell .stat-card.danger b,
body.app-shell .hrd-card.warn b,
body.app-shell .hrd-card.danger b {
  color: var(--wsg-danger) !important;
}

/* ── 6. Tables ────────────────────────────────────────────── */
body.app-shell .table-responsive,
body.app-shell .table-wrap,
body.app-shell .table-scroll,
body.app-shell .apm-lap-table-wrap {
  overflow: auto !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius) !important;
  background: var(--wsg-card) !important;
  box-shadow: var(--wsg-shadow) !important;
  -webkit-overflow-scrolling: touch !important;
}

body.app-shell table,
body.app-shell .crm-table,
body.app-shell .pf-table,
body.app-shell .list-table,
body.app-shell .service-table,
body.app-shell .sort-table,
body.app-shell .sc-table,
body.app-shell .ws-responsive-table,
body.app-shell .foav-table,
body.app-shell .fopv-table,
body.app-shell .fl-table,
body.app-shell .frf-table,
body.app-shell .rev333-table,
body.app-shell .rev520-table,
body.app-shell .bank-table,
body.app-shell .apm-lap-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.app-shell table thead th,
body.app-shell .crm-table thead th,
body.app-shell .pf-table thead th,
body.app-shell .sc-crm-table thead th,
body.app-shell .sc-fu-table thead th,
body.app-shell .foav-table th,
body.app-shell .fopv-table th,
body.app-shell .fl-table th,
body.app-shell .frf-table th,
body.app-shell .rev333-table th,
body.app-shell .rev520-table th,
body.app-shell .bank-table th,
body.app-shell .apm-lap-table thead th,
body.app-shell table > thead > tr > th {
  background: var(--wsg-black) !important;
  color: #f8fafc !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  text-align: left !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

body.app-shell table tbody td,
body.app-shell .crm-table tbody td,
body.app-shell .foav-table td,
body.app-shell .fopv-table td,
body.app-shell .fl-table td,
body.app-shell .frf-table td,
body.app-shell .rev333-table td,
body.app-shell .rev520-table td,
body.app-shell .bank-table td,
body.app-shell .apm-lap-table tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: top !important;
  color: var(--wsg-text) !important;
  font-size: 14px !important;
}

body.app-shell table tbody tr:nth-child(even) td {
  background: #fafbfc !important;
}

body.app-shell table tbody tr:hover td,
body.app-shell .crm-table tbody tr:hover td {
  background: #f0f4ff !important;
}

body.app-shell table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body.app-shell table tfoot th,
body.app-shell table tfoot td {
  background: #f8fafc !important;
  color: var(--wsg-text) !important;
  font-weight: 700 !important;
  border-top: 2px solid var(--wsg-line) !important;
  border-bottom: 0 !important;
  padding: 11px 14px !important;
}

/* ── 7. Filter Bars ───────────────────────────────────────── */
body.app-shell .topbar,
body.app-shell .filter-bar,
body.app-shell .form-grid,
body.app-shell .ws-card-form,
body.app-shell form.filter,
body.app-shell .filter,
body.app-shell .rev627-filter,
body.app-shell .flpt-filter,
body.app-shell .fst-filter,
body.app-shell .fin-filter,
body.app-shell .apm-lap-filter {
  background: var(--wsg-card) !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius) !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--wsg-shadow) !important;
}

/* ── 8. Form Inputs ───────────────────────────────────────── */
body.app-shell input,
body.app-shell select,
body.app-shell textarea {
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius-sm) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  background: var(--wsg-white) !important;
  color: var(--wsg-text) !important;
  min-height: 40px !important;
  transition: border-color .15s, box-shadow .15s !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
  outline: none !important;
  border-color: var(--wsg-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,.12) !important;
}

body.app-shell label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--wsg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ── 9. Buttons ───────────────────────────────────────────── */
body.app-shell .btn,
body.app-shell button.btn,
body.app-shell a.btn,
body.app-shell input[type="submit"],
body.app-shell .button,
body.app-shell .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: var(--wsg-radius-sm) !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 38px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform .1s, box-shadow .15s !important;
  background: var(--wsg-black) !important;
  color: var(--wsg-white) !important;
  box-shadow: var(--wsg-shadow) !important;
}

body.app-shell .btn:hover,
body.app-shell button.btn:hover,
body.app-shell a.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--wsg-shadow-md) !important;
}

body.app-shell .btn-simpan-ws,
body.app-shell button.btn-simpan-ws,
body.app-shell a.btn-simpan-ws,
body.app-shell input.btn-simpan-ws[type="submit"] {
  background: linear-gradient(135deg, #dbb940 0%, var(--wsg-gold) 55%, var(--wsg-gold-muted) 100%) !important;
  color: var(--wsg-black) !important;
  border: 1px solid var(--wsg-gold-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

body.app-shell .btn-simpan-ws:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(201,162,39,.3) !important;
}

body.app-shell .btn.secondary,
body.app-shell a.btn.secondary,
body.app-shell .btn-secondary,
body.app-shell .btn-light {
  background: var(--wsg-white) !important;
  color: var(--wsg-text) !important;
  border: 1px solid var(--wsg-line) !important;
  box-shadow: none !important;
}

body.app-shell .btn-danger {
  background: var(--wsg-danger) !important;
  color: var(--wsg-white) !important;
}

body.app-shell .btn-success {
  background: var(--wsg-success) !important;
  color: var(--wsg-white) !important;
}

body.app-shell .btn-dark {
  background: var(--wsg-black) !important;
  color: var(--wsg-white) !important;
}

body.app-shell td .btn,
body.app-shell .table-responsive .btn,
body.app-shell table .btn {
  padding: 5px 10px !important;
  min-height: 30px !important;
  font-size: 12px !important;
}

/* Audit: mini-btn hitam di tabel — teks putih, bukan emas dari rule link tabel. */
body.app-shell table td a.mini-btn,
body.app-shell table td button.mini-btn,
body.app-shell .ws-table td a.mini-btn,
body.app-shell .ws-sort-table td a.mini-btn {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
body.app-shell table td a.mini-btn:hover,
body.app-shell table td button.mini-btn:hover {
  color: #fff !important;
}
body.app-shell table td a.mini-btn.gold,
body.app-shell table td button.mini-btn.gold {
  background: #d4af37 !important;
  color: #111827 !important;
  border-color: #c59b23 !important;
}
body.app-shell table td a.mini-btn.gold:hover,
body.app-shell table td button.mini-btn.gold:hover {
  color: #111827 !important;
}
body.app-shell table td a.mini-btn.light,
body.app-shell table td button.mini-btn.light {
  background: #f8fafc !important;
  color: #111827 !important;
  border: 1px solid #d7dee8 !important;
}
body.app-shell table td a.btn:not(.secondary):not(.btn-light):not(.btn-gold):not(.btn-simpan-ws),
body.app-shell table td button.btn:not(.secondary):not(.btn-light):not(.btn-gold):not(.btn-simpan-ws) {
  color: #fff !important;
}

/* ── 10. Badges / Status ──────────────────────────────────── */
body.app-shell .badge,
body.app-shell .status-badge,
body.app-shell .status,
body.app-shell .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

body.app-shell .status-deal,
body.app-shell .badge-success,
body.app-shell .status-selesai {
  background: #dcfce7 !important;
  color: #166534 !important;
}

body.app-shell .status-pending,
body.app-shell .status-proses,
body.app-shell .status-followup {
  background: #fef3c7 !important;
  color: #92400e !important;
}

body.app-shell .status-tidak-aktif,
body.app-shell .badge-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* ── 11. Tabs ─────────────────────────────────────────────── */
body.app-shell .rev627-tabs a,
body.app-shell .fl-tabs a,
body.app-shell .foav-tabs a,
body.app-shell .fopv-tabs a,
body.app-shell .fhs-tabs a,
body.app-shell .rev520-tabs a,
body.app-shell .asr-fin-tabs a {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  border: 1px solid var(--wsg-line) !important;
  background: var(--wsg-white) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--wsg-muted) !important;
  text-decoration: none !important;
}

body.app-shell .rev627-tabs a.active,
body.app-shell .fl-tabs a.active,
body.app-shell .foav-tabs a.active,
body.app-shell .fopv-tabs a.active,
body.app-shell .fhs-tabs a.active,
body.app-shell .rev520-tabs a.active,
body.app-shell .asr-fin-tabs a.active {
  background: var(--wsg-black) !important;
  border-color: var(--wsg-black) !important;
  color: var(--wsg-white) !important;
}

/* ── 12. Alerts ───────────────────────────────────────────── */
body.app-shell .alert,
body.app-shell .alert-success,
body.app-shell .alert-danger,
body.app-shell .pf-alert,
body.app-shell .finance-alert {
  border-radius: var(--wsg-radius-sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.app-shell .alert-success,
body.app-shell .alert.success,
body.app-shell .pf-alert.ok {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

body.app-shell .alert-danger,
body.app-shell .alert.danger,
body.app-shell .pf-alert.err,
body.app-shell .alert-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}

/* ── 13. Pagination ───────────────────────────────────────── */
body.app-shell .ws-pagination-bar {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--wsg-line) !important;
}

body.app-shell .ws-pagination-bar a,
body.app-shell .ws-pagination-bar span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.app-shell .ws-pagination-bar .current,
body.app-shell .ws-pagination-bar a.active {
  background: var(--wsg-black) !important;
  color: var(--wsg-white) !important;
}

/* ── 14. Finance Panel (hero) ─────────────────────────────── */
body.app-shell .finance-panel {
  background: linear-gradient(135deg, var(--wsg-black), var(--wsg-dark)) !important;
  color: #fff !important;
  border: 1px solid rgba(201,162,39,.2) !important;
  border-radius: var(--wsg-radius) !important;
  padding: 22px !important;
  box-shadow: var(--wsg-shadow-md) !important;
}

body.app-shell .finance-panel h2 {
  color: #fff !important;
}

body.app-shell .finance-panel .quick-actions .btn {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* ── 15. CRM section head ─────────────────────────────────── */
body.app-shell .crm-section-head,
body.app-shell .sc-crm-head,
body.app-shell .section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--wsg-line) !important;
}

/* ── 16. Money / numeric cells ────────────────────────────── */
body.app-shell .money,
body.app-shell .frf-money,
body.app-shell td.money,
body.app-shell th.money {
  text-align: right !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 17. Quick Actions ────────────────────────────────────── */
body.app-shell .quick-actions,
body.app-shell .action-bar,
body.app-shell .actions,
body.app-shell .action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ── 18. Footer ───────────────────────────────────────────── */
body.app-shell ~ .footer-brand {
  text-align: center !important;
  color: var(--wsg-muted) !important;
  font-size: 12px !important;
  padding: 14px 12px 24px !important;
}

/* ── 19. Mobile Bottom Nav ────────────────────────────────── */
body.app-shell ~ .bottom-nav-v3,
.bottom-nav-v3 {
  background: rgba(17,17,17,.97) !important;
  border-top: 1px solid rgba(201,162,39,.18) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.15) !important;
}

.bottom-nav-v3 .active,
.bottom-nav-v3 a:hover,
.bottom-nav-v3 button:hover {
  color: var(--wsg-gold) !important;
  background: rgba(201,162,39,.08) !important;
}

/* ── 20. Mobile Topbar ────────────────────────────────────── */
body.app-shell .ws-mobile-topbar {
  background: var(--wsg-black) !important;
  border-bottom: 1px solid rgba(201,162,39,.18) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

/* ── 21. Responsive Mobile ────────────────────────────────── */
@media (max-width: 900px) {
  body.app-shell main.app-main,
  body.app-shell .app-main {
    padding: 12px 12px 24px !important;
  }

  body.app-shell .page-title-row,
  body.app-shell .card,
  body.app-shell .ws-card,
  body.app-shell .panel,
  body.app-shell .section,
  body.app-shell .hrd-section {
    border-radius: var(--wsg-radius) !important;
    padding: 14px !important;
  }

  body.app-shell .ws-responsive-table {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-shell .ws-responsive-table thead {
    display: none !important;
  }

  body.app-shell .ws-responsive-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body.app-shell .ws-responsive-table tr {
    display: block !important;
    background: var(--wsg-card) !important;
    border: 1px solid var(--wsg-line) !important;
    border-radius: var(--wsg-radius) !important;
    box-shadow: var(--wsg-shadow) !important;
    padding: 12px !important;
  }

  body.app-shell .ws-responsive-table:not(.asr-table) td {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 0 !important;
    padding: 6px 4px !important;
    text-align: right !important;
  }

  body.app-shell table.no-mobile-card {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
  }

  body.app-shell table.no-mobile-card thead {
    display: table-header-group !important;
  }

  body.app-shell table.no-mobile-card tbody {
    display: table-row-group !important;
  }

  body.app-shell table.no-mobile-card tr {
    display: table-row !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.app-shell table.no-mobile-card td {
    display: table-cell !important;
    padding: 9px 8px !important;
    text-align: left !important;
    vertical-align: top !important;
  }

  body.app-shell table.no-mobile-card td::before {
    display: none !important;
    content: none !important;
  }

  body.app-shell .ws-responsive-table td::before {
    text-align: left !important;
    color: var(--wsg-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    min-width: 90px !important;
  }

  body.app-shell .quick-actions,
  body.app-shell .action-bar,
  body.app-shell .actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  body.app-shell .btn,
  body.app-shell button.btn {
    width: 100% !important;
    min-height: 42px !important;
  }

  body.app-shell .filter-bar,
  body.app-shell form.filter,
  body.app-shell .ws-card-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body.app-shell .dashboard-grid,
  body.app-shell .stat-grid,
  body.app-shell .fin-kpi,
  body.app-shell .kpi-row {
    grid-template-columns: 1fr 1fr !important;
  }

  body.app-shell .page-title-row h2 {
    font-size: 1.05rem !important;
  }
}

/* ── 22. Print — NO changes ───────────────────────────────── */
@media print {
  /* Intentionally empty — all screen overrides are outside this block */
}

/* ── 23. Login Page Override ──────────────────────────────── */
body.login-page {
  --wsg-gold: #c9a227;
}

body.login-page.ws-login-premium {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #111111 100%) !important;
}

body.login-page .login-shell {
  border: 1px solid rgba(201,162,39,.15) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.4) !important;
}

body.login-page .login-box {
  border-top: 3px solid var(--wsg-gold) !important;
}

body.login-page .login-box h2 {
  letter-spacing: 0.02em !important;
}

body.login-page .login-form .btn.full,
body.login-page .login-form input[type="submit"] {
  background: linear-gradient(135deg, #dbb940, #c9a227) !important;
  color: #111 !important;
  font-weight: 700 !important;
  border: 0 !important;
  min-height: 48px !important;
  border-radius: 10px !important;
}

body.login-page .login-form input {
  border-radius: 10px !important;
  border: 1px solid #d1d5db !important;
  min-height: 46px !important;
}

body.login-page .login-form input:focus {
  border-color: var(--wsg-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,.15) !important;
}

/* ── 24. List Pages Full-Width (HRD, CRM, etc) ───────────── */
body.app-shell .ws-list-page {
  max-width: 100% !important;
  width: 100% !important;
}

body.app-shell .ws-list-page .pf-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius) !important;
  box-shadow: var(--wsg-shadow) !important;
}

body.app-shell .ws-list-page .pf-table-wrap table {
  min-width: 100% !important;
  white-space: nowrap !important;
}

body.app-shell .ws-list-page .pf-table-wrap table td,
body.app-shell .ws-list-page .pf-table-wrap table th {
  white-space: nowrap !important;
}

body.app-shell .ws-list-page .pf-table-wrap table td:nth-child(3) {
  white-space: normal !important;
  min-width: 150px !important;
}

/* Also SC service page */
body.app-shell .sc-service-page,
body.app-shell .wa-report-page {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── 25. Asuransi Dashboard ───────────────────────────────── */
body.app-shell .asr-notif-box {
  background: var(--wsg-card) !important;
  border: 1px solid var(--wsg-line) !important;
  border-left: 4px solid var(--wsg-gold) !important;
  border-radius: var(--wsg-radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--wsg-shadow) !important;
}

body.app-shell .asr-notif-box b {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wsg-text) !important;
  margin-bottom: 10px !important;
}

body.app-shell .asr-notif-box ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.app-shell .asr-notif-box li {
  padding: 8px 12px !important;
  background: #f9fafb !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.app-shell .asr-notif-box li a {
  color: var(--wsg-text) !important;
  text-decoration: none !important;
  display: block !important;
}

body.app-shell .asr-notif-box li a:hover {
  color: var(--wsg-gold) !important;
}

body.app-shell .asr-notif-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

body.app-shell .asr-notif-head b {
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
}

body.app-shell .asr-notif-head > span {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  background: #fff7ed !important;
  border: 1px solid #fdba74 !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
}

body.app-shell .asr-notif-bulk {
  margin: 0 !important;
}

body.app-shell .asr-notif-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.app-shell .asr-notif-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.app-shell .asr-notif-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.app-shell .asr-notif-msg {
  display: block !important;
  color: var(--wsg-text) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

body.app-shell a.asr-notif-msg:hover {
  color: var(--wsg-gold) !important;
}

body.app-shell .asr-notif-meta {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

body.app-shell .asr-notif-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

body.app-shell .asr-notif-act {
  margin: 0 !important;
}

body.app-shell .asr-notif-btn {
  border: 1px solid var(--wsg-line) !important;
  background: #fff !important;
  color: var(--wsg-text) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

body.app-shell .asr-notif-btn-read:hover {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

body.app-shell .asr-notif-btn-del:hover {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}

body.app-shell .asr-notif-btn-ghost {
  background: #f9fafb !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
}

body.app-shell .asr-notif-btn-ghost:hover {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

body.app-shell .asr-notif-box li {
  padding: 10px 12px !important;
  background: #f9fafb !important;
  border: 1px solid var(--wsg-line) !important;
  border-radius: var(--wsg-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.app-shell .asr-notif-box .operan-notif-wa {
  display: inline-block !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  text-decoration: none !important;
}