/*
 * ZAK brand on the panel (docs/brand.md). Light: Paper White surfaces on a warm page, Ink headings,
 * Graphite body, one Burnt Orange accent. Dark (optional, per person): the guidelines' "white on black":
 * Ink Black page, warm dark surfaces, Chalk text, the white mark. Module views use these tokens, never
 * literal neutrals, so they follow the mode. Expo colours and semantic colours stay as they are.
 */
:root {
    --zak-orange: #D9531F; --zak-orange-deep: #C1471A; --zak-orange-text: #C1471A;
    --zak-ink: #141414; --zak-graphite: #3A3630; --zak-stone: #8A8378; --zak-ash: #A7A094;
    --zak-paper: #FFFFFF; --zak-page: #FAF8F4; --zak-chalk: #F6F2EC;
    --zak-line: #EBE5DC; --zak-line-strong: #D6CFC4; --zak-on-ink: #FFFFFF;
}
.dark {
    --zak-orange-text: #F0834F;
    --zak-ink: #F6F2EC; --zak-graphite: #D6CFC4; --zak-stone: #A7A094; --zak-ash: #8A8378;
    --zak-paper: #1F1D1A; --zak-page: #141414; --zak-chalk: #26231F;
    --zak-line: #3A3630; --zak-line-strong: #4A453D; --zak-on-ink: #141414;
}
.fi-body { color: var(--zak-graphite); font-family: 'ABC Normal'; }
.fi-body svg text { font-family: 'ABC Normal'; }
.fi-header-heading, .fi-simple-header-heading { color: var(--zak-ink); letter-spacing: -0.01em; }
.fi-sidebar-group-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--zak-stone); }
/* Zak Expo Hub: the four expo colours as light touches only (owner, 18 Oct 2026). The frame stays ZAK's. */
:root { --hub-zgt: #1A6FA8; --hub-zdw: #2F7A4D; --hub-zae: #D62828; --hub-zfi: #C60F83; --hub-ghost: 0.05; }
.dark { --hub-ghost: 0.07; }
.hub-rule { background: linear-gradient(90deg, var(--hub-zgt) 0 25%, var(--hub-zdw) 25% 50%, var(--hub-zae) 50% 75%, var(--hub-zfi) 75% 100%); }

/* A hairline in the four colours under the top bar. */
.fi-topbar { border-bottom: 0; position: relative; }
.fi-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--hub-zgt) 0 25%, var(--hub-zdw) 25% 50%, var(--hub-zae) 50% 75%, var(--hub-zfi) 75% 100%); }

/* The lockup: ZAK mark, a hairline, the Expo Hub sign and "expo hub". */
.zak-brand { display: flex; align-items: center; gap: 0.55rem; color: var(--zak-ink); }
.zak-brand img { height: 2.1rem; width: auto; }
.zak-brand img.zak-brand-hub { height: 1.55rem; }
.zak-brand-rule { display: block; width: 1px; height: 1.6rem; background: var(--zak-ink); opacity: .8; }
.zak-brand span { font-weight: 500; font-size: 1.05rem; letter-spacing: 0; }

/* Ghost mark: one oversized, faded Expo Hub sign cropped off the bottom-right corner, once per screen, behind
   everything (brand guidelines: 4 to 5% on white). Larger on the sign-in page. */
.fi-body::before { content: ""; position: fixed; right: -9rem; bottom: -9rem; width: 34rem; height: 34rem; z-index: -1;
    background: url('/images/brand/expo_hub_ghost.svg') no-repeat right bottom / contain; opacity: var(--hub-ghost); pointer-events: none; }
.fi-body:has(.fi-simple-layout)::before { width: 52rem; height: 52rem; right: -14rem; bottom: -14rem; }
@media print { .fi-body::before { display: none; } }

/* Sign-in page: the four colours as a short rule above the card's heading. */
.fi-simple-header .fi-logo { margin-bottom: .25rem; }
.fi-simple-main { position: relative; overflow: hidden; }
.fi-simple-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--hub-zgt) 0 25%, var(--hub-zdw) 25% 50%, var(--hub-zae) 50% 75%, var(--hub-zfi) 75% 100%); }

