/* Shared screen layout for phones, iPads and Android tablets. Tables scroll locally. */
@media screen {
    .content, .panel, .settings-stack, .form-grid > *, .page-head > * { min-width: 0; }
    input, select, textarea { max-width: 100%; }
    .table-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    dialog { max-height: calc(100dvh - 24px); }
    .install-guide { overflow-y: auto; }
    .install-tabs { flex-wrap: wrap; }
    .settings-info-card code { overflow-wrap: anywhere; white-space: normal; }
}
@media screen and (max-width: 1100px) {
    .install-app-pro { grid-template-columns: auto minmax(0,1fr); }
    .install-app-actions { grid-column: 1 / -1; }
    .settings-info-card { flex-wrap: wrap; }
    .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Touch devices need an explicit menu button, including landscape tablets. */
@media screen and (max-width: 1000px), screen and (hover: none) and (pointer: coarse) {
    body.app .menu-toggle { display: inline-grid !important; place-items: center; flex-shrink: 0; }
    body.app .sidebar, body.app .sidebar:hover,
    body.app .sidebar:not(:hover):not(.open):not(:focus-within),
    body.app .sidebar:not(:hover):not(.open):focus-within {
        width: min(350px,92vw) !important; transform: translateX(-100%);
    }
    body.app .sidebar.open { width: min(350px,92vw) !important; transform: none; }
    body.app .sidebar .cas-nav-label, body.app .sidebar .cas-nav-toggle,
    body.app .sidebar nav a span { opacity: 1; transform: none; pointer-events: auto; }
    body.app .topbar, body.app .app-footer { left: 0 !important; }
    body.app .content { margin-left: 0 !important; }
    .topbar { gap: 8px; }
    .topbar > div:not(.user-chip) { min-width: 0; }
    .topbar h1 { overflow-wrap: anywhere; }
    .toolbar, .panel-title, .page-head, .pagination { flex-wrap: wrap; gap: 12px; }
}
@media screen and (max-width: 620px) {
    .stats, .install-app-pro { grid-template-columns: minmax(0,1fr); }
    .install-app-pro { padding: 18px; gap: 14px; }
    .install-app-actions { grid-column: auto; }
    .install-app-actions .button { width: 100%; white-space: normal; }
    .settings-info-card { padding: 18px; }
    .settings-info-card > div { min-width: 0; align-items: flex-start; }
    .settings-info-icon { flex-shrink: 0; }
    .install-guide-head { flex-wrap: wrap; padding: 18px; }
    .install-guide-body { padding: 18px; }
    .install-tabs { padding: 12px; }
    .install-tabs button { flex: 1 1 120px; white-space: normal; min-height: 44px; }
    .toolbar > label:not(.search) { min-width: 0; }
    .record-form > header, .record-form > footer { padding: 16px; flex-wrap: wrap; }
    .user-chip { flex-shrink: 0; }
    .topbar .menu-toggle { margin-right: 0; }
    .activity-list > div { flex-wrap: wrap; }
    .activity-list time { margin-left: 21px; }
    .app-footer { font-size: 10px; gap: 8px; }
}
@media screen and (hover: none) and (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
    .sidebar nav a, .cas-nav-toggle, .menu-toggle, .install-tabs button { min-height: 44px; }
}