/*
 * Dango CMS in the BoardUI look of the website (apps/web, BoardUI tokens in styles/theme.css):
 * neutral greys, white cards with a hairline border and a soft shadow, 10px controls,
 * 24px cards, pill badges, and Solway page titles like the website's headlines.
 *
 * The panel runs Filament's prebuilt CSS (shared hosting cannot build a theme), so this file
 * restyles it on top: radii through Filament's own variables, the rest by its fi-* classes.
 * The neutral grey palette and brand yellow are set in AdminPanelProvider.
 */

:root {
    /* BoardUI: rounded-2lg controls, rounded-3xl cards. Filament uses lg for controls, xl for cards. */
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 24px;
    --dango-hairline: var(--gray-200);
    --dango-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dango-display: "Solway", Georgia, "Iowan Old Style", serif;
}

/* The whole CMS at 90% (one step of the browser's zoom out), which the owners find easier on
   the eyes: Filament sizes everything in rem, so text, controls and spacing all follow. */
html {
    font-size: 90%;
}

.dark {
    --dango-hairline: rgb(255 255 255 / 0.08);
    --dango-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
}

/* Page ground and headings ------------------------------------------------------------ */

.fi-body {
    background-color: var(--gray-50);
}

.dark .fi-body {
    background-color: #121212;
}

.fi-header-heading {
    font-family: var(--dango-display);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 2.5rem;
    line-height: 1.1;
}

.fi-header-subheading {
    max-width: 48rem;
    color: var(--gray-500);
}

@media (max-width: 40rem) {
    .fi-header-heading {
        font-size: 2rem;
    }
}

/* Cards: sections, tables, stat tiles, dropdowns, dialogs ------------------------------ */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
:scope .fi-dropdown-panel,
.fi-dropdown-panel {
    --tw-ring-color: var(--dango-hairline);
    --tw-shadow: var(--dango-shadow-xs);
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    background-color: #1a1a1a;
    --tw-ring-color: var(--dango-hairline);
}

.fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    color: var(--gray-500);
}

/* A heading's text sized to fit its column rather than its whole description on one line, so a long
   description wraps on a phone instead of stretching the section (and every card in it) off screen. */
.fi-section-not-contained > .fi-section-header .fi-section-header-text-ctn {
    width: auto;
}

/* Stat tiles read as BoardUI metric cards: quiet label, large figure. */
.fi-wi-stats-overview-stat-label {
    color: var(--gray-500);
    font-weight: 500;
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.02em;
}

/* Tables: a soft header row and hairline rows. */
.fi-ta-header-cell {
    background-color: var(--gray-50);
    color: var(--gray-500);
    font-weight: 500;
}

.dark .fi-ta-header-cell {
    background-color: rgb(255 255 255 / 0.02);
}

/* Controls ----------------------------------------------------------------------------- */

.fi-btn {
    box-shadow: var(--dango-shadow-xs);
    font-weight: 500;
}

.fi-btn.fi-color-gray:not(.fi-outlined),
.fi-btn.fi-outlined {
    --tw-ring-color: var(--gray-200);
}

.fi-link,
.fi-icon-btn {
    box-shadow: none;
}

.fi-input-wrp {
    --tw-ring-color: var(--gray-200);
    --tw-shadow: var(--dango-shadow-xs);
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--primary-500);
}

.dark .fi-input-wrp {
    --tw-ring-color: var(--dango-hairline);
}

.fi-badge {
    border-radius: 9999px;
}

.fi-tabs {
    border-radius: var(--radius-lg);
}

.fi-fieldset {
    border-color: var(--dango-hairline);
    border-radius: 16px;
}

/* Frame: top bar and sidebar ------------------------------------------------------------ */

.fi-topbar {
    --tw-shadow: none;
    --tw-ring-color: var(--dango-hairline);
}

@media (min-width: 64rem) {
    /* A tinted, edged sidebar, so it reads as its own panel beside the page. */
    .fi-sidebar {
        background-color: var(--gray-100);
        border-inline-end: 1px solid var(--gray-200);
    }

    .dark .fi-sidebar {
        background-color: #0d0d0d;
        border-inline-end-color: var(--dango-hairline);
    }
}

.fi-sidebar-item-btn {
    border-radius: var(--radius-lg);
}

/* The current page is a white tile, as BoardUI marks a selected item. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--color-white, #fff);
    box-shadow: 0 0 0 1px var(--gray-200), var(--dango-shadow-xs);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.06);
    box-shadow: 0 0 0 1px var(--dango-hairline);
}

.fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Dashboard grid: cards in the same row stretch to one height, so the grid lines up. */
.fi-wi-widget {
    height: 100%;
}

.fi-wi-widget > .fi-section,
.fi-wi-widget > .fi-wi-chart,
.fi-wi-widget > .fi-ta,
.fi-wi-widget > .fi-ta > .fi-ta-ctn {
    height: 100%;
}

/* Search results: the one reached with the arrow keys is highlighted. */
.fi-global-search-result-link:focus-visible {
    outline: none;
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--primary-500);
}

/* Data palette ------------------------------------------------------------------------- */
/* Charts and figures take their colours from here rather than the brand orange alone, so a
   dashboard reads as several distinct things. Each colour is lighter in dark mode to keep
   its contrast on the dark cards. Chart.js widgets use the same hues as hex (FilamentPalette). */
