@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');
@import url('/css/filament/filament/app.css');

:root {
    --slpin-red: #b80f1f;
    --slpin-red-deep: #7f0c19;
    --slpin-red-soft: #df5a67;
    --slpin-black: #0f0f10;
    --slpin-charcoal: #17181d;
    --slpin-app-bg: #f4efed;
    --slpin-app-bg-alt: #fffbf9;
    --slpin-surface: rgba(255, 255, 255, 0.94);
    --slpin-surface-strong: #ffffff;
    --slpin-surface-muted: #f6eeeb;
    --slpin-border: rgba(15, 15, 16, 0.08);
    --slpin-shadow: 0 22px 54px rgba(15, 15, 16, 0.08);
    --slpin-text: #151316;
    --slpin-muted: #655d63;
    --slpin-sidebar-bg:
        linear-gradient(180deg, rgba(184, 15, 31, 0.08), rgba(184, 15, 31, 0) 18rem),
        linear-gradient(180deg, #fffaf8 0%, #f4efed 100%);
    --slpin-sidebar-border: rgba(127, 12, 25, 0.12);
    --slpin-sidebar-text: #1b1518;
    --slpin-sidebar-muted: #5f5258;
    --slpin-sidebar-icon: #473d42;
    --slpin-sidebar-hover: rgba(184, 15, 31, 0.08);
    --slpin-sidebar-active:
        linear-gradient(90deg, rgba(184, 15, 31, 0.15), rgba(184, 15, 31, 0.05));
    --slpin-topbar-bg: rgba(255, 255, 255, 0.84);
    --slpin-topbar-border: rgba(15, 15, 16, 0.08);
}

:root.dark {
    --slpin-app-bg: #0b0b0d;
    --slpin-app-bg-alt: #15171c;
    --slpin-surface: rgba(24, 26, 31, 0.94);
    --slpin-surface-strong: #1a1c21;
    --slpin-surface-muted: rgba(255, 255, 255, 0.04);
    --slpin-border: rgba(255, 255, 255, 0.08);
    --slpin-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
    --slpin-text: #f5f2f1;
    --slpin-muted: #b5adb2;
    --slpin-sidebar-bg:
        linear-gradient(180deg, rgba(184, 15, 31, 0.18), rgba(184, 15, 31, 0) 18rem),
        linear-gradient(180deg, #0f0f10 0%, #17181d 100%);
    --slpin-sidebar-border: rgba(255, 255, 255, 0.08);
    --slpin-sidebar-text: #f6f2f1;
    --slpin-sidebar-muted: #cac2c6;
    --slpin-sidebar-icon: #d8d1d5;
    --slpin-sidebar-hover: rgba(255, 255, 255, 0.06);
    --slpin-sidebar-active:
        linear-gradient(90deg, rgba(184, 15, 31, 0.28), rgba(184, 15, 31, 0.1));
    --slpin-topbar-bg: rgba(14, 15, 18, 0.84);
    --slpin-topbar-border: rgba(255, 255, 255, 0.08);
}

body,
.fi-body {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    color: var(--slpin-text);
}

.fi-logo,
.fi-topbar-heading,
.fi-page-header-heading,
.slpin-auth-brand-name {
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.01em;
}

.fi-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 13rem);
    object-fit: contain;
}

.fi-simple-layout .fi-logo {
    max-width: min(100%, 16rem);
}

body:not(.slpin-auth-body),
.fi-body:not(.slpin-auth-body) {
    background:
        radial-gradient(circle at top right, rgba(184, 15, 31, 0.12), transparent 26rem),
        linear-gradient(180deg, var(--slpin-app-bg-alt) 0%, var(--slpin-app-bg) 100%);
}

:root.dark body:not(.slpin-auth-body),
:root.dark .fi-body:not(.slpin-auth-body) {
    background:
        radial-gradient(circle at top right, rgba(184, 15, 31, 0.18), transparent 26rem),
        radial-gradient(circle at bottom left, rgba(184, 15, 31, 0.1), transparent 30rem),
        linear-gradient(180deg, #09090b 0%, var(--slpin-app-bg-alt) 38%, var(--slpin-app-bg) 100%);
}

.fi-body:not(.slpin-auth-body) .fi-main-ctn {
    background: transparent;
}

.fi-body:not(.slpin-auth-body) .fi-main {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.1vw, 2.5rem);
    padding-block-end: clamp(1.5rem, 2.8vw, 3rem);
    background: transparent;
}

