@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Font Families */
  --font-primary: 'Outfit', sans-serif;

  /* Colors */
  --color-primary: #ffd000;
  --color-primary-dark: #ffb800;
  --color-secondary: #547aae; /* Grey - for secondary text, borders */
  --color-light: #f8f9fa; /* Light grey - for backgrounds, disabled states */
  --color-dark: #304563; /* Dark grey/black - for text */
  --color-text: #203047;
  --color-text-muted: #6c757d;
  --color-background: #ffffff;
  --color-page: #f7f7f7;
  --color-border: #ced4da;
  --color-border-light: #e9ecef;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --bg-dark-gradient: linear-gradient(135deg, #203047 0%, #304563 100%);

  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  /* Borders */
  --border-radius-sm: 0.2rem;
  --border-radius-md: 0.3rem;
  --border-radius-lg: 0.5rem; /* for larger containers/cards */
  --border-radius-pill: 9999px; /* for pill-shaped buttons/labels */

  /* Transitions */
  --transition-base: all 0.15s ease-in-out;
}

/* --- Global & Typography --- */
body {
  font-family: var(--font-primary);
  background-color: var(--color-light);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
}

label,
.fieldset-legend {
  font-weight: 500;
  color: var(--color-dark);
  display: block;
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-dark) !important;
}

/* Ensure Bootstrap buttons animate like other buttons (e.g. chart download buttons). */
.btn:not(.btn-link):not(.btn-close) {
  transition: var(--transition-base) !important;
}

/* Chart download buttons ("Letöltés képként") */
.chart-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Hide download actions on mobile (PDF + chart image downloads) */
@media (max-width: 768px) {
  a.js-print-pdf,
  .js-print-pdf,
  .chart-download-btn {
    display: none !important;
  }
}

/* --- Bootstrap button variants: force GTMM brand colors (non-semantic only) --- */
/*
 * Keep semantic variants (success/danger/warning/info/etc.) intact.
 * We only normalize “primary-ish” buttons and plain .btn.
 */
.btn:not(.btn-link):not(.btn-close)
  :not(.btn-primary)
  :not(.btn-secondary)
  :not(.btn-success)
  :not(.btn-danger)
  :not(.btn-warning)
  :not(.btn-info)
  :not(.btn-light)
  :not(.btn-dark)
  :not(.btn-outline-primary)
  :not(.btn-outline-secondary)
  :not(.btn-outline-success)
  :not(.btn-outline-danger)
  :not(.btn-outline-warning)
  :not(.btn-outline-info)
  :not(.btn-outline-light)
  :not(.btn-outline-dark),
.btn-outline-secondary,
.btn-outline-primary,
.btn-secondary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-dark) !important;
  transition: var(--transition-base) !important;
}

.btn:not(.btn-link):not(.btn-close)
  :not(.btn-primary)
  :not(.btn-secondary)
  :not(.btn-success)
  :not(.btn-danger)
  :not(.btn-warning)
  :not(.btn-info)
  :not(.btn-light)
  :not(.btn-dark)
  :not(.btn-outline-primary)
  :not(.btn-outline-secondary)
  :not(.btn-outline-success)
  :not(.btn-outline-danger)
  :not(.btn-outline-warning)
  :not(.btn-outline-info)
  :not(.btn-outline-light)
  :not(.btn-outline-dark):hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-secondary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-dark) !important;
}

.form-required::after {
  content: '*';
  color: var(--color-danger);
  margin-left: var(--spacing-xs);
}
.webform-submission-form .form-required::after {
  display: none;
}

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

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

main.bg-white {
  background-color: var(--color-page) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  background-image: var(--bg-dark-gradient);
}

/* --- Page Structure & Sections --- */
.featured,
/*.content-before,*/
.content {
  margin-bottom: var(--spacing-lg);
  background-color: var(--color-background);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 769px) {
  #view-footer-ins .views-table {
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
}
main .content {
  background-color: transparent;
  box-shadow: none;
}

#view-footer-table .table-wrapper,
#view-footer-columns > div,
#view-footer > div {
  border-radius: var(--border-radius-md) !important;
}

/* --- Primary Tabs (Navigation) --- */
.featured ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-border-light);
}

.featured ul li {
  margin-right: var(--spacing-sm);
  margin-bottom: -2px; /* Align with border-bottom */
  list-style: none;
}

.featured ul li a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-secondary);
  text-decoration: none;
  border: 2px solid transparent;
  border-bottom-width: 2px; /* Keep space for active border */
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  font-weight: 500;
}

.featured ul li a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-border);
  text-decoration: none;
}

.featured ul li a.is-active,
.featured ul li a.is-active:hover {
  color: var(--color-primary);
  border-color: var(--color-border-light);
  border-bottom-color: var(--color-background); /* Creates the "cutout" effect */
  background-color: var(--color-background); /* Ensures tab bg matches content bg */
  position: relative;
  z-index: 1;
}

/* --- Navigation --- */

#block-gtmm-main-menu ul {
  padding-left: 0;
}

#block-gtmm-main-menu ul li {
  list-style: none;
  padding: 4px 8px;
  margin: 4px 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  border-radius: var(--border-radius-md);
}

#block-gtmm-main-menu ul li:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-md);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

#block-gtmm-main-menu ul li a {
  color: white;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

#block-gtmm-main-menu ul li a:hover {
  color: white;
  text-decoration: none;
}

#block-gtmm-main-menu ul li a.is-active,
#block-gtmm-main-menu ul li.active > a {
  font-weight: bold;
  color: var(--color-primary);
}

/* --- Form General --- */
.webform-submission-form {
  font-size: 0.95rem;
}

/* Webform canonical pages: prevent inputs from exceeding container */
.route--entity-webform-canonical .webform-submission-form input[type='text'],
.route--entity-webform-canonical .webform-submission-form input[type='email'],
.route--entity-webform-canonical .webform-submission-form input[type='number'],
.route--entity-webform-canonical .webform-submission-form textarea,
.route--entity-webform-canonical .webform-submission-form .form-select {
  max-width: 100%;
}

.form-item {
  margin-bottom: var(--spacing-md);
}

.form-item label.option {
  /* For checkbox/radio labels */
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-no-label > label {
  /* Hides labels that should be visually hidden but are present */
  display: none !important;
}

/* --- Inputs & Selects --- */
input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
input[type='search'],
input[type='tel'],
input[type='url'],
textarea,
select.form-select,
.form-select {
  display: block;
  width: 100% !important;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  box-sizing: border-box; /* Ensure padding and border don't increase width */
  margin-top: 0.25rem !important;
}

/*
  Mobile: native <select> cannot reliably render multi-line selected text.
  We keep the real select (for the native picker), but render the selected label
  as a wrapping overlay via a data attribute.
*/
@media (max-width: 768px) {
  .gtmm-select-multiline {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .gtmm-select-multiline::before {
    content: attr(data-gtmm-selected-text);
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 2.25rem 0.65rem 0.75rem; /* leave room for arrow */
    font-size: 0.95rem;
    font-family: var(--font-primary);
    line-height: 1.25;
    color: var(--color-text);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gtmm-select-multiline::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid currentColor;
    color: var(--color-text-muted, #6b7280);
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Invisible but interactive select on top (opens native picker). */
  .gtmm-select-multiline > select.form-select,
  .gtmm-select-multiline > .form-select {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    margin-top: 0 !important;
  }

  /* Show focus ring on the overlay when the real select is focused. */
  .gtmm-select-multiline:focus-within::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25);
    outline: 0;
  }
}

input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='url']:focus,
textarea:focus,
select.form-select:focus,
.form-select:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25);
}

input[type='date'] {
  /* Basic styling, appearance can be browser-specific */
  min-height: calc(1.5em + 1.3rem + 2px); /* Match padding of other inputs */
}

/* --- Checkboxes --- */
.form-checkbox {
  /* Hide default checkbox */
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.form-checkbox + label.option::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  margin-right: var(--spacing-sm);
  background-color: var(--color-background);
  transition: var(--transition-base);
  vertical-align: middle; /* Align with text */
  position: relative;
  top: -1px;
}

.form-checkbox:checked + label.option::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked + label.option::after {
  content: '✔'; /* Checkmark */
  color: var(--color-background);
  font-size: 0.8em;
  position: absolute; /* Position inside the pseudo-element */
  left: 1.15em; /* Adjust based on your checkbox size and margin */
  top: 50%;
  transform: translate(-50%, -50%) translateX(-0.7em); /* Fine-tune centering */
  line-height: 1;
}

.form-checkbox:focus + label.option::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25);
}

/* --- Fieldsets --- */
fieldset {
  border: 1px solid var(--color-border-light);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  background-color: #fdfdfd; /* Slightly off-white */
}

fieldset .fieldset-legend {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark); /* higher contrast on light backgrounds */
  padding: 0;
  margin-left: var(--spacing-sm); /* Align with padding of fieldset */
  text-decoration: none;
}

.fieldset-wrapper {
  padding-top: var(--spacing-sm);
}

/* --- Tables --- */
table {
  width: 100%;
  margin-bottom: var(--spacing-md);
  border-collapse: collapse;
  background-color: var(--color-background);
  caption-side: top;
}

th,
td {
  padding: var(--spacing-sm);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--color-border-light);
}

thead th {
  font-weight: 600;
  background-color: var(--color-light);
  color: var(--color-dark);
  border-bottom-width: 2px;
  border-bottom-color: var(--color-border);
}

tbody tr:nth-of-type(odd)[data-striping='1'] {
  background-color: rgba(0, 0, 0, 0.02); /* Subtle striping */
}

tbody tr:hover {
  background-color: rgba(var(--color-primary-rgb, 0, 123, 255), 0.05); /* Use RGB if var(--color-primary) is hex */
}

