/* ==========================================================================
   Structural theme for Filament v5
   ==========================================================================
   The shell is a frame: the whole panel — topbar, sidebar and content — sits on
   a canvas, inset by `--st-frame-inset`, with a border and a corner radius.

   Four things in here are deliberate, and each one was learned the hard way on a
   real panel. They are worth keeping:

   1. Everything is UNLAYERED, and this file is loaded after Filament's. A rule
      inside `@layer components` loses to an unlayered rule whatever the source
      order, and Filament declares `min-height` on `.fi-main-ctn` and a height on
      the sidebar in its own stylesheet — so layered overrides of those silently
      do nothing.

   2. The frame is sized with `min-height`, never a fixed height. A fixed height
      makes the page scroll *inside* the frame, which puts a scrollbar through
      the middle of the shell; and the content that then overflows paints over the
      frame's rounded corners. `min-height` lets the frame be a full page that
      grows, and the document scrolls as one thing.

   3. The root element paints the canvas AND declares its `color-scheme`. The
      canvas is painted before the body is laid out, so a stylesheet rule is the
      only thing that can set it in time — otherwise the browser falls back to the
      operating system's preference and a light panel flashes black on a
      dark-mode machine.

   4. Each pane rounds the edge it owns rather than the frame clipping its
      children. `overflow: hidden` on the frame would also clip any dropdown that
      is not teleported to the body.
   ========================================================================== */

:root {
    --st-frame-inset: 1.25rem;
    --st-frame-radius: 1.75rem;
    --st-topbar-height: 5rem;
    --st-sidebar-width: 16.25rem;
    --st-collapsed-sidebar-width: 4.5rem;
    --st-sidebar-padding: 1.25rem;
    --st-content-max-width: 90rem;
    --st-content-padding: 1.5rem;

    --st-canvas: #e9edf3;
    --st-surface: #f7f9fb;
    --st-border: rgb(15 23 42 / 0.08);

    /* The scrollbar, so a scrolling pane matches the shell instead of the OS. */
    --st-scrollbar-thumb: rgb(203 213 225);
}

.dark {
    --st-canvas: #060b14;
    --st-surface: #0b1220;
    --st-border: rgb(255 255 255 / 0.08);
    --st-scrollbar-thumb: rgb(71 85 105);
}

/* --------------------------------------------------------------------------
   The root canvas
   -------------------------------------------------------------------------- */
html:has(.st-body),
.st-body {
    background-color: var(--st-canvas);
}

html:has(.st-body) {
    /* Declared here rather than left to the UA: `color-scheme` decides what the
       browser paints before the body exists, and on a dark-mode machine the
       default is black. */
    color-scheme: light;
}

html.dark:has(.st-body) {
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   The frame
   -------------------------------------------------------------------------- */
.st-frame {
    display: flex;
    flex-direction: column;
    background-color: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-frame-radius);
}

/* Filament wraps the topbar in this. Outside the frame it must not paint a
   square of background around the topbar's rounded corners. */
.fi-topbar-ctn {
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Desktop: inset the shell on the canvas
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .st-body {
        padding: var(--st-frame-inset);
    }

    /* `min-height`, so the frame is never shorter than the window but grows with
       its content. See note 2 at the top of this file. */
    .st-frame,
    .st-frame-body,
    .st-frame-main,
    .fi-body-has-topbar .fi-sidebar {
        height: auto;
        min-height: calc(100dvh - var(--st-topbar-height) - (2 * var(--st-frame-inset)));
    }

    .st-frame-body {
        display: flex;
        align-items: stretch;
        /* The frame itself has all four corners rounded, but it cannot clip its
           children - `overflow: hidden` would also clip any dropdown that is not
           teleported to the body. So each layer rounds its own bottom corners,
           including this one: it paints a background, and a square one between
           the frame and the panes covers the frame's curve. */
        border-end-start-radius: var(--st-frame-radius);
        border-end-end-radius: var(--st-frame-radius);
    }

    .st-frame-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Each pane rounds the edge it owns, so the frame needs no `overflow`. */
    .fi-sidebar {
        border-end-start-radius: var(--st-frame-radius);
    }

    .st-frame-main {
        border-end-end-radius: var(--st-frame-radius);
    }

    .fi-topbar {
        border-start-start-radius: var(--st-frame-radius);
        border-start-end-radius: var(--st-frame-radius);
    }

    /* The topbar lives inside the frame, so it carries the frame's surface and the
       divider that separates it from the content below. */
    .fi-topbar {
        min-height: var(--st-topbar-height);
        padding-inline: var(--st-content-padding);
        background-color: var(--st-surface);
        border-block-end: 1px solid var(--st-border);
    }

    .st-main {
        padding-inline: var(--st-content-padding);
        padding-block: var(--st-content-padding);
    }

    .st-main.fi-width-7xl {
        max-width: var(--st-content-max-width);
    }

    /* The nav scrolls rather than the sidebar clipping: the profile menu lives in
       the sidebar footer and opens upwards, so `overflow: hidden` here would cut
       it off. `min-height: 0` lets the nav shrink inside the sidebar's flex
       column, which is what allows it to scroll at all. */
    .fi-sidebar-nav {
        min-height: 0;
        overflow-y: auto;
    }
}

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */
.st-body ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.st-body ::-webkit-scrollbar-track {
    background: transparent;
}

.st-body ::-webkit-scrollbar-thumb {
    background-color: var(--st-scrollbar-thumb);
    border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   The sign-in screen
   --------------------------------------------------------------------------
   Filament renders the auth pages from `components/layout/simple` rather than
   `components/layout/index`, so they are a different shell - but they are the
   first thing anyone sees of the panel, and leaving them as Filament's default
   grey would mean the transformation stops at the door.

   Same canvas, same surface, same corner: the card is the frame with one pane
   instead of three. It needs no view override, because the classes the simple
   layout already ships are enough to address it.
   -------------------------------------------------------------------------- */
html:has(.fi-simple-layout) {
    background-color: var(--st-canvas);
    /* Declared for the same reason as the panel shell: the browser paints the
       canvas before the body exists, so on a dark-mode machine the default is
       black and the page flashes. */
    color-scheme: light;
}

html.dark:has(.fi-simple-layout) {
    color-scheme: dark;
}

.fi-simple-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--st-frame-inset);
    background-color: var(--st-canvas);
}

.fi-simple-main-ctn {
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.fi-simple-main {
    background-color: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-frame-radius);
    padding: var(--st-content-padding);
}

.fi-simple-layout-header {
    padding-inline: var(--st-content-padding);
}