@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind typography;

/* Global Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgb(243 244 246); /* gray-100 */
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: rgb(156 163 175); /* gray-400 */
  background: var(--color-gray-400);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(107 114 128); /* gray-500 */
  background: var(--color-gray-500);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(156 163 175) rgb(243 244 246);
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: rgb(55 65 81); /* gray-700 */
    background: var(--color-gray-700);
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(107 114 128); /* gray-500 */
    background: var(--color-gray-500);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(156 163 175); /* gray-400 */
    background: var(--color-gray-400);
  }

  * {
    scrollbar-color: rgb(107 114 128) rgb(55 65 81);
  }
}

#main-content {
  scrollbar-gutter: stable;
}

@layer components {
  .flash-message {
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }

  .flash-message.show {
    transform: translateY(0);
    opacity: 1;
  }

  .sidebar-link {
    @apply relative flex items-center py-2 pl-3 pr-2 text-sm text-gray-900 rounded-r-lg
           -ml-[3px] transition-all duration-200 ease-in-out
           dark:text-gray-200;
  }

  .sidebar-link:hover:not(.is-active) {
    @apply bg-gradient-to-r from-gray-100 to-transparent dark:from-gray-700/50 dark:to-transparent focus:outline-none;
  }

  .sidebar-link.is-loading-hover {
    @apply bg-gradient-to-r from-gray-100 to-transparent dark:from-gray-700/50 dark:to-transparent focus:outline-none;
  }

  .sidebar-link:hover svg {
    @apply text-gray-900 dark:text-white;
  }

  .sidebar-link.is-active {
    @apply bg-gradient-to-r from-primary-100 to-transparent dark:from-primary-900/40 dark:to-transparent
           text-primary-700 dark:text-primary-300;
    box-shadow: inset 3px 0 0 0 theme('colors.primary.500');
  }

  :is(.dark) .sidebar-link.is-active {
    box-shadow: inset 3px 0 0 0 theme('colors.primary.400');
  }

  .sidebar-link.is-active svg {
    @apply text-primary-700 dark:text-primary-300;
  }

  .sidebar-link.destructive:hover {
    @apply text-red-600 dark:text-red-400;
  }

  .sidebar-link.destructive:hover svg {
    @apply text-red-600 dark:text-red-400;
  }

  .sidebar-link.nested {
    @apply ml-[29px] pl-3;
  }

  .bait-row-loading-overlay {
    @apply fixed bg-gray-900/50 dark:bg-gray-900/80 
           items-center justify-center z-[20];
    pointer-events: none;
  }

  .bait-row-loading-overlay.hidden {
    display: none !important;
  }

  .bait-row-loading-overlay .bait-row-spinner {
    @apply z-[20];
    pointer-events: none;
  }

  .animate-border-flash {
    animation: border-flash 1s ease-in-out infinite;
  }

  .animate-bg-flash {
    animation: bg-flash 1s ease-in-out infinite;
  }

  .modal-loading-overlay {
    @apply absolute inset-0 bg-white/50 dark:bg-gray-800/50 
           flex items-center justify-center z-50;
  }

  .modal-loading-overlay.hidden {
    display: none !important;
  }

  [data-sidebar-target="loadingOverlay"] {
    transition: opacity 0.3s ease-in-out;
  }

  [data-sidebar-target="loadingOverlay"].hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Initial loading state styles */
  [data-dashboard-loading-target="initialLoadingOverlay"] {
    @apply fixed inset-0 z-[9999] bg-gray-900 dark:bg-gray-900
           flex items-center justify-center;
    display: flex !important;
    opacity: 1;
    transition: opacity 0.3s ease-out;
  }

  /* When JavaScript loads and adds 'hidden', override the default visibility */
  [data-dashboard-loading-target="initialLoadingOverlay"].hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Custom modal backdrop styling */
  .modal-backdrop {
    @apply fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80;
  }

  /* Add this to your existing loading overlay styles */
  [data-dashboard-loading-target="initialLoadingOverlay"].error-state {
    @apply bg-red-900/90 dark:bg-red-900/90;
  }

  [data-dashboard-loading-target="initialLoadingOverlay"].error-state svg {
    @apply text-red-200 fill-red-600 dark:text-red-800;
  }

  /* Responsive table cells */
  .table-cell-mobile-friendly {
    @apply hidden md:table-cell;
  }

  /* Optional underline effect on hover — disabled for now as the gradient
     already provides sufficient hover feedback. Uncomment to re-enable.
  .sidebar-link::before {
    content: '';
    @apply absolute left-0 bottom-0 w-full h-0.5 bg-primary-500 transform scale-x-0
           transition-transform origin-left;
  }
  .sidebar-link:hover::before {
    @apply scale-x-100;
  }
  */
}

