/*
 * Plum — the management panel's brand layer.
 *
 * Filament ships compiled CSS and this repository has no npm or Vite build step
 * (README), so a Filament "custom theme" — which is a Tailwind entry point that has to
 * be compiled — is not on the table. It is also not needed. Filament 5 resolves every
 * colour through CSS custom properties that the panel provider emits at render time, so
 * the palette is already ours through AppPanelProvider::panel(); what is left is the
 * handful of choices a palette cannot carry: which face sets headings, and where the
 * front door's mono eyebrow belongs in an admin UI.
 *
 * Loaded last, from PanelsRenderHook::STYLES_AFTER, so it lands after Filament's own
 * stylesheet and needs no !important to win.
 *
 * Deliberately small and hand-written, in the same spirit as public/marketing/style.css.
 * Colours are referenced as Filament variables (--primary-*, --gray-*) rather than
 * repeated as literals: those variables already hold the brand tokens, and a hex typed
 * here would be a fourth place for the palette to drift. See App\Support\Brand.
 */

:root {
    /* Archivo, as on the front door: --display in public/marketing/style.css. Filament
       has slots for sans, mono and serif but not for a display face, so this one is
       named here. The @font-face that backs it is in public/marketing/fonts.css, which
       the panel provider links. */
    --plum-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------------- the mark */

/*
 * Filament wraps the brand logo in `.fi-logo` with an inline height and no layout of
 * its own, so the mark and the wordmark are arranged here.
 */
.fi-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
}

.plum-wordmark {
    font-family: var(--plum-display);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--gray-950);
}

.dark .plum-wordmark {
    color: var(--color-white);
}

.plum-mark {
    width: 22px;
    height: 22px;
    flex: none;
}

/* The cleft is stroked in the colour behind the mark rather than a darker plum, so it
   reads as a cut-out in both themes — light on the deep fill, dark on the light one.
   Same trick, same reason as the nav mark on the front door. */
.plum-body,
.plum-leaf {
    fill: var(--primary-600);
}

.plum-stem {
    fill: none;
    stroke: var(--primary-600);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.plum-cleft {
    fill: none;
    stroke: var(--color-white);
    stroke-width: 1.3;
    stroke-linecap: round;
    opacity: 0.35;
}

.dark .plum-body,
.dark .plum-leaf {
    fill: var(--primary-400);
}

.dark .plum-stem {
    stroke: var(--primary-400);
}

.dark .plum-cleft {
    stroke: var(--gray-950);
}

/* --------------------------------------------------------------- display type */

/*
 * Archivo sets headings, Instrument Sans sets everything else — the split the front
 * door uses. Tracking matches it too: -0.03em on the page-level headings that answer to
 * `h1`/`h2` there, -0.02em on the smaller ones that answer to `.feature h3` and
 * `summary`.
 */
.fi-header-heading,
.fi-simple-header-heading {
    font-family: var(--plum-display);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading,
.fi-empty-state-heading,
.fi-ta-empty-state-heading,
.fi-account-widget-heading,
.fi-callout-heading,
.fi-sc-wizard-header-step-label {
    font-family: var(--plum-display);
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ the mono eyebrow */

/*
 * The front door's hero is a mock of this panel: a file listing and a deployment card,
 * with every label set in IBM Plex Mono, uppercase, on wide tracking (`.meta-k` and
 * `.panel-head` in public/marketing/style.css). Column headings are where that lands in
 * the real thing, so the page and the product finally agree.
 *
 * Only headings. Table data keeps the sans face except where a column is genuinely a
 * hostname or a path, which is a per-column decision and lives with the column.
 */
.fi-ta-header-cell,
.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fi-ta-header-cell {
    color: var(--gray-500);
}

.dark .fi-ta-header-cell {
    color: var(--gray-400);
}

/* ----------------------------------------------------------- the site address */

/*
 * A site's address is the first fact worth reading on its page, and once a primary
 * custom domain is set it is no longer the plum subdomain — it is the customer's own
 * name, with everything else redirecting to it. That was recorded only inside the
 * "Custom domains" tab, which is the one place nobody looks when the question is simply
 * "where does this site answer?", so the edit page states it in the header instead.
 *
 * Rendered into Filament's `.fi-header-subheading`, which is a <p>: phrasing content
 * only, so these are spans laid out rather than block elements.
 */
.plum-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.plum-address-host {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--primary-600);
    text-decoration: none;
}

.plum-address-host:hover {
    text-decoration: underline;
}

.dark .plum-address-host {
    color: var(--primary-400);
}

/* The mono eyebrow the front door sets its labels in, at tag size. */
.plum-address-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-600);
    background: color-mix(in oklch, var(--primary-600) 12%, transparent);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    white-space: nowrap;
}

