/* DMARC-Analyse — Custom Styles
 * Ergänzt Tailwind. Hier nur was Tailwind-Utilities nicht abdecken.
 */

:root {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
}

[x-cloak] { display: none !important; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; background-clip: padding-box; border: 2px solid transparent; }

/* Status-Pulse für aktive Indikatoren */
.status-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
}
.status-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.3;
    animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes status-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.4); opacity: 0; }
}

/* Sidebar-Link Übergang */
.sidebar-link { transition: background-color 0.15s ease, color 0.15s ease; }

/* Toast Animationen */
.toast-enter { animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.toast-leave { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-8px); opacity: 0; }
}

/* Card Hover */
.card-hover { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.card-hover:hover { border-color: #d4d4d8; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); }

/* Tabellen-Zeilen */
.row-link { transition: background-color 0.1s ease; }
.row-link:hover { background-color: #f9fafb; }

/* Button-Pulse beim Klick deaktivieren (a11y-freundlicher Focus) */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Code-Blöcke */
.code-block {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Section Spacing */
.page-section + .page-section { margin-top: 2rem; }