@layer base {
  body {
    @apply bg-white dark:bg-black;
  }

  /* every layout must have a .body-container which we use just like a body tag.
  /* We avoid putting classes on the body tag because Turbo's body refresh system can cause unpredictable results. */
  .body-container {
    @apply bg-white dark:bg-black text-base font-text text-gray-600 dark:text-gray-400
    xs:text-lg;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-display text-secondary-950 dark:text-secondary-50 font-semibold sm:leading-relaxed;
  }

  h1 {
    @apply text-2xl/tight tracking-tight
           md:text-3xl/tight;
  }

  h2 {
    @apply text-2xl/snug tracking-tight
            md:text-3xl/snug;
  }

  h3 {
    @apply font-medium text-lg/snug md:text-xl;
  }

  h4 {
    @apply text-lg font-semibold text-secondary-600 dark:text-secondary-400 md:text-xl;
  }

  h5 {
    @apply text-lg font-semibold text-secondary-950 dark:text-white font-clean md:text-xl;
  }

  /* Default link styles - only for content links */
  .link {
    @apply cursor-pointer text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-white underline;
  }
  
  /* Keep default link color for general links but no underline by default */
  a {
    @apply cursor-pointer text-primary-500 hover:text-secondary-800 dark:hover:text-white;
  }

  strong {
    @apply text-secondary-950 dark:text-white;
  }

  ul,
  ol {
    @apply list-outside ml-4;
  }

  ul {
    @apply list-disc;
  }

  ul ul,
  ol ol {
    @apply mt-1;
  }

  ol {
    @apply list-decimal;
  }

  li {
    @apply py-1;
  }

  code {
    @apply text-secondary-600 dark:text-secondary-400 inline-block px-1;
  }

  pre {
    @apply bg-secondary-100 bg-opacity-70 dark:bg-opacity-100 dark:bg-secondary-950 py-6 px-6 rounded-md;
  }

  /* For responsive tables, see responsive-tables.css and use responsive_tables_controller.js */
  table {
    @apply w-full text-left border-t border-secondary-200 dark:border-secondary-700;
  }

  table thead tr th,
  table tfoot tr td {
    @apply text-base font-clean font-semibold text-secondary-950 dark:text-white;
  }

  table td,
  table th {
    @apply font-clean px-4 py-3 border-b border-secondary-200 dark:border-secondary-700 text-base font-medium;
  }

  table tr td:first-child,
  table tr th:first-child {
    @apply pl-0;
  }

  table tr td:last-child,
  table tr th:last-child {
    @apply pr-6;
  }
}
@layer components {
  .btn {
    @apply px-4 py-2 font-clean rounded font-medium cursor-pointer text-base inline-flex items-center space-x-2;
  }

  .btn-primary {
    @apply bg-primary-500 text-white hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black;
  }

  .btn-secondary {
    @apply bg-secondary-300 text-secondary-600 hover:bg-secondary-700 hover:text-secondary-100 dark:hover:bg-secondary-500 dark:hover:text-secondary-50;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 hover:text-white border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-500 hover:text-white border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
  }

  .btn-neutral {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-800 border border-transparent focus:outline-none;
    @apply focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:hover:bg-gray-400 dark:hover:text-gray-100;
  }

  .btn-white {
    @apply bg-white text-black hover:bg-black hover:text-white dark:hover:bg-black dark:hover:text-white;
  }

  .btn-large {
    @apply text-xl py-4 px-6;
  }

  .btn-disabled {
    @apply opacity-50 cursor-default;
  }

  .btn-primary.btn-disabled {
    @apply hover:bg-primary-500 dark:hover:bg-primary-500 hover:text-white dark:hover:text-white;
  }

  .btn-secondary.btn-disabled {
    @apply hover:bg-secondary-300 dark:hover:bg-secondary-700 hover:text-secondary-600 dark:hover:text-secondary-300;
  }

  .btn-small {
    @apply text-base py-1 px-3;
  }

  .btn-smallest {
    @apply text-sm px-2 py-0.5;
  }

  /* Clickable card styling */
  .clickable-card {
    cursor: pointer !important;
  }

  label {
    @apply font-clean block font-semibold leading-6 text-secondary-600 dark:text-secondary-300 text-base mb-1.5;
  }

  label.label-wrapper {
    @apply flex mb-0 items-start;
  }

  label.label-wrapper input {
    @apply mt-1 mr-2;
  }

  .form-control {
    @apply font-clean block w-full px-4 py-3 rounded bg-white dark:bg-secondary-950 text-black dark:text-white font-medium border border-secondary-300 dark:border-secondary-700
    placeholder:text-secondary-400
    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent focus:bg-primary-50 dark:focus:bg-secondary-900
    xs:text-lg;
  }

  .filter-form label {
    @apply text-sm font-medium mb-0;
  }

  .filter-form .form-control {
    @apply px-2 py-1;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 p-0 rounded border-secondary-300 text-primary-600
    focus:ring-primary-600;
  }

  .input-file {
    height: auto;
    z-index: 2;
    cursor: pointer;
    @apply opacity-0 inline-block pl-0 pr-0 py-3 px-3 overflow-hidden absolute border-none;
  }

  .input-file + label {
    @apply px-4 py-2 mb-0 rounded font-medium cursor-pointer text-base bg-secondary-300 dark:bg-secondary-700 text-secondary-600 dark:text-secondary-300 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black;
  }

  /* Wrap embedded youtube videos in .embed-wrapper to make them responsive */
  .embed-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@layer utilities {
  .nw {
    @apply whitespace-nowrap;
  }
}
/* Sidebar Open State */

.sidebar-open .sidebar {
  @apply block lg:block;
}

.sidebar-open .sidebar .logo-container {
  @apply py-6 px-6
  lg:py-4 lg:px-4;
}

.sidebar-open .sidebar .logo-container .logo-icon {
  @apply hidden !important;
}

/* Ensure only one logo variant is visible at a time */
/* Default state - show full logos in open sidebar */
.sidebar-open .sidebar .logo-container .logo {
  display: none;
}

.sidebar-open .sidebar .logo-container .logo-dark {
  display: block !important;
}

.sidebar-open .sidebar .logo-container .logo-light {
  display: none !important;
}

/* Dark mode - show light logo */
html.dark .sidebar-open .sidebar .logo-container .logo-dark {
  display: none !important;
}

html.dark .sidebar-open .sidebar .logo-container .logo-light {
  display: block !important;
}

/* Hide all icons when sidebar is open */
.sidebar-open .sidebar .logo-container .logo-icon {
  display: none !important;
}

.sidebar-open .sidebar .logo-container .logo-icon-dark,
.sidebar-open .sidebar .logo-container .logo-icon-light {
  display: none !important;
}

.sidebar-open .sidebar .sidebar-toggler {
  @apply block;
}

.sidebar-open .sidebar .sidebar-toggler .toggle-open-icon {
  @apply hidden;
}

.sidebar-open .sidebar .sidebar-toggler .toggle-closed-icon {
  @apply block;
}

.sidebar-open .page-content-container {
  @apply lg:ml-auto lg:w-3/4 xl:w-4/5 2xl:w-5/6;
}

.sidebar-open .page-content-container .top-bar .top-bar-content {
  @apply lg:pr-4 lg:w-3/4 xl:w-4/5 2xl:w-5/6;
}

.sidebar-open .page-content-container .top-bar .top-bar-content .sidebar-toggler {
  @apply hidden;
}

.sidebar-open .nav-link {
  @apply pl-2;
}


/* Sidebar Closed State */

.sidebar-closed .sidebar {
  @apply lg:w-16;
}

.sidebar-closed .sidebar .logo-container {
  @apply py-3 px-3
  lg:py-3 lg:px-3;
}

.sidebar-closed .sidebar .logo-container .logo {
  @apply hidden;
}

/* Ensure proper logo display in closed sidebar state */
.sidebar-closed .sidebar .logo-container .logo,
.sidebar-closed .sidebar .logo-container .logo-dark,
.sidebar-closed .sidebar .logo-container .logo-light {
  display: none !important;
}

/* Show appropriate icon in closed state */
.sidebar-closed .sidebar .logo-container .logo-icon-dark {
  display: block !important;
}

.sidebar-closed .sidebar .logo-container .logo-icon-light {
  display: none !important;
}

html.dark .sidebar-closed .sidebar .logo-container .logo-icon-dark {
  display: none !important;
}

html.dark .sidebar-closed .sidebar .logo-container .logo-icon-light {
  display: block !important;
}

.sidebar-closed .sidebar .sidebar-toggler {
  @apply hidden;
}

.sidebar-closed .page-content-container {
  @apply lg:w-full lg:pl-16
  xl:w-full
  2xl:w-full;
}

.sidebar-closed .page-content-container .top-bar .top-bar-content {
  @apply lg:w-[94%];
}

.sidebar-closed .page-content-container .top-bar .sidebar-toggler {
  @apply hidden lg:block;
}

.sidebar-closed .page-content-container .top-bar .sidebar-toggler .toggle-open-icon {
  @apply block;
}

.sidebar-closed .page-content-container .top-bar .sidebar-toggler .toggle-closed-icon {
  @apply hidden;
}

.sidebar-closed .nav-link {
  @apply justify-center relative;
}

.sidebar-closed .nav-link .nav-link-label {
  @apply hidden;
}

@media only screen and (min-width: 1024px) {
  .sidebar-closed .nav-link:hover .nav-link-label {
    @apply block absolute left-12 top-0 z-50 whitespace-nowrap bg-white dark:bg-black dark:text-white py-2 px-3 rounded;
  }
}


/* Mobile Nav Open State */
.mobile-nav-open .sidebar {
  @apply block;
}

.mobile-nav-open .sidebar .sidebar-toggler {
  @apply hidden;
}

.mobile-nav-open .sidebar .nav-link {
  @apply pl-2;
}

.mobile-nav-open.sidebar-closed .sidebar .logo-container {
  @apply py-6 px-6;
}

.mobile-nav-open.sidebar-closed .sidebar .logo-container .logo {
  @apply block;
}

.mobile-nav-open.sidebar-closed .sidebar .logo-container .logo-icon {
  @apply hidden;
}

/* Ensure proper display in mobile nav open state */
.mobile-nav-open .sidebar .logo-container .logo-icon-dark,
.mobile-nav-open .sidebar .logo-container .logo-icon-light {
  display: none !important;
}

.mobile-nav-open .sidebar .logo-container .logo-dark {
  display: block !important;
}

.mobile-nav-open .sidebar .logo-container .logo-light {
  display: none !important;
}

html.dark .mobile-nav-open .sidebar .logo-container .logo-dark {
  display: none !important;
}

html.dark .mobile-nav-open .sidebar .logo-container .logo-light {
  display: block !important;
}

.mobile-nav-open.sidebar-closed .sidebar .nav-link {
  @apply justify-start;
}

.mobile-nav-open.sidebar-closed .sidebar .nav-link .nav-link-label {
  @apply block;
}

/* Mobile Nav Closed State */

/* Only hide sidebar on actual mobile devices, not zoomed desktop */
@media only screen and (max-width: 767px) {
  .mobile-nav-closed .sidebar {
    @apply hidden;
  }
}

/* For tablets and zoomed desktop (768px - 1023px), keep sidebar visible but adjust layout */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .sidebar-open .sidebar {
    @apply block w-1/4;
  }
  
  .sidebar-closed .sidebar {
    @apply block w-16;
  }
}
.avatar {
  @apply relative inline-flex w-10 h-10 justify-center items-center rounded-full bg-gray-100 dark:bg-gray-900;
}

