/* =========================================================
   Vidyakalpa AI - Universal Mobile Responsive Layer
   Keeps desktop UI intact and adapts layouts for phones.
========================================================= */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
table { max-width: 100%; }

/* Dashboard mobile navigation */
.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    color: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.mobile-menu-overlay { display: none; }

@media (max-width: 900px) {
    .wrapper { display: block !important; min-height: 100vh; }
    .main { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }

    /* Dashboard sidebar becomes the same full desktop-style sidebar as a mobile drawer */
    .wrapper > .sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 20px !important;
        bottom: 20px !important;
        width: 280px !important;
        max-width: 86vw !important;
        padding: 25px !important;
        border-radius: 25px !important;
        z-index: 10050 !important;
        overflow-y: auto !important;
        transition: left .25s ease !important;
    }

    /* The desktop responsive breakpoint hides these; restore them inside the
       mobile drawer so it visually matches the desktop dashboard sidebar. */
    .wrapper > .sidebar .logo h2,
    .wrapper > .sidebar span,
    .wrapper > .sidebar .menu-title {
        display: block !important;
    }

    .wrapper > .sidebar .logo {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 35px !important;
    }

    .wrapper > .sidebar .logo h2 {
        font-size: 28px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

    .wrapper > .sidebar .menu-title {
        margin-top: 25px !important;
        margin-bottom: 12px !important;
    }

    .wrapper > .sidebar li {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 15px !important;
        margin: 8px 0 !important;
        border-radius: 15px !important;
    }

    .wrapper > .sidebar li a {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }
    body.mobile-nav-open .wrapper > .sidebar {
        left: 0 !important;
    }
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.48);
        z-index: 10040;
        display: none;
        backdrop-filter: blur(2px);
    }
    body.mobile-nav-open .mobile-menu-overlay { display: block; }

    .header {
        position: relative !important;
        top: auto !important;
        z-index: 10 !important;
        min-height: 64px;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    .mobile-menu-toggle { display: inline-flex; }
    .header .search-box {
        flex: 1 1 auto;
        min-width: 0;
    }
    .header .search-box input { min-width: 0 !important; width: 100%; }
    .header-right { gap: 8px !important; }
    .profile span { display: none; }

    .hero {
        grid-template-columns: 1fr !important;
        padding: 24px 18px !important;
        gap: 18px !important;
    }
    .hero-right { display: none !important; }
    .hero-left h1 { font-size: clamp(25px, 7vw, 36px) !important; line-height: 1.15; }
    .hero-buttons { flex-wrap: wrap; }

    .billing-mini-card {
        margin: 14px !important;
        padding: 16px !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    .billing-mini-card > * { max-width: 100%; }

    .stats-grid,
    .tools-grid,
    .feature-grid,
    .study-grid,
    .grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .statistics-section,
    .tools-section,
    .recent-activity-card,
    .card,
    .section {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .card-header { gap: 10px; flex-wrap: wrap; }
    .activity-toggle-btn { margin-left: auto; }

    /* Generic containers */
    .wrap, .shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .top, .topbar, .topbar .nav {
        flex-wrap: wrap !important;
    }
    .top { gap: 12px !important; }
    .top .actions, .top .controls, .hero-actions { flex-wrap: wrap; }

    /* Common forms */
    form, .form-card, .form-panel, .auth-box {
        max-width: 100% !important;
    }
    input, select, textarea {
        font-size: 16px !important; /* prevents iOS zoom */
    }
    button, .btn, a.button, .primary-btn, .secondary-btn {
        min-height: 42px;
    }

    /* Learning profile/study */
    .hero h1 { font-size: clamp(25px, 7vw, 38px) !important; }
    .study-card { min-width: 0 !important; }
    .study-card .actions,
    .study-actions { flex-wrap: wrap !important; }
    .study-card button,
    .study-card a { width: 100%; }

    /* NCERT */
    .side {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
    }
    .study {
        grid-template-columns: 1fr !important;
    }

    /* Career guide */
    .nav {
        overflow-x: auto;
        max-width: 100%;
    }
    .grid .field.full { grid-column: 1 / -1 !important; }

    /* Payments */
    .pricing-grid, .plans-grid, .payment-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables become horizontally scrollable rather than breaking page width */
    .table-wrap, .table-responsive, .data-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    table { min-width: 620px; }

    /* AI chat */
    .ai-layout {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
    .chat-column {
        min-width: 0 !important;
        width: 100% !important;
    }
    .chat-header {
        min-height: 58px;
        padding: 8px 10px !important;
        gap: 7px !important;
    }
    .header-center { min-width: 0 !important; }
    .header-center > * { max-width: 100%; }
    .header-right { flex-shrink: 0; }
    .message,
    .chat-message,
    .assistant-message,
    .user-message {
        max-width: 92% !important;
    }
    .composer,
    .chat-input-area,
    .input-area {
        padding: 8px !important;
    }

    /* Voice tutor */
    .app { min-height: 100dvh; }
    .main { min-width: 0 !important; }
    .top-controls { flex-wrap: wrap; }
    .content, .main-content { width: 100% !important; }

    /* Prevent oversized fixed-width elements */
    [style*="width: 1000px"],
    [style*="width:1000px"],
    [style*="min-width: 1000px"],
    [style*="min-width:1000px"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 600px) {
    body { font-size: 14px; }

    .header {
        padding: 8px 10px !important;
    }
    .header .search-box {
        order: 3;
        flex-basis: 100%;
    }
    .header-right { margin-left: auto; }

    .theme-button button {
        width: 38px !important;
        height: 38px !important;
    }

    .hero {
        padding: 20px 14px !important;
    }

    .hero-left p {
        font-size: 14px !important;
    }

    .hero-buttons > *,
    .hero-actions > *,
    .controls > * {
        width: 100%;
    }

    .stats-grid {
        gap: 10px !important;
    }
    .stat-card {
        min-width: 0 !important;
    }

    .section-heading {
        font-size: 20px !important;
    }

    .card {
        padding: 14px !important;
    }

    .top {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .top .brand,
    .brand {
        max-width: 100%;
    }

    .brand img,
    .vk-logo {
        max-height: 42px;
    }

    .study-card,
    .feature-card,
    .form-card {
        padding: 16px !important;
    }

    /* Auth pages */
    .auth-container {
        min-height: 100dvh !important;
        padding: 16px !important;
    }
    .auth-box {
        width: 100% !important;
        padding: 22px 18px !important;
    }

    /* AI chat compact controls */
    .brand-text { min-width: 0; }
    .brand-title { font-size: 15px !important; }
    .brand-subtitle { font-size: 10px !important; }
    .profile-badge { display: none !important; }

    /* Touch-friendly controls */
    button,
    a,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: transparent;
    }
}

@media (max-width: 380px) {
    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }
    .hero-left h1 {
        font-size: 25px !important;
    }
    .card-header h2 {
        font-size: 18px !important;
    }
}


/* Final cross-page mobile safety net */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .plan-card,.card,.section,.tool-card,.feature-card,.study-card,.form-card,.auth-box{
    min-width:0;
  }
  .plan-card *,.card *,.tool-card *,.feature-card *,.study-card *{
    overflow-wrap:anywhere;
  }
  .btn,.button,.primary-btn,.secondary-btn,.plan-btn,.extra-card{
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .modal,.dialog,.drawer{
    max-width:100vw;
  }
}
@media(max-width:560px){
  .table-wrap,.table-responsive,.data-table-wrap{width:100%;max-width:calc(100vw - 28px)}
  .table-wrap table,.table-responsive table,.data-table-wrap table{min-width:620px}
}


/* Dashboard: keep the viewport locked and let each region scroll independently. */
body.dashboard-page{
    height:100%;
    min-height:100%;
    overflow:hidden !important;
}

body.dashboard-page .wrapper{
    height:100vh;
    height:100dvh;
    min-height:0 !important;
    overflow:hidden !important;
}

body.dashboard-page .main{
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
}

body.dashboard-page .wrapper > .sidebar{
    height:calc(100vh - 40px) !important;
    height:calc(100dvh - 40px) !important;
    max-height:calc(100vh - 40px) !important;
    max-height:calc(100dvh - 40px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

/* The theme studio remains an isolated scroll layer. */
body.dashboard-page .theme-panel{
    max-height:100vh;
    max-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}