*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #f8f9fa;
    --card:     #ffffff;
    --border:   #e2e8f0;
    --text:     #1a202c;
    --muted:    #718096;
    --primary:  #3b82f6;
    --green:    #10b981;
    --yellow:   #f59e0b;
    --red:      #ef4444;
    --radius:   6px;
    --shadow:   0 1px 3px rgba(0,0,0,.08);
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       font-size: 14px; color: var(--text); background: var(--bg); }

/* ── NAV ─────────────────────────────────────────────────── */
.nav { display: flex; align-items: center; justify-content: space-between;
       background: #1e293b; padding: 0 1.5rem; height: 52px; }
.nav-brand { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.nav-links  { display: flex; gap: 4px; }
.nav-links a { color: #94a3b8; text-decoration: none; padding: 6px 12px;
               border-radius: var(--radius); font-size: 13px; }
.nav-links a:hover, .nav-links a.active { background: #334155; color: #fff; }
.nav-logout { color: #f87171 !important; margin-left: 12px; }

/* ── MAIN ────────────────────────────────────────────────── */
.main       { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 1.25rem; }

/* ── CARDS ───────────────────────────────────────────────── */
.card  { background: var(--card); border: 1px solid var(--border);
         border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: 1rem 1.25rem; }

/* ── METRICS ROW ─────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
           gap: 12px; margin-bottom: 1.5rem; }
.metric { padding: .875rem 1rem; }
.metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                color: var(--muted); margin-bottom: 4px; }
.metric-val   { font-size: 24px; font-weight: 600; }

/* ── TABLE ───────────────────────────────────────────────── */
.tbl-wrap  { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table      { width: 100%; border-collapse: collapse; }
th         { font-size: 11px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .4px; color: var(--muted); background: #f8fafc;
             padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
td         { padding: 9px 12px; border-bottom: 1px solid var(--border);
             vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td      { background: #f8fafc; }

/* ── BADGES ──────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 11px; font-weight: 500;
         padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.badge-emi        { background: #d1fae5; color: #065f46; }
.badge-coupon     { background: #dbeafe; color: #1e40af; }
.badge-couponemi  { background: #ede9fe; color: #4c1d95; }
.badge-pause      { background: #fee2e2; color: #991b1b; }
.badge-none       { background: #f1f5f9; color: #475569; }
.badge-pending    { background: #fef3c7; color: #92400e; }

/* ── BUDGET LABELS ───────────────────────────────────────── */
.label-high   { background: #d1fae5; color: #065f46; font-weight: 600; }
.label-medium { background: #fef3c7; color: #92400e; font-weight: 600; }
.label-low    { background: #fee2e2; color: #991b1b; font-weight: 600; }

/* ── GAP COLORS ──────────────────────────────────────────── */
.gap-good { color: var(--green); font-weight: 500; }
.gap-warn { color: var(--yellow); font-weight: 500; }
.gap-bad  { color: var(--red);   font-weight: 500; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group  { margin-bottom: 1rem; }
.form-label  { display: block; font-size: 12px; font-weight: 500;
               color: var(--muted); margin-bottom: 4px; }
.form-input, .form-select { width: 100%; padding: 7px 10px; border: 1px solid var(--border);
              border-radius: var(--radius); font-size: 14px; background: #fff; }
.form-input:focus, .form-select:focus { outline: 2px solid var(--primary); border-color: transparent; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn        { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
              border-radius: var(--radius); font-size: 13px; font-weight: 500;
              cursor: pointer; border: none; text-decoration: none; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-success  { background: var(--green);   color: #fff; }
.btn-danger   { background: var(--red);     color: #fff; }
.btn-outline  { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-sm       { padding: 4px 10px; font-size: 12px; }
.btn:hover    { opacity: .88; }

/* ── FLASH MESSAGES ──────────────────────────────────────── */
.flash         { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── FILTERS BAR ─────────────────────────────────────────── */
.filters { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { padding: 6px 10px; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 13px; }
.filters input { width: 220px; }

/* ── CHART ───────────────────────────────────────────────── */
.chart-wrap { padding: 1rem 1.25rem; }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-wrap { max-width: 380px; margin: 80px auto; }
.login-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 1.5rem; }

/* ── SECTION TITLE ───────────────────────────────────────── */
.section-head { display: flex; align-items: center; justify-content: space-between;
                margin-bottom: 1rem; }
.section-head h2 { font-size: 15px; font-weight: 600; }

/* ── TABS ────────────────────────────────────────────────── */
.tabs      { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab       { padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
             color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab.active { color: var(--primary); border-color: var(--primary); }

/* ── UTIL ────────────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-right   { text-align: right; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.flex { display: flex; align-items: center; gap: 8px; }
.truncate { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }