/**
 * Sizing for the demo pages. Kept out of style="" attributes because the demo app
 * runs under Wicket's strict Content Security Policy, which blocks inline styles.
 */
.demo-accordion {
    max-width: 600px;
    margin-top: 2rem;
}

.demo-upload-form {
    max-width: 480px;
}

.demo-skeleton-line {
    width: 200px;
}

.demo-skeleton-box {
    width: 100px;
    height: 100px;
}

.demo-skeleton-small {
    width: 160px;
    height: 16px;
}

/* A custom theme, registered in WicketOatApplication with
   WicketOats.install(this).addTheme(new OatTheme("ocean", "Ocean", "🌊")) */
[data-theme="ocean"] {
    color-scheme: dark;
    --background: #0b1d2e;
    --foreground: #d6e9f8;
    --card: #10283f;
    --card-foreground: #d6e9f8;
    --primary: #2fb3c9;
    --primary-foreground: #0b1d2e;
    --secondary: #173552;
    --secondary-foreground: #d6e9f8;
    --muted: #1c3d5c;
    --muted-foreground: #8fb3cf;
    --faint: #10283f;
    --border: #1c3d5c;
    --input: #1c3d5c;
    --ring: #2fb3c9;
}

/* Sign-in demo: a narrow card in the middle */
.oat-signin-demo {
    max-width: 26rem;
    margin: var(--space-8) auto;
}

/* Customers demo: the list of customers as plain links, the selected one marked */
.customer-list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    color: var(--foreground);
}

.customer-list a:hover,
.customer-list a[aria-current] {
    background-color: var(--accent);
}

.customer-list small {
    display: block;
    color: var(--muted-foreground);
}

/* The phone field's country code: as wide as the code, the number takes the rest */
fieldset.group > select.phone-code {
    flex: 0 0 6.5rem;
}

/* The inbox demo: a fixed height, so the list scrolls inside its pane */
.oat-split.inbox {
    height: 30rem;
}

.inbox-row {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    color: var(--foreground);
}

.inbox-row:hover,
.inbox-row:focus-visible {
    background-color: var(--accent);
}

.inbox-row[data-read] strong {
    font-weight: var(--font-normal);
}

.inbox-row small {
    display: block;
    color: var(--muted-foreground);
}

.inbox-body {
    white-space: pre-line;
}