@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Brand colors */
  --brand-500: #5335F8;
  --brand-600: #4123E0;
  --brand-700: #331AB8;
  --brand-50: #F0EEFF;
  --brand-100: #E1DCFF;
  
  /* Dark Mode Palette */
  --ink: #09081E;
  --ink2: #131138;
  --ink3: #1a174d;
  --surface: #FAFAFE;
  
  /* Status Colors */
  --mint-500: #10B981;
  --gold-500: #F4B740;
  --danger: #EF4444;
  --info: #3B82F6;
  --gray-muted: #6C757D;
  --gray-dark: #1E293B;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

/* Base Styles */
body {
  font-family: var(--font-body);
  background-color: var(--ink);
  color: var(--surface);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-image: 
    radial-gradient(at 0% 0%, rgba(83, 53, 248, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--ink3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-500);
}

/* Premium Dashboard Cards */
.glass-card {
  background: rgba(19, 17, 56, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(83, 53, 248, 0.12);
  border-radius: 1.15rem;
  box-shadow: 0 10px 30px -10px rgba(9, 8, 30, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.glass-card:hover {
  border-color: rgba(83, 53, 248, 0.25);
  box-shadow: 0 15px 35px -5px rgba(9, 8, 30, 0.6);
  transform: translateY(-2px);
}

.glass-card-header {
  background: linear-gradient(135deg, rgba(9, 8, 30, 0.8) 0%, rgba(19, 17, 56, 0.8) 100%);
  border-bottom: 1px solid rgba(83, 53, 248, 0.12);
  padding: 1.25rem 1.5rem;
}

.glass-card-body {
  padding: 1.5rem;
}

/* Glowing Shadows & Accents */
.shadow-glow-primary {
  box-shadow: 0 0 20px -5px rgba(83, 53, 248, 0.4);
}
.shadow-glow-mint {
  box-shadow: 0 0 20px -5px rgba(16, 185, 129, 0.4);
}
.shadow-glow-danger {
  box-shadow: 0 0 20px -5px rgba(239, 68, 68, 0.4);
}

/* Pulse Dot */
.status-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.status-pulse.bg-mint {
  background-color: var(--mint-500);
  box-shadow: 0 0 8px var(--mint-500);
}
.status-pulse.bg-danger {
  background-color: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}
.status-pulse.bg-gold {
  background-color: var(--gold-500);
  box-shadow: 0 0 8px var(--gold-500);
}
.status-pulse.bg-offline {
  background-color: var(--gray-muted);
}
.status-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 0.8;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* Mode Switches (Auto/Manual) */
.hmi-btn-group {
  display: flex;
  background: var(--ink);
  padding: 4px;
  border-radius: 0.75rem;
  border: 1px solid rgba(83, 53, 248, 0.2);
}

.hmi-btn-group .btn {
  border: none;
  background: transparent;
  color: var(--gray-muted);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.hmi-btn-group .btn.active {
  background: var(--brand-500);
  color: var(--surface);
  box-shadow: 0 4px 10px rgba(83, 53, 248, 0.35);
}

/* Dynamic SVG Schematic Styling */
.schematic-container {
  position: relative;
  background: rgba(9, 8, 30, 0.8);
  border: 1px solid rgba(83, 53, 248, 0.15);
  border-radius: 1.15rem;
  padding: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.schematic-svg {
  width: 100%;
  height: auto;
  max-height: 520px;
}

/* SVG Elements Styling */
.svg-pipe-bg {
  stroke: #1e293b;
  stroke-width: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.svg-pipe-inner {
  stroke: #0f172a;
  stroke-width: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Flow line animation inside pipes */
.svg-pipe-flow {
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 8, 12;
  animation: svg-flow-anim 1.5s linear infinite;
}

@keyframes svg-flow-anim {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.svg-pipe-flow.flow-cold {
  stroke: #00e5ff;
}

.svg-pipe-flow.flow-warm {
  stroke: #ff9100;
}

.svg-pipe-flow.flow-stopped {
  animation: none;
  stroke: transparent;
}

/* Component Icons inside SVG */
.svg-chiller-box {
  fill: #131138;
  stroke: var(--brand-500);
  stroke-width: 2px;
  rx: 8px;
}

.svg-chiller-box.active {
  stroke: var(--mint-500);
  fill: rgba(16, 185, 129, 0.05);
}

.svg-chiller-box.fault {
  stroke: var(--danger);
  fill: rgba(239, 68, 68, 0.05);
  animation: border-blink 1s infinite alternate;
}

@keyframes border-blink {
  0% { stroke: var(--danger); }
  100% { stroke: rgba(239, 68, 68, 0.2); }
}

.svg-text-label {
  font-family: var(--font-display);
  font-weight: bold;
  fill: var(--surface);
  font-size: 11px;
}

.svg-text-sublabel {
  font-family: var(--font-body);
  fill: var(--gray-muted);
  font-size: 10px;
}

.svg-value-box {
  fill: rgba(9, 8, 30, 0.9);
  stroke: rgba(83, 53, 248, 0.3);
  stroke-width: 1px;
  rx: 4px;
}

.svg-value-text {
  font-family: var(--font-display);
  fill: var(--gold-500);
  font-size: 12px;
  font-weight: 600;
}

/* Pump Styling */
.svg-pump-body {
  fill: #1e293b;
  stroke: #64748b;
  stroke-width: 2.5px;
  transition: all 0.3s ease;
}

.pump-running .svg-pump-body {
  stroke: #10B981;
  fill: #065f46;
}

.pump-fault .svg-pump-body {
  stroke: #EF4444;
  fill: #7f1d1d;
}

.svg-pump-impeller {
  fill: none;
  stroke: rgba(250, 250, 254, 0.8);
  stroke-width: 2px;
  stroke-linecap: round;
}

.pump-running .svg-pump-impeller {
  stroke: #ffffff;
}

.pump-fault .svg-pump-impeller {
  stroke: #fca5a5;
}

/* Tank visual gauge */
.svg-tank-body {
  fill: #1e1b4b;
  stroke: var(--brand-500);
  stroke-width: 2px;
  rx: 12px;
}

.svg-water-level {
  fill: rgba(30, 144, 255, 0.35);
  transition: height 0.5s ease, y 0.5s ease;
}

/* MRI visual box */
.svg-mri-body {
  fill: #111827;
  stroke: #374151;
  stroke-width: 2px;
  rx: 16px;
}

/* Login controls and indicators */
.login-form-input {
  background: rgba(9, 8, 30, 0.5);
  border: 1px solid rgba(83, 53, 248, 0.25);
  color: var(--surface) !important;
  border-radius: 0.5rem;
}

.login-form-input:focus {
  background: rgba(9, 8, 30, 0.8);
  border-color: var(--brand-500);
  box-shadow: 0 0 10px rgba(83, 53, 248, 0.25);
}

.btn-brand {
  background-color: var(--brand-500);
  color: var(--surface);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-brand:hover {
  background-color: var(--brand-600);
  color: var(--surface);
  box-shadow: 0 0 15px rgba(83, 53, 248, 0.4);
}

.btn-outline-brand {
  background: transparent;
  color: var(--brand-100);
  border: 1px solid rgba(83, 53, 248, 0.3);
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-outline-brand:hover {
  background: rgba(83, 53, 248, 0.1);
  border-color: var(--brand-500);
  color: var(--surface);
}

/* Custom indicator panel button styles */
.btn-control-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.btn-control-secondary-pump {
  background: rgba(83, 53, 248, 0.1);
  border-color: rgba(83, 53, 248, 0.2);
  color: var(--brand-100);
}
.btn-control-secondary-pump.active {
  background: var(--brand-500);
  color: white;
  box-shadow: 0 0 15px rgba(83, 53, 248, 0.4);
}

.btn-control-chiller {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: var(--mint-500);
}
.btn-control-chiller.active {
  background: var(--mint-500);
  color: #09081E;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

/* Alarm panel styles */
.alarm-table th {
  background: rgba(9, 8, 30, 0.8) !important;
  color: var(--gray-muted);
  border-bottom: 2px solid rgba(83, 53, 248, 0.15) !important;
}

.alarm-table td {
  border-bottom: 1px solid rgba(83, 53, 248, 0.08) !important;
  vertical-align: middle;
}

.alarm-row-active-high {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5;
}

.alarm-row-active-low {
  background: rgba(244, 183, 64, 0.06) !important;
  color: #fde047;
}

.alarm-row-cleared {
  color: var(--gray-muted);
}

/* Live charts spacing */
.chart-container {
  position: relative;
  height: 220px;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .schematic-container {
    overflow-x: auto;
  }
  .schematic-svg {
    min-width: 750px;
  }
}