@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "katex/dist/katex.min.css";

@plugin "@tailwindcss/typography";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-highlight: var(--highlight);
  --color-destructive: var(--destructive);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --font-heading: var(--font-sans);
  --shadow-sm: var(--shadow-small);
  --shadow-md: var(--shadow-medium);
  --shadow-lg: var(--shadow-large);
  --shadow-border: var(--shadow-border-base), 0 0 0 1px var(--background);
  --shadow-border-sm:
    var(--shadow-border-base), var(--shadow-small), 0 0 0 1px var(--background);
  --shadow-border-md:
    var(--shadow-border-base), var(--shadow-medium), 0 0 0 1px var(--background);
  --shadow-border-lg:
    var(--shadow-border-base), var(--shadow-large), 0 0 0 1px var(--background);
  --shadow-tooltip:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px #0000000a, 0 0
    0 1px var(--background);
  --shadow-menu:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, 0 0 0 1px var(
      --background
    );
  --shadow-modal:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, 0 0 0 1px var(
      --background
    );
  --shadow-top:
    0px -1px 1px #00000005, 0px -8px 16px -8px #0000000a, 0px -24px 32px -16px
    #0000000f;
  --shadow-fullscreen:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, 0 0 0 1px var(
      --background
    );
}

:root {
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.15 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.95 0 0);
  --secondary-foreground: oklch(0.15 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.15 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --warning: oklch(0.625 0.165 57.4);
  --warning-foreground: oklch(0.625 0.165 57.4);
  --border: oklch(0.93 0 0);
  --highlight: oklch(0.9 0.004 286.32);
  --input: oklch(0.93 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.845 0.143 164.978);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.596 0.145 163.225);
  --chart-4: oklch(0.508 0.118 165.612);
  --chart-5: oklch(0.432 0.095 166.913);
  --radius: 0.625rem;
  --shadow-background-border: 0 0 0 1px var(--background);
  --shadow-border-base: 0 0 0 1px
    color-mix(in oklab, var(--border) 60%, transparent);
  --shadow-border-inset: inset 0 0 0 1px var(--border);
  --shadow-border: var(--shadow-border-base), var(--shadow-background-border);
  --shadow-small: 0px 2px 2px #0000000a;
  --shadow-border-small:
    var(--shadow-border-base), var(--shadow-small),
    var(--shadow-background-border);
  --shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
  --shadow-border-medium:
    var(--shadow-border-base), var(--shadow-medium),
    var(--shadow-background-border);
  --shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
  --shadow-border-large:
    var(--shadow-border-base), var(--shadow-large),
    var(--shadow-background-border);
  --shadow-tooltip:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px #0000000a,
    var(--shadow-background-border);
  --shadow-menu:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, var(
      --shadow-background-border
    );
  --shadow-modal:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(
      --shadow-background-border
    );
  --shadow-top:
    0px -1px 1px #00000005, 0px -8px 16px -8px #0000000a, 0px -24px 32px -16px
    #0000000f;
  --shadow-fullscreen:
    var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(
      --shadow-background-border
    );
  --sidebar: oklch(0.983 0 0);
  --sidebar-foreground: oklch(0.3 0 0);
  --sidebar-primary: oklch(0.15 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.95 0 0);
  --sidebar-accent-foreground: oklch(0 0 0);
  --sidebar-border: oklch(0.95 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --background: oklch(0.983 0 0);
  --foreground: oklch(0.145 0 0);
  --tt-bg-color: var(--background);
  --tt-bg-color-contrast: var(--border);
  --tt-color-highlight-yellow: #fef9c3;
  --tt-color-highlight-green: #dcfce7;
  --tt-color-highlight-blue: #e0f2fe;
  --tt-color-highlight-purple: #f3e8ff;
  --tt-color-highlight-red: #ffe4e6;
  --tt-color-highlight-gray: rgb(248, 248, 247);
  --tt-color-highlight-brown: rgb(244, 238, 238);
  --tt-color-highlight-orange: rgb(251, 236, 221);
  --tt-color-highlight-pink: rgb(252, 241, 246);
  --tt-color-highlight-yellow-contrast: #fbe604;
  --tt-color-highlight-green-contrast: #c7fad8;
  --tt-color-highlight-blue-contrast: #ceeafd;
  --tt-color-highlight-purple-contrast: #e4ccff;
  --tt-color-highlight-red-contrast: #ffccd0;
  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

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

  .admin-root {
    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  }

  .admin-root .tiptap-button-icon,
  .admin-root .tiptap-button-icon-sub {
    @apply text-foreground;
  }

  .admin-root code,
  .admin-root pre,
  .admin-root kbd {
    font-family:
      var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
  }

  html {
    @apply font-sans;
  }
}

