Blame for dashboard/styles/layout.css

/* layout.css */

/* Layout Principal */
.layout {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5); /* Espaçamento mais folgado entre sections */
}

/* Header Utilitário Glassmorphism */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background-color: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.brand-head {
  display: flex;
  flex-direction: column;
  max-width: 840px;
}

.brand-kicker {
  color: var(--color-accent);
  font-size: clamp(0.7rem, 1vw, 0.75rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-family-mono);
  margin-bottom: var(--spacing-1);
  text-shadow: 0 0 8px var(--color-accent-a10);
}

.topbar h1 {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.topbar p {
  color: var(--text-muted);
  font-size: clamp(0.8rem, 1.5vw, 0.85rem);
  margin-top: var(--spacing-1);
  margin-bottom: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* Grids Resilientes e Fluidos */
.grid-cards {
  display: grid;
  /* Adaptação fluida sem media query estrita:
       cria colunas de no mínimo 240px que expandem (1fr) */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-4);
  align-items: stretch; /* Cards ocupam todo espaço vertical */
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
  gap: var(--spacing-5);
  align-items: stretch; /* Cards vizinhos mantêm a mesma altura visualmente */
}

@media (max-width: 1024px) {
  .grid-two {
    grid-template-columns: 1fr;
  }
}

.grid-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-5);
  align-items: stretch;
}

@media (min-width: 1080px) {
  .grid-hero {
    /* Painel principal domina, widgets auxiliares contraídos */
    grid-template-columns: 7fr 5fr;
  }
}

/* Summary strip global */
.dashboard-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--spacing-3);
}

.summary-card {
  min-height: 130px;
  justify-content: center;
}

.summary-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-family-mono);
}

.summary-value {
  margin: var(--spacing-2) 0;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-meta {
  margin: var(--spacing-1) 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-family-mono);
}

.summary-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Abas da dashboard */
.dashboard-tabs-shell {
  position: sticky;
  top: var(--dashboard-tabs-sticky-top, 0px);
  z-index: calc(var(--z-header) - 1);
  margin-top: calc(var(--spacing-2) * -1);
}

.dashboard-tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  padding: var(--spacing-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.dashboard-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: var(--spacing-2) var(--spacing-4);
  min-height: 44px;
  font-family: var(--font-family-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-med);
}

.dashboard-tab-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  border-color: var(--border-default);
}

.dashboard-tab-btn.is-active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.dashboard-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.dashboard-tab-intro {
  padding: var(--spacing-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.dashboard-tab-kicker {
  margin: 0 0 var(--spacing-2) 0;
  color: var(--color-accent);
  font-family: var(--font-family-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-tab-intro h2 {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-primary);
}

.dashboard-tab-intro p {
  margin: var(--spacing-2) 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.dashboard-tab-panel[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .dashboard-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .dashboard-tab-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Fix para manter os gaps do layout nos containers div vazios onde os partials sao injetados */
.layout > div {
  display: contents;
}

.dashboard-tab-panel > div {
  display: contents;
}

/* ============================================================
   O2b — Bento grid for the Operation tab (hierarchy 1-2-3).
   Hero = health (big) · Action column = pending risk (tall) ·
   Telemetry = autonomy · Footer = operational events.
   Scoped to the Operation panel; other tabs keep the flow layout.
   Density is preserved — same panels, clearer hierarchy.
   ============================================================ */
.dashboard-tab-panel[data-dashboard-tab-panel="operation"]:not([hidden]) {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-areas:
    "intro    intro"
    "health   action"
    "autonomy action"
    "events   events";
  align-items: start;
}
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > .dashboard-tab-intro {
  grid-area: intro;
}
/* Grid blowout fix: items default to min-width:auto and won't shrink below
   their content (a wide table/queue), which forced ~43px of page overflow on
   mobile. min-width:0 lets the columns honour the viewport. */
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > * {
  min-width: 0;
}
/* The containers are display:contents by default; in the bento they become the
   grid items that hold each partial card. */
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > #metricsHealthContainer {
  display: block;
  grid-area: health;
}
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > #riskQueueContainer {
  display: block;
  grid-area: action;
}
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > #autonomyRuntimeContainer {
  display: block;
  grid-area: autonomy;
}
.dashboard-tab-panel[data-dashboard-tab-panel="operation"] > #operationEventsContainer {
  display: block;
  grid-area: events;
}
@media (max-width: 1024px) {
  .dashboard-tab-panel[data-dashboard-tab-panel="operation"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "health"
      "action"
      "autonomy"
      "events";
  }
}

/* Footer Técnico */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-5) var(--spacing-6);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-family-mono);
  background-color: var(--bg-surface);
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

/* Responsividade Adaptativa (Mobile) */
@media (max-width: 600px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-3) var(--spacing-4);
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
    padding-top: var(--spacing-2);
    border-top: 1px dashed var(--border-default);
  }

  .layout {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-6);
  }

  .dashboard-summary-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-tabs-shell {
    top: var(--dashboard-tabs-sticky-top, 0px);
  }

  /* The tab bar scrolls horizontally instead of pushing the page wider
     (6 tabs * 120px min would overflow a phone). */
  .dashboard-tabs {
    padding-bottom: var(--spacing-1);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-tab-btn {
    min-width: 110px;
    flex: 0 0 auto;
  }

  /* Let form groups shrink and keep controls inside the viewport (no h-scroll). */
  .form-group {
    min-width: 0;
  }
  .form-control,
  .panel select,
  .panel input {
    max-width: 100%;
  }
  /* Tables have min-width:400px for desktop readability; on a phone that forced
     ~43px of horizontal page overflow. Let them fit the viewport instead. */
  table {
    min-width: 0;
  }
}