/* ============================================================
   TWP BTS Dark Mode Theme (Portal 2 Behind the Scenes)
   Cool dark navy / cyan-blue — Colors only, loaded after twp-base.css
   ============================================================ */

:root {
  /* Base background (deep dark navy, the BTS maintenance corridors) */
  --bs-body-bg: #0F1923;
  --bs-body-color: #C8D8E8;

  /* BTS cyan-blue accent (energy lighting, GLaDOS illumination) */
  --bs-primary: #4BB8D4;          /* cyan-blue accent */
  --bs-primary-rgb: 75,184,212;

  /* Panel backgrounds */
  --bs-secondary: #1B2B3B;        /* dark navy overlay panel */
  --bs-secondary-rgb: 27,43,59;

  /* Support tones */
  --bs-success: #4ABD8A;          /* cool mint green */
  --bs-info: #4BB8D4;             /* reused cyan */
  --bs-warning: #D4A44B;          /* muted amber (maintenance lighting) */
  --bs-danger: #D45252;           /* muted red */

  /* Neutral blues */
  --bs-light: #1E2F3F;            /* medium dark navy */
  --bs-dark: #080E14;             /* near-black */

  /* Links */
  --bs-link-color: #7EC8DE;       /* lighter cyan for readability */
  --bs-link-hover-color: #A8DFF0;

  /* Borders */
  --bs-border-color: #253545;
  --bs-card-bg: #162330;
  --bs-card-border-color: #253545;

  /* Hero gradient */
  --twp-hero-gradient-start: rgba(75,184,212,0.10);
  --twp-hero-gradient-end:   rgba(0,0,0,0);

  /* Answer highlight */
  --twp-answer-highlight-bg: #0F2035;

  /* Marked Answer colors (dark navy-adapted green) */
  --twp-answer-border:     #2e6b4e;
  --twp-answer-header-bg:  #0e2820;
  --twp-answer-name-color: #4ABD8A;
  --twp-answer-body-bg:    #0b2018;

  /* Distinguished colors (dark navy-adapted amber) */
  --twp-dist-border:     #8a6c1a;
  --twp-dist-header-bg:  #1c1a08;
  --twp-dist-name-color: #D4A44B;
  --twp-dist-body-bg:    #161406;

  /* Comment alternating rows */
  --twp-comment-even-bg:     #192840;
  --twp-comment-odd-bg:      #162330;

  /* Forum row alternating */
  --twp-row-odd-bg:          #162330;
  --twp-row-even-bg:         #1B2A3A;
  --twp-row-hover-bg:        #1F3040;

  /* Masthead overlay */
  --twp-masthead-overlay-start: rgba(0,0,0,0.70);
  --twp-masthead-overlay-end:   rgba(0,0,0,0.40);

  /* Bootstrap RGB overrides — fixes bg-light, text-light, etc. */
  --bs-body-bg-rgb: 15,25,35;
  --bs-light-rgb: 30,47,63;

  /* Secondary text color (used by comment-meta, etc.) */
  --bs-secondary-color: #7A9AB8;
}

/* Base */
html, body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Navbar */
.aperture-navbar {
  background-color: #080E14 !important;
  border-bottom: 3px solid var(--bs-primary);
  color: var(--bs-body-color);
}

/* Navbar search input */
.aperture-search-input {
  background-color: #1B2B3B;
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}
.aperture-search-input::placeholder { color: #5A7A94; }
.aperture-search-input:focus {
  background-color: #1E2F3F;
  color: var(--bs-body-color);
}

/* Sidebar */
.sidebar {
  background: transparent;
  border-right: 1px solid var(--bs-border-color);
}

/* Card colors */
.aperture-card {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border-color);
}
.aperture-card .list-group-item {
  background-color: #1B2B3B;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.aperture-card .list-group-item a:hover {
  color: var(--bs-primary);
}

/* Support card */
.aperture-card.bg-warning .card-header {
  background-color: #D4A44B;
  color: #080E14;
}

.main-content {
  background-color: #162330;
  border: 1px solid var(--bs-card-border-color);
}

/* Footer */
.footer {
  background-color: #1B2B3B;
  color: #7A9AB8;
  border-top: 1px solid #1A2535;
}