:root {
    --dango-violet: #7c5cff;
    /* Each stay's colour, matching the website's calendar (StayCategory::color()). */
    --dango-homestay: #e9b500;
    --dango-villa: #2ea9ad;
    --dango-chalet: #e8784a;
    --dango-campsite: #4caf50;
    --dango-teal: #0fa596;
    --dango-amber: #f0a020;
    --dango-rose: #e8466b;
    --dango-sky: #1f9fe0;
    --dango-lime: #6aa514;
    --dango-green: #9bd82e;
    --dango-pink: #ec4899;
    --dango-ink: var(--gray-950);
    --dango-body: var(--gray-700);
    --dango-track: var(--gray-100);
    --dango-panel: var(--gray-100);
    --dango-bar-track: var(--gray-200);
    --dango-tile: #fff;
    --dango-chip-up: #3f6212;
    --dango-chip-down: #be123c;
    --dango-trend-up: #16a34a;
    --dango-trend-up-ink: #fff;
    --dango-trend-down: #dc2626;
    --dango-trend-down-ink: #fff;
    --dango-trend-flat: var(--gray-400);
    --dango-trend-flat-ink: #fff;
    --dango-trend-new: var(--gray-400);
    --dango-trend-new-ink: #fff;
    --dango-avatar: var(--gray-200);
    --dango-earnings-bar: #f2c230;
    --dango-earnings-bar-hover: #dcaa00;
    --dango-slice-muted: var(--gray-300);
    --dango-tip: var(--gray-900);
    --dango-segment: #fff;
}

.dark {
    --dango-violet: #a08bff;
    --dango-homestay: #f2c230;
    --dango-villa: #4cc3c6;
    --dango-chalet: #ef8a62;
    --dango-campsite: #6cc56c;
    --dango-teal: #2dd4bf;
    --dango-amber: #fbbf4a;
    --dango-rose: #fb7194;
    --dango-sky: #5cc0f5;
    --dango-lime: #a3e04a;
    --dango-green: #b4ee52;
    --dango-pink: #f68ac0;
    --dango-ink: #fff;
    --dango-body: var(--gray-200);
    --dango-track: rgb(255 255 255 / 0.08);
    --dango-panel: rgb(255 255 255 / 0.03);
    --dango-bar-track: rgb(255 255 255 / 0.06);
    --dango-tile: rgb(255 255 255 / 0.05);
    --dango-chip-up: #d9f99d;
    --dango-chip-down: #fda4af;
    --dango-trend-up: #4ade80;
    --dango-trend-up-ink: #052e16;
    --dango-trend-down: #f87171;
    --dango-trend-down-ink: #450a0a;
    --dango-trend-flat: var(--gray-500);
    --dango-trend-flat-ink: #fff;
    --dango-trend-new: var(--gray-500);
    --dango-trend-new-ink: #fff;
    --dango-avatar: rgb(255 255 255 / 0.1);
    --dango-slice-muted: var(--gray-700);
    --dango-tip: var(--gray-800);
    --dango-segment: rgb(255 255 255 / 0.12);
}

/* Grouped bars: one button per month, a pale track holding its two rounded bars. Hovering or
   focusing a month outlines its track and dims the other months. */
.dango-month {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    transition: opacity 0.15s;
}

.dango-month:disabled {
    cursor: default;
}

/* The change on the month before, floating above the hovered or focused month's track. */
.dango-month-badge {
    position: absolute;
    bottom: calc(100% - 0.4rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    margin-bottom: 0.8rem;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
}

.dango-month:hover .dango-month-badge,
.dango-month:focus-visible .dango-month-badge {
    opacity: 1;
    transform: none;
}

.dango-month-track {
    width: 100%;
    height: 13rem;
    box-sizing: border-box;
    padding: 0.3rem;
    border-radius: 14px;
    background: var(--dango-bar-track);
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s;
}

.dango-month:not(:disabled):hover .dango-month-track,
.dango-month:focus-visible .dango-month-track {
    outline-color: var(--dango-ink);
}

.dango-bar {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 8px;
    transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dango-month:focus-visible {
    outline: none;
}

.dango-bars:has(.dango-month:not(:disabled):hover) .dango-month:not(:hover),
.dango-bars:has(.dango-month:focus-visible) .dango-month:not(:focus-visible) {
    opacity: 0.4;
}

/* Earnings: the bar chart and the revenue pie side by side, half each, once the widget is wide enough. */
.dango-earnings {
    container: dango-earnings / inline-size;
}

.dango-earnings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@container dango-earnings (min-width: 56rem) {
    .dango-earnings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dango-earnings-grid > .fi-section {
    height: 100%;
}

/* One bar per month, all sources together: lime, a shade deeper on hover. Taller than the
   shared track, to sit level with the pie card beside it. */
.dango-earnings .dango-month-track {
    height: 17rem;
}

.dango-total-bar {
    display: block;
    width: 100%;
    border-radius: 9px;
    background: var(--dango-earnings-bar);
    transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s;
}

.dango-month:not(:disabled):hover .dango-total-bar,
.dango-month:focus-visible .dango-total-bar {
    background: var(--dango-earnings-bar-hover);
}

/* The hovered month's breakdown, beside its bar. */
.dango-tip {
    position: absolute;
    z-index: 20;
    /* As wide as its longest line (a long label or a big amount), never narrower than 14rem;
       every line stays on one line. */
    width: max-content;
    min-width: 14rem;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: var(--dango-tip);
    color: #fff;
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.06);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: left 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dango-tip-title {
    margin: 0 0 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.dango-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.15rem 0;
}

.dango-tip-row > span {
    flex-shrink: 0;
}

.dango-tip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--slice) 80%, #fff);
}

.dango-tip-label::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.2rem;
    background: var(--slice);
}

.dango-tip-total {
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
    font-weight: 600;
}

.dango-tip-note {
    margin: 0.3rem 0 0;
    font-size: 0.7rem;
    color: rgb(255 255 255 / 0.6);
}

/* A solid pie: the hovered wedge pops out, deepens and rounds its corners; the rest grey out. */
.dango-pie {
    display: block;
    width: 100%;
    max-width: 13rem;
    margin-inline: auto;
    aspect-ratio: 1;
    overflow: visible;
}

.dango-pie-empty {
    fill: var(--dango-bar-track);
}

