/* ============================================================
   MCA Data System – Custom Styles (Bootstrap 5.3 Override)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --sidebar-width : 260px;
    --sidebar-bg    : #12151c;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --body-bg       : #f0f2f5;
    --card-radius   : 12px;
    --topbar-h      : 56px;
}

/* ── Base ───────────────────────────────────────────────────── */
body { background-color: var(--body-bg); }

/* ── Layout wrapper ─────────────────────────────────────────── */
.wrapper { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    width           : var(--sidebar-width);
    min-width       : var(--sidebar-width);
    background-color: #212529 !important;
    height          : 100vh;
    position        : sticky;
    top             : 0;
    overflow-y      : auto;
    scrollbar-width : thin;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius:4px; }

/* Brand row */
.brand-row { border-bottom: 1px solid var(--sidebar-border); }
.brand-icon {
    width           : 34px;
    height          : 34px;
    border-radius   : 8px;
    background      : #0d6efd;
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1rem;
    flex-shrink     : 0;
}

/* Nav section label */
.nav-section-label {
    font-size     : 0.65rem;
    color         : rgba(255,255,255,.35);
    letter-spacing: 0.1em;
    font-weight   : 700;
    padding       : 0 0.5rem;
    margin-bottom : 0.4rem;
    margin-top    : 0;
}

/* Sidebar links */
.sidebar-link {
    color        : rgba(255,255,255,.6);
    border-radius: 8px;
    padding      : 0.55rem 0.9rem;
    font-size    : 0.88rem;
    transition   : background 0.15s, color 0.15s;
    display      : flex;
    align-items  : center;
    gap          : 0.6rem;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-link.active { color: #fff; background: #0d6efd; font-weight: 500; }
.sidebar-link i { width: 18px; text-align: center; font-size: 0.95rem; }

/* Avatar */
.avatar-circle {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : #0d6efd;
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 0.8rem;
    font-weight     : 700;
    flex-shrink     : 0;
}
/* Small avatar (user list) */
.avatar-sm {
    width           : 28px;
    height          : 28px;
    border-radius   : 50%;
    background      : linear-gradient(135deg,#0d6efd,#6f42c1);
    color           : #fff;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    font-size       : 0.75rem;
    font-weight     : 700;
    flex-shrink     : 0;
}

/* ── Main content ───────────────────────────────────────────── */
.main-content {
    background  : var(--body-bg);
    min-height  : 100vh;
    overflow-x  : hidden;
    padding     : 1.5rem;
}

/* Page header */
.page-header { margin-bottom: 1.5rem; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border       : none;
    border-radius: var(--card-radius);
    box-shadow   : 0 1px 4px rgba(0,0,0,.07);
}
.card-header {
    background-color: transparent;
    border-bottom   : 1px solid rgba(0,0,0,.06);
    padding         : 0.9rem 1.25rem;
    font-size       : 0.88rem;
    font-weight     : 600;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover {
    transform  : translateY(-3px);
    box-shadow : 0 8px 24px rgba(0,0,0,.1) !important;
}
.stat-icon {
    width           : 50px;
    height          : 50px;
    border-radius   : 12px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.35rem;
    flex-shrink     : 0;
}
.stat-value  { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label  { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ── Charts ─────────────────────────────────────────────────── */
.chart-container       { position: relative; height: 290px; }
.chart-donut           { height: 270px; }
.chart-bar-h           { height: 320px; }

/* ── Table ──────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .75rem; font-weight: 600; }
.table-hover tbody tr:hover { background: rgba(13,110,253,.04); }

/* ── Login page ─────────────────────────────────────────────── */
.login-bg { background: linear-gradient(135deg, #12151c 0%, #0a0e1a 100%); }
.login-card { border-radius: 16px !important; border: none; }
.login-logo {
    width           : 58px;
    height          : 58px;
    border-radius   : 14px;
    background      : linear-gradient(135deg,#0d6efd,#6f42c1);
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.6rem;
}

/* ── Badges / misc ──────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .02em; }
code   { font-size: .82em; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        position : fixed;
        height   : 100vh;
        z-index  : 1050;
    }
    .main-content {
        padding  : 1rem;
        min-height: calc(100vh - var(--topbar-h));
    }
    .chart-container, .chart-donut, .chart-bar-h { height: 220px; }
}

@media (max-width: 575.98px) {
    .stat-value { font-size: 1.3rem; }
    .stat-icon  { width: 40px; height: 40px; font-size: 1.1rem; }
}