/* NODUS gombrendszer — egy forrás, mindkét téma.
   Variáns: primary / secondary (.btn-g) / ghost / danger / icon.
   Méret: sm 28, md 36 (alap), lg 44. Radius 8px. Nincs gradiens, nincs emelés. */

:root {
  --btn-primary: #1F4D3A;
  --btn-primary-hover: #183E2F;
  --btn-primary-active: #12301F;
  --btn-primary-fg: #FFFFFF;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-fg: #0B1220;
  --btn-secondary-hover: #F5F1E9;
  --btn-secondary-active: #EDE8DE;
  --btn-line: #CFC9BB;
  --btn-line-hover: #B7B1A4;
  --btn-ghost-fg: #1A2E26;
  --btn-ghost-hover: rgba(31, 77, 58, 0.08);
  --btn-ghost-active: rgba(31, 77, 58, 0.14);
  --btn-danger-bg: #F8E8E6;
  --btn-danger-fg: #7A1E28;
  --btn-danger-bd: #E4C4C2;
  --btn-danger-hover: #F3D9D6;
  --btn-danger-active: #EBC9C5;
  --btn-selected-bg: #E6F0EA;
  --btn-selected-fg: #12301F;
  --btn-selected-bd: rgba(31, 77, 58, 0.35);
  --btn-ring: rgba(31, 77, 58, 0.40);
  --btn-radius: 8px;
  --btn-gap: 7px;
  --btn-dur: 140ms;
  --btn-h: 36px;
  --btn-pad: 14px;
  --btn-fs: 14px;
}

html[data-theme="dark"] {
  --btn-secondary-bg: #1B1F29;
  --btn-secondary-fg: #E8EBF2;
  --btn-secondary-hover: #242833;
  --btn-secondary-active: #2C3240;
  --btn-line: #3A4150;
  --btn-line-hover: #4E5668;
  --btn-ghost-fg: #E8EBF2;
  --btn-ghost-hover: rgba(255, 255, 255, 0.08);
  --btn-ghost-active: rgba(255, 255, 255, 0.12);
  --btn-danger-bg: #3A2226;
  --btn-danger-fg: #F8D6D8;
  --btn-danger-bd: #6E3C42;
  --btn-danger-hover: #4A2A2F;
  --btn-danger-active: #5A3238;
  --btn-selected-bg: #1E3328;
  --btn-selected-fg: #E7F3EC;
  --btn-selected-bd: rgba(168, 208, 184, 0.45);
  --btn-ring: rgba(168, 208, 184, 0.75);
}

html body .btn,
html body .btn-logout,
html body a.btn,
html body .btn-primary,
html body .btn-p,
html body .btn-g,
html body .btn-ghost,
html body .btn-danger,
html body .btn-acc,
html body .rbtn,
html body .ptab,
html body .btn-seg,
html body .msz-st-btn,
html body .qp-pill,
html body .qp-done,
html body .pbn,
html body .bar-ico,
html body .cc-act,
html body .google-btn,
html body .demo-try,
html body .theme-toggle,
html body .pw-toggle,
html body .su-admin,
html body .sidebar-theme-btn,
html body .wage-gran-btn,
html body .fbar-more-btn,
html body .dash-panel-cfg-btn,
html body .panel-info-btn,
html body .font-scale-seg button,
html body .chat-input button,
html body .comment-input button,
html body .tr-copy-btn,
html body .tr-partial-btn,
html body .p-add-btn,
html body .p-close-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border-radius: var(--btn-radius) !important;
  border: 1px solid var(--btn-line);
  background: var(--btn-secondary-bg);
  background-image: none !important;
  color: var(--btn-secondary-fg);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transform: none;
  transition: background-color var(--btn-dur) ease, border-color var(--btn-dur) ease, color var(--btn-dur) ease, opacity var(--btn-dur) ease;
  -webkit-tap-highlight-color: transparent;
}

html body .btn svg,
html body .btn-ghost svg,
html body .btn-logout svg,
html body .cc-act svg,
html body .rbtn svg,
html body .google-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* secondary az alap; a .btn-g ugyanaz */
html body .btn:hover,
html body a.btn:hover,
html body .btn-g:hover,
html body .rbtn:hover,
html body .google-btn:hover,
html body .qp-pill:hover,
html body .tr-copy-btn:hover,
html body .tr-partial-btn:hover,
html body .p-add-btn:hover,
html body .p-close-btn:hover {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--btn-line-hover) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .btn:active,
html body .btn-g:active,
html body .rbtn:active {
  background: var(--btn-secondary-active) !important;
  transform: none !important;
}

/* primary — tinta-zöld, fehér szöveg, mindkét témában */
html body .btn.btn-p,
html body .btn.btn-primary,
html body .btn-primary,
html body .btn.btn-acc,
html body .chat-input button,
html body .comment-input .btn-p {
  background: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: var(--btn-primary-fg) !important;
}