.fi-body:not(.slpin-auth-body) .fi-page-header-main-ctn {
    padding-block: clamp(1.5rem, 2.4vw, 2.35rem);
}

.fi-body:not(.slpin-auth-body) .fi-page-content {
    gap: clamp(1.25rem, 2vw, 2rem);
}

.fi-body:not(.slpin-auth-body) .fi-topbar {
    min-height: 4.5rem;
    background: var(--slpin-topbar-bg);
    border-bottom: 1px solid var(--slpin-topbar-border);
    box-shadow: 0 16px 36px rgba(15, 15, 16, 0.08);
    backdrop-filter: blur(18px);
}

.fi-body:not(.slpin-auth-body) .fi-topbar-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-end: auto;
}

.fi-body:not(.slpin-auth-body) .fi-topbar-start > a,
.fi-body:not(.slpin-auth-body) .fi-topbar-start > span {
    display: inline-flex;
    align-items: center;
}

.fi-body:not(.slpin-auth-body) .fi-topbar-start,
.fi-body:not(.slpin-auth-body) .fi-topbar-end {
    color: var(--slpin-text);
}

.fi-body:not(.slpin-auth-body) .fi-topbar-item-btn > .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-topbar-end .fi-icon {
    color: var(--slpin-muted);
}

.fi-body:not(.slpin-auth-body) .fi-topbar-item-label {
    color: var(--slpin-text);
}

.fi-body:not(.slpin-auth-body) .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-body:not(.slpin-auth-body) .fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: var(--slpin-red);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar {
    background: var(--slpin-sidebar-bg);
    border-inline-end: 1px solid var(--slpin-sidebar-border);
    box-shadow: 18px 0 44px rgba(15, 15, 16, 0.08);
}

