/* ============================================ */
/* DASHBOARD - GLOBAL LAYOUT                    */
/* ============================================ */

/* Page Container */
.dashboard-page-container {
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-color: #FAFAFA;
}

/* Grid Layout */
.dashboard-page-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 4rem !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================ */
/* DASHBOARD - SIDEBAR (3 COLUMNS)              */
/* ============================================ */

.dashboard-sidebar {
    grid-column: span 3 !important;
    background-color: var(--antologa-white);
    border-right: 1px solid #E8E8E8;
    height: 100vh;
    overflow-y: auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}

.mobile-dashboard-topbar {
    display: none;
}

/* ============================================ */
/* DASHBOARD - CONTENT (9 COLUMNS)              */
/* ============================================ */

.dashboard-content {
    grid-column: span 9 !important;
    background-color: #FAFAFA;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dashboard-content-wrapper {
    padding: 2.5rem 3rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

/* ============================================ */
/* DASHBOARD - PROFILE SECTION                  */
/* ============================================ */

.dashboard-sidebar-profile-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #E8E8E8;
}

.dashboard-profile-avatar {
    width: 128px !important;
    height: 128px !important;
    background: linear-gradient(135deg, var(--antologa-white) 0%, var(--antologa-primary) 100%);
    font-size: 4rem !important;
    font-weight: 700 !important;
    color: white !important;
}

.dashboard-sidebar-name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #282828 !important;
    margin-bottom: 0.5rem !important;
    text-align: center;
}

.dashboard-sidebar-profile-section .mud-chip {
    font-size: 0.7rem !important;
    height: 22px !important;
    background-color: #EF5350 !important;
    color: white !important;
}

/* Divider */
.dashboard-divider {
    margin-top: 0.5rem;
    border-color: var(--antologa-light-gray) !important;
}

/* ============================================ */
/* DASHBOARD - NAVIGATION                       */
/* ============================================ */

.dashboard-sidebar-nav {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Navigation Button (Overview and all tab buttons) */
.dashboard-nav-btn {
    height: auto !important;
    min-height: 3rem !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    transition: all 0.2s ease !important;
    margin-bottom: 0.25rem !important;
    background-color: transparent !important;
}

    .dashboard-nav-btn:hover {
        background-color: var(--antologa-light-gray) !important;
    }

    .dashboard-nav-btn.selected {
        background-color: var(--antologa-primary) !important;
        color: white !important;
    }

.dashboard-nav-btn-text {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.075rem !important;
    text-transform: none !important;
    color: #6B7280 !important;
}

.dashboard-nav-btn.selected .dashboard-nav-btn-text {
    color: white !important;
    font-weight: 500 !important;
}

.dashboard-nav-btn .mud-icon-root {
    font-size: 1.5rem !important;
    color: var(--antologa-primary) !important;
    margin-left: 0.25rem;
}

.dashboard-nav-btn.selected .mud-icon-root {
    color: white !important;
}

/* ============================================ */
/* DASHBOARD - EXPANSION PANELS                 */
/* ============================================ */

.dashboard-nav-panels {
    flex: 1;
    width: 100%;
    margin-top: 0.5rem;
    height: 100vh;
}

    .dashboard-nav-panels .mud-expansion-panels {
        background: transparent !important;
        box-shadow: none !important;
    }

.dashboard-panel {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    width: 100% !important;
    margin-bottom: 0.5rem;
}

    .dashboard-panel::before {
        display: none !important;
    }

    .dashboard-panel .mud-expand-panel-header {
        min-height: 3rem !important;
        padding: 0.6rem 0.75rem !important;
        border-radius: 0.5rem !important;
        transition: all 0.4s ease !important;
        background: transparent !important;
    }

        .dashboard-panel .mud-expand-panel-header:hover {
            background: #F5F5F5 !important;
        }

    .dashboard-panel.mud-panel-expanded .mud-expand-panel-header {
        background: transparent !important;
    }

.dashboard-panel-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Inter', sans-serif !important;
}

.dashboard-section-icon {
    font-size: 1.5rem !important;
    color: var(--antologa-primary) !important;
}

.dashboard-panel .mud-expand-panel-icon {
    font-size: 1rem !important;
    color: #9E9E9E !important;
    transition: transform 0.3s ease !important;
}

.dashboard-panel.mud-panel-expanded .mud-expand-panel-icon {
    color: #078282 !important;
}

.dashboard-panel .mud-expand-panel-content {
    padding: 0.25rem 0 0.5rem 0 !important;
}

/* ============================================ */
/* DASHBOARD - BUTTON CONTENT                   */
/* ============================================ */

.dashboard-btn-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
}

.dashboard-btn-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: #6B7280 !important;
    font-weight: 500 !important;
    flex: 1 !important;
    text-align: left !important;
}

