/* =========================================================================
   AdaptiveLUG brand + accessibility overlay for the Mailman web interface.
   Injected by nginx (sub_filter) into every page, so it layers on top of the
   stock Postorius/HyperKitty styles without modifying the container.

   Design intent (from the AdaptiveLUG brand pack):
     - Dark-first surfaces on deep neutrals, single orange accent.
     - Body text in Atkinson Hyperlegible (designed for low-vision legibility),
       with robust fallbacks so no external font request is required.
     - Larger base font, high-contrast links, and clear keyboard focus rings
       for assistive-technology users.
   ========================================================================= */

:root {
  --adlug-base:    #0F1216;
  --adlug-surface: #171B21;
  --adlug-raised:  #1E242C;
  --adlug-hair:    #2A313A;
  --adlug-text:    #F2F4F7;
  --adlug-muted:   #AAB3BD;
  --adlug-accent:  #F15A22;
  --adlug-ember:   #C2410C;
}

/* Base typography: prefer Atkinson Hyperlegible if present on the client,
   otherwise fall back to a clean, legible system sans stack. */
html, body {
  background-color: var(--adlug-base) !important;
  color: var(--adlug-text) !important;
  font-family: "Atkinson Hyperlegible", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 17px !important;       /* slightly larger base for readability */
  line-height: 1.6 !important;
}

/* Headings use a confident display feel but stay readable. */
h1, h2, h3, h4, h5, h6 {
  color: var(--adlug-text) !important;
  font-family: "Space Grotesk", "Atkinson Hyperlegible", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Cards, panels, navbars and wells onto the surface colours. */
.navbar, .navbar-default, .panel, .well, .card, .list-group-item,
.table, .dropdown-menu, footer, .footer {
  background-color: var(--adlug-surface) !important;
  color: var(--adlug-text) !important;
  border-color: var(--adlug-hair) !important;
}

.panel-heading, .card-header, thead, .table > thead > tr > th {
  background-color: var(--adlug-raised) !important;
  color: var(--adlug-text) !important;
  border-color: var(--adlug-hair) !important;
}

/* Tables: headers in the bright primary text, body cells in the calmer
   secondary tone so the tables are not a wall of bright white (the muted tone is
   still comfortably above the contrast minimum on our dark surfaces). */
.table th, table.table > thead > tr > th, thead th {
  color: var(--adlug-text) !important;
  border-color: var(--adlug-hair) !important;
}
.table td, table.table > tbody > tr > td, table.table > tbody > tr > th {
  color: var(--adlug-muted) !important;
  border-color: var(--adlug-hair) !important;
}
.table a { color: var(--adlug-accent) !important; }

/* AdaptiveLUG wordmark in place of the default "Postorius" / domain brand. */
.navbar-brand {
  font-size: 0 !important;          /* hide the default text label */
  display: inline-flex !important;
  align-items: center;
}
/* Hide the stock Mailman logo image and any icon (descendant, not just direct
   child - the image is nested inside a <span>). */
.navbar-brand img,
.navbar-brand svg,
.navbar-brand i { display: none !important; }
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 184px;
  height: 36px;
  background: url('/adlug/adlug-wordmark.svg') left center / contain no-repeat;
}

/* Dropdown menus (e.g. the account menu, top right): without this the items
   render in dark text on the dark surface and look like nothing happened. */
.dropdown-menu {
  background-color: var(--adlug-raised) !important;
  border: 1px solid var(--adlug-hair) !important;
}
.dropdown-item { color: var(--adlug-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--adlug-surface) !important;
  color: var(--adlug-accent) !important;
}
.dropdown-divider { border-top-color: var(--adlug-hair) !important; }
.dropdown-header { color: var(--adlug-muted) !important; }

/* Filter / toggle button groups (e.g. the list "Role:" filter): consistent
   outline style, with the active/selected button in the brand accent. */
.btn-group .btn,
.btn-secondary, .btn-outline-secondary,
.btn-outline-primary, .btn-light {
  background-color: transparent !important;
  border-color: var(--adlug-hair) !important;
  color: var(--adlug-text) !important;
}
.btn-group .btn:hover,
.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-light:hover,
.btn-group .btn.active, .btn-check:checked + .btn,
.btn.active, .btn-secondary.active,
.btn-outline-secondary.active, .btn-outline-primary.active,
.active > .btn {
  background-color: var(--adlug-accent) !important;
  border-color: var(--adlug-ember) !important;
  color: #0A0C0F !important;
}

/* Buttons are never underlined (the global link-hover underline made the
   "Create New List" hover look odd). */
.btn, a.btn, .btn:hover, a.btn:hover, .btn:focus {
  text-decoration: none !important;
}

/* Links: brand accent, distinguished by colour; underline on hover only (the
   blanket underline looked heavy in nav bars and forms). Exclude .btn so the
   link-focus colour never bleeds onto button text (which made a focused
   "Create New List" turn invisible orange-on-orange). */
