/* static/css/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('modern-scrollbar.css');


:root {
  --brand-primary: #FFC107;
  --brand-primary-hover: #FFB300;
  --brand-primary-light: #FFF59D;
  --brand-btn-primary: #FF9800;
  
  --text-gray: #727272;
  --text-2-gray: #7C7C7C;
  --border-gray: #E4E4E4;
  --border-2-gray: #E7EAE9;
  --border-3-gray:  #DFDFDF;
  --border-4-gray: #E8E8E8;
  --color-black: #333333;
  --surface-dark: #2D2A26;
  --surface-dark-light: #4c4a46;
  --surface-dark-white: #D9D9D9;
  --text-muted: #6B7280;
  --background-light: #F5F5F5;
  --background-gray: #F9F9F9; 
  --background-gray-light: #FCFCFC;
}

@layer components {
  /* Button Components */
  .btn-brand-primary {
    @apply font-medium py-3 px-6 rounded-lg transition-colors duration-200;
    background-color: var(--brand-primary);
    color: white;
  }
  
  .btn-brand-primary:hover {
    background-color: var(--brand-primary-hover);
  }
  
  .btn-secondary {
    @apply font-medium py-3 px-6 rounded-lg border border-gray-300 transition-colors duration-200;
    background-color: white;
    color: var(--surface-dark);
  }
  
  .btn-secondary:hover {
    background-color: var(--background-light);
  }
  
  /* Color Utilities */
  .text-brand-primary {
    color: var(--brand-primary);
  }
  
  .text-brand-primary-hover {
    color: var(--brand-primary-hover);
  }

  .text-2-gray{
    color: var(--text-2-gray)
  }
  
  .text-surface-dark {
    color: var(--surface-dark);
  }
  
  .text-muted {
    color: var(--text-muted);
  }

  .text-surface-dark-white{
    color: var(--surface-dark-white);
  }
  
  /* Background Utilities */
  .bg-brand-primary {
    background-color: var(--brand-primary);
  }

  .bg-brand-btn-primary{
    background-color: var(--brand-btn-primary);
  }

  .bg-background-gray{
    background-color: var(--background-gray);
  }
  
  .bg-gray-light{
    background-color: var(--background-gray-light);
  }

.checked\:bg-brand-primary:checked {
  background-color: var(--brand-primary) !important;
}

/* when the input inside label is checked */
.single-select-checkedbox input:checked + span {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  
}
  .single-select-checkedbox input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-width: 2px;
}
  .bg-brand-primary-hover:hover {
    background-color: var(--brand-primary-hover);
  }
  
  .bg-brand-primary-light {
    background-color: var(--brand-primary-light);
  }
  
  .bg-surface-dark {
    background-color: var(--surface-dark);
  }
  
  .bg-surface-dark-light {
    background-color: var(--surface-dark-light);
  }
  
  .bg-background-light {
    background-color: var(--background-light);
  }
  .bg-light-gray{
  background-color: var(--background-gray);
  }
  .border-gray{
    border-color: var(--border-gray);
  }
  .border-2-gray{
    border-color: var(--border-2-gray);
  }

  .bg-color-black{
    background-color: var(--color-black);
  }
  .text-color-black{
    color: var(--color-black)
  }
  
  .text-gray {
    color: var(--text-gray);
  }

  /* Border Utilities */
  .border-brand-primary {
    border-color: var(--brand-primary);
  }
  
  .border-4-gray{
    border-color: var(--border-4-gray)
  }
  
  .border-surface-dark {
    border-color: var(--surface-dark);
  }
  .border-3-gray{
    border-color: var(--border-3-gray);
  }

  .text-xs{
    font-size: 0.75rem;
    line-height: calc(1 / 0.75) ;
  }

  .text-sm{
font-size: 0.875rem; /* 0.875rem (14px) */ 
line-height: calc(1.25 / 0.875); 
  }
  
  .white-filter {
    filter: brightness(0) saturate(100%) invert(94%) sepia(93%) saturate(1%) hue-rotate(263deg) brightness(104%) contrast(100%);
  }

  .black-filter {
    filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(4290%) hue-rotate(52deg) brightness(83%) contrast(105%);
  }




  /* liquid class effect */
  /* Add glass effects to existing buttons without changing layout */
.btn-liquid-glass-effects {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 8px 32px rgba(59, 130, 246, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-liquid-glass-effects::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
  transform: translateX(-100%);
  transition: transform 1000ms ease-out;
  z-index: 1;
}

.btn-liquid-glass-effects:hover::before {
  transform: translateX(100%);
}

.btn-liquid-glass-effects::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  border-radius: 0.5rem;
  transition: opacity 500ms ease-out;
  z-index: 2;
}

.btn-liquid-glass-effects:hover::after {
  opacity: 1;
}

.btn-liquid-glass-effects:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 50px rgba(59, 130, 246, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Ensure content stays on top */
.btn-liquid-glass-effects > * {
  position: relative;
  z-index: 10;
}




.bg-fill-animation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgb(254 202 202); /* Tailwind's red-200 */
  transform: scale(0);
  transition: transform 0.3s ease-out;
  z-index: 0;
}

.bg-fill-animation:hover::before {
  transform: scale(1);
}

.bg-fill-animation img,
.bg-fill-animation svg {
  position: relative;
  z-index: 1;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}
}

@keyframes blink {
    50% { opacity: 0; }
}
.blink {
    animation: blink 1s step-start infinite;
}

.button-green {
    background: forestgreen;
}

.button-red {
    background: red;
}


/* date */
/* Hide native date icon (Chrome, Safari, Edge) */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0; /* hide it */
  display: block;
  background: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

/* Add your own custom dropdown icon */
input[type="date"] {
  background-image: url("../icons/calender.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2em 1.2em;
  padding-right: 2.5rem; /* space for the icon */
}