:root {
  --site-primary: #ff5500;
  --site-primary-hover: #cc4400;
  --site-secondary: #000000;
  --site-warning: #ff9900;
  --site-bg: #111111;
  --site-card: #1c1c1c;
  --site-text: #f3f4f6;
  --site-muted: #9ca3af;
  --site-border: #333333;
}

html, body {
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
}

body {
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

main, .main, .wrap {
  background: var(--site-bg) !important;
}

.login-container, .card, .panel, .metric, .service-card, .section, .ticket-box {
  background: var(--site-card) !important;
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
}

.sidebar, .side {
  background: var(--site-secondary) !important;
  border-right: 1px solid var(--site-border);
}

header, .topbar {
  border-color: var(--site-primary) !important;
}

h1, h2, h3, h4, strong, label, .service-name, .metric-value, .info-value {
  color: var(--site-text) !important;
}

p, .subtitle, .muted, .metric-detail, .service-meta, .section-heading span,
.footer, .email-hint, .toggle-register, .user span, .nav-label, .sidebar-footer,
.info-label, .error-time, .summary-count {
  color: var(--site-muted) !important;
}

.eyebrow, .brand span, .brand strong span, .nav-icon, a, .toggle-register a,
.footer strong, .logo span {
  color: var(--site-primary) !important;
}

.btn-primary, .button, .btn, button, .btn-login {
  background: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover, .button:hover, .btn:hover, button:hover, .btn-login:hover {
  background: var(--site-primary-hover) !important;
  border-color: var(--site-primary-hover) !important;
}

input, select, textarea, .input, .toolbar input, .toolbar select,
.form-field input, .form-field select {
  background: #111111 !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--site-muted) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--site-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 85, 0, .25) !important;
}

.nav-link:hover, .nav-link.active, .link:hover, .link.active {
  background: #1c1c1c !important;
  color: #ffffff !important;
}

.nav-link.active .nav-icon, .nav-link:hover .nav-icon {
  color: var(--site-primary) !important;
}

.metric::after {
  background: rgba(255, 85, 0, .12) !important;
}

.status-online, .online, .success, .success-message {
  color: #10b981 !important;
  background: rgba(16, 185, 129, .12) !important;
}

.status-offline, .offline, .error, .error-message, .critical {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, .12) !important;
}

.status-degraded, .status-unknown, .warning {
  color: var(--site-warning) !important;
  background: rgba(255, 153, 0, .12) !important;
}

.role-badge, .badge, .pill {
  background: rgba(255, 153, 0, .12) !important;
  color: var(--site-warning) !important;
}

.apex-branding, .apex-header {
  background: linear-gradient(135deg, #000000 0%, #1c1c1c 100%) !important;
  border-color: var(--site-primary) !important;
}