/**
 **
 ** Customize the colors of Allmon3
 **
 ** All colors use the rgba() function
 ** Read more at https://www.w3schools.com/cssref/func_rgba.php
 ** on how to use rgba.
 **
 **/




/* Force main page background dark - targets common wrappers */
html, body,
#app, .container, .main, .dashboard, .content,
div[style*="background"],  /* catches any inline bg */
body > div:first-child {   /* often the root wrapper */
  /* background-color: rgba(13, 17, 23, 1) !important; */
background-color: rgba(26, 32, 44, 1) !important;
  /* background: rgba(13, 17, 23, 1) !important;   /* override gradients/images too */
background: rgba(26, 32, 44, 1) !important;
}

/* Text color for readability on dark bg */
html, body,
#app, .container, .main, .dashboard, .content {
  color: rgba(201, 209, 217, 1) !important;
}

/* If there's a specific AllMon3 wrapper class/ID - common ones from similar dashboards */
.allmon3, .am3-container, .node-grid, .status-container {
/*  background-color: rgba(13, 17, 23, 1) !important; */
background-color: rgba(26, 32, 44, 1) !important;
}






:root {
  /* Background of the top navbar */
  /* --am3-navbar-background: rgba(13, 17, 23, 1); */
--am3-navbar-background: rgba(13, 17, 23, 1);

  /* Text/Foreground color of the top navbar */
  --am3-navbar-color: rgba(201, 209, 217, 1);

  /* Background of the node titlebar */
  --am3-nodetitle-background: rgba(10, 61, 98, 1);

  /* Text/Foreground color of the node titlebar */
  --am3-nodetitle-color: rgba(230, 240, 250, 1);

  /* Button highlight color of buttons in the node titlebar */
  --am3-nodetitle-button-hl: rgba(196, 30, 59, 1);

  /* Node connection table header text color */
  --am3-conntable-header-text: rgba(201, 209, 217, 1);

  /* Node connection table header background color */
  --am3-conntable-header-bg: rgba(33, 38, 45, 1);

  /* Node connection table border color */
  --am3-conntable-border-color: rgba(48, 54, 61, 1);

  /* Node connection table keyed color */
  --am3-conntable-conn-keyed-color: rgba(0, 0, 0, 1);
  --am3-conntable-conn-keyed-bg-color: rgba(50, 160, 150, 1);

  /* Node connection table stats=Connecting colors */
  --am3-conntable-conn-noconn-color: rgba(0, 0, 0, 1);
  --am3-conntable-conn-noconn-bg-color: rgba(68, 17, 17, 1);

  /* Node Tx Local */
  --am3-node-tx-local-color: rgb(0, 0, 0);
  --am3-node-tx-local-bg-color: rgb(255, 0, 0);

  /* Node Tx Network */
  --am3-node-tx-network-color: rgb(0, 0, 0);
  --am3-node-tx-network-bg-color: rgb(200, 100, 0);

  /* Node Tx Telem */
  --am3-node-tx-telemetry-color: rgb(0, 0, 0);
  --am3-node-tx-telemetry-bg-color: rgb(200, 200, 0);

  /* Node Tx Remote */
  --am3-node-tx-playback-remote-color: rgb(0, 0, 0);
  --am3-node-tx-playback-remote-bg-color: rgb(124, 45, 18);

  /* Node No Tx */
  --am3-node-no-tx-color: rgb(139, 148, 158);
  --am3-node-no-tx-bg-color: rgb(31, 80, 31);
}




/* Sidebar / side panel - make it dark like the navbar */
.sidebar,
.side-panel,
.nav-sidebar,
#sidebar,
.left-column,
.right-column,           /* in case it's right-sided */
div.sidebar-container,
aside,                   /* generic fallback */
body > div:first-child > div:first-child {  /* often the sidebar wrapper */
  background-color: rgba(22, 27, 34, 1) !important;   /* slightly lighter dark for contrast */
  background: rgba(22, 27, 34, 1) !important;
  color: rgba(201, 209, 217, 1) !important;
}

/* Fix icons/logos/images in sidebar if they look washed out/inverted wrong */
.sidebar img,
.sidebar svg {
  filter: brightness(0.9) contrast(1.1) !important;   /* or invert(100%) if needed for white icons */
}

