/* ═══════════════════════════════════════════
   responsive.css — Adaptive / Responsive Breakpoints
   ═══════════════════════════════════════════ */

/* ── ≤1366px (common laptops): the site-view toolbar's colour Legend is the widest
   row on the right and forces the whole controls block to wrap awkwardly below the
   KPIs. Hide the legend caption + colour keys here (the "Colours up to date/Loading"
   status marker is kept — it lives in the same row but stays visible). ── */
@media(max-width:1366px){
  .sld-legend .sld-tb-cap,.sld-legend-items{display:none}
}

/* ── XL: ≤1200px (tablets landscape, small laptops) ── */
@media(max-width:1200px){
  .af-info-grid{grid-template-columns:repeat(3,1fr)}
  .sld-panel.open{width:300px}
  .sld-panel-inner{width:300px}
  .alarm-table th,.alarm-table td{padding:6px 6px;font-size:var(--fs-xs)}
  .inv-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* ── LG: ≤1024px (tablets, narrow windows) ── */
@media(max-width:1024px){
  .sidebar{width:180px}
  :root{--sidebar-w:180px}
  .modal-panel-xwide{width:calc(100vw - 24px)}
  .notify-panel{width:320px}
  .kpi .n{font-size:18px}
  .kpi{padding:10px 14px}
  .sld-toolbar{font-size:var(--fs-xs);padding:4px 12px}
  .profile-item .k{width:160px}
}

/* ── MD: ≤768px (phones landscape, small tablets) ── */
@media(max-width:768px){
  body{overflow:auto}
  .app-layout{flex-direction:column}

  /* Sidebar → horizontal menu */
  .sidebar{width:100%;height:auto;max-height:50px;overflow:hidden;flex-direction:row;border-right:none;border-bottom:1px solid var(--border)}
  .sidebar.sb-expanded{max-height:none}
  .sb-brand{padding:10px 12px}
  .sb-nav{display:flex;overflow-x:auto;padding:0 8px;gap:2px}
  .sb-item{padding:8px 12px;font-size:12px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .sb-item.active{border-left:none;border-bottom-color:var(--cyan)}
  .sb-user{display:none}
  .sb-sep{display:none}
  .sb-parent{padding:8px 12px}

  /* Main content */
  .main-area{height:auto;min-height:0}
  .content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

  /* KPI */
  .kpi-row{padding:10px 12px;gap:8px}
  .kpi{min-width:100px;padding:10px 12px}
  .kpi .n{font-size:18px}

  /* Filters */
  .alarm-filters{flex-wrap:wrap;padding:8px 12px;gap:6px}
  .alarm-filters select,.alarm-filters input{font-size:11px;padding:5px 8px;min-width:80px;flex:1}

  /* Tables */
  .alarm-table{table-layout:auto}
  .alarm-table th,.alarm-table td{padding:6px 4px;font-size:var(--fs-xs)}

  /* Modals full-width */
  .modal-panel,.modal-panel-wide,.modal-panel-xwide{width:calc(100vw - 16px);max-width:100vw}
  .modal-body{max-height:calc(100vh - 120px)}

  /* Info grid */
  .af-info-grid{grid-template-columns:repeat(2,1fr);gap:6px 10px}
  .af-pipeline,.af-ct-pipeline{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .af-stage{min-width:90px}
  .af-ct-stage{min-width:110px}
  .af-h-detail{max-width:200px}

  /* Site header */
  .site-header{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .site-btns{flex-wrap:wrap}

  /* Inverter grid */
  .inv-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:0 12px 12px}

  /* Notification panel */
  .notify-panel{width:calc(100vw - 16px);right:8px;border-radius:0 0 8px 8px}

  /* SLD panel */
  .sld-panel.open{width:260px}
  .sld-panel-inner{width:260px}

  /* Popups */
  .ticket-popup{width:calc(100vw - 32px)}

  /* Map */
  .map-overlay{min-width:200px;max-width:280px}

  /* Settings */
  .setting-row input,.setting-row textarea,.setting-row select{width:200px}
  .profile-item .k{width:120px}
  #pf-key{width:200px}

  /* Audit */
  .audit-filters{gap:6px}
  .audit-table td{max-width:120px}
}

/* ── SM: ≤480px (phones portrait) ── */
@media(max-width:480px){
  .af-info-grid{grid-template-columns:1fr 1fr;gap:4px 8px}
  .kpi-row{flex-direction:column}
  .kpi{min-width:0}
  .alarm-table{font-size:var(--fs-micro)}
  .topbar{padding:0 10px;height:42px}
  .breadcrumb{font-size:11px}

  /* SLD full-width bottom panel */
  .sld-wrap{flex-direction:column}
  .sld-panel.open{width:100%;height:50vh}
  .sld-panel-inner{width:100%}

  /* Login */
  .login-card{width:calc(100vw - 32px);padding:24px}

  /* Settings */
  .setting-row{flex-direction:column;align-items:flex-start;gap:6px}
  .setting-row input,.setting-row textarea,.setting-row select{width:100%}
  #pf-key{width:100%}
  .profile-item{flex-direction:column;align-items:flex-start}
  .profile-item .k{width:auto}
  .profile-item input{width:100%}

  /* KPI numbers */
  .kpi .n{font-size:16px}
  .kpi .l{font-size:9px}

  /* Map overlay compact */
  .map-overlay{min-width:160px;max-width:calc(100vw - 24px);padding:10px 12px}
  .map-overlay h3{font-size:12px}

  /* Tables extra compact */
  .alarm-table th,.alarm-table td{padding:4px 3px}
  .af-h-detail{max-width:120px}

  /* Ticket popup */
  .ticket-popup{width:calc(100vw - 16px);max-width:100vw}

  /* Sync jobs */
  .sj-timeline-col{width:10px;height:20px}
  .sj-dot{width:8px;height:8px}
}

/* ── XS: ≤360px (very small phones) ── */
@media(max-width:360px){
  .login-card{padding:16px}
  .login-card h1{font-size:16px}
  .login-card h1 .sun{font-size:22px}
  .sb-brand span{font-size:12px}
  .topbar{height:38px}
  .breadcrumb{font-size:10px;gap:4px}
  .kpi .n{font-size:14px}
  .af-info-grid{grid-template-columns:1fr;gap:4px}
  .af-node{width:30px;height:30px;font-size:12px}
  .af-label{font-size:10px;max-width:80px}
}