/**
 * RUQI Button UI Kit — Figma Ys7wb4xxDmPequYn6LORro (node 15972-119274)
 * Requires ruqi-design-tokens.css
 */

/* ─── Base ───────────────────────────────────────────────── */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruqi-space-2);
  min-height: var(--ruqi-btn-height-md);
  padding: var(--ruqi-space-2) var(--ruqi-space-4);
  font-family: var(--ruqi-font-family);
  font-size: var(--ruqi-font-size-sm);
  font-weight: var(--ruqi-font-weight-medium);
  line-height: 1.25;
  border-radius: var(--ruqi-btn-border-radius);
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.btn:hover,
.button:hover {
  text-decoration: none;
}

.btn:focus,
.btn.focus,
.button:focus {
  outline: 2px solid var(--ruqi-color-focus-ring);
  outline-offset: 0;
  box-shadow: none;
}

/* ─── Sizes ──────────────────────────────────────────────── */
.btn-sm {
  min-height: var(--ruqi-btn-height-sm) !important;
  padding: 8px 16px !important;
  font-size: var(--ruqi-font-size-sm) !important;
  font-weight: var(--ruqi-font-weight-medium) !important;
}

.btn-lg {
  min-height: var(--ruqi-btn-height-lg) !important;
  padding: var(--ruqi-space-3) var(--ruqi-space-6) !important;
  font-size: var(--ruqi-font-size-lg) !important;
  font-weight: var(--ruqi-font-weight-semibold) !important;
}

.btn-xl {
  min-height: 56px !important;
  padding: 14px 28px !important;
  font-size: var(--ruqi-font-size-lg) !important;
}

/* ─── Primary (filled) ───────────────────────────────────── */
.btn-primary,
.button-primary,
.btn.btn-primary {
  background-color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-primary:hover,
.button-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--ruqi-color-primary-hover) !important;
  border-color: var(--ruqi-color-primary-hover) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.button-primary:focus,
