@font-face {
    font-family: appfont;
    src: url(../fonts/OpenSans-VariableFont_wdth_wght.ttf);
}

    :root {
    --border-radius: 8px;
    --box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 0 10px rgba(0, 0, 0, 0.5);
    --primary-color: #00385e;
    --accent-color: #0d6cac;
    --accent-yellow: #ffc107;
    --accent-red: #e63946;
    --accent-green: #2a9d8f;
    --accent-purple: #9b5de5;
    --accent-orange: #f4a261;
    --accent-brown: #8d6e63;
    --accent-violet: #8a2889;
    --neutral-white: #f1f1f1;
    --accent-coral: #ff6f61;
    --accent-forest: #6a994e;
    --accent-gold: #ffd166;
    --accent-teal: #009fbe;
    --accent-terra: #e07a5f;
    --neutral-gray: #e0e0e0;
    --small-screen: 640px;
    --large-screen: 1024px;
    --small-padding: 10px;
    --large-padding: 30px;

    /* ── Type scale ──────────────────────────────────────────────────────────
       Canonical font sizes for all app text. Root is 14px (1rem), so these map
       to Tailwind's default scale and the generated --text-* tokens. Snap every
       text font-size to the nearest token; icon glyph sizes stay off this scale. */
    --fs-2xs: 0.65rem;    /* badges, micro uppercase labels */
    --fs-xs: 0.75rem;     /* captions, meta, chips, kickers, breadcrumbs */
    --fs-sm: 0.875rem;    /* secondary text, buttons, nav text, form inputs */
    --fs-base: 1rem;      /* body, table cells, list items, data-card values */
    --fs-md: 1.125rem;    /* emphasized values, card subtitles */
    --fs-lg: 1.25rem;     /* card / section titles (h3), dialog titles */
    --fs-xl: 1.5rem;      /* page-header title (h2), KPI value */
    --fs-2xl: 1.875rem;   /* page hero (h1 / welcome) */
}

body {
    margin: 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    background: #e8f0f6;
}

html {
    font-size: 14px;
    height: 100%;
}

html, p, input, button, select, option {
    color: rgb(50, 50, 50);
    font-family: appfont;
}

input {
    font-weight: 600;
}