table input[type='text'],
table input[type='number'],
table input[type='email'],
table .form-select {
  margin-bottom: 0; /* Remove bottom margin for inputs inside tables */
  font-size: 0.9rem;
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* ==============================
   Mobile: Views tables as cards
   ============================== */
@media (max-width: 768px) {
  /* This module table is wrapped in an overflow-x:auto container; disable it only when our mobile layout is active. */
  .intezmenyi-osszefoglalo-wrapper.gtmm-osszefoglalo-mobile-ready {
    overflow-x: visible !important;
  }

  /* Mobile layout for the institution summary table (JS-rendered). */
  .intezmenyi-osszefoglalo-wrapper.gtmm-osszefoglalo-mobile-ready > table.intezmenyi-osszefoglalo-statisztika {
    display: none !important;
  }

  .intezmenyi-osszefoglalo-wrapper > .gtmm-osszefoglalo-mobile {
    display: block;
    margin-top: var(--spacing-sm);
  }

  .gtmm-osszefoglalo-empty {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    color: var(--color-text-muted);
  }

  .gtmm-osszefoglalo-group {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-weight: 700;
    color: var(--color-dark);
  }

  .gtmm-osszefoglalo-card {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm) 0;
    overflow: hidden;
  }

  .gtmm-osszefoglalo-title {
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
    line-height: 1.25;
  }

  .gtmm-osszefoglalo-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .gtmm-osszefoglalo-card .gtmm-osszefoglalo-item:first-of-type {
    border-top: 0;
    padding-top: 0;
  }

  .gtmm-osszefoglalo-label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gtmm-osszefoglalo-value {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 50%;
    text-align: right;
  }

  .gtmm-osszefoglalo-value .rating-bubble {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
  }

  .gtmm-osszefoglalo-value .rating-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .gtmm-osszefoglalo-value .rating-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    text-align: right;
  }

  /* Rating dots (mobile summary view). */
  .gtmm-osszefoglalo-value .rating-dot {
    display: inline-block;
    margin-left: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .gtmm-osszefoglalo-value.rating-1 .rating-dot {
    background-color: rgb(255, 0, 0);
  }
  .gtmm-osszefoglalo-value.rating-2 .rating-dot {
    background-color: rgb(255, 165, 0);
  }
  .gtmm-osszefoglalo-value.rating-3 .rating-dot {
    background-color: rgb(255, 208, 0);
  }
  .gtmm-osszefoglalo-value.rating-4 .rating-dot {
    background-color: rgb(102, 204, 102);
  }
  .gtmm-osszefoglalo-value.rating-5 .rating-dot {
    background-color: rgb(3, 196, 151);
  }

  /* The stats pages sometimes wrap tables with inline overflow-x:auto; disable it in card mode. */
  body[class*='route--view-intezmeny-statisztika'] .ertekelesek-osszesitese,
  body[class*='route--view-evenkenti-osszesites'] .ertekelesek-osszesitese,
  body[class*='route--view-ertekelesek-osszesitese'] .ertekelesek-osszesitese {
    overflow-x: visible !important;
  }

  /* Scope to statistics views (avoid impacting admin/content tables) + opt-in via table class. */
  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika {
    border: 0;
    background: transparent;
    margin-bottom: var(--spacing-md);
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* override module table min-width:1000px on mobile */
    box-sizing: border-box;
  }

  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table thead,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table thead,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table thead,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika thead {
    display: none;
  }

  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table tbody,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table tbody,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table tbody,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika tbody {
    display: block;
  }

  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table tr,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table tr,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table tr,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika tr {
    display: block;
    background: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm) 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* prevents subpixel overflow from long content */
  }

  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table td,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table td,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table td,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 8px 0;
    border: 0;
    text-align: left !important;
    background: transparent !important;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Divider between fields inside a card */
  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table td + td,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table td + td,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table td + td,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td + td {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Label on the left */
  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table td::before,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table td::before,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table td::before,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td::before {
    content: attr(data-label);
    flex: 1 1 auto;
    min-width: 44%;
    font-weight: 600;
    color: var(--color-text-muted);
    padding-right: var(--spacing-sm);
    line-height: 1.25;
    min-width: 0;
    max-width: 60%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Allow flex items (values) to shrink/wrap; fixes rare overflow on very narrow phones. */
  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table td > *,
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table td > *,
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table td > *,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* First cell becomes the card title */
  body[class*='route--view-intezmeny-statisztika'] table.views-table.gtmm-views-card-table td[data-gtmm-title='1'],
  body[class*='route--view-evenkenti-osszesites'] table.views-table.gtmm-views-card-table td[data-gtmm-title='1'],
  body[class*='route--view-ertekelesek-osszesitese'] table.views-table.gtmm-views-card-table td[data-gtmm-title='1'],
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td[data-gtmm-title='1'] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-dark);
    padding-top: 0;
    padding-bottom: var(--spacing-xs);
    justify-content: flex-start;
    /* Title is pure text; avoid flex min-content quirks on ultra-narrow widths. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  body[class*='route--view-intezmeny-statisztika']
    table.views-table.gtmm-views-card-table
    td[data-gtmm-title='1']::before,
  body[class*='route--view-evenkenti-osszesites']
    table.views-table.gtmm-views-card-table
    td[data-gtmm-title='1']::before,
  body[class*='route--view-ertekelesek-osszesitese']
    table.views-table.gtmm-views-card-table
    td[data-gtmm-title='1']::before,
  table.gtmm-views-card-table.intezmenyi-osszefoglalo-statisztika td[data-gtmm-title='1']::before {
    content: '';
    display: none;
  }

  /* This page wraps the table in an inline overflow-x container; disable it in card mode. */
  #osztaly-atlagok-egyedi-wrapper {
    overflow-x: visible !important;
  }

  /* Mobile: custom JS-generated sortable tables (keep header clickable for sorting). */
  main table.sortable {
    font-family: var(--font-primary) !important; /* override any inline Arial */
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  main table.sortable th,
  main table.sortable td {
    font-family: inherit !important;
  }

  main table.sortable th {
    touch-action: manipulation;
    white-space: nowrap;
  }

  /* Mobile: sortable tables as cards (with dropdown sorting). */
  main table.sortable.gtmm-sortable-mobile-ready {
    display: none !important;
  }

  main .gtmm-sortable-mobile {
    display: block;
    margin-top: var(--spacing-sm);
    font-family: var(--font-primary);
  }

  main .gtmm-sortable-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }

  main .gtmm-sortable-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
    flex: 1 1 auto;
  }

  main .gtmm-sortable-control-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  main .gtmm-sortable-select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    background: #fff;
    color: var(--color-dark);
  }

  main .gtmm-sortable-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  main .gtmm-sortable-card {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  main .gtmm-sortable-card-title {
    font-weight: 700;
    color: var(--color-dark);
    padding: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  main .gtmm-sortable-card-body {
    padding: var(--spacing-sm);
    display: grid;
    gap: 10px;
  }

  main .gtmm-sortable-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
  }

  main .gtmm-sortable-key {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    font-weight: 600;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  main .gtmm-sortable-value {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 50%;
    text-align: right;
  }
}

/* Table operations icons */
.webform-multiple-table--operations {
  text-align: right;
  white-space: nowrap;
}

.image-button {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  transition: var(--transition-base);
  border-radius: var(--border-radius-sm);
  vertical-align: middle;
}
.image-button:hover {
  background-color: var(--color-border-light);
}

.image-button img {
  /* Assuming icons are img tags, adjust if they are background images */
  width: 18px;
  height: 18px;
  filter: grayscale(50%) opacity(0.7);
}
.image-button:hover img {
  filter: grayscale(0%) opacity(1);
}

/* --- Buttons --- */
.button,
input[type='submit'],
input[type='button'] {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-dark);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.65rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
  text-decoration: none;
}

/* Button style for <a> links outside aside */

main a:not(.button):not(.nav-link) {
  display: inline; /* behave like regular inline links */
  font-family: var(--font-primary);
  font-weight: 400; /* standard link weight */
  color: var(--color-dark); /* higher contrast on white */
  text-align: left;
  vertical-align: baseline;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 0;
  padding: 0; /* no padding for link-like appearance */
  font-size: 1rem;
  line-height: 1.2;
  border-radius: 0;
  transition: var(--transition-base);
  text-decoration: underline; /* typical link style */
  text-decoration-color: var(--color-primary); /* brand underline for differentiation */
  text-underline-offset: 0.15em; /* improve readability */
  text-decoration-thickness: 0.08em; /* slightly thicker underline */
  text-decoration-skip-ink: auto;
}

main a:not(.button):not(.nav-link):hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-dark);
}

main a:not(.button):not(.nav-link):focus-visible {
  outline: 2px dotted var(--color-primary);
  outline-offset: 2px;
  text-decoration-color: var(--color-primary-dark);
}

.button:hover,
input[type='submit']:hover,
input[type='button']:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
  color: var(--color-dark);
}

.button:focus,
input[type='submit']:focus,
input[type='button']:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.5);
}

/* .button--primary uses the same styles as .button */

/* For "Add" button in multiple item sections */
.webform-multiple-add .button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.webform-multiple-add .button:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* --- Flexbox Layouts --- */
.webform-flexbox {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--spacing-sm)); /* Negative margin for gutter */
  margin-right: calc(-1 * var(--spacing-sm));
  margin-bottom: var(--spacing-md);
}

.webform-flex {
  padding-left: var(--spacing-sm); /* Gutter */
  padding-right: var(--spacing-sm);
  box-sizing: border-box;
  margin-bottom: var(--spacing-md); /* Spacing for items if they wrap */
}

/*.webform-flex--1 { flex: 0 0 100%; max-width: 100%; }  Default for single column items */

/*@media (min-width: 768px) {
  .webform-flex--1 { flex: 0 0 50.0000%; max-width: 50.0000%; }
  .webform-flex--2 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .webform-flex--fill { flex: 1 1 0px; }*/ /* For elements that should fill remaining space */

/* Example for 2 column layout, adjust numbers as needed */

.webform-flex--container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Title-inline: stack label above input */
.webform-element--title-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webform-element--title-inline > label {
  flex-shrink: 0;
}

.webform-element--title-inline > input,
.webform-element--title-inline > select {
  min-width: 0;
}

/* --- Descriptions & Helper Text --- */
.description,
.webform-element-description {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* --- File Upload --- */
.form-managed-file {
  display: flex;
  flex-direction: column;
}
.form-managed-file input[type='file'] {
  border: 1px dashed var(--color-border);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-light);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
}
.form-managed-file input[type='file']:hover {
  border-color: var(--color-primary);
}
.form-managed-file input[type='submit'].js-hide {
  /* Drupal's auto-upload button */
  display: none !important; /* Hide if JS is handling it */
}

/* --- Utility --- */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* .js-webform-states-hidden and .js-webform-states-visible-slide follow Drupal defaults */

/* Drupal messages fallback - hide if not used, or style if needed */
.messages--error,
.messages--warning,
.messages--status {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
}
.messages--error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.messages--warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.messages--status {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.hidden[data-drupal-messages-fallback] {
  display: none;
}

/* Contextual links use Drupal's default presentation */

/* Specific overrides for very dense table elements if needed */
#edit-szulo-ertekeles-igazgato-items td > .form-item,
#edit-szulo-ertekeles-igh-items td > .form-item,
#edit-szulo-ertekeles-osztalyfonok-items td > .form-item,
#edit-szulo-ertekeles-szaktanar-items td > .form-item,
#edit-diak-ertekeles-pedagogus-items td > .form-item,
#edit-kollega-ertekeles-igazgato-items td > .form-item {
  margin-bottom: var(--spacing-xs); /* Reduce margin for very dense tables */
}

#edit-szulo-ertekeles-igazgato-items .label-answer-key,
#edit-szulo-ertekeles-igh-items .label-answer-key,
#edit-szulo-ertekeles-osztalyfonok-items .label-answer-key,
#edit-szulo-ertekeles-szaktanar-items .label-answer-key,
#edit-diak-ertekeles-pedagogus-items .label-answer-key,
#edit-kollega-ertekeles-igazgato-items .label-answer-key {
  font-size: 0.8em;
  color: var(--color-text-muted);
}

#edit-szulo-ertekeles-igazgato-items .question,
#edit-szulo-ertekeles-igh-items .question,
#edit-szulo-ertekeles-osztalyfonok-items .question,
#edit-szulo-ertekeles-szaktanar-items .question,
#edit-diak-ertekeles-pedagogus-items .question,
#edit-kollega-ertekeles-igazgato-items .question {
  margin-bottom: var(--spacing-sm); /* Space below question input in table */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exclude aside (sidebar) from animation */
