:root {
    --sms-primary: #6366f1;
    --sms-primary-dark: #4338ca;
    --sms-secondary: #06b6d4;
    --sms-bg: #f1f5ff;
    --sms-surface: #ffffff;
    --sms-text: #111827;
    --sms-muted: #64748b;
    --sms-border: #dbe5f3;
    --sms-shadow: 0 14px 40px rgba(99, 102, 241, 0.12);
}

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--sms-text);
    background:
        radial-gradient(circle at 0% 0%, #dbe6ff 0%, rgba(219, 230, 255, 0) 35%),
        radial-gradient(circle at 100% 0%, #dcf7ff 0%, rgba(220, 247, 255, 0) 30%),
        var(--sms-bg);
}

.navbar.navbar-dark.bg-dark {
    background: linear-gradient(90deg, #312e81 0%, #1d4ed8 50%, #0284c7 100%) !important;
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.25);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.93) !important;
}

.navbar .nav-link:hover {
    color: #ffffff !important;
}

aside.bg-light {
    background: #0f172a !important;
    border-right: 0 !important;
}

.list-group {
    gap: 8px;
}

.list-group-item {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px !important;
    transition: all 0.2s ease;
    background: rgba(30, 41, 59, 0.75);
    color: #dbeafe;
    font-weight: 500;
}

.list-group-item i {
    opacity: 0.9;
}

.list-group-item:hover {
    background: rgba(51, 65, 85, 0.95);
    border-color: rgba(125, 211, 252, 0.45);
    color: #ffffff;
    transform: translateX(3px);
}

.list-group-item.sidebar-link.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.95), rgba(6, 182, 212, 0.95));
    border-color: rgba(191, 219, 254, 0.7);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.35);
}

main {
    min-height: calc(100vh - 56px);
    background: rgba(255, 255, 255, 0.35);
}

h1, h2, h3, h4, h5 {
    color: #0b2559;
    font-weight: 700;
}

h1.h4, h2.h4 {
    border-bottom: 3px solid #c7d7ff;
    padding-bottom: 4px;
}

.card {
    border: 1px solid var(--sms-border);
    border-radius: 16px;
    box-shadow: var(--sms-shadow);
    background: #fff;
    overflow: hidden;
}

/* Colorful module menu tiles (module index pages) */
main .row.g-3 > [class*="col-"] > a.text-decoration-none > .card.h-100 {
    position: relative;
    border: 1px solid #bcd0f1 !important;
    background: linear-gradient(155deg, #eef4ff, #e7f0ff) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

main .row.g-3 > [class*="col-"] > a.text-decoration-none > .card.h-100::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(180deg, #6366f1, #06b6d4);
}

main .row.g-3 > [class*="col-"] > a.text-decoration-none:hover > .card.h-100 {
    transform: translateY(-4px);
    border-color: #6a9ae6 !important;
    box-shadow: 0 16px 34px rgba(59, 130, 246, 0.28) !important;
}

main .row.g-3 > [class*="col-"]:nth-child(6n+1) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #6366f1, #3b82f6);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+1) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #eef2ff, #e0ebff) !important;
}
main .row.g-3 > [class*="col-"]:nth-child(6n+2) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #14b8a6, #06b6d4);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+2) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #e9fffb, #ddf8ff) !important;
}
main .row.g-3 > [class*="col-"]:nth-child(6n+3) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #f59e0b, #f97316);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+3) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #fff7e8, #ffeddc) !important;
}
main .row.g-3 > [class*="col-"]:nth-child(6n+4) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #ec4899, #a855f7);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+4) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #fff0f8, #f7e9ff) !important;
}
main .row.g-3 > [class*="col-"]:nth-child(6n+5) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #22c55e, #10b981);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+5) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #ebfff3, #ddfce9) !important;
}
main .row.g-3 > [class*="col-"]:nth-child(6n+6) > a.text-decoration-none > .card.h-100::before {
    background: linear-gradient(180deg, #ef4444, #f97316);
}
main .row.g-3 > [class*="col-"]:nth-child(6n+6) > a.text-decoration-none > .card.h-100 {
    background: linear-gradient(155deg, #fff0ef, #ffe5dd) !important;
}

main .row.g-3 > [class*="col-"] > a.text-decoration-none .fw-semibold {
    color: #0f2d73;
    font-size: 1.02rem;
}

main .row.g-3 > [class*="col-"] > a.text-decoration-none .text-muted {
    color: #475569 !important;
}

/* Dashboard cards: make the home page visually rich */
.sms-stat-card {
    border: 1px solid #bdd3f6 !important;
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.16) !important;
}

.row.g-3 > .col-md-6.col-lg-3:nth-child(1) .sms-stat-card {
    background: linear-gradient(145deg, #eef2ff, #dbe8ff) !important;
}
.row.g-3 > .col-md-6.col-lg-3:nth-child(2) .sms-stat-card {
    background: linear-gradient(145deg, #e9fffb, #d8f7ff) !important;
}
.row.g-3 > .col-md-6.col-lg-3:nth-child(3) .sms-stat-card {
    background: linear-gradient(145deg, #fff7e8, #ffe9d0) !important;
}
.row.g-3 > .col-md-6.col-lg-3:nth-child(4) .sms-stat-card {
    background: linear-gradient(145deg, #f1edff, #e5ddff) !important;
}

.sms-stat-card .fs-3 {
    color: #1e3a8a;
}

/* Fixed-height chart container to prevent layout expansion */
.finance-chart-wrap {
    height: 260px;
    max-height: 260px;
    position: relative;
}

.finance-chart-wrap canvas {
    height: 100% !important;
    width: 100% !important;
    display: block;
}

@media (max-width: 768px) {
    .finance-chart-wrap {
        height: 220px;
        max-height: 220px;
    }
}

.card .card-header {
    background: linear-gradient(90deg, #f0f5ff, #ecfeff);
    border-bottom: 1px solid #d9e3f6;
    color: #1e3a8a;
    font-weight: 700;
}

.table {
    --bs-table-bg: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    overflow: hidden;
}

.table thead th {
    background: #edf4ff;
    color: #1e3a8a;
    font-weight: 700;
    border-bottom: 1px solid #d7e3f8;
}

.table > :not(caption) > * > * {
    border-bottom: 1px solid #e9eef8;
    vertical-align: middle;
}

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

.form-control,
.form-select {
    border-radius: 12px;
    border: 1px solid #cfdcf2;
    background: #fff;
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, 0.2);
}

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

.btn {
    border-radius: 12px;
    font-weight: 600;
    padding: .5rem .95rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--sms-primary), #2563eb);
    border-color: var(--sms-primary-dark);
    box-shadow: 0 8px 18px rgba(67, 56, 202, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #1d4ed8);
    border-color: #3730a3;
}

.btn-outline-secondary {
    border-color: #c3d1e8;
    color: #334155;
    background: #fff;
}

.btn-outline-secondary:hover {
    background: #f3f7ff;
    border-color: #a9bfe0;
    color: #1e3a8a;
}

.alert {
    border-radius: 12px;
    border: 1px solid #d9e4f7;
}

.badge {
    border-radius: 999px;
    font-weight: 700;
}

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

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: #dbe5f3 !important;
}

@media (max-width: 992px) {
    aside.col-md-2 {
        display: none !important;
    }

    main.col-md-10,
    main.col-lg-10 {
        width: 100%;
    }
}