.admin-root .content-editor-prose {
  --tw-prose-body: var(--foreground);
  --tw-prose-headings: var(--foreground);
  --tw-prose-lead: var(--muted-foreground);
  --tw-prose-links: var(--primary);
  --tw-prose-bold: var(--foreground);
  --tw-prose-counters: var(--muted-foreground);
  --tw-prose-bullets: var(--muted-foreground);
  --tw-prose-hr: var(--border);
  --tw-prose-quotes: var(--foreground);
  --tw-prose-quote-borders: var(--border);
  --tw-prose-captions: var(--muted-foreground);
  --tw-prose-kbd: var(--foreground);
  --tw-prose-kbd-shadows: color-mix(
    in oklab,
    var(--foreground) 20%,
    transparent
  );
  --tw-prose-code: var(--foreground);
  --tw-prose-pre-code: var(--foreground);
  --tw-prose-pre-bg: var(--muted);
  --tw-prose-th-borders: var(--border);
  --tw-prose-td-borders: var(--border);
  --tw-prose-invert-body: var(--foreground);
  --tw-prose-invert-headings: var(--foreground);
  --tw-prose-invert-lead: var(--muted-foreground);
  --tw-prose-invert-links: var(--primary);
  --tw-prose-invert-bold: var(--foreground);
  --tw-prose-invert-counters: var(--muted-foreground);
  --tw-prose-invert-bullets: var(--muted-foreground);
  --tw-prose-invert-hr: var(--border);
  --tw-prose-invert-quotes: var(--foreground);
  --tw-prose-invert-quote-borders: var(--border);
  --tw-prose-invert-captions: var(--muted-foreground);
  --tw-prose-invert-kbd: var(--foreground);
  --tw-prose-invert-kbd-shadows: color-mix(
    in oklab,
    var(--foreground) 20%,
    transparent
  );
  --tw-prose-invert-code: var(--foreground);
  --tw-prose-invert-pre-code: var(--foreground);
  --tw-prose-invert-pre-bg: var(--muted);
  --tw-prose-invert-th-borders: var(--border);
  --tw-prose-invert-td-borders: var(--border);
  @apply caret-foreground text-foreground text-[0.9375rem] leading-[1.65] outline-none whitespace-pre-wrap;
}

.admin-root .content-editor-prose > :first-child {
  @apply mt-0;
}

.admin-root .content-editor-prose > :last-child {
  @apply mb-0;
}

.admin-root
  .content-editor-prose
  :where(p):not(:where([class~="not-prose"] *)) {
  @apply my-3 leading-[1.65];
}

.admin-root
  .content-editor-prose
  :where(h1, h2, h3, h4):not(:where([class~="not-prose"] *)) {
  @apply mt-6 mb-[1.2rem] text-balance font-semibold leading-tight tracking-normal;
}

.admin-root
  .content-editor-prose
  :where(h1):not(:where([class~="not-prose"] *)) {
  @apply mt-7 text-[1.75rem] leading-[1.18];
}

.admin-root
  .content-editor-prose
  :where(h2):not(:where([class~="not-prose"] *)) {
  @apply mt-6 text-[1.375rem] leading-tight;
}

.admin-root
  .content-editor-prose
  :where(h3):not(:where([class~="not-prose"] *)) {
  @apply mt-5 text-lg leading-[1.3];
}

.admin-root
  .content-editor-prose
  :where(h4):not(:where([class~="not-prose"] *)) {
  @apply mt-[1.125rem] text-base leading-[1.35];
}

.admin-root
  .content-editor-prose
  :where(h1, h2, h3, h4)
  + :where(p, ul, ol, blockquote, pre):not(:where([class~="not-prose"] *)) {
  @apply mt-0;
}

