/* ═══════════════════════════════════════════════════════════
   BizGrip SaaS — App Styles
   Design System: #0F62FE accent, Inter font, clean & premium
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; color: #0F172A; background: #F8FAFC; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── CSS Variables ───────────────────────────────────────── */
:root {
    --accent: #0F62FE;
    --accent-hover: #0043CE;
    --accent-light: #EBF0FF;
    --bg-primary: #FFFFFF;
    --bg-page: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --border: #E2E8F0;
    --success: #16A34A;
    --success-light: #F0FDF4;
    --warning: #D97706;
    --warning-light: #FFFBEB;
    --error: #DC2626;
    --error-light: #FEF2F2;
    --sidebar-w: 260px;
    --topbar-h: 64px;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0B1220, #111C33, #0F172A); position: relative; overflow: hidden; }
.login-glow { position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(15,98,254,0.25), transparent 70%); }
.login-glow-2 { position: absolute; bottom: -100px; left: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(15,98,254,0.12), transparent 70%); }
.login-card { width: 100%; max-width: 420px; padding: 24px; position: relative; z-index: 1; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; background: linear-gradient(135deg, #0F62FE, #3B82F6); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; box-shadow: 0 12px 30px rgba(15,98,254,0.3); }
.login-brand h1 { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 0.2px; }
.login-brand p { color: #94A3B8; font-size: 14px; margin-top: 6px; }
.login-form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px; backdrop-filter: blur(20px); }
.login-form h2 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.login-form .login-sub { color: #94A3B8; font-size: 13px; margin-bottom: 20px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; color: #94A3B8; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.login-field input { width: 100%; padding: 12px 14px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; font-size: 14px; transition: border-color 0.2s; }
.login-field input:focus { outline: none; border-color: #0F62FE; box-shadow: 0 0 0 3px rgba(15,98,254,0.15); }
.login-field input::placeholder { color: #64748B; }
.login-error { background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.3); border-radius: 10px; padding: 10px 14px; color: #FCA5A5; font-size: 13px; margin-bottom: 14px; }
.login-btn { width: 100%; padding: 13px; background: #0F62FE; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.login-btn:hover { background: #0043CE; }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-toggle { text-align: center; margin-top: 14px; }
.login-toggle a { color: #0F62FE; font-size: 13px; font-weight: 500; }
.login-toggle a:hover { text-decoration: underline; }
.login-footer { text-align: center; color: rgba(255,255,255,0.35); font-size: 12px; margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════
   APP LAYOUT — Sidebar + Topbar + Content
   ═══════════════════════════════════════════════════════════ */
.app-layout { display: flex; min-height: 100vh; }
.app-content { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.app-main { padding: 28px 32px; flex: 1; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: #0F172A; color: #E2E8F0; display: flex; flex-direction: column; z-index: 100; transition: transform 0.25s ease; }
.sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-logo { display: flex; align-items: center; gap: 12px; }
.sidebar-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #0F62FE, #3B82F6); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sidebar-logo-text { font-size: 18px; font-weight: 700; color: #F8FAFC; letter-spacing: 0.3px; }
.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #94A3B8; transition: all 0.15s; margin-bottom: 2px; }
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #E2E8F0; }
.sidebar-link.active { background: rgba(15,98,254,0.15); color: #60A5FA; }
.sidebar-link-icon { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-company-name { font-size: 12px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar { height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 50; }
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-hamburger { display: none; width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; }
.topbar-hamburger svg { width: 20px; height: 20px; }
.topbar-hamburger:hover { background: var(--bg-tertiary); }
.topbar-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.topbar-username { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Metric Cards ────────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 28px; }
.metric-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: box-shadow 0.2s, transform 0.2s; }
.metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.metric-card-label { font-size: 13px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.metric-card-value { font-size: 26px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.metric-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.metric-card--sales .metric-card-value { color: #0F62FE; }
.metric-card--purchase .metric-card-value { color: #7C3AED; }
.metric-card--receivable .metric-card-value { color: #D97706; }
.metric-card--payable .metric-card-value { color: #DC2626; }
.metric-card--cash .metric-card-value { color: #16A34A; }
.metric-card--bank .metric-card-value { color: #0891B2; }

/* ── Data Tables ─────────────────────────────────────────── */
.data-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
.data-card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.data-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.data-table { width: 100%; }
.data-table th { padding: 12px 18px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background: #F8FAFC; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 13px 18px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.data-table tbody tr:hover { background: #F8FAFC; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }
.data-table .font-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.data-table .text-success { color: var(--success); }
.data-table .text-error { color: var(--error); }
.data-table .text-primary { color: var(--text-primary); font-weight: 600; }

/* ── Voucher Type Badge ──────────────────────────────────── */
.vch-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.vch-badge--sales { background: #EBF0FF; color: #0F62FE; }
.vch-badge--purchase { background: #F3E8FF; color: #7C3AED; }
.vch-badge--receipt { background: #F0FDF4; color: #16A34A; }
.vch-badge--payment { background: #FEF2F2; color: #DC2626; }
.vch-badge--journal { background: #FFFBEB; color: #D97706; }
.vch-badge--contra { background: #F0F9FF; color: #0891B2; }
.vch-badge--credit { background: #FFF1F2; color: #E11D48; }
.vch-badge--debit { background: #FDF4FF; color: #A855F7; }
.vch-badge--other { background: var(--bg-tertiary); color: var(--text-tertiary); }

/* ── Filter Bar ──────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; align-items: center; }
.filter-pill { padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: #fff; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-input { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; background: #fff; min-width: 140px; }
.filter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,98,254,0.1); }
.filter-search { padding: 9px 14px 9px 36px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") 10px center / 16px no-repeat; min-width: 240px; }
.filter-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,98,254,0.1); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: #fff; color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-tertiary); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 8px; }

/* ── Empty State ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-text { font-size: 15px; }

/* ── Company Select ──────────────────────────────────────── */
.company-page { min-height: 100vh; background: var(--bg-page); display: flex; align-items: center; justify-content: center; }
.company-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.company-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.company-card p { color: var(--text-tertiary); font-size: 14px; margin-bottom: 24px; }
.company-list { display: flex; flex-direction: column; gap: 8px; }
.company-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.company-item:hover { border-color: var(--accent); background: var(--accent-light); }
.company-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.company-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.company-item-sub { font-size: 12px; color: var(--text-tertiary); }

/* ── Ledger Group Tree ───────────────────────────────────── */
.ledger-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.group-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; max-height: calc(100vh - 140px); overflow-y: auto; }
.group-item { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.group-item:hover { background: var(--bg-tertiary); }
.group-item.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.group-item-count { float: right; font-size: 11px; color: var(--text-muted); background: var(--bg-tertiary); padding: 2px 8px; border-radius: 99px; }

/* ── Reports Hub ─────────────────────────────────────────── */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.report-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; cursor: pointer; transition: all 0.2s; }
.report-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); }
.report-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.report-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.report-card-desc { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }

/* ── Settings ────────────────────────────────────────────── */
.settings-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.settings-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.settings-label { font-size: 13px; color: var(--text-secondary); }
.settings-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.settings-value--success { color: var(--success); }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
.pagination a { color: var(--text-secondary); border: 1px solid var(--border); }
.pagination a:hover { background: var(--bg-tertiary); }
.pagination .active { background: var(--accent); color: #fff; border: 1px solid var(--accent); }

/* ── Loading Spinner ─────────────────────────────────────── */
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Voucher Detail ─────────────────────────────────────── */
.voucher-detail-header { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.voucher-detail-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.voucher-detail-meta > div:first-child { display: flex; align-items: center; gap: 10px; }
.voucher-detail-number { font-size: 14px; font-weight: 700; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }
.voucher-detail-amount { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.voucher-detail-party { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.voucher-detail-info { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-tertiary); }
.voucher-detail-info code { font-size: 12px; background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; }
.ledger-entries-list { padding: 0; }
.ledger-entry-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #F1F5F9; }
.ledger-entry-row:last-child { border-bottom: none; }
.ledger-entry-name { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.ledger-entry-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.ledger-entry-amount { font-size: 13px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
.voucher-total-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.open { display: block; }
    .app-content { margin-left: 0; }
    .topbar-hamburger { display: flex; }
    .topbar { padding: 0 20px; }
    .app-main { padding: 20px; }
    .ledger-layout { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .metric-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-search { min-width: auto; }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 10px 12px; }
    .topbar-username { display: none; }
    .report-grid { grid-template-columns: 1fr; }
}