/*
 * The CompuGeek site-wide support theme
 * Version: 1.0.0
 * Standard: black, white, and CompuGeek Green. No blue.
 */
:root {
  color-scheme: dark;
  --cg-black: #050505;
  --cg-near-black: #0a0a0a;
  --cg-surface: #111111;
  --cg-surface-raised: #181818;
  --cg-surface-soft: #202020;
  --cg-border: #303030;
  --cg-border-strong: #464646;
  --cg-green: #39b54a;
  --cg-green-hover: #49c85b;
  --cg-green-soft: rgba(57, 181, 74, 0.14);
  --cg-text: #f5f5f5;
  --cg-muted: #b8b8b8;
  --cg-warning: #f59e0b;
  --cg-danger: #dc2626;
  --cg-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);

  /* Common framework and legacy aliases */
  --primary: var(--cg-green);
  --primary-color: var(--cg-green);
  --accent: var(--cg-green);
  --accent-color: var(--cg-green);
  --link-color: var(--cg-green);
  --bs-primary: var(--cg-green);
  --bs-link-color: var(--cg-green);
  --blue: var(--cg-green);
}

html,
body {
  min-height: 100%;
  background: var(--cg-near-black) !important;
  color: var(--cg-text) !important;
}

body {
  accent-color: var(--cg-green);
}

body::before,
body::after {
  pointer-events: none;
}

a,
a:visited {
  color: var(--cg-green) !important;
}

a:hover,
a:focus-visible {
  color: var(--cg-green-hover) !important;
}

header,
nav,
footer,
.topbar,
.navbar,
.app-header,
.page-header,
.site-header,
.sidebar,
.left-rail,
.mobile-nav {
  background-color: var(--cg-black) !important;
  border-color: var(--cg-border) !important;
  color: var(--cg-text) !important;
}

main,
.page,
.content,
.content-area,
.workspace,
.dashboard,
.shell,
[class$="-shell"] {
  color: var(--cg-text) !important;
}

.card,
.panel,
.tile,
.widget,
.modal-content,
.dropdown-menu,
.safe-card,
.set-card,
.tv-card,
.tp-card,
.ag-card,
.alerts-card,
.va-card,
.ticket-card,
.stat-card,
.metric-card,
.summary-card,
.settings-card,
.route-card,
[class$="-card"],
[class*=" card"] {
  background: var(--cg-surface) !important;
  border-color: var(--cg-border) !important;
  color: var(--cg-text) !important;
  box-shadow: var(--cg-shadow) !important;
}

.card .card,
.panel .panel,
[class$="-card"] [class$="-card"] {
  background: var(--cg-surface-raised) !important;
  box-shadow: none !important;
}

p,
small,
label,
legend,
.help,
.hint,
.note,
.subtitle,
.description,
.text-muted,
.muted,
.safe-sub,
.safe-small,
.set-small,
.tv-small,
.tp-small,
.ag-small,
.alerts-small,
.va-small {
  color: var(--cg-muted) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
th {
  color: var(--cg-text) !important;
}

button,
.button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none;
  background: var(--cg-black) !important;
  border: 1px solid var(--cg-green) !important;
  color: var(--cg-text) !important;
  border-radius: 10px;
  box-shadow: none !important;
  text-decoration: none !important;
}

button:hover,
.button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:focus-visible,
.button:focus-visible,
.btn:focus-visible {
  background: var(--cg-green) !important;
  border-color: var(--cg-green-hover) !important;
  color: var(--cg-black) !important;
}

button.primary,
.button.primary,
.btn.primary,
.primary-action,
.btn-primary,
input[type="submit"].primary {
  background: var(--cg-green) !important;
  border-color: var(--cg-green) !important;
  color: var(--cg-black) !important;
  font-weight: 700;
}

button.primary:hover,
.button.primary:hover,
.btn.primary:hover,
.primary-action:hover,
.btn-primary:hover {
  background: var(--cg-green-hover) !important;
  border-color: var(--cg-green-hover) !important;
  color: var(--cg-black) !important;
}

button.danger,
.button.danger,
.btn.danger,
.btn-danger,
.destructive {
  background: var(--cg-danger) !important;
  border-color: var(--cg-danger) !important;
  color: #ffffff !important;
}

input,
select,
textarea,
.form-control,
.input,
.search-input {
  background: var(--cg-surface-raised) !important;
  border-color: var(--cg-border-strong) !important;
  color: var(--cg-text) !important;
  caret-color: var(--cg-green);
}

input::placeholder,
textarea::placeholder {
  color: #8f8f8f !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.input:focus,
.search-input:focus {
  border-color: var(--cg-green) !important;
  outline: 2px solid var(--cg-green-soft) !important;
  box-shadow: 0 0 0 3px var(--cg-green-soft) !important;
}

table,
.table {
  background: var(--cg-surface) !important;
  color: var(--cg-text) !important;
  border-color: var(--cg-border) !important;
}

thead,
thead tr,
.table thead {
  background: var(--cg-black) !important;
}

th,
td,
tr {
  border-color: var(--cg-border) !important;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025) !important;
}

tbody tr:hover {
  background: var(--cg-green-soft) !important;
}

.badge,
.chip,
.pill,
.tag,
.status,
.version-badge,
.nav-link.active,
.active > a,
[aria-current="page"] {
  background: var(--cg-green-soft) !important;
  border-color: var(--cg-green) !important;
  color: var(--cg-green-hover) !important;
}

.success,
.status-success,
.status-ok,
.badge-success,
.text-success {
  color: var(--cg-green-hover) !important;
}

.warning,
.status-warning,
.badge-warning,
.text-warning {
  color: var(--cg-warning) !important;
}

.error,
.danger,
.status-error,
.status-critical,
.badge-danger,
.text-danger {
  color: var(--cg-danger) !important;
}

hr,
.divider,
.separator {
  border-color: var(--cg-border) !important;
}

code,
pre,
.mono {
  background: var(--cg-black) !important;
  border-color: var(--cg-border) !important;
  color: #d9ffd9 !important;
}

progress {
  accent-color: var(--cg-green);
}

::selection {
  background: var(--cg-green) !important;
  color: var(--cg-black) !important;
}

:focus-visible {
  outline: 2px solid var(--cg-green) !important;
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--cg-black);
}

::-webkit-scrollbar-thumb {
  background: #343434;
  border: 2px solid var(--cg-black);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cg-green);
}

@media (max-width: 700px) {
  button,
  .button,
  .btn,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }
}