Spaces:
Sleeping
Sleeping
| /* 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; | |
| } | |
| } | |