/* Account/operator appearance only. Keep geometry, typography and visibility
   in the existing component styles. :has follows #page after HTMX swaps and
   history restoration, without adding route-specific JavaScript or classes. */
#page:has(.admin-area-shell, .admin-auth-shell, .grid-account, .account-card-grid, .login-wrap, .subscription-public-shell .admin-back-link) {
  --sihl-ink: #203543;
  --sihl-muted: #647682;
  --sihl-paper: #f4f8fb;
  --sihl-sand: #edf4f8;
  --sihl-gold: #8cc5e5;
  --sihl-gold-ink: #086da2;
  --sihl-border: #dce6ed;
  --sihl-focus: #087ab7;
  --sihl-overlay-shadow: 0 18px 40px rgba(54, 50, 47, .18);
  --account-ink: var(--sihl-ink);
  --admin-ink: var(--sihl-ink);
  --admin-muted: var(--sihl-muted);
  --admin-border: var(--sihl-border);
  color: var(--sihl-ink);

  /* Local inline accent variables exist on the older account templates. Only
     these appearance tokens need !important; their layout styles stay intact. */
  & :where(.admin-area-shell, .admin-auth-shell, .grid-account, .account-card-grid, .login-wrap, [style*="--color-accent"]) {
    --color-accent: var(--sihl-sand) !important;
    --color-accent-border: var(--sihl-border) !important;
    --color-accent-shadow: transparent !important;
    --admin-overview-accent: var(--sihl-gold-ink);
    --admin-overview-ink: var(--sihl-ink);
    --admin-overview-muted: var(--sihl-muted);
    --admin-subpage-accent: var(--sihl-gold-ink);
    --admin-subpage-ink: var(--sihl-ink);
    --admin-subpage-muted: var(--sihl-muted);
    color: var(--sihl-ink);
  }

  /* Flat, square-edged components. Native radios, status dots, avatars and
     switch thumbs are deliberately not selected. Status colors stay intact. */
  & :where([class^="admin-"], [class*=" admin-"], .border-shadow-100, .border-shadow-default-100,
    .grid-card, .button-100, .main-input, .reservation-card, .pin-box__entry,
    .voucher-status, .reservation-cancel-modal__dialog, .reservation-cancel-modal__policy,
    .reservation-cancel-modal__option, .subscription-account-card, .subscription-manage-card,
    .subscription-detail-panel, .subscription-resource-card, .subscription-status-badge,
    .account-subscription-widget, .subscription-document-list li,
    .admin-stat-grid article, .admin-form-section > summary, .admin-advanced-settings > summary,
    .admin-export-sport-option > span, .admin-export-result__filters span,
    .subscription-page-header, .subscription-account-stats article,
    .subscription-account-card__facts, .subscription-access-code, .subscription-code-panel,
    .subscription-account-card__note, .subscription-detail-note, .subscription-empty-state,
    .subscription-empty-state ion-icon, .subscription-usage-grid div,
    .subscription-manage-card > ion-icon, .subscription-checkin-list,
    .reservation-card .extra-tag):not(input[type="radio"], input[type="checkbox"], .admin-user-avatar) {
    border-radius: 0;
    box-shadow: none;
  }

  & :where(.border-shadow-100, .border-shadow-default-100, .grid-card, .admin-module-card,
    .admin-form-section, .admin-security-card, .admin-auth-card, .admin-table-wrap,
    .admin-setting-card, .admin-media-card, .admin-review-card, .admin-variant-group,
    .admin-analytics-controls, .admin-analytics-results, .admin-stat-grid article,
    .admin-schedule-day, .admin-schedule-court, .admin-activity-grid > section,
    .admin-activity-item, .reservation-card, .pin-box__entry,
    .subscription-account-card, .subscription-detail-panel, .subscription-resource-card,
    .account-subscription-widget, .subscription-document-list li,
    .subscription-account-stats article, .subscription-empty-state, .subscription-checkin-list,
    .admin-export-result__filters span) {
    background-color: #fff;
    background-image: none;
    border-color: var(--sihl-border);
    color: var(--sihl-ink);
  }

  & :where(.admin-area-hero, .admin-list-header, .admin-search-bar, .admin-filter-bar,
    .admin-editor-toolbar, .admin-breadcrumbs, .admin-setting-default,
    .admin-media-card__preview, .admin-calendar-image-preview, .admin-type-choice__icon,
    .admin-module-card__icon, .admin-module-card--planned, .admin-advanced-settings,
    .admin-analytics-control-group, .admin-settings-category strong, .admin-setting-badge,
    .admin-dependent-panel, .admin-export-result, .admin-export-preview > summary,
    .admin-schedule-day > header, .admin-form-section__heading > span,
    .reservation-cancel-modal__policy, .subscription-code-panel,
    .subscription-account-card__facts, .subscription-usage-grid div,
    .subscription-access-code, .subscription-account-card__note, .subscription-detail-note,
    .subscription-empty-state ion-icon, .subscription-manage-card > ion-icon,
    .admin-form-section > summary, .admin-advanced-settings > summary,
    .admin-export-sport-option > span, .admin-export-inline-option, .reservation-card .extra-tag) {
    background-color: var(--sihl-paper);
    background-image: none;
    border-color: var(--sihl-border);
    color: var(--sihl-ink);
  }

  & :where(.admin-area-hero, .admin-list-header, .subscription-page-header) {
    background-color: var(--sihl-sand);
    background-image: none;
    border-color: var(--sihl-border);
  }

  & :where(.admin-area-hero__icon, .admin-auth-icon) {
    background-color: var(--sihl-gold);
    color: var(--sihl-ink);
  }

  & :where(.admin-module-group__heading)::after {
    background-color: var(--sihl-border);
  }

  & :where(h1, h2, h3, h4, label, legend, .admin-field > span, .admin-field > label,
    .input-label > p, .admin-user-primary strong,
    .admin-detail-list dd, .admin-stat-grid strong, .admin-metric, .admin-metric strong,
    .pin-box__code, .pin-box__status, .admin-setting-key, .admin-schedule-range,
    .admin-schedule-booking__time, .admin-activity-item span,
    .admin-export-result__count strong, .admin-export-window-label,
    .subscription-page-header > strong, .subscription-account-stats strong,
    .subscription-account-card dd, .subscription-detail-facts dd,
    .subscription-access-code strong, .subscription-code-panel strong, .subscription-usage-grid strong) {
    color: var(--sihl-ink);
  }

  & :where(.admin-area-hero p, .admin-list-header p, .admin-module-card p,
    .admin-module-group__heading h2, .admin-auth-intro, .admin-form-section__heading p,
    .admin-field-note, .admin-setting-description, .admin-setting-help, .admin-setting-help summary,
    .admin-settings-section-title p, .admin-analytics-section-heading p, .admin-analytics-comparison p,
    .admin-content-group__header p, .admin-user-primary span, .admin-stat-grid span,
    .admin-detail-list dt, .admin-choice-card small, .admin-type-choice small,
    .admin-variant-heading p, .admin-table-empty, .admin-media-card__body small,
    .admin-payment-amount small, .admin-payment-customer a, .admin-payment-note,
    .admin-breadcrumbs, .admin-export-result__count span, .admin-export-result__actions p,
    .pin-box__label, .pin-box__hint, .pin-box__status--inactive,
    .reservation-count, .voucher-count, .voucher-note,
    .subscription-page-header p, .subscription-account-stats span,
    .subscription-account-card header p, .subscription-account-card dt, .subscription-detail-facts dt,
    .subscription-resource-note, .subscription-usage-grid span, .subscription-manage-card small,
    .subscription-checkin-row small, .subscription-detail-empty,
    .account-subscription-widget__body p, .subscription-document-list li small,
    .subscription-document-list__empty, .admin-export-inline-option small, .admin-export-apply-row small,
    .admin-export-sport-option small) {
    color: var(--sihl-muted);
  }

  /* Keep the existing border widths, field sizes and typography. */
  & :where(input.main-input, select.main-input, textarea.main-input,
    .admin-setting-control input, .admin-setting-control select, .admin-setting-control textarea,
    .admin-code-input, .admin-visual-editor, .admin-html-editor):not([type="checkbox"], [type="radio"], [type="color"], [type="submit"], [type="button"]) {
    background-color: #fff;
    background-image: none;
    border-color: var(--sihl-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--sihl-ink);
  }

  & :where(input, textarea)::placeholder {
    color: #80929e;
  }

  & :where(input, select, textarea, button) {
    accent-color: var(--sihl-gold-ink);
  }

  & :where(.main-input, .admin-code-input, .admin-visual-editor):focus-visible,
  & .border-shadow-100:has(> .password:focus-visible) {
    border-color: var(--sihl-focus);
    outline: 2px solid var(--sihl-focus);
    box-shadow: none;
  }

  & :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: var(--sihl-focus);
  }

  & :where(input.main-input, textarea.main-input)[readonly],
  & :where(input.main-input, select.main-input, textarea.main-input):disabled {
    background-color: var(--sihl-paper);
    border-color: var(--sihl-border);
    color: var(--sihl-muted);
  }

  & .main-input:user-invalid,
  & .border-shadow-100:has(> .password:user-invalid) {
    background-color: #fff1f1;
    border-color: #b34e48;
    color: #7b2424;
    outline-color: #b34e48;
  }

  & :where(.admin-primary-action, .admin-code-form .submit) {
    background-color: var(--sihl-ink);
    background-image: none;
    border-color: var(--sihl-ink);
    color: #fff;
  }

  & :where(.admin-secondary-action, .admin-back-link, .admin-module-card__action,
    .admin-role-badge, .admin-role-chip, .admin-media-copy, .admin-export-preset,
    .admin-settings-category, .admin-editor-toolbar button, .admin-editor-preview-toggle,
    .admin-setting-toggle, .admin-type-choice, .admin-choice-card,
    .button-100, .main-input.submit, .switch-board a, .subscription-manage-card) {
    background-color: var(--sihl-paper);
    background-image: none;
    border-color: var(--sihl-border);
    color: var(--sihl-ink);
  }

  & :where(.main-input.submit, .button-100, .admin-secondary-action) {
    border-color: var(--sihl-ink);
  }

  & :where(.admin-back-link, .admin-secondary-action, .admin-module-card__action,
    .admin-module-card, .admin-media-copy, .admin-settings-category, .admin-export-preset,
    .admin-editor-toolbar button, .admin-editor-preview-toggle, .admin-activity-item,
    .main-input.submit, .button-100, .pin-box__entry, .switch-board a,
    .subscription-manage-card):is(:hover, :focus-visible) {
    background-color: var(--sihl-sand);
    background-image: none;
    border-color: var(--sihl-focus);
    color: var(--sihl-ink);
    box-shadow: none;
  }

  & :where(.admin-form-section > summary, .admin-advanced-settings > summary,
    .admin-export-sport-option > span):is(:hover, :focus-visible),
  & .admin-advanced-settings[open] > summary {
    background-color: var(--sihl-sand);
    color: var(--sihl-ink);
    box-shadow: none;
  }

  & :where(.admin-form-section > summary, .admin-advanced-settings > summary):focus-visible {
    outline: 2px solid var(--sihl-focus);
  }

  & :where(.subscription-account-card__facts div, .subscription-detail-facts div,
    .subscription-checkin-row, .admin-export-result__actions, .admin-table-action:not(.admin-table-action--danger)) {
    border-color: var(--sihl-border);
  }

  & :where(.admin-primary-action, .admin-code-form .submit):is(:hover, :focus-visible) {
    background-color: #182e3c;
    border-color: #182e3c;
    color: #fff;
  }

  & .admin-module-card:is(:hover, :focus-visible) .admin-module-card__action {
    background-color: var(--sihl-ink);
    color: #fff;
  }

  & :where(.admin-table-action, .admin-link-button, .admin-inline-cta,
    .admin-pagination a, .admin-breadcrumbs a, .admin-eyebrow,
    .admin-content-id-copy, .admin-module-card__index) {
    color: var(--sihl-gold-ink);
  }

  & :where(.admin-table-action, .admin-link-button, .admin-inline-cta,
    .admin-pagination a, .admin-breadcrumbs a, .admin-sort-link,
    .admin-table-sort-button, .admin-content-id-copy):is(:hover, :focus-visible) {
    color: var(--sihl-ink);
  }

  & :where(.admin-table, .admin-data-table) :is(th, td) {
    border-color: var(--sihl-border);
    color: var(--sihl-ink);
  }

  & :where(.admin-table, .admin-data-table) th {
    background-color: var(--sihl-paper);
  }

  & :where(.admin-settings-category--active, .admin-export-preset.is-active,
    .admin-export-preset[aria-pressed="true"], .admin-editor-toolbar button.is-active,
    .admin-editor-mode-switch button[aria-pressed="true"], .admin-advanced-settings[open],
    .admin-choice-card:has(input:checked), .admin-type-choice:has(input:checked),
    .admin-export-sport-option input:checked + span, .admin-export-inline-option:has(input:checked),
    .reservation-cancel-modal__option.is-active) {
    background-color: var(--sihl-sand);
    border-color: var(--sihl-focus);
    color: var(--sihl-ink);
    box-shadow: none;
  }

  /* Retain semantic exceptions, including destructive choices and validation. */
  & .admin-choice-card--danger:has(input:checked) {
    background-color: #fff1f1;
    border-color: #b34e48;
    color: #7b2424;
  }

  & .admin-danger-action {
    background-color: #fff1f1;
    border-color: #b34e48;
    color: #7b2424;
  }

  & .admin-danger-action:is(:hover, :focus-visible) {
    background-color: #f7dedb;
    border-color: #7b2424;
    color: #7b2424;
  }

  & .admin-content-id-copy.is-copied {
    color: #24734c;
  }

  & .admin-content-id-input.is-copied {
    border-color: #54a479;
    outline-color: #54a479;
  }

  & .admin-setting-card--overridden {
    border-color: var(--sihl-focus);
    box-shadow: inset 3px 0 0 var(--sihl-gold);
  }

  & .admin-setting-card.is-dirty {
    border-color: #d09a35;
    box-shadow: inset 3px 0 0 #d09a35;
  }

  & :where(.admin-alert, .admin-context-guide--danger, .admin-choice-card--danger) :is(p, strong, label) {
    color: inherit;
  }

  & .reservation-cancel-modal__dialog {
    background-color: var(--sihl-paper);
    color: var(--sihl-ink);
    box-shadow: var(--sihl-overlay-shadow);
  }

  & :where(.admin-editor-media-panel, .admin-editor-library, .admin-user-picker__results) {
    background-color: var(--sihl-paper);
    border-color: var(--sihl-border);
    box-shadow: var(--sihl-overlay-shadow);
  }

  & .admin-user-picker__results button { color: var(--sihl-ink); }
  & .admin-user-picker__results button:is(:hover, :focus-visible) { background-color: var(--sihl-sand); }
  & .pin-box__code::after { filter: grayscale(1); }
}
/* The account overview uses content height instead of inherited dashboard spans. */
#page .account-overview {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-items:start;width:min(1200px,calc(100% - 3rem));margin:2rem auto;gap:1.5rem;height:auto;min-height:0}
#page .account-overview > .grid-first {display:none}
#page .account-overview > .account-card-grid {grid-column:auto;grid-row:auto;min-width:0;width:100%;margin:0;height:auto;min-height:0;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
#page .account-overview .account-widget-content {height:auto;max-height:28rem;overflow:auto;min-height:0}
#page .account-overview h2 {font-size:1.35rem;margin:0}
#page .account-overview .account-info {display:block;overflow:visible;max-height:none}
#page .account-overview .account-info p {margin:.2rem 0}
#page .account-overview .account-info p:nth-child(odd) {font-size:.85rem;color:#647682;margin-top:.75rem}
#page .account-overview .account-info p:nth-child(even) {font-weight:500}
.account-operator-banner {display:flex;align-items:center;gap:1rem;width:min(1200px,calc(100% - 3rem));margin:2rem auto 0;padding:1.4rem 1.5rem;background:#203543;color:white!important;font-size:1.2rem;font-weight:600;text-decoration:none}
.account-operator-banner ion-icon {font-size:1.5rem}.account-operator-banner ion-icon:last-child {margin-left:auto}
@media(max-width:720px){#page .account-overview {grid-template-columns:1fr;width:calc(100% - 2rem);gap:1rem}.account-operator-banner {width:calc(100% - 2rem)}}
#page .account-overview {grid-template-rows:none}
#page .account-overview > .account-card-grid h2 {text-align:left;padding:0;align-self:stretch}
#page .account-operator-banner :is(span,ion-icon) {color:white!important}
#page .account-overview > .account-card-grid {order:2}
#page .account-overview > :has(.account-info) {order:0}
#page .account-overview > .account-subscription-widget {order:1}
#page .account-overview > :has(.pin-box) {order:8}
#page .account-overview > :has(.switch-board) {order:9}
#page .account-overview .account-info {display:grid;grid-template-columns:120px minmax(0,1fr);gap:.65rem 1rem;padding:0}
#page .account-overview .account-info p {margin:0!important;overflow-wrap:anywhere}
#page .account-overview .switch-board {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
#page .account-overview .switch-board > * {padding:.65rem;min-height:44px;margin:0;border:1px solid #dce6ed;background:#f5f8fa;font-size:.95rem}
@media(max-width:460px){#page .account-overview .account-info {grid-template-columns:1fr;gap:.35rem}#page .account-overview .account-info p:nth-child(even){margin-bottom:.6rem!important}}