/**
 * Layout rules for Wicket Oat's own components. They live here rather than in
 * style="" attributes so the markup works under Wicket's strict Content Security
 * Policy, which blocks inline styles.
 */
/*
 * Wicket renders a hidden component that's updated over Ajax as an empty placeholder
 * with the hidden attribute. Oat's display rules for buttons and the like would
 * otherwise beat the browser's [hidden] rule and show it.
 */
[data-wicket-placeholder] {
    display: none;
}

.oat-app-main {
    padding-inline: var(--space-6);
}

/* The skip link moves focus to <main>; it needs no focus ring of its own */
.oat-app-main:focus {
    outline: none;
}

/*
 * OatAppLayout's skip link: the first stop for Tab, shown only while it has focus, so
 * keyboard and screen-reader users can jump past the navigation to the content.
 */
.oat-skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-medium);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-4)));
}

.oat-skip-link:focus {
    transform: none;
}

.oat-topnav-extra {
    flex: 1;
}

.oat-breadcrumb {
    font-size: var(--text-7);
}

/*
 * OatDialog's own tag only wraps its trigger button and the <dialog>, which shows in the
 * top layer. It gets no box of its own, so the trigger lays out as if it stood there alone.
 */
.oat-dialog {
    display: contents;
}

/*
 * An OatDialog inside another Wicket form renders its own form as a <div>, because
 * HTML forbids nested forms. Mirror Oat's "dialog > form > ..." rules for that case,
 * and undo the padding Oat gives to any "dialog > div".
 */
dialog > div.oat-dialog-form {
    padding: 0;
    overflow: visible;
}

dialog > div.oat-dialog-form > header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-6);
    padding-block-end: 0;
}

dialog > div.oat-dialog-form > header > :is(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0;
}

dialog > div.oat-dialog-form > :is(p, div, section) {
    padding: var(--space-6);
    overflow-y: auto;
}

dialog > div.oat-dialog-form > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-6);
    padding-block-start: 0;
}

.oat-theme-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.oat-theme-switcher a {
    text-decoration: none;
    padding: var(--space-1);
    border-radius: var(--radius-small);
}

.oat-theme-switcher a[aria-current="true"] {
    outline: 1px solid var(--border);
}

/* Required Oat form fields (BaseOatField sets data-required on the field container) */
[data-required] > label::after,
[data-required] > legend::after {
    content: " *";
    color: var(--danger);
}

/* Oat draws a dropdown arrow on every <select>; a multi-select (OatListMultipleChoice) has none */
select[multiple] {
    background-image: none;
}

/*
 * Compact density (OatDensity.COMPACT sets data-density="compact"): a tighter spacing
 * scale and smaller body text, for forms and tables in data-heavy apps. Oat sizes its
 * buttons, fields and table cells from these tokens, so it works with every theme.
 */
[data-density="compact"] {
    --space-2: .3125rem;
    --space-3: .5rem;
    --space-4: .75rem;
    --space-5: 1rem;
    --space-6: 1rem;
    --text-regular: var(--text-7);
}

/* A part pinned to Oat's own spacing (OatDensity.DEFAULT) inside a compact page: Oat's values */
[data-density="default"] {
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --text-regular: var(--text-6);
}

/* A pinned part's body text follows its density (on <html>, font-size would change the rem) */
[data-density]:not(html) {
    font-size: var(--text-regular);
}

/*
 * A form field with a prefix or suffix (BaseOatInputField) wraps its input in Oat's
 * fieldset.group. Give the group the spacing a plain input has - Oat drops the input's
 * top margin inside a group and gives every fieldset a bottom margin - and draw the
 * addons' border red with the input's when the field is invalid.
 */
[data-field] > fieldset.group {
    margin-block: var(--space-1) 0;
}

/*
 * Let an input group shrink in a narrow column: browsers keep a fieldset at least as
 * wide as its content, and its inputs, as flex items, at their natural width (wide for
 * date inputs), so it would overflow the column.
 */
fieldset.group,
fieldset.oat-range-field {
    min-inline-size: 0;
}

fieldset.group > :is(input, select, textarea) {
    min-width: 0;
}

