/* GhostESP Dashboard shell — persistent header + sidebar + workspace.
   Load this stylesheet LAST so it wins the layout fights with the
   console/mirror/files/crash CSS that was written for the old tab layout. */

/* Dim the animated dot terrain with the shared tinted scrim
   (see .page-scrim in polish.css). The console and workspace panels
   carry their own backgrounds, so this stays subtle by design. */

/* App-shell layout. The shell is pinned to the viewport under the site nav and
   only the workspace pane scrolls, so the header and sidebar stay put instead of
   scrolling away, and nothing ever slides underneath the header. That is what
   lets the header stay transparent on every tab — see .dash-header below. */
.dash-shell {
  position: relative;
  z-index: 1;
  height: calc(100vh - var(--nav-height, 60px));
  height: calc(100dvh - var(--nav-height, 60px));
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Nav is in normal flow on this page (serial.css makes it relative),
   so NO top padding — the header sits flush under it. Sticky top: 0
   takes over when the nav scrolls away. */
.dash-shell.serial-page {
  padding-top: 0;
}

/* The v2.1 announcement bar floats above the fixed nav and reads as an
   empty strip above the dashboard title bar — hide it on this page. */
body:has(.dash-shell) .announce-bar {
  display: none !important;
}

/* ---- Header ---- */
.dash-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border, var(--serial-border));
  padding: 0.45rem 1rem 0.45rem 1.25rem;
}

/* Header controls stay on one compact line. The base .btn/.btn-small sizes are
   for page CTAs and make the bar noticeably taller than it needs to be. */
.dash-header .btn-small {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}

.dash-header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: none;
  margin: 0;
  flex-wrap: wrap;
}

.dash-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dash-title-icon {
  font-size: 1.5rem;
  color: var(--primary-color, #00ff80);
  line-height: 1;
}

.dash-title-name {
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.2;
  color: var(--text-primary, var(--serial-text));
  font-family: var(--font-sans, var(--serial-font-sans));
}

.dash-title-sub {
  font-size: 0.66rem;
  color: var(--text-dim, var(--serial-secondary));
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.dash-device {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim, var(--serial-secondary));
  margin-left: auto;
}

.dash-device-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #555;
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dash-device-dot.connected {
  background: #00ff80;
  box-shadow: 0 0 8px rgba(0, 255, 128, 0.6);
}

.dash-device-sub {
  opacity: 0.7;
}

.dash-chipinfo {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid rgba(0, 255, 128, 0.3);
  border-radius: 999px;
  background: rgba(0, 255, 128, 0.07);
  color: #00ff80;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: help;
}

.dash-chipinfo.visible {
  display: inline-flex;
}

.dash-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dash-baud {
  max-width: 150px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 9px;
  color: var(--text-dim, var(--serial-secondary));
  font-family: var(--font-mono, var(--serial-font-mono));
  font-size: 0.78rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.dash-baud:focus-visible {
  outline: 2px solid #69e6a0;
  outline-offset: 2px;
}

/* ---- Tooltip ---- */
/* Used for controls that are unavailable, such as Connect in a browser with no
   Web Serial support. The tooltip hangs off the wrapper because a disabled
   button never emits the pointer events that would reveal it. */
.has-tooltip {
  position: relative;
  display: inline-flex;
}

.has-tooltip > :disabled {
  pointer-events: none;
}

.has-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 200;
  width: max-content;
  max-width: min(260px, 78vw);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.98);
  color: var(--text, #fff);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.has-tooltip.has-tooltip-start[data-tooltip]::after {
  right: auto;
  left: 0;
}

.has-tooltip[data-tooltip]:hover::after,
.has-tooltip[data-tooltip]:focus::after,
.has-tooltip[data-tooltip]:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .has-tooltip[data-tooltip]::after { transition: none; }
}

/* ---- Body grid ---- */
.dash-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* ---- Sidebar ---- */
.dash-nav {
  border-right: 1px solid var(--border, var(--serial-border));
  background: transparent;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* The shell no longer grows with its content, so a tall sidebar scrolls
     rather than being clipped on short viewports. */
  overflow-y: auto;
}

.dash-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Inner sidebar <nav> must not inherit the fixed site-header bar */
nav.dash-nav-list {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  z-index: auto;
}

.dash-nav-label {
  font-family: var(--font-mono, var(--serial-font-mono));
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, var(--serial-secondary));
  opacity: 0.7;
  padding: 0.5rem 0.85rem 0.15rem;
}

.dash-nav-label:first-child {
  padding-top: 0;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-dim, var(--serial-secondary));
  font-family: var(--font-sans, var(--serial-font-sans));
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: left;
  flex: 0 0 auto;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dash-nav-item:focus-visible,
