/* ============================================================
   MX60 Chihuahua — main.css
   Sub-paso 1: design tokens + Honeywell-branded header (SanLuis-style)
   + page system + stub placeholders.
   Component-specific styles will live in css/components.css and
   css/<page>.css as sub-pasos 2-5 progress.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — SDD mx60-header-alarm-indicator-and-sticky-nav
   ============================================================ */
:root {
  --sticky-nav-height: 50px;
  --critical-rgb:      239, 68, 68;   /* matches --critical: #ef4444 */
}
:root[data-theme="light"] {
  --critical-rgb:      185, 28, 28;   /* darker red for light theme contrast */
}

/* ============================================================
   LOCAL FONTS (offline — woff2 served from src/rc/fonts/)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — Industrial Luxury Dark (heredados de SanLuis)
   ============================================================ */
:root {
  --bg:               #06080d;
  --bg-elevated:      #0c1018;
  --surface:          rgba(17, 24, 39, 0.6);
  --surface-solid:    #111827;
  --surface-dim:      rgba(17, 24, 39, 0.4);
  --surface-hover:    rgba(17, 24, 39, 0.8);
  --border:           rgba(255, 255, 255, 0.06);
  --border-light:     rgba(255, 255, 255, 0.03);
  --border-hover:     rgba(0, 212, 170, 0.3);

  --accent:           #00d4aa;
  --accent-light:     #00e8bc;
  --accent-dim:       rgba(0, 212, 170, 0.08);
  --accent-glow:      rgba(0, 212, 170, 0.15);

  --ok:               #10b981;
  --warn:             #f59e0b;
  --critical:         #ef4444;
  --offline:          #475569;

  /* Status/semantic foreground (text on tinted chips) — theme-aware */
  --ok-fg:        #00e676;
  --warn-fg:      #fbbf24;
  --critical-fg:  #ff4455;
  --offline-fg:   #9aa3af;
  --info-fg:      #93c5fd;
  --accent-fg:    #00d4aa;

  --text-primary:     #e2e8f0;
  --text-secondary:   #94a3b8;
  --text-muted:       #475569;
  --text-on-dark:     #f8fafc;
  --text-on-dark-dim: rgba(248, 250, 252, 0.6);

  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, monospace;

  --nav-height:       56px;
  --header-height:    180px;

  --shadow-sm:        0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.4);

  --radius:           10px;
  --radius-lg:        12px;

  /* ── Responsive layout tokens (REQ-1, REQ-2, REQ-5) ── */
  --container-padding:    32px;
  --header-padding-block: 20px;
  --header-padding-inline: 32px;
  --logo-height:          180px;
  --kpi-cols-primary:     5;
  --kpi-cols-secondary:   6;
  --viewer-height:        70vh;
}

/* ============================================================
   LIGHT THEME TOKEN OVERRIDES — SDD mx60-theme-light-dark-per-user
   Only color tokens are overridden; layout, font, radius tokens
   are inherited from :root (unchanged on both themes).
   Accent/alarm/status tokens are NOT overridden (shared).
   ============================================================ */
:root[data-theme="light"] {
  /* Clean Float — neutral light gray floor, near-white surfaces that
     FLOAT above it with marked shadows. Modern/clean (Figma/Notion-style)
     WITH real elevation hierarchy. No pure white anywhere — the floor is
     a defined light gray so it never fatigues the eye. Near-black text
     for maximum contrast. */

  /* ── Floor (page background, footer) — light gray, NOT white ── */
  --bg:               #e8e9eb;
  --bg-elevated:      #f0f0f2;

  /* ── Floating surfaces (cards, panels, modals) — near-white, float ── */
  --surface:          rgba(255, 255, 255, 0.85);
  --surface-solid:    #fcfcfd;
  --surface-dim:      rgba(255, 255, 255, 0.55);
  --surface-hover:    rgba(15, 23, 42, 0.04);

  /* ── Borders — crisp ── */
  --border:           rgba(15, 23, 42, 0.12);
  --border-light:     rgba(15, 23, 42, 0.07);

  /* ── Text — near-black primary for maximum contrast ── */
  --text-primary:     #1a202c;
  --text-secondary:   #3f4a5c;
  --text-muted:       #64748b;
  /* In light theme the "on-dark" surfaces (header, nav, quick-stats) are
     actually light — this must be dark text, not the near-white dark value.
     Without this override, qs-band-title / qs-pill-name / planta-header /
     header subtitle render near-white-on-light (~1.1:1 contrast). */
  --text-on-dark:     #1a202c;
  --text-on-dark-dim: rgba(26, 32, 44, 0.65);

  /* ── Shadows — marked, so surfaces visibly float above the floor ── */
  --shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md:        0 4px 14px rgba(15, 23, 42, 0.12);
  --shadow-lg:        0 12px 32px rgba(15, 23, 42, 0.16);

  /* Status/semantic foreground — dark readable variants for light theme */
  --ok-fg:        #15803d;
  --warn-fg:      #b45309;
  --critical-fg:  #b91c1c;
  --offline-fg:   #64748b;
  --info-fg:      #1d4ed8;
  --accent-fg:    #0f766e;
}

