/* Custom styles to match the design */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #f9fafb;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Style for the navigation links */
.sidebar-link {
    color: #4b5563; /* text-gray-600 */
}

.sidebar-link:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #111827; /* text-gray-900 */
}

.sidebar-link.active {
    background-color: #eef2ff; /* bg-indigo-50 */
    color: #4338ca; /* text-indigo-700 */
    font-weight: 600;
}

.sidebar-link.active svg {
    color: #4f46e5; /* text-indigo-600 */
}

/* =================================== */
/* NEW: Bottom Floating Navigation Bar */
/* =================================== */
.bottom-nav {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  display: flex;
  gap: 0.5rem; /* Space between buttons */
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem;
  border-radius: 9999px; /* Fully rounded */
  z-index: 1000;

  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.bottom-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;  /* 48px */
  height: 3rem; /* 48px */
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.bottom-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --- ICON FIX & STYLING --- */
/* This new rule directly targets the SVG icons to fix the color bug */
.bottom-nav-btn svg {
  color: #374151; /* text-gray-700 */
}
.dark .bottom-nav-btn svg {
  color: #d1d5db; /* text-gray-300 */
}
/* ------------------------- */


/* =================================== */
/* NEW: Dark Mode Theme */
/* =================================== */
.dark body {
  background-color: #111827; /* bg-gray-900 */
}

/* Update text colors for dark mode */
.dark .text-gray-800 { color: #f9fafb; } /* text-gray-50 */
.dark .text-gray-600 { color: #d1d5db; } /* text-gray-300 */
.dark .text-gray-500 { color: #9ca3af; } /* text-gray-400 */
.dark .text-gray-700 { color: #e5e7eb; } /* text-gray-200 */
.dark .text-gray-400 { color: #9ca3af; } /* text-gray-400 */

/* Update background colors for dark mode */
.dark .bg-white {
  background-color: #1f2937; /* bg-gray-800 */
  border: 1px solid #374151; /* border-gray-700 */
}
.dark .bg-slate-50 { background-color: #111827; }
.dark .bg-gray-50 { background-color: #374151; } /* For table header */

/* Update table borders */
.dark .border-b { border-color: #374151; }

/* Update sidebar link colors */
.dark .sidebar-link { color: #d1d5db; } /* text-gray-300 */
.dark .sidebar-link:hover { background-color: #374151; color: #ffffff; }
.dark .sidebar-link.active { background-color: #312e81; color: #e0e7ff; }
.dark .sidebar-link.active svg, .dark .sidebar-link:hover svg { color: #a5b4fc; }

/* Update floating nav for dark mode */
.dark .bottom-nav {
  background: rgba(29, 29, 31, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
.dark .bottom-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* =================================== */
/* SCROLL EFFECT: For Bottom Nav */
/* =================================== */

/* Add a smooth transition to the nav bar */
.bottom-nav {
  transition: background 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Style for when the user is scrolling (Light Mode) */
.bottom-nav.is-scrolling {
  background: rgba(255, 255, 255, 0.1); /* MORE transparent */
  backdrop-filter: blur(2px); /* Less blur for a clearer look */
  box-shadow: none; /* Hide shadow while moving */
}

/* Style for when the user is scrolling (Dark Mode) */
.dark .bottom-nav.is-scrolling {
  background: rgba(29, 29, 31, 0.1); /* MORE transparent */
  backdrop-filter: blur(2px); /* Less blur */
  box-shadow: none; /* Hide shadow while moving */
}

/* Shared standardization */
.app-shell-title {
  font-family: "Inter", "Nunito", sans-serif;
  letter-spacing: -0.01em;
}

.app-chip {
  border: 1px solid #d2d2d7;
  background: #f5f5f7;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #424245;
}

iframe {
  background: #fff;
}