@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 main pane: 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). The split
   panes are bounded scrollers on every viewport (see PageLayout/SplitView .razor.css),
   so the primary table's 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. */
.view-pane.left {
    display: flex;
    flex-direction: column;
}

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

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

.view-pane.left .table.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. */
    grid-template-rows: minmax(0, 1fr);
}