.admin-root
  .content-editor-prose
  :where(ul, ol):not(:where([class~="not-prose"] *)) {
  @apply my-3.5 pl-[1.55em];
}

.admin-root
  .content-editor-prose
  :where(li):not(:where([class~="not-prose"] *)) {
  @apply my-[0.3em] pl-[0.15em];
}

.admin-root
  .content-editor-prose
  :where(li > p):not(:where([class~="not-prose"] *)) {
  @apply my-[0.25em];
}

.admin-root
  .content-editor-prose
  :where(li > ul, li > ol):not(:where([class~="not-prose"] *)) {
  @apply my-[0.35em];
}

.admin-root
  .content-editor-prose
  :where(blockquote):not(:where([class~="not-prose"] *)) {
  @apply my-4 border-l-[3px] border-l-border py-[0.1em] pl-[1em] text-foreground not-italic font-normal leading-[1.6];
}

.admin-root
  .content-editor-prose
  :where(blockquote p):not(:where([class~="not-prose"] *)) {
  @apply my-[0.45em];
}

.admin-root .content-editor-prose :where(blockquote p:first-of-type)::before,
.admin-root .content-editor-prose :where(blockquote p:last-of-type)::after {
  content: none;
}

.admin-root
  .content-editor-prose
  :where(strong):not(:where([class~="not-prose"] *)) {
  @apply font-semibold;
}

.admin-root
  .content-editor-prose
  :where(a):not(:where([class~="not-prose"] *)) {
  @apply decoration-[1px] underline-offset-[0.18em];
  font-weight: inherit;
}

.admin-root
  .content-editor-prose
  :where(code):not(:where(pre code, [class~="not-prose"] *)) {
  @apply rounded-sm border border-border bg-muted px-[0.3em] py-[0.1em] text-[0.875em] font-medium leading-[1.4];
}

.admin-root
  .content-editor-prose
  :where(code):not(:where(pre code, [class~="not-prose"] *))::before,
.admin-root
  .content-editor-prose
  :where(code):not(:where(pre code, [class~="not-prose"] *))::after {
  content: none;
}

.admin-root
  .content-editor-prose
  :where(pre):not(:where([class~="not-prose"] *)) {
  @apply my-4 rounded-md border border-border px-4 py-3.5 text-[0.875em] leading-[1.6];
}

.admin-root
  .content-editor-prose
  :where(pre code):not(:where([class~="not-prose"] *)) {
  @apply border-0 bg-transparent p-0;
  font-size: inherit;
}

.admin-root .content-editor-prose > * {
  @apply relative;
}

.admin-root
  .content-editor-prose:not(.readonly):not(.ProseMirror-hideselection)
  ::selection {
  @apply bg-primary/20;
}

.admin-root .content-editor-prose .selection {
  @apply inline bg-primary/20;
}

.admin-root
  .content-editor-prose
  .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
  @apply rounded-sm bg-primary/12;
}

.admin-root .content-editor-prose.ProseMirror-hideselection {
  @apply caret-transparent;
}

.admin-root .content-editor-prose.resize-cursor {
  @apply cursor-col-resize;
}

.admin-root .content-editor-prose a span,
.admin-root .content-editor-prose u span {
  @apply underline;
}

.admin-root .content-editor-prose s span {
  @apply line-through;
}

.admin-root
  .content-editor-prose
  .is-empty:not(.with-slash)[data-placeholder]:has(
    > .ProseMirror-trailingBreak:only-child
  )::before {
  content: attr(data-placeholder);
}

.admin-root
  .content-editor-prose
  .is-empty.with-slash[data-placeholder]:has(
    > .ProseMirror-trailingBreak:only-child
  )::before {
  content: "Write, type '/' for commands...";
  @apply italic;
}

.admin-root
  .content-editor-prose
  .is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak)::before {
  @apply pointer-events-none absolute inset-x-0 h-0 w-full text-muted-foreground;
  text-align: inherit;
}

.admin-root .content-editor-prose ul[data-type="taskList"] {
  @apply list-none pl-0;
}

.admin-root .content-editor-prose ul[data-type="taskList"] > li {
  @apply flex list-none items-start gap-2 pl-0;
}

