@charset "utf-8";
/* ============================================================
   G9EV — 90s Anime Professional Dark Theme
   Inspired by: Cowboy Bebop, Ghost in the Shell, Evangelion
   Clean, dark, sophisticated. Not flashy.
   ============================================================ */

/* --- Theme Variable Overrides --- */
:root {
    --header-bg: #0e0e24;
    --header-title: #dddaf0;
    --header-title-hover: #3db8e8;
    --nav-bar-bg: #151535;
    --nav-bar-link: #b0aed0;
    --nav-bar-link-hover: #3db8e8;
    --mobile-menu-bg: #0e0e24;
    --mobile-link-color: #b0aed0;
    --stickybar: #151535;
}

/* --- Base --- */
html {
    background: #0c0c1d !important;
}
body.client-side {
    background: #0c0c1d !important;
    background-image: none !important;
    color: #dddaf0 !important;
    -webkit-font-smoothing: antialiased;
}
body.client-side #container {
    background: transparent !important;
}
body.client-side ::selection {
    background: rgba(61, 184, 232, 0.25);
    color: #fff;
}
body.client-side ::-moz-selection {
    background: rgba(61, 184, 232, 0.25);
    color: #fff;
}

/* --- Scrollbar --- */
body.client-side ::-webkit-scrollbar { width: 8px; height: 8px; }
body.client-side ::-webkit-scrollbar-track { background: #0c0c1d; }
body.client-side ::-webkit-scrollbar-thumb { background: #2a2a50; border-radius: 4px; }
body.client-side ::-webkit-scrollbar-thumb:hover { background: #3d3d6e; }

/* --- Starfield Background --- */
body.client-side::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 5% 90%, rgba(200,200,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 48% 42%, rgba(200,200,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 78% 88%, rgba(200,200,255,0.35), transparent),
        radial-gradient(1px 1px at 20% 55%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 95% 15%, rgba(255,255,255,0.3), transparent);
    background-size: 200% 200%;
    animation: starDrift 120s linear infinite;
    opacity: 0.6;
}
@keyframes starDrift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* --- CRT Scanline Texture (ultra-subtle) --- */
body.client-side::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(100, 100, 150, 0.015) 1px,
        rgba(100, 100, 150, 0.015) 2px
    );
    opacity: 1;
}

/* --- Header --- */
body.client-side #header {
    background: #0e0e24 !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.12);
}
body.client-side #header-inner {
    background: transparent !important;
}
body.client-side #header .pull-right p,
body.client-side #header .pull-right p a {
    color: #8a87a8 !important;
}
body.client-side #header .pull-right p a:hover {
    color: #3db8e8 !important;
}
body.client-side #header-title {
    color: #dddaf0 !important;
}
body.client-side #header-subtitle {
    color: #8a87a8 !important;
}

/* --- Navigation Bar --- */
body.client-side #nav-wrapper {
    background: #151535 !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.1);
}
body.client-side #nav-inner {
    background: transparent !important;
}
/* Hide home icon — G9EV logo already links home */
body.client-side #nav li a.home {
    display: none !important;
}
body.client-side #nav li a {
    color: #b0aed0 !important;
    padding: 0 20px !important;
    letter-spacing: 0.05em;
    transition: color 0.25s ease, background-color 0.25s ease;
}
body.client-side #nav li {
    margin: 0 2px;
}
body.client-side #nav li a:hover {
    color: #3db8e8 !important;
    background-color: rgba(61, 184, 232, 0.08) !important;
}
body.client-side #nav li a.active {
    color: #e8364f !important;
    border-bottom-color: #e8364f !important;
    background-color: rgba(232, 54, 79, 0.06) !important;
}
body.client-side #nav li a svg path {
    fill: #b0aed0;
    transition: fill 0.25s ease;
}
body.client-side #nav li a:hover svg path {
    fill: #3db8e8;
}
body.client-side #nav li a.active svg path {
    fill: #e8364f;
}