.dash-nav-link:focus-visible,
.dash-icon-btn:focus-visible,
.quick-cmd:focus-visible {
  outline: 2px solid #69e6a0;
  outline-offset: 2px;
}

.dash-nav-item i {
  font-size: 1.05rem;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.dash-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, var(--serial-text));
}

.dash-nav-item.active {
  background: rgba(0, 255, 128, 0.1);
  border-color: rgba(0, 255, 128, 0.35);
  color: #00ff80;
}

.dash-nav-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid var(--border, var(--serial-border));
  padding-top: 0.75rem;
}

/* Device info card in the sidebar */
.dash-device-card {
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.75rem 0.8rem;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.dash-device-card.has-device {
  opacity: 1;
  border-color: rgba(0, 255, 128, 0.3);
}

.dash-device-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, var(--serial-secondary));
}

.dash-device-card-head i {
  color: #00ff80;
}

.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim, var(--serial-secondary));
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dash-icon-btn:hover {
  color: #00ff80;
  border-color: rgba(0, 255, 128, 0.4);
}

.dash-icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.dash-spinning {
  display: inline-block;
  animation: dash-spin 0.8s linear infinite;
}

@keyframes dash-spin {
  to { transform: rotate(360deg); }
}

.dash-device-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dash-device-card-empty {
  margin: 0;
  color: var(--text-dim, var(--serial-secondary));
  font-size: 0.75rem;
  line-height: 1.4;
}

.dash-device-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

.dash-device-row-label {
  color: var(--text-dim, var(--serial-secondary));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.dash-device-row-value {
  color: var(--text-primary, var(--serial-text));
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  color: var(--text-dim, var(--serial-secondary));
  text-decoration: none;
  font-size: 0.82rem;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-nav-link:hover {
  color: var(--text-primary, var(--serial-text));
  background: rgba(255, 255, 255, 0.04);
}

/* ---- Workspace ---- */
/* The one scrolling pane in the shell. The store tab does not use it — its own
   .store-scroll region sits inside and consumes the height exactly, so this
   never overflows on that tab. */
.dash-content {
  padding: 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* Connected console view stretches to fill the workspace */
.console-main {
  flex: 1;
  min-height: 0;
}

#tab-console.active {
  flex: 1;
  min-height: 0;
}

#tab-console .console {
  flex: 1;
  min-height: 240px;
  max-height: calc(100vh - 270px);
  max-height: calc(100dvh - 270px);
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* ---- Terminal controls, redone as a cohesive bottom bar ---- */
.controls-container {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem 0.9rem 0.8rem;
  background: rgba(8, 8, 8, 0.92);
  border-top: 1px solid var(--border, var(--serial-border));
}

.controls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.quick-commands {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  background: transparent;
  border: none;
  padding: 0;
}

.quick-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim, var(--serial-text-dim));
  opacity: 0.8;
  margin-right: 0.15rem;
}

.quick-cmd {
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.75rem;
  font-family: var(--font-mono, var(--serial-font-mono));
  color: var(--text-dim, var(--serial-text-dim));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.quick-cmd:hover {
  color: #00ff80;
  border-color: rgba(0, 255, 128, 0.4);
  background: rgba(0, 255, 128, 0.06);
}

.control-panel {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 0;
}

.control-panel .btn {
  flex: 1 1 120px;
  width: auto;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
}

.input-group {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
}

.serial-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--serial-text, var(--text));
  padding: 0.5rem 0;
  font-family: var(--font-mono, var(--serial-font-mono));
  font-size: 0.85rem;
  outline: none;
}

.serial-input::placeholder {
  color: var(--text-dim, var(--serial-text-dim));
  opacity: 0.5;
}

.input-group:focus-within {
  border-color: rgba(0, 255, 128, 0.35);
}

.input-group .btn-send {
  flex-shrink: 0;
  width: auto;
  border-radius: 8px;
  padding: 0.5rem 0.95rem;
  background: rgba(0, 255, 128, 0.12);
  border: 1px solid rgba(0, 255, 128, 0.3);
  color: #00ff80;
}

.input-group .btn-send:hover:not(:disabled) {
  background: rgba(0, 255, 128, 0.22);
  border-color: rgba(0, 255, 128, 0.5);
  color: #00ff80;
}

/* The shell pinning that used to live here is now the base layout for every
   tab (see .dash-shell / .dash-content), so the store no longer needs its own. */

/* The shell pins the header and only the workspace pane scrolls (see .dash-shell
   and .dash-content), so no content ever travels underneath it. The header can
   therefore stay transparent on every tab rather than being an opaque slab. */