.container-fluid > .row > *:not(aside),
.featured,
.content,
main,
footer {
  opacity: 0;
  animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
}

.container-fluid > .row > *:not(aside):nth-child(2) {
  animation-delay: 0.09s;
}
.container-fluid > .row > *:not(aside):nth-child(3) {
  animation-delay: 0.13s;
}

/* Sidebar */

#block-gtmm-site-branding a:last-child {
  display: none;
}

#block-gtmm-site-branding img {
  max-width: 100%;
  width: 144px;
  padding-left: 8px;
}

.nav {
  display: block;
}

aside.col-md-2 {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

aside > div {
  gap: 1em;
}

aside .mb-3 {
  margin-top: 2em !important;
}

aside .views-field-field-teljes-nev img {
  margin-right: 6px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

aside .sidebar-sticky .views-field-field-user-school h6 {
  color: var(--color-secondary) !important;
}

[class*='path--ertekeles-'] aside .sidebar-sticky .views-field-field-teljes-nev {
  font-size: 1.5em;
}

[class*='path--ertekeles-'] aside .sidebar-sticky .views-field-field-teljes-nev::before {
  content: 'Titkos kód:';
  font-weight: lighter;
  color: var(--color-secondary) !important;
  padding-bottom: 0.1em;
  display: block;
  font-size: 0.65em;
}

#block-gtmm-account-menu ul {
  padding-left: 0;
}

#block-gtmm-account-menu li {
  list-style: none;
}

#block-gtmm-account-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-dark);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.65rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-base);
  text-decoration: none;
}

#block-gtmm-account-menu a:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
  color: var(--color-dark);
}

/* Ensure logout link stays above mobile browser UI */
@media (max-width: 991.98px) {
  #block-gtmm-account-menu {
    margin-bottom: 4.5rem;
  }
}

/* SIDEBAR */

/* Ensure all headings inside the persistent sidebar are white for contrast */
.sidebar-sticky h1,
.sidebar-sticky h2,
.sidebar-sticky h3,
.sidebar-sticky h4,
.sidebar-sticky h5,
.sidebar-sticky h6 {
  color: #ffffff !important;
}

.sidebar-sticky {
  color: #ffffff !important;
}

.sidebar-sticky #block-gtmm-account-menu li {
  margin-top: var(--spacing-lg);
}

/* --- Mobile Sidebar (Off-canvas) --- */
@media (max-width: 991.98px) {
  /* Bootstrap md breakpoint just below 992 */
  body.has-offcanvas-open {
    overflow: hidden; /* Prevent background scroll when menu open */
  }

  /*
   * Bootstrap's .col-md-* layout is active from 768px and up.
   * When we convert the sidebar to position:fixed (off-canvas), it no longer
   * participates in the grid, so main would stay at 10/12 width and leave a
   * strange empty gap. Force main to full-width in the off-canvas range.
   */
  main.col-md-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .sidebar-toggle-btn {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem; /* Move to right side */
    left: auto;
    z-index: 1060; /* Above sidebar */
    background: var(--color-primary);
    color: var(--color-dark);
    border: 1px solid var(--color-primary-dark);
    padding: 0.55rem 0.65rem;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  .sidebar-toggle-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .sidebar-toggle-btn .icon-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
  }
  .sidebar-toggle-btn .icon-bar::before,
  .sidebar-toggle-btn .icon-bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
  }
  .sidebar-toggle-btn .icon-bar::before {
    top: -6px;
  }
  .sidebar-toggle-btn .icon-bar::after {
    top: 6px;
  }

  /* Convert the sidebar (aside) into an off-canvas panel */
  .row > aside.col-md-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    max-height: 100vh;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    z-index: 1050; /* Above overlay (1040) */
  }
  .row > aside.col-md-2.is-open {
    transform: translateX(0);
  }

  /* Dark translucent overlay */
  .offcanvas-backdrop-custom {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      backdrop-filter 0.25s ease;
    backdrop-filter: none; /* Explicitly none when inactive */
    will-change: opacity, backdrop-filter; /* Performance hint */
    visibility: hidden; /* Fully hide from a11y rendering when inactive */
  }
  .offcanvas-backdrop-custom.is-active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: saturate(130%) blur(1.2px); /* Subtler blur only when active */
    visibility: visible;
  }

  /* Shift main content slightly when menu open (optional) */
  main.shifted-when-menu-open {
    transition: transform 0.3s ease;
  }
  main.shifted-when-menu-open.menu-open {
    transform: translateX(220px); /* Slight parallax reveal */
  }

  /* Ensure main content has some top padding so toggle not covering content */
  main {
    padding-top: 4rem !important; /* Leaves space for fixed toggle */
  }
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .row > aside.col-md-2,
  main.shifted-when-menu-open,
  .offcanvas-backdrop-custom {
    transition: none !important;
  }
}

/* ==============================
   Login Page (Welcome) Layout
   Scoped to path--udvozoljuk so only the login page is affected
   ============================== */

/* ==============================
   Login in progress overlay
   - Shown when the body has login-in-progress
   - Blocks interaction and scroll while login completes
   ============================== */
body.login-in-progress {
  overflow: hidden !important;
  cursor: progress;
}

body.login-in-progress::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.68);
  z-index: 2147483646;
}

@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  body.login-in-progress::before {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

body.login-in-progress::after {
  content: 'Bejelentkezés folyamatban…\A Kérjük, várjon.';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-dark);
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.35;
  white-space: pre-line;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  z-index: 2147483647;
}

@media print {
  body.login-in-progress::before,
  body.login-in-progress::after {
    display: none !important;
  }
}

/* Layout grid for title, intro and the two login blocks */
.path--udvozoljuk .content > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'title'
    'intro'
    'login1'
    'login2';
  gap: var(--spacing-lg);
  position: relative; /* host for absolute logo */
}

.path--udvozoljuk #block-gtmm-oldalcime {
  grid-area: title;
}
.path--udvozoljuk #block-gtmm-content {
  grid-area: intro;
}
/* login areas mapped below (flipped order) */

@media (min-width: 992px) {
  .path--udvozoljuk .content > div {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'title title'
      'intro intro'
      'login1 login2';
  }
}

/* hero title styling defined later */

/* Gentle intro text styling */
.path--udvozoljuk #block-gtmm-content article,
.path--udvozoljuk #block-gtmm-content p {
  margin: 0;
}
/* intro visuals defined later */

/* card visuals defined later */

/* Form spacing & alignment inside cards */
.path--udvozoljuk #block-gtmm-bejelentkezes .user-login-form,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .user-login-form {
  max-width: 440px;
}

.path--udvozoljuk .user-login-form .form-item {
  margin-bottom: var(--spacing-md);
}

.path--udvozoljuk .user-login-form label {
  margin-bottom: var(--spacing-xs);
}

/* Make submit full-width for better ergonomics */
.path--udvozoljuk .user-login-form .form-actions input[type='submit'] {
  width: 100%;
}

/* ==============================
   Welcome page background using sidebar gradient
   ============================== */
.path--udvozoljuk body,
.path--udvozoljuk .dialog-off-canvas-main-canvas,
.path--udvozoljuk .container-fluid,
.path--udvozoljuk .row.min-vh-100 {
  background-image: var(--bg-dark-gradient) !important;
  background-attachment: fixed;
  background-size: cover;
}

/* Make main transparent so gradient shows through */
.path--udvozoljuk main,
.path--udvozoljuk main.bg-white {
  background: transparent !important;
}

/* backdrop styles handled later */

/* width behavior handled below */

/* link visuals defined later */

/* no hover lift */

/* Reduce container padding on very small screens */
@media (max-width: 480px) {
  .path--udvozoljuk #block-gtmm-content article > div,
  .path--udvozoljuk #block-gtmm-bejelentkezes,
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
    padding: var(--spacing-md);
  }
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .path--udvozoljuk #block-gtmm-bejelentkezes:hover,
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:hover {
    transition: none;
    transform: none;
  }
}

/* ==============================
   Welcome/Login Minimalist Overrides
   ============================== */
/* Hide sidebar and mobile menu elements on this page */
.path--udvozoljuk aside.col-md-2,
.path--udvozoljuk .sidebar-toggle-btn,
.path--udvozoljuk .offcanvas-backdrop-custom {
  display: none !important;
}

/* Expand main to full width when sidebar is hidden */
.path--udvozoljuk main.col-md-10 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-top: 0 !important; /* cancel mobile toggle spacing */
}

/* consolidated visuals in minimal section */

/* no hover lift retained */

/* Inputs: ensure consistent sizing and look */
.path--udvozoljuk .user-login-form input[type='text'],
.path--udvozoljuk .user-login-form input[type='email'],
.path--udvozoljuk .user-login-form input[type='password'],
.path--udvozoljuk .user-login-form input[type='search'],
.path--udvozoljuk .user-login-form input[type='tel'],
.path--udvozoljuk .user-login-form input[type='url'],
.path--udvozoljuk .user-login-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  min-height: 44px; /* touch-friendly */
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background-color: #fff;
}

/* submit width handled once */

/* ==============================
   Apple-like minimal styling (welcome page)
   ============================== */
/* Remove page entry animations on this page */
.path--udvozoljuk .container-fluid > .row > *:not(aside),
.path--udvozoljuk .featured,
.path--udvozoljuk .content,
.path--udvozoljuk main,
.path--udvozoljuk footer {
  animation: none !important;
  opacity: 1 !important;
}

/* Remove any residual top padding on main for this page */
.path--udvozoljuk main {
  padding-top: 0 !important;
}

/* Make the outer content wrapper transparent and padding handled by inner grid */
.path--udvozoljuk .content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important; /* remove extra bottom space to prevent scroll */
}

/* Grid spacing: slightly roomier but minimal */
.path--udvozoljuk .content > div {
  padding: clamp(16px, 2vw, 28px);
  gap: clamp(12px, 1.5vw, 20px);
}

/* Constrain overall content width and center it on wide screens */
.path--udvozoljuk main > .content > div {
  max-width: min(1280px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

/* Hero title: centered, white, generous spacing */
.path--udvozoljuk #block-gtmm-oldalcime {
  background: transparent !important;
  border: 0 !important;
  padding: clamp(16px, 5vw, 56px) 0 clamp(8px, 2.2vw, 20px) 0 !important;
  text-align: center;
}
.path--udvozoljuk #block-gtmm-oldalcime h1 {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: clamp(2.2rem, 3.5vw + 1rem, 3.6rem);
  margin-bottom: clamp(6px, 0.8vw, 12px);
}

/* Intro copy under hero: centered and light on gradient */
.path--udvozoljuk #block-gtmm-content article > div {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: center;
}
.path--udvozoljuk #block-gtmm-content p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
  margin-bottom: clamp(8px, 1.2vw, 16px);
}

/* Cards: left white (secret code), right yellow (view results) */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
  background: #fff !important;
  color: var(--color-dark);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: clamp(16px, 2vw, 28px) !important;
}
.path--udvozoljuk #block-gtmm-bejelentkezes {
  background: var(--color-primary) !important;
  color: var(--color-dark);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-lg);
  padding: clamp(16px, 2vw, 28px) !important;
}

