/* Theme Chrome — Dark mode overrides for navbar, sidebar, footer, etc.
   Light mode uses original CSS unchanged. */

[data-theme="dark"] {
  /* Navbar */
  .navbar,
  .navbar .navbar-logo,
  .header-navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    border-bottom-color: var(--border-subtle);
  }

  .navbar .navbar-wrapper,
  .header-navbar .navbar-wrapper {
    background-color: var(--navbar-bg);
  }

  .navbar a,
  .header-navbar a {
    color: var(--navbar-text);
  }

  /* Horizontal navbar (pcoded) */
  .pcoded .pcoded-navbar .pcoded-item > li > a {
    color: var(--navbar-text) !important;
  }

  .pcoded .pcoded-navbar .pcoded-item > li > a:hover {
    color: var(--navbar-text);
  }

  /* Sidebar */
  .pcoded-navbar,
  .pcoded-inner-navbar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
  }

  .pcoded-navbar .pcoded-item > li > a,
  .pcoded-inner-navbar a {
    color: var(--sidebar-text);
  }

  .pcoded-navbar .pcoded-item > li > a:hover {
    background-color: var(--row-hover);
  }

  /* Footer + body rules — see the top-level [data-theme="dark"] block at
     the bottom of the file. CSS Nesting Level 1 drops rules whose selector
     starts with a bare element name, so `footer { ... }` / `body { ... }`
     inside this block were silently ignored. */

  .pcoded-main-container {
    background-color: var(--bg-base);
  }

  .pcoded-wrapper .pcoded-content {
    background-color: var(--bg-base);
  }

  .pcoded-inner-content {
    background-color: var(--bg-base);
  }

  .main-body {
    background-color: var(--bg-base);
  }

  .page-wrapper {
    background-color: var(--bg-base);
  }

  /* Pre-loader (theme-loader) */
  .theme-loader {
    background-color: var(--bg-base);
  }
}

/* Bare-element selectors lifted out of the nested block above so the
   parser actually applies them. */
[data-theme="dark"] body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

[data-theme="dark"] footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] footer a {
  color: var(--footer-text);
  opacity: 0.8;
}

[data-theme="dark"] footer a:hover {
  opacity: 1;
}