/**
 * N2UGS Allmon3 Dashboard Theme
 * Dark dashboard styling with blue/cyan accents.
 */

:root {
    /* Core dashboard palette */
    --n2ugs-bg: #07111f;
    --n2ugs-panel: #0d1b2a;
    --n2ugs-panel-2: #12263a;
    --n2ugs-border: #24445f;
    --n2ugs-blue: #1687d9;
    --n2ugs-cyan: #22b8f0;
    --n2ugs-text: #f4f8fb;
    --n2ugs-muted: #a9bdcc;
    --n2ugs-green: #35d07f;
    --n2ugs-yellow: #f0c75e;
    --n2ugs-red: #ef5d6c;
    --n2ugs-purple: #a779e9;

    /* Allmon3 variables */
    --am3-navbar-background: rgba(7, 17, 31, 1);
    --am3-navbar-color: rgba(244, 248, 251, 1);

    --am3-nodetitle-background: rgba(13, 27, 42, 1);
    --am3-nodetitle-color: rgba(244, 248, 251, 1);
    --am3-nodetitle-button-hl: rgba(34, 184, 240, 1);

    --am3-conntable-header-text: rgba(244, 248, 251, 1);
    --am3-conntable-header-bg: rgba(18, 38, 58, 1);
    --am3-conntable-border-color: rgba(36, 68, 95, 1);

    /* Keyed / active connection */
    --am3-conntable-conn-keyed-color: rgba(235, 255, 244, 1);
    --am3-conntable-conn-keyed-bg-color: rgba(20, 105, 66, 1);

    /* Connecting / no connection */
    --am3-conntable-conn-noconn-color: rgba(255, 244, 214, 1);
    --am3-conntable-conn-noconn-bg-color: rgba(104, 76, 18, 1);

    /* TX state colors */
    --am3-node-tx-local-color: rgb(255, 255, 255);
    --am3-node-tx-local-bg-color: rgb(206, 58, 73);

    --am3-node-tx-network-color: rgb(255, 255, 255);
    --am3-node-tx-network-bg-color: rgb(22, 135, 217);

    --am3-node-tx-telemetry-color: rgb(255, 255, 255);
    --am3-node-tx-telemetry-bg-color: rgb(142, 92, 204);

    --am3-node-tx-playback-remote-color: rgb(255, 255, 255);
    --am3-node-tx-playback-remote-bg-color: rgb(175, 116, 20);

    --am3-node-no-tx-color: rgb(224, 255, 237);
    --am3-node-no-tx-bg-color: rgb(24, 91, 61);
}

/* Side navigation buttons */
.btn-secondary {
    --bs-btn-color: #f4f8fb;
    --bs-btn-bg: #12263a;
    --bs-btn-border-color: #24445f;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #1687d9;
    --bs-btn-hover-border-color: #22b8f0;
    --bs-btn-focus-shadow-rgb: 34, 184, 240;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0f6fb4;
    --bs-btn-active-border-color: #22b8f0;
    --bs-btn-active-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
    --bs-btn-disabled-color: #7f95a6;
    --bs-btn-disabled-bg: #0d1b2a;
    --bs-btn-disabled-border-color: #1d354a;
}

/* Give controls a slightly more modern dashboard feel without changing layout */
.btn-secondary {
    border-radius: 6px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    box-shadow: 0 0 0 1px rgba(34, 184, 240, .30),
                0 0 12px rgba(34, 184, 240, .16);
}

/* Keep table borders crisp on dark surfaces */
table,
.table,
.table > :not(caption) > * > * {
    border-color: var(--n2ugs-border);
}

/* Links inherit the N2UGS blue accent where Allmon3 does not override them */
a {
    color: var(--n2ugs-cyan);
}

a:hover {
    color: #7ddcff;
}

/* ==========================================================
   N2UGS DARK / LOW-GLARE OVERRIDES
   ========================================================== */
html,
body {
    background: #050a10 !important;
    color: #d7e0e7 !important;
}

body,
.container,
.container-fluid,
main,
.content,
.card,
.card-body,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: #081018;
    color: #d7e0e7;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
    border-color: #263541;
}

/* Softer light text rather than pure white */
p, span, div, label, small, td, th, li {
    color: inherit;
}

.text-muted,
small,
.form-text {
    color: #93a4b1 !important;
}

/* Dark tables throughout Allmon3 */
.table {
    --bs-table-color: #d7e0e7;
    --bs-table-bg: #081018;
    --bs-table-border-color: #263541;
    --bs-table-striped-color: #d7e0e7;
    --bs-table-striped-bg: #0c1620;
    --bs-table-active-color: #eef3f6;
    --bs-table-active-bg: #122331;
    --bs-table-hover-color: #eef3f6;
    --bs-table-hover-bg: #101d28;
    color: #d7e0e7;
}

