:root {
    --csccoms-primary: #0d3b66;
    --csccoms-accent: #1e88e5;
    --csccoms-topbar-h: 52px;
    --csccoms-sidebar-w: 224px;
}

body { background: #f4f6f9; }

/* ============ APP SHELL ============ */
.csccoms-shell { min-height: 100vh; }

/* --- Top bar: logo + company selector (left), user + sign out (right) --- */
.csccoms-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--csccoms-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .9rem;
    background: linear-gradient(90deg, var(--csccoms-primary), #12508c);
    color: #fff;
}
.csccoms-topbar .topbar-left,
.csccoms-topbar .topbar-right { display: flex; align-items: center; gap: .75rem; }

.csccoms-brand {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    font-size: 1.05rem;
}
.csccoms-brand:hover { color: #cfe3ff; }
.csccoms-brand .brand-logo { height: 26px; max-width: 120px; object-fit: contain; vertical-align: middle; background:#fff; border-radius:3px; padding:2px; }

.csccoms-topbar .company-selector { margin: 0; }
.csccoms-topbar .company-selector .form-select { min-width: 230px; max-width: 320px; }

.topbar-user { color: #dbe7f5; font-size: .9rem; white-space: nowrap; }

.sidebar-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    padding: .1rem .35rem;
}

/* --- Body row: sidebar + main --- */
.csccoms-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--csccoms-topbar-h));
}

/* --- Left menu pane --- */
.csccoms-sidebar {
    flex: 0 0 var(--csccoms-sidebar-w);
    width: var(--csccoms-sidebar-w);
    background: #fff;
    border-right: 1px solid #e2e8f0;
    position: sticky;
    top: var(--csccoms-topbar-h);
    align-self: flex-start;
    height: calc(100vh - var(--csccoms-topbar-h));
    overflow-y: auto;
}
.side-nav { padding: .5rem 0; }
.side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    color: #33475b;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.side-link .bi { width: 1.1rem; text-align: center; color: #7a8ba0; }
.side-link:hover { background: #f1f5fa; color: var(--csccoms-primary); }
.side-link.active {
    background: #e8f0fb;
    color: var(--csccoms-primary);
    font-weight: 600;
    border-left-color: var(--csccoms-accent);
}
.side-link.active .bi { color: var(--csccoms-accent); }
.side-section {
    padding: .9rem 1rem .3rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa7b5;
    font-weight: 700;
}

/* --- Main content --- */
.csccoms-main {
    flex: 1 1 auto;
    min-width: 0;              /* let wide tables scroll instead of blowing out layout */
    padding: 1.25rem 1.5rem 0;
    display: flex;
    flex-direction: column;
}
.csccoms-footer {
    margin-top: auto;
    padding: 1rem 0;
    text-align: center;
    color: #8a97a5;
    font-size: .8rem;
    border-top: 1px solid #e6eaef;
}

.sidebar-backdrop { display: none; }

/* --- Responsive: sidebar becomes an off-canvas drawer --- */
@media (max-width: 992px) {
    .sidebar-toggle { display: inline-block; }
    .csccoms-topbar .company-selector .form-select { min-width: 150px; }
    .topbar-user { display: none; }

    .csccoms-sidebar {
        position: fixed;
        top: var(--csccoms-topbar-h);
        left: 0;
        height: calc(100vh - var(--csccoms-topbar-h));
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 1035;
        box-shadow: 0 0 25px rgba(0,0,0,.15);
    }
    body.sidebar-open .csccoms-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--csccoms-topbar-h) 0 0 0;
        background: rgba(0,0,0,.35);
        z-index: 1034;
    }
}

/* ============ COMPONENTS ============ */
.kpi-card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--csccoms-primary); }
.kpi-card .kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.kpi-card.alert-kpi .kpi-value { color: #c0392b; }

.card { border: none; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.table thead th { background: #eef2f7; border-bottom: 2px solid #dbe3ec; }
.drill-link { text-decoration: none; }
.drill-link:hover { text-decoration: underline; }

.insight-Critical { border-left: 4px solid #c0392b; }
.insight-Warning  { border-left: 4px solid #e67e22; }
.insight-Opportunity { border-left: 4px solid #27ae60; }
.insight-Info { border-left: 4px solid #2980b9; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-cell { min-height: 110px; background: #fff; border-radius: .4rem; padding: 4px 6px; font-size: .8rem; }
.calendar-cell .daynum { font-weight: 700; color: #6c757d; }
.calendar-cell.other-month { background: #f0f0f0; opacity: .55; }
.cal-ev { display:block; border-radius: 3px; padding: 1px 4px; margin-top: 2px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-ev.Overdue { background:#c0392b; } .cal-ev.Paid,.cal-ev.Completed { background:#27ae60; }
.cal-ev.DueToday { background:#e67e22; } .cal-ev.DueSoon { background:#2980b9; } .cal-ev.Upcoming { background:#7f8c8d; }
.cal-ev.AwaitingApproval { background:#8e44ad; }

.login-wrap { max-width: 400px; margin: 6vh auto; }