/* AIE System Legacy: responsive refinements (Phase 2).
   Additive overrides: the master visual design and dashboard logic remain unchanged. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-width:0; overflow-x:clip; }
.app,.main,.workspace,#content,.page-head,.topbar,.top-left,.top-right {min-width:0;}
img,svg,video,canvas {max-width:100%;}
img {height:auto;}
input,select,textarea,button {max-width:100%;}
input,select,textarea {min-width:0;}
.panel,.panelbody,.settings-v483-card,.department-card,.eventrow {overflow-wrap:anywhere;}
.grid,.metrics,.workflow,.settings-grid,.settings-v483-grid,.department-card-grid,.equipment-kpis,.checks-metrics {min-width:0;}
.grid > *,.metrics > *,.workflow > *,.settings-grid > *,.settings-v483-grid > * {min-width:0;}
.topbar .top-left {overflow:hidden;}
.crumb {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-right {flex-shrink:0;}
/* Wide desktop, including 4K browser windows. */
@media (min-width:1600px) {
  .workspace {width:min(100%,1540px);padding:36px 42px 56px;}
}
/* Small desktop, tablet landscape, and split-screen windows. */
@media (min-width:791px) and (max-width:1180px) {
  .app {grid-template-columns:220px minmax(0,1fr);}
  .sidebar {padding-inline:10px;}
  .sidebar nav button {gap:9px;padding-inline:10px;font-size:12px;}
  .workspace {padding:24px clamp(16px,2.5vw,28px) 42px;}
  .topbar {padding-inline:clamp(16px,2.5vw,28px);gap:10px;}
  .top-right {gap:8px;}
  .topbar .user {max-width:135px;min-width:0;}
  .topbar .user > span:last-child {max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .grid {grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:12px;}
  .settings-v483-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .panelhead {gap:10px;}
}
/* Tablet portrait and all phones retain the V1 six-tab bottom navigation. */
@media (max-width:790px) {
  .app {width:100%;}
  .main {width:100%;}
  .topbar {min-width:0;padding-inline:clamp(12px,2vw,18px);}
  .topbar .top-right {min-width:0;gap:6px;}
  .workspace {width:100%;padding:20px clamp(12px,3vw,22px) calc(105px + env(safe-area-inset-bottom,0px));}
  .page-head,.panelhead,.toolbar {min-width:0;}
  .grid {grid-template-columns:minmax(0,1fr);}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .workflow,.settings-grid,.settings-v483-grid {grid-template-columns:minmax(0,1fr);}
  .toolbar {flex-wrap:wrap;}
  .toolbar > * {min-width:0;}
  .mobile-bottom-nav {width:100%;max-width:100vw;grid-template-columns:repeat(6,minmax(0,1fr));}
  .mobile-bottom-nav button {min-width:0;overflow:hidden;}
  .mobile-bottom-nav button span {display:block;max-width:100%;overflow:hidden;text-overflow:clip;}
  .overlay {padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));}
  .dialog {width:min(100%,760px);max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;}
  .dialog #modalBody {overflow-wrap:anywhere;}
  .fields {grid-template-columns:minmax(0,1fr);}
  .field {min-width:0;}
  .modal-actions {position:sticky;bottom:0;padding:10px 0 calc(4px + env(safe-area-inset-bottom,0px));background:#fff;}
  .modal-actions .button {min-height:44px;}
  /* Calendar indicators stay within their original calendar cells. */
  .multi-event-calendar {min-width:0;}
  .multi-event-calendar > * {min-width:0;}
  .calendar-page .panel {min-width:0;}
  .appfooter {overflow-wrap:anywhere;}
}
/* iPhone Pro Max, Android large phones: 391–480 CSS px. */
@media (max-width:480px) {
  .topbar {height:58px;padding-inline:12px;}
  .topbar .user {display:none;}
  .top-right {gap:5px;}
  .topbar .connection {font-size:9px;}
  .workspace {padding:17px 12px calc(105px + env(safe-area-inset-bottom,0px));}
  .page-head h1 {font-size:clamp(21px,5.6vw,25px);overflow-wrap:anywhere;}
  .panelhead {padding:14px 12px;flex-wrap:wrap;}
  .panelbody {min-width:0;}
  .mobile-bottom-nav {padding-left:max(3px,env(safe-area-inset-left,0px));padding-right:max(3px,env(safe-area-inset-right,0px));}
  .mobile-bottom-nav button {padding-inline:0;font-size:clamp(7px,2vw,9px);}
  .mobile-bottom-nav svg {width:20px;height:20px;}
  .auth-login-screen {padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));}
  .auth-login-card {padding:23px 20px;}
  .auth-login-card h1 {font-size:24px;}
  .check-row,.check-row.header {gap:4px;}
}
/* iPhone SE and narrower Android phones (320–375 CSS px). */
@media (max-width:375px) {
  .topbar .header-refresh {display:none;}
  .topbar .connection {font-size:9px;}
  .auth-signout {margin-left:2px;padding:8px 6px;font-size:10px;white-space:nowrap;}
  .top-left .crumb > b {font-size:11px;}
  .workspace {padding-inline:11px;}
  .mobile-bottom-nav button {font-size:7.5px;gap:4px;}
  .mobile-bottom-nav svg {width:19px;height:19px;}
  .mobile-bottom-nav button {min-height:52px;}
  .eventrow.eventrow-clickable {grid-template-columns:46px minmax(0,1fr) auto;gap:6px;}
  .equipment-kpi strong {font-size:22px;}
  .detail-info {grid-template-columns:minmax(0,1fr);}
  .dialog-head {padding:13px 12px;}
  .dialog #modalBody {padding:13px 12px;}
  .auth-login-logo {width:64px;height:64px;}
}
/* iPhone landscape and landscape on shorter mobile devices. */
@media (max-width:790px) and (orientation:landscape) and (max-height:520px) {
  .auth-login-screen {align-items:flex-start;}
  .mobile-bottom-nav button {min-height:43px;padding-block:3px;gap:2px;}
  .mobile-bottom-nav svg {width:18px;height:18px;}
  .workspace {padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));}
  .dialog {max-height:calc(100dvh - 16px);border-radius:12px;}
  .overlay {padding:8px;}
}
/* iOS home indicator and rounded device corners. */
@supports (padding:env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {padding-bottom:calc(7px + env(safe-area-inset-bottom));}
  .topbar {padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
}