/*
===============================================================================
Project   : gratulo
Module    : frontend/static/css/style.css
Created   : 2025-10-05
Author    : Florian
Purpose   : Provide the basic styles for the UI, i.e. button definition

@docstyle: google
@language: english
@voice: imperative
===============================================================================
*/



body {
    font-family: sans-serif;
}
header {
    border-bottom: 1px solid #ccc;
}
a.button {
    padding: 0.5rem 1rem;
    background: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

/* --- Einheitliche Buttons (global gültig) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem; /* entspricht Tailwind px-3 py-1.5 */
    font-size: 0.75rem;        /* text-xs */
    font-weight: 500;          /* font-medium */
    border-radius: 0.375rem;   /* rounded */
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

/* Farbvarianten */
.btn-blue {
    background-color: #2563eb; /* Tailwind blue-600 */
}
.btn-blue:hover {
    background-color: #1d4ed8;
}

.btn-red {
    background-color: #dc2626; /* red-600 */
}
.btn-red:hover {
    background-color: #b91c1c;
}

.btn-green {
    background-color: #16a34a; /* green-600 */
}
.btn-green:hover {
    background-color: #15803d;
}

.btn-yellow {
    background-color: #eab308; /* yellow-500 */
    color: #222; /* etwas dunklerer Text für bessere Lesbarkeit */
}
.btn-yellow:hover {
    background-color: #ca8a04;
}

.btn-gray {
    background-color: #4b5563; /* gray-600 */
}
.btn-gray:hover {
    background-color: #374151;
}

.btn-teal {
    background-color: #0d9488; /* teal-600 */
}
.btn-teal:hover {
    background-color: #0f766e;
}

.btn-black {
    background-color: #111827; /* Tailwind gray-900 */
}
.btn-black:hover {
    background-color: #000000;
}
.btn-black:focus {
    outline: 2px solid #fff;
    outline-offset: 1px;
}
/* Fokuszustand (Accessibility) */
.btn:focus {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Hide members and groups lists when import preview is active */
#import-area:not(:empty) ~ .members-groups-container {
    display: none !important;
}

/* HTMX indicator (spinner) - hidden by default */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Performance optimizations for table scrolling */
#import-form table {
    transform: translateZ(0);
}

#import-form tbody tr {
    contain: layout style paint;
}

#import-form input,
#import-form select {
    will-change: contents;
}

/* Reduce repaints during scroll */
#import-form tbody {
    will-change: transform;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;       /* halbiertes gap */
    padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;   /* font-semibold */
    border-radius: 0.25rem;
}

.badge svg {
    width: 12px;        /* w-3.5 */
    height: 12px;       /* h-3.5 */
}

.badge-red {
    background: #fee2e2;   /* bg-red-100 */
    color: #991b1b;        /* text-red-800 */
    border: 1px solid #fecaca;
}

.badge-yellow {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}