/* Responsive overrides only: desktop styling and application logic stay intact. */
body[data-page="settings"] .edit-field-label { display: none; }
@media screen and (max-width: 1100px) {
  body[data-page="dashboard"] .rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-page="dashboard"] .device-row[data-device-id] {
    flex-wrap: wrap;
    gap: 10px;
  }
  body[data-page="dashboard"] .device-row[data-device-id] > div:last-child {
    flex: 1 1 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 900px) {
  body[data-page] button,
  body[data-page] nav a {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  body[data-page="settings"] main a[href] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  body[data-page] nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page] button:focus-visible,
  body[data-page] a:focus-visible,
  body[data-page] .table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  body[data-page] main { padding: 16px 14px; }
  body[data-page] nav {
    height: auto;
    min-height: 60px;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  body[data-page] .logo { min-width: 0; gap: 6px; }
  body[data-page] .logo-icon { flex-shrink: 0; }
  body[data-page] .nav-right { gap: 6px; min-width: 0; }
  body[data-page] .card,
  body[data-page] .room-card,
  body[data-page] .chart-card,
  body[data-page] .storico-card { min-width: 0; }
  body[data-page] .toast {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
    overflow-wrap: anywhere;
    pointer-events: none;
  }

  /* Inputs at 16px avoid automatic zoom while editing on iOS. */
  body[data-page] input:not([type="checkbox"]):not([type="file"]),
  body[data-page] select {
    font-size: 16px !important;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="dashboard"] .logo-description { display: none; }
  body[data-page="dashboard"] .logo { flex-shrink: 0; }
  body[data-page="dashboard"] .back-btn { padding: 6px 10px; flex-shrink: 0; }
  body[data-page="dashboard"] .nav-right { margin-left: auto; }
  body[data-page="dashboard"] .nav-right > a { white-space: nowrap; }
  body[data-page="dashboard"] .status-dot { display: none; }
  body[data-page="dashboard"] .api-bar { flex-wrap: wrap; padding: 14px; gap: 10px; }
  body[data-page="dashboard"] #api-status-text { flex: 1 1 calc(100% - 24px); overflow-wrap: anywhere; }
  body[data-page="dashboard"] .api-bar > span:last-of-type { margin-left: 0 !important; }
  body[data-page="dashboard"] .api-bar button { margin-left: 0 !important; flex: 1 1 140px; }
  body[data-page="dashboard"] .power-banner { padding: 16px; }
  body[data-page="dashboard"] .power-breakdown { width: 100%; gap: 12px 16px; }
  body[data-page="dashboard"] .power-item { flex: 1 1 92px; }
  body[data-page="dashboard"] .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="dashboard"] .card { padding: 16px; }
  body[data-page="dashboard"] .card-label { overflow-wrap: anywhere; }
  body[data-page="dashboard"] .card-header { gap: 6px; }
  body[data-page="dashboard"] .device-row { gap: 12px; }
  body[data-page="dashboard"] .device-left,
  body[data-page="dashboard"] .device-info { min-width: 0; }
  body[data-page="dashboard"] .device-name { overflow-wrap: anywhere; }
  body[data-page="dashboard"] .device-icon { flex-shrink: 0; }
  body[data-page="dashboard"] .room-header { gap: 10px; flex-wrap: wrap; }
  body[data-page="dashboard"] .toggle { width: 52px; height: 44px; border-radius: 24px; }
  body[data-page="dashboard"] .toggle::after { width: 24px; height: 24px; top: 10px; }
  body[data-page="dashboard"] .toggle.off::after { left: 5px; }
  body[data-page="dashboard"] .toggle.on::after { left: 23px; }
  body[data-page="dashboard"] .temp-btn { width: 44px; height: 44px; font-size: 20px; }
  body[data-page="dashboard"] .temp-val { min-width: 48px; font-size: 16px; }
  body[data-page="dashboard"] .mode-btn { padding: 8px; }
  body[data-page="dashboard"] #ai > div:first-child { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-page="dashboard"] .chart-container { min-width: 0; max-width: 100%; }
  body[data-page="dashboard"] .ai-item-body { flex-wrap: wrap; }
  body[data-page="dashboard"] .ai-item-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
  body[data-page="dashboard"] .ai-accept-btn { margin-left: auto; }
  body[data-page="dashboard"] .home-btn,
  body[data-page="dashboard"] .scenario-btn { min-height: 44px; min-width: 0; overflow-wrap: anywhere; }

  body[data-page="settings"] .nav-right { flex: 1; flex-wrap: wrap; justify-content: flex-end; }
  body[data-page="settings"] #user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-page="settings"] .dash-link { display: inline-flex; }
  body[data-page="settings"] main { overflow-wrap: anywhere; }
  body[data-page="settings"] .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body[data-page="settings"] .tab { padding: 8px 6px; white-space: normal; }
  body[data-page="settings"] .grid-2,
  body[data-page="settings"] .form-row { grid-template-columns: minmax(0, 1fr); }
  body[data-page="settings"] .card-title { flex-wrap: wrap; }
  body[data-page="settings"] .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body[data-page="settings"] label[for],
  body[data-page="settings"] label:has(input[type="checkbox"]) { min-height: 44px; }
  body[data-page="settings"] label[for] { display: flex; align-items: center; }
  body[data-page="settings"] .scene-actions { flex-wrap: wrap; }
  body[data-page="settings"] .scene-item > div:first-child > div:first-child { flex-wrap: wrap; }
  body[data-page="settings"] .limit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-page="settings"] .limit-row > :first-child,
  body[data-page="settings"] .limit-row > button { grid-column: 1 / -1; }
  body[data-page="settings"] .limit-row > button { justify-self: start; }
  body[data-page="settings"] .limit-row > div { min-width: 0; flex-wrap: wrap; }
  body[data-page="settings"] .thermo-row { grid-template-columns: minmax(0, 1fr) 76px auto; }
  body[data-page="settings"] .thermo-row > span:first-child { grid-column: 1 / -1; }
  body[data-page="settings"] .thermo-row input[type="number"] { width: 76px; }
  body[data-page="settings"] .room-header-btns { flex-wrap: wrap; }
  body[data-page="settings"] .dev-name { min-width: 0; overflow-wrap: anywhere; }
  body[data-page="settings"] .dev-icon { flex-shrink: 0; }
  body[data-page="settings"] .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="settings"] .cat-item,
  body[data-page="settings"] .check-item { min-width: 0; min-height: 44px; padding: 8px 6px; }
  body[data-page="settings"] input[type="checkbox"] { width: 20px !important; height: 20px !important; flex-shrink: 0; padding: 0; }
  body[data-page="settings"] .edit-table { min-width: 440px; }
  body[data-page="settings"] .edit-table td:nth-child(2) { min-width: 160px; }
  body[data-page="settings"] .btn { max-width: 100%; white-space: normal; }
  body[data-page="settings"] .weather-test-header,
  body[data-page="settings"] .weather-test-current { flex-wrap: wrap; }
  body[data-page="settings"] .weather-test-header > span { min-width: 0; }
  body[data-page="settings"] .weather-test-header > span:last-child {
    flex: 1 1 100%;
    margin-left: 0 !important;
  }
  body[data-page="settings"] .weather-test-current > span:nth-child(2) { flex-shrink: 0; white-space: nowrap; }
  body[data-page="settings"] .weather-test-current > span:last-child { flex: 1 1 100%; }

  body[data-page="login"] { min-height: 100svh; padding: 20px 14px; }
  body[data-page="login"] .login-card { padding: 28px 22px; }
  body[data-page="login"] .back { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  body[data-page="login"] .role-chip { flex-wrap: wrap; }

  body[data-page="report"] nav .logo { flex: 1 1 100%; font-size: 14px; }
  body[data-page="report"] nav .nav-right { flex-wrap: wrap; width: 100%; }
  body[data-page="report"] .table-scroll { max-width: 100%; overflow-x: auto; margin-bottom: 12px; }
  body[data-page="report"] .rpt-section { min-width: 0; }
  body[data-page="report"] .rpt-section-title { flex-wrap: wrap; }
  body[data-page="report"] .report-title { font-size: 26px; }
  body[data-page="report"] .ep-path { overflow-wrap: anywhere; }
}

