/* ============================================================
   APP THEME — Sky-Blue Creative theme
   Visual language: mesh-gradient background, glassmorphism
   cards with gradient borders, vibrant sky-blue palette.
   ============================================================ */

/* ── CSS Theme Variables ── */
:root {
  --th-a: #0284C7;
  --th-b: #38BDF8;
  --th-bg1: #e0f2fe;
  --th-bg2: #f0f9ff;
  --th-bg3: #f8fcff;
  --th-card: rgba(255,255,255,0.80);
  --th-card-border: rgba(2,132,199,0.18);
  --th-shadow: 0 8px 40px rgba(2,132,199,0.14);
  --th-shadow-card: 0 4px 28px rgba(2,132,199,0.10);
  --th-text: #0c2340;
  --th-muted: #4a7fa6;

  /* Gradient border token */
  --grad-border: linear-gradient(135deg, rgba(2,132,199,0.40), rgba(56,189,248,0.18), rgba(255,255,255,0.60));
}

/* ══════════════════════════════════════════
   BACKGROUND — Mesh gradient + dot grid
   ══════════════════════════════════════════ */
body {
  background:
    radial-gradient(ellipse 70% 55% at 8%  18%, rgba(2,132,199,0.22)  0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 92% 82%, rgba(56,189,248,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 78% 8%,  rgba(6,182,212,0.16)  0%, transparent 52%),
    radial-gradient(ellipse 65% 35% at 18% 92%, rgba(14,165,233,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 40% 55% at 55% 50%, rgba(2,132,199,0.06)  0%, transparent 65%),
    linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 40%, #f8fcff 70%, #dbeafe 100%) !important;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans', system-ui, sans-serif !important;
}

/* Dot-grid texture overlay — z-index: -1 so it stays behind all content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(2,132,199,0.09) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: -1;
}

/* Floating decorative blobs — behind everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle 320px at 92% 12%, rgba(56,189,248,0.18) 0%, transparent 70%),
    radial-gradient(circle 280px at 5%  88%, rgba(2,132,199,0.16)  0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: blobDrift 18s ease-in-out infinite alternate;
}

@keyframes blobDrift {
  0%   { opacity: 0.8; transform: scale(1)    translateY(0px); }
  100% { opacity: 1.0; transform: scale(1.06) translateY(-12px); }
}

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
#app-sidebar {
  background: linear-gradient(170deg,
    rgba(255,255,255,0.97) 0%,
    rgba(240,249,255,0.95) 100%) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-right: 1px solid rgba(2,132,199,0.14) !important;
  box-shadow: 4px 0 36px rgba(2,132,199,0.08), 1px 0 0 rgba(255,255,255,0.6) !important;
}

#app-sidebar .h-16.border-b {
  border-bottom-color: rgba(2,132,199,0.10) !important;
  background: linear-gradient(90deg, rgba(2,132,199,0.04), transparent) !important;
}

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
header {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(2,132,199,0.12) !important;
  box-shadow: 0 2px 20px rgba(2,132,199,0.08), 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* ══════════════════════════════════════════
   NAV ITEMS
   ══════════════════════════════════════════ */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: hsl(204 20% 42%);
  text-decoration: none !important;
  border-radius: 12px;
  margin: 2px 0;
  transition: all 0.20s ease;
  position: relative;
  min-height: 40px;
  line-height: 1;
}

.nav-item:hover {
  background: rgba(2,132,199,0.09);
  color: hsl(199 89% 30%);
  text-decoration: none !important;
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg,
    rgba(2,132,199,0.14) 0%,
    rgba(56,189,248,0.08) 100%);
  color: hsl(199 89% 30%);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(2,132,199,0.15), 0 2px 8px rgba(2,132,199,0.10);
}

/* Left-bar active indicator with glow */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: linear-gradient(to bottom, #0284C7, #38BDF8);
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 8px rgba(2,132,199,0.55);
}

.nav-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  opacity: 0.85;
}
.nav-item.active svg { opacity: 1; }

/* ══════════════════════════════════════════
   BADGE
   ══════════════════════════════════════════ */
.badge-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, #0284C7, #38BDF8);
  color: #fff;
  box-shadow: 0 2px 10px rgba(2,132,199,0.45);
  letter-spacing: 0;
}

/* ══════════════════════════════════════════
   CARDS — Glassmorphism with gradient border
   ══════════════════════════════════════════ */
.card-gold {
  position: relative;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.14),
    0 4px 28px rgba(2,132,199,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}

/* Subtle shimmer top edge */
.card-gold::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.55) 40%, rgba(2,132,199,0.30) 70%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}

.card-gold:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.20),
    0 12px 40px rgba(2,132,199,0.16),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* ── METRIC CARD ── */
.metric-card {
  position: relative;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.13),
    0 4px 28px rgba(2,132,199,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.50), transparent);
  pointer-events: none;
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.20),
    0 12px 40px rgba(2,132,199,0.16),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* ── bg-card Tailwind override ── */