fieldset.group:has(> [aria-invalid="true"]) > :is(label, legend) {
    border-color: var(--danger);
}

/* OatFieldset's optional description, right under its legend (a full row of a grid) */
.oat-fieldset-description {
    grid-column: 1 / -1;
    margin-block: 0 var(--space-4);
    font-size: var(--text-7);
}

/*
 * In development mode Wicket keeps its own tags (<wicket:panel>, <wicket:border>, ...)
 * in the page. Lay out their content as if they weren't there, as in production, so e.g.
 * an OatFieldset with Oat.Behaviors.row() puts its fields in the grid either way.
 */
wicket\:panel,
wicket\:border,
wicket\:body,
wicket\:container,
wicket\:extend,
wicket\:fragment,
wicket\:enclosure {
    display: contents;
}

/*
 * A button whose Ajax request is running (AjaxBusyBehavior sets aria-busy). Oat draws
 * aria-busy as a 1.5rem spinner in the primary color, which would be too big for a
 * button and invisible on a primary one: size it to the text and draw it in the
 * text's color instead.
 */
:is(button, a.button, [type="submit"], [type="button"])[aria-busy="true"] {
    cursor: progress;
}

:is(button, a.button)[aria-busy="true"]::before {
    width: 1em;
    height: 1em;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
}

/* A sidebar link's badge (MenuItem.withBadge), at the end of the link */
aside[data-sidebar] nav a > .badge {
    align-self: center;
    margin-inline-start: auto;
    padding-block: 0;
    padding-inline: var(--space-2);
}

/*
 * OatDataTable. Sortable headers keep the header color and show the sort order with an
 * arrow (screen readers get aria-sort instead: the "/ ''" hides the arrow from them).
 */
th:is(.wicket_orderNone, .wicket_orderUp, .wicket_orderDown) a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
}

th.wicket_orderNone a::after {
    content: "↕";
    content: "↕" / "";
    opacity: .35;
}

th.wicket_orderUp a::after {
    content: "↑";
    content: "↑" / "";
}

th.wicket_orderDown a::after {
    content: "↓";
    content: "↓" / "";
}

/* The toolbar (yours, on the left) and the tools (columns, export, on the right) above the table */
.oat-table-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}

.oat-table-bar:not(:has(> *)) {
    display: none;
}

.oat-table-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

.oat-table-tools {
    gap: var(--space-2);
    margin-inline-start: auto;
}

.oat-column-chooser {
    margin: 0;
}

.oat-column-chooser label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* A column hidden with the column chooser */
.oat-column-hidden {
    display: none;
}

/*
 * OatDataTable renders each row in a <tbody> of its own, followed by its details row
 * (OatRowDetailsColumn). Oat draws the line between rows on "tbody tr"; draw it on the
 * <tbody> instead, so a row and its details stay together.
 */
tbody.oat-row {
    border-bottom: 1px solid var(--border);
}

tbody.oat-row:last-of-type {
    border-bottom: none;
}

tbody.oat-row > tr {
    border-bottom: none;
}

.oat-row-details > td {
    padding-block-start: 0;
    padding-block-end: var(--space-4);
}

:is(th, td).oat-details-toggle {
    width: 1%;
}

.oat-details-toggle .oat-icon {
    transition: transform var(--transition-fast);
}

.oat-details-toggle [aria-expanded="true"] .oat-icon {
    transform: rotate(90deg);
}

/* OatEditableColumn: the value as a quiet button, and the editor in its place */
.oat-editable {
    justify-content: start;
    min-width: 3rem;
    margin-inline: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
    font-weight: inherit;
    text-decoration: underline dotted var(--muted-foreground);
    text-underline-offset: 3px;
}

.oat-editing {
    margin: 0;
}

/* One line however narrow the column: the field gives up width, the buttons don't wrap */
.oat-editing > .hstack {
    flex-wrap: nowrap;
}

.oat-editing input {
    flex: 0 1 8rem;
    width: 8rem;
    min-width: 3rem;
    height: 2rem;
}

.oat-editing button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

.oat-editing-error {
    display: block;
    margin-block-start: var(--space-1);
    color: var(--danger);
}