html body .btn.btn-p:hover,
html body .btn.btn-primary:hover,
html body .btn-primary:hover,
html body .btn.btn-acc:hover,
html body .chat-input button:hover,
html body .comment-input .btn-p:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}

html body .btn.btn-p:active,
html body .btn.btn-primary:active,
html body .btn-primary:active,
html body .btn.btn-acc:active,
html body .chat-input button:active,
html body .comment-input .btn-p:active {
  background: var(--btn-primary-active) !important;
  border-color: var(--btn-primary-active) !important;
  color: var(--btn-primary-fg) !important;
}

/* ghost */
html body .btn.btn-ghost,
html body .btn-logout,
html body .btn-ghost,
html body .ptab,
html body .btn-seg,
html body .msz-st-btn,
html body .demo-try,
html body .font-scale-seg button,
html body .cc-act {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--btn-ghost-fg) !important;
  box-shadow: none !important;
}

html body .btn.btn-ghost:hover,
html body .btn-logout:hover,
html body .btn-ghost:hover,
html body .ptab:hover,
html body .btn-seg:hover,
html body .msz-st-btn:hover,
html body .demo-try:hover,
html body .font-scale-seg button:hover,
html body .deck-overflow-menu .btn:hover {
  background: var(--btn-ghost-hover) !important;
  border-color: transparent !important;
  color: var(--btn-ghost-fg) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .btn.btn-ghost:active,
html body .ptab:active,
html body .btn-seg:active,
html body .font-scale-seg button:active {
  background: var(--btn-ghost-active) !important;
}

/* kijelölt szűrő — nem primary kitöltés */
html body .btn.on:not(.btn-p):not(.btn-primary):not(.btn-acc):not(.btn-danger),
html body .ptab.on,
html body .btn-seg.on,
html body .msz-st-btn.on,
html body .period-seg .btn-seg.on,
html body .font-scale-seg button.on,
html body .wage-gran-btn.on,
html body .qp-done {
  background: var(--btn-selected-bg) !important;
  border-color: var(--btn-selected-bd) !important;
  color: var(--btn-selected-fg) !important;
  box-shadow: none !important;
}

/* danger — csak törlés / sztornó / végleges megszüntetés */
html body .btn.btn-danger,
html body .btn-danger {
  background: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-bd) !important;
  color: var(--btn-danger-fg) !important;
}

