@import "tailwindcss"; @variant dark (&:where(.dark, .dark *)); /* ── Dark mode via data attribute ────────────────────────────────────────── */ /* Tailwind dark: variant triggered by .dark on */ /* ── Font size variants ──────────────────────────────────────────────────── */ html.text-lg { font-size: 1.125rem; } html.text-xl { font-size: 1.25rem; } html.text-base { font-size: 1rem; } /* ── Cursor: pointer on interactive elements (Tailwind v4 removed this from Preflight) ── */ button, [role="button"], a, label[for], summary, input[type="submit"], input[type="button"], input[type="reset"] { cursor: pointer !important; } /* ── Tablet touch targets ────────────────────────────────────────────────── */ /* button/input already center their label vertically, so min-height is safe there. Links and role="button" elements have no such centering, so growing their box pushes the text to the top; instead give them an invisible centered hit-area via ::after that doesn't affect their visual size or text alignment. */ @media (pointer: coarse) { button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] { min-height: 44px; } a, [role="button"] { position: relative; } a::after, [role="button"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } } /* ── Nav link active state ───────────────────────────────────────────────── */ .nav-link-active { @apply bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 font-medium; } /* ── Table shared styles ─────────────────────────────────────────────────── */ .data-table th { @apply px-3 py-2 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-700; } .data-table td { @apply px-3 py-2 text-sm text-gray-900 dark:text-gray-100; } .data-table tr:nth-child(even) { @apply bg-gray-50 dark:bg-gray-800/50; } .data-table tr:hover { @apply bg-green-50 dark:bg-green-900/20; } /* ── Form inputs ─────────────────────────────────────────────────────────── */ .form-input { @apply w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent text-base; } .form-label { @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn-primary { @apply px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors focus:ring-2 focus:ring-green-500 focus:ring-offset-2; } .btn-secondary { @apply px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium rounded-lg transition-colors; } .btn-danger { @apply px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors; } /* ── Card ────────────────────────────────────────────────────────────────── */ .card { @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-4; } /* ── Badge ───────────────────────────────────────────────────────────────── */ .badge { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium; } .badge-green { @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200; } .badge-yellow { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200; } .badge-red { @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200; } .badge-gray { @apply bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300; } /* ── Alternating table rows (row-alt) ───────────────────────────────────── */ .row-alt { background: var(--row-alt-light, rgba(0,0,0,0.04)); } .dark .row-alt { background: var(--row-alt-dark, rgba(255,255,255,0.07)); } /* ── Richtext content (html_editor output, used in impressum, public page descriptions etc.) ── */ .richtext-content p { @apply mb-3 leading-relaxed text-gray-700 dark:text-gray-300; } .richtext-content h1 { @apply text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 mt-5; } .richtext-content h2 { @apply text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 mt-4; } .richtext-content h3 { @apply text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2 mt-4; } .richtext-content ul { @apply list-disc pl-5 mb-3 space-y-1; } .richtext-content ol { @apply list-decimal pl-5 mb-3 space-y-1; } .richtext-content li { @apply text-gray-700 dark:text-gray-300; } .richtext-content strong { @apply font-semibold text-gray-900 dark:text-gray-100; } .richtext-content em { @apply italic; } .richtext-content a { @apply text-green-600 hover:underline; } /* ── Page help panel (Seitenhilfe) markdown content ─────────────────────── */ .page-help-content h1 { @apply text-sm font-bold text-gray-800 dark:text-gray-100 mb-1; } .page-help-content h2 { @apply text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mt-4 mb-2; } .page-help-content p { @apply text-gray-600 dark:text-gray-300 mb-2 leading-snug; } .page-help-content ul { @apply mt-1 mb-3 pl-4 space-y-1.5; } .page-help-content li { @apply text-gray-600 dark:text-gray-300 list-disc leading-snug; } .page-help-content strong { @apply font-semibold text-gray-800 dark:text-gray-100; } /* ── Future account separator ────────────────────────────────────────────── */ .account-future-sep td { padding: 0 !important; border-top: 2px solid #9ca3af; } .dark .account-future-sep td { border-top-color: #6b7280; }