@import "tailwindcss";

@plugin "tailwind-scrollbar-hide";

@custom-variant dark (&:is(.dark *));

@font-face {
  font-family: "SolaimanLipi";
  src: url("/SolaimanLipi.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@theme {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));

  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));

  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer utilities {
  .gradient-text {
    @apply bg-linear-to-r from-primary to-info bg-clip-text text-transparent;
  }
}

@layer base {
  :root {
    --background: 140 67% 99%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 140 65% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 140 65% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 45 93% 47%;
    --warning-foreground: 240 10% 3.9%;
    --info: 140 65% 40%;
    --info-foreground: 0 0% 100%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 140 65% 40%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 140 65% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --success: 140 65% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 45 93% 47%;
    --warning-foreground: 240 10% 3.9%;
    --info: 140 65% 45%;
    --info-foreground: 0 0% 100%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 140 65% 45%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: "SolaimanLipi", sans-serif;
  }
  main {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
}

/* LaTeX and Long Text Wrapping for Mobile */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5em 0;
  max-width: 100%;
}

.katex {
  white-space: normal;
}

.prose pre {
  @apply max-w-full overflow-x-auto whitespace-pre-wrap break-words;
}

/* Responsive Table container */
.table-responsive {
  @apply w-full overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0;
}

/* Custom Scrollbar for Mobile */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
}

.qimg {
  width: 100%;
  max-width: 400px;
}

.latex-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
  border-radius: 0.25rem;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.latex-content p {
  margin-bottom: 0.5rem;
}

.latex-content p:last-child {
  margin-bottom: 0;
}

/* Ensure Latex content is readable in dark mode */
.dark .latex-content {
  color: var(--color-foreground) !important;
}

.dark .latex-content span,
.dark .latex-content p,
.dark .latex-content div {
  color: inherit !important;
}

/* Prevent image download and selection */
img[draggable="false"] {
  user-select: none;
  -webkit-user-drag: none;
}