html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* The layout is 100vh tall and main.layout-content is the page's only scroll container;
       the default body margin would add 16px the document has to scroll, which scrolls the
       header away with it (issue #72). */
    margin: 0;
}

/* CSS custom properties for the demo components (issue #76) */
:root {
    /* AntDesign light theme tokens */
    --ant-border-color: #f0f0f0;
    --ant-bg-container: #ffffff;
    --ant-bg-layout: #f5f5f5;
    --ant-table-header-bg: #fafafa;
    --ant-table-row-hover-bg: #fafafa;
    --ant-text-color: rgba(0, 0, 0, 0.88);
    --ant-text-color-secondary: rgba(0, 0, 0, 0.45);
    --ant-primary-color: #1890ff;
    --ant-warning-color: #faad14;

    /* Color palette for Engine Calls panel (light theme) */
    --color-background: #f5f5f5;
    --color-surface: #ffffff;
    --color-text: #262626;
    --color-text-secondary: #8c8c8c;
    --color-border: #d9d9d9;
    --color-primary: #1890ff;
    --color-primary-hover: #40a9ff;
    --color-secondary: #606060;
    --color-secondary-hover: #262626;
    --color-code-background: #fafafa;
    --color-code-text: #262626;

    /* The page header, and the plain grey panels and outlines of the demo's own markup. */
    --demo-header-bg: #ffffff;
    --demo-header-border: #f0f0f0;
    --demo-header-text: rgba(0, 0, 0, 0.85);
    --demo-header-text-secondary: rgba(0, 0, 0, 0.45);
    --demo-muted-surface: #f5f5f5;
    --demo-muted-text: #666666;
    --demo-outline: #d9d9d9;

    /* The page's vertical budget: the 64px header (MainLayout.razor.css), the tab bar under it, and
       what is left for a tab's pane, which is the height every pane fills. */
    --demo-header-height: 64px;
    --demo-tab-bar-height: 44px;
    --demo-pane-height: calc(100vh - var(--demo-header-height) - var(--demo-tab-bar-height));

    /* How wide a row of seats may grow on the table. The action bar takes the same width, so it
       lines up with the seats above it (PokerTable.razor.css and ActionPanel.razor.css). */
    --demo-table-row-max-width: 1200px;
}

/* Dark theme overrides. wwwroot/js/theme.js puts data-theme on <html> before the first paint —
   the visitor's pick from the header switch, or prefers-color-scheme until there is one — so the
   attribute, not the media query, is what decides. */
:root[data-theme="dark"] {
    /* AntDesign dark theme tokens */
    --ant-border-color: #434343;
    --ant-bg-container: #1f1f1f;
    --ant-bg-layout: #141414;
    --ant-table-header-bg: #1f1f1f;
    --ant-table-row-hover-bg: #262626;
    --ant-text-color: rgba(255, 255, 255, 0.88);
    --ant-text-color-secondary: rgba(255, 255, 255, 0.45);
    --ant-primary-color: #1890ff;
    --ant-warning-color: #faad14;

    /* Color palette for Engine Calls panel (dark theme) */
    --color-background: #141414;
    --color-surface: #1f1f1f;
    --color-text: #e6e6e6;
    --color-text-secondary: #8c8c8c;
    --color-border: #434343;
    --color-primary: #1890ff;
    --color-primary-hover: #40a9ff;
    --color-secondary: #d9d9d9;
    --color-secondary-hover: #ffffff;
    --color-code-background: #0a0a0a;
    --color-code-text: #e6e6e6;

    --demo-header-bg: #141414;
    --demo-header-border: #303030;
    --demo-header-text: rgba(255, 255, 255, 0.85);
    --demo-header-text-secondary: rgba(255, 255, 255, 0.45);
    --demo-muted-surface: #1f1f1f;
    --demo-muted-text: #a6a6a6;
    --demo-outline: #434343;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Home page layout: one horizontal tab bar under the header, and the active tab's pane below it.
   main.layout-content is the scroll container, so the bar sticks to its top when a tall pane
   scrolls. */
.home-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.demo-tab-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex: 0 0 var(--demo-tab-bar-height);
    align-items: stretch;
    gap: 2px;
    height: var(--demo-tab-bar-height);
    box-sizing: border-box;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--color-border);
    background: var(--ant-bg-container);
}

