/* ==========================================================================
   Aurevyn247 - Mobile-friendly view (v3.4)
   Loaded AFTER each page's own <style>, so equal-specificity rules here win.
   Nothing here changes the desktop layout (>1180px). Breakpoints:
     <=1180px  tablet : live-alert button appears (the alert rail is hidden)
     <=780px   phone  : compact header, scrolling toolbar, full-screen modals
     <=640px   phone  : device table becomes cards
   Pages: index.html (dashboard), app-control.html, tv-access.html, tv.html.
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img,svg,video,canvas{ max-width:100%; }

/* Mobile browsers: 100vh is taller than the visible area (address bar) -> use dvh. */
@supports (height:100dvh){
  .shell{ height:100dvh; }
  body{ min-height:100dvh; }
}

/* ---------- Live-alert button + sheet (created by mobile.js) ---------- */
.m-alert-fab,.m-alert-close,.m-alert-backdrop{ display:none; }

@media (max-width:1180px){
  .m-alert-fab{
    display:flex; align-items:center; gap:8px;
    position:fixed; z-index:230;
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
    min-height:46px; padding:0 16px; border-radius:24px;
    background:var(--bg-2); color:var(--text-hi);
    border:1px solid var(--line-bright); box-shadow:0 8px 28px rgba(0,0,0,.45);
    font:600 13px var(--font-ui); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .m-alert-fab .m-alert-n{
    min-width:20px; height:20px; padding:0 6px; border-radius:10px;
    background:var(--down); color:#fff; font-size:11px; line-height:20px; text-align:center;
  }
  .m-alert-fab .m-alert-n:empty{ display:none; }
  body.m-sheet-open .m-alert-fab{ display:none; }

  .m-alert-backdrop.open{ display:block; position:fixed; inset:0; z-index:255; background:rgba(0,0,0,.55); }

  /* the existing rail (hidden by the page at this width) is shown as a side sheet */
  .alerts-rail.m-open{
    display:block !important;
    position:fixed; top:0; right:0; bottom:0; z-index:260;
    width:min(400px, 100vw); border-left:1px solid var(--line-bright);
    box-shadow:-20px 0 60px rgba(0,0,0,.55);
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }
  .alerts-rail.m-open .m-alert-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:max(10px, env(safe-area-inset-top)); right:10px;
    width:40px; height:40px; border-radius:10px; cursor:pointer;
    background:var(--bg-2); border:1px solid var(--line); color:var(--text-mid); font-size:16px;
  }
  .alerts-rail.m-open .rail-head{ padding-right:48px; }
}

/* ==========================================================================
   PHONE (<=780px) - dashboard (index.html)
   ========================================================================== */
