/* Ignition / SCADA-specific styles */

.usecase_section {
  background-color: #f0f4f8;
}

.usecase_section .usecase_intro {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
  color: #555;
}

.dashboard_section {
  background-color: #0d1117;
  color: #ffffff;
}

.dashboard_section .heading_container h2 span {
  color: #00bbf0;
}

.dashboard_section .section_subtitle {
  text-align: center;
  color: #8b9cb3;
  max-width: 700px;
  margin: 15px auto 0;
}

/* SCADA screen frame */
.scada_frame {
  background: #121820;
  border: 1px solid #2a3544;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  margin-top: 30px;
}

.scada_titlebar {
  background: linear-gradient(180deg, #1e2a3a 0%, #162030 100%);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a3544;
  font-size: 12px;
}

.scada_titlebar .scada_logo {
  color: #00bbf0;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.scada_titlebar .scada_nav {
  display: flex;
  gap: 4px;
}

.scada_titlebar .scada_nav span {
  padding: 4px 12px;
  background: #0a1520;
  border-radius: 3px;
  color: #8b9cb3;
  cursor: default;
}

.scada_titlebar .scada_nav span.active {
  background: #00bbf0;
  color: #0d1117;
  font-weight: 600;
}

.scada_titlebar .scada_status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 11px;
}

.scada_titlebar .status_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse 2s infinite;
}

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

.scada_body {
  padding: 16px;
  min-height: 320px;
}

/* Digital Twin layout */
.twin_layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 12px;
}

.twin_main {
  background: #0a1018;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  padding: 16px;
  position: relative;
  min-height: 280px;
}

.twin_racks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.twin_aisle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.twin_aisle_label {
  font-size: 9px;
  color: #4a6080;
  width: 50px;
  text-align: right;
}

.twin_rack_row {
  display: flex;
  gap: 3px;
  flex: 1;
}

.twin_rack {
  flex: 1;
  height: 28px;
  border-radius: 2px;
  position: relative;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
}

