/* ============================================================================
   08 · VISUAL POLISH & AMBIENCE

   Modern section headers / buttons / inputs, the welcome two-column sticky
   layout, section transitions, gradient accents, the ambient background orbs,
   sidebar glows, scrollbar styling, pulse badge and the feature page header.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ===== SETTINGS SECTION HEADER (MODERN) ===== */
.settings-section-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.settings-section-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* ===== MODERN BUTTON IMPROVEMENTS ===== */
.btn-primary {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  box-shadow: 0 2px 8px rgba(220, 38, 38,0.35);
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #B91C1C, #991B1B);
  box-shadow: 0 4px 16px rgba(220, 38, 38,0.45);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(220, 38, 38,0.25);
}

/* ===== MODERN INPUT IMPROVEMENTS ===== */
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 2px rgba(220, 38, 38,0.2);
}

/* ===== COLLAPSIBLE SECTION HEADERS ===== */
.sec-toggle-header {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.sec-toggle-header:hover {
  background: rgba(255,255,255,0.02);
}
.sec-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 0.25rem;
}

/* ===== WELCOME PAGE — TWO-COLUMN STICKY LAYOUT ===== */
.welcome-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.welcome-settings {
  flex: 1;
  min-width: 0;
}
.welcome-preview-col {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 1.25rem;
}
.welcome-preview-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}
.welcome-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid var(--border);
}
.welcome-preview-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.welcome-preview-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.welcome-preview-tab:hover { color: var(--text); }
.welcome-preview-tab.active {
  color: var(--blurple);
  border-bottom-color: var(--blurple);
}
.welcome-preview-body { padding: 0.75rem; }
.welcome-preview-hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.625rem;
  opacity: 0.75;
}
@media (max-width: 1100px) {
  .welcome-layout { flex-direction: column-reverse; }
  .welcome-preview-col { width: 100%; position: static; }
}

/* ===== SECTION TRANSITION ANIMATIONS ===== */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-content > * {
  animation: fadeSlideIn 0.25s ease both;
}
.page-content > *:nth-child(2)  { animation-delay: 0.04s; }
.page-content > *:nth-child(3)  { animation-delay: 0.08s; }
.page-content > *:nth-child(4)  { animation-delay: 0.12s; }
.page-content > *:nth-child(5)  { animation-delay: 0.16s; }
.page-content > *:nth-child(6)  { animation-delay: 0.20s; }

/* ===== GRADIENT ACCENT ELEMENTS ===== */
.gradient-text-blurple {
  background: linear-gradient(135deg, #DC2626, #93C572);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media (max-width: 640px) {
  .analytics-section-header { font-size: 0.6875rem; }
  .spike-row { flex-wrap: wrap; }
  .spike-bar-wrap { width: 60px; }
}

/* ===== ANIMATED BACKGROUND GLOW ===== */
/* Floating ambient orbs rendered as a fixed overlay behind all content */
.app-bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform, opacity;
}

.glow-orb--blurple {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(220, 38, 38,0.13) 0%, transparent 65%);
  top: -280px;
  right: -120px;
  animation: orb-drift-a 22s ease-in-out infinite alternate;
}

.glow-orb--pink {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(147,197,114,0.10) 0%, transparent 65%);
  bottom: -180px;
  left: -60px;
  animation: orb-drift-b 28s ease-in-out infinite alternate;
}

.glow-orb--teal {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(111,175,90,0.07) 0%, transparent 65%);
  top: 40%;
  left: 38%;
  animation: orb-drift-a 35s ease-in-out infinite alternate-reverse;
}

@keyframes orb-drift-a {
  0%   { transform: translate(0px, 0px)   scale(1);    opacity: 0.65; }
  30%  { transform: translate(-50px, 60px)  scale(1.08); opacity: 0.9;  }
  60%  { transform: translate(40px, -30px) scale(0.95); opacity: 0.75; }
  100% { transform: translate(-70px, 80px)  scale(1.12); opacity: 1;    }
}

@keyframes orb-drift-b {
  0%   { transform: translate(0px, 0px)   scale(1);    opacity: 0.5;  }
  40%  { transform: translate(70px, -50px) scale(1.1);  opacity: 0.85; }
  70%  { transform: translate(-40px, 30px) scale(0.9);  opacity: 0.6;  }
  100% { transform: translate(50px, -70px) scale(1.15); opacity: 0.8;  }
}

/* Shimmer sweep on cards */
@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.card-shimmer {
  position: relative;
  overflow: hidden;
}
.card-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.025) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmer-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ===== SIDEBAR SUB-SECTION LABELS ===== */
.sidebar-sub-label {
  padding: 0.25rem 0.625rem 0.125rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* Tighter gap between sidebar sub-label and nav items */
.sidebar-sub-label + .sidebar-nav {
  gap: 0;
}

/* ===== SIDEBAR BRAND GLOW ===== */
.sidebar-brand-icon {
  background: linear-gradient(135deg, var(--blurple), #7289da) !important;
  box-shadow: 0 0 12px rgba(220, 38, 38,0.4);
  transition: box-shadow 0.3s;
}
.sidebar-brand:hover .sidebar-brand-icon {
  box-shadow: 0 0 20px rgba(220, 38, 38,0.6);
}

/* ===== ADMIN SIDEBAR GLOW BRAND ===== */
.admin-brand-icon {
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  box-shadow: 0 0 12px rgba(231,76,60,0.4);
}

/* ===== PAGE CONTENT POSITION ===== */
/* Ensure page content sits above the background glow overlay */
.app-main > * {
  position: relative;
  z-index: 1;
}

/* ===== APP SHELL STACKING ===== */
.app-shell {
  position: relative;
  z-index: 1;
}

/* ===== SCROLLBAR IMPROVEMENTS ===== */
.app-main {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38,0.25) transparent;
}
.app-main::-webkit-scrollbar { width: 6px; }
.app-main::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38,0.2);
  border-radius: 3px;
}
.app-main::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 38, 38,0.4);
}

/* ===== SIDEBAR ACTIVE LINK GLOW ===== */
.sidebar-nav-link.active {
  background: rgba(220, 38, 38,0.18) !important;
  color: var(--blurple) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blurple);
}

/* ===== CARD IMPROVEMENTS ===== */
.settings-section {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-section:hover {
  border-color: rgba(220, 38, 38,0.15);
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}

/* ===== KPI CARD GLOW ACCENT ===== */
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(220, 38, 38,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== PULSE BADGE FOR NEW FEATURES ===== */
.badge-new {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  background: rgba(220, 38, 38,0.2);
  color: var(--blurple);
  border: 1px solid rgba(220, 38, 38,0.3);
  margin-left: 0.25rem;
  animation: pulse-badge 2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== FEATURE PAGE HEADER ===== */
.feature-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(220, 38, 38,0.08) 0%, rgba(220, 38, 38,0.02) 100%);
  border: 1px solid rgba(220, 38, 38,0.15);
  margin-bottom: 1.5rem;
}

.feature-hero-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.feature-hero-text h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.feature-hero-text p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}