:root {
    --fl-navy: #12284c;
    --fl-navy-2: #1c3a66;
    --fl-accent: #2f6fed;
    --fl-bg: #f4f6fa;
}

body {
    background: var(--fl-bg);
    font-family: "Segoe UI", Roboto, system-ui, sans-serif;
    color: #1f2937;
}

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

.sidebar {
    width: 240px;
    background: var(--fl-navy);
    color: #dbe4f3;
    flex-shrink: 0;
    padding: 0 0 1rem;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: .5rem;
}

.sidebar .brand-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.sidebar .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar .brand-name { font-weight: 700; font-size: 1rem; }
.sidebar .brand-sub { font-size: .68rem; color: #9fb0cc; }

.sidebar .nav-link {
    color: #c3d0e6;
    padding: .55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-left: 3px solid transparent;
}

.sidebar .nav-link:hover { background: var(--fl-navy-2); color: #fff; }
.sidebar .nav-link.active {
    background: var(--fl-navy-2);
    color: #fff;
    border-left-color: var(--fl-accent);
}

.sidebar .nav-section {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .05em;
    color: #7f92b3;
    padding: 1rem 1.25rem .3rem;
}

.sidebar .nav-link.nav-sub {
    padding: .35rem 1.25rem .35rem 2.4rem;
    font-size: .84rem;
    color: #9fb0cc;
}
.sidebar .nav-link.nav-sub:hover { color: #fff; background: var(--fl-navy-2); }
.sidebar .nav-link.nav-sub i { font-size: .85rem; }

.sidebar .sop-toggle .chev { transition: transform .15s ease; }
.sidebar .sop-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Main area ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: #fff;
    border-bottom: 1px solid #e5e9f0;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar .page-title { font-weight: 600; font-size: 1.15rem; color: var(--fl-navy); }
.content { padding: 1.5rem; }

/* ---------- KPI cards ---------- */
.kpi-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    height: 100%;
}
.kpi-card .kpi-value { font-size: 1.9rem; font-weight: 700; color: var(--fl-navy); }
.kpi-card .kpi-label { color: #6b7280; font-size: .85rem; }
.kpi-card i.kpi-icon { font-size: 1.6rem; color: var(--fl-accent); }

/* ---------- Category tiles ---------- */
.cat-tile {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.1rem;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: box-shadow .15s, transform .15s;
}
.cat-tile:hover { box-shadow: 0 6px 18px rgba(18, 40, 76, .12); transform: translateY(-2px); }
.cat-tile i { font-size: 1.7rem; color: var(--fl-accent); }
.cat-tile .cat-name { font-weight: 600; color: var(--fl-navy); margin-top: .5rem; }
.cat-tile .cat-count { font-size: .8rem; color: #6b7280; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fl-navy), var(--fl-navy-2));
    padding: 1rem;
}
.login-card {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}
.login-card .login-brand {
    text-align: center;
    color: var(--fl-navy);
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: .25rem;
}
.login-card .login-company { text-align: center; color: var(--fl-navy); font-weight: 600; font-size: .8rem; margin-top: .1rem; }
.login-card .login-sub { text-align: center; color: #6b7280; font-size: .85rem; margin-bottom: 1.5rem; }