timetracker/common/input.css

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';
@plugin 'flowbite/plugin';

@source "../node_modules/flowbite";
@import "flowbite/src/themes/default";

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

@theme {
  --font-sans:
    IBM Plex Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono:
    IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --font-serif:
    IBM Plex Serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-condensed:
    IBM Plex Sans Condensed, ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --color-accent: #7c3aed;
  --color-background: #1f2937;
}


/*
  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);
  }
}

@utility min-w-20char {
  min-width: 20ch;
}

@utility max-w-20char {
  max-width: 20ch;
}

@utility min-w-30char {
  min-width: 30ch;
}

@utility max-w-30char {
  max-width: 30ch;
}

@utility max-w-35char {
  max-width: 35ch;
}

@utility max-w-40char {
  max-width: 40ch;
}

@layer utilities {
  @font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Serif';
    src: url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Serif';
    src: url('fonts/IBMPlexSerif-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Sans Condensed';
    src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  .responsive-table {
    @apply dark:text-white mx-auto table-fixed;
  }

  .responsive-table tr:nth-child(even) {
    @apply bg-indigo-100 dark:bg-slate-800;
  }

  .responsive-table tbody tr:nth-child(odd) {
    @apply bg-indigo-200 dark:bg-slate-900;
  }

  .responsive-table thead th {
    @apply text-left border-b-2 border-b-slate-500 text-xl;
  }

  .responsive-table thead th:not(:first-child),
  .responsive-table td:not(:first-child) {
    @apply border-l border-l-slate-500;
  }
}

/* Form controls (incl. disabled state) and form-field markup (labels, errors,
   rows) are styled by utilities on the elements themselves — see
   PrimitiveWidgetsMixin and FormFields. No form styling lives here. */

#button-container button {
  @apply mx-1;
}

.basic-button-container {
  @apply flex space-x-2 justify-center;
}

.basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-sm shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-hidden focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
}

.markdown-content ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ul, 
.markdown-content ol {
    list-style-position: outside;
    padding-left: 1em;
}

.markdown-content ul ul, 
.markdown-content ul ol, 
.markdown-content ol ul, 
.markdown-content ol ol {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

@layer utilities {
  .toast-container {
    @apply fixed z-50 flex flex-col items-end bottom-0 right-0 p-4;
  }
}