/* ==========================================================================
   AUTHENTICATED THEME (Clean & Simple)
   Background: #F5EFE1 (Pearl Canvas)
   Translucent Effects: Sidebar, Header, Cards
   Scoped to: body.app-authenticated (all post-login pages)
   Excludes: Landing page, Login/Registration screens
   ========================================================================== */

:root {
    --theme-garnet: #790D16;
    --theme-garnet-hover: #5d0910;
    --theme-slate: #64748b;
    --theme-border: rgba(0, 0, 0, 0.08);
    --theme-card-bg: rgba(255, 255, 255, 0.75);
    --theme-sidebar-bg: rgba(255, 255, 255, 0.70);
    --theme-header-bg: rgba(255, 255, 255, 0.85);
}

/* 1. Base Resolution & Body */
html {
    font-size: 14px !important;
}

body.app-authenticated {
    background: #F5EFE1 !important;
    color: #1e293b !important;
}

/* 2. Site Header & Dropdown (Z-Index Fixed Above Content/Cards) */
body.app-authenticated header.site-header,
header.site-header {
    background: var(--theme-header-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 1050 !important;
    position: relative !important;
}

body.app-authenticated header.site-header .dropdown-menu,
header.site-header .dropdown-menu {
    z-index: 1060 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

body.app-authenticated .header-brand-title {
    color: var(--theme-garnet) !important;
    font-weight: 700 !important;
}

body.app-authenticated #userMenuDropdown .rounded-circle {
    background: var(--theme-garnet) !important;
    color: #ffffff !important;
}

/* 3. Sidebar (Translucent Effect) */
body.app-authenticated aside.site-sidebar,
body.app-authenticated .glass-offcanvas {
    background: var(--theme-sidebar-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-right: 1px solid var(--theme-border) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;
}

body.app-authenticated .sidebar-nav-link {
    color: #334155 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

body.app-authenticated .sidebar-nav-link:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--theme-garnet) !important;
}

body.app-authenticated .sidebar-nav-link.active {
    background: var(--theme-garnet) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(121, 13, 22, 0.25) !important;
}

body.app-authenticated .sidebar-nav-link.active svg {
    color: #ffffff !important;
}

body.app-authenticated .sidebar-subnav-link {
    color: #64748b !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

body.app-authenticated .sidebar-subnav-link:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--theme-garnet) !important;
}

body.app-authenticated .sidebar-subnav-link.active {
    background: rgba(121, 13, 22, 0.08) !important;
    color: var(--theme-garnet) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--theme-garnet) !important;
}

/* 4. Cards & Panels (Translucent Effect) */
body.app-authenticated .card,
body.app-authenticated .glass-card:not(.login-wrapper .glass-card),
body.app-authenticated .stat-card,
body.app-authenticated .dashboard-metric-card,
.kpi-card,
.chart-card,
.table-container-card {
    background: var(--theme-card-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body.app-authenticated .card-header {
    background: rgba(255, 255, 255, 0.5) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

body.app-authenticated .card-footer {
    background: rgba(255, 255, 255, 0.4) !important;
    border-top: 1px solid var(--theme-border) !important;
}

/* Card Hover Elevation */
body.app-authenticated .card:hover,
body.app-authenticated .stat-card:hover,
body.app-authenticated .dashboard-metric-card:hover,
.kpi-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.90) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

/* 5. Buttons (Functional & Intent-aligned) */
body.app-authenticated .btn-primary {
    background: var(--theme-garnet) !important;
    border-color: var(--theme-garnet) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

body.app-authenticated .btn-primary:hover,
body.app-authenticated .btn-primary:focus {
    background: var(--theme-garnet-hover) !important;
    border-color: var(--theme-garnet-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(121, 13, 22, 0.25) !important;
}

body.app-authenticated .btn-outline-primary {
    color: var(--theme-garnet) !important;
    border-color: var(--theme-garnet) !important;
}

body.app-authenticated .btn-outline-primary:hover {
    background: var(--theme-garnet) !important;
    color: #ffffff !important;
}

/* 6. Tables & Lists */
body.app-authenticated table.table thead th {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--theme-border) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

body.app-authenticated table.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

body.app-authenticated table.table td {
    border-color: var(--theme-border) !important;
    vertical-align: middle;
}

body.app-authenticated .page-item.active .page-link {
    background-color: var(--theme-garnet) !important;
    border-color: var(--theme-garnet) !important;
    color: #ffffff !important;
}

body.app-authenticated .page-link {
    color: var(--theme-garnet) !important;
    border-color: var(--theme-border) !important;
}

/* 7. Forms & Inputs */
body.app-authenticated .form-control:focus,
body.app-authenticated .form-select:focus {
    border-color: var(--theme-garnet) !important;
    box-shadow: 0 0 0 0.2rem rgba(121, 13, 22, 0.15) !important;
}

body.app-authenticated .form-check-input:checked {
    background-color: var(--theme-garnet) !important;
    border-color: var(--theme-garnet) !important;
}

/* 8. Specific Hero Banner & Accents */
body.app-authenticated .mitra-hero-banner,
body.app-authenticated .card[style*="linear-gradient(135deg, #4d1822"] {
    background: linear-gradient(135deg, #790D16 0%, #5d0910 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* 9. Footer */
body.app-authenticated footer.site-footer {
    background: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--theme-border) !important;
}