/* 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. */

/* ---------- 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, rgba(0, 0, 0, 0.2));
  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);
}

/* ---------- Live event / console log ---------- */
.evlog {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.25));
  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, rgba(255, 255, 255, 0.05)); }
.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. On the dark theme purple (#ae3ec9 → 2.80:1) and
   secondary (#6b7280 → 2.74:1) fall below WCAG AA for this small status text;
   lighten just those two. success/azure/warning/yellow already pass. */
.badge.bg-purple-lt { color: #d98fe6 !important; }
.badge.bg-secondary-lt { color: var(--tblr-secondary-text-emphasis) !important; }

/* ---------- Command catalog flag table (admin) ----------
   Fixed layout so the flag columns line up across the per-feature cards (each is
   its own table), plus a distinct checked color per flag for fast scanning. */
.catalog-table { table-layout: fixed; }
.form-check-input.cc-risky:checked  { background-color: var(--tblr-red);    border-color: var(--tblr-red); }
.form-check-input.cc-share:checked  { background-color: var(--tblr-green);  border-color: var(--tblr-green); }
.form-check-input.cc-member:checked { background-color: var(--tblr-blue);   border-color: var(--tblr-blue); }
.form-check-input.cc-admin:checked  { background-color: var(--tblr-orange); border-color: var(--tblr-orange); }

/* ---------- Members role filter (org page) ----------
   The All/Members/Admins button group filters the members list purely in CSS:
   the checked radio in the card header drives which rows show via :has(). Rows
   carry `.d-flex` (display:flex !important), so the hide must be `!important`
   and specific enough to win — which this selector easily is. */
.member-card:has(#mf-admin:checked) #member-list [data-role="member"],
.member-card:has(#mf-member:checked) #member-list [data-role="admin"] {
  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, #1a1d24);
  color: var(--tblr-body-color, #e6edf3);
  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, #e6edf3); }
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-control-zoom a {
  background: var(--tblr-bg-surface, #1a1d24);
  color: var(--tblr-body-color, #e6edf3);
  border-bottom-color: var(--tblr-border-color, #2b2f36);
}
.leaflet-container .leaflet-bar a:hover { background: var(--tblr-bg-surface-secondary, #22262e); }