/* ================================================================
   KALAMLOK - COMPLETE RESPONSIVE SYSTEM
   Covers: Desktop (1200px+), Tablet (768-1199px), Mobile (<768px)
   Roles: Admin Dashboard, Moderator Dashboard, User Dashboard, Frontend
   ================================================================ */

/* ---------------------------------------------------------------
   1. GLOBAL BASE
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
}

input, textarea, select, button {
    box-sizing: border-box;
    max-width: 100%;
    font-family: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ---------------------------------------------------------------
   2. CONTAINER & LAYOUT
--------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 768px) {
    .container { padding: 0 1rem; }
}
@media (max-width: 480px) {
    .container { padding: 0 0.75rem; }
}

/* ---------------------------------------------------------------
   3. HEADER & NAVIGATION — DESKTOP
--------------------------------------------------------------- */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(15px);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo img { height: 40px; width: auto; object-fit: contain; }

/* Desktop nav links */
.nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.8rem;
    list-style: none;
    overflow: hidden;
}

.nav-links a {
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: 0.2s;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   4. HEADER & NAVIGATION — TABLET (768px - 1024px)
--------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav-links { gap: 0.4rem; }
    .nav-links a { font-size: 0.65rem; padding: 0.3rem 0.4rem; }
    .logo img { height: 34px; }
    .admin-pill .admin-text .title { font-size: 0.55rem; }
}

/* ---------------------------------------------------------------
   5. HEADER & NAVIGATION — MOBILE (<768px)
--------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hide desktop elements */
    .desktop-only { display: none !important; }
    .nav-links.desktop-only { display: none !important; }

    /* Show mobile toggle */
    #mobile-toggle { display: flex !important; }

    /* Full-screen mobile menu */
    #main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100dvh;
        background: #08080c;
        z-index: 2000;
        transition: right 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        scrollbar-width: none;
    }
    #main-nav::-webkit-scrollbar { display: none; }
    #main-nav.active { right: 0; }

    .mobile-nav-content { display: flex !important; flex-direction: column; min-height: 100%; }

    /* Overlay */
    #nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.65);
        z-index: 999;
        backdrop-filter: blur(3px);
    }
    #nav-overlay.active { display: block; }

    /* Mobile menu header */
    .mobile-header-top {
        padding: 1.4rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #111;
        flex-shrink: 0;
    }

    .mobile-top-icons {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    .mobile-top-icons i {
        font-size: 1.2rem;
        cursor: pointer;
        color: #9ca3af;
        transition: 0.2s;
    }
    .mobile-top-icons i:hover { color: white; }

    /* User card in mobile menu */
    .mobile-user-card {
        padding: 3rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mobile-user-avatar {
        width: 90px;
        height: 90px;
        border-radius: 28px;
        border: 2px solid rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        font-weight: 950;
        color: white;
        overflow: hidden;
        margin-bottom: 1.2rem;
    }
    .mobile-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .mobile-user-info h4 {
        font-size: 1.3rem;
        font-weight: 900;
        letter-spacing: -0.5px;
        color: white;
        margin-bottom: 0.5rem;
    }

    .mobile-user-actions {
        display: flex;
        gap: 0.8rem;
        margin-top: 1.5rem;
        width: 100%;
        flex-wrap: wrap;
    }
    .mobile-user-actions a {
        flex: 1;
        min-width: 120px;
        padding: 0.9rem 1rem;
        border-radius: 14px;
        font-size: 0.7rem;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.05);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .m-btn-signout { color: #f43f5e !important; border-color: rgba(244,63,94,0.2) !important; }

    /* Mobile nav list */
    .mobile-list { list-style: none; padding: 0 1rem; flex: 1; }
    .m-link-main {
        display: block;
        padding: 1.3rem 0.5rem;
        font-size: 1.1rem;
        font-weight: 900;
        color: #f3f4f6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #111;
    }
    .m-link-item {
        padding: 1.3rem 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.1rem;
        font-weight: 900;
        color: #f3f4f6;
        border-bottom: 1px solid #111;
        cursor: pointer;
    }
    .m-sub-list {
        list-style: none;
        background: #0a0a0f;
        padding: 0.5rem 0;
        display: none;
        border-radius: 12px;
        margin: 0.5rem 0;
    }
    .m-sub-list a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 800;
        color: #9ca3af;
    }
    .m-sub-list a:hover { color: white; }
    .m-link-item.open .m-sub-list { display: block; }
}

/* ---------------------------------------------------------------
   6. HOME PAGE — DESKTOP
--------------------------------------------------------------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.hero-slogan {
    font-size: 3.5rem;
    font-weight: 950;
    line-height: 1.05;
}

/* ---------------------------------------------------------------
   7. HOME PAGE — TABLET
--------------------------------------------------------------- */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-slogan { font-size: 2.5rem; }
}