/* Card headings */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal h2,
.path--udvozoljuk #block-gtmm-bejelentkezes h2 {
  font-weight: 700;
  margin: 0.25rem 0 0.75rem 0;
  font-size: clamp(1.15rem, 0.7vw + 1rem, 1.6rem);
}
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal h2 {
  color: var(--color-primary);
}
.path--udvozoljuk #block-gtmm-bejelentkezes h2 {
  color: #fff;
}

/* Large display titles injected before the cards */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::before,
.path--udvozoljuk #block-gtmm-bejelentkezes::before {
  content: '';
  display: block;
  font-family: var(--font-primary);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.2px;
  text-align: center; /* center pseudo-title horizontally */
  margin: 0 0 0.25rem 0;
}

/* Left card big title: Értékelek! */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::before {
  content: 'Értékelek!';
  font-size: clamp(1.8rem, 2.5vw + 0.9rem, 3.5rem);
  color: var(--color-primary);
}
/* Right card big title: Megnézem a saját eredményeimet! */
.path--udvozoljuk #block-gtmm-bejelentkezes::before {
  content: 'Megnézem a saját eredményeimet!';
  font-size: clamp(1.6rem, 2.3vw + 0.85rem, 3.4rem);
  color: #fff;
}

/* Subtitle styling under big titles (existing h2s) */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal h2,
.path--udvozoljuk #block-gtmm-bejelentkezes h2 {
  opacity: 0.95;
}

/* Minimal inputs */
.path--udvozoljuk .user-login-form input[type='text'],
.path--udvozoljuk .user-login-form input[type='password'] {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-light);
  background: #f5f6f7;
}
.path--udvozoljuk #block-gtmm-bejelentkezes .user-login-form input[type='text'],
.path--udvozoljuk #block-gtmm-bejelentkezes .user-login-form input[type='password'] {
  background: #ffffff; /* on yellow panel keep pure white */
}

/* Labels: medium weight, tighter */
.path--udvozoljuk .user-login-form label {
  font-weight: 600;
  color: var(--color-dark);
}
.path--udvozoljuk #block-gtmm-bejelentkezes label {
  color: #203047;
}

/* Buttons: left = brand yellow on white; right = dark on yellow */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .button,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[type='submit'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
  border-radius: var(--border-radius-pill); /* pill */
  padding: 0.75rem 1.25rem;
  font-weight: 800;
}
.path--udvozoljuk #block-gtmm-bejelentkezes .button,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit'] {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
  border-radius: var(--border-radius-pill); /* pill */
  padding: 0.75rem 1.25rem;
  font-weight: 800;
}
.path--udvozoljuk #block-gtmm-bejelentkezes .button:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit']:hover {
  filter: brightness(1.05);
}

/* ==============================
   Bejelentkezés buttons: subtle hover/focus effects (no movement)
   ============================== */
/* Smooth transitions */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .button,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[type='submit'],
.path--udvozoljuk #block-gtmm-bejelentkezes .button,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit'] {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

/* Left (yellow) button: gentle darken + brand ring */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .button:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[type='submit']:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .button:focus-visible,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[type='submit']:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.25);
  text-decoration: none;
}

/* Right (dark) button: slight brighten + soft light ring */
.path--udvozoljuk #block-gtmm-bejelentkezes .button:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit']:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes .button:focus-visible,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit']:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

/* Keyboard focus visible only: remove default outline */
.path--udvozoljuk #block-gtmm-bejelentkezes .button:focus,
.path--udvozoljuk #block-gtmm-bejelentkezes input[type='submit']:focus,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .button:focus,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[type='submit']:focus {
  outline: none;
}

/* Links: plain minimal */
.path--udvozoljuk .request-password-link::before {
  content: none !important;
}
.path--udvozoljuk .request-password-link {
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 600;
}
.path--udvozoljuk .request-password-link:hover {
  text-decoration: underline;
}

/* Tidy lists under forms */
.path--udvozoljuk #block-gtmm-bejelentkezes ul,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal ul {
  margin-top: 0.75rem;
}

/* Flip login blocks order: show secret code login first */
.path--udvozoljuk #block-gtmm-bejelentkezes {
  grid-area: login2;
}
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
  grid-area: login1;
}

/* ==============================
   Welcome page: hide fields/labels in Értékelek! (secret code) box
   - Hide Felhasználónév field and label entirely
   - Hide only the Jelszó label (keep input visible)
   - Hide the Jelszó visszaállítása link
   ============================== */
/* Hide the entire username form item (common Drupal classes) */
/* Note: replaced by more specific rules below; legacy block removed to avoid empty ruleset warning */
/* Defensive: if targeting by control id/name */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal label[for='edit-pass'],
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal #edit-pass,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal input[name='pass'] {
  display: none !important;
}

/* Hide only the password label; keep the input */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .form-item-pass > label,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .js-form-item-pass > label,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal label[for='edit-pass'] {
  display: none !important;
}

/* Hide the password reset link only in the left box */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .request-password-link {
  display: none !important;
}
/* Hide the password reset link in the right box as well */
.path--udvozoljuk #block-gtmm-bejelentkezes .request-password-link {
  display: none !important;
}

/* Center the form in the Értékelek! (left) card to reduce bottom whitespace */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
  display: flex;
  flex-direction: column;
}
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal .user-login-form {
  align-self: center; /* horizontal center */
  margin-top: auto; /* vertical centering via auto margins */
  margin-bottom: auto;
  width: min(460px, 100%); /* keep a tidy max width */
}
/* Mirror centering for the right (results) card */
.path--udvozoljuk #block-gtmm-bejelentkezes {
  display: flex;
  flex-direction: column;
}
.path--udvozoljuk #block-gtmm-bejelentkezes .user-login-form {
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
  width: min(460px, 100%);
}
/* If there are lists directly inside cards, center them horizontally */
.path--udvozoljuk #block-gtmm-bejelentkezes > ul,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal > ul {
  align-self: center;
}

/* ==============================
   Welcome page: full viewport and backdrop cleanup
   ============================== */
/* Override earlier width cap so layout can span viewport */
.path--udvozoljuk main > .content {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove white backdrop under hero/intro so white text stays readable */
.path--udvozoljuk .content > div {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Keep intro container fully transparent with no borders */
.path--udvozoljuk #block-gtmm-content article > div {
  background: transparent !important;
  border: 0 !important;
}

/* Ensure cards keep their intended backgrounds */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
  background: #ffffff !important;
}
.path--udvozoljuk #block-gtmm-bejelentkezes {
  background: var(--color-primary) !important;
}

/* Login box subtitles: lighter weight, dark color in both cards */
.path--udvozoljuk #block-gtmm-bejelentkezes h2,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal h2 {
  font-weight: 300 !important;
  color: var(--color-dark) !important;
  text-align: center; /* center subtitle text */
}
/* ==============================
   Subtle, smooth hover effects for login boxes
   - No transforms or layout shifts
   - Works on hover and keyboard focus-within
   ============================== */
.path--udvozoljuk #block-gtmm-bejelentkezes,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal {
  position: relative; /* host for overlay */
  /* Subtle centered shadow (no offset) */
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    background-color 240ms ease;
}

/* Soft elevation on interaction */
.path--udvozoljuk #block-gtmm-bejelentkezes:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes:focus-within,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:focus-within {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Gentle highlight sheen overlay; does not capture pointer events */
.path--udvozoljuk #block-gtmm-bejelentkezes::after,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
}

/* White card: subtle dark-to-transparent vignette for depth */
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::after {
  background:
    radial-gradient(800px circle at 65% 25%, rgba(0, 0, 0, 0.07), transparent 45%),
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  background-size:
    auto,
    250% 100%;
  background-position:
    0 0,
    -200% 0;
}

/* Yellow card: soft light spotlight */
.path--udvozoljuk #block-gtmm-bejelentkezes::after {
  background:
    radial-gradient(800px circle at 35% 20%, rgba(255, 255, 255, 0.2), transparent 46%),
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  background-size:
    auto,
    250% 100%;
  background-position:
    0 0,
    -200% 0;
}

/* Activate overlays on hover/focus */
.path--udvozoljuk #block-gtmm-bejelentkezes:hover::after,
.path--udvozoljuk #block-gtmm-bejelentkezes:focus-within::after,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:hover::after,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:focus-within::after {
  opacity: 1;
  animation: gtmmCardSheen 1.2s cubic-bezier(0.22, 1, 0.36, 1) 10ms 1 both;
}

/* Add a subtle brand-colored edge glow per card on interaction */
.path--udvozoljuk #block-gtmm-bejelentkezes:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes:focus-within {
  /* dark panel: cool edge glow */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(48, 69, 99, 0.65);
}
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:hover,
.path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:focus-within {
  /* white panel: warm brand glow */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 208, 0, 0.65);
}

@keyframes gtmmCardSheen {
  from {
    background-position:
      0 0,
      -200% 0;
  }
  to {
    background-position:
      0 0,
      200% 0;
  }
}

/* Respect reduced motion: keep visual change without motion */
@media (prefers-reduced-motion: reduce) {
  .path--udvozoljuk #block-gtmm-bejelentkezes:hover::after,
  .path--udvozoljuk #block-gtmm-bejelentkezes:focus-within::after,
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:hover::after,
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal:focus-within::after {
    animation: none;
  }
}

/* ==============================
   Welcome page: centered logo under the login boxes
   - Uses a grid-spanning ::after pseudo-element on the container
   - Keeps interactions unobstructed with pointer-events: none
   ============================== */
.path--udvozoljuk .content > div::after {
  content: '';
  /* Absolutely position so it doesn't affect layout height */
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2vh, 24px);
  transform: translateX(-50%) translateY(8px);
  /* Size and responsiveness */
  width: min(260px, 44vw);
  height: clamp(40px, 5.5vw, 80px);
  /* Logo background */
  background-image: url('../../logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Do not capture pointer events */
  pointer-events: none;
  opacity: 0.96;
}

/* ==============================
   Welcome page: move logo to top (override)
   - Disable bottom logo and show it above the hero title instead
   ============================== */
/* Hide the bottom-positioned logo */
.path--udvozoljuk .content > div::after {
  display: none !important;
}

/* Add logo above the hero title */
.path--udvozoljuk #block-gtmm-oldalcime {
  position: relative;
}
.path--udvozoljuk #block-gtmm-oldalcime::before {
  content: '';
  display: block;
  width: min(240px, 32vw);
  height: clamp(42px, 5.6vw, 84px);
  margin: 0 auto clamp(6px, 1vw, 12px);
  background-image: url('../../logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.98;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* ==============================
   Height-based compaction to fit viewport without scroll
   ============================== */
@media (max-height: 820px) {
  .path--udvozoljuk #block-gtmm-oldalcime {
    padding: clamp(12px, 4vh, 32px) 0 clamp(8px, 2vh, 16px) 0 !important;
  }
  .path--udvozoljuk #block-gtmm-oldalcime h1 {
    font-size: clamp(1.9rem, 3vw + 0.7rem, 3rem);
  }
  .path--udvozoljuk .content > div {
    gap: clamp(12px, 1.2vw, 20px);
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal,
  .path--udvozoljuk #block-gtmm-bejelentkezes {
    padding: clamp(12px, 1.6vw, 22px) !important;
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::before,
  .path--udvozoljuk #block-gtmm-bejelentkezes::before {
    font-size: clamp(1.5rem, 2.2vw + 0.7rem, 2.8rem);
  }
  .path--udvozoljuk .user-login-form .form-item {
    margin-bottom: var(--spacing-sm);
  }
  .path--udvozoljuk .content > div::after {
    bottom: clamp(8px, 1.5vh, 16px);
  }
}

