/* erpal_ets_seats — the join form, the capability dashboards.
   Same token contract as erpal_tms_network's board CSS: use the erpal_crm_ui
   variables where the theme defines them, and give every one a scheme-aware
   literal fallback so the page is legible with no theme at all. */
.ets-dash, .ets-join-form, .ets-seat-note {
  --ets-text: var(--erpal-text, #1a1f2b);
  --ets-muted: var(--erpal-muted, #5b6474);
  --ets-surface: var(--erpal-surface, #ffffff);
  --ets-sunken: var(--erpal-thead-bg, #f0f2f6);
  --ets-border: var(--erpal-border, #d9dee7);
  --ets-accent: var(--erpal-accent, #1a5fc4);
  --ets-ok-bg: var(--erpal-tag-green-bg, #e3f4ec);
  --ets-ok-ink: var(--erpal-tag-green-ink, #0f6b46);
  --ets-warn-bg: var(--erpal-tag-amber-bg, #fdf0db);
  --ets-warn-ink: var(--erpal-tag-amber-ink, #8a5800);
  --ets-bad-bg: var(--erpal-tag-red-bg, #fde7e7);
  --ets-bad-ink: var(--erpal-tag-red-ink, #c5343a);
  color: var(--ets-text);
  background: var(--ets-surface);
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 12px 32px;
  font-size: 15px;
  line-height: 1.55;
  border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ets-dash,
  :root:not([data-theme="light"]) .ets-join-form,
  :root:not([data-theme="light"]) .ets-seat-note {
    --ets-text: var(--erpal-text, #e8ecf4);
    --ets-muted: var(--erpal-muted, #a3adc0);
    --ets-surface: var(--erpal-surface, #161c2c);
    --ets-sunken: var(--erpal-thead-bg, #1c2436);
    --ets-border: var(--erpal-border, #28304a);
    --ets-accent: var(--erpal-accent, #7fb2ff);
    --ets-ok-bg: var(--erpal-tag-green-bg, #10331f);
    --ets-ok-ink: var(--erpal-tag-green-ink, #7fdcaa);
    --ets-warn-bg: var(--erpal-tag-amber-bg, #3a2c10);
    --ets-warn-ink: var(--erpal-tag-amber-ink, #f0c168);
    --ets-bad-bg: var(--erpal-tag-red-bg, #3a1717);
    --ets-bad-ink: var(--erpal-tag-red-ink, #ff9d9d);
  }
}
:root[data-theme="dark"] .ets-dash,
:root[data-theme="dark"] .ets-join-form,
:root[data-theme="dark"] .ets-seat-note {
  --ets-text: var(--erpal-text, #e8ecf4);
  --ets-muted: var(--erpal-muted, #a3adc0);
  --ets-surface: var(--erpal-surface, #161c2c);
  --ets-sunken: var(--erpal-thead-bg, #1c2436);
  --ets-border: var(--erpal-border, #28304a);
  --ets-accent: var(--erpal-accent, #7fb2ff);
  --ets-ok-bg: var(--erpal-tag-green-bg, #10331f);
  --ets-ok-ink: var(--erpal-tag-green-ink, #7fdcaa);
  --ets-warn-bg: var(--erpal-tag-amber-bg, #3a2c10);
  --ets-warn-ink: var(--erpal-tag-amber-ink, #f0c168);
  --ets-bad-bg: var(--erpal-tag-red-bg, #3a1717);
  --ets-bad-ink: var(--erpal-tag-red-ink, #ff9d9d);
}

/* --- tabs (the union of a company's capabilities) ------------------------- */
.ets-dash__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ets-dash__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ets-border);
  color: var(--ets-accent); text-decoration: none; font-weight: 600; font-size: 14px;
}
.ets-dash__tab:hover, .ets-dash__tab:focus-visible { border-color: var(--ets-accent); text-decoration: underline; }
.ets-dash__tab.is-active { background: var(--ets-sunken); border-color: var(--ets-accent); color: var(--ets-text); }

.ets-dash__head { margin: 0 0 18px; }
.ets-dash__title { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 4px; }
.ets-dash__lede { margin: 0 0 4px; }
.ets-dash__note, .ets-dash__empty { color: var(--ets-muted); font-size: 14px; margin: 0; }

.ets-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ets-badge--verified { background: var(--ets-ok-bg); color: var(--ets-ok-ink); }
.ets-badge--claimed { background: var(--ets-warn-bg); color: var(--ets-warn-ink); }
.ets-badge--suspended, .ets-badge--failed { background: var(--ets-bad-bg); color: var(--ets-bad-ink); }

/* --- panels --------------------------------------------------------------- */
.ets-panels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ets-panel { border: 1px solid var(--ets-border); border-radius: 10px; padding: 12px 14px; background: var(--ets-surface); min-width: 0; }
.ets-panel--alert { border-color: var(--ets-warn-ink); grid-column: 1 / -1; margin: 0 0 14px; }
.ets-panel__title { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 2px; }
.ets-panel__title a { color: var(--ets-text); text-decoration: none; }
.ets-panel__title a:hover { text-decoration: underline; }
.ets-panel__count { background: var(--ets-sunken); color: var(--ets-muted); border-radius: 999px; padding: 0 9px; font-size: 13px; font-weight: 600; }
.ets-panel__why, .ets-panel__empty { color: var(--ets-muted); font-size: 13px; margin: 0 0 8px; }
.ets-panel__more { margin: 8px 0 0; font-size: 13px; }
.ets-panel__more a, .ets-line__main { color: var(--ets-accent); }

.ets-lines { list-style: none; margin: 0; padding: 0; }
.ets-line { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--ets-border); }
.ets-line:first-child { border-top: 0; }
.ets-line__main { display: block; text-decoration: none; min-width: 0; }
.ets-line__main:hover .ets-line__headline { text-decoration: underline; }
.ets-line__headline { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ets-line__detail { display: block; color: var(--ets-muted); font-size: 13px; overflow-wrap: anywhere; }
.ets-line__side { text-align: right; white-space: nowrap; }
.ets-line__right { display: block; font-weight: 600; }
.ets-line__who { display: block; color: var(--ets-muted); font-size: 12px; }

/* --- the join form -------------------------------------------------------- */

/* 1.0.1 — the "you came from LogisticsETS" line. Shown only on a redirect from
   /start, and it answers the one question a redirect always raises: did the
   thing I just did work? Deliberately quiet — it is reassurance, not a call to
   action, and the call to action is the button at the bottom of the form.
   Colours come from the shared tokens so it follows the hub's scheme instead of
   hard-coding a light-mode green that inverts badly. */
.ets-join-from {
  border: 1px solid var(--ets-border, #d9dee7);
  border-left: 3px solid var(--ets-accent, #1a5fc4);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: var(--ets-sunken, #f0f2f6);
}
.ets-join-from p { margin: 0; }

.ets-join-intro p { margin: 0 0 8px; }
.ets-join-form .form-item { margin: 0 0 14px; }
.ets-fineprint { color: var(--ets-muted); font-size: 13px; }
.ets-seat-note h2 { margin-top: 0; }

/* Phones: one column, and the right-hand column stops fighting the headline. */
@media (max-width: 640px) {
  .ets-panels { grid-template-columns: 1fr; }
  .ets-line { flex-direction: column; gap: 2px; }
  .ets-line__side { text-align: left; white-space: normal; }
}

/* The hub shell underlines every link inside <main>
   (`.ld-hub-page--generic main a`, specificity 0-2-1), which turned every
   detail line on a dashboard row into underlined text. Re-scope ours so the
   HEADLINE is the affordance and the detail line stays quiet. */
.ets-dash .ets-line__main,
.ets-dash .ets-panel__title a { text-decoration: none; }
.ets-dash .ets-line__main:hover .ets-line__headline,
.ets-dash .ets-line__main:focus-visible .ets-line__headline,
.ets-dash .ets-panel__title a:hover { text-decoration: underline; }
.ets-dash .ets-line__detail { text-decoration: none; }

/* ---------------------------------------------------------------------------
   1.1.0 — the seat's workspace nav in the hub-shell topbar (page--hub.html.twig
   renders `hub_shell_nav`, filled by erpal_ets_seats_erpal_crm_ui_hub_shell_alter).
   The topbar itself is erpal_hub.css's: a WHITE bar in both colour schemes, so
   the ink here is the same literal the logo text uses (#21392f), not a scheme
   token that would flip to pale ink on a bar that never flips. */
.ld-hub-topbar-inner .ld-hub-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 18px 0 auto;
}
.ld-hub-topbar-inner .ld-hub-nav a {
  color: #21392f;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.ld-hub-topbar-inner .ld-hub-nav a:hover,
.ld-hub-topbar-inner .ld-hub-nav a:focus-visible {
  border-bottom-color: #1a5fc4;
}
.ld-hub-topbar-inner .ld-hub-nav a.is-active {
  border-bottom-color: #1a5fc4;
  color: #1a5fc4;
}
@media (max-width: 560px) {
  .ld-hub-topbar-inner { flex-wrap: wrap; }
  .ld-hub-topbar-inner .ld-hub-nav {
    order: 3;
    width: 100%;
    margin: 6px 0 0;
    gap: 2px 14px;
  }
}

/* 1.2.0, ruling `d-2026-09-12-037` — THE ACTIVE-COMPANY BAR (hub side).
 * Twin of erpal_tms's .tms-party-switch; same colour, same reasoning: the
 * company decides what every row below it means, so it is stated in words at
 * the top of every page a multi-company seat opens. */
.ets-seat-switch {
  position: sticky;
  top: 0;
  z-index: 890;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  padding: .5rem 1rem;
  background: var(--erpal-accent, #1f6f8b);
  color: #fff;
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
.ets-seat-switch__now { font-weight: 600; }
.ets-seat-switch__links { display: flex; flex-wrap: wrap; gap: .75rem; }
.ets-seat-switch__link { color: #fff; text-decoration: underline; white-space: nowrap; }
.ets-seat-switch__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
  .ets-seat-switch { flex-direction: column; align-items: flex-start; gap: .25rem; }
}