ff-admin/src/main.css

@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-accent: var(--accent);
  --color-error: var(--error);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-success: var(--success);
}

@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-hidden 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-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none;
}

input[readonly],
textarea[readonly],
select[readonly] {
  @apply select-none;
  /* 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-hidden! 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!;
  }
}