/**
 * Unified App Theme Overrides - Align app pages with index.html design system
 * ===========================================================
 * SPDX-License-Identifier: LicenseRef-Kodachi-SAN-1.0
 * Copyright (c) 2013-2026 Warith Al Maawali
 */

:root {
  --primary-color: var(--cyan-300);
  --secondary-color: rgba(16, 25, 23, 0.9);
  --accent-color: var(--green-400);
  --hover-color: var(--green-400);
  --text-color: var(--gray-300);
  --bg-color: var(--gray-950);
  --panel-bg: rgba(8, 15, 13, 0.95);
  --border-color: rgba(53, 230, 212, 0.28);
  --border-glow: inset 0 0 0 1px rgba(53, 230, 212, 0.05), 0 0 16px rgba(53, 230, 212, 0.1);
  --accent-glow: 0 0 12px rgba(53, 230, 212, 0.26);
  --domain-tag-bg: rgba(53, 230, 212, 0.1);
  --domain-tag-hover-bg: rgba(158, 207, 79, 0.14);
}

.main-card,
.view,
.status-summary .stat-card,
.status-grid .server-card,
.kpi-card,
.chart-container,
.country-card,
.table-container,
.data-table-container,
.provider-card,
.anomaly-card,
#world-map-container,
.recent-domains,
form,
.verification-card {
  background: linear-gradient(145deg, rgba(0, 18, 18, 0.76) 0%, rgba(0, 10, 10, 0.92) 100%) !important;
  border: 1px solid rgba(53, 230, 212, 0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(53, 230, 212, 0.05);
  color: var(--gray-300);
}

.main-card {
  border-radius: 16px;
}

header {
  border-bottom: 1px solid rgba(53, 230, 212, 0.24);
}

.status-summary .stat-value,
.kpi-title,
.kpi-icon,
.chart-title,
.country-name,
.server-type {
  color: var(--cyan-300) !important;
}

.status-summary .stat-label,
.kpi-subtitle,
.ip-count,
.server-location,
.server-name,
.anomaly-description,
.footer p,
.tagline {
  color: var(--gray-300) !important;
}

.server-status.online,
.status-indicator.online,
.kpi-trend.positive {
  color: var(--success) !important;
}

.server-status.offline,
.status-indicator.offline,
.kpi-trend.negative {
  color: var(--error) !important;
}

.nav-button,
.refresh-btn,
.analyze-btn,
.show-more-btn,
.show-less-btn,
.suggestion-btn,
.top-button,
.back-button,
.chart-control-button {
  background: rgba(53, 230, 212, 0.08) !important;
  color: var(--cyan-300) !important;
  border: 1px solid rgba(53, 230, 212, 0.38) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(53, 230, 212, 0.05), 0 6px 12px rgba(0, 0, 0, 0.24);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
}

.nav-button:hover,
.refresh-btn:hover,
.analyze-btn:hover,
.show-more-btn:hover,
.show-less-btn:hover,
.suggestion-btn:hover,
.top-button:hover,
.back-button:hover,
.chart-control-button:hover,
.nav-button.active {
  background: rgba(158, 207, 79, 0.12) !important;
  border-color: rgba(158, 207, 79, 0.62) !important;
  color: var(--green-400) !important;
  box-shadow: inset 0 0 0 1px rgba(158, 207, 79, 0.14), 0 10px 16px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
}

.back-button,
.top-button {
  width: 42px;
  height: 42px;
}

.back-button svg,
.top-button svg {
  stroke: currentColor;
}

.logo-container .kodachi-logo,
.main-card .kodachi-logo {
  border: 1px solid rgba(213, 226, 218, 0.82);
  border-radius: 50%;
  padding: 5px;
  background: radial-gradient(circle at 50% 35%, rgba(18, 27, 24, 0.95) 0%, rgba(6, 10, 9, 0.98) 100%);
  box-shadow:
    0 0 0 2px rgba(4, 7, 6, 0.88),
    0 8px 18px rgba(0, 0, 0, 0.44),
    0 0 14px rgba(213, 226, 218, 0.24);
  filter: none !important;
}

.logo-container .kodachi-logo {
  width: 78px;
  height: 78px;
}

.main-card .kodachi-logo {
  width: 72px;
  height: 72px;
}

.data-table,
#hostnames-table {
  border-color: rgba(53, 230, 212, 0.24) !important;
}

.data-table th,
.data-table td,
#hostnames-table th,
#hostnames-table td,
.dataTables_wrapper table tbody td {
  border-color: rgba(53, 230, 212, 0.2) !important;
  color: var(--gray-300) !important;
}

.data-table th,
#hostnames-table th {
  color: var(--cyan-300) !important;
  background: rgba(7, 20, 19, 0.62) !important;
}

.data-table tr:hover td,
#hostnames-table tr:hover td {
  background: rgba(158, 207, 79, 0.08) !important;
}

.chart-control-select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
input[type="text"],
input[type="search"] {
  background: rgba(0, 10, 10, 0.86) !important;
  color: var(--gray-100) !important;
  border: 1px solid rgba(53, 230, 212, 0.28) !important;
  border-radius: 6px;
}

.chart-control-select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
input[type="text"]:focus,
input[type="search"]:focus {
  outline: 2px solid rgba(53, 230, 212, 0.45);
  outline-offset: 1px;
  border-color: var(--cyan-300) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--cyan-300) !important;
  border-color: rgba(53, 230, 212, 0.28) !important;
  background: rgba(53, 230, 212, 0.08) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--green-400) !important;
  border-color: rgba(158, 207, 79, 0.62) !important;
  background: rgba(158, 207, 79, 0.12) !important;
}

.show-more-btn,
.show-less-btn,
.recent-domain-link.active {
  box-shadow: inset 0 0 0 1px rgba(158, 207, 79, 0.14), 0 10px 16px rgba(0, 0, 0, 0.24) !important;
}

#loading-screen,
#loading-overlay {
  background: radial-gradient(circle at 50% 0%, #0b1412 0%, var(--gray-950) 48%, #020403 100%) !important;
}

.loader-spinner,
.loading-spinner {
  border-color: rgba(53, 230, 212, 0.2) !important;
  border-top-color: var(--cyan-300) !important;
}

.loader-text,
.loading-text {
  color: var(--cyan-300) !important;
}

.loader-subtext {
  color: var(--gray-400) !important;
}

.loader-status-item {
  color: var(--green-400) !important;
}

@media (max-width: 900px) {
  .logo-container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .back-button {
    left: 12px;
    top: 12px;
  }

  .top-button {
    right: 12px;
    bottom: 12px;
  }

  .status-summary,
  .kpi-container {
    gap: 12px;
  }

  .status-summary .stat-card,
  .kpi-card {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}