@import 'react-datepicker/dist/react-datepicker.css';
@import "tailwindcss";

@theme {
    /* Breakpoints */
    --breakpoint-xsm: 375px;
    --breakpoint-sm: 425px;
    --breakpoint-md: 600px;
    --breakpoint-lg: 768px;
    --breakpoint-xl: 900px;
    --breakpoint-2xl: 1024px;
    --breakpoint-3xl: 1200px;
    --breakpoint-4xl: 1400px;
    --breakpoint-5xl: 1500px;

    /* Fonts */
    --font-poppins: 'Poppins', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;
    --font-rounded: 'Arial Rounded MT Bold';

    --color-body: #22242C;
    --color-fade: #f8f9fa;
    --color-phone-nav: #1e2024;
    --color-phone-nav-hover: #23272b;
    --color-surface-400: #f8f9fa;
    --color-surface-500: #f1f3f4;
    --color-surface-600: #e8eaed;
    --color-surface-700: #dadce0;

    /* Primary gradient (golden) provided by user */
    --color-primary-600: #ffe38d; /* light gold */
    --color-primary-700: #ba8859; /* deep gold */
    --color-primary-800: #ba8859; /* deep gold */

    --color-title: #0f172a;
    --color-text: #0f172a;
    --color-text-light: #64748b;
    --color-divider: #e2e8f0;

    --shadow-outside: 0 10px 30px rgba(2,6,23,0.04), inset 0 -2px 0 rgba(2,6,23,0.02);
    --shadow-normal: 0 8px 20px rgba(2,6,23,0.07);
    --shadow-inside: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(2,6,23,0.05);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body:not(.cursor-pointer),
div:not(.cursor-pointer),
p:not(.cursor-pointer)
{

    cursor: url('https://empire-lakeview.vercel.app/assets/EMPIRE%20Cursor-01.png') 16 16, auto;
}
/* Add this at the end of your globals.css file */

/* Override Empire cursor when default cursor is selected */
body.default-cursor,
body.default-cursor *,
html.default-cursor,
html.default-cursor * {
  cursor: default !important;
}

body.default-cursor a,
body.default-cursor button,
body.default-cursor [role="button"],
html.default-cursor a,
html.default-cursor button,
html.default-cursor [role="button"] {
  cursor: pointer !important;
}

body.default-cursor input[type="text"],
body.default-cursor input[type="email"],
body.default-cursor input[type="password"],
body.default-cursor textarea,
html.default-cursor input[type="text"],
html.default-cursor input[type="email"],
html.default-cursor input[type="password"],
html.default-cursor textarea {
  cursor: text !important;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
body {
    @apply bg-body text-text font-poppins m-0 p-0;
}

/* Customize NProgress bar */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  @apply w-full h-[3px] fixed top-0 left-0;
  background: linear-gradient(90deg, var(--color-primary-600), var(--color-primary-700)) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--color-primary-700), 0 0 5px var(--color-primary-600) !important;
}



/* ===================================== Scroll Bar ===================================== */
::-webkit-scrollbar {
    @apply w-[10px] h-[10px];
}

::-webkit-scrollbar-track {
    @apply bg-surface-600 shadow-inside;
}

::-webkit-scrollbar-thumb {
    @apply bg-gradient-to-b from-primary-600 to-primary-700 rounded-[10px];
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gradient-to-b from-primary-600 to-primary-700;
}



/* ====================================== Selection ====================================== */
::selection {
    @apply bg-primary-600 text-black fill-white;
}



/* ======================================== Cursor ======================================== */
#cursor.tap {
    @apply blur-[30px] opacity-60 transition-opacity ease-in-out duration-300;
}



/* Customize NProgress bar */
#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    @apply bg-gradient-to-r from-primary-600 to-primary-700 w-full h-[3px] fixed top-0 left-0;
}


/* ======================================== Loader ======================================== */

.loader_container {
    @apply bg-body flex justify-center items-center w-screen h-screen overflow-hidden fixed top-0 left-0 z-20;
}

.loader_container .spinner {
    @apply text-primary-600 w-[200px] h-[200px] flex justify-center items-center relative z-21;
}

.loader_container .spinner:before,
.loader_container .spinner:after {
    content: "";
    @apply block absolute border-4 border-solid rounded-full;
}