.dark .plum-address-tag {
    color: var(--primary-400);
    background: color-mix(in oklch, var(--primary-400) 16%, transparent);
}

/* The subdomain still resolves and is still the name to test against when a custom
   domain misbehaves, so it stays on screen — just quietly. */
.plum-address-alias {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .plum-address-alias {
    color: var(--gray-400);
}

/* --------------------------------------------------------------- the topbar */

/*
 * The topbar carries the mark and nothing else. Global search is off and the account
 * menu sits at the foot of the sidebar now (AppPanelProvider), which leaves Filament's
 * arrangement — logo at the start, everything else pushed to the far end — with nothing
 * to push against, and a mark stranded in the corner of an otherwise empty bar.
 *
 * Centred instead, on the middle of the window rather than on the middle of whatever
 * space is left over. Taking `.fi-topbar-start` out of the flex row is what makes that
 * true at every width: in flow it would be centred in the space after the hamburger,
 * which is off by half a button on mobile and reads as a mistake rather than a choice.
 * `left`/`translateX` are deliberately physical — a centre is the same centre in RTL,
 * and `inset-inline-start` paired with a physical translate would not be.
 *
 * The `display` is here to override Filament, which hides this element below `lg` and
 * shows the mark in the sidebar's own header instead. That trade made sense when the
 * bar was full; now it leaves the mobile bar holding nothing but a hamburger. Both
 * marks are on the page at once while the menu is open, but the menu is 20rem of opaque
 * panel over a dimmed overlay, so on a phone it covers the centred one outright and
 * anywhere wider it is dimmed behind the overlay with the rest of the page.
 */
.fi-topbar {
    position: relative;
}

.fi-topbar-start {
    display: flex;
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-inline-end: 0;
}

/* Filament insets the logo to clear the collapse-sidebar button that would sit beside
   it. This panel's sidebar is not collapsible on desktop, so there is no button — and
   the inset would tip the centring by its width. */
.fi-topbar-start .fi-logo {
    margin-inline-start: 0;
}

/* ---------------------------------------------------------- the account menu */

/*
 * The account menu — profile, theme, sign out — moved from the topbar to the foot of
 * the sidebar, which is where the rest of the panel's navigation already lives.
 *
 * Filament styles the sidebar placement but leaves it flush against the nav above,
 * which scrolls. A hairline says the footer is pinned rather than the last thing in the
 * list. Weights match the ring Filament draws elsewhere: 5% of the near-black in light,
 * 10% of white in dark.
 */
.fi-sidebar-footer {
    margin-block-start: 0;
    padding-block-start: 0.75rem;
    border-top: 1px solid color-mix(in oklch, var(--gray-950) 8%, transparent);
}

.dark .fi-sidebar-footer {
    border-top-color: color-mix(in oklch, var(--color-white) 10%, transparent);
}

/* The same hover the navigation items above it answer to, so the trigger reads as one
   of them rather than as decoration. */
.fi-sidebar .fi-user-menu-trigger:hover,
.fi-sidebar .fi-user-menu-trigger:focus-visible {
    background-color: var(--gray-100);
}

.dark .fi-sidebar .fi-user-menu-trigger:hover,
.dark .fi-sidebar .fi-user-menu-trigger:focus-visible {
    background-color: color-mix(in oklch, var(--color-white) 5%, transparent);
}

/* --------------------------------------------------------- the team switcher */

/*
 * The team the panel is acting for, at the head of the sidebar — the mirror of the
 * account menu at its foot, and given the same hairline so the navigation between them
 * reads as one list bracketed by two controls rather than three loose things.
 *
 * Below rather than above: there is nothing above it but the mark, and a rule directly
 * under the logo would read as a header border on a sidebar that has none.
 */
.fi-sidebar .fi-tenant-menu {
    padding-block-end: 0.75rem;
    border-bottom: 1px solid color-mix(in oklch, var(--gray-950) 8%, transparent);
}

.dark .fi-sidebar .fi-tenant-menu {
    border-bottom-color: color-mix(in oklch, var(--color-white) 10%, transparent);
}

/* The team's own name is the thing being read here, so it takes the display face the
   page headings use — the switcher is a heading for everything under it. */
.fi-tenant-menu-trigger-tenant-name {
    font-family: var(--plum-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Filament truncates a sidebar item's label but not the account name, which is free
   text and can be long enough to shove the chevron out of the sidebar. Same treatment
   as `.fi-sidebar-item-label`. The team name needs it for the same reason. */
.fi-user-menu-trigger-text,
.fi-tenant-menu-trigger-tenant-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}