/* BookKeep — External stylesheet (extracted from HTML for CSP compliance) */

:root {
    --bg: #0f172a; --bg2: #1e293b; --bg3: #334155;
    --text: #f1f5f9; --text2: #94a3b8; --text3: #64748b;
    --accent: #059669; --accent2: #10b981; --accent-bg: #059669/0.15;
    --red: #ef4444; --orange: #f59e0b; --blue: #3b82f6;
    --border: #334155; --radius: 10px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
}
[data-theme="light"] {
    --bg: #f8fafc; --bg2: #ffffff; --bg3: #e2e8f0;
    --text: #0f172a; --text2: #475569; --text3: #94a3b8;
    --border: #cbd5e1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; }
a { color: var(--accent2); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ── Login Screen ── */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; }
.login-card h1 { font-size: 28px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.login-card h1 .logo { width: 36px; height: 36px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; }
.login-card p { color: var(--text2); margin-bottom: 24px; }
.login-card .field { margin-bottom: 16px; }
.login-card label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.login-card input { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 15px; }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .btn { width: 100%; padding: 12px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600; margin-top: 8px; transition: opacity .15s; }
.login-card .btn:hover { opacity: .9; }
.login-card .error { color: var(--red); font-size: 13px; margin-top: 8px; display: none; }
.login-card .toggle { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text2); }
.login-card .passkey-divider { display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text2);font-size:12px; }
.login-card .passkey-divider::before,.login-card .passkey-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.passkey-btn { width:100%;padding:11px;background:transparent;color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:500;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s; }
.passkey-btn:hover { border-color:var(--accent);background:rgba(79,142,247,.07); }
.passkey-btn:disabled { opacity:.5;cursor:not-allowed; }
.passkey-item { display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-bottom:8px; }
.passkey-item .pi-icon { font-size:24px; }
.passkey-item .pi-info { flex:1; }
.passkey-item .pi-name { font-weight:600;font-size:14px; }
.passkey-item .pi-meta { font-size:12px;color:var(--text2);margin-top:2px; }

/* ── App Shell ── */
#app { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-left .logo { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 12px; }
.topbar-left h2 { font-size: 18px; font-weight: 700; }
.entity-switcher { display: flex; align-items: center; gap: 8px; }
.entity-switcher select { padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right button { background: none; border: none; color: var(--text2); font-size: 13px; padding: 6px 10px; border-radius: var(--radius); }
.topbar-right button:hover { background: var(--bg3); color: var(--text); }

/* ── Tabs ── */
.tab-bar { display: flex; overflow-x: auto; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 12px; gap: 2px; scrollbar-width: none; align-items: center; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text2); background: none; border: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent2); border-bottom-color: var(--accent); }

/* ── More Dropdown Menu ── */
.tab-more-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 150; min-width: 180px; overflow: hidden; margin-top: 2px; }
.tab-more-dropdown.show { display: flex; flex-direction: column; }
.tab-btn-dropdown { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text2); background: none; border: none; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; transition: all .15s; cursor: pointer; }
.tab-btn-dropdown:hover { background: var(--bg3); color: var(--text); }
.tab-btn-dropdown:last-child { border-bottom: none; }

/* ── Tab Content ── */
.tab-content { display: none; padding: 20px; max-width: 1400px; margin: 0 auto; }
.tab-content.active { display: block; }