.dash-header {
  background: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

#tab-store.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1.5rem 0.75rem;
}

#tab-store #storeRoot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#tab-store .store-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#tab-store .store-scroll::-webkit-scrollbar {
  width: 10px;
}

#tab-store .store-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.18);
}

#tab-store .store-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

#tab-store .store-grid {
  align-content: start;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

/* Store category tabs sit inline in the header row, between the title and the
   device/connect controls. The slot stays empty (and collapsed) on every other
   tab, so the row is unchanged there. */
.dash-header-store-tabs {
  display: none;
  align-items: center;
  min-width: 0;
}

.dash-shell:has(#tab-store.active) .dash-header-store-tabs {
  display: flex;
}

.dash-header-store-tabs .store-tabs {
  margin: 0;
  max-width: none;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 10px;
}

.dash-header-store-tabs .store-tab {
  font-family: var(--font-sans, var(--serial-font-sans));
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 7px;
  font-size: 0.8rem;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.dash-header-store-tabs .store-tab-count { font-size: 0.68rem; }

.dash-header-store-tabs .store-tab:focus-visible {
  outline: 2px solid #69e6a0;
  outline-offset: 2px;
}

#tab-store .store-toolbar {
  /* Was centered at its content width, leaving even gutters on both sides and
     no relationship to the grid below. Removing the auto side margins makes it
     span the workspace and start at the same left edge as the cards. */
  margin: 0 0 0.9rem;
  max-width: none;
}

#tab-store .store-toolbar-end { gap: 0.6rem; }

#tab-store .store-input:focus,
#tab-store .store-select:focus {
  border-color: rgba(0, 255, 128, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 255, 128, 0.08);
}

#tab-store .store-list-meta {
  margin-bottom: 0.75rem;
  text-align: left;
}

#tab-store .store-card {
  border-radius: 14px;
  background: rgba(13, 13, 13, 0.92);
}

#tab-store .store-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#tab-store .store-card-title {
  font-family: var(--font-sans, var(--serial-font-sans));
  font-weight: 600;
  letter-spacing: -0.02em;
}

#tab-store .store-install-btn {
  border-radius: 9px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#tab-store .store-install-btn:focus-visible,
#tab-store .store-download-toggle:focus-visible {
  outline: 2px solid #69e6a0;
  outline-offset: 2px;
}

#tab-store .store-empty {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  #tab-store .store-grid {
    grid-template-columns: 1fr;
  }
}

#tab-store .store-chip-filter {
  max-width: none;
  margin-top: -0.25rem;
}

/* Security notice spans the workspace but stays quiet and left-aligned */
#tab-store .store-notice {
  max-width: none;
  margin: 0 0 1rem;
}

/* Detail view must beat the id-scoped column rule above */
#tab-store .store-grid.store-grid-list {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

/* Welcome card — centered, compact, no double margins */
.welcome-card {
  max-width: 560px;
  margin: 2.25rem auto;
  padding: 2.75rem 2rem;
  gap: 1.1rem;
  background: rgba(5, 5, 5, 0.9);
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 12px;
}

.welcome-card h1 {
  font-family: var(--font-sans, var(--serial-font-sans));
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.15;
  color: var(--text-primary, var(--serial-text));
}

.welcome-card .welcome-desc {
  color: var(--text-dim, var(--serial-text-dim));
}

.welcome-card .step-num {
  background: rgba(0, 255, 128, 0.07);
  border-color: rgba(0, 255, 128, 0.3);
  color: #00ff80;
}

.welcome-card .welcome-hint a {
  text-underline-offset: 2px;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.25rem 0 0.5rem;
}

/* Mirror stage — the display wrapper fills the available space so the
   auto-fit canvas has room to scale with no black bars. */
#tab-mirror.active {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1.5rem;
}

#tab-mirror .mirror-root {
  flex: 1;
  min-height: 0;
}

/* ---- IRDB view ---- */
#tab-irdb.active {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 3rem;
  min-height: 70vh;
}

#tab-irdb .irdb-root {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

#tab-irdb .irdb-tab-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
}

#tab-irdb .irdb-tab-header h1 {
  margin: 0;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary, var(--serial-text));
}

#tab-irdb .irdb-tab-header h1 i { color: #00ff80; font-size: 1.2rem; }

#tab-irdb .header-description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim, var(--serial-secondary));
}

#tab-irdb .irdb-main {
  width: 100%;
  padding: 1.25rem;
}

#tab-irdb .search-section { margin-bottom: 1rem; }

#tab-irdb .search-bar { max-width: none; }

