/**
 * GenNova — Nút bấm dashboard (light + dark)
 * Load sau gn-tokens.css và gn-content.css.
 * Dùng class: gn-btn + gn-btn-primary | gn-btn-secondary | gn-btn-outline-* (+ gn-btn--sm tùy chọn)
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.gn-btn,
a.gn-btn,
button.gn-btn,
button.gn-btn-save,
button.gn-btn-primary,
button.gn-btn-tint,
button.gn-btn-secondary,
button.gn-btn-outline-primary,
button.gn-btn-outline-secondary,
button.gn-btn-outline-danger,
button.gn-btn-success,
button.gn-btn-danger,
a.gn-btn-save,
a.gn-btn-primary,
a.gn-btn-tint,
a.gn-btn-secondary,
a.gn-btn-outline-primary,
a.gn-btn-outline-secondary,
a.gn-btn-outline-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--gn-font-ui-sm, 13px);
  font-weight: var(--gn-btn-font-weight, 500);
  line-height: 1.25;
  padding: 8px 16px;
  border-radius: var(--gn-radius-sm, 6px);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: none;
  background-image: none;
  vertical-align: middle;
}

.gn-btn.gn-btn--sm,
a.gn-btn.gn-btn--sm,
button.gn-btn.gn-btn--sm,
button.gn-btn-save.gn-btn--sm,
button.gn-btn-primary.gn-btn--sm,
button.gn-btn-tint.gn-btn--sm,
button.gn-btn-secondary.gn-btn--sm,
button.gn-btn-outline-primary.gn-btn--sm,
button.gn-btn-outline-secondary.gn-btn--sm,
button.gn-btn-outline-danger.gn-btn--sm,
a.gn-btn-save.gn-btn--sm,
a.gn-btn-primary.gn-btn--sm,
a.gn-btn-tint.gn-btn--sm,
a.gn-btn-secondary.gn-btn--sm,
a.gn-btn-outline-primary.gn-btn--sm,
a.gn-btn-outline-secondary.gn-btn--sm,
a.gn-btn-outline-danger.gn-btn--sm,
/* legacy bridge */
.gn-btn.btn-sm,
a.gn-btn.btn-sm,
button.gn-btn.btn-sm {
  font-size: var(--gn-font-micro, 12px);
  font-weight: var(--gn-btn-font-weight, 500);
  padding: 5px 12px;
  border-radius: var(--gn-radius-sm, 6px);
}

.gn-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.gn-btn:disabled,
.gn-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.gn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gn-btn-focus-ring);
}

/* ── Primary filled (Lưu, xác nhận) — Apple filled, dịu ─────────────── */
.gn-btn-primary,
.gn-btn-save {
  background-color: var(--gn-btn-filled-bg);
  border-color: var(--gn-btn-filled-border);
  color: var(--gn-btn-filled-fg);
}

.gn-btn-primary:hover:not(:disabled),
.gn-btn-save:hover:not(:disabled) {
  background-color: var(--gn-btn-filled-hover-bg);
  border-color: var(--gn-btn-filled-hover-bg);
  color: var(--gn-btn-filled-fg);
  box-shadow: none;
}

.gn-btn-primary:active:not(:disabled),
.gn-btn-save:active:not(:disabled) {
  background-color: var(--gn-btn-filled-active-bg);
  border-color: var(--gn-btn-filled-active-bg);
  box-shadow: none;
}

/* ── Tinted primary (toolbar / secondary CTA) ───────────────────────── */
.gn-btn-tint,
.gn-btn-tint-primary {
  background-color: var(--gn-btn-tint-bg);
  border-color: var(--gn-btn-tint-border);
  color: var(--gn-btn-tint-fg);
}

.gn-btn-tint:hover:not(:disabled),
.gn-btn-tint-primary:hover:not(:disabled) {
  background-color: var(--gn-btn-tint-hover-bg);
  border-color: var(--gn-btn-tint-hover-border);
  color: var(--gn-btn-tint-fg);
}

/* ── Secondary (nền surface) ─────────────────────────────────────────────── */
.gn-btn-secondary {
  background-color: var(--gn-bg-surface);
  border-color: var(--gn-border);
  color: var(--gn-text);
}

.gn-btn-secondary:hover:not(:disabled) {
  background-color: var(--gn-bg-muted);
  border-color: var(--gn-primary);
  color: var(--gn-primary);
}

.gn-btn-secondary:active:not(:disabled) {
  background-color: var(--gn-border-subtle);
}

.gn-btn-secondary.active {
  background-color: rgba(var(--gn-primary-rgb), 0.12);
  border-color: var(--gn-primary);
  color: var(--gn-primary);
}