/* --- Content Panel (Dark Solid) --- */
body.client-side #content {
    background: #0e0e28 !important;
    border: 1px solid rgba(100, 100, 180, 0.12);
    border-top: 1px solid rgba(140, 140, 210, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px;
    margin-top: 12px;
    margin-bottom: 24px;
}
/* Kill ALL white backgrounds inside content */
body.client-side #content * {
    background-color: transparent !important;
}
/* Restore specific backgrounds that need color */
body.client-side #content table th {
    background-color: rgba(20, 20, 50, 0.6) !important;
}
body.client-side #content .featured-category {
    background-color: rgba(20, 20, 50, 0.5) !important;
}
body.client-side #content details {
    background-color: rgba(20, 20, 50, 0.4) !important;
}
body.client-side #content details[open] {
    background-color: rgba(20, 20, 50, 0.6) !important;
}
body.client-side #content .thread-entry .header {
    background-color: rgba(20, 20, 50, 0.4) !important;
}
body.client-side #content input[type="text"],
body.client-side #content input[type="email"],
body.client-side #content input[type="password"],
body.client-side #content input[type="number"],
body.client-side #content input[type="tel"],
body.client-side #content input[type="url"],
body.client-side #content input[type="search"],
body.client-side #content select,
body.client-side #content textarea {
    background-color: #12122a !important;
}
body.client-side #content .blue.button,
body.client-side #content .blue.button:visited {
    background-color: #0ea5cf !important;
}
body.client-side #content .green.button,
body.client-side #content .green.button:visited,
body.client-side #content .button,
body.client-side #content .button:visited {
    background-color: #e8364f !important;
}
body.client-side #content .redactor-editor {
    background-color: #12122a !important;
}
body.client-side #content .redactor-toolbar {
    background-color: #1a1a3a !important;
}
body.client-side #content .filedrop {
    background-color: rgba(18, 18, 42, 0.6) !important;
}
body.client-side #content select option {
    background-color: #12122a !important;
}
body.client-side #content .select2-container--default .select2-selection--single {
    background-color: #12122a !important;
}

/* --- Typography --- */
body.client-side h1 {
    color: #dddaf0 !important;
    background-color: transparent !important;
}
body.client-side h2 {
    color: #c8c5e0 !important;
}
body.client-side h3,
body.client-side .thread-body.bleed h3 {
    color: #a8a5c0 !important;
}
body.client-side p,
body.client-side .main-content,
body.client-side .faq-page .thread-body,
body.client-side .thread-body.bleed {
    color: #c8c5e0 !important;
}
body.client-side a,
body.client-side .link {
    color: #3db8e8 !important;
    transition: color 0.25s ease;
}
body.client-side a:hover,
body.client-side .link:hover {
    color: #6dd0f5 !important;
}

/* --- Sidebar --- */
body.client-side .sidebar {
    background: rgba(18, 18, 46, 0.8) !important;
    border: 1px solid rgba(100, 100, 180, 0.12) !important;
    border-radius: 8px;
}
body.client-side .sidebar .content {
    background: transparent !important;
}
body.client-side .sidebar .front-page-button {
    background: transparent !important;
}
body.client-side .sidebar .content a {
    color: #3db8e8 !important;
}
body.client-side .sidebar .content a:hover {
    color: #6dd0f5 !important;
}
body.client-side .sidebar section .header,
body.client-side .content section strong {
    color: #8a87a8 !important;
}