/* Further compaction for shorter heights */
@media (max-height: 760px) {
  .path--udvozoljuk #block-gtmm-oldalcime {
    padding: clamp(10px, 3.5vh, 24px) 0 clamp(6px, 1.6vh, 12px) 0 !important;
  }
  .path--udvozoljuk #block-gtmm-oldalcime h1 {
    font-size: clamp(1.6rem, 2.6vw + 0.6rem, 2.6rem);
  }
  .path--udvozoljuk #block-gtmm-content p {
    margin-bottom: clamp(6px, 0.8vh, 10px);
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::before,
  .path--udvozoljuk #block-gtmm-bejelentkezes::before {
    font-size: clamp(1.3rem, 1.8vw + 0.6rem, 2.3rem);
  }
  .path--udvozoljuk .user-login-form input[type='text'],
  .path--udvozoljuk .user-login-form input[type='password'] {
    min-height: 40px;
  }
  .path--udvozoljuk .button,
  .path--udvozoljuk input[type='submit'],
  .path--udvozoljuk input[type='button'] {
    padding: 0.55rem 0.9rem;
  }
}

/* Extreme compaction for very short heights */
@media (max-height: 640px) {
  /* Hide intro paragraph to reclaim space */
  .path--udvozoljuk #block-gtmm-content {
    display: none;
  }
  .path--udvozoljuk #block-gtmm-oldalcime {
    padding: clamp(8px, 2.5vh, 16px) 0 clamp(4px, 1vh, 8px) 0 !important;
  }
  .path--udvozoljuk #block-gtmm-oldalcime::before {
    height: clamp(32px, 4.2vw, 56px);
    margin-bottom: clamp(4px, 0.8vh, 8px);
  }
  .path--udvozoljuk #block-gtmm-oldalcime h1 {
    font-size: clamp(1.4rem, 2.2vw + 0.5rem, 2.1rem);
    margin-bottom: clamp(4px, 0.6vh, 8px);
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal,
  .path--udvozoljuk #block-gtmm-bejelentkezes {
    padding: 12px !important;
  }
  .path--udvozoljuk .content > div {
    gap: 10px;
  }
}

/* Guard against horizontal overflow on the page */
.path--udvozoljuk .container-fluid {
  overflow-x: hidden;
}

/* Ensure the single-line right card title cannot cause horizontal scroll */
.path--udvozoljuk #block-gtmm-bejelentkezes::before {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-height: 700px) {
  .path--udvozoljuk #block-gtmm-content p {
    font-size: clamp(0.95rem, 1.1vw + 0.85rem, 1.05rem);
    margin-bottom: clamp(8px, 1vh, 12px);
  }
  .path--udvozoljuk #block-gtmm-oldalcime h1 {
    font-size: clamp(1.7rem, 2.4vw + 0.6rem, 2.4rem);
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal::before,
  .path--udvozoljuk #block-gtmm-bejelentkezes::before {
    font-size: clamp(1.35rem, 1.9vw + 0.6rem, 2.4rem);
  }
  .path--udvozoljuk #block-gtmm-bejelentkezes-titkos-koddal,
  .path--udvozoljuk #block-gtmm-bejelentkezes {
    padding: clamp(10px, 1.2vw, 18px) !important;
  }
  .path--udvozoljuk .content > div {
    gap: clamp(8px, 1vw, 14px);
  }
  .path--udvozoljuk .content > div::after {
    height: clamp(32px, 4.5vw, 56px);
  }
}

/* (Removed overflow clipping added for equal-distance tweak) */

/* ==============================
   Global lists with links: no bullets + subtle link styling
   - Any list item that directly contains a link loses the bullet
   - Links inside list items are subtle (non-button), without affecting nav/buttons
   ============================== */
/* Remove bullets from list items that have a direct child link */
:is(ul, ol) li:has(> a) {
  list-style: none;
}
/* Keep default UL/OL padding and link styles; only remove bullets for items with direct links */

/* (Reverted: Colorbox mobile fix and dialog animations removed) */

/* ==============================
   Minimalist checkbox styles (accessible)
   - Overrides/extends earlier checkbox rules
   - Larger click target, clean check, proper focus, disabled & mixed state
   ============================== */

/* Base label presentation for checkbox options */
label.option {
  display: inline-flex;
  align-items: center;
  /* gap: var(--spacing-sm);*/
  cursor: pointer;
}

/* Visual box */
.form-checkbox + label.option::before {
  width: 18px;
  height: 18px;
  border-radius: 4px; /* slightly more rounded for a soft look */
  border-color: var(--color-border); /* ensure consistent border color */
  background-color: #fff; /* explicit for contrast */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
}

/* Hover state (when enabled) */
.form-checkbox:not(:disabled) + label.option:hover::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.14);
}

/* Focus ring on the control */
.form-checkbox:focus-visible + label.option::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}
/* Remove default blue glow on checkbox input; rely on label ::before ring */
.form-checkbox:focus,
.form-checkbox:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Checked state: brand fill + dark check glyph */
.form-checkbox:checked + label.option::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M3.2 8.4l3 3 6-6' stroke='%23203047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Indeterminate (mixed) state */
.form-checkbox:indeterminate + label.option::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: linear-gradient(#203047, #203047);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 2px;
}

/* Disabled state */
.form-checkbox:disabled + label.option {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.form-checkbox:disabled + label.option::before {
  background-color: var(--color-light);
  border-color: var(--color-border-light);
  box-shadow: none;
}
.form-checkbox:disabled:checked + label.option::before,
.form-checkbox:disabled:indeterminate + label.option::before {
  filter: grayscale(10%) brightness(0.98);
}

/* ==============================
   Webform options as buttons (radios)
   - Styles for .webform-options-display-buttons* wrappers/labels
   - Minimalist, friendly, keyboard-accessible
   ============================== */

/* Layout for the options container */
.webform-options-display-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: stretch;
}

/* Ensure each item can size naturally */
.webform-options-display-buttons-wrapper {
  display: inline-flex;
}

/* Hide native radio visually (still accessible) */
.form-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Button-like label */
label.webform-options-display-buttons-label.option {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.55rem 0.9rem;
  min-height: 44px; /* touch-friendly */
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-border-light);
  background: #fff;
  color: var(--color-dark);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
  cursor: pointer;
}

/* Hover (enabled only) */
.form-radio:not(:disabled) + label.webform-options-display-buttons-label.option:hover {
  background: #fffbe6;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.14);
  text-decoration: none;
}

/* Focus-visible ring for keyboard users */
.form-radio:focus-visible + label.webform-options-display-buttons-label.option {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}
/* Remove default blue glow on the hidden radio, rely on label ring */
.form-radio:focus,
.form-radio:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.form-radio:checked:focus-visible + label.webform-options-display-buttons-label.option {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35) !important;
}

/* Checked/selected state */
.form-radio:checked + label.webform-options-display-buttons-label.option {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: 0px 0px 1px var(--color-dark);
}

/* Checked + hover: slight visual feedback, no movement */
.form-radio:checked + label.webform-options-display-buttons-label.option:hover {
  filter: brightness(1.02);
}

/* Disabled state */
.form-radio:disabled + label.webform-options-display-buttons-label.option {
  opacity: 0.65;
  cursor: not-allowed;
  background: #f8f9fa;
}

/* Keep the inline help icon tidy inside the label */
label.webform-options-display-buttons-label.option .webform-element-help {
  margin-left: 0.15rem;
}

/* Small screens: allow full-width stacking if desired */
@media (max-width: 520px) {
  .webform-options-display-buttons {
    gap: var(--spacing-sm);
  }
  .webform-options-display-buttons-wrapper {
    width: 100%;
  }
  label.webform-options-display-buttons-label.option {
    justify-content: space-between;
    width: 100%;
  }
}

/* Értékelés oldal */

body[class*='path--ertekeles-'] .content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