.dango-slice {
    --shade: var(--slice);
    fill: var(--shade);
    stroke: var(--shade);
    stroke-width: 0;
    stroke-linejoin: round;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.2s, stroke 0.2s, stroke-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dango-slice.is-active {
    --shade: color-mix(in oklab, var(--slice) 82%, #000);
    stroke-width: 8;
    transform: translate(var(--dx), var(--dy)) scale(1.04);
}

.dango-slice.is-muted {
    --shade: color-mix(in oklab, var(--slice) 14%, var(--dango-slice-muted));
}

.dango-mix-card {
    container: dango-mix / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* The month picker: All, then Jan–Dec, as one segmented control; months still to come are disabled. */
.dango-mix-months {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border-radius: 0.75rem;
    background: var(--dango-track);
}

.dango-mix-months button {
    min-width: 0;
    padding: 0.4rem 0;
    border: 0;
    border-radius: 0.55rem;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.dango-mix-months button:not(:disabled):hover {
    color: var(--dango-ink);
}

.dango-mix-months button[aria-pressed="true"] {
    background: var(--dango-segment);
    color: var(--dango-ink);
    font-weight: 600;
    box-shadow: var(--dango-shadow-xs);
}

.dango-mix-months button:disabled {
    opacity: 0.4;
    cursor: default;
}

.dango-mix-months button:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 1px;
}

@container dango-mix (max-width: 24rem) {
    .dango-mix-months {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

/* The pie and its figures side by side, stacked when the card is narrow. The pie takes half the
   card (growing with it, up to 22rem) and the figures the other half, so a wide card stays balanced. */
.dango-mix-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

@container dango-mix (min-width: 27rem) {
    .dango-mix-layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr);
    }

    .dango-mix-layout .dango-pie {
        max-width: 22rem;
    }
}

@container dango-mix (min-width: 48rem) {
    .dango-mix-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }

    .dango-mix-side {
        width: 100%;
        max-width: 26rem;
        justify-self: center;
    }
}

.dango-mix-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.dango-mix {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dango-mix-row,
.dango-mix-total {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.dango-mix-row {
    border: 0;
    background: none;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.dango-mix-row:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 1px;
}

.dango-mix-row.is-active {
    background: color-mix(in oklab, var(--slice) 12%, transparent);
}

.dango-mix-row.is-muted {
    opacity: 0.45;
}

.dango-mix-totals {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--dango-hairline);
}

.dango-mix-total dt,
.dango-mix-total dd {
    margin: 0;
}

.dango-mix-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.25rem;
    background: var(--slice);
}

.dango-mix-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.dango-mix-label {
    font-weight: 600;
    color: color-mix(in oklab, var(--slice) 72%, var(--dango-ink));
}

.dango-mix-value {
    color: var(--dango-ink);
    white-space: nowrap;
}

.dango-mix-share {
    font-size: 0.72rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The team's avatars in the top bar: a row of circles, each with a dot for its status (green online,
   amber offline, red signed out), the hovered or focused one lifted. Hidden on phones, where the top
   bar is full. */
.dango-team-avatars {
    display: none;
    align-items: center;
    gap: 0.4rem;
}

@media (min-width: 48rem) {
    .dango-team-avatars {
        display: flex;
    }
}

.dango-team-avatar {
    position: relative;
    display: flex;
    flex: none;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--dango-avatar);
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s;
}

.dango-team-avatar-picture {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.dango-team-avatar:hover,
.dango-team-avatar:focus-visible {
    transform: translateY(-1px);
}

.dango-team-avatar:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 2px;
}

.dango-team-avatar--more {
    background: var(--dango-panel);
    color: var(--gray-500);
}

.dango-team-avatar-dot {
    position: absolute;
    right: -0.05rem;
    bottom: -0.05rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px var(--dango-tile);
}

.dango-team-avatar-dot--online {
    background: var(--dango-trend-up);
}

.dango-team-avatar-dot--offline {
    background: var(--dango-amber);
}

.dango-team-avatar-dot--signed-out {
    background: var(--dango-trend-down);
}

/* A memoji in the user menu and elsewhere Filament draws an avatar: on the same pale circle. */
.fi-avatar {
    background-color: var(--dango-avatar);
}

/* The profile page's Back link: top left of the page, level with the user menu at the top right. */
.dango-profile-back {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    height: 4rem;
    padding-inline-start: 1rem;
}

.dango-profile-back .fi-link {
    gap: 0.4rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.dango-profile-back .fi-link .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 40rem) {
    .dango-profile-back {
        padding-inline-start: 1.5rem;
    }
}

@media (min-width: 64rem) {
    .dango-profile-back {
        padding-inline-start: 2rem;
    }
}

/* The profile picture setting: a large circle with a pencil badge, which opens the picker pop-up. */
.dango-avatar-setting {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dango-avatar-current {
    position: relative;
    flex: none;
    width: 5rem;
    height: 5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--dango-avatar);
    cursor: pointer;
    transition: transform 0.15s;
}

.dango-avatar-current:hover {
    transform: scale(1.03);
}

.dango-avatar-current:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 3px;
}

.dango-avatar-current img,
.dango-avatar-current > span:not(.dango-avatar-edit) {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    object-fit: cover;
    font-size: 1.6rem;
    font-weight: 600;
}

.dango-avatar-edit {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--dango-tile);
    box-shadow: 0 0 0 1px var(--dango-hairline), var(--dango-shadow-xs);
    color: var(--dango-ink);
}

.dango-avatar-edit svg {
    width: 0.95rem;
    height: 0.95rem;
}

.dango-avatar-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.dango-avatar-caption .fi-link {
    font-size: 0.875rem;
    font-weight: 600;
}

/* The pop-up: initials on each colour, then the memojis in a grid that scrolls on its own. */
.dango-avatar-modal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dango-avatar-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dango-ink);
}

