@import 'tailwindcss';

@layer theme, base, components, utilities;

/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind theme */
@theme {
  --shadow-around: 0 0 2px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.28);
}

@layer base {
  html {
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: env(safe-area-inset-bottom);
    font-family:
      system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto',
      'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
  }

  input:focus,
  select:focus,
  textarea:focus,
  button:focus,
  dialog:focus,
  div:focus,
  a:focus {
    outline: none;
  }

  input,
  select {
    background: none;
  }

  :root {
    color-scheme: light dark;
  }

  body {
    color: light-dark(#000000, #dddddd);
    background-color: light-dark(#fafafa, #121212);
  }

  hr {
    border-color: light-dark(#e5e5e5, #333333);
  }
}

@layer components {
  @import '../node_modules/github-markdown-css/github-markdown.css';

  .markdown-body {
    --fgColor-default: light-dark(#000000, #dddddd);
    --bgColor-default: light-dark(#ffffff, #1e1e1e);
    --bgColor-muted: light-dark(#fafafa, #121212);
    --borderColor-muted: light-dark(#e5e5e5, #333333);
    --bgColor-neutral-muted: light-dark(#fafafa, #262626);
  }

  .markdown-body li {
    list-style-type: disc;
  }

  .markdown-body img {
    display: initial;
  }

  /* Hide GitHub README's heading anchor */
  .markdown-body .markdown-heading .anchor {
    display: none;
  }

  /* Hide GitHub README's box header */
  .markdown-body .Box-header {
    display: none;
  }

  /* Workaround for the <HTML> element wrapping content in a div*/
  .markdown-body > div:first-child > *:first-child {
    /* biome-ignore lint/complexity/noImportantStyles: third-party CSS override */
    margin-top: 0 !important;
  }

  .dashboard-table {
    grid-template-columns:
      40px 1fr minmax(min-content, 80px) minmax(min-content, 80px)
      minmax(min-content, 200px) 24px;
  }

  .break-word {
    word-break: break-word;
  }
}
