@import url('/css/filament/filament/app.css');

:root {
    --t-bg: #06080f;
    --t-bg-soft: #0a0f1a;
    --t-panel: #0c121c;
    --t-border: #1a273d;
    --t-text: #cfd8e3;
    --t-text-dim: #8ea0b8;
    --t-accent: #ff8a1f;
    --t-accent-soft: #ff8a1f22;
    --t-accent-2: #ffb74d;
}

.fi-body {
    background:
        radial-gradient(1200px 600px at 10% -10%, #16263f66, transparent 55%),
        radial-gradient(900px 500px at 95% 0%, #5a2f0c66, transparent 60%),
        linear-gradient(180deg, var(--t-bg-soft) 0%, var(--t-bg) 60%, #05070c 100%);
    color: var(--t-text);
    font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;
}

.fi-sidebar,
.fi-topbar,
.fi-main,
.fi-dropdown-panel,
.fi-modal-window,
.fi-section,
.fi-ta,
.fi-in,
.fi-fo,
.fi-wi,
.fi-simple-main {
    background-color: color-mix(in srgb, var(--t-panel) 92%, #000 8%) !important;
    border-color: var(--t-border) !important;
}

.fi-sidebar,
.fi-topbar,
.fi-section,
.fi-ta,
.fi-in,
.fi-fo,
.fi-wi,
.fi-simple-main,
.fi-dropdown-panel,
.fi-modal-window {
    box-shadow: 0 0 0 1px #182337, 0 16px 42px #0000004d;
}

.fi-topbar {
    backdrop-filter: blur(8px);
    background-color: #080d16cc !important;
}

.fi-sidebar-nav-item-button,
.fi-sidebar-group-button,
.fi-topbar-item-btn,
.fi-btn,
.fi-icon-btn,
.fi-link,
.fi-breadcrumbs-item-label,
.fi-tabs-item-btn {
    transition: all 180ms ease;
}

.fi-sidebar-nav-item-button:hover,
.fi-sidebar-group-button:hover,
.fi-topbar-item-btn:hover,
.fi-tabs-item-btn:hover,
.fi-link:hover {
    color: var(--t-accent-2) !important;
}

.fi-sidebar-item-active .fi-sidebar-nav-item-button,
.fi-tabs-item.fi-active .fi-tabs-item-btn,
.fi-btn-color-primary,
.fi-icon-btn-color-primary {
    background-color: var(--t-accent-soft) !important;
    border-color: color-mix(in srgb, var(--t-accent) 45%, var(--t-border)) !important;
    color: var(--t-accent-2) !important;
}

.fi-btn-color-primary:hover,
.fi-icon-btn-color-primary:hover {
    background-color: #ff8a1f33 !important;
}

.fi-input,
.fi-select-input,
.fi-textarea,
.fi-fo-date-time-picker-input,
.fi-input-wrp,
.fi-fo-file-upload,
.fi-fo-checkbox-list,
.fi-fo-field-wrp {
    background-color: #0a101a !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus,
.fi-fo-date-time-picker-input:focus,
.fi-input-wrp:focus-within,
.fi-fo-field-wrp:focus-within {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 1px #ff8a1f66, 0 0 0 4px #ff8a1f1a !important;
}

.fi-ta-header-cell,
.fi-ta-cell,
.fi-in-entry {
    border-color: #172338 !important;
}

.fi-ta-header-cell {
    color: var(--t-text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.fi-ta-row:nth-child(odd) {
    background-color: #0a1019;
}

.fi-ta-row:nth-child(even) {
    background-color: #080d15;
}

.fi-ta-row:hover {
    background-color: #0d1626 !important;
}

.fi-badge {
    background-color: #0f1a2b !important;
    border: 1px solid #1c2b44;
    color: #a7b8cd !important;
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-warning {
    background-color: #231608 !important;
    border-color: #4d2f12 !important;
    color: var(--t-accent-2) !important;
}

.fi-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-page-sub-navigation-sidebar-item-label {
    color: #f4f7fb !important;
    letter-spacing: 0.04em;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-fo-field-wrp-helper-text,
.fi-ta-header-description,
.fi-sidebar-nav-item-button-label {
    color: var(--t-text-dim) !important;
}

.fi-dropdown-list-item,
.fi-user-menu-trigger,
.fi-theme-switcher-btn {
    color: var(--t-text);
}

.fi-dropdown-list-item:hover,
.fi-user-menu-trigger:hover,
.fi-theme-switcher-btn:hover {
    background-color: #101b2c !important;
    color: var(--t-accent-2);
}

.fi-topbar > nav,
.fi-sidebar > nav,
.fi-main-ctn {
    border-color: var(--t-border) !important;
}

.fi-simple-layout {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
}

.fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), #142033 100%),
        linear-gradient(0deg, transparent 0, transparent calc(100% - 1px), #142033 100%);
    background-size: 28px 28px;
    opacity: 0.22;
}

.fi-simple-main {
    position: relative;
    border: 1px solid #223553 !important;
    box-shadow: 0 0 0 1px #0b1320, 0 24px 90px #00000080 !important;
}

.fi-simple-main::before {
    content: 'root@developer-portal:~$ ssh main-panel';
    display: block;
    padding: 0.8rem 1.15rem;
    border-bottom: 1px solid #253754;
    color: #92a5bf;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #0d1522, #0b111b);
}

.fi-simple-page-content {
    padding-top: 1rem;
}

.fi-simple-header-heading {
    font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fi-simple-header-subheading {
    color: #8ca0ba !important;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.fi-simple-page .fi-fo-field-wrp-label {
    color: #8ea4bf !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

.fi-simple-page .fi-input,
.fi-simple-page .fi-input-wrp {
    border-radius: 0.15rem !important;
    font-size: 0.83rem;
}

.fi-simple-page .fi-input::placeholder {
    color: #5f7592;
}

.fi-simple-page .fi-btn-color-primary {
    border-radius: 0.2rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-simple-page .fi-link {
    text-decoration: none;
    border-bottom: 1px dashed #43648b;
}

.fi-simple-page .fi-link:hover {
    border-bottom-color: var(--t-accent-2);
}

@media (max-width: 768px) {
    .fi-topbar {
        background-color: #080d16f2 !important;
    }

    .fi-sidebar {
        background-color: #070b12f7 !important;
    }

    .fi-simple-main::before {
        font-size: 0.62rem;
        padding: 0.7rem 0.85rem;
    }
}