/* ── Outline primary ─────────────────────────────────────────────────────── */
.gn-btn-outline-primary {
  background-color: transparent;
  border-color: var(--gn-btn-tint-border);
  color: var(--gn-btn-tint-fg);
}

.gn-btn-outline-primary:hover:not(:disabled) {
  background-color: var(--gn-btn-tint-bg);
  border-color: var(--gn-btn-tint-hover-border);
  color: var(--gn-btn-tint-fg);
}

.gn-btn-outline-primary:active:not(:disabled) {
  background-color: var(--gn-btn-tint-hover-bg);
}

/* ── Outline secondary ───────────────────────────────────────────────────── */
.gn-btn-outline-secondary {
  background-color: var(--gn-bg-surface);
  border-color: var(--gn-border);
  color: var(--gn-text-muted);
}

.gn-btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--gn-bg-muted);
  border-color: var(--gn-border);
  color: var(--gn-text);
}

.gn-btn-outline-secondary:active:not(:disabled) {
  background-color: var(--gn-border-subtle);
}

/* ── Semantic ────────────────────────────────────────────────────────────── */
.gn-btn-success {
  background-color: var(--gn-success);
  border-color: var(--gn-success);
  color: var(--gn-on-primary);
}

.gn-btn-success:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--gn-success) 88%, #000);
  border-color: color-mix(in srgb, var(--gn-success) 88%, #000);
  color: var(--gn-on-primary);
}

.gn-btn-danger {
  background-color: var(--gn-error);
  border-color: var(--gn-error);
  color: var(--gn-on-primary);
}

.gn-btn-danger:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--gn-error) 90%, #000);
  border-color: color-mix(in srgb, var(--gn-error) 90%, #000);
  color: var(--gn-on-primary);
}

.gn-btn-outline-danger {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--gn-error) 45%, var(--gn-border));
  color: var(--gn-error);
}

.gn-btn-outline-danger:hover:not(:disabled) {
  background-color: var(--gn-error-bg);
  border-color: var(--gn-error);
  color: var(--gn-error);
}

/* gn-btn trên nền card / table */
.gn-card .gn-btn-outline-secondary,
.gn-page .gn-card-header .gn-btn-outline-secondary {
  background-color: var(--gn-bg-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
═══════════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"] .gn-btn-primary,
body[data-theme="dark"] .gn-btn-save,
body[data-theme="dark"] .gn-btn-primary:hover:not(:disabled),
body[data-theme="dark"] .gn-btn-save:hover:not(:disabled) {
  color: var(--gn-btn-filled-fg);
}

body[data-theme="dark"] .gn-main .btn-primary,
body[data-theme="dark"] .gn-page .btn-primary,
body[data-theme="dark"] .gn-card .btn-primary {
  background-color: var(--gn-btn-tint-bg);
  border-color: var(--gn-btn-tint-border);
  color: var(--gn-btn-tint-fg);
}

body[data-theme="dark"] .gn-main .btn-primary:hover,
body[data-theme="dark"] .gn-page .btn-primary:hover,
body[data-theme="dark"] .gn-card .btn-primary:hover {
  background-color: var(--gn-btn-tint-hover-bg);
  border-color: var(--gn-btn-tint-hover-border);
  color: var(--gn-btn-tint-fg);
}

body[data-theme="dark"] .modal .btn-primary,
body[data-theme="dark"] .gn-alert-modal .btn-primary,
body[data-theme="dark"] .gn-page .btn-primary.gn-btn-filled {
  background-color: var(--gn-btn-filled-bg);
  border-color: var(--gn-btn-filled-border);
  color: var(--gn-btn-filled-fg) !important;
}

body[data-theme="dark"] .modal .btn-primary:hover,
body[data-theme="dark"] .gn-alert-modal .btn-primary:hover {
  background-color: var(--gn-btn-filled-hover-bg);
  border-color: var(--gn-btn-filled-hover-bg);
  color: var(--gn-btn-filled-fg) !important;
}

body[data-theme="dark"] .gn-btn-secondary,
body[data-theme="dark"] .gn-btn-outline-secondary {
  background-color: var(--gn-bg-surface);
  border-color: var(--gn-border);
  color: var(--gn-text);
}

body[data-theme="dark"] .gn-btn-secondary:hover:not(:disabled),
body[data-theme="dark"] .gn-btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--gn-bg-muted);
  border-color: var(--gn-border-subtle);
  color: var(--gn-text-emphasis, var(--gn-text));
}

