@import '../../../../vendor/filament/filament/resources/css/theme.css';

/** These have been added via the filament v4 upgrade guide*/
@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

/** These have been added from the old tailwind.config.js file, from the content section*/
@source '../../../../resources/**/*.blade.php';
@source '../../../../resources/**/*.js';
@source '../../../../resources/**/*.vue';
@source '../../../../storage/framework/views/*.php';
@source '../../../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

/* @import 'button.css';
@import './table/search_button.css'; */


/* :root {
    --primary-50:   #ffffff;
    --primary-100:  #99FFF2;
    --primary-200:  #5CFFD6;
    --primary-300:  #32C0A9;
    --primary-400:  #1B887F;
    --primary-500:  #1B887F;
    --primary-600:  #14726A;
    --primary-700:  #0E5C55;
    --primary-800:  #094842;
    --primary-900:  #043633;
} */

/* :root {
  --primary-50:  rgba(255, 255, 255, 1);
  --primary-100: rgba(153, 255, 242, 1);
  --primary-200: rgba( 92, 255, 214, 1);
  --primary-300: rgba( 50, 192, 169, 1);
  --primary-400: rgba( 27, 136, 127, 1);
  --primary-500: rgba( 27, 136, 127, 1);
  --primary-600: rgba( 20, 114, 106, 1);
  --primary-700: rgba( 14,  92,  85, 1);
  --primary-800: rgba(  9,  72,  66, 1);
  --primary-900: rgba(  4,  54,  51, 1);
} */

.fi-sidebar-nav {
  @apply bg-white shadow-lg m-4 rounded-xl;
  /* note the [ ] around the hex code */
  @apply dark:bg-gray-900 dark:shadow-none;
}

/* Or, using the data attribute that Filament also sets: */
.filament-page-my-franchise-dashboard .fi-header-heading {
  @apply text-white;
}

.video-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.video-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  /* opaque on right, transparent on left */
  background: linear-gradient(to left,
    rgba(0,0,0,0.5) 30%,
    rgba(0,0,0,0) 80%
  );
  pointer-events: none;
  z-index: 2;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Ensures video is on top of the container's background but below content */
    object-fit: cover; /* Ensures the video covers the area without distortion */
    filter: opacity(20%);
}