body[class*='path--ertekeles-'] .view-header {
  margin-bottom: var(--spacing-lg);
  background-color: var(--color-background);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

div[class^='view--name--ertekelo-felulet'] > .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid {
  /* background-color: red; /* debug */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid > h3 {
  font-size: 1em;
  /* overflow: hidden;*/
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  position: absolute;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3 {
  display: flex;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  border-top: 2px solid var(--color-primary);
  padding-top: var(--spacing-sm);
  align-items: stretch; /* make items match the tallest card per row */
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid__item {
  border-radius: var(--border-radius-md);
  display: flex; /* allow inner card to stretch to full item height */
}

div[class^='view--name--ertekelo-felulet'] .arckep {
  width: 180px;
  height: 180px;
  border-top-left-radius: var(--border-radius-md);
  border-top-right-radius: var(--border-radius-md);
  object-fit: cover;
  object-position: center 20%;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax {
  display: flex;
  flex-direction: column;
  /* Compact layout: image on top, tight text block below */
  justify-content: flex-start;
  align-items: stretch;
  width: 180px;
  min-height: 260px; /* base minimum; equal-height behavior comes from flex */
  background-color: var(--color-background);
  border-bottom-left-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
  text-align: center;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 150ms ease,
    transform 150ms ease;
  flex: 1 1 auto; /* fill the height of the flex item so all cards in a row match */
}

@media (max-width: 480px) {
  /* Center card rows within each ertekelo-felulet view on very small screens */
  div[class^='view--name--ertekelo-felulet'] > .view-content {
    justify-content: center;
  }

  /* Ensure each responsive-grid group is centered as a column */
  div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid {
    align-items: center;
  }

  /* Center the individual cards and keep them from stretching oddly */
  div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid__items {
    justify-content: center;
  }

  div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax {
    width: 140px;
    min-height: 240px;
    font-size: 0.85rem;
  }
  div[class^='view--name--ertekelo-felulet'] .arckep {
    width: 140px;
    height: 140px;
  }
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax:hover,
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax:focus {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  margin-bottom: 0;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax .nev {
  margin: var(--spacing-xs); /* tighter gap so text block stays compact */
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p.beosztas {
  font-weight: 300;
  text-transform: lowercase;
}
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax {
  padding-bottom: var(--spacing-xs);
}

/* Submitted card: make the green checkmark react to card hover/focus
   without changing the Drupal-generated HTML. The base visuals remain
   defined inline; here we only add transitions and a hover state. */
div[class^='view--name--ertekelo-felulet'] .submitted::after {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content.submitted:hover::after,
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content.submitted:focus-visible::after {
  transform: scale(1.08);
  background-color: #2ecc71; /* slightly brighter green on hover */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
}

/* Ensure teacher cards have equal height and handle long names/roles */
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax .nev,
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax .beosztas {
  display: flex;
  line-clamp: 2;
  -webkit-line-clamp: 2; /* show up to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.4em * 2); /* reserve space for two lines */
  align-self: center;
  align-items: center;
}

/* Show full text on hover/focus while keeping card height consistent */
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p.nev:hover,
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p.beosztas:hover,
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p.nev:focus-visible,
div[class^='view--name--ertekelo-felulet']
  .views-view-responsive-grid
  h3.field-content
  a.use-ajax
  p.beosztas:focus-visible {
  position: relative;
}

div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.use-ajax p.nev:hover::after,
div[class^='view--name--ertekelo-felulet']
  .views-view-responsive-grid
  h3.field-content
  a.use-ajax
  p.beosztas:hover::after,
div[class^='view--name--ertekelo-felulet']
  .views-view-responsive-grid
  h3.field-content
  a.use-ajax
  p.nev:focus-visible::after,
div[class^='view--name--ertekelo-felulet']
  .views-view-responsive-grid
  h3.field-content
  a.use-ajax
  p.beosztas:focus-visible::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  max-width: 260px;
  padding: 0.35rem 0.6rem;
  border-radius: var(--border-radius-sm);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.85em;
  line-height: 1.3;
  white-space: normal;
  z-index: 20;
}
div[class^='view--name--ertekelo-felulet'] .views-view-responsive-grid h3.field-content a.question-mark-link {
  text-decoration: none;
  position: absolute;
  right: 0px;
}

.submitted::after {
  width: 24px;
  height: 24px;
  margin: auto;
  background-color: var(--color-success) !important;
  font-size: 0.75em !important;
}

/* Hide Drupal AJAX throbbers globally (redundant in GTMM UI). */
.ajax-progress,
.ajax-progress-throbber,
.ajax-throbber,
.ajax-progress-throbber .throbber,
.throbber {
  display: none !important;
}

div[class^='view--name--ertekelo-felulet'] .ajax-progress-throbber {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Külső progress box */
.progress {
  position: relative !important;
  background: #f1f1f1 !important;
  border-radius: 10px !important;
  height: 100px !important;
  width: 100% !important;
  margin: 5px !important;
  overflow: hidden !important;
  border: 0px !important;
}

/* Kitöltött rész */
.progress__bar {
  background: linear-gradient(90deg, #4caf50, #2e7d32) !important;
  height: 100% !important;
  transition: width 0.4s ease !important;
  border-radius: 10px !important;
}

/* Bal oldali szöveg (pl. 0/59 kész) */
.progress__description {
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: #000 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Jobb oldali szöveg (pl. 20%) */
.progress__percentage {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: #000 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Középen a fő szöveg (pl. 950/1000 létrehozva...) */
.progress__label {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 14px !important;
  color: #000 !important;
  font-weight: bold !important;
  white-space: nowrap !important;
}

.progress__track {
  border: 0px !important;
  width: 100% !important;
  background: transparent !important;
}
.cug-confirm-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

nav.pager ul.pager__items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px; /* távolság az elemek között */
  padding: 0;
  margin: 20px 0;
  list-style: none;
}

nav.pager ul.pager__items li {
  display: inline-flex;
}

nav.pager ul.pager__items li.pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%; /* kör alak */
  border: 1px solid #ddd;
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

nav.pager ul.pager__items li.pager__item a:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

nav.pager ul.pager__items li.pager__item.is-active a {
  background: #007bff;
  color: #fff;
  font-weight: bold;
  border-color: #007bff;
  cursor: default;
}

/* Első/Előző/Következő/Utolsó -> kapszula alak */
nav.pager ul.pager__items li.pager__item--previous a,
nav.pager ul.pager__items li.pager__item--next a,
nav.pager ul.pager__items li.pager__item--first a,
nav.pager ul.pager__items li.pager__item--last a {
  border-radius: 18px;
  padding: 0 14px;
  min-width: auto;
  height: 36px;
}

/* ==============================
   Dashboard institutions view - mobile layout
   ============================== */
@media (max-width: 600px) {
  /* One card per row, full width */
  .ErtekelesEgyeni > .item-list {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 1.25rem 1.1rem;
    border-radius: 14px;
  }

  /* Give each institution card its own block spacing */
  .view--name--intezmenyek .views-view-responsive-grid__item-inner,
  .view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner,
  .view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner {
    padding: 1.25rem 1.1rem;
    border-radius: 14px;
  }

  /* Make titles multi-line and readable */
  .view--name--intezmenyek .views-view-responsive-grid__item-inner .views-field-name,
  .view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner .views-field-name,
  .view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner .views-field-name {
    height: auto;
    min-height: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    white-space: normal;
  }

  /* Lists: more vertical breathing room */
  .view--name--intezmenyek .views-view-responsive-grid__item-inner ul,
  .view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul,
  .view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul {
    margin: 0.35rem 0 0.75rem 0;
  }

  .view--name--intezmenyek .views-view-responsive-grid__item-inner ul li,
  .view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul li,
  .view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul li {
    margin-bottom: 0.15rem;
  }

  /* Links: slightly smaller but clear */
  .view--name--intezmenyek .views-view-responsive-grid__item-inner ul li a,
  .view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul li a,
  .view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul li a {
    font-size: 0.95rem;
  }
}

/* Lightbox */

/* Host stacking context for overlay */
.dialog-off-canvas-main-canvas {
  position: relative;
  /* isolation:isolate;  Uncomment if other stacking contexts interfere */
}

/* Always create the overlay pseudo-element so we can transition opacity */
.dialog-off-canvas-main-canvas::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 26, 0.45);
  z-index: 1000; /* keep below jQuery UI dialog */
  pointer-events: none; /* do not capture clicks; dialog remains interactive */
  opacity: 0;
  transition: opacity 250ms ease;
}

/* Fade in when a lightbox is active */
.dialog-off-canvas-main-canvas.lightbox-active::after {
  opacity: 1;
}

/* Ensure the lightbox sits above the dim overlay and animate in/out */
.ng-lightbox.ui-widget {
  font-family: var(--font-family-base);
  color: var(--color-light);
  z-index: 1002;
  border-radius: var(--border-radius-lg);
  background-color: rgba(255, 255, 255, 1);
  backdrop-filter: blur(24px) brightness(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  padding: 0;
}

/* ==============================
   Responsive grid horizontal -> single column on tablet and below
   ============================== */
@media (max-width: 992px) {
  .views-view-responsive-grid.views-view-responsive-grid--horizontal {
    display: flex;
    flex-direction: column;
  }

  .views-view-responsive-grid.views-view-responsive-grid--horizontal > .views-view-responsive-grid__items {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .views-view-responsive-grid.views-view-responsive-grid--horizontal
    > .views-view-responsive-grid__items
    > .views-view-responsive-grid__item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*
 * Responsive lightbox sizing
 * ---------------------------
 * Drupal/jQuery UI receives a fixed width (e.g. 1100px) via data-dialog-options.
 * That width is applied inline on the .ui-dialog element and is updated on
 * viewport resize by jQuery UI, which keeps the pixel width and can cause the
 * dialog to overflow on small screens.
 *
 * We keep the large desktop width as a *max-width* but allow the dialog to
 * shrink with the viewport. The max() call ensures there is still a sensible
 * minimum width on very narrow screens.
 */
.ng-lightbox.ui-widget.ui-dialog {
  box-sizing: border-box;
  /* Never exceed viewport width, keep small horizontal padding */
  max-width: min(1100px, 100vw - 32px);
  /* Allow dialog to shrink, but avoid becoming unusably narrow */
  width: min(100%, max(320px, 100vw - 32px));
}

@media (max-width: 768px) {
  .ng-lightbox.ui-widget.ui-dialog {
    /* On small screens, let it breathe a bit more */
    max-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
  }
}

.ng-lightbox.ui-widget .ui-widget-header {
  background-color: transparent;
  border: none;
  color: var(--color-dark);
  font-weight: 600;
  font-size: 1.5rem;
  padding: var(--spacing-sm) var(--spacing-md);
}

.ng-lightbox.ui-widget .ui-widget-header .ui-dialog-title {
  border-bottom: 2px solid var(--color-primary);
  /*text-shadow: 0 1px 3px rgba(0,0,0,0.4);*/
  width: 100%;
}

.ng-lightbox.ui-widget .author-avatar {
  border-radius: 100% !important;
  margin-right: 12px !important;
  object-position: top;
}

.ng-lightbox.ui-widget.ui-widget-content,
.ng-lightbox.ui-widget .ui-dialog-buttonpane {
  border: none;
}
.ng-lightbox.ui-widget.ui-widget-content label {
  color: var(--color-dark);
}

.ng-lightbox.ui-widget fieldset,
.ng-lightbox.ui-widget .ui-dialog-buttonpane {
  background-color: transparent;
}

.ng-lightbox.ui-widget .fieldset-legend,
.ng-lightbox.ui-widget .form-item-szoveges-megjegyzes label {
  color: var(--color-dark);
  /*text-shadow: 0 1px 3px rgba(0,0,0,0.4);*/
}

.ng-lightbox.ui-widget .webform-options-display-buttons-label,
.ng-lightbox.ui-widget textarea {
  border-radius: var(--border-radius-lg);
  border: 1px solid;
  background-color: white;
  color: var(--color-dark);
}

.ng-lightbox.ui-widget
  .webform-options-display-buttons
  input:checked:focus
  + label.webform-options-display-buttons-label {
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}

.ng-lightbox.ui-widget .webform-element-help:focus,
.ng-lightbox.ui-widget .webform-element-help:active,
.ng-lightbox.ui-widget .webform-element-help:hover {
  background-color: var(--color-primary);
  border-color: var(--color-dark);
}

.ng-lightbox.ui-widget legend {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.ng-lightbox.ui-widget .node--type--intezmenyi-ertekeles .form-required::after {
  display: none;
}

/* Lightweight entrance/exit animation using classes applied by JS */
.ng-lightbox.ui-widget.gtmm-animate {
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  will-change: opacity, transform;
}
.ng-lightbox.ui-widget.gtmm-animate:not(.gtmm-open) {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.ng-lightbox.ui-widget.gtmm-animate.gtmm-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==============================
   Lightbox: primary action, close button, and selects
   - Ensure key controls match brand styling and accessibility
   ============================== */

/* Tidy the button pane layout */
.ng-lightbox.ui-widget .ui-dialog-buttonpane {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

/* Primary submit button inside the lightbox */
.ng-lightbox.ui-widget .webform-button--submit {
  font-family: var(--font-family-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: none;
  transition:
    filter 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}
.ng-lightbox.ui-widget .webform-button--submit:hover {
  filter: brightness(0.9);
}
.ng-lightbox.ui-widget .webform-button--submit:active {
  transform: scale(0.98);
}
.ng-lightbox.ui-widget .webform-button--submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}
.ng-lightbox.ui-widget .webform-button--submit:disabled,
.ng-lightbox.ui-widget .webform-button--submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ensure jQuery UI button styling doesn't override our primary */
.ng-lightbox.ui-widget .ui-dialog-buttonpane .ui-button.webform-button--submit {
  background: var(--color-primary) !important;
  border: 1px solid transparent !important;
  color: var(--color-dark) !important;
  border-radius: var(--border-radius-lg) !important;
}

/* Titlebar spacing to make room for the close button */
.ng-lightbox.ui-widget .ui-dialog-titlebar {
  position: relative;
  padding-right: calc(var(--spacing-md) + 48px);
  background-color: var(--color-dark);
  color: white;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Close button: circular, high-contrast, keyboard-friendly */
.ng-lightbox.ui-widget .ui-dialog-titlebar-close {
  position: absolute;
  top: 16px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* High-contrast styling for dark headers */
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: transparent; /* hide fallback text visually, keep SR via aria-label */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}
.ng-lightbox.ui-widget .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}
.ng-lightbox.ui-widget .ui-dialog-titlebar-close:active {
  transform: scale(0.98);
}
.ng-lightbox.ui-widget .ui-dialog-titlebar-close:focus-visible {
  outline: none;
  /* Light ring for visibility on dark headers */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
/* Hide default jQuery UI icon and inject our own */
.ng-lightbox.ui-widget .ui-dialog-titlebar-close .ui-icon,
.ng-lightbox.ui-widget .ui-dialog-titlebar-close .ui-button-icon,
.ng-lightbox.ui-widget .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}
.ng-lightbox.ui-widget .ui-dialog-titlebar-close::before {
  content: '';
  width: 16px;
  height: 16px;
  /* Light icon so it remains visible on dark headers */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M3 3l10 10M13 3L3 13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.96;
}

/* Selects: dark translucent, chevron, proper focus states */
.ng-lightbox.ui-widget .js-form-type-select select {
  /* Button-like select styling */
  width: fit-content;
  width: auto !important; /* override earlier full-width */
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 2.2rem 0.6rem 1rem; /* room for chevron */
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23203047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  transition:
    filter 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease,
    background-color 140ms ease;
}
.ng-lightbox.ui-widget .js-form-type-select select:hover {
  filter: brightness(0.9);
}
.ng-lightbox.ui-widget .js-form-type-select select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}
.ng-lightbox.ui-widget .js-form-type-select select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Placeholder/empty selection: show muted text color when the empty option is selected */
.ng-lightbox.ui-widget .js-form-type-select select:has(option[value='']:checked) {
  color: var(--color-dark);
}
.ng-lightbox.ui-widget .js-form-type-select select option[value=''],
.ng-lightbox.ui-widget .js-form-type-select select option[hidden] {
  color: var(--color-secondary);
}

/* Multi-select / listbox variants */
.ng-lightbox.ui-widget .js-form-type-select select[multiple],
.ng-lightbox.ui-widget .js-form-type-select select[size]:not([size='0']):not([size='1']) {
  width: 100%; /* keep listboxes full width for readability */
  min-height: 120px;
  padding-right: 0.75rem; /* no arrow space */
  background-image: none; /* remove chevron for listboxes */
  overflow-y: auto;
}

/* Keep labels readable next to the darker field chrome */
.ng-lightbox.ui-widget .js-form-type-select > label {
  color: var(--color-dark);
}

/* Dropdown options styling (browser support varies; safe fallbacks used) */
.ng-lightbox.ui-widget .js-form-type-select select option {
  /* Keep dropdown readable over white menus; avoid brand highlights */
  background-color: #ffffff;
  color: var(--color-dark);
  border-radius: 0;
}
.ng-lightbox.ui-widget .js-form-type-select select option:hover {
  background-color: #ffffff; /* no extra highlight */
}
.ng-lightbox.ui-widget .js-form-type-select select option:checked {
  background-color: #ffffff; /* rely on contrast only */
  color: var(--color-dark);
}
.ng-lightbox.ui-widget .js-form-type-select select option:disabled {
  color: var(--color-text-muted);
}
.ng-lightbox.ui-widget .js-form-type-select select optgroup {
  color: var(--color-secondary);
  background-color: #ffffff;
  font-weight: 600;
}

.ng-lightbox.ui-widget .webform-submission-form .webform-options-display-buttons {
  flex-direction: row;
}

/* Hide legacy IE dropdown arrow if present */
.ng-lightbox.ui-widget .js-form-type-select select::-ms-expand {
  display: none;
}

/* Mobil értékelés */

.node--type--intezmenyi-ertekeles .webform-submission-form .webform-options-display-buttons {
  flex-direction: column;
}

.node--type--intezmenyi-ertekeles .webform-submission-form .webform-options-display-buttons .js-form-item {
  margin-bottom: 0;
}

.node--type--intezmenyi-ertekeles .webform-submission-form .webform-options-display-buttons-wrapper {
  margin: 0;
}

.node--type--intezmenyi-ertekeles .webform-submission-form fieldset {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.node--type--intezmenyi-ertekeles
  .webform-options-display-buttons
  input:checked:focus
  + label.webform-options-display-buttons-label {
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.35);
}
.webform-submission-form .form-item-osztaly,
.webform-submission-form .form-item-egyseg {
  display: none;
}
.js-form-item-nem-tudom-ertekelni {
  margin-top: 20px;
}

/* On smaller screens, add breathing room between stacked answer options.
 * We add spacing on the wrapper so the full button block gets separated
 * only when options are rendered one-per-row (small viewports).
 */
@media (max-width: 768px) {
  .node--type--intezmenyi-ertekeles .webform-submission-form .webform-options-display-buttons-wrapper {
    margin-bottom: 0.75rem;
  }

  /* Avoid extra gap after the very last group in a question */
  .node--type--intezmenyi-ertekeles .webform-submission-form .webform-options-display-buttons-wrapper:last-child {
    margin-bottom: 0;
  }
}

/* --- Kattintható értékelés link (gomb) --- */
.ertekeles-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--color-primary) !important;
  color: var(--color-dark) !important;
  border: 1px solid var(--color-primary) !important;
  text-decoration: none !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  font-size: 9.5pt !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
  user-select: none !important;
}

.ertekeles-link:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-dark) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
}

/* --- Inaktív (nem kattintható) badge --- */
.ertekeles-link-disabled {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #e0e0e0 !important;
  color: #555 !important;
  font-size: 9pt !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* --- Saját értékelések összesítése nézet --- */

/* A fő konténer ne legyen grid */
.ErtekelesEgyeni {
  display: block;
}

/* Minden item-list legyen kártya */
.ErtekelesEgyeni > .item-list {
  background: #fff;
  padding: 1.4rem;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  display: inline-block; /* hogy egymás mellé kerüljenek */
  width: calc(33% - 20px); /* 3 oszlop */
  margin: 10px; /* térköz */
  vertical-align: top;
}

/* Tablet nézet – 2 oszlop */
@media (max-width: 1000px) {
  .ErtekelesEgyeni > .item-list {
    width: calc(50% - 20px);
  }
}

/* Mobil nézet – 1 oszlop */
@media (max-width: 600px) {
  .ErtekelesEgyeni > .item-list {
    width: 100%;
    margin: 10px 0;
  }
}

/* A címek (2025, 2026) megmaradjanak szépen */
.ErtekelesEgyeni > .item-list h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}
#views-exposed-form-ertekelok-intezmenyenkent-page-1 .form-select {
  width: auto !important;
  padding-right: 40px;
}

.view--name--intezmenyek .views-view-responsive-grid__item-inner,
.view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner,
.view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.view--name--intezmenyek .views-view-responsive-grid__item-inner ul,
.view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul,
.view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 1rem 0;
}

.view--name--intezmenyek .views-view-responsive-grid__item-inner ul li,
.view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul li,
.view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.1rem;
}

.view--name--intezmenyek .views-view-responsive-grid__item-inner ul li::before,
.view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner ul li::before,
.view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  background: #4a90e2;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.view--name--intezmenyek .views-view-responsive-grid__item-inner .views-field-name,
.view--name--etikus-szerkesztes-admin .views-view-responsive-grid__item-inner .views-field-name,
.view--name--etikus-szerkesztes-fenntarto .views-view-responsive-grid__item-inner .views-field-name {
  /*height:50px;*/
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 14pt;
}

#views-exposed-form-ertekelesek-page-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

#views-exposed-form-ertekelesek-page-1 .form-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#views-exposed-form-ertekelesek-page-1 select {
  width: auto !important;
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

/* A submit gomb igazítása */
#views-exposed-form-ertekelesek-page-1 .form-actions {
  display: flex;
  align-items: flex-end;
  margin-top: 6px;
}
#views-exposed-form-ertekelesek-page-1 .form-actions input[type='submit'] {
  margin: 0;
}
#views-exposed-form-ertekelesek-page-1 .form-actions input[type='submit'] {
  background: var(--color-primary);
  color: var(--color-dark);
  border: 1px solid var(--color-primary);
  padding: 0.45rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover állapot */
#views-exposed-form-ertekelesek-page-1 .form-actions input[type='submit']:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Aktív kattintás */
#views-exposed-form-ertekelesek-page-1 .form-actions input[type='submit']:active {
  background: var(--color-primary-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(1px);
}

.form-item-szaktanarkent-nem-tanit {
  margin-top: 20px;
}
.form-item-szaktanarkent-nem-tanit label {
  font-weight: bold !important;
  display: block !important;
}
.form-item-szaktanarkent-nem-tanit label::after {
  content: 'Jelöld be, ha az osztályfőnököd nem tanít neked egy tantárgyat sem.';
  display: block;
  margin-top: 4px;
  margin-left: 25px;
  color: #666; /* szöveg színe */
  font-size: 0.875rem; /* opcionális */
}

.content .webform-options-display-buttons label.webform-options-display-buttons-label {
  text-align: left !important;
}
.qr-alt-text {
  display: none;
}
.route--view-teszt-page-1 .content-before {
  display: none !important;
}

.gtmmteszt :is(ul, ol) li:has(> a) {
  list-style: revert !important;
}

.test-view-groups .role-block {
  margin-bottom: 0px !important;
  background-color: white !important;
  padding: var(--spacing-md) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: transparent !important;
}

#ertekeles-kimenet {
  margin: 15px;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: transparent !important;
}
.route--view-teszt-page-1 .content {
  margin-bottom: 0px !important;
}
#kerdessor-header {
  padding-left: 20px;
}

/*.download-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 8px !important;
  background-color: #0074D9 !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease-in-out !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

.download-link:hover {
  background-color: #005fa8 !important;
}

.download-link::before {
  content: "📄" !important;
  font-size: 18px !important;
  display: inline-block !important;
  line-height: 1 !important;
}*/

.gtmmteszt ul {
  margin-top: 8px;
}

.view--name--gyik-szulo p[dir='ltr'] strong {
  font-size: 16pt;
  color: var(--color-secondary);
  display: inherit;
  margin-top: 40px;
}

#block-gtmm-views-block-gyik-blokk-block-1 {
  margin-top: 30px;
}
.form-item-csoport {
  display: none;
}
#block-gtmm-content .form-item-mail,
#edit-current-pass--description {
  display: none;
}
#block-gtmm-main-menu li span {
  font-weight: bold;
}
.key {
  margin-left: 2px;
}
#edit-account input {
  height: 30px;
  border-radius: 5px;
}
.usericon {
  float: left;
}
.views-field-field-teljes-nev .field-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==============================
   Statisztika oldalak
   ============================== */

