/*
 * Zuzana-tema til Filament-admin. Statisk CSS (intet build-step), indlæst via render hook.
 * Bygger på zuzana.ai / app.zuzana.ai: Geist, pink (#ffb8df / #fd98d0), matglas-kort,
 * runde knapper med pink gradient. Filaments egen CSS ligger i @layer, så disse
 * regler (uden layer) vinder uden !important.
 */

:root {
    --zz-pink-bg: #ffb8df;
    --zz-accent: #fd98d0;
    --zz-pink-400: #f472b6;
    --zz-pink-500: #ec4899;
    --zz-pink-600: #db2777;
    --zz-ink: #111827;
    --zz-muted: #4b5563;
}

body {
    color: #030712;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Brand ---------- */

.zz-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.zz-brand-logo {
    height: 1.15rem;
    width: auto;
}

.zz-brand-product {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--zz-muted);
    letter-spacing: 0.01em;
}

/* ---------- Login (simple layout) ---------- */

.fi-simple-layout {
    background-color: var(--zz-pink-bg);
    background-image:
        radial-gradient(at 15% 15%, #ffe3f1 0, transparent 45%),
        radial-gradient(at 85% 10%, var(--zz-accent) 0, transparent 40%),
        radial-gradient(at 75% 85%, #fff1f8 0, transparent 45%),
        radial-gradient(at 10% 90%, #f9a8d4 0, transparent 45%);
    background-attachment: fixed;
}

.fi-simple-main {
    background: rgb(255 255 255 / 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(255 255 255 / 0.5);
    padding: 3rem 3rem;
}

@media (min-width: 640px) {
    .fi-simple-main {
        padding: 4rem;
    }
}

.fi-simple-header-heading {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--zz-ink);
}

.fi-simple-header-subheading {
    color: var(--zz-muted);
}

.fi-simple-main .fi-fo-field-label {
    font-weight: 600;
    color: var(--zz-ink);
}

.fi-simple-main .fi-input-wrp {
    background: rgb(255 255 255 / 0.7);
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8);
}

.fi-simple-main .fi-input-wrp:focus-within {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--zz-pink-500);
}

.fi-simple-main .fi-input {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* ---------- Knapper ---------- */

.fi-btn.fi-color-primary {
    background-image: linear-gradient(to right, var(--zz-pink-400), var(--zz-pink-500));
    color: #fff;
    border-radius: 9999px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: all 150ms ease;
}

.fi-btn.fi-color-primary:hover {
    background-image: linear-gradient(to right, var(--zz-pink-500), var(--zz-pink-600));
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

.fi-btn.fi-color-primary .fi-icon,
.fi-btn.fi-color-primary svg {
    color: #fff;
}

.fi-simple-main .fi-btn.fi-color-primary {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* Alle knapper er runde som i Zuzana-appen. */
.fi-btn {
    border-radius: 9999px;
    font-weight: 600;
}

/* Sekundære knapper (color gray): hvide med tynd kant – som "glas"-knapperne på zuzana.ai. */
.fi-btn.fi-color-gray {
    background: #fff;
    color: var(--zz-ink);
    box-shadow: inset 0 0 0 1px #e5e7eb, 0 1px 2px rgb(0 0 0 / 0.04);
}

.fi-btn.fi-color-gray:hover {
    background: #fdf2f8;
    box-shadow: inset 0 0 0 1px #fbcfe8, 0 1px 2px rgb(0 0 0 / 0.04);
}

.fi-btn.fi-color-gray .fi-icon {
    color: #6b7280;
}

/* Ikonknapper i tabeller. */
.fi-icon-btn {
    border-radius: 9999px;
}

.fi-icon-btn.fi-color-primary {
    color: var(--zz-pink-500);
}

.fi-icon-btn.fi-color-primary:hover {
    background: #fdf2f8;
}

/* ---------- Panel ---------- */

.fi-body,
.fi-layout {
    background: #faf9fa;
}

.fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--zz-ink);
}

.fi-header-subheading {
    color: #6b7280;
}

.fi-sidebar,
.fi-topbar nav,
.fi-topbar {
    background: #fff;
}

.fi-sidebar {
    box-shadow: inset -1px 0 0 #f1f1f3;
}

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

.fi-sidebar-item-btn:hover {
    background: #fdf2f8;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: #fce7f3;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #be185d;
    font-weight: 600;
}

/* Kort: sektioner, tabeller og faner får samme look som lead-siden. */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), inset 0 0 0 1px rgb(17 24 39 / 0.06);
    border: 0;
}

.fi-section-header-heading {
    font-weight: 700;
    color: var(--zz-ink);
}

.fi-ta-header-cell-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: #9ca3af;
    font-weight: 600;
}

.fi-ta-row:hover {
    background: #fdf8fb;
}

/* Faner: hvid "pille"-bar med pink aktiv fane. */
.fi-tabs {
    border-radius: 9999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(17 24 39 / 0.06);
    padding: 0.3rem;
}

.fi-tabs-item {
    border-radius: 9999px;
}

.fi-tabs-item.fi-active {
    background: #fce7f3;
    color: #be185d;
}

.fi-tabs-item.fi-active .fi-icon,
.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #be185d;
}

/* Badges lidt blødere. */
.fi-badge {
    border-radius: 9999px;
}

/* Faner på leadet (uden ydre boks): ren navigationslinje med pink understregning på den aktive fane.
   Fanerne på lead-listen beholder pille-stilen ovenfor. */
.fi-sc-tabs:not(.fi-contained) > .fi-tabs {
    margin: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    gap: 0.25rem;
    /* Linjen tegnes indeni (ingen ekstra højde), og baren må kun rulle vandret – ellers kommer en lodret scrollbar. */
    box-shadow: inset 0 -1px 0 rgb(17 24 39 / 0.08);
    overflow-y: hidden;
}

.fi-sc-tabs:not(.fi-contained) > .fi-tabs .fi-tabs-item {
    border-radius: 0;
    padding: 0.75rem 0.85rem;
    background: transparent;
}

.fi-sc-tabs:not(.fi-contained) > .fi-tabs .fi-tabs-item:hover {
    background: transparent;
    box-shadow: inset 0 -2px 0 rgb(17 24 39 / 0.15);
}

.fi-sc-tabs:not(.fi-contained) > .fi-tabs .fi-tabs-item.fi-active {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--zz-pink-500);
}

/* Laptop: alle faner skal kunne ses uden vandret rulning – mindre luft, ikonerne skjules, og
   fanerne må bryde over på en ekstra linje, hvis de stadig ikke kan være der. */
@media (max-width: 1600px) {
    .fi-sc-tabs:not(.fi-contained) > .fi-tabs { flex-wrap: wrap; overflow-x: visible; }
    .fi-sc-tabs:not(.fi-contained) > .fi-tabs .fi-tabs-item { padding: 0.65rem 0.6rem; }
    .fi-sc-tabs:not(.fi-contained) > .fi-tabs .fi-tabs-item > .fi-icon { display: none; }
}

.fi-sc-tabs:not(.fi-contained) > .fi-sc-tabs-tab.fi-active {
    margin-top: 1.25rem;
}