:root {

    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --content-bg: #f8fafc;
    --card-bg: #ffffff;
    --primary-color: #2563eb;
    --text-dark: #0f172a;
    --text-light: #64748b;
    --border-color: #e2e8f0;
}

/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;

    overflow-x: hidden;

    margin: 0;
    padding: 0;
}

body {

    margin: 0;
    padding: 0;

    width: 100%;

    overflow-x: hidden;

    background: var(--content-bg);

    color: var(--text-dark);

    font-family: Inter, Arial, sans-serif;
}

/* REMOVE BOOTSTRAP GUTTERS */

.container-fluid,
.row {

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =========================================
   MOBILE NAVBAR
========================================= */

.mobile-navbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 9999;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(
        15,
        23,
        42,
        0.96
    );

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(
        255,
        255,
        255,
        0.08
    );
}

/* FORCE FULL WIDTH */

.mobile-navbar > .container-fluid {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LEFT SIDE */

.mobile-navbar .d-flex.align-items-center.gap-2:first-child {

    padding-left: 0.75rem;
}

/* RIGHT SIDE */

.mobile-navbar .d-flex.align-items-center.gap-2:last-child {

    padding-right: 0.75rem;
}

/* BRAND */

.mobile-navbar .navbar-brand {

    margin: 0;

    font-size: 1.1rem;
    font-weight: 600;
}

/* MOBILE LOGO */

.mobile-logo {

    width: 36px;
    height: 36px;

    object-fit: contain;

    margin: 0;
}

/* MOBILE BUTTONS */

.mobile-navbar .btn,
.mobile-navbar .navbar-toggler {

    border-radius: 0.75rem;
}

/* =========================================
   DESKTOP SIDEBAR
========================================= */

.sidebar {

    position: fixed;

    top: 0;
    left: 0;

    width: 320px;

    height: 100vh;

    overflow-y: auto;

    background: var(--sidebar-bg);

    color: #ffffff;

    padding: 2rem 1rem;

    display: flex;
    flex-direction: column;

    z-index: 1000;
}

/* =========================================
   LOGO
========================================= */

.logo-wrapper {
    margin-bottom: 1rem;
}

.portal-logo {

    width: 64px;
    height: 64px;

    object-fit: contain;
}

/* =========================================
   BRAND
========================================= */

.brand-wrapper {
    margin-bottom: 3rem;
}

.brand-title {

    font-size: 1.8rem;
    font-weight: 700;
}

.brand-subtitle {
    color: #94a3b8;
}

/* =========================================
   NAVIGATION
========================================= */

.portal-nav .nav-link {

    color: #cbd5e1;

    padding: 0.9rem 1rem;

    border-radius: 0.75rem;

    margin-bottom: 0.5rem;

    transition: all 0.2s ease;
}

.portal-nav .nav-link:hover {

    background: var(--sidebar-hover);

    color: #ffffff;
}

.portal-nav i {
    margin-right: 0.75rem;
}

/* =========================================
   CONTENT
========================================= */

.content-wrapper {

    margin-left: 320px;

    width: calc(100% - 320px);

    padding: 2rem;
}

.hero-section {
    margin-bottom: 3rem;
}

.hero-card {

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    padding: 3rem;

    border-radius: 1.5rem;

    box-shadow: 0 15px 40px rgba(
        37,
        99,
        235,
        0.2
    );
}

.hero-card h2 {

    font-size: 2.5rem;
    font-weight: 700;
}

.hero-card p {

    margin-top: 1rem;

    font-size: 1.1rem;

    max-width: 800px;
}

.portal-section {
    margin-bottom: 4rem;
}

.section-header {
    margin-bottom: 2rem;
}

.section-header h3 {

    font-size: 1.8rem;
    font-weight: 700;
}

.section-header p {
    color: var(--text-light);
}

/* =========================================
   CARDS
========================================= */

.portal-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 1.25rem;

    padding: 1.5rem;

    height: 100%;

    transition: all 0.2s ease;

    box-shadow: 0 6px 20px rgba(
        15,
        23,
        42,
        0.05
    );
}

.portal-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(
        15,
        23,
        42,
        0.1
    );
}

.portal-card i {

    font-size: 2rem;

    color: var(--primary-color);

    margin-bottom: 1rem;
}

.portal-card h4 {

    font-size: 1.2rem;
    font-weight: 600;
}

.portal-card p {

    color: var(--text-light);

    margin-bottom: 1.5rem;
}

/* =========================================
   FOOTER
========================================= */

.portal-footer {

    margin-top: 5rem;

    padding-top: 2rem;

    border-top: 1px solid var(--border-color);
}

.footer-nav a {

    color: var(--text-light);

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-nav a:hover {

    color: var(--primary-color);
}

/* =========================================
   DARK MODE
========================================= */

body.dark-mode {

    --sidebar-bg: #020617;
    --sidebar-hover: #111827;
    --content-bg: #0f172a;
    --card-bg: #1e293b;
    --primary-color: #3b82f6;
    --text-dark: #f8fafc;
    --text-light: #cbd5e1;
    --border-color: #334155;

    background: var(--content-bg);

    color: var(--text-dark);
}

body.dark-mode .portal-card {
    background: var(--card-bg);
}

body.dark-mode .hero-card {

    background: linear-gradient(
        135deg,
        #1d4ed8,
        #1e40af
    );
}

body.dark-mode .portal-nav .nav-link {
    color: #e2e8f0;
}

body.dark-mode .footer-nav a {
    color: #cbd5e1;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    body {

        padding-top: 72px;
    }

    .sidebar {

        position: relative;

        width: 100%;

        height: auto;
    }

    .content-wrapper {

        width: 100%;

        margin-left: 0;

        padding: 1.5rem;
    }

    .hero-card {
        padding: 2rem;
    }

    .hero-card h2 {
        font-size: 2rem;
    }

    /* MOBILE FOOTER CENTER */

    .portal-footer {

        text-align: center;
    }

    .footer-nav {

        width: 100%;

        justify-content: center !important;

        align-items: center;

        text-align: center;
    }

    .portal-footer .d-flex {

        justify-content: center !important;

        align-items: center !important;
    }
}