/* Header/footer chrome — loaded after app.css
   Goals: 1 scrollbar (RIGHT) · footer flush · no empty band under footer */

/* Scrollbar on the RIGHT (html=ltr); content stays RTL on body */
html {
    direction: ltr !important;
    overflow-x: clip !important;
    overflow-y: scroll !important; /* single document scrollbar */
    background: var(--bg-primary, #0f172a);
}

body {
    direction: rtl !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important; /* NEVER a second page scrollbar */
    background-color: var(--bg-secondary);
}

body > header.modern-header {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    align-self: stretch;
}

/* Content-sized only — do NOT flex-grow (that inflated main to ~1300px+) */
body > main[role="main"],
body > main.site-main {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box;
}

/* Push footer to bottom when page is short — WITHOUT growing main */
body > footer.site-footer.modern-footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    background: var(--bg-primary);
    border-bottom: none !important;
    /* Paint footer color below the element — kills the empty band under copyright */
    box-shadow: 0 100vh 0 100vh var(--bg-primary);
}

body > footer.site-footer .footer-container {
    padding-top: 2.25rem !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 0 !important;
}

body > footer.site-footer .site-footer__badges {
    margin-bottom: 0.75rem;
}

body > footer.site-footer .footer-bottom {
    margin: 0 !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0 !important;
}

/* Fixed UI must not affect document flow / flex height */
body > .feature-overlay,
body > .advisor-widget,
body > .bk-modal,
body > .cs-modal {
    position: fixed !important;
    flex: none !important;
    margin: 0 !important;
}

/* Books / Courses: main grows (footer must NOT also use margin-top:auto) */
body:has(.books-app) > main.site-main,
body:has(.courses-app) > main.site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.books-app) > footer.site-footer.modern-footer,
body:has(.courses-app) > footer.site-footer.modern-footer {
    margin-top: 0 !important;
}

body > main .books-app,
body > main .courses-app {
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
}

[data-theme="dark"] header.modern-header .nav-item,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn {
    color: var(--dark-text-secondary, #cbd5e1);
}

[data-theme="dark"] header.modern-header .nav-item i,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn i {
    color: inherit;
}

[data-theme="dark"] header.modern-header .nav-item.active,
[data-theme="dark"] header.modern-header .nav-item:hover,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn.active,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn:hover {
    color: #f8fafc;
    background: rgba(6, 182, 212, 0.18);
    border-color: rgba(34, 211, 238, 0.45);
}

[data-theme="dark"] header.modern-header .nav-item.active i,
[data-theme="dark"] header.modern-header .nav-item:hover i,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn.active i,
[data-theme="dark"] header.modern-header .calendar-dropdown-btn:hover i {
    color: #f8fafc;
}