/* ÉpítRend UI – final cascade layer for dashboard module dialogs and green/gray palette. */
:root {
  --ui-accent: #0f766e !important;
  --ui-accent-hover: #115e59 !important;
  --ui-accent-soft: #e8f3f1 !important;
  --er3-accent: #0f766e !important;
  --er3-accent-hover: #115e59 !important;
  --uiux-focus: #0f766e !important;
}
:root[data-theme="dark"] {
  --ui-accent: #69b9ad !important;
  --ui-accent-hover: #8acfc5 !important;
  --ui-accent-soft: #203a37 !important;
  --er3-accent: #69b9ad !important;
  --er3-accent-hover: #8acfc5 !important;
  --uiux-focus: #69b9ad !important;
}
dialog.modal.dashboard-module-dialog[open] {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(620px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(78dvh, 680px) !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin: auto !important;
  border: 1px solid #d8e2e2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #243238 !important;
  box-shadow: 0 18px 54px rgb(24 39 43 / 22%) !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e2e9e9 !important;
  background: #fff !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-head .eyebrow {
  color: #0f766e !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-head h2 {
  margin: 2px 0 0 !important;
  color: #243238 !important;
  font-size: clamp(19px, 4vw, 23px) !important;
  line-height: 1.25 !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-head .icon-btn,
dialog.modal.dashboard-module-dialog[open] .modal-head .icon-btn:focus {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #d8e2e2 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  background: #f3f7f6 !important;
  color: #53636a !important;
  font-size: 22px !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-head .icon-btn:focus-visible {
  outline: 2px solid #0f766e !important;
  outline-offset: 2px !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: calc(min(78dvh, 680px) - 126px) !important;
  overflow-y: auto !important;
  padding: 0 12px !important;
  background: #fff !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list {
  display: grid !important;
  gap: 0 !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid #e8eeee !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #53636a !important;
  text-align: left !important;
  box-shadow: none !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row:first-child { border-top: 0 !important; }
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row > div:first-child {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row strong {
  display: block !important;
  color: #0f766e !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row span {
  display: block !important;
  color: #66757b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
dialog.modal.dashboard-module-dialog[open] button.dashboard-module-click-row:hover,
dialog.modal.dashboard-module-dialog[open] button.dashboard-module-click-row:focus-visible {
  background: #f1f7f6 !important;
  outline: 2px solid #0f766e !important;
  outline-offset: -2px !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-actions {
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #e2e9e9 !important;
  background: #fff !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-actions .secondary-btn {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #d3e5e0 !important;
  border-radius: 10px !important;
  background: #edf5f3 !important;
  color: #0f766e !important;
  box-shadow: none !important;
}
dialog.modal.dashboard-module-dialog[open] .modal-actions .secondary-btn:hover {
  background: #e1efec !important;
  border-color: #a8ccc3 !important;
}
/* Common interactive accents: muted green instead of electric blue. */
#appView .primary-btn, #appView .small-btn:not(.danger), #appView form button:not(.danger) {
  --button-accent: #0f766e;
}
#appView input:focus, #appView select:focus, #appView textarea:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgb(15 118 110 / 12%) !important;
  outline-color: #0f766e !important;
}
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] {
  border-color: #344447 !important;
  background: #182126 !important;
  color: #e3ebeb !important;
}
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .modal-head,
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .dashboard-module-body,
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row,
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .modal-actions {
  background: #182126 !important;
  border-color: #344447 !important;
}
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .modal-head h2 { color: #e3ebeb !important; }
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row strong { color: #79c9bc !important; }
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row span { color: #aab9ba !important; }
:root[data-theme="dark"] dialog.modal.dashboard-module-dialog[open] .modal-actions .secondary-btn { background: #203a37 !important; color: #8bd0c4 !important; border-color: #345b55 !important; }
@media (max-width: 700px) {
  dialog.modal.dashboard-module-dialog[open] {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(76dvh, 620px) !important;
    border-radius: 16px !important;
  }
  dialog.modal.dashboard-module-dialog[open] .modal-head { padding: 12px 13px !important; }
  dialog.modal.dashboard-module-dialog[open] .dashboard-module-body { max-height: calc(min(76dvh, 620px) - 116px) !important; padding: 0 9px !important; }
  dialog.modal.dashboard-module-dialog[open] .dashboard-module-list-row { padding: 11px 7px !important; }
}


/* V2.33.3 – mobilon a prémium/juttatás dialógus saját tartalma görgethető. */
dialog.modal.salary-benefit-dialog[open] {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(820px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  max-height: min(90dvh, 820px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}
dialog.modal.salary-benefit-dialog[open] > form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
dialog.modal.salary-benefit-dialog[open] > form > .modal-head {
  flex: 0 0 auto !important;
}
dialog.modal.salary-benefit-dialog[open] > form > .form-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 4px 2px 14px !important;
}
dialog.modal.salary-benefit-dialog[open] > form > #salaryBenefitPreview,
dialog.modal.salary-benefit-dialog[open] > form > .modal-actions {
  flex: 0 0 auto !important;
}
dialog.modal.salary-benefit-dialog[open] > form > .modal-actions {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
body:has(dialog#salaryBenefitDialog[open]) {
  overflow: hidden !important;
}
@media (max-width: 700px) {
  dialog.modal.salary-benefit-dialog[open] {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(88dvh, 760px) !important;
  }
  dialog.modal.salary-benefit-dialog[open] > form {
    padding: 16px !important;
  }
  dialog.modal.salary-benefit-dialog[open] > form > .form-grid {
    gap: 12px !important;
  }
}