/*
 * WP4VW Allmon3 — Beskar Theme
 * Custom appearance only; no functional changes.
 */

/* ---------- Overall page ---------- */

html,
body {
    min-height: 100%;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035) 0%,
            rgba(255,255,255,0.000) 22%,
            rgba(0,0,0,0.12) 50%,
            rgba(255,255,255,0.025) 72%,
            rgba(0,0,0,0.18) 100%
        ),
        repeating-linear-gradient(
            92deg,
            #1b1e20 0,
            #25292c 2px,
            #17191b 5px,
            #2b2f32 8px
        );
    background-attachment: fixed;
    color: #e9ecef;
}

/* ---------- Main content panels ---------- */

.container,
.container-fluid,
.card,
.panel,
.node,
.node-container {
    color: #e9ecef;
}

/* ---------- Node title bars ---------- */

.card-header,
.panel-heading,
.node-header,
h1,
h2,
h3 {
    background:
        linear-gradient(
            180deg,
            #626a70 0%,
            #343a3f 12%,
            #202529 48%,
            #111416 52%,
            #30363a 100%
        ) !important;
    color: #f4f6f7 !important;
    border: 1px solid #899197 !important;
    border-bottom: 3px solid #090a0b !important;
    border-radius: 5px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -2px 0 rgba(0,0,0,0.65),
        0 3px 8px rgba(0,0,0,0.55) !important;
    text-shadow:
        0 1px 0 #000,
        0 0 4px rgba(255,255,255,0.12);
    letter-spacing: 0.025em;
}

/* ---------- Status bars ---------- */

.alert-success,
.bg-success,
.status-idle,
.tx-idle {
    background:
        linear-gradient(
            180deg,
            #9ea8a3 0%,
            #66716c 48%,
            #4a514e 52%,
            #747e79 100%
        ) !important;
    color: #f7f8f8 !important;
    border: 1px solid #b6bfba !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.45);
    text-shadow: 0 1px 1px #000;
}

/* Receiving / active */

.alert-info,
.bg-info,
.status-receive,
.rx-active {
    background:
        linear-gradient(
            180deg,
            #526b72 0%,
            #263b42 48%,
            #17272c 52%,
            #344d55 100%
        ) !important;
    color: #eafcff !important;
    border-color: #77959d !important;
}

/* Transmitting */

.alert-danger,
.bg-danger,
.status-transmit,
.tx-active {
    background:
        linear-gradient(
            180deg,
            #8f6534 0%,
            #5e3b18 48%,
            #35200d 52%,
            #70471d 100%
        ) !important;
    color: #fff4de !important;
    border-color: #bf8a49 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 0 10px rgba(202,132,49,0.30);
}

/* ---------- Tables ---------- */

table {
    background: rgba(20,22,24,0.94) !important;
    color: #e8ebed !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #5d656a !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 3px 10px rgba(0,0,0,0.50);
}

thead,
table thead th {
    background:
        linear-gradient(
            180deg,
            #3f464b 0%,
            #202529 48%,
            #141719 52%,
            #292e32 100%
        ) !important;
    color: #f3f5f6 !important;
    border-color: #555d62 !important;
    text-shadow: 0 1px 0 #000;
}

tbody tr,
table tbody tr {
    background: rgba(30,33,35,0.96) !important;
}

tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: rgba(39,43,46,0.96) !important;
}

tbody tr:hover,
table tbody tr:hover {
    background: rgba(79,86,90,0.94) !important;
}

td,
th {
    border-color: #4f565b !important;
    color: #e8ebed !important;
}

/* Node numbers */

td strong,
.node-number,
.callsign {
    color: #ffffff !important;
    text-shadow: 0 1px 0 #000;
}

/* ---------- Buttons ---------- */

button,
.btn,
input[type="button"],
input[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #737b80 0%,
            #3f4549 48%,
            #202427 52%,
            #4c5357 100%
        ) !important;
    color: #f5f6f7 !important;
    border: 1px solid #929a9f !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(0,0,0,0.48),
        0 2px 4px rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 #000;
}

button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background:
        linear-gradient(
            180deg,
            #929a9f 0%,
            #555d62 48%,
            #292e31 52%,
            #626a6f 100%
        ) !important;
    color: #ffffff !important;
}

/* Dangerous or disconnect actions */

.btn-danger,
button.danger {
    background:
        linear-gradient(
            180deg,
            #825c31 0%,
            #573717 48%,
            #321f0c 52%,
            #68421a 100%
        ) !important;
    border-color: #ac7b42 !important;
}

/* ---------- Inputs and menus ---------- */

input,
select,
textarea,
.dropdown-menu {
    background: #1b1f21 !important;
    color: #edf0f1 !important;
    border: 1px solid #697176 !important;
}

