/*
 * strichliste UI overrides for the admin-managed deployment.
 *
 * Loaded into the strichliste SPA via the nginx sub_filter injection
 * (docker/config/default.conf). Use this file for behaviours
 * strichliste's settings don't expose — anything that needs to be
 * tweaked structurally in the rendered DOM.
 *
 * The targets here are stable selectors built from React Router
 * routes; they survive the strichliste frontend rebuilds we use.
 */

/* "Send money to a friend" — strichliste has no setting to hide this
 * tab. The Link's `to` ends in `/send_money_to_a_friend`, which makes
 * the anchor selectable. */
a[href$="/send_money_to_a_friend"] {
  display: none !important;
}

/* "Split Invoice" nav link. Strichliste's splitInvoice.enabled flag
 * gates the backend action but leaves the React route mounted, so the
 * top-nav link still renders. The route is `#!/split-invoice`. */
a[href$="/split-invoice"] {
  display: none !important;
}

/* User-detail page header is the user's nickname (h2) + balance (h3).
 * The h2 ships with a default 16px top margin and pushes the whole
 * header further down the page than the venue tablet needs — tighten
 * it up so the name sits closer to the top nav. */
[class*="user-details-header_header"] > h2 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
[class*="user-details-header_header"] > h3 {
  margin-top: 0 !important;
}

/* Strichliste keeps two `<input type="text" hidden tabIndex="-1">`
 * elements above the user-details header to catch keyboard-wedge
 * barcode scans (one from common/scanner, one from user-details).
 * Despite the `hidden` HTML attribute these inputs render with
 * `display: inline-block` (something in strichliste's theme overrides
 * the UA default of `display: none`), eating ~62px of vertical space
 * above the user's nickname.
 *
 * Shrink them to zero height/padding/border so they take no visible
 * pixels but remain in the document flow — still focusable, still
 * receive keyboard input, so the barcode scanner keeps working. */
