/* Optimal Trend - Asset Dashboard page CSS
   DP4 Wave 3 refactor 2026-05-24 (Rev 3)
   Depends on optimal-design-system.css for chassis tokens and primitives.
   No off-palette colours outside the explicit chart-region exception
   declared inline at the traffic-light zone-fill rules below. */

.ot-asset-dashboard {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr;
  min-height: calc(100vh - var(--topbar-h) - 48px);
  background: var(--white);
}

/* Tree panel (left) */
.ot-asset-dashboard__tree {
  background: var(--paper);
  border-right: 1px solid var(--rule-light);
  padding: 16px 14px;
  overflow-y: auto;
}

.ot-asset-dashboard__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 8px 10px;
  margin: 0 0 14px;
}

.ot-asset-dashboard__search svg {
  width: 16px;
  height: 16px;
  color: var(--ink-4);
  flex: 0 0 16px;
}

.ot-asset-dashboard__search input {
  border: 0;
  flex: 1;
  font-size: 12px;
  color: var(--ink);
  background: transparent;
  outline: none;
  min-width: 0;
}

.ot-asset-dashboard__tree-menu {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.ot-asset-dashboard__tree-item {
  padding: 6px 8px;
  border-left: 3px solid transparent;
  cursor: pointer;
  color: var(--ink-2);
}

.ot-asset-dashboard__tree-item--root {
  font-weight: 700;
  color: var(--navy);
}

.ot-asset-dashboard__tree-item--branch {
  padding-left: 18px;
}

.ot-asset-dashboard__tree-item--leaf {
  padding-left: 28px;
  color: var(--navy);
  background: var(--teal-light);
  border-left-color: var(--teal);
  cursor: default;
}

.ot-asset-dashboard__tree-children {
  display: none;
}

.ot-asset-dashboard__tree-children.is-open {
  display: grid;
  gap: 2px;
}

.ot-asset-dashboard__tree-hidden {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-4);
  padding: 10px 4px 0;
  margin-top: 12px;
  border-top: 1px solid var(--rule-light);
}

.ot-asset-dashboard__tree-hidden svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Right content */
.ot-asset-dashboard__content {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  background: var(--white);
}

.ot-asset-dashboard__breadcrumb {
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ot-asset-dashboard__breadcrumb a {
  color: var(--navy);
  text-decoration: none;
}

.ot-asset-dashboard__breadcrumb a:hover {
  color: var(--teal);
  text-decoration: underline;
}

.ot-asset-dashboard__stack {
  padding: 14px 24px 24px;
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* Cards grid */
.ot-asset-dashboard__cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ot-asset-dashboard__card {
  background: var(--white);
  border: 1px solid var(--rule-light);
  padding: 16px 18px;
}

.ot-asset-dashboard__card--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .ot-asset-dashboard__card--wide {
    grid-column: span 1;
  }
}

.ot-asset-dashboard__card-title {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ot-asset-dashboard__details-link {
  color: var(--teal);
  font-size: 11px;
  text-decoration: none;
  font-weight: 600;
}

.ot-asset-dashboard__details-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* Health score gauge card */
.ot-asset-dashboard__gauge-wrap {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ot-asset-dashboard__gauge {
  width: 140px;
  height: 140px;
}

.ot-asset-dashboard__gauge-meta {
  text-align: center;
}

.ot-asset-dashboard__metric-label {
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.ot-asset-dashboard__metric-note {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 8px;
}

/* Health score breakdown */
.ot-asset-dashboard__health-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

.ot-asset-dashboard__total-score {
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-light);
}

.ot-asset-dashboard__breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.ot-asset-dashboard__breakdown-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  color: var(--navy);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-light);
}

/* Column alignment - 5-column breakdown (component, weight, score, weighted) */
.ot-asset-dashboard__breakdown-table th:nth-child(2),
.ot-asset-dashboard__breakdown-table th:nth-child(3),
.ot-asset-dashboard__breakdown-table td:nth-child(2),
.ot-asset-dashboard__breakdown-table td:nth-child(3) {
  text-align: center;
}

.ot-asset-dashboard__breakdown-table th:nth-child(4),
.ot-asset-dashboard__breakdown-table td:nth-child(4) {
  text-align: right;
}

.ot-asset-dashboard__breakdown-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-light);
  color: var(--ink-2);
}

