/* ============================================================
   KanzleiDesk — app.css
   Eigene Komponenten-Klassen (ehemals <style type="text/tailwindcss">
   in base.html). Echte CSS-Datei, geladen NACH dem Tailwind
   Play-CDN → gewinnt die Kaskade gegen CDN-generierte Utilities.

   WICHTIG: @apply funktioniert NICHT in einer externen .css-Datei
   (das Play-CDN kompiliert nur <style type="text/tailwindcss">-
   Blöcke im HTML). Die Regeln sind daher von Tailwind-Utilities in
   fertige CSS-Properties übersetzt — exakt dieselbe Wirkung,
   inkl. aller dark:-Varianten und hover-Stile (UI-Fix R7, Option A).

   OPTION A: .input OHNE width — die Breite bestimmt die
   Utility-Klasse am Element (w-full = volle Breite,
   w-[150px]/w-[200px]/w-52/w-64 = kompakt). Vorher überschrieb
   '@apply w-full' in .input alle w-[...]-Klassen (Selects
   'Alle Status'/'Alle Risiken' blieben riesig — User-Feedback).
   ============================================================ */

body {
    font-family: 'Inter', sans-serif;
}

/* --- Card ---------------------------------------------------- */
.card {
    background-color: #ffffff;
    border-radius: 0.75rem;                 /* rounded-xl */
    border: 1px solid #d1d5db;              /* border border-gray-300 */
}
.dark .card {
    background-color: #1f2937;              /* dark:bg-gray-800 */
    border-color: #374151;                  /* dark:border-gray-700 */
}

/* --- Button primär ------------------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                            /* gap-2 */
    background-color: #4f46e5;              /* bg-brand-600 */
    color: #ffffff;
    font-size: 0.875rem;                    /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;                       /* font-medium */
    padding: 0.5rem 1rem;                   /* px-4 py-2 */
    border-radius: 0.5rem;                  /* rounded-lg */
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow,
        transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-primary:hover {
    background-color: #4338ca;              /* hover:bg-brand-700 */
}
.dark .btn-primary {
    background-color: #4f46e5;              /* dark:bg-brand-600 */
}
.dark .btn-primary:hover {
    background-color: #6366f1;              /* dark:hover:bg-brand-500 */
}

/* --- Button sekundär ------------------------------------------ */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                            /* gap-2 */
    background-color: #ffffff;              /* bg-white */
    color: #374151;                         /* text-gray-700 */
    font-size: 0.875rem;                    /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;                       /* font-medium */
    padding: 0.5rem 1rem;                   /* px-4 py-2 */
    border-radius: 0.5rem;                  /* rounded-lg */
    border: 1px solid #d1d5db;              /* border border-gray-300 */
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow,
        transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-secondary:hover {
    background-color: #f9fafb;              /* hover:bg-gray-50 */
}
.dark .btn-secondary {
    background-color: #374151;              /* dark:bg-gray-700 */
    color: #e5e7eb;                         /* dark:text-gray-200 */
    border-color: #4b5563;                  /* dark:border-gray-600 */
}
.dark .btn-secondary:hover {
    background-color: #4b5563;              /* dark:hover:bg-gray-600 */
}

/* --- Badge ---------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;             /* px-2.5 py-0.5 */
    border-radius: 9999px;                  /* rounded-full */
    font-size: 0.75rem;                     /* text-xs */
    line-height: 1rem;
    font-weight: 500;                       /* font-medium */
}

/* --- Input / Select / Textarea -------------------------------- */
/* OHNE width (Option A): Breite bestimmt die Utility-Klasse am Element. */
.input {
    border-radius: 0.5rem;                  /* rounded-lg */
    border: 1px solid #d1d5db;              /* border border-gray-300 */
    padding: 0.5rem 0.75rem;                /* px-3 py-2 */
    font-size: 0.875rem;                    /* text-sm */
    line-height: 1.25rem;
}
.input:focus {
    outline: 2px solid transparent;         /* focus:outline-none */
    outline-offset: 2px;
    border-color: #6366f1;                  /* focus:border-brand-500 */
    box-shadow: 0 0 0 2px #6366f1;          /* focus:ring-2 focus:ring-brand-500 */
}
.dark .input {
    background-color: #111827;              /* dark:bg-gray-900 */
    border-color: #4b5563;                  /* dark:border-gray-600 */
    color: #f3f4f6;                         /* dark:text-gray-100 */
}
.dark .input:focus {
    border-color: #818cf8;                  /* dark:focus:border-brand-400 */
    box-shadow: 0 0 0 2px #818cf8;          /* dark:focus:ring-brand-400 */
}

/* --- Label ---------------------------------------------------- */
.label {
    display: block;
    font-size: 0.875rem;                    /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;                       /* font-medium */
    color: #374151;                         /* text-gray-700 */
    margin-bottom: 0.25rem;                 /* mb-1 */
}
.dark .label {
    color: #d1d5db;                         /* dark:text-gray-300 */
}

/* --- Checkbox ------------------------------------------------- */
.checkbox {
    width: 1.25rem;                         /* w-5 */
    height: 1.25rem;                        /* h-5 */
    border-radius: 0.25rem;                 /* rounded */
    border-color: #d1d5db;                  /* border-gray-300 */
    color: #4f46e5;                         /* text-brand-600 */
    cursor: pointer;
}
.dark .checkbox {
    border-color: #4b5563;                  /* dark:border-gray-600 */
    color: #818cf8;                         /* dark:text-brand-400 */
}
/* focus:ring-brand-500 war im Original wirkungslos (Ring-Farbe ohne
   ring-2-Breite) → bewusst nicht übernommen, kein sichtbarer Effekt. */

/* --- Checkbox-Label ------------------------------------------- */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;                          /* gap-2.5 */
    font-size: 0.875rem;                    /* text-sm */
    line-height: 1.25rem;
    color: #374151;                         /* text-gray-700 */
    cursor: pointer;
    user-select: none;
    padding-top: 0.5rem;                    /* py-2 */
    padding-bottom: 0.5rem;
}
.dark .checkbox-label {
    color: #d1d5db;                         /* dark:text-gray-300 */
}

/* --- Höhenregel (aus base.html Plain-Style-Block, Fix R3) ------ */
/* Selects GARANTIERT 40px: explizite height + box-sizing.
   !important ist hier NICHT mehr nötig: app.css ist echte CSS-Datei
   nach dem CDN → .input (0-1-0) schlägt Preflight/UA (0-0-1),
   nichts überschreibt height (verifiziert per getComputedStyle). */
select.input {
    height: 40px;
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
}
input.input,
textarea.input {
    min-height: 40px;
}