/*
 * Cockpit UI theme.
 * Compiled by Vite (imported from theme.css) — npm run dev / build.
 */

:root {
    /* Page background — the lowest layer, behind every panel. */
    --cockpit-bg-light: #eeeef0;
    --cockpit-bg-dark: oklch(0.183 0.005 285.9);

    /*
     * Raised surfaces: cards, modals, dropdowns, tables, the topbar,
     * inputs, secondary buttons. Deliberately off-white on the light
     * theme — pure white against the page background read as too hard
     * a step.
     */
    --cockpit-surface-light: #fafafb;
    --cockpit-surface-dark: oklch(0.245 0.006 285.885);

    /*
     * Brand mark. Kept separate from the background tokens even though
     * the light value started out equal to --cockpit-bg-dark: the mark
     * has to stay near-black when the dark background is lightened.
     */
    --cockpit-logo-light: #0e0e0f;
    --cockpit-logo-dark: #ffd94a;

    /* Pastille behind a client logo on its fiche header. */
    --cockpit-logo-pastille: #e4e4e7;
}

/*
 * Filament has no single "surface" token — it paints raised surfaces
 * with --color-white on the light theme and --gray-900 on the dark one,
 * across 59 and 44 rules respectively (cards, modals, dropdown panels,
 * table containers, topbar, inputs, secondary buttons). Retinting those
 * selectors one by one would drift out of sync with Filament upgrades,
 * so the tokens themselves are redefined instead — each scoped to the
 * theme that actually uses it as a background.
 *
 * --gray-900 is only ever a background (and a ring color) in Filament's
 * CSS, never a text color, so redefining it is contained. --color-white
 * is also used as text on colored buttons and badges; at #fafafb that
 * shift is well under a perceptible step and leaves contrast intact.
 */
html:not(.dark) {
    --color-white: var(--cockpit-surface-light);
}

html.dark {
    --gray-900: var(--cockpit-surface-dark);
    --cockpit-logo-pastille: oklch(0.32 0.006 285.885);
}

/* Full-viewport layout — no second background under short pages. */
html,
body,
.fi-body,
.fi-layout,
.fi-main-ctn,
.fi-simple-layout {
    min-height: 100dvh;
}

/* One background color, light and dark. */
.fi-body {
    background-color: var(--cockpit-bg-light);
}

.dark .fi-body {
    background-color: var(--cockpit-bg-dark);
}

/*
 * Page header — Filament's default (.fi-header-heading) is quite
 * heavy (text-3xl font-bold) and sits right under the breadcrumbs
 * (only 8px gap). Toned down for a more modern, less "shouty" look,
 * with proper breathing room above.
 */
.fi-breadcrumbs {
    margin-bottom: 1rem;
}

.fi-header-heading {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: normal;
    margin-top: 0.25rem;
}

/*
 * Dashboard chart widgets — CSS Grid already stretches each widget's
 * outer cell to match its row (default align-items: stretch on
 * .fi-grid), but the visible card (.fi-section, with the border and
 * background) only fills its own content by default (height: auto),
 * so it doesn't actually reach that stretched height. A plain
 * height: 100% chain down to the canvas fixes that — deliberately
 * NOT flex/min-height:0 here, which caused runaway canvas growth
 * last time; height: 100% can't exceed its parent, so it's safe.
 */
.fi-wi-chart > .fi-section {
    height: 100%;
}

.fi-wi-chart .fi-section-content-ctn,
.fi-wi-chart .fi-section-content,
.fi-wi-chart .fi-wi-chart-frame,
.fi-wi-chart .fi-wi-chart-canvas-ctn {
    height: 100%;
}

/*
 * Brand lockup (top-left of the sidebar / topbar): the 321 mark
 * followed by the word "Cockpit" — see
 * resources/views/filament/logo.blade.php.
 *
 * The mark's shapes are filled with currentColor, so only a color has
 * to be set here instead of shipping one SVG per theme. That color is
 * scoped to the <svg> and NOT to .fi-logo itself, which also contains
 * the word — coloring the container would drag the wordmark to brand
 * yellow along with the mark and make it hard to read.
 *
 * Filament sizes the wrapping .fi-logo div via brandLogoHeight and
 * already gives it display: flex; the mark carries no width/height
 * attributes, so it has to be told to fill that height and let its
 * viewBox determine its width.
 */
.fi-logo {
    align-items: center;
    gap: 0.75rem;
}

.fi-logo > svg {
    display: block;
    height: 100%;
    width: auto;
    color: var(--cockpit-logo-light);
}

.dark .fi-logo > svg {
    color: var(--cockpit-logo-dark);
}


/*
 * Edit slide-overs (clients, sites, tags, users, responsables).
 * Filament caps the panel with a fixed max-width from its modalWidth
 * enum; none of those values is viewport-relative, so the width is set
 * here instead and no modalWidth is declared on the actions.
 *
 * Only from `lg` up — below that a 40vw panel would be unusably narrow,
 * and Filament's own full-width behaviour on small screens is right.
 */
@media (min-width: 1024px) {
    .fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
        max-width: 40vw;
    }
}

/*
 * Every field in a slide-over stacks, whatever the schema declares.
 * The resource forms are already single-column, but the schema's own
 * root grid still comes through as two columns, and any future
 * ->columns(2) on a form would silently split the panel again. A 40vw
 * panel is too narrow for side-by-side fields either way.
 */
.fi-modal.fi-modal-slide-over .fi-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/*
 * Client fiche header: pastille, then the name stacked over the site
 * count, 3px off the pastille. Filament's Flex/Group gaps are set by
 * utility classes, so they're overridden rather than configured.
 */
.cockpit-client-header {
    gap: 16px;
    align-items: center;
}

.cockpit-client-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/*
 * Global-search command palette.
 *
 * Hosts Filament's GlobalSearch component in a dialog. Filament styles
 * its results container as a dropdown anchored to the topbar
 * (position: absolute, width: 100vw capped at container-sm, pinned to
 * the inline end), so inside the palette it has to be put back in the
 * flow — otherwise the results hang off the panel instead of sitting
 * under the field.
 */
[x-cloak] {
    display: none !important;
}

.cockpit-search-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
}

.cockpit-search-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: color-mix(in oklab, var(--cockpit-bg-dark) 55%, transparent);
}

.cockpit-search-modal-panel {
    position: relative;
    width: 100%;
    max-width: 40rem;
    max-height: 70vh;
    overflow: auto;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--cockpit-surface-light);
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.25),
        0 8px 10px -6px rgb(0 0 0 / 0.25);
}

.dark .cockpit-search-modal-panel {
    background-color: var(--cockpit-surface-dark);
}

/* The palette's own field spans the panel; no topbar margins. */
.cockpit-search-modal-panel .fi-global-search-ctn {
    margin: 0;
    display: block;
}

.cockpit-search-modal-panel .fi-global-search-results-ctn {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    box-shadow: none;
    background-color: transparent;
    --tw-ring-color: transparent;
}

/*
 * The topbar field is a trigger only — the caret is suppressed in JS,
 * this just stops it from looking like somewhere you can type.
 */
.fi-topbar .fi-global-search-field input {
    cursor: pointer;
}