/* static/css/main.css */

/* Add any global custom styles here that are not covered by Tailwind CSS. */

body {
    /* Example: Define a default font if not handled elsewhere or by Tailwind base styles */
    /* font-family: 'Poppins', sans-serif; */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* You might add custom component styles here if they are complex
   and you don't want to overuse Tailwind utility classes in HTML. */

/* Custom Scrollbar Styling */
/* For Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;  /* Width of the vertical scrollbar */
    height: 12px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light mode track color */
    border-radius: 10px;
}

html.dark ::-webkit-scrollbar-track {
    background: #2d3748; /* Dark mode track color (e.g., gray-800) */
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* Light mode thumb color (e.g., gray-400) */
    border-radius: 10px;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #4a5568; /* Dark mode thumb color (e.g., gray-600) */
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* Light mode thumb hover color (e.g., gray-500) */
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #718096; /* Dark mode thumb hover color (e.g., gray-500 for dark) */
}

/* For Firefox */
/* Note: Firefox scrollbar styling is less customizable */
/* You can set 'auto' or 'thin' for width, and then colors. */
html {
    scrollbar-width: auto; /* or 'thin' */
    scrollbar-color: #c1c1c1 #f1f1f1; /* thumb color track color - Light mode */
}

html.dark {
    /* For Firefox, ensure the html.dark selector has high enough specificity if needed, */
    /* or that these properties are not overridden by a more general html rule for scrollbar-color. */
    scrollbar-color: #4a5568 #2d3748; /* thumb color track color - Dark mode */
}

/* Theme Toggle Switch from owner_admin_users.html */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  /* margin-right: 1.5rem; /* Potentially adjust or make configurable if needed */
}

.theme-switch {
  display: inline-block;
  height: 28px; /* Or h-7 in Tailwind */
  position: relative;
  width: 54px; /* Or w-14 in Tailwind */
  margin: 0 0.5rem; /* mx-2 in Tailwind */
}

.theme-switch input {
  display: none;
}

.slider {
  background: linear-gradient(to right, #f97316, #f59e0b); /* orange-500 to amber-500 */
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border-radius: 34px; /* rounded-full */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.slider:before {
  background-color: #fff; /* bg-white */
  bottom: 4px;
  content: "";
  height: 20px; /* h-5 */
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 20px; /* w-5 */
  border-radius: 50%; /* rounded-full */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked + .slider {
  background: linear-gradient(to right, #3b82f6, #1d4ed8); /* blue-500 to blue-700 */
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.theme-icon {
  font-size: 1.25rem; /* text-xl */
  color: #6b7280; /* text-gray-500 */
  transition: color 0.3s ease;
}

.dark .theme-icon.moon {
  color: #bfdbfe; /* text-blue-200 */
}

.theme-icon.sun {
  color: #f59e0b; /* text-amber-500 */
}

.dark .theme-icon.sun {
  color: #6b7280; /* text-gray-500 */
}

/* Dark mode specific styles for the slider (from owner_admin_users.html) */
.dark .slider:before {
  background-color: #f3f4f6; /* bg-gray-100 for the thumb in dark mode */
}