input[type="text"][hidden][tabindex="-1"] {
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

/* Article-list page (/#!/articles/active and /inactive) renders an
 * ArticleTagFilter wrapper above the SearchList. The wrapper carries
 * `margin: 2rem` even when no tags are configured (this install has
 * none), which leaves a ~4rem empty band between the active/inactive
 * tab row and the search input. Collapse the margin when there are
 * no tag buttons inside. */
[class*="article-tag-filter_wrapper"]:empty {
  margin: 0 !important;
}

/* The Bricks <ScrollContainer> wraps the top-left active/inactive
 * tab strip (and a couple of other horizontal nav rows). It declares
 * `overflow-x: auto`, so the browser paints a horizontal scrollbar
 * underneath the tabs even when the tabs fit. The strip stays
 * touch-scrollable; we just suppress the visible bar. CSS-module
 * class fragment `scroll-container_container` is stable across
 * strichliste rebuilds. */
[class*="scroll-container_container"] {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
[class*="scroll-container_container"]::-webkit-scrollbar {
  display: none;                  /* Chromium / WebKit */
}

/* Always render the document's vertical scrollbar. strichliste's
 * card grids use `grid-template-columns: repeat(auto-fill, minmax(
 * 8rem, 1fr))` — their column count is a function of the container's
 * available width, so transient scrollbar appearances (e.g. when
 * the palapian-mode help panel makes body scrollable) would otherwise
 * steal ~15px and drop a column. With overflow-y: scroll the
 * scrollbar is always present (greyed-out when nothing overflows,
 * live when something does) and the column count stays stable. */
html {
  overflow-y: scroll;
}

/* Theme the document scrollbar with strichliste's CSS variables.
 * The variables already swap on html[data-theme='dark'] (strichliste
 * theme.css), so a single rule set covers both light and dark
 * without any media queries here.
 *
 * Track uses --headerBackground so the scrollbar gutter visually
 * extends the dark top-nav stripe in dark mode (#1d2832), and stays
 * crisp white in light mode (#fff). The 2 px thumb border is painted
 * in the same track colour so the thumb appears inset, matching the
 * restrained look of strichliste's other chrome.
 *
 * - scrollbar-color → Firefox + recent Chromium thumb/track pairing.
 * - ::-webkit-scrollbar-* → Chromium/Safari, finer control.
 */
html {
  scrollbar-color: var(--textSubtile) var(--headerBackground);
}
html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html::-webkit-scrollbar-track {
  background: var(--headerBackground);
}
html::-webkit-scrollbar-thumb {
  background: var(--textSubtile);
  border: 2px solid var(--headerBackground);
  border-radius: 6px;
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}
html::-webkit-scrollbar-corner {
  background: var(--headerBackground);
}

/* "GUEST" badge inserted between name and balance on user-list cards
 * for strichliste users classified as guests by the admin endpoint
 * /admin/api/public/guests. Injected by ui-overrides.js — the badge
 * element itself doesn't exist in upstream React. */
.admin-guest-badge {
  display: inline-block;
  align-self: flex-start;
  background: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* The user card uses flex-direction:column + justify-content:space-between
 * to push name to the top and balance to the bottom. With a third child
 * (the badge) the default space-between distributes evenly and the badge
 * lands in the middle. Repack so name+badge stay grouped at the top and
 * balance hugs the bottom. :has() handles the per-card scoping; modern
 * Chrome/Safari/Firefox all support it (strichliste runs on a tablet
 * browser that satisfies this). */
[class*="user-card_userCard"]:has(> .admin-guest-badge) {
  justify-content: flex-start !important;
}
[class*="user-card_userCard"]:has(> .admin-guest-badge) > :last-child {
  margin-top: auto;
}

/* User-details page header is a block-layout div (centered <h2>/<h3>),
 * so the flex-only rules above don't apply. Center the badge under
 * the name and pull it tight against the h2's bottom margin so the
 * header doesn't grow visibly taller. */
[class*="user-details-header_header"] > .admin-guest-badge {
  display: block;
  width: fit-content;
  margin: -0.5rem auto 0.5rem;
}

/* Public note rendered under the balance on /#!/user/N. The header is
 * block-layout + center-aligned, so we inherit those defaults and
 * just lighten the color + cap the width so it doesn't dominate. */
.admin-public-note-display {
  margin: -0.25rem auto 1rem;
  max-width: 30rem;
  padding: 0 1rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  white-space: pre-wrap;
}

/* Public note editor injected into /#!/user/N/edit. Label sits on its
 * own line above a full-width textarea, matching the rhythm of the
 * existing nickname + email inputs. */
.admin-public-note-row {
  margin-bottom: 1rem;
}
.admin-public-note-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-public-note-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  color: inherit;
  background: var(--inputBackground, transparent);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: var(--borderRadius, 4px);
  resize: vertical;
}

/* Always-visible header toolbar built by admin-extras/header-controls.js.
 * Strichliste's own per-view font/theme bar is hidden (rule below)
 * because it disappears on /user/:id and /metrics — our standalone
 * version drives the same localStorage keys + CSS vars so the behaviour
 * is identical but the affordance is present on every route.
 *
 * z-index 201 sits one above strichliste's fixed nav (z-index 200,
 * `.header-nav_nav__*` in the upstream build) so the controls paint
 * on top of it. */
#admin-header-toolbar {
  position: fixed;
  top: 0;
  /* Gap to the right-edge "Search" nav link. MUST be rem, not px: the
   * Search link is rem-sized, so the −/+ font buttons (and the
   * 18px/24px breakpoints) scale its width — a fixed px offset only
   * cleared it at the 16px base and let the palapian/english toggle
   * (the toolbar's rightmost item) collide with Search at larger
   * scales. 7.25rem == the old 116px at base, now scaling in lockstep. */
  right: 7.25rem;
  /* Match strichliste's nav height (.header-nav .bar is 4rem) so the
   * controls sit on the same vertical centre line as the Search link.
   * 4rem tracks the root font-size — which the −/+ buttons and the
   * laptop/desktop breakpoints (18px/24px) change — whereas a fixed 64px
   * only lined up at the 16px base scale and rode high everywhere else. */
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 201;
  pointer-events: auto;
}
#admin-header-toolbar .admin-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 0.5rem;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--textSubtile, #58697d);
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
#admin-header-toolbar .admin-header-btn:hover {
  background: rgba(127, 127, 127, 0.12);
  color: var(--text, inherit);
}
#admin-header-toolbar .admin-header-btn-text {
  font-weight: 600;
}

/* Suppress strichliste's per-view font/theme bar — anchored on the
 * stable SVG path of either the moon (light mode) or sun (dark mode)
 * theme icon. Matches the immediate parent div, so all three upstream
 * buttons (font −, font +, theme) vanish together. The :not() excludes
 * our own #admin-header-toolbar which embeds the same SVG. */