/* Connections list/table background - rows, cells, container */
.conntable,              /* common AllMon3 class for connection table */
table.connections,
.node-connections,
div.connections,
div.node-grid,
div.rounded,             /* often wraps sections */
tbody, tr, td, th        /* aggressive but effective for table insides */
{
  background-color: rgba(13, 23, 23, 1) !important;   /* match main dark bg */
  background: rgba(13, 17, 23, 1) !important;
}

/* Table rows alternate / hover - prevent bright stripes */
tr:nth-child(even),
tr:hover {
  background-color: rgba(22, 27, 34, 0.8) !important;   /* subtle darker/lighter variant */
}

/* Headers in connections table already use --am3-conntable-header-bg, but reinforce */
.conntable th,
thead tr {
  background-color: rgba(33, 38, 45, 1) !important;
}

/* Any rounded cards/sections that might be white/gray */
div.rounded,
.card,
.panel,
section {
  background-color: rgba(22, 27, 34, 1) !important;
  border-color: rgba(48, 54, 61, 1) !important;
  color: rgba(201, 209, 217, 1) !important;
}

/* General fallback for any lingering bright areas */
body > div,
main,
#content,
#app > div,
.container-fluid,
.container {
  background-color: rgba(13, 17, 23, 1) !important;
}





/* Lighten text in ALL connection table cells/rows - targets the listed connections area */
.conntable td,
.conntable th,
table td,               /* generic table cells if no .conntable class */
tr td,
.node-connections td,   /* possible alternative class */
.connections td,
div.connections td,
tbody td,
tbody tr td {
  color: rgba(201, 209, 217, 1) !important;   /* light gray like your --am3-dark-text */
}

/* If keyed/active connections are the main problem (black text on dark bg) */
.conntable-conn-keyed-color,
td[style*="background-color: rgba(13, 60, 13"],  /* targets your keyed bg if inline */
td.conn-keyed,          /* possible class */
.keyed, .active-conn {
  color: rgba(220, 255, 220, 1) !important;   /* very light green for visibility on dark green bg */
  /* OR use your global light text: rgba(201, 209, 217, 1) !important; */
}

/* Optional: Make headers brighter if needed (but yours already uses --am3-conntable-header-text) */
.conntable th,
thead td,
thead th {
  color: rgba(230, 240, 250, 1) !important;   /* brighter white-ish for headers */
}

/* Fallback: Force ALL text in main content area lighter if above doesn't catch it */
main td,
#content td,
#app td,
.container td,
body td {
  color: rgba(201, 209, 217, 1) !important;
}












/* If the Node column has a class like .node, .nodeid, etc. – add any you spot */
.node,
.nodeid,
.node-num,
.col-node,
.node-column td {
  color: rgba(201, 209, 217, 1) !important;
}



/* Target the main content wrapper behind tables - rgb(30, 30, 30) */
main,
.asl-station-dashboard-main,
.main-content,
.dashboard-main,
.dashboard-container,
.content-main,
.asl-main {
  background-color: rgb(30, 30, 30) !important;
}



/* Match footer to the same dark background as content */
footer,
.footer,
.main-footer,
.asl-footer,
.asl-station-footer,
.footer-container,
.col-md-12.footer,
.row.footer,
div.footer,
div[class*="footer"] {
  background-color: rgb(30, 30, 30) !important;
  background-image: none !important;
}

/* Allmon3 custom.css - Match WPSD background rgb(30, 30, 30) behind tables/content */

/* Force main background behind tables and content */
html, body,
.container, .container-fluid, .row,
.panel, .panel-default, .panel-body, .panel-heading, .panel-footer,
.table, .table-striped, .table-responsive,
.conntable, .node-connections, .connections-panel, .status-panel, .node-grid, .node-list,
.main-content, .content-wrapper, .dashboard-container {
  background-color: rgb(30, 30, 30) !important;
  background-image: none !important;
}

/* Subtle striped rows to keep them distinguishable */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgb(35, 35, 35) !important;
}

/* Footer match */
footer,
.footer,
.main-footer,
.asl-footer,
.col-md-12.footer,
.row.footer,
div.footer,
div[class*="footer"] {
  background-color: rgb(30, 30, 30) !important;
}

/* Light text only where needed (optional - comment out if text is already good) */
.table td, .table th, .panel-title, .panel-heading {
  color: rgb(226, 232, 240) !important;
}
/* To customize the color of the side navbar buttons,
 * uncomment the next section below and change as desired.
 * Note changing all of the button attribtues is complex so
 * patience will be needed
*/
/** REMOVE THIS AND THE CLOSING COMMENT
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}
*/