/* ============================================================
   NECRO-CYBER :: custom.css
   Overrides for webv4 (Bootstrap 3.3.5 based Synchronet theme)
   Drop this in: webv4/root/css/custom.css
   Loaded automatically after stock stylesheets if present.
   ============================================================ */

/* ---- Global font + base surface ---- */

body {
    font-family: "Courier New", "Consolas", monospace;
}

.dark {
    background-color: #05010a !important;
    color: #b8f2ff;
    background-image:
        repeating-linear-gradient(0deg, rgba(0,255,255,0.03) 0px, rgba(0,255,255,0.03) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at top, #12042a 0%, #05010a 55%, #000000 100%);
    background-attachment: fixed;
}

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

.dark a {
    color: #ff2ee6;
    text-shadow: 0 0 4px rgba(255, 46, 230, 0.5);
}

.dark a:hover {
    color: #39ffe4;
    text-shadow: 0 0 8px rgba(57, 255, 228, 0.8);
}

/* ---- Top navbar ---- */

.dark .navbar {
    background-color: #0a0014;
    border-bottom: 1px solid #ff2ee6;
    box-shadow: 0 0 12px rgba(255, 46, 230, 0.35);
}

.dark .navbar-brand {
    color: #39ffe4;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #39ffe4, 0 0 18px rgba(57,255,228,0.5);
}

.dark .navbar-brand:hover {
    color: #ff2ee6;
    text-shadow: 0 0 8px #ff2ee6;
}

.dark .navbar-default a {
    color: #b8f2ff;
}

.dark .navbar-default a:hover {
    color: #39ffe4 !important;
    background-color: #150429 !important;
    text-shadow: 0 0 6px rgba(57,255,228,0.6);
}

.dark .navbar-default .navbar-nav>.open>a,
.dark .navbar-default .navbar-nav>.open>a:focus,
.dark .navbar-default .navbar-nav>.open>a:hover {
    background-color: #1a0630;
    color: #39ffe4;
}

/* Dropdown menus (user menu, page submenus, login form) */

.dark .dropdown-menu {
    background-color: #0a0014;
    border: 1px solid #ff2ee6;
    box-shadow: 0 0 14px rgba(255, 46, 230, 0.35);
}

.dark .dropdown-menu li a {
    color: #b8f2ff;
}

.dark .dropdown-menu li a:hover {
    color: #05010a;
    background-color: #39ffe4;
    text-shadow: none;
}

/* Breadcrumbs */

.dark .breadcrumb {
    background-color: #0d0221;
    border: 1px solid #221033;
}

.dark .breadcrumb a {
    color: #39ffe4;
}

/* ---- Cards / list-group items (sidebar panels, forum lists, etc.) ---- */

.dark .list-group-item {
    background-color: #0d0221;
    color: #b8f2ff;
    border-color: #ff2ee6;
}

.dark a.list-group-item:hover,
.dark a.list-group-item:active {
    background-color: #1a0630;
    color: #39ffe4;
}

.dark li.list-group-item.mail:hover {
    background-color: #1a0630;
    color: #39ffe4;
}

.dark .striped:nth-of-type(even),
.dark .table-striped > tbody > tr:nth-child(odd) > td,
.dark .table-striped > tbody > tr:nth-child(odd) > th {
    background: #0a0014;
}

/* Sidebar modules ("Recent Visitors", "System Info", "Who's Online", etc.)
   Each renders as <li class="list-group-item sidebar"> inside a single
   <ul class="list-group">, per webv4/lib/sidebar.js -- there is no Bootstrap
   .panel component involved here, so target this structure instead. */

.dark .list-group-item.sidebar {
    background-color: #0d0221;
    border: 1px solid #ff2ee6;
    box-shadow: 0 0 10px rgba(255, 46, 230, 0.2);
    margin-bottom: 12px;
    padding: 10px 12px;
}

/* Headings inside sidebar modules (module-specific markup, typically h3/h4) */

.dark .list-group-item.sidebar h1,
.dark .list-group-item.sidebar h2,
.dark .list-group-item.sidebar h3,
.dark .list-group-item.sidebar h4,
.dark .list-group-item.sidebar h5 {
    color: #39ffe4;
    text-shadow: 0 0 4px rgba(57,255,228,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #ff2ee6;
    padding-bottom: 6px;
}

/* Nested lists/tables within a sidebar module (e.g. visitor rows, stat rows) */

.dark .list-group-item.sidebar table {
    color: #b8f2ff;
    width: 100%;
}

.dark .list-group-item.sidebar td,
.dark .list-group-item.sidebar th {
    border-color: #221033;
    padding: 4px 6px;
}

.dark .list-group-item.sidebar .list-group-item {
    background-color: #0a0014;
    border-color: #221033;
    margin-bottom: 4px;
}

.dark .list-group-item.sidebar strong,
.dark .list-group-item.sidebar b {
    color: #ff2ee6;
}

/* ---- Badges (unread mail, sub counts) ---- */

.dark span.badge.new,
span.badge.new {
    background: #ff2ee6;
    color: #05010a;
    box-shadow: 0 0 6px rgba(255,46,230,0.7);
}

.dark span.badge.scanned,
span.badge.scanned {
    background-color: #39ffe4;
    color: #05010a;
    box-shadow: 0 0 6px rgba(57,255,228,0.7);
}

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

.dark .btn,
.dark a.btn,
.dark .icon {
    color: #05010a;
    background-color: #7de8ff !important;
}

.dark a.btn:hover,
.dark .icon:hover {
    color: #05010a;
    background-color: #39ffe4 !important;
}

.dark .btn-primary {
    color: #05010a;
    background-color: #ff2ee6;
    border-color: #ff2ee6;
    text-shadow: none;
}

.dark .btn-primary:hover {
    background-color: #39ffe4;
    border-color: #39ffe4;
    color: #05010a;
}

/* ---- Dark-mode toggle switch ---- */

.dark .checkbox.checbox-switch label span,
.dark .checkbox-inline.checbox-switch span {
    border-color: #ff2ee6;
    background-color: #0d0221;
}

.dark .checkbox.checbox-switch label > input:checked + span,
.dark .checkbox-inline.checbox-switch > input:checked + span {
    background-color: #39ffe4;
    border-color: #39ffe4;
    box-shadow: #39ffe4 0px 0px 0px 8px inset;
}

/* ---- Forms / inputs ---- */

.dark input,
.dark select,
.dark textarea {
    color: #b8f2ff;
    background-color: #0a0014;
    border: 1px solid #ff2ee6;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6a5a7a;
}

/* ---- Modals ---- */

.dark .modal-content {
    background-color: #0d0221 !important;
    color: #b8f2ff !important;
    border: 1px solid #ff2ee6;
    box-shadow: 0 0 20px rgba(255,46,230,0.4);
}

/* ---- Status text ---- */

.dark .text-danger {
    color: #ff2050;
    text-shadow: 0 0 4px rgba(255,32,80,0.6);
}

.dark .text-success {
    color: #39ffe4;
    text-shadow: 0 0 4px rgba(57,255,228,0.6);
}

/* ---- Preformatted / ANSI blocks (BBS art, telnet output) ---- */

pre.ansi {
    background-color: #000000;
    border: 1px solid #221033;
}

/* ============================================================
   LIGHT / DUSK MODE
   Applies when the dark-mode switch is OFF. Since ".dark .navbar"
   (2 classes) beats plain ".navbar" (1 class) in specificity, these
   rules are automatically overridden whenever .dark is active --
   no :not(.dark) scoping needed.
   ============================================================ */

body {
    font-family: "Courier New", "Consolas", monospace;
    background-color: #241b38;
    color: #EC9A29;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at top, #34275a 0%, #241b38 55%, #1a1229 100%);
    background-attachment: fixed;
}

a {
    color: #c026d3;
    text-shadow: 0 0 3px rgba(192, 38, 211, 0.3);
}

a:hover {
    color: #0891a3;
    text-shadow: 0 0 6px rgba(8, 145, 163, 0.5);
}

.navbar {
    background-color: #3a2c5c;
    border-bottom: 1px solid #c026d3;
    box-shadow: 0 0 10px rgba(192, 38, 211, 0.25);
}

.navbar-brand {
    color: #0891a3;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(8, 145, 163, 0.5);
}

.navbar-brand:hover {
    color: #c026d3;
}

.navbar-default a {
    color: #ede4fa;
}

.navbar-default a:hover {
    color: #0891a3 !important;
    background-color: #2e2249 !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
    background-color: #3a2c5c;
    color: #0891a3;
}

.dropdown-menu {
    background-color: #3a2c5c;
    border: 1px solid #c026d3;
    box-shadow: 0 0 12px rgba(192, 38, 211, 0.25);
}

.dropdown-menu li a {
    color: #ede4fa;
}

.dropdown-menu li a:hover {
    color: #1a1229;
    background-color: #0891a3;
    text-shadow: none;
}

.breadcrumb {
    background-color: #2e2249;
    border: 1px solid #4a3968;
    color: #ede4fa;
}

.breadcrumb a {
    color: #0891a3;
}

.list-group-item {
    background-color: #2e2249;
    color: #AAAAAA !important;
    border-color: #c026d3;
}

a.list-group-item:hover,
a.list-group-item:active {
    background-color: #4a3968;
    color: #0891a3;
}

li.list-group-item.mail:hover {
    background-color: #4a3968;
    color: #0891a3;
}

.striped:nth-of-type(even),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background: #2e2249;
}

.list-group-item.sidebar {
    background-color: #2e2249;
    border: 1px solid #c026d3;
    box-shadow: 0 0 8px rgba(192, 38, 211, 0.15);
    margin-bottom: 12px;
    padding: 10px 12px;
    color: #ede4fa;
}

.list-group-item.sidebar h1,
.list-group-item.sidebar h2,
.list-group-item.sidebar h3,
.list-group-item.sidebar h4,
.list-group-item.sidebar h5 {
    color: #0891a3;
    text-shadow: 0 0 3px rgba(8, 145, 163, 0.4);
    border-bottom: 1px solid #c026d3;
    padding-bottom: 6px;
}

.list-group-item.sidebar .list-group-item {
    background-color: #241b38;
    border-color: #4a3968;
    margin-bottom: 4px;
}

.list-group-item.sidebar strong,
.list-group-item.sidebar b {
    color: #c026d3;
}

span.badge.new {
    background: #c026d3;
    color: #1a1229;
}

span.badge.scanned {
    background-color: #0891a3;
    color: #1a1229;
}

.btn,
a.btn,
.icon {
    color: #1a1229;
    background-color: #a78bda !important;
}

a.btn:hover,
.icon:hover {
    background-color: #0891a3 !important;
}

.btn-primary {
    color: #ede4fa;
    background-color: #c026d3;
    border-color: #c026d3;
}

.btn-primary:hover {
    background-color: #0891a3;
    border-color: #0891a3;
}

.well,
.well-sm {
    background-color: #2e2249;
    border: 1px solid #c026d3;
    box-shadow: 0 0 10px rgba(192, 38, 211, 0.2);
    color: #ede4fa;
}

.well h1, .well h2, .well h3, .well h4,
.well-sm h1, .well-sm h2, .well-sm h3, .well-sm h4 {
    color: #0891a3;
    text-shadow: 0 0 6px rgba(8, 145, 163, 0.4);
}

input, select, textarea {
    color: #ede4fa;
    background-color: #241b38;
    border: 1px solid #c026d3;
}

.modal-content {
    background-color: #2e2249 !important;
    color: #ede4fa !important;
    border: 1px solid #c026d3;
}

.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid #c026d3;
    margin-bottom: 0;
}

