@import "tailwindcss";

/* ─── Source scanning ─────────────────────────────────────────────────────── */
/* Paths are relative to this file (src/firefighter/incidents/static/css/)     */
@source "../../../../**/templates/**/*.html";
@source "../../../../**/components/**/*.html";
@source "../../../../**/*.py";

/* ─── Plugins ─────────────────────────────────────────────────────────────── */
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: light, darkff;
  logs: true;
}

/* ─── Light theme ─────────────────────────────────────────────────────────── */
@plugin "daisyui/theme" {
  name: "light";
  default: true;
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #F9F9F9;
  --color-base-300: #E5E6E6;
}

/* ─── Dark theme (darkff) ─────────────────────────────────────────────────── */
@plugin "daisyui/theme" {
  name: "darkff";
  prefersdark: true;
  color-scheme: dark;
  --color-primary: #4F46E5;
  --color-primary-content: #ffffff;
  --color-secondary: #f000b8;
  --color-secondary-content: #ffffff;
  --color-accent: #37cdbe;
  --color-accent-content: #163835;
  --color-neutral: #1b1d1d;
  --color-base-100: #1b1d1d;
  --color-base-200: #212121;
  --color-base-300: #2c2c2c;
  --color-base-content: #E5E5E5;
  --color-info: #2563eb;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
}

/* ─── Custom color tokens ─────────────────────────────────────────────────── */
@theme {
  --color-base-warning: #fef08a;
}

[data-theme="darkff"] {
  --color-base-warning: #fcd34d;
}

/* ─── Typography plugin overrides ─────────────────────────────────────────── */
@layer base {
  .prose p {
    margin-top: 1em;
    margin-bottom: .8em;
  }
  .prose li {
    margin-top: .25em;
    margin-bottom: .25em;
  }
  .prose code::before,
  .prose code::after {
    content: "";
  }
}

/* ─── Component customizations ────────────────────────────────────────────── */
@layer components {
  textarea.input {
    @apply textarea input-md;
    height: auto;
  }
  .checkbox {
    @apply bg-transparent;
  }

  table.rounded-md thead th:first-child {
    @apply rounded-tl-md;
  }
  table.rounded-md thead th:last-child {
    @apply rounded-tr-md;
  }

  .btn {
    /* The button would "pop" on load, so we remove the fancier animation */
    @apply animate-none;
  }

  .table-td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
  }

  .mermaid > svg {
    @apply max-w-full mx-auto;
  }
}

img[alt]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
