/* MeshTender app-specific styles layered on top of Tabler.
   Everything generic (cards, forms, buttons, tables, badges, dropdowns) comes
   from Tabler; this file only covers things Tabler has no component for: the
   live console/event log, the Leaflet map, and the public-key code block. */

/* ---------- Text selection ----------
   The dark theme's default selection highlight is nearly invisible inside form
   controls; force a high-contrast highlight everywhere, inputs included. */
::selection {
  background-color: var(--tblr-primary);
  color: #fff;
}
input::selection,
textarea::selection {
  background-color: var(--tblr-primary);
  color: #fff;
}

/* ---------- Back links (icon + text, plain link — not a button) ----------
   These are navigational "← All organizations" links. Styling them as a plain
   link (rather than .btn .btn-link) avoids the button's inline-flex box being
   icon-height tall but text-width wide, which made the focus/hover state show
   asymmetric padding (flush left/right, padded top/bottom). */
.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--tblr-link-color);
  text-decoration: none;
}
/* a.back-link beats Tabler's `a:hover:has(.icon){text-decoration:none}`. */
a.back-link:hover {
  color: var(--tblr-link-hover-color);
  text-decoration: underline;
}
.back-link .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Public-key / monospace code blocks ---------- */
code.pk,
code.pubkey {
  display: block;
  word-break: break-all;
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  /* gray-400, not --tblr-secondary (#6b7280): the latter is only 3.67:1 on the
     near-black panel bg and fails WCAG AA for this key/data text. */
  color: var(--tblr-gray-400);
}

/* ---------- Collapse toggle label (Show/Hide) ---------- */
.collapse-hide {
  display: none;
}
[aria-expanded="true"] .collapse-show {
  display: none;
}
[aria-expanded="true"] .collapse-hide {
  display: inline;
}

/* A row's expanded panel (account page credential rows) lines up with the row's
   heading rather than with the icon gutter to its left: one .icon (1.25rem) plus
   one g-3 grid gutter (1rem). Hardcoded rather than read from --tblr-icon-size,
   which Tabler redefines per component context. */
.row-panel {
  padding-left: 2.25rem;
}

/* A chevron on a collapse toggle: points down when the panel is closed, up when
   it's open. Bootstrap maintains aria-expanded on the toggle itself, so the same
   attribute the Show/Hide labels key off drives this too — no JS of our own. */
.collapse-chevron {
  transition: transform 0.2s ease;
}
[aria-expanded="true"] .collapse-chevron {
  transform: rotate(180deg);
}