@media screen and (max-width: 640px) {
  /* Keep every edit control visible instead of hiding table columns on phones. */
  body[data-page="settings"] .edit-table,
  body[data-page="settings"] .edit-table tbody { display: block; width: 100%; min-width: 0; }
  body[data-page="settings"] .edit-table thead { display: none; }
  body[data-page="settings"] .edit-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  body[data-page="settings"] .edit-table tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: none;
  }
  body[data-page="settings"] .edit-table td:first-child { grid-column: 1; grid-row: 1; align-self: center; font-size: 20px; }
  body[data-page="settings"] .edit-table td:last-child { grid-column: 2; grid-row: 1; }
  body[data-page="settings"] .edit-table td:nth-child(2),
  body[data-page="settings"] .edit-table td:nth-child(3),
  body[data-page="settings"] .edit-table td:nth-child(4) { grid-column: 1 / -1; min-width: 0; }
  body[data-page="settings"] .edit-table .edit-field-label {
    display: block;
    min-height: 0;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  body[data-page="settings"] .edit-table .edit-inp { width: 100%; }
}

@media screen and (max-width: 540px) {
  body[data-page="dashboard"] .rooms-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="dashboard"] .card-value { font-size: 24px; overflow-wrap: anywhere; }
  body[data-page="settings"] .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="settings"] .room-header-btns { width: 100%; }
  body[data-page="settings"] .weather-test-forecast { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 380px) {
  body[data-page="dashboard"] .cards-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="dashboard"] .mode-btns,
  body[data-page="dashboard"] .temp-control { gap: 4px; }
}