.btn.btn-primary:focus {
  background-color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:active {
  background-color: var(--ruqi-color-primary-active) !important;
  border-color: var(--ruqi-color-primary-active) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

/* ─── Secondary (neutral filled) ─────────────────────────── */
.btn-secondary,
.btn.btn-secondary {
  background-color: var(--ruqi-color-neutral-bg) !important;
  border-color: var(--ruqi-color-neutral-bg) !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
  background-color: var(--ruqi-color-neutral-hover) !important;
  border-color: var(--ruqi-color-neutral-hover) !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-secondary:focus,
.btn.btn-secondary:focus {
  background-color: var(--ruqi-color-neutral-bg) !important;
  border-color: var(--ruqi-color-neutral-bg) !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:active {
  background-color: var(--ruqi-color-neutral-active) !important;
  border-color: var(--ruqi-color-neutral-active) !important;
  color: var(--ruqi-color-neutral-active-text) !important;
}

/* ─── Outline primary ────────────────────────────────────── */
.btn-outline-primary {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-primary) !important;
  box-shadow: none !important;
}

.btn-outline-primary:hover {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-outline-primary-hover) !important;
  color: var(--ruqi-color-outline-primary-hover) !important;
}

.btn-outline-primary:focus {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-primary) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:active {
  background-color: var(--ruqi-color-outline-primary-pressed-bg) !important;
  border-color: var(--ruqi-color-primary-active) !important;
  color: var(--ruqi-color-primary-active) !important;
}

/* ─── Outline neutral (btn-outline-dark / btn-outline-secondary) */
.btn-outline-dark,
.btn-outline-secondary {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: transparent !important;
  color: var(--ruqi-color-text-primary) !important;
  box-shadow: var(--ruqi-shadow-btn-neutral-outline) !important;
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: transparent !important;
  color: var(--ruqi-color-text-secondary) !important;
  box-shadow: var(--ruqi-shadow-btn-neutral-outline) !important;
}

.btn-outline-dark:focus,
.btn-outline-secondary:focus {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: transparent !important;
  color: var(--ruqi-color-text-primary) !important;
  box-shadow: var(--ruqi-shadow-btn-neutral-outline) !important;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:active {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-text-primary) !important;
  color: var(--ruqi-color-text-primary) !important;
  box-shadow: none !important;
}

/* ─── Semantic ───────────────────────────────────────────── */
.btn-danger,
.btn.btn-danger {
  background-color: var(--ruqi-color-error) !important;
  border-color: var(--ruqi-color-error) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #d63f32 !important;
  border-color: #d63f32 !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-success,
.btn.btn-success {
  background-color: var(--ruqi-color-success) !important;
  border-color: var(--ruqi-color-success) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #449e16 !important;
  border-color: #449e16 !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-warning,
.btn.btn-warning {
  background-color: var(--ruqi-color-warning) !important;
  border-color: var(--ruqi-color-warning) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #d97a12 !important;
  border-color: #d97a12 !important;
  color: var(--ruqi-color-text-inverse) !important;
}

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

.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--ruqi-color-text-secondary) !important;
  border-color: var(--ruqi-color-text-secondary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

/* ─── Link / ghost ───────────────────────────────────────── */
.btn-link,
.btn-inline {
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  color: var(--ruqi-color-link) !important;
  font-weight: var(--ruqi-font-weight-semibold);
}

.btn-link:hover,
.btn-link:focus,
.btn-inline:hover,
.btn-inline:focus {
  color: var(--ruqi-color-link-hover) !important;
  background: transparent !important;
  box-shadow: none;
}

/* ─── Disabled ─────────────────────────────────────────────── */
.btn:disabled,
.btn.disabled,
.btn[disabled] {
  opacity: 1 !important;
  pointer-events: none;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: var(--ruqi-color-primary-disabled) !important;
  border-color: var(--ruqi-color-primary-disabled) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-secondary[disabled] {
  background-color: var(--ruqi-color-neutral-disabled-bg) !important;
  border-color: var(--ruqi-color-neutral-disabled-bg) !important;
  color: var(--ruqi-color-neutral-disabled-text) !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
.btn-outline-primary[disabled] {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-border-disabled) !important;
  color: var(--ruqi-color-neutral-disabled-text) !important;
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled,
.btn-outline-dark[disabled],
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled,
.btn-outline-secondary[disabled] {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-border-disabled) !important;
  color: var(--ruqi-color-neutral-disabled-text) !important;
  box-shadow: none !important;
}

/* ─── Header auth (login + registration) ─────────────────── */
.header__nav .btn.header__auth-btn {
  min-height: var(--ruqi-btn-height-sm) !important;
  padding: 8px 16px !important;
  font-size: var(--ruqi-font-size-sm) !important;
  font-weight: var(--ruqi-font-weight-medium) !important;
}

/* ─── Button rows (Figma: equal size when multiple in a row) ─ */
.card-action {
  margin-top: var(--ruqi-space-6);
  border-top: 1px solid var(--ruqi-color-border-divider);
  padding-top: var(--ruqi-space-6);
}

.card-buttons,
.modal-actions {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center !important;
  gap: var(--ruqi-space-3) !important;
  width: 100%;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.card-buttons > *:not(.btn),
.modal-actions > *:not(.btn),
.modal-action-btn {
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.card-buttons contract-sign-modal,
.card-buttons contract-act-sign-modal,
.card-buttons contract-act-modal,
.card-buttons make-payment-modal,
.card-buttons employer-proposal-revoke,
.card-buttons proposal-revoke,
.card-buttons job-done-modal,
.card-buttons cancel-receipt-modal,
.card-buttons review-contract,
.modal-actions contract-sign-modal,
.modal-actions contract-act-sign-modal,
.modal-actions make-payment-modal {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  width: 100% !important;
}

.card-buttons .modal-trigger-wrap,
.card-buttons contract-sign-modal > :first-child,
.card-buttons contract-act-sign-modal > :first-child,
.card-buttons contract-act-modal > :first-child,
.card-buttons make-payment-modal > :first-child,
.card-buttons employer-proposal-revoke > :first-child,
.card-buttons proposal-revoke > :first-child,
.card-buttons job-done-modal > :first-child,
.card-buttons cancel-receipt-modal > :first-child,
.card-buttons review-contract > :first-child,
.modal-actions contract-sign-modal > :first-child,
.modal-actions contract-act-sign-modal > :first-child,
.modal-actions make-payment-modal > :first-child {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0;
}

.card-buttons contract-sign-modal > :first-child > :first-child,
.card-buttons contract-act-sign-modal > :first-child > :first-child,
.card-buttons contract-act-modal > :first-child > :first-child,
.card-buttons make-payment-modal > :first-child > :first-child,
.card-buttons employer-proposal-revoke .modal-trigger-wrap > :first-child,
.card-buttons proposal-revoke > :first-child > :first-child,
.card-buttons job-done-modal > :first-child > :first-child,
.card-buttons cancel-receipt-modal > :first-child > :first-child,
.card-buttons review-contract > :first-child,
.modal-actions contract-sign-modal > :first-child > :first-child,
.modal-actions contract-act-sign-modal > :first-child > :first-child,
.modal-actions make-payment-modal > :first-child > :first-child {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0;
}

.card-buttons .btn,
.card-buttons > a.btn,
.card-buttons > button.btn,
.card-buttons > span.btn,
.card-buttons contract-sign-modal .btn,
.card-buttons contract-act-sign-modal .btn,
.card-buttons contract-act-modal .btn,
.card-buttons make-payment-modal .btn,
.card-buttons employer-proposal-revoke .btn,
.card-buttons proposal-revoke .btn,
.card-buttons job-done-modal .btn,
.card-buttons cancel-receipt-modal .btn,
.card-buttons review-contract .btn,
.modal-actions .btn,
.modal-action-btn > .btn,
.modal-action-btn > a.btn,
.modal-action-btn > button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--ruqi-btn-height-lg) !important;
  min-height: var(--ruqi-btn-height-lg) !important;
  max-height: var(--ruqi-btn-height-lg) !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  padding: var(--ruqi-space-2) var(--ruqi-space-3) !important;
}

.card-buttons .btn-text,
.modal-actions .btn-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.2;
}

.card-buttons .btn:not(.btn-with-icon) .btn-text,
.modal-actions .btn:not(.btn-with-icon) .btn-text {
  flex: 0 1 auto;
  max-width: 100%;
}

.card-buttons .btn:not(:has(.btn-text)):not(.btn-with-icon),
.modal-actions .btn:not(:has(.btn-text)):not(.btn-with-icon) {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-buttons .btn-with-icon .btn-icon {
  flex-shrink: 0;
}

.card-buttons .flex-sm-grow-0,
.card-buttons .flex-xl-grow-0,
.card-buttons .flex-grow-0,
.modal-actions .flex-sm-grow-0,
.modal-actions .flex-xl-grow-0,
.modal-actions .flex-grow-0 {
  flex-grow: 1 !important;
}

.card-buttons [class*='ml-'],
.card-buttons [class*='mr-'],
.card-buttons [class*='mt-'],
.card-buttons [class*='mb-'],
.modal-actions [class*='ml-'],
.modal-actions [class*='mr-'],
.modal-actions [class*='mt-'],
.modal-actions [class*='mb-'] {
  margin: 0 !important;
}

/* Legacy rows: multiple buttons without .card-buttons wrapper */
.card-action [class*='col-']:has(> .btn + .btn),
.modal-body [class*='col-']:has(> .btn + .btn) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruqi-space-3);
}

.card-action [class*='col-']:has(> .btn + .btn) > .btn,
.modal-body [class*='col-']:has(> .btn + .btn) > .btn {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0 !important;
}

@media (max-width: 575.98px) {
  .card-buttons,
  .modal-actions {
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .card-buttons > *:not(.btn),
  .modal-actions > *:not(.btn),
  .modal-action-btn {
    width: 100% !important;
  }
}

/* ─── Extra variants & legacy main-new overrides ─────────── */
.btn-xs {
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: var(--ruqi-font-size-sm) !important;
  font-weight: var(--ruqi-font-weight-regular) !important;
}

.btn-xs.btn-dark,
.btn-xs.btn-dark:hover {
  background-color: var(--ruqi-color-neutral-bg) !important;
  border-color: transparent !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-green,
.btn.btn-green {
  background-color: var(--ruqi-color-primary) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-text-inverse) !important;
}

.btn-green:hover,
.btn.btn-green:hover {
  background-color: var(--ruqi-color-primary-hover) !important;
  border-color: var(--ruqi-color-primary-hover) !important;
}

.btn-outline-danger {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-error) !important;
  color: var(--ruqi-color-error) !important;
}

.btn-outline-danger:hover {
  border-color: #d41212 !important;
  color: #d41212 !important;
}

.btn-outline-warning {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-error) !important;
  color: var(--ruqi-color-error) !important;
}

.btn-outline-info {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-primary) !important;
  color: var(--ruqi-color-primary) !important;
}

.btn-outline-success {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-success) !important;
  color: var(--ruqi-color-success) !important;
}

