@import "./base.css";
@import "./components.css";
@import "./utilities.css";
@import "./sidebar.css";
@import "./avatar.css";
@import "./flash.css";
@import "./pagination.css";
@import "./dropzone.css";
@import "./panels.css";
@import "./responsive-tables.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
.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;
}
@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-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;
  }

  /* 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%;
  }
}
/* Text rotation animation styles */
.fade-out {
  opacity: 0;
}

[data-text-rotation-target="text"] {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
} 
.fade-transition {
  transition: opacity 1.5s ease-in-out;
  opacity: 1;
}

.fade-out {
  opacity: 0;
} 

.dropzone {
  @apply rounded-md text-center border-2 border-dashed border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950;
}

/* File is dragged and hovering over drop area */
.dropzone.dz-drag-hover {
  @apply border-2 border-dashed border-primary-600 bg-primary-50 dark:bg-gray-900;
}

/* File details */
.dropzone .dz-details {
  @apply space-y-1;
}

.dropzone .dz-details .dz-size {
  @apply font-medium text-gray-400 text-sm;
}

.dropzone .dz-details .dz-size strong {
  @apply text-gray-500 dark:text-gray-300;
}

.dropzone .dz-details .dz-filename {
  @apply inline-block bg-gray-500 dark:bg-gray-900 text-white font-semibold py-1 px-3 text-sm rounded-full;
}

/* Uploading */
.dropzone .dz-preview {
  @apply w-3/4 mx-auto my-4 py-4 px-8 border border-gray-100 dark:border-gray-800 rounded-md bg-white dark:bg-gray-900 shadow space-y-2;
}

.dropzone .dz-preview .dz-progress {
  @apply border border-gray-400 rounded-full h-8;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  @apply block h-full rounded-full border-2 border-white bg-primary-600;
}

/* File upload has begun but not finished yet */
.dropzone.dz-started .dz-preview.dz-processing .dz-error-mark,
.dropzone.dz-started .dz-preview.dz-processing .dz-success-mark {
  @apply hidden;
}

/* File has been uploaded but not saved yet */
.dropzone.dz-started .dropzone-msg,
.dropzone .dz-preview.dz-processing.dz-success .dz-progress,
.dropzone .dz-preview.dz-processing.dz-success .dz-error-mark {
  @apply hidden;
}

.dropzone .dz-preview.dz-processing.dz-success .dz-success-mark,
.dropzone .dz-preview.dz-processing.dz-success .dz-error-mark {
  -webkit-animation: hidesvg 1s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  animation: hidesvg 1s forwards;
  animation-iteration-count: 1;
  animation-delay: 2s;
}

.dropzone .dz-preview.dz-processing.dz-success .dz-success-mark {
  @apply block absolute -top-4 -right-3;
}

.dropzone .dz-preview.dz-processing.dz-success .dz-success-mark svg {
  @apply mx-auto fill-white bg-emerald-400 w-6 h-6 rounded-full;
}

.dropzone .dz-preview .dz-image {
  @apply text-center;
}

.dropzone .dz-preview .dz-image img {
  @apply rounded mx-auto;
}

.dropzone .dz-preview a.dz-remove {
  @apply font-medium text-base;
}

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

@keyframes hidesvg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.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;
}
/* 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;
  }
}
@layer utilities {
  .nw {
    @apply whitespace-nowrap;
  }
}
/*
 * 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;
}