/* A tíz százalékkal kisebb alapméretekhez sűrűbb, felül induló munkaterület. */
html, body { min-width: 320px; }
.main-content { --page-title-size: clamp(28.8px, 2.34vw, 37.8px); padding: 12px 24px 28px; }
.breadcrumb { flex: 1; max-width: none; padding: 8px 0; font-size: 12px; line-height: 1.5; white-space: normal; }
.breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb li > svg { flex: 0 0 auto; }
.breadcrumb a, .breadcrumb li > span { color: #91a9c9; }
.breadcrumb a:hover { color: #ebce93; }
.breadcrumb a:focus-visible { outline: 2px solid #e1c27e; outline-offset: 3px; border-radius: 2px; }
.breadcrumb strong { color: #d7e4f5; font-weight: 650; overflow-wrap: anywhere; }
.topbar-spacer { flex: 0; min-width: 0; }
.topbar > .icon-button, .topbar > .popover-wrap { flex-shrink: 0; }
.page-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; border-bottom: 1px solid #263b54; }
.page-tools > nav.page-tabs { flex: 1 1 auto; margin: 0; border: 0; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-bottom: 5px; }
.page-actions > .primary-button, .page-actions > .secondary-button { min-height: 38px; }
.page-actions button:disabled { opacity: .4; cursor: not-allowed; }
.roster-heading-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.roster-panel-heading > div:first-child { flex: 1; min-width: 120px; }
.roster-heading-tools > .primary-button, .roster-heading-tools > .secondary-button { min-height: 38px; font-size: 12.6px; }
.account-password-card { grid-column: 1 / -1; }
.account-password-card form > .primary-button { margin-top: 16px; }
.personnel-heading-actions, .personnel-actions { gap: 8px; }

/* Az összesítők egy sor magasak, a névsor kapja a rendelkezésre álló teret. */
.roster-stats { gap: 10px; margin-bottom: 14px; }
.roster-stat { min-height: 70px; padding: 12px 16px; gap: 12px; align-items: center; flex-direction: row; }
.roster-stat-icon { width: 36px; height: 36px; border-radius: 10px; }
.roster-stat-icon .personnel-emoji { font-size: 21px; }
.roster-stat > div { gap: 3px; }
.roster-stat > div > span { font-size: 12px; line-height: 1.35; }
.roster-stat strong { font-size: 28px; }
.roster-stat strong small { margin-left: 5px; font-size: 12px; }
.roster-panel-heading { padding: 14px 18px 10px; gap: 12px; }
.roster-panel-heading h2 { margin-bottom: 4px; }
.roster-panel-heading p { font-size: 12px; line-height: 1.5; }
.roster-sort { gap: 7px; }
.roster-sort select { min-height: 36px; }
.roster-controls { padding: 0 18px; }
.roster-basic-filters, .fleet-basic-filters { gap: 10px; }
.roster-filter { gap: 4px; }
.roster-search, .roster-filter select, .roster-more { min-height: 38px; }
.roster-search input { height: 36px; }
.roster-filter-footer { padding: 7px 0 10px; gap: 10px; }
.roster-filter-footer > span { font-size: 11px; line-height: 1.5; }
.roster-filter-footer .text-button { font-size: 12px; }
.roster-group-row th { padding: 8px 18px; }
.roster-group-row th small { font-size: 11px; }
.roster-pagination, .admin-pagination { min-height: 60px; padding: 14px 18px; }
.roster-person-link > span:last-child { gap: 3px; }
.personnel-status { padding: 5px 7px; }

/* A tartalom közvetlenül a felső útvonalsáv alatt kezdődik. */
.departments-hierarchy { margin-top: 0; }
.inactivity-toolbar { margin-top: 16px; gap: 16px; }
.inactivity-live { margin: 12px 0; }
.inactivity-section-title { margin-bottom: 14px; }
.inactivity-section + .inactivity-section { margin-top: 24px; }
.personnel-back-row { margin-bottom: 12px; }
.personnel-profile-hero { padding: 14px 18px; gap: 16px; }
.personnel-profile-main { gap: 14px; }
.personnel-profile-main .eyebrow { margin-bottom: 4px; color: #bba36f; }
.personnel-profile-main h1 { margin-bottom: 5px; font-size: var(--page-title-size); font-weight: 800; line-height: 1.2; }
.personnel-profile-hero .personnel-profile-main p { font-size: 13.5px; line-height: 1.5; }
.personnel-profile-hero .personnel-profile-avatar, .personnel-profile-hero .fleet-profile-symbol { width: 64px; height: 68px; border-radius: 14px; font-size: 24px; }
.personnel-profile-hero .fleet-profile-symbol svg { width: 30px; height: 30px; }
.personnel-profile-badges { gap: 7px; margin-top: 8px; }
.personnel-profile-tabs { margin-top: 14px; margin-bottom: 14px; }
.personnel-detail-card { min-height: 0; }
.admin-panel-top { padding: 18px; gap: 16px; }
.admin-panel-top h2 { margin-bottom: 6px; }
.admin-toolbar { padding: 0 18px 14px; gap: 16px; }
.admin-history summary { padding: 16px 18px; }

@container workspace (min-width: 1041px) {
  .roster-table thead th { padding: 9px 12px; }
  .roster-table thead th:first-child { padding-left: 18px; }
  .roster-member-row > td { padding: 10px 12px; }
  .roster-member-row > td:first-child { padding-left: 18px; }
  .roster-member-row > td:last-child { padding-right: 18px; }
  .personnel-avatar { width: 34px; height: 36px; }
  .roster-open { min-height: 30px; }
}
@container workspace (min-width: 1201px) {
  .fleet-table th { padding-top: 10px; padding-bottom: 10px; }
  .fleet-table td { padding-top: 14px; padding-bottom: 14px; }
  .fleet-identifiers { margin-top: 6px; }
}
@container workspace (max-width: 1040px) {
  .roster-stats { gap: 10px; }
  .roster-stat { min-height: 70px; padding: 12px 14px; gap: 10px; }
  .roster-basic-filters { gap: 10px; }
  .roster-table tbody { gap: 12px; padding-left: 18px; padding-right: 18px; }
  .roster-group-row { margin-left: -18px; margin-right: -18px; }
  .roster-member-row { padding: 16px; gap: 12px; }
  .roster-member-row > .roster-name-cell { padding-bottom: 12px; }
}
@container workspace (max-width: 600px) {
  .page-tools > nav.page-tabs { order: 1; flex-basis: 100%; }
  .page-actions { flex: 1 1 100%; padding: 0; }
  .page-actions > .primary-button, .page-actions > .secondary-button { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 8px; font-size: 12px; line-height: 1.3; white-space: normal; }
  .roster-heading-tools { display: contents; }
  .roster-heading-tools .roster-sort { order: 1; flex-basis: 100%; }
  .roster-heading-tools > .primary-button, .roster-heading-tools > .secondary-button { min-height: 44px; }
  .roster-stats { gap: 8px; margin-bottom: 12px; }
  .roster-stat { min-height: 70px; padding: 10px 12px; gap: 8px; }
  .roster-stat-icon { width: 30px; height: 32px; }
  .roster-stat-icon .personnel-emoji { font-size: 18px; }
  .roster-stat > div > span { font-size: 11px; }
  .roster-stat strong { font-size: 25px; }
  .roster-stat strong small { font-size: 11px; }
  .roster-panel-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px 10px; }
  .roster-panel-heading h2 { margin: 0; font-size: 17px; line-height: 1.3; }
  .roster-panel-heading p { display: none; }
  .roster-sort { display: block; width: 100%; }
  .roster-sort > span { display: none; }
  .roster-sort select { width: 100%; min-width: 0; }
  .roster-controls { padding: 0 14px; }
  .roster-basic-filters, .fleet-basic-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .roster-basic-filters .roster-search, .fleet-basic-filters .roster-search { grid-column: 1; grid-row: 1; }
  .roster-basic-filters .roster-more, .fleet-basic-filters .roster-more { grid-column: 2; grid-row: 1; justify-self: stretch; padding-inline: 7px; font-size: 12px; }
  .roster-filter-footer { gap: 8px; }
  .roster-filter-footer > span { max-width: none; font-size: 11px; }
  .roster-filter-footer .text-button { font-size: 11px; }
  .roster-table tbody { padding-left: 14px; padding-right: 14px; }
  .roster-group-row { margin-left: -14px; margin-right: -14px; }
  .roster-group-row th { padding: 8px 14px; }
  .personnel-profile-hero { padding: 12px 14px; gap: 12px; }
  .personnel-profile-main { gap: 12px; }
  .personnel-profile-main h1 { font-size: 24.3px; }
  .personnel-profile-hero .personnel-profile-avatar, .personnel-profile-hero .fleet-profile-symbol { width: 48px; height: 52px; font-size: 20px; }
  .personnel-profile-tabs { gap: 0 18px; margin: 14px 0; }
}
@media (max-width: 720px) {
  .main-content { padding: 10px 14px 22px; }
  .topbar { min-height: 58px; }
  .breadcrumb { max-width: none; font-size: 11.5px; }
  .breadcrumb ol, .breadcrumb li { gap: 3px 5px; }
  .topbar .demo-pill { display: none; }
  .admin-field input, .admin-field select, .input-wrap input,
  .roster-filter select, .roster-sort select, .roster-search, .roster-more,
  .inactivity-tabs a, .primary-button, .secondary-button { min-height: 44px; }
  .roster-search input { height: 42px; }
  .menu-button, .account-button, .password-toggle { min-width: 44px; min-height: 44px; }
}

/* Kompakt kérelmi kártyák. */
.inactivity-search-toolbar { justify-content: flex-end; }
#inactivityResults { margin-top: 16px; }
#inactivityResults > .inactivity-live:not(.sr-only) { margin: 0 0 12px; }
#inactivityResults .inactivity-section-title { margin-bottom: 10px; }
#inactivityResults .inactivity-section-title h2 { margin: 0; font-size: 17px; }
#inactivityResults .inactivity-section + .inactivity-section { margin-top: 20px; }
#inactivityResults .inactivity-grid { gap: 16px; }
#inactivityResults .inactivity-card { padding: 16px 18px 0; }
#inactivityResults .inactivity-card h3 { margin-bottom: 3px; font-size: 18px; line-height: 1.35; }
#inactivityResults .inactivity-period { margin-top: 12px; padding: 9px 10px; }
#inactivityResults .inactivity-reason { padding: 12px 0; }
#inactivityResults .inactivity-reason p { margin-top: 5px; line-height: 1.65; }
#inactivityResults .inactivity-decision { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; }
#inactivityResults .inactivity-decision p { width: 100%; }
#inactivityResults .inactivity-card > footer { padding: 10px 0; }
#inactivityResults .inactivity-card-actions { gap: 8px; margin-top: 10px; }
#inactivityResults .inactivity-compact-empty { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 72px; padding: 16px 18px; text-align: left; }
#inactivityResults .inactivity-compact-empty > svg { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
#inactivityResults .inactivity-compact-empty h3 { margin: 0; font-size: 16px; }
#inactivityResults .inactivity-compact-empty p { margin-top: 4px; font-size: 12px; line-height: 1.5; }
@media (max-width: 720px) {
  #inactivityResults .inactivity-card-actions .primary-button,
  #inactivityResults .inactivity-card-actions .secondary-button,
  #inactivityResults .inactivity-withdraw { min-height: 44px; }
}
/* Minden oldalon azonos megjelenésű navigációs fülek. */
nav.page-tabs { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; border-bottom: 1px solid #263b54; }
.page-tabs > a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 42px; margin: 0; padding: 8px 12px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #9fb3ce; background: transparent; font-family: var(--font-body); font-size: 12.6px; font-weight: 650; line-height: 1.35; white-space: normal; text-align: center; }
.page-tabs > a:hover { color: #ecd29c; background: #c9a4550a; }
.page-tabs > a.active { border-bottom-color: #d9b66e; color: #ebce93; background: transparent; }
.page-tabs > a::after, .page-tabs > a.active::after { content: none; }
.page-tabs > a:focus-visible { outline: 2px solid #e1c27e; outline-offset: -2px; border-radius: 4px; }
.page-tabs > a > svg { display: block; flex: 0 0 auto; width: 16px; height: 16px; }
.page-tabs .personnel-emoji { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; color: inherit; background: none; font-size: 16px; line-height: 1; }
.page-tabs > a > span:not(.personnel-emoji) { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 20px; min-height: 20px; padding: 1px 5px; border-radius: 5px; color: #9fb3ce; background: #223148; font-size: 11px; font-weight: 600; line-height: 1.3; }
.page-tabs > a.active > span:not(.personnel-emoji) { color: #f0d79e; background: #77623838; }
.admin-tabs.page-tabs { margin-bottom: 16px; }
.personnel-profile-tabs.page-tabs { margin: 14px 0; }
@container workspace (max-width: 600px) {
  nav.page-tabs { gap: 0 4px; }
  .page-tabs > a { flex: 1 1 auto; min-height: 44px; padding: 8px 8px 9px; gap: 6px; font-size: 12px; }
  .page-tabs > a > svg, .page-tabs .personnel-emoji { display: none; }
}