.ot-asset-dashboard__breakdown-table tbody tr:last-child td {
  border-bottom: 2px solid var(--rule);
  font-weight: 700;
  background: var(--paper);
  color: var(--navy);
}

.ot-asset-dashboard__component-name {
  font-weight: 600;
}

.ot-asset-dashboard__progress {
  width: 100%;
  height: 6px;
  background: var(--rule-light);
  margin: 6px 0 0;
  overflow: hidden;
}

.ot-asset-dashboard__progress-fill {
  height: 100%;
  transition: width 200ms ease-out;
}

.ot-asset-dashboard__progress-fill--zero { width: 0%; }
.ot-asset-dashboard__progress-fill--good { background: var(--teal); }
.ot-asset-dashboard__progress-fill--mid { background: var(--ink-3); }
.ot-asset-dashboard__progress-fill--poor { background: var(--navy-dark); }

/* Scalar values table */
.ot-asset-dashboard__scalar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.ot-asset-dashboard__scalar-table th {
  background: var(--paper);
  color: var(--navy);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rule-light);
}

.ot-asset-dashboard__scalar-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-light);
  color: var(--ink-2);
}

/* Column alignment - scalar table: col 1 left (default), cols 2+ centered */
.ot-asset-dashboard__scalar-table th:nth-child(n+2),
.ot-asset-dashboard__scalar-table td:nth-child(n+2) {
  text-align: center;
}

.ot-asset-dashboard__scalar-summary {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 10px;
}

.ot-asset-dashboard__scalar-meta {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 6px;
}

/* Diagnostic result card */
.ot-asset-dashboard__info-banner {
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--navy);
  margin: 0 0 12px;
}

.ot-asset-dashboard__no-config {
  font-size: 11px;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.ot-asset-dashboard__diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 12px 0;
}

.ot-asset-dashboard__diagnostic-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ot-asset-dashboard__diagnostic-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 28px;
  background: var(--paper);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}

.ot-asset-dashboard__diagnostic-icon--ok {
  background: var(--teal-light);
  color: var(--teal);
  border-color: var(--teal);
}

.ot-asset-dashboard__diagnostic-icon--slight {
  background: var(--paper);
  color: var(--ink-4);
}

.ot-asset-dashboard__diagnostic-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ot-asset-dashboard__diagnostic-label {
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ot-asset-dashboard__diagnostic-value {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

.ot-asset-dashboard__severity-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--paper);
  color: var(--ink-3);
  border: 1px solid var(--rule);
  margin-right: 4px;
}

.ot-asset-dashboard__severity-badge--ok {
  background: var(--teal-light);
  color: var(--teal);
  border-color: var(--teal);
}

.ot-asset-dashboard__analyst-comments {
  background: var(--paper);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 12px 0 0;
  border-left: 3px solid var(--rule);
}

.ot-asset-dashboard__analyst-comments-label {
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* Asset severity trend card */
.ot-asset-dashboard__severity-bar {
  display: flex;
  height: 8px;
  margin: 12px 0;
  gap: 2px;
  background: var(--rule-light);
}

.ot-asset-dashboard__severity-segment {
  flex: 1;
}

.ot-asset-dashboard__severity-segment--ok { background: var(--teal); }
.ot-asset-dashboard__severity-segment--slight { background: var(--ink-4); }
.ot-asset-dashboard__severity-segment--moderate { background: var(--ink-3); }

/* Zero-data state: live JS sets flex proportions when data loads;
   --empty collapses the segment until then. */
.ot-asset-dashboard__severity-segment--empty { flex: 0; }

.ot-asset-dashboard__chart-wrap {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ot-asset-dashboard__chart-svg {
  width: 100%;
  height: 200px;
}

.ot-asset-dashboard__chart-axis {
  stroke: var(--rule);
  stroke-width: 1;
}

.ot-asset-dashboard__chart-grid-line {
  stroke: var(--rule-light);
  stroke-width: 1;
}

.ot-asset-dashboard__chart-label {
  fill: var(--ink-4);
  font-size: 10px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.ot-asset-dashboard__legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3);
}

.ot-asset-dashboard__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ot-asset-dashboard__legend-color {
  width: 10px;
  height: 10px;
  display: inline-block;
}

/* Legend swatch colours - one modifier per severity tier */
.ot-asset-dashboard__legend-color--extreme { background: var(--navy-dark); }
.ot-asset-dashboard__legend-color--serious { background: var(--navy); }
.ot-asset-dashboard__legend-color--moderate { background: var(--ink-3); }
.ot-asset-dashboard__legend-color--slight { background: var(--ink-4); }
.ot-asset-dashboard__legend-color--ok { background: var(--teal); }

/* No-data card (Bad actors) */
.ot-asset-dashboard__no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  color: var(--ink-4);
  font-size: 12px;
  text-align: center;
}