.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: #263541;
}

/* Forms */
.form-control,
.form-select,
input,
select,
textarea {
    background-color: #0c1620 !important;
    color: #e2e9ee !important;
    border-color: #30424f !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #0f1b26 !important;
    color: #eef3f6 !important;
    border-color: #3b91c9 !important;
    box-shadow: 0 0 0 .18rem rgba(59, 145, 201, .18) !important;
}

/* Navbar and node headings: dark rather than bright blue */
:root {
    --am3-navbar-background: rgba(4, 9, 14, 1);
    --am3-navbar-color: rgba(215, 224, 231, 1);
    --am3-nodetitle-background: rgba(12, 24, 34, 1);
    --am3-nodetitle-color: rgba(222, 231, 237, 1);
    --am3-nodetitle-button-hl: rgba(55, 151, 211, 1);
    --am3-conntable-header-text: rgba(207, 218, 226, 1);
    --am3-conntable-header-bg: rgba(11, 22, 31, 1);
    --am3-conntable-border-color: rgba(38, 53, 65, 1);

    /* Lower-glare status colors */
    --am3-conntable-conn-keyed-color: rgba(225, 239, 231, 1);
    --am3-conntable-conn-keyed-bg-color: rgba(28, 82, 57, 1);
    --am3-conntable-conn-noconn-color: rgba(230, 220, 190, 1);
    --am3-conntable-conn-noconn-bg-color: rgba(82, 65, 28, 1);

    --am3-node-tx-local-color: rgb(240, 224, 226);
    --am3-node-tx-local-bg-color: rgb(112, 42, 50);
    --am3-node-tx-network-color: rgb(224, 236, 244);
    --am3-node-tx-network-bg-color: rgb(25, 83, 122);
    --am3-node-tx-telemetry-color: rgb(235, 228, 243);
    --am3-node-tx-telemetry-bg-color: rgb(82, 57, 111);
    --am3-node-tx-playback-remote-color: rgb(238, 228, 208);
    --am3-node-tx-playback-remote-bg-color: rgb(103, 72, 26);
    --am3-node-no-tx-color: rgb(211, 229, 219);
    --am3-node-no-tx-bg-color: rgb(24, 65, 48);
}

/* Low-glare buttons */
.btn-secondary {
    --bs-btn-color: #ced8df;
    --bs-btn-bg: #101b24;
    --bs-btn-border-color: #30404c;
    --bs-btn-hover-color: #edf3f6;
    --bs-btn-hover-bg: #183247;
    --bs-btn-hover-border-color: #397da8;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1b4e70;
    --bs-btn-active-border-color: #438ab6;
    --bs-btn-disabled-color: #71828e;
    --bs-btn-disabled-bg: #0b131a;
    --bs-btn-disabled-border-color: #23313b;
}

