/* ============================================================
   UGA projects — dark theme
   ------------------------------------------------------------
   The catalog / detail / dashboard / edit pages were authored in
   a light palette (nx-* + project-* rules in main.css use a mix
   of var() tokens and hard-coded light hex values).

   This file flips those pages to the same dark design used by the
   docs and forum sections. It works in two layers:

   1. Re-declare the design tokens inside each project page wrapper
      so every var(--xxx) reference in the existing rules resolves
      to a dark value automatically.
   2. Override the rules that use hard-coded light hex colors
      (#fff, #f4f6f9, #dde3ec, …) which the token layer can't reach.

   Scoped to .projects-dark-page (set via {% block body_class %})
   so no other pages — and crucially the shared navbar/footer — are
   affected.
   ============================================================ */

/* ── Page background — kills white gaps below short content ── */
.projects-dark-page {
  background: var(--bg-dark);
}

/* ── Dark scrolled navbar (matches docs / forum) ───────────── */
.projects-dark-page .navbar.scrolled {
  background: rgba(11,15,30,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* More breathing room between author header and project grid on the author page */
.projects-dark-page .nx-author-page .nx-author-header {
  margin-bottom: 2.5rem;
}

/* Language switcher — dark background on dark pages */
.projects-dark-page .lang-trigger {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
}
.projects-dark-page .lang-trigger:hover,
.projects-dark-page .lang-menu.open .lang-trigger {
  background: rgba(255,255,255,.14);
  border-color: rgba(0,199,183,.55);
  color: #fff;
}
.projects-dark-page .lang-menu-list {
  background: #111729;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
}
.projects-dark-page .lang-option { color: rgba(248,250,252,.88); }
.projects-dark-page .lang-option small { color: rgba(248,250,252,.48); }

/* Keep navbar text light once scrolled — the global .scrolled state
   falls back to the dark var(--text-muted), which is unreadable on
   the dark frosted bar. */
.projects-dark-page .navbar.scrolled .navbar-nav a { color: rgba(255,255,255,.72); }
.projects-dark-page .navbar.scrolled .navbar-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.projects-dark-page .navbar.scrolled .nav-login { color: rgba(255,255,255,.8); }
.projects-dark-page .navbar.scrolled .nav-login:hover { color: #fff; }
.projects-dark-page .navbar.scrolled .nav-user-btn { color: rgba(255,255,255,.85); }
.projects-dark-page .navbar.scrolled .nav-user-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.projects-dark-page .navbar.scrolled .nav-chevron { color: rgba(255,255,255,.6); }
.projects-dark-page .navbar.scrolled .hamburger span { background: #fff; }

/* ── Token layer ──────────────────────────────────────────────
   Re-define the tokens inside the project wrappers. Children that
   reference var(--xxx) inherit these dark values automatically.
   .nx-catalog-page  → list / saved / author catalog pages
   .nx-tab-pane      → project detail content tabs
   .section          → my-projects dashboard / edit form sections
   (.nx-detail-header + .nx-tab-bar are already dark in main.css)
   ──────────────────────────────────────────────────────────── */
.projects-dark-page .nx-catalog-page,
.projects-dark-page .nx-tab-pane,
.projects-dark-page .section {
  --bg:                     #0b0f1e;
  --bg-subtle:              #131929;
  --bg-card:                #131929;
  --border:                 rgba(255,255,255,.09);
  --border-subtle:          rgba(255,255,255,.05);
  --text:                   #e8edf5;
  --text-muted:             #91a0b8;
  --text-light:             #61708b;
  --accent-on-light:        #00c7b7;
  --accent-on-light-soft:   rgba(0,199,183,.10);
  --accent-on-light-border: rgba(0,199,183,.25);
  --shadow-xs:              0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:              0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:              0 12px 32px rgba(0,0,0,.5);
  /* Re-anchor the inherited text color here. body{color:var(--text)}
     is computed at <body>, where the tokens above are NOT in scope, so
     plain text (e.g. version <strong>, comment bodies) would otherwise
     inherit the light-theme dark color and vanish on the dark bg. */
  color: var(--text);
}

/* ============================================================
   CATALOG  (project_list / saved_projects / author_projects)
   ============================================================ */
.projects-dark-page .nx-catalog-page,
.projects-dark-page .nx-catalog {
  background: #0b0f1e;
}

/* Panels: sidebar, top bar, cards, headers, empty state, pager */
.projects-dark-page .nx-sidebar,
.projects-dark-page .nx-topbar,
.projects-dark-page .nx-card,
.projects-dark-page .nx-author-header,
.projects-dark-page .nx-saved-header,
.projects-dark-page .nx-sidebar-toggle,
.projects-dark-page .nx-page-btn {
  background: #131929;
  border-color: rgba(255,255,255,.09);
}

.projects-dark-page .nx-empty-grid {
  background: #131929;
  border-color: rgba(255,255,255,.12);
  color: var(--text-muted);
}

.projects-dark-page .nx-sidebar-section {
  border-bottom-color: rgba(255,255,255,.06);
}

/* Inputs / selects */
.projects-dark-page .nx-sidebar-input,
.projects-dark-page .nx-topbar-select {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
  color: var(--text);
}
.projects-dark-page .nx-sidebar-input::placeholder { color: var(--text-light); }
.projects-dark-page .nx-sidebar-input:focus {
  border-color: var(--accent-on-light);
  background: rgba(0,199,183,.05);
}

/* Cards */
.projects-dark-page .nx-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  border-color: var(--accent-on-light-border);
}
.projects-dark-page .nx-card-save {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.09);
}
.projects-dark-page .nx-card-save:hover,
.projects-dark-page .nx-card-save-active {
  background: var(--accent-on-light-soft);
  border-color: var(--accent-on-light-border);
  color: var(--accent-on-light);
}
.projects-dark-page .nx-card-stats {
  border-top-color: rgba(255,255,255,.06);
}

/* Pagination current page — dark text on the bright accent */
.projects-dark-page .nx-page-current,
.projects-dark-page .nx-page-current:hover {
  background: var(--accent-on-light);
  border-color: var(--accent-on-light);
  color: #001916;
}

/* ============================================================
   DETAIL  (project_detail)
   .nx-detail-header / .nx-tab-bar are already dark in main.css.
   Only the content tabs below need darkening.
   ============================================================ */
.projects-dark-page .nx-tab-pane {
  background: #0b0f1e;
}

.projects-dark-page .nx-content-panel {
  background: #131929;
  border-color: rgba(255,255,255,.09);
}

.projects-dark-page .nx-version-row:hover {
  background: #172033;
}

.projects-dark-page .nx-cmt-avatar-has-image {
  background: #131929;
}

.projects-dark-page .nx-form-message {
  color: #fca5a5;
}

/* Comment compose box (rendered textarea, .project-comment-box) */
.projects-dark-page .project-comment-box {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
  color: var(--text);
}
.projects-dark-page .project-comment-box::placeholder { color: var(--text-light); }
.projects-dark-page .project-comment-box:focus {
  outline: none;
  border-color: var(--accent-on-light);
}

/* ============================================================
   DASHBOARD + EDIT  (my_projects / project_edit)
   .project-hero is already dark; only the .section below is light.
   ============================================================ */
.projects-dark-page .section {
  background: transparent;
}

.projects-dark-page .project-dashboard-row,
.projects-dark-page .project-empty {
  background: #131929;
  border-color: rgba(255,255,255,.09);
}

.projects-dark-page .project-version-row button {
  color: #fca5a5;
}
.projects-dark-page .project-version-row button:hover {
  color: #fecaca;
}

/* Edit form fields (.project-input / .project-editor textarea) */
.projects-dark-page .project-input,
.projects-dark-page .project-editor {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
  color: var(--text);
}
.projects-dark-page .project-input::placeholder,
.projects-dark-page .project-editor::placeholder { color: var(--text-light); }
.projects-dark-page .project-input:focus,
.projects-dark-page .project-editor:focus {
  outline: none;
  border-color: var(--accent-on-light);
}
.projects-dark-page .project-input option {
  background: #131929;
  color: var(--text);
}

/* ============================================================
   CKEditor (description editor on the edit page) — kept on a
   light editing surface for legibility, same as the forum.
   ============================================================ */
.projects-dark-page .ck.ck-toolbar {
  border-color: rgba(255,255,255,.09) !important;
  background: #e8edf5 !important;
}
.projects-dark-page .ck.ck-editor__main > .ck-editor__editable {
  min-height: 240px;
  border-color: rgba(255,255,255,.09) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  line-height: 1.65;
}
.projects-dark-page .ck-content a { color: #007f78; }