/*
 * Pontico Design System — Filament-Theme-Overrides
 *
 * Quelle: "Pontico Design System" (tokens/colors.css, typography.css, effects.css).
 * Die Farbpaletten (primary/gray) werden im PanelProvider gesetzt; diese Datei
 * ergänzt Typografie, Form (Pill-Buttons, weiche Radien) und Whisper-Shadows.
 */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/pontico/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/pontico/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Pontico-Tokens */
    --pontico-forest: #081B15;
    --pontico-mint: #BBFFE2;
    --pontico-mint-soft: #A9EBD0;
    --pontico-grey-soft: #F4F4F4;
    --pontico-radius-card: 24px;
    --pontico-radius-input: 16px;
    --pontico-radius-pill: 999px;
    --pontico-shadow-card: 0 8px 30px rgba(100, 100, 100, 0.10), 0 1px 2px rgba(67, 67, 67, 0.06);
    --pontico-shadow-sm: 0 2px 8px rgba(100, 100, 100, 0.043);
    --pontico-gradient-brand: linear-gradient(135deg, #081B15 0%, #BBFFE2 100%);
    --pontico-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Buttons: Pill-Form, SemiBold ------------------------------------- */

.fi-btn {
    border-radius: var(--pontico-radius-pill);
    font-weight: 600;
    transition: transform var(--pontico-ease) 140ms, background-color 140ms ease;
}

.fi-btn:active {
    transform: scale(0.97);
}

/* ---- Badges & Tags ------------------------------------------------------ */

.fi-badge {
    border-radius: var(--pontico-radius-pill);
}

/* ---- Karten & Sektionen: weiche Radien, Whisper-Shadow ------------------ */

.fi-section {
    border-radius: var(--pontico-radius-card);
    box-shadow: var(--pontico-shadow-card);
}

.dark .fi-section {
    box-shadow: none;
}

/* Repeater-Zeilen: helle Grauflächen ohne harte Border (wie Cockpit-Listen) */
.fi-fo-repeater-item {
    border-radius: var(--pontico-radius-input);
    background: var(--pontico-grey-soft);
    box-shadow: none;
    border: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal-window {
    border-radius: var(--pontico-radius-card);
}

.fi-dropdown-panel {
    border-radius: var(--pontico-radius-input);
    box-shadow: var(--pontico-shadow-card);
}

/* ---- Formularfelder: graue Füllflächen ohne harte Border (Cockpit-Stil) -- */

.fi-input-wrp {
    border-radius: var(--pontico-radius-input);
    background: var(--pontico-grey-soft);
    border: 1px solid #E2E0D8;
    box-shadow: none;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.fi-input-wrp:focus-within {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #1A2823, 0 0 0 3px rgba(26, 40, 35, 0.08);
}

/* Innerhalb grauer Repeater-Zeilen: weiße Felder für Kontrast */
.fi-fo-repeater-item .fi-input-wrp {
    background: #FFFFFF;
    box-shadow: var(--pontico-shadow-sm);
}

.fi-fo-repeater-item .fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px #1A2823, 0 0 0 3px rgba(26, 40, 35, 0.08);
}

/* ---- App-Chrome: dunkle Forest-Sidebar, helle Content-Shell -------------- */

.fi-body {
    background:
        radial-gradient(90rem 60rem at -10% -10%, #29483B 0%, #0E241C 45%, #081B15 100%)
        #081B15;
}

.fi-sidebar,
.fi-sidebar-header {
    background: transparent !important;
    box-shadow: none;
    border: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-sidebar-header .fi-logo,
.fi-topbar .fi-logo {
    color: #FFFFFF;
    overflow: visible;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fi-sidebar-item-btn {
    border-radius: 0.875rem;
}

.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

.fi-sidebar-item .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.fi-sidebar-item .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.6);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #FFFFFF;
}

/* Helle Content-Shell mit großem Radius gegen die dunkle Fläche */
.fi-main-ctn {
    background: var(--pontico-grey-soft);
    border-radius: 40px 0 0 40px;
    overflow: clip;
}

.fi-topbar {
    background: transparent !important;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fi-avatar {
    border-radius: var(--pontico-radius-pill);
}

@media (max-width: 1024px) {
    .fi-main-ctn {
        border-radius: 0;
    }
}

/* ---- Benachrichtigungen -------------------------------------------------- */

.fi-no-notification {
    border-radius: var(--pontico-radius-input);
    box-shadow: var(--pontico-shadow-card);
}