.ot-asset-dashboard__robot-icon {
  width: 64px;
  height: 64px;
  opacity: 0.45;
  color: var(--ink-4);
}

/* Blind spot card */
.ot-asset-dashboard__blind-spot {
  text-align: center;
  padding: 14px 0;
}

.ot-asset-dashboard__blind-spot-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.1;
}

.ot-asset-dashboard__blind-spot-label {
  font-size: 12px;
  color: var(--ink-4);
  margin: 6px 0 10px;
}

.ot-asset-dashboard__blind-spot-meta {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}

.ot-asset-dashboard__blind-spot-meta strong {
  color: var(--ink-2);
}

/* Trend chart container */
.ot-asset-dashboard__trend-chart {
  background: var(--white);
  border: 1px solid var(--rule-light);
  padding: 18px 20px;
  min-height: 520px;
}

.ot-asset-dashboard__trend-title {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
}

.ot-asset-dashboard__trend-svg {
  width: 100%;
  height: 430px;
  display: block;
}

/* Chart-region exception per methodology brief section 5.4:
   the traffic-light zone backgrounds and severity arcs retain off-palette
   hex literals so the red-amber-green affordance is preserved on the
   trend chart and gauge. No other selectors carry off-palette colours. */
.ot-asset-dashboard__zone-red { fill: #FEE2E2; }
.ot-asset-dashboard__zone-amber { fill: #FEF3C7; }
.ot-asset-dashboard__zone-green { fill: #DCFCE7; }

.ot-asset-dashboard__annotation-line {
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
}

.ot-asset-dashboard__annotation-label {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
}

/* Methodology note card */
.ot-asset-dashboard__methodology {
  background: var(--paper);
  border: 1px solid var(--rule-light);
  padding: 18px 20px;
}

.ot-asset-dashboard__methodology-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}

.ot-asset-dashboard__methodology-text {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
}

.ot-asset-dashboard__methodology-text p {
  margin: 0 0 12px;
}

.ot-asset-dashboard__methodology-text strong {
  color: var(--navy);
}

/* Help icon + popover */
.ot-asset-dashboard__help-icon {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-4);
  width: 18px;
  height: 18px;
  font-size: 11px;
  cursor: help;
  display: inline-grid;
  place-items: center;
  margin-left: 4px;
  border-radius: 999px;
  position: relative;
}

.ot-asset-dashboard__help-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--navy-dark);
  color: var(--white);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 400;
  width: 240px;
  z-index: 30;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.ot-asset-dashboard__help-icon:hover .ot-asset-dashboard__help-popover,
.ot-asset-dashboard__help-icon:focus-visible .ot-asset-dashboard__help-popover {
  display: block;
}

/* Responsive */
@media (max-width: 1200px) {
  .ot-asset-dashboard__diagnostic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .ot-asset-dashboard {
    grid-template-columns: 1fr;
  }

  .ot-asset-dashboard__tree {
    border-right: 0;
    border-bottom: 1px solid var(--rule-light);
  }
}

@media (max-width: 768px) {
  .ot-asset-dashboard__cards-grid {
    grid-template-columns: 1fr;
  }

  .ot-asset-dashboard__stack {
    padding: 12px 14px;
  }
}