/**
 * OCP Pipeline Monitor — Responsive layout (mobile / tablet)
 * Breakpoints: 1100 · 900 · 768 · 600 · 480
 */

/* ─ Mode banner Live / Simulation ─ */
.ocp-mode-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;margin-bottom:1rem;border-radius:10px;
  font-size:12px;line-height:1.5;
}
.ocp-mode-sim{background:rgba(29,158,117,.15);border:1px solid rgba(29,158,117,.4);color:#a7f3d0}
.ocp-mode-live{background:rgba(226,75,74,.15);border:1px solid rgba(226,75,74,.45);color:#fecaca}
.ocp-mode-banner-btn{
  margin-left:auto;padding:6px 14px;border-radius:8px;border:none;
  font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.ocp-mode-sim .ocp-mode-banner-btn{background:#16a34a;color:#fff}
.ocp-mode-live .ocp-mode-banner-btn{background:#dc2626;color:#fff}

/* ─ PMP mobile SCADA ─ */
.pmp-mobile-wrap{display:none;padding:14px;background:var(--pmp-surface);border:1px solid var(--pmp-border);border-radius:10px;margin-bottom:14px}
.pmp-mobile-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pmp-mobile-title{font-size:15px;font-weight:700;color:var(--pmp-accent)}
.pmp-mobile-sub{font-size:11px;color:var(--pmp-text-muted);margin-top:2px}
.pmp-mobile-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.pmp-mobile-kpi{background:var(--pmp-surface-2);border:1px solid var(--pmp-border);border-radius:10px;padding:12px;text-align:center}
.pmp-mobile-kpi .lbl{font-size:10px;color:var(--pmp-text-muted);text-transform:uppercase;margin-bottom:4px}
.pmp-mobile-kpi .val{font-size:20px;font-weight:700;color:var(--pmp-accent)}
.pmp-mobile-kpi .val{font-size:22px;font-variant-numeric:tabular-nums}
.pmp-mobile-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.pmp-mobile-actions .pmp-btn{min-height:48px;font-size:13px;padding:12px 16px;font-weight:600}
.pmp-mobile-actions .pmp-btn-primary{grid-column:span 2;min-height:52px;font-size:14px}
.pmp-mobile-pump .pmp-btn{min-height:40px;min-width:76px;font-weight:600}
#pmp-mobile-full-btn{min-height:40px;font-weight:600}
@media(max-width:480px){
  .pmp-mobile-actions{grid-template-columns:1fr}
  .pmp-mobile-actions .pmp-btn-primary{grid-column:span 1}
}
.pmp-mobile-setpoint{margin-bottom:14px}
.pmp-mobile-setpoint label{font-size:12px;display:block;margin-bottom:6px}
.pmp-mobile-setpoint input[type=range]{width:100%;accent-color:var(--pmp-accent)}
.pmp-mobile-pumps{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.pmp-mobile-pump{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:var(--pmp-surface-2);border:1px solid var(--pmp-border);border-radius:8px;font-size:12px}
.pmp-mobile-pump.on{border-color:#16a34a;background:rgba(22,163,74,.08)}
.pmp-mobile-pump span{display:block;font-size:10px;color:var(--pmp-text-muted)}
#pn-pmp.pmp-mobile-active .pmp-scada-wrap{display:none!important}
#pn-pmp.pmp-mobile-active .pmp-mobile-wrap{display:block!important}

@media(max-width:768px){
  #pn-pmp:not(.pmp-mobile-off) .pmp-scada-wrap{display:none}
  #pn-pmp:not(.pmp-mobile-off) .pmp-mobile-wrap{display:block}
}


body {
  overflow-x: hidden;
}

/* ─ Shell ─ */
.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 1;
}

/* ─ Header ─ */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #042f3a 0%, #0c4a6e 45%, #0e7490 100%);
  border-radius: 14px;
  box-shadow: 0 4px 32px rgba(6, 182, 212, 0.22);
}

.header-bar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─ KPI strip ─ */
.header-kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}

/* ─ Tab bar ─ */
.tabs {
  display: flex;
  border-bottom: 2px solid rgba(34, 211, 238, 0.2);
  margin-bottom: 1rem;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap;
}

.tabs::-webkit-scrollbar {
  height: 4px;
}

.tab {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─ Slurry 3D profile grid ─ */
.s3d-profile-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-top: 14px;
}

/* ─ Table scroll helpers ─ */
.responsive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─ Planning form split ─ */
@media (max-width: 900px) {
  .plan-form-grid-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ─ Tablet (≤1100px) ─ */
@media (max-width: 1100px) {
  .header-kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }

  #st-grid,
  #hyd-grid,
  #phist-grid,
  #stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─ Tablet (≤900px) ─ */
@media (max-width: 900px) {
  .app-shell {
    padding: 1rem 0.75rem;
  }

  .header-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .header-bar > div:first-child {
    flex-wrap: wrap;
  }

  .header-bar-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .header-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  .card {
    padding: 12px !important;
  }

  .s3d-profile-grid {
    grid-template-columns: 1fr;
  }

  #tank-grid {
    grid-template-columns: 1fr !important;
  }

  .topo-stn {
    min-width: 0;
    flex: 1 1 140px;
  }

  .pmp-scada-svg {
    min-height: 380px;
  }

  /* Inline 2-col grids → stack */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline 3-col grids → stack */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:repeat(7"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ai-chat-panel {
    width: calc(100vw - 32px) !important;
    max-width: 390px;
  }
}

/* ─ Mobile landscape / small tablet (≤768px) ─ */
@media (max-width: 768px) {
  .header-bar h1 {
    font-size: 16px !important;
  }

  .header-bar img {
    height: 40px !important;
  }

  .header-kpi-row {
    gap: 8px;
  }

  .kpi .v {
    font-size: 18px;
  }

  .kpi {
    padding: 10px 12px;
  }

  #ocp-tutorial-launch-btn {
    bottom: 72px;
    right: 12px;
    font-size: 10px;
    padding: 8px 12px;
  }

  .ai-chat-widget {
    right: 12px !important;
    bottom: 12px !important;
  }

  .critical-alert-banner {
    flex-wrap: wrap;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

/* ─ Phone (≤600px) ─ */
@media (max-width: 600px) {
  .app-shell {
    padding: 0.75rem 0.5rem;
  }

  .header-bar-controls button,
  .header-bar-controls .lang-btn {
    min-height: 40px;
  }

  .header-bar {
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
  }

  .header-kpi-row {
    grid-template-columns: 1fr;
  }

  #st-grid,
  #hyd-grid,
  #phist-grid,
  #stats-grid {
    grid-template-columns: 1fr !important;
  }

  .header-bar-controls button {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  .header-bar-controls > div:last-child {
    width: 100%;
    text-align: left !important;
  }

  div[style*="grid-template-columns:repeat(7"] {
    grid-template-columns: 1fr !important;
  }

  .pmp-scada-svg {
    min-height: 280px;
  }

  .pmp-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  #frm-tags-table,
  .psp-log-table,
  #b3d-interfaces-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ai-chat-panel {
    width: calc(100vw - 24px) !important;
    max-width: none;
    right: 0;
    bottom: 60px;
  }

  #sim-welcome-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  #notif-hub-panel,
  #audit-panel-inner {
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto;
  }
}

/* ─ Small phone (≤480px) ─ */
@media (max-width: 480px) {
  .tab {
    font-size: 10px !important;
    padding: 7px 8px !important;
  }

  .header-bar-controls {
    gap: 6px;
  }

  .lang-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .kpi .v {
    font-size: 16px;
  }

  .kpi .l {
    font-size: 10px;
  }
}