/* Shared POS button look: depth + press feedback */
.btn-primary,
.btn-success,
.btn-edit,
.btn-danger,
.btn-ghost,
.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    filter 0.12s ease;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

.btn-primary:hover,
.btn-success:hover,
.btn-edit:hover,
.btn-danger:hover,
.btn-ghost:hover,
.btn-secondary:hover {
  filter: brightness(1.06);
}

.btn-primary:active,
.btn-success:active,
.btn-edit:active,
.btn-danger:active,
.btn-ghost:active,
.btn-secondary:active {
  transform: translateY(2px);
  filter: brightness(0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.35) inset,
    0 0 0 rgba(0, 0, 0, 0),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary:disabled,
.btn-success:disabled,
.btn-edit:disabled,
.btn-danger:disabled,
.btn-ghost:disabled,
.btn-secondary:disabled,
.btn-primary[disabled],
.btn-success[disabled],
.btn-edit[disabled],
.btn-danger[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(0, 0, 0, 0.15);
}

.btn-primary:disabled:hover,
.btn-success:disabled:hover,
.btn-edit:disabled:hover,
.btn-danger:disabled:hover,
.btn-primary:disabled:active,
.btn-success:disabled:active,
.btn-edit:disabled:active,
.btn-danger:disabled:active {
  filter: none;
  transform: none;
}

.btn-primary {
  background: linear-gradient(180deg, #60a5fa 0%, var(--accent, #3b82f6) 48%, var(--accent-hover, #2563eb) 100%);
  border-color: #1d4ed8;
  color: #fff;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 45%, #1d4ed8 100%);
  color: #fff;
}

.btn-success {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 48%, #15803d 100%);
  border-color: #14532d;
  color: #fff;
}

.btn-success:hover {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 45%, #166534 100%);
  color: #fff;
}

.btn-edit {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
  border-color: #92400e;
  color: #fff;
}

.btn-edit:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 45%, #b45309 100%);
  color: #fff;
}

.btn-danger {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 48%, #b91c1c 100%);
  border-color: #991b1b;
  color: #fff;
}

.btn-danger:hover {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 45%, #991b1b 100%);
  color: #fff;
}

.btn-ghost,
.btn-secondary {
  background: linear-gradient(180deg, #243247 0%, var(--surface, #1a2332) 55%, #121a26 100%);
  border-color: var(--border, #2d3a4f);
  color: #fff;
}

.btn-ghost:hover,
.btn-secondary:hover {
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

/* Compact row actions keep the same press feel */
.btn-edit.small,
.btn-primary.small,
.btn-secondary.small,
.btn-danger.small,
button.small.btn-edit,
button.small.btn-primary {
  border-radius: 6px;
}

/* Top header nav / gear — same pressable look */
.nav-btn,
.header-gear-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    filter 0.12s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #243247 0%, var(--surface, #1a2332) 55%, #121a26 100%);
  border-color: var(--border, #2d3a4f);
  color: #fff;
}

.nav-btn:hover,
.header-gear-btn:hover {
  filter: brightness(1.06);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.nav-btn:active,
.header-gear-btn:active {
  transform: translateY(2px);
  filter: brightness(0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.35) inset,
    0 0 0 rgba(0, 0, 0, 0),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-btn.active {
  background: linear-gradient(180deg, #60a5fa 0%, var(--accent, #3b82f6) 48%, var(--accent-hover, #2563eb) 100%);
  border-color: #1d4ed8;
  color: #fff;
  filter: none;
}

.nav-btn.active:hover {
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 45%, #1d4ed8 100%);
  color: #fff;
  filter: brightness(1.04);
}

/* Admin backs + Active/Inactive tabs — same pressable look */
.tab-btn,
.back-link,
.back-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    filter 0.12s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.22);
  color: #fff;
}

.tab-btn,
.back-link {
  background: linear-gradient(180deg, #243247 0%, var(--surface, #1a2332) 55%, #121a26 100%);
  border-color: var(--border, #2d3a4f);
}

/* Toolbar Back only — indigo, not header ← links */
.back-btn {
  background: linear-gradient(180deg, #818cf8 0%, #6366f1 48%, #4f46e5 100%);
  border-color: #3730a3;
  color: #fff;
}

.tab-btn:hover,
.back-link:hover {
  filter: brightness(1.06);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.back-btn:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 45%, #4f46e5 100%);
  border-color: #312e81;
  color: #fff;
}

.tab-btn:active,
.back-link:active,
.back-btn:active {
  transform: translateY(2px);
  filter: brightness(0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.35) inset,
    0 0 0 rgba(0, 0, 0, 0),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.tab-btn.active {
  background: linear-gradient(180deg, #60a5fa 0%, var(--accent, #3b82f6) 48%, var(--accent-hover, #2563eb) 100%);
  border-color: #1d4ed8;
  color: #fff;
  filter: none;
}

.tab-btn.active:hover {
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 45%, #1d4ed8 100%);
  color: #fff;
  filter: brightness(1.04);
}

.header-admin-backs .back-link {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.header-gear-wrap.open .header-gear-btn {
  border-color: var(--accent, #3b82f6);
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent, #3b82f6) 35%, #243247) 0%,
    color-mix(in srgb, var(--accent, #3b82f6) 18%, #1a2332) 100%
  );
}