@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); /* soft blue glow */
  border-color: #93c5fd;
}

/* ========================================
   SIDEBAR ACTIVE STATE (GCP-Style)
   ======================================== */

.nav-item {
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #334155; /* slate-700 */
}

.nav-item:hover {
  background-color: #f1f5f9; /* slate-100 */
}

/* Active state */
.nav-item.active {
  background-color: #e8f0fe;   /* GCP light blue */
  color: #1a73e8;              /* GCP blue */
  font-weight: 500;
}

.nav-item.active:hover {
  background-color: #d2e3fc;   /* slightly stronger light blue */
}

/* ========================================
   SIDEBAR FOCUS OVERRIDE
   ======================================== */

nav .nav-item:focus {
  box-shadow: none;
  outline: none;
  border-color: transparent;
}

/* Legacy Code */
/* Navigation Styles
.nav-item {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.nav-item:hover {
  background-color: #f1f5f9;
  transform: translateX(2px) to eliminate bouncing animation
}

.nav-item.active {
  background-color: #2563eb;
  color: white;
}

.nav-item.active:hover {
  background-color: #1d4ed8;
  transform: translateX(0px) to eliminate bouncing animation
}
*/

/* Status Indicators */
.status-indicator {
  position: relative;
}

.status-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

.status-green::before {
  background-color: rgba(34, 197, 94, 0.3);
}

.status-orange::before {
  background-color: rgba(251, 146, 60, 0.3);
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Upgrade Badge */
.upgrade-badge {
  background: linear-gradient(45deg, #f59e0b, #d97706);
  animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Pro Feature Styling */
.pro-feature {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px dashed #cbd5e1;
}

/* Sidebar Full Height Fix */
#sidebar-container nav {
  height: 100%;
  min-height: 100%;
}

/* Organization Header */
#orgSelect {
  min-width: 160px;
}

#currentDomainDisplay {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .organization-info {
    display: none;
  }
}

/* Loading Effects */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Supabase style shimmer bar */
.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Console-style button for infra tools --- */
.btn-console {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;            /* Tailwind: text-sm */
  border: 1px solid #cbd5e1;      /* Tailwind: border-slate-300 */
  color: #334155;                 /* Tailwind: text-slate-700 */
  background-color: #ffffff;      /* Tailwind: bg-white */
  padding: 0.5rem 1rem;           /* Tailwind: px-4 py-2 */
  border-radius: 0.375rem;        /* Tailwind: rounded-md */
  transition: background-color 0.2s ease;
}

.btn-console:hover {
  background-color: #f8fafc;      /* Tailwind: hover:bg-slate-50 */
}

.scrollbar-thin::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.5);
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}