/* ── Responsive token overrides ── */
@media (max-width: 1280px) {
  :root {
    --logo-height: 140px;
  }
}

@media (max-width: 960px) {
  :root {
    --container-padding:     24px;
    --header-padding-inline: 24px;
    --logo-height:           120px;
    --kpi-cols-primary:      3;
    --kpi-cols-secondary:    3;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding:     20px;
    --header-padding-block:  16px;
    --header-padding-inline: 20px;
    --logo-height:           90px;
    --kpi-cols-primary:      2;
    --kpi-cols-secondary:    2;
    --viewer-height:         50vh;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding:     16px;
    --header-padding-block:  12px;
    --header-padding-inline: 14px;
    --logo-height:           70px;
    --kpi-cols-primary:      1;
    --kpi-cols-secondary:    1;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  /* NO overflow-x rule on body — both 'hidden' and 'clip' break position:sticky
     in older Chromium (Niagara workbench embedded). The layout is engineered to
     not overflow horizontally, so we don't need the protection here.
     SDD mx60-header-alarm-indicator-and-sticky-nav */
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ============================================================
   HEADER — Honeywell-branded dark gradient (SanLuis-style)
   ============================================================ */
#app-header {
  position: relative;
  background: var(--bg-elevated);
  overflow: visible; /* SDD mx60-header-alarm-indicator-and-sticky-nav: was hidden — sticky .nav-bar-wrap needs overflow:visible to escape ancestor clip */
  border-bottom: 1px solid var(--border);
}

/* Particle network animation canvas — pinned to the header bg layer */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* Subtle accent gradient line under the header */
#app-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}

.header-content {
  position: relative;
  z-index: 2;
  padding: var(--header-padding-block) var(--header-padding-inline) 0;
}

.header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.header-title {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 60px;
}

/* Logo is intentionally cropped via negative margins to show only the
   horizontal Honeywell wordmark band, matching SanLuis appearance.
   At ≤768px the crop is removed — logo renders at natural ratio. */
.header-title-img {
  height: var(--logo-height);
  width: auto;
  margin-top: -60px;
  margin-bottom: -60px;
}

@media (max-width: 768px) {
  .header-title-img {
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
  }
  .header-title {
    overflow: visible;
    height: auto;
  }
}

@media (max-width: 960px) {
  .header-clock { font-size: 11px; }
}
@media (max-width: 768px) {
  .header-clock { font-size: 10px; }
}
@media (max-width: 480px) {
  .header-clock { font-size: 9px; }
}

/* Vertical separator between Honeywell and CBRE logos. */
.header-logo-sep {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--border-hover) 30%,
    var(--border-hover) 70%,
    transparent 100%
  );
  margin: 0 16px;
}

/* CBRE logo — slightly smaller than Honeywell band so it reads as secondary. */
.header-cbre-img {
  height: 40px;
  width: auto;
  display: block;
}

.header-spacer { flex: 1; }

.header-clock {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Logged-in user chip — sits left of the theme toggle in .header-top. */
.header-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  color: var(--text-on-dark-dim);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.header-user svg { flex: 0 0 auto; opacity: 0.85; }
.header-user-name { color: var(--text-on-dark); }

@media (max-width: 768px) {
  .header-user { font-size: 11px; margin-right: 10px; }
}
/* On phones the logout label already hides; drop the username text too,
   keep just the user icon to save horizontal space. */
@media (max-width: 480px) {
  .header-user-name { display: none; }
}

.header-subtitle {
  color: var(--text-on-dark-dim);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 16px;
}

.header-subtitle #siteName {
  color: var(--text-on-dark);
  font-weight: 500;
}

