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

@layer base {
  /* Define CSS variables for colors within theme classes */
  /* Use :root for default/fallback if needed, or make one theme the default */

  /* Theme 1: Professional Blue & Dependable Green */
  .theme-blue {
    --color-primary: 37 99 235; /* blue-600 */
    --color-primary-hover: 29 78 216; /* blue-700 */
    --color-secondary: 241 245 249; /* slate-100 */
    --color-background-main: 248 250 252; /* slate-50 */ /* Or use secondary */
    --color-card-background: 255 255 255; /* white */
    --color-accent: 16 185 129; /* emerald-500 */
    --color-accent-hover: 5 150 105; /* emerald-600 */
    --color-text-base: 15 23 42; /* slate-900 */
    --color-text-muted: 100 116 139; /* slate-500 */
    --color-text-on-primary: 255 255 255; /* white */
    --color-text-on-accent: 255 255 255; /* white */
    --color-border: 226 232 240; /* slate-200 */
    --color-success: 34 197 94; /* green-500 */
    --color-error: 239 68 68; /* red-500 */
    --color-warning: 245 158 11; /* amber-500 */
    --color-text-success: 21 128 61; /* green-700 */
    --color-text-error: 185 28 28; /* red-700 */
    --color-text-warning: 180 83 9; /* amber-700 */
  }

  /* Theme 2: Modern Teal & Warm Action */
  .theme-teal {
    --color-primary: 13 148 136; /* teal-600 */
    --color-primary-hover: 15 118 110; /* teal-700 */
    --color-secondary: 249 250 251; /* gray-50 */
    --color-background-main: 249 250 251; /* gray-50 */
    --color-card-background: 255 255 255; /* white */
    --color-accent: 249 115 22; /* orange-500 */
    --color-accent-hover: 234 88 12; /* orange-600 */
    --color-text-base: 31 41 55; /* gray-800 */
    --color-text-muted: 107 114 128; /* gray-500 */
    --color-text-on-primary: 255 255 255; /* white */
    --color-text-on-accent: 255 255 255; /* white */
    --color-border: 229 231 235; /* gray-200 */
    --color-success: 34 197 94; /* green-500 */
    --color-error: 239 68 68; /* red-500 */
    --color-warning: 234 179 8; /* yellow-500 */
    --color-text-success: 21 128 61; /* green-700 */
    --color-text-error: 185 28 28; /* red-700 */
    --color-text-warning: 161 98 7; /* yellow-700 */
  }

  /* Theme 3: Calm Slate & Focused Violet */
  .theme-slate {
    --color-primary: 51 65 85; /* slate-700 */
    --color-primary-hover: 30 41 59; /* slate-800 */
    --color-secondary: 248 250 252; /* slate-50 */
    --color-background-main: 248 250 252; /* slate-50 */
    --color-card-background: 255 255 255; /* white */
    --color-accent: 124 58 237; /* violet-600 */
    --color-accent-hover: 109 40 217; /* violet-700 */
    --color-text-base: 30 41 59; /* slate-800 */
    --color-text-muted: 100 116 139; /* slate-500 */
    --color-text-on-primary: 255 255 255; /* white */
    --color-text-on-accent: 255 255 255; /* white */
    --color-border: 226 232 240; /* slate-200 */
    --color-success: 20 184 166; /* teal-500 */
    --color-error: 244 63 94; /* rose-500 */
    --color-warning: 245 158 11; /* amber-500 */
    --color-text-success: 15 118 110; /* teal-700 */
    --color-text-error: 190 18 60; /* rose-700 */
    --color-text-warning: 180 83 9; /* amber-700 */
  }

  /* Set a default theme on the root element if no theme class is present */
  :root {
    @apply theme-blue; /* Or theme-teal, theme-slate */
  }
}

