/* Keep the desktop composition; make the same controls and live data comfortable on touch screens. */
.mobile-cell-label, .demo-label-short { display: none; }

@media (max-width: 760px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(76px + env(safe-area-inset-top)); }
    .app-shell { min-height: 100dvh; }
    .topbar {
        position: sticky; top: 0; z-index: 30; flex-shrink: 0;
        height: calc(64px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
        gap: 8px;
    }
    .breadcrumb { flex: 1; min-width: 0; gap: 5px; }
    .breadcrumb > span:last-child { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
    .mobile-menu, .theme-toggle.icon-button { width: 44px; min-width: 44px; height: 44px; margin: 0; }
    .topbar-actions { flex-shrink: 0; gap: 6px; }
    .profile-link { min-width: 44px; min-height: 44px; justify-content: center; }
    .topbar .demo-badge { display: inline-block; max-width: none; }
    .demo-label-full { display: none; }
    .demo-label-short { display: inline; }
    .realtime-indicator { gap: 0; }
    .realtime-indicator [data-realtime-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .main-content { scroll-margin-top: 84px; }
    .app-footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }

    .sidebar {
        height: 100dvh; max-height: 100dvh; overflow: hidden;
        padding: max(28px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }
    .sidebar > .brand, .sidebar > .workspace-label, .sidebar > .nav-label, .sidebar-bottom { flex-shrink: 0; }
    .sidebar .workspace-label { margin: 20px 0; }
    .sidebar .nav-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0; }
    .sidebar .nav-link { min-height: 48px; }
    .sidebar-bottom { padding-top: 12px; margin-top: 0; }
    .sidebar .connection-card { display: none; }
    .sidebar-signout { margin-top: 0; padding-top: 8px; }
    .sidebar-signout button { min-height: 48px; }
    .sidebar-version { margin-top: 8px; }

    .button, .button-small, .form-select, .form-input { min-height: 46px; }
    .endpoint > .icon-button { width: 44px; min-width: 44px; height: 44px; }
    .token-value .button { min-height: 46px; }
    .button { white-space: normal; }
    .form-actions { flex-wrap: wrap; gap: 12px; }
    .form-actions > .button { flex: 1; }
    .checkbox-label { min-height: 44px; padding: 8px 0; }
    .checkbox-label input { width: 18px; height: 18px; flex-shrink: 0; }
    .text-link, .back-link { min-height: 44px; }
    .text-link { white-space: normal; }
    .panel-header { align-items: flex-start; }
    .panel-header > div { min-width: 0; }
    .panel-header > .text-link { flex-shrink: 0; }
    .panel-header h2 { flex-wrap: wrap; }
    .page-heading > .button, .heading-actions > .button { min-height: 46px; }
    .stat-top { align-items: flex-start; }
    .stat-icon { flex-shrink: 0; }
    .stat-value.small { overflow-wrap: anywhere; }
    .info-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .info-list dt, .info-list dd { min-width: 0; overflow-wrap: anywhere; }
    .metric-context { flex-wrap: nowrap; align-items: flex-start; }
    .metric-context > span { min-width: 0; }
    .metric-context .icon { margin-top: 3px; }
    .chart-x { gap: 14px; }
    .chart-x > span { min-width: 0; overflow-wrap: anywhere; }
    .chart-x > span:last-child { text-align: right; }
    .payload-panel summary { align-items: flex-start; }
    .payload-panel summary > span { min-width: 0; overflow-wrap: anywhere; }
    .payload-panel pre { max-height: 55dvh; overflow: auto; overscroll-behavior: contain; }
    .security-action form { width: 100%; margin-left: 0; }
    .security-action .button { width: 100%; }

    /* All status filters stay visible, instead of requiring a sideways swipe. */
    .device-status-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; overflow: visible; }
    .filter-tab { justify-content: center; min-width: 0; min-height: 46px; margin: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; gap: 6px; white-space: normal; }
    .filter-tab:first-child { grid-column: 1 / -1; }
    .filter-tab.selected { color: var(--primary-text); background: var(--primary-soft); border-color: var(--blue); }
    .filter-tab span, .filter-tab .status-dot { flex-shrink: 0; }
    .table-toolbar { flex-wrap: wrap; gap: 12px; }
    .search-input { flex: 1 1 100%; min-width: 0; max-width: none; min-height: 46px; }
    .search-input input { min-width: 0; min-height: 44px; }
    .toolbar-end { display: flex; width: 100%; gap: 10px; }
    .toolbar-end .form-select { flex: 1; min-width: 0; max-width: none; }
    .toolbar-end .icon-button { width: 46px; min-width: 46px; height: 46px; }

    /* Reflow the existing table, preserving filters, SignalR hooks and table semantics. */
    .device-table, .user-table { display: block; width: 100%; min-width: 0; }
    .device-table thead, .user-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .device-table tbody, .user-table tbody { display: grid; gap: 12px; padding: 0 14px 16px; }
    .device-table tr[data-device-id], .user-table tbody tr {
        position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    }
    .device-table tbody tr:last-child td, .user-table tbody tr:last-child td { border: 0; }
    .device-table tbody td, .user-table tbody td,
    .device-table tbody td:first-child, .device-table tbody td:last-child,
    .user-table tbody td:first-child, .user-table tbody td:last-child { display: block; min-width: 0; padding: 0; border: 0; }
    .mobile-cell-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 14px; line-height: 1.5; }
    .device-name-cell { grid-column: 1 / -1; padding-right: 44px !important; }
    .device-cell { min-width: 0; min-height: 44px; align-items: flex-start; gap: 10px; }
    .device-cell > span:last-child { min-width: 0; }
    .device-cell strong { max-width: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
    .device-cell small { white-space: normal; overflow-wrap: anywhere; }
    .device-status-cell { align-self: center; justify-self: end; }
    .device-table .status-badge { white-space: normal; }
    .device-table .status-dot { flex-shrink: 0; }
    .device-table .table-primary, .device-table .table-secondary { white-space: normal; overflow-wrap: anywhere; }
    .device-resource-cell, .device-heartbeat-cell { padding-top: 12px !important; border-top: 1px solid var(--line) !important; }
    .device-table .resource-cell { min-width: 0; }
    .device-table .resource-cell > div { display: grid; grid-template-columns: auto minmax(18px, 1fr) auto; gap: 6px; }
    .device-table .resource-cell > div > span, .device-table .resource-cell strong, .device-table .mini-meter { width: auto; }
    .device-table .mini-meter { width: 100%; }
    .device-table .device-action-cell { position: absolute; right: 10px; top: 14px; }
    .device-table .table-arrow { width: 44px; height: 44px; background: var(--subtle); }
    .user-name-cell, .user-action-cell { grid-column: 1 / -1; overflow-wrap: anywhere; }
    .user-table .status-badge { white-space: normal; }
    .user-action-cell { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
    .user-action-cell .inline-form, .user-action-cell .password-reset { flex: 1 1 100%; min-width: 0; margin: 0; }
    .user-action-cell .button { width: 100%; }
    .password-reset summary { display: flex; align-items: center; min-height: 44px; }
    .password-reset form { display: grid; gap: 10px; width: 100%; }
    .password-reset .form-input { width: 100%; min-width: 0; }
    .activity-filters .inline-field { flex: 1 1 100%; min-width: 0; width: 100%; }
    .activity-filters .form-select { width: 100%; max-width: none; }
    .activity-filters > .button { width: 100%; }

    /* A shorter introduction leaves the login form closer to the first screen. */
    .auth-story { padding: max(24px, env(safe-area-inset-top)) 24px 22px; }
    .auth-story-content { padding: 18px 0 0; }
    .auth-story .eyebrow { display: none; }
    .auth-story h2 { margin-top: 0; }
    .auth-story-content > p { margin-top: 10px; }
    .auth-form-side { min-height: 0; padding: 22px 24px max(28px, env(safe-area-inset-bottom)); }
    .auth-theme-toggle { position: static; align-self: flex-end; margin-bottom: 22px; }
    .auth-footer { position: static; margin-top: 30px; text-align: center; }
    .auth-card .button-primary { min-height: 48px; }
    .toast { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
    .main-content { padding-left: 12px; padding-right: 12px; }
    .device-table tbody, .user-table tbody { padding-left: 10px; padding-right: 10px; }
    .device-table tr[data-device-id], .user-table tbody tr { padding: 14px 12px; gap: 14px 10px; }
    .fleet-health { flex-direction: column; gap: 20px; }
    .health-legend { width: 100%; max-width: none; }
}

@media (max-width: 760px) and (max-height: 520px) {
    .sidebar .workspace-label, .sidebar .brand-product, .sidebar-version { display: none; }
    .sidebar > .nav-label { margin-top: 18px; }
    .sidebar .brand-logo { width: 155px; }
}