/* Casino-style trim: hide subtitle on phones — logo + clock are enough */
@media (max-width: 480px) {
  .header-subtitle { display: none; }
}

.header-subs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.header-subs span { color: var(--accent); font-weight: 700; }

/* ============================================================
   NAVIGATION — tab bar with active underline
   ============================================================ */

/* SDD mx60-header-alarm-indicator-and-sticky-nav:
   .nav-bar-wrap is now sticky so the nav + alarm indicator stay pinned
   while the header-top scrolls away. Background MUST be opaque so page
   content scrolling beneath doesn't bleed through. */
.nav-bar-wrap {
  position: relative; /* JS pins this to fixed via .is-pinned when scroll crosses threshold */
  z-index: 500;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

/* JS-managed pin state. DashboardApp._bootStickyNav() toggles .is-pinned on
   .nav-bar-wrap and .has-pinned-nav on body based on scrollY. position:fixed
   guarantees the nav stays at top: 0 regardless of any ancestor's containing
   block or overflow rules (which silently broke position:sticky in this
   particular header structure). SDD mx60-header-alarm-indicator-and-sticky-nav */
.nav-bar-wrap.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.has-pinned-nav {
  /* Reserve space equal to the nav-bar-wrap height so content does not jump
     up when the nav transitions to fixed. ~50px matches the rendered nav height. */
  padding-top: 50px;
}

.nav-bar {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0;
  padding: 0 32px;
}

.nav-item {
  padding: 12px 20px;
  color: var(--text-on-dark-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
  letter-spacing: 0.2px;
}

.nav-item:hover {
  color: var(--text-on-dark);
  background: var(--surface-hover);
}

.nav-item.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Nav trigger button — only visible on mobile. Casino NavDropdown pattern:
   shows the current page name + a hamburger icon. Tapping opens the full
   menu as an overlay drawer. Eliminates horizontal-scroll discoverability
   issues entirely. */
.nav-trigger { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* SDD mx60-header-alarm-indicator-and-sticky-nav: nav-bar-wrap is sticky
     globally; on mobile it stays sticky (overflow:visible on #app-header
     makes this safe). Removed the old position:relative override that
     was only needed when #app-header was overflow:hidden. */
  /* Drawer is FIXED to the viewport so position:absolute would be unnecessary.
     Top anchored to --header-height, calculated dynamically by index.html. */
  .nav-bar {
    display: none;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
    position: fixed;
    top: calc(var(--header-height, 96px) + 4px);
    left: 12px;
    right: 12px;
    z-index: 1000;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    animation: navDrawerEnter 200ms ease-out;
    max-height: calc(100vh - var(--header-height, 96px) - 24px);
    overflow-y: auto;
  }
  .nav-bar-wrap.is-open .nav-bar { display: flex; }

  .nav-bar-wrap.is-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--surface-dim);
    z-index: 999;
    animation: navBackdropEnter 200ms ease-out;
  }

  /* Each item becomes a tap row */
  .nav-item {
    padding: 12px 14px;
    border-bottom: none;
    border-radius: 8px;
    color: var(--text-on-dark-dim);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item:hover,
  .nav-item:active {
    background: rgba(0, 212, 170, 0.08);
    color: var(--text-on-dark);
  }
  .nav-item.active {
    background: rgba(0, 212, 170, 0.12);
    color: var(--accent);
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* Trigger button visible only on mobile */
  .nav-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-on-dark);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .nav-trigger:hover { background: var(--border-light); }

  .nav-trigger-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 18px;
    height: 14px;
  }
  .nav-trigger-icon span {
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-trigger-icon span:nth-child(1) { width: 100%; }
  .nav-trigger-icon span:nth-child(2) { width: 70%; }
  .nav-trigger-icon span:nth-child(3) { width: 100%; }

  .nav-bar-wrap.is-open .nav-trigger-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
    width: 100%;
  }
  .nav-bar-wrap.is-open .nav-trigger-icon span:nth-child(2) { opacity: 0; }
  .nav-bar-wrap.is-open .nav-trigger-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
    width: 100%;
  }

  .nav-trigger-label {
    flex: 1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
  }

  .nav-trigger-chevron {
    color: var(--accent);
    font-size: 14px;
    transition: transform 200ms ease;
  }
  .nav-bar-wrap.is-open .nav-trigger-chevron { transform: rotate(180deg); }

  @keyframes navDrawerEnter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes navBackdropEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--critical);
  color: white;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-left: 6px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ============================================================
   MAIN CONTENT — page sections
   ============================================================ */