/* Chart/table footer area wrapper: keep card background, but remove huge top margin */
body[class*='route--view-ertekelesek-osszesitese'] #view-footer-columns > div {
  margin: var(--spacing-lg) auto var(--spacing-lg) !important;
  background-color: var(--color-background) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-md) !important;
}

body[class*='route--view-evenkenti-osszesites'] #view-footer-columns > div {
  margin: var(--spacing-lg) auto var(--spacing-lg) !important;
  background-color: var(--color-background) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-md) !important;
}

/* Pull the breakdown/table section a bit closer as well */
body[class*='route--view-ertekelesek-osszesitese'] #view-footer-table {
  margin-top: var(--spacing-lg);
}

body[class*='route--view-evenkenti-osszesites'] #view-footer-table {
  margin-top: var(--spacing-lg);
}

/* Doughnut charts (gtmm-chart-*) – responsive layout (CSS-only overrides) */
body[class*='route--view-ertekelesek-osszesitese'] #view-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--spacing-md);
  align-items: stretch;
}

/* Quote cards (Szöveges visszajelzések): remove white box styling */
body[class*='route--view-ertekelesek-osszesitese'] .quote-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--border-radius-md) !important;
}
body[class*='route--view-ertekelesek-osszesitese'] .quote-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Summary cards: dark header with white text */
body[class*='route--view-ertekelesek-osszesitese'] .summary-card-full > h3 {
  background: var(--color-text) !important;
  color: #ffffff !important;
}

