/* ============================================================================
   Membria base layer: reset, typography, accessibility helpers, icon, button, card.
   Uses var(--mb-*) tokens only (the colours live in membria-tokens.css).
   The styles of the layouts and of the Mb* components live in the *.razor.css files (CSS isolation).
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* WCAG 2.4.11 (Focus Not Obscured): the sticky header must not cover the focused element */
  scroll-padding-top: calc(var(--mb-header-height) + var(--mb-space-4));
}

body {
  margin: 0;
  /* Shorthand property: also removes the decorative background image of the Radzen standard theme. */
  background: var(--mb-bg);
  color: var(--mb-text);
  font-family: var(--mb-font);
  font-size: var(--mb-fs-base);
  line-height: var(--mb-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--mb-text);
  font-weight: 600;
  line-height: var(--mb-lh-heading);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--mb-fs-xl);
}

h2 {
  font-size: var(--mb-fs-lg);
}

h3 {
  font-size: var(--mb-fs-md);
}

p {
  margin: 0;
}

a {
  color: var(--mb-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* FocusOnNavigate puts the focus on the h1 after a page change: no ring needed there. */
h1:focus {
  outline: none;
}

.mb-num {
  font-variant-numeric: tabular-nums;
}

.mb-muted {
  color: var(--mb-text-2);
}

/* A smaller line under a value or a control (a hint, a fact): the markup used it from S1.3 on, the definition came with S1.8. */
.mb-small {
  font-size: var(--mb-fs-sm);
}

kbd,
.mb-kbd {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--mb-border);
  border-radius: 5px;
  background: var(--mb-surface);
  color: var(--mb-text-2);
  font: 500 11px/1 var(--mb-font);
}

/* ---------- Focus and accessibility helpers ---------- */

:focus-visible {
  outline: var(--mb-focus-width) solid var(--mb-primary);
  outline-offset: var(--mb-focus-offset);
}

.mb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content": visible on focus only, the first focusable element on the page. */
.mb-skip-link {
  position: fixed;
  top: var(--mb-space-2);
  left: var(--mb-space-2);
  z-index: 1000;
  padding: var(--mb-space-2) var(--mb-space-4);
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow-float);
  color: var(--mb-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-250%);
}

.mb-skip-link:focus {
  transform: none;
}

/* ---------- Icon (Material Symbols, the font shipped in the Radzen package) ---------- */

.mb-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-family: "Material Symbols";
  font-size: var(--mb-icon-size, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" var(--mb-icon-fill, 0);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.mb-icon--lg {
  --mb-icon-size: 24px;
}

/* ---------- Button (static pages and links; RadzenButton in an interactive island) ---------- */

.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  min-height: 36px;
  padding: 0 var(--mb-space-4);
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  color: var(--mb-text);
  font: 500 var(--mb-fs-sm) / 1.2 var(--mb-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mb-transition), border-color var(--mb-transition);
}

.mb-btn:hover {
  background: var(--mb-surface-2);
  text-decoration: none;
}

.mb-btn--primary {
  border-color: var(--mb-primary);
  background: var(--mb-primary);
  color: var(--mb-on-primary);
}

.mb-btn--primary:hover {
  border-color: var(--mb-primary-strong);
  background: var(--mb-primary-strong);
}

.mb-btn[aria-disabled="true"],
.mb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mb-density-comfortable .mb-btn {
  min-height: 44px;
  padding: 0 var(--mb-space-4);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---------- Header parts (shared building blocks of the admin and the member surface) ---------- */

/* Icon button: 36 px admin, 44 px member (touch target). */
.mb-iconbtn {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--mb-radius);
  background: transparent;
  color: var(--mb-text-2);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--mb-transition), color var(--mb-transition);
}

.mb-iconbtn:hover {
  background: var(--mb-surface-2);
  color: var(--mb-text);
}

.mb-iconbtn[aria-disabled="true"] {
  cursor: default;
}

.mb-density-comfortable .mb-iconbtn {
  width: 44px;
  height: 44px;
}