.dango-avatar-hint {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.dango-avatar-swatches,
.dango-avatar-memojis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.dango-avatar-memojis {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.35rem;
    margin-inline: -0.35rem;
    overscroll-behavior: contain;
}

.dango-avatar-option {
    display: flex;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--dango-avatar);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dango-avatar-option img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.dango-avatar-option:hover {
    transform: scale(1.06);
}

.dango-avatar-option:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 2px;
}

.dango-avatar-option[aria-checked="true"] {
    box-shadow: 0 0 0 3px var(--dango-tile), 0 0 0 5px var(--primary-500);
}

.dango-avatar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Initials in the top bar: their own colours, filling the circle. */
.dango-team-avatar-initials {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

.dango-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The Team page opened from an avatar: that person's card, clear of the sticky top bar, ringed. */
.dango-team-card {
    scroll-margin-top: 5rem;
}

.dango-team-card:target {
    box-shadow: 0 0 0 2px var(--primary-500);
}

/* Takings per seminar: one row per seminar (date, name, pax, a bar split HRDC / self, net), then the
   year's total. On a narrow card each row stacks: date, name, pax beside net, then the bar; once the
   card is wide enough, each row is one line with its figures lined up in columns down the card. */
.dango-takings {
    container: dango-takings / inline-size;
}

.dango-takings-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dango-takings-row,
.dango-takings-total {
    display: grid;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.6rem 0.55rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.dango-takings-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date date" "name name" "pax money" "bar bar";
    border-radius: 0.6rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s;
}

.dango-takings-list > li + li {
    border-top: 1px solid var(--dango-hairline);
}

.dango-takings-row:hover {
    background: var(--dango-panel);
}

.dango-takings-row:focus-visible {
    outline: 2px solid var(--dango-ink);
    outline-offset: 1px;
}

.dango-takings-row .dango-takings-date { grid-area: date; }
.dango-takings-row .dango-takings-name { grid-area: name; }
.dango-takings-row .dango-takings-pax,
.dango-takings-total .dango-takings-pax { align-items: flex-start; text-align: start; }
.dango-takings-row .dango-takings-pax { grid-area: pax; }
.dango-takings-row .dango-takings-bar { grid-area: bar; }
.dango-takings-row .dango-takings-money { grid-area: money; }

.dango-takings-total {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--dango-hairline);
}

.dango-takings-date {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dango-takings-name {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.dango-takings-total .dango-takings-name {
    grid-column: 1 / -1;
}

.dango-takings-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--dango-ink);
}

.dango-takings-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dango-takings-tag {
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--gray-500) 15%, transparent);
    font-weight: 500;
    color: var(--dango-body);
}

.dango-takings-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 0;
    text-align: end;
}

.dango-takings-value {
    font-weight: 600;
    white-space: nowrap;
    color: var(--dango-ink);
}

.dango-takings-split {
    font-size: 0.72rem;
    color: var(--gray-500);
}

.dango-takings-pax .dango-takings-split {
    white-space: nowrap;
}

/* The bar's length is the seminar's net against the year's best; its two colours split it. */
.dango-takings-bar {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--dango-track);
}

.dango-takings-bar > span {
    display: flex;
    height: 100%;
    overflow: hidden;
    border-radius: 9999px;
}

@container dango-takings (min-width: 46rem) {
    .dango-takings-row,
    .dango-takings-total {
        grid-template-columns: 3.25rem minmax(0, 1fr) 7.5rem minmax(8rem, 16rem) 13rem;
        grid-template-areas: none;
    }

    .dango-takings-row .dango-takings-date,
    .dango-takings-row .dango-takings-name,
    .dango-takings-row .dango-takings-pax,
    .dango-takings-row .dango-takings-bar,
    .dango-takings-row .dango-takings-money {
        grid-area: auto;
    }

    .dango-takings-row .dango-takings-pax,
    .dango-takings-total .dango-takings-pax {
        align-items: flex-end;
        text-align: end;
    }

    .dango-takings-split {
        white-space: nowrap;
    }

    .dango-takings-total .dango-takings-name {
        grid-column: 1 / 3;
    }

    .dango-takings-total .dango-takings-money {
        grid-column: 5;
    }
}

/* The tiles under the chart, and the change chip beside the headline. */
.dango-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: var(--dango-tile);
}

.dango-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem 0.15rem 0.3rem;
    border-radius: 9999px;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: color-mix(in oklab, var(--gray-500) 18%, transparent);
    color: var(--dango-ink);
}

.dango-chip--up {
    background: color-mix(in oklab, var(--dango-green) 40%, transparent);
    color: var(--dango-chip-up);
}

.dango-chip--down {
    background: color-mix(in oklab, var(--dango-rose) 22%, transparent);
    color: var(--dango-chip-down);
}

@media (prefers-reduced-motion: reduce) {
    .dango-bar,
    .dango-month,
    .dango-month-badge,
    .dango-month-track {
        transition: none;
    }
}

/* Revenue form: the Self / Company (sky) and HRDC (rose) tabs, each tinted in its own colour so
   the two funding routes never get mixed up. The class sits on both a tab and its panel. */
.dango-funding--own {
    --dango-funding: var(--dango-sky);
}

.dango-funding--hrdc {
    --dango-funding: var(--dango-rose);
}

.dango-funding-tabs .fi-tabs-item.dango-funding {
    border-radius: 0.6rem;
    transition: background-color 0.15s, color 0.15s;
}

.dango-funding-tabs .fi-tabs-item.dango-funding > .fi-icon {
    color: var(--dango-funding);
}

.dango-funding-tabs .fi-tabs-item.dango-funding.fi-active {
    background: color-mix(in oklab, var(--dango-funding) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--dango-funding) 45%, transparent);
}

.dango-funding-tabs .fi-tabs-item.dango-funding.fi-active .fi-tabs-item-label {
    color: color-mix(in oklab, var(--dango-funding) 65%, var(--dango-ink));
}

