/**
 * Allmon3-Murica
 * Custom dark theme for Allmon3 – American flag inspired
 * Dark base with lighter greys (more “white”), red + blue neon
 * Red = dashboard title + all transmitting / keyed states
 * Blue = node titles / node name bars
 * White / light grey for general text and accents
 * 73
 */

/* =========================================================
   1. Core Allmon3 CSS Variables
   ========================================================= */
:root {
  /* Navbar */
  --am3-navbar-background: #0f1115;
  --am3-navbar-color: #f5f5f5;

  /* Node title bar – blue text */
  --am3-nodetitle-background: #151820;
  --am3-nodetitle-color: #60a5fa;          /* bright flag-ish blue */
  --am3-nodetitle-button-hl: #2a2f3a;

  /* Connection table */
  --am3-conntable-header-text: #f5f5f5;
  --am3-conntable-header-bg: #12151c;
  --am3-conntable-border-color: #3a3f4b;

  /* Connection states */
  --am3-conntable-conn-keyed-bg-color: #1a0a0a !important;
  --am3-conntable-conn-keyed-color: #ffaaaa !important;
  --am3-conntable-conn-noconn-color: #e8e8e8;
  --am3-conntable-conn-noconn-bg-color: #1c2028;

  /* TX states – RED (title + transmitting) */
  --am3-node-tx-local-color: #ff3333;
  --am3-node-tx-local-bg-color: #2a0a0a;
  --am3-node-tx-network-color: #ff5555;
  --am3-node-tx-network-bg-color: #3a1010;
  --am3-node-tx-telemetry-color: #ff5555;
  --am3-node-tx-telemetry-bg-color: #3a1010;
  --am3-node-tx-playback-remote-color: #ff5555;
  --am3-node-tx-playback-remote-bg-color: #3a1010;

  /* No TX / Idle – clean light grey / soft white */
  --am3-node-no-tx-color: #e8e8e8;
  --am3-node-no-tx-bg-color: #161a22;

  /* Bootstrap helpers – lightened greys */
  --bs-body-bg: #0f1115;
  --bs-body-color: #f0f0f0;
  --bs-border-color: #3a3f4b;
  --bs-table-bg: #1c2028;
  --bs-table-border-color: #3a3f4b;

  /* Critical for Bootstrap 5.3 tooltips */
  --bs-emphasis-color: #f0f0f0;
  --bs-emphasis-color-rgb: 240, 240, 240;

  /* ===== Murica neon palette ===== */
  --neon-red: #E31C25;
  --neon-red-bright: #ff3333;
  --neon-red-glow: rgba(227, 28, 37, 0.55);
  --neon-red-glow-strong: rgba(227, 28, 37, 0.8);

  --neon-blue: #3B82F6;
  --neon-blue-bright: #60a5fa;
  --neon-blue-glow: rgba(59, 130, 246, 0.5);
  --neon-blue-glow-strong: rgba(59, 130, 246, 0.75);

  --neon-white: #f5f5f5;
}

/* =========================================================
   2. Page & Main Background (lightened dark)
   ========================================================= */
body,
main,
#asl-statmon-dashboard-area {
  background-color: #0f1115 !important;
  color: #f0f0f0 !important;
}

/* =========================================================
   3. Node Panels / Cards
   ========================================================= */
.card,
.card-body,
.bg-light,
.bg-white,
div.rounded,
.node-bi {
  background-color: #171b24 !important;
  color: #f0f0f0 !important;
  border-color: #2a2f3a !important;
}

/* =========================================================
   4. Tables – Alternating lighter dark greys
   ========================================================= */
.table,
.table-bordered {
  border-color: #3a3f4b !important;
  color: #f0f0f0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #151920 !important;
  color: #f0f0f0 !important;
  --bs-table-accent-bg: #151920;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #1c212c !important;
  color: #f0f0f0 !important;
  --bs-table-accent-bg: #1c212c;
}

tbody, td, tfoot, th, thead, tr {
  border-color: #3a3f4b !important;
}

/* =========================================================
   5. Force light (near-white) text
   ========================================================= */
.card,
.card-body,
.node-bi,
div.rounded,
.table,
.table td,
.table th,
td.desc,
.desc,
.node-desc,
.nodetxline,
.asl-node-panel,
#asl-statmon-dashboard-area * {
  color: #f0f0f0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
  color: #f0f0f0 !important;
}

/* =========================================================
   6. Red Title + Blue Node Titles
   ========================================================= */
/* Dashboard title – RED */
#navbar-midbar,
.navbar-midbar {
  color: var(--neon-red) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px var(--neon-red-glow-strong),
               0 0 16px var(--neon-red-glow),
               0 0 24px rgba(227, 28, 37, 0.35);
}

/* Node titles / node name bars – BLUE */
.nodetitle,
.asl-node-title,
.node-bi .card-header,
.card-header,
[class*="nodetitle"],
.am3-nodetitle {
  color: var(--neon-blue-bright) !important;
}

/* Make the large node header text blue */
.card .fw-bold,
.node-bi h5,
.node-bi .fs-5,
.asl-node-panel .node-name,
.nodeline {
  color: var(--neon-blue-bright) !important;
}

/* =========================================================
   Active Transmit states – RED border + text + glow
   ========================================================= */
