/* NEOBRUTALISM UI DESIGN SYSTEM - GLOWING CANVAS CHARTS & DYNAMIC THEMES */

:root {
  --bg-canvas: #FFF9E6;
  --black: #000000;
  --white: #FFFFFF;

  /* Neobrutalist Palette */
  --yellow: #FFDE59;
  --pink: #FF5757;
  --cyan: #00F0FF;
  --green: #00E676;
  --purple: #CB6CE6;
  --orange: #FF914D;
  --dark-bg: #121212;

  --border-width: 3.5px;
  --shadow-offset: 5px;
  --font-main: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-canvas);
  background-image: 
    radial-gradient(var(--black) 1.4px, transparent 1.4px),
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0;
  color: var(--black);
  font-family: var(--font-main);
  line-height: 1.5;
  padding: 24px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

/* THEMES */
body.theme-cyberpunk {
  --bg-canvas: #0A0A0C;
  --black: #00F0FF;
  --white: #12141C;
  --yellow: #FFE600;
  --pink: #FF0055;
  --cyan: #00F0FF;
  --green: #00FF66;
  color: #00F0FF;
  background-color: #050508;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
}

body.theme-cyberpunk .box-brutal { border-color: #00F0FF; box-shadow: 5px 5px 0px #00F0FF; }
body.theme-cyberpunk .main-header { background: #0A0D18; border-color: #00F0FF; }
body.theme-cyberpunk .text-black, body.theme-cyberpunk h1, body.theme-cyberpunk h2, body.theme-cyberpunk h3 { color: #00F0FF !important; }
body.theme-cyberpunk input, body.theme-cyberpunk select { background-color: #0A0D18; color: #00FF66; border-color: #00F0FF; }

body.theme-blueprint {
  --bg-canvas: #0B192C;
  --black: #E2F1E7;
  --white: #1E3E62;
  --yellow: #FFD700;
  --pink: #FF4500;
  --cyan: #00E5FF;
  --green: #00FF87;
  color: #E2F1E7;
  background-color: #0B192C;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
body.theme-blueprint .box-brutal { border-color: #FFFFFF; box-shadow: 5px 5px 0px #00E5FF; }

body.theme-synthwave {
  --bg-canvas: #1A0B2E;
  --black: #FF007F;
  --white: #2D1B4E;
  --yellow: #FFDD00;
  --pink: #FF007F;
  --cyan: #00F3FF;
  --green: #00FF99;
  color: #00F3FF;
  background: linear-gradient(180deg, #1A0B2E 0%, #11052C 100%);
  background-size: 40px 40px;
}
body.theme-synthwave .box-brutal { border-color: #FF007F; box-shadow: 5px 5px 0px #00F3FF; }

body::before {
  content: '⚡ MULTI-VPS SHOWCASE';
  position: fixed;
  top: 40px;
  right: -50px;
  transform: rotate(15deg);
  background: var(--yellow);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0px var(--black);
  padding: 8px 30px;
  font-weight: 900;
  font-size: 0.85rem;
  z-index: -1;
  letter-spacing: 1px;
  opacity: 0.85;
}

body::after {
  content: 'VPS NEOMONITOR v3.5';
  position: fixed;
  bottom: 40px;
  left: -40px;
  transform: rotate(-12deg);
  background: var(--pink);
  color: var(--white);
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0px var(--black);
  padding: 8px 30px;
  font-weight: 900;
  font-size: 0.85rem;
  z-index: -1;
  letter-spacing: 1px;
  opacity: 0.85;
}

.app-container { max-width: 1400px; margin: 0 auto; position: relative; }

.neobanner {
  border: var(--border-width) solid var(--black);
  box-shadow: 6px 6px 0px var(--black);
  padding: 12px 20px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.yellow-banner { background: linear-gradient(135deg, var(--yellow) 85%, var(--orange) 100%); }

.box-brutal {
  border: var(--border-width) solid var(--black);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--black);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.card-telemetry::before, .chart-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -3px;
  right: -3px;
  height: 4px;
  background: repeating-linear-gradient(
    45deg,
    var(--black),
    var(--black) 10px,
    var(--yellow) 10px,
    var(--yellow) 20px
  );
  border-left: var(--border-width) solid var(--black);
  border-right: var(--border-width) solid var(--black);
  display: block;
}

/* CHART CANVAS STYLING */
.canvas-wrapper {
  border: var(--border-width) solid var(--black);
  box-shadow: 4px 4px 0px var(--black);
  overflow: hidden;
  background-color: #0A0A0E !important;
  position: relative;
}

canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.padding-lg { padding: 22px; }

.bg-yellow { background-color: var(--yellow) !important; }
.bg-pink   { background-color: var(--pink) !important; }
.bg-cyan   { background-color: var(--cyan) !important; }
.bg-green  { background-color: var(--green) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-white  { background-color: var(--white) !important; }
.bg-black  { background-color: var(--black) !important; color: var(--white) !important; }

.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }
.text-cyan  { color: var(--cyan) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-green { color: var(--green) !important; }
.text-center { text-align: center; }

.main-header {
  padding: 26px;
  margin-bottom: 24px;
  background: var(--yellow);
  background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 12px 12px;
}

.header-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.logo-title { font-size: 2.4rem; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.tagline { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; display: inline-block; margin-top: 6px; background-color: var(--black); color: var(--yellow); padding: 2px 8px; }

.status-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.pill-badge { border: var(--border-width) solid var(--black); box-shadow: 4px 4px 0px var(--black); padding: 8px 14px; font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; }

.config-bar { padding: 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; box-shadow: 4px 4px 0px var(--black); }
.config-item { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.config-item label { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; }

input[type="text"], input[type="password"], input[type="number"], select, textarea, .input-brutal, .input-readonly {
  width: 100%; padding: 10px 14px; border: var(--border-width) solid var(--black); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; background-color: var(--white); outline: none; box-shadow: 3px 3px 0px var(--black);
}

.btn-brutal {
  padding: 12px 22px; border: var(--border-width) solid var(--black); box-shadow: 4px 4px 0px var(--black); font-family: var(--font-main); font-weight: 900; font-size: 0.95rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.1s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-brutal:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--black); }
.btn-brutal:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px var(--black); }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; border: var(--border-width) solid var(--black); box-shadow: 3px 3px 0px var(--black); font-weight: 800; cursor: pointer; }
.btn-sm:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0px var(--black); }
.btn-block { width: 100%; }

.nav-tabs { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn { padding: 14px 22px; border: var(--border-width) solid var(--black); box-shadow: 5px 5px 0px var(--black); background-color: var(--white); font-family: var(--font-main); font-weight: 900; font-size: 0.9rem; cursor: pointer; transition: all 0.12s ease; }
.tab-btn:hover { background-color: var(--yellow); transform: translate(-1px, -1px); box-shadow: 6px 6px 0px var(--black); }
.tab-btn.active { background-color: var(--pink); color: var(--white); box-shadow: 2px 2px 0px var(--black); transform: translate(3px, 3px); }

.tab-content { display: none; }
.tab-content.active { display: block; }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 22px; }

.card-telemetry { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-size: 1.05rem; font-weight: 900; }
.card-icon { font-size: 1.6rem; }
.big-metric { font-size: 3.2rem; font-weight: 900; margin: 12px 0 4px 0; font-family: var(--font-mono); line-height: 1; }
.metric-subtitle { font-size: 0.88rem; font-weight: 800; margin-bottom: 14px; }
.progress-container { height: 18px; border: var(--border-width) solid var(--black); background-color: var(--white); margin-bottom: 16px; overflow: hidden; box-shadow: 2px 2px 0px var(--black); }
.progress-bar { height: 100%; transition: width 0.3s ease; }

.telemetry-details { border-top: var(--border-width) solid var(--black); padding-top: 12px; font-size: 0.83rem; font-family: var(--font-mono); display: flex; flex-direction: column; gap: 6px; }
.telemetry-details div { display: flex; justify-content: space-between; }

.section-box { padding: 26px; background-color: var(--white); }
.margin-top { margin-top: 24px; }
.margin-bottom { margin-bottom: 16px; }
.section-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.section-title-bar h2 { font-size: 1.45rem; font-weight: 900; }
.subtitle { font-weight: 700; margin-top: 4px; }

.table-responsive { overflow-x: auto; }
.table-brutal { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table-brutal th, .table-brutal td { border: var(--border-width) solid var(--black); padding: 12px 16px; text-align: left; }
.table-brutal th { background-color: var(--yellow); font-weight: 900; text-transform: uppercase; }
.table-brutal tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.02); }
.table-brutal tbody tr:hover { background-color: var(--cyan); }

.terminal-box { padding: 0; overflow: hidden; }
.terminal-header { background-color: #1A1A1A; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-width) solid var(--black); }
.terminal-title { display: flex; align-items: center; gap: 8px; }
.terminal-body { padding: 18px; height: 480px; overflow-y: auto; font-size: 0.88rem; line-height: 1.6; }
.log-line { margin-bottom: 4px; }

.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--black); }
.dot.red { background-color: var(--pink); }
.dot.yellow { background-color: var(--yellow); }
.dot.green { background-color: var(--green); }
.dot.pulse { animation: pulse-ring 1.5s infinite; }

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.8); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

.badge-pill { border: 2.5px solid var(--black); padding: 4px 10px; font-weight: 900; font-size: 0.78rem; display: inline-block; box-shadow: 2px 2px 0px var(--black); }
.badge-inline { padding: 3px 8px; font-weight: 800; border: 1.5px solid var(--black); font-size: 0.75rem; }
.black-pill { background-color: var(--black); color: var(--white); }
.main-footer { padding: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.88rem; background: var(--white); }

@media (max-width: 768px) {
  body { padding: 12px; }
  body::before, body::after { display: none; }
  .logo-title { font-size: 1.7rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .main-footer { flex-direction: column; text-align: center; }
}