@keyframes border-flash {
  0%, 49% {
    border-color: rgb(239 68 68); /* red-500 */
  }
  50%, 100% {
    border-color: rgb(254 202 202); /* red-200 */
  }
}

@keyframes bg-flash {
  0%, 49% {
    background-color: rgb(239 68 68); /* red-500 */
  }
  50%, 100% {
    background-color: rgb(254 202 202); /* red-200 */
  }
}

/* Logo SVG path loading animation */
@keyframes logo-path-strobe {
  0% {
    fill: rgba(255, 255, 255, 1); /* Full white */
  }
  50% {
    fill: rgba(59, 130, 246, 1); /* primary-500 */
  }
  100% {
    fill: rgba(255, 255, 255, 1); /* Full white */
  }
}

/* Container gets a slight transition for smoother state changes */
.navbar-logo {
  position: relative;
  transition: opacity 0.3s ease-out;
}

/* Make the animation faster and more frequent */
html[aria-busy="true"] .navbar-logo svg path {
  animation: logo-path-strobe 0.5s ease-in-out infinite;
  animation-delay: calc((1 - var(--path-index)) * 0.05s);
}

/* When aria-busy becomes false, paths gracefully finish their animation */
html:not([aria-busy="true"]) .navbar-logo svg path {
  animation: none;
  transition: fill 0.3s ease-out;
  fill: white; /* Return to original color */
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}
/* Inter Variable Font — self-hosted via @fontsource-variable/inter */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-631e5ed751a6ddb2649e1c04715fcb2f01d5f5933bc4a9856d03a509e50f9ff8.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-italic-5e1c7a606a8f47ec94aa6044a6537a0127921ff9831444bf00c730bce4eccdc7.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-7fd81485d7a8e2c6c3e23c626fd5ffde5e426df2d7f4925fb151c9410f5eb961.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-italic-f8176b49c362f508e06ffd2030322db70f067c1c8d88c8d2d932d18bc3ab9afb.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-c5057ad38d6ca49339459991dd89bcbe8179b88d28b508c139743516128c947e.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-italic-5324251b904d40c5d51f255a2ff7964c7c3bb3d26ff8c7af500e64edc7120886.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-867fd6df69418a75fd6b96f1d2fc54ec480648195f8dffcb2b9f54f681bd204d.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-italic-e82d723a27ae91984f33937f79e227227f84dd66b5c97af0c40386bf0150bdf0.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-741c3739d7f1849a9e2d4adf559706ab1453ee0a79051239d4ee778f33290e75.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-italic-480605e4126e74665a9d50fe6ee89b08b4bef68246f4255babea0264da753dcb.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-a07c2ff83e7b39233d9c6dfcb53f4c00fa70302ea78482ef66aabca009df9f46.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-italic-f5f3e3b8db3fe1f3a4b5ec02328797f563141e88ace5cc91eb4e20ea163b89a3.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-007fce1bff9f7f37469fe61eff9ef62c033af63fccb0e65a2e94f4e0c14d9d6d.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-italic-ba810cae5c279abdccccaef2804b33880f310a8437a42af6d5167254b2f71a6c.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */