/* Foundry 4.0 MES: iPad / iPhone layer for all seven dashboard pages.
   Loaded last in <head>. Desktop (> 1180px wide, mouse) is unchanged.
   Page-specific rules are scoped by <body data-page="...">:
   production, safety, shopfloor, iiot, assets, genealogy, trends, oee, workorders.        */

/* ======================= All pages ======================= */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Fixed-height dashboard pages: 100vh on iOS includes the hidden Safari toolbars */
body[data-page="shopfloor"], body[data-page="genealogy"], body[data-page="assets"] { height: 100vh; height: 100dvh; }
body[data-page="production"], body[data-page="safety"], body[data-page="iiot"], body[data-page="trends"] { min-height: 100dvh; }

/* Header wraps instead of pushing the page sideways when it doesn't fit.
   On a desktop where it fits on one row, nothing changes. */
header { flex-wrap: wrap; row-gap: 8px; }
header .status { margin-left: auto; }

.mobile-only, .mobile-scrim, .sheet-bar, .detail-back, .rotate-hint { display: none; }

/* Touch devices: larger targets, no auto-zoom on inputs, no sticky hover */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  #actor-picker { text-transform: none; letter-spacing: 0; max-width: 180px; }
  .theme-toggle-btn, .range-btn { min-height: 36px; padding: 6px 12px; }
  nav.top-nav a { padding: 10px 12px; }
  .fp-shape:hover { filter: none; }
  .zone-region:hover { opacity: inherit; }
  /* KPI info tooltips: tap-to-toggle only (iOS keeps :hover stuck after a tap) */
  .kpi-card:hover .kpi-tooltip { opacity: 0; visibility: hidden; }
  .kpi-card.tooltip-open .kpi-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .kpi-info-icon { width: 24px; height: 24px; }
}

