/* ==========================================================================
   v5.1.0 Refactor: Global Canvas Overrides, Isolated Fixed Elements, & True Dark Mode
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL CANVAS RESETS & THEME PAGE TITLE STRIPPING
   -------------------------------------------------------------------------- */

/* Target common native WordPress theme page title layouts and hide completely */
.page-title, 
h1.entry-title, 
header.entry-header,
.coslife-app-dashboard-canvas .entry-title,
.coslife-app-dashboard-canvas .page-header,
.coslife-true-dark-canvas .entry-title,
.coslife-true-dark-canvas .page-header {
    display: none !important;
}

/* Strip native theme margins, paddings, and bounds on our dedicated app screens */
.coslife-app-dashboard-canvas,
.coslife-app-dashboard-canvas body,
.coslife-app-dashboard-canvas #page,
.coslife-app-dashboard-canvas #content,
.coslife-true-dark-canvas,
.coslife-true-dark-canvas body,
.coslife-true-dark-canvas #page,
.coslife-true-dark-canvas #content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force specific theme content containers to render full bleed */
.coslife-app-dashboard-canvas .site-content,
.coslife-app-dashboard-canvas .entry-content,
.coslife-true-dark-canvas .site-content,
.coslife-true-dark-canvas .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Hide theme header/footer layout infrastructure exclusively on our pages */
.coslife-app-dashboard-canvas header:not(.app-topbar-wrapper), 
.coslife-app-dashboard-canvas footer,
.coslife-true-dark-canvas header, 
.coslife-true-dark-canvas footer {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. TRUE FULL-SCREEN RECRUITMENT DARK MODE CANVAS
   -------------------------------------------------------------------------- */
.coslife-true-dark-canvas,
.coslife-true-dark-canvas body {
    background-color: #0b1329 !important;
}

/* --------------------------------------------------------------------------
   3. APP VIEWPORT STRUCTURAL SHELL DESIGN
   -------------------------------------------------------------------------- */
body, html { 
    margin: 0; 
    padding: 0; 
    background: #f1f5f9; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    min-height: 100%;
}

.app-wrapper { 
    display: flex; 
    width: 100%; 
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

/* FIXED SIDEBAR ENGINE: Locked in place, scrolling independently if items overflow */
.app-sidebar { 
    width: 250px; 
    background: #0f172a; 
    color: #cbd5e1; 
    display: flex; 
    flex-direction: column; 
    border-right: 1px solid #1e293b; 
    flex-shrink: 0; 
    position: fixed;
	padding-top: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ADJUSTED FLEX CANVAS BODY: Offset left margins precisely matching fixed sidebar width */
.app-body { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: #f8fafc; 
    min-width: 0; 
    margin-left: 250px; /* Locks main body space to prevent overlap underneath sidebar */
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   4. APPARATUS TOP NAVBAR & INTERACTION ELEMENTS PADDING TUNING
   -------------------------------------------------------------------------- */
.app-topbar { 
    height: 65px; 
    background: #fff; 
    border-bottom: 1px solid #e2e8f0; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 30px; 
    flex-shrink: 0; 
    box-sizing: border-box;
}

/* ADJUSTABLE MARGIN TUNER BELOW NAVBAR: Tightened up layout gap to prevent whitespace leakage */
.navbar, 
header.site-header {
    margin-bottom: 0px !important;
}

/* Main inner display workspace scroll panel layer */
.app-main-scroller { 
    flex: 1; 
    padding: 20px 30px 30px 30px; /* Reduced top layout padding to pull content closer to navbar */
    box-sizing: border-box; 
}

/* --------------------------------------------------------------------------
   5. DECOUPLED COMPONENT RENDERING CARDS
   -------------------------------------------------------------------------- */
.app-branding { 
    padding: 24px; 
    background: #020617; 
    text-align: center; 
    border-bottom: 1px solid #1e293b; 
}

.app-branding img { 
    max-width: 110px; 
    height: auto; 
}

.app-topbar h3 { 
    margin: 0; 
    color: #1e293b; 
    font-size: 18px; 
    font-weight: 600; 
}

.user-badge { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    font-size: 14px; 
    color: #64748b; 
}

.logout-btn { 
    padding: 6px 12px; 
    background: #ef4444; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: 600; 
}

.logout-btn:hover { 
    background: #dc2626; 
}

.app-card { 
    background: #fff; 
    border: 1px solid #e2e8f0; 
    padding: 24px; 
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.02); 
    margin-bottom: 20px; 
}

.app-card h2 { 
    margin-top: 0; 
    color: #0f172a; 
    font-size: 20px; 
    margin-bottom: 10px; 
}

.app-card p { 
    color: #475569; 
    font-size: 14px; 
    line-height: 1.6; 
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE COMPACT LAYOUT FALLBACK INTERFACE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }
    .app-body {
        margin-left: 0;
    }
    .app-wrapper { 
        flex-direction: column; 
    }
    .app-main-scroller { 
        padding: 15px; 
    }
}