/* The active menu item gets a thin tick in the four colours. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { position: relative; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { content: ""; position: absolute; left: 0.2rem; top: 28%; bottom: 28%; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--hub-zgt) 0 25%, var(--hub-zdw) 25% 50%, var(--hub-zae) 50% 75%, var(--hub-zfi) 75% 100%); }

/* Muted text and status tints (Settings, Security and App status). Status colours are semantic, not brand. */
:root { --zak-muted: #6A645A; --zak-ok: #2F7A4D; --zak-ok-bg: #e7f1ea; --zak-warn: #8a5207; --zak-warn-bg: #fbf3e4; --zak-fail: #B33030; --zak-fail-bg: #f8e6e6; }
.dark { --zak-muted: #B3AC9F; --zak-ok: #8FD0A8; --zak-ok-bg: rgba(47, 122, 77, .22); --zak-warn: #F0C46A; --zak-warn-bg: rgba(224, 161, 0, .18); --zak-fail: #F2A3A3; --zak-fail-bg: rgba(179, 48, 48, .25); }

/* ------------------------------------------------------------------------------------------------------------------
 * Tables (owner, 18 Oct 2026: "can the table design be better? feels like an excel table"). An app list, not a grid:
 * a rounded box with a soft edge, quiet uppercase headings on the page tone, roomy rows with hairlines only, a chalk
 * tint on hover, the first column in Ink. Filament tables (fi-ta-*) and the module views' own tables (.zx-table)
 * share it. Density: html.zx-density-compact (Settings → Personal preferences → Look).
 * ------------------------------------------------------------------------------------------------------------------ */
:root { --zx-row-pad: 14px; --zx-row-h: 54px; --zx-head-pad: 10px; }
.zx-density-comfortable { --zx-row-pad: 14px; --zx-row-h: 54px; --zx-head-pad: 10px; }
.zx-density-compact { --zx-row-pad: 8px; --zx-row-h: 40px; --zx-head-pad: 7px; }

.fi-ta-ctn { border-radius: 14px; box-shadow: 0 0 0 1px var(--zak-line), 0 1px 3px rgba(20, 20, 20, .04); }
.fi-ta-ctn:where(.dark, .dark *) { box-shadow: 0 0 0 1px var(--zak-line); }
.fi-ta-header-ctn, .fi-ta-header-toolbar { border-color: var(--zak-line) !important; }
.fi-ta-table { font-variant-numeric: tabular-nums; }
.fi-ta-table > thead > tr > th { background: var(--zak-page); border-bottom: 1px solid var(--zak-line); position: sticky; top: 0; z-index: 2;
    padding-block: var(--zx-head-pad); }
.fi-ta-table > thead th, .fi-ta-table > thead th button, .fi-ta-table > thead th .fi-ta-header-cell-label { font-size: 11px; font-weight: 500;
    letter-spacing: .07em; text-transform: uppercase; color: var(--zak-stone); }
.fi-ta-table > thead th button:hover { color: var(--zak-ink); }
.fi-ta-table > tbody { border-color: var(--zak-line); }
.fi-ta-table > tbody > tr { border-color: var(--zak-line) !important; }
.fi-ta-row > td { height: var(--zx-row-h); }
.fi-ta-row > td .fi-ta-col, .fi-ta-row > td .fi-ta-text { padding-block: calc(var(--zx-row-pad) - 6px); }
.fi-ta-row:hover > td { background: color-mix(in oklab, var(--zak-chalk) 70%, transparent); }
.fi-ta-row > td.fi-ta-cell:first-child .fi-ta-text-item,
.fi-ta-row > td.fi-ta-selection-cell + td.fi-ta-cell .fi-ta-text-item { color: var(--zak-ink); font-weight: 500; }
.fi-ta-text-description { color: var(--zak-stone); font-size: 12.5px; }
.fi-ta-content-ctn { overflow-x: auto; }
.fi-ta-footer, .fi-pagination { border-color: var(--zak-line) !important; }
.fi-pagination-item-btn { border-radius: 8px; }

/* Empty tables show the Expo Hub sign. */
.fi-ta-empty-state-icon-bg { width: 4rem; height: 4rem; background: url('/images/brand/expo_hub_mark.svg') center / 62% no-repeat, var(--zak-chalk) !important; border-radius: 50%; }
.fi-ta-empty-state-icon-bg:where(.dark, .dark *) { background-image: url('/images/brand/expo_hub_mark_white.svg') !important; }
.fi-ta-empty-state-icon-bg > * { visibility: hidden; }
.fi-ta-empty-state-heading { color: var(--zak-ink); }
.fi-ta-empty-state-description { color: var(--zak-stone); max-width: 46ch; margin-inline: auto; }

/* People in tables: initials or photo before the name (App\Support\TableColumns::person()). */
.zx-person { display: inline-flex; align-items: center; gap: 8px; }
.zx-person img, .zx-person i { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; }
.zx-person i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 500;
    background: var(--zak-chalk); color: var(--zak-ink); }

/* The module views' own tables. */
.zx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--zak-graphite); font-variant-numeric: tabular-nums; }
.zx-table th:not([scope="row"]) { padding: var(--zx-head-pad) 14px; font-size: 11px; font-weight: 500; letter-spacing: .07em;
    text-transform: uppercase; color: var(--zak-stone); background: var(--zak-page); border-bottom: 1px solid var(--zak-line); white-space: nowrap; }
