@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

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

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    *,
    *::before,
    *::after {
        min-width: 0;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    .title-block,
    .section-title,
    .person-name,
    .current-name,
    .calendar-event,
    .current-meta,
    .desc-box,
    .empty,
    .empty-state,
    .result-empty {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .page,
    .dashboard-page,
    .app-shell,
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        display: block !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    .sidebar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 10px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .sidebar-logo {
        width: 52px !important;
        height: 52px !important;
        margin: 0 auto 8px !important;
    }

    .sidebar-nav {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 3px !important;
        scrollbar-width: thin;
    }

    .sidebar-link {
        flex: 0 0 118px !important;
        width: 118px !important;
        min-width: 118px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .content,
    .main-content,
    .dashboard-content,
    main {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .topbar,
    .header-content,
    .toolbar,
    .tool-row {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topbar-left,
    .search-field,
    .search,
    .search-box,
    .search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .topbar-left {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .today-chip {
        display: none !important;
    }

    .filters,
    .tabs,
    .filter-row,
    .filter-bar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .filter-item,
    .tab,
    .tab-btn {
        flex: 0 0 auto !important;
    }

    .profile {
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .profile-menu {
        right: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }

    .hero {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 20px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .hero h1,
    h1 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .hero p {
        font-size: 14px !important;
        width: 100% !important;
        max-width: calc(100vw - 56px) !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .hero-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-stat {
        min-width: 0 !important;
    }

    .main-grid,
    .content-grid,
    .dashboard-grid,
    .stats-grid,
    .cards-grid,
    .quick-cards,
    .current-grid,
    .hte-grid,
    .form-grid,
    .details-grid,
    .summary-grid,
    .two-column,
    .left-col,
    .right-col {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 10px !important;
    }

    .right-card,
    .hte-card,
    .current-card,
    .quick-card,
    .card,
    .panel,
    .section-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
    }

    .right-body,
    .card-content {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .actions {
        width: 100% !important;
    }

    .table-card,
    .table-wrap,
    .table-container,
    .records-table,
    .data-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 720px;
    }

    .review-panel,
    .detail-panel,
    .side-panel,
    .modal,
    .modal-content,
    .preview-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        bottom: 8px !important;
        height: auto !important;
        max-height: calc(100vh - 16px) !important;
        overflow: auto !important;
    }

    .review-open .review-panel {
        transform: translateX(0) !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    .login-main,
    .register-main,
    .forgot-main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        overflow-x: hidden !important;
    }

    .login-card,
    .register-card,
    .fp-card {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .login-card .form-input,
    .register-card .form-input,
    .fp-card .form-input {
        width: 100% !important;
    }

    .login-help {
        justify-content: flex-start !important;
    }

    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .toolbar .search-wrap,
    .toolbar .filter-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .toolbar .filter-btn {
        font-size: 16px !important;
    }

    .workspace,
    .shell,
    .app,
    .content-panel,
    .monitor-shell,
    .companies-panel,
    .notification-panel,
    .editor-card,
    .profile-summary-card,
    .profile-detail-card,
    .class-hero,
    .section-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .workspace,
    .main,
    .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .heading,
    .topbar-title,
    .section-header,
    .panel-head,
    .panel-header,
    .companies-header,
    .company-toolbar,
    .dashboard-toolbar,
    .class-actions,
    .documents-head,
    .documents-actions,
    .table-controls,
    .search-row,
    .button-row,
    .form-actions,
    .modal-followup-actions,
    .upload-actions,
    .upload-picker-row,
    .folder-create-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .heading h1,
    .topbar-heading,
    .page-title,
    .section-title,
    .class-section-title,
    .module-head,
    .submission-title,
    .companies-title,
    .documents-title {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .heading h1,
    .topbar-heading,
    .page-title,
    .module-head,
    .submission-title {
        font-size: clamp(22px, 7vw, 32px) !important;
        line-height: 1.1 !important;
    }

    .layout,
    .stats,
    .stats-row,
    .summary-grid,
    .summary-stats,
    .summary-inner,
    .summary-list,
    .monitoring-list,
    .adviser-list,
    .company-grid,
    .company-metrics,
    .class-overview-grid,
    .class-roster-list,
    .profile-detail-grid,
    .student-modal-grid,
    .modal-content,
    .detail-grid,
    .quick-actions,
    .document-strip {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stats,
    .stats-row,
    .hero-stats,
    .summary-grid,
    .company-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .panel,
    .summary-card,
    .stat-card,
    .metric-card,
    .monitoring-card,
    .adviser-card,
    .company-result,
    .class-course-card,
    .class-roster-card,
    .announcement-card,
    .notification-card,
    .editor-card,
    .profile-detail-card,
    .profile-summary-card,
    .content-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .hte-card {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }

    .hte-logo {
        width: 54px !important;
        height: 54px !important;
    }

    .hte-logo .logo-pill {
        width: 42px !important;
        max-width: 42px !important;
        font-size: 8px !important;
    }

    .hte-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .hte-name {
        font-size: clamp(18px, 5.3vw, 22px) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .hte-location,
    .hte-tag,
    .hte-description {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.3 !important;
    }

    .hte-location {
        align-items: flex-start !important;
    }

    .hte-side {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-top: 0 !important;
    }

    .hte-side .card-actions {
        width: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 8px !important;
    }

    .student-chip,
    .hte-side .action-btn {
        min-width: 0 !important;
        min-height: 36px !important;
        white-space: nowrap !important;
    }

    .list-scroll,
    .table-wrap,
    .table-card,
    .table-container,
    .panel-body,
    .submission-table-shell,
    .sections-table,
    .students-table,
    .section-table,
    .submission-table,
    .records-table,
    .data-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sections-table,
    .students-table,
    .section-table,
    .submission-table {
        min-width: 720px !important;
        table-layout: auto !important;
    }

    .assignments-layout {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .activity-rail {
        width: 100% !important;
        max-width: 100% !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d1d1d1 !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        overflow: hidden !important;
    }

    .activity-list,
    .people-list,
    .tab-row,
    .tabs,
    .filter-bar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .activity-item,
    .student-card,
    .tab,
    .filter-chip,
    .year-btn,
    .view-toggle button {
        flex: 0 0 auto !important;
        max-width: min(260px, 78vw) !important;
    }

    .submission-main,
    .grade-sidebar,
    .people-grid,
    .module-list,
    .module-item,
    .student-progress-panel,
    .calendar-card,
    .right-column,
    .left-col,
    .right-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .student-detail,
    .student-detail-row,
    .summary-row,
    .class-roster-row,
    .calendar-item,
    .announcement-item,
    .monitoring-header,
    .modal-company,
    .company-modal-head,
    .student-modal-header,
    .profile-header {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        min-width: 0 !important;
    }

    .monitor-modal,
    .company-modal,
    .dashboard-modal,
    .coordinator-modal,
    .deployment-drawer,
    .drawer-backdrop,
    .edit-overlay,
    .upload-overlay,
    .folder-create-overlay {
        max-width: 100vw !important;
    }

    .modal-dialog,
    .company-modal-body,
    .dashboard-modal-card,
    .coordinator-modal,
    .deployment-drawer,
    .student-modal-card,
    .student-profile-dialog,
    .edit-modal,
    .upload-dialog,
    .folder-create-dialog,
    .preview-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
        overflow: auto !important;
        border-radius: 12px !important;
    }

    .modal-close,
    .company-modal-close,
    .dashboard-modal-close,
    .drawer-close,
    .preview-close,
    .upload-close {
        min-width: 40px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .search,
    .search-input,
    .search-wrap input,
    .filter-search,
    .company-search,
    .adviser-search,
    .filter-select,
    .submission-filter,
    .field-input,
    .field-select,
    .field-textarea,
    .title-input,
    .editor-box,
    .modal-input,
    .modal-note-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .action-btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-save,
    .btn-cancel,
    .save-btn,
    .create-btn,
    .upload-primary,
    .upload-secondary,
    .modal-followup-btn {
        min-height: 40px !important;
        white-space: normal !important;
    }

    body.student-dashboard-page .page {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    body.student-dashboard-page .sidebar {
        position: static !important;
        overflow: hidden !important;
    }

    body.student-dashboard-page .sidebar-nav {
        flex-wrap: wrap !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body.student-dashboard-page .sidebar-link {
        flex: 1 1 calc(33.333% - 6px) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.student-dashboard-page .content {
        max-width: 100% !important;
    }

    body.student-dashboard-page .quick-actions-layout,
    body.student-dashboard-page .quick-buttons,
    body.student-dashboard-page .quick-cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    body.student-dashboard-page .quick-buttons {
        flex-basis: auto !important;
    }

    body.student-dashboard-page .recommended-profile {
        justify-content: flex-start !important;
    }
}

@media (max-width: 520px) {
    .page,
    .dashboard-page,
    .app-shell,
    .wrapper {
        padding: 6px !important;
    }

    .sidebar {
        border-radius: 10px !important;
        padding: 8px !important;
    }

    .sidebar-logo {
        width: 46px !important;
        height: 46px !important;
    }

    .sidebar-link {
        flex-basis: 116px !important;
        width: 116px !important;
        min-width: 116px !important;
        min-height: 31px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .hero h1,
    h1 {
        font-size: 24px !important;
    }

    .right-head,
    .section-title,
    h2 {
        font-size: 14px !important;
    }

    .hero p,
    .title-block p {
        max-width: 320px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .recommended-profile,
    .person-row,
    .current-head {
        align-items: flex-start !important;
    }

    .recommended-card .actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stats,
    .stats-row,
    .hero-stats,
    .summary-grid,
    .summary-stats,
    .company-metrics,
    .class-overview-grid,
    .profile-detail-grid,
    .modal-content,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .panel-head,
    .panel-header,
    .submission-header,
    .modal-company,
    .company-toolbar,
    .dashboard-toolbar,
    .documents-actions,
    .upload-actions,
    .form-actions,
    .button-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .activity-item,
    .student-card,
    .tab,
    .filter-chip,
    .view-toggle button {
        max-width: 82vw !important;
    }

    .hte-card {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    .hte-logo {
        width: 46px !important;
        height: 46px !important;
    }

    .hte-name {
        font-size: 18px !important;
    }

    .hte-side {
        align-items: stretch !important;
    }

    .hte-side .card-actions,
    .student-chip,
    .hte-side .action-btn {
        flex: 1 1 120px !important;
    }

    .hte-side .action-btn {
        justify-content: center !important;
    }

    .modal-dialog,
    .company-modal-body,
    .dashboard-modal-card,
    .coordinator-modal,
    .deployment-drawer,
    .student-modal-card,
    .student-profile-dialog,
    .edit-modal,
    .upload-dialog,
    .folder-create-dialog,
    .preview-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 6px auto !important;
    }

    body.student-dashboard-page .sidebar-link {
        flex-basis: calc(50% - 6px) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.student-dashboard-page .hte-label {
        font-size: 21px !important;
    }
}