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

@layer base {
  :root {
    --primary: #990b00;
    --secondary: #0c6672;
    --accent: #bb1e10;
    --error: #9a0d55;
    --warning: #bb6210;
    --info: #388994;
    --success: #73ad0f;
  }
  .dark {
    --primary: #ff0d00;
    --secondary: #0f9aa9;
    --accent: #bb1e10;
    --error: #9a0d55;
    --warning: #bb6210;
    --info: #4ccbda;
    --success: #73ad0f;
  }
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent; /*f1f1f1;*/
}

*::-webkit-scrollbar-thumb {
  background-color: #c9c9c9;
  border-radius: 12px;
  border: 0px solid #ffffff;
}

html,
body {
  @apply h-full w-screen m-0 p-0 overflow-hidden bg-gray-100;
  height: 100svh;
}

#app {
  @apply w-full h-full overflow-hidden flex flex-col;
}

/*:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"])*/
button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
a[button] {
  @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
}

button[primary]:not([primary="false"]),
a[button][primary]:not([primary="false"]) {
  @apply border border-transparent text-white bg-primary hover:bg-primary;
}

button[primary-outline]:not([primary-outline="false"]),
a[button][primary-outline]:not([primary-outline="false"]) {
  @apply border-2 border-primary text-black hover:bg-primary;
}

button:disabled,
a[button]:disabled,
a[button].disabled {
  @apply opacity-75 pointer-events-none;
}

input:not([type="checkbox"]),
textarea,
select {
  @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
}

input[readonly],
textarea[readonly],
select[readonly] {
  @apply select-none focus:border-gray-300 cursor-default;
  /* pointer-events-none; */
}

input[disabled],
textarea[disabled],
select[disabled] {
  @apply opacity-75 pointer-events-none;
}

details {
  user-select: none;
  & summary svg[indicator] {
    transform: rotate(90deg);
  }
}
details[open] {
  & summary svg[indicator] {
    transform: rotate(-90deg);
  }
}

details[open] summary ~ * {
  animation: ease-opacity-t-b 0.5s ease;
}

summary {
  cursor: pointer;
}
summary > svg {
  transition: all 0.3s;
}

summary::-webkit-details-marker {
  display: none;
}

.fc-button-primary {
  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
}
.fc-button-active {
  @apply !bg-red-500 !border-red-500;
}
.fc-toolbar {
  @apply flex-wrap;
}

/* For screens between 850px and 768px */
@media (max-width: 850px) and (min-width: 768px) {
  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
    @apply !order-1;
  }
  /* Your styles for this range */
}

/* For screens between 525px and 0px */
@media (max-width: 525px) and (min-width: 0px) {
  /* Your styles for this range */
  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
    @apply !order-1;
  }
}