/* ========== GLOBAL RESET ========== */
html, body {
    height: 100%;
    margin: 0;
}

/* ========== APP SHELL ========== */
.app-shell {
    min-height: 100vh;
    background-color: #12344d; /* prevents white seam */
}

/* ========== SIDEBAR ========== */
/* Sidebar styling */
.sidebar {
    background-color: #085001;
    width: 220px;
    min-height: 100vh;
}

/* Each link is a row */
.sidebar-row {
    display: block;
    color: #ffffff;
    background-color: #02315f;  /* Slightly lighter than sidebar */
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-weight: 500;
}

/* Hover effect */
.sidebar-row:hover {
    background-color: #014070;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

/* Active link */
.sidebar-row.active {
    background-color: #0261a3;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}


/* ========== TOPBAR ========== */
.topbar {
    height: 56px;
    background-color: #12344d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
    border-radius: 0;
}

/* ========== CONTENT AREA ========== */
.content-area {
    background-color: #f8f9fa;
    min-height: calc(100vh - 56px);
}

/* ========== CARDS / CUSTOM ========== */
.custom-bg {
    background-color: #f7933d;
}
 /* Sidebar right */
.sidebar-right{
    background-color: #ffffff;
}
/* Right sidebar links - subtle hover effect */
.sidebar-right .sidebar-link {
    padding: 0.25rem 0;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    transition: color 0.2s, transform 0.2s; /* smooth effect */
}

/* Hover effect: subtle color shift and tiny move */
.sidebar-right .sidebar-link:hover {
    color: #12344d;;        /* highlight color */
    transform: translateX(4px);  /* slight shift to the right */
}

.btn-secondary.btn-linear {
    background: linear-gradient(to bottom, #ffffff, #f3f5f7);
    border-color: #ced4da;
    color: #212529;
}

.btn-secondary.btn-linear:hover {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

.btn-secondary.btn-linear:active,
.btn-secondary.btn-linear:focus {
    background: linear-gradient(to bottom, #e9ecef, #dee2e6);
}


/* =========================
   TOPBAR MOBILE DROPDOWN
========================= */

/* Default collapse behavior (desktop untouched) */
@media (max-width: 991.98px) {

    /* The collapsed menu container */
    .navbar-collapse {
        position: absolute;
        top: 56px; /* height of topbar */
        right: 0;
        left: 0;

        background-color: #12344d;
        padding: 1rem 1.5rem;

        z-index: 1050; /* ABOVE content */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }

    /* Stack menu items nicely */
    .navbar-nav {
        align-items: flex-start;
    }

    /* Dropdown user item spacing */
    .navbar-nav .nav-item {
        width: 100%;
    }

    /* Make dropdown toggle full-width tap target */
    .navbar-nav .nav-link {
        width: 100%;
        padding: 0.75rem 0;
    }
}