@media (max-width: 1180px) {
  .brand .sub { display: none; }
  .mobile-only { display: inline-flex; align-items: center; }
  header { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  header > div:first-child { flex: 1 1 100%; min-width: 0; }
  nav.top-nav {
    flex: 1; min-width: 0; margin-left: 14px;
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  nav.top-nav::-webkit-scrollbar { display: none; }
  nav.top-nav a { white-space: nowrap; flex-shrink: 0; }
  .status { flex: 1 1 100%; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-end; }
}

@media (max-width: 1024px) {
  main { padding: 16px; }
}

@media (max-width: 640px) {
  .brand .logo-img { height: 28px; }
  #actor-picker { max-width: 150px; }
  main { padding: 12px; }
  .ticker-wrap { padding: 8px 0 !important; }
  .ticker-track { font-size: 0.85rem !important; }
  footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* KPI rows: compact two-up cards on phones. !important is needed on
     Production because its script sets the column count inline. */
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 8px !important; }
  .kpi-card { padding: 12px 14px !important; }
  .kpi-value { font-size: 1.5rem !important; }
  .kpi-tooltip { width: min(220px, calc(100vw - 40px)); }
  .kpi-row > .kpi-card:nth-child(odd) .kpi-tooltip  { left: 0; right: auto; }
  .kpi-row > .kpi-card:nth-child(even) .kpi-tooltip { left: auto; right: 0; }
  .kpi-row > .kpi-card:nth-child(odd) .kpi-tooltip,
  .kpi-row > .kpi-card:nth-child(even) .kpi-tooltip,
  .kpi-row > .kpi-card.tooltip-open .kpi-tooltip { transform: none !important; }
  .kpi-row > .kpi-card:nth-child(odd) .kpi-tooltip::after  { left: 24px; }
  .kpi-row > .kpi-card:nth-child(even) .kpi-tooltip::after { left: auto; right: 18px; transform: none; }
}

/* ======================= Production ======================= */
@media (max-width: 1024px) {
  body[data-page="production"] select#asset-select { margin-left: 10px; max-width: 220px; }
}
@media (max-width: 860px) {
  /* The page's own 860px breakpoint loses to the inline column count set by its script */
  body[data-page="production"] .charts-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  body[data-page="production"] header > div:first-child { flex-wrap: wrap; gap: 8px 0; }
  body[data-page="production"] select#asset-select { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
  body[data-page="production"] .chart-panel { padding: 14px 14px 8px; }
  body[data-page="production"] .chart-container { height: 200px; }
}

/* ======================= Safety & Security ======================= */
@media (max-width: 1024px) {
  body[data-page="safety"] .zone-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body[data-page="safety"] .zone-grid { gap: 10px; }
  body[data-page="safety"] .alert-feed { max-height: 50dvh; }
}

/* ======================= IIoT Sensors ======================= */
@media (max-width: 640px) {
  body[data-page="iiot"] .sensor-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ======================= Trends ======================= */
@media (max-width: 640px) {
  body[data-page="trends"] .chart-card { padding: 14px; }
  body[data-page="trends"] .chart-wrap { height: 220px; }
  body[data-page="trends"] .range-btn { flex: 1; }
}

/* ======================= Shop Floor ======================= */
@media (max-width: 1180px) {
  /* Asset tree: slide-in drawer opened by the header "Assets" button */
  body[data-page="shopfloor"] .tree-panel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(300px, 85vw);
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.45);
  }
  body.tree-open .tree-panel { transform: none; }
  body.tree-open .mobile-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.5); }
  body[data-page="shopfloor"] .tree-item { padding-top: 12px; padding-bottom: 12px; }

  /* Faceplate: right-side sheet shown only while something is selected */
  body[data-page="shopfloor"] .faceplate-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: min(360px, 90vw);
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(100%); transition: transform 0.2s ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.45);
  }
  body.faceplate-open .faceplate-panel { transform: none; }
  body[data-page="shopfloor"] .faceplate-close { display: none; }
  body[data-page="shopfloor"] .sheet-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin: -4px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  }
  .sheet-close {
    min-height: 40px; padding: 0 16px; border-radius: 6px; cursor: pointer;
    background: var(--panel-raised); color: var(--text-primary); border: 1px solid var(--border);
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .sheet-grabber { width: 0; }

  /* Floor plan keeps a readable minimum size and pans instead of shrinking */
  body[data-page="shopfloor"] .canvas-wrap {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 12px; -webkit-overflow-scrolling: touch;
  }
  body[data-page="shopfloor"] #floorplan { display: block; flex-shrink: 0; width: 100%; min-width: 1100px; max-width: none; height: auto; }
  body[data-page="shopfloor"] .canvas-legend { position: static; width: max-content; margin-top: 10px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  body[data-page="shopfloor"] .faceplate-panel {
    top: auto; left: 0; width: 100%; max-height: 72dvh;
    border-left: 0; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0;
    padding-top: 8px; transform: translateY(100%);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
  }
  .sheet-grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--border); }
  .floor-status-panel {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100% !important; max-height: 85dvh; border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .floor-status-header { cursor: default; }
  .floor-status-header .drag-hint { display: none; }
  .floor-status-body { padding: 14px 16px; }
  .gm-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) and (orientation: portrait) {
  body[data-page="shopfloor"] .canvas-wrap { justify-content: flex-start; }
  body[data-page="shopfloor"] #floorplan { margin-top: auto; }
  body[data-page="shopfloor"] .canvas-legend { margin-bottom: auto; }
  body[data-page="shopfloor"] .rotate-hint {
    display: block; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px;
    background: var(--panel); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.78rem;
    position: sticky; left: 0; width: calc(100vw - 24px);
  }
}