@media (max-width:780px){

  /* ---- header: compact, search gets its own full-width line ---- */
  .topbar-row{ padding:8px 12px; gap:8px 10px; }
  .topbar-row-main{ min-height:0; padding-bottom:8px; }
  .topbar-tagline,.brand-title small,.clock{ display:none !important; }
  .brand{ font-size:15px; min-width:0; }
  .search-wrap{ order:5; flex:1 1 100%; max-width:none; }
  .top-meta{ margin-left:auto; gap:8px; min-width:0; }
  .role-switch{ padding:4px 8px; max-width:46vw; }
  .role-switch label{ display:none; }
  .role-switch select{ max-width:100%; text-overflow:ellipsis; }
  .user-chip{ padding-left:8px; margin-left:0; }
  .user-meta{ max-width:34vw; }
  .user-meta #userNameLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-nav-toggle{ width:40px; height:40px; }
  .theme-toggle{ min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; }

  /* ---- action toolbar: ONE row you swipe sideways (was a 4-6 line wall of buttons) ---- */
  .action-toolbar{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px;
    padding:8px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .action-toolbar::-webkit-scrollbar{ display:none; }
  .toolbar-group{ flex:none; flex-wrap:nowrap; padding-right:10px; margin-right:0; }
  .toolbar-group-label{ display:none; }
  .tbtn{ flex:none; min-height:40px; padding:0 14px; font-size:13px; }

  /* ---- finger-sized targets ---- */
  .unit-item{ min-height:44px; }
  .type-item{ min-height:42px; }
  .icon-btn{ width:38px; height:38px; }
  .remote-btn{ min-height:38px; padding:0 12px; font-size:12.5px; }
  .cmd-btn{ min-height:44px; }
  .chip{ min-height:36px; display:inline-flex; align-items:center; flex:none; }
  .modal-close{ top:8px !important; right:8px !important; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center; font-size:20px; z-index:5; }

  /* iOS zooms the page when a field under 16px gets focus - stop that */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select,textarea{ font-size:16px !important; }
  input[type=checkbox],input[type=radio]{ width:20px; height:20px; }

  /* ---- main area ---- */
  .main{ padding:12px 12px calc(84px + env(safe-area-inset-bottom)); }   /* room for the alert button */
  .section-head{ flex-wrap:wrap; gap:8px; }
  .filter-chips{ max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .filter-chips::-webkit-scrollbar{ display:none; }

  /* ---- modals: full-screen sheets instead of tiny floating boxes ----
     (the modals set their width/max-height inline, hence !important) */
  .modal-overlay{ padding:0 !important; align-items:stretch; }
  .modal-overlay > .modal-box{
    width:100% !important; max-width:100% !important;
    min-height:100%; max-height:none !important;
    margin:0 !important; border-radius:0 !important; border-left:0; border-right:0;
    padding:48px 14px calc(20px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  .modal-box h4{ padding-right:34px; }

  /* two/three/four-column forms inside modals -> one column
     (exceptions: auto-fit grids, and the 3-part progress-bar rows) */
  [style*="grid-template-columns"]:not([style*="repeat"]):not([style*="34px"]){
    grid-template-columns:minmax(0,1fr) !important;
  }
  .modal-row{ flex-wrap:wrap; gap:4px 12px; }

  /* wide tables scroll sideways inside their own box instead of widening the page */
  .modal-box table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .modal-box pre,.modal-box code{ white-space:pre-wrap; word-break:break-word; }

  /* toasts: full width, clear of the notch */
  #toastBox{ left:10px; right:10px; top:max(10px, env(safe-area-inset-top)); max-width:none; }
}

/* ==========================================================================
   SMALL PHONE (<=640px) - device list as cards
   ========================================================================== */
@media (max-width:640px){
  .dtable{ overflow:visible; background:transparent; border:0; box-shadow:none; }
  .dtable-head{ display:none; }
  .drow{
    min-width:0;
    display:grid; align-items:center; gap:8px 10px;
    grid-template-columns:12px minmax(0,1fr) auto;
    grid-template-areas:
      "dot dev  stat"
      ".   uid  ip"
      ".   unit up"
      ".   act  act";
    margin-bottom:10px; padding:12px 12px;
    background:var(--bg-1); border:1px solid var(--line); border-radius:12px;
  }
  .drow:last-child{ border-bottom:1px solid var(--line); }
  .drow > :nth-child(1){ grid-area:dot; }
  .drow > :nth-child(2){ grid-area:dev; }
  .drow > :nth-child(3){ grid-area:uid; }
  .drow > :nth-child(4){ grid-area:unit; }
  .drow > :nth-child(5){ grid-area:ip; justify-self:end; }
  .drow > :nth-child(6){ grid-area:stat; justify-self:end; }
  .drow > :nth-child(7){ grid-area:up; justify-self:end; text-align:right; }
  .drow > :nth-child(8){ grid-area:act; }
  .drow .heartbeat{ max-width:100%; }
  .drow .row-actions{ justify-content:flex-start; flex-wrap:wrap; gap:8px;
    padding-top:8px; border-top:1px solid var(--line-soft); }
  .health-badge{ padding:4px; }
}

@media (max-width:520px){
  .kpi{ padding:11px 12px; }
  .kpi .kpi-val{ font-size:22px; margin-top:4px; }
  .kpi .kpi-label{ font-size:10.5px; }
  .brand-text{ min-width:0; }
}

/* ==========================================================================
   OTHER PAGES  (app-control.html, tv-access.html) - scoped by <body class="m-sub">
   so nothing here can touch the dashboard's own .row/.grow/.card classes.
   ========================================================================== */
@media (max-width:780px){
  body.m-sub header{ gap:8px; }
  body.m-sub header h1{ font-size:17px; min-width:60%; }
  body.m-sub .tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  body.m-sub .tabs::-webkit-scrollbar{ display:none; }
  body.m-sub .tab{ flex:none; padding:10px 14px; }
  body.m-sub .card{ padding:14px; }
  body.m-sub .grow{ min-width:0 !important; flex:1 1 100%; }
  body.m-sub .row select,body.m-sub .row input[type=text],
  body.m-sub .row input[type=search],body.m-sub .row input[type=password]{ max-width:100%; }
  body.m-sub .btn{ min-height:42px; }
  body.m-sub input:not([type=checkbox]):not([type=radio]):not([type=range]),
  body.m-sub select,body.m-sub textarea{ font-size:16px; }
  body.m-sub .tw{ -webkit-overflow-scrolling:touch; }
  body.m-sub .modal{ padding:0 !important; }
  body.m-sub .modal .card{ width:100% !important; min-height:100%; border-radius:0; margin:0; }
  body.m-sub #toast{ max-width:92vw; bottom:calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width:520px){
  body.m-sub .apps{ grid-template-columns:1fr !important; }
  body.m-sub .cat .hd b{ min-width:0; flex:1 1 100%; }
}

/* ==========================================================================
   TV WALL (tv.html) on a phone/tablet: 2 columns, scrolls vertically
   ========================================================================== */
@media (max-width:800px){
  body.m-tv #bar{ padding:8px 10px; gap:6px; }
  body.m-tv #bar h2{ font-size:14px; flex:1 1 100%; margin:0; }
  body.m-tv #bar input[type=search]{ width:auto; flex:1 1 130px; min-width:0; }
  body.m-tv #bar select,body.m-tv #bar input,body.m-tv #bar .btn{ min-height:38px; }
  body.m-tv #clock{ display:none; }
  body.m-tv #grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none; grid-auto-rows:minmax(150px, 30vh);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.m-tv #big{ padding:0; }
  body.m-tv #bigBox{ flex-direction:column; gap:8px; }
  body.m-tv #bigPic{ border-radius:0; flex:1 1 55%; min-height:0; }
  body.m-tv #side{ width:100%; flex:1 1 45%; min-height:0; border-radius:0; }
  body.m-tv #confirm .card{ width:92vw; }
}
@media (max-width:480px){
  body.m-tv #grid{ grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(180px, 32vh); }
}

/* Respect reduced-motion for the drawer/sheet transitions */
@media (prefers-reduced-motion:reduce){
  .side-rail{ transition:none; }
}