.oat-bulk-actions {
    margin-block-end: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--muted);
    border-radius: var(--radius-medium);
}

/* OatSelectionColumn: as narrow as its checkboxes, and selected rows highlighted */
:is(th, td).oat-select {
    width: 1%;
}

tbody tr:has(> td.oat-select input:checked) {
    background-color: var(--accent);
}

/* OatBooleanColumn's read-only checkbox: disabled, but not faded like an unavailable control */
input[type="checkbox"].oat-readonly:disabled {
    opacity: 1;
    cursor: default;
}

/* A destructive entry in a dropdown menu (OatActionsColumn's setVariant(DANGER)) */
[role="menuitem"][data-variant="danger"] {
    color: var(--danger);
}

/* OatPageHeader: breadcrumb, then the title on one side and the actions on the other */
.oat-page-header {
    margin-block-end: var(--space-6);
}

.oat-page-header nav ol {
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--muted-foreground);
}

.oat-crumb-separator {
    margin-inline-start: var(--space-2);
    color: var(--faint-foreground);
}

.oat-page-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.oat-page-header-title > h1 {
    margin: 0;
}

.oat-page-header-title > p {
    margin: var(--space-1) 0 0;
}

/* OatStatCard: a label, a large figure and how it changed */
.oat-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.oat-stat-label {
    font-size: var(--text-7);
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
}

.oat-stat-value {
    font-size: var(--text-2);
    font-weight: var(--font-semibold);
    line-height: 1.2;
}

.oat-stat-footer {
    font-size: var(--text-8);
}

/* OatDescriptionList: labels next to their values, or above them on narrow screens */
dl.oat-dl {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    align-items: baseline;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.oat-dl-item {
    display: contents;
}

dl.oat-dl dt {
    font-size: var(--text-7);
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
}

dl.oat-dl dd {
    margin: 0;
}

@media (max-width: 768px) {
    dl.oat-dl {
        grid-template-columns: 1fr;
        row-gap: var(--space-1);
    }

    dl.oat-dl dd {
        margin-block-end: var(--space-3);
    }
}

/*
 * OatSplitButton: Oat's button group (menu.buttons) rounds the outer corners of each
 * item's button; the menu's button sits inside <ot-dropdown>, so round it here.
 */
menu.buttons.oat-split-button {
    margin: 0;
}

menu.buttons li ot-dropdown > button {
    border-radius: 0;
}

menu.buttons > li:last-child ot-dropdown > button {
    border-start-end-radius: var(--radius-medium);
    border-end-end-radius: var(--radius-medium);
}

menu.buttons > li:first-child ot-dropdown > button {
    border-start-start-radius: var(--radius-medium);
    border-end-start-radius: var(--radius-medium);
}

/* OatPopover: room around its content */
ot-dropdown > .oat-popover {
    padding: var(--space-4);
    min-width: 16rem;
    max-width: min(28rem, 100vw - 2rem);
}

/*
 * OatDateRangeField: its label is a <legend> (it names two inputs), so its fieldset
 * drops Oat's fieldset frame and the legend looks like any field's label.
 */
fieldset.oat-range-field {
    border: 0;
    padding: 0;
}

/* OatCustomField uses the same fieldset (class oat-range-field) for its inputs */

fieldset.oat-range-field > legend {
    padding: 0;
}

fieldset.oat-range-field fieldset.group {
    margin-block: var(--space-1) 0;
}

/* OatAutoCompleteField: Wicket's suggestion list, looking like Oat's dropdown menu */
.wicket-aa-container.oat-autocomplete {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);
}

/* In a dialog or popover, wicket-oat.js shows the list as a popover; keep Wicket's position and size */
.wicket-aa-container[popover] {
    inset: auto;
    margin: 0;
    padding: 0;
    color: inherit;
}

.oat-autocomplete ul {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
}

.oat-autocomplete li {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-7); /* as in Oat's inputs */
    cursor: pointer;
}

.oat-autocomplete li.selected {
    background-color: var(--accent);
}

/* OatTimeline: events along a line, each with a marker colored by its variant */
.oat-timeline {
    margin: 0;
}