/* ======================= Genealogy ======================= */
@media (max-width: 1024px) {
  body[data-page="genealogy"] .content-split {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px;
  }
  body[data-page="genealogy"] .vessel-col {
    grid-column: 1 / -1; width: auto; flex-direction: row;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  body[data-page="genealogy"] .vessel-card { min-width: 210px; flex-shrink: 0; }
  body[data-page="genealogy"] .list-col { width: auto; min-height: 0; }
  body[data-page="genealogy"] .detail-panel { min-height: 0; padding: 18px; }
  body[data-page="genealogy"] .detail-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-page="genealogy"] .heat-tab { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  body[data-page="genealogy"] .filter-chip { min-height: 34px; }
  body[data-page="genealogy"] .heat-row { padding: 12px 10px; }
}
@media (max-width: 700px) {
  body[data-page="genealogy"] .content-split { display: block; }
  body[data-page="genealogy"] .vessel-col { margin-bottom: 12px; }
  body[data-page="genealogy"] .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body[data-page="genealogy"] .kpi-value { font-size: 1.3rem !important; }
  body[data-page="genealogy"] table.chem-table { display: block; overflow-x: auto; white-space: nowrap; }
  body[data-page="genealogy"] .timeline-item .t-time { width: 72px; }
}

/* ======================= Asset Registry ======================= */
@media (max-width: 1024px) {
  body[data-page="assets"] .toolbar { flex-wrap: wrap; }
  body[data-page="assets"] .toolbar input { flex: 1 1 100%; }
  body[data-page="assets"] .toolbar select { flex: 1 1 0; width: auto; min-width: 0; }
  body[data-page="assets"] .detail-panel { width: 320px; }
}
@media (max-width: 700px) {
  body[data-page="assets"] .content-split { display: block; }
}

/* ============ Shared phone pattern: list page + full-screen detail ============ */
@media (max-width: 700px) {
  body[data-page="genealogy"], body[data-page="assets"] { height: auto; min-height: 100dvh; overflow: auto; }
  body[data-page="genealogy"] main, body[data-page="assets"] main { display: block; }
  body[data-page="genealogy"] .list-panel, body[data-page="assets"] .list-panel { overflow: visible; flex: none; }

  body[data-page="genealogy"] .detail-panel, body[data-page="assets"] .detail-panel {
    position: fixed; inset: 0; z-index: 70; width: auto; border: 0; border-radius: 0;
    padding: calc(64px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    transform: translateX(100%); transition: transform 0.2s ease;
    -webkit-overflow-scrolling: touch;
  }
  body.detail-open .detail-panel { transform: none; }
  body[data-page="genealogy"] .detail-back, body[data-page="assets"] .detail-back {
    display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 71;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background: var(--panel-raised); border-bottom: 1px solid var(--border);
    transform: translateX(100%); transition: transform 0.2s ease;
  }
  body.detail-open .detail-back { transform: none; }
  .detail-back button {
    min-height: 40px; padding: 0 14px; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--molten); border: 1px solid var(--molten);
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tree-panel, .faceplate-panel, .detail-panel, .detail-back { transition: none !important; }
}

/* Connection banner (pwa-register.js) */
#conn-banner { display: none; }
#conn-banner.offline {
  display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 1000;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: #b3261e; color: #fff; font: 600 14px/1.3 'Inter', system-ui, sans-serif; text-align: center;
}

/* ======================= ui-cleanup-1: frozen header ======================= */
/* OEE, Trends, Safety & Security and Work Orders keep the header (logo, menu,
   "Acting as", LIVE) at the top while the page scrolls. The header draws its own
   background so content never shows through; the iOS status-bar inset moves from
   the body into the header so the frozen header never slides under the notch. */
body[data-page="oee"], body[data-page="trends"], body[data-page="safety"], body[data-page="workorders"] { padding-top: 0; }
body[data-page="oee"] > header, body[data-page="trends"] > header,
body[data-page="safety"] > header, body[data-page="workorders"] > header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  padding-top: calc(18px + env(safe-area-inset-top));
  transition: box-shadow .15s ease;
}
body.hdr-stuck > header { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (max-width: 1180px) {
  body[data-page="oee"] > header, body[data-page="trends"] > header,
  body[data-page="safety"] > header, body[data-page="workorders"] > header { padding-top: calc(10px + env(safe-area-inset-top)); }
}
/* Phones: tighter status row so the frozen header stays short (about 90 px) */
@media (max-width: 640px) {
  body[data-page="oee"] > header .status, body[data-page="trends"] > header .status,
  body[data-page="safety"] > header .status, body[data-page="workorders"] > header .status { gap: 6px 10px; }
  body[data-page="oee"] > header, body[data-page="trends"] > header,
  body[data-page="safety"] > header, body[data-page="workorders"] > header { row-gap: 6px; padding-bottom: 8px; }
}
/* Work Orders: the order queue sticks just below the frozen header, not under it */
body[data-page="workorders"] .queue { top: calc(var(--hdr-h, 0px) + 14px); }
/* Tablets/phones: room after the last tab so its badge is never clipped */
@media (max-width: 1180px) { nav.top-nav { padding-right: 10px; } }

/* ======================= ui-cleanup-1: safety badge on the menu ======================= */
nav.top-nav a .nav-badge {
  display: inline-block; min-width: 8px; height: 8px; margin-left: 6px; border-radius: 999px;
  vertical-align: 1px; background: var(--good); box-shadow: 0 0 6px var(--good);
}
nav.top-nav a .nav-badge.count {
  min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; vertical-align: 0;
  font: 700 0.62rem/16px 'JetBrains Mono', 'IBM Plex Mono', monospace; letter-spacing: 0; text-align: center; color: #fff;
}
nav.top-nav a .nav-badge.warn { background: var(--alert); box-shadow: 0 0 6px var(--alert); color: var(--mx-12161c, #12161c); }
nav.top-nav a .nav-badge.crit { background: var(--critical); box-shadow: 0 0 6px var(--critical); animation: nav-badge-pulse 1.2s ease-in-out infinite; }
nav.top-nav a .nav-badge.stale { background: var(--text-secondary); box-shadow: none; }
@keyframes nav-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { nav.top-nav a .nav-badge.crit { animation: none; } }