/*
 * SD Asy Syifa - UI refresh
 * Shared visual layer for the authenticated, admin, and login layouts.
 */
:root {
    --ui-ink: #183229;
    --ui-ink-soft: #5f716a;
    --ui-brand: #17624d;
    --ui-brand-deep: #0b3328;
    --ui-brand-bright: #2f8a6b;
    --ui-gold: #c89b52;
    --ui-gold-soft: #f5ead6;
    --ui-surface: #ffffff;
    --ui-canvas: #f4f7f5;
    --ui-border: #e5ece8;
    --ui-shadow: 0 12px 34px rgba(24, 50, 41, .08);
    --ui-shadow-hover: 0 18px 42px rgba(24, 50, 41, .14);
    --ui-radius: 16px;
    --ui-transition: 180ms ease;
}

html {
    background: var(--ui-canvas);
}

body,
body.bg-light {
    background:
        radial-gradient(circle at 100% 0%, rgba(200, 155, 82, .08), transparent 28rem),
        var(--ui-canvas) !important;
    color: var(--ui-ink) !important;
    letter-spacing: .005em;
}

button,
a,
input,
select,
textarea,
.card,
.btn,
.nav-link,
.dropdown-menu {
    transition: all var(--ui-transition);
}

/* Authenticated shell */
.sidebar {
    width: 276px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(47, 138, 107, .28), transparent 20rem),
        linear-gradient(180deg, #08261d 0%, #0c392b 52%, #10503d 100%) !important;
    box-shadow: 12px 0 38px rgba(8, 38, 29, .16) !important;
}

.sidebar .brand {
    min-height: 78px;
    padding: 17px 20px !important;
    border-bottom-color: rgba(255, 255, 255, .09) !important;
}

.sidebar .brand .logo-icon {
    width: 43px !important;
    height: 43px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e4bd79, #bd8841) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2) !important;
}

.sidebar .brand .brand-text h5 {
    font-size: .88rem !important;
    letter-spacing: .08em !important;
}

.sidebar .brand .brand-text small {
    color: rgba(255, 255, 255, .46) !important;
    letter-spacing: .12em !important;
}

