/* Custom CSS for Enterprise Monitor - High-Tech Enterprise Light NOC Theme */
:root {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent-blue: #2563eb;
  --accent-cyan: #0284c7;
  --accent-green: #059669;
  --accent-red: #e11d48;
  --accent-amber: #d97706;
}

body {
  background-color: var(--bg-main) !important;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(148, 163, 184, 0.28) 1.5px, transparent 0) !important;
  background-size: 24px 24px !important;
  color: var(--text-main) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Glowing Pulsing Status Dots */
.status-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.status-pulse.online {
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981, 0 0 14px rgba(16, 185, 129, 0.5);
}

.status-pulse.online::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: pulse 2s infinite ease-out;
}

.status-pulse.offline {
  background-color: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, 0.6);
}

.status-pulse.offline::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  animation: pulse-danger 1.4s infinite ease-out;
}

.status-pulse.paused {
  background-color: #94a3b8;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.5);
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

@keyframes pulse-danger {
  0% { transform: scale(1); opacity: 0.95; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* High-Tech Enterprise Light Cyber Cards */
.cyber-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid #2563eb !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}

.cyber-card:hover {
  border-color: #0284c7 !important;
  border-top-color: #0284c7 !important;
  box-shadow: 0 14px 28px -4px rgba(14, 165, 233, 0.16), 0 0 0 1px rgba(14, 165, 233, 0.22) !important;
  transform: translateY(-2.5px);
}

/* Hardware Switch Rack Faceplate (Brushed Metal Texture Effect) */
.chassis-faceplate {
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f8 35%, #dce5ef 100%) !important;
  border: 2px solid #94a3b8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 30px -6px rgba(15, 23, 42, 0.15) !important;
  border-radius: 12px !important;
  position: relative;
}

.rack-ear-screw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #94a3b8 65%, #64748b 100%);
  border: 1px solid #64748b;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.35);
  position: relative;
}
.rack-ear-screw::before {
  content: '+';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 800;
  color: #475569;
  line-height: 1;
}

/* High-Tech Switch RJ45 Ports */
.switch-port-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.16s ease-in-out !important;
}

.switch-port-btn:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.28) !important;
  transform: translateY(-1.5px) scale(1.02);
}

/* Radar Scan Line Effect */
.radar-scan {
  position: relative;
  overflow: hidden;
}
.radar-scan::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.15), transparent);
  animation: radar-sweep 4s infinite linear;
}
@keyframes radar-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Tech Telemetry Monospace HUD Badges */
.tech-hud-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* Table light theme enforcement with high contrast */
table {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

table tr {
  background-color: transparent !important;
}

table tbody tr {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Custom Scrollbar for Light Theme */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   CYBER NOC DARK OPERATIONS THEME (Đúng chất Monitor IT Viễn Thông 4.0)
   ========================================================================== */
body.theme-cyber {
  background-color: #080c14 !important;
  background-image: 
    radial-gradient(circle at 1.5px 1.5px, rgba(14, 165, 233, 0.22) 1.5px, transparent 0) !important;
  background-size: 24px 24px !important;
  color: #f1f5f9 !important;
}

body.theme-cyber header {
  background-color: rgba(11, 17, 32, 0.92) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  backdrop-filter: blur(12px) !important;
}

body.theme-cyber header h1 {
  color: #ffffff !important;
}

body.theme-cyber #theme-selector-pill {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.theme-cyber #btn-admin-auth {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.theme-cyber .cyber-card {
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

body.theme-cyber .cyber-card:hover {
  border-color: #00f2fe !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.22), 0 0 0 1px rgba(0, 242, 254, 0.3) !important;
}

body.theme-cyber .cyber-card h4,
body.theme-cyber .cyber-card h3,
body.theme-cyber .cyber-card h5 {
  color: #ffffff !important;
}

body.theme-cyber .cyber-card p {
  color: #94a3b8 !important;
}

body.theme-cyber .radar-scan {
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

body.theme-cyber .bg-slate-50,
body.theme-cyber .bg-slate-50\/90,
body.theme-cyber .bg-slate-100 {
  background-color: #0b1120 !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}

body.theme-cyber .text-slate-900 { color: #f8fafc !important; }
body.theme-cyber .text-slate-800 { color: #f1f5f9 !important; }
body.theme-cyber .text-slate-700 { color: #cbd5e1 !important; }
body.theme-cyber .text-slate-600 { color: #94a3b8 !important; }
body.theme-cyber .text-slate-500 { color: #64748b !important; }
body.theme-cyber .border-slate-200,
body.theme-cyber .border-slate-200\/80,
body.theme-cyber .border-slate-200\/90,
body.theme-cyber .border-slate-300 {
  border-color: #1e293b !important;
}

/* Switch Faceplate in Cyber Dark */
body.theme-cyber .chassis-faceplate {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 45%, #020617 100%) !important;
  border: 2px solid #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 36px rgba(0,0,0,0.65) !important;
}

body.theme-cyber .switch-port-btn {
  background: #0b1120 !important;
  border-color: #334155 !important;
}

body.theme-cyber .switch-port-btn:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

/* Tables in Cyber Dark */
body.theme-cyber table {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}

body.theme-cyber thead tr {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

body.theme-cyber tbody tr {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}

body.theme-cyber tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.7) !important;
}

body.theme-cyber input,
body.theme-cyber select,
body.theme-cyber textarea {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.theme-cyber ::-webkit-scrollbar-track {
  background: #0b1120;
}
body.theme-cyber ::-webkit-scrollbar-thumb {
  background: #334155;
}
body.theme-cyber ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Navigation tabs in Cyber mode */
body.theme-cyber .nav-tab-btn:not(.bg-blue-600) {
  color: #94a3b8 !important;
}
body.theme-cyber .nav-tab-btn:not(.bg-blue-600):hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* Modals & Dialogs in Cyber mode */
body.theme-cyber #admin-pin-modal > div,
body.theme-cyber #target-modal > div,
body.theme-cyber #port-modal > div,
body.theme-cyber #import-modal > div {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}