.sidebar-tabs > li {
    float: none;
    flex: 1 1 0;
    margin-bottom: 0;
    text-align: center;
    min-width: 0;
}

.sidebar-tabs > li > a {
    display: block;
    color: #ede4fa;
    background-color: #241b38;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 10.5px;
    line-height: 1.25;
    padding: 6px 4px;
    white-space: normal;
    word-break: break-word;
}

.sidebar-tabs > li > a:hover {
    color: #0891a3;
    background-color: #2e2249;
}

.sidebar-tabs > li.active > a,
.sidebar-tabs > li.active > a:hover {
    color: #0891a3;
    background-color: #2e2249;
    border: 1px solid #c026d3;
    border-bottom-color: transparent;
}

.sidebar-tab-content {
    background-color: #2e2249;
    border: 1px solid #c026d3;
    border-top: none;
    padding: 10px 12px;
    box-shadow: 0 0 8px rgba(192, 38, 211, 0.15);
}

/* Toggle switch, unchecked (light mode) state */
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
    border-color: #c026d3;
    background-color: #2e2249;
}

/* ============================================================
   END LIGHT / DUSK MODE
   ============================================================ */

/* ---- Well / well-sm (page title boxes, e.g. "User List" header) ---- */

.dark .well,
.dark .well-sm {
    background-color: #0d0221;
    border: 1px solid #ff2ee6;
    box-shadow: 0 0 12px rgba(255, 46, 230, 0.25), inset 0 0 20px rgba(57, 255, 228, 0.05);
}

