/*
 * ============================================================
 * SQ9GIN Allmon3 1.9.1
 * Graphite / Dark Blue / Cyan Theme
 * Inspired by CN8VX / Polstar style
 * ============================================================
 */


:root {

    /* ============================================================
       GŁÓWNE KOLORY
       ============================================================ */

    --am3-navbar-background: rgba(3, 15, 26, 1);
    --am3-navbar-color: rgba(255, 255, 255, 1);

    --am3-nodetitle-background: rgba(1, 112, 135, 1);
    --am3-nodetitle-color: rgba(255, 255, 255, 1);

    --am3-nodetitle-button-hl: rgba(6, 29, 52, 1);

    /* ============================================================
       TABELA POŁĄCZEŃ
       ============================================================ */

    --am3-conntable-header-text: rgba(255, 255, 255, 1);
    --am3-conntable-header-bg: rgba(6, 29, 52, 1);
    --am3-conntable-border-color: rgba(90, 98, 105, 1);

    --am3-conntable-conn-keyed-color: rgba(0, 0, 0, 1);
    --am3-conntable-conn-keyed-bg-color: rgba(209, 231, 221, 1);

    --am3-conntable-conn-noconn-color: rgba(0, 0, 0, 1);
    --am3-conntable-conn-noconn-bg-color: rgba(255, 255, 255, 1);

    /* ============================================================
       TX
       ============================================================ */

    /* Local TX - zielony */
    --am3-node-tx-local-color: rgba(0, 0, 0, 1);
    --am3-node-tx-local-bg-color: rgba(48, 228, 173, 1);

    /* Network TX - czerwony */
    --am3-node-tx-network-color: rgba(255, 255, 255, 1);
    --am3-node-tx-network-bg-color: rgba(255, 0, 0, 1);

    /* Telemetry TX - czerwony */
    --am3-node-tx-telemetry-color: rgba(255, 255, 255, 1);
    --am3-node-tx-telemetry-bg-color: rgba(255, 0, 0, 1);

    /* Remote TX - czerwony */
    --am3-node-tx-playback-remote-color: rgba(255, 255, 255, 1);
    --am3-node-tx-playback-remote-bg-color: rgba(255, 0, 0, 1);

    /* No TX - zielony */
    --am3-node-no-tx-color: rgba(0, 0, 0, 1);
    --am3-node-no-tx-bg-color: rgba(195, 230, 203, 1);

    /* ============================================================
       BOOTSTRAP
       ============================================================ */

    --bs-danger-bg-subtle: rgba(245, 173, 4, 0.4);

    --bs-link-color-rgb: 32, 201, 51;
    --bs-link-hover-color-rgb: 186, 231, 239;

    --bs-btn-border-color: rgba(255, 255, 255, 1);
    --bs-btn-color: rgba(255, 255, 255, 1);

    /* ============================================================
       DODATKOWE KOLORY
       ============================================================ */

    --primary-dark: #061d34;
    --primary-blue: #045791;

    --bg-medium: #0a2a4a;

    --accent-cyan: #00d4ff;

    --text-secondary: #83caf8;
}


/* ============================================================
   BODY
   ============================================================ */

body {

    background:
        linear-gradient(
            to left,
            rgba(6, 29, 52, 1),
            rgba(4, 87, 145, 1)
        );

    background-attachment: fixed;

    min-height: 100vh;

    color: rgba(255, 255, 255, 1);
}


body p {

    color: rgba(131, 202, 248, 1);
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar-dark {

    background-color:
        var(--am3-navbar-background) !important;
}


.navbar {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 48px !important;
}


.navbar-brand {

    padding-top: .75rem;

    padding-bottom: .75rem;
}


.header-banner-img {

    max-height: 50px;

    width: auto;
}


.navbar-midbar {

    color:
        var(--am3-navbar-color);

    font-size: 1.2em;

    font-weight: bold;
}


/* ============================================================
   PRAWA CZĘŚĆ NAVBAR
   ============================================================ */

#navbar-right {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    margin-left: auto !important;

    padding-right: 8px !important;

    white-space: nowrap !important;
}