#main-content {
  padding: var(--container-padding);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

/* HOME flows normally, SanLuis Buildings-style. The photo controls the
   page height through its natural aspect ratio (width:100% inside the
   .home-map-area grid track). Page scrolls if content exceeds viewport.

   Override #main-content side padding + max-width on HOME only, so the
   map area gets the full viewport width minus the 220px sidebar. The
   sidebar itself is untouched. */
body[data-page="home"] #main-content {
  padding: 0;
  max-width: none;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* ============================================================
   STUB PLACEHOLDERS (sub-paso 1)
   Replaced by real page modules in sub-pasos 2-5.
   ============================================================ */
.page-stub {
  border: 1px dashed rgba(0, 212, 170, 0.25);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 64px 32px;
  text-align: center;
  margin-top: 8vh;
}

.page-stub-id {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

.page-stub-text {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ============================================================
   SHARED UTILITIES (used by future sub-pasos)
   ============================================================ */
.empty-state,
.empty-state-enhanced {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.loading-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================================
   ALARM INDICATOR — SDD mx60-header-alarm-indicator-and-sticky-nav
   ============================================================ */

/* Pulse animation — 1.4s heartbeat (scale + opacity) */
@keyframes mx60-alarm-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  50%  { transform: scale(1.18); opacity: 0.6; }
  100% { transform: scale(1);    opacity: 0.9; }
}

@keyframes mx60-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.8);  opacity: 0;   }
}

/* Respect user motion preferences — disable pulse entirely */
@media (prefers-reduced-motion: reduce) {
  .mx60-alarm-btn.is-pulsing .mx60-alarm-indicator,
  .mx60-alarm-btn.is-pulsing .mx60-pulse-ring {
    animation: none;
  }
}

/* Wrapper positioned at the right end of .nav-bar-wrap.
   position:relative makes it the offset parent for the absolute popover. */
#mx60-alarm-indicator-mount {
  position: relative;
  margin-left: auto;
  padding-right: 12px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* The clickable button wrapping the circle + ring */
.mx60-alarm-btn {
  position: relative;
  display: none; /* hidden when total===0; JS sets display:flex when >0 */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.mx60-alarm-btn:focus-visible {
  outline: 2px solid rgba(var(--critical-rgb), 0.8);
  border-radius: 50%;
}

/* The visible circle — solid red with white count */
.mx60-alarm-indicator {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(var(--critical-rgb));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  user-select: none;
  box-shadow: 0 0 8px rgba(var(--critical-rgb), 0.6);
  transition: box-shadow 0.2s ease;
}

/* Pulse state — heartbeat animation on the indicator itself */
.mx60-alarm-btn.is-pulsing .mx60-alarm-indicator {
  animation: mx60-alarm-pulse 1.4s ease-in-out infinite;
}

/* Ripple ring — positioned behind the circle */
.mx60-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
  border-radius: 50%;
  background: rgba(var(--critical-rgb), 0.4);
  z-index: 1;
}

.mx60-alarm-btn.is-pulsing .mx60-pulse-ring {
  animation: mx60-pulse-ring 1.4s ease-out infinite;
}

/* Popover — absolute positioned, opens below the indicator on the right edge */
/* WARNING-2 fix: max-height now 360px to match spec (was 420px). The inner
   .mx60-popover-list keeps its own max-height with overflow:auto so the
   scrolling behavior is identical — only the outer envelope tightens. */
.mx60-alarm-popover {
  display: none; /* toggled to block by JS */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1050;
  width: min(360px, calc(100vw - 16px));
  max-height: 360px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  flex-direction: column;
}

.mx60-alarm-popover.is-open {
  display: flex;
}

/* Popover header row — summary counts */
.mx60-popover-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mx60-popover-total {
  color: var(--text-primary);
  font-weight: 700;
}

/* Popover alarm list — scrolls internally */
.mx60-popover-list {
  overflow-y: auto;
  flex: 1;
  max-height: 360px;
}

/* Individual alarm row in popover */
.mx60-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.12s ease;
  font-size: 12px;
  color: var(--text-primary);
}

.mx60-popover-item:last-child {
  border-bottom: none;
}

.mx60-popover-item:hover {
  background: var(--surface-hover);
}