.sidebar .user-profile {
    margin: 12px 12px 8px;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

.sidebar .user-profile .user-avatar,
.top-nav .user-info .user-avatar-top {
    background: linear-gradient(135deg, var(--ui-brand-bright), var(--ui-brand)) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.sidebar .nav {
    padding: 8px 8px 24px !important;
}

.sidebar .nav-label {
    color: rgba(255, 255, 255, .42) !important;
    padding-left: 13px !important;
}

.sidebar .nav-link,
.sidebar .select-style-menu .select-header {
    min-height: 40px;
    margin: 3px 4px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    color: rgba(255, 255, 255, .67) !important;
    font-size: .78rem !important;
}

.sidebar .nav-link:hover,
.sidebar .select-style-menu .select-header:hover {
    background: rgba(255, 255, 255, .085) !important;
    color: #fff !important;
    transform: translateX(3px);
}

.sidebar .nav-link.active,
.sidebar .select-style-menu.active-parent .select-header {
    background: linear-gradient(90deg, rgba(200, 155, 82, .2), rgba(200, 155, 82, .06)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--ui-gold), 0 5px 16px rgba(0, 0, 0, .08) !important;
}

.main-content {
    margin-left: 276px !important;
    padding: 22px 30px 54px !important;
}

.top-nav {
    min-height: 62px;
    margin-bottom: 26px !important;
    padding: 12px 18px !important;
    position: relative;
    z-index: 1100;
    overflow: visible !important;
    border: 1px solid rgba(229, 236, 232, .96) !important;
    border-radius: 17px !important;
    box-shadow: var(--ui-shadow) !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(12px);
}

.top-nav .dropdown,
.top-nav .user-info {
    position: relative;
    z-index: 1200 !important;
}

.top-nav .dropdown-menu {
    max-height: none !important;
    overflow: visible !important;
}

.top-nav .breadcrumb {
    font-size: .78rem !important;
}

.top-nav .breadcrumb-item.active {
    color: var(--ui-ink-soft) !important;
    font-weight: 600;
}

.top-nav .breadcrumb-item a {
    color: var(--ui-brand) !important;
}

.card,
.stat-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

.card:hover,
.stat-card:hover {
    box-shadow: var(--ui-shadow-hover) !important;
    transform: translateY(-2px);
}

.card-header {
    padding: 16px 20px !important;
    color: var(--ui-ink) !important;
    background: linear-gradient(180deg, #fff, #fbfdfc) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.card-body {
    padding: 20px !important;
}

.table {
    --bs-table-color: var(--ui-ink);
    --bs-table-hover-bg: #f6faf8;
    margin-bottom: 0;
}

.table thead th {
    background: #f2f7f4 !important;
    color: #4f6a5e !important;
    border-bottom: 1px solid var(--ui-border) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    border-color: #edf2ef !important;
    vertical-align: middle;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    min-height: 42px;
    border: 1px solid #dce7e1 !important;
    border-radius: 10px !important;
    color: var(--ui-ink) !important;
    background-color: #fbfdfc !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ui-brand-bright) !important;
    box-shadow: 0 0 0 4px rgba(47, 138, 107, .13) !important;
    background: #fff !important;
}

.form-label,
label {
    color: #466157;
    font-weight: 700;
}

.btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

.btn-primary,
.btn-primary-custom,
.btn-success {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-bright)) !important;
    border-color: transparent !important;
}

.btn-primary:hover,
.btn-primary-custom:hover,
.btn-success:hover {
    box-shadow: 0 9px 22px rgba(23, 98, 77, .22) !important;
    transform: translateY(-1px);
}

.btn-gold {
    background: linear-gradient(135deg, #d8ad68, #bd8841) !important;
    color: #23382f !important;
    border-color: transparent !important;
}

.btn-outline-secondary {
    border-color: #cfddd6 !important;
    color: #466157 !important;
}

.btn-outline-secondary:hover {
    background: #edf5f1 !important;
    color: var(--ui-brand) !important;
}

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

.modal-content,
.dropdown-menu,
.swal2-popup-custom {
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(24, 50, 41, .18) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--ui-border) !important;
}

.dropdown-item {
    border-radius: 8px;
    font-size: .82rem;
    padding: 9px 11px;
}

.dropdown-item:hover {
    background: #eef7f2;
    color: var(--ui-brand);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dce7e1 !important;
    border-radius: 8px !important;
    padding: 6px 10px;
}

.page-link {
    color: var(--ui-brand) !important;
    border-color: var(--ui-border) !important;
}

.page-item.active .page-link {
    color: #fff !important;
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
}

.footer {
    color: #799087 !important;
    border-top-color: var(--ui-border) !important;
}

/* Admin layout */
.admin-main {
    background: var(--ui-canvas);
}

.admin-topbar {
    min-height: 70px;
    padding: 13px 30px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 5px 20px rgba(24, 50, 41, .05);
}

.admin-content {
    padding: 28px 30px !important;
}

.admin-content .container,
.admin-content .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.welcome-card {
    background: linear-gradient(135deg, #0b3328, #17624d 62%, #2f8a6b) !important;
    border: none !important;
}

/* Login */
body:has(.login-wrapper) {
    background:
        radial-gradient(circle at 12% 18%, rgba(47, 138, 107, .4), transparent 26rem),
        radial-gradient(circle at 92% 80%, rgba(200, 155, 82, .16), transparent 24rem),
        #08261d !important;
}

.login-card {
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .32) !important;
    background: rgba(255, 255, 255, .98) !important;
}

.login-card::before {
    height: 4px !important;
    background: linear-gradient(90deg, var(--ui-brand), var(--ui-gold), var(--ui-brand)) !important;
}

.login-brand h3 {
    color: var(--ui-brand) !important;
    letter-spacing: .01em !important;
}

.login-brand p {
    color: var(--ui-ink-soft) !important;
}

.form-group .input-group {
    border-color: #dce7e1 !important;
    background: #f8fbf9 !important;
}

.form-group .input-group:focus-within {
    border-color: var(--ui-brand-bright) !important;
    box-shadow: 0 0 0 4px rgba(47, 138, 107, .13) !important;
}

.btn-login {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-bright)) !important;
    border-radius: 12px !important;
}

@media (max-width: 992px) {
    .main-content {
        margin-left: 0 !important;
        padding: 16px !important;
    }

    .admin-content {
        padding: 20px 16px !important;
    }
}

