@import "tailwindcss";
@plugin "@tailwindcss/nesting";
@plugin "daisyui" {
    themes: business --default;
  }

  h2 {
    @apply text-2xl font-bold;
  }

  /* Trix Editor Dark Theme - Match form input styling */
  trix-editor {
    background-color: var(--color-base-100);
    color: oklch(var(--bc)) !important;
    min-height: 5em !important;
    padding: 0.75rem 1rem !important;
    border-color: var(--input-color);
    border-start-start-radius: var(--join-ss, var(--radius-field));
    border-start-end-radius: var(--join-se, var(--radius-field));
    border-end-end-radius: var(--join-ee, var(--radius-field));
    border-end-start-radius: var(--join-es, var(--radius-field));
  }

  trix-toolbar {
    background-color: oklch(var(--b1)) !important;
    border: 1px solid oklch(var(--b3)) !important;
    border-bottom: none !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
    padding: 0.5rem;

    .trix-button-group {
      border: 1px solid oklch(var(--b3)) !important;
      border-radius: 0.375rem !important;
      background: oklch(var(--b1)) !important;
      margin: 0.25rem !important;
    }

    .trix-button {
      color: #ffffff !important;
      background: transparent !important;
      border: none !important;
      padding: 0.375rem 0.5rem !important;

      &:not(:first-child) {
        border-left: 1px solid oklch(var(--b3)) !important;
      }

      &:hover {
        background-color: oklch(var(--b2)) !important;
        color: #ffffff !important;
      }

      &.trix-active {
        background-color: oklch(var(--p)) !important;
        color: #ffffff !important;
      }

      &:disabled {
        color: oklch(var(--bc) / 0.4) !important;
      }
    }

    .trix-dialogs {
      background-color: oklch(var(--b1)) !important;
      border: 1px solid oklch(var(--b3)) !important;
      border-radius: 0.5rem !important;
    }

    .trix-dialog {
      background-color: oklch(var(--b1)) !important;
      color: oklch(var(--bc)) !important;
      box-shadow: 0 0.5rem 1rem oklch(var(--b3)) !important;
      border: 1px solid oklch(var(--b3)) !important;
      border-radius: 0.5rem !important;

      &__link-fields input {
        background-color: oklch(var(--b1)) !important;
        color: oklch(var(--bc)) !important;
        border: 1px solid oklch(var(--b3)) !important;
        border-radius: 0.375rem !important;
        padding: 0.5rem !important;
      }
    }

    .trix-input--dialog {
      background-color: oklch(var(--b1)) !important;
      color: oklch(var(--bc)) !important;
      border: 1px solid oklch(var(--b3)) !important;
      border-radius: 0.375rem !important;
      padding: 0.5rem !important;
    }
  }

  /* Trix content area dark theme */
  .trix-content {
    color: oklch(var(--bc)) !important;

    blockquote {
      border-left-color: oklch(var(--b3)) !important;
    }

    pre {
      background-color: oklch(var(--b3)) !important;
      color: oklch(var(--bc)) !important;
    }

    .attachment--file {
      color: oklch(var(--bc)) !important;
      border: 1px solid oklch(var(--b3)) !important;
      background-color: oklch(var(--b1)) !important;
    }

    .attachment__caption {
      color: oklch(var(--bc) / 0.7) !important;
    }
  }

  /* Invert the SVG icon colors for dark mode */
  trix-toolbar .trix-button--icon::before {
    filter: invert(1);
  }

  trix-toolbar .trix-button--icon.trix-active::before {
    filter: invert(0);
  }

  trix-toolbar .trix-button--icon:disabled::before {
    filter: invert(1) opacity(0.3);
  }

  /* Fix for active button icon color */
  trix-toolbar .trix-button.trix-active.trix-button--icon::before {
    filter: invert(0);
  }

  /* Fix for disabled button icon color */
  trix-toolbar .trix-button:disabled.trix-button--icon::before {
    filter: invert(1) opacity(0.3);
  }

  /* Fix for link dialog button colors */
  trix-toolbar .trix-dialog .trix-button-group .trix-button {
    color: #ffffff !important;
  }

  trix-toolbar .trix-dialog .trix-button-group .trix-button:hover {
    background-color: oklch(var(--b2)) !important;
  }

  trix-toolbar .trix-dialog .trix-button-group .trix-button.trix-active {
    background-color: oklch(var(--p)) !important;
  }

  /* Fix for link dialog input field */
  trix-toolbar .trix-dialog__link-fields .trix-input {
    background-color: oklch(var(--b1)) !important;
    color: oklch(var(--bc)) !important;
    border: 1px solid oklch(var(--b3)) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem !important;
  }

  /* Fix for link dialog button group */
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    border: 1px solid oklch(var(--b3)) !important;
    border-radius: 0.375rem !important;
    background: oklch(var(--b1)) !important;
    margin: 0 !important;
  }

  /* Fix for link dialog button */
  trix-toolbar .trix-dialog__link-fields .trix-button {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    padding: 0.375rem 0.5rem !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button:not(:first-child) {
    border-left: 1px solid oklch(var(--b3)) !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button:hover {
    background-color: oklch(var(--b2)) !important;
    color: #ffffff !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button.trix-active {
    background-color: oklch(var(--p)) !important;
    color: #ffffff !important;
  }

  trix-toolbar .trix-dialog__link-fields .trix-button:disabled {
    color: oklch(var(--bc) / 0.4) !important;
  }