.dashboard-nav-btn.selected .dashboard-btn-text {
    color: white !important;
    font-weight: 500 !important;
}

.dashboard-badge-count {
    font-size: 0.7rem !important;
    height: 18px !important;
    padding: 0 0.4rem !important;
    font-weight: 600 !important;
    min-width: 18px !important;
    background-color: var(--antologa-primary) !important;
    color: var(--antologa-white) !important;
}

.dashboard-nav-btn.selected .dashboard-badge-count {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

/* ============================================ */
/* DASHBOARD - LOGOUT BUTTON                    */
/* ============================================ */

.dashboard-logout-btn {
    margin-top: auto !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 36px !important;
}

    .dashboard-logout-btn:hover {
        background-color: #FEE2E2 !important;
    }

    .dashboard-logout-btn .mud-icon-root {
        font-size: 1.25rem !important;
        color: #6B7280 !important;
    }

.dashboard-logout-btn-text {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    color: #6B7280 !important;
    margin-left: 0.5rem;
}

/* ============================================ */
/* DASHBOARD - CONTENT STYLING                  */
/* ============================================ */

.dashboard-section-header {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    color: #078282 !important;
    margin-bottom: 0.5rem !important;
}

/* Section Header with Margin Top */
.dashboard-section-header-spaced {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    color: #078282 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 32px !important;
}

/* Subtitle with Margin Bottom */
.dashboard-subtitle {
    margin-bottom: 24px;
}

.dashboard-stat-card {
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: #FFFFFF;
    border: 1px solid #E8E8E8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard-stat-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #9E9E9E !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif !important;
}

.dashboard-stat-value-primary {
    color: var(--antologa-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2;
}

.dashboard-stat-value-secondary {
    color: var(--antologa-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2;
}

.dashboard-stat-value-contrast {
    color: var(--antologa-contrast) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2;
}

.dashboard-stat-value-warning {
    color: #FF9800 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2;
}

.dashboard-stat-caption {
    font-size: 0.8rem;
    color: #9E9E9E;
    font-family: 'Inter', sans-serif !important;
    margin-top: 0.25rem;
}

.dashboard-stat-growth-positive {
    color: #10B981 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ============================================ */
/* DASHBOARD - CONTENT MANAGEMENT SYSTEM        */
/* ============================================ */

/* CMS Action Buttons Container */
.dashboard-cms-actions {
    margin-bottom: 24px;
}

/* Blog Card Media Gradient */
.dashboard-blog-card-media {
    background: linear-gradient(135deg, #078282 0%, #E1A951 100%);
}

/* Blog Card Media Inner Container */
.dashboard-blog-card-media-inner {
    padding: 16px;
}

/* Blog Card Excerpt */
.dashboard-blog-excerpt {
    margin-top: 8px;
}

/* Blog Card Meta Divider */
.dashboard-blog-meta-divider {
    margin: 12px 0;
}

/* Rich Text Editor Container */
.dashboard-editor-container {
    min-height: 300px;
    border: 1px solid #e8e8e8;
}

/* Editor Label */
.dashboard-editor-label {
    margin-bottom: 16px;
}

/* Editor TextField */
.dashboard-editor-textfield {
    margin-top: 16px;
}

/* ============================================ */
/* DASHBOARD - FINANCIAL MANAGEMENT             */
/* ============================================ */

/* Financial Card Divider */
.dashboard-financial-divider {
    margin: 16px 0;
}

/* ============================================ */
/* DASHBOARD - CHART PLACEHOLDERS               */
/* ============================================ */

.dashboard-stat-card.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.chart-container {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================ */
/* DASHBOARD - SOCIAL MEDIA CARDS               */
/* ============================================ */

/* Social Media Divider */
.dashboard-social-divider {
    margin: 8px 0;
}

/* ============================================ */
/* DASHBOARD - SUBSCRIPTIONS                    */
/* ============================================ */

/* Subscription Card Divider */
.dashboard-subscription-divider {
    margin: 8px 0;
}

/* ============================================ */
/* DASHBOARD - TABLE STYLING                    */
/* ============================================ */

.mud-table {
    background-color: #FFFFFF !important;
    border-radius: 1rem !important;
    border: 1px solid #E8E8E8 !important;
}

.mud-table-head {
    background-color: #FAFAFA !important;
}

.mud-table-cell {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    color: #282828 !important;
}


/* ========================================
   MOBILE TOP BAR
   ======================================== */

.mobile-dashboard-topbar {
    background-color: var(--antologa-white) !important;
    color: var(--antologa-primary) !important;
    display: none !important;
    position: absolute !important;
    justify-content: center;
    height: 5rem;
    width: 100vw;
}

    .mobile-dashboard-topbar .mud-toolbar-gutters {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile-dashboard-topbar .mud-icon-button:first-child {
        margin-left: 0.5rem !important;
    }

    .mobile-dashboard-topbar .mud-icon-button:last-child {
        margin-right: 0.5rem !important;
    }

.mobile-dashboard-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Mobile Menu Drawer */
.mobile-menu-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    display: none;
}

    .mobile-menu-drawer .mud-drawer-content {
        width: 100% !important;
        max-width: 100vw !important;
    }

.mobile-menu-header {
    padding: 2rem 1rem !important;
    background: #FFF;
    align-items: center;
    justify-content: center;
}

    .mobile-menu-header .dashboard-profile-avatar {
        background: linear-gradient(135deg, var(--antologa-white) 0%, var(--antologa-primary) 100%);
    }

    .mobile-menu-header .dashboard-sidebar-name {
        color: var(--antologa-dark) !important;
    }

    .mobile-menu-header .mud-chip {
        background-color: #EF5350 !important;
        color: var(--antologa-white) !important;
    }

.mobile-nav-menu {
    padding: 1rem;
}

.mobile-logout-link {
    color: #EF5350 !important;
}

.mud-nav-link-active {
    background-color: var(--antologa-light-gray) !important;
    color: var(--antologa-primary) !important;
    font-weight: 600 !important;
}

/* Mobile Nav Menu Styling */
.mobile-nav-menu .mud-nav-link {
    height: auto !important;
    min-height: 3rem !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    margin-bottom: 0.25rem !important;
    background-color: transparent !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
}

    .mobile-nav-menu .mud-nav-link:hover {
        background-color: var(--antologa-light-gray) !important;
    }

    .mobile-nav-menu .mud-nav-link.mud-nav-link-active {
        background-color: var(--antologa-primary) !important;
        color: white !important;
    }

    .mobile-nav-menu .mud-nav-link .mud-icon-root {
        font-size: 1.5rem !important;
        color: var(--antologa-primary) !important;
    }

    .mobile-nav-menu .mud-nav-link.mud-nav-link-active .mud-icon-root {
        color: white !important;
    }

/* Mobile Nav Group Styling */
.mobile-nav-menu .mud-nav-group .mud-nav-group-header {
    min-height: 3rem !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075rem !important;
    font-family: 'Inter', sans-serif !important;
}

    .mobile-nav-menu .mud-nav-group .mud-nav-group-header:hover {
        background: #F5F5F5 !important;
    }

    .mobile-nav-menu .mud-nav-group .mud-nav-group-header .mud-icon-root {
        font-size: 1.5rem !important;
        color: var(--antologa-primary) !important;
    }

.mobile-nav-menu .mud-nav-group .mud-nav-group-content {
    padding: 0.25rem 0 0.5rem 0 !important;
}

/* ============================================ */
/* DASHBOARD - RESPONSIVE                       */
/* ============================================ */

@media (max-width: 1279px) {
    .dashboard-content-wrapper {
        padding: 2rem 2rem;
        margin-top: 5rem;
    }

    .dashboard-sidebar {
        display: none;
    }

    .mobile-dashboard-topbar {
        display: flex !important;
    }

    .mobile-menu-drawer {
        display: flex !important;
    }
    
    .dashboard-content {
        width: 100vw !important;
    }
}

@media (max-width: 960px) {
    .dashboard-page-grid {
        grid-template-columns: repeat(12, 1fr) !important;
    }

    .dashboard-content {
        grid-column: span 12 !important;
    }

    .mobile-dashboard-topbar {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .dashboard-page-grid {
        display: flex !important;
        flex-direction: column;
    }

    .dashboard-content {
        width: 100%;
        height: auto;
    }

    .dashboard-content-wrapper {
        padding: 1.5rem;
    }
}

/* ============================================ */
/* DASHBOARD - UTILITIES                        */
/* ============================================ */

.text-upper {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-inter {
    font-family: 'Inter', sans-serif !important;
}

.text-nunito {
    font-family: 'Nunito', sans-serif !important;
}


/* Ensure the mobile container allows for scrolling and fills the drawer correctly */
.mobile-nav-menu .dashboard-nav-panels {
    height: auto !important; /* Override the desktop 100vh */
    flex: none !important;
}

/* Fix for buttons inside Expansion Panels to ensure they take full width */
.mobile-nav-menu .mud-button-content {
    width: 100%;
}

/* Force the expansion panel header to look like the desktop version in mobile */
.mobile-nav-menu .mud-expand-panel-header {
    background: transparent !important;
    padding: 0.6rem 0.75rem !important;
}

/* Fix the active state for MudButtons to use your primary color variable */
.mobile-nav-menu .dashboard-nav-btn.selected {
    background-color: var(--antologa-primary) !important;
}

/* Ensure icons in mobile buttons align with desktop sizing */
.mobile-nav-menu .dashboard-nav-btn .mud-button-start-icon {
    font-size: 1.5rem !important;
    margin-right: 12px;
}