/* ======================================================
   BUTTON SYSTEM · OOASY
   Canonical global component
====================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  box-shadow: none;
  font-family: var(--font-main);
  font-size: var(--type-button) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transform: translateY(0);
  transition:
    transform .07s ease-out,
    background-color .07s ease-out,
    border-color .07s ease-out,
    color .07s ease-out,
    box-shadow .09s ease-out,
    opacity .07s ease-out;
}

.toolbar button,
.module-toolbar button {
  font-size: var(--type-button) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.btn i,
.btn svg,
.btn .lucide-icon,
.toolbar button i,
.toolbar button svg,
.module-toolbar button i,
.module-toolbar button svg {
  width: var(--control-icon) !important;
  min-width: var(--control-icon) !important;
  height: var(--control-icon) !important;
  flex-shrink: 0;
  stroke-width: 2.15 !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  transition-duration: .03s;
}

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

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

/* Sizes */

.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  gap: 8px;
  border-radius: 12px;
  font-size: 12px !important;
}

.btn-sm i,
.btn-sm svg {
  width: var(--icon-sm) !important;
  min-width: var(--icon-sm) !important;
  height: var(--icon-sm) !important;
}

.btn-lg {
  min-height: 58px;
  padding: 0 28px;
  border-radius: 18px;
  font-size: 15px !important;
}

.btn-block,
.full-btn {
  width: 100%;
}

/* Primary */

.btn.btn-primary {
  border-color: rgba(30, 64, 175, .28);
  background: var(--brand-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .14);
}

.btn.btn-primary:hover {
  border-color: var(--brand-primary-dark);
  background: var(--brand-primary-hover);
  color: var(--color-on-primary);
  box-shadow: 0 4px 10px rgba(37, 99, 235, .18);
}

.btn.btn-primary:active {
  background: var(--brand-primary-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* Neutral variants */

.btn-secondary,
.btn-soft,
.btn-outline,
.btn-icon {
  border-color: rgba(16, 25, 54, .08);
  background: rgba(255, 255, 255, .74);
  color: #020617;
  box-shadow: 0 4px 12px rgba(16, 25, 54, .035);
}

.btn-secondary:hover,
.btn-soft:hover,
.btn-outline:hover,
.btn-icon:hover {
  border-color: rgba(37, 99, 235, .14);
  background: rgba(37, 99, 235, .07);
  box-shadow: 0 12px 26px rgba(16, 25, 54, .055);
}

.btn-dark,
.btn-black {
  border-color: transparent;
  background: #020617;
  color: #fff;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .20);
}

.btn-dark:hover,
.btn-black:hover {
  background: #0f172a;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .26);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-soft);
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(15, 23, 42, .05);
  color: #0f172a;
}

/* Semantic variants */

.btn-success {
  border-color: transparent;
  background: var(--color-success);
  color: #fff;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .18);
}

.btn-success:hover {
  background: var(--color-success-hover);
  box-shadow: 0 14px 30px rgba(22, 163, 74, .24);
}

.btn-warning {
  border-color: transparent;
  background: var(--color-warning);
  color: #fff;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .18);
}

.btn-warning:hover {
  background: var(--color-warning-hover);
  box-shadow: 0 14px 30px rgba(245, 158, 11, .24);
}

.btn-danger {
  border-color: transparent;
  background: var(--color-danger);
  color: #fff;
  box-shadow: 0 10px 24px rgba(220, 38, 38, .18);
}

.btn-danger:hover {
  background: var(--color-danger-hover);
  box-shadow: 0 14px 30px rgba(220, 38, 38, .24);
}

.btn-info {
  border-color: transparent;
  background: var(--color-info);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .18);
}

.btn-info:hover {
  background: var(--color-info-hover);
  box-shadow: 0 14px 30px rgba(8, 145, 178, .24);
}

/* Action helpers */

.btn-soft.action-edit,
.btn.action-edit {
  color: var(--brand-primary);
}

.btn-soft.action-edit:hover {
  border-color: var(--border-primary-soft);
  background: var(--bg-soft-primary);
}

.btn.action-delete {
  color: var(--color-danger);
}

.btn-soft.action-delete {
  border-color: var(--border-danger-soft);
}

.btn-soft.action-delete:hover {
  border-color: var(--border-danger-soft);
  background: var(--bg-soft-danger);
}

.btn-soft.action-success,
.btn.action-success {
  color: var(--color-success);
}

.btn-soft.action-success:hover {
  border-color: var(--border-success-soft);
  background: var(--bg-soft-success);
}

/* Icon buttons */

.btn-icon,
.customer-panel-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--icon-button-size) !important;
  min-width: var(--icon-button-size) !important;
  height: var(--icon-button-size) !important;
  min-height: var(--icon-button-size) !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

.btn-icon.btn-sm {
  width: 40px !important;
  min-width: 40px !important;
}

.btn-icon i,
.btn-icon svg,
.header-icon-btn i,
.customer-panel-icon-btn i,
.customer-panel-icon-btn svg {
  width: var(--icon-md) !important;
  min-width: var(--icon-md) !important;
  height: var(--icon-md) !important;
  stroke-width: 2.15 !important;
}

/* Loading */

.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  color: inherit;
  content: "";
  animation: btn-spin .7s linear infinite;
}

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

/* Groups */

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.btn-group .btn:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.btn-group .btn + .btn {
  margin-left: -1px;
}

@media (max-width: 640px) {
  .btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
  }

  .btn-lg {
    min-height: 54px;
  }

  .btn-icon {
    width: 46px !important;
    min-width: 46px !important;
  }
}