/* The admin in the design system's dress (design-system/albarrak-law/MASTER.md):
   a navy sidebar with silver details, a white top bar with the logo and the
   letterhead's silver line, white cards with a hairline border, and the
   brand font and corners. Colours come from --brand-* variables, which
   App\Support\AdminTheme writes from the last token build, so brand edits
   reach the admin without a rebuild. Never hard-code a colour here.

   Unlayered on purpose: Filament's component styles live in cascade layers,
   so these rules win without !important. */

/* A calmer scale: the owner found Filament's default "too big, overwhelming",
   as with the site's first pass. Filament sizes everything in rem, so one root
   size scales text, spacing, controls, cards and the sidebar together. */
html.fi {
    font-size: 87.5%;
}

/* Arabic is never letter-spaced (Filament tracks headings tight). */
[dir="rtl"] * {
    letter-spacing: 0;
}

/* Top bar: white, with the stationery's silver line along its foot. */
.fi-topbar {
    position: relative;
    box-shadow: none;
}

.fi-topbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light) 50%, var(--brand-accent));
}

/* The logo (resources/views/filament/admin/logo.blade.php): the white version
   inside the navy sidebar, which shows it in the phone drawer. */
.admin-logo {
    block-size: 100%;
    inline-size: auto;
}

.admin-logo-inverse,
.fi-sidebar .admin-logo-light {
    display: none;
}

.fi-sidebar .admin-logo-inverse {
    display: block;
}

/* Sidebar: navy, like the site's hero and footer. */
.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--brand-inverse);
}

.fi-sidebar-header {
    box-shadow: 0 1px 0 var(--brand-inverse-border);
}

.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-inverse-border) transparent;
}

.fi-sidebar-group-label {
    color: var(--brand-accent-on-inverse);
    font-size: 0.8125rem;
    font-weight: 600;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn .fi-icon,
.fi-sidebar-item-btn > .fi-icon {
    color: var(--brand-accent-on-inverse);
}

.fi-sidebar-item-label {
    color: var(--brand-on-inverse-muted);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:is(:hover, :focus-visible),
.fi-sidebar-group-dropdown-trigger-btn:is(:hover, :focus-visible) {
    background-color: var(--brand-inverse-raised);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:is(:hover, :focus-visible) > .fi-sidebar-item-label {
    color: var(--brand-on-inverse);
}

/* The current page: raised navy, white text, and a silver bar on the start edge. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--brand-inverse-raised);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--brand-on-inverse);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: 2px;
    background-color: var(--brand-accent-on-inverse);
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: var(--brand-inverse-border);
}

.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: var(--brand-accent-on-inverse);
}

.fi-sidebar-footer {
    border-color: var(--brand-inverse-border);
}

/* Page titles in the navy heading colour. */
.fi-header-heading,
.fi-simple-header-heading {
    color: var(--brand-heading);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4;
}

.fi-section-header-heading,
.fi-ta-header-heading {
    color: var(--brand-heading);
    font-weight: 600;
}

/* Cards: white with a hairline border and no resting shadow, like the site's .card. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-tabs.fi-contained,
.fi-wi-stats-overview-stat {
    box-shadow: 0 0 0 1px var(--brand-border);
}

/* Dashboard figures: a silver rule before the label, as on the site's section labels. */
.fi-wi-stats-overview-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.fi-wi-stats-overview-stat-label::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 2px;
    border-radius: 1px;
    background-color: var(--brand-accent);
}

.fi-wi-stats-overview-stat-value {
    color: var(--brand-heading);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.3;
}

/* The service icon picker (ServiceResource): each option shows the site's icon beside its name. */
.admin-icon-option {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.admin-icon-option svg {
    flex-shrink: 0;
    color: var(--brand-heading);
}

/* Dialogs dim the page with navy, like the site's service dialog. */
.fi-modal-close-overlay {
    background-color: color-mix(in oklab, var(--brand-inverse) 60%, transparent);
}

/* Sign-in and the other single-card pages: navy, with the letterhead's
   shield watermark, and a white card topped by the silver line. */
.fi-simple-layout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--brand-inverse);
}

.fi-simple-layout::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-end: -8rem;
    inline-size: min(46rem, 110vw);
    aspect-ratio: 603 / 500;
    translate: 0 -50%;
    background-color: var(--brand-accent-on-inverse);
    opacity: 0.07;
    mask: var(--brand-watermark) center / contain no-repeat;
}

.fi-simple-main {
    position: relative;
    overflow: hidden;
    box-shadow: var(--brand-shadow);
}

.fi-simple-main::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light) 50%, var(--brand-accent));
}