.dango-funding-tabs .fi-sc-tabs-tab.dango-funding {
    border-top: 3px solid var(--dango-funding);
    background: color-mix(in oklab, var(--dango-funding) 4%, transparent);
}

/* Revenue receipt: a month's earnings opened from the chart, set like a till receipt. Each line
   runs from its name along a dotted leader to its amount; a seminar's sum opens under its name. */
.dango-receipt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--dango-body);
}

.dango-receipt-mono,
.dango-receipt-amount,
.dango-receipt-date {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.dango-receipt-rule {
    margin: 0;
    border: 0;
    border-top: 2px dashed var(--dango-hairline);
}

.dango-receipt-rule--double {
    height: 4px;
    border-bottom: 2px dashed var(--dango-hairline);
}

.dango-receipt-category {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid var(--dango-receipt-colour);
}

.dango-receipt-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.dango-receipt-name {
    min-width: 0;
    font-size: 0.9rem;
    color: var(--dango-ink);
}

.dango-receipt-date {
    margin-inline-end: 0.4rem;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.dango-receipt-dots {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 2px dotted var(--gray-300);
    translate: 0 -0.3em;
}

.dark .dango-receipt-dots {
    border-bottom-color: var(--gray-600);
}

.dango-receipt-amount {
    flex: none;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--dango-ink);
}

.dango-receipt-item {
    padding-inline-start: 1.25rem;
}

.dango-receipt-item > summary {
    list-style: none;
    cursor: pointer;
    border-radius: 0.4rem;
}

.dango-receipt-item > summary::-webkit-details-marker {
    display: none;
}

.dango-receipt-item > summary:hover .dango-receipt-name {
    color: var(--dango-receipt-colour);
}

.dango-receipt-item > summary:focus-visible {
    outline: 2px solid var(--dango-receipt-colour);
    outline-offset: 2px;
}

.dango-receipt-chevron {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-inline-start: 0.2rem;
    vertical-align: -0.2em;
    color: var(--dango-receipt-colour);
    transition: rotate 0.2s;
}

.dango-receipt-item[open] .dango-receipt-chevron {
    rotate: 180deg;
}

@media (prefers-reduced-motion: reduce) {
    .dango-receipt-chevron {
        transition: none;
    }
}

/* Date picker ---------------------------------------------------------------------------- */
/* BoardUI's date picker (apps/web components/base/date-picker), on Filament's date fields with
   public/js/cms-date-picker.js. Values are BoardUI's tokens, light then dark. */
:root {
    --dango-dp-surface: #f7f7f7; /* background/secondary/default */
    --dango-dp-card: #fff; /* background/primary/default */
    --dango-dp-hover: #ebebeb; /* background/secondary/hover */
    --dango-dp-button-hover: #f7f7f7; /* background/primary/hover */
    --dango-dp-button-active: #ebebeb; /* background/primary/active */
    --dango-dp-text: #0a0a0a; /* text/primary */
    --dango-dp-text-secondary: #737373;
    --dango-dp-text-tertiary: #a1a1a1;
    --dango-dp-border: #ebebeb; /* border/button/default */
    --dango-dp-border-hover: #d4d4d4;
    --dango-dp-border-active: #a1a1a1;
    --dango-dp-selected: #fcb072; /* date-range-edge-background: accent-300 */
    --dango-dp-focus: #f2751a; /* border/focus-ring: accent-500 */
    --dango-dp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dango-dp-shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02);
    --dango-dp-primary: linear-gradient(180deg, #f2751a 0%, #e35a0c 100%);
    --dango-dp-primary-hover: linear-gradient(180deg, #f8873a 0%, #f2751a 100%);
    --dango-dp-primary-active: linear-gradient(180deg, #e35a0c 0%, #bc430c 100%);
    --dango-dp-primary-disabled: linear-gradient(180deg, #ebebeb 0%, #d4d4d4 100%);
    --dango-dp-primary-disabled-text: #a1a1a1;
}

.dark {
    --dango-dp-surface: #171717;
    --dango-dp-card: #262626;
    --dango-dp-hover: #262626;
    --dango-dp-button-hover: color-mix(in srgb, #404040 60%, transparent);
    --dango-dp-button-active: #404040;
    --dango-dp-text: #fafafa;
    --dango-dp-text-tertiary: #525252;
    --dango-dp-border: #404040;
    --dango-dp-border-hover: #737373;
    --dango-dp-border-active: #525252;
    --dango-dp-selected: #953612; /* accent-800 */
    --dango-dp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.18);
    --dango-dp-shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.1);
    --dango-dp-primary-disabled: linear-gradient(180deg, #404040 0%, #262626 100%);
    --dango-dp-primary-disabled-text: #737373;
}

/* Trigger: BoardUI's white button with a calendar icon and the date (p-2, icon 20, gap 2, px-1). */
.fi-input-wrp.fi-fo-date-time-picker,
.fi-input-wrp.fi-fo-date-time-picker:focus-within {
    --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color);
    --tw-shadow: var(--dango-dp-shadow-xs);
    background-color: var(--dango-dp-card);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.fi-input-wrp:not(.fi-invalid).fi-fo-date-time-picker,
.fi-input-wrp:not(.fi-invalid).fi-fo-date-time-picker:focus-within {
    --tw-ring-color: var(--dango-dp-border);
}

.fi-input-wrp:not(.fi-invalid):not(.fi-disabled).fi-fo-date-time-picker:hover {
    --tw-ring-color: var(--dango-dp-border-hover);
    background-color: var(--dango-dp-button-hover);
}

.fi-input-wrp:has(.fi-fo-date-time-picker-trigger:focus-visible) {
    outline-color: var(--dango-dp-focus);
}

.fi-input-wrp.fi-fo-date-time-picker .fi-input-wrp-prefix {
    padding-inline-start: 0.5rem;
    gap: 0;
}

.fi-input-wrp.fi-fo-date-time-picker .fi-input-wrp-prefix > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--dango-dp-text);
}

.fi-input-wrp.fi-fo-date-time-picker .fi-input-wrp-content-ctn {
    padding-inline-start: 0;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input {
    cursor: pointer;
    padding: 0.5rem 0.5rem 0.5rem 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--dango-dp-text);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input::placeholder {
    color: var(--dango-dp-text);
}

.fi-input-wrp.fi-disabled.fi-fo-date-time-picker {
    --tw-shadow: none;
    background-color: var(--dango-dp-button-hover);
}

.fi-input-wrp.fi-disabled.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input,
.fi-input-wrp.fi-disabled.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input::placeholder {
    cursor: not-allowed;
    color: var(--dango-dp-text-tertiary);
}

/* Popover: rounded-3xl grey surface, dropdown shadow, 8px round the month card, 12px below. */
.fi-fo-date-time-picker .fi-fo-date-time-picker-panel.dango-date-picker {
    z-index: 110;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 0.75rem;
    border-radius: 24px;
    background-color: var(--dango-dp-surface);
    box-shadow: var(--dango-dp-shadow-dropdown);
    color: var(--dango-dp-text);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transform-origin: top;
    transition: opacity 150ms ease-out, scale 150ms ease-out, filter 150ms ease-out, display 150ms allow-discrete;
}

@starting-style {
    .fi-fo-date-time-picker .fi-fo-date-time-picker-panel.dango-date-picker {
        opacity: 0;
        scale: 0.95;
        filter: blur(2px);
    }
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-panel.dango-date-picker[style*="display: none"] {
    opacity: 0;
    scale: 0.95;
    filter: blur(2px);
}

/* Month card: 326 wide, rounded-2xl, white, 15px padding, 20px from the title to the days. */
.dango-date-picker-month {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 326px;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 16px;
    background-color: var(--dango-dp-card);
    box-shadow: var(--dango-dp-shadow-xs);
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 0;
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-month-select,
.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-year-input {
    display: none;
}

.dango-date-picker-title {
    flex: 1 1 0;
    text-align: center;
    color: var(--dango-dp-text);
}

/* A 32px target around the 16px arrow; the negative margin keeps the header's layout. */
.dango-date-picker-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    margin: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--dango-dp-text-secondary);
    cursor: pointer;
    outline: none;
    transition: background-color 150ms ease;
}

.dango-date-picker-nav:hover {
    background-color: var(--dango-dp-hover);
}

.dango-date-picker-nav:focus-visible {
    box-shadow: 0 0 0 2px var(--dango-dp-focus);
}

.dango-date-picker-nav svg {
    width: 1rem;
    height: 1rem;
}

[dir="rtl"] .dango-date-picker-nav svg {
    rotate: 180deg;
}

/* Days: 32px cells 12px apart (7 × 32 + 6 × 12 = the card's 296px), weekdays 24px high. */
.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar-header,
.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 2rem);
    column-gap: 0.75rem;
    margin: 0;
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar-header .fi-fo-date-time-picker-calendar-header-day {
    height: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--dango-dp-text-secondary);
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar-week > div {
    width: 2rem;
    height: 2rem;
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--dango-dp-text);
    background-color: transparent;
    opacity: 1;
    outline: none;
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day:not(.fi-disabled):not(.fi-selected):hover,
.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day:not(.fi-disabled):not(.fi-selected):focus-visible {
    background-color: var(--dango-dp-hover);
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-selected {
    background-color: var(--dango-dp-selected);
    color: var(--dango-dp-text);
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day:focus-visible {
    box-shadow: inset 0 0 0 2px var(--dango-dp-focus);
}

.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-disabled,
.fi-fo-date-time-picker .dango-date-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-disabled:focus {
    color: var(--dango-dp-text-tertiary);
    opacity: 1;
}

/* Footer: the date chip on the left, Cancel and Apply on the right (pt-3, px-4, gap 10). */
.dango-date-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0;
}

.dango-date-picker-chip {
    width: 104px;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid var(--dango-dp-border);
    border-radius: 10px;
    background-color: var(--dango-dp-card);
    box-shadow: var(--dango-dp-shadow-xs);
    color: var(--dango-dp-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    outline: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 250ms cubic-bezier(0.34, 1.2, 0.64, 1), transform 250ms cubic-bezier(0.34, 1.2, 0.64, 1), visibility 250ms, border-color 100ms ease-out;
}

.dango-date-picker-chip:focus {
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--dango-dp-shadow-xs);
}

.dango-date-picker-chip:focus-visible {
    border-color: var(--dango-dp-border-active);
}

.dango-date-picker-footer--picked .dango-date-picker-chip {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dango-date-picker-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* BoardUI Button, medium: 36 high, rounded-2lg, p-2 with a px-1 label. */
.dango-date-picker-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    box-sizing: border-box;
    padding: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dango-date-picker-button > span {
    padding: 0 0.25rem;
}

.dango-date-picker-button:active:not(:disabled) {
    transform: scale(0.98);
    transition-duration: 150ms, 150ms, 150ms, 150ms, 220ms;
}

.dango-date-picker-button:focus-visible {
    box-shadow: 0 0 0 2px var(--dango-dp-surface), 0 0 0 4px var(--dango-dp-focus);
}

.dango-date-picker-button--secondary {
    border: 1px solid var(--dango-dp-border);
    background-color: var(--dango-dp-card);
    box-shadow: var(--dango-dp-shadow-xs);
    color: var(--dango-dp-text);
}

.dango-date-picker-button--secondary:hover {
    border-color: var(--dango-dp-border-hover);
    background-color: var(--dango-dp-button-hover);
}

.dango-date-picker-button--secondary:active {
    border-color: var(--dango-dp-border-active);
    background-color: var(--dango-dp-button-active);
}

.dango-date-picker-button--primary {
    background-image: var(--dango-dp-primary);
    box-shadow: var(--dango-dp-shadow-xs);
    color: #fff;
}

.dango-date-picker-button--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--dango-dp-primary-hover);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.dango-date-picker-button--primary:hover:not(:disabled)::before {
    opacity: 1;
}

.dango-date-picker-button--primary:active:not(:disabled) {
    background-image: var(--dango-dp-primary-active);
}

.dango-date-picker-button--primary:active:not(:disabled)::before {
    opacity: 0;
}

.dango-date-picker-button--primary:disabled {
    cursor: not-allowed;
    background-image: var(--dango-dp-primary-disabled);
    box-shadow: none;
    color: var(--dango-dp-primary-disabled-text);
}

.dango-date-picker-button--primary:disabled::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .fi-fo-date-time-picker .fi-fo-date-time-picker-panel.dango-date-picker,
    .dango-date-picker-chip,
    .dango-date-picker-button {
        transition: none;
    }

    .dango-date-picker-button:active:not(:disabled) {
        transform: none;
    }
}

/* Resizable table columns (public/js/cms-column-resize.js): a thin handle on each header's edge,
   a line showing on hover or while dragging. */
.fi-ta-table th.fi-ta-header-cell {
    position: relative;
}

.dango-col-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: -5px;
    z-index: 2;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}

.dango-col-resize::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 4px;
    width: 2px;
    border-radius: 1px;
    background: var(--gray-300);
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;
}