/* --- Buttons --- */
body.client-side .blue.button,
body.client-side .blue.button:visited {
    background-color: #0ea5cf !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
body.client-side .blue.button:hover {
    background-color: #12b8e6 !important;
    box-shadow: 0 2px 12px rgba(14, 165, 207, 0.3);
}
body.client-side .green.button,
body.client-side .green.button:visited,
body.client-side .button,
body.client-side .button:visited {
    background-color: #e8364f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
body.client-side .green.button:hover,
body.client-side .button:hover {
    background-color: #f04862 !important;
    box-shadow: 0 2px 12px rgba(232, 54, 79, 0.3);
}

/* --- Form Inputs --- */
body.client-side input[type="text"],
body.client-side input[type="email"],
body.client-side input[type="password"],
body.client-side input[type="number"],
body.client-side input[type="tel"],
body.client-side input[type="url"],
body.client-side input[type="search"],
body.client-side select,
body.client-side textarea {
    background-color: #12122a !important;
    color: #dddaf0 !important;
    border: 1px solid rgba(100, 100, 180, 0.2) !important;
    border-radius: 4px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.client-side input:focus,
body.client-side select:focus,
body.client-side textarea:focus {
    border-color: rgba(124, 92, 191, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15) !important;
    outline: none;
}
body.client-side input::placeholder,
body.client-side textarea::placeholder {
    color: #5a5880 !important;
}
body.client-side input::-moz-placeholder,
body.client-side textarea::-moz-placeholder {
    color: #5a5880 !important;
}
body.client-side select option {
    background-color: #12122a;
    color: #dddaf0;
}

/* --- Tables --- */
body.client-side table {
    border-collapse: collapse;
}
body.client-side table th {
    background: rgba(20, 20, 50, 0.6) !important;
    color: #a8a5c0 !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.15) !important;
}
body.client-side table td {
    border-bottom: 1px solid rgba(100, 100, 180, 0.08) !important;
    color: #c8c5e0 !important;
}
body.client-side table tr:hover td {
    background: rgba(61, 184, 232, 0.04) !important;
}

/* --- Alert Bars --- */
body.client-side .error_bar {
    background: rgba(232, 54, 79, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(232, 54, 79, 0.3);
    border-radius: 4px;
}
body.client-side .warning_bar {
    background: rgba(255, 215, 0, 0.1) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 4px;
}
body.client-side .notice_bar,
body.client-side #msg_notice {
    background: rgba(57, 255, 126, 0.08) !important;
    color: #34d399 !important;
    border: 1px solid rgba(57, 255, 126, 0.2);
    border-radius: 4px;
}
body.client-side #msg_error {
    background: rgba(232, 54, 79, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(232, 54, 79, 0.3);
    border-radius: 4px;
}
body.client-side #msg_warning {
    background: rgba(255, 215, 0, 0.1) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 4px;
}

/* --- Featured Categories & Articles --- */
body.client-side .featured-category {
    background: rgba(20, 20, 50, 0.5);
    border: 1px solid rgba(100, 100, 180, 0.1);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}
body.client-side .featured-category .category-name {
    color: #dddaf0 !important;
}
body.client-side .article-headline .article-title a {
    color: #3db8e8 !important;
}
body.client-side .article-headline .article-title a:hover {
    color: #6dd0f5 !important;
}
body.client-side .article-headline .article-teaser {
    color: #8a87a8 !important;
}

/* --- FAQ Page (G9EV Custom) --- */
body.client-side details {
    background: rgba(20, 20, 50, 0.4);
    border: 1px solid rgba(100, 100, 180, 0.12);
    border-radius: 6px;
    margin-bottom: 6px;
    transition: background-color 0.25s ease;
}
body.client-side details[open] {
    background: rgba(20, 20, 50, 0.6);
}
body.client-side details summary {
    color: #dddaf0 !important;
    cursor: pointer;
    padding: 12px 16px;
    transition: color 0.25s ease;
}
body.client-side details summary:hover {
    color: #3db8e8 !important;
}
body.client-side details > div,
body.client-side details > p {
    color: #c8c5e0 !important;
    padding: 0 16px 12px 16px;
}

/* --- Footer --- */
body.client-side #footer {
    background: #0a0a18 !important;
    color: #5a5880 !important;
    border-top: 1px solid rgba(100, 100, 180, 0.1);
}
body.client-side #footer a {
    color: #8a87a8 !important;
}
body.client-side #footer a:hover {
    color: #3db8e8 !important;
}