@media (max-width: 576px) {
    .top-nav {
        padding: 11px 13px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .login-card {
        padding: 30px 22px 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Islamic visual language: calm green gradients and a subtle mosque silhouette. */
body:not(:has(.login-wrapper)) {
    background:
        radial-gradient(circle at 8% 14%, rgba(47, 138, 107, .10), transparent 22rem),
        radial-gradient(circle at 96% 88%, rgba(200, 155, 82, .10), transparent 26rem),
        var(--ui-canvas) !important;
}

body:has(.login-wrapper) {
    background:
        radial-gradient(circle at 12% 18%, rgba(47, 138, 107, .46), transparent 26rem),
        radial-gradient(circle at 92% 80%, rgba(200, 155, 82, .18), transparent 24rem),
        linear-gradient(135deg, #061f17 0%, #0b382a 54%, #0b2d22 100%) !important;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../img/ui/mosque-watercolor.png');
    background-repeat: no-repeat;
    opacity: .18;
}

body:not(:has(.login-wrapper))::after {
    background-position: right bottom;
    background-size: min(39vw, 580px) auto;
}

body:has(.login-wrapper)::after {
    background-position: left bottom;
    background-size: min(42vw, 620px) auto;
    opacity: .20;
}

.main-content,
.admin-main {
    position: relative;
    z-index: 1;
}

.sidebar,
.admin-topbar,
.top-nav,
.card,
.stat-card,
.login-card {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 52%) !important;
}

.top-nav {
    background-color: rgba(255, 255, 255, .92) !important;
}

.card,
.stat-card {
    background-color: #fff !important;
}

.login-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 252, 249, .96)) !important;
}

.login-brand h3::after {
    content: '☾';
    display: inline-block;
    margin-left: 8px;
    color: var(--ui-gold);
    font-size: .75em;
    transform: translateY(-2px);
}

.login-brand p::before {
    content: '✦';
    margin-right: 7px;
    color: var(--ui-gold);
}

.sidebar .brand::after,
.login-card::before {
    background: linear-gradient(90deg, transparent, #e2b96d, #2f8a6b, transparent) !important;
}

.btn-login,
.btn-primary,
.btn-primary-custom,
.btn-success {
    background: linear-gradient(110deg, #0c4a38 0%, #17624d 46%, #3b9b77 100%) !important;
    background-size: 180% 100% !important;
}

.btn-login:hover,
.btn-primary:hover,
.btn-primary-custom:hover,
.btn-success:hover {
    background-position: 100% 0 !important;
}

.welcome-card {
    position: relative;
    overflow: hidden;
}

.welcome-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -82px;
    width: 430px;
    height: 210px;
    background: url('../img/ui/mosque-watercolor.png') right bottom / contain no-repeat;
    opacity: .38;
    pointer-events: none;
}

@media (max-width: 768px) {
    body:not(:has(.login-wrapper))::after {
        background-size: 68vw auto;
    }

    body:has(.login-wrapper)::after {
        background-size: 78vw auto;
    }
}

/* Login polish: cleaner hierarchy and stable input alignment. */
.login-wrapper {
    max-width: 420px !important;
    padding: 10px;
}

.login-card {
    padding: 42px 34px 30px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    box-shadow:
        0 30px 80px rgba(0, 24, 17, .28),
        0 8px 26px rgba(200, 155, 82, .08) !important;
}

.login-card::before {
    height: 4px !important;
    border-radius: 26px 26px 0 0;
}

.login-brand {
    margin-bottom: 30px !important;
}

.login-brand h3 {
    font-size: 1.48rem !important;
    letter-spacing: .02em !important;
}

.login-brand p {
    font-size: .78rem !important;
}

.form-group {
    margin-bottom: 18px !important;
}

.form-group label {
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 0 7px !important;
    color: #204238 !important;
    font-size: .76rem !important;
    letter-spacing: .01em;
}

.form-group label i {
    width: 14px;
    color: var(--ui-gold) !important;
    margin-right: 0 !important;
    text-align: center;
}

.form-group .input-group {
    display: flex !important;
    align-items: stretch;
    width: 100%;
    height: 47px;
    min-height: 47px;
    overflow: hidden;
    border: 1px solid #d8e5df !important;
    border-radius: 12px !important;
    background: rgba(248, 252, 250, .92) !important;
    box-shadow: inset 0 1px 2px rgba(24, 50, 41, .025);
}

.form-group .input-group:focus-within {
    border-color: #2b9a77 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(43, 154, 119, .12), 0 5px 16px rgba(23, 98, 77, .06) !important;
}

.form-group .input-group-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    padding: 0 !important;
    color: #90aaa0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .82rem !important;
}

.form-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 45px !important;
    padding: 0 8px 0 0 !important;
    color: #23483b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .84rem !important;
}

.form-group .form-control::placeholder {
    color: #a6bdb4 !important;
    opacity: 1;
}

.form-group .btn-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 45px;
    padding: 0 !important;
    color: #8da69d !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(216, 229, 223, .72) !important;
}

.form-group .btn-toggle:hover,
.form-group .btn-toggle:focus-visible {
    color: var(--ui-brand) !important;
    background: rgba(47, 138, 107, .06) !important;
    outline: none;
}

