#theme-indicator {
  cursor: pointer; }

.pcoded-header label {
  color: #3f4d67; }

body.dark {
  background-color: #082032;
  color: white !important; }
  body.dark .pcoded-navbar, body.dark .navbar-brand {
    background-color: #2C394B; }
  body.dark .icon, body.dark a, body.dark span, body.dark p, body.dark .feather,
  body.dark .pcoded-header .input-group .input-group-text, body.dark .pcoded-header a, body.dark .pcoded-header dropdown-toggle {
    color: white; }
  body.dark .pcoded-header .main-search.open .input-group {
    background-color: #2C394B;
    color: white; }
  body.dark .pcoded-header .main-search.open .input-group .form-control {
    color: white; }
  body.dark .pcoded-header .dropdown .dropdown-menu {
    background-color: #2C394B; }
  body.dark .pcoded-header .dropdown.show:before {
    color: #2C394B; }
  body.dark .pcoded-header .dropdown .profile-notification .pro-head {
    background-color: #082032; }
  body.dark .pcoded-header .dropdown.drp-user.show:before {
    color: #082032 !important; }
  body.dark .pcoded-header .dropdown .dropdown-menu li:hover a {
    color: white; }
  body.dark .pcoded-header .dropdown .profile-notification .pro-body li a {
    color: white; }
  body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
    color: white !important; }
  body.dark .text-muted {
    color: #d0d0d0 !important; }
  /* Bootstrap's .bg-white/.bg-light utilities are hardcoded light colours
     regardless of theme. Used inside a body.dark .card (which forces its
     own text white), an untouched .bg-white/.bg-light box is white/light
     text on a light background — unreadable. */
  body.dark .bg-white {
    background-color: #2C394B !important; }
  body.dark .bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: white !important; }
  body.dark .page-header-title + .breadcrumb > .breadcrumb-item:last-child a {
    color: rgba(255, 255, 255, 0.63) !important; }
  body.dark .breadcrumb {
    background-color: #082032;
    color: white; }
    body.dark .breadcrumb .breadcrumb-item.active {
      color: white; }
  body.dark .page-item .page-link {
    background-color: #082032;
    border-color: #082032; }
  body.dark .page-item .page-link {
    border-color: #334756; }
  body.dark .nav-pills {
    background-color: #2C394B;
    border-color: #082032; }
    body.dark .nav-pills .nav-link.active, body.dark .nav-pills .nav-pills .show > .nav-link {
      background-color: #082032; }
  body.dark .custom-select,
  body.dark .form-control,
  body.dark .input-group-prepend,
  body.dark .input-group-append {
    background-color: rgba(8, 32, 50, 0.8);
    border-color: #2C394B !important;
    color: white; }
    body.dark .custom-select span,
    body.dark .form-control span,
    body.dark .input-group-prepend span,
    body.dark .input-group-append span {
      border-color: #2C394B !important; }
  body.dark .input-group {
    background-color: transparent; }
  body.dark .form-inline .form-control-plaintext {
    color: #bbbbbb; }
  body.dark .card .card-block, body.dark .card .card-body, body.dark .card {
    background-color: #2C394B;
    color: white !important; }
  body.dark .card .card-header {
    background-color: #2C394B;
    border-bottom: 1px solid #334756; }
  body.dark .table thead th {
    border-top: 1px solid #334756; }
  body.dark .table td, body.dark .table th {
    border-bottom: 1px solid #334756; }
  body.dark .border-bottom {
    border-bottom: 1px solid #334756 !important; }
  body.dark .nav-tabs .nav-item.show .nav-link,
  body.dark .nav-tabs .nav-link.active,
  body.dark .tab-content {
    background-color: #2C394B;
    color: white !important; }
  body.dark .pcoded-header {
    background-color: #082032; }
  body.dark .pcoded-header > .collapse:not(.show) {
    background-color: #2C394B; }
  body.dark .pcoded-header .main-search.open .input-group .search-close {
    background-color: transparent; }


/* ============================================================
   PLAIN BOOTSTRAP MODALS
   ============================================================
   Later pages (System Administration, Meetings, Practical Templates,
   Publications, Research Projects, SOP Library, the equipment usage
   log) each give their popup its own wrapper class that redeclares a
   full set of colour tokens, because a Bootstrap modal is rendered as
   a sibling of the page's root container, not a descendant of it — so
   it never sees that page's own scoped CSS variables.

   Every OTHER modal in the app — Equipment, Glassware, Laboratory
   Requests, Reagents, Stock Chemicals, Procurement Proposals, Supplier
   Directory, Module Allocations, Laboratories Management, Location
   Equipment/Glassware, Lab Deletion Approvals, and the notification
   detail popup — is a bare .modal-content that never got that
   treatment. Its background never changes in dark mode (nothing here
   touches it), while the "a, span, p, .feather" rule above forces
   every span and paragraph inside it to white, and every <label> (not
   in that list, but with no colour of its own) inherits the same
   white from body{color:white!important} above. The combined result:
   a modal that opens onto a still-white dialog with white text on it —
   effectively blank.

   Fixed once here for every modal that is NOT one of the already-themed
   ones (the :not() list), rather than repeating the same handful of
   rules across a dozen more page stylesheets. Labels, headings and
   plain text inside these modals need no rule of their own: once the
   background below is dark, the white colour they already had (via
   the exact inheritance chain that broke them against a white
   background) becomes the correct colour instead. */
body.dark .modal:not(.ma-modal):not(.mtg-modal):not(.pt-modal):not(.pub-modal):not(.rp-modal):not(.sop-modal):not(.ueq-modal) .modal-content {
  background-color: #18212b;
  border-color: #2c3a48;
  color: #f4f7fa;
}

body.dark .modal:not(.ma-modal):not(.mtg-modal):not(.pt-modal):not(.pub-modal):not(.rp-modal):not(.sop-modal):not(.ueq-modal) .modal-header,
body.dark .modal:not(.ma-modal):not(.mtg-modal):not(.pt-modal):not(.pub-modal):not(.rp-modal):not(.sop-modal):not(.ueq-modal) .modal-footer {
  border-color: #2c3a48;
}

/* Bootstrap's default .close sets its own black colour with a white
   text-shadow (for the &times; glyph), which the span rule above
   already turns white when it fires — but the leftover white shadow
   would blur a now-white glyph against a dark header, so it is
   dropped here specifically for these modals. */
body.dark .modal:not(.ma-modal):not(.mtg-modal):not(.pt-modal):not(.pub-modal):not(.rp-modal):not(.sop-modal):not(.ueq-modal) .close {
  text-shadow: none;
  opacity: .85;
}

/* ============================================================
   PLAIN BOOTSTRAP BUTTONS
   ============================================================
   Bootstrap's own outline/light/secondary button variants — used
   throughout the app for "Cancel", "Clear filters" and secondary
   actions — keep their light-mode background and border in dark mode,
   because nothing here or in any page stylesheet touches them (unlike
   .btn-primary/.btn-danger/etc, whose solid, self-contained colour
   pairing already reads fine against either background). They are not
   illegible — Bootstrap gives each an explicit colour, so nothing
   forces them white-on-white the way the modal text above was — but
   they sit as flat light rectangles on an otherwise dark page. Retinted
   here, once, for the whole app. */
body.dark .btn-light,
body.dark .btn-light:not(:disabled):not(.disabled) {
  color: #eef3f7;
  background-color: #232f3a;
  border-color: #35434f;
}
body.dark .btn-light:hover {
  color: #eef3f7;
  background-color: #2c3a48;
  border-color: #3f4f5c;
}

body.dark .btn-secondary {
  color: #eef3f7;
  background-color: #46525c;
  border-color: #46525c;
}
body.dark .btn-secondary:hover {
  background-color: #525f6a;
  border-color: #525f6a;
}

body.dark .btn-outline-secondary {
  color: #b8c4cf;
  border-color: #46525c;
}
body.dark .btn-outline-secondary:hover {
  color: #eef3f7;
  background-color: #2c3a48;
  border-color: #46525c;
}

body.dark .btn-outline-primary {
  color: #75baff;
  border-color: #2f5a86;
}
body.dark .btn-outline-primary:hover {
  color: #0d131a;
  background-color: #75baff;
  border-color: #75baff;
}

body.dark .btn-outline-danger {
  color: #ff8a93;
  border-color: #7a3237;
}
body.dark .btn-outline-danger:hover {
  color: #0d131a;
  background-color: #ff8a93;
  border-color: #ff8a93;
}

body.dark .btn-outline-success {
  color: #3ecf8e;
  border-color: #2a5f45;
}
body.dark .btn-outline-warning {
  color: #e0a63f;
  border-color: #6b5326;
}
body.dark .btn-outline-info {
  color: #63c2de;
  border-color: #2c5866;
}
body.dark .btn-outline-light {
  color: #eef3f7;
  border-color: #46525c;
}
body.dark .btn-outline-dark {
  color: #b8c4cf;
  border-color: #46525c;
}


/* ============================================================
   FLASH MESSAGE BANNERS (Django's {{ messages }})
   ============================================================
   The success/error/warning banners shown at the top of nearly every
   page keep Bootstrap's own pastel background in dark mode — nothing
   here touches .alert-success/.alert-danger/etc, so the banner itself
   stays legible without any help. Its dismiss button is the same story
   as the modal close button above, though: the × is a plain <span>,
   which the rule near the top of this file forces white regardless of
   what is behind it — invisible against a banner that never stopped
   being pastel-light. Restored here specifically for alerts. */
body.dark .alert .close,
body.dark .alert .close span {
  color: #1d2d3e;
  text-shadow: none;
  opacity: .55;
}
body.dark .alert .close:hover,
body.dark .alert .close:hover span {
  opacity: .85;
}


/* ============================================================
   CHECKBOXES, RADIOS AND TOGGLE SWITCHES
   ============================================================
   Bootstrap's .custom-control (used for every "Active account" /
   "Critical announcement" style toggle and every plain checkbox
   across the app) draws its unchecked state as a white box with a
   grey border via .custom-control-label::before. Nothing anywhere in
   this app retints that for dark mode, so every one of these controls
   sits as a small white square or pill on an otherwise dark form —
   visible, not illegible, but the one obviously wrong-coloured piece
   left on an otherwise dark page. The checked state already reads
   fine (it fills with the same blue used everywhere), so only the
   unchecked box/pill and the focus ring need a dark equivalent. */
body.dark .custom-control-label::before {
  background-color: #232f3a;
  border-color: #46525c;
}
body.dark .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(76, 154, 239, 0.25);
}
body.dark .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #18212b;
}

/* Form validation feedback (server-side errors rendered on a field). */
body.dark .invalid-feedback {
  color: #ff8a93;
}
body.dark .is-invalid,
body.dark .form-control.is-invalid,
body.dark .custom-select.is-invalid {
  border-color: #ff8a93 !important;
}