.dark .dango-col-resize::after {
    background: var(--gray-600);
}

.fi-ta-table th.fi-ta-header-cell:hover .dango-col-resize::after {
    opacity: 1;
}

.dango-col-resize:hover::after,
.dango-col-resize.is-resizing::after {
    opacity: 1;
    background: var(--primary-500);
}

html.dango-col-resizing,
html.dango-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* A table whose toolbar would hold nothing but the column button (a dashboard widget's, say): the
   button moves up into the header, just before the header's actions, instead of taking a row of
   its own. Tables with a search, filters or toolbar actions keep the usual toolbar. */
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
}

.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) > .fi-ta-header {
    display: contents;
}

.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) > .fi-ta-header > div:not(.fi-ta-actions) {
    flex: 1 1 auto;
    min-width: 0;
}

.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) > .fi-ta-header > .fi-ta-actions {
    order: 2;
}

.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) > .fi-ta-header-toolbar {
    order: 1;
    padding: 0;
    border: 0;
}

.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar :is(.fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal)):not(:has(> .fi-ta-header-toolbar :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-filters-modal, .fi-ta-grouping-settings), > .fi-ta-header-toolbar > .fi-ta-actions > *)) > .fi-ta-header-toolbar > .fi-ta-actions {
    display: none;
}