.dropdown-item,
.dropdown-menu a {
    color: #edf0f1 !important;
}

.dropdown-item:hover,
.dropdown-menu a:hover {
    background: #50585d !important;
    color: #ffffff !important;
}

/* ---------- Links ---------- */

a {
    color: #cbd2d6;
}

a:hover {
    color: #ffffff;
}

/* ---------- Metallic separator lines ---------- */

hr {
    border: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #828b90,
            #262b2e,
            #828b90,
            transparent
        );
}

/* ---------- Mobile spacing ---------- */

@media (max-width: 768px) {
    .card-header,
    .panel-heading,
    .node-header {
        font-size: 1rem !important;
    }

    table {
        font-size: 0.92rem;
    }
}


/* ==========================================================
   WP4VW Gulf Coast Reflector branding
   ========================================================== */

#wp4vw-network-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr auto;
    align-items: center;
    gap: 24px;
    margin: 12px 12px 18px;
    padding: 16px 24px;
    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            rgba(7, 12, 16, 0.98) 0%,
            rgba(30, 37, 42, 0.96) 48%,
            rgba(8, 13, 17, 0.98) 100%
        );

    border: 1px solid #aab2b7;
    border-left: 6px solid #c28b3c;
    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.75),
        0 7px 20px rgba(0,0,0,0.65);
}

#wp4vw-network-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            112deg,
            transparent 0,
            transparent 23px,
            rgba(255,255,255,0.025) 24px,
            rgba(255,255,255,0.025) 25px,
            transparent 26px
        );
}

.wp4vw-network-logo-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp4vw-network-logo {
    display: block;
    width: 100%;
    max-width: 170px;
    max-height: 100px;
    object-fit: contain;
    filter:
        drop-shadow(0 3px 3px rgba(0,0,0,0.9))
        drop-shadow(0 0 8px rgba(255,255,255,0.12));
}

.wp4vw-network-title {
    position: relative;
    z-index: 1;
    min-width: 0;
    color: #ffffff;
    text-shadow: 0 2px 3px #000000;
}

.wp4vw-network-kicker {
    margin-bottom: 3px;
    color: #d5a45b;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.wp4vw-network-name {
    color: #ffffff;
    font-size: clamp(1.55rem, 3vw, 2.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.025em;
}

.wp4vw-network-subtitle {
    margin-top: 8px;
    color: #d8dee2;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wp4vw-network-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 9px 13px;

    background: rgba(5, 10, 13, 0.78);
    color: #d9fbe4;
    border: 1px solid #648071;
    border-radius: 4px;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wp4vw-badge-light {
    width: 10px;
    height: 10px;
    background: #38d875;
    border-radius: 50%;
    box-shadow:
        0 0 4px #38d875,
        0 0 10px rgba(56,216,117,0.70);
}


/* ==========================================================
   Compact WP4VW logo inside the original Allmon3 navbar
   ========================================================== */

#header-banner-img {
    width: auto !important;
    height: 42px !important;
    max-width: 150px !important;
    object-fit: contain !important;
    padding: 2px 4px;
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,0.85))
        drop-shadow(0 0 4px rgba(255,255,255,0.15));
}


/* ==========================================================
   High-contrast Beskar tables
   ========================================================== */

table,
.table {
    --bs-table-bg: #171b1e !important;
    --bs-table-color: #f6f7f8 !important;
    --bs-table-border-color: #667077 !important;
    --bs-table-striped-bg: #242a2e !important;
    --bs-table-striped-color: #ffffff !important;
    --bs-table-hover-bg: #384149 !important;
    --bs-table-hover-color: #ffffff !important;
}

table tbody tr,
.table tbody tr,
table tbody td,
.table tbody td {
    background-color: #171b1e !important;
    color: #f4f6f7 !important;
    opacity: 1 !important;
}

table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td {
    background-color: #23292d !important;
}

table tbody tr:hover td,
.table tbody tr:hover td {
    background-color: #3b454c !important;
    color: #ffffff !important;
}