/* Text readability */
.text-secondary { color: #7A9AB8 !important; }
.text-muted { color: #6A8AA2 !important; }

/* ===== News Page Styling ===== */

.news-card {
  background-color: #162330;
  border-left: 6px solid var(--bs-primary);
}
.news-card::before {
  background-color: var(--bs-primary);
}
.news-card:hover::before {
  box-shadow: 0 0 6px rgba(75,184,212,0.45);
}

.news-content {
  color: var(--bs-body-color);
}

.news-quote {
  background-color: #0F1C2A;
  border-left: 3px solid var(--bs-primary);
  color: #7EC8DE;
}

.news-card .card-footer {
  border-top: 1px solid var(--bs-border-color);
}
.news-card .card-footer a:hover {
  color: var(--bs-link-hover-color);
}

/* Forum index */
.board-title-link {
  color: var(--bs-primary);
}
.board-title-link:hover { color: var(--bs-link-hover-color); }

.board-row,
.thread-row {
  background-color: var(--twp-row-odd-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.board-row:nth-child(even),
.thread-row:nth-child(even) { background-color: var(--twp-row-even-bg); }
.board-row:hover,
.thread-row:hover { background-color: var(--twp-row-hover-bg); }

.board-info small, .thread-info small { color: #4BB8D4; }

/* Forum sections */
.forum-section {
  border: 1px solid #1A2535;
}
.board-header, .thread-header {
  background-color: #080E14;
  color: var(--bs-primary);
  border-bottom: 1px solid #1A2535;
}

/* Forum stats */
.forum-stats-container {
  background-color: #162330;
  border: 1px solid var(--bs-border-color);
}
.forum-stats-header {
  background-color: #080E14;
  color: var(--bs-primary);
}

/* ===== Individual Thread / Posts ===== */

.post-container {
  background-color: #162330;
  border: 1px solid var(--bs-border-color);
}
.post-container::before {
  background-color: var(--role-border-color, var(--bs-primary)) !important;
}
.post-container:hover::before {
  box-shadow: 0 0 6px rgba(75,184,212,0.45);
}
.post-container.marked-answer { background: var(--twp-answer-highlight-bg); }

.post-header {
  background-color: #1B2A3A;
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.post-header .author img {
  border: 2px solid #080E14;
  background: #1F3040;
}
.post-header .author-name {
  color: var(--role-name-color, var(--bs-primary));
}
.post-header .author-rank { color: #8AAABF; }

.post-body {
  background-color: #162330;
}
.post-body blockquote {
  border-left: 3px solid var(--bs-primary);
  background-color: #0F1C2A;
  color: #C8D8E8;
}

.post-footer {
  background-color: #0F1C2A;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}
.post-footer .reactions i {
  color: var(--bs-primary);
}

/* Ads */
.ad-container {
  border: 1px solid #1A2535;
  background-color: #0F1C2A;
}

/* Quick Reply */
.card-header.bg-primary {
  background-color: #080E14 !important;
  color: var(--bs-primary) !important;
}
.card-body textarea {
  background-color: #1B2B3B !important;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color) !important;
}
.card-body textarea:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.1rem rgba(75,184,212,0.25);
}

blockquote {
  border-left-color: var(--bs-primary);
}

/* Discord-style spoiler tags */
.spoiler {
  background: #080E14;
  color: transparent;
}
.spoiler:hover,
.spoiler.revealed {
  color: #C8D8E8;
}

/* Fenced code blocks */
pre {
  background-color: #0F1C2A;
  color: #C8D8E8;
  border: 1px solid #1A2535;
}
pre code {
  color: inherit;
}

/* Inline code */
code {
  background-color: #1B2B3B;
  color: #7EC8DE;
}

blockquote pre {
  background-color: #0A1520;
  border-color: transparent;
}

/* ===== Add Reply Page Styling ===== */

.reply-card {
  border-left: 6px solid var(--bs-primary);
}
.reply-card::before {
  background-color: var(--bs-primary);
}
.reply-card:hover::before {
  box-shadow: 0 0 6px rgba(75,184,212,0.45);
}

.preview-box {
  border-color: var(--bs-border-color);
  background-color: #162330;
}
.preview-box .preview-content {
  color: var(--bs-body-color);
}

.reply-card textarea:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.1rem rgba(75,184,212,0.25);
}

/* ===== New Topic Page Styling ===== */

.new-topic-card {
  border-left: 6px solid var(--bs-primary);
}
.new-topic-card::before {
  background-color: var(--bs-primary);
}
.new-topic-card:hover::before {
  box-shadow: 0 0 6px rgba(75,184,212,0.45);
}

.new-topic-card textarea:focus,
.new-topic-card input:focus {
  background-color: #1B2B3B;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.1rem rgba(75,184,212,0.25);
}

/* ===== Activity Page Styling ===== */

.activity-section::before {
  background-color: var(--bs-primary);
}
.activity-section:hover::before {
  box-shadow: 0 0 6px rgba(75,184,212,0.45);
}

.activity-row {
  background-color: #162330;
  border-bottom: 1px solid var(--bs-border-color);
}
.activity-row:nth-child(even) {
  background-color: #1B2A3A;
}
.activity-row:hover {
  background-color: #1F3040;
}

.activity-info a {
  color: var(--bs-primary);
}
.activity-info a:hover {
  color: var(--bs-link-hover-color);
}

.activity-section .board-header {
  background-color: #080E14;
  color: var(--bs-primary);
  border-bottom: 1px solid #1A2535;
}

.activity-row small {
  color: #7A9AB8;
}

/* Pagination */
.page-item .page-link {
  color: var(--bs-primary);
  background-color: #0F1C2A;
  border: 1px solid var(--bs-border-color);
}
.page-item .page-link:hover {
  color: #080E14;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.page-item.active .page-link {
  color: #080E14;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.page-item.disabled .page-link {
  color: #4A6478;
  background-color: #162330;
  border-color: var(--bs-border-color);
}

/* Buttons */
.btn-primary {
  background-color: #1B2B3B;
  border-color: var(--bs-border-color);
  color: #C8D8E8;
  --bs-btn-active-bg: #3AA4BE;
  --bs-btn-active-border-color: #3298B0;
  --bs-btn-active-color: #080E14;
  --bs-btn-focus-shadow-rgb: 75,184,212;
}
.btn-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #080E14;
}
.btn-primary:active { background-color: #3AA4BE; border-color: #3298B0; color: #080E14; }
.btn-warning {
  background-color: #D4A44B;
  border-color: #D4A44B;
  color: #080E14;
  --bs-btn-active-bg: #C4943B;
  --bs-btn-active-border-color: #B58630;
  --bs-btn-active-color: #080E14;
  --bs-btn-focus-shadow-rgb: 212,164,75;
}
.btn-warning:hover {
  background-color: #DEAF62;
  border-color: #DEAF62;
  color: #080E14;
}
.btn-warning:active { background-color: #C4943B; border-color: #B58630; color: #080E14; }

/* ===== Masthead + Floating Navbar ===== */

.twp-masthead {
  background: #111;
}
.twp-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--twp-masthead-overlay-start) 0%,
    var(--twp-masthead-overlay-end) 45%,
    rgba(0,0,0,0.00) 100%
  );
}

.twp-float-nav {
  background: transparent !important;
  border-bottom: none !important;
}
.twp-float-nav:not(.twp-nav-scrolled) .nav-link,
.twp-float-nav:not(.twp-nav-scrolled) .navbar-text {
  color: rgba(255,255,255,0.92) !important;
}
.twp-float-nav:not(.twp-nav-scrolled) .nav-link:hover {
  color: #ffffff !important;
}
.twp-float-nav:not(.twp-nav-scrolled) .navbar-toggler {
  border-color: rgba(255,255,255,0.55);
}
.twp-float-nav:not(.twp-nav-scrolled) .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}
.twp-float-nav.twp-nav-scrolled {
  background: rgba(8,14,20,0.98) !important;
  border-bottom: 3px solid var(--bs-primary) !important;
}
.twp-float-nav.twp-nav-scrolled .nav-link,
.twp-float-nav.twp-nav-scrolled .navbar-text {
  color: var(--bs-body-color) !important;
}
.twp-float-nav.twp-nav-scrolled .nav-link:hover {
  color: var(--bs-link-hover-color) !important;
}

/* ===== Home Hero ===== */
.hero-bg { background: linear-gradient(135deg, var(--twp-hero-gradient-start), var(--twp-hero-gradient-end)); }

/* ===== Portal Brand Buttons ===== */
.btn-outline-portal-orange {
  color: #e67e22;
  border-color: #e67e22;
  background-color: transparent;
}
.btn-portal-orange,
.btn-outline-portal-orange:hover,
.btn-portal-orange:active,
.btn-outline-portal-orange:active {
  color: #fff !important;
  background-color: #e67e22 !important;
  border-color: #e67e22 !important;
}
.btn-portal-orange:active,
.btn-outline-portal-orange:active {
  background-color: #c96a17 !important;
  border-color: #c96a17 !important;
}
.btn-portal-blue,
.btn-outline-portal-blue:hover {
  color: #fff !important;
}

/* ===== Download Listing Rows ===== */
.download-row {
  background-color: var(--bs-body-bg);
}

/* ===== Download Index Featured Card ===== */
.featured-card .bg-gradient {
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

/* ===== Download Comments ===== */
.comment-depth-0:nth-child(even) { background: var(--twp-comment-even-bg); }
.comment-depth-0:nth-child(odd)  { background: var(--twp-comment-odd-bg); }
.comment-child { border-left: 2px solid var(--bs-border-color); }
.comment-meta { color: var(--bs-secondary-color); }

/* ===== Screenshot Lightbox ===== */
.lightbox-thumb.border-primary,
.post-lightbox-thumb.border-primary {
  box-shadow: 0 0 10px rgba(75,184,212,0.9);
}

/* ===== Post Action Buttons ===== */
.post-action-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* ===== Mod Tools Modal ===== */
#modToolsModal .board-radio {
  border: 1px solid rgba(255,255,255,0.15);
}
#modToolsModal .board-radio:hover { background: rgba(255,255,255,0.05); }
#modToolsModal .board-meta .board-desc { color: var(--bs-secondary-color); }

/* ===== Emoji Accordion ===== */
.emoji-accordion .emoji-cell:hover { background: rgba(255,255,255,.06); }
.emoji-accordion pre { background: transparent; }

/* ===== Accents ===== */
.card-warning-accent { border-left-color: var(--bs-warning) !important; }

/* Breadcrumbs */
nav.small.mb-3 a {
  color: var(--bs-link-color);
}
nav.small.mb-3 a:hover {
  color: var(--bs-link-hover-color);
}

/* ===== Accordion ===== */
.accordion {
  --bs-accordion-color: #C8D8E8;
  --bs-accordion-bg: #162330;
  --bs-accordion-border-color: #253545;
  --bs-accordion-btn-color: #C8D8E8;
  --bs-accordion-btn-bg: #162330;
  --bs-accordion-active-color: #4BB8D4;
  --bs-accordion-active-bg: #0A1520;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(75,184,212,0.25);
}
.accordion-item {
  background-color: #162330;
  color: #C8D8E8;
}
/* Tint the active chevron icon cyan */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(65%) sepia(60%) saturate(400%) hue-rotate(165deg);
}

/* ===== Post Attachment Sections ===== */
.post-attachment-images,
.post-attachments {
  background-color: #121C28 !important;
  border-color: var(--bs-border-color) !important;
}
/* Alternating bg-white items inside attachment list */
.post-attachments .bg-white {
  background-color: #1B2B3B !important;
}

/* ===== Comment Meta (download detail) ===== */
.comment-meta { color: #7A9AB8; }
.comment-username { color: var(--bs-body-color); }

/* ===== Table Light (mod panel thead, etc.) ===== */
thead.table-light,
.table-light {
  --bs-table-bg: #0A1520;
  --bs-table-color: #4BB8D4;
  --bs-table-border-color: #253545;
  --bs-table-striped-bg: #0F1C2A;
  --bs-table-striped-color: #C8D8E8;
  --bs-table-hover-bg: #162330;
  --bs-table-hover-color: #C8D8E8;
  --bs-table-active-bg: #162330;
  --bs-table-active-color: #C8D8E8;
}

/* ===== Nav Tabs (user settings, mod nav) ===== */
.nav-tabs {
  --bs-nav-tabs-link-active-color: #4BB8D4;
  --bs-nav-tabs-link-active-bg: #162330;
  --bs-nav-tabs-link-active-border-color: #253545 #253545 #162330;
  border-color: #253545;
}
.nav-tabs .nav-link {
  color: #7A9AB8;
}
.nav-tabs .nav-link:hover {
  color: #C8D8E8;
  border-color: #253545 #253545 transparent;
}

/* ===== File Input Browse Button ===== */
.form-control::file-selector-button {
  background-color: #1B2B3B;
  color: #C8D8E8;
  border-color: #253545;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #1F3040;
  color: #C8D8E8;
}

/* ===== Alert Secondary ===== */
.alert-secondary {
  --bs-alert-color: #C8D8E8;
  --bs-alert-bg: #1B2B3B;
  --bs-alert-border-color: #253545;
}
