:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --ink: #1f2733;
    --muted: #6b7686;
    --brand: #2f5bea;
    --brand-dark: #1f43c0;
    --border: #e3e8f0;
    --danger: #c0392b;
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; color: var(--ink); }
.topbar nav { display: flex; gap: 1.25rem; }
.topbar nav a { color: var(--muted); font-weight: 500; }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.active { color: var(--brand); font-weight: 600; }
.header-search input {
    padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px;
    font-size: .9rem; width: 200px;
}
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topbar .user span { color: var(--muted); }
.inline { display: inline; margin: 0; }
.btn-link {
    background: none; border: none; color: var(--brand);
    cursor: pointer; font: inherit; padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* ---- Layout ---- */
.container { max-width: 1040px; margin: 0 auto; padding: 1.75rem 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.muted { color: var(--muted); margin-top: 0; }

/* ---- Cards / stats ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 1rem 1.25rem; box-shadow: var(--shadow);
}
.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat-label { color: var(--muted); font-size: .85rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; }

/* ---- Tables ---- */
table.data {
    width: 100%; border-collapse: collapse; background: var(--card);
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    box-shadow: var(--shadow); margin-top: 1rem;
}
table.data th, table.data td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { background: #fafbfe; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
table.data tr:last-child td { border-bottom: none; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: #fafbff; }

/* ---- Buttons ---- */
.btn {
    display: inline-block; background: var(--brand); color: #fff;
    padding: .55rem 1.1rem; border: none; border-radius: 8px;
    font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }

/* ---- Login ---- */
.login-card {
    max-width: 360px; margin: 8vh auto; background: var(--card);
    border: 1px solid var(--border); border-radius: 12px; padding: 2rem;
    box-shadow: var(--shadow);
}
.login-card h1 { margin-bottom: 1.25rem; }
.login-card label { display: block; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); }
.login-card input {
    width: 100%; margin-top: .35rem; padding: .6rem .75rem;
    border: 1px solid var(--border); border-radius: 8px; font-size: 1rem;
}
.login-card .btn { width: 100%; }

.alert { color: var(--danger); background: #fdecea; padding: .6rem .9rem; border-radius: 8px; }
code { background: #eef1f7; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

/* ---- Forms ---- */
.form { max-width: 480px; display: flex; flex-direction: column; gap: 1rem; }
.form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--muted); }
.form input, .form select {
    padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem;
}
.form .btn { align-self: flex-start; }
.pct-input { width: 7rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; text-align: right; }

/* ---- Flash messages ---- */
.flash { padding: .7rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.flash-success { color: #1e7e45; background: #e7f6ed; }
.flash-error { color: var(--danger); background: #fdecea; }

h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }

/* ---- Status badges ---- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-paid { color: #1e7e45; background: #e7f6ed; }
.badge-pending { color: #9a6700; background: #fff4e0; }
.badge-muted { color: var(--muted); background: #eef1f7; }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; }

/* ---- Enrollment detail: deal header, tabs, rows ---- */
.deal-header { margin: .5rem 0 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }
.deal-title { font-size: 1.25rem; font-weight: 700; color: var(--brand); }

.tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 2px solid var(--border); overflow-x: auto; }
.tab-btn {
    flex: 1; padding: .7rem 1rem; background: transparent; color: var(--muted);
    border: none; border-bottom: 3px solid transparent; font: inherit; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--brand); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-content .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 0; border-bottom: 1px solid var(--border);
}
.tab-content .row:last-of-type { border-bottom: none; }
.tab-content .row label { color: var(--muted); font-weight: 500; }
.tab-content .row span { font-weight: 700; }
.pending-row span { color: var(--danger); }
.section-title { font-size: 1rem; font-weight: 600; margin: .5rem 0 .25rem; }
.divider { border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ---- Search form ---- */
.search-form { display: flex; gap: .5rem; margin: 1rem 0; max-width: 520px; }
.search-form input {
    flex: 1; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem;
}

/* ---- Table toolkit (sort / filter / paginate) ---- */
.table-controls { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .25rem; }
.table-filter {
    flex: 0 1 320px; padding: .5rem .7rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: .95rem;
}
.table-count { font-size: .85rem; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th.sorted-asc::after { content: " ▲"; font-size: .7em; color: var(--brand); }
table.data th.sorted-desc::after { content: " ▼"; font-size: .7em; color: var(--brand); }
.pager { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; }
.pager .btn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* ---- Dashboard ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.quick-actions { display: flex; gap: .5rem; }
.btn-ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn-ghost:hover { background: #eef2ff; }
.delta { font-size: .8rem; font-weight: 600; margin-top: .1rem; }
.delta-up { color: #1e7e45; }
.delta-down { color: var(--danger); }

.chart-card { margin: 1rem 0; }
.chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); margin: .5rem 0 0; }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-expected { background: var(--border); }
.swatch-received { background: var(--brand); margin-left: .75rem; }

.dash-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.rank { list-style: none; margin: .5rem 0 0; padding: 0; }
.rank li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.rank li:last-child { border-bottom: none; }
.rank li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Inline inward-payment form (institute detail) ---- */
.inline-pay { display: flex; gap: .35rem; align-items: center; margin: 0; }
.inline-pay input[type="number"] { width: 6.5rem; }
.inline-pay input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; }
.row-link { color: var(--muted); text-decoration: none; margin-left: .35rem; font-size: .85em; }
.row-link:hover { color: var(--brand); }