/* 
 * Machine Status Dashboard - Core Stylesheet
 * Incorporating design.md tokens + Image 1 Industrial Operations theme
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Surfaces */
  --bg-canvas: #0B1324;
  --bg-sidebar: #070D19;
  --bg-surface: #111C35;
  --bg-card: #152243;
  --bg-card-subtle: #19284D;
  --border-color: #203158;
  --border-light: #2A3F70;

  /* Typography */
  --text-primary: #F3F4F6;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-highlight: #38BDF8;

  /* Status Tokens */
  --status-success: #22C55E;
  --status-success-bg: rgba(34, 197, 94, 0.15);
  --status-success-border: rgba(34, 197, 94, 0.4);

  --status-warning: #EAB308;
  --status-warning-bg: rgba(234, 179, 8, 0.15);
  --status-warning-border: rgba(234, 179, 8, 0.4);

  --status-danger: #EF4444;
  --status-danger-bg: rgba(239, 68, 68, 0.2);
  --status-danger-border: rgba(239, 68, 68, 0.5);
}

/* Base resets & typography */
body {
  font-family: var(--font-sans);
  background-color: #070D19;
  color: #E2E8F0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom modern scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: rgba(11, 19, 36, 0.7);
}
::-webkit-scrollbar-thumb {
  background: #253761;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3B82F6;
}

/* Animation utilities */
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

.pulse-alert {
  animation: pulseSubtle 2s infinite ease-in-out;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-box {
  background: linear-gradient(90deg, #13203E 25%, #1D2E56 50%, #13203E 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Tooltip styles */
.has-tooltip {
  position: relative;
}
.tooltip-content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(4px);
  pointer-events: none;
}
.has-tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Grid Cell Interactive State */
.heatmap-cell {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.heatmap-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* Table header sticky shadow */
.sticky-th {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Vertical Column Header for 1080p Single-Screen Fit */
.vertical-header-wrapper {
  height: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 1px 6px;
  overflow: hidden;
}

.vertical-header-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: #CBD5E1;
  letter-spacing: 0.02em;
  line-height: 1.1;
  max-height: 98px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: color 0.15s ease;
}

.vertical-header-wrapper:hover .vertical-header-text {
  color: #38BDF8;
}

/* Compact status block for color-code only mode (No text OK/DOWN/ON-OFF) */
.status-color-block {
  width: 100%;
  max-width: 46px;
  height: 28px;
  margin: 0 auto;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.status-color-block:hover {
  transform: scale(1.15);
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}