/* ---------------------------------------------------------------
   8. HOME PAGE — MOBILE
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    .hero-slogan { font-size: 1.8rem !important; text-align: center; }

    /* Main layout flex → column */
    main.container > div[style*="display: flex; gap"] { flex-direction: column !important; gap: 1.5rem !important; }
    main.container aside[style*="width"] { width: 100% !important; }

    /* Breaking ticker */
    .breaking-ticker { flex-direction: row; overflow: hidden; }

    /* Inline grid overrides */
    div[style*="grid-template-columns: repeat(2, 1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 2fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Article flex rows */
    article[style*="display: flex"] { flex-direction: column !important; }
    article[style*="width:"] { width: 100% !important; }

    .hero { padding: 2rem 0 !important; }
}

@media (max-width: 480px) {
    .hero-slogan { font-size: 1.4rem !important; }
}

/* ---------------------------------------------------------------
   9. POST PAGE
--------------------------------------------------------------- */
.post-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .post-layout-grid { grid-template-columns: 1fr 280px; }
}

@media (max-width: 768px) {
    .post-layout-grid,
    div[style*="grid-template-columns: 1fr 350px"],
    div[style*="grid-template-columns: 1fr 300px"],
    div[style*="grid-template-columns: 1fr 340px"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    div[style*="grid-template-columns: 1fr 350px"] > aside,
    div[style*="grid-template-columns: 1fr 300px"] > aside,
    div[style*="grid-template-columns: 1fr 340px"] > aside,
    .post-layout-grid > aside { width: 100% !important; }

    /* Post title */
    article header h1,
    .post-title {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }

    /* Post meta row */
    article header div[style*="display: flex; align-items: center; justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }

    /* Post hero image */
    .post-hero-image,
    div[style*="height: 500px"],
    div[style*="height: 450px"] { height: 220px !important; }

    /* Post content */
    .post-content { font-size: 1rem !important; line-height: 1.75 !important; }

    /* Post interaction buttons */
    .post-actions,
    div[class*="interaction"] { flex-wrap: wrap !important; gap: 0.8rem !important; }
}

/* ---------------------------------------------------------------
   10. CATEGORY & SEARCH PAGE
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .category-grid,
    .search-grid { grid-template-columns: 1fr !important; }
    .category-header { text-align: center; padding: 2rem 1rem !important; }
    .category-header h1 { font-size: 1.8rem !important; }
    .search-results { flex-direction: column !important; }
}

/* ---------------------------------------------------------------
   11. LOGIN & REGISTER PAGE
--------------------------------------------------------------- */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80dvh;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 460px;
    padding: 3rem 2.5rem;
    border-radius: 32px;
}

@media (max-width: 480px) {
    .login-card,
    .auth-box {
        padding: 2rem 1.2rem !important;
        border-radius: 20px !important;
        margin: 0 !important;
    }
    .login-card h2 { font-size: 1.5rem !important; }
    .login-btn, .btn-primary { font-size: 0.8rem !important; }
}

/* ---------------------------------------------------------------
   12. E-PAPER & SUBSCRIBE PAGE
--------------------------------------------------------------- */
.epaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .epaper-grid { grid-template-columns: repeat(2, 1fr); }
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .epaper-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .plans-grid { grid-template-columns: 1fr !important; }
    .epaper-viewer iframe { height: 380px !important; }
}

@media (max-width: 480px) {
    .epaper-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   13. FOOTER
--------------------------------------------------------------- */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .footer-logo-area p { margin: 1rem auto; max-width: 100%; }
    .footer-socials { justify-content: center; }
    .footer-bottom { flex-direction: column !important; gap: 1rem !important; text-align: center !important; }
    footer { padding: 4rem 0 2rem; }
}