/* Seminars, Grid view: a card per seminar, its poster with tags laid over it (how complete it
   is, the speaker, the date) and the title under it. A seminar without a poster shows its
   title lettered on a plain panel, as the website does. */
.dango-seminar-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.dango-seminar-card-poster {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
    background: var(--dango-panel);
}

.dango-seminar-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fi-ta-record.fi-clickable:hover .dango-seminar-card-poster img {
    transform: scale(1.03);
}

.dango-seminar-card-lettered {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    text-align: center;
    font-family: var(--dango-display);
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--gray-500);
}

.dango-seminar-card-tags {
    position: absolute;
    inset-inline: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dango-seminar-card-tags-top {
    top: 10px;
}

.dango-seminar-card-tags-bottom {
    bottom: 10px;
}

.dango-seminar-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    color: var(--gray-900);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dango-seminar-tag .fi-icon {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

.dango-seminar-tag-warning {
    background: #fdf0d5;
    color: #8a5300;
}

.dango-seminar-tag-success {
    background: #dcf5e3;
    color: #186a35;
}

.dark .dango-seminar-tag {
    background: rgb(24 24 27 / 0.88);
    color: var(--gray-100);
}

.dark .dango-seminar-tag-warning {
    background: #4a3108;
    color: #fcd58a;
}

.dark .dango-seminar-tag-success {
    background: #12381f;
    color: #96e3ae;
}

.dango-seminar-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: start;
}

.dango-seminar-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gray-950);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .dango-seminar-card-title {
    color: var(--gray-100);
}

.dango-seminar-card-missing {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gray-500);
}

/* Translations: the "Translate into …" button sits at the end of the row of language tabs
   (English, Bahasa Melayu, 中文) rather than on a row of its own. Each tab carries a copy, so
   it stays put whichever language is open. On a phone it drops back under the tabs. */
@media (min-width: 40rem) {
    .fi-sc-tabs.fi-contained:has(.dango-translate) {
        position: relative;
    }

    .fi-sc-tabs.fi-contained:has(.dango-translate) > .fi-tabs {
        padding-inline-end: 22rem;
    }

    /* Its grid cell leaves the panel's flow, so the panel keeps no empty row for it. */
    .fi-sc-tabs.fi-contained .fi-grid-col:has(> .fi-sc-component > .dango-translate) {
        position: absolute;
        top: 0;
        inset-inline-end: 12px;
        height: 57px;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .fi-sc-tabs.fi-contained .fi-grid-col:has(> .fi-sc-component > .dango-translate) > .fi-sc-component {
        display: flex;
        align-items: center;
    }

    .fi-sc-tabs.fi-contained .dango-translate {
        height: auto;
    }
}

/* Profile photo: upload, then move and zoom it inside the circle (public/js/cms-avatar-crop.js). */
.dango-avatar-photo-start {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dango-avatar-photo-current {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--dango-avatar);
    color: var(--gray-400);
}

.dango-avatar-photo-current img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dango-avatar-photo-current svg {
    width: 1.75rem;
    height: 1.75rem;
}

.dango-avatar-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.dango-avatar-crop {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 40rem) {
    .dango-avatar-crop {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
}

.dango-avatar-crop-frame {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--gray-100);
    cursor: grab;
    touch-action: none;
    user-select: none;
    outline: none;
    /* A ring the photo is framed by, drawn over it so it never moves with the drag. */
    box-shadow: 0 0 0 1px var(--dango-hairline);
}

.dango-avatar-crop-frame:active {
    cursor: grabbing;
}

.dango-avatar-crop-frame:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-500);
}