/* ── Doughnut card layout ── */

/* Card: fill available grid cell evenly */
.gtmm-chart-doughnut {
  min-width: 0;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm);
  max-width: 100%;
}

/* Push download button to the bottom of the card */
.gtmm-chart-doughnut > .chart-download-btn {
  margin-top: auto !important;
  align-self: flex-start;
}

/* Inner wrapper fills its card */
.gtmm-chart-doughnut .gtmm-chart__inner {
  width: 100% !important;
  max-width: 100%;
}

/* Two-column container: canvas + legend side-by-side */
.gtmm-chart-doughnut .gtmm-chart__container-doughnut {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}

/* Runtime stacked mode driven by actual card width (ResizeObserver) */
.gtmm-chart-doughnut.gtmm-chart--stacked .gtmm-chart__container-doughnut {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.gtmm-chart-doughnut.gtmm-chart--stacked .gtmm-chart__col-canvas {
  align-items: center;
  width: min(220px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.gtmm-chart-doughnut.gtmm-chart--stacked .gtmm-chart__col-legend {
  width: 100%;
}

/* Canvas column: fixed size, never shrink */
.gtmm-chart-doughnut .gtmm-chart__col-canvas {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 1;
}

/* Responsive canvas sizing: shrink proportionally in narrow cards */
.gtmm-chart-doughnut canvas {
  width: min(220px, 100%) !important;
  max-width: 220px !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  display: block;
}

/* Legend column: take remaining space, never overflow */
.gtmm-chart-doughnut .gtmm-chart__col-legend {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Legend rows: badge column + text column */
.gtmm-legend-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gtmm-legend-row:last-child {
  border-bottom: none;
}

.gtmm-legend-row > span:first-child {
  flex-shrink: 0 !important;
}

.gtmm-legend-label {
  flex: 1 1 0%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Legend badge: ensure numbers never overflow their background */
.gtmm-chart-doughnut .gtmm-chart__col-legend span[style*='background'] {
  white-space: nowrap !important;
}

/* Consistent card title height: clamp to 2 lines max */
.gtmm-chart-doughnut h5 {
  min-height: 2.6em;
  line-height: 1.3;
  display: -webkit-box !important;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Compact mode: side-by-side but smaller canvas (ResizeObserver 400–560px) ── */
.gtmm-chart-doughnut.gtmm-chart--compact canvas {
  width: min(140px, 100%) !important;
  max-width: 140px !important;
}

.gtmm-chart-doughnut.gtmm-chart--compact .gtmm-legend-row {
  font-size: 9pt;
}

.gtmm-chart-doughnut.gtmm-chart--compact .gtmm-chart__container-doughnut {
  gap: 12px !important;
}

/* ── Tablet fine-tuning ── */
@media (max-width: 992px) {
  .gtmm-chart-doughnut .gtmm-chart__container-doughnut {
    gap: 16px !important;
  }
}

/* ── Mobile: let grid handle single-column, only adjust card internals ── */
@media (max-width: 768px) {
  body[class*='route--view-ertekelesek-osszesitese'] #view-footer {
    grid-template-columns: 1fr;
  }

  .gtmm-chart-doughnut {
    padding: var(--spacing-md) !important;
    box-sizing: border-box;
  }

  /* Keep row layout when there's room; card-width class switches to stacked when impractical */
  .gtmm-chart-doughnut .gtmm-chart__container-doughnut {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .gtmm-chart-doughnut .chart-download-btn {
    width: 100%;
    max-width: 420px;
  }
}

/* ── Extra-small: reduce card padding ── */
@media (max-width: 400px) {
  .gtmm-chart-doughnut {
    padding: var(--spacing-sm) !important;
  }
}

/* Értékelések összesítése – header kártya */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header {
  margin-bottom: var(--spacing-lg);
  background: transparent;
  padding: 0 0 var(--spacing-md) 0;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-light);

  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xs);
  align-items: start;
}

/* Remove hard line breaks inside header; layout handles spacing */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > br {
  display: none;
}

/* Action buttons (Vissza + PDF) */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0;
}

/* Button placement: Vissza first, PDF next to it */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn-back {
  grid-row: 1;
  grid-column: 1;
}
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn.js-print-pdf {
  grid-row: 1;
  grid-column: 2;
}

/* Back button (not bootstrap primary): light/neutral treatment */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn-back {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-dark);
}
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn-back:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-dark);
  text-decoration: none;
}

/* Avatar */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > img.arckep {
  grid-column: 1;
  grid-row: 2 / span 3;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0;
  float: none;
}

/* Title stack */
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > h4 {
  grid-column: 2 / -1;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secondary);
}
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > h1 {
  grid-column: 2 / -1;
  margin-top: -10px;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.15;
  word-break: break-word;
  margin-bottom: 10px;
}
body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > .position {
  display: block;
  font-weight: bold;
  color: var(--color-text-muted);
  margin-top: -20px;
  line-height: 1.3;
}

body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > i {
  grid-column: 2 / -1;
  display: block;
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: -25px;
  line-height: 1;
}

/* Small screens: show buttons side-by-side, then center avatar + titles */
@media (max-width: 520px) {
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header {
    grid-template-columns: auto auto 1fr;
    row-gap: var(--spacing-sm);
  }

  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn-back {
    grid-column: 1;
    justify-self: start;
  }
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > a.btn.js-print-pdf {
    grid-column: 2;
    justify-self: start;
  }

  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > img.arckep {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > h4,
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > h1,
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > i,
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > .position {
    grid-column: 1 / -1;
    text-align: center;
  }
  body[class*='route--view-ertekelesek-osszesitese'] .view--name--ertekelesek-osszesitese header > i {
    margin-top: -15px;
  }
}

/* Évenkénti összesítés – header kártya (statisztika nézet) */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header {
  margin-bottom: var(--spacing-lg);
  background: transparent;
  padding: 0 0 var(--spacing-md) 0;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-light);

  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xs);
  align-items: start;
}

/* Remove hard line breaks inside header; layout handles spacing */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > br {
  display: none;
}

/* Action buttons (Vissza + PDF) */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-decoration: none;
  /* Add breathing room between the action buttons and the header content below. */
  margin-bottom: var(--spacing-xs);
}

/* Button placement: Vissza first, PDF next to it */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn-back {
  grid-row: 1;
  grid-column: 1;
}
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn.js-print-pdf {
  grid-row: 1;
  grid-column: 2;
}

/* Back button (not bootstrap primary): light/neutral treatment */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn-back {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-dark);
}
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn-back:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-dark);
  text-decoration: none;
}

/* Avatar */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > img.arckep {
  grid-column: 1;
  grid-row: 2 / span 3;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0;
  float: none;
}

/* Title stack */
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h4 {
  grid-column: 2 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secondary);
}
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h1 {
  grid-column: 2 / -1;
  grid-row: 3;
  margin: 0;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.15;
  word-break: break-word;
}
body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > i {
  grid-column: 2 / -1;
  grid-row: 4;
  display: block;
  font-style: normal;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.3;
}

/* Small screens: show buttons side-by-side, then center avatar + titles */
@media (max-width: 520px) {
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header {
    grid-template-columns: auto auto 1fr;
    row-gap: var(--spacing-sm);
  }

  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn {
    margin-bottom: var(--spacing-sm);
  }

  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn-back {
    grid-column: 1;
    justify-self: start;
  }
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > a.btn.js-print-pdf {
    grid-column: 2;
    justify-self: start;
  }

  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > img.arckep {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h4,
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h1,
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > i {
    grid-column: 1 / -1;
    text-align: center;
  }
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h4 {
    grid-row: 3;
  }
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > h1 {
    grid-row: 4;
  }
  body[class*='route--view-evenkenti-osszesites'] .view--name--evenkenti-osszesites header > i {
    grid-row: 5;
  }
}
.tippy-box {
  min-width: 300px;
}
#block-gtmm-oldalcime h1 {
  /* display:none;*/
}
.js-form-item-osztalyfonok,
.form-item-ofo-mentor {
  display: none;
}
.placeholder {
  vertical-align: top;
  cursor: unset;
  background-color: unset;
}

/* ── Maintenance Mode ── */

body.maintenance-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(178deg, var(--color-text) 0%, var(--color-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.maintenance-page .dialog-off-canvas-main-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: var(--spacing-xl);
  box-sizing: border-box;
}

body.maintenance-page header[role='banner'] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

body.maintenance-page header[role='banner'] a[rel='home'] img {
  width: 260px;
  max-width: 80vw;
  height: auto;
  display: block;
}

body.maintenance-page header[role='banner'] h1 {
  display: none;
}

body.maintenance-page main[role='main'] {
  text-align: center;
  max-width: 560px;
  margin-top: var(--spacing-xl);
  padding: 0 var(--spacing-lg);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

body.maintenance-page main[role='main'] h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 var(--spacing-md) 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

body.maintenance-page .maintenance-message {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
}

body.maintenance-page main[role='main']::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-sm);
  margin: 0 auto var(--spacing-xl);
}

body.maintenance-page .maintenance-contact {
  margin-top: var(--spacing-xl);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

body.maintenance-page .maintenance-contact a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: var(--transition-base);
}

body.maintenance-page .maintenance-contact a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

body.maintenance-page .visually-hidden.focusable:focus {
  background: var(--color-background);
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

@media (max-width: 600px) {
  body.maintenance-page header[role='banner'] a[rel='home'] img {
    width: 200px;
  }
  body.maintenance-page main[role='main'] h1 {
    font-size: 1.2rem;
  }
  body.maintenance-page main[role='main'] {
    font-size: 0.95rem;
    margin-top: var(--spacing-lg);
  }
}