:root.dark .fi-body:not(.slpin-auth-body) .fi-sidebar {
    box-shadow: 20px 0 48px rgba(0, 0, 0, 0.28);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-header {
    background: transparent;
    color: var(--slpin-sidebar-text);
}

.fi-body:not(.slpin-auth-body).fi-body-has-topbar .fi-sidebar-header {
    display: flex;
    min-height: 5rem;
    justify-content: flex-start;
    padding-inline: 1.5rem;
    border-bottom: 1px solid var(--slpin-sidebar-border);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-header-logo-ctn {
    display: flex;
    align-items: center;
}

.fi-body:not(.slpin-auth-body) .slpin-sidebar-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.fi-body:not(.slpin-auth-body) .slpin-sidebar-brand {
    color: var(--slpin-sidebar-text);
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-nav {
    color: var(--slpin-sidebar-text);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-group-label {
    color: var(--slpin-sidebar-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item-label,
.fi-body:not(.slpin-auth-body) .fi-sidebar-database-notifications-btn-label {
    color: var(--slpin-sidebar-text);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item-btn > .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-sidebar-group-btn .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-sidebar-group-dropdown-trigger-btn .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-sidebar-database-notifications-btn > .fi-icon {
    color: var(--slpin-sidebar-icon);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.fi-body:not(.slpin-auth-body) .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-body:not(.slpin-auth-body) .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-body:not(.slpin-auth-body) .fi-sidebar-database-notifications-btn:hover,
.fi-body:not(.slpin-auth-body) .fi-sidebar-database-notifications-btn:focus-visible {
    background: var(--slpin-sidebar-hover);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn {
    background: var(--slpin-sidebar-active);
    box-shadow: inset 0 0 0 1px rgba(184, 15, 31, 0.14);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-icon,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--slpin-sidebar-text);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background: var(--slpin-red);
}

.fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part-not-first,
.fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgba(127, 12, 25, 0.18);
}

:root.dark .fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part,
:root.dark .fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part-not-first,
:root.dark .fi-body:not(.slpin-auth-body) .fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgba(255, 255, 255, 0.16);
}

.fi-body:not(.slpin-auth-body) .fi-ta-ctn,
.fi-body:not(.slpin-auth-body) .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-body:not(.slpin-auth-body) .fi-section.fi-aside > .fi-section-content-ctn,
.fi-body:not(.slpin-auth-body) .fi-wi-stats-overview-stat,
.fi-body:not(.slpin-auth-body) .fi-modal-window,
.fi-body:not(.slpin-auth-body) .fi-dropdown-panel,
.fi-body:not(.slpin-auth-body) .slpin-admin-panel {
    background: var(--slpin-surface);
    border: 1px solid var(--slpin-border);
    box-shadow: var(--slpin-shadow);
}

.fi-body:not(.slpin-auth-body) .fi-input-wrp,
.fi-body:not(.slpin-auth-body) .fi-select-input,
.fi-body:not(.slpin-auth-body) .fi-fo-repeater-item,
.fi-body:not(.slpin-auth-body) .fi-fo-builder-item,
.fi-body:not(.slpin-auth-body) .fi-fo-rich-editor-toolbar,
.fi-body:not(.slpin-auth-body) .fi-tabs,
.fi-body:not(.slpin-auth-body) .fi-in-entry-wrp {
    background: var(--slpin-surface-strong);
    border-color: var(--slpin-border);
}

.fi-body:not(.slpin-auth-body) .fi-section.fi-secondary,
.fi-body:not(.slpin-auth-body) .fi-section.fi-secondary > .fi-section-content-ctn,
.fi-body:not(.slpin-auth-body) .fi-ta-reorder-indicator,
.fi-body:not(.slpin-auth-body) .fi-ta-selection-indicator,
.fi-body:not(.slpin-auth-body) .fi-ta-filter-indicators {
    background: var(--slpin-surface-muted);
}

.fi-body:not(.slpin-auth-body) .fi-ta-header,
.fi-body:not(.slpin-auth-body) .fi-ta-header-toolbar,
.fi-body:not(.slpin-auth-body) .fi-ta-filters-above-content-ctn,
.fi-body:not(.slpin-auth-body) .fi-pagination,
.fi-body:not(.slpin-auth-body) .fi-ta-filters.fi-ta-filters-below-content,
.fi-body:not(.slpin-auth-body) .fi-section > .fi-section-content-ctn,
.fi-body:not(.slpin-auth-body) .fi-section > .fi-section-footer,
.fi-body:not(.slpin-auth-body) .fi-modal-header,
.fi-body:not(.slpin-auth-body) .fi-modal-footer {
    border-color: var(--slpin-border);
}

.fi-body:not(.slpin-auth-body) .fi-page-header-heading,
.fi-body:not(.slpin-auth-body) .fi-section-header-heading,
.fi-body:not(.slpin-auth-body) .fi-ta-header-heading,
.fi-body:not(.slpin-auth-body) .fi-modal-heading,
.fi-body:not(.slpin-auth-body) .fi-wi-stats-overview-stat-value,
.fi-body:not(.slpin-auth-body) .slpin-admin-panel-title,
.fi-body:not(.slpin-auth-body) .slpin-admin-metric-value {
    color: var(--slpin-text);
}

.fi-body:not(.slpin-auth-body) .fi-page-header-description,
.fi-body:not(.slpin-auth-body) .fi-section-header-description,
.fi-body:not(.slpin-auth-body) .fi-ta-header-description,
.fi-body:not(.slpin-auth-body) .fi-modal-description,
.fi-body:not(.slpin-auth-body) .fi-wi-stats-overview-stat-label,
.fi-body:not(.slpin-auth-body) .fi-wi-stats-overview-stat-description,
.fi-body:not(.slpin-auth-body) .slpin-admin-panel-description,
.fi-body:not(.slpin-auth-body) .slpin-admin-metric-label,
.fi-body:not(.slpin-auth-body) .slpin-admin-metric-description,
.fi-body:not(.slpin-auth-body) .slpin-admin-table th {
    color: var(--slpin-muted);
}

.fi-body:not(.slpin-auth-body) .fi-btn.fi-color-primary {
    box-shadow: 0 14px 28px rgba(184, 15, 31, 0.18);
}

.slpin-admin-panel {
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.slpin-admin-metric-card {
    display: grid;
    gap: 0.55rem;
}

.slpin-admin-metric-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slpin-admin-metric-value {
    font-size: clamp(2rem, 2.2vw, 2.6rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.slpin-admin-metric-description,
.slpin-admin-panel-description {
    font-size: 0.95rem;
    line-height: 1.7;
}

.slpin-admin-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.slpin-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.slpin-admin-table th,
.slpin-admin-table td {
    text-align: left;
}

.slpin-admin-table thead tr {
    border-bottom: 1px solid var(--slpin-border);
}

.slpin-admin-table tbody tr {
    border-top: 1px solid var(--slpin-border);
}

.slpin-admin-table th {
    padding: 0 1.5rem 0.9rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slpin-admin-table td {
    padding: 1rem 1.5rem 1rem 0;
    color: var(--slpin-text);
}

.slpin-admin-table th:last-child,
.slpin-admin-table td:last-child {
    padding-right: 0;
}

.slpin-admin-empty-row td {
    color: var(--slpin-muted);
}

body.slpin-auth-body,
body.slpin-auth-body.fi-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(184, 15, 31, 0.28), transparent 28rem),
        radial-gradient(circle at bottom right, rgba(184, 15, 31, 0.18), transparent 30rem),
        linear-gradient(120deg, #0b0b0d 0%, #16161a 47%, #f5f1f0 47.1%, #faf7f6 100%);
}

.slpin-auth-body .fi-simple-layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
}

.slpin-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.slpin-auth-topbar,
.slpin-auth-footer {
    width: 100%;
}

.slpin-auth-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)),
        linear-gradient(90deg, rgba(184, 15, 31, 0.08), rgba(255, 255, 255, 0));
    box-shadow: 0 16px 40px rgba(15, 15, 16, 0.08);
    backdrop-filter: blur(18px);
}

.slpin-auth-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(14, 14, 16, 0.96), rgba(10, 10, 12, 0.98));
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
}

.slpin-auth-topbar-inner,
.slpin-auth-footer-inner,
.slpin-auth-stage-inner {
    width: 100%;
    padding-inline: clamp(1rem, 3.8vw, 4rem);
}

.slpin-auth-topbar-inner,
.slpin-auth-footer-inner {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.slpin-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #111113;
    text-decoration: none;
}

.slpin-auth-brand img {
    display: block;
    width: min(12rem, 34vw);
    height: auto;
}

.slpin-auth-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.slpin-auth-brand-kicker {
    color: #b80f1f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.slpin-auth-brand-name {
    font-size: 1rem;
    font-weight: 700;
}

.slpin-auth-topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #4e4951;
    font-size: 0.92rem;
    font-weight: 500;
}

.slpin-auth-topbar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #b80f1f, #7f0c19);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slpin-auth-stage {
    flex: 1;
    width: 100%;
    padding-block: clamp(1.4rem, 3vw, 2.75rem);
}

.slpin-auth-stage-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.slpin-auth-form-column {
    display: flex;
    align-items: stretch;
    width: min(100%, 42rem);
}

.slpin-auth-body .fi-simple-main-ctn {
    display: block;
    width: 100%;
}

.slpin-auth-body .fi-simple-main {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.slpin-auth-body .fi-simple-page {
    height: 100%;
}

.slpin-auth-body .fi-simple-page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 2.2rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(15, 15, 16, 0.08);
    box-shadow:
        0 30px 80px rgba(15, 15, 16, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.slpin-auth-body .fi-simple-header {
    margin-bottom: 1.5rem;
}

.slpin-auth-body .fi-simple-header-heading {
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #101012;
}

.slpin-auth-body .fi-simple-header-subheading {
    margin-top: 0.7rem;
    max-width: 34rem;
    color: #5f5a61;
    font-size: 1rem;
    line-height: 1.7;
}

.slpin-auth-body .fi-fo-field-wrp,
.slpin-auth-body .fi-input-wrp,
.slpin-auth-body .fi-select-input,
.slpin-auth-body .fi-input,
.slpin-auth-body .fi-btn.fi-color-primary {
    border-radius: 1rem;
}

.slpin-auth-body .fi-btn.fi-color-primary {
    box-shadow: 0 14px 28px rgba(184, 15, 31, 0.2);
}

@media (max-width: 960px) {
    .slpin-auth-form-column {
        width: min(100%, 40rem);
    }
}

@media (max-width: 768px) {
    .fi-body:not(.slpin-auth-body) .fi-main {
        padding-inline: 1rem;
    }

    .fi-body:not(.slpin-auth-body) .fi-topbar-start {
        gap: 0.5rem;
    }

    .fi-body:not(.slpin-auth-body) .fi-topbar-start .fi-logo {
        max-width: min(100%, 10.5rem);
    }
}

@media (max-width: 720px) {
    .slpin-auth-topbar-inner,
    .slpin-auth-footer-inner,
    .slpin-auth-stage-inner,
    .slpin-auth-body .fi-simple-page-content {
        padding: 1.25rem;
    }

    .slpin-auth-topbar-inner,
    .slpin-auth-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
    }

    .slpin-auth-topbar-meta {
        flex-wrap: wrap;
    }

    .slpin-auth-brand {
        flex-direction: column;
        align-items: flex-start;
    }
}