/* ── Dashboard ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kpi-card .label { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.kpi-card .value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.kpi-card .value.positive { color: var(--accent2); }
.kpi-card .value.negative { color: var(--red); }
.kpi-card .sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; background: var(--bg3); color: var(--text2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: rgba(255,255,255,.02); }
.data-table .amount { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .debit { color: var(--accent2); }
.data-table .credit { color: var(--blue); }

/* ── Section Headers ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h3 { font-size: 16px; font-weight: 600; }
.btn-sm { padding: 7px 14px; font-size: 13px; font-weight: 500; border: none; border-radius: var(--radius); background: var(--accent); color: white; transition: opacity .15s; }
.btn-sm:hover { opacity: .9; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg3); }

/* ── Modals ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; }
.modal-close { background: none; border: none; color: var(--text2); font-size: 20px; padding: 4px 8px; border-radius: 6px; }
.modal-close:hover { background: var(--bg3); }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.form-row textarea { min-height: 60px; resize: vertical; }
.form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Journal Entry Builder ── */
.je-lines { margin: 12px 0; }
.je-line { display: grid; grid-template-columns: 2fr 1fr 1fr 40px; gap: 8px; margin-bottom: 6px; align-items: center; }
.je-line select, .je-line input { padding: 7px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
.je-line .remove-line { background: none; border: none; color: var(--red); font-size: 18px; padding: 0 4px; }
.je-totals { display: flex; justify-content: flex-end; gap: 24px; padding: 8px 0; font-size: 14px; font-weight: 600; }
.je-totals .balanced { color: var(--accent2); }
.je-totals .unbalanced { color: var(--red); }

/* ── COA Groups ── */
.coa-group { margin-bottom: 20px; }
.coa-group-header { font-size: 14px; font-weight: 600; color: var(--accent2); padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; text-transform: capitalize; }

/* ── Status Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.badge-draft { background: var(--bg3); color: var(--text2); }
.badge-posted { background: rgba(5,150,105,.2); color: var(--accent2); }
.badge-reversed { background: rgba(239,68,68,.2); color: var(--red); }
.badge-paid { background: rgba(5,150,105,.2); color: var(--accent2); }
.badge-sent { background: rgba(59,130,246,.2); color: var(--blue); }
.badge-overdue { background: rgba(239,68,68,.2); color: var(--red); }

/* ── Loading ── */
.loading { text-align: center; padding: 40px; color: var(--text2); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text3); }
.empty-state h4 { font-size: 16px; color: var(--text2); margin-bottom: 8px; }

/* ── Skeleton Loading ── */
.skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-card { height: 80px; }
.skeleton-row { display: grid; grid-template-columns: 80px 2fr 1fr 1fr; gap: 12px; padding: 10px 12px; }
.skeleton-row span { height: 14px; border-radius: 4px; }