.bg-card {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.bg-background { background: transparent !important; }

/* ── muted overrides ── */
.bg-muted     { background: rgba(224,242,254,0.60) !important; }
.bg-secondary { background: rgba(240,249,255,0.65) !important; }

/* ── text overrides ── */
.text-muted-foreground { color: hsl(204 15% 50%) !important; }
.text-foreground       { color: hsl(210 40% 10%) !important; }

/* ── border overrides ── */
.border-border, .border-sidebar-border {
  border-color: rgba(2,132,199,0.15) !important;
}

/* ── Border-radius ── */
.rounded-2xl, .rounded-xl { border-radius: 20px !important; }
.rounded-lg               { border-radius: 14px !important; }
.rounded-md               { border-radius: 10px !important; }

/* ── Generic page content cards ── */
[class*="bg-card"][class*="rounded"],
.border.rounded-xl,
.border.rounded-2xl {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(2,132,199,0.13) !important;
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.10),
    0 4px 28px rgba(2,132,199,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ══════════════════════════════════════════
   HEADER ICON BUTTONS
   ══════════════════════════════════════════ */
#sidebar-toggle-btn,
#header-notifications-bell {
  background: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(2,132,199,0.18) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(2,132,199,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.20s ease;
}
#sidebar-toggle-btn:hover,
#header-notifications-bell:hover {
  background: rgba(2,132,199,0.10) !important;
  border-color: rgba(2,132,199,0.35) !important;
  box-shadow: 0 4px 16px rgba(2,132,199,0.14), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transform: translateY(-1px);
}

/* ── Org switcher ── */
#org-switcher-btn {
  background: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(2,132,199,0.18) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  box-shadow: 0 2px 10px rgba(2,132,199,0.07) !important;
}
#org-switcher-btn:hover {
  background: rgba(2,132,199,0.09) !important;
}

/* ── Dropdowns ── */
#header-notifications-dropdown,
#org-dropdown {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(2,132,199,0.14) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(2,132,199,0.10),
    0 16px 48px rgba(2,132,199,0.18) !important;
}

/* ══════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════ */
#global-search-input {
  background: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(2,132,199,0.18) !important;
  border-radius: 12px !important;
  color: hsl(210 40% 10%) !important;
  box-shadow: inset 0 1px 4px rgba(2,132,199,0.06) !important;
}
#global-search-input::placeholder { color: hsl(204 15% 58%) !important; }
#global-search-input:focus {
  border-color: rgba(2,132,199,0.50) !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,0.12), inset 0 1px 4px rgba(2,132,199,0.06) !important;
  outline: none !important;
}

input:not([type=checkbox]):not([type=radio]):not(#global-search-input),
select,
textarea {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(2,132,199,0.20) !important;
  color: hsl(210 40% 10%) !important;
  box-shadow: inset 0 1px 3px rgba(2,132,199,0.05) !important;
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  border-color: rgba(2,132,199,0.48) !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,0.11), inset 0 1px 3px rgba(2,132,199,0.05) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
[class*="bg-primary"]:not(svg):not(circle):not(path) {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 60%, #38BDF8 100%) !important;
  box-shadow: 0 4px 18px rgba(2,132,199,0.40), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  border: none !important;
  transition: all 0.22s ease !important;
}
[class*="bg-primary"]:not(svg):not(circle):not(path):hover {
  box-shadow: 0 6px 28px rgba(2,132,199,0.55), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-1px);
}

/* Load Logs button override (inline style uses --gradient-gold) */
button[style*="gradient-gold"],
.btn-gold-glow {
  box-shadow: 0 4px 20px rgba(2,132,199,0.40) !important;
}

/* ── Notification bell badge ── */
#header-notifications-bell .absolute {
  background: linear-gradient(135deg, #0284C7, #38BDF8) !important;
  box-shadow: 0 2px 8px rgba(2,132,199,0.45) !important;
}

/* ══════════════════════════════════════════
   OVERLAYS
   ══════════════════════════════════════════ */
#mobile-sidebar-backdrop {
  background: rgba(12,35,64,0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.bg-black\/50 {
  background: rgba(12,35,64,0.42) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(2,132,199,0.03); }
::-webkit-scrollbar-thumb { background: rgba(2,132,199,0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(2,132,199,0.40); }

/* ══════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════ */
tbody tr:hover {
  background: rgba(2,132,199,0.04) !important;
}
thead th {
  background: rgba(2,132,199,0.04) !important;
  border-bottom-color: rgba(2,132,199,0.10) !important;
}

/* ══════════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════════ */
.bg-green-500\/10  { background: rgba(34,197,94,0.12)   !important; }
.bg-red-500\/20    { background: rgba(239,68,68,0.12)   !important; }
.bg-orange-500\/20 { background: rgba(249,115,22,0.12)  !important; }
.bg-gray-500\/20   { background: rgba(107,114,128,0.12) !important; }
.bg-blue-500\/10   { background: rgba(2,132,199,0.10)   !important; }
.bg-yellow-500\/20 { background: rgba(2,132,199,0.12)   !important; }
.text-yellow-500   { color: #0284C7 !important; }

/* ══════════════════════════════════════════
   STAT PILLS (Team Login Logs page)
   ══════════════════════════════════════════ */
#tl-stats .card-gold {
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(2,132,199,0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(2,132,199,0.09), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: transform 0.20s ease, box-shadow 0.20s ease;
}
#tl-stats .card-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2,132,199,0.16), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* ══════════════════════════════════════════
   LANDING PAGE — preserve its own theme
   ══════════════════════════════════════════ */
body:has(.lp-wrap) {
  background: #fff !important;
}
body:has(.lp-wrap)::before,
body:has(.lp-wrap)::after {
  display: none !important;
}