table thead th,
.table thead th {
    background:
        linear-gradient(
            180deg,
            #505960 0%,
            #252b30 47%,
            #111518 52%,
            #30373c 100%
        ) !important;

    color: #ffffff !important;
    border-color: #778188 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

table td a,
.table td a,
table td strong,
.table td strong {
    color: #ffffff !important;
    opacity: 1 !important;
}

.text-muted,
table .text-muted,
.table .text-muted {
    color: #d2d7da !important;
    opacity: 1 !important;
}


/* ==========================================================
   Node title contrast
   ========================================================== */

.card-header,
.node-header,
.node-title,
.accordion-header,
header.navbar {
    color: #ffffff !important;
}

.card-header *,
.node-header *,
.node-title * {
    color: #ffffff !important;
}


/* ==========================================================
   Responsive WP4VW header
   ========================================================== */

@media (max-width: 800px) {
    #wp4vw-network-header {
        grid-template-columns: 105px 1fr;
        gap: 14px;
        padding: 13px 15px;
    }

    .wp4vw-network-logo {
        max-width: 105px;
        max-height: 78px;
    }

    .wp4vw-network-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 500px) {
    #wp4vw-network-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wp4vw-network-logo {
        max-width: 135px;
    }

    .wp4vw-network-badge {
        justify-self: center;
    }
}

/* ==========================================================
   WP4VW header alignment correction
   Keep the banner clear of the Allmon3 sidebar
   ========================================================== */

#wp4vw-network-header {
    margin-left: calc(16.666667% + 12px) !important;
    width: calc(83.333333% - 24px) !important;
    box-sizing: border-box;
}

/* Large-screen sidebar uses Bootstrap col-lg-2 */
@media (min-width: 992px) {
    #wp4vw-network-header {
        margin-left: calc(16.666667% + 12px) !important;
        width: calc(83.333333% - 24px) !important;
    }
}

/* Medium screens use Bootstrap col-md-3 */
@media (min-width: 768px) and (max-width: 991.98px) {
    #wp4vw-network-header {
        margin-left: calc(25% + 12px) !important;
        width: calc(75% - 24px) !important;
    }
}

/* Mobile sidebar collapses, so use full width */
@media (max-width: 767.98px) {
    #wp4vw-network-header {
        margin-left: 12px !important;
        width: calc(100% - 24px) !important;
    }
}

.wp4vw-network-logo {
    max-width: 125px !important;
    max-height: 82px !important;
}

#wp4vw-network-header {
    grid-template-columns: 135px minmax(0, 1fr) auto !important;
}

.wp4vw-network-name {
    white-space: normal;
    overflow: visible;
}

/* ==========================================================
   WP4VW - Compact Left Sidebar
   ========================================================== */

/* Reduce sidebar width */
#sidebarMenu {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
}

/* Move the main content left to recover space */
main,
main.col-md-9,
main.col-lg-10 {
    margin-left: 180px !important;
    width: calc(100% - 180px) !important;
}

/* Compact logo */
#header-banner-img {
    max-width: 105px !important;
    height: auto !important;
    display: block;
    margin: 8px auto;
}

/* Smaller Home button */
.sidebar .nav-link {
    padding: .45rem .75rem !important;
    font-size: .90rem !important;
}

/* Smaller version text */
.sidebar small,
.sidebar .text-muted {
    font-size: .72rem !important;
}

/* Tighten sidebar spacing */
.sidebar {
    padding-left: .35rem !important;
    padding-right: .35rem !important;
}

.sidebar .nav-item {
    margin-bottom: .25rem !important;
}

/* Responsive */
@media (max-width:768px){
    #sidebarMenu{
        width:180px !important;
        max-width:180px !important;
    }

    main,
    main.col-md-9,
    main.col-lg-10{
        margin-left:0 !important;
        width:100% !important;
    }
}


/* ==========================================================
   WP4VW - Execute Command Modal Contrast Fix
   ========================================================== */

.modal-content{
    background:#14181d !important;
    color:#f5f7fa !important;
    border:1px solid #4f5963 !important;
    box-shadow:0 12px 40px rgba(0,0,0,.65);
}

.modal-header{
    background:linear-gradient(#355d8b,#20486f);
    border-bottom:1px solid #6e7d8b;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-title{
    color:#ffffff !important;
    font-weight:700;
}

.modal-body{
    background:#1b2025 !important;
    color:#f2f2f2 !important;
}

.modal-body label{
    color:#ffffff !important;
    font-weight:700;
}

.modal-body p,
.modal-body span,
.modal-body div,
.modal-body small,
.modal-body em{
    color:#d9dee3 !important;
}

.modal-body input,
.modal-body select{
    background:#101418 !important;
    color:#ffffff !important;
    border:1px solid #64707b !important;
}

.modal-body input:focus,
.modal-body select:focus{
    background:#151b21 !important;
    border-color:#5fa8ff !important;
    color:#ffffff !important;
    box-shadow:0 0 10px rgba(95,168,255,.35);
}

.modal-footer{
    background:#14181d !important;
    border-top:1px solid #4f5963;
}

/* Hint text */
.modal-body em,
.modal-body i{
    color:#9fc6ff !important;
}

/* Placeholder text */
::placeholder{
    color:#b6c2cd !important;
    opacity:1;
}