.dark .well h1,
.dark .well h2,
.dark .well h3,
.dark .well h4,
.dark .well-sm h1,
.dark .well-sm h2,
.dark .well-sm h3,
.dark .well-sm h4 {
    color: #39ffe4;
    text-shadow: 0 0 8px rgba(57, 255, 228, 0.6);
    letter-spacing: 1px;
    margin: 0;
}

/* ---- Sidebar structural layout: width + sticky positioning ---- */

@media (min-width: 768px) {
    #sidebar {
        width: 22%;
        position: sticky;
        top: 80px; /* clears the fixed navbar */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .row-offcanvas > .col-sm-9 {
        width: 78%;
    }
}

/* ---- Sidebar tabs (pairs with custom.js) ---- */
/* Flexbox instead of Bootstrap's default float:left -- the sidebar is too
   narrow for 3 floated tabs to fit on one row without wrapping, so we
   override to equal-width flex segments that always fit. */

.dark .sidebar-tabs {
    display: flex;
    border-bottom: 1px solid #ff2ee6;
    margin-bottom: 0;
}

.dark .sidebar-tabs > li {
    float: none;
    flex: 1 1 0;
    margin-bottom: 0;
    text-align: center;
    min-width: 0; /* allow flex items to shrink below content width */
}

.dark .sidebar-tabs > li > a {
    display: block;
    color: #b8f2ff;
    background-color: #0a0014;
    border: 1px solid transparent;
    border-radius: 0;
    margin-right: 0;
    font-size: 10.5px;
    line-height: 1.25;
    padding: 6px 4px;
    white-space: normal;
    word-break: break-word;
}

