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

/* @import '/node_modules/react-big-calendar/lib/sass/styles.scss'; */
/* @import '/node_modules/react-big-calendar/lib/addons/dragAndDrop/styles.css'; */

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --warning: 41.2 83.2% 53.3%;
    --warning-foreground: 222.2 47.4% 11.2%;
    --danger: 0 84.2% 60.2%;
    --danger-foreground: 210 40% 98%;
    --success: 161.3 83% 48.4%;
    --success-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;

    --warning: 37.4 91.3% 54.9%;
    --warning-foreground: 222.2 47.4% 11.2%;
    --danger: 0 84.2% 60.2%;
    --danger-foreground: 210 40% 98%;
    --success: 157.3 91.3% 44.9%;
    --success-foreground: 222.2 47.4% 11.2%;
  }
}

@layer base {
  * {
    @apply border-border dark:border-neutral-700 dark:text-neutral-200;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.detail-spo ul {
  @apply list-inside list-disc;
}

.detail-spo ol {
  @apply list-inside list-decimal;
}

/* button disable cursot not alowed + event none */
button[disabled] {
  @apply pointer-events-none cursor-not-allowed;
}

ol {
  @apply list-inside list-decimal;
}

.rbc-month-view {
  @apply rounded-xl border border-border text-foreground dark:border-gray-700 dark:text-gray-300;
}

.rbc-off-range-bg {
  @apply bg-background dark:bg-gray-800;
}

.rbc-day-bg + .rbc-day-bg,
.rbc-header + .rbc-header {
  @apply border-l border-border dark:border-gray-700;
}

.rbc-header {
  @apply border-b border-border dark:border-gray-700;
}

.rbc-month-row + .rbc-month-row {
  @apply border-t border-border dark:border-gray-700;
}

.rbc-today {
  @apply dark:bg-primary/25;
}

.rbc-event {
  background-color: hsl(var(--primary)) !important;
  border-color: var(--border) !important;
  color: hsl(var(--primary-foreground)) !important;
  @apply font-semibold;
}

.rbc-overlay-header {
  @apply bg-background font-semibold text-foreground;
  padding: 0.5rem 1rem !important;
}

.rbc-overlay {
  @apply max-w-lg;
}

#renderPDF iframe {
  @apply h-full w-full;
}

#renderPDF {
  @apply h-[95vh];
}

.tableSpo ol,
.tableSpo ol {
  @apply list-outside list-decimal;
}

.tableSpo ul,
.tableSpo ul {
  @apply list-outside list-disc;
}

.tableSpo ul,
.tableSpo ol {
  @apply ml-6;
}

.tableSpo li,
.tableSpo li {
  @apply mb-1;
}

.tableSpo p,
.tableSpo li {
  @apply dark:text-gray-800;
}

@media print {
  .onPrint {
    @apply block;
  }

  .hideOnPrint {
    @apply hidden;
  }
}

.ck-content * {
  @apply text-slate-900;
}

/* gap on bnottom after p */
.ck-content p {
  @apply leading-7;
}

.ck-content p::after {
  content: '';
  display: block;
  height: .5rem;
}

.ck-content ul::after, .ck-content ol::after {
  content: '';
  display: block;
  height: .7rem;
}

.ck-content ul {
  @apply list-inside ml-4;
}

.ck-content ul li {
  @apply list-disc;
}

.ck-content li ol, .ck-content li ul {
  @apply list-inside ml-6;
}