.fi-simple-layout {
background-image: url('/images/login-bg-1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Vertical divider between the sidebar and the white content area. That single
line is enough to separate the two regions; the sidebar otherwise keeps
Filament's default surface and nav states. */
.fi-sidebar {
border-inline-end: 1px solid var(--gray-200, oklch(0.928 0.006 264.531));
}
:where(.dark) .fi-sidebar {
border-inline-end-color: oklch(0.31 0.02 264.4);
}
/*
* Support / "Need help?" link pinned to the sidebar footer (SIDEBAR_FOOTER
* render hook). Lives in the chrome rather than the dashboard body so it is
* available on every page and never competes with primary content. Styled to
* read as a quiet nav-adjacent utility: a top hairline separates it from the
* navigation, and it inherits the panel's gutter/typography tokens so it sits
* natively alongside the menu items.
*/
/* Full-width hairline separating the support link from the navigation above.
Rendered as its own element (not the link's border) so it spans the whole
sidebar width with square ends, instead of tracing the link's rounded box. */
.fi-support-divider {
height: 1px;
margin: 0 0 0.5rem;
background-color: var(--gray-200, oklch(0.928 0.006 264.531));
}
.fi-support-link {
display: flex;
align-items: center;
gap: 0.625rem;
margin: 0 0.75rem 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
color: oklch(0.446 0.03 256.802);
text-decoration: none;
transition:
background-color 75ms ease,
color 75ms ease;
}
/* Hover matches Filament's nav items: a subtle --gray-100 fill, no shadow. */
.fi-support-link:hover {
background-color: var(--gray-100, oklch(0.967 0.001 286.375));
color: oklch(0.21 0.034 264.665);
}
.fi-support-link-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
color: oklch(0.498 0.186 24.72);
}
.fi-support-link-text {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
line-height: 1.25;
}
.fi-support-link-label {
font-size: 0.8125rem;
font-weight: 600;
}
.fi-support-link-email {
font-size: 0.75rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: oklch(0.498 0.186 24.72);
}
.fi-support-link:hover .fi-support-link-email {
text-decoration: underline;
text-underline-offset: 0.125rem;
}
/* Filament toggles dark mode with a `.dark` class on (not the
prefers-color-scheme media query), so match its strategy here. */
:where(.dark) .fi-support-divider {
background-color: oklch(0.278 0.033 256.848);
}
:where(.dark) .fi-support-link {
color: oklch(0.707 0.022 261.325);
}
:where(.dark) .fi-support-link:hover {
background-color: color-mix(in oklab, oklch(1 0 0) 5%, transparent);
color: oklch(0.985 0.002 247.839);
}
:where(.dark) .fi-support-link-email {
color: oklch(0.637 0.187 24.72);
}
@media (max-width: 639px) {
.fi-simple-main {
border-radius: 0.75rem !important;
margin-inline: 1rem !important;
}
}
.fi-ta-ctn {
overflow: visible !important;
}
.fi-ta-ctn .fi-sc.fi-sc-has-gap {
gap: 0.5rem !important;
}
.fi-ta-ctn .fi-ta-header-toolbar {
border-top-width: 0 !important;
}
.fi-simple-main-ctn form {
gap: 2rem !important;
}
.fi-simple-main-ctn form .fi-sc.fi-sc-has-gap {
gap: calc(var(--spacing) * 4) !important;
}
.glossary-letters-table .fi-ta-ctn {
overflow: hidden !important;
}
.fi-btn.fi-color:not(.fi-outlined):not(label) {
--bg: oklch(0.498 0.186 24.72) !important;
--hover-bg: oklch(0.448 0.175 24.72) !important;
--text: oklch(1 0 0) !important;
--hover-text: oklch(1 0 0) !important;
--dark-bg: oklch(0.498 0.186 24.72) !important;
--dark-hover-bg: oklch(0.448 0.175 24.72) !important;
--dark-text: oklch(1 0 0) !important;
--dark-hover-text: oklch(1 0 0) !important;
}
/*
* Fix Filament nested Repeater chevron bug.
* Filament's repeater.css uses descendant (not child) combinators when hiding
* the collapse/expand chevrons, so an outer expanded item's rule bleeds into
* its nested inner items and hides BOTH their chevrons when the inner item is
* collapsed. Restore visibility for the inner items explicitly.
*/
.fi-fo-repeater-item:not(.fi-collapsed) .fi-fo-repeater-item.fi-collapsed .fi-fo-repeater-item-header-expand-action {
opacity: 1 !important;
pointer-events: auto !important;
}
.fi-fo-repeater-item:not(.fi-collapsed) .fi-fo-repeater-item:not(.fi-collapsed) .fi-fo-repeater-item-header-collapse-action {
opacity: 1 !important;
pointer-events: auto !important;
}
/*
* Full-width 6-digit one-time-code (MFA) input.
* Filament draws decorative digit boxes with an absolutely-positioned monospace
* overlaid on top; its letter-spacing is tuned so each typed digit sits
* centered over a fixed 2rem box. Stretch the boxes to fill the modal width and
* re-tune the overlay so digits stay centered. In a monospace font `1ch` equals
* one digit's advance, so letter-spacing = (box pitch − one glyph). Container
* query units (cqw, relative to the container's width) keep it responsive.
* Box pitch with a 0.5rem gap = (100cqw + 0.5rem) / 6.
*/
.fi-one-time-code-input-ctn {
container-type: inline-size;
display: flex !important;
width: 100%;
gap: 0.5rem;
}
.fi-one-time-code-input-ctn > .fi-one-time-code-input-digit-field {
flex: 1 1 0 !important;
width: auto !important;
}
/* Active box keeps the 1px border width (only the color changes) to avoid a layout shift. */
.fi-one-time-code-input-ctn > .fi-one-time-code-input-digit-field.fi-active {
border-width: 1px !important;
}
/* Auto-redirect countdown notice shown after 2FA enrollment completes,
replacing the empty management box and the "Продолжи" button. */
.fi-mfa-redirect-notice {
margin: 0;
padding: 0.5rem 0;
text-align: center;
font-size: 0.875rem;
color: oklch(0.55 0.02 264);
}
/* Full-width "Постави 2FA" enrollment button on the MFA setup card. */
.fi-mfa-setup-btn {
width: 100%;
justify-content: center;
}
/* "Преземи" button injected below the recovery-codes copy/download text. */
.fi-mfa-download-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.75rem;
padding: 0.5rem 0.875rem;
border: 1px solid oklch(0.498 0.186 24.72);
border-radius: 0.5rem;
background: transparent;
color: oklch(0.498 0.186 24.72);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background-color 75ms;
}
.fi-mfa-download-btn:hover {
background: color-mix(in oklab, oklch(0.498 0.186 24.72) 8%, transparent);
}
/* !important so these always beat Filament's own (equal-specificity) rule,
regardless of stylesheet load order — otherwise the vendor's fixed
1.72rem tracking can win and clump the digits to the left. */
.fi-one-time-code-input-ctn > input.fi-one-time-code-input {
padding-left: calc((100cqw - 2.5rem) / 12 - 0.5ch) !important;
padding-right: 0 !important;
right: -3rem !important;
letter-spacing: calc((100cqw + 0.5rem) / 6 - 1ch) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
}
/* Publish-state segmented control (blog post status): stretch the two grouped
buttons (Зачувај | Објави) to split the field width evenly, like a two-tab
switch. Filament renders the group as a flex row of