:root {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface2: #22263a;
    --border: #2e3250;
    --accent: #4f8ef7;
    --accent2: #7c6af7;
    --positive: #22c55e;
    --negative: #ef4444;
    --text: #e2e8f0;
    --text-muted: #64748b;
    --radius: 10px;
    --sidebar-w: 220px;
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

/* App Shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    position: fixed;
    height: 100vh;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.25rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.brand-icon { font-size: 1.4rem; }

.nav-links { list-style: none; flex: 1; }
.nav-links li a {
    display: block;
    padding: .6rem 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-right: .75rem;
    transition: all .15s;
}
.nav-links li a:hover, .nav-links li a.active {
    background: var(--surface2);
    color: var(--text);
}
.nav-links li a.active { color: var(--accent); font-weight: 600; }

.sidebar-footer {
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.username { color: var(--text-muted); font-size: .8rem; }
.logout-link { color: var(--negative); font-size: .85rem; text-decoration: none; }
.logout-link:hover { text-decoration: underline; }
.app-version { font-size: .7rem; color: var(--text-muted); opacity: .5; margin-top: .25rem; }

.content { margin-left: var(--sidebar-w); padding: 2rem; flex: 1; max-width: 1200px; }

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; }
.header-actions { display: flex; gap: .75rem; align-items: center; }

/* KPI Cards */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.kpi-card.highlight { border-color: var(--accent); background: rgba(79,142,247,.08); }
.kpi-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.3rem; font-weight: 700; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: .6rem .75rem; font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
td { padding: .6rem .75rem; border-bottom: 1px solid rgba(46,50,80,.5); }
tr:hover td { background: var(--surface2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: monospace; font-size: .85em; }

.ranking-table { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.bookings-table { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.costs-table { width: 100%; }
.costs-table td { padding: .4rem 0; border: none; }
.total-row td { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .25rem; }
.users-table { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* Sections */
.section { margin-bottom: 2rem; }
.section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--text); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }

/* Fields */
.fields { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.field input, .field select, .field textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: .5rem .75rem;
    font-size: .9rem;
    width: 100%;
    transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.field small { font-size: .75rem; color: var(--text-muted); }
.req { color: var(--negative); }
.cost-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem;
    background: var(--surface2);
    border-radius: 6px;
    font-size: .95rem;
}
.year-note { font-size: .75rem; color: var(--text-muted); font-weight: 400; }

/* Buttons */
.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .5rem 1.25rem;
    font-size: .9rem;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }
.btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem 1.25rem;
    font-size: .9rem;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background .15s;
}
.btn-secondary:hover { background: var(--border); }
.btn-danger-sm {
    background: transparent;
    border: 1px solid var(--negative);
    color: var(--negative);
    border-radius: 4px;
    padding: .25rem .6rem;
    font-size: .8rem;
    cursor: pointer;
}
.form-actions { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; }

/* Badges & Status */
.plate {
    font-family: monospace;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .1rem .5rem;
    font-size: .85rem;
}
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
}
.badge-green { background: rgba(34,197,94,.15); color: var(--positive); }
.badge-grey { background: var(--surface2); color: var(--text-muted); }
.badge-blue { background: rgba(79,142,247,.15); color: var(--accent); }
.badge-red { background: rgba(239,68,68,.15); color: var(--negative); }
.status-badge { border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600; }

/* Color classes */
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.muted { color: var(--text-muted); }
.link-detail { color: var(--accent); text-decoration: none; font-size: .85rem; }
.link-detail:hover { text-decoration: underline; }

/* Row states */
.row-excluded td { opacity: .4; }
.row-muted td { opacity: .6; }
.row-danger td:nth-child(6) { color: var(--negative); }

/* Alerts */
.alert-success {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    color: var(--positive);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
}
.error-msg {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--negative);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Year select */
.year-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: .4rem .75rem;
    font-size: .9rem;
}

/* Upload */
.upload-card {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
}
.upload-card h2 { font-size: 1.1rem; font-weight: 600; }
.upload-icon { font-size: 3rem; }
.file-input { display: none; }
.upload-label { cursor: pointer; }
.file-list { list-style: none; text-align: left; width: 100%; font-size: .85rem; }
.file-list li { padding: .25rem 0; border-bottom: 1px solid var(--border); }

.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.review-header h2 { font-size: 1.1rem; font-weight: 600; }

.review-stats { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat-pill { border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 500; }
.stat-pill.green { background: rgba(34,197,94,.12); color: var(--positive); }
.stat-pill.grey { background: var(--surface2); color: var(--text-muted); }
.stat-pill.blue { background: rgba(79,142,247,.12); color: var(--accent); }
.stat-pill.red { background: rgba(239,68,68,.12); color: var(--negative); }

.alert-warning {
    background: rgba(234,179,8,.1);
    border: 1px solid rgba(234,179,8,.3);
    color: #eab308;
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.login-logo { font-size: 2.5rem; text-align: center; }
.login-card h1 { font-size: 1.2rem; text-align: center; font-weight: 700; }
.login-card .btn-primary { width: 100%; text-align: center; padding: .65rem; }

/* Tooltips */
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e2235;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .45rem .7rem;
    font-size: .75rem;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

@media (max-width: 768px) {
    .form-grid, .detail-grid, .admin-grid { grid-template-columns: 1fr; }
    .kpi-cards { grid-template-columns: repeat(2, 1fr); }
}