/* --- Pre-Footer (KB Search) --- */
body.client-side #pre-footer {
    background: rgba(14, 14, 36, 0.6) !important;
    border-top: 1px solid rgba(100, 100, 180, 0.1);
}
body.client-side #pre-footer .searchArea button {
    background: #0ea5cf !important;
    color: #fff !important;
    border-radius: 4px;
}

/* --- Loading Overlay --- */
body.client-side #overlay {
    background: rgba(10, 10, 26, 0.8) !important;
}
body.client-side #loading {
    background: #151535 !important;
    color: #dddaf0 !important;
    border: 1px solid rgba(100, 100, 180, 0.15);
    border-radius: 8px;
}

/* --- Mobile Menu (Sidr) --- */
body.client-side .sidr {
    background: #0e0e24 !important;
}
body.client-side .sidr ul li a {
    color: #b0aed0 !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.1) !important;
}
body.client-side .sidr ul li a:hover {
    color: #3db8e8 !important;
    background: rgba(61, 184, 232, 0.08) !important;
}
body.client-side #welcome {
    color: #8a87a8 !important;
}

/* --- Search Form --- */
body.client-side .search-form {
    background: transparent;
}
body.client-side .search-form input.search {
    background: #12122a !important;
    color: #dddaf0 !important;
    border: 1px solid rgba(100, 100, 180, 0.2) !important;
    border-radius: 4px;
}
body.client-side .search-form input.search::placeholder {
    color: #5a5880 !important;
}

/* --- Ticket View / Thread --- */
body.client-side .thread-entry {
    border-bottom: 1px solid rgba(100, 100, 180, 0.08);
}
body.client-side .thread-entry .header {
    background: rgba(20, 20, 50, 0.4) !important;
    color: #a8a5c0 !important;
}
body.client-side .thread-body {
    color: #c8c5e0 !important;
}
body.client-side .thread-event {
    color: #8a87a8 !important;
}

/* --- Ticket List --- */
body.client-side .tickets-page table tr {
    border-bottom: 1px solid rgba(100, 100, 180, 0.08);
}
body.client-side .tickets-page table tr:hover td {
    background: rgba(61, 184, 232, 0.06) !important;
}

/* --- Compliance / Consent Banner --- */
body.client-side #complianceouter {
    background: #151535 !important;
}
body.client-side #complaince-button {
    background: #0ea5cf !important;
}
body.client-side #complaince-button-label {
    color: #fff !important;
}

/* --- Accessibility Focus --- */
body.client-side a:focus-visible,
body.client-side button:focus-visible,
body.client-side input:focus-visible,
body.client-side select:focus-visible,
body.client-side textarea:focus-visible {
    outline: 2px solid #7c5cbf !important;
    outline-offset: 2px;
}

/* --- Landing Page Specific --- */
body.client-side #landing_page {
    background: transparent !important;
}
body.client-side #landing_page .thread-body {
    color: #c8c5e0 !important;
    background: transparent !important;
}
body.client-side #landing_page .main-content {
    background: transparent !important;
}

/* --- Login Page --- */
body.client-side.login-page #content {
    background: rgba(14, 14, 36, 0.9) !important;
}

/* --- Redactor (Rich Text Editor) --- */
body.client-side .redactor-box {
    border: 1px solid rgba(100, 100, 180, 0.2) !important;
    border-radius: 4px;
}
body.client-side .redactor-editor {
    background: #12122a !important;
    color: #dddaf0 !important;
}
body.client-side .redactor-toolbar {
    background: #1a1a3a !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.15) !important;
}
body.client-side .redactor-toolbar li a {
    color: #a8a5c0 !important;
}
body.client-side .redactor-toolbar li a:hover {
    color: #3db8e8 !important;
}

