/* UVLists Mailman theme. Managed by Ansible and loaded after Bootstrap 5.3,
   Postorius, and HyperKitty. The --uv-* tokens are the source of truth. */
:root {
  --uv-primary: #00693e;
  --uv-primary-hover: #005230;
  --uv-primary-active: #003f25;
  --uv-on-primary: #ffffff;
  --uv-nav-bg: #12312b;
  --uv-nav-text: #ffffff;
  --uv-nav-hover-bg: #00693e;
  --uv-page-bg: #f4f7f5;
  --uv-surface: #ffffff;
  --uv-surface-subtle: #edf3ef;
  --uv-selected-bg: #ddede3;
  --uv-text: #202b25;
  --uv-text-muted: #53645a;
  --uv-heading: #12312b;
  --uv-link: #00693e;
  --uv-link-hover: #005230;
  --uv-border: #d2ddd6;
  --uv-input-border: #788a7e;
  --uv-focus: #005ea8;
  --uv-success: #00693e;
  --uv-success-bg: #e7f3eb;
  --uv-info: #175b82;
  --uv-info-bg: #eaf3f9;
  --uv-warning: #765200;
  --uv-warning-bg: #fff4d6;
  --uv-danger: #a12635;
  --uv-danger-hover: #811e2a;
  --uv-danger-bg: #fbecef;
  --uv-disabled-bg: #e5ebe7;
  --uv-disabled-text: #64736a;

  /* Bootstrap aliases keep third-party components on the same tokens. */
  --bs-body-color: var(--uv-text);
  --bs-body-bg: var(--uv-page-bg);
  --bs-heading-color: var(--uv-heading);
  --bs-primary: var(--uv-primary);
  --bs-primary-rgb: 0, 105, 62;
  --bs-link-color: var(--uv-link);
  --bs-link-color-rgb: 0, 105, 62;
  --bs-link-hover-color: var(--uv-link-hover);
  --bs-link-hover-color-rgb: 0, 82, 48;
  --bs-border-color: var(--uv-border);
  --bs-secondary-color: var(--uv-text-muted);
  --bs-focus-ring-color: rgba(0, 94, 168, 0.35);
}

body { background: var(--uv-page-bg); color: var(--uv-text); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--uv-heading); }
a { color: var(--uv-link); }
a:hover { color: var(--uv-link-hover); }
/* HyperKitty and Bootstrap have higher-specificity white hover rules for
   several components. Reassert green for ordinary links on light surfaces,
   while leaving navigation, buttons, badges, and destructive links alone. */
body a[href]:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.text-white):not([href*="delete"]):hover,
body a[href]:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge):not(.text-white):not([href*="delete"]):focus-visible {
  color: var(--uv-link-hover);
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .16em;
}
.email-body a, .help-block a, .form-text a, .alert a, main p a {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}
.text-muted, .help-block, .form-text, .description, .list-address,
.list-stats, .email-date, .thread-titles, small { color: var(--uv-text-muted) !important; }

/* Navigation */
header.navbar, nav#navbar-main {
  background: var(--uv-nav-bg);
  color: var(--uv-nav-text);
  border: 0;
  box-shadow: 0 2px 5px rgba(18, 49, 43, .2);
}
header.navbar .navbar-brand, header.navbar .nav-link, header.navbar .navbar-toggler,
header.navbar .fa-bars, nav#navbar-main .navbar-brand, nav#navbar-main .nav-link,
nav#navbar-main .navbar-header > a { color: var(--uv-nav-text); }
header.navbar .navbar-brand:hover, header.navbar .navbar-brand:focus,
nav#navbar-main .navbar-brand:hover, nav#navbar-main .navbar-brand:focus,
nav#navbar-main .navbar-header > a:hover, nav#navbar-main .navbar-header > a:focus {
  color: var(--uv-selected-bg);
  text-decoration: none;
}
header.navbar .nav-link, nav#navbar-main .nav-link { border-bottom: 3px solid transparent; }
header.navbar .nav-link:hover, header.navbar .nav-link:focus,
header.navbar .nav-link.active, header.navbar .nav-item.active > .nav-link,
nav#navbar-main .nav-link:hover, nav#navbar-main .nav-link:focus,
nav#navbar-main .nav-link.active, nav#navbar-main .nav-item.active > .nav-link {
  background: var(--uv-nav-hover-bg);
  color: var(--uv-nav-text);
  border-bottom-color: var(--uv-on-primary);
}
header.navbar .dropdown-menu, nav#navbar-main .dropdown-menu {
  background: var(--uv-surface);
  border-color: var(--uv-border);
}
.dropdown-item { color: var(--uv-text); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active {
  background: var(--uv-selected-bg);
  color: var(--uv-primary-active);
}
@media (max-width: 767.98px) {
  header.navbar .navbar-collapse, nav#navbar-main .navbar-collapse {
    padding: .5rem;
    background: var(--uv-nav-bg);
  }
}

