/* Mobile drawer + backdrop */
#sidebar-backdrop {
  transition: opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.45);
}

body.sidebar-open #sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  #sidebar-backdrop {
    display: none !important;
  }
}

#app-sidebar {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (max-width: 1023px) {
  body.sidebar-open #app-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.22);
  }
}

/* Primary CTA — 经典蓝 */
.btn-saas-primary {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-saas-primary:hover {
  background: #2563eb;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.btn-saas-ghost {
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.btn-saas-ghost:hover {
  transform: translateY(-1px);
}

.stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* === Stripe-style dashboard upgrade === */

/* Page mount fade-in */
@keyframes saas-fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.al-fade-in {
  animation: saas-fade-in-up 0.32s ease both;
}
.al-fade-in[data-delay="1"] { animation-delay: 0.04s; }
.al-fade-in[data-delay="2"] { animation-delay: 0.08s; }
.al-fade-in[data-delay="3"] { animation-delay: 0.12s; }
.al-fade-in[data-delay="4"] { animation-delay: 0.16s; }

/* Soft hover-lift for analytics cards */
.al-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.al-card:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* Skeleton shimmer */
@keyframes saas-shimmer {
  0% { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.22) 50%, rgba(148, 163, 184, 0.08) 100%);
  background-size: 960px 100%;
  animation: saas-shimmer 1.3s linear infinite;
  border-radius: 8px;
}
html.dark .skeleton-shimmer {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.35) 0%, rgba(71, 85, 105, 0.55) 50%, rgba(51, 65, 85, 0.35) 100%);
  background-size: 960px 100%;
}

/* Inline horizontal bar inside TOP lists */
.al-bar-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.al-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--al-bar, 0%);
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 999px;
  transition: width 0.45s ease;
}
html.dark .al-bar-track {
  background: rgba(148, 163, 184, 0.18);
}

/* Realtime pulse dot */
@keyframes saas-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.al-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: saas-pulse-ring 1.6s ease-out infinite;
}
.al-pulse-dot--idle {
  background: #94a3b8;
  animation: none;
  box-shadow: none;
}

/* Page-level navigation loading overlay */
#al-page-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
}
html.dark #al-page-loader {
  background: rgba(2, 6, 23, 0.45);
}
#al-page-loader.is-on {
  display: flex;
}
#al-page-loader .al-loader-ring {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 3px solid rgba(59, 130, 246, 0.25);
  border-top-color: #3b82f6;
  animation: saas-spin 0.85s linear infinite;
}
@keyframes saas-spin {
  to { transform: rotate(360deg); }
}

/* Sticky right-rail behavior on large screens */
@media (min-width: 1280px) {
  .al-right-rail-sticky {
    position: sticky;
    top: 4.25rem;
    align-self: flex-start;
  }
}

/* Table row gentle hover */
.al-table tbody tr {
  transition: background-color 0.12s ease;
}
.al-table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.06);
}
html.dark .al-table tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.6);
}

/* SaaS dashboard: focus ring polish on top-bar range select & primary buttons */
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* Status pill (used in click logs table) */
.persona-pill {
  font-variant-numeric: tabular-nums;
}

/* Smooth gradient bar chart border-top accent (Bar canvas wrap) */
canvas { font-feature-settings: 'tnum' on, 'lnum' on; }

/* ===== Geo Rule Builder ===== */
.rule-row,
.variant-row {
  animation: saas-fade-in-up 0.18s ease both;
}
.rule-row:hover,
.variant-row:hover {
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}
.rule-empty,
.variant-empty {
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rule-empty:hover,
.variant-empty:hover {
  border-color: rgb(96 165 250);
  background: rgba(239, 246, 255, 0.7);
}
html.dark .rule-empty:hover,
html.dark .variant-empty:hover {
  border-color: rgb(59 130 246 / 0.6);
  background: rgba(30, 41, 59, 0.4);
}

/* Allow narrow device labels in dropdown without truncation */
select.rule-device option { font-size: 12px; }

/* ===== Country Combobox ===== */
.country-combo { position: relative; }
.country-combo .cc-btn:focus-visible {
  outline: none;
}
.country-combo .cc-panel {
  animation: saas-fade-in-up 0.12s ease both;
}
.country-combo .cc-list::-webkit-scrollbar { width: 8px; }
.country-combo .cc-list::-webkit-scrollbar-track { background: transparent; }
.country-combo .cc-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}
html.dark .country-combo .cc-list::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.5);
}
.country-combo .cc-item.cc-active {
  background: rgb(241 245 249);
}
html.dark .country-combo .cc-item.cc-active {
  background: rgb(30 41 59);
}

/* ===== Rule cards (Stripe / Meta Ads Manager 风格) ===== */
.rule-card,
.variant-card {
  animation: saas-fade-in-up 0.16s ease both;
}

/* Rule wizard ====================================== */
#wizardBackdrop {
  animation: wizard-backdrop-in 0.18s ease both;
}
#wizardBackdrop > div {
  animation: wizard-pop 0.22s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes wizard-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wizard-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rule-type-card {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rule-type-card:hover {
  transform: translateY(-1px);
}

/* Device button group selected pulse */
.device-buttons .dev-btn {
  user-select: none;
}