.oat-timeline-event {
    position: relative;
    padding-inline-start: var(--space-6);
    padding-block-end: var(--space-5);
}

.oat-timeline-event::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(.375rem - 1px);
    inset-block: .5rem 0;
    border-inline-start: 2px solid var(--border);
}

.oat-timeline-event:last-child::before {
    display: none;
}

.oat-timeline-event::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .3rem;
    width: .75rem;
    height: .75rem;
    border-radius: var(--radius-full);
    background-color: var(--_variant-color, var(--muted-foreground));
    box-shadow: 0 0 0 3px var(--background);
}

.oat-timeline-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-3);
}

.oat-timeline-heading time {
    font-size: var(--text-7);
}

.oat-timeline-event > p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-7);
}

/* OatWizard: numbered steps - done, current, upcoming - joined by a line */
.oat-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-6);
    font-size: var(--text-7);
}

.oat-steps > li {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.oat-steps > li:not(:last-child)::after {
    content: "";
    width: var(--space-6);
    border-top: 1px solid var(--border);
}

.oat-steps a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted-foreground);
}

.oat-steps a:not([href]) {
    cursor: default;
}

.oat-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
}

.oat-steps [data-state="current"] a {
    color: var(--foreground);
    font-weight: var(--font-medium);
}

.oat-steps [data-state="current"] .oat-step-number {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.oat-steps [data-state="done"] a {
    color: var(--foreground);
}

.oat-steps [data-state="done"] .oat-step-number {
    border-color: var(--primary);
    color: var(--primary);
}

.oat-wizard-form > footer {
    margin-block-start: var(--space-6);
}

.oat-wizard-spacer {
    flex: 1;
}

/* OatLoginForm: the remember-me checkbox and the forgot-password link on one line */
.oat-login-form {
    gap: var(--space-2);
}

.oat-login-options {
    font-size: var(--text-7);
}

.oat-login-options [data-field] {
    margin: 0;
}

/* OatMasterDetail: the list beside the selected item's details, one at a time on phones */
.oat-master-detail {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-6);
}

.oat-detail-back {
    display: none;
}

@media (max-width: 768px) {
    .oat-master-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .oat-master-detail[data-showing="detail"] .oat-master,
    .oat-master-detail:not([data-showing="detail"]) .oat-detail {
        display: none;
    }

    .oat-detail-back {
        display: inline-flex;
        margin-block-end: var(--space-4);
    }
}

/* OatMessageList: avatar beside author, time and text */
.oat-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
}

.oat-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.oat-message-body {
    flex: 1;
    min-width: 0;
}

.oat-message-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
}

.oat-message-heading time {
    font-size: var(--text-7);
}

.oat-message-body > p {
    margin: var(--space-1) 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ContextMenuBehavior: the menu at the pointer, looking like Oat's dropdown menu */
.oat-context-menu {
    position: fixed;
    margin: 0;
    min-width: 12rem;
    padding: var(--space-1);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);
}

.oat-context-menu [role="menuitem"] {
    display: flex;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    justify-content: start;
    cursor: pointer;
}

.oat-context-menu [role="menuitem"]:is(:hover, :focus) {
    background-color: var(--accent);
    outline: none;
}

/* OatLoadMoreList: the batches are only containers; the items form one list */
.oat-load-more-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Hidden once everything is loaded: the button is then Wicket's placeholder */
.oat-load-more:has(> [data-wicket-placeholder]) {
    display: none;
}

.oat-load-more-batch {
    display: contents;
}

.oat-load-more {
    margin-block-start: var(--space-4);
}

/* OatMenuBar: a row of small buttons, links and menus */
.oat-menu-bar {
    gap: var(--space-1);
    margin: 0;
}

.oat-menu-bar a[aria-current] {
    background-color: var(--accent);
}

/*
 * OatSplitLayout: two panes, the first resizable with the browser's own handle (CSS
 * resize, no JavaScript). The oat-pane-N classes set its starting share.
 */
