body {
  overflow-x: hidden;
}
table.dataTable thead th {
  text-align: center !important;
}
.toast-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* İçindeki toast dışında tıklama geçmesin */
}

.toast-container.top-right {
  top: 20px;
  right: 20px;
}

.toast-container.top-left {
  top: 20px;
  left: 20px;
}

.toast-container.top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.toast-container.bottom-right {
  bottom: 20px;
  right: 20px;
}

.toast-container.bottom-left {
  bottom: 20px;
  left: 20px;
}

.toast-container.bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* === TOAST BOX === */
.toasts {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  color: #333;
  padding: 14px 16px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  min-width: 300px;
  max-width: 400px;
  user-select: none;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.toasts:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* === ICON === */
.toasts .icon {
  flex-shrink: 0;
  font-size: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === CONTENT === */
.toast-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  line-height: 1.3;
}

.toast-content .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.toast-content .message {
  font-size: 15px;
  color: #555;
}

/* === TYPE COLORS === */
.toasts.success {
  border-left: 5px solid #34c759;
}

.toasts.success .icon {
  background: #e6f9ed;
  color: #34c759;
}

.toasts.error {
  border-left: 5px solid #ef4444;
}

.toasts.error .icon {
  background: #fde7e7;
  color: #ef4444;
}

.toasts.info {
  border-left: 5px solid #2196f3;
}

.toasts.info .icon {
  background: #e7f0fd;
  color: #2196f3;
}

.toasts.couponSuccess {
  border-left: 5px solid var(--text-main);
  background: linear-gradient(90deg, #5f6fff 0%, var(--text-main) 100%);
  color: #fff;
}

.toasts.couponSuccess .icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.toasts.couponError {
  border-left: 5px solid #da3b32;
  background: #da3b32;
  color: #fff;
}

.toasts.couponError .icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* === ANIMASYONLAR === */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.slide-in-right {
  animation: slideInRight 0.4s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.4s forwards;
}

.slide-in-left {
  animation: slideInLeft 0.4s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.4s forwards;
}

.slide-in-top {
  animation: slideInTop 0.4s forwards;
}

.slide-out-top {
  animation: slideOutTop 0.4s forwards;
}

.slide-in-bottom {
  animation: slideInBottom 0.4s forwards;
}

.slide-out-bottom {
  animation: slideOutBottom 0.4s forwards;
}

/* === DARK MODE (Vuexy uyumlu + daha kontrastlı) === */
[data-bs-theme='dark'] .toasts {
  background: #2f3349; /* Card rengi */
  color: #f1f2f6; /* Açık yazı rengi */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}

[data-bs-theme='dark'] .toast-content .message {
  color: #c3c6d4; /* Hafif gri, başlıktan daha soft */
}

/* SUCCESS */
[data-bs-theme='dark'] .toasts.success {
  border-left-color: #00e676;
}
[data-bs-theme='dark'] .toasts.success .icon {
  background: rgba(0, 230, 118, 0.25);
  color: #00e676;
}

/* ERROR */
[data-bs-theme='dark'] .toasts.error {
  border-left-color: #ff4d4f;
}
[data-bs-theme='dark'] .toasts.error .icon {
  background: rgba(255, 77, 79, 0.25);
  color: #ff4d4f;
}

/* INFO */
[data-bs-theme='dark'] .toasts.info {
  border-left-color: #1e9fff;
}
[data-bs-theme='dark'] .toasts.info .icon {
  background: rgba(30, 159, 255, 0.25);
  color: #1e9fff;
}

/* WARNING */
[data-bs-theme='dark'] .toasts.warning {
  border-left-color: #ffb400;
}
[data-bs-theme='dark'] .toasts.warning .icon {
  background: rgba(255, 180, 0, 0.25);
  color: #ffb400;
}

/* COUPON SUCCESS */
[data-bs-theme='dark'] .toasts.couponSuccess {
  border-left-color: #9d7dff;
  background: linear-gradient(90deg, #8a5fff 0%, #9d7dff 100%);
  color: #fff;
}
[data-bs-theme='dark'] .toasts.couponSuccess .icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* COUPON ERROR */
[data-bs-theme='dark'] .toasts.couponError {
  border-left-color: #ff4d4f;
  background: linear-gradient(90deg, #ff5c5c 0%, #d9363e 100%);
  color: #fff;
}
[data-bs-theme='dark'] .toasts.couponError .icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}