.admin-root
  .content-editor-prose
  ul[data-type="taskList"]
  > li
  > .content-editor-task-item-checkbox {
  @apply mt-1.5 flex-none;
}

.admin-root .content-editor-prose ul[data-type="taskList"] > li > div > * {
  @apply m-0;
}

.admin-root .content-editor-prose ul[data-type="taskList"] > li > div {
  @apply min-w-0 flex-1;
}

.admin-root .content-editor-prose li[data-checked="true"] > div > p {
  @apply text-muted-foreground line-through;
}

.admin-root
  .content-editor-prose
  :where(table):not(:where([class~="not-prose"] *)) {
  @apply my-4 w-full table-fixed border-collapse text-sm;
}

.admin-root .content-editor-prose .tableWrapper table {
  @apply my-0 w-full;
}

.admin-root
  .content-editor-prose
  :where(th, td):not(:where([class~="not-prose"] *)) {
  @apply min-w-24 border border-border p-2 align-top leading-snug;
}

.admin-root
  .content-editor-prose
  :where(th, td):not(:where([class~="not-prose"] *))
  > :where(p):not(:where([class~="not-prose"] *)) {
  @apply my-0 leading-snug;
}

.admin-root
  .content-editor-prose
  :where(th):not(:where([class~="not-prose"] *)) {
  @apply bg-muted/50 text-left font-medium;
}

.admin-root .content-editor-prose :where(th, td).selectedCell,
.admin-root
  .content-editor-prose
  :where(th, td).content-editor-active-table-cell,
.admin-root .content-editor-prose :where(th, td):focus-within {
  @apply relative ring-1 ring-border ring-inset;
}

.admin-root
  .content-editor-prose
  :where(th, td).content-editor-table-remove-preview {
  @apply bg-muted/70;
}

.admin-root .content-editor-prose :where(th, td).selectedCell::after {
  @apply pointer-events-none absolute inset-0 bg-primary/12;
  content: "";
}

.admin-root .content-editor-prose .column-resize-handle {
  @apply pointer-events-none absolute bottom-0 right-0 top-0 w-1 bg-primary/60;
}

.admin-root .content-editor-prose .tableWrapper {
  @apply relative mt-4 mb-10 box-border overflow-visible pr-6 pb-6;
}

.admin-root .content-editor-prose [data-type="horizontalRule"] {
  @apply my-4 py-0.5;
}

.admin-root .content-editor-prose [data-type="horizontalRule"] hr {
  @apply my-0;
}

.admin-root .content-editor-prose img {
  @apply my-4 block h-auto max-w-full;
}

.admin-root .content-editor-prose p > img {
  @apply my-0 inline-block;
}

.admin-root .content-editor-prose img.ProseMirror-selectednode {
  @apply outline-2 outline-ring;
}

.admin-root
  .content-editor-prose
  [data-content-editor-image-node]:hover
  [data-content-editor-image-controls-overlay],
.admin-root
  .content-editor-prose
  [data-content-editor-image-node]:focus-within
  [data-content-editor-image-controls-overlay] {
  @apply opacity-100;
}

@utility shadow-input {
  --admin-shadow-input: rgba(0, 0, 0, 0.02) 0px 3px 0px -2px;
  --tw-shadow: var(--admin-shadow-input);
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

@utility material-base {
  background-color: var(--card);
  box-shadow: var(--shadow-border);
  border-radius: 6px;
}

@utility material-sm {
  background-color: var(--card);
  box-shadow: var(--shadow-border-small);
  border-radius: 6px;
}

@utility material-md {
  background-color: var(--card);
  box-shadow: var(--shadow-border-medium);
  border-radius: 8px;
}

@utility material-lg {
  background-color: var(--card);
  box-shadow: var(--shadow-border-large);
  border-radius: 12px;
}

@utility material-tooltip {
  background-color: var(--card);
  box-shadow: var(--shadow-tooltip);
  border-radius: 6px;
}

@utility material-menu {
  background-color: var(--card);
  box-shadow: var(--shadow-menu);
  border-radius: 8px;
}

@utility material-modal {
  background-color: var(--card);
  box-shadow: var(--shadow-modal);
  border-radius: 12px;
}

@utility material-fullscreen {
  background-color: var(--card);
  box-shadow: var(--shadow-fullscreen);
  border-radius: 16px;
}