.nodetxline.am3-tx-local,
.nodetxline.am3-tx-network,
.nodetxline.am3-tx-telemetry,
.nodetxline.am3-tx-playback-remote,
.am3-tx-local,
.am3-tx-network,
.am3-tx-telemetry,
.am3-tx-playback-remote {
  color: #ff4444 !important;
  background-color: #2a0a0a !important;
  border: 1px solid #ff2222 !important;
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.55),
              0 0 16px rgba(255, 30, 30, 0.3) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(255, 50, 50, 0.6);
}

.nodetxline.am3-tx-local *,
.nodetxline.am3-tx-network *,
.nodetxline.am3-tx-telemetry *,
.nodetxline.am3-tx-playback-remote * {
  color: #ff6666 !important;
}

/* Keyed connections – thick red left border */
.node-conn-keyed,
td.node-conn-keyed,
th.node-conn-keyed {
  border-left: 5px solid #ff2222 !important;
  color: #ffaaaa !important;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.7),
               0 0 16px rgba(255, 30, 30, 0.4);
}

/* =========================================================
   6b. Transmit – Idle → clean light grey / soft white
   ========================================================= */
.nodetxline.am3-no-tx,
.nodetxline.am3-no-tx *,
.am3-no-tx {
  color: #e8e8e8 !important;
  background-color: #161a22 !important;
  border-color: #5a6270 !important;
  text-shadow: none;
}

.nodetxline.am3-no-tx {
  border: 1px solid #5a6270 !important;
  box-shadow: none;
}

/* =========================================================
   7. Neon Border Styling – Blue for nodes, clean overall
   ========================================================= */
/* Node panels / cards get blue neon border */
.card,
.card-body,
div.rounded,
.node-bi {
  border: 1px solid var(--neon-blue) !important;
  box-shadow: 0 0 10px var(--neon-blue-glow),
              0 0 20px rgba(59, 130, 246, 0.2),
              inset 0 0 8px rgba(59, 130, 246, 0.06);
}

/* Tables – thinner blue border */
.table,
.table-bordered {
  border: 1px solid var(--neon-blue) !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.25);
}

/* =========================================================
   8. Sidebar & Buttons
   ========================================================= */
.sidebar {
  background-color: #12151c !important;
}

.sidebar a,
#login-out-region button {
  color: #f0f0f0 !important;
  background-color: #1c2028 !important;
  border-color: #3a3f4b !important;
}

.btn-secondary,
.btn-outline-dark {
  --bs-btn-color: #f0f0f0;
  --bs-btn-bg: #1a1e28;
  --bs-btn-border-color: #3a3f4b;
  --bs-btn-hover-bg: #252a36;
  --bs-btn-hover-border-color: #5a6270;
}

/* =========================================================
   8b. Node action buttons – clean, no outer glow
   ========================================================= */
.card .btn,
.node-bi .btn,
.nodetitle .btn,
.asl-node-panel .btn,
.btn-sm,
button.btn {
  box-shadow: none !important;
  border: 1px solid #3a3f4b !important;
  background-color: #1a1e28 !important;
  color: #f0f0f0 !important;
}

.card .btn:hover,
.node-bi .btn:hover,
.nodetitle .btn:hover,
.asl-node-panel .btn:hover,
.btn-sm:hover,
button.btn:hover {
  border-color: var(--neon-blue) !important;
  background-color: #222833 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* =========================================================
   9. Modals, Dropdowns & Polish
   ========================================================= */
.modal-content {
  background-color: #171b24 !important;
  border-color: #3a3f4b !important;
  color: #f0f0f0 !important;
}

.dropdown-menu {
  background-color: #1c2028 !important;
  border-color: #3a3f4b !important;
}

.dropdown-item {
  color: #f0f0f0 !important;
}

.dropdown-item:hover {
  background-color: #2a2f3a !important;
  color: #ffffff !important;
}

/* Reinforce red for any active TX state */
.nodetxline.am3-tx-local,
.nodetxline.am3-tx-network,
.nodetxline.am3-tx-telemetry,
.nodetxline.am3-tx-playback-remote,
.am3-tx-local,
.am3-tx-network,
.am3-tx-telemetry,
.am3-tx-playback-remote {
  border-color: #ff2222 !important;
  color: #ff6666 !important;
}

/* =========================================================
   10. Tooltips – Dark theme fix + Murica treatment
   ========================================================= */
.tooltip {
  --bs-tooltip-bg: #1a1e28;
  --bs-tooltip-color: #f0f0f0;
  --bs-tooltip-opacity: 0.95;
}

.tooltip-inner {
  background-color: #1a1e28 !important;
  color: #f0f0f0 !important;
  border: 1px solid var(--neon-blue);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.3),
              0 0 3px rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

/* Arrow matches tooltip body */
.tooltip .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1a1e28 !important;
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #1a1e28 !important;
}
.bs-tooltip-auto[data-popper-placement^=start] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #1a1e28 !important;
}
.bs-tooltip-auto[data-popper-placement^=end] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #1a1e28 !important;
}

.nodeline-tooltip {
  --bs-tooltip-bg: #1a1e28 !important;
  --bs-tooltip-color: #f0f0f0 !important;
}