#loader div:before {
    animation: rotate-animation 1s linear 0s infinite;
    @apply transition-all ease-in-out duration-1000 border-b-primary-600 border-r-primary-600 border-t-transparent border-l-transparent w-[192px] h-[192px] top-0 left-0;
}

#loader div:after {
    animation: anti-rotate-animation 0.85s linear 0s infinite;
    @apply transition-all ease-in-out duration-1000 border-b-primary-600 border-r-primary-600 border-t-transparent border-l-transparent w-[156.9px] h-[156.9px] top-[17.55px] left-[17.55px];
}


/* =================================== Google Icons =================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 48
}




/* ================================= Default Classes ================================= */

.container {
    @apply px-3 md:px-5 xl:px-8 mx-auto max-w-[1340px] block;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}



/* ================================= Skeleton ================================= */
.skeleton {
    @apply bg-gradient-to-r from-surface-700 to-surface-600 rounded-xl relative overflow-hidden;
}

.skeleton::after {
    content: '';
    @apply bg-gradient-to-r from-transparent via-surface-600 to-transparent absolute top-0 left-0 w-full h-full;
    animation: shimmer 1s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ===== Vuexy-like UI primitives ===== */
.app-container {
    @apply px-4 md:px-6 lg:px-8 py-4 space-y-6;
}

/* ================================= SweetAlert2 Custom Styles ================================= */

/* Custom popup styling */
.swal2-popup-custom {
  border-radius: 12px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* Custom title styling */
.swal2-title-custom {
  color: #fbbf24 !important; /* Yellow-400 */
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0 !important;
}

/* Custom confirm button styling */
.swal2-confirm-custom {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.swal2-confirm-custom:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15) !important;
}

/* Custom cancel button styling */
.swal2-cancel-custom {
  background: #6b7280 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.swal2-cancel-custom:hover {
  background: #4b5563 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15) !important;
}

/* Custom input styling */
.swal2-input-custom {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
}

.swal2-input-custom:focus {
  outline: none !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important;
}

.swal2-input-custom::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Toast custom styling */
.swal2-toast-custom {
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* Loading spinner customization */
.swal2-loader {
  border-color: #fbbf24 transparent #fbbf24 transparent !important;
}

/* Icon customization */
.swal2-icon.swal2-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
  border-color: #6b7280 !important;
  color: #6b7280 !important;
}

/* Progress bar customization */
.swal2-timer-progress-bar {
  background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
}

/* Animation customization */
.swal2-show {
  animation: swal2-show 0.3s ease-out !important;
}

.swal2-hide {
  animation: swal2-hide 0.3s ease-in !important;
}

@keyframes swal2-show {
  0% {
    transform: scale(0.7) !important;
    opacity: 0 !important;
  }
  45% {
    transform: scale(1.05) !important;
    opacity: 1 !important;
  }
  80% {
    transform: scale(0.95) !important;
  }
  100% {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
}

@keyframes swal2-hide {
  0% {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  100% {
    transform: scale(0.5) !important;
    opacity: 0 !important;
  }
}

/* Responsive design */
@media (max-width: 640px) {
  .swal2-popup-custom {
    margin: 1rem !important;
    width: calc(100% - 2rem) !important;
  }
  
  .swal2-title-custom {
    font-size: 1.25rem !important;
  }
  
  .swal2-confirm-custom,
  .swal2-cancel-custom {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.8125rem !important;
  }
}


/* dropdown */
.async-select-container .react-select__control {
  position: relative;
  z-index: 1;
}

.async-select-container .react-select__menu {
  position: absolute;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
}

.async-select-container .react-select__menu-list {
  background: transparent !important;
  z-index: 10001 !important;
}

.async-select-container .react-select__option {
  background: transparent !important;
  color: white !important;
  z-index: 10002 !important;
  position: relative;
}

.async-select-container .react-select__option:hover,
.async-select-container .react-select__option--is-focused {
  background: rgba(255, 255, 255, 0.1) !important;
}

.async-select-container .react-select__option--is-selected {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure the dropdown appears above everything */
.async-select-container .react-select__menu-portal {
  z-index: 10000 !important;
}

/* Fix for the specific container */
.async-select-container {
  position: relative;
  z-index: 100;
}

/* Make sure the input text doesn't interfere */
.async-select-container .react-select__input-container {
  z-index: 1;
}

.async-select-container .react-select__value-container {
  z-index: 1;
}