/* Responsive improvements - mobile-first overrides */
:root{
    --mobile-topbar-height:56px;
    --mobile-bottom-height:60px;
    --sidebar-width-mobile:82vw;
}

html,body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img{max-width:100%;height:auto;display:block;}
a,button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Desktop-first layout remains; mobile overrides below */
@media (max-width: 900px){
    /* Topbar */
    #mobile-topbar{ display:flex !important; position:fixed; left:0; right:0; top:0; height:var(--mobile-topbar-height); align-items:center; gap:8px; padding:8px 12px; background:#ffffff; z-index:10040; box-shadow:0 6px 18px rgba(2,6,23,0.08); }
    .mobile-title{ display:flex; align-items:center; gap:8px; flex:1; }
    .mobile-icon{ width:44px; height:44px; min-width:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; }
    .mobile-title-content{ font-weight:700; font-size:14px; line-height:1.1; }

    /* Day strip and bottom nav */
    #mobile-day-strip{ display:flex !important; gap:6px; padding:8px 10px; overflow:auto; -webkit-overflow-scrolling:touch; position:sticky; top:var(--mobile-topbar-height); z-index:10020; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92)); }
    /* Stylish day pills (non-button labels) */
    #mobile-day-strip .day-pill{
        display:inline-flex; align-items:center; justify-content:center;
        padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px;
        color: #0f172a; background: rgba(15,23,42,0.04); min-width:44px; text-align:center;
        box-shadow: 0 4px 10px rgba(2,6,23,0.04); transition: transform .18s ease, background .18s ease, color .18s ease;
        user-select:none; margin:0;
    }
    #mobile-day-strip .day-pill.active{
        background: linear-gradient(90deg,#1C77FF 0%, #06B6D4 100%);
        color:#ffffff; transform: translateY(-4px); box-shadow: 0 10px 28px rgba(12,74,140,0.18);
    }
    #mobile-bottom-nav{ display:flex !important; position:fixed; left:0; right:0; bottom:0; height:var(--mobile-bottom-height); align-items:center; justify-content:space-around; background:#ffffff; border-top:1px solid rgba(2,6,23,0.06); z-index:10040; }
    #mobile-bottom-nav button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; padding:6px 8px; color:#334155; background:transparent; border:none; min-width:44px; }

    /* Main content spacing to avoid overlap */
    main.main-content{ padding-top: calc(var(--mobile-topbar-height) + 8px); padding-bottom: calc(var(--mobile-bottom-height) + 8px); }

    /* Sidebar becomes off-canvas */
    aside.sidebar{ position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-width-mobile); max-width:360px; transform:translateX(-110%); transition:transform .28s cubic-bezier(.2,.9,.2,1); z-index:10050; box-shadow:20px 0 40px rgba(2,6,23,0.18); }
    aside.sidebar.mobile-open{ transform:translateX(0); }

    /* Backdrop for off-canvas */
    #mobile-sidebar-backdrop{ display:block; position:fixed; inset:0; background:rgba(2,6,23,0.38); backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:10045; }
    #mobile-sidebar-backdrop.active{ opacity:1; pointer-events:auto; }

    /* Reduce heavy decorations for performance */
    .decor-circles, .enter-splash-inner .enter-splash-greeting, .news-quick-post{ box-shadow:none !important; }
    .news-quick-post{ bottom: calc(var(--mobile-bottom-height) + 12px) !important; }

    /* Stack home columns */
    .home-shell{ display:flex; flex-direction:column; gap:12px; }
    .home-main, .home-right{ width:100%; }

    /* Tables: horizontal scroll with touch momentum */
    .teachers-table-wrap, .teachers-table-scroll, .teachers-card .teachers-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .data-table{ width:100%; min-width:640px; border-collapse:collapse; }

    /* Buttons & tap targets */
    button, .btn, .hero-btn, .nav-item{ min-height:44px; padding:10px 12px; font-size:15px; }

    /* Modals full-width on small screens */
    .modal-window{ max-width: calc(100vw - 24px) !important; width:100% !important; margin:12px auto !important; }

    /* Slightly modernize mobile topbar icons */
    #mobile-topbar .mobile-icon{ background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95)); border-radius:10px; color:#0f172a; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
    #mobile-topbar .mobile-day-nav{ background:transparent; border-radius:8px; padding:8px; }

    /* Headers and big titles */
    .header h1{ font-size:16px !important; line-height:1.2 !important; }

    /* Reduce animated repaints for mobile (optional) */
    .news-card, .home-my-class-card, .white-card{ will-change:auto; }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce){
        *{ transition:none !important; animation:none !important; }
    }
}

/* Small helper for clickable elements spacing on all screens */
.link-like{ display:inline-flex; align-items:center; gap:8px; }
/* Landscape orientation: make modal windows scale to 92% on horizontal screens */
@media (orientation: landscape) and (max-width: 1200px){
    .modal-window{
        width: 92vw !important;
        max-width: 92vw !important;
        margin: 12px auto !important;
    }
}