.demo-tab {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ant-text-color-secondary);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.demo-tab .anticon {
    font-size: 1rem;
}

.demo-tab:hover {
    color: var(--ant-text-color);
    background: var(--ant-table-row-hover-bg);
}

.demo-tab:focus-visible {
    outline: 2px solid var(--ant-primary-color);
    outline-offset: -2px;
}

.demo-tab-active {
    color: var(--ant-primary-color);
    border-bottom-color: var(--ant-primary-color);
}

.demo-tab-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* Exactly one pane is displayed; the others stay mounted but hidden, so switching tabs keeps each
   one's own state. A pane is at least as tall as the space under the tab bar, so no tab leaves an
   empty band at the bottom of the screen. */
.demo-tab-pane {
    display: none;
}

.demo-tab-pane-active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: var(--demo-pane-height);
    box-sizing: border-box;
    padding: 0.75rem 16px;
}

/* The inspector and the call log are exactly one screen tall rather than at least one: their grid
   and their list then have a bounded box to grow into and scroll inside, instead of growing the
   page with every row and every call. */
.demo-tab-pane-active[data-tab="database"],
.demo-tab-pane-active[data-tab="engine-calls"] {
    height: var(--demo-pane-height);
    overflow: hidden;
}

/* The inspector's AntDesign Card carries no scoped attribute (fact 22), so the flex chain from the
   pane down to its grid is written here. */
.database-inspector-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.database-inspector-card > .ant-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* The Hand History cards are forms and short lists, so a full-width card only pulls its buttons and
   columns apart. They stop at 800px and stay on the pane's left edge. The AntDesign Cards carry no
   scoped attribute (fact 22), so the rule is here. */
.hand-history-import-card,
.replay-controls-card,
.hand-history-export-card,
.phh-format-card {
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

/* The table grows to the bottom of its pane. */
.main-region {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* The running session's settings, in the page header between the title and the header actions.
   The header is one 64px line, so the summary never wraps; its items give way first. */
.game-summary {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    line-height: 1.5;
    /* The header's own tokens, which follow the theme switch with the rest of the header. */
    color: var(--demo-header-text);
}

.game-summary-items {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.game-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.game-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--demo-header-text-secondary);
}

.game-summary-value {
    font-weight: 600;
}

/* The street, as small AntDesign Steps between the top seat row and the board. AntDesign draws
   Steps for a light background; on the green table its grey titles and tails would disappear. */
.street-indicator {
    width: 100%;
    min-width: 0;
    max-width: 640px;
}

/* AntDesign styles each state through the full child path (item > container > icon, item >
   container > content > title), so the overrides spell the same path out to win on specificity
   rather than on !important. */
.street-steps .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.65);
}

.street-steps .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
    color: #fff;
    font-weight: 600;
}

.street-steps .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.85);
}

.street-steps .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-icon {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
}

.street-steps .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon {
    color: rgba(255, 255, 255, 0.65);
}

.street-steps .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
    background: #ffd700;
    border-color: #ffd700;
}

.street-steps .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon {
    color: #1f1f1f;
}

.street-steps .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon {
    background: transparent;
    border-color: #95de64;
}

.street-steps .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon {
    color: #95de64;
}

.street-steps .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after,
.street-steps .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
    background-color: rgba(255, 255, 255, 0.3);
}

.street-steps .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
    background-color: #95de64;
}

/* The action bar's AntDesign Buttons. ActionPanel's scoped stylesheet cannot reach them (fact 22);
   the colours follow the reference layout: red Fold, grey Check/Call, green Raise. */
.action-bar .action-btn,
.action-bar .action-bar-btn {
    min-width: 110px;
    font-weight: 600;
}

.action-bar .ant-btn.fold-btn {
    background: #a8071a;
    border-color: #a8071a;
}

.action-bar .ant-btn.fold-btn:hover {
    background: #cf1322;
    border-color: #cf1322;
}

.action-bar .ant-btn.check-btn,
.action-bar .ant-btn.call-btn {
    background: #595959;
    border-color: #595959;
}

.action-bar .ant-btn.check-btn:hover,
.action-bar .ant-btn.call-btn:hover {
    background: #737373;
    border-color: #737373;
}