/* Surfaces and archive messages */
.card, .panel, .list-group, .dropdown-menu, .modal-content, .allauth-content, .email {
  background-color: var(--uv-surface);
  border-color: var(--uv-border);
}
.card-header, .card-footer, .panel-heading, .panel-footer, .well,
.thread-list-header, .email-info, .attachments, blockquote, .quoted-switch,
.side-nav, .list-group-item-secondary {
  background-color: var(--uv-surface-subtle);
  border-color: var(--uv-border);
}
.email { border: 1px solid var(--uv-border); box-shadow: none; }
.email + .email, .replies .email { margin-top: .75rem; }
.email-header, .email-info { border-color: var(--uv-border); }
.email-body { background: var(--uv-surface); color: var(--uv-text); }
.email-body, .email-header, .thread-header, .thread-title, .list-description {
  overflow-wrap: anywhere;
}
.email-body img, .email-body video { max-width: 100%; height: auto; }
.email-body pre {
  max-width: 100%;
  overflow-x: auto;
  padding: .75rem;
  border: 1px solid var(--uv-border);
  border-radius: .25rem;
  background: var(--uv-surface-subtle);
}
.email-body table { display: block; max-width: 100%; overflow-x: auto; }
.email-body blockquote, .email-body .quoted-text {
  color: var(--uv-text-muted);
  border-left: 4px solid var(--uv-border);
  padding-left: 1rem;
}
.email.unread { border-left: 5px solid var(--uv-primary); }
.email.unread .email-header { background: var(--uv-selected-bg); }
.anchor-link, :target { scroll-margin-top: 5rem; }
hr, .dropdown-divider { border-color: var(--uv-border); opacity: 1; }

/* HyperKitty stores the HTML alternative as a synthetic attachment. Hide it
   even without JavaScript; archive-attachments.js handles empty wrappers and
   safe previews for genuine raster-image attachments. */
.attachments-list li:has(> a[href$="/attachment.html"]) { display: none; }
.inline-attachment-preview { margin: .65rem 0 .25rem; }
.inline-attachment-preview img {
  display: block;
  max-width: 100%;
  max-height: 32rem;
  width: auto;
  height: auto;
  border: 1px solid var(--uv-border);
  border-radius: .25rem;
  background: var(--uv-surface);
}

/* Keep thread navigation usable when subjects and addresses are long. */
.thread-header > .d-flex { gap: .75rem; align-items: flex-start; }
.thread-header > .d-flex > .flex-grow-1 { min-width: 0; text-align: center; }
.thread-header h3 { margin-top: 0; }
.email-author, .email-author .name, .email-author .address { min-width: 0; }
@media (max-width: 767.98px) {
  .thread-header > .d-flex { align-items: center; }
  .thread-header h3 { font-size: 1.25rem; margin-bottom: 0; }
  .email { border-radius: 0; }
  .email-header, .email-body, .email-info { padding-left: .75rem; padding-right: .75rem; }
  .reply-level-1, .reply-level-2, .reply-level-3, .reply-level-4,
  .reply-level-5, .reply-level-6, .reply-level-7, .reply-level-8 {
    margin-left: 0 !important;
  }
}