.dango-avatar-crop-frame img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    pointer-events: none;
}

.dango-avatar-crop-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dango-avatar-crop-zoom {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .875rem;
    color: var(--gray-600);
}

.dango-avatar-crop-zoom input {
    width: 100%;
    accent-color: var(--primary-500);
}

.dango-avatar-previews {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .4rem;
}

.dango-avatar-previews canvas {
    border-radius: 9999px;
    background: var(--gray-100);
    box-shadow: 0 0 0 1px var(--dango-hairline);
}

.dango-avatar-error {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--danger-600);
}

.dark .dango-avatar-crop-frame,
.dark .dango-avatar-previews canvas {
    background: rgb(255 255 255 / 0.05);
}

/* Booking form ------------------------------------------------------------------------- */

/* The booking's colour on the calendar (resources/views/filament/forms/colour-swatches.blade.php):
   round swatches like BoardUI's colour picker, the chosen one ringed. */
.dango-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dango-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgb(0 0 0 / 0.1);
    background: var(--dango-swatch);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dango-swatch:hover {
    transform: scale(1.08);
}

.dango-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gray-950);
}

.dark .dango-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px #fff;
}

.dango-swatch--auto {
    width: auto;
    padding-inline: 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--gray-50);
}

.dark .dango-swatch--auto {
    color: var(--gray-200);
    background: rgb(255 255 255 / 0.06);
}

/* The booking's sums, as a short receipt: price down to the balance. */
.dango-sums {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.dark .dango-sums {
    background: rgb(255 255 255 / 0.04);
}

.dango-sums > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--gray-600);
}

.dark .dango-sums > div {
    color: var(--gray-300);
}

.dango-sums dd {
    margin: 0;
}

.dango-sums .dango-sum-strong {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .dango-sums .dango-sum-strong {
    color: #fff;
}

.dango-sums .dango-sum-due,
.dark .dango-sums .dango-sum-due {
    font-weight: 600;
    color: #d97706;
}

.dango-sums .dango-sum-clear,
.dark .dango-sums .dango-sum-clear {
    font-weight: 600;
    color: #16a34a;
}

/* The Earnings card's year: arrows either side of a short select. */
.dango-year-picker {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dango-year-picker .fi-input-wrp {
    width: 6.5rem;
}

/* The booking form's timeline (BookingForm::timeline()): the days across, one bar per unit over its
   nights in its stay's colour, a dot on the morning it leaves. */
.dango-timeline {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--dango-hairline);
    background: var(--gray-50);
    font-size: 0.8rem;
    overflow-x: auto;
}

.dark .dango-timeline {
    background: rgb(255 255 255 / 0.03);
}

.dango-timeline-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.dango-timeline-row {
    display: grid;
    grid-template-columns: 8rem minmax(calc(var(--dango-timeline-days) * 2.4rem), 1fr);
    align-items: center;
    gap: 0.75rem;
}

.dango-timeline-unit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--gray-800);
}

.dark .dango-timeline-unit {
    color: var(--gray-100);
}

.dango-timeline-track {
    display: grid;
    grid-template-columns: repeat(var(--dango-timeline-days), minmax(2.4rem, 1fr));
    min-height: 2rem;
    align-items: center;
    background-image: linear-gradient(to right, var(--dango-hairline) 1px, transparent 1px);
    background-size: calc(100% / var(--dango-timeline-days)) 100%;
}

.dango-timeline-head .dango-timeline-track {
    background: none;
    min-height: 0;
}

.dango-timeline-day {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    align-items: center;
    font-size: 0.7rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.dango-timeline-day.is-weekend {
    color: #b7791f;
}

.dango-timeline-day em {
    font-style: normal;
    font-weight: 600;
    color: var(--gray-700);
}

.dark .dango-timeline-day em {
    color: var(--gray-200);
}

.dango-timeline-bar {
    grid-row: 1;
    height: 1.6rem;
    display: flex;
    align-items: center;
    padding-inline: 0.5rem;
    border-radius: 0.45rem;
    background: color-mix(in oklab, var(--dango-timeline-colour) 70%, white);
    color: #1f2430;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dango-timeline-out {
    grid-row: 1;
    justify-self: start;
    width: 0.55rem;
    height: 0.55rem;
    margin-inline-start: -0.275rem;
    border-radius: 999px;
    border: 2px solid var(--gray-500);
    background: var(--gray-50);
}

.dark .dango-timeline-out {
    background: var(--gray-900);
}

.dango-timeline-note {
    font-size: 0.72rem;
    color: var(--gray-500);
}

/* The Bookings page's Calendar / List switch (BookingResource::viewSwitch()): two joined buttons,
   the view shown pressed, as BoardUI's segmented control. */
.fi-btn.dango-view-switch {
    box-shadow: none;
}

.fi-btn.dango-view-switch--first {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.fi-btn.dango-view-switch--last {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: calc(-1 * var(--dango-header-gap, 0.75rem));
    margin-inline-end: 1rem;
}

.fi-btn.dango-view-switch:not(.is-active) {
    color: var(--gray-500);
}

.fi-btn.dango-view-switch.is-active {
    background: #fff;
    color: var(--gray-950);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--dango-hairline), var(--dango-shadow-xs);
}

.dark .fi-btn.dango-view-switch.is-active {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
}