/* ── Toast Notifications ── */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 500; pointer-events: auto; animation: toastIn .3s ease-out, toastOut .3s ease-in forwards; animation-delay: 0s, 3.5s; box-shadow: 0 4px 12px rgba(0,0,0,.3); max-width: 380px; display: flex; align-items: center; gap: 10px; }
.toast-success { background: #065f46; color: #a7f3d0; border: 1px solid #059669; }
.toast-error { background: #7f1d1d; color: #fca5a5; border: 1px solid #ef4444; }
.toast-info { background: #1e3a5f; color: #93c5fd; border: 1px solid #3b82f6; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ── Dashboard Charts ── */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.chart-card h4 { font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.chart-card canvas { width: 100% !important; max-height: 220px; }
@media (max-width: 768px) { .chart-row { grid-template-columns: 1fr; } }

/* ── Drag-Drop Upload ── */
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px; text-align: center; transition: all .2s; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: rgba(5,150,105,.05); }
.drop-zone .icon { font-size: 36px; margin-bottom: 8px; }
.drop-zone p { color: var(--text2); font-size: 14px; }
.drop-zone .hint { color: var(--text3); font-size: 12px; margin-top: 4px; }

/* ── Match Badges ── */
.match-high { background: rgba(5,150,105,.2); color: var(--accent2); }
.match-medium { background: rgba(245,158,11,.2); color: var(--orange); }
.match-low { background: rgba(239,68,68,.2); color: var(--red); }

/* ── Keyboard Hint ── */
.kbd-hint { position: fixed; bottom: 12px; left: 12px; font-size: 11px; color: var(--text3); z-index: 50; }
.kbd-hint kbd { background: var(--bg3); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 10px; border: 1px solid var(--border); }

/* ── Invoice Builder ── */
.inv-line { display: grid; grid-template-columns: 3fr 80px 100px 100px 36px; gap: 8px; margin-bottom: 6px; align-items: center; }
.inv-line input, .inv-line select { padding: 7px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
.inv-totals { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.inv-totals .total-row { display: flex; gap: 24px; }
.inv-totals .total-row .label { color: var(--text2); min-width: 100px; text-align: right; }
.inv-totals .grand-total { font-size: 18px; font-weight: 700; color: var(--accent2); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .tab-btn { padding: 8px 12px; font-size: 12px; }
    .topbar { padding: 10px 14px; }
    .tab-content { padding: 14px; }
    .je-line { grid-template-columns: 1fr; }
    .form-row-inline { grid-template-columns: 1fr; }
    .tab-more-dropdown { min-width: 160px; }
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Utility classes (generated from inline style= attributes) ── */
.bk-display-cb45 { display:none; }
.bk-text-align-c3f2 { text-align:center; margin-bottom:20px; }
.bk-font-size-ab37 { font-size:32px; margin-bottom:8px; }
.bk-font-weight-4c33 { font-weight:600; font-size:16px; margin:0 0 4px; }
.bk-color-9228 { color:var(--text2); font-size:13px; margin:0; }
.bk-text-align-391e { text-align:center; font-size:24px; letter-spacing:4px; }
.bk-margin-top-0025 { margin-top:12px; }
.bk-display-68ac { display:none; margin-top:12px; }
.bk-font-family-5de4 { font-family:monospace; letter-spacing:2px; text-transform:uppercase; }
.bk-font-size-6b9c { font-size:12px; }
.bk-background-28af { background:rgba(79,142,247,.15); color:#4f8ef7; font-weight:600; }
.bk-position-d85c { position: relative; }
.bk-display-b3ff { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.bk-background-cd88 { background: var(--accent); }
.bk-background-c2dc { background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; color: white; }
.bk-font-size-e989 { font-size: 13px; opacity: 0.9; margin-bottom: 8px; }
.bk-font-size-370e { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
.bk-font-size-d8d1 { font-size: 13px; opacity: 0.85; }
.bk-display-610a { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.bk-display-8944 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.bk-height-06b8 { height:6px; background:var(--border); border-radius:3px; margin-top:8px; overflow:hidden; }
.bk-height-11b1 { height:100%; width:0%; background:var(--accent2); border-radius:3px; transition:width 0.5s; }
.bk-color-d0f0 { color:var(--orange,#f59e0b); }
.bk-background-d742 { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 24px; }
.bk-font-size-4b84 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.bk-display-5bec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.bk-margin-bottom-dc2c { margin-bottom: 24px; }
.bk-padding-32c1 { padding: 20px; }
.bk-margin-top-7a1c { margin-top: 32px; }
.bk-margin-top-8c0a { margin-top: 32px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.bk-display-1b43 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bk-font-size-b8b4 { font-size: 16px; font-weight: 600; }
.bk-background-5d85 { background: none; border: none; color: var(--text2); font-size: 18px; cursor: pointer; }
.bk-display-e4b1 { display: flex; flex-direction: column; gap: 10px; }
.bk-display-7303 { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.bk-width-50b8 { width: 18px; height: 18px; cursor: pointer; }
.bk-background-bdf8 { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:20px; }
.bk-display-62ec { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.bk-font-size-eee7 { font-size:12px; color:var(--text2); display:block; margin-bottom:6px; }
.bk-width-978d { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; }
.bk-display-fede { display:flex; gap:10px; }
.bk-margin-left-221e { margin-left:auto; }
.bk-display-93b8 { display:none; }
.bk-margin-bottom-5346 { margin-bottom:12px; }
.bk-width-5256 { width:30px; }
.bk-display-63e9 { display:flex; gap:8px; align-items:center; }
.bk-font-size-bd42 { font-size:12px; padding:6px 8px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); }
.bk-background-4063 { background:var(--accent); }
.bk-display-6b81 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.bk-padding-3f86 { padding:12px; }
.bk-font-size-643a { font-size:11px; }
.bk-font-size-dd7e { font-size:16px; }
.bk-margin-top-2761 { margin-top:32px; }
.bk-float-ab76 { float:right; }
.bk-display-1b08 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.bk-display-4c7a { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.bk-font-size-9bd9 { font-size:12px; }
.bk-display-7431 { display:none; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.bk-display-370e { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.bk-display-e556 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.bk-margin-bottom-5534 { margin-bottom:16px; }
.bk-display-76dc { display:flex; gap:10px; margin-bottom:12px; }
.bk-margin-bottom-bff9 { margin-bottom:10px; color:var(--text2); }
.bk-font-size-61cf { font-size:12px; color:var(--text2); display:block; margin-bottom:4px; }
.bk-font-size-71a8 { font-size:12px; margin-bottom:16px; }
.bk-display-2a33 { display:flex; justify-content:flex-end; gap:16px; padding:12px 0; border-top:1px solid var(--border); margin-bottom:16px; }
.bk-display-1952 { display:flex; gap:8px; }
.bk-display-9cc5 { display:flex; align-items:center; gap:12px; }
.bk-padding-9c6f { padding:4px 12px; }
.bk-margin-46dc { margin:0; }
.bk-padding-717c { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; width:200px; }
.bk-padding-c473 { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; }
.bk-background-ac68 { background:var(--accent); white-space:nowrap; }
.bk-display-6e49 { display:flex; gap:16px; margin-bottom:16px; }
.bk-margin-top-d14e { margin-top:12px; text-align:center; font-size:13px; color:var(--text2); }
.bk-display-9212 { display:none; margin-top:24px; }
.bk-margin-top-b004 { margin-top:16px; }
.bk-margin-left-0b09 { margin-left:8px; }
.bk-margin-top-64e1 { margin-top:24px; }
.bk-display-79dd { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.bk-margin-top-4b01 { margin-top:32px; }
.bk-background-0277 { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:20px; max-width:480px; }
.bk-color-f76e { color:var(--text2); font-size:14px; }
.bk-display-31b0 { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.bk-font-size-fcc5 { font-size:24px; }
.bk-font-weight-e180 { font-weight:600; font-size:15px; }
.bk-font-size-a670 { font-size:13px; color:var(--text2); }
.bk-font-weight-dd8c { font-weight:600; font-size:15px; color:var(--green); }
.bk-border-color-9d3c { border-color:var(--red); color:var(--red); }
.bk-font-size-d633 { font-size:14px; margin:0 0 16px; }
.bk-margin-2361 { margin:0 0 16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.bk-font-size-873e { font-size:13px; color:var(--text2); margin:0 0 16px; }
.bk-font-size-bebf { font-size:14px; letter-spacing:2px; user-select:all; background:var(--bg); padding:4px 8px; border-radius:4px; display:inline-block; margin-top:4px; }
.bk-font-size-1db6 { font-size:14px; margin:0 0 12px; }
.bk-display-faaa { display:flex; gap:8px; align-items:center; }
.bk-flex-e7d4 { flex:1; padding:10px; font-size:18px; letter-spacing:4px; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); }
.bk-margin-top-d431 { margin-top:8px; }
.bk-display-351e { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--yellow); }
.bk-font-size-9972 { font-size:13px; color:var(--text2); margin:0 0 12px; }
.bk-display-f5bd { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; font-family:monospace; font-size:15px; }
.bk-margin-left-c3f8 { margin-left:8px; }
.bk-background-3fb6 { background:var(--red); }
.bk-display-10c1 { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bk-font-size-a2df { font-size:13px; color:var(--text2); margin-top:2px; }
.bk-color-dbed { color:var(--text2); font-size:13px; }
.bk-background-7655 { background: linear-gradient(135deg,rgba(79,142,247,.15),rgba(52,211,153,.08)); border: 1px solid rgba(79,142,247,.3); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; }
.bk-font-size-12a2 { font-size: 48px; line-height: 1; }
.bk-flex-49cd { flex: 1; }
.bk-font-size-2ce9 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.bk-font-size-6f58 { font-size: 13px; color: var(--text2); }
.bk-background-aa1a { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bk-background-8411 { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.bk-margin-bottom-e198 { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.bk-display-c202 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk-font-size-88c1 { font-size: 36px; font-weight: 700; color: var(--accent2); }
.bk-font-size-ec02 { font-size: 12px; color: var(--text2); margin-top: 4px; }
.bk-font-size-7667 { font-size: 13px; }
.bk-display-be1e { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bk-display-58e5 { display: flex; justify-content: space-between; }
.bk-font-size-ff0c { font-size: 32px; font-weight: 700; }
.bk-font-size-251a { font-size: 12px; color: var(--text2); }
.bk-display-7d95 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-font-size-c5e7 { font-size: 18px; font-weight: 700; }
.bk-max-height-d98f { max-height: 200px; overflow-y: auto; }
.bk-padding-f2e8 { padding: 12px; font-size: 13px; }
.bk-background-7593 { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.bk-display-0ed0 { display: flex; gap: 10px; }
.bk-flex-e816 { flex: 1; min-height: 80px; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; resize: vertical; }
.bk-display-d7bb { display: flex; flex-direction: column; gap: 8px; }
.bk-padding-046f { padding: 10px 16px; height: auto; }
.bk-margin-top-3df2 { margin-top: 12px; padding: 10px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); color: var(--text2); font-size: 13px; display: none; }
.bk-margin-bottom-7b75 { margin-bottom: 12px; }
.bk-font-size-41e3 { font-size: 12px; color: var(--text2); display: block; margin-bottom: 8px; }
.bk-width-e350 { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.bk-max-width-1057 { max-width: 100%; border-radius: 6px; margin-top: 12px; display: none; }
.bk-width-db51 { width: 100%; margin-bottom: 10px; }
.bk-font-size-da74 { font-size: 12px; color: var(--text2); background: var(--bg); padding: 10px; border-radius: 6px; max-height: 200px; overflow-y: auto; }
.bk-display-9b68 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bk-width-8dfe { width: 100%; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.bk-width-199b { width: 100%; }
.bk-margin-bottom-d327 { margin-bottom: 16px; }
.bk-font-size-3458 { font-size: 12px; }
.bk-display-3061 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bk-width-b5f0 { width: 100%; height: 34px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.bk-padding-b59e { padding: 12px; }
.bk-width-234c { width: 100%; min-height: 40px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; margin-bottom: 12px; resize: vertical; }
.bk-width-25b3 { width: 100%; margin-bottom: 16px; }
.bk-margin-top-86c2 { margin-top: 8px; padding: 8px; background: var(--bg); border-radius: 6px; font-size: 12px; }
.bk-font-size-86f3 { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.bk-font-size-0e78 { font-size: 28px; font-weight: 700; color: var(--orange,#f59e0b); }
.bk-font-size-8a65 { font-size: 28px; font-weight: 700; }
.bk-margin-top-2f02 { margin-top: 16px; font-size: 12px; color: var(--text2); }
.bk-padding-3b23 { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
.bk-font-size-e03b { font-size: 11px; color: var(--text2); text-transform: uppercase; margin-bottom: 4px; }
.bk-font-size-e39a { font-size: 20px; font-weight: 700; }
.bk-padding-ff43 { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); grid-column: 1/-1; }
.bk-display-8512 { display: flex; gap: 12px; align-items: center; }
.bk-width-ae97 { width: 100px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.bk-margin-top-226c { margin-top: 12px; font-size: 12px; }
.bk-margin-bottom-ccd7 { margin-bottom: 8px; }
.bk-font-size-d6b3 { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.bk-flex-a19e { flex: 1; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; }
.bk-max-width-bac0 { max-width:700px; width:100%; }
.bk-max-height-3455 { max-height:80vh; overflow-y:auto; }
.bk-display-e206 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.bk-width-e480 { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; }
.bk-background-e347 { background:none; border:none; color:var(--accent2); font-size:11px; cursor:pointer; margin-top:4px; }
.bk-display-33a0 { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.bk-font-size-b84c { font-size:13px; }
.bk-padding-c684 { padding:4px 10px; font-size:12px; }
.bk-width-d141 { width:100%; border-collapse:collapse; font-size:12px; }
.bk-background-248b { background:var(--bg3); }
.bk-padding-3ee9 { padding:6px 8px; text-align:left; color:var(--text2); font-weight:600; }
.bk-padding-13c5 { padding:6px 8px; text-align:right; color:var(--text2); font-weight:600; width:60px; }
.bk-padding-c496 { padding:6px 8px; text-align:right; color:var(--text2); font-weight:600; width:90px; }
.bk-padding-9daf { padding:6px 8px; text-align:center; color:var(--text2); font-weight:600; width:60px; }
.bk-padding-876e { padding:6px 8px; text-align:right; color:var(--text2); font-weight:600; width:80px; }
.bk-display-126e { display:flex; justify-content:flex-end; margin-top:10px; gap:20px; font-size:13px; }
.bk-font-size-8b20 { font-size:15px; }
.bk-color-8d98 { color:var(--accent2); }
.bk-display-6d47 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk-padding-4f7a { padding:6px 8px; text-align:left; color:var(--text2); font-weight:600; width:120px; }
.bk-max-width-e537 { max-width:440px; width:100%; }
.bk-display-a90a { display:flex; align-items:flex-end; padding-bottom:4px; }
.bk-display-c669 { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.bk-display-9eac { display:flex; align-items:center; gap:8px; font-size:13px; }
.bk-max-width-8fc9 { max-width:420px; width:100%; }
.bk-background-6ae0 { background:var(--bg3); padding:10px 12px; border-radius:var(--radius); margin-bottom:16px; font-size:13px; }
.bk-width-dea5 { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; margin-bottom:12px; }
.bk-max-width-9f8e { max-width:400px; width:100%; }
.bk-background-4cba { background:var(--bg3); padding:10px; border-radius:var(--radius); margin-bottom:14px; font-size:13px; }
.bk-max-width-c231 { max-width:800px; }
.bk-display-fbf9 { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.bk-font-weight-e634 { font-weight:600; }
.bk-font-size-4331 { font-size:12px; padding:4px 10px; }
.bk-font-size-e0e3 { font-size:11px; color:var(--text3); font-weight:600; }
.bk-max-width-5cda { max-width: 540px; }
.bk-width-8588 { width:100%; }
.bk-display-1f5a { display:none; margin-top:8px; }
.bk-display-6de5 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk-display-4ca7 { display:flex; align-items:center; gap:8px; }
.bk-color-2ca9 { color:var(--text2); }
.bk-flex-d5e8 { flex:1; }
.bk-max-width-828e { max-width: 640px; }
.bk-white-space-ba9d { white-space:nowrap; font-size:11px; }
.bk-border-f36a { border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg); }
.bk-font-size-3a92 { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
.bk-font-size-75f2 { font-size: 14px; font-weight: 500; }
.bk-margin-top-9f3c { margin-top: 8px; display: none; }
.bk-font-size-dc52 { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.bk-max-height-7da9 { max-height: 150px; overflow-y: auto; }
.bk-margin-top-3b97 { margin-top: 8px; font-size: 12px; color: var(--text2); }
.bk-margin-top-65c1 { margin-top: 12px; }
.bk-min-height-117a { min-height: 60px; }
.bk-display-8b02 { display: none; margin-top: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.bk-padding-e01f { padding: 12px; background: var(--bg2); border-radius: 6px; text-align: center; }
.bk-font-size-bf41 { font-size: 24px; font-weight: 700; color: var(--accent2); }
.bk-font-size-26c9 { font-size: 11px; color: var(--text2); }
.bk-font-size-5e65 { font-size: 24px; font-weight: 700; color: var(--text2); }
.bk-font-size-23cd { font-size: 24px; font-weight: 700; }
.bk-font-size-09bd { font-size: 12px; max-height: 120px; overflow-y: auto; }
.bk-padding-6de3 { padding:12px; background:var(--bg); border-radius:6px; margin:12px 0; }
.bk-font-size-9833 { font-size:13px; color:var(--text2); margin-bottom:8px; }
.bk-max-height-cdb2 { max-height:150px; overflow-y:auto; font-size:12px; }
.bk-max-width-6bb8 { max-width:900px; }
.bk-padding-1f3e { padding:20px; }
.bk-font-size-1246 { font-size:12px; color:var(--text2); }
.bk-width-bf71 { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); margin-top:4px; }
.bk-padding-f665 { padding:16px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
.bk-margin-top-d79c { margin-top:8px; }
.bk-width-c99d { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); }

/* Remember me row in login form */
.bk-remember-row { display:flex; justify-content:flex-start; margin:8px 0 4px; }
.bk-checkbox-label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.bk-checkbox-label input[type="checkbox"] { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }


/* ── Responsive table improvements ── */
.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 650px; }

/* ── Invoice/Bill action column always visible ── */
.data-table td:last-child, .data-table th:last-child { white-space: nowrap; }

/* ── Improved KPI card ── */
.kpi-card { position: relative; }
.kpi-card .label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; }
.kpi-card .value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi-card .detail { font-size: 12px; color: var(--text2); margin-top: 4px; }

/* ── Better health score bar ── */
#health-score-bar { height: 6px; border-radius: 3px; background: var(--accent); transition: width .4s ease; max-width: 100%; }

/* ── Period selector quick buttons ── */
.period-quick-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.period-quick-btn  { padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2); color: var(--text2); font-size: 11px; font-weight: 500; cursor: pointer; transition: all .15s; }
.period-quick-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Empty state improvements ── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text2); }
.empty-state h4 { font-size: 16px; font-weight: 600; color: var(--text1); margin-bottom: 8px; }
.empty-state p  { font-size: 13px; max-width: 300px; margin: 0 auto; }
.empty-state .empty-icon { font-size: 32px; margin-bottom: 12px; }

/* ── Status badge ── */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }

/* ── Toast improvements ── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: slideIn .2s ease; }
.toast.success { background: #065f46; color: #d1fae5; border-left: 3px solid #10b981; }
.toast.error   { background: #7f1d1d; color: #fecaca; border-left: 3px solid #ef4444; }
.toast.info    { background: var(--bg2); color: var(--text1); border-left: 3px solid var(--accent); border: 1px solid var(--border); }
@keyframes slideIn { from { transform: translateX(40px); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ── Report output improvements ── */
#report-output, #gst-report-output { margin-top: 16px; }
#report-output h3 { font-size: 18px; font-weight: 700; }
#report-output .coa-group-header { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text2); padding: 8px 12px; background: var(--bg3); border-radius: 4px; margin: 12px 0 4px; }

/* ── Active More-menu tab indicator ── */
.tab-btn-dropdown.active { color: var(--accent) !important; background: rgba(16,185,129,.08) !important; }

/* ── Search section improvements ── */
#search-results-table { overflow-x: auto; }