html body .btn.btn-danger:hover,
html body .btn-danger:hover {
  background: var(--btn-danger-hover) !important;
  border-color: var(--btn-danger-bd) !important;
  color: var(--btn-danger-fg) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .btn.btn-danger:active,
html body .btn-danger:active {
  background: var(--btn-danger-active) !important;
}

/* méretek */
html body .btn.btn-sm,
html body .btn-sm,
html body .rbtn,
html body .ptab,
html body .btn-seg,
html body .msz-st-btn,
html body .qp-pill,
html body .qp-done,
html body .pbn,
html body .cc-act,
html body .demo-try,
html body .wage-gran-btn,
html body .tr-copy-btn,
html body .tr-partial-btn,
html body .p-add-btn,
html body .p-close-btn {
  --btn-h: 28px;
  --btn-pad: 10px;
  --btn-fs: 13px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

html body .btn.btn-lg,
html body .btn-lg,
html body .google-btn {
  --btn-h: 44px;
  --btn-pad: 18px;
  --btn-fs: 14px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

html body .btn.btn-block,
html body .google-btn {
  width: 100%;
}

/* icon-only: négyzet, a méret oldala */
html body .btn.btn-icon,
html body .bar-ico,
html body .pbn,
html body .theme-toggle,
html body .pw-toggle,
html body .su-admin,
html body .sidebar-theme-btn,
html body .chat-input button,
html body .comment-input .btn-icon {
  width: var(--btn-h, 36px);
  min-width: var(--btn-h, 36px);
  padding: 0;
  gap: 0;
}

html body .bar-ico,
html body .theme-toggle,
html body .su-admin,
html body .sidebar-theme-btn,
html body .pbn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

html body .pw-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: var(--btn-ghost-fg);
}

/* sötét sidebar: a ghost szöveg világos marad */
html body .sidebar .btn-logout,
html body .sidebar-footer .btn-logout,
html body .cc-act,
html body .su-admin,
html body .sidebar-theme-btn {
  color: #E8EBF2 !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

html body .sidebar .btn-logout:hover,
html body .sidebar-footer .btn-logout:hover,
html body .cc-act:hover,
html body .su-admin:hover,
html body .sidebar-theme-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* világos téma, krém sidebar: sötét szöveg és keret, a sötét témához hasonló kontraszt */
html:not([data-theme="dark"]) body .sidebar .btn-logout,
html:not([data-theme="dark"]) body .sidebar-footer .btn-logout,
html:not([data-theme="dark"]) body .sidebar .sidebar-theme-btn {
  color: #1A2E26 !important;
  background: #FFFFFF !important;
  border-color: #1A2E26 !important;
}
html:not([data-theme="dark"]) body .sidebar .btn-logout:hover,
html:not([data-theme="dark"]) body .sidebar-footer .btn-logout:hover,
html:not([data-theme="dark"]) body .sidebar .sidebar-theme-btn:hover {
  color: #FFFFFF !important;
  background: #1A2E26 !important;
  border-color: #1A2E26 !important;
}

html body .btn-logout {
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}

html body .btn-logout.btn-sm,
html body .btn-logout--compact {
  height: 28px;
  min-height: 28px;
  width: auto;
  margin: 0;
  padding: 0 10px;
  font-size: 13px;
}

html body .mtab-logout {
  color: inherit !important;
  font-weight: 600 !important;
}

html body .mtab-logout:hover,
html body .mtab-logout:active {
  background: transparent !important;
  color: inherit !important;
}

/* fókusz */
html body .btn:focus,
html body .btn-ghost:focus,
html body .ptab:focus,
html body .btn-seg:focus,
html body .rbtn:focus,
html body .bar-ico:focus,
html body .cc-act:focus,
html body .google-btn:focus,
html body .pbn:focus,
html body .font-scale-seg button:focus {
  outline: none;
}

html body .btn:focus-visible,
html body .btn-primary:focus-visible,
html body .btn-ghost:focus-visible,
html body .btn-logout:focus-visible,
html body .ptab:focus-visible,
html body .btn-seg:focus-visible,
html body .rbtn:focus-visible,
html body .bar-ico:focus-visible,
html body .cc-act:focus-visible,
html body .google-btn:focus-visible,
html body .pbn:focus-visible,
html body .qp-pill:focus-visible,
html body .theme-toggle:focus-visible,
html body .font-scale-seg button:focus-visible,
html body .chat-input button:focus-visible,
html body .comment-input button:focus-visible,
html body .nt:focus-visible,
html body .mtab:focus-visible,
html body .fbar-more-btn:focus-visible,
html body .msz-tog:focus-visible,
html body .msz-st-btn:focus-visible,
html body .th-sort:focus-visible {
  outline: 2px solid var(--btn-ring) !important;
  outline-offset: 2px;
}

/* disabled: halvány, nem kattintható */
html body .btn:disabled,
html body .btn[disabled],
html body .btn[aria-disabled="true"],
html body .btn-primary:disabled,
html body .google-btn[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
  transform: none !important;
}

/* loading: a spinner a szöveg fölött, a szélesség marad */
html body .btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

html body .btn.loading::after,
html body .btn.loading .spinner {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nodus-btn-spin 0.6s linear infinite;
}
html body .btn.loading:has(.spinner)::after { content: none; display: none; animation: none; }

html body .btn.btn-g.loading::after,
html body .btn.btn-ghost.loading::after,
html body .btn.btn-danger.loading::after {
  border-color: rgba(31, 77, 58, 0.25);
  border-top-color: var(--btn-primary);
}

@keyframes nodus-btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html body .btn,
  html body .btn.loading .spinner,
  html body .btn.loading::after {
    transition: none;
    animation: none;
  }
}

/* A lap saját sötét .btn-g szabálya !important gradiens. Ez erősebb, és leveszi. */
html[data-theme="dark"] body .btn,
html[data-theme="dark"] body .btn-g,
html[data-theme="dark"] body .btn-p,
html[data-theme="dark"] body .btn-ghost,
html[data-theme="dark"] body .btn-primary,
html[data-theme="dark"] body .btn-danger,
html[data-theme="dark"] body .btn-logout,
html[data-theme="dark"] body .btn-dark,
html[data-theme="dark"] body .rbtn,
html[data-theme="dark"] body .google-btn,
html[data-theme="dark"] body .cc-act,
html[data-theme="dark"] body .ptab,
html[data-theme="dark"] body .btn-seg {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  border-radius: var(--btn-radius) !important;
}
html[data-theme="dark"] body .btn-g,
html[data-theme="dark"] body .btn:not(.btn-p):not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-acc):not(.btn-icon) {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
  border-color: var(--btn-line) !important;
}
html[data-theme="dark"] body .btn.btn-p,
html[data-theme="dark"] body .btn.btn-primary,
html[data-theme="dark"] body .btn-primary {
  background: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: var(--btn-primary-fg) !important;
}
html[data-theme="dark"] body .btn.btn-ghost,
html[data-theme="dark"] body .btn-ghost,
html[data-theme="dark"] body .cc-act,
html[data-theme="dark"] body .ptab,
html[data-theme="dark"] body .btn-seg {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--btn-ghost-fg) !important;
}
html[data-theme="dark"] body .btn.on:not(.btn-p):not(.btn-primary):not(.btn-danger),
html[data-theme="dark"] body .btn-seg.on,
html[data-theme="dark"] body .ptab.on {
  background: var(--btn-selected-bg) !important;
  border-color: var(--btn-selected-bd) !important;
  color: var(--btn-selected-fg) !important;
}
html[data-theme="dark"] body .sidebar .btn-logout,
html[data-theme="dark"] body .sidebar-footer .btn-logout {
  color: #E8EBF2 !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}