div:not(#admin-header-toolbar):has(> button > svg > path[d^="M4.8696719"]),
div:not(#admin-header-toolbar):has(> button > svg > path[d^="M8,13"]) {
  display: none !important;
}

/* Help paragraph under the Create User modal's responsible-contact
 * textarea. Sized smaller and softened so it reads like instruction
 * rather than UI chrome. The modal's Card paint provides the
 * background. */
.admin-public-note-help {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.75;
}

/* Append our attribution to strichliste's footer credit line without
 * touching the upstream footer.tsx. The first <div> in the <footer>
 * holds "strichliste-web (MIT License, by schinken and sanderdrummer)";
 * ::after adds our line below it. \A is a CSS newline; white-space:
 * pre-line makes the pseudo-element honour it (while still wrapping
 * normally). The .footer class is build-hashed, so we anchor on the
 * <footer> element instead. */
footer > div:first-child::after {
  content: "\A- modified by Tomber from Wanderzirkus";
  white-space: pre-line;
}

/* "← Back" link injected by ui-overrides.js on the all-transactions and
 * per-user metrics views (upstream offers no way back to the user). It's
 * appended to <body> (never into React's DOM — see ensureBackToUserLink),
 * so it's pinned fixed just below the nav at top-left. Restrained styling
 * with a subtle background so it reads over page content. */
.admin-back-to-user {
  position: fixed;
  top: 4.5rem;
  left: 1rem;
  z-index: 150;
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--textSubtile, #58697d);
  background: var(--componentBackgroundLight, rgba(127, 127, 127, 0.16));
  text-decoration: none;
  border-radius: var(--borderRadius, 4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.admin-back-to-user:hover {
  color: var(--primary, #2563eb);
}

/* User list (#!/user/active|inactive): the wrapper carries a `margin-left:
 * 8rem` at >=48em that indents the whole list and leaves a left gutter for
 * the floating "+" add button. The venue wants the list full-width and the
 * add button up in the ACTIVE/INACTIVE USERS tab row, right-aligned.
 *
 * - Drop the left margin so the list spans the full width.
 * - Anchor the wrapper (position: relative) and pin the add button to the
 *   top-right, level with the NavTabMenus row (which has margin: 2rem ...).
 *   The tab row's right slot (scaling/theme) is already empty here — those
 *   controls live in our top header toolbar — so the corner is free.
 * Pure CSS: the React-owned button is repositioned, never moved in the DOM. */
[class*="user_wrapper"] {
  margin-left: 0 !important;
  position: relative;
}
[class*="user_addUserButton"] {
  position: absolute !important;
  /* Level with the tab row: NavTabMenus' 2rem top margin collapses through
   * the wrapper, so the tabs sit at the wrapper's padding-box top; top:0
   * lines the button up with them (top:2rem would drop it a row below). */
  top: 0 !important;
  right: 1rem !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 10;
}

/* ------------------------------------------------------------------
 * Transaction-list redesign (ui-overrides.js decorateTransactions).
 * A human-readable, colour-coded type badge leads every row; raw
 * "[verb:id]" tags are replaced by the badge + a payment-method chip.
 * Solid swatches with white text so they stay legible on the daylight
 * tablet in both light and dark themes. Badge kinds:
 *   row types  → purchase / deposit / payout / transfer
 *   tag verbs  → settle / correct / voucher / voucher_sweep
 * ------------------------------------------------------------------ */
.admin-tx-badge {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.45em;
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.admin-tx-badge--deposit { background: #107c10; }  /* green  */
.admin-tx-badge--payout { background: #c50f1f; }   /* red    */
.admin-tx-badge--transfer { background: #008272; } /* teal   */
.admin-tx-badge--settle { background: #106ebe; }   /* blue   */
.admin-tx-badge--correct { background: #ca5010; }  /* orange */
.admin-tx-badge--voucher { background: #b4009e; }  /* magenta*/
.admin-tx-badge--voucher_sweep { background: #5d5a58; } /* gray */

/* Payment-method / modifier chip (e.g. the settlement's "cash"). Neutral,
 * outlined, theme-aware via strichliste's CSS variables. */
.admin-tx-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--textSubtile, #58697d);
  white-space: nowrap;
}

/* Purchase rows carry NO badge — the bought article is the headline, so make
 * it prominent (bold + a touch larger). The shopping-bag icon becomes a soft
 * 365-tinted bubble so a purchase still has a glanceable visual cue. */
.admin-tx-article {
  font-size: 1.15em;
  font-weight: 700;
}
.admin-tx-article svg {
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  padding: 5px;
  margin-right: 0.4em;
  border-radius: 50%;
  background: rgba(0, 120, 212, 0.12);
  vertical-align: middle;
}
html[data-theme="dark"] .admin-tx-article svg {
  background: rgba(40, 153, 255, 0.18);
}

/* Balance privacy on the front-facing user list: regular users' balances are
 * hidden (kept for guests, kept everywhere on the detail page). visibility
 * (not display) so the card keeps its height — the freed space is where the
 * 365 card gradient lives. */
.admin-balance-hidden {
  visibility: hidden !important;
}