/* ==========================================================================
   Gateway ▸ device navigator (Gateway_Navigator.py) — the building map, the
   jump row and the "now showing" strip above the device UI replica.
   Colours are the bot_theme SEMANTIC tokens (--bot-brand-*, --bot-surface-*,
   --bot-text-*, --bot-status-*): the legacy --bot-navy / --bot-bg-card aliases
   are pinned to light values by bot_cardkit.css and never follow the theme.
   ========================================================================== */
.gw-nav{ margin-bottom:.6rem; }
.gw-nav h2{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.gw-nav-tagline{ font-family:var(--bot-font-family); font-size:.8rem; font-weight:400;
  color:var(--bot-text-secondary); letter-spacing:0; }

/* ---- the jump row --------------------------------------------------------- */
.gw-nav-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.gw-nav-search{ max-width:300px; background:var(--bot-surface-input-bg); color:var(--bot-text-primary);
  border-color:var(--bot-border-default); }
.gw-nav-search::placeholder{ color:var(--bot-text-muted); opacity:.8; }
.gw-nav-jump-wrap .input-group{ flex-wrap:nowrap; }
.gw-nav-jump-label{ font-size:.78rem; }
.gw-nav-jump .Select-control, .gw-nav-jump .Select-menu-outer{ font-size:.82rem; }
.gw-nav-jump .Select-control{ border-radius:0 .25rem .25rem 0; height:31px; }
.gw-nav-jump .Select-placeholder, .gw-nav-jump .Select-value{ line-height:29px !important; }
.gw-nav-jump .Select-input{ height:29px; }
.gw-nav-meta{ color:var(--bot-text-secondary); font-size:.78rem; }
.gw-nav-settings{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.5rem .6rem;
  border:1px dashed var(--bot-border-default); border-radius:var(--bot-radius-md, 8px);
  background:var(--bot-surface-table-row-alt); }

/* ---- now showing ---------------------------------------------------------- */
.gw-nav-current{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.45rem .8rem; border:1px solid var(--bot-border-default);
  border-left:4px solid var(--bot-brand-gold); border-radius:var(--bot-radius-md, 8px);
  background:var(--bot-surface-card-bg); box-shadow:var(--bot-shadow-sm); }
.gw-cur-name{ font-family:var(--bot-font-family-head); font-weight:700; font-size:1.15rem;
  color:var(--bot-brand-navy); line-height:1.1; }
.gw-cur-status{ font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.gw-cur-what{ font-weight:600; color:var(--bot-text-primary); font-size:.9rem; }
.gw-cur-reasons{ font-size:.76rem; color:var(--bot-tint-warning-ink, #8a6d00); }

/* ---- the building map ----------------------------------------------------- */
.gw-map-wrap{ padding:.35rem .5rem .45rem; border:1px solid var(--bot-border-default);
  border-radius:var(--bot-radius-md, 8px); background:var(--bot-surface-card-bg);
  max-height:52vh; overflow:auto; }                 /* the device's pages stay within reach below */
.gw-map{ display:grid; grid-template-columns:76px repeat(var(--gw-cols, 2), minmax(220px, 1fr));
  gap:4px 8px; align-items:stretch; }
.gw-corner{ }
.gw-col-head{ text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bot-text-secondary); padding:.05rem 0 .1rem; border-bottom:1px solid var(--bot-border-default); }
.gw-row-label{ display:flex; align-items:center; justify-content:flex-end; text-align:right;
  padding-right:.5rem; font-family:var(--bot-font-family-head); font-weight:700;
  color:var(--bot-brand-navy); border-right:3px solid var(--bot-brand-gold); font-size:.9rem;
  line-height:1.1; overflow:hidden; }
.gw-cell{ display:flex; flex-direction:column; gap:4px; min-height:40px; border-radius:8px;
  background:var(--bot-surface-table-row-alt); padding:3px; }
.gw-else{ display:grid; grid-template-columns:76px 1fr; gap:4px 8px; margin-top:5px; }
.gw-row-label--else{ font-size:.78rem; color:var(--bot-text-secondary); border-right-color:var(--bot-border-default); }
.gw-cell--else{ flex-direction:row; flex-wrap:wrap; }
.gw-cell--else .gw-tile{ flex:0 1 230px; }

/* ---- a tile: one line name · chips · address, one line what · seen · °C · fw -- */
.gw-tile{ position:relative; cursor:pointer; border:1px solid var(--bot-border-default); border-radius:7px;
  background:var(--bot-surface-card-bg); padding:.28rem .5rem .26rem; box-shadow:var(--bot-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .15s ease;
  user-select:none; min-width:0; }
.gw-tile:hover{ transform:translateY(-1px); border-color:var(--bot-brand-navy);
  box-shadow:var(--bot-shadow-card-hover, 0 6px 16px rgba(0,0,0,.14)); }
.gw-tile--active{ border:2px solid var(--bot-brand-gold); padding:calc(.28rem - 1px) calc(.5rem - 1px) calc(.26rem - 1px);
  background:var(--bot-tint-accent-bg, var(--bot-surface-card-bg));
  background:color-mix(in srgb, var(--bot-brand-gold) 14%, var(--bot-surface-card-bg)); }
.gw-tile--dim{ opacity:.22; filter:grayscale(.7); }
.gw-tile--dim:hover{ opacity:.6; }
.gw-tile--compact .gw-tile-sub{ display:none; }
.gw-tile-name{ display:flex; align-items:center; gap:.4rem; min-width:0; flex-wrap:wrap; }
.gw-tile-title{ font-weight:700; color:var(--bot-brand-navy); font-size:.9rem; white-space:nowrap; }
.gw-tile-ip{ margin-left:auto; font-family:ui-monospace, Consolas, monospace; font-size:.7rem;
  color:var(--bot-text-secondary); flex:0 0 auto; }
.gw-tile-sub{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:baseline; font-size:.72rem;
  color:var(--bot-text-secondary); line-height:1.25; margin-top:2px; min-width:0; }
.gw-tile-what{ color:var(--bot-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.gw-chip{ font-size:.64rem; padding:0 7px; border-radius:999px; line-height:1.5; white-space:nowrap;
  border:1px solid var(--bot-border-strong, var(--bot-border-default)); color:var(--bot-text-primary);
  background:var(--bot-surface-pill-bg, var(--bot-surface-table-row-alt)); cursor:pointer; }
.gw-chip:hover{ background:var(--bot-brand-navy); color:var(--bot-text-on-navy, #fff); border-color:var(--bot-brand-navy); }
.gw-viewing{ margin-left:auto; color:var(--bot-brand-gold-dark, var(--bot-brand-gold)); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:.62rem; }

/* ---- status dots: Device Health's colours ---------------------------------- */
.gw-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; display:inline-block;
  box-shadow:0 0 0 2px var(--bot-surface-card-bg); }
.gw-dot--success{ background:var(--bot-status-success, #2e9e5b); }
.gw-dot--warning{ background:var(--bot-status-warning, #e0a100); }
.gw-dot--danger{ background:var(--bot-status-danger, #c0392b);
  box-shadow:0 0 0 2px var(--bot-surface-card-bg), 0 0 6px var(--bot-status-danger, #c0392b); }
.gw-dot--secondary{ background:var(--bot-status-idle, #9aa3ad); }

/* ---- the phone: one column, the floor label as a band ---------------------- */
@media (max-width: 900px){
  .gw-map, .gw-else{ display:block; }
  .gw-corner, .gw-col-head{ display:none; }
  .gw-row-label{ justify-content:flex-start; text-align:left; border-right:0;
    border-left:3px solid var(--bot-brand-gold); padding:.15rem .5rem; margin:.45rem 0 .2rem; }
  .gw-cell{ margin-top:3px; }
  .gw-cell:empty{ display:none; }
  .gw-cell--else .gw-tile{ flex:1 1 100%; }
  .gw-nav-jump-wrap{ flex:1 1 100%; min-width:0; }
  .gw-nav-jump-wrap .input-group{ width:100%; }
  #device-select{ min-width:0 !important; flex:1 1 auto; width:1%; }
  .gw-nav-jump{ min-width:0 !important; width:100%; }
  .gw-map-wrap{ max-height:none; }
}