@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 auto !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1.1 !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;
    }
}

@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 {
        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;
    }
}