a:not(.btn), a:not(.btn):visited {
  color: var(--adlug-accent) !important;
  text-decoration: none;
}
a:not(.btn):hover, a:not(.btn):focus {
  color: #FF8A5C !important;          /* lighter ember on hover */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Button text stays legible in every state (focus/active included). */
.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
a.btn-primary, a.btn-primary:focus, a.btn-primary:active {
  color: #0A0C0F !important;
}

/* Active tabs / pills / list items: Bootstrap defaults these to blue; use the
   brand accent instead (appears in both Postorius and HyperKitty). */
.nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.list-group-item.active, .page-item.active .page-link {
  background-color: var(--adlug-accent) !important;
  border-color: var(--adlug-ember) !important;
  color: #0A0C0F !important;
}
.nav-tabs .nav-link.active {
  background-color: var(--adlug-surface) !important;
  color: var(--adlug-accent) !important;
  border-color: var(--adlug-hair) var(--adlug-hair) var(--adlug-surface) !important;
}

/* The account avatar button: drop the heavy solid-orange box; show just the
   avatar with a subtle outline. */
.user-button, .btn.user-button {
  background-color: transparent !important;
  border-color: var(--adlug-hair) !important;
  color: var(--adlug-text) !important;
}
.user-button:hover, .user-button:focus, .show > .user-button,
.btn-primary.user-button:hover, .btn-primary.user-button:focus {
  background-color: var(--adlug-raised) !important;
  border-color: var(--adlug-hair) !important;
}

/* Checkboxes / radios and focus glow: brand accent instead of Bootstrap blue. */
.form-check-input:checked {
  background-color: var(--adlug-accent) !important;
  border-color: var(--adlug-ember) !important;
}
.form-check-input:focus, .form-control:focus, .form-select:focus,
.btn:focus, .btn:focus-visible, .nav-link:focus {
  border-color: var(--adlug-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(241, 90, 34, 0.35) !important;
}

/* Bootstrap "primary" helpers used dotted around both apps. */
.text-primary { color: var(--adlug-accent) !important; }
.bg-primary { background-color: var(--adlug-accent) !important; }
a.link-primary { color: var(--adlug-accent) !important; }

/* -------------------------------------------------------------------------
   Badges / status pills - per the brand guidelines these are dark-background
   with coloured text (not solid bright fills), which also fixes the low
   contrast of the stock yellow count badges.
   ------------------------------------------------------------------------- */
.badge.bg-primary   { background-color: var(--adlug-accent) !important; color: #0A0C0F !important; }
.badge.bg-warning   { background-color: #3A2415 !important; color: #FF9D6E !important; }
.badge.bg-info      { background-color: #13243D !important; color: #74A9F0 !important; }
.badge.bg-success   { background-color: #143226 !important; color: #56D39A !important; }
.badge.bg-danger    { background-color: #3A2415 !important; color: #FF8A5C !important; }
.badge.bg-secondary { background-color: var(--adlug-raised) !important; color: var(--adlug-muted) !important; }

/* Brand semantic text colours (tick = green, cross = warm orange; no red). */
.text-success { color: #56D39A !important; }
.text-danger, .text-warning { color: #FF8A5C !important; }
.text-info { color: #74A9F0 !important; }

/* -------------------------------------------------------------------------
   HyperKitty list table: the stock theme gives rows a light background, which
   leaves our light text unreadable. Force the dark surfaces.
   ------------------------------------------------------------------------- */
tr.list, table tr.list, .list-group-item {
  background-color: var(--adlug-surface) !important;
  color: var(--adlug-muted) !important;
}
tr.list td, tr.list th {
  color: var(--adlug-muted) !important;
  border-color: var(--adlug-hair) !important;
}
tr.list:hover, table tr.list:hover, .list-group-item:hover {
  background-color: var(--adlug-raised) !important;
}

/* HyperKitty active sort tab uses a blue underline; recolour to the accent. */
span.active { border-bottom-color: var(--adlug-accent) !important; }

/* HyperKitty search (magnifier) button defaults to light blue. */
.search-button, .btn.search-button {
  background-color: var(--adlug-accent) !important;
  border-color: var(--adlug-ember) !important;
  color: #0A0C0F !important;
}

/* -------------------------------------------------------------------------
   Destructive buttons: the brand has no red, so use its warm "negative"
   treatment (dark-brown ground + warm-orange text) instead of Bootstrap red.
   Also stop button-styled links inheriting the orange link colour.
   ------------------------------------------------------------------------- */
.btn-danger, a.btn-danger {
  background-color: #3A2415 !important;
  border-color: var(--adlug-ember) !important;
  color: #FF8A5C !important;
}
.btn-danger:hover, a.btn-danger:hover, .btn-danger:focus {
  background-color: #4A2D18 !important;
  color: #FFB088 !important;
}
a.btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  color: var(--adlug-text) !important;
}
a.btn-primary { color: #0A0C0F !important; }

/* Primary buttons in the brand accent with accessible contrast. */
.btn-primary, .btn-success {
  background-color: var(--adlug-accent) !important;
  border-color: var(--adlug-ember) !important;
  color: #0A0C0F !important;          /* dark text on orange = high contrast */
  font-weight: 600;
}
.btn-primary:hover, .btn-success:hover {
  background-color: var(--adlug-ember) !important;
  color: #FFFFFF !important;
}

.btn-default, .btn-secondary {
  background-color: var(--adlug-raised) !important;
  border-color: var(--adlug-hair) !important;
  color: var(--adlug-text) !important;
}

/* Form fields readable on dark (but leave native checkboxes/radios alone). */
input:not([type="radio"]):not([type="checkbox"]),
select, textarea, .form-control, .form-select {
  background-color: var(--adlug-raised) !important;
  color: var(--adlug-text) !important;
  border-color: var(--adlug-hair) !important;
}
::placeholder { color: var(--adlug-muted) !important; }

/* Native radios/checkboxes (Postorius uses unclassed inputs): brand accent
   instead of the browser default blue. */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--adlug-accent) !important;
}

/* Muted/secondary text still meets contrast on the dark base. */
.text-muted, small, .help-block { color: var(--adlug-muted) !important; }

/* Code and monospace (JetBrains Mono per the brand, with fallbacks). */
code, pre, kbd, samp, .mono {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace !important;
  background-color: #0A0C0F !important;
  color: #E8EAED !important;
}

/* Strong, visible keyboard focus for accessibility. Never remove the outline. */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
.btn:focus, [tabindex]:focus {
  outline: 3px solid var(--adlug-accent) !important;
  outline-offset: 2px !important;
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}