/* ============================================================================
   theia-tooltip.css
   ============================================================================
   Canonical Theia tooltip component styles. Drop-in for any console module.
   Fully self-contained — no dependencies on design tokens.

   WHY NO VARIABLES: Tooltips render at the document body level (outside any
   scoped :root) so CSS custom properties do not resolve here. Hardcoded
   values below are intentional — do not refactor to var() references.

   USAGE:
     1. Include this file after theia-tokens.css in your module's CSS chain
     2. Add a container div with a module-specific ID and the canonical
        markup structure (see THEIA-TOOLTIP-SPEC.md §4)
     3. Show/hide by toggling the .visible class on the root

   FULL SPEC: See THEIA-TOOLTIP-SPEC.md
   ============================================================================ */

/* ---- OUTER CONTAINER -------------------------------------------------- */
/* Target this with a module-specific ID selector in your module's CSS.
   Example: #ev-tooltip, #carrier-tooltip, #port-hover-tooltip
   Apply these shared properties via a .theia-tooltip class on the root. */

.theia-tooltip {
  position: fixed;
  z-index: 500;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  padding: 0;
  width: 240px;              /* use 260px for wider content */
  pointer-events: none;      /* 'auto' if tooltip has copy-icons or links */
  opacity: 0;
  transition: opacity .12s;
}
.theia-tooltip.visible { opacity: 1; }

/* Severity state classes on the root — drives header border-left color */
.theia-tooltip.critical .tt-head { border-left-color: #dc2626; }
.theia-tooltip.warning  .tt-head { border-left-color: #d97706; }

/* ---- HEADER ----------------------------------------------------------- */
.tt-head {
  padding: 8px 12px 7px;
  border-bottom: 1px solid #1e293b;
  border-left: 3px solid transparent;
  border-radius: 6px 6px 0 0;
}

/* Primary label — for IDs, codes, measurements */
.tt-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.3;
}

/* Primary name — for human-readable names (carriers, tenants, sites) */
.tt-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.25;
}

/* Secondary / meta text below the primary */
.tt-type {
  font-size: 9.5px;
  color: #475569;
  margin-top: 2px;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ---- SEVERITY PILL (inline in header) ---------------------------------- */
.tt-sev {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  margin-left: 6px;
  vertical-align: middle;
}
.tt-sev.cr { background: rgba(220, 38, 38, .15); color: #f87171; border: 1px solid rgba(220, 38, 38, .30); }
.tt-sev.mj { background: rgba(217, 119, 6, .15); color: #fb923c; border: 1px solid rgba(217, 119, 6, .30); }
.tt-sev.mn { background: rgba(217, 119, 6, .10); color: #fbbf24; border: 1px solid rgba(217, 119, 6, .25); }

/* ---- BODY ------------------------------------------------------------- */
.tt-body {
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}

.tt-key {
  color: #64748b;
  flex-shrink: 0;
  min-width: 72px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
}

.tt-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #e2e8f0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Value state modifiers */
.tt-val.ok    { color: #4ade80; }
.tt-val.warn  { color: #fde047; font-weight: 700; }
.tt-val.crit  { color: #f87171; font-weight: 700; }
.tt-val.muted { color: #64748b; font-style: italic; }

/* Optional in-body divider between row groups */
.tt-divider {
  height: 1px;
  background: #1e293b;
  margin: 3px 0;
}

/* ---- FOOTER (optional) ------------------------------------------------ */

/* Standard remark footer — operator notes, secondary context */
.tt-remark {
  padding: 7px 12px 10px;
  font-size: 10.5px;
  color: #94a3b8;
  background: #0a1628;
  border-top: 1px solid #1e293b;
  border-radius: 0 0 6px 6px;
  line-height: 1.5;
  font-style: italic;
}

/* Fault-specific footer — red-tinted variant for active faults */
.tt-fault {
  padding: 7px 12px 9px;
  font-size: 10.5px;
  color: #fecaca;
  font-weight: 600;
  background: rgba(220, 38, 38, 0.12);
  border-top: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 0 0 6px 6px;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: .2px;
}

/* ============================================================================
   END theia-tooltip.css
   ============================================================================ */