/* ============================================================
   APS — Academic Performance System
   Global design system · "Modern SaaS (clean)"
   Light & airy, soft shadows, rounded cards, light sidebar,
   crimson (#d8002e) as accent only. Applies app-wide.
   Load order: styles.css -> brand.css -> app-theme.css
   (brand.css owns color tokens; this owns structure/components)
   ============================================================ */

:root {
    --aps-radius: 14px;
    --aps-radius-sm: 10px;
    --aps-card-border: #edf0f5;
    --aps-line: #eef1f6;
    --aps-ink: #1f2937;
    --aps-muted: #8a94a6;
    --aps-canvas: #f5f6fa;
    --aps-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(16, 24, 40, .30);
    --aps-shadow-lg: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -24px rgba(16, 24, 40, .42);
}

/* ---------- Canvas & typography ---------- */
.body-wrapper {
    background: var(--aps-canvas);
}

body {
    color: #344054;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--aps-ink);
    letter-spacing: -0.01em;
}

.card-title {
    font-weight: 700;
}

.text-muted {
    color: var(--aps-muted) !important;
}

/* ---------- Topbar / header ---------- */
.topbar {
    background: #fff !important;
    border-bottom: 1px solid var(--aps-line);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--aps-card-border) !important;
    border-radius: var(--aps-radius) !important;
    box-shadow: var(--aps-shadow) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: var(--aps-shadow-lg) !important;
    }

    .card .card-body {
        padding: 1.35rem 1.4rem;
    }

/* Tinted stat cards (e.g. dashboard) read as solid color blocks. */
.card[class*="bg-"][class*="-subtle"] {
    border-color: transparent !important;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--aps-radius-sm);
    font-weight: 600;
}

.btn-sm {
    border-radius: 8px;
}

.btn-lg {
    border-radius: 12px;
}

/* ---------- Inputs ---------- */
.form-control,
.form-select {
    border-radius: var(--aps-radius-sm);
    border-color: #e3e7ef;
    padding: .55rem .85rem;
}

.form-control-sm,
.form-select-sm {
    border-radius: 8px;
}

.form-label {
    font-weight: 600;
    color: #374151;
}

/* ---------- Tables ---------- */
.table > thead th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .72rem;
    color: var(--aps-muted) !important;
    font-weight: 700;
    border-bottom: 1px solid var(--aps-line) !important;
}

.table > :not(caption) > * > * {
    padding: .85rem 1rem;
}

.table tbody tr {
    transition: background .12s ease;
}

    .table tbody tr:hover {
        background: #fafbff;
    }

/* ---------- Badges & dropdowns ---------- */
.badge {
    font-weight: 600;
    border-radius: 8px;
    padding: .42em .65em;
}

.dropdown-menu {
    border: 1px solid var(--aps-card-border);
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-shadow);
}

/* ---------- Sidebar (light, clean, crimson accent) ---------- */
.left-sidebar {
    border-right: 1px solid var(--aps-line) !important;
}

.sidebar-nav ul .sidebar-item {
    padding: 0 12px;
}

.sidebar-link {
    border-radius: var(--aps-radius-sm) !important;
    margin: 2px 0;
    padding: 10px 12px !important;
    color: #5a6a85 !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

    .sidebar-link:hover {
        background: #f3f4f8 !important;
        color: var(--aps-ink) !important;
    }

/* active item = soft crimson pill (accent only) */
.sidebar-item.selected > .sidebar-link,
.sidebar-item.active > .sidebar-link,
.sidebar-nav ul .sidebar-item > .sidebar-link.active {
    background: rgba(216, 0, 46, .10) !important;
    color: #d8002e !important;
    box-shadow: none !important;
}

    .sidebar-item.selected > .sidebar-link i,
    .sidebar-item.active > .sidebar-link i,
    .sidebar-nav ul .sidebar-item > .sidebar-link.active i {
        color: #d8002e !important;
    }

.nav-small-cap {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .68rem;
    color: #9aa4b6;
    font-weight: 700;
}

/* ---------- Scrollbar polish ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd2dd transparent;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: #cbd2dd;
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #aab3c2;
    }