#navbar-right .btn,
#navbar-right button {

    flex-shrink: 0 !important;

    margin-left: 5px !important;
}


/* ============================================================
   PRZYCISKI
   ============================================================ */

.btn-secondary {

    --bs-btn-color: #fff;

    --bs-btn-bg: #061d34;

    --bs-btn-border-color: #0a2a4a;

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: #045791;

    --bs-btn-hover-border-color: #00d4ff;

    --bs-btn-active-color: #fff;

    --bs-btn-active-bg: #061d34;

    --bs-btn-active-border-color: #0a2a4a;

    --bs-btn-active-shadow:
        inset 0 3px 5px
        rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #fff;

    --bs-btn-disabled-bg: #061d34;

    --bs-btn-disabled-border-color: #0a2a4a;
}


.btn {

    transition:
        all 0.25s ease;
}


.btn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 10px
        rgba(0, 212, 255, 0.25);
}


/* ============================================================
   FULLSCREEN
   ============================================================ */

#allmon-fullscreen {

    width: 42px !important;

    height: 36px !important;

    padding: 0 !important;

    margin:
        4px 4px 4px 6px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 22px !important;

    color: #ffffff !important;

    background: #29343d !important;

    border:
        1px solid #00d4ff !important;

    border-radius:
        7px !important;

    box-sizing:
        border-box !important;

    cursor: pointer !important;
}


#allmon-fullscreen:hover {

    background:
        #045791 !important;

    border-color:
        #00d4ff !important;
}


/* ============================================================
   NODE
   ============================================================ */

.nodeline-header {

    background-color:
        var(--am3-nodetitle-background);

    color:
        var(--am3-nodetitle-color);

    font-size: 1.2em;

    font-weight: bolder;
}


.nodetxline {

    color: #000;

    font-weight: bold;
}


/* ============================================================
   CONNECTION TABLE
   ============================================================ */

.table {

    color:
        rgba(255, 255, 255, 1);
}


.table thead {

    background:
        var(--am3-conntable-header-bg);

    color:
        var(--am3-conntable-header-text);
}


.bg-light {

    background-color:
        rgba(2, 61, 104, 1) !important;

    color:
        rgba(255, 255, 255, 1);
}


/* ============================================================
   MODAL LOGIN
   ============================================================ */

.modal-content {

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--bg-medium)
        );

    color:
        #ffffff;

    border:
        2px solid var(--primary-blue);
}


.modal-header {

    border-bottom:
        1px solid var(--primary-blue);
}


.modal-footer {

    border-top:
        1px solid var(--primary-blue);
}


/* Login - lepsza widoczność */

#loginModal label {

    color:
        #ffffff !important;

    font-weight:
        500;
}


#loginModal input {

    background:
        #ffffff !important;

    color:
        #111111 !important;

    border:
        1px solid #00d4ff !important;

    border-radius:
        5px !important;

    padding:
        7px 9px !important;
}


#loginModal input:focus {

    outline:
        none !important;

    border-color:
        #00d4ff !important;

    box-shadow:
        0 0 0 3px
        rgba(0, 212, 255, 0.2) !important;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert-success {

    background:
        rgba(40, 167, 69, 0.2);

    color:
        rgba(255, 255, 255, 0.9);
}