.dark .sidebar-tabs > li > a:hover,
.dark .sidebar-tabs > li > a:focus {
    color: #39ffe4;
    background-color: #150429;
    border-color: #221033;
}

.dark .sidebar-tabs > li.active > a,
.dark .sidebar-tabs > li.active > a:hover,
.dark .sidebar-tabs > li.active > a:focus {
    color: #39ffe4;
    background-color: #0d0221;
    border: 1px solid #ff2ee6;
    border-bottom-color: transparent;
    text-shadow: 0 0 6px rgba(57, 255, 228, 0.6);
}

.dark .sidebar-tab-content {
    background-color: #0d0221;
    border: 1px solid #ff2ee6;
    border-top: none;
    padding: 10px 12px;
    box-shadow: 0 0 10px rgba(255, 46, 230, 0.2);
}

/* ---- Blockquotes (quoted message text) ---- */

.dark blockquote {
    border-left: 3px solid #ff2ee6;
    color: #b8f2ff;
}

blockquote {
    border-left: 3px solid #c026d3;
    color: #ede4fa;
}

/* DARK MODE */
.dark .fTelnetContainer {
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 0 14px rgba(255, 46, 230, 0.3) !important;
}

/* DUSK / LIGHT MODE */
.fTelnetContainer {
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 0 12px rgba(192, 38, 211, 0.25) !important;
    margin: 10px;
    padding: 10px;
    background-color: #000000;
}

/* Ensure the status bar at the bottom doesn't bleed past the radius */
.fTelnetStatusBar {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.fTelnetContainer {
    width: 100% !important;        /* Fill the parent width */
    max-width: 100% !important;    /* Don't go larger than the parent */
    height: auto !important;       /* Maintain aspect ratio */
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid #000000 !important;
}

/* Force the internal client container and canvas to scale */
.fTelnetClientContainer {
    width: 100% !important;        /* Stretch to fill container */
    height: auto !important;       /* Let it determine height automatically */
    aspect-ratio: 800 / 475;       /* Keeps the original fTelnet proportions */
}

.fTelnetCrtCanvas {
    width: 100% !important;        /* Force canvas to scale with parent */
    height: auto !important;       /* Maintain aspect ratio */
}