/* --- Select2 Dropdowns --- */
body.client-side .select2-container--default .select2-selection--single {
    background-color: #12122a !important;
    border-color: rgba(100, 100, 180, 0.2) !important;
    color: #dddaf0 !important;
}
body.client-side .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #dddaf0 !important;
}
body.client-side .select2-dropdown {
    background-color: #12122a !important;
    border-color: rgba(100, 100, 180, 0.2) !important;
}
body.client-side .select2-results__option {
    color: #dddaf0 !important;
}
body.client-side .select2-results__option--highlighted {
    background-color: rgba(61, 184, 232, 0.15) !important;
    color: #3db8e8 !important;
}
body.client-side .select2-search__field {
    background: #0e0e24 !important;
    color: #dddaf0 !important;
}

/* --- jQuery UI Datepicker --- */
body.client-side .ui-datepicker {
    background: #151535 !important;
    border: 1px solid rgba(100, 100, 180, 0.2) !important;
    border-radius: 6px;
}
body.client-side .ui-datepicker-header {
    background: #1a1a3a !important;
    color: #dddaf0 !important;
    border-bottom: 1px solid rgba(100, 100, 180, 0.15) !important;
}
body.client-side .ui-datepicker td a {
    color: #c8c5e0 !important;
    background: transparent !important;
}
body.client-side .ui-datepicker td a:hover {
    background: rgba(61, 184, 232, 0.12) !important;
    color: #3db8e8 !important;
}
body.client-side .ui-datepicker td a.ui-state-active {
    background: #0ea5cf !important;
    color: #fff !important;
}

/* --- File Upload Drop Zone --- */
body.client-side .filedrop {
    background: rgba(18, 18, 42, 0.6) !important;
    border: 2px dashed rgba(100, 100, 180, 0.2) !important;
    border-radius: 6px;
    color: #8a87a8 !important;
}
body.client-side .filedrop:hover,
body.client-side .filedrop.dragover {
    border-color: rgba(61, 184, 232, 0.4) !important;
    background: rgba(61, 184, 232, 0.05) !important;
}

/* --- Misc Overrides --- */
body.client-side .clear {
    clear: both;
}
body.client-side .pull-right .front-page-button {
    background: transparent;
}
body.client-side .flush-right a.blue.button,
body.client-side .flush-right a.green.button {
    display: block;
    text-align: center;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Typeahead Dropdown --- */
body.client-side .typeahead.dropdown-menu {
    background: #151535 !important;
    border: 1px solid rgba(100, 100, 180, 0.2) !important;
    border-radius: 4px;
}
body.client-side .typeahead.dropdown-menu li a {
    color: #c8c5e0 !important;
}
body.client-side .typeahead.dropdown-menu li.active a,
body.client-side .typeahead.dropdown-menu li a:hover {
    background: rgba(61, 184, 232, 0.12) !important;
    color: #3db8e8 !important;
}

/* --- Back Button (OSTA) --- */
body.client-side #backtotop {
    background: #151535 !important;
    border: 1px solid rgba(100, 100, 180, 0.15) !important;
    color: #b0aed0 !important;
}
body.client-side #backtotop:hover {
    background: #1a1a3a !important;
    color: #3db8e8 !important;
}

/* --- Pagination --- */
body.client-side .pagination a,
body.client-side .pagination span {
    background: rgba(20, 20, 50, 0.5) !important;
    color: #b0aed0 !important;
    border: 1px solid rgba(100, 100, 180, 0.12) !important;
    border-radius: 4px;
}
body.client-side .pagination a:hover {
    background: rgba(61, 184, 232, 0.1) !important;
    color: #3db8e8 !important;
}
body.client-side .pagination .current {
    background: #0ea5cf !important;
    color: #fff !important;
}

/* --- KB Category Icons --- */
body.client-side .featured-category i {
    color: #7c5cbf !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 960px) {
    body.client-side::before {
        opacity: 0.3;
        animation: none;
    }
    body.client-side::after {
        display: none;
    }
    body.client-side #content {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 0;
        margin-top: 0;
    }
    body.client-side .sidebar {
        border-radius: 0;
        margin: 0;
    }
}