/* Buttons */
.btn-primary {
  --bs-btn-color: var(--uv-on-primary); --bs-btn-bg: var(--uv-primary);
  --bs-btn-border-color: var(--uv-primary); --bs-btn-hover-color: var(--uv-on-primary);
  --bs-btn-hover-bg: var(--uv-primary-hover); --bs-btn-hover-border-color: var(--uv-primary-hover);
  --bs-btn-active-color: var(--uv-on-primary); --bs-btn-active-bg: var(--uv-primary-active);
  --bs-btn-active-border-color: var(--uv-primary-active); --bs-btn-disabled-color: var(--uv-disabled-text);
  --bs-btn-disabled-bg: var(--uv-disabled-bg); --bs-btn-disabled-border-color: var(--uv-input-border);
  color: var(--uv-on-primary) !important;
  background-color: var(--uv-primary) !important;
  border-color: var(--uv-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  color: var(--uv-on-primary) !important;
  background-color: var(--uv-primary-hover) !important;
  border-color: var(--uv-primary-hover) !important;
}
.btn-primary:active, .btn-primary.active {
  color: var(--uv-on-primary) !important;
  background-color: var(--uv-primary-active) !important;
  border-color: var(--uv-primary-active) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  color: var(--uv-disabled-text) !important;
  background-color: var(--uv-disabled-bg) !important;
  border-color: var(--uv-input-border) !important;
}
.btn-secondary, .btn-outline-primary, .btn-default {
  --bs-btn-color: var(--uv-primary); --bs-btn-bg: var(--uv-surface);
  --bs-btn-border-color: var(--uv-primary); --bs-btn-hover-color: var(--uv-primary-active);
  --bs-btn-hover-bg: var(--uv-selected-bg); --bs-btn-hover-border-color: var(--uv-primary-hover);
  --bs-btn-active-color: var(--uv-on-primary); --bs-btn-active-bg: var(--uv-primary-active);
  --bs-btn-active-border-color: var(--uv-primary-active); --bs-btn-disabled-color: var(--uv-disabled-text);
  --bs-btn-disabled-bg: var(--uv-disabled-bg); --bs-btn-disabled-border-color: var(--uv-input-border);
  color: var(--uv-primary) !important;
  background-color: var(--uv-surface) !important;
  border-color: var(--uv-primary) !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-default:hover, .btn-default:focus {
  color: var(--uv-primary-active) !important;
  background-color: var(--uv-selected-bg) !important;
  border-color: var(--uv-primary-hover) !important;
}
.btn-danger, input.btn-danger, input[name="reject"], button[name="delete"],
button[name="reject"], #unsubscribe-selected-btn,
form[action*="delete"] .btn-primary, form[id*="delete"] .btn-primary {
  --bs-btn-color: var(--uv-on-primary); --bs-btn-bg: var(--uv-danger);
  --bs-btn-border-color: var(--uv-danger); --bs-btn-hover-color: var(--uv-on-primary);
  --bs-btn-hover-bg: var(--uv-danger-hover); --bs-btn-hover-border-color: var(--uv-danger-hover);
  --bs-btn-active-bg: var(--uv-danger-hover); --bs-btn-active-border-color: var(--uv-danger-hover);
  color: var(--uv-on-primary) !important;
  background-color: var(--uv-danger) !important;
  border-color: var(--uv-danger) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
input.btn-danger:hover, input.btn-danger:focus,
input[name="reject"]:hover, input[name="reject"]:focus,
button[name="delete"]:hover, button[name="delete"]:focus,
button[name="reject"]:hover, button[name="reject"]:focus,
#unsubscribe-selected-btn:hover, #unsubscribe-selected-btn:focus,
form[action*="delete"] .btn-primary:hover, form[action*="delete"] .btn-primary:focus,
form[id*="delete"] .btn-primary:hover, form[id*="delete"] .btn-primary:focus {
  color: var(--uv-on-primary) !important;
  background-color: var(--uv-danger-hover) !important;
  border-color: var(--uv-danger-hover) !important;
}
a[href*="delete"]:not(.btn) { color: var(--uv-danger); text-decoration: underline; }
.nav-link[href*="delete"]:not(.btn) {
  border-left: 3px solid var(--uv-danger);
  background: var(--uv-danger-bg);
  color: var(--uv-danger);
}

/* Forms */
.form-control, .form-select,
input:not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea {
  background-color: var(--uv-surface);
  border-color: var(--uv-input-border);
  color: var(--uv-text);
}
.form-check-input, input[type="checkbox"], input[type="radio"] { border-color: var(--uv-input-border); }
.form-check-input:checked, input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--uv-primary);
  border-color: var(--uv-primary);
}
.form-control:disabled, .form-select:disabled, .form-check-input:disabled,
input:disabled, select:disabled, textarea:disabled, .btn:disabled, .btn.disabled {
  background-color: var(--uv-disabled-bg);
  border-color: var(--uv-input-border);
  color: var(--uv-disabled-text);
  opacity: 1;
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid,
.was-validated .form-select:invalid, input[aria-invalid="true"] { border-color: var(--uv-danger); }
.invalid-feedback, .errorlist, .has-error .help-block, .required label::after { color: var(--uv-danger); }

/* Lists, tabs, tables, and pagination */
.table {
  --bs-table-color: var(--uv-text); --bs-table-bg: var(--uv-surface);
  --bs-table-border-color: var(--uv-border); --bs-table-striped-bg: var(--uv-surface-subtle);
  --bs-table-hover-bg: var(--uv-selected-bg);
}
.table > thead, .table > thead > tr > * {
  background: var(--uv-surface-subtle);
  color: var(--uv-heading);
  border-bottom-color: var(--uv-input-border);
}
.list-group-item { background: var(--uv-surface); border-color: var(--uv-border); color: var(--uv-text); }
.list-group-item:hover { background: var(--uv-surface-subtle); }
.list-group-item.active, .list-group-item[aria-current="true"],
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
  background: var(--uv-selected-bg);
  border-color: var(--uv-primary) var(--uv-border) var(--uv-primary);
  color: var(--uv-primary-active);
  box-shadow: inset 4px 0 0 var(--uv-primary);
}
.nav-tabs .nav-link.active { border-bottom: 3px solid var(--uv-primary); box-shadow: none; }
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover {
  background: var(--uv-surface-subtle);
  color: var(--uv-link-hover);
}
.pagination {
  --bs-pagination-color: var(--uv-link); --bs-pagination-bg: var(--uv-surface);
  --bs-pagination-border-color: var(--uv-border); --bs-pagination-hover-color: var(--uv-link-hover);
  --bs-pagination-hover-bg: var(--uv-surface-subtle); --bs-pagination-hover-border-color: var(--uv-input-border);
  --bs-pagination-active-color: var(--uv-primary-active); --bs-pagination-active-bg: var(--uv-selected-bg);
  --bs-pagination-active-border-color: var(--uv-primary); --bs-pagination-disabled-color: var(--uv-disabled-text);
  --bs-pagination-disabled-bg: var(--uv-disabled-bg);
}
.page-item.active .page-link { box-shadow: inset 0 -3px 0 var(--uv-primary); font-weight: 600; }

/* HyperKitty's list index ships a blue-row/white-link hover rule. Override the
   complete row state together so its text, metadata, charts, and link cannot
   inherit conflicting colors from that rule or the general link treatment. */
.all-lists table.lists tr.list:hover,
.all-lists table.lists tr.list:focus-within,
.all-lists table.lists tr.list:hover > td,
.all-lists table.lists tr.list:focus-within > td {
  background-color: var(--uv-selected-bg);
  color: var(--uv-text);
}
.all-lists table.lists tr.list:hover > td:first-child,
.all-lists table.lists tr.list:focus-within > td:first-child {
  box-shadow: inset 4px 0 0 var(--uv-primary);
}
.all-lists table.lists tr.list:hover a.list-name,
.all-lists table.lists tr.list:focus-within a.list-name {
  color: var(--uv-link);
}
.all-lists table.lists tr.list a.list-name:hover,
.all-lists table.lists tr.list a.list-name:focus-visible {
  color: var(--uv-link-hover);
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .14em;
}
.all-lists table.lists tr.list:hover .list-address,
.all-lists table.lists tr.list:hover .list-description,
.all-lists table.lists tr.list:hover .list-stats,
.all-lists table.lists tr.list:focus-within .list-address,
.all-lists table.lists tr.list:focus-within .list-description,
.all-lists table.lists tr.list:focus-within .list-stats {
  color: var(--uv-text-muted) !important;
}
.all-lists table.lists tr.list:hover .chart-data .bars rect,
.all-lists table.lists tr.list:focus-within .chart-data .bars rect {
  fill: var(--uv-primary);
}

/* Semantic alerts and badges retain a text label/icon supplied by Mailman. */
.alert-success { --bs-alert-color: var(--uv-success); --bs-alert-bg: var(--uv-success-bg); --bs-alert-border-color: var(--uv-success); }
.alert-info { --bs-alert-color: var(--uv-info); --bs-alert-bg: var(--uv-info-bg); --bs-alert-border-color: var(--uv-info); }
.alert-warning { --bs-alert-color: var(--uv-warning); --bs-alert-bg: var(--uv-warning-bg); --bs-alert-border-color: var(--uv-warning); }
.alert-danger, .alert-error { --bs-alert-color: var(--uv-danger); --bs-alert-bg: var(--uv-danger-bg); --bs-alert-border-color: var(--uv-danger); }
.badge.bg-primary, .label-primary { background: var(--uv-primary) !important; color: var(--uv-on-primary); }
.badge.bg-success, .label-success { background: var(--uv-success-bg) !important; color: var(--uv-success); border: 1px solid var(--uv-success); }
.badge.bg-info, .label-info { background: var(--uv-info-bg) !important; color: var(--uv-info); border: 1px solid var(--uv-info); }
.badge.bg-warning, .label-warning { background: var(--uv-warning-bg) !important; color: var(--uv-warning); border: 1px solid var(--uv-warning); }
.badge.bg-danger, .label-danger { background: var(--uv-danger) !important; color: var(--uv-on-primary); }

/* White ring separates the blue focus outline on dark and solid controls. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--uv-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--uv-surface);
}
header.navbar :where(a, button, input, [tabindex]):focus-visible,
nav#navbar-main :where(a, button, input, [tabindex]):focus-visible,
.btn-primary:focus-visible, .btn-danger:focus-visible {
  outline-color: var(--uv-focus);
  box-shadow: 0 0 0 2px var(--uv-on-primary), 0 0 0 5px var(--uv-focus);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  nav#navbar-main, .thread-header, .sort-mode, .reply-tools, .email-info,
  .thread-overview, footer, .inline-attachment-preview { display: none !important; }
  body, .email, .email-body { background: #fff !important; color: #000 !important; }
  .container-xxl, .view-thread, #thread-content, .view-thread .col-md-9 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .email { break-inside: avoid; border: 1px solid #999; }
  a[href]::after { content: none !important; }
}