@font-face {
  font-family: 'Chica Gogo NF';
  src: url('../fonts/ChicaGogoNFBold.woff2') format('woff2'),
       url('../fonts/ChicaGogoNFBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --primary: #1e3a8a;
  --primary-2: #2563eb;
  --accent: #0ea5e9;
  --bg: #f1f5f9;
  --sidebar-bg: #0f1f4b;
  --sidebar-hover: rgba(255,255,255,.08);
  --card-border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
}

/* ===== Invoice payment history ===== */
.payment-history-modal { overflow: hidden; border: 0; border-radius: 14px; box-shadow: 0 26px 80px rgba(15,35,70,.22); }
.payment-history-head { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 20px 22px; border-bottom: 1px solid #e5ebf2; background: linear-gradient(135deg,#f8fafc,#eef5fa); }
.payment-history-head .eyebrow { display: block; margin-bottom: 3px; color: #0f8b8d; font-size: 9px; font-weight: 800; letter-spacing: 1.05px; }
.payment-history-head h3 { margin: 0; color: #142c50; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.payment-summary-mini { display: flex; gap: 8px; }
.payment-summary-mini span { min-width: 132px; padding: 8px 11px; border: 1px solid #dbe5ee; border-radius: 8px; color: #748196; background: #fff; font-size: 10px; }
.payment-summary-mini b { display: block; margin-top: 2px; color: #203653; font-size: 12px; }
.payment-history-table { min-width: 820px; }
.payment-history-table thead th { padding: 11px 14px; border-bottom: 1px solid #dfe7ef; color: #8290a3; background: #fbfcfd; font-size: 9px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.payment-history-table tbody td { padding: 12px 14px; border-color: #edf1f5; color: #435168; font-size: 11px; }
.payment-receipt-link { color: #164f91; font-weight: 750; text-decoration: none; }
.payment-receipt-link:hover { color: #0f8b8d; text-decoration: underline; }
.payment-method { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.payment-method i { color: #0f8b8d; }
.payment-void { opacity: .58; text-decoration: line-through; }
.payment-void .btn, .payment-void .payment-receipt-link { text-decoration: none; }
.payment-history-footer { justify-content: space-between; padding: 11px 16px; color: #7b889b; background: #fbfcfd; font-size: 10px; }
.payment-history-footer i { margin-right: 5px; color: #0f8b8d; }

/* ===== Official payment receipt ===== */
.receipt-page { min-height: 100vh; background: #edf3f8; }
.receipt-wrap { width: min(860px,calc(100% - 32px)); margin: 28px auto 42px; }
.receipt-doc { --receipt-navy:#102a56; --receipt-teal:#0f8b8d; --receipt-ink:#1d2d43; overflow: hidden; border: 1px solid #dbe4ed; border-radius: 14px; color: var(--receipt-ink); background: #fff; box-shadow: 0 24px 65px rgba(15,35,70,.12); }
.receipt-accent { height: 8px; background: linear-gradient(90deg,var(--receipt-navy) 0 70%,var(--receipt-teal) 70%); }
.receipt-body { padding: 36px 40px 28px; }
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid #dfe6ee; }
.receipt-brand { display: flex; align-items: flex-start; gap: 15px; max-width: 62%; }
.receipt-logo { width: auto; height: 64px; max-width: 145px; object-fit: contain; }
.receipt-brand h1 { margin: 1px 0 6px; color: var(--receipt-navy); font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.receipt-company-meta { color: #718096; font-size: 10.5px; line-height: 1.5; }
.receipt-identity { min-width: 238px; padding: 17px 19px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--receipt-navy),#17447f); }
.receipt-identity > span { display: flex; align-items: center; gap: 6px; color: #8cd5d8; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; }
.receipt-identity h2 { margin: 7px 0 10px; font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.receipt-identity strong { display: block; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.82); font-size: 11px; letter-spacing: .35px; }
.receipt-void-banner { margin-top: 18px; padding: 10px 14px; border: 1px solid #efb3b3; border-radius: 8px; color: #a72626; background: #fff1f1; font-size: 11px; font-weight: 800; text-align: center; letter-spacing: .7px; }
.receipt-parties { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 28px; margin-top: 24px; }
.receipt-parties > div > span, .receipt-details span, .receipt-balance span { display: block; margin-bottom: 5px; color: #8995a7; font-size: 8.5px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; }
.receipt-parties h3 { margin: 0 0 5px; color: var(--receipt-navy); font-size: 16px; font-weight: 800; }
.receipt-parties p { margin: 0; color: #6d7a8d; font-size: 10.5px; line-height: 1.55; }
.receipt-parties dl { margin: 0; padding: 12px 15px; border-radius: 9px; background: #f4f7fa; }
.receipt-parties dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #e4e9ef; }
.receipt-parties dl > div:last-child { border-bottom: 0; }
.receipt-parties dt { color: #8490a1; font-size: 9.5px; font-weight: 600; }
.receipt-parties dd { margin: 0; color: #263851; font-size: 10px; font-weight: 750; text-align: right; }
.receipt-parties dd a { color: #135da8; text-decoration: none; }
.receipt-amount { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; padding: 20px 22px; border-radius: 10px; color: #fff; background: linear-gradient(110deg,#0c6268,var(--receipt-teal,#0f8b8d)); box-shadow: 0 10px 24px rgba(15,139,141,.15); }
.receipt-amount span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.receipt-amount small { color: rgba(255,255,255,.7); font-size: 9px; }
.receipt-amount strong { font-size: 28px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }
.receipt-details { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; overflow: hidden; border: 1px solid #e0e6ed; border-radius: 9px; }
.receipt-details > div { min-height: 62px; padding: 13px 15px; border-right: 1px solid #e7ebf0; }
.receipt-details > div:nth-child(2) { border-right: 0; }
.receipt-details .wide { grid-column: 1 / -1; border-top: 1px solid #e7ebf0; border-right: 0; }
.receipt-details b { color: #2b3b52; font-size: 10.5px; font-weight: 700; overflow-wrap: anywhere; }
.receipt-balance { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; overflow: hidden; border: 1px solid #dfe6ee; border-radius: 9px; }
.receipt-balance > div { padding: 13px 15px; border-right: 1px solid #e4e9ef; background: #fafbfd; }
.receipt-balance > div:last-child { border-right: 0; }
.receipt-balance b { color: #2b3d55; font-size: 11.5px; }
.receipt-balance .balance { background: #edf5f5; }
.receipt-balance .balance b { color: #0a6d70; }
.receipt-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 23px; padding-top: 15px; border-top: 1px dashed #d4dde7; color: #7c8999; font-size: 8.8px; }
.receipt-foot i { margin-right: 4px; color: var(--receipt-teal); }
.receipt-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.receipt-actions .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 14px; font-size: 12px; }
.receipt-doc.is-void { filter: grayscale(.4); }

@media (max-width: 700px) {
  .payment-history-head { align-items: flex-start; flex-direction: column; }
  .payment-summary-mini { width: 100%; }
  .payment-summary-mini span { min-width: 0; flex: 1; }
  .receipt-wrap { width: min(100% - 20px,860px); margin-top: 12px; }
  .receipt-body { padding: 24px 19px; }
  .receipt-head { flex-direction: column; }
  .receipt-brand { max-width: none; }
  .receipt-identity { width: 100%; min-width: 0; }
  .receipt-parties { grid-template-columns: 1fr; gap: 16px; }
  .receipt-balance { grid-template-columns: 1fr; }
  .receipt-balance > div { border-right: 0; border-bottom: 1px solid #e4e9ef; }
  .receipt-balance > div:last-child { border-bottom: 0; }
  .receipt-foot { flex-direction: column; gap: 5px; }
}

@media (max-width: 430px) {
  .receipt-details { grid-template-columns: 1fr; }
  .receipt-details > div { border-right: 0; border-bottom: 1px solid #e7ebf0; }
  .receipt-details .wide { grid-column: auto; border-top: 0; border-bottom: 0; }
  .receipt-amount { align-items: flex-start; flex-direction: column; }
}

@media print {
  .receipt-page { min-height: 0 !important; background: #fff !important; }
  .receipt-wrap { width: 100% !important; margin: 0 !important; }
  .receipt-doc { border: 0 !important; border-radius: 0 !important; color: #111 !important; box-shadow: none !important; }
  .receipt-accent { height: 2px; background: #222 !important; }
  .receipt-body { padding: 5mm 6mm !important; }
  .receipt-head { gap: 7mm; padding-bottom: 5mm; }
  .receipt-logo { height: 15mm; max-width: 34mm; }
  .receipt-brand h1 { color: #111 !important; font-size: 14pt; }
  .receipt-company-meta { color: #444 !important; font-size: 7pt; }
  .receipt-identity { min-width: 55mm; padding: 3mm 4mm; border: 1px solid #555; color: #111 !important; background: transparent !important; }
  .receipt-identity > span, .receipt-identity strong { color: #444 !important; }
  .receipt-identity h2 { margin: 1mm 0 2mm; color: #111 !important; font-size: 17pt; }
  .receipt-parties { gap: 7mm; margin-top: 5mm; }
  .receipt-parties h3, .receipt-parties dd { color: #111 !important; }
  .receipt-parties dl { border: 1px solid #bbb; background: transparent !important; }
  .receipt-amount { margin-top: 5mm; padding: 4mm 5mm; border: 1.5px solid #222; color: #111 !important; background: transparent !important; box-shadow: none !important; }
  .receipt-amount small { color: #444 !important; }
  .receipt-amount strong { font-size: 20pt; }
  .receipt-details, .receipt-balance { margin-top: 4mm; break-inside: avoid; }
  .receipt-balance > div, .receipt-balance .balance { background: transparent !important; }
  .receipt-balance b, .receipt-balance .balance b, .receipt-details b { color: #111 !important; }
  .receipt-foot { margin-top: 5mm; padding-top: 3mm; color: #444 !important; }
  body.print-color .receipt-doc { color: var(--receipt-ink) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body.print-color .receipt-accent { background: linear-gradient(90deg,var(--receipt-navy) 0 70%,var(--receipt-teal) 70%) !important; }
  body.print-color .receipt-identity { border-color: transparent !important; color: #fff !important; background: linear-gradient(135deg,var(--receipt-navy),#17447f) !important; }
  body.print-color .receipt-identity > span { color: #8cd5d8 !important; }
  body.print-color .receipt-identity h2 { color: #fff !important; }
  body.print-color .receipt-identity strong { color: rgba(255,255,255,.82) !important; }
  body.print-color .receipt-parties dl { border-color: transparent !important; background: #f4f7fa !important; }
  body.print-color .receipt-amount { border-color: transparent !important; color: #fff !important; background: linear-gradient(110deg,#0c6268,var(--receipt-teal,#0f8b8d)) !important; }
  body.print-color .receipt-amount small { color: rgba(255,255,255,.7) !important; }
  body.print-color .receipt-balance > div { background: #fafbfd !important; }
  body.print-color .receipt-balance .balance { background: #edf5f5 !important; }
  body.print-color .receipt-balance .balance b { color: #0a6d70 !important; }
}

* { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

/*
 * Halaman aplikasi masih dirender oleh PHP, tetapi browser mengekalkan snapshot
 * shell semasa navigasi. Sidebar dan header tidak berkelip ketika dokumen baru
 * dimuatkan; hanya kandungan utama yang bertukar.
 */
@view-transition {
  navigation: auto;
}

.sidebar { view-transition-name: app-sidebar; }
.topbar { view-transition-name: app-topbar; }

::view-transition-group(app-sidebar),
::view-transition-group(app-topbar),
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-topbar),
::view-transition-new(app-topbar) {
  animation: none;
  mix-blend-mode: normal;
}

.app-shell { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 250px;
  background: linear-gradient(180deg, var(--sidebar-bg), #14295e);
  color: #cbd5e1;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.brand { display: flex; gap: 12px; align-items: center; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand > div:last-child { display: flex; min-height: 48px; flex-direction: column; align-items: flex-start; justify-content: center; }
.brand-icon {
  width: 52px; height: 48px; flex: 0 0 52px; padding: 5px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.72); border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(3,15,45,.28), inset 0 0 0 1px rgba(15,84,230,.04);
}
.brand-icon img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 50%; }
.brand-name,
.login-brand-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.7px;
}
.brand-name {
  color: #42adff;
  font-family: 'Chica Gogo NF', 'Manrope', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .15px;
}
.brand-name span { color: #fff; }
.login-brand-name {
  color: #1454e6;
  font-family: 'Chica Gogo NF', 'Manrope', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .15px;
  line-height: 1;
}
.login-brand-name span { color: #071a4b; }
.brand-tag { font-size: 11px; color: #94a3b8; }
.brand-plan-tag {
  display: inline-block; position: relative; overflow: hidden;
  margin-top: 4px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 5px;
  color: #fff; font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: .45px; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.25), 0 3px 0 rgba(5,12,30,.42), 0 5px 9px rgba(0,0,0,.24);
}
.brand-plan-tag::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.3) 39%, transparent 62%);
  pointer-events: none;
}
.brand-plan-silver { background: linear-gradient(180deg,#cbd5e1 0%,#8c9bab 48%,#617083 52%,#8392a5 100%); }
.brand-plan-gold { background: linear-gradient(180deg,#ffe28a 0%,#eeb436 47%,#ad6f05 52%,#d89b17 100%); color: #302000; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.brand-plan-platinum { background: linear-gradient(180deg,#dce9f4 0%,#94a9bd 47%,#52677c 52%,#7f95aa 100%); color: #263544; text-shadow: 0 1px 0 rgba(255,255,255,.48); }
.brand-plan-platinum::after { transform: translateX(-160%); animation: platinum-badge-shine 30s ease-in-out infinite; }
@keyframes platinum-badge-shine {
  0%, 1% { transform: translateX(-160%); opacity: 0; }
  1.5% { opacity: .9; }
  9% { transform: translateX(160%); opacity: 0; }
  100% { transform: translateX(160%); opacity: 0; }
}
.brand-plan-neutral { background: linear-gradient(180deg,#a7b3c3 0%,#64748b 50%,#475569 100%); }
.brand-plan-platform { background: linear-gradient(180deg,#6eb6ff 0%,#347ee1 48%,#174ca8 52%,#2563c7 100%); }
.side-nav { padding: 14px 10px; overflow-y: auto; flex: 1; }
.side-link {
  display: flex; align-items: center; gap: 12px;
  color: #cbd5e1; text-decoration: none;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 4px;
  font-size: 14px; font-weight: 500;
  position: relative; overflow: hidden;
  transition: all .25s ease;
}
.side-link i { font-size: 17px; transition: transform .25s ease; }
.side-link:hover { background: var(--sidebar-hover); color: #fff; transform: translateX(4px); }
.side-link:hover i { transform: scale(1.15); }
.side-link.active {
  background: linear-gradient(90deg, var(--primary-2), var(--accent));
  color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.4);
}
.side-link.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #fff; border-radius: 4px;
}
.side-notification-badge {
  min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
.sidebar-foot { padding: 14px 18px; font-size: 11px; color: #64748b; border-top: 1px solid rgba(255,255,255,.06); }
.sidebar-mobile-account { display: none; }

/* Main */
.main-wrap { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 64px; background: #fff; border-bottom: 1px solid var(--card-border);
  display: flex; align-items: center; gap: 14px; padding: 0 24px;
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 1px 6px rgba(15,23,42,.05);
}
.topbar-title { font-weight: 700; font-size: 17px; }
.subscription-expired-badge { padding: 7px 9px; white-space: nowrap; font-size: 10px; letter-spacing: .02em; }
.topbar-notification { position:relative; width:38px; height:38px; display:grid; place-items:center; border:1px solid #e1e8f0; border-radius:11px; background:#fff; color:#53657d; font-size:17px; }
.topbar-notification:hover { color:var(--primary); background:#f3f7ff; }
.topbar-notification > span { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border:2px solid #fff; border-radius:10px; background:#dc3545; color:#fff; font-size:9px; font-weight:800; }
.notification-menu { width:min(360px,calc(100vw - 24px)); padding:0; overflow:hidden; }
.notification-menu-head { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-bottom:1px solid #edf1f5; }
.notification-menu-head a { font-size:11px; font-weight:700; text-decoration:none; }
.notification-menu-item { display:flex; gap:10px; padding:11px 14px; color:#334155; text-decoration:none; border-bottom:1px solid #f0f3f7; }
.notification-menu-item:hover { background:#f7faff; color:#1e40af; }
.notification-menu-item.is-unread { background:#eff6ff; }
.notification-menu-item > i,.notification-list-icon { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:#dbeafe; color:#2563eb; }
.notification-menu-item span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.notification-menu-item b { font-size:12px; }
.notification-menu-item small { color:#7b8798; font-size:10px; white-space:normal; }
.notification-unread { background:#f5f9ff; border-left:3px solid #2563eb !important; }
.subscription-receipt { max-width:920px; margin:0 auto; overflow:hidden; }
.subscription-receipt-document { color:#21314a; }
.subscription-receipt-brand { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; padding-bottom:28px; }
.subscription-brand-lockup { display:flex; align-items:center; gap:14px; }
.subscription-brand-lockup img { width:58px; height:58px; flex:0 0 58px; padding:5px; border-radius:14px; background:#fff; object-fit:contain; }
.subscription-brand-name { color:#102a56; font-family:'Manrope',system-ui,sans-serif; font-size:27px; font-weight:800; letter-spacing:-1px; line-height:1; }
.subscription-brand-name span { color:#1499bd; }
.subscription-brand-lockup small { display:block; margin-top:7px; color:#7c8ba0; font-size:9px; font-weight:750; letter-spacing:1.5px; }
.subscription-receipt-identity { min-width:235px; padding:16px 18px; border-radius:12px; color:#fff; text-align:right; background:linear-gradient(135deg,#102a56,#1767a8); box-shadow:0 10px 22px rgba(16,42,86,.16); }
.subscription-receipt-identity span,.subscription-receipt-identity strong,.subscription-receipt-identity small { display:block; }
.subscription-receipt-identity span { color:#94f0df; font-size:9px; font-weight:800; letter-spacing:1px; }
.subscription-receipt-identity strong { margin-top:8px; font-family:'Manrope',system-ui,sans-serif; font-size:17px; }
.subscription-receipt-identity small { margin-top:3px; color:rgba(255,255,255,.72); font-size:9.5px; }
.subscription-receipt-intro { padding:24px 0 20px; border-top:1px solid #e1e8f0; }
.subscription-receipt-intro span { color:#168ca8; font-size:9px; font-weight:800; letter-spacing:1.35px; }
.subscription-receipt-intro h2 { margin:5px 0 3px; color:#102a56; font-family:'Manrope',system-ui,sans-serif; font-size:27px; font-weight:800; }
.subscription-receipt-intro p { margin:0; color:#718096; font-size:12px; }
.subscription-receipt-parties { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.9fr); gap:28px; padding:20px 22px; border:1px solid #e1e8f0; border-left:4px solid #19a6b8; border-radius:10px; background:#f8fafc; }
.subscription-receipt-parties section small,.subscription-receipt-summary small { color:#7b899c; font-size:9px; font-weight:750; letter-spacing:.65px; text-transform:uppercase; }
.subscription-receipt-parties h3 { margin:6px 0 4px; color:#142947; font-size:16px; font-weight:800; }
.subscription-receipt-parties p { margin:0; color:#66758a; font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.receipt-meta { margin:0; }
.receipt-meta > div { display:flex; justify-content:space-between; gap:16px; padding:4px 0; }
.receipt-meta dt { color:#7b8798; font-size:10px; font-weight:600; }
.receipt-meta dd { margin:0; color:#243750; font-size:10px; font-weight:750; text-align:right; overflow-wrap:anywhere; }
.subscription-receipt-amount { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:22px 0; padding:20px 24px; border-radius:12px; color:#fff; background:linear-gradient(120deg,#102a56,#1767a8 62%,#1499bd); box-shadow:0 10px 22px rgba(23,103,168,.14); }
.subscription-receipt-amount > span { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.subscription-receipt-amount span small { display:block; margin-top:4px; color:rgba(255,255,255,.68); font-size:8.5px; font-weight:500; letter-spacing:0; text-transform:none; }
.subscription-receipt-amount strong { font-family:'Manrope',system-ui,sans-serif; font-size:28px; font-weight:800; white-space:nowrap; }
.subscription-receipt-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid #e1e8f0; border-radius:10px; }
.subscription-receipt-summary section { min-height:76px; padding:15px 16px; border-right:1px solid #e7ecf2; background:#fff; }
.subscription-receipt-summary section:last-child { border-right:0; }
.subscription-receipt-summary strong { display:block; margin-top:7px; color:#203550; font-size:12px; overflow-wrap:anywhere; }
.subscription-receipt-verification { display:flex; align-items:center; gap:12px; margin-top:22px; padding:13px 15px; border-radius:9px; color:#256052; background:#edf9f5; }
.subscription-receipt-verification > i { color:#15936f; font-size:21px; }
.subscription-receipt-verification strong,.subscription-receipt-verification span { display:block; }
.subscription-receipt-verification strong { font-size:10.5px; }
.subscription-receipt-verification span { margin-top:2px; color:#5f7c74; font-size:9.5px; }
.subscription-receipt-foot { display:flex; justify-content:space-between; gap:20px; margin-top:24px; padding-top:14px; border-top:1px dashed #dce4ed; color:#7b899c; font-size:8.5px; }
@media (max-width:700px) {
  .subscription-receipt-brand,.subscription-receipt-amount,.subscription-receipt-foot { align-items:flex-start; flex-direction:column; }
  .subscription-receipt-identity { width:100%; min-width:0; text-align:left; }
  .subscription-receipt-parties { grid-template-columns:1fr; }
  .subscription-receipt-summary { grid-template-columns:1fr 1fr; }
  .subscription-receipt-summary section:nth-child(2) { border-right:0; }
  .subscription-receipt-summary section:nth-child(-n+2) { border-bottom:1px solid #e7ecf2; }
  .subscription-receipt-amount strong { font-size:24px; }
}
@media print {
  @page { size:A4 portrait; margin:12mm; }
  body[data-page="subscription"] { color:#21314a !important; background:#fff !important; font-family:'Inter',Arial,sans-serif !important; }
  body[data-page="subscription"] .content { display:block !important; padding:0 !important; }
  body[data-page="subscription"] .subscription-receipt { width:100% !important; max-width:none !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
  body[data-page="subscription"] .subscription-receipt .card-body { padding:0 !important; }
  body[data-page="subscription"] .subscription-receipt-document { width:100%; }
  body[data-page="subscription"] .subscription-receipt-brand { padding-bottom:7mm; break-inside:avoid; }
  body[data-page="subscription"] .subscription-brand-lockup img { width:17mm; height:17mm; flex-basis:17mm; }
  body[data-page="subscription"] .subscription-brand-name { font-size:22pt; }
  body[data-page="subscription"] .subscription-brand-lockup small { font-size:6.5pt; }
  body[data-page="subscription"] .subscription-receipt-identity { min-width:62mm; padding:4mm 5mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body[data-page="subscription"] .subscription-receipt-intro { padding:6mm 0 5mm; }
  body[data-page="subscription"] .subscription-receipt-intro h2 { font-size:21pt; }
  body[data-page="subscription"] .subscription-receipt-parties { grid-template-columns:minmax(0,1fr) 80mm; gap:7mm; padding:5mm; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body[data-page="subscription"] .subscription-receipt-amount { margin:5mm 0; padding:5mm 6mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid; }
  body[data-page="subscription"] .subscription-receipt-amount strong { font-size:21pt; }
  body[data-page="subscription"] .subscription-receipt-summary { grid-template-columns:repeat(4,minmax(0,1fr)); break-inside:avoid; }
  body[data-page="subscription"] .subscription-receipt-summary section { min-height:20mm; padding:4mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body[data-page="subscription"] .subscription-receipt-verification { margin-top:5mm; padding:3.5mm 4mm; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body[data-page="subscription"] .subscription-receipt-foot { flex-direction:row; margin-top:7mm; padding-top:3mm; font-size:6.5pt; break-inside:avoid; }
}
.user-chip { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
.user-chip-copy { min-width: 0; max-width: 260px; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.15; }
.user-chip-name { overflow: hidden; color: #26364d; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-name small { color: #7b8798; font-size: 10px; font-weight: 550; }
.user-chip-company { overflow: hidden; color: #8793a4; font-size: 9.5px; font-weight: 600; letter-spacing: .15px; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-2), var(--accent));
  color: #fff; display: grid; place-items: center; font-weight: 700;
}
.avatar-company { overflow: hidden; padding: 3px; border: 1px solid #dce4ed; background: #fff; }
.avatar-company img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; object-position: center; }
.content { padding: 26px; flex: 1; animation: fadeUp .4s ease; }
.app-foot { padding: 14px 26px; color: var(--muted); font-size: 12px; text-align: center; }

/* Cards */
.card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card.hoverable:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.card-header { background: transparent; border-bottom: 1px solid var(--card-border); font-weight: 700; padding: 16px 20px; }
.card-body { padding: 20px; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 22px; color: #fff; margin-bottom: 14px;
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.stat-card .stat-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.stat-card::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: currentColor; opacity: .06; transition: transform .3s ease;
}
.stat-card:hover::after { transform: scale(1.4); }
.payroll-stat-card .stat-label { color: rgba(255,255,255,.92); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.payroll-stat-card .stat-caption { color: rgba(255,255,255,.76); font-size: 11px; }
.payroll-stat-card .payroll-stat-person { margin-top: 2px; overflow: hidden; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.doc-pay-account + .doc-pay-account { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(15,42,86,.18); }

.grad-blue { background: linear-gradient(135deg,#2563eb,#0ea5e9); }
.grad-green { background: linear-gradient(135deg,#059669,#34d399); }
.grad-amber { background: linear-gradient(135deg,#d97706,#fbbf24); }
.grad-red { background: linear-gradient(135deg,#dc2626,#f87171); }
.grad-purple { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.grad-dark { background: linear-gradient(135deg,#0f172a,#475569); }

/* Tables */
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); border-bottom-width: 1px; }
.table tbody tr { transition: background .2s ease; }
.table-hover tbody tr:hover { background: #f8fafc; }

/* Buttons */
.btn { border-radius: 9px; font-weight: 600; transition: all .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(90deg, var(--primary-2), var(--accent)); border: none; }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(37,99,235,.35); }

/* Badges */
.badge { font-weight: 600; letter-spacing: .3px; }
.b-stok { background:#dcfce7; color:#166534; }
.b-warn { background:#fef3c7; color:#92400e; }
.b-bad { background:#fee2e2; color:#991b1b; }
.b-info { background:#dbeafe; color:#1e40af; }
.b-grey { background:#e2e8f0; color:#334155; }

/* ===== Bahasa visual tindakan & status sistem =====
   Biru = cipta/permohonan, kuning = sedang diproses, hijau = lulus,
   merah = batal/tolak. Kelas semantik ini mengatasi warna Bootstrap asal. */
:root {
  --action-blue-a: #2563eb; --action-blue-b: #0891b2;
  --process-bg: #fef3c7; --process-border: #f59e0b; --process-text: #854d0e;
  --approve-a: #059669; --approve-b: #22c55e;
  --reject-a: #dc2626; --reject-b: #ef4444;
}
.btn-action-add {
  color:#fff !important; border-color:transparent !important;
  background:linear-gradient(100deg,var(--action-blue-a),var(--action-blue-b)) !important;
  box-shadow:0 5px 14px rgba(37,99,235,.18);
}
.btn-action-add:hover { color:#fff !important; box-shadow:0 7px 19px rgba(8,145,178,.27); }
.btn-action-process {
  color:var(--process-text) !important; border-color:#f4c64f !important;
  background:linear-gradient(100deg,#fde68a,#fbbf24) !important;
  box-shadow:0 4px 12px rgba(245,158,11,.16);
}
.btn-action-approve {
  color:#fff !important; border-color:transparent !important;
  background:linear-gradient(100deg,var(--approve-a),var(--approve-b)) !important;
  box-shadow:0 5px 14px rgba(5,150,105,.18);
}
.btn-action-reject {
  color:#fff !important; border-color:transparent !important;
  background:linear-gradient(100deg,var(--reject-a),var(--reject-b)) !important;
  box-shadow:0 5px 14px rgba(220,38,38,.17);
}
.status-process { color:var(--process-text) !important; background:var(--process-bg) !important; border:1px solid #f6d365; }
.status-unpaid { color:#9a3412 !important; background:#ffedd5 !important; border:1px solid #fdba74; }
.status-approved { color:#166534 !important; background:#dcfce7 !important; border:1px solid #9de8b4; }
.status-rejected { color:#991b1b !important; background:#fee2e2 !important; border:1px solid #f5b8b8; }
.alert.status-process { border-left:4px solid var(--process-border); }
.alert.status-unpaid { border-left:4px solid #f97316; }
.alert.status-approved { border-left:4px solid var(--approve-a); }
.alert.status-rejected { border-left:4px solid var(--reject-a); }

/* Toolbar contract: tajuk di kiri, tindakan di kanan, urutan kekal stabil pada mobile. */
.ui-card-header { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.ui-card-header > .btn:first-of-type,
.ui-card-header > form:first-of-type,
.ui-card-header > .ui-actions:first-of-type { margin-left:auto; }
.ui-page-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ui-page-actions > .btn:first-of-type:last-child { margin-left:auto; }
.ui-form-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; margin-top:20px; }
.purchase-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; }
.purchase-toolbar-actions, .purchase-detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.purchase-toolbar-actions, .purchase-detail-actions { margin-left:auto; justify-content:flex-end; }
.purchase-detail-actions form { margin:0; }
.ui-filter-select.is-enhanced { display:none !important; }
.ui-filter-dropdown { flex:0 1 300px; min-width:220px; }
.ui-filter-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:7px 12px; border:1px solid #d8e2ef; border-radius:10px; color:#29384f; background:#fff; font-size:13px; font-weight:650; text-align:left; box-shadow:0 3px 12px rgba(15,35,70,.04); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ui-filter-toggle:hover, .ui-filter-toggle[aria-expanded="true"] { border-color:#65a8d7; background:#f8fcff; box-shadow:0 0 0 3px rgba(15,118,168,.09); }
.ui-filter-toggle::after { margin-left:auto; color:#74839a; }
.ui-filter-icon { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:8px; color:#087ca7; background:#e8f7fa; }
.ui-filter-copy { min-width:0; line-height:1.15; }
.ui-filter-copy small { display:block; margin-bottom:3px; color:#8a97a9; font-size:9px; font-weight:750; letter-spacing:.8px; text-transform:uppercase; }
.ui-filter-value { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-filter-dropdown .dropdown-menu { width:100%; min-width:230px; max-height:min(360px,55vh); overflow-y:auto; margin-top:7px !important; padding:7px; border:1px solid #dfe6ef; border-radius:12px; box-shadow:0 18px 42px rgba(15,35,70,.16); scrollbar-width:thin; scrollbar-color:#b8cada transparent; }
.ui-filter-dropdown .dropdown-item { display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 10px; border-radius:7px; color:#435169; font-size:12px; font-weight:600; }
.ui-filter-dropdown .dropdown-item:hover { color:#075b85; background:#eff9fc; }
.ui-filter-dropdown .dropdown-item.active { color:#075b85; background:#e2f5f8; }
.ui-filter-dropdown .dropdown-item:focus-visible { outline:0; box-shadow:inset 0 0 0 2px rgba(7,131,173,.22); }
.ui-filter-dropdown .dropdown-item .bi-check2 { margin-left:auto; }
.ui-filter-dropdown .ui-filter-group { padding:11px 10px 5px; color:#7b8ba1; font-size:9px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; }
.ui-filter-dropdown .dropdown-menu > li:not(:first-child) .ui-filter-group { margin-top:4px; border-top:1px solid #edf1f5; }
.ui-select-dropdown { position:relative; width:100%; min-width:0; }
.ui-select-native { position:absolute !important; inset:auto auto 0 0; width:1px !important; height:1px !important; min-height:1px !important; margin:0 !important; padding:0 !important; opacity:0 !important; pointer-events:none !important; }
.ui-select-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:9px 12px 9px 14px; border:1px solid #d3deeb; border-radius:11px; color:#26364d; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%); font-size:13px; font-weight:650; line-height:1.35; text-align:left; box-shadow:0 4px 12px rgba(15,35,70,.045); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease; }
.ui-select-toggle:hover:not(:disabled) { border-color:#8fb3d2; background:#fff; box-shadow:0 6px 16px rgba(15,75,115,.08); transform:translateY(-1px); }
.ui-select-toggle:focus-visible, .ui-select-toggle[aria-expanded="true"] { outline:0; border-color:#2684c7; background:#fff; box-shadow:0 0 0 3px rgba(38,132,199,.12),0 7px 18px rgba(15,75,115,.09); }
.ui-select-toggle:disabled { color:#8a97a9; border-color:#e2e8f0; background:#f4f6f9; cursor:not-allowed; box-shadow:none; }
.ui-select-toggle.is-placeholder { color:#7d899b; font-weight:550; }
.ui-select-toggle.is-invalid { border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.09); }
.ui-select-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-select-toggle > .bi { margin-left:auto; color:#6f8198; font-size:14px; transition:color .18s ease,transform .18s ease; }
.ui-select-toggle[aria-expanded="true"] > .bi { color:#087ca7; transform:rotate(180deg); }
.ui-select-menu { width:100%; min-width:max(100%,220px); max-height:min(360px,52vh); overflow-y:auto; margin-top:7px !important; padding:7px; border:1px solid #dae4ee; border-radius:12px; background:#fff; box-shadow:0 20px 46px rgba(15,35,70,.17); scrollbar-width:thin; scrollbar-color:#b7c9d9 transparent; }
.ui-select-option { display:flex; align-items:center; gap:10px; min-height:40px; padding:9px 11px; border-radius:8px; color:#3d4d64; font-size:12.5px; font-weight:580; white-space:normal; }
.ui-select-option:hover, .ui-select-option:focus { color:#075b85; background:#eff9fc; }
.ui-select-option.active, .ui-select-option:active { color:#075b85; background:#e2f5f8; }
.ui-select-option .bi-check2 { margin-left:auto; color:#0783ad; font-size:16px; }
.ui-select-option:disabled { color:#a1aab7; background:transparent; }
.ui-select-group { padding:9px 11px 5px; color:#8a97a9; font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.ui-select-sm .ui-select-toggle { min-height:34px; height:34px; padding:6px 9px 6px 11px; border-radius:9px; font-size:12px; box-shadow:0 2px 8px rgba(15,35,70,.035); }
.ui-select-sm .ui-select-option { min-height:35px; padding:7px 9px; font-size:12px; }
.ui-select-lg .ui-select-toggle { min-height:50px; padding:12px 14px; border-radius:13px; font-size:14px; }
.input-group > .ui-select-dropdown { flex:1 1 auto; width:1%; }
.modal .ui-select-menu { z-index:1065; }
.table .ui-select-menu { min-width:210px; }
.table-responsive:has(.ui-select-menu.show) { overflow:visible; }
.ui-info-description[hidden] { display:none !important; }
.ui-info-trigger { display:inline-grid; place-items:center; width:22px; min-width:22px; max-width:22px; height:22px; min-height:22px; flex:0 0 22px; margin-left:7px; padding:0; border:1px solid #b9dce8; border-radius:50%; color:#087ca7; background:#eefafd; font-size:11px; line-height:1; vertical-align:middle; cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.ui-info-trigger:hover, .ui-info-trigger:focus-visible { color:#fff; border-color:#0783ad; background:#0783ad; outline:0; transform:translateY(-1px); box-shadow:0 0 0 3px rgba(7,131,173,.12); }
.popover { max-width:min(430px, calc(100vw - 24px)); border-color:#dce7ee; box-shadow:0 14px 34px rgba(15,35,70,.16); }
.popover-body { color:#435169; font-size:12px; line-height:1.55; white-space:pre-line; }
@media (max-width:576px) {
  .ui-select-toggle { min-height:46px; font-size:15px; }
  .ui-select-sm .ui-select-toggle { min-height:40px; height:40px; font-size:14px; }
  .ui-select-menu { position:fixed !important; inset:auto 12px 12px 12px !important; width:auto; min-width:0; max-height:46vh; transform:none !important; padding:9px; border-radius:15px; }
  .ui-select-option { min-height:44px; font-size:14px; }
  .ui-card-header { align-items:stretch; }
  .ui-card-header > :first-child { flex:1 1 100%; }
  .ui-card-header > .btn:first-of-type,
  .ui-card-header > form:first-of-type,
  .ui-card-header > .ui-actions:first-of-type { margin-left:0; }
  .ui-card-header .btn, .ui-form-actions .btn { min-height:38px; }
  .ui-card-header > .ui-info-trigger { width:22px; min-width:22px; max-width:22px; height:22px; min-height:22px; flex:0 0 22px; align-self:center; }
  .ui-form-actions { justify-content:stretch; }
  .ui-form-actions > .btn, .ui-form-actions > form { flex:1 1 auto; }
  .ui-filter-dropdown, .purchase-toolbar-actions { width:100%; flex-basis:100%; }
  .purchase-toolbar-actions { margin-left:0; justify-content:stretch; }
  .purchase-toolbar-actions .btn { flex:1 1 auto; }
  .purchase-detail-actions { width:100%; margin-left:0; }
  .purchase-detail-actions form, .purchase-detail-actions .btn { flex:1 1 auto; }
}

/* Kanban */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.kanban-col {
  min-width: 270px; width: 270px; background: #f8fafc; border: 1px solid var(--card-border);
  border-radius: 14px; display: flex; flex-direction: column; max-height: 70vh;
}
.kanban-col-head { padding: 12px 14px; font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; border-bottom: 2px solid var(--card-border); }
.kanban-cards { padding: 10px; overflow-y: auto; flex: 1; min-height: 60px; }
.kanban-card {
  background: #fff; border: 1px solid var(--card-border); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; cursor: grab;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.10); }
.kanban-card.dragging { opacity: .4; transform: rotate(2deg) scale(.98); }
.kanban-col.dragover { border-color: var(--primary-2); background: #eff6ff; }
.kanban-card .kc-title { font-weight: 600; font-size: 13px; }
.kanban-card .kc-value { color: #059669; font-weight: 700; font-size: 13px; }
.kanban-card .kc-meta { color: var(--muted); font-size: 11px; }

/* Timeline */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background: var(--card-border); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-dot {
  position: absolute; left: -26px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary-2); border: 3px solid #dbeafe;
}
.tl-time { font-size: 11px; color: var(--muted); }

/* Login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%,rgba(56,189,248,.2),transparent 26%),
    radial-gradient(circle at 84% 76%,rgba(37,99,235,.3),transparent 31%),
    linear-gradient(135deg,#081630 0%,#102b62 46%,#075985 100%);
}
.login-page .login-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .42;
  background-image:
    radial-gradient(circle,rgba(186,230,253,.75) 1px,transparent 1.5px),
    linear-gradient(90deg,rgba(125,211,252,.11) 1px,transparent 1px);
  background-size: 44px 44px,88px 88px;
  -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.78),transparent 88%);
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.78),transparent 88%);
}
.login-card {
  width: 400px; max-width: 92vw; z-index: 2; overflow: hidden; animation: fadeUp .5s ease;
  border: 1px solid rgba(255,255,255,.72); border-top-color: #fff; border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2,8,23,.38),0 2px 0 rgba(255,255,255,.45) inset !important;
}
.register-page .login-wrap { overflow-y: auto; place-items: center; padding: 68px 16px 82px; }
.register-card { width: min(980px,calc(100vw - 32px)); max-width: none; }
.register-card>.card-body { padding: 28px 32px 30px; }
.register-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #e5ebf3; }
.register-heading .login-logo { width: 58px; height: 58px; flex: 0 0 58px; margin: 0; border-radius: 17px; }
.register-heading h3 { font-size: 25px; }
.register-heading p { font-size: 13px; }
.register-eyebrow { display: block; margin-bottom: 5px; color: #188ca8; font-size: 8px; font-weight: 800; letter-spacing: 1.35px; }
.register-form-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 22px; }
.register-panel { min-width: 0; padding: 22px; border: 1px solid #e2e8f1; border-radius: 16px; background: #fff; }
.register-package-panel { background: linear-gradient(160deg,#f6faff,#fff); }
.register-section-title { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.register-section-title>span { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 10px; color: #fff; font-size: 9px; font-weight: 800; background: linear-gradient(135deg,#2563eb,#14a4c0); }
.register-section-title>div { display: flex; flex-direction: column; }
.register-section-title b { font-size: 14px; }
.register-section-title small { margin-top: 2px; color: #8290a2; font-size: 9px; }
.register-card .form-label { margin-bottom: 5px; color: #526178; font-size: 10px; }
.register-divider { position: relative; margin: 5px 0 0; color: #213149; font-size: 11px; font-weight: 800; }
.register-divider::after { content: ""; position: absolute; top: 50%; right: 0; left: 105px; height: 1px; background: #e5eaf1; }
.register-plan-options { display: grid; gap: 10px; }
.register-plan-option label { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 92px; padding: 14px 15px; border: 1px solid #dbe4f0; border-radius: 13px; cursor: pointer; background: #fff; transition: .2s ease; }
.register-plan-option label:hover { transform: translateY(-2px); border-color: #75a8ef; box-shadow: 0 9px 22px rgba(29,78,145,.09); }
.register-plan-option input:checked+label { border-color: #2877e2; background: linear-gradient(135deg,#edf5ff,#f5fcff); box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.register-plan-check { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #cbd7e6; border-radius: 50%; color: transparent; font-size: 10px; background: #fff; }
.register-plan-option input:checked+label .register-plan-check { color: #fff; border-color: #2563eb; background: #2563eb; }
.register-plan-copy { display: flex; min-width: 0; flex-direction: column; padding-right: 12px; }
.register-plan-copy>small { color: #8a98aa; font-size: 6px; font-weight: 800; letter-spacing: 1px; }
.register-plan-copy>b { margin-top: 2px; color: #172a45; font-size: 15px; }
.register-plan-copy>em { display: block; margin-top: 5px; overflow: hidden; color: #718096; font-size: 9px; font-style: normal; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.register-plan-price { display: flex; min-width: 82px; flex-direction: column; padding-right: 15px; text-align: right; }
.register-plan-price b { color: #176ed0; font-size: 14px; white-space: nowrap; }
.register-plan-price small { color: #8a98aa; font-size: 8px; }
.register-trial-note { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 12px; color: #45627e; background: #eaf7f6; }
.register-trial-note>i { color: #149b8b; font-size: 18px; }
.register-trial-note span { display: flex; flex-direction: column; }
.register-trial-note b { color: #17665e; font-size: 10px; }
.register-trial-note small { margin-top: 3px; font-size: 8px; line-height: 1.5; }
.register-back { font-size: 11px; }
.register-page .login-copyright { position: absolute; }
@media (max-width: 820px) {
  .register-page .login-wrap { place-items: start center; padding-top: 18px; }
  .register-card>.card-body { padding: 22px; }
  .register-form-grid { grid-template-columns: 1fr; }
  .register-package-panel { grid-row: 1; }
}
@media (max-width: 575.98px) {
  .register-card { width: min(100%,calc(100vw - 20px)); }
  .register-card>.card-body { padding: 18px 14px 24px; }
  .register-heading { align-items: flex-start; gap: 12px; }
  .register-heading .login-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .register-heading h3 { font-size: 21px; }
  .register-heading p { font-size: 11px; line-height: 1.5; }
  .register-panel { padding: 16px; }
  .register-plan-option label { min-height: 88px; padding: 12px; }
  .register-plan-copy>em { max-width: 180px; }
  .register-page .login-copyright { position: static; margin-top: 24px; transform: none; }
}
.login-logo { width: 78px; height: 70px; display: grid; place-items: center; overflow: hidden; margin: 0 auto 10px; padding: 6px; border-radius: 19px; background: #fff; filter: drop-shadow(0 10px 14px rgba(18,85,169,.18)); }
.login-logo img { display: block; width: 100%; height: 100%; border-radius: 13px; object-fit: contain; object-position: 50% 50%; }
.oauth-brand-logo { display:block; width:64px; height:58px; margin:0 auto; padding:6px; border-radius:16px; background:#fff; object-fit:contain; object-position:50% 50%; filter:drop-shadow(0 8px 13px rgba(18,85,169,.16)); }
.password-field-wrap { position: relative; }
.password-field-wrap .form-control { padding-right: 52px; }
.password-toggle {
  position: absolute; top: 50%; right: 8px; z-index: 3; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; color: #64748b; font-size: 18px;
  transition: color .18s ease,background-color .18s ease;
}
.password-toggle:hover { background: #eef4ff; color: var(--primary); }
.password-toggle:focus-visible { outline: 3px solid rgba(37,99,235,.2); color: var(--primary); }
.login-copyright { position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%); width: calc(100% - 32px); color: rgba(255,255,255,.78); font-size: 12px; text-align: center; }
.login-skyline {
  position: absolute; inset: auto -2vw 0; z-index: -1; height: 38vh; min-height: 230px;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px,1.5vw,24px);
  padding: 0 2vw; pointer-events: none; opacity: .36;
}
.login-skyline span {
  position: relative; width: clamp(54px,7vw,118px); height: 58%; flex: 1 1 70px; max-width: 120px;
  border: 1px solid rgba(186,230,253,.32); border-bottom: 0; border-radius: 8px 8px 0 0;
  background:
    linear-gradient(112deg,transparent 0 37%,rgba(224,242,254,.18) 38% 48%,transparent 49% 100%),
    repeating-linear-gradient(90deg,rgba(3,18,45,.42) 0 2px,transparent 2px 16px),
    linear-gradient(90deg,rgba(12,44,91,.96),rgba(30,111,168,.7) 48%,rgba(7,35,78,.96));
  box-shadow: inset 9px 0 22px rgba(125,211,252,.1),inset -8px 0 18px rgba(2,8,23,.18),0 0 30px rgba(14,165,233,.08);
}
.login-skyline span::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 22px;
  background: rgba(186,230,253,.58); box-shadow: 0 0 8px rgba(125,211,252,.55);
}
.login-skyline span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(125deg,transparent 12%,rgba(255,255,255,.13) 32%,transparent 48%);
}
.login-skyline span:nth-child(1) { height: 42%; }
.login-skyline span:nth-child(2) { height: 68%; border-radius: 34px 34px 0 0; }
.login-skyline span:nth-child(3) { height: 51%; }
.login-skyline span:nth-child(4) { height: 82%; clip-path: polygon(0 9%,50% 0,100% 9%,100% 100%,0 100%); }
.login-skyline span:nth-child(5) { height: 62%; }
.login-skyline span:nth-child(6) { height: 91%; clip-path: polygon(0 12%,72% 0,100% 8%,100% 100%,0 100%); }
.login-skyline span:nth-child(7) { height: 55%; }
.login-skyline span:nth-child(8) { height: 73%; border-radius: 28px 28px 0 0; }
.login-skyline span:nth-child(9) { height: 45%; }
@media (max-width: 575.98px) {
  .login-skyline { height: 31vh; min-height: 180px; gap: 8px; opacity: .25; }
  .login-skyline span { min-width: 46px; }
  .login-skyline span:nth-child(2),.login-skyline span:nth-child(8) { display: none; }
  .login-page .login-wrap::before { opacity: .3; background-size: 36px 36px,72px 72px; }
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.anim-slide { animation: fadeUp .35s ease; }

/* ===== Dokumen (Invois / Sebutharga) ===== */
.doc {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
  display: flex; flex-direction: column;
  min-height: calc(100vh - 120px);
}
.doc-accent {
  height: 6px;
  background: linear-gradient(90deg, var(--primary-2), var(--accent), #34d399);
  flex: 0 0 auto;
}
.doc-body { padding: 36px 40px; display: flex; flex-direction: column; flex: 1 1 auto; }
.doc-main { flex: 1 1 auto; }

/* Header */
.doc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid #eef2f7;
}
.doc-brand { display: flex; align-items: center; gap: 18px; }
.doc-logo {
  height: 96px; max-width: 260px; object-fit: contain;
  border: 1px solid var(--primary-2); border-radius: 14px; padding: 8px; background: #fff;
}
.doc-company-name { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 0; color: var(--text); }
.doc-company-meta { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-top: 6px; }
.doc-title-block { text-align: right; }
.doc-title-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--primary-2); background: #eff6ff; border: 1px solid #dbeafe;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 10px; text-transform: uppercase;
}
.doc-title {
  font-size: 32px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text); margin: 0 0 8px;
}
.doc-meta { color: var(--muted); font-size: 13px; line-height: 1.8; }
.doc-meta b { color: var(--text); font-weight: 600; }
.doc-meta-row { display: flex; justify-content: space-between; gap: 24px; min-width: 240px; }
.doc-meta-row .doc-meta { text-align: right; }

/* Bill To */
.doc-parties { margin: 24px 0; }
.doc-party {
  border: 1px solid var(--primary-2); border-radius: 14px; padding: 18px 22px;
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.doc-party-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--primary-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.doc-party-name { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.doc-party-meta { color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* Table */
.doc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 0; }
.doc-table thead th {
  background: transparent; color: var(--text); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  padding: 12px 14px; text-align: left; font-weight: 700;
  border: 1px solid var(--primary-2); border-bottom: 2px solid var(--primary-2);
}
.doc-table thead th:first-child { border-radius: 10px 0 0 0; }
.doc-table thead th:last-child { border-radius: 0 10px 0 0; }
.doc-table tbody td { padding: 12px 14px; border-bottom: 1px solid #eef2f7; font-size: 13.5px; }
.doc-table tbody tr:nth-child(even) { background: #fafbfd; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-table .desc { font-weight: 500; }

/* Totals */
.doc-totals { display: flex; justify-content: flex-end; margin-top: 22px; }
.doc-totals-inner { width: 320px; max-width: 100%; }
.doc-total-row { display: flex; justify-content: space-between; padding: 8px 16px; font-size: 13.5px; color: var(--muted); }
.doc-total-row b { color: var(--text); font-weight: 600; }
.doc-total-grand {
  display: flex; justify-content: space-between; align-items: center;
  background: transparent; color: var(--text); padding: 14px 18px; border-radius: 12px; margin-top: 6px;
  border: 1px solid var(--primary-2);
}
.doc-total-grand .lbl { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.doc-total-grand .val { font-size: 22px; font-weight: 800; }

/* Notes */
.doc-notes { padding: 14px 18px; background: #f8fafc; border-left: 4px solid var(--accent); border-radius: 8px; font-size: 13px; color: var(--muted); }
.doc-notes b { color: var(--text); }

/* Footer */
.doc-footer {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid #eef2f7;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.doc-footer-left { flex: 1 1 auto; min-width: 220px; }
.doc-footer-right { display: flex; align-items: flex-start; gap: 18px; flex: 0 0 auto; }
.doc-qr { text-align: center; }
.doc-qr img { width: 110px; height: 110px; border: 1px solid var(--primary-2); border-radius: 12px; padding: 6px; background: #fff; }
.doc-qr .cap { font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.doc-pay { border: 1px solid var(--primary-2); border-radius: 12px; padding: 12px 16px; background: #f8fafc; min-width: 200px; }
.doc-pay .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.doc-pay .row { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.doc-pay .row b { color: var(--text); }

.doc-foot { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--card-border); text-align: center; color: var(--muted); font-size: 12px; }

@media (max-width: 768px) {
  .doc-body { padding: 20px; }
  .doc-parties { grid-template-columns: 1fr; }
  .doc-head { flex-direction: column; }
  .doc-title-block { text-align: left; }
  .doc-meta-row { justify-content: flex-start; }
}

/* Print (slip gaji / invois) */
@media print {
  @page { size: A4; margin: 8mm; }
  .sidebar, .topbar, .app-foot, .no-print { display: none !important; }
  .main-wrap { margin-left: 0 !important; }
  .content { padding: 0; }
  .card { border: none; box-shadow: none; }
  .card-header { display: none !important; }
  .card:has(.doc) .card-body { padding: 0 !important; }
  body { background: #fff; }
  .doc-body { padding: 12px 16px; }
  .doc-head { gap: 12px; }
  .doc-logo { height: 78px; max-width: 200px; }
  .doc-company-name { font-size: 18px; }
  .doc-company-meta { font-size: 11px; }
  .doc-title { font-size: 24px; }
  .doc-title-badge { font-size: 10px; padding: 3px 10px; }
  .doc-meta { font-size: 11.5px; }
  .doc-parties { margin: 12px 0; }
  .doc-party { padding: 10px 14px; }
  .doc-party-name { font-size: 14px; }
  .doc-party-meta { font-size: 11px; }
  .doc-table thead th { padding: 7px 10px; font-size: 10.5px; }
  .doc-table tbody td { padding: 7px 10px; font-size: 12px; }
  .doc-totals { margin-top: 10px; }
  .doc-total-row { padding: 4px 12px; font-size: 12px; }
  .doc-total-grand { padding: 9px 14px; }
  .doc-total-grand .val { font-size: 18px; }
  .doc-notes { padding: 9px 14px; font-size: 11.5px; }
  .doc-foot { margin-top: 12px; padding-top: 10px; font-size: 11px; }
  .doc-qr img { width: 80px; height: 80px; }
  .doc { min-height: 0; }
  .doc-footer { margin-top: 12px; padding-top: 12px; gap: 12px; }
  .doc-footer-right { gap: 12px; }
  .doc-pay { padding: 9px 12px; min-width: 170px; }
  .doc-pay .row { font-size: 11px; }
  .doc-head { padding-bottom: 14px; }
  .doc-parties { margin: 14px 0; }
}

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-wrap { margin-left: 0; }
}

/* ===== UI Refresh 2026 ===== */
:root {
  --primary: #173b8f;
  --accent: #0891b2;
  --bg: #f4f7fb;
  --surface: #fff;
  --sidebar-bg: #0b1739;
  --card-border: #e4eaf2;
  --text: #14213d;
  --muted: #66758c;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.03), 0 5px 18px rgba(15,23,42,.04);
  --shadow-md: 0 16px 40px rgba(15,23,42,.09);
}
body { -webkit-font-smoothing: antialiased; }
.sidebar { width: 264px; background: linear-gradient(180deg,var(--sidebar-bg) 0%,#112859 100%); }
.brand { padding: 22px 20px 19px; }
.side-nav { padding: 10px 12px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.nav-section { color: #6f85aa; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 18px 12px 7px; }
.side-link { padding: 10px 12px; border-radius: 9px; margin-bottom: 2px; }
.side-link:hover { transform: translateX(2px); }
.side-link.active { background: rgba(59,130,246,.18); box-shadow: inset 0 0 0 1px rgba(96,165,250,.18); }
.side-link.active::before { top: 8px; bottom: 8px; width: 3px; background: #60a5fa; border-radius: 0 4px 4px 0; }
.sidebar-foot { padding: 16px 20px; color: #8da0bf; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; border: 0; background: rgba(10,20,40,.55); backdrop-filter: blur(2px); z-index: 1035; }
.main-wrap { margin-left: 264px; }
.topbar { min-height: 72px; height: auto; background: rgba(255,255,255,.88); border-bottom-color: rgba(226,232,240,.8); box-shadow: 0 1px 8px rgba(15,23,42,.035); backdrop-filter: blur(14px); }
.topbar-heading { line-height: 1.15; }
.topbar-eyebrow { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.topbar-title { font-weight: 750; letter-spacing: -.2px; }
.menu-toggle { width: 40px; height: 40px; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: var(--text); font-size: 21px; }
.content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 28px 30px 34px; }
.card { border-radius: 16px; box-shadow: var(--shadow-sm); }
.card-header { padding: 17px 20px; letter-spacing: -.15px; }
.stat-card { border: 0; min-height: 176px; color: #fff; box-shadow: 0 12px 25px rgba(30,64,175,.14); }
.stat-card .stat-label { color: rgba(255,255,255,.78); }
.stat-card .stat-icon { background: rgba(255,255,255,.17) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.table > :not(caption) > * > * { padding: .85rem .75rem; border-color: #edf1f6; }
.form-label { font-size: 12px; font-weight: 650; color: #475569; margin-bottom: 7px; }
.form-control, .form-select { border-color: #dce3ed; border-radius: 10px; min-height: 42px; box-shadow: none !important; }
.form-control:focus, .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important; }
/* Dropdown contract global: kemas, jelas dan konsisten pada form, modal serta table. */
.form-select {
  --select-border:#d7e1ed;
  min-height:44px;
  padding:.62rem 2.65rem .62rem .82rem;
  border:1px solid var(--select-border);
  border-radius:11px;
  color:#26364d;
  background-color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(15,35,70,.035) !important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
.form-select:hover:not(:disabled) { border-color:#9bb9d5; background-color:#fbfdff; }
.form-select:focus { border-color:#2684c7; background-color:#fff; box-shadow:0 0 0 3px rgba(38,132,199,.12),0 5px 14px rgba(15,35,70,.06) !important; }
.form-select:disabled { color:#8794a7; border-color:#e5eaf1; background-color:#f4f6f9; cursor:not-allowed; opacity:1; }
.form-select option { color:#26364d; background:#fff; font-weight:500; }
.form-select option:checked { color:#075b85; background:#e7f5fb; font-weight:700; }
.form-select-sm { min-height:34px; height:34px; padding:.36rem 2.15rem .36rem .68rem; border-radius:9px; font-size:12px; }
.form-select-lg { min-height:50px; padding:.78rem 2.9rem .78rem 1rem; border-radius:13px; font-size:14px; }
.input-group > .form-select { min-width:130px; }
.table .form-select { box-shadow:none !important; }
.table .form-select:focus { box-shadow:0 0 0 3px rgba(38,132,199,.10) !important; }
.modal .form-select { background-color:#fcfdff; }
.modal .form-select:focus { background-color:#fff; }
.form-select.is-invalid { border-color:#dc3545; }
.form-select.is-valid { border-color:#20a66a; }
@media (max-width:576px) {
  .form-select { min-height:46px; font-size:16px; }
  .form-select-sm { min-height:38px; height:38px; font-size:14px; }
}
.dropdown-menu { border-color: var(--card-border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 7px; }
.dropdown-item { border-radius: 8px; padding: 9px 11px; font-size: 13px; }
.alert { border: 0; border-radius: 12px; box-shadow: var(--shadow-sm); }

/* Penyata kewangan rasmi: komponen kepala surat dan kelulusan hanya untuk cetakan. */
.fs-print-head, .fs-print-approval, .fs-print-foot { display:none; }

@media print {
  @page { size:A4 portrait; margin:12mm 10mm 12mm; }
  body[data-page="financial_statements"] { color:#111 !important; background:#fff !important; font-family:Arial,Helvetica,sans-serif !important; }
  body[data-page="financial_statements"] .sidebar,
  body[data-page="financial_statements"] .topbar,
  body[data-page="financial_statements"] .app-foot,
  body[data-page="financial_statements"] .no-print { display:none !important; }
  body[data-page="financial_statements"] .app-shell,
  body[data-page="financial_statements"] .main-wrap { display:block !important; min-height:0 !important; margin:0 !important; }
  body[data-page="financial_statements"] .content { padding:0 !important; animation:none !important; }
  .fs-print-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12mm; padding:0 0 7mm; border-bottom:1.5px solid #16345f; break-inside:avoid; }
  .fs-print-brand { display:flex; align-items:flex-start; gap:4mm; max-width:58%; }
  .fs-print-brand img { width:auto; height:20mm; max-width:38mm; object-fit:contain; }
  .fs-print-brand h1 { margin:0 0 1.5mm; color:#102a56; font-size:15pt; font-weight:700; }
  .fs-print-brand p { margin:0; color:#444; font-size:7.5pt; line-height:1.45; }
  .fs-print-title { min-width:65mm; text-align:right; }
  .fs-print-title > span { color:#52657d; font-size:7pt; font-weight:700; letter-spacing:1.4px; }
  .fs-print-title h2 { margin:2mm 0 1mm; color:#102a56; font-size:17pt; font-weight:800; text-transform:uppercase; }
  .fs-print-title p { margin:0; font-size:8.5pt; font-weight:600; }
  .fs-statement-body { margin-top:7mm; }
  .fs-statement-body .card { border:0 !important; border-radius:0 !important; box-shadow:none !important; break-inside:auto; }
  .fs-statement-body .card-header { padding:0 0 3mm !important; border-bottom:1px solid #555 !important; color:#111 !important; background:transparent !important; font-size:10pt; }
  .fs-statement-body .card-body { padding:3mm 0 0 !important; overflow:visible !important; }
  .fs-statement-body .row.g-3 { gap:0 !important; }
  .fs-statement-body .row.g-3 > .col { padding:0 1mm 3mm !important; }
  .fs-statement-body .row.g-3 .card { border:1px solid #aaa !important; }
  .fs-statement-body .row.g-3 .card-body { padding:2.5mm !important; }
  .fs-statement-body table { width:100% !important; margin:0 !important; border-collapse:collapse !important; font-size:7.5pt; }
  .fs-statement-body thead { display:table-header-group; }
  .fs-statement-body tfoot { display:table-row-group; }
  .fs-statement-body tr { break-inside:avoid; }
  .fs-statement-body th { padding:2.2mm 1.5mm !important; border-top:1px solid #333 !important; border-bottom:1px solid #555 !important; color:#222 !important; background:#edf1f5 !important; font-size:7pt; }
  .fs-statement-body td { padding:2.1mm 1.5mm !important; border-bottom:.4px solid #bbb !important; color:#111 !important; background:#fff !important; }
  .fs-statement-body a { color:#111 !important; text-decoration:none !important; }
  .fs-statement-body .badge { border:1px solid #555 !important; color:#111 !important; background:#fff !important; }
  .fs-statement-body .table-light td, .fs-statement-body .table-primary td { font-weight:700 !important; background:#edf1f5 !important; }
  .fs-print-approval { display:grid; grid-template-columns:repeat(3,1fr); gap:8mm; margin-top:16mm; break-inside:avoid; }
  .fs-approval-box { display:flex; min-height:33mm; flex-direction:column; color:#222; font-size:7.5pt; }
  .fs-sign-line { height:15mm; margin-bottom:2mm; border-bottom:1px solid #333; }
  .fs-approval-box strong { margin-bottom:2mm; font-size:8.5pt; }
  .fs-approval-box span { min-height:4mm; }
  .fs-print-foot { display:block; margin-top:8mm; padding-top:2mm; border-top:.5px solid #999; color:#666; font-size:6.5pt; text-align:center; break-inside:avoid; }
  body.print-ink[data-page="financial_statements"] .fs-print-head { border-bottom-color:#333 !important; }
  body.print-ink[data-page="financial_statements"] .fs-print-brand h1,
  body.print-ink[data-page="financial_statements"] .fs-print-title h2 { color:#111 !important; }
  body.print-ink[data-page="financial_statements"] .fs-statement-body th,
  body.print-ink[data-page="financial_statements"] .fs-statement-body .table-light td,
  body.print-ink[data-page="financial_statements"] .fs-statement-body .table-primary td { background:#eee !important; }
  body.print-color[data-page="financial_statements"] .fs-print-head,
  body.print-color[data-page="financial_statements"] .fs-statement-body th,
  body.print-color[data-page="financial_statements"] .fs-statement-body .table-light td,
  body.print-color[data-page="financial_statements"] .fs-statement-body .table-primary td { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}
.subscription-shield { width: 68px; height: 72px; display: inline-grid; place-items: center; flex: 0 0 auto; filter: drop-shadow(0 7px 8px rgba(15,23,42,.18)); }
.subscription-shield svg { width: 100%; height: 100%; overflow: visible; }
.subscription-shield .shield { fill: currentColor; stroke: rgba(15,23,42,.24); stroke-width: 3; stroke-linejoin: round; }
.subscription-shield .shield-line { fill: none; stroke: rgba(255,255,255,.54); stroke-width: 2.2; }
.subscription-shield .shield-shine { fill: rgba(255,255,255,.22); }
.subscription-shield .shield-sweep { opacity: 0; animation: subscription-shield-shine 30s ease-in-out infinite; }
@keyframes subscription-shield-shine {
  0%, 1% { transform: translateX(0); opacity: 0; }
  1.5% { opacity: .9; }
  9% { transform: translateX(210px); opacity: 0; }
  100% { transform: translateX(210px); opacity: 0; }
}
.subscription-shield-silver { color: #8e9baa; }
.subscription-shield-gold { color: #d29a12; }
.subscription-shield-platinum { color: #62748b; }
.subscription-shield-neutral { color: #94a3b8; }
.progress { background: #eef2f7; border-radius: 99px; }
.progress-bar { border-radius: 99px; background: linear-gradient(90deg,var(--primary-2),var(--accent)); }
.dashboard-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; padding: 25px 28px; color: #fff; border-radius: 18px; background: radial-gradient(circle at 85% 20%,rgba(14,165,233,.38),transparent 28%),linear-gradient(120deg,#102453,#1d4ed8); box-shadow: 0 16px 34px rgba(30,64,175,.18); }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #bfdbfe; margin-bottom: 8px; }
.dashboard-hero h1 { font-size: clamp(23px,3vw,32px); font-weight: 800; letter-spacing: -.8px; margin: 0 0 6px; }
.dashboard-hero p { color: rgba(255,255,255,.72); margin: 0; font-size: 14px; }
.dashboard-kpi-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.dashboard-period-filter { display: inline-flex; padding: 4px; border: 1px solid #dfe6ef; border-radius: 11px; background: #f4f7fa; }
.dashboard-period-filter a { padding: 7px 13px; border-radius: 8px; color: #718096; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: .2s ease; }
.dashboard-period-filter a:hover { color: #1d4ed8; }
.dashboard-period-filter a.active { color: #fff; background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 4px 10px rgba(37,99,235,.2); }
.stat-card .stat-period { margin-bottom: 13px; color: rgba(255,255,255,.66); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.stat-card .stat-caption { display: block; margin-top: 5px; color: rgba(255,255,255,.66); font-size: 10.5px; }
.stat-card .stat-trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 13px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.1); font-size: 9.5px; font-weight: 700; }
.stat-card .stat-trend.is-up { background: rgba(255,255,255,.15); }
.dashboard-actions { margin-top: 24px; overflow: hidden; border: 1px solid #e3eaf3; border-radius: 16px; background: #fff; box-shadow: 0 10px 25px rgba(30,64,175,.06); }
.dashboard-actions-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid #edf1f6; }
.dashboard-actions-head h2 { margin: 1px 0 0; color: #24354d; font-size: 17px; font-weight: 800; }
.dashboard-actions-head > span { padding: 5px 9px; border-radius: 999px; color: #92400e; background: #fff7ed; font-size: 10px; font-weight: 800; }
.dashboard-actions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-action-item { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) auto 14px; align-items: center; gap: 11px; min-height: 76px; padding: 14px 18px; color: inherit; text-decoration: none; border-bottom: 1px solid #edf1f6; }
.dashboard-action-item:nth-child(odd) { border-right: 1px solid #edf1f6; }
.dashboard-action-item:hover { color: inherit; background: #f8fafc; }
.dashboard-action-item:hover .dashboard-action-icon { transform: translateY(-2px) scale(1.05); }
.dashboard-action-item:hover .dashboard-action-arrow { color: #2563eb; transform: translateX(3px); }
.dashboard-action-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #b45309; background: #fff7ed; font-size: 17px; }
.dashboard-action-icon,.dashboard-action-arrow { transition: color .22s ease, transform .22s ease, box-shadow .22s ease; }
.dashboard-action-item.tone-danger .dashboard-action-icon { color: #b91c1c; background: #fef2f2; }
.dashboard-action-item.tone-info .dashboard-action-icon { color: #1d4ed8; background: #eff6ff; }
.dashboard-action-item.is-extra { display: none; }
.dashboard-actions.is-expanded .dashboard-action-item.is-extra { display: grid; }
.dashboard-action-copy { min-width: 0; }
.dashboard-action-copy strong,.dashboard-action-copy small { display: block; }
.dashboard-action-copy strong { color: #27364a; font-size: 12.5px; }
.dashboard-action-copy small { margin-top: 2px; overflow: hidden; color: #7b8798; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-action-value { color: #27364a; font-size: 20px; font-weight: 800; }
.dashboard-action-arrow { color: #aab4c2; font-size: 11px; }
.dashboard-actions-footer { padding: 10px 18px; text-align: center; border-top: 1px solid #edf1f6; background: #fbfcfe; }
.dashboard-actions-footer button { border: 0; color: #2563eb; background: transparent; font-size: 10.5px; font-weight: 800; }
.dashboard-actions-footer button:hover { color: #1746b5; transform: translateY(-1px); }

/* Gerakan dashboard: berperingkat, ringkas dan tidak mengganggu tugasan. */
@keyframes dashboardReveal { from { opacity: 0; transform: translateY(16px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes criticalPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,76,100,0); } 45% { box-shadow: 0 0 0 7px rgba(220,76,100,.13); } }
@keyframes actionExpand { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
body[data-page="dashboard"] .anim-slide { opacity: 0; animation: dashboardReveal .52s cubic-bezier(.22,.8,.28,1) both; }
body[data-page="dashboard"] .dashboard-hero { animation-delay: .03s; }
body[data-page="dashboard"] .dashboard-kpi-toolbar { animation-delay: .09s; }
body[data-page="dashboard"] .stat-card { animation-delay: .15s; }
body[data-page="dashboard"] .row > div:nth-child(2) .stat-card { animation-delay: .20s; }
body[data-page="dashboard"] .row > div:nth-child(3) .stat-card { animation-delay: .25s; }
body[data-page="dashboard"] .row > div:nth-child(4) .stat-card { animation-delay: .30s; }
body[data-page="dashboard"] .dashboard-actions { animation-delay: .36s; }
body[data-page="dashboard"] .sales-performance-card { animation-delay: .42s; }
body[data-page="dashboard"] .dashboard-lhdn-card { animation-delay: .48s; }
body[data-page="dashboard"] .collection-flow-card { animation-delay: .54s; }
body[data-page="dashboard"] .dashboard-recent-card { animation-delay: .60s; }
.stat-card .stat-trend { opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.stat-card.is-counted .stat-trend { opacity: 1; transform: translateY(0); }
.dashboard-action-item.tone-danger:first-child .dashboard-action-icon { animation: criticalPulse 1.05s ease-out .75s 3; }
.dashboard-actions.is-expanded .dashboard-action-item.is-extra { animation: actionExpand .32s cubic-bezier(.22,.8,.28,1) both; }
.dashboard-actions.is-expanded .dashboard-action-item.is-extra:nth-child(even) { animation-delay: .04s; }
.hero-date { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 12px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.hero-date i { font-size: 21px; color: #7dd3fc; }
.hero-date small, .hero-date strong { display: block; }
.hero-date small { font-size: 10px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .7px; }
.hero-date strong { font-size: 13px; }
.hero-attendance { color: #fff; min-width: 245px; transition: background .2s ease, transform .2s ease; }
.hero-attendance:hover { color: #fff; background: rgba(255,255,255,.16); transform: translateY(-1px); }
.hero-attendance-date { display: block; margin-top: 2px; color: #fff; font-size: 12px; font-weight: 700; }
.hero-attendance-times { display: flex; gap: 18px; margin-top: 4px; }
.hero-attendance-times span { color: rgba(255,255,255,.68); font-size: 10px; text-transform: uppercase; letter-spacing: .45px; }
.hero-attendance-times strong { color: #fff; font-size: 14px; letter-spacing: 0; }
.sales-performance-card { min-height: 425px; }
.sales-performance-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; padding-bottom: 17px; }
.sales-chart-kicker { display: block; margin-bottom: 3px; color: #2563eb; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; }
.sales-performance-head h2 { margin: 0; color: #24354d; font-size: 16px; font-weight: 800; letter-spacing: -.25px; }
.sales-period-toggle { display: inline-flex; padding: 4px; border: 1px solid #dfe6ef; border-radius: 10px; background: #f4f7fa; }
.sales-period-toggle button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: 7px; color: #738095; background: transparent; font-size: 10.5px; font-weight: 700; white-space: nowrap; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.sales-period-toggle button:hover { color: #1e4f91; }
.sales-period-toggle button.active { color: #fff; background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 4px 10px rgba(37,99,235,.18); }
.sales-chart-summary { display: flex; align-items: flex-end; gap: 14px; min-height: 49px; margin-bottom: 14px; }
.sales-chart-summary > div:first-child span { display: block; margin-bottom: 2px; color: #8491a3; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.sales-chart-summary strong { display: block; color: #182c4b; font-size: 21px; font-weight: 800; letter-spacing: -.35px; }
.sales-chart-comparison { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 3px; padding: 5px 8px; border-radius: 7px; font-size: 9.5px; font-weight: 650; }
.sales-chart-comparison.positive { color: #08775c; background: #eaf8f3; }
.sales-chart-comparison.negative { color: #b02b3e; background: #fff0f2; }
.sales-chart-comparison.neutral { color: #69778b; background: #f1f4f7; }
.sales-chart-caption { margin: 0 0 5px auto; color: #8290a3; font-size: 9.5px; }
.sales-chart-wrap { position: relative; height: 270px; }
.collection-flow-card { overflow: hidden; }
.collection-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; padding-bottom: 17px; }
.collection-flow-head h2 { margin: 0; color: #24354d; font-size: 16px; font-weight: 800; letter-spacing: -.25px; }
.collection-flow-head small { display: block; margin-top: 4px; color: #8491a3; font-size: 10.5px; font-weight: 500; }
.collection-flow-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-bottom: 18px; overflow: hidden; border: 1px solid #e5eaf1; border-radius: 12px; background: #f8fafc; }
.collection-flow-summary > div { padding: 13px 16px; }
.collection-flow-summary > div + div { border-left: 1px solid #e5eaf1; }
.collection-flow-summary span,.collection-flow-summary strong { display: block; }
.collection-flow-summary span { margin-bottom: 3px; color: #8491a3; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.collection-flow-summary strong { color: #182c4b; font-size: 18px; font-weight: 800; }
.collection-flow-wrap { position: relative; height: 290px; }
@media (max-width: 991px) {
  .main-wrap { margin-left: 0; }
  .sidebar-backdrop.show { display: block; }
  body.nav-open { overflow: hidden; }
  .content { padding: 22px 18px 30px; }
  .topbar-user-menu { display: none; }
  .sidebar-mobile-account {
    display: block;
    margin: 0 12px 10px;
    padding: 10px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.07);
  }
  .sidebar-account-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
  }
  .sidebar-account-profile .avatar { flex: 0 0 38px; width: 38px; height: 38px; }
  .sidebar-account-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.2; }
  .sidebar-account-copy strong,
  .sidebar-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-account-copy strong { color: #fff; font-size: 12px; font-weight: 750; }
  .sidebar-account-copy small { margin-top: 3px; color: #aabbd4; font-size: 9.5px; }
  .sidebar-account-copy span { margin-top: 3px; color: #79b8ff; font-size: 9px; font-weight: 700; text-transform: uppercase; }
  .sidebar-account-profile > i { color: #8da0bf; font-size: 12px; }
  .sidebar-account-logout { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(148,163,184,.16); }
  .sidebar-account-logout button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    color: #ffc4ca;
    background: rgba(239,68,68,.12);
    font-size: 10.5px;
    font-weight: 700;
  }
}
@media (max-width: 575px) {
  .topbar { min-height: 64px; padding: 0 15px; }
  .topbar-eyebrow, .badge-lhdn { display: none; }
  .subscription-expired-badge { padding: 6px 7px; font-size: 9px; }
  .subscription-expired-badge i { display: none; }
  .content { padding: 17px 13px 26px; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 22px; border-radius: 15px; }
  .dashboard-kpi-toolbar { align-items: flex-start; flex-direction: column; }
  .dashboard-period-filter { width: 100%; }
  .dashboard-period-filter a { min-width: 0; flex: 1; padding-right: 5px; padding-left: 5px; text-align: center; }
  .dashboard-actions-grid { grid-template-columns: 1fr; }
  .dashboard-action-item:nth-child(odd) { border-right: 0; }
  .hero-date { width: 100%; }
  .card { border-radius: 14px; }
  .card-body { padding: 17px; }
  .card-header { padding: 15px 17px; }
  .stat-card { min-height: 155px; }
  .sales-performance-head { align-items: flex-start; flex-direction: column; }
  .sales-period-toggle { width: 100%; }
  .sales-period-toggle button { min-width: 0; flex: 1; padding-right: 5px; padding-left: 5px; }
  .sales-chart-summary { align-items: flex-start; flex-wrap: wrap; }
  .sales-chart-caption { width: 100%; margin: 0; }
  .sales-chart-wrap { height: 245px; }
  .collection-flow-head { align-items: flex-start; flex-direction: column; }
  .collection-flow-head .btn { width: 100%; }
  .collection-flow-summary { grid-template-columns: 1fr; }
  .collection-flow-summary > div + div { border-top: 1px solid #e5eaf1; border-left: 0; }
  .collection-flow-wrap { height: 270px; }
}
/* ===== AI Connector ===== */
.ai-connector-page { padding-bottom: 8px; }
.ai-connector-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; position: relative; padding: 28px 30px; border: 1px solid rgba(125,211,252,.22); border-radius: 18px; color: #fff; background: linear-gradient(135deg,#0f2a56 0%,#123f75 58%,#0d7490 100%); box-shadow: 0 14px 32px rgba(15,42,86,.17); }
.ai-connector-hero::after { content: ''; position: absolute; right: -70px; bottom: -110px; width: 270px; height: 270px; border: 48px solid rgba(255,255,255,.055); border-radius: 50%; }
.ai-connector-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.ai-connector-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #a5f3fc; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ai-connector-hero h2 { margin: 0 0 8px; color: #fff; font-size: clamp(24px,3vw,34px); font-weight: 800; letter-spacing: -.55px; }
.ai-connector-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.65; }
.ai-connector-trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.ai-connector-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.08); font-size: 10.5px; font-weight: 700; }
.ai-connector-hero-status { display: flex; align-items: center; gap: 13px; z-index: 1; min-width: 190px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(255,255,255,.09); backdrop-filter: blur(9px); }
.ai-connector-status-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #cffafe; background: rgba(34,211,238,.17); font-size: 24px; }
.ai-connector-hero-status strong,.ai-connector-hero-status span { display: block; }
.ai-connector-hero-status strong { color: #fff; font-size: 24px; line-height: 1; }
.ai-connector-hero-status div > span { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; }
.ai-connector-card { overflow: hidden; border: 1px solid #e3eaf3; }
.ai-connector-card .card-header { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.ai-connector-url-wrap { display: flex; gap: 9px; }
.ai-connector-url-wrap .form-control { min-width: 0; color: #334155; background: #f8fafc; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.ai-connector-url-wrap .btn { flex: 0 0 auto; min-width: 94px; }
.ai-connector-help { margin: 10px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ai-connector-note { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid #bfdbfe; border-radius: 12px; color: #1e3a5f; background: #eff6ff; }
.ai-connector-note > i { flex: 0 0 auto; margin-top: 1px; color: #2563eb; font-size: 17px; }
.ai-connector-note strong,.ai-connector-note span { display: block; }
.ai-connector-note strong { margin-bottom: 2px; font-size: 12px; }
.ai-connector-note span { color: #52657d; font-size: 11.5px; line-height: 1.55; }
.ai-connector-capabilities { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.ai-connector-capabilities > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #e7edf5; border-radius: 12px; background: #fbfdff; }
.ai-connector-capabilities > div > i { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #1d4ed8; background: #eaf2ff; font-size: 15px; }
.ai-connector-capabilities strong,.ai-connector-capabilities small { display: block; }
.ai-connector-capabilities strong { color: #24354d; font-size: 12px; line-height: 1.35; }
.ai-connector-capabilities small { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.ai-connector-table thead th { color: #64748b; background: #f8fafc; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.ai-connector-table tbody td { font-size: 12px; }
.ai-connector-table code { color: #1e40af; font-size: 11px; overflow-wrap: anywhere; }
.ai-connector-empty { display: grid; justify-items: center; gap: 5px; padding: 27px 16px; color: var(--muted); text-align: center; }
.ai-connector-empty i { margin-bottom: 2px; color: #94a3b8; font-size: 28px; }
.ai-connector-empty strong { color: #475569; font-size: 13px; }
.ai-connector-empty span { font-size: 11.5px; }
@media (max-width: 991.98px) {
  .ai-connector-hero { align-items: flex-start; flex-direction: column; }
  .ai-connector-hero-status { min-width: 0; width: 100%; }
}
@media (max-width: 575.98px) {
  .ai-connector-hero { gap: 20px; padding: 22px 18px; border-radius: 15px; }
  .ai-connector-trust { align-items: flex-start; flex-direction: column; }
  .ai-connector-url-wrap { flex-direction: column; }
  .ai-connector-url-wrap .btn { width: 100%; }
  .ai-connector-capabilities { grid-template-columns: 1fr; }
  .ai-connector-card .card-header { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body[data-page="dashboard"] .anim-slide,.stat-card .stat-trend { opacity: 1 !important; transform: none !important; }
  .brand-plan-platinum::after { animation: none !important; transform: none !important; opacity: 1; }
  .subscription-shield .shield-sweep { animation: none !important; opacity: 0; }
}

/* ===== Corporate Invoice & Quotation Documents ===== */
.card:has(> .card-body .doc) { background: transparent; border: 0; box-shadow: none; }
.card:has(> .card-body .doc) > .card-header { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.card:has(> .card-body .doc) > .card-body { padding: 0 !important; }
.doc {
  --doc-navy: #102a56;
  --doc-blue: #1d4ed8;
  --doc-teal: #0f8b8d;
  --doc-ink: #15243b;
  --doc-soft: #f4f7fb;
  max-width: 1120px;
  min-height: 0;
  margin: 0 auto;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(15,35,70,.11);
}
.doc-quotation { --doc-blue: #0f766e; --doc-teal: #0d9488; }
.doc-accent { height: 9px; background: linear-gradient(90deg,var(--doc-navy) 0 68%,var(--doc-teal) 68%); }
.doc-body { padding: 42px 46px 34px; }
.doc-head { gap: 32px; padding-bottom: 30px; border-bottom: 1px solid #dfe6ef; }
.doc-brand { align-items: flex-start; max-width: 62%; }
/* Frame menstabilkan logo potret, segi empat atau landskap tanpa mengganggu blok maklumat syarikat. */
.doc-logo-frame { width: 108px; height: 108px; flex: 0 0 108px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.doc-logo-frame .doc-logo { display: block; width: 100%; height: 100%; max-width: 108px; border: 0; border-radius: 0; padding: 0; object-fit: contain; object-position: top center; }
.doc-company-name { color: var(--doc-navy); font-size: 22px; line-height: 1.2; }
.doc-company-meta { color: #65758b; font-size: 11.5px; line-height: 1.65; }
.doc-title-block { min-width: 315px; color: #fff; text-align: left; padding: 22px 24px; border-radius: 10px; background: linear-gradient(135deg,var(--doc-navy),#173f7a); box-shadow: 0 10px 24px rgba(16,42,86,.16); }
.doc-quotation .doc-title-block { background: linear-gradient(135deg,#123b48,#0f766e); }
.doc-title-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; padding: 0; border: 0; border-radius: 0; color: #8ed8dc; background: transparent; font-size: 9px; letter-spacing: 1.35px; }
.doc-title { color: #fff; font-size: 30px; letter-spacing: -.5px; text-transform: none; margin-bottom: 15px; }
.doc-meta-row { min-width: 0; gap: 20px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16); }
.doc-meta { color: rgba(255,255,255,.76); font-size: 11.5px; line-height: 1.75; }
.doc-meta:first-child { flex: 1; }
.doc-meta:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.doc-meta b { color: rgba(255,255,255,.66); font-weight: 500; }
.doc-parties { margin: 28px 0 25px; }
.doc-party { position: relative; padding: 19px 22px 19px 25px; border: 0; border-radius: 9px; background: var(--doc-soft); overflow: hidden; }
.doc-party::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--doc-teal); }
.doc-party-label { margin-bottom: 7px; color: var(--doc-teal); font-size: 9.5px; letter-spacing: 1.25px; }
.doc-party-name { color: var(--doc-ink); font-size: 16px; }
.doc-party-meta { color: #64748b; font-size: 11.5px; line-height: 1.65; }
.doc-table { margin-top: 0; border-collapse: collapse; }
.doc-table thead th { padding: 12px 13px; border: 0; border-bottom: 2px solid var(--doc-teal); border-radius: 0 !important; color: #fff; background: var(--doc-navy); font-size: 9.5px; letter-spacing: .8px; }
.doc-quotation .doc-table thead th { background: #123b48; }
.doc-table tbody td { padding: 13px; border-bottom: 1px solid #e7ecf2; color: #344258; font-size: 12.5px; }
.doc-table tbody tr:nth-child(even) { background: #f7f9fc; }
.doc-table .desc { color: var(--doc-ink); font-weight: 600; }
.doc-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-totals { margin-top: 20px; }
.doc-totals-inner { width: 345px; }
.doc-total-row { padding: 7px 15px; color: #6b778a; font-size: 12px; }
.doc-total-row b { color: #24344d; font-variant-numeric: tabular-nums; }
.doc-total-grand { margin-top: 8px; padding: 14px 16px; border: 0; border-radius: 8px; color: #fff; background: var(--doc-navy); box-shadow: 0 7px 16px rgba(16,42,86,.14); }
.doc-quotation .doc-total-grand { background: #123b48; }
.doc-total-grand .lbl { font-size: 10px; letter-spacing: 1px; }
.doc-total-grand .val { font-size: 21px; }
.doc-signatures { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 28px; break-inside: avoid; }
.doc-signature { min-width: 0; padding: 15px 17px; border: 1px solid #dce4ed; border-radius: 8px; color: #66758a; background: #fff; font-size: 10.5px; }
.doc-signature b { display: block; color: var(--doc-navy); font-size: 11px; letter-spacing: .35px; text-transform: uppercase; }
.doc-signature-space { height: 58px; margin: 8px 0 9px; border-bottom: 1px solid #9ca9b9; }
.doc-signature span { display: block; margin-top: 5px; }
.doc-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 18px 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #dfe6ef; }
.doc-footer-left { min-width: 0; }
.doc-footer-right { align-self: stretch; gap: 14px; }
.doc-verification { display: flex; align-items: stretch; gap: 14px; height: 100%; }
.doc-verification .doc-qr { flex: 0 0 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px; border: 1px solid #dce4ed; border-radius: 8px; background: #fff; }
.doc-verification .doc-notes { flex: 1 1 auto; min-width: 0; }
.doc-verify-title { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--doc-navy); font-size: 11px; font-weight: 750; }
.doc-verify-title i { color: var(--doc-teal); font-size: 14px; }
.doc-verify-row { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 8px; margin-top: 6px; align-items: start; }
.doc-verify-row > span { color: #7a8799; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.doc-verify-row code, .doc-verify-row a { min-width: 0; overflow-wrap: anywhere; }
.doc-notes { width: 100%; padding: 13px 15px; border: 0; border-left: 3px solid var(--doc-teal); border-radius: 7px; color: #627087; background: #f3f7fa; font-size: 11.5px; overflow-wrap: anywhere; }
.doc-notes code { color: #b4235a; font-size: 10.5px; }
.doc-notes a { color: var(--doc-blue); }
.doc-qr img { width: 96px; height: 96px; border: 1px solid #d7e0eb; border-radius: 7px; padding: 5px; }
.doc-qr .cap { max-width: 110px; color: #7a8799; font-size: 9px; }
.doc-pay { min-width: 230px; height: 100%; padding: 13px 15px; border: 1px solid #dce4ed; border-radius: 8px; background: #fff; }
.doc-pay .lbl { color: var(--doc-teal); font-size: 9px; letter-spacing: 1px; }
.doc-pay-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; margin-top: 7px; color: #718096; font-size: 10.5px; }
.doc-pay-row b { color: #26364f; font-weight: 650; overflow-wrap: anywhere; }
.doc-foot { grid-column: 1 / -1; margin-top: 2px; padding-top: 15px; border-top: 1px dashed #dce3ec; color: #7b8798; font-size: 10.5px; text-align: right; }
.doc-footer > .doc-notes { grid-column: 1 / -1; }
.doc-terms { grid-column: 1 / -1; padding: 13px 15px; border: 1px solid #e0e7ef; border-radius: 8px; color: #5f6f84; background: #fafbfd; }
.doc-terms-title { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--doc-navy); font-size: 9px; font-weight: 800; letter-spacing: .75px; text-transform: uppercase; }
.doc-terms-title i { color: var(--doc-teal); font-size: 12px; }
.doc-terms-content { font-size: 9.5px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.doc-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.doc-header-actions form { display: inline-flex; margin: 0; }
.doc-header-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 11px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
.list-toolbar .btn-sm { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; padding: 4px 10px; font-size: 12px; line-height: 1; white-space: nowrap; }
/* Kekalkan butang tindakan jadual pada saiz yang sama walaupun viewport mengecil. */
.btn-view-fixed { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 76px; min-width: 76px; max-width: 76px; height: 32px; min-height: 32px; padding: 4px 8px; flex: 0 0 76px; white-space: nowrap; }
.list-toolbar .toolbar-search .form-control-sm,
.list-toolbar .toolbar-search .form-select-sm { min-height: 32px; height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.listing-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.listing-summary-card { display:flex; align-items:center; gap:14px; min-height:104px; padding:17px 18px; border:1px solid #e3eaf3; border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(30,64,175,.06); }
.listing-summary-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; border-radius:12px; font-size:19px; }
.listing-summary-card small,.listing-summary-card strong,.listing-summary-card div>span { display:block; }
.listing-summary-card small { margin-bottom:2px; color:#728096; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.listing-summary-card strong { color:#1b2d49; font-size:20px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; }
.listing-summary-card div>span { margin-top:3px; color:#8a96a8; font-size:10px; }
.listing-summary-card.tone-blue .listing-summary-icon { color:#2563eb; background:#eaf2ff; }
.listing-summary-card.tone-green .listing-summary-icon { color:#059669; background:#e8f8f2; }
.listing-summary-card.tone-amber .listing-summary-icon { color:#d97706; background:#fff5df; }
.listing-summary-card.tone-purple .listing-summary-icon { color:#7c3aed; background:#f2ebff; }
.listing-summary-card.tone-red .listing-summary-icon { color:#dc2626; background:#fff0f0; }
.listing-summary-link{color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.listing-summary-link:hover{color:inherit;transform:translateY(-2px);border-color:#f0b95f;box-shadow:0 12px 28px rgba(217,119,6,.13)}
.listing-summary-link.is-active{border-color:#e9a83e;background:#fffbeb;box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.inventory-low-stock-row>td{background:#fffaf0!important;border-color:#f7e4bd}
.inventory-low-stock-row:hover>td{background:#fff4d8!important}
.inventory-low-stock-row>td:first-child{box-shadow:inset 4px 0 0 #e5a11a}
.inventory-low-stock-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:4px 7px;border:1px solid #f1c56d;border-radius:999px;color:#a55b08;background:#fff2cf;font-size:10px;font-weight:800;line-height:1;white-space:nowrap}
.inventory-stock-level{display:block;margin-top:5px;color:#9a651b;font-size:10.5px;white-space:nowrap}
.listing-row-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; white-space:nowrap; }
.listing-row-actions .btn-sm { display:inline-flex; align-items:center; justify-content:center; width:32px; min-width:32px; height:32px; min-height:32px; padding:0; }
@media (max-width:1199px) { .listing-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px) { .listing-summary-grid { grid-template-columns:1fr; gap:10px; } .listing-summary-card { min-height:90px; padding:14px 15px; } }
.status-filter-dropdown { flex: 0 0 auto; }
.status-filter-toggle { display: inline-flex; align-items: center; gap: 8px; width: 148px; height: 32px; padding: 0 10px; border: 1px solid #dce3ed; border-radius: 8px; color: #35445c; background: #fff; font-size: 12px; font-weight: 650; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.status-filter-toggle:hover, .status-filter-toggle[aria-expanded="true"] { border-color: #93b4e8; background: #f8fbff; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.status-filter-toggle::after { margin-left: auto; color: #7a8799; }
.status-filter-dropdown .dropdown-menu { width: 190px; margin-top: 7px !important; padding: 7px; border: 1px solid #dfe6ef; border-radius: 11px; box-shadow: 0 16px 38px rgba(15,35,70,.14); }
.status-filter-dropdown .dropdown-header { padding: 6px 9px 7px; color: #8a97a9; font-size: 9px; font-weight: 750; letter-spacing: 1px; }
.status-filter-dropdown .dropdown-item { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 7px 9px; border-radius: 7px; color: #435169; font-size: 11.5px; font-weight: 600; }
.status-filter-dropdown .dropdown-item:hover { color: #173b8f; background: #f1f6ff; }
.status-filter-dropdown .dropdown-item.active { color: #173b8f; background: #eaf2ff; }
.status-filter-dropdown .dropdown-item.active:hover { background: #e3edff; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(100,116,139,.10); }
.status-dot-all { background: #64748b; }
.status-dot-draft { background: #94a3b8; }
.status-dot-unpaid { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.status-dot-partial { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.status-dot-paid { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.status-dot-sent { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.status-dot-accepted { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.status-dot-rejected { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.status-dot-converted { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
@media (max-width: 767px) {
  .list-toolbar, .toolbar-search { width: 100%; flex-wrap: wrap; }
  .toolbar-search .form-control { flex: 1 1 180px; }
  .status-filter-dropdown { flex: 1 1 145px; }
  .status-filter-toggle { width: 100%; }
}

@media (max-width: 767px) {
  .doc-body { padding: 25px 20px; }
  .doc-brand { max-width: none; }
  .doc-title-block { width: 100%; min-width: 0; }
  .doc-signatures { grid-template-columns: 1fr; }
  .doc-footer { grid-template-columns: 1fr; }
  .doc-footer-right { flex-wrap: wrap; }
  .doc-verification { flex-direction: column; }
  .doc-verification .doc-qr { flex-basis: auto; align-self: flex-start; }
  .doc-foot { grid-column: 1; text-align: left; }
  .doc-terms { padding: 11px 12px; }
  .doc-table { min-width: 680px; }
  .doc-main { overflow-x: auto; }
}

@media print {
  .doc { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .doc-accent { height: 6px; }
  .doc-body { padding: 10mm 9mm 7mm; }
  .doc-head { padding-bottom: 16px; gap: 20px; flex-direction: row; }
  .doc-brand { max-width: 60%; }
  .doc-logo-frame { width: 82px; height: 82px; flex-basis: 82px; }
  .doc-logo-frame .doc-logo { max-width: 82px; }
  .doc-company-name { font-size: 18px; }
  .doc-company-meta { font-size: 9.5px; }
  .doc-title-block { min-width: 265px; padding: 15px 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-title { font-size: 24px; margin-bottom: 9px; }
  .doc-title-badge { font-size: 8px; }
  .doc-meta-row { padding-top: 8px; }
  .doc-meta { font-size: 9.5px; }
  .doc-parties { margin: 16px 0; }
  .doc-party { padding: 12px 15px 12px 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-party-name { font-size: 13px; }
  .doc-party-meta { font-size: 9.5px; }
  .doc-table thead th { padding: 8px 9px; font-size: 8.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-table tbody td { padding: 8px 9px; font-size: 10px; }
  .doc-totals { margin-top: 12px; }
  .doc-totals-inner { width: 290px; }
  .doc-total-row { padding: 4px 11px; font-size: 10px; }
  .doc-total-grand { padding: 9px 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-total-grand .val { font-size: 16px; }
  .doc-signatures { gap: 12px; margin-top: 16px; }
  .doc-signature { padding: 10px 12px; font-size: 9px; }
  .doc-signature-space { height: 40px; }
  .doc-footer { margin-top: 17px; padding-top: 14px; gap: 10px 16px; }
  .doc-notes { padding: 8px 10px; font-size: 9px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-qr img { width: 70px; height: 70px; }
  .doc-verification { gap: 9px; }
  .doc-verification .doc-qr { flex-basis: 82px; padding: 7px 6px; }
  .doc-verify-title { margin-bottom: 6px; font-size: 9.5px; }
  .doc-verify-row { grid-template-columns: 38px minmax(0,1fr); gap: 5px; margin-top: 3px; }
  .doc-pay { min-width: 190px; padding: 9px 11px; }
  .doc-pay-row { margin-top: 4px; font-size: 9px; }
  .doc-foot { padding-top: 9px; font-size: 9px; }
}

/* Print contract: compact A4, same hierarchy, and ink-safe without background graphics. */
@media print {
  @page { size: A4 portrait; margin: 6mm; }
  html, body { width: 100%; min-height: 0 !important; background: #fff !important; }
  body, .app-shell, .main-wrap, .content, .card, .card-body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .sidebar, .sidebar-backdrop, .topbar, .app-foot, .no-print,
  .card:has(> .card-body .doc) > .card-header { display: none !important; }
  .doc {
    --doc-navy: #111;
    --doc-blue: #111;
    --doc-teal: #444;
    --doc-ink: #111;
    --doc-soft: #fff;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .doc-accent { height: 2px !important; background: #111 !important; }
  .doc-body { display: block !important; padding: 5mm 6mm 3mm !important; }
  .doc-main { overflow: visible !important; }
  .doc-head {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1px solid #aaa !important;
    break-inside: avoid;
  }
  .doc-brand { flex: 1 1 auto !important; max-width: 60% !important; gap: 3mm !important; }
  /* Cetakan menggunakan nisbah yang sama seperti skrin supaya logo kekal seimbang dengan maklumat syarikat. */
  .doc-logo-frame { width: 28mm !important; height: 28mm !important; flex: 0 0 28mm !important; align-items: flex-start !important; }
  .doc-logo-frame .doc-logo { width: 100% !important; height: 100% !important; max-width: 28mm !important; border: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: top center !important; }
  .doc-company-name { color: #111 !important; font-size: 14pt !important; }
  .doc-company-meta { color: #444 !important; font-size: 7.5pt !important; line-height: 1.45 !important; }
  .doc-title-block {
    flex: 0 0 65mm !important;
    min-width: 65mm !important;
    padding: 3.5mm 4mm !important;
    border: 1px solid #555 !important;
    border-radius: 2mm !important;
    color: #111 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .doc-title-badge { color: #444 !important; font-size: 6.5pt !important; }
  .doc-title { margin: 1mm 0 2.5mm !important; color: #111 !important; font-size: 19pt !important; }
  .doc-meta-row { gap: 3mm !important; padding-top: 2mm !important; border-top: 1px solid #bbb !important; }
  .doc-meta, .doc-meta b { color: #333 !important; font-size: 7.5pt !important; line-height: 1.5 !important; }
  .doc-parties { margin: 4mm 0 !important; break-inside: avoid; }
  .doc-party { padding: 3mm 4mm !important; border: 1px solid #bbb !important; border-radius: 2mm !important; background: transparent !important; }
  .doc-party::before { width: 1mm !important; background: #444 !important; }
  .doc-party-label { margin-bottom: 1mm !important; color: #333 !important; font-size: 6.5pt !important; }
  .doc-party-name { margin-bottom: .5mm !important; color: #111 !important; font-size: 10pt !important; }
  .doc-party-meta { color: #444 !important; font-size: 7.5pt !important; line-height: 1.45 !important; }
  .doc-table { width: 100% !important; min-width: 0 !important; table-layout: auto; page-break-inside: auto; }
  .doc-table thead { display: table-header-group; }
  .doc-table tr { page-break-inside: avoid; page-break-after: auto; }
  .doc-table thead th {
    padding: 2.2mm 2mm !important;
    border-top: 1px solid #555 !important;
    border-bottom: 1px solid #555 !important;
    color: #111 !important;
    background: transparent !important;
    font-size: 6.5pt !important;
  }
  .doc-table tbody tr:nth-child(even) { background: transparent !important; }
  .doc-table tbody td { padding: 2.2mm 2mm !important; border-bottom: 1px solid #ddd !important; color: #222 !important; font-size: 8pt !important; }
  .doc-table .desc { color: #111 !important; }
  .doc-totals { margin-top: 3mm !important; break-inside: avoid; }
  .doc-totals-inner { width: 64mm !important; }
  .doc-total-row { padding: 1mm 2.5mm !important; color: #444 !important; font-size: 7.5pt !important; }
  .doc-total-row b { color: #111 !important; }
  .doc-total-grand { margin-top: 1.5mm !important; padding: 2.5mm 3mm !important; border: 1.5px solid #222 !important; border-radius: 2mm !important; color: #111 !important; background: transparent !important; box-shadow: none !important; }
  .doc-total-grand .lbl { font-size: 7pt !important; }
  .doc-total-grand .val { font-size: 13pt !important; }
  .doc-signatures { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 5mm !important; margin-top: 4mm !important; break-inside: avoid; }
  .doc-signature { padding: 2.5mm 3mm !important; border: 1px solid #999 !important; border-radius: 2mm !important; color: #333 !important; background: transparent !important; font-size: 6.5pt !important; }
  .doc-signature b { color: #111 !important; font-size: 7pt !important; }
  .doc-signature-space { height: 13mm !important; margin: 1.5mm 0 2mm !important; border-bottom: 1px solid #777 !important; }
  .doc-signature span { margin-top: 1mm !important; }
  .doc-footer {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 52mm !important;
    align-items: stretch !important;
    gap: 3mm !important;
    margin-top: 4mm !important;
    padding-top: 3mm !important;
    border-top: 1px solid #bbb !important;
    break-inside: avoid;
  }
  .doc-footer-right { display: flex !important; }
  .doc-verification { display: flex !important; flex-direction: row !important; gap: 2.5mm !important; }
  .doc-verification .doc-qr { flex: 0 0 22mm !important; align-self: stretch !important; padding: 1.5mm !important; border: 1px solid #bbb !important; background: transparent !important; }
  .doc-qr img { width: 18mm !important; height: 18mm !important; border: 0 !important; padding: 0 !important; }
  .doc-qr .cap { max-width: 20mm !important; color: #444 !important; font-size: 5.5pt !important; }
  .doc-notes { padding: 2.5mm 3mm !important; border: 1px solid #bbb !important; border-left: 1mm solid #444 !important; color: #333 !important; background: transparent !important; font-size: 7pt !important; }
  .doc-verify-title { margin-bottom: 1.5mm !important; color: #111 !important; font-size: 8pt !important; }
  .doc-verify-title i { color: #333 !important; }
  .doc-verify-row { grid-template-columns: 10mm minmax(0,1fr) !important; gap: 1.5mm !important; margin-top: 1mm !important; }
  .doc-verify-row > span { color: #555 !important; font-size: 5.5pt !important; }
  .doc-verify-row code, .doc-verify-row a, .doc-notes code, .doc-notes a { color: #222 !important; font-size: 6pt !important; }
  .doc-pay { width: 100% !important; min-width: 0 !important; padding: 2.5mm 3mm !important; border: 1px solid #bbb !important; color: #111 !important; background: transparent !important; }
  .doc-pay .lbl { color: #333 !important; font-size: 6pt !important; }
  .doc-pay-row { grid-template-columns: 15mm 1fr !important; gap: 1.5mm !important; margin-top: 1.5mm !important; color: #555 !important; font-size: 6.5pt !important; }
  .doc-pay-row b { color: #111 !important; }
  .doc-foot { grid-column: 1 / -1 !important; margin-top: 0 !important; padding-top: 2mm !important; border-top: 1px dashed #bbb !important; color: #555 !important; font-size: 6.5pt !important; }
  .doc-terms { grid-column: 1 / -1 !important; padding: 2.5mm 3mm !important; border: 1px solid #bbb !important; color: #333 !important; background: transparent !important; break-inside: avoid; }
  .doc-terms-title { margin-bottom: 1.5mm !important; color: #111 !important; font-size: 7pt !important; }
  .doc-terms-title i { color: #333 !important; }
  .doc-terms-content { font-size: 6.5pt !important; line-height: 1.4 !important; }
}

/* Full-colour print theme. Requires "Background graphics" in Chrome. */
@media print {
  body.print-color .doc {
    --doc-navy: #102a56;
    --doc-blue: #1d4ed8;
    --doc-teal: #0f8b8d;
    --doc-ink: #15243b;
    --doc-soft: #f4f7fb;
    color: var(--doc-ink) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.print-color .doc-quotation { --doc-blue: #0f766e; --doc-teal: #0d9488; }
  body.print-color .doc-accent { background: linear-gradient(90deg,var(--doc-navy) 0 68%,var(--doc-teal) 68%) !important; }
  body.print-color .doc-title-block { border-color: transparent !important; color: #fff !important; background: linear-gradient(135deg,var(--doc-navy),#173f7a) !important; }
  body.print-color .doc-quotation .doc-title-block { background: linear-gradient(135deg,#123b48,#0f766e) !important; }
  body.print-color .doc-title-badge { color: #8ed8dc !important; }
  body.print-color .doc-title { color: #fff !important; }
  body.print-color .doc-meta,
  body.print-color .doc-meta b { color: rgba(255,255,255,.78) !important; }
  body.print-color .doc-meta-row { border-top-color: rgba(255,255,255,.25) !important; }
  body.print-color .doc-party { border-color: transparent !important; background: var(--doc-soft) !important; }
  body.print-color .doc-party::before { background: var(--doc-teal) !important; }
  body.print-color .doc-party-label { color: var(--doc-teal) !important; }
  body.print-color .doc-table thead th { border-color: var(--doc-teal) !important; color: #fff !important; background: var(--doc-navy) !important; }
  body.print-color .doc-quotation .doc-table thead th { background: #123b48 !important; }
  body.print-color .doc-table tbody tr:nth-child(even) { background: #f7f9fc !important; }
  body.print-color .doc-total-grand { border-color: transparent !important; color: #fff !important; background: var(--doc-navy) !important; }
  body.print-color .doc-quotation .doc-total-grand { background: #123b48 !important; }
  body.print-color .doc-notes { border-color: transparent !important; border-left-color: var(--doc-teal) !important; color: #627087 !important; background: #f3f7fa !important; }
  body.print-color .doc-terms { border-color: #dfe7ef !important; color: #5f6f84 !important; background: #fafbfd !important; }
  body.print-color .doc-terms-title { color: var(--doc-navy) !important; }
  body.print-color .doc-terms-title i { color: var(--doc-teal) !important; }
  body.print-color .doc-verify-title { color: var(--doc-navy) !important; }
  body.print-color .doc-verify-title i { color: var(--doc-teal) !important; }
  body.print-color .doc-verify-row code { color: #b4235a !important; }
  body.print-color .doc-verify-row a { color: var(--doc-blue) !important; }
  body.print-color .doc-pay .lbl { color: var(--doc-teal) !important; }
}

/* ===== Modern Payroll Payslip ===== */
.payslip-page { min-height: 100vh; background: #eef3f8; }
.payslip-wrap { width: min(940px,calc(100% - 32px)); margin: 28px auto 42px; }
.payslip-doc { --pay-navy:#102a56; --pay-blue:#2563eb; --pay-teal:#0f8b8d; --pay-ink:#18263c; overflow: hidden; border: 1px solid #dbe3ed; border-radius: 14px; background: #fff; box-shadow: 0 24px 65px rgba(15,35,70,.12); }
.payslip-accent { height: 8px; background: linear-gradient(90deg,var(--pay-navy) 0 70%,var(--pay-teal) 70%); }
.payslip-body { padding: 36px 40px 30px; }
.payslip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid #dfe6ef; }
.payslip-brand { display: flex; align-items: flex-start; gap: 16px; max-width: 65%; }
.payslip-logo { width: auto; height: 68px; max-width: 155px; object-fit: contain; }
.payslip-brand h1 { margin: 1px 0 7px; color: var(--pay-navy); font-size: 22px; font-weight: 800; letter-spacing: -.45px; }
.payslip-company-meta { display: flex; flex-direction: column; gap: 3px; color: #6d7b8f; font-size: 11px; line-height: 1.45; }
.payslip-identity { min-width: 245px; padding: 18px 20px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--pay-navy),#17447f); text-align: left; }
.payslip-kicker { display: flex; align-items: center; gap: 6px; color: #90d8dc; font-size: 8.5px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; }
.payslip-identity h2 { margin: 7px 0 12px; font-size: 27px; font-weight: 800; letter-spacing: -.6px; }
.payslip-period { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); font-size: 12px; }
.payslip-period b { color: #fff; }
.employee-card { margin-top: 24px; overflow: hidden; border: 1px solid #e0e6ee; border-radius: 10px; }
.employee-card-head { display: flex; align-items: center; gap: 8px; padding: 11px 15px; color: var(--pay-navy); background: #f3f7fb; font-size: 10px; font-weight: 750; letter-spacing: .85px; text-transform: uppercase; }
.employee-card-head i { color: var(--pay-teal); font-size: 14px; }
.employee-card-head b { margin-left: auto; padding: 4px 8px; border-radius: 5px; color: #52637b; background: #fff; font-size: 9px; letter-spacing: .6px; }
.employee-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.employee-field { min-height: 68px; padding: 13px 15px; border-top: 1px solid #edf1f5; border-right: 1px solid #edf1f5; }
.employee-field:nth-child(3n) { border-right: 0; }
.employee-field > span { display: block; margin-bottom: 5px; color: #8793a4; font-size: 8.5px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.employee-field strong { display: block; color: #27364d; font-size: 11.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.employee-field small { display: block; margin-top: 2px; color: #748196; font-size: 9.5px; }
.employee-name strong { color: var(--pay-navy); font-size: 13px; }
.pay-ledgers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.pay-ledger { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 10px; }
.ledger-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: #fff; background: var(--pay-navy); font-size: 10px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase; }
.deduction-ledger .ledger-head { background: #384b68; }
.ledger-head span { display: flex; align-items: center; gap: 7px; }
.ledger-head i { color: #82d2d4; font-size: 13px; }
.ledger-head small { color: rgba(255,255,255,.65); font-size: 8px; }
.ledger-row { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 9px 14px; border-bottom: 1px solid #edf1f5; color: #435168; font-size: 11px; }
.ledger-row:nth-child(odd) { background: #f9fafc; }
.ledger-row > span small { display: inline-block; margin-left: 4px; color: #8a96a7; font-size: 8.5px; }
.ledger-row b { color: #25354c; font-size: 11px; font-variant-numeric: tabular-nums; }
.ledger-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: var(--pay-navy); background: #edf4fb; font-size: 10px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.deduction-ledger .ledger-total { color: #2f405b; background: #f0f3f7; }
.ledger-total b { font-size: 12px; font-variant-numeric: tabular-nums; }
.net-pay-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; padding: 18px 21px; border-radius: 10px; color: #fff; background: linear-gradient(110deg,#0c5f65,var(--pay-teal)); box-shadow: 0 10px 24px rgba(15,139,141,.16); }
.net-pay-card span { display: block; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.net-pay-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.7); font-size: 9.5px; }
.net-pay-card strong { font-size: 25px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.employer-summary { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: 0; margin-top: 18px; overflow: hidden; border: 1px solid #e0e6ee; border-radius: 9px; }
.employer-title, .employer-item { min-height: 54px; padding: 11px 14px; }
.employer-title { display: flex; align-items: center; gap: 8px; color: var(--pay-navy); background: #f4f7fb; font-size: 10px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; }
.employer-title i { color: var(--pay-teal); font-size: 14px; }
.employer-item { border-left: 1px solid #e6ebf1; }
.employer-item span { display: block; color: #8a96a7; font-size: 8px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.employer-item b { display: block; margin-top: 4px; color: #2b3b53; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.payslip-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 20px; margin-top: 22px; padding-top: 15px; border-top: 1px dashed #d8e0e9; color: #7c899a; font-size: 9px; }
.payslip-foot i { margin-right: 4px; color: var(--pay-teal); }
.payslip-system { margin-top: 7px; color: #7c899a; font-size: 9px; text-align: center; }
.payslip-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.payslip-actions .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 14px; font-size: 12px; }
.payslip-print-menu { width: 270px; margin-top: 8px !important; padding: 8px; border: 1px solid #dce4ee; border-radius: 12px; box-shadow: 0 18px 42px rgba(15,35,70,.16); }
.payslip-print-menu .dropdown-header { padding: 6px 9px 8px; color: #8996a8; font-size: 9px; font-weight: 750; letter-spacing: 1px; }
.payslip-print-option { display: flex; align-items: center; gap: 11px; padding: 9px; border-radius: 9px; }
.payslip-print-option:hover { background: #f1f6ff; }
.payslip-print-option > span:last-child { min-width: 0; }
.payslip-print-option b { display: block; color: #263750; font-size: 12px; font-weight: 700; }
.payslip-print-option small { display: block; margin-top: 2px; color: #7d899b; font-size: 9.5px; }
.print-option-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; }
.print-option-icon.basic { color: #475569; background: #eef2f6; }
.print-option-icon.color { color: #fff; background: linear-gradient(135deg,#173b8f,#0f8b8d); }

@media (max-width: 700px) {
  .payslip-wrap { width: min(100% - 20px,940px); margin-top: 12px; }
  .payslip-body { padding: 24px 19px; }
  .payslip-head { flex-direction: column; }
  .payslip-brand { max-width: none; }
  .payslip-identity { width: 100%; min-width: 0; }
  .employee-grid { grid-template-columns: 1fr 1fr; }
  .employee-field:nth-child(3n) { border-right: 1px solid #edf1f5; }
  .employee-field:nth-child(2n) { border-right: 0; }
  .pay-ledgers { grid-template-columns: 1fr; }
  .employer-summary { grid-template-columns: 1fr 1fr 1fr; }
  .employer-title { grid-column: 1 / -1; }
  .employer-item:first-of-type { border-left: 0; }
  .payslip-foot { flex-direction: column; gap: 5px; }
}

@media (max-width: 430px) {
  .employee-grid { grid-template-columns: 1fr; }
  .employee-field { border-right: 0 !important; }
  .net-pay-card { align-items: flex-start; flex-direction: column; }
  .payslip-actions .btn { justify-content: center; }
}

@media print {
  @page { size: A4 portrait; margin: 7mm; }
  .payslip-doc { --pay-print-line: #555; }
  .payslip-page { min-height: 0 !important; background: #fff !important; }
  .payslip-wrap { width: 100% !important; margin: 0 !important; }
  .payslip-doc { min-height: 283mm; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .payslip-body { display: flex; min-height: 283mm; padding: 6mm 7mm 4mm !important; flex-direction: column; }
  .payslip-accent { height: 2px; background: #222 !important; }
  body.print-ink .payslip-accent { display: none !important; }
  .payslip-head { gap: 7mm; padding-bottom: 4mm; border-bottom-color: var(--pay-print-line) !important; }
  .payslip-logo { height: 15mm; max-width: 35mm; }
  .payslip-brand h1 { color: #111 !important; font-size: 14pt; }
  .payslip-company-meta { color: #444 !important; font-size: 7pt; }
  .payslip-identity { min-width: 57mm; padding: 3mm 4mm; border: 1px solid var(--pay-print-line); color: #111 !important; background: transparent !important; }
  .payslip-kicker, .payslip-period, .payslip-period b { color: #444 !important; }
  .payslip-identity h2 { margin: 1mm 0 2mm; color: #111 !important; font-size: 18pt; }
  .employee-card { margin-top: 4mm; border-color: var(--pay-print-line) !important; break-inside: avoid; }
  .employee-card-head { padding: 2mm 3mm; color: #111 !important; background: transparent !important; }
  .employee-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .employee-field { min-height: 14mm; padding: 2.5mm 3mm; border-top-color: var(--pay-print-line) !important; border-right-color: var(--pay-print-line) !important; }
  .employee-field > span { font-size: 6pt; }
  .employee-field strong { color: #111 !important; font-size: 8pt; }
  .employee-field small { font-size: 6.5pt; }
  .pay-ledgers { grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 4mm; break-inside: avoid; }
  .pay-ledger { border-color: var(--pay-print-line) !important; }
  .ledger-head { padding: 2mm 3mm; border-bottom: 1px solid var(--pay-print-line); color: #111 !important; background: transparent !important; }
  .ledger-head i, .ledger-head small { color: #444 !important; }
  .ledger-row { min-height: 7mm; padding: 1.5mm 3mm; border-bottom-color: var(--pay-print-line) !important; color: #222 !important; font-size: 7.5pt; background: transparent !important; }
  .ledger-row b { color: #111 !important; font-size: 7.5pt; }
  .ledger-total { padding: 2mm 3mm; border-top: 1px solid var(--pay-print-line); color: #111 !important; background: transparent !important; }
  .net-pay-card { margin-top: 4mm; padding: 3mm 4mm; border: 1px solid var(--pay-print-line); color: #111 !important; background: transparent !important; box-shadow: none !important; break-inside: avoid; }
  .net-pay-card small { color: #444 !important; }
  .net-pay-card strong { font-size: 17pt; }
  .employer-summary { margin-top: 3mm; border-color: var(--pay-print-line) !important; break-inside: avoid; }
  .employer-title, .employer-item { min-height: 11mm; padding: 2mm 3mm; background: transparent !important; }
  .employer-item { border-left-color: var(--pay-print-line) !important; }
  .employer-title, .employer-item b { color: #111 !important; }
  .payslip-foot { margin-top: 4mm; padding-top: 3mm; border-top-color: var(--pay-print-line) !important; color: #444 !important; font-size: 6.5pt; }
  .payslip-system { margin-top: auto; padding-top: 3mm; color: #555 !important; font-size: 6.5pt; }
  body.print-color .payslip-doc { --pay-print-line: #b8cadc; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body.print-color .payslip-accent { display: none !important; }
  body.print-color .payslip-identity { border-color: #a9c4de !important; color: #23435f !important; background: #d9e9f6 !important; }
  body.print-color .payslip-identity h2, body.print-color .payslip-period b { color: #274663 !important; }
  body.print-color .payslip-kicker { color: #28787b !important; }
  body.print-color .payslip-period { border-top-color: #a9c4de !important; color: #526b82 !important; }
  body.print-color .employee-card-head { color: var(--pay-navy) !important; background: #e8f0f7 !important; }
  body.print-color .ledger-head { border-color: #a9c4de !important; color: #23435f !important; background: #cbdff0 !important; }
  body.print-color .deduction-ledger .ledger-head { color: #40566d !important; background: #dbe4ed !important; }
  body.print-color .ledger-head i, body.print-color .ledger-head small { color: #39777d !important; }
  body.print-color .ledger-total { color: var(--pay-navy) !important; background: #dceaf6 !important; }
  body.print-color .deduction-ledger .ledger-total { color: #2f405b !important; background: #e2e8ef !important; }
  body.print-color .net-pay-card { border-color: #8fc8bb !important; color: #245b56 !important; background: #c9e8e1 !important; }
  body.print-color .net-pay-card small { color: #527a76 !important; }
  body.print-color .employer-title { color: var(--pay-navy) !important; background: #e6eef6 !important; }
}
.coa-account-name {
  display: inline-block;
  padding-inline-start: calc(var(--coa-depth, 0) * 1.25rem);
}

.coa-parent-note {
  padding-inline-start: calc((var(--coa-depth, 0) + 1) * 1.25rem);
}
.fs-coa-name{display:inline-block;padding-left:calc(var(--fs-depth,0) * 1.35rem)}
.fs-coa-group td{font-weight:700;background:rgba(15,23,42,.025)}
.fs-coa-direct{color:var(--bs-secondary-color);font-style:italic}
.fs-coa-subtotal td{font-weight:700;border-top:1px solid var(--bs-border-color);background:rgba(13,110,253,.035)}
.fs-balance-sheet .fs-coa-subtotal td:first-child{border-top-color:transparent}
.fs-calculated-equity td{background:rgba(14,165,233,.055);border-top:1px dashed rgba(14,165,233,.35)}
.app-toast-container{position:fixed;top:78px;right:22px;z-index:1090;width:min(420px,calc(100vw - 28px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.app-toast{position:relative;width:100%;overflow:hidden;border:1px solid rgba(15,23,42,.1);border-radius:13px;background:#fff;box-shadow:0 16px 38px rgba(15,23,42,.18);pointer-events:auto}
.app-toast .toast-body{display:grid;grid-template-columns:22px minmax(0,1fr) 18px;align-items:start;gap:11px;padding:15px 16px;color:#253044;font-size:13.5px;line-height:1.5}
.app-toast .toast-body>i{margin-top:2px;font-size:17px}
.app-toast .btn-close{width:14px;height:14px;margin-top:2px;padding:2px;box-shadow:none}
.app-toast-success .toast-body>i{color:#16855b}.app-toast-danger .toast-body>i{color:#dc3545}.app-toast-warning .toast-body>i{color:#c47b00}.app-toast-info .toast-body>i{color:#1677b8}
.app-toast-timer{height:3px;transform-origin:left;background:currentColor;animation:appToastTimer 15s linear forwards}
.app-toast-success .app-toast-timer{color:#22a06b}.app-toast-danger .app-toast-timer{color:#dc3545}.app-toast-warning .app-toast-timer{color:#e8a317}.app-toast-info .app-toast-timer{color:#2495d0}
@keyframes appToastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:767.98px){.app-toast-container{top:68px;right:14px;left:14px;width:auto}}
@media(prefers-reduced-motion:reduce){.app-toast-timer{animation:none}}