.action-bar .ant-btn.raise-btn,
.action-bar .ant-btn.allin-btn,
.action-bar .ant-btn.next-hand-btn {
    background: #237804;
    border-color: #237804;
}

.action-bar .ant-btn.raise-btn:hover,
.action-bar .ant-btn.allin-btn:hover,
.action-bar .ant-btn.next-hand-btn:hover {
    background: #389e0d;
    border-color: #389e0d;
}

/* The raise slider is an AntDesign Slider, so it never carries ActionPanel's scope either. It is
   restyled for the dark felt: a light rail, the Raise button's green for the track and handle, and
   captions under it small enough that the marks keep the bar to one row of buttons' height. */
.action-bar .ant-slider.raise-slider {
    flex: 1 1 auto;
    min-width: 160px;
    margin: 4px 14px 20px;
}

.action-bar .raise-slider .ant-slider-rail {
    background-color: rgba(255, 255, 255, 0.3);
}

.action-bar .raise-slider .ant-slider-track,
.action-bar .raise-slider:hover .ant-slider-track {
    background-color: #52c41a;
}

.action-bar .raise-slider .ant-slider-handle,
.action-bar .raise-slider .ant-slider-dot {
    border-color: #52c41a;
}

.action-bar .raise-slider .ant-slider-dot {
    background-color: #1f1f1f;
}

.action-bar .raise-slider .ant-slider-dot-active {
    background-color: #52c41a;
}

.action-bar .raise-slider .ant-slider-mark {
    top: 10px;
    font-size: 11px;
}

.action-bar .raise-slider .ant-slider-mark-text {
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.action-bar .raise-slider .ant-slider-mark-text-active {
    color: #fff;
}

.action-bar .raise-slider .raise-mark {
    cursor: pointer;
}

.action-bar .raise-slider .raise-mark:hover {
    color: #95de64;
}

.action-bar .ant-btn.raise-step-btn {
    flex: 0 0 auto;
    font-weight: 700;
}

/* The rules above paint Raise green at a higher specificity than AntDesign's own [disabled] rule,
   so an illegal amount in the box would leave it looking live. */
.action-bar .ant-btn.raise-btn[disabled],
.action-bar .ant-btn.raise-btn[disabled]:hover {
    background: #3a3a3a;
    border-color: #3a3a3a;
    color: rgba(255, 255, 255, 0.45);
}

/* The raise amount box, an AntDesign Input: large and bold, on the dark felt in either theme.
   AntDesign 0.17 has no error status on Input, so the invalid state is this class of ours. */
.action-bar .raise-input {
    display: inline-block;
    flex: 0 0 auto;
}

.action-bar .raise-input .ant-input {
    width: 110px;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.action-bar .raise-input .ant-input:hover,
.action-bar .raise-input .ant-input:focus {
    border-color: #52c41a;
    box-shadow: none;
}

.action-bar .raise-input.raise-input-invalid .ant-input,
.action-bar .raise-input.raise-input-invalid .ant-input:hover,
.action-bar .raise-input.raise-input-invalid .ant-input:focus {
    border-color: #ff4d4f;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.3);
}

.action-bar .ant-btn.raise-fix-btn {
    flex: 0 0 auto;
    background: #faad14;
    border-color: #faad14;
    color: #1f1f1f;
}

.action-bar .ant-btn.raise-fix-btn:hover {
    background: #ffc53d;
    border-color: #ffc53d;
    color: #1f1f1f;
}

/* ½ Pot over Pot: white pills stacked in the height of one large button, so the bar stays one row. */
.action-bar .raise-presets {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
}

.action-bar .ant-btn.raise-preset-btn {
    height: 19px;
    min-width: 56px;
    padding: 0 10px;
    background: #fff;
    border-color: #fff;
    color: #1f1f1f;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
}

.action-bar .ant-btn.raise-preset-btn:hover,
.action-bar .ant-btn.raise-preset-btn:focus {
    background: #f0f0f0;
    border-color: #95de64;
    color: #1f1f1f;
}

@media (max-width: 768px) {
    /* Mobile layout */
    .demo-tab-bar {
        padding: 0 8px;
    }

    .demo-tab-pane-active {
        padding: 0.5rem 8px;
    }
}