.oat-split {
    display: flex;
    min-height: 16rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.oat-split-pane {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: var(--space-4);
}

.oat-split-first {
    flex: 0 0 auto;
    width: 50%;
    min-width: 10%;
    max-width: 90%;
    resize: horizontal;
    border-inline-end: 1px solid var(--border);
}

.oat-split-second {
    flex: 1;
}

/* The first pane's starting share; classes on the pane itself (see OatSplitLayout) */
.oat-pane-20 {
    width: 20%;
}

.oat-pane-30 {
    width: 30%;
}

.oat-pane-40 {
    width: 40%;
}

.oat-pane-50 {
    width: 50%;
}

.oat-pane-60 {
    width: 60%;
}

.oat-pane-70 {
    width: 70%;
}

.oat-pane-80 {
    width: 80%;
}

/* Stacked panes need a height to share; set your own on the component if 28rem doesn't fit */
.oat-split-vertical {
    flex-direction: column;
    height: 28rem;
}

.oat-split-first-vertical {
    width: auto;
    max-width: none;
    min-width: 0;
    height: 50%;
    min-height: 10%;
    max-height: 90%;
    resize: vertical;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
}

.oat-pane-v-20 {
    height: 20%;
}

.oat-pane-v-30 {
    height: 30%;
}

.oat-pane-v-40 {
    height: 40%;
}

.oat-pane-v-50 {
    height: 50%;
}

.oat-pane-v-60 {
    height: 60%;
}

.oat-pane-v-70 {
    height: 70%;
}

.oat-pane-v-80 {
    height: 80%;
}

@media (max-width: 768px) {
    .oat-split {
        flex-direction: column;
    }

    .oat-split-first:not(.oat-split-first-vertical) {
        width: auto;
        max-width: none;
        height: auto;
        resize: none;
        border-inline-end: 0;
        border-block-end: 1px solid var(--border);
    }
}

/* OatCookieConsent: a card at the bottom of the window until it is answered */
.oat-cookie-consent {
    position: fixed;
    inset-inline: var(--space-4);
    inset-block-end: var(--space-4);
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    max-width: 48rem;
    margin-inline: auto;
    padding: var(--space-4) var(--space-5);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-large);
}

.oat-cookie-consent p {
    flex: 1 1 20rem;
    margin: 0;
    font-size: var(--text-7);
}

/* OatIcon: the text's size and color, sitting on the text's line */
.oat-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/*
 * Charts (OatBarChart, OatColumnChart, OatLineChart, OatDonutChart, OatSparkline).
 * A fixed categorical palette, validated for colorblind separation, stepped for light
 * and dark, used in order; light-dark() follows the theme's color-scheme. Override the
 * --oat-chart-N variables to use your brand's colors. Marks wear these colors; text
 * stays in the theme's text colors.
 */
