/**
 * The visual vocabulary the visitor-facing session pages share.
 *
 * /my-sessions, /my-sessions/view and /my-sessions/login are one flow - a
 * visitor carts sessions, registers for them, then comes back through a mailed
 * link to see where they stand. They have to read as one place, so the frame,
 * the panels, the status pills, the form card and the buttons are defined once
 * here and used by all three. Anything only one page needs stays in that page's
 * own stylesheet (rba-sessions.my-schedule.css, .login-view.css, .login.css),
 * which load after this one and can therefore override it.
 *
 * Every colour and step is a theme token with the Bosch value as its fallback,
 * so these pages follow the theme rather than carrying a second palette.
 */

/* ── Page frame ────────────────────────────────────────────────────────── */

/* A reading column rather than the full layout width: these pages are short
   lists and small forms, both of which get lost edge to edge. The padding at
   the bottom keeps the last element off the footer, which otherwise starts
   right under it. */
.rba-sessions-page {
  box-sizing: border-box;
  max-width: calc(960px + 2 * var(--grid-margin, 16px));
  margin-inline: auto;
  padding-inline: var(--grid-margin, 16px);
  padding-block: var(--spacing-500, 40px) var(--spacing-1500, 120px);
  color: var(--trust, #550a2d);
}

.rba-sessions-page__title {
  margin: 0 0 var(--spacing-300, 24px);
  font-size: var(--text-h1, 36px);
  line-height: 1.15;
}

/* The sentence under the title: what this page is showing, and to whom. */
.rba-sessions-page__intro {
  margin: 0 0 var(--spacing-500, 40px);
  font-size: var(--text-paragraph-m, 16px);
  line-height: 1.5;
  color: var(--trust-300, #773b57);
}

.rba-sessions-page__section-title {
  margin: 0 0 var(--spacing-300, 24px);
  font-size: var(--text-body, 16px);
  font-weight: 400;
  line-height: 1.25;
}

.rba-sessions-page__section-title a {
  color: inherit;
  text-decoration: none;
}

.rba-sessions-page__section-title a::before {
  content: '< ';
}

.rba-sessions-page__section-title a:hover {
  text-decoration: underline;
}

.rba-sessions-page__section {
  margin-bottom: var(--spacing-800, 64px);
}

/* "Nothing here" and "that link has expired": a quiet box rather than a bare
   line of text, so an empty page still looks deliberate. */
.rba-sessions-page__notice {
  margin: 0;
  padding: var(--spacing-600, 48px) var(--spacing-400, 32px);
  border-radius: var(--border-radius-m, 4px);
  background: var(--ambience-100, #f7f5f3);
  text-align: center;
}

.rba-sessions-page__notice p {
  margin: 0 0 var(--spacing-200, 16px);
}

.rba-sessions-page__notice > :last-child {
  margin-bottom: 0;
}

/* ── Panels and tables ─────────────────────────────────────────────────── */

/* The frame around a list of sessions, following session-teaser's white
   variant so these lists and the cards on the event page read as one family.
   A table ignores overflow, so the rounded corners have to be clipped by this
   wrapper; it also takes the horizontal scroll when a table is too wide for a
   phone, which is the one place a session page may scroll sideways. */
.rba-sessions-panel {
  border: var(--border-width-regular, 2px) solid var(--ambience, #ebe6e1);
  border-radius: var(--border-radius-m, 4px);
  overflow: hidden;
}

.rba-sessions-panel--scroll {
  overflow-x: auto;
}

.rba-sessions-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--white, #ffffff);
}

.rba-sessions-table th,
.rba-sessions-table td {
  padding: var(--spacing-200, 16px) var(--spacing-300, 24px);
  text-align: left;
  vertical-align: middle;
}

/* The header names the columns and then gets out of the way - small, quiet and
   on the ambience tint, so the rows below it carry the page. */
.rba-sessions-table thead th {
  border-bottom: var(--border-width-regular, 2px) solid var(--ambience, #ebe6e1);
  background: var(--ambience-100, #f7f5f3);
  font-size: var(--text-paragraph-xs, 14px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.3;
  color: var(--trust-300, #773b57);
  white-space: nowrap;
}

.rba-sessions-table tbody tr {
  transition: background-color 0.2s ease;
}

/* Drupal also hangs .odd/.even on the rows of a #type:table; the tint is taken
   from the position instead, so a table built any other way stripes the same. */
.rba-sessions-table tbody tr:nth-child(even) {
  background: var(--ambience-100, #f7f5f3);
}

.rba-sessions-table tbody tr + tr td {
  border-top: var(--border-width-thinn, 1px) solid var(--ambience, #ebe6e1);
}

.rba-sessions-table tbody tr:hover {
  background: var(--ambience-200, #f3f0ed);
}

/* The title is the row's subject, the rest of the columns are its details -
   so only the title is set in bold, and the quieter cells step back. */
.rba-sessions-table td a {
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.35;
  color: var(--trust, #550a2d);
  text-decoration: none;
}

.rba-sessions-table td a:hover {
  text-decoration: underline;
}

.rba-sessions-table__meta {
  font-size: var(--text-paragraph-s, 15px);
  color: var(--trust-300, #773b57);
  white-space: nowrap;
}

/* ── Status pills ──────────────────────────────────────────────────────── */

/* Where a session stands. The cell stretches, the pill inside it does not, so
   pills of different widths still start on one line. */
.rba-sessions-status {
  display: inline-block;
  padding: var(--spacing-050, 4px) var(--spacing-150, 12px);
  border-radius: var(--border-radius-round, 9999px);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-paragraph-xs, 14px);
  line-height: 1.3;
  white-space: nowrap;
}

/* In the cart, not registered for: no colour of its own, because nothing has
   happened yet. */
.rba-sessions-status--cart {
  background: var(--ambience, #ebe6e1);
  color: var(--trust, #550a2d);
}

.rba-sessions-status--requested {
  background: var(--warning-200, #f9ecca);
  color: var(--warning-700, #53431b);
}

.rba-sessions-status--confirmed {
  background: var(--success-200, #c1e9dd);
  color: var(--success-700, #134939);
}

.rba-sessions-status--cancelled {
  background: var(--error-100, #fde3e6);
  color: var(--error-700, #601a22);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

/* A card of its own, on the ambience surface the theme uses for boxed-off
   content, so a form reads as the next step rather than more of the same page. */
.rba-sessions-card {
  box-sizing: border-box;
  max-width: 640px;
  margin: var(--spacing-800, 64px) auto 0;
  padding: var(--spacing-600, 48px) var(--spacing-300, 24px);
  border-radius: var(--border-radius-m, 4px);
  background: var(--ambience-200, #f3f0ed);
}

@media (min-width: 768px) {
  .rba-sessions-card {
    padding-inline: var(--spacing-800, 64px);
  }
}

.rba-sessions-card__title {
  margin: 0 0 var(--spacing-150, 12px);
  font-size: var(--text-h3, 24px);
  line-height: 1.25;
  text-align: center;
}

.rba-sessions-card__intro {
  margin: 0 0 var(--spacing-500, 40px);
  font-size: var(--text-paragraph-m, 16px);
  line-height: 1.5;
  text-align: center;
}

/* Quieter than the fields it follows, and centred like the intro above them:
   it sets expectations rather than asking for anything. */
.rba-sessions-card__note {
  margin: var(--spacing-100, 8px) 0 0;
  font-size: var(--text-paragraph-s, 15px);
  line-height: 1.5;
  text-align: center;
  color: var(--trust-300, #773b57);
}

.rba-sessions-card__status:empty {
  display: none;
}

.rba-sessions-card__status {
  margin: var(--spacing-300, 24px) 0 0;
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
}

.rba-sessions-card__status.is-error {
  color: var(--error-600, #a82e3c);
}

/* ── Form fields ───────────────────────────────────────────────────────── */

.rba-sessions-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200, 16px);
}

/* Pulled up against its input, so each label/input pair reads as one unit
   within the form's gap. */
.rba-sessions-form__label {
  margin-bottom: calc(-1 * var(--spacing-150, 12px));
  font-size: var(--text-paragraph-s, 15px);
  font-weight: var(--font-weight-bold, 700);
}

/* Matches the white-on-ambience field of bosch:input (input--ambience). */
.rba-sessions-form__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--spacing-200, 16px);
  border: var(--border-width-regular, 2px) solid var(--ambience-500, #dbd4ce);
  border-radius: var(--border-radius-m, 4px);
  background: var(--white, #ffffff);
  color: var(--trust, #550a2d);
  font: inherit;
  transition: border-color 0.2s ease;
}

.rba-sessions-form__input:hover {
  border-color: var(--ambience-600, #bab0a7);
}

.rba-sessions-form__input:focus {
  outline: none;
  border-color: var(--accent, #fa263a);
}

.rba-sessions-form__input:read-only {
  border-color: var(--ambience-300, #efebe7);
  background: var(--ambience-300, #efebe7);
  color: var(--ambience-700, #998c80);
  cursor: not-allowed;
}

/* Honeypot: off-screen rather than display:none/visibility:hidden, which some
   bots explicitly check for and skip filling. */
.rba-sessions-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

/* The outline button of bosch:button, written out for the places that render a
   plain <button>/<input type="submit"> rather than the component - a Drupal
   form's submit, and the small actions above a list. Same pill, same trust
   outline, so they sit next to a real bosch:button without looking borrowed. */
.rba-sessions-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100, 8px);
  min-height: 44px;
  padding: var(--spacing-100, 8px) var(--spacing-300, 24px);
  border: var(--border-width-regular, 2px) solid var(--trust, #550a2d);
  border-radius: var(--border-radius-round, 9999px);
  background: transparent;
  color: var(--trust, #550a2d);
  font: inherit;
  font-size: var(--text-paragraph-m, 16px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rba-sessions-button:hover {
  background: var(--white, #ffffff);
  color: var(--trust, #550a2d);
  text-decoration: none;
}

.rba-sessions-button:focus-visible {
  outline: var(--border-width-regular, 2px) solid var(--trust, #550a2d);
  outline-offset: 2px;
}

.rba-sessions-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* A row action rather than the page's main one: smaller, and only as loud as
   the row it belongs to. */
.rba-sessions-button--small {
  min-height: 32px;
  padding: var(--spacing-050, 4px) var(--spacing-200, 16px);
  font-size: var(--text-paragraph-s, 15px);
}

/* Cancelling is destructive, so it carries the error colour - but stays an
   outline, because it is not the action the page is inviting. */
.rba-sessions-button--danger {
  border-color: var(--error-600, #a82e3c);
  color: var(--error-600, #a82e3c);
}

.rba-sessions-button--danger:hover {
  background: var(--error-100, #fde3e6);
  color: var(--error-700, #601a22);
}

.rba-sessions-button--danger:focus-visible {
  outline-color: var(--error-600, #a82e3c);
}

/* The bosch:button component, wherever one of these pages embeds it, painted
   to match the plain buttons above. Selected through .button__container, which
   only the component renders - a bare `.button` would also catch the class
   Drupal puts on every form submit, which .rba-sessions-button already owns. */
.rba-sessions-page .button__container {
  /* The component declares `container: bosch-button / inline-size` so its
     button can size itself in cqi units. That also applies inline-size
     containment, which makes the box measure as if it were empty: at auto
     width it collapses to zero and the nowrap button spills out of it, on
     top of whatever sits next to it. Drop the containment and let the box
     take its width from the button. The container query is lost with it,
     which costs nothing here - the fixed --btn-* values below replace every
     cqi-based one, and size 's' buttons opt out of the @container block
     anyway. */
  container-type: normal;
  display: inline-block;
  inline-size: auto;
}

.rba-sessions-page .button__container .button {
  --btn-height: 44px;
  --btn-font: 16px;
  --btn-tracking: -0.18px;
  --btn-px: 24px;
  --btn-py: 8px;
  --btn-gap: 12px;
  display: inline-flex;
  width: auto;
  white-space: nowrap;
  margin-inline: 0;
  margin-top: 0.5em;
  color: var(--trust, #550a2d) !important;
  border-color: var(--trust, #550a2d) !important;
  background-color: transparent !important;
}

.rba-sessions-page .button__container .button__label {
  color: var(--trust, #550a2d) !important;
}

.rba-sessions-page .button__container .button:hover {
  background-color: var(--white, #ffffff) !important;
}

/* ── Action bar ────────────────────────────────────────────────────────── */

.rba-sessions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-150, 12px);
  margin: 0 0 var(--spacing-500, 40px);
}