.mx60-popover-item:focus {
  outline: 2px solid rgba(var(--critical-rgb), 0.6);
  outline-offset: -2px;
}

/* Plant badge [P1]..[P5] / [OF] */
.mx60-alarm-plant-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: rgba(var(--critical-rgb), 1);
  background: rgba(var(--critical-rgb), 0.1);
  border: 1px solid rgba(var(--critical-rgb), 0.3);
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.4;
}

/* Source label inside popover item — now a two-line container (head + sub) */
.mx60-alarm-item-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.mx60-alarm-item-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx60-alarm-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 11px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .app-footer {
    font-size: 10px;
    padding: 14px 12px;
    margin-top: 24px;
  }
}

/* ============================================================
   AUDIT PAGE — SDD mx60-rbac-and-audit-trail
   Styled to match the dashboard design system.
   Uses only theme variables — works in both light and dark.
   Reference components: .planta-tab (tabs), .cfg-filter (inputs/select),
   .cfg-table / .cfg-table-wrap (table), .equipment-search (text inputs),
   .pag-btn (action button), .cfg-counter (status chip).
   ============================================================ */

/* ── Page wrapper ── */
.audit-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 32px;
}

/* ── Title ── */
.audit-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ── Filter form — inline row, wraps on narrow widths ── */
.audit-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Shared base for text inputs */
.audit-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 12px;
  outline: none;
  min-width: 140px;
  flex: 1 1 140px;
  transition: border-color 0.15s ease;
}
.audit-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.audit-input::placeholder {
  color: var(--text-muted);
}

/* Select — mirrors .cfg-filter */
.audit-select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 28px 8px 12px;
  outline: none;
  cursor: pointer;
  flex: 0 1 auto;
  transition: border-color 0.15s ease;
}
.audit-select:hover  { border-color: var(--accent); }
.audit-select:focus  {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Action button — mirrors .pag-btn */
.audit-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.audit-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.audit-btn:active {
  transform: translateY(1px);
}

/* ── Tabs bar — mirrors .planta-tabs / .planta-tab ── */
.audit-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.audit-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 99px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.audit-tab:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.audit-tab--active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.4);
  color: var(--accent);
}

/* ── Record count chip — mirrors .cfg-counter ── */
.audit-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  align-self: flex-start;
  min-height: 22px;
}

/* ── Table wrapper — horizontal scroll, matches .cfg-table-wrap ── */
.audit-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.audit-table-wrap::-webkit-scrollbar { height: 4px; }
.audit-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}

/* ── Table — mirrors .cfg-table ── */
.audit-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-primary);
}

.audit-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-solid);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Accent stripe under the sticky header */
.audit-table thead tr::after {
  content: '';
  display: table-cell;
  width: 0;
}

.audit-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text-primary);
}

.audit-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra-light row separator (subtle, not colored stripe) */
.audit-table tbody tr:hover td {
  background: var(--surface-hover);
}

/* ── ORD column — monospace, smaller, constrained width ── */
.audit-ord {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Empty / error state cells ── */
.audit-empty,
.audit-error {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.audit-error {
  color: var(--critical-fg);
  font-style: normal;
  font-weight: 600;
}

/* ── Login event badges (ACCESOS tab) ── */
.audit-event-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  white-space: nowrap;
}
.audit-event-badge--ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--ok-fg);
}
.audit-event-badge--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--warn-fg);
}
.audit-event-badge--critical {
  background: rgba(255, 68, 85, 0.12);
  border-color: rgba(255, 68, 85, 0.35);
  color: var(--critical-fg);
}
.audit-event-badge--neutral {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── Pagination bar — audit-pager ── */
.audit-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

/* Individual page buttons — mirrors .audit-tab visual language */
.audit-pager-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.audit-pager-btn:hover:not(:disabled) {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Active (current) page button — accent fill */
.audit-pager-btn--active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.4);
  color: var(--accent);
  cursor: default;
}

/* Disabled state (prev on page 1, next on last page) */
.audit-pager-btn--disabled,
.audit-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ellipsis gap between non-contiguous page numbers */
.audit-pager-gap {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 4px;
  user-select: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .audit-filter-form {
    flex-direction: column;
    align-items: stretch;
  }
  .audit-input,
  .audit-select,
  .audit-btn {
    width: 100%;
    flex: none;
  }
  .audit-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .audit-tab {
    font-size: 11px;
    padding: 6px 14px;
  }
  .audit-title {
    font-size: 15px;
  }
}