/* ═══════════════════════════════════════════════════════════════
   Sophie Dashboard — Custom theme (violet/indigo modern)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tblr-primary: #8b5cf6;
  --tblr-primary-rgb: 139, 92, 246;
  --tblr-primary-hover: #7c3aed;
  --brand-grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(139,92,246,.15) 0%, rgba(236,72,153,.15) 100%);
}

[data-bs-theme="dark"] {
  --tblr-bg-surface: #0f1014;
  --tblr-bg-surface-secondary: #181a21;
}

body[data-bs-theme="dark"] {
  background: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.08), transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(236,72,153,.06), transparent 60%),
              #0b0c10;
}

/* Brand gradient text & avatars */
.brand-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.brand-bg { background: var(--brand-grad); color: white; }
.brand-bg-soft { background: var(--brand-grad-soft); }

/* Cards : subtle glow & glass */
.card {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(139,92,246,.15);
}
.card-header {
  border-bottom-color: rgba(255,255,255,.05) !important;
}

/* KPI cards */
.kpi-card .h1 {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn-primary {
  background: var(--brand-grad);
  border: none;
  font-weight: 500;
}
.btn-primary:hover { filter: brightness(1.1); }

/* Sidebar nav active */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link {
  background: var(--brand-grad-soft);
  border-radius: 8px;
  color: #c4b5fd !important;
}

/* Tables : cleaner rows */
.table-vcenter td, .table-vcenter th { padding: .75rem 1rem; }
.table > tbody > tr:hover { background: rgba(139,92,246,.05); }

/* Status badges custom */
.badge.bg-red-lt    { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
.badge.bg-blue-lt   { background: rgba(99,102,241,.15) !important; color: #a5b4fc !important; }
.badge.bg-green-lt  { background: rgba(34,197,94,.15) !important; color: #86efac !important; }
.badge.bg-orange-lt { background: rgba(249,115,22,.15) !important; color: #fdba74 !important; }
.badge.bg-purple-lt { background: rgba(168,85,247,.15) !important; color: #d8b4fe !important; }
.badge.bg-yellow-lt { background: rgba(234,179,8,.15) !important; color: #fde047 !important; }
.badge.bg-secondary-lt { background: rgba(148,163,184,.15) !important; color: #cbd5e1 !important; }

/* Avatar gradient default */
.avatar.brand-avatar { background: var(--brand-grad); color: white; }

/* Page title gradient bar */
.page-title-glow {
  position: relative;
  display: inline-block;
}
.page-title-glow::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 32px; height: 3px;
  background: var(--brand-grad);
  border-radius: 3px;
}

/* Chat bubbles */
.msg-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 8px;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
}
.msg-user {
  background: var(--brand-grad);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.msg-assistant {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.msg-meta {
  font-size: 11px;
  color: #6b7280;
  margin: 2px 8px 8px;
}

/* Command palette modal */
#cmdk-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  z-index: 9999; display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
#cmdk-modal.show { display: flex; }
#cmdk-box {
  width: min(560px, 90vw); background: #1a1c24; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
  overflow: hidden;
}
#cmdk-input {
  width: 100%; padding: 16px 20px; background: transparent; border: 0; outline: none;
  color: white; font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
#cmdk-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  padding: 10px 14px; border-radius: 8px; cursor: pointer; color: #e2e8f0;
  display: flex; align-items: center; gap: 12px;
}
.cmdk-item:hover, .cmdk-item.active { background: rgba(139,92,246,.15); }
.cmdk-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; padding: 8px 14px 4px; }

/* FAB quick add */
.fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-grad);
  color: white; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(139,92,246,.4);
  cursor: pointer; border: none; z-index: 100;
  transition: transform .15s ease;
}
.fab:hover { transform: scale(1.05) rotate(90deg); }

/* Loading shimmer */
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Empty state */
.empty-state { text-align: center; padding: 48px 16px; color: #6b7280; }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.4); }