/* Tampilan modern & hidup + tipografi jelas (disisipkan otomatis oleh app-customer.js ke SEMUA halaman).
   Teks: isi 500, label/tombol/kepala tabel 600, judul/angka utama 700 (tegas tapi tidak ekstra tebal).
   Matikan per halaman: res.locals.noTypeCalm = true. */

/* ───────── Tipografi ───────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-weight: 500; letter-spacing: -.005em; font-size: 14.5px; }

b, strong, .fw-semibold, .font-weight-semibold { font-weight: 600 !important; }
.fw-bold, .fw-bolder, .font-weight-bold,
[style*="font-weight:800"], [style*="font-weight: 800"],
[style*="font-weight:900"], [style*="font-weight: 900"],
[style*="font-weight:bold"], [style*="font-weight: bold"] { font-weight: 700 !important; }
[style*="font-weight:700"], [style*="font-weight: 700"] { font-weight: 700 !important; }
[style*="font-weight:600"], [style*="font-weight: 600"] { font-weight: 600 !important; }

h1, h2, h3, .page-title, .tb-title, .modal-title, .card-title { font-weight: 700 !important; letter-spacing: -.015em; }
h4, h5, h6, .card-hd h6, .mh h5, .mh h6 { font-weight: 700 !important; letter-spacing: -.01em; }
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: inherit !important; }

label, .form-label, .fl, .ca-label, th, .btn, button, .badge, .chip, .ca-chip, .pill, .tag, .tg { font-weight: 600 !important; }
.sb-group-hd, .sb-section, .sb-item.active, .ca-bnav .on, .onu-tabs a.on, .nav-link.active { font-weight: 700 !important; }
.sb-item { font-weight: 600; }
.mtab, .wa-tab, .cx-chip, .sc-label, .stat-label, .tk-summary-label, .rc-spec-lbl, .payment-name-agent,
.pt-warn, .tk-hd, .sg-card .l, .gauge-label { font-weight: 600 !important; }
.mtab.active, .mtab.on, .wa-tab.active, .wa-tab.on { font-weight: 700 !important; }
.ca-q, .ca-q * { font-weight: 600 !important; }

/* angka statistik: tegas dan rapi */
.sc .v, .sc-val, .sc-value, .stat-value, .ca-amount { font-weight: 700 !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
td, .num { font-variant-numeric: tabular-nums; }
td { font-weight: 500; }

/* teks sekunder dibuat lebih terbaca */
.text-muted, .muted, small, .ca-sub, .ca-hint { font-weight: 500; }

/* ───────── Kartu ───────── */
.card, .ca-card, .sg-card, .tk-card {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.card { border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -10px rgba(79,70,229,.14) !important; }
@media (hover: hover) { .card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 14px 32px -12px rgba(79,70,229,.24) !important; border-color: rgba(99,102,241,.28); } }
.card-hd { background: linear-gradient(180deg, rgba(99,102,241,.05), transparent); }

/* kartu statistik: aksen gradasi + terangkat saat disentuh */
.sc { border-radius: 14px !important; border-top-width: 3px !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 22px -12px rgba(79,70,229,.25) !important; background-image: linear-gradient(160deg, rgba(99,102,241,.07), transparent 55%); }
@media (hover: hover) { .sc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(79,70,229,.4) !important; } }

/* ───────── Tombol ───────── */
.btn { border-radius: 11px !important; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, filter .2s ease !important; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(15,23,42,.35); filter: brightness(1.04); } }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn-p, .btn-primary { background-image: linear-gradient(135deg, #6366f1, #4f46e5) !important; box-shadow: 0 6px 16px -8px rgba(79,70,229,.7); }
.ca-btn { transition: transform .16s ease, box-shadow .2s ease; }
@media (hover: hover) { .ca-btn.primary:hover { box-shadow: 0 12px 24px -10px rgba(var(--ca-rgb, 79,70,229),.8); transform: translateY(-1px); } }

/* ───────── Formulir ───────── */
.fc, .fs, .form-control, .form-select, .ca-input, .ca-select, .ca-textarea { font-weight: 500; transition: border-color .18s ease, box-shadow .2s ease, background .18s ease !important; }
@media (hover: hover) { .fc:hover, .fs:hover, .form-control:hover, .form-select:hover { border-color: rgba(99,102,241,.45); } }
.fc:focus, .fs:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 4px rgba(99,102,241,.18) !important; }

/* ───────── Tabel ───────── */
.dtbl th { font-weight: 700 !important; color: var(--text, #1f2937); background: linear-gradient(180deg, var(--panel2, #f8fafc), var(--bg3, #f1f4f9)); }
.dtbl tbody tr { transition: background .15s ease, box-shadow .15s ease; }
@media (hover: hover) { .dtbl tbody tr:hover td { background: rgba(99,102,241,.07) !important; } }
@media (hover: hover) { .dtbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #6366f1; } }

/* ───────── Lencana ───────── */
.badge { letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }

/* ───────── Modal ───────── */
.mo { background: rgba(15,23,42,.6) !important; }
.mb, .modal-content {
  border-radius: 20px !important; border: 1px solid rgba(99,102,241,.2) !important;
  box-shadow: 0 30px 70px -18px rgba(15,23,42,.55), 0 0 0 1px rgba(255,255,255,.04) inset !important;
  overflow: hidden;
}
.mb { overflow-y: auto; }
.mb::before, .modal-content::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #0ea5e9); position: sticky; top: 0; z-index: 2; }
.mh, .modal-header { background: linear-gradient(180deg, rgba(99,102,241,.08), transparent); padding: 16px 20px !important; }
.mh h5, .mh h6, .modal-title { font-weight: 700 !important; font-size: 16px; }
.mf, .modal-footer { background: rgba(99,102,241,.04); padding: 14px 20px !important; }
.mh .close, .mh .btn-close, .modal-header .btn-close, .mh [onclick*="close"] { transition: transform .2s ease, background .2s ease; border-radius: 50%; }
@media (hover: hover) { .mh .close:hover, .mh .btn-close:hover, .modal-header .btn-close:hover { transform: rotate(90deg); } }

/* ───────── Menu samping ───────── */
.sb-item { transition: background .18s ease, color .18s ease, transform .18s ease; }
@media (hover: hover) { .sb-item:hover { transform: translateX(2px); } }
.sb-item.active { background-image: linear-gradient(90deg, rgba(99,102,241,.16), rgba(99,102,241,.04)); box-shadow: inset 3px 0 0 #6366f1; }

/* ───────── Masuk halus saat halaman dibuka ───────── */
@keyframes tcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card, .sc, .ca-card { animation: tcRise .42s cubic-bezier(.22,1,.36,1) backwards; }
.stat-grid > :nth-child(2), .row > :nth-child(2) .card { animation-delay: .05s; }
.stat-grid > :nth-child(3), .row > :nth-child(3) .card { animation-delay: .1s; }
.stat-grid > :nth-child(4), .row > :nth-child(4) .card { animation-delay: .15s; }

/* ───────── Mode gelap ───────── */
:root[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -12px rgba(0,0,0,.6) !important; }
@media (hover: hover) { :root[data-theme="dark"] .card:hover { border-color: rgba(129,140,248,.4); } }
:root[data-theme="dark"] .dtbl th { color: var(--text); }
:root[data-theme="dark"] .mb, :root[data-theme="dark"] .modal-content { border-color: rgba(129,140,248,.28) !important; }

/* hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  .card, .sc, .ca-card { animation: none !important; }
  .btn:hover, .sc:hover, .sb-item:hover { transform: none; }
}