.zx-table th:not([scope="row"]) a { color: inherit; }
.zx-table :where(th) { text-align: start; }
.zx-table > thead > tr > th { position: sticky; top: 0; z-index: 1; }
.zx-table > tbody > tr > td, .zx-table > tbody > tr > th[scope="row"], .zx-table > tr > td { padding: var(--zx-row-pad) 14px; border-bottom: 1px solid var(--zak-line); vertical-align: middle; }
.zx-table > tbody > tr:last-child > td { border-bottom: 0; }
.zx-table > tbody > tr:hover > td { background-color: color-mix(in oklab, var(--zak-chalk) 70%, transparent); }
.zx-table > tbody > tr > td:first-child { color: var(--zak-ink); font-weight: 500; }
.zx-table > tfoot td { padding: var(--zx-row-pad) 14px; border-top: 1px solid var(--zak-line-strong); font-weight: 500; color: var(--zak-ink); }
/* A plain wrapper around a table takes the same rounded edge. */
:where(div, section):has(> .zx-table) { border-radius: 14px; }
.zx-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--zak-ink); }
.zx-table .zx-num, .zx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Lists in module views (public/js/zx-lists.js): click a heading to sort, a quick filter above long lists. */
.zx-table th[data-zx-sortable] { cursor: pointer; user-select: none; }
.zx-table th[data-zx-sortable]:hover, .zx-table th[data-zx-sortable]:focus-visible { color: var(--zak-ink); }
.zx-table th[data-zx-sortable]:focus-visible { outline: 2px solid var(--zak-orange); outline-offset: -2px; }
.zx-table th[data-zx-sortable]::after { content: ""; display: inline-block; width: 0; height: 0; margin-inline-start: 6px; vertical-align: middle;
    border-inline: 4px solid transparent; opacity: 0; }
.zx-table th[aria-sort="ascending"]::after { opacity: 1; border-bottom: 5px solid currentColor; }
.zx-table th[aria-sort="descending"]::after { opacity: 1; border-top: 5px solid currentColor; }
.zx-table th[aria-sort="ascending"], .zx-table th[aria-sort="descending"] { color: var(--zak-ink); }
.zx-filter { display: block; width: min(320px, 100%); margin: 10px 14px; padding: 7px 12px; font: inherit; font-size: 14px; color: var(--zak-ink);
    background: var(--zak-paper); border: 1px solid var(--zak-line-strong); border-radius: 10px; }
.zx-filter::placeholder { color: var(--zak-stone); }
.zx-filter:focus { outline: 2px solid var(--zak-orange); outline-offset: 0; border-color: transparent; }
.zx-filter-none { margin: 10px 14px; font-size: 13px; color: var(--zak-stone); }

/* ------------------------------------------------------------------------------------------------------------------
 * Pills (owner, 18 Oct 2026: "an option to pick between different pill types"): Soft, Outline, Solid, Dot and text,
 * Square tag. html.zx-pill-<style> (each person's choice, or the company default) styles every Filament badge and
 * every <x-pill>. A preview box can carry the class itself (.zx-pill-outline) to show one style.
 * --pc is the pill's colour; Filament badges take it from their colour scale.
 * ------------------------------------------------------------------------------------------------------------------ */
.zx-pill { --pc: var(--zak-stone); display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; vertical-align: middle;
    background: color-mix(in oklab, var(--pc) 13%, var(--zak-paper)); color: color-mix(in oklab, var(--pc) 82%, var(--zak-ink)); }