.box {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

button.box {
    cursor: pointer;
    transition: all 0.3s;
}

    button.box:hover {
        background-color: rgba(0, 0, 0, 0.1);
        filter: contrast(95%);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 255px 12px 225px 12px/12px 230px 12px 250px;
    }

input.box {
    transition: all 0.3s;
    padding: 10px;
    outline: none;
}

    input.box:focus {
        border: 2px solid rgba(0, 0, 0, 0.8);
    }

main {
    display: grid;
    overflow: auto;
}

content {
    padding: 10px;
    max-width: 100vw;
}

.handdrawn {
    background-color: rgba(0, 0, 0, 0.05);
    filter: contrast(90%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

button.handdrawn {
    cursor: pointer;
    transition: all 0.3s;
}

    button.handdrawn:hover {
        background-color: rgba(0, 0, 0, 0.1);
        filter: contrast(95%);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 255px 12px 225px 12px/12px 230px 12px 250px;
    }

input.handdrawn {
    transition: all 0.3s;
    padding: 10px;
    outline: none;
}

    input.handdrawn:focus {
        border: 2px solid rgba(0, 0, 0, 0.8);
    }

.handdrawnicon {
    color: rgb(50, 50, 50);
}

.center-v {
    display: flex;
    align-items: center;
}

@media (max-width:500px) {
    content {
        padding: 10px;
    }
}
h1 {
    margin: 0px 0 0 0;
    padding: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
}
h2 {
    font-size: var(--fs-xl);
    margin-bottom: .5rem;
    font-weight: 600;
    color: #222;
}h3 {
    font-size: var(--fs-lg);
    margin: 0;
    margin-left: var(--border-radius);
    margin-bottom: .5rem;
    font-weight: 600;
}

/* ── Split-view panes: shrink-to-fit tables ──────────────────────────────────────
   Global (non-isolated) because the flex chain spans three isolated components:
   SplitView (.view-pane), Card (.card/.card-content) and Table (.table/.list). The split
   panes are bounded scrollers on every viewport (see PageLayout/SplitView .razor.css),
   so a pane's table card may shrink to the remaining pane height and scroll its
   own body — flex: 0 1 auto so a short table keeps its content height (no stretched
   whitespace) while a tall one compresses to the pane. The vh cap from Table.razor.css
   is lifted here; layouts whose chain isn't flex simply keep that cap.

   Both panes take part. The main pane is a column unconditionally — it is the page's
   primary content and always leads with its table; the aside only becomes one when it
   actually hosts a scroll-body list, so asides made of detail grids, prose or forms keep
   their plain block flow (and with it the margin collapsing their spacing was tuned
   against). That guard is also what keeps the `overflow: hidden` below off cards whose
   pane never established the height bound in the first place.

   Both of the Table component's renderings take part: .table is the classic one, .list the
   mobile/toggled one, and .scroll-body marks either as the pane's primary. They are matched
   together throughout so the chain never breaks on a list⇄table switch — only the last rule
   below is table-only, being about the grid .table happens to be. */
.view-pane.left,
.view-pane.right:has(:is(.table, .list).scroll-body) {
    display: flex;
    flex-direction: column;
}

/* In overlay mode the aside's content hangs off .aside-inner — the absolutely positioned
   clip window that holds the panel at its final width (see SplitView.razor.css) — so that,
   not the pane, is where the chain starts. The pane's own declaration above is inert there:
   every one of its children is out of flow. */
.view-pane.right > .aside-inner:has(:is(.table, .list).scroll-body) {
    display: flex;
    flex-direction: column;
}

.view-pane .card:has(> .card-content > :is(.table, .list).scroll-body) {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;               /* the inner .table-wrapper / .list-items scrolls, not the card */
    display: flex;
    flex-direction: column;
}

.view-pane .card > .card-content:has(> :is(.table, .list).scroll-body) {
    flex: 0 1 auto;
    min-height: 0;
}

.view-pane :is(.table, .list).scroll-body {
    --table-body-max-height: none;  /* shrink with the flex chain instead of the vh cap */
    flex: 0 1 auto;
    min-height: 0;
}

/* .table is a grid; let its single row shrink with the flex-constrained height so the wrapper
   scrolls instead of overflowing. (.list is already a flex column — see Table.razor.css.) */
.view-pane .table.scroll-body {
    grid-template-rows: minmax(0, 1fr);
}

/* A Pivot hosting the pane's table (WarehouseDetails' section tabs in the main pane, the tab
   strip every aside is built from) puts the Card one level deeper than the direct-Card case
   above: .view-pane[ > .aside-inner] > .pivot-root > .pivot-content > .card. The pivot's own
   content wrappers (.pivot-content/-all, .pivot-panel) already shrink (see Pivot.razor.css),
   but .pivot-root sits outside that chain — so the pane-height bound never reached the Card and
   the table grew unbounded, scrolling the whole pane instead of its body.
   Fold the pivot-root into the shrink chain whenever it hosts a scroll-body table *or* list. */
:is(.view-pane, .view-pane.right > .aside-inner) > .pivot-root:has(:is(.table, .list).scroll-body) {
    flex: 0 1 auto;
    min-height: 0;
}

/* ── Split-view header alignment ─────────────────────────────────────────────────
   Global (non-isolated) for the same reason as the block above: it spans SplitView
   (.view-pane), Card (a Title renders its <h3> *outside* the card box), TitleHeader
   (<h2>) and Pivot (its tab bar likewise sits above the card). Those headers have
   different natural heights — an h3 is one 1.25rem line, a tab bar is a line plus
   0.55rem of button padding, and the tabs themselves drop to 1.125rem when collapsed
   — so on a details page with a titled main table and a tabbed aside the two cards
   started at different y.

   Where a page has a header on both sides, pin them to one shared height so both
   cards start on the same line, and centre each header's *text* in that height so the
   title and the tab labels land on the same line as each other. Centring is what makes
   the two exact: a tab's own align-items:center puts its label's line box on the
   button's centre, the bar's align-items:center puts the button on the header's centre,
   and --split-head-lead puts the title's line box there too — none of which depends on
   the tab font size, which differs between the collapsed (1.125rem) and uncollapsed
   (1.25rem) pivot variants.

   --split-head-h must clear the *tallest* natural header — the uncollapsed pivot-xl bar
   at 1.1rem of button padding + 1.875rem of line box = 2.975rem — or that side
   overshoots and the alignment breaks; --split-head-gap mirrors .pivot-content's
   padding-top, so the bar's share of the height is the total minus that gap. The custom
   properties exist only when the guard matches — everywhere else the calc()s below are
   invalid at computed-value time and fall back to min-height:auto / padding-top:0, i.e.
   the untouched natural layout. */
.view-scroll:has(> .view-pane.left > :is(h2, h3, .pivot-root):first-child):has(.view-pane.right .pivot-bar) {
    --split-head-h: 3.75rem;
    --split-head-gap: 0.75rem;
    /* Half the slack left over once the title's single line box is placed. */
    --split-head-lead: calc((var(--split-head-h) - var(--split-head-gap) - var(--fs-lg) * 1.5) / 2);
}

/* Only the pane's leading header takes part — a second titled Card further down the
   main pane keeps its normal spacing. Padding rather than flex centring on purpose:
   a flex h3 turns its leading icon into a sibling flex item and knocks it off the
   text baseline that inline flow puts it on. */
.view-pane > :is(h2, h3):first-child {
    min-height: calc(var(--split-head-h) - var(--split-head-gap));
    padding-top: var(--split-head-lead);
    margin-bottom: var(--split-head-gap, 0.5rem);
}

.view-pane > .pivot-root:first-child > .pivot-bar,
.view-pane > .aside-inner > .pivot-root:first-child > .pivot-bar {
    min-height: calc(var(--split-head-h) - var(--split-head-gap));
    align-items: center;
}