:root {
  --primary: #5B4BFF;
  --sidebar: #061A3A;
  --bg: #F6F8FC;
  --card: #FFFFFF;
  --success: #16A34A;
  --danger: #EF4444;
  --warning: #F59E0B;
  --border: #E5E7EB;
  --text: #111827;
  --muted: #6B7280;
}

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

.app-body { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar); color: #fff; padding: 24px 18px; display: flex; flex-direction: column; gap: 26px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; font-weight: 800; line-height: 1.05; }
.brand small { color: #B8C2D8; font-weight: 600; }
.brand-logo { width: 50px; height: 50px; object-fit: contain; display: block; flex: 0 0 auto; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-nav a, .logout-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; color: #D7DEF0; font-weight: 600; }
.sidebar-nav a.active, .sidebar-nav a:hover, .logout-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.logout-link { margin-top: auto; }

.main-shell { padding: 24px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 0; }
.eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search-box { display: flex; align-items: center; gap: 8px; width: 260px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.search-box input { border: 0; outline: 0; width: 100%; }
.profile-button { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; font-weight: 700; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric-card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, .04); }
.metric-card { padding: 14px; min-height: 104px; }
.metric-card p { color: var(--muted); margin: 8px 0 3px; font-weight: 700; font-size: 13px; }
.metric-card strong { font-size: 21px; font-weight: 800; }
.metric-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #EEF2FF; color: var(--primary); }
.metric-icon.success { background: #DCFCE7; color: var(--success); }
.metric-icon.danger { background: #FEE2E2; color: var(--danger); }
.metric-icon.warning { background: #FEF3C7; color: var(--warning); }
.negative-balance { border-color: #FCA5A5; background: #FFF7F7; }
.warning-text { display: block; margin-top: 6px; color: var(--danger); font-size: 12px; font-weight: 800; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.status-badge.profit { color: var(--success); background: #DCFCE7; }
.status-badge.loss { color: var(--danger); background: #FEE2E2; }
.status-badge.break-even { color: #92400E; background: #FEF3C7; }
.balance-explain { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; margin: 0 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .04); }
.balance-explain.is-negative { border-color: #FCA5A5; background: #FFF7F7; }
.balance-explain p { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 800; }
.balance-explain strong { font-size: 22px; }
.balance-explain small { grid-column: 2; color: var(--muted); font-weight: 700; }
.balance-formula { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-formula span { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.balance-formula .plus { color: var(--success); background: #DCFCE7; }
.balance-formula .minus { color: var(--danger); background: #FEE2E2; }

.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.span-2 { grid-column: span 2; }
.panel { padding: 14px; }
.chart-box { position: relative; height: 230px; width: 100%; overflow: hidden; }
.chart-box canvas { display: block; width: 100% !important; height: 100% !important; }
.report-chart { height: 260px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panel h2, .form-panel h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.muted { color: var(--muted); }

.module-grid { display: grid; grid-template-columns: 400px 1fr; gap: 16px; align-items: start; }
.form-panel { display: grid; gap: 12px; }
.form-panel .form-control, .form-panel .form-select { min-height: 44px; border-color: #D8DEE9; border-radius: 8px; font-size: 15px; font-weight: 500; padding: 9px 12px; box-shadow: none; }
.form-panel .form-control:focus, .form-panel .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 75, 255, .12); }
.form-panel textarea.form-control { min-height: 86px; resize: vertical; }
.form-panel .btn { min-height: 46px; border-radius: 8px; font-weight: 800; }
.project-form { gap: 14px; }
.project-form h2 { margin-bottom: 6px; }
.project-form .two-col { gap: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.table-panel { min-width: 0; }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.table-actions { display: flex; gap: 8px; justify-content: flex-end; }
.table-actions form { display: inline; }
.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #EEF2FF; color: var(--primary); font-size: 12px; font-weight: 800; }

.activity-list { display: grid; gap: 12px; }
.activity-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.activity-row span { color: var(--primary); font-weight: 800; font-size: 12px; }
.activity-row small { display: block; color: var(--muted); }
.project-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.payment-summary { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.payment-summary span { color: var(--muted); font-size: 13px; }
.progress { height: 8px; }
.progress-bar { background: var(--primary); }

.report-filter { display: grid; grid-template-columns: 1.4fr repeat(5, auto); gap: 10px; align-items: center; }
.report-metrics .metric-card { min-height: 92px; }
.settings-panel { max-width: 520px; }

.login-body { min-height: 100vh; background: linear-gradient(135deg, #061A3A 0%, #0E7490 100%); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(440px, 100%); background: #fff; border-radius: 8px; padding: 30px; box-shadow: 0 28px 70px rgba(0,0,0,.25); }
.login-brand { color: var(--text); margin-bottom: 22px; }
.login-panel h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; }
.login-panel p { color: var(--muted); margin-bottom: 20px; }
.stack-form { display: grid; gap: 14px; }
.stack-form label { font-weight: 700; }
.btn-primary { background: var(--primary); border-color: var(--primary); font-weight: 700; }
.btn-primary:hover { background: #493DCC; border-color: #493DCC; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .report-filter { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .module-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-body { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .sidebar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-shell { padding: 16px; }
  .topbar, .topbar-actions { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .metric-grid, .project-payment-grid, .two-col, .report-filter { grid-template-columns: 1fr; }
  .balance-explain { grid-template-columns: 1fr; }
  .balance-explain small { grid-column: auto; }
  .chart-box, .report-chart { height: 240px; }
  .table-actions { justify-content: flex-start; flex-wrap: wrap; }
}