@layer components {
  /* .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  } */

  .menu-option {
    @apply text-gray-400 hover:text-white hover:bg-gray-800 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold;
  }
  
  .current-menu-option{
    @apply bg-gray-800 text-white;
  }
  .flash {
    @apply z-50 transform ease-out duration-300 transition translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2 ;
  }

  .flash-show {
    @apply translate-y-0 opacity-100 sm:translate-x-0;
  }

  .flash-remove {
    @apply transition ease-in opacity-0 duration-100;
  }
  #notifications{
    @apply z-10;
  }
  
  .sticky_col_header {  
    @apply sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-4 text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell;  
  }
  .row_cell_striped{
    @apply text-center whitespace-nowrap border-b border-gray-200 py-3 pl-1 text-sm text-gray-500 max-w-xs 
  }
  .bold_text_row{
    @apply font-medium text-gray-900;
  }
  .pagy_link{
    @apply inline-flex items-center border-t-2 border-transparent pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700
  }
  .pagy_link_focus{
    @apply inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600
  }
  .button{
    @apply mt-4 flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
  }
  .button:disabled{
    @apply bg-gray-100 text-gray-900 text-opacity-60
  }
  .button_cancel{
    @apply mt-4 flex w-full justify-center rounded-md bg-indigo-50 px-3 py-1.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100
  }
  .button_cancel:disabled{
    @apply bg-gray-100 text-gray-900 text-opacity-60
  }
  .button_delete{
    @apply px-2 text-sm font-medium text-indigo-600 hover:text-indigo-500 border-l border-gray-400
  }
  .button_destroy{
    @apply mt-4 flex w-full justify-center rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600
  }
  .button_destroy:disabled{
    @apply bg-gray-100 text-gray-900 text-opacity-60
  }
  .button-group {
    @apply inline-flex divide-x divide-white rounded-md;
  }
  .button-group-item {
    @apply inline-flex items-center bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  .button-group-active {
    @apply divide-indigo-700;
  }
  .button-group-item-secondary {
    @apply inline-flex items-center bg-white text-gray-900 px-3 py-2 text-sm font-semibold border border-indigo-600 focus:outline-none focus:ring-0 focus:ring-offset-0;
    
    &:disabled {
      @apply bg-gray-100 text-gray-500 cursor-not-allowed border border-gray-100 hover:bg-gray-100 border-r-white;
    }
    &:hover {
      @apply bg-gray-50;
    }
  }
  .button-group-item:disabled {
    @apply bg-gray-100 text-gray-500 cursor-not-allowed hover:bg-gray-100;
  }
  
  .input{
    @apply block w-full text-sm rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6
  }
  .input:disabled{
    @apply cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200 sm:text-sm sm:leading-6
  }
  .input_label{
    @apply block font-medium leading-6 text-gray-900
  }
  .input_span{
    @apply text-xs leading-6 text-gray-300
  }
  .ul_options {
    @apply absolute z-30 mt-1 max-h-80 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-sm
  }
  .li_option{
    @apply relative cursor-default select-none py-2 pl-7 pr-2 text-gray-900 hover:bg-indigo-600 hover:text-white
  }
  .checkbox{
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600
  }
  .checkbox:disabled{
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 text-opacity-60
  }
  .link{
    @apply text-indigo-500 hover:text-gray-500
  }
  .subtitle{
    @apply text-xl font-semibold leading-7 text-gray-900
  }
  .navbar_to_subtitle{
    @apply relative flex justify-between items-center
  }
  .cfdi_row{
    @apply even:bg-gray-50
  }
  .tab_option{
    @apply whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700
  }
  .tab_option_current{
    @apply border-indigo-500 text-indigo-600
  }
  .row_preview_general{
    @apply h-[9.3px] max-w-[264px] overflow-hidden whitespace-nowrap p-0
  }
  .progress_bar {
    @apply w-full h-full bg-indigo-500 origin-left;
    animation: progress_bar 1s infinite linear;
  }
  .badge{
    @apply relative inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 cursor-pointer;
  }
  .badge:hover .tooltip{
    @apply visible;
  }
  .tooltip{
    @apply invisible absolute pb-3 px-2 z-30 bg-black/80 text-white text-xs rounded whitespace-pre-line text-left w-max max-w-[220px] items-center;
  }
  .tooltip_left{
    @apply left-full ml-2 top-0;
  }
  .tooltip_top_right{
    @apply bottom-full mb-2 right-0;
  }
  .tooltip_top_left{
    @apply bottom-full mb-2 left-0;
  }
  .tooltip_left::after {
    @apply content-[''] absolute right-full top-2 border-4 border-transparent border-r-black/80;
  }
  .tooltip_top_right::after {
    @apply content-[''] absolute top-full right-2 border-4 border-transparent border-t-black/80;
  }
  .tooltip_top_left::after {
    @apply content-[''] absolute top-full left-2 border-4 border-transparent border-t-black/80;
  }
  .badge_remove{
    @apply inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10;
  }

  .active_dashboard_bar{
    @apply bg-primary/20;
  }
}

@keyframes progress_bar {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
/*
 * 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.
 *


 */
.flatpickr-calendar.inline {
  box-shadow: none;
  font-size: 0.9rem;
}
.flatpickr-calendar {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 0px !important;
}
.flatpickr-days .dayContainer {
  width: 50% !important; 
  min-width: 50% !important;
  max-width: 50% !important;
  height: 50% !important;
}
.flatpickr-days {
  width: 100% !important;
}
.flatpickr-day { 
  font-size: .9rem; 
  line-height: 30px !important;
  height: 30px !important;
  width: 35px !important;
} 
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.startRange:hover{
  background: rgb(79 70 229) !important;
  border-color: rgb(79 70 229) !important;
  box-shadow: none !important;
}