body[data-theme="dark"] .gn-btn-secondary.active,
body[data-theme="dark"] .gn-theme-type-btn.active {
  background: color-mix(in srgb, var(--gn-primary) 12%, var(--gn-bg-surface));
  border-color: color-mix(in srgb, var(--gn-primary) 20%, var(--gn-border));
  color: var(--gn-link);
}

body[data-theme="dark"] .gn-btn-outline-primary {
  background-color: transparent;
  border-color: var(--gn-btn-tint-border);
  color: var(--gn-btn-tint-fg);
}

body[data-theme="dark"] .gn-btn-outline-primary:hover:not(:disabled) {
  background-color: var(--gn-btn-tint-bg);
  border-color: var(--gn-btn-tint-hover-border);
  color: var(--gn-btn-tint-fg);
}

body[data-theme="dark"] .gn-btn-outline-danger {
  border-color: color-mix(in srgb, var(--gn-error) 40%, var(--gn-border));
  color: color-mix(in srgb, var(--gn-error) 85%, var(--gn-text));
}

body[data-theme="dark"] .gn-btn-outline-danger:hover:not(:disabled) {
  background-color: var(--gn-error-bg);
  color: var(--gn-error);
}

/* Bootstrap .btn trong vùng dashboard — dark */
body[data-theme="dark"] .gn-main .btn-outline-primary,
body[data-theme="dark"] .gn-page .btn-outline-primary,
body[data-theme="dark"] .modal .btn-outline-primary {
  color: var(--gn-btn-tint-fg);
  border-color: var(--gn-btn-tint-border);
  background-color: transparent;
}

body[data-theme="dark"] .gn-main .btn-outline-primary:hover,
body[data-theme="dark"] .gn-page .btn-outline-primary:hover,
body[data-theme="dark"] .modal .btn-outline-primary:hover {
  background-color: var(--gn-btn-tint-bg);
  color: var(--gn-btn-tint-fg);
  border-color: var(--gn-btn-tint-hover-border);
}

body[data-theme="dark"] .gn-main .btn-outline-secondary,
body[data-theme="dark"] .gn-page .btn-outline-secondary,
body[data-theme="dark"] .modal .btn-outline-secondary {
  color: var(--gn-text-muted);
  border-color: var(--gn-border);
  background-color: var(--gn-bg-surface);
}

body[data-theme="dark"] .gn-main .btn-outline-secondary:hover,
body[data-theme="dark"] .gn-page .btn-outline-secondary:hover,
body[data-theme="dark"] .modal .btn-outline-secondary:hover {
  background-color: var(--gn-bg-muted);
  color: var(--gn-text);
  border-color: var(--gn-border);
}

body[data-theme="dark"] .gn-main .btn-secondary,
body[data-theme="dark"] .gn-page .btn-secondary,
body[data-theme="dark"] .modal .btn-secondary {
  background-color: var(--gn-bg-muted);
  border-color: var(--gn-border);
  color: var(--gn-text);
}

body[data-theme="dark"] .gn-main .btn-secondary:hover,
body[data-theme="dark"] .gn-page .btn-secondary:hover,
body[data-theme="dark"] .modal .btn-secondary:hover {
  background-color: var(--gn-c-inset-bg, var(--gn-bg-muted));
  border-color: var(--gn-border-subtle);
  color: var(--gn-text-emphasis, var(--gn-text));
}

body[data-theme="dark"] .gn-main .btn-success,
body[data-theme="dark"] .gn-page .btn-success,
body[data-theme="dark"] .gn-main .btn-danger,
body[data-theme="dark"] .gn-page .btn-danger {
  color: var(--gn-on-primary) !important;
}

/* ── Link-style control (thay btn btn-link) ─────────── */
.gn-btn-link,
a.gn-btn-link,
button.gn-btn-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gn-primary);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.gn-btn-link:hover,
.gn-btn-link:focus-visible {
  color: var(--gn-primary-hover);
  text-decoration: underline;
}

body[data-theme="dark"] .gn-btn-link,
body[data-theme="dark"] .gn-btn-link:hover,
body[data-theme="dark"] .gn-btn-link:focus-visible {
  color: var(--gn-link);
}
body[data-theme="dark"] .gn-btn-link:hover,
body[data-theme="dark"] .gn-btn-link:focus-visible {
  color: var(--gn-link-hover);
}

.gn-btn-link.gn-btn--sm {
  font-size: var(--gn-font-micro, 12px);
}

/* Auth cover — social outline on dark background */
.gn-btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
}

.gn-btn-outline-light:hover,
.gn-btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}