.avatar img {
  @apply absolute rounded-full top-0 left-0;
}

.avatar .initials {
  @apply uppercase text-gray-400 w-full h-full flex justify-center items-center font-semibold tracking-wide leading-none;
}
.hide-after-delay {
  -webkit-animation: hide_after_delay 1s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 3s;
  animation: hide_after_delay 1s forwards;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@-webkit-keyframes hide_after_delay {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hide_after_delay {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pagy-container .pagy {
  @apply mt-12 flex w-full justify-center items-center space-x-2;
}

.pagy-container .pagy a {
  @apply cursor-pointer inline-flex justify-center items-center w-8 h-8 rounded text-sm font-semibold leading-6 text-primary-600
  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
  hover:bg-gray-50 hover:text-black dark:hover:bg-gray-900 dark:hover:text-white;
}

.pagy-container .pagy a.current {
  @apply cursor-default bg-gray-100 dark:bg-gray-900 text-black dark:text-white;
}
/* Panel Closed */

.panels .panel.panel-closed .panel-content {
  @apply hidden;
}

.panels .panel.panel-closed .panel-chevron .chevron-up {
  @apply hidden;
}

.panels .panel.panel-closed .panel-chevron .chevron-down {
  @apply block;
}

/* Panel Open */

.panels .panel.panel-open .panel-content {
  @apply block;
}

.panels .panel.panel-open .panel-chevron .chevron-up {
  @apply block;
}

.panels .panel.panel-open .panel-chevron .chevron-down {
  @apply hidden;
}
table.responsive-table {
}

table.responsive-table thead tr {
  @apply hidden
         md:table-row;
}

table.responsive-table tr {
  @apply flex flex-col space-y-4
         md:table-row md:space-y-0;
}

table.responsive-table tr td,
table.responsive-table tr th {
  @apply space-y-1 border-b-0 px-0 py-0
         md:border-b md:border-b-gray-200 dark:md:border-b-gray-700 md:px-2 md:py-2;
}

table.responsive-table tr td:first-child {
  @apply pt-4
        md:pt-2;
}

table.responsive-table tr td:last-child {
  @apply border-b pb-4
         md:pb-2;
}
/*
 * 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.
 *










 */

 .blurred-text {
  color: transparent;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
}

.blurred-text::selection {
  background-color: transparent;
  color: transparent;
}

.blurred-container {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.yes-dark {
  background-color: #679267;
}