/* Brand mark: rounded square with connected dots (the final logo is a separate brand task). */
.mb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mb-text);
  font-size: var(--mb-fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mb-brand:hover {
  text-decoration: none;
}

.mb-brand__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--mb-radius);
  background: var(--mb-primary);
  color: var(--mb-on-primary);
  --mb-icon-size: 18px;
  --mb-icon-fill: 1;
}

/* Organisation dot: the sport-profile colour, decorative only. */
.mb-tenant__dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mb-sport);
}

.mb-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mb-primary-soft);
  color: var(--mb-primary);
  font-size: var(--mb-fs-xs);
  font-weight: 600;
}

/* ---------- Card ---------- */

.mb-card {
  min-width: 0;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow);
}

/* ---------- Form primitives (the dialogs and the settings cards: MbFormField holds one field, these lay fields out) ---------- */

/* The body of a form dialog and of a card: the blocks one under the other with the standard gap. */
.mb-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-4);
}

/* Two columns on a desktop, one on a phone; a field that needs the whole row takes .mb-span-2. */
.mb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mb-space-4);
}

.mb-form-grid > .mb-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 639.98px) {
  .mb-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The help line and the error line of a field (MbFormField, and the groups of checks the dialogs lay out by hand). */
.mb-field__help {
  color: var(--mb-text-2);
  font-size: var(--mb-fs-xs);
  line-height: 1.4;
}

.mb-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-space-1);
  color: var(--mb-danger-text);
  font-size: var(--mb-fs-sm);
  font-weight: 500;
}

.mb-field__error .mb-icon {
  --mb-icon-size: 16px;
  margin-top: 1px;
}

/* A native checkbox or radio with its label: the browser's control, in the brand colour (a real input, so the label and the keyboard work for free). */
.mb-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-space-2);
  min-height: 28px;
  cursor: pointer;
}

.mb-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--mb-primary);
}

.mb-check--disabled {
  color: var(--mb-text-2);
  cursor: not-allowed;
}

/* A group of checks or radios under a legend (fieldset), laid out in a wrapping row. */
.mb-checkgroup {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mb-checkgroup > legend {
  padding: 0;
  margin-bottom: var(--mb-space-1);
  font-size: var(--mb-fs-sm);
  font-weight: 500;
}

.mb-checkgroup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-1) var(--mb-space-5);
}

/* A setting with a switch: the name and its explanation on the left, the switch on the right. */
.mb-switchrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mb-space-4);
}

.mb-switchrow__text {
  min-width: 0;
}

.mb-switchrow__label {
  display: block;
  font-weight: 500;
}

.mb-switchrow__help {
  display: block;
  margin-top: 2px;
  color: var(--mb-text-2);
  font-size: var(--mb-fs-xs);
  line-height: 1.4;
}

/* A code-like value (a key, a member number): a fixed-width face, no wrapping. */
.mb-code {
  font-family: var(--mb-font-mono);
  font-size: 0.92em;
  white-space: nowrap;
}

/* ---------- Menus and link-like buttons (the view menu, the filter menu, the lists: S1.5) ---------- */