/* ---------------------------------------------------------------
   14. ADMIN DASHBOARD — DESKTOP (default)
--------------------------------------------------------------- */
/* .dashboard-page = admin layout */
.dashboard-page {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

.dash-sidebar {
    width: 300px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1f2937 transparent;
}

.dash-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.dash-content { padding: 2rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.main-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 1.5rem;
}

/* ---------------------------------------------------------------
   15. ADMIN DASHBOARD — TABLET (768px - 1100px)
--------------------------------------------------------------- */
@media (max-width: 1100px) {
    .dash-sidebar { width: 260px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .main-grid { grid-template-columns: 1fr; }
    .dash-search-box { width: 220px !important; }
    .dash-welcome h1 { font-size: 1.8rem; }
}

/* ---------------------------------------------------------------
   16. ADMIN DASHBOARD — MOBILE (<768px)
--------------------------------------------------------------- */

/* FAB toggle button for all dashboards */
.dash-mobile-toggle {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    box-shadow: 0 8px 32px rgba(99,102,241,0.45);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.dash-mobile-toggle:hover { transform: scale(1.08); }

/* Overlay for all dashboards */
.dash-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1500;
    backdrop-filter: blur(4px);
}
.dash-sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
    /* --- ADMIN LAYOUT --- */
    .dashboard-page {
        flex-direction: column !important;
        overflow-x: hidden !important;
    }

    /* Sidebar slides in from left */
    .dashboard-page .dash-sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        width: 290px !important;
        height: 100dvh !important;
        z-index: 2000 !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
    }
    .dashboard-page .dash-sidebar.open { left: 0 !important; }

    .dashboard-page .dash-main {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Show FAB on mobile */
    .dash-mobile-toggle { display: flex !important; }

    /* Admin top bar */
    .dash-topbar {
        padding: 0.8rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .dash-topbar-title { font-size: 1rem !important; }
    .dash-topbar-actions { gap: 0.6rem !important; }
    .dash-search-box { width: 160px !important; padding: 0.4rem 0.8rem !important; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; }
    .main-grid { grid-template-columns: 1fr !important; }

    /* Welcome row */
    .dash-welcome {
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .dash-welcome h1 { font-size: 1.5rem !important; }
    .btn-new-post { width: 100% !important; justify-content: center !important; }

    /* Content padding */
    .dash-content { padding: 1rem !important; }

    /* Tables scrollable */
    .table-dash-wrap,
    .table-wrap,
    .data-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px;
    }
    .table-dash { min-width: 580px; }

    /* Form grids → single col */
    .form-grid-2,
    .form-grid-3,
    div[style*="display: grid; grid-template-columns: 1fr 1fr"],
    div[style*="display: grid; grid-template-columns: repeat(2"],
    div[style*="display: grid; grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* Ad/plan grids */
    .plans-grid,
    .ad-grid,
    .ad-slots-grid { grid-template-columns: 1fr !important; }

    /* Glass cards full width */
    .glass-box { padding: 1.2rem !important; border-radius: 16px !important; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .dash-search-box { display: none !important; }
    .dash-content { padding: 0.75rem !important; }
    .stat-value { font-size: 1.6rem !important; }
}

/* ---------------------------------------------------------------
   17. USER DASHBOARD — .dashboard-layout wrapper
--------------------------------------------------------------- */
/* .dashboard-layout = user/moderator layout */
.dashboard-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 1rem;
}

.top-nav-center {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

.dash-body-container {
    display: flex;
    flex: 1;
    min-height: 0;
}

.dash-sidemenu {
    width: 260px;
    flex-shrink: 0;
    overflow-y: auto;
    height: calc(100dvh - 60px);
    position: sticky;
    top: 60px;
    scrollbar-width: thin;
    scrollbar-color: #1f2937 transparent;
}

/* ---------------------------------------------------------------
   18. USER / MODERATOR DASHBOARD — TABLET
--------------------------------------------------------------- */
@media (max-width: 1024px) {
    .top-nav-center .dash-search-box { width: 200px !important; }
    .user-quick-info h5 { font-size: 0.75rem; }
    .dash-sidemenu { width: 220px; }
}

/* ---------------------------------------------------------------
   19. USER / MODERATOR DASHBOARD — MOBILE
--------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Top nav compact */
    .dashboard-layout .top-nav {
        padding: 0.7rem 1rem !important;
        gap: 0.5rem !important;
    }
    .top-nav-center { gap: 0.8rem !important; }
    .top-nav-center .dash-search-box { width: 140px !important; font-size: 0.75rem; }
    .dash-breadcrumb { display: none !important; }
    .user-quick-info { display: none !important; }

    /* Body becomes column */
    .dashboard-layout .dash-body-container {
        flex-direction: column !important;
        position: relative;
    }

    /* Sidemenu slides from left */
    .dashboard-layout .dash-sidemenu {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        width: 265px !important;
        height: 100dvh !important;
        z-index: 2000 !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        padding-top: 1rem !important;
    }
    .dashboard-layout .dash-sidemenu.open { left: 0 !important; }

    /* FAB shown */
    .dash-mobile-toggle { display: flex !important; }

    /* Dashboard scroll area */
    .dash-main-scroll { padding: 1rem !important; }

    /* User stat cards */
    .user-stat-grid,
    div[style*="grid-template-columns: repeat(3, 1fr)"][class*="stat"],
    div[style*="grid-template-columns: repeat(4, 1fr)"][class*="stat"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    /* Profile page layout */
    div[style*="grid-template-columns: 300px 1fr"],
    div[style*="grid-template-columns: 280px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Following/followers list */
    div[style*="display: grid"][class*="follower"],
    .follower-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .dashboard-layout .top-nav { padding: 0.6rem 0.8rem !important; }
    .top-nav-center .dash-search-box { display: none !important; }
    .user-stat-grid,
    div[class*="stat-grid"] { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   20. MODERATOR DASHBOARD — specific overrides
--------------------------------------------------------------- */
/* Moderator uses same .dashboard-layout, just different accent color */
@media (max-width: 768px) {
    /* Post list in moderator */
    .mod-posts-grid { grid-template-columns: 1fr !important; }
    /* Edit post form */
    .edit-post-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   21. ADMIN TABLES — All role dashboards
--------------------------------------------------------------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    width: 100%;
}

@media (max-width: 768px) {
    /* Force all data tables to scroll horizontally */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 500px;
    }

    /* Keep thead/tbody/tr display */
    thead, tbody, tr { display: table; width: 100%; }
    th, td { white-space: nowrap; padding: 0.8rem !important; font-size: 0.8rem !important; }

    /* Badge sizes */
    .badge-published, .badge-draft, [class*="badge"] {
        font-size: 0.55rem !important;
        padding: 0.2rem 0.5rem !important;
    }
}

/* ---------------------------------------------------------------
   22. ADMIN FORMS — All role dashboards
--------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Two column form grids → single */
    .form-row-2,
    .form-grid-2 { grid-template-columns: 1fr !important; gap: 1rem !important; }

    /* Tinymce / content editor */
    .tox-tinymce { min-height: 300px !important; }

    /* Image preview in post form */
    .image-preview-box { height: 160px !important; }

    /* Tag input full width */
    .tag-input-wrap { flex-wrap: wrap !important; }

    /* Epaper form */
    .epaper-form-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   23. AD BOOKING / SUBSCRIPTION — User dashboard
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .ad-booking-grid,
    .subscription-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

    /* Plan cards */
    .plan-card { padding: 1.5rem !important; }
    .plan-price { font-size: 2rem !important; }
}

/* ---------------------------------------------------------------
   24. POLL WIDGET
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .poll-widget { padding: 1rem !important; }
    .poll-option-bar { font-size: 0.8rem !important; }
}

/* ---------------------------------------------------------------
   25. READ E-PAPER PAGE
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .epaper-viewer,
    .read-epaper-container iframe,
    embed[type="application/pdf"] {
        height: 70dvh !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------
   26. GENERAL UTILITY
--------------------------------------------------------------- */
/* Prevent FOUC on mobile nav */
@media (min-width: 769px) {
    .mobile-nav-content { display: none !important; }
    .mobile-only { display: none !important; }
    #main-nav {
        display: flex;
        align-items: center;
        flex-grow: 1;
        justify-content: center;
    }
}

/* Safe area padding for notched phones */
@supports (padding: max(0px)) {
    .dash-mobile-toggle {
        bottom: max(1.5rem, env(safe-area-inset-bottom));
        right: max(1.5rem, env(safe-area-inset-right));
    }
    header {
        padding-top: max(0px, env(safe-area-inset-top));
    }
}

/* Smooth transitions for sidebar open/close */
.dash-sidebar,
.dash-sidemenu,
#main-nav {
    will-change: transform, left, right;
}

/* Focus visible for keyboard nav */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbar styling for sidebars */
.dash-sidebar::-webkit-scrollbar,
.dash-sidemenu::-webkit-scrollbar { width: 4px; }
.dash-sidebar::-webkit-scrollbar-track,
.dash-sidemenu::-webkit-scrollbar-track { background: transparent; }
.dash-sidebar::-webkit-scrollbar-thumb,
.dash-sidemenu::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; }

/* ---------------------------------------------------------------
   27. PRINT STYLES
--------------------------------------------------------------- */
@media print {
    header, footer, .dash-sidebar, .dash-sidemenu, .dash-mobile-toggle,
    .nav-actions, #mobile-toggle { display: none !important; }
    body { background: white !important; color: black !important; }
    .container { max-width: 100% !important; padding: 0 !important; }
}