.btn-info,
.btn.btn-info {
  background-color: var(--ruqi-color-neutral-bg) !important;
  border-color: var(--ruqi-color-neutral-bg) !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-info:hover {
  background-color: var(--ruqi-color-neutral-hover) !important;
}

.btn-light,
.btn.btn-light {
  background-color: var(--ruqi-color-bg-surface) !important;
  border-color: var(--ruqi-color-border-input-strong) !important;
  color: var(--ruqi-color-text-primary) !important;
}

.btn-outline-dark:hover .btn-icon,
.btn-outline-secondary:hover .btn-icon {
  filter: none !important;
}

.btn-primary:hover .btn-icon,
.btn-primary:active .btn-icon,
.btn-danger:hover .btn-icon,
.btn-success:hover .btn-icon {
  filter: brightness(0) invert(1);
}

.btn-secondary:hover {
  background-clip: border-box !important;
}

.btn-inline:hover {
  color: var(--ruqi-color-link-hover) !important;
}

@media (max-width: 1429.98px) {
  .btn:not(.pagination-btn):not(.btn-favorite):not(.btn-only-icon) {
    letter-spacing: normal !important;
  }

  .btn-lg:not(.pagination-btn) {
    min-height: var(--ruqi-btn-height-lg) !important;
    padding: var(--ruqi-space-3) var(--ruqi-space-6) !important;
    font-size: var(--ruqi-font-size-lg) !important;
  }

  .btn-sm:not(.pagination-btn) {
    min-height: var(--ruqi-btn-height-sm) !important;
    padding: var(--ruqi-space-2) var(--ruqi-space-3) !important;
    font-size: var(--ruqi-font-size-sm) !important;
  }
}

@media (max-width: 989.98px) {
  .btn:not(.pagination-btn):not(.btn-favorite):not(.btn-only-icon) {
    font-size: var(--ruqi-font-size-sm) !important;
  }

  .btn-lg:not(.pagination-btn) {
    font-size: var(--ruqi-font-size-lg) !important;
  }
}

@media (max-width: 575.98px) {
  .btn:not(.pagination-btn):not(.btn-favorite):not(.btn-only-icon) {
    font-size: var(--ruqi-font-size-sm) !important;
  }

  .btn-lg:not(.pagination-btn) {
    font-size: var(--ruqi-font-size-md) !important;
  }
}