body { background: #f5f6f8; }

.app-shell { min-height: 100vh; }
.sidebar { width: 232px; flex-shrink: 0; background: #14324f; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { color: #fff; }
.sidebar .nav-link { color: rgba(255, 255, 255, .75); padding: .4rem .75rem; }
.sidebar .nav-link.active { background: #1d6fb8; color: #fff; }
.sidebar .nav-link:hover { color: #fff; }
.org-select { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }
.org-select option { color: #000; }

.content { min-width: 0; }
.login-wrap { min-height: 100vh; background: #14324f; }
.login-card { width: 390px; max-width: 92vw; }

.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080; width: 330px; }

.table-num, .table-num td, .table-num th { font-variant-numeric: tabular-nums; }
.clickable { cursor: pointer; }
.clickable:hover { background: #eef4fb; }
.amount-in { color: #198754; font-weight: 600; }
.amount-out { color: #dc3545; font-weight: 600; }

.txn-card .border-start { border-color: #e3e6ea !important; }

/* ---- printable invoice ---- */
.print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 1.5rem; background: #fff; }
}
.print-area { font-size: 12px; color: #222; font-variant-numeric: tabular-nums; }
.pa-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pa-doc-title { font-size: 30px; font-weight: 300; letter-spacing: .5px; }
.pa-logo { max-height: 72px; max-width: 200px; object-fit: contain; }
.pa-meta { display: flex; gap: 24px; margin-top: 20px; }
.pa-meta-col { flex: 1; }
.pa-company { text-align: left; }
.pa-small-label { font-weight: 700; font-size: 11px; }
.pa-mt { margin-top: 8px; }
.pa-bold { font-weight: 700; }
.pa-pre { white-space: pre-line; }
.pa-table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.pa-table th { border-bottom: 1.5px solid #333; font-size: 11px; padding: 6px 4px; text-align: left; }
.pa-table td { border-bottom: 1px solid #ddd; padding: 7px 4px; }
.pa-table .num, .pa-totals .num { text-align: right; }
.pa-totals { display: flex; justify-content: flex-end; margin-top: 6px; }
.pa-totals table { width: 46%; border-collapse: collapse; }
.pa-totals td { padding: 5px 4px; border-bottom: 1px solid #ddd; }
.pa-totals .pa-grand td { font-weight: 700; border-bottom: 2px solid #333; }
.pa-due { margin-top: 18px; font-weight: 700; }
.pa-payinfo { margin-top: 12px; }
.pa-notes { margin-top: 14px; color: #444; }
.pa-advice { margin-top: 48px; }
.pa-cut { border-top: 1.5px dashed #999; position: relative; height: 18px; }
.pa-cut::before { content: "✂"; position: absolute; top: -11px; left: 14px; background: #fff; padding: 0 4px; color: #666; }
.pa-advice-flex { display: flex; justify-content: space-between; gap: 24px; }
.pa-advice-title { font-size: 20px; font-weight: 300; letter-spacing: .5px; }
.pa-advice-table { border-collapse: collapse; min-width: 46%; }
.pa-advice-table th { text-align: left; font-size: 11px; padding: 5px 10px 5px 0; vertical-align: top; }
.pa-advice-table td { border-bottom: 1px solid #bbb; padding: 5px 4px; min-width: 190px; }
.pa-advice-table .pa-enclosed span { font-size: 9px; color: #888; }