/* Store-consistent controls: capped, compact, no infinite-width dropdowns */
#tab-irdb .search-bar input {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 1rem;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 10px;
  color: var(--text-primary, var(--serial-text));
  font-family: var(--font-mono);
  font-size: 0.85rem;
  outline: none;
}

#tab-irdb .search-bar input::placeholder { color: rgba(255, 255, 255, 0.3); }

#tab-irdb .search-bar input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

#tab-irdb .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 760px;
}

#tab-irdb .filters select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 300px;
  padding: 0.6rem 1.9rem 0.6rem 0.85rem;
  background-color: rgba(0, 0, 0, 0.72);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.85em;
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 10px;
  color: var(--text-primary, var(--serial-text));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-irdb .filters select:nth-child(3) { max-width: 130px; }

#tab-irdb .filters select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.42);
}

#tab-irdb .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  padding: 0.55rem 1rem;
}

#tab-irdb .results { margin: 1.25rem 0; }

#tab-irdb .result-item { padding: 1rem 1.1rem; }

#tab-irdb .button-group { display: flex; gap: 0.5rem; }

#tab-irdb .download-button,
#tab-irdb .send-button { padding: 0.55rem 0.85rem; font-size: 0.8rem; }

#tab-irdb .irdb-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-dim, var(--serial-secondary));
}

#tab-irdb .irdb-footer a { color: var(--text-primary, var(--serial-text)); }

@media (max-width: 700px) {
  #tab-irdb.active { padding: 1rem 0.75rem 2.5rem; }
  #tab-irdb .filters { flex-direction: column; max-width: none; }
  #tab-irdb .filters select { max-width: none; width: 100%; }
  #tab-irdb .stats { justify-content: flex-start; }
}

/* Dashboard dialogs — same language as the flasher modals */
.dash-shell ~ .dialog-overlay .dialog,
.dialog-overlay .dialog {
  background: #0b0b0b;
  border: 1px solid var(--border, var(--serial-border));
  border-radius: 12px;
}

.dialog-overlay .dialog h2 {
  font-family: var(--font-sans, var(--serial-font-sans));
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .dash-nav-item,
  .dash-nav-link,
  .quick-cmd {
    transition: none;
  }
}

/* ---- Other views ---- */
#tab-files.active,
#tab-crash.active {
  padding: 1.25rem 1.5rem;
}

/* Mobile: sidebar becomes a top rail */
@media (max-width: 900px) {
  .dash-body {
    grid-template-columns: 1fr;
    /* Rail keeps its natural height; the workspace takes the rest and scrolls. */
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }

  .dash-nav {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border, var(--serial-border));
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }

  .dash-nav-list {
    flex-direction: row;
    gap: 0.4rem;
    align-items: center;
  }

  .dash-nav-label {
    display: none;
  }

  .dash-nav-item {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    white-space: nowrap;
  }

  .dash-nav-item span {
    display: inline;
  }

  @media (max-width: 560px) {
    .dash-nav-item span {
      display: none;
    }
    .dash-nav-item {
      padding: 0.55rem 0.7rem;
    }
  }

  .dash-nav-foot,
  .dash-device-card {
    display: none;
  }

  .dash-content {
    padding: 0;
  }

  .dash-header-inner {
    gap: 0.5rem;
  }

  .dash-device {
    order: 3;
    width: 100%;
  }

  #tab-store.active {
    padding: 1rem 0.75rem 0.6rem;
  }

  #tab-store .store-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Takes its own line right after the title rather than being pushed beside it,
     keeping the tabs ahead of the connect controls in the stacked header. */
  .dash-header-store-tabs {
    width: 100%;
  }

  .dash-header-store-tabs .store-tab {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
  }

  #tab-mirror.active,
  #tab-files.active,
  #tab-crash.active {
    padding: 1rem 0.75rem;
  }

  .welcome-card {
    margin: 1.25rem auto;
  }
}

@media (max-width: 560px) {
  /* Tighten the tabs so all three stay on one line and the stacked header does
     not get any taller than it needs to. */
  .dash-header-store-tabs .store-tabs {
    padding: 0.2rem;
    gap: 0.15rem;
  }

  .dash-header-store-tabs .store-tab {
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }

  .dash-header-store-tabs .store-tab i { font-size: 0.85rem; }

  .dash-header-store-tabs .store-tab .store-tab-count { font-size: 0.66rem; }

  .dash-header-actions {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
  }

  .dash-header-actions .btn {
    flex: 1 1 140px;
  }

  .dash-header-actions .dash-baud {
    flex: 1 1 100%;
    max-width: none;
  }

  .welcome-card {
    padding: 2rem 1.25rem;
  }

  .welcome-card h1 {
    font-size: 1.6rem;
  }

  .welcome-actions .btn {
    width: 100%;
  }
}