/* An item of a menu panel (role="menuitem", menuitemradio…): a full-width button; the checked one of a radio menu is marked by the icon and the soft colour, never by colour alone. */
.mb-menuitem {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  width: 100%;
  min-height: 34px;
  padding: 6px var(--mb-space-3);
  border: 0;
  border-radius: var(--mb-radius);
  background: transparent;
  color: var(--mb-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  --mb-icon-size: 18px;
}

/* On a phone the menus are sheets, and every item is a target a thumb can hit (44 px). */
@media (max-width: 767.98px) {
  .mb-menuitem {
    min-height: 44px;
  }
}

.mb-menuitem:hover,
.mb-menuitem:focus-visible {
  background: var(--mb-surface-2);
}

.mb-menuitem:focus-visible {
  outline-offset: -2px;
}

.mb-menuitem[aria-checked="true"] {
  background: var(--mb-primary-soft);
  color: var(--mb-primary-strong);
  font-weight: 600;
}

.mb-menuitem--danger {
  color: var(--mb-danger-text);
}

.mb-menuitem:disabled,
.mb-menuitem[aria-disabled="true"] {
  color: var(--mb-text-2);
  cursor: not-allowed;
  opacity: 0.7;
}

.mb-menuitem__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-menuitem__mark {
  flex: none;
  color: var(--mb-text-2);
}

.mb-menu__heading {
  margin: 0;
  padding: var(--mb-space-2) var(--mb-space-3) var(--mb-space-1);
  color: var(--mb-text-2);
  font-size: var(--mb-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mb-menu__separator {
  height: 1px;
  margin: var(--mb-space-1) 0;
  border: 0;
  background: var(--mb-border);
}

/* A button that reads as a link („Mentés nézetként”, „Szűrők törlése”): the text in the brand colour, an underline on hover; a real button, so the keyboard and the readers work. */
.mb-linkbtn {
  padding: var(--mb-space-1) 0;
  border: 0;
  background: transparent;
  color: var(--mb-primary);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.mb-linkbtn:hover {
  text-decoration: underline;
}

.mb-linkbtn:disabled {
  color: var(--mb-text-2);
  cursor: not-allowed;
  text-decoration: none;
}

/* ---------- Scroll lock while a dialog is open (MbDialog sets the class on <html>) ---------- */

html.mb-dialog-open {
  overflow: hidden;
}

/* ---------- ErrorBoundary (Blazor): a component error is shown in place ---------- */

.blazor-error-boundary {
  padding: var(--mb-space-4);
  border: 1px solid var(--mb-danger);
  border-radius: var(--mb-radius);
  background: var(--mb-danger-soft);
  color: var(--mb-danger-text);
}

.blazor-error-boundary::after {
  content: "Hiba történt.";
  font-weight: 600;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Forced colours (Windows high contrast) ---------- */

@media (forced-colors: active) {
  .mb-btn--primary {
    border-color: ButtonText;
  }
}

/* Essential Order control sizing: native values, Radzen labels and portalled
   option panels use one readable size, including iOS's no-zoom threshold. */
:root {
  --eo-select-font-size: 16px;
  --rz-dropdown-item-font-size: var(--eo-select-font-size);
  --rz-dropdown-item-padding: 11px 12px;
}
select, option, optgroup,
.rz-dropdown, .rz-dropdown .rz-dropdown-label,
.rz-multiselect, .rz-multiselect .rz-multiselect-label-container,
.rz-dropdown-panel, .rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-items li,
.rz-multiselect-panel, .rz-multiselect-panel .rz-multiselect-item {
  font-family: var(--mb-font);
  font-size: var(--eo-select-font-size);
  line-height: 20px;
}
select, .rz-dropdown, .rz-multiselect {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}
select:not([multiple]):not([size]) {
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mb-text-2) 50%), linear-gradient(135deg, var(--mb-text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-items li,
.rz-multiselect-panel .rz-multiselect-item {
  min-height: 44px;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rz-dropdown-panel input, .rz-multiselect-panel input { font-size: var(--eo-select-font-size); }

/* Membria secondary actions are white outlined or transparent. Brand and danger
   styles keep their semantic colours; neutral actions never use a grey fill. */
:root .rz-button:is(.rz-light, .rz-secondary, .rz-base) {
  border: 1px solid var(--mb-border-strong);
  background: var(--mb-surface);
  color: var(--mb-text);
  box-shadow: none;
}
:root .rz-button:is(.rz-light, .rz-secondary, .rz-base):hover:not(:disabled) {
  border-color: var(--mb-text-2);
  background: var(--mb-surface);
  color: var(--mb-text-strong);
}
:root .rz-button:is(.rz-light, .rz-secondary, .rz-base):is(.rz-variant-flat, .rz-variant-text) {
  border-color: transparent;
  background: transparent;
  color: var(--mb-text-2);
}
:root .rz-button:is(.rz-light, .rz-secondary, .rz-base):is(.rz-variant-flat, .rz-variant-text):hover:not(:disabled) {
  border-color: var(--mb-border);
  background: transparent;
  color: var(--mb-text);
}