.alert-danger {

    background:
        var(--bs-danger-bg-subtle);

    color:
        rgba(255, 255, 255, 0.9);

    --bs-alert-border-color:
        rgba(241, 174, 4, 1);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {

    background:
        var(--primary-dark);

    border:
        1px solid var(--primary-blue);
}


.dropdown-item {

    color:
        rgba(255, 255, 255, 0.9);
}


.dropdown-item:hover {

    background:
        var(--bg-medium);

    color:
        var(--accent-cyan);
}


/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip-inner {

    background:
        var(--primary-dark);

    border:
        1px solid var(--primary-blue);
}


/* ============================================================
   SMARTFON
   ============================================================ */

@media (max-width: 768px) {

    .navbar {

        min-height:
            48px !important;
    }


    .navbar-brand {

        max-width:
            55% !important;

        overflow:
            hidden !important;
    }


    .header-banner-img {

        max-width:
            100% !important;

        max-height:
            42px !important;

        width:
            auto !important;
    }


    #navbar-right {

        margin-left:
            auto !important;

        padding-right:
            4px !important;

        max-width:
            45% !important;

        overflow:
            visible !important;
    }


    #navbar-right .btn,
    #navbar-right button {

        min-width:
            40px !important;

        min-height:
            36px !important;

        margin-left:
            3px !important;
    }


    #allmon-fullscreen {

        width:
            40px !important;

        height:
            36px !important;

        font-size:
            21px !important;
    }

}


/* ============================================================
   BARDZO MAŁY SMARTFON
   ============================================================ */

@media (max-width: 400px) {

    .navbar-brand {

        max-width:
            48% !important;
    }


    #navbar-right {

        max-width:
            52% !important;
    }


    #navbar-right .btn,
    #navbar-right button {

        padding-left:
            6px !important;

        padding-right:
            6px !important;
    }


    #allmon-fullscreen {

        width:
            38px !important;

        height:
            34px !important;

        font-size:
            20px !important;
    }

}

/* ============================================================
   LOGIN / LOGOUT - LEPSZA WIDOCZNOŚĆ
   ============================================================ */

#login-out-region {
    display: flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

#login-out-region .btn,
#navbar-right .btn {
    color: #ffffff !important;

    background: #045791 !important;

    border: 1px solid #00d4ff !important;

    border-radius: 7px !important;

    font-weight: 600 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,0.8) !important;

    box-shadow:
        0 2px 7px rgba(0,0,0,0.45) !important;
}

#login-out-region .btn:hover,
#navbar-right .btn:hover {
    color: #ffffff !important;

    background: #0a6eaa !important;

    border-color: #ffffff !important;
}


/* Login modal */

#loginModal .modal-content {
    color: #ffffff !important;
}

#loginModal .modal-title,
#loginModal label {
    color: #ffffff !important;

    font-weight: 600 !important;
}

#loginModal input {
    background: #ffffff !important;

    color: #111111 !important;

    border: 2px solid #00d4ff !important;

    font-weight: 500 !important;
}


/* Wyśrodkowanie napisu na górnym pasku */
.navbar-midbar {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
}


/* ============================================================
   POLSTAR NETWORK - STOPKA
   ============================================================ */

#polstar-footer {
    width: 100%;
    text-align: center;
    margin: 25px auto 15px auto;
    padding: 12px 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
}

#polstar-footer strong {
    font-size: 0.95rem;
    color: #333;
}

#polstar-footer span {
    font-size: 0.8rem;
    opacity: 0.75;
}

@media (max-width: 768px) {
    #polstar-footer {
        font-size: 0.78rem;
        margin-top: 20px;
    }

    #polstar-footer strong {
        font-size: 0.85rem;
    }
}


/* Wyraźniejsza stopka Polstar Network */
#polstar-footer {
    text-align: center !important;
    margin: 25px auto 15px auto !important;
    padding: 15px 10px !important;

    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;

    color: #222 !important;

    border-top: 2px solid #999 !important;
}

#polstar-footer strong {
    display: inline-block;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 3px;
}

#polstar-footer span {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    #polstar-footer {
        font-size: 0.85rem !important;
    }

    #polstar-footer strong {
        font-size: 1rem !important;
    }
}


#polstar-footer {
    color: #222 !important;
}

#polstar-footer strong {
    color: #111 !important;
}

#polstar-footer span {
    color: #222 !important;
    opacity: 1 !important;
}