.zx-tone-success { --pc: #2F7A4D; } .zx-tone-warning { --pc: #B07A12; } .zx-tone-danger { --pc: #B33030; }
.zx-tone-info { --pc: #1A6FA8; } .zx-tone-neutral { --pc: #8A8378; } .zx-tone-brand { --pc: #D9531F; }
.dark .zx-pill { color: color-mix(in oklab, var(--pc) 55%, #FFFFFF); background: color-mix(in oklab, var(--pc) 22%, var(--zak-paper)); }
.fi-badge { --pc: var(--color-600, var(--gray-500)); border-radius: 999px; }

/* The chosen style on <html>; a pill with data-pill="<style>" (the preview on Personal preferences) keeps its own. */
html.zx-pill-outline :is(.zx-pill, .fi-badge):not([data-pill]), .zx-pill[data-pill="outline"] {
    background: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pc) 60%, transparent) !important; }
html.zx-pill-solid :is(.zx-pill, .fi-badge):not([data-pill]), .zx-pill[data-pill="solid"] {
    background: var(--pc) !important; color: #FFFFFF !important; box-shadow: none !important; }
html.zx-pill-solid .fi-badge .fi-icon { color: #FFFFFF !important; }
html.zx-pill-dot :is(.zx-pill, .fi-badge):not([data-pill]), .zx-pill[data-pill="dot"] {
    background: transparent !important; box-shadow: none !important; color: var(--zak-graphite) !important; padding-inline: 2px !important; }
html.zx-pill-dot :is(.zx-pill, .fi-badge):not([data-pill])::before, .zx-pill[data-pill="dot"]::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex: none; }
html.zx-pill-square :is(.zx-pill, .fi-badge):not([data-pill]), .zx-pill[data-pill="square"] { border-radius: 4px !important; }
.zx-pill[data-pill="soft"] { border-radius: 999px; }

/* Expo logos (<x-show-logo>): the -dark file on dark backgrounds. */
.zx-logo-dark { display: none !important; }
.dark .zx-logo-light { display: none !important; }
.dark .zx-logo-dark { display: inline-block !important; }

/* The folded menu opens on hover (owner, 18 Oct 2026; public/js/sidebar-peek.js). It opens over the page, so the content
   doesn't move: the menu is taken out of the flow and the page keeps the folded menu's width. */
@media (min-width: 1024px) {
  .fi-body-has-sidebar-collapsible-on-desktop .fi-main-ctn { transition-property: opacity !important; }
  body.hub-sidebar-peek .fi-main-sidebar.fi-sidebar-open { position: fixed !important; z-index: 40; background: var(--zak-page); box-shadow: 10px 0 34px rgba(20, 20, 20, .22); }
  body.hub-sidebar-peek .fi-main-ctn { margin-inline-start: var(--collapsed-sidebar-width); }
}

/* The Ink header (owner, 18 Oct 2026: option C of the header designs). A dark ink bar in light and dark mode alike:
   the white ZAK mark with the coloured Expo Hub sign, a dark search field, light icons, the orange "+ Add" as the one
   main action, and the four-colour hairline kept along the bottom. */
.fi-topbar { background-color: #141414 !important; color: #F6F2EC; min-height: 60px; box-shadow: none !important; }
.fi-topbar .fi-logo-light { display: none !important; }
.fi-topbar .fi-logo-dark { display: flex !important; }
.fi-topbar .zak-brand, .fi-topbar .zak-brand span { color: #FFFFFF; }
.fi-topbar .zak-brand-rule { background: #4A453D; opacity: 1; }
.fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon, .fi-topbar .fi-topbar-start a, .fi-topbar .fi-topbar-start button { color: #F6F2EC; }
.fi-topbar .fi-icon-btn:hover, .fi-topbar .fi-icon-btn:focus-visible { background-color: #26231F; }
.fi-topbar .fi-icon-btn-badge-ctn .fi-badge { box-shadow: 0 0 0 2px #141414; }
.fi-topbar .fi-input-wrp { background-color: #1F1D1A !important; box-shadow: 0 0 0 1px #3A3630 !important; border-radius: 10px; }
.fi-topbar .fi-input-wrp:focus-within { box-shadow: 0 0 0 1px #F0834F, 0 0 0 4px rgba(240, 131, 79, .22) !important; }
.fi-topbar .fi-input-wrp input { color: #F6F2EC !important; background: transparent !important; }
.fi-topbar .fi-input-wrp input::placeholder { color: #B3AC9F; }
.fi-topbar .fi-input-wrp .fi-icon, .fi-topbar .fi-input-wrp svg { color: #B3AC9F; }
.fi-topbar .fi-user-menu .fi-avatar { box-shadow: 0 0 0 2px #26231F; }
/* Company logos (<x-company-logo>, owner 18 Oct 2026). A logo whose white background was taken out can be dark on
   transparent, so in dark mode it sits on a light paper tile; without a logo, the initials in a neutral circle. */
:root { --zx-logo-tile: transparent; --zx-logo-tile-pad: 0px; }
.dark { --zx-logo-tile: #F6F2EC; --zx-logo-tile-pad: 2px; }
.zx-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; vertical-align: middle; }
.zx-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zx-logo.has-img { background: var(--zx-logo-tile); padding: var(--zx-logo-tile-pad); border-radius: 6px; box-sizing: border-box; }
.zx-logo.no-img { border-radius: 999px; background: var(--zak-chalk); color: var(--zak-graphite); border: 1px solid var(--zak-line); font-weight: 500; line-height: 1; letter-spacing: .02em; box-sizing: border-box; }
.zx-logo-checker { background-color: var(--zak-paper); background-image: linear-gradient(45deg, var(--zak-line) 25%, transparent 25%, transparent 75%, var(--zak-line) 75%), linear-gradient(45deg, var(--zak-line) 25%, transparent 25%, transparent 75%, var(--zak-line) 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; border: 1px solid var(--zak-line); border-radius: 8px; }
.zx-logo-with-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.zx-logo-with-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }