/* ================== BUTTONS ================== */
.btn {
  padding: 0.55rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Tactile press state — subtle 1px press-down on any button */
.btn:active {
  transform: translateY(1px);
}

/* Keyboard focus — crisp ring, consistent across variants */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
}

.btn-span {
  color: var(--text-muted);
}

/* ── Outline buttons — borderless text with tinted hover ── */

/* Shared base for all outline variants */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-dark {
  border-color: transparent;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

/* Primary — blue */
.btn-outline-primary {
  color: var(--primary-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgba(var(--primary-blue-rgb), 0.08);
  border-color: transparent;
  color: var(--primary-blue);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-primary.active,
.btn-group .btn-outline-primary.active {
  background: rgba(var(--primary-blue-rgb), 0.1);
  border-color: transparent;
  color: var(--primary-blue);
  box-shadow: none;
}

/* Success — green */
.btn-outline-success {
  color: var(--success-green);
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background: rgba(25, 135, 84, 0.08);
  border-color: transparent;
  color: var(--success-green);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-success.active,
.btn-group .btn-outline-success.active {
  background: rgba(25, 135, 84, 0.1);
  border-color: transparent;
  color: var(--success-green);
  box-shadow: none;
}

/* Warning — amber */
.btn-outline-warning {
  color: var(--btn-warning-text);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background: rgba(255, 193, 7, 0.1);
  border-color: transparent;
  color: var(--btn-warning-text);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-warning.active,
.btn-group .btn-outline-warning.active {
  background: rgba(255, 193, 7, 0.12);
  border-color: transparent;
  color: var(--btn-warning-text);
  box-shadow: none;
}

/* Danger — red */
.btn-outline-danger {
  color: var(--danger-red);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background: rgba(220, 53, 69, 0.08);
  border-color: transparent;
  color: var(--danger-red);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-danger.active,
.btn-group .btn-outline-danger.active {
  background: rgba(220, 53, 69, 0.1);
  border-color: transparent;
  color: var(--danger-red);
  box-shadow: none;
}

/* Secondary — grey */
.btn-outline-secondary {
  color: var(--secondary-gray);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: rgba(108, 117, 125, 0.08);
  border-color: transparent;
  color: var(--secondary-gray);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-secondary.active,
.btn-group .btn-outline-secondary.active {
  background: rgba(108, 117, 125, 0.1);
  border-color: transparent;
  color: var(--secondary-gray);
  box-shadow: none;
}

/* Info — cyan */
.btn-outline-info {
  color: var(--btn-info-text);
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background: rgba(13, 202, 240, 0.08);
  border-color: transparent;
  color: var(--btn-info-text);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-info.active,
.btn-group .btn-outline-info.active {
  background: rgba(13, 202, 240, 0.1);
  border-color: transparent;
  color: var(--btn-info-text);
  box-shadow: none;
}

/* Dark — charcoal */
.btn-outline-dark {
  color: var(--dark-charcoal);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background: rgba(52, 58, 64, 0.08);
  border-color: transparent;
  color: var(--dark-charcoal);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-outline-dark.active,
.btn-group .btn-outline-dark.active {
  background: rgba(52, 58, 64, 0.1);
  border-color: transparent;
  color: var(--dark-charcoal);
  box-shadow: none;
}

/* ── Solid Bootstrap buttons — keep filled with hover shadow ── */
.btn-primary, .btn-success, .btn-danger,
.btn-warning, .btn-secondary, .btn-info {
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary:hover   { box-shadow: var(--btn-primary-shadow); }
.btn-success:hover   { box-shadow: var(--btn-success-shadow); }
.btn-danger:hover    { box-shadow: var(--btn-danger-shadow); }
.btn-warning:hover   { box-shadow: var(--btn-warning-shadow); }
.btn-secondary:hover { box-shadow: var(--btn-secondary-shadow); }
.btn-info:hover      { box-shadow: var(--btn-info-shadow); }

/* ================== UNDO/REDO TOOLBAR ================== */
#undo-redo-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-top: -1.5rem;
}
#undo-redo-toolbar .btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}
.undo-redo-toast {
    position: fixed;
    bottom: 4rem;
    right: 1.25rem;
    z-index: 1070;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.undo-redo-toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.undo-redo-toast-error {
    border-color: var(--danger-red, #dc3545);
    color: var(--danger-red, #dc3545);
}