/* ============================================================
   SeoCute — ux.css
   Micro-UX: loading states, toasts, transitions,
   hover effects, focus rings, empty states, animations.
   ============================================================ */

/* ── Page fade-in ── */
.layout-page-content,
.container-xxl {
  animation: sc-fadein 200ms ease both;
}
@keyframes sc-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card hover elevation ── */
.sc-section-card,
.sc-metric-card,
.rf-card,
.stat-card,
.card {
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease !important;
}
.sc-section-card:hover { box-shadow: var(--shadow-sm) !important; }
.sc-metric-card:hover  { box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }

/* ── Button base transitions ── */
.btn {
  transition: all 160ms ease !important;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97) !important; }
.btn:disabled, .btn.sc-loading {
  opacity: .7 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Loading spinner inside button ── */
.btn.sc-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sc-spin 600ms linear infinite;
  right: 10px; top: 50%;
  transform: translateY(-50%);
}
@keyframes sc-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── Focus rings ── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(105,108,255,.15) !important;
}
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Table row hover ── */
.sc-table tbody tr,
.table tbody tr {
  transition: background 120ms ease;
}

/* ── Form input transitions ── */
.form-control,
.form-select,
input,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

/* ── Link hover ── */
a { transition: color 140ms ease, opacity 140ms ease; }

/* ── Toast notification system ── */
#sc-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
.sc-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: sc-toast-in 250ms cubic-bezier(.34,1.56,.64,1) both;
  min-width: 280px;
}
.sc-toast.sc-toast-out {
  animation: sc-toast-out 200ms ease forwards;
}
@keyframes sc-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes sc-toast-out {
  to { opacity: 0; transform: translateX(40px) scale(.95); }
}
.sc-toast-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
.sc-toast.success .sc-toast-icon { background: var(--color-success-soft); color: var(--color-success); }
.sc-toast.error   .sc-toast-icon { background: var(--color-danger-soft);  color: var(--color-danger); }
.sc-toast.warning .sc-toast-icon { background: var(--color-warning-soft); color: var(--color-warning); }
.sc-toast.info    .sc-toast-icon { background: var(--color-info-soft);    color: var(--color-info); }
.sc-toast-body { flex: 1; min-width: 0; }
.sc-toast-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.sc-toast-msg   { font-size: 12px; color: var(--color-muted); line-height: 1.4; }
.sc-toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--color-muted); font-size: 16px; padding: 0;
  flex-shrink: 0; line-height: 1;
  transition: color 140ms ease;
}
.sc-toast-close:hover { color: var(--color-text); }

/* ── Progress bar animation ── */
.progress-bar {
  transition: width 600ms ease !important;
}

/* ── Skeleton loading ── */
.sc-skeleton {
  background: linear-gradient(90deg,
    var(--color-hover) 25%,
    var(--color-border) 50%,
    var(--color-hover) 75%
  );
  background-size: 200% 100%;
  animation: sc-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes sc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Modal transitions ── */
.modal.fade .modal-dialog {
  transform: translateY(-10px) scale(.98);
  transition: transform 200ms ease !important;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

/* ── Badge pulse for notifications ── */
@keyframes sc-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.sc-badge-pulse { animation: sc-pulse 2s ease infinite; }

/* ── Clickable rows ── */
tr.sc-clickable { cursor: pointer; }
tr.sc-clickable:hover td { background: var(--color-hover) !important; }

/* ── Tooltip-like title enhancement ── */
[data-sc-tip] { position: relative; cursor: help; }

/* ── Smooth number transitions ── */
.sc-metric-value { transition: color 300ms ease; }

/* ── Icon button ── */
.sc-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 15px;
}
.sc-icon-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}