.twin_rack.cold { background: linear-gradient(180deg, #1a4a7a, #0d3060); border: 1px solid #00bbf0; }
.twin_rack.hot { background: linear-gradient(180deg, #7a2a1a, #501808); border: 1px solid #f97316; }
.twin_rack.normal { background: linear-gradient(180deg, #1a3a2a, #0d2818); border: 1px solid #4ade80; }

.twin_crac {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}

.twin_crac_unit {
  flex: 1;
  background: #162030;
  border: 1px solid #00bbf0;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.twin_crac_unit .crac_icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.twin_crac_unit .crac_label {
  font-size: 9px;
  color: #8b9cb3;
}

.twin_crac_unit .crac_value {
  font-size: 13px;
  color: #00bbf0;
  font-weight: 700;
}

.twin_sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.twin_metric {
  background: #162030;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  padding: 10px;
}

.twin_metric .metric_label {
  font-size: 10px;
  color: #8b9cb3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.twin_metric .metric_value {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 4px 0;
}

.twin_metric .metric_unit {
  font-size: 11px;
  color: #00bbf0;
}

.twin_metric .metric_bar {
  height: 4px;
  background: #1e2a3a;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.twin_metric .metric_bar_fill {
  height: 100%;
  border-radius: 2px;
}

.twin_metric .metric_bar_fill.cyan { background: #00bbf0; }
.twin_metric .metric_bar_fill.green { background: #4ade80; }
.twin_metric .metric_bar_fill.orange { background: #f97316; }

/* Flow arrows overlay */
.flow_arrows {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  color: #4a6080;
}

.flow_arrows .cold_flow { color: #00bbf0; }
.flow_arrows .hot_flow { color: #f97316; }

/* Dashboard grid layout */
.dash_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash_panel {
  background: #162030;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  padding: 12px;
}

.dash_panel.wide { grid-column: span 2; }
.dash_panel.full { grid-column: span 3; }

.dash_panel_title {
  font-size: 10px;
  color: #8b9cb3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #1e2a3a;
  padding-bottom: 6px;
}

/* Gauge widget */
.gauge_widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.gauge_ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid #1e2a3a;
  border-top-color: #00bbf0;
  border-right-color: #00bbf0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gauge_ring.green { border-top-color: #4ade80; border-right-color: #4ade80; }
.gauge_ring.orange { border-top-color: #f97316; border-right-color: #f97316; }

.gauge_value {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.gauge_label {
  font-size: 9px;
  color: #8b9cb3;
  margin-top: 6px;
  text-align: center;
}

/* Trend chart (CSS bars) */
.trend_chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  padding-top: 4px;
}

.trend_bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

.trend_bar.cyan { background: rgba(0, 187, 240, 0.7); }
.trend_bar.green { background: rgba(74, 222, 128, 0.7); }
.trend_bar.orange { background: rgba(249, 115, 22, 0.7); }

.trend_labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #4a6080;
  margin-top: 4px;
}

/* Alarm list */
.alarm_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alarm_item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 10px;
}

.alarm_item.critical { background: rgba(239, 68, 68, 0.15); border-left: 3px solid #ef4444; }
.alarm_item.warning { background: rgba(249, 115, 22, 0.15); border-left: 3px solid #f97316; }
.alarm_item.info { background: rgba(0, 187, 240, 0.1); border-left: 3px solid #00bbf0; }

.alarm_time { color: #4a6080; min-width: 42px; }
.alarm_msg { color: #c8d6e5; flex: 1; }

/* P&ID schematic */
.pid_schematic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  flex-wrap: wrap;
}

.pid_component {
  text-align: center;
  padding: 8px;
  border: 1px solid #2a3544;
  border-radius: 4px;
  background: #0a1520;
  min-width: 70px;
}

.pid_component .pid_icon { font-size: 22px; }
.pid_component .pid_name { font-size: 9px; color: #8b9cb3; margin-top: 4px; }
.pid_component .pid_val { font-size: 11px; color: #00bbf0; font-weight: 700; margin-top: 2px; }

.pid_pipe {
  color: #00bbf0;
  font-size: 18px;
  font-weight: bold;
}

/* Tag value table */
.tag_table {
  width: 100%;
  font-size: 10px;
  border-collapse: collapse;
}

.tag_table th {
  color: #8b9cb3;
  font-weight: 600;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #1e2a3a;
}

.tag_table td {
  padding: 5px 6px;
  border-bottom: 1px solid #0d1520;
  color: #c8d6e5;
}

.tag_table td.val { color: #00bbf0; font-weight: 600; }
.tag_table td.val.green { color: #4ade80; }
.tag_table td.val.orange { color: #f97316; }

/* Dashboard gallery cards */
.dashboard_gallery {
  margin-top: 40px;
}

.gallery_card {
  margin-bottom: 40px;
}

.gallery_card h4 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 6px;
}

.gallery_card p {
  color: #8b9cb3;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Service icons SVG */
.service_section .box .img-box img.service_icon_svg {
  width: 55px;
  height: 55px;
  max-width: 55px;
  max-height: 55px;
}

.service_section .heading_container h2 span,
.usecase_section .heading_container h2 span {
  color: #00bbf0;
}

/* Expertise badges */
.expertise_section {
  background: linear-gradient(135deg, #00204a 0%, #0a3060 100%);
  color: #ffffff;
}

.expertise_badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.expertise_badge {
  background: rgba(0, 187, 240, 0.1);
  border: 1px solid rgba(0, 187, 240, 0.3);
  border-radius: 8px;
  padding: 16px 24px;
  text-align: center;
  min-width: 160px;
}

.expertise_badge .badge_icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.expertise_badge h5 {
  color: #00bbf0;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.expertise_badge p {
  font-size: 11px;
  color: #8b9cb3;
  margin: 0;
}

/* Hero SCADA preview in slider */
.hero_scada_preview {
  background: #121820;
  border: 1px solid #2a3544;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero_scada_preview .scada_body {
  min-height: 240px;
  padding: 12px;
}

.hero_mini_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hero_mini_panel {
  background: #162030;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  padding: 10px;
}

.hero_mini_panel .panel_label {
  font-size: 9px;
  color: #8b9cb3;
  text-transform: uppercase;
}

.hero_mini_panel .panel_val {
  font-size: 20px;
  font-weight: 700;
  color: #00bbf0;
}

.hero_mini_panel .panel_val.green { color: #4ade80; }

/* Process steps */
.process_steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
  flex-wrap: wrap;
}

.process_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  max-width: 180px;
}

.process_step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 20px;
  color: #00bbf0;
  font-size: 20px;
}

.process_step .step_num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #00bbf0;
  color: #00204a;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 16px;
}

.process_step h5 {
  font-size: 13px;
  font-weight: 700;
  color: #00204a;
  margin-bottom: 6px;
}

.process_step p {
  font-size: 12px;
  color: #666;
}

/* Nav anchor links */
.custom_nav-container .navbar-nav .nav-item .nav-link {
  text-transform: none;
  font-size: 14px;
}

@media (max-width: 992px) {
  .twin_layout { grid-template-columns: 1fr; }
  .dash_grid { grid-template-columns: 1fr 1fr; }
  .dash_panel.wide { grid-column: span 2; }
  .dash_panel.full { grid-column: span 2; }
  .process_step:not(:last-child)::after { display: none; }
}

@media (max-width: 576px) {
  .dash_grid { grid-template-columns: 1fr; }
  .dash_panel.wide, .dash_panel.full { grid-column: span 1; }
  .scada_titlebar { flex-wrap: wrap; gap: 6px; }
  .scada_titlebar .scada_nav { display: none; }
}