/* Accent links without retina-searing cyan */
a { color: #65b6e6; }
a:hover { color: #9bd4f3; }

/* Scrollbars for Chromium/Firefox */
* {
    scrollbar-color: #334653 #081018;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #081018; }
::-webkit-scrollbar-thumb { background: #334653; border-radius: 8px; border: 2px solid #081018; }
::-webkit-scrollbar-thumb:hover { background: #455d6d; }


/* ==========================================================
   N2UGS DARK SIDEBAR + MODERN BUTTONS
   ========================================================== */

/* Left navigation / sidebar
   Covers the common Allmon3/Bootstrap sidebar containers. */
.sidebar,
.side-navbar,
.sidenav,
#sidebar,
#side-nav,
.offcanvas,
.offcanvas-body,
nav.sidebar,
aside,
.col-auto.bg-dark,
.bg-body-tertiary {
    background: #060b10 !important;
    color: #d5dde3 !important;
    border-color: #1e2a33 !important;
}

/* Sidebar text, labels, and icons */
.sidebar *,
.side-navbar *,
.sidenav *,
#sidebar *,
#side-nav *,
aside * {
    color: #d5dde3;
}

.sidebar .nav-link,
.side-navbar .nav-link,
.sidenav .nav-link,
#sidebar .nav-link,
#side-nav .nav-link,
aside .nav-link {
    color: #bfcbd3 !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 8px;
    margin: 3px 6px;
    padding: 9px 12px;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.sidebar .nav-link:hover,
.side-navbar .nav-link:hover,
.sidenav .nav-link:hover,
#sidebar .nav-link:hover,
#side-nav .nav-link:hover,
aside .nav-link:hover {
    color: #f1f5f7 !important;
    background: #111f2a !important;
    border-color: #2d4b60 !important;
    transform: translateX(2px);
}

.sidebar .nav-link.active,
.side-navbar .nav-link.active,
.sidenav .nav-link.active,
#sidebar .nav-link.active,
#side-nav .nav-link.active,
aside .nav-link.active {
    color: #f4f8fa !important;
    background: #173247 !important;
    border-color: #3c7fa8 !important;
    box-shadow: inset 3px 0 0 #67b5df;
}

/* New dashboard button style */
.btn-secondary,
.sidebar .btn,
.side-navbar .btn,
.sidenav .btn,
#sidebar .btn,
#side-nav .btn,
aside .btn {
    --bs-btn-color: #d8e1e7;
    --bs-btn-bg: #0d171f;
    --bs-btn-border-color: #293945;
    --bs-btn-hover-color: #f3f7f9;
    --bs-btn-hover-bg: #152a39;
    --bs-btn-hover-border-color: #477d9e;
    --bs-btn-focus-shadow-rgb: 71, 125, 158;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1a405a;
    --bs-btn-active-border-color: #62a6cf;
    --bs-btn-disabled-color: #6e7d87;
    --bs-btn-disabled-bg: #0a1117;
    --bs-btn-disabled-border-color: #202c34;

    border-radius: 9px !important;
    border-width: 1px !important;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .48rem .78rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 2px 5px rgba(0,0,0,.18);
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .12s ease;
}

.btn-secondary:hover,
.sidebar .btn:hover,
.side-navbar .btn:hover,
.sidenav .btn:hover,
#sidebar .btn:hover,
#side-nav .btn:hover,
aside .btn:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 4px 10px rgba(0,0,0,.25),
        0 0 0 1px rgba(98,166,207,.10);
}

.btn-secondary:active,
.sidebar .btn:active,
.side-navbar .btn:active,
.sidenav .btn:active,
#sidebar .btn:active,
#side-nav .btn:active,
aside .btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.32);
}

/* Keep button icons visually balanced */
.btn svg,
.btn i,
.nav-link svg,
.nav-link i {
    opacity: .88;
}

/* Dark dividers in the left rail */
.sidebar hr,
.side-navbar hr,
.sidenav hr,
#sidebar hr,
#side-nav hr,
aside hr {
    border-color: #26343e !important;
    opacity: 1;
}

/* =========================================================
   N2UGS: larger Allmon3 dashboard header
   ========================================================= */

/*
 * Increase the overall top navbar height to complement
 * the larger 32px dashboard header text.
 */
.navbar,
.navbar-dark {
    min-height: 84px !important;
}

/*
 * Main dashboard header/title.
 */
.navbar-midbar {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 84px !important;
}

/*
 * Give the brand/logo area proportionally more breathing room.
 */
.navbar-brand {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/*
 * Let the banner/logo grow with the taller header without
 * allowing it to overpower the title.
 */
.header-banner-img {
    max-height: 64px !important;
    width: auto !important;
}

/*
 * Keep the navbar controls vertically centered.
 */
.navbar .container-fluid,
.navbar .container {
    min-height: 84px !important;
    align-items: center !important;
}

/*
 * Keep the mobile menu button centered in the taller header.
 */
.navbar .navbar-toggler {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* =========================================================
   N2UGS: centered Allmon3 header logo
   ========================================================= */

/*
 * The logo occupies the Bootstrap navbar-brand column
 * (col-md-3 / col-lg-2). Center it horizontally and
 * vertically inside that cell.
 */
.navbar > .navbar-brand,
.navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 84px !important;
    height: 84px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/*
 * Override the 250x250 inline dimensions in index.html.
 * Keep the image proportional and contained within the
 * 84px header.
 */
#header-banner-img,
.header-banner-img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 68px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    flex: 0 1 auto !important;
}

/*
 * On narrow screens, leave enough room for the mobile
 * navbar toggle while keeping the logo centered.
 */
@media (max-width: 767.98px) {
    .navbar > .navbar-brand,
    .navbar .navbar-brand {
        justify-content: center !important;
        min-height: 84px !important;
        height: 84px !important;
        padding-left: 12px !important;
        padding-right: 52px !important;
    }

    #header-banner-img,
    .header-banner-img {
        max-height: 62px !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   N2UGS: gray node titles with red outline
   ========================================================= */

:root {
    --am3-nodetitle-background: #3a3f44;
    --am3-nodetitle-color: #f1f3f5;
}

/*
 * Allmon3 node-name/title bar.
 * Gray fill with a clearly defined red perimeter.
 */
.nodeline-header {
    background-color: #3a3f44 !important;
    color: #f1f3f5 !important;

    border: 2px solid #b52b32 !important;
    border-radius: 5px !important;

    box-sizing: border-box !important;
}

/*
 * Keep title-bar icons/buttons consistent with the
 * light title text and red accent.
 */
.nodeline-header .node-bi,
.nodeline-header .btn {
    color: #f1f3f5 !important;
    --bs-btn-border-color: #f1f3f5;
    --bs-btn-hover-bg: #b52b32;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: #d24a51;
}

/* =========================================================
   N2UGS: gray sidebar node buttons with red outline
   ========================================================= */

/*
 * Match the left-side node navigation buttons to the
 * node-title bars in the main dashboard.
 */
.side-navbar .nav-link,
.sidebar .nav-link,
#asl-node-navigation .nav-link {
    background: #3a3f44 !important;
    color: #f1f3f5 !important;

    border: 2px solid #b52b32 !important;
    border-radius: 5px !important;

    margin: 4px 6px !important;
    padding: 8px 10px !important;

    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Icons/text inside the node buttons */
.side-navbar .nav-link *,
.sidebar .nav-link *,
#asl-node-navigation .nav-link * {
    color: #f1f3f5 !important;
}

/* Hover */
.side-navbar .nav-link:hover,
.sidebar .nav-link:hover,
#asl-node-navigation .nav-link:hover {
    background: #454b50 !important;
    color: #ffffff !important;
    border-color: #d24a51 !important;
}

/* Active/current node */
.side-navbar .nav-link.active,
.sidebar .nav-link.active,
#asl-node-navigation .nav-link.active {
    background: #4a4f54 !important;
    color: #ffffff !important;

    border-color: #e05259 !important;
    box-shadow: 0 0 0 1px rgba(224, 82, 89, .28) !important;
}

/* Keyboard focus */
.side-navbar .nav-link:focus,
.sidebar .nav-link:focus,
#asl-node-navigation .nav-link:focus {
    color: #ffffff !important;
    border-color: #e05259 !important;
    box-shadow: 0 0 0 .15rem rgba(181, 43, 50, .28) !important;
    outline: none !important;
}

/* =========================================================
   N2UGS: sidebar node buttons gray red v2
   ========================================================= */

/*
 * The Allmon3 node entries in the left rail are Bootstrap
 * buttons, not nav-link elements. Override both Bootstrap
 * button variables and the actual rendered properties.
 */
.side-navbar .btn,
.sidebar .btn,
#sidebarMenu .btn,
#asl-node-navigation .btn,
#asl-node-navigation button,
#asl-node-navigation a.btn {
    --bs-btn-color: #f1f3f5 !important;
    --bs-btn-bg: #3a3f44 !important;
    --bs-btn-border-color: #b52b32 !important;

    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: #454b50 !important;
    --bs-btn-hover-border-color: #d24a51 !important;

    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: #4a4f54 !important;
    --bs-btn-active-border-color: #e05259 !important;

    background-color: #3a3f44 !important;
    color: #f1f3f5 !important;
    border: 2px solid #b52b32 !important;
    border-radius: 9px !important;

    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Hover */
.side-navbar .btn:hover,
.sidebar .btn:hover,
#sidebarMenu .btn:hover,
#asl-node-navigation .btn:hover,
#asl-node-navigation button:hover,
#asl-node-navigation a.btn:hover {
    background-color: #454b50 !important;
    color: #ffffff !important;
    border-color: #d24a51 !important;
    box-shadow: 0 0 0 1px rgba(210, 74, 81, .20) !important;
}

/* Active / pressed / selected */
.side-navbar .btn:active,
.side-navbar .btn.active,
.sidebar .btn:active,
.sidebar .btn.active,
#sidebarMenu .btn:active,
#sidebarMenu .btn.active,
#asl-node-navigation .btn:active,
#asl-node-navigation .btn.active,
#asl-node-navigation button:active,
#asl-node-navigation a.btn.active {
    background-color: #4a4f54 !important;
    color: #ffffff !important;
    border-color: #e05259 !important;
    box-shadow: 0 0 0 1px rgba(224, 82, 89, .28) !important;
}

/* Focus */
.side-navbar .btn:focus,
.sidebar .btn:focus,
#sidebarMenu .btn:focus,
#asl-node-navigation .btn:focus,
#asl-node-navigation button:focus,
#asl-node-navigation a.btn:focus {
    color: #ffffff !important;
    border-color: #e05259 !important;
    box-shadow: 0 0 0 .15rem rgba(181, 43, 50, .28) !important;
}

/*
 * Keep Home / Logout separate if they are outside the generated
 * node-navigation container. Only node buttons in the actual
 * Allmon3 node navigation area get the strong red outline.
 */
#asl-node-navigation .btn {
    width: calc(100% - 12px) !important;
    margin: 5px 6px !important;
}