:root {
    --bg: #eef5fb;
    --card: #ffffff;
    --navy: #153b5c;
    --text: #183b56;
    --muted: #607d94;
    --line: #dbe8f2;
    --stripe: #f7fbff;
    --accent: #22577a;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

.page-shell { min-height: 100vh; }
.hero-card,
.panel-card,
.metric-card {
    background: var(--card);
    border: 1px solid rgba(21, 59, 92, 0.08);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(27, 67, 99, 0.08);
}

.hero-card {
    padding: 28px;
    background: linear-gradient(135deg, #153b5c 0%, #22577a 55%, #38a3a5 100%);
    color: #fff;
}

.eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.78;
    margin-bottom: 10px;
}

.hero-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: 10px;
}

.hero-copy {
    max-width: 900px;
    opacity: 0.92;
}

.panel-card { padding: 22px; }
.metric-card { padding: 22px; height: 100%; }
.metric-label { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.metric-value { font-size: 32px; font-weight: 800; color: var(--navy); }
.summary-title { font-size: 28px; font-weight: 800; color: var(--navy); }
.summary-subtitle { color: var(--muted); font-weight: 600; }
.section-title { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.form-label { font-weight: 600; color: var(--navy); }
.form-control {
    border-radius: 14px;
    border: 1px solid var(--line);
    min-height: 48px;
}
.btn-primary {
    min-height: 48px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #153b5c 0%, #22577a 100%);
    font-weight: 700;
}

.table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.summary-table thead th,
.employee-table thead th {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}
.summary-table tfoot th {
    background: #5b9bd5;
    color: #fff;
    font-weight: 700;
}
.striped-row td { background: var(--stripe); }
.chart-wrap { position: relative; height: 420px; }
.employee-dept-header {
    background: linear-gradient(135deg, #d9eaf7 0%, #eaf3fa 100%);
    color: var(--navy);
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
}
.employee-table {
    border: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}
.alert { border-radius: 14px; }

@media (max-width: 991.98px) {
    .chart-wrap { height: 340px; }
}