:root {
    --oat-chart-1: light-dark(#2a78d6, #3987e5);
    --oat-chart-2: light-dark(#eb6834, #d95926);
    --oat-chart-3: light-dark(#1baf7a, #199e70);
    --oat-chart-4: light-dark(#eda100, #c98500);
    --oat-chart-5: light-dark(#e87ba4, #d55181);
    --oat-chart-6: light-dark(#008300, #008300);
    --oat-chart-7: light-dark(#4a3aa7, #9085e9);
    --oat-chart-8: light-dark(#e34948, #e66767);
    --oat-chart-surface: var(--background);
}

.card {
    --oat-chart-surface: var(--card);
}

.oat-fill-1 { fill: var(--oat-chart-1); }
.oat-stroke-1 { stroke: var(--oat-chart-1); }
.oat-key-1 { background-color: var(--oat-chart-1); }
.oat-dot-1 { fill: var(--oat-chart-1); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-1 { fill: var(--oat-chart-1); fill-opacity: .1; stroke: none; }

.oat-fill-2 { fill: var(--oat-chart-2); }
.oat-stroke-2 { stroke: var(--oat-chart-2); }
.oat-key-2 { background-color: var(--oat-chart-2); }
.oat-dot-2 { fill: var(--oat-chart-2); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-2 { fill: var(--oat-chart-2); fill-opacity: .1; stroke: none; }

.oat-fill-3 { fill: var(--oat-chart-3); }
.oat-stroke-3 { stroke: var(--oat-chart-3); }
.oat-key-3 { background-color: var(--oat-chart-3); }
.oat-dot-3 { fill: var(--oat-chart-3); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-3 { fill: var(--oat-chart-3); fill-opacity: .1; stroke: none; }

.oat-fill-4 { fill: var(--oat-chart-4); }
.oat-stroke-4 { stroke: var(--oat-chart-4); }
.oat-key-4 { background-color: var(--oat-chart-4); }
.oat-dot-4 { fill: var(--oat-chart-4); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-4 { fill: var(--oat-chart-4); fill-opacity: .1; stroke: none; }

.oat-fill-5 { fill: var(--oat-chart-5); }
.oat-stroke-5 { stroke: var(--oat-chart-5); }
.oat-key-5 { background-color: var(--oat-chart-5); }
.oat-dot-5 { fill: var(--oat-chart-5); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-5 { fill: var(--oat-chart-5); fill-opacity: .1; stroke: none; }

.oat-fill-6 { fill: var(--oat-chart-6); }
.oat-stroke-6 { stroke: var(--oat-chart-6); }
.oat-key-6 { background-color: var(--oat-chart-6); }
.oat-dot-6 { fill: var(--oat-chart-6); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-6 { fill: var(--oat-chart-6); fill-opacity: .1; stroke: none; }

.oat-fill-7 { fill: var(--oat-chart-7); }
.oat-stroke-7 { stroke: var(--oat-chart-7); }
.oat-key-7 { background-color: var(--oat-chart-7); }
.oat-dot-7 { fill: var(--oat-chart-7); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-7 { fill: var(--oat-chart-7); fill-opacity: .1; stroke: none; }

.oat-fill-8 { fill: var(--oat-chart-8); }
.oat-stroke-8 { stroke: var(--oat-chart-8); }
.oat-key-8 { background-color: var(--oat-chart-8); }
.oat-dot-8 { fill: var(--oat-chart-8); stroke: var(--oat-chart-surface); stroke-width: 2px; }
.oat-area-8 { fill: var(--oat-chart-8); fill-opacity: .1; stroke: none; }

.oat-chart {
    margin: 0;
}

.oat-chart-title {
    margin-block-end: var(--space-3);
    font-weight: var(--font-medium);
}

.oat-chart-legend {
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-3);
    font-size: var(--text-7);
    color: var(--muted-foreground);
}

.oat-chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.oat-chart-key {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.oat-line-chart .oat-chart-key {
    height: 2px;
    border-radius: 1px;
}

/* Text on the plot: the theme's text colors, never the series color */
.oat-chart-value {
    font-size: var(--text-8);
    fill: var(--foreground);
    font-variant-numeric: tabular-nums;
}

.oat-chart-grid {
    stroke: var(--border);
    stroke-width: 1px;
}

.oat-chart-baseline {
    stroke: var(--muted-foreground);
    stroke-opacity: .5;
    stroke-width: 1px;
}

/* The hover band of a category: invisible, washed when hovered */
.oat-chart-hit {
    fill: transparent;
}

.oat-chart-hit:hover {
    fill: var(--foreground);
    fill-opacity: .05;
}

.oat-chart-data {
    margin-block-start: var(--space-3);
    font-size: var(--text-7);
}

/* Oat gives a <details>' content a margin; with .table's width: 100% it would overflow */
.oat-chart-data > .table {
    width: auto;
    min-width: 0;
}

.oat-chart-data th[scope="row"] {
    font-weight: var(--font-normal);
    color: var(--foreground);
}

.oat-chart-data td {
    font-variant-numeric: tabular-nums;
}

/* OatBarChart: category names beside their bars */
.oat-bars {
    display: grid;
    grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--space-1) var(--space-3);
}

.oat-bar-row {
    display: contents;
}

.oat-bar-label {
    font-size: var(--text-7);
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

.oat-bar-value {
    font-size: var(--text-8);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.oat-bar-svg {
    display: block;
    overflow: visible;
}

/* OatColumnChart, OatLineChart: ticks beside the plot, categories below it */
.oat-xy {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-2);
}

.oat-xy-ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(192px + 1em);
    margin-block: -.5em;
    font-size: var(--text-8);
    line-height: 1;
    color: var(--muted-foreground);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.oat-xy-plot {
    position: relative;
    height: 192px;
}

.oat-xy-svg {
    display: block;
    overflow: visible;
}

.oat-xy-layers > .oat-xy-svg {
    position: absolute;
    inset: 0;
}

.oat-xy-labels {
    grid-column: 2;
    display: flex;
    margin-block-start: var(--space-2);
    font-size: var(--text-8);
    color: var(--muted-foreground);
}

.oat-xy-labels > span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.oat-line-chart polyline {
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* OatDonutChart: the ring beside its legend of values and shares */
.oat-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
}

.oat-donut-ring {
    width: 10rem;
    flex-shrink: 0;
}

.oat-donut-svg {
    display: block;
    width: 100%;
    height: auto;
}

.oat-donut-track,
.oat-donut-segment {
    fill: none;
    stroke-width: 16;
}

.oat-donut-track {
    stroke: var(--muted);
}

.oat-donut-total {
    font-weight: var(--font-semibold);
    fill: var(--foreground);
}

.oat-donut-legend {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    font-size: var(--text-7);
    flex: 1 1 14rem;
}

.oat-donut-legend li {
    display: contents;
}

.oat-donut-value,
.oat-donut-share {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* OatSparkline: a quiet line, the latest value as a dot in the accent color */
.oat-sparkline {
    position: relative;
    display: block;
    height: 32px;
    min-width: 4rem;
}

.oat-sparkline-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 32px;
    overflow: visible;
}

.oat-sparkline-line {
    fill: none;
    stroke: var(--muted-foreground);
    stroke-opacity: .6;
    stroke-width: 1.5px;
    stroke-linejoin: round;
}

/* OatStatCard's trend: a sparkline under the figure */
.oat-stat-trend {
    margin-block: var(--space-1);
}

/* OatCrud: the search (if any) and "New" above the table */
.oat-crud-toolbar {
    justify-content: space-between;
}

.oat-crud-search {
    flex: 1 1 16rem;
    min-width: 0;
}

.oat-crud-toolbar > button {
    margin-inline-start: auto;
}

/*
 * OatTree and OatTableTree: Wicket's tree markup (tree-node, tree-subtree, tree-branch)
 * with Oat's tokens instead of Wicket's image themes. The expand buttons draw their
 * chevron with borders, so no images or icon fonts are needed.
 */
.oat-tree .tree-subtree {
    margin-inline-start: 0.75rem;
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--border);
}

.oat-table-tree .tree-subtree {
    padding-inline-start: 1.25rem;
}

:is(.oat-tree, .oat-table-tree) .tree-node {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 2rem;
}

.oat-junction {
    padding: 0;
    min-height: 0;
    background: none;
    border: 0;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-small);
    color: var(--muted-foreground);
}

.oat-junction:is(.oat-junction-expanded, .oat-junction-collapsed) {
    cursor: pointer;
}

.oat-junction-leaf {
    visibility: hidden;
}

.oat-junction:is(.oat-junction-expanded, .oat-junction-collapsed):hover {
    background-color: var(--accent);
    color: var(--foreground);
}

.oat-junction:is(.oat-junction-expanded, .oat-junction-collapsed)::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition-fast);
}

.oat-junction.oat-junction-expanded::before {
    transform: rotate(45deg);
}

.oat-tree-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-small);
    color: var(--foreground);
}

a.oat-tree-label {
    text-decoration: none;
}

a.oat-tree-label:hover,
a.oat-tree-label[aria-current] {
    background-color: var(--accent);
}

a.oat-tree-label[aria-current] {
    font-weight: var(--font-medium);
}

.oat-tree-label .oat-icon {
    color: var(--muted-foreground);
}

/* OatMultiSelectField: the chosen values as chips, the search box under them */
.oat-chips {
    margin: 0;
}

.oat-chips:not(:has(> li)) {
    display: none;
}

/* Not Oat's .badge, which hides buttons inside it and caps its width */
.oat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 2px 2px var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    font-size: var(--text-8);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.oat-chip button {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    min-height: 0;
    color: inherit;
    background: none;
}

.oat-chip button:hover {
    background-color: var(--accent);
}

/*
 * OatBottomNav: a tab bar fixed to the bottom of a phone's screen, and OatMobileLayout's
 * content, which leaves room for it. Oat has no tab bar, so it is built from Oat's
 * variables only, and follows the theme, light or dark. Override the variables to line
 * the tabs up with a wider column, or to keep your own layout's content clear of the bar.
 */
:root {
    /* The width of the row of tabs and of OatMobileLayout's content */
    --oat-bottom-nav-max-width: 28rem;
    /* The bar's height above the safe area: its padding, a 3rem row of tabs and its top border */
    --oat-bottom-nav-height: calc(var(--space-2) + 3rem + var(--space-3) + 1px);
}

.oat-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    /* Under dropdowns, popovers and dialogs */
    z-index: calc(var(--z-dropdown) - 1);
    background-color: var(--card);
    border-block-start: 1px solid var(--border);
    /* Above the iPhone's home indicator; needs viewport-fit=cover in the viewport meta tag */
    padding: var(--space-2) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

/*
 * One equal column per tab, however many there are. The columns come from the tabs
 * themselves rather than a count in a style attribute, which Wicket's strict Content
 * Security Policy would block. Not "> ul": in development mode, Wicket keeps the
 * panel's <wicket:panel> tag between the two.
 */
.oat-bottom-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    max-width: var(--oat-bottom-nav-max-width);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.oat-bottom-nav li {
    margin: 0;
}

/* A tab: the icon above the label, in the muted text color, at least 44px to tap */
.oat-bottom-nav li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-1) / 2);
    min-height: 3rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-8);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: none;
}

/* The current page's tab. Never the primary item: its icon must keep the button's foreground color. */
.oat-bottom-nav li > a[aria-current="page"]:not(.oat-fab) {
    color: var(--primary);
    font-weight: var(--font-semibold);
}

@media (hover: hover) {
    .oat-bottom-nav li > a:not(.oat-fab, [aria-current="page"]):hover {
        color: var(--foreground);
    }
}

.oat-bottom-nav li > a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* OatIcon draws at 1em, so the icon's size is its font size; sprite and inline SVGs follow */
.oat-bottom-nav-icon {
    display: inline-flex;
    font-size: 1.5rem;
    line-height: 1;
}

.oat-bottom-nav-icon > svg {
    width: 1em;
    height: 1em;
}

/* Short labels: one line, cut off rather than wrapped */
.oat-bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A count at the icon's top end, set off from the icon by a ring in the bar's color */
.oat-bottom-nav li > a > .badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% + var(--space-2));
    min-width: calc(var(--text-8) * var(--leading-normal));
    padding: 0 var(--space-1);
    box-shadow: 0 0 0 2px var(--card);
}

/*
 * The primary item: Oat's a.button (background, hover, border), as a 3rem circle in the
 * middle of its column. Its color is set here because the tab's muted color above would
 * otherwise win over the button's, as these rules beat Oat's layered ones.
 */
.oat-bottom-nav li > a.oat-fab {
    flex-direction: row;
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    margin-inline: auto;
    padding: 0;
    border-radius: var(--radius-full);
    color: var(--primary-foreground);
}

@media (prefers-reduced-motion: no-preference) {
    .oat-bottom-nav li > a {
        transition: color var(--transition-fast), background-color var(--transition-fast);
    }
}

/* OatMobileLayout's content: the bar's width, with room below for the bar */
.oat-mobile-main {
    max-width: var(--oat-bottom-nav-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block-end: calc(var(--oat-bottom-nav-height) + var(--space-6) + env(safe-area-inset-bottom, 0px));
}

/* Wider than a phone (Oat's grid breakpoint): no bar, unless OatBottomNav.setAlwaysVisible(true) */
@media (min-width: 769px) {
    .oat-bottom-nav:not([data-always-visible]) {
        display: none;
    }

    .oat-mobile-main:has(~ .oat-bottom-nav:not([data-always-visible])) {
        padding-block-end: var(--space-8);
    }
}