/* ---------- Live event / console log ---------- */
.evlog {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--tblr-font-monospace);
  font-size: 0.8125rem;
}
.evlog:empty { display: none; }
.evlog.console { max-height: 320px; }
.ev { padding: 0.15rem 0; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.ev:last-child { border-bottom: none; }
/* Colors chosen for WCAG AA (≥4.5:1) on the near-black log background:
   --tblr-secondary (#6b7280) and --tblr-danger (#d63939) only reach ~3.7:1,
   so info uses the lighter gray-400 and errors the lighter danger emphasis. */
.ev-info { color: var(--tblr-gray-400); }
.ev-confirmed { color: var(--tblr-success); font-weight: 600; }
.ev-error, .ev-timeout { color: var(--tblr-danger-text-emphasis); }
.ev-warning, .ev-denied, .ev-noreply { color: var(--tblr-warning); }
.ev-debug { color: var(--tblr-info); word-break: break-all; }
.ev-sent { color: var(--tblr-azure); }
.ev-reply { color: var(--tblr-body-color); white-space: pre-wrap; }

/* ---------- Badge contrast (dark) ----------
   Tabler's light "-lt" badges set their text to the full-strength brand color
   over a 10%-opacity tint, which is too dark for this small status text on the dark
   theme. The list below is now maintained by TestContrastMeetsWCAGAA rather than by
   eye — an earlier by-hand pass asserted "azure/success/warning/yellow already pass",
   and azure (4.15:1) and teal (4.13:1) in fact did not.

   Where Tabler defines a dark-theme *-text-emphasis value, use it; the rest are mixed
   toward white against their own palette variable, so they stay tied to the palette
   instead of becoming hand-picked hexes. */
.badge.bg-purple-lt { color: #d98fe6 !important; }
.badge.bg-secondary-lt { color: var(--tblr-secondary-text-emphasis) !important; }
.badge.bg-blue-lt { color: var(--tblr-primary-text-emphasis) !important; }
.badge.bg-azure-lt { color: color-mix(in srgb, var(--tblr-azure) 80%, #fff) !important; }
.badge.bg-teal-lt { color: color-mix(in srgb, var(--tblr-teal) 80%, #fff) !important; }

/* Tabler's danger button pairs its off-white foreground (#f9fafb) with the danger red,
   which measures 4.46:1 — just under the 4.5:1 floor. Pure white reaches 4.66:1 without
   touching the button's color. */
.btn-danger {
  color: #fff;
}

/* ---------- Contrast corrections (WCAG AA on the dark theme) ----------
   Found by internal/e2e TestContrastMeetsWCAGAA, which measures rendered pixels. All
   three point at Tabler's own dark-theme *-text-emphasis values rather than
   hand-picked colors, so they stay tied to the palette.

   Tabler's dark theme lightens --tblr-link-hover-color but NOT --tblr-link-color, which
   leaves every link at 3.55:1 on the page background and 2.94:1 on a card — below the
   4.5:1 AA floor for body text. Emphasis blue measures 7.07:1 and 5.85:1. .back-link
   already reads --tblr-link-color, so it's fixed by this too. */
:root {
  --tblr-link-color: var(--tblr-primary-text-emphasis);
}

/* Inactive tab labels use --tblr-muted (#6b7280 → 3.67:1). Emphasis gray is 7.65:1 and
   still clearly dimmer than the active tab, which uses the full body color. */
.nav-tabs .nav-link {
  color: var(--tblr-secondary-text-emphasis);
}

/* ---------- Members list filter (org members page) ----------
   The members page filters rows by role + search in JS (text search can't be
   pure CSS). Rows carry `.d-flex` (display:flex !important), so the JS toggles
   this `!important` hide class rather than an inline style, which `.d-flex`
   would otherwise win over. */
#member-list .member-hidden {
  display: none !important;
}

/* ---------- Step indicator (.steps) ----------
   Tabler ships two unrelated components under the same `.steps` class: the
   horizontal step indicator (ul.steps > li.step-item) we use on the add/added
   wizards, and a numbered documentation list (div.steps > h3). The latter's
   rule sets border-left + a left margin/padding, which also lands on the step
   indicator — drawing a stray vertical line and an empty gap before the first
   step. Undo those just for the indicator usage. */
.steps:has(> .step-item) {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* ---------- Leaflet map (dark) ---------- */
#map {
  height: 360px;
  border-radius: var(--tblr-border-radius);
  border: 1px solid var(--tblr-border-color);
}
.leaflet-container { background: #14171c; }
/* Scoped under .leaflet-popup so these beat Leaflet's own defaults, which load
   after app.css (leaflet.css is pulled in per-page in the map card body). */
.leaflet-popup .leaflet-popup-content-wrapper,
.leaflet-popup .leaflet-popup-tip {
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  box-shadow: var(--tblr-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.4));
}
.leaflet-popup .leaflet-popup-content { color: var(--tblr-body-color); }
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-control-zoom a {
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  border-bottom-color: var(--tblr-border-color);
}
.leaflet-container .leaflet-bar a:hover { background: var(--tblr-bg-surface-secondary); }
/* Base-layer (Dark/Light) switcher: match the dark UI so the native radios render
   correctly. On the default white box + dark color-scheme, an unselected radio
   shows as a black dot; a dark box fixes that, and accent-color tints the selected
   one. Scoped under .leaflet-container to beat leaflet.css (loaded after app.css). */
.leaflet-container .leaflet-control-layers {
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
  box-shadow: var(--tblr-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.4));
}
.leaflet-container .leaflet-control-layers-list label { margin: 0; color: var(--tblr-body-color); }
.leaflet-container .leaflet-control-layers-selector { accent-color: var(--tblr-primary); }

/* Profile list on the org config page: a long list scrolls inside its card
   instead of pushing the location-preview map off the page. Rows are compact —
   Tabler's default list-group padding plus a full-size icon button makes a ~4.5rem
   row, so only a couple fit before scrolling. Both are driven by CSS variables, so
   turn those down here rather than overriding the padding itself. */
.profile-list {
  max-height: 22rem;
  overflow-y: auto;
}
.profile-list .list-group-item {
  --tblr-list-group-item-padding-y: 0.375rem;
}
.profile-list .btn-icon {
  --tblr-btn-padding-y: 0.25rem;
  --tblr-btn-icon-size: 1.25rem;
}

/* Active region block in the config editor: highlight the block currently being
   drawn on the shared region map. */
.region-block.region-active {
  border-color: var(--tblr-primary) !important;
  box-shadow: 0 0 0 1px var(--tblr-primary);
}