* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Inter, system-ui, sans-serif; background: #f5f6f8; color: #1a1a2e; }

/* Login */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 360px; }
.login-box h1 { font-size: 1.25rem; margin-bottom: 1rem; }
.login-box input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; margin-bottom: 1rem; }
.login-box button { width: 100%; padding: 0.75rem; background: #1daa61; color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; cursor: pointer; font-weight: 600; }
.login-box button:hover { background: #189b56; }
.login-error { color: #e74c3c; font-size: 0.85rem; margin-bottom: 0.5rem; display: none; }

/* Layout */
.app { display: none; }
.header { background: #fff; padding: 1rem 2rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 1.1rem; font-weight: 700; }
.tabs { display: flex; gap: 0.5rem; padding: 1rem 2rem 0; }
.tab { padding: 0.5rem 1rem; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.9rem; font-weight: 500; background: #e5e7eb; border: none; }
.tab.active { background: #fff; border-bottom: 2px solid #1daa61; }
.content { padding: 1.5rem 2rem; }

/* Cards & Tables */
.card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 1rem; }
.filters { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input { padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; }
.filters button { padding: 0.5rem 1rem; background: #1daa61; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }
.filters button.secondary { background: #6c757d; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: left; padding: 0.75rem; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #666; font-size: 0.8rem; text-transform: uppercase; }
td { padding: 0.75rem; border-bottom: 1px solid #f0f0f0; }
tr:hover { background: #f9fafb; }
tr.clickable { cursor: pointer; }
.amount { font-variant-numeric: tabular-nums; text-align: right; }
.amount.negative { color: #e74c3c; }
.amount.positive { color: #1daa61; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; }
.badge.paid { background: #d4edda; color: #155724; }
.badge.pending { background: #fff3cd; color: #856404; }
.loading { text-align: center; padding: 2rem; color: #999; }
.summary-row { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.summary-item { background: #fff; border-radius: 10px; padding: 1rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); min-width: 160px; }
.summary-item .label { font-size: 0.8rem; color: #888; text-transform: uppercase; font-weight: 600; }
.summary-item .value { font-size: 1.3rem; font-weight: 700; margin-top: 0.25rem; }

/* Balance bar */
.balance-bar { display: flex; gap: 1rem; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid #e5e7eb; }
.balance-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: #f9fafb; border-radius: 8px; min-width: 160px; }
.balance-card .balance-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.balance-card .balance-icon.available { background: #d4edda; color: #155724; }
.balance-card .balance-icon.pending { background: #fff3cd; color: #856404; }
.balance-card .balance-icon.reserved { background: #f8d7da; color: #721c24; }
.balance-card .balance-info .balance-label { font-size: 0.7rem; color: #888; text-transform: uppercase; font-weight: 600; }
.balance-card .balance-info .balance-value { font-size: 1.05rem; font-weight: 700; }
.balance-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #ccc; color: #fff; font-size: 0.55rem; font-weight: 700; font-style: italic; margin-left: 4px; cursor: pointer; vertical-align: middle; }
.balance-tooltip { display: none; background: #333; color: #fff; font-size: 0.8rem; font-weight: 400; font-style: normal; line-height: 1.4; padding: 0.5rem 0.75rem; border-radius: 6px; margin-top: 0.35rem; max-width: 280px; }
.balance-tooltip.show { display: block; }

/* Reconciliation */
.recon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.recon-card { background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.recon-card h3 { font-size: 0.95rem; margin-bottom: 0.75rem; color: #333; }
.recon-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.88rem; }
.recon-row .recon-label { color: #666; }
.recon-row .recon-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.recon-row.highlight { border-top: 1px solid #e5e7eb; margin-top: 0.35rem; padding-top: 0.5rem; }
.recon-row .recon-value.positive { color: #1daa61; }
.recon-row .recon-value.negative { color: #e74c3c; }
.recon-row .recon-value.warn { color: #856404; }
.recon-total { background: #f9fafb; border-radius: 10px; padding: 1rem 1.5rem; margin-top: 1rem; }
.recon-total .recon-row { font-size: 0.95rem; }

/* Payout detail sections */
.payout-section { margin-bottom: 1.5rem; }
.payout-section h3 { font-size: 0.9rem; color: #666; text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; }

/* Zoho booking — review & approve */
.zoho-btn { background: #0078d4; color: #fff; border: none; padding: 0.6rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.zoho-btn:hover { background: #006abc; }
.zoho-btn:disabled { background: #ccc; cursor: not-allowed; }
.zoho-btn.approve { background: #1daa61; }
.zoho-btn.approve:hover { background: #189b56; }
.zoho-btn.cancel { background: #6c757d; }
.zoho-btn.cancel:hover { background: #5a6268; }

.booking-header { margin-bottom: 0.75rem; }
.booking-header strong { font-size: 1rem; }
.booking-meta { color: #666; font-size: 0.85rem; margin-top: 0.25rem; }

.booking-context { background: #f0f4f8; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; color: #444; margin-bottom: 1rem; }

.booking-table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.booking-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #666; font-size: 0.8rem; text-transform: uppercase; }
.booking-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.booking-table .totals-row { font-weight: 700; border-top: 2px solid #333; }
.booking-table .totals-row td { padding-top: 0.75rem; }

.badge.debet { background: #e8f5e9; color: #2e7d32; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.badge.credit { background: #fce4ec; color: #c62828; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }

.balance-check { padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; }
.balance-check.ok { background: #e8f5e9; color: #2e7d32; }
.balance-check.error { background: #fce4ec; color: #c62828; }

.booking-actions { display: flex; gap: 0.75rem; }

.booking-success { background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 8px; padding: 1rem; }
.booking-success strong { color: #2e7d32; font-size: 0.95rem; }
.booking-success div { color: #444; font-size: 0.85rem; margin-top: 0.25rem; }

/* Simulation */
.simulation { background: #f8f9fb; border: 1px solid #e0e3e8; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.simulation h4 { font-size: 0.9rem; color: #333; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }

.sim-stripe-balance { font-size: 0.85rem; color: #555; margin-bottom: 0.75rem; padding: 0.4rem 0.6rem; background: #fff; border-radius: 6px; }
.sim-stripe-balance .sim-label { font-weight: 600; color: #333; }

.sim-impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.sim-impact-card { background: #fff; border-radius: 6px; padding: 0.6rem 0.75rem; border: 1px solid #e5e7eb; }
.sim-account { font-size: 0.8rem; color: #666; font-weight: 600; }
.sim-change { font-size: 1.1rem; font-weight: 700; margin: 0.2rem 0; }
.sim-change.sim-positive { color: #2e7d32; }
.sim-change.sim-negative { color: #c62828; }
.sim-direction { font-size: 0.75rem; color: #888; }

.sim-hint { font-size: 0.85rem; color: #555; background: #fffde7; border: 1px solid #fff9c4; border-radius: 6px; padding: 0.5rem 0.75rem; }

/* Sync status */
.sync-status { font-size: 0.8rem; color: #888; white-space: nowrap; }
.sync-data-btn { background: #0078d4 !important; }

/* Chat */
.chat-panel { position: fixed; right: 0; top: 0; width: 400px; height: 100vh; background: #fff; box-shadow: -2px 0 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; z-index: 100; }
.chat-panel.open { transform: translateX(0); }
.chat-header { padding: 1rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.chat-header h2 { font-size: 1rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.chat-msg { padding: 0.75rem 1rem; border-radius: 12px; max-width: 85%; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
.chat-msg.user { background: #1daa61; color: #fff; align-self: flex-end; }
.chat-msg.assistant { background: #f0f0f0; align-self: flex-start; }
.chat-input { display: flex; gap: 0.5rem; padding: 1rem; border-top: 1px solid #e5e7eb; }
.chat-input input { flex: 1; padding: 0.6rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; }
.chat-input button { padding: 0.6rem 1rem; background: #1daa61; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.chat-toggle { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; border-radius: 50%; background: #1daa61; color: #fff; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.2); z-index: 99; display: flex; align-items: center; justify-content: center; }

/* Payout detail enhanced */
.payout-header-card { border-left: 4px solid #1daa61; }
.payout-meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.meta-label { color: #888; font-size: 0.85rem; }
.verification-ok { background: #e8f5e9; color: #2e7d32; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }
.verification-error { background: #fce4ec; color: #c62828; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }
.verification-note { color: #666; font-size: 0.8rem; margin-top: 0.5rem; font-style: italic; }
.invoice-nr { font-size: 0.8rem; color: #0078d4; }
a.pdf-link { text-decoration: none; color: #0078d4; font-weight: 500; }
a.pdf-link:hover { text-decoration: underline; color: #005a9e; }
a.pdf-link::after { content: ' \1F4C4'; font-size: 0.75rem; }
.tax-summary .recon-row { padding: 0.4rem 0; }
.clearing-note { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c00; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; margin: 0.75rem 0; }
.totals-row { font-weight: 700; border-top: 2px solid #333; }
.totals-row td { padding-top: 0.75rem; }

/* Fee invoice status */
.badge-missing { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; background: #fce4ec; color: #c62828; }
.upload-fee-btn { background: #7c3aed !important; }
.logout-btn { background: none; color: #666; cursor: pointer; border: none; }
.chat-close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; }

/* Audit */
.audit-description { color: #666; font-size: 0.9rem; margin-top: 0.5rem; }
.audit-summary-bar { display: flex; gap: 1rem; margin: 1rem 0; }
.audit-summary-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 10px; min-width: 140px; }
.audit-summary-item .audit-count { font-size: 1.5rem; font-weight: 700; }
.audit-summary-item .audit-label { font-size: 0.85rem; font-weight: 600; }
.audit-ok-bg { background: #e8f5e9; color: #2e7d32; }
.audit-warn-bg { background: #fff8e1; color: #6d4c00; }
.audit-error-bg { background: #fce4ec; color: #c62828; }
.badge.audit-ok { background: #d4edda; color: #155724; }
.badge.audit-warn { background: #fff3cd; color: #856404; }
.badge.audit-error { background: #f8d7da; color: #721c24; }
.audit-category-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: #333; }
.audit-expected { color: #666; font-size: 0.85rem; }
.audit-check-row:hover { background: #f5f5f5; }
.audit-detail-row td { padding: 0.5rem 1rem; background: #f9fafb; }
.audit-detail-list { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; color: #555; }
.audit-detail-list li { padding: 0.2rem 0; }
.audit-period { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
.audit-period span { margin-right: 0.5rem; }
.audit-results .card { margin-bottom: 1rem; }

/* AI Accountant */
.ai-accountant-card { text-align: center; padding: 1.5rem; }
.ai-analyze-btn { font-size: 0.95rem; padding: 0.75rem 1.5rem; }
.ai-result-container { margin-top: 1rem; text-align: left; }
.ai-analysis-card { background: #eef6ff; border: 1px solid #b8d8f8; border-radius: 12px; padding: 1.5rem; margin-top: 1rem; }
.ai-analysis-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid #b8d8f8; padding-bottom: 0.75rem; }
.ai-analysis-header h3 { font-size: 1rem; font-weight: 700; color: #1a4a7a; margin: 0; }
.ai-analysis-icon { font-size: 1.5rem; }
.ai-analysis-body { font-size: 0.9rem; line-height: 1.6; color: #333; }
.ai-section-title { font-size: 0.95rem; font-weight: 700; color: #1a4a7a; margin: 1rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid #d4e6f5; }
.ai-section-title:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.ai-paragraph { margin: 0.25rem 0; }
.ai-paragraph strong { color: #1a3a5c; }

/* Audit Payout Details */
.audit-payouts-section { margin-top: 1.5rem; }
.audit-payout-card { border-left: 4px solid #e5e7eb; }
.audit-payout-card:has(.badge.audit-ok) { border-left-color: #1daa61; }
.audit-payout-card:has(.badge.audit-warn) { border-left-color: #ffc107; }
.audit-payout-card:has(.badge.audit-error) { border-left-color: #e74c3c; }
.audit-payout-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.audit-payout-info { display: flex; align-items: center; gap: 0.5rem; }
.audit-payout-info strong { font-size: 0.9rem; }
.audit-payout-meta { color: #666; font-size: 0.85rem; }
.audit-payout-summary { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.audit-booking-info { font-size: 0.85rem; color: #555; margin-bottom: 0.5rem; }
.audit-issues-list { margin: 0.5rem 0; padding-left: 1.25rem; font-size: 0.85rem; color: #c62828; }
.audit-issues-list li { padding: 0.15rem 0; }
.audit-toggle-journal { font-size: 0.8rem; padding: 0.4rem 0.75rem; background: #6c757d; }
.audit-toggle-journal:hover { background: #5a6268; }
.audit-journal-container { margin-top: 0.75rem; }

/* Audit Action Buttons */
.audit-actions-card { background: #f8f9fb; border: 1px solid #e0e3e8; }
.audit-action-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.audit-action-primary { font-size: 0.95rem; padding: 0.75rem 1.5rem; }
.audit-action-secondary { font-size: 0.85rem; padding: 0.5rem 1rem; background: #6c757d; }
.audit-action-secondary:hover { background: #5a6268; }

/* Audit Fix Results */
.audit-action-results { margin-top: 1rem; }
.audit-result-ok { padding: 0.5rem 0.75rem; margin: 0.25rem 0; border-radius: 6px; font-size: 0.85rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.audit-result-error { padding: 0.5rem 0.75rem; margin: 0.25rem 0; border-radius: 6px; font-size: 0.85rem; font-weight: 600; background: #fce4ec; color: #c62828; }

/* Journal comparison */
.journal-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.journal-side { min-width: 0; }
.journal-side table { font-size: 0.82rem; }
.journal-side-title { margin: 0 0 0.5rem 0; font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: 6px; }
.journal-side-error { background: #fce4ec; color: #c62828; }
.journal-side-ok { background: #e8f5e9; color: #2e7d32; }
.journal-side-warn { background: #fff3cd; color: #856404; }
.journal-diff-card { background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.75rem; }
.journal-diff-list { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; color: #c62828; }
.journal-diff-list li { margin-bottom: 0.3rem; }
@media (max-width: 900px) { .journal-comparison { grid-template-columns: 1fr; } }