.form-options {
    margin: 2px 0 21px !important;
    padding: 0 2px;
}

.form-options .form-check-label,
.form-options a {
    font-size: .76rem !important;
}

.form-options a {
    color: #bd8841 !important;
    font-weight: 700 !important;
}

.form-options a:hover {
    color: var(--ui-brand) !important;
}

.form-options .form-check-input {
    width: 15px !important;
    height: 15px !important;
    box-shadow: none !important;
}

.btn-login {
    height: 47px !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
    box-shadow: 0 8px 18px rgba(23, 98, 77, .14);
}

.login-footer {
    margin-top: 22px !important;
    padding-top: 17px !important;
    border-top-color: #e8efeb !important;
}

.login-footer .version {
    padding: 4px 14px !important;
    background: #f5f0e8 !important;
    color: var(--ui-brand) !important;
}

.hadith-slider {
    position: relative;
    min-height: 106px;
    margin: -4px 0 22px;
    padding: 13px 15px 24px;
    overflow: hidden;
    border: 1px solid rgba(200, 155, 82, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(249, 246, 238, .9), rgba(237, 248, 243, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.hadith-slide {
    display: none;
    animation: hadithFadeIn 420ms ease both;
}

.hadith-slide.is-active {
    display: block;
}

.hadith-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a47538;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hadith-kicker i {
    color: var(--ui-gold);
    font-size: .7rem;
}

.hadith-slide p {
    margin: 6px 0 4px;
    color: #35564a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .72rem;
    line-height: 1.48;
}

.hadith-source {
    color: #7d958b;
    font-size: .61rem;
    font-weight: 700;
}

.hadith-dots {
    position: absolute;
    right: 14px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hadith-dots button {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbdad3;
    cursor: pointer;
}

.hadith-dots button.is-active {
    width: 17px;
    background: var(--ui-brand);
}

@keyframes hadithFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .login-wrapper {
        padding: 4px;
    }

    .login-card {
        padding: 34px 22px 25px !important;
    }

    .hadith-slider {
        min-height: 114px;
        padding-left: 13px;
        padding-right: 13px;
    }
}

/* Restore the authenticated application theme: deep green navigation, warm canvas. */
body:not(:has(.login-wrapper)) {
    background:
        radial-gradient(circle at 8% 14%, rgba(47, 138, 107, .08), transparent 22rem),
        radial-gradient(circle at 96% 88%, rgba(200, 155, 82, .08), transparent 26rem),
        #f0ebe3 !important;
    color: #1a2a24 !important;
}

body:not(:has(.login-wrapper)) .sidebar {
    background:
        radial-gradient(circle at 12% 0%, rgba(47, 138, 107, .24), transparent 20rem),
        linear-gradient(180deg, #0a1f16 0%, #0d2b1e 42%, #1a4a3a 100%) !important;
    background-color: #0d2b1e !important;
    box-shadow: 4px 0 30px rgba(13, 43, 30, .3) !important;
}

body:not(:has(.login-wrapper)) .sidebar .brand,
body:not(:has(.login-wrapper)) .sidebar .user-profile {
    border-color: rgba(200, 168, 110, .14) !important;
}

body:not(:has(.login-wrapper)) .main-content {
    background: transparent !important;
}

body:not(:has(.login-wrapper)) .top-nav {
    background: #fff !important;
    background-image: none !important;
}

body:not(:has(.login-wrapper)) .card,
body:not(:has(.login-wrapper)) .stat-card {
    background: #fff !important;
    background-image: none !important;
}

body:not(:has(.login-wrapper)) .card-header {
    background: #fff !important;
}

/* Dashboard hero keeps its dark identity so light metadata remains readable. */
body:not(:has(.login-wrapper)) .dashboard-hero {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    background:
        radial-gradient(circle at 88% 18%, rgba(200, 168, 110, .18), transparent 14rem),
        linear-gradient(135deg, #0d2b1e 0%, #1a4a3a 58%, #2d6b53 100%) !important;
    box-shadow: 0 14px 32px rgba(13, 43, 30, .18) !important;
}

body:not(:has(.login-wrapper)) .dashboard-hero::after {
    content: '';
    position: absolute;
    right: -28px;
    bottom: -52px;
    width: 280px;
    height: 150px;
    background: url('../img/ui/mosque-watercolor.png') right bottom / contain no-repeat;
    opacity: .10;
    pointer-events: none;
}

body:not(:has(.login-wrapper)) .dashboard-hero .card-body {
    position: relative;
    z-index: 1;
}

body:not(:has(.login-wrapper)) .dashboard-hero h3,
body:not(:has(.login-wrapper)) .dashboard-hero p,
body:not(:has(.login-wrapper)) .dashboard-hero span,
body:not(:has(.login-wrapper)) .dashboard-hero div {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Compact dashboard spacing without changing forms on other routes. */
body:not(:has(.login-wrapper)) .main-content:has(.dashboard-page) {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

body:not(:has(.login-wrapper)) .main-content:has(.dashboard-page) .top-nav {
    min-height: 54px;
    margin-bottom: 18px !important;
    padding: 9px 15px !important;
    position: relative;
    z-index: 1100;
}

body:not(:has(.login-wrapper)) .top-nav .dropdown-menu {
    z-index: 1200 !important;
}

body:not(:has(.login-wrapper)) .dashboard-hero {
    z-index: 1;
}

body:not(:has(.login-wrapper)) .dashboard-page > .row {
    --bs-gutter-y: .65rem;
    margin-bottom: .72rem !important;
}

body:not(:has(.login-wrapper)) .dashboard-page .card-body {
    padding: 14px 17px 12px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page .card {
    margin-bottom: 0 !important;
}

body:not(:has(.login-wrapper)) .dashboard-page .dashboard-hero .card-body {
    padding: 17px 20px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page .card-header {
    padding: 12px 16px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page .table td,
body:not(:has(.login-wrapper)) .dashboard-page .table th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-lower-row {
    --bs-gutter-y: 0 !important;
    margin-top: 0 !important;
    margin-bottom: .14rem !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-lower-row .card {
    margin-bottom: 0 !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-lower-row > [class*="col-"] {
    margin-bottom: 0 !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-lower-row .card-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-lower-row .card-body {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-actions-row {
    --bs-gutter-y: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body:not(:has(.login-wrapper)) .dashboard-page > .dashboard-actions-row .card {
    margin-bottom: 0 !important;
}

body:not(:has(.login-wrapper)) .footer {
    color: #8b9b93 !important;
}

/* Keep the authenticated backdrop calm: a contained watermark instead of a full-page overlay. */
body:not(:has(.login-wrapper))::after {
    display: none !important;
}

/* Compact sidebar navigation. */
body:not(:has(.login-wrapper)) .sidebar .nav {
    padding: 5px 7px 16px !important;
}

body:not(:has(.login-wrapper)) .sidebar .nav-label {
    padding: 9px 12px 4px !important;
    font-size: .52rem !important;
}

body:not(:has(.login-wrapper)) .sidebar .nav-link,
body:not(:has(.login-wrapper)) .sidebar .select-style-menu .select-header {
    min-height: 34px !important;
    margin: 1px 3px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    gap: 9px !important;
    font-size: .73rem !important;
}

body:not(:has(.login-wrapper)) .sidebar .nav-link i,
body:not(:has(.login-wrapper)) .sidebar .select-style-menu .select-header i {
    width: 17px;
    font-size: .78rem;
}

body:not(:has(.login-wrapper)) .sidebar .select-style-menu {
    margin: 1px 3px !important;
}

body:not(:has(.login-wrapper)) .sidebar .select-style-menu .select-options .nav-link {
    min-height: 30px !important;
    padding: 6px 10px 6px 19px !important;
    font-size: .69rem !important;
}

body:not(:has(.login-wrapper)) .sidebar .nav-divider {
    margin: 7px 12px !important;
}

/* A little more editorial polish for the content surface. */
body:not(:has(.login-wrapper)) .main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

body:not(:has(.login-wrapper)) .main-content > .footer {
    width: 100%;
    margin-top: auto !important;
    margin-bottom: 0;
    padding: 15px 0 3px !important;
    background: transparent !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

/* Keep the bottom edge visually continuous with the content canvas. */
html {
    background: #f0ebe3 !important;
}

html:has(.login-wrapper) {
    background: #061f17 !important;
}

body:not(:has(.login-wrapper)),
body:not(:has(.login-wrapper)) .main-content {
    background-color: #f0ebe3 !important;
}

body:not(:has(.login-wrapper)) .main-content > .footer p {
    color: #87978f !important;
}

body:not(:has(.login-wrapper)) .top-nav {
    border-color: rgba(200, 168, 110, .12) !important;
    box-shadow: 0 8px 24px rgba(13, 43, 30, .07) !important;
}

body:not(:has(.login-wrapper)) .card,
body:not(:has(.login-wrapper)) .stat-card {
    box-shadow: 0 8px 24px rgba(13, 43, 30, .065) !important;
}