@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eudoxus Sans";
    src: url("fonts/EudoxusSans-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Layer 1 — primitives.

   Raw palette ramps. Component CSS must NOT reference these directly; use the
   brand/semantic tokens in layer 2 below. They stay public so host apps that
   were written before theming (and intentionally remain on the default blue)
   keep working unchanged.
   --------------------------------------------------------------------------- */
:root {
    --hana-color-blue-900: #004e86;
    --hana-color-blue-700: #1e6fb3;
    --hana-color-blue-500: #079fd2;
    --hana-color-cyan-400: #61e2ff;
    --hana-color-cyan-500: #00bafc;
    --hana-color-cyan-on: #00b0ec;
    --hana-color-navy-900: #191e3b;
    --hana-color-navy-700: #0c3b7c;
    --hana-color-green-500: #18c371;
    --hana-color-red-500: #e72f16;
    --hana-color-red-400: #ff4b4b;
    --hana-color-yellow-500: #e7a516;
    --hana-color-orange-frame: #e68a22;
    --hana-color-gray-600: #5f5f5f;
    --hana-color-gray-500: #9e9e9e;
    --hana-color-gray-200: #e8e8e8;
    --hana-color-gray-100: #f5f5f5;
    --hana-color-white: #ffffff;
    --hana-color-near-white: #f9f9f9;
    --hana-color-black: #000000;
    --hana-color-frame-blue: #8ca7d1;
    --hana-color-blue-800: #0071bb;
    --hana-color-blue-600: #2b83c6;
    --hana-color-blue-100: #aac5d8;
    --hana-color-blue-gray-500: #5f7fa6;
    --hana-color-gray-990: #050505;
    --hana-color-gray-950: #171717;
    --hana-color-gray-900: #111111;
    --hana-color-gray-800: #333333;
    --hana-color-gray-700: #6f5f5f;
    --hana-color-gray-550: #7e7e7e;
    --hana-color-gray-450: #999999;
    --hana-color-gray-400: #aaaaaa;
    --hana-color-gray-350: #c7c7c7;
    --hana-color-gray-300: #d0d0d0;
    --hana-color-gray-280: #d4d4d4;
    --hana-color-gray-250: #d9d9d9;
    --hana-color-status-on: #34e634;
    --hana-color-status-off: #e4e4e4;
    /* Third-party channel identities. These happen to sit near the default blue
       ramp, but they belong to Booking/Expedia — never theme them. */
    --hana-color-channel-default: #0c3b7c;
    --hana-color-channel-booking: #00bafc;
    --hana-color-channel-expedia: #191e3b;
}

/* ---------------------------------------------------------------------------
   Layer 2 — brand seeds. THE THEME CONTRACT.

   These twelve values are everything a theme may change. A theme stylesheet
   (wwwroot/themes/hana-theme-*.css) redefines exactly this block and nothing
   else. The defaults below are the "ocean" identity and point at the layer-1
   ramp so there is a single source for the blue hexes.

   Do not add feedback colours (green/red/yellow), greys, white/black or
   third-party channel colours here — those carry meaning independent of brand
   and stay fixed across themes.
   --------------------------------------------------------------------------- */
:root {
    /* Darkest brand tone — headings and text on light surfaces. */
    --hana-brand-deep: var(--hana-color-blue-900);
    /* Mid-dark tone — gradient start, secondary fills. */
    --hana-brand-dark: var(--hana-color-blue-700);
    /* Primary fill. The single most representative brand colour. */
    --hana-brand: var(--hana-color-blue-500);
    /* Saturated variant of the primary fill — pressed/active states. */
    --hana-brand-bright: var(--hana-color-blue-800);
    /* Light highlight — gradient end. Must contrast with --hana-brand-dark. */
    --hana-brand-accent: var(--hana-color-cyan-400);
    /* Denser highlight — shell gradient end, emphasis marks. */
    --hana-brand-accent-strong: var(--hana-color-cyan-500);
    /* Desaturated light tone — muted text on brand-filled surfaces. */
    --hana-brand-soft: var(--hana-color-blue-100);
    /* Desaturated mid tone — borders and dividers on light surfaces. */
    --hana-brand-muted: var(--hana-color-blue-gray-500);
    /* Frame/track tone — progress rails, inactive segments. */
    --hana-brand-frame: var(--hana-color-frame-blue);
    /* Near-black brand tint — deepest text, high-contrast marks. */
    --hana-brand-ink: var(--hana-color-navy-900);
    /* Shadow-casting tint — elevation colour, never used as a fill. */
    --hana-brand-ink-alt: var(--hana-color-navy-700);
    /* Chart gridlines and hairline rules. */
    --hana-brand-grid: #b8dcf5;
}

/* ---------------------------------------------------------------------------
   Layer 2b — derived brand tokens.

   Computed from the seeds above; a theme never sets these. Keeping the alpha
   maths here is what stops chromatic rgba() literals leaking back into
   component CSS (build/Check-HanaTokens.ps1 enforces it).

   The [class*="hana-theme-"] selector matters: a custom property is resolved
   where it is DEFINED, so a derived token defined only on :root would freeze
   the root seeds and ignore a theme scoped to a subtree. Repeating the block on
   theme-scoped elements makes them recompute from their own seeds. Themes still
   define nothing but the twelve values.
   --------------------------------------------------------------------------- */
:root,
[class*="hana-theme-"] {
    /* Text/icon colour on a brand-filled surface. */
    --hana-on-brand: var(--hana-color-white);
    /* Default icon colour for themeable mask icons. */
    --hana-icon-brand: var(--hana-brand);
    --hana-gradient-main: linear-gradient(90deg, var(--hana-brand-dark) 0%, var(--hana-brand-accent) 100%);
    --hana-gradient-shell: linear-gradient(135deg, var(--hana-brand-dark) 0%, var(--hana-brand-accent-strong) 100%);
    /* Translucent brand tints, weakest to strongest. */
    --hana-brand-wash: color-mix(in srgb, var(--hana-brand-dark) 8%, transparent);
    --hana-brand-glow: color-mix(in srgb, var(--hana-brand) 20%, transparent);
    --hana-brand-glow-strong: color-mix(in srgb, var(--hana-brand) 26%, transparent);
    --hana-brand-veil: color-mix(in srgb, var(--hana-brand) 35%, transparent);
    /* Elevation tints. Geometry stays in component CSS; only colour is shared. */
    --hana-brand-shadow-weak: color-mix(in srgb, var(--hana-brand-deep) 12%, transparent);
    --hana-brand-shadow: color-mix(in srgb, var(--hana-brand-deep) 18%, transparent);
    --hana-brand-shadow-ink: color-mix(in srgb, var(--hana-brand-ink-alt) 10%, transparent);
    --hana-brand-shadow-ink-strong: color-mix(in srgb, var(--hana-brand-ink-alt) 14%, transparent);
    --hana-shadow-brand: 0 8px 20px var(--hana-brand-shadow);
    --hana-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hana-brand-accent) 45%, transparent);
    /* Deprecated: pre-theming name kept so host apps still on the default blue
       keep rendering. New code uses --hana-shadow-brand. */
    --hana-shadow-blue: var(--hana-shadow-brand);
}

/* ---------------------------------------------------------------------------
   Layer 3 — non-colour design tokens. Theme-independent.
   --------------------------------------------------------------------------- */
:root {
    --hana-radius-sm: 5px;
    --hana-radius-md: 8px;
    --hana-font-family: "Eudoxus Sans", Inter, "Segoe UI", Arial, sans-serif;
    --hana-main-width: 568px;
    --hana-day-cell: 48px;
    --hana-day-dot: 42px;
    --hana-shell-overlap: 35px;
    --hana-chart-label-col: 45px;

    /* Metric typography — the "label value" pairs report cards are built from
       (payment methods, USALI, booker, service type). Two tiers: the breakdown
       pairs inside a card body, and the total that heads the card. Uppercase is
       part of the contract, not decoration: at 10px a lowercase label loses ~30%
       of its ink height and reads a size smaller than the same value beside it. */
    --hana-metric-label-size: 11px;
    --hana-metric-label-weight: 800;
    --hana-metric-value-size: 11px;
    --hana-metric-value-weight: 700;
    --hana-metric-total-label-size: 11px;
    --hana-metric-total-label-weight: 700;
    --hana-metric-total-value-size: 15px;
    --hana-metric-total-value-weight: 800;
}

body {
    font-family: var(--hana-font-family);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Global focus baseline (replaces the blanket reset MudBlazor's stylesheet used to
   provide). Suppress native focus outlines on interactive elements — matches the
   pre-removal look. Components that want a focus ring opt in themselves
   (e.g. .hana-filter-toggle:focus-visible). */
button,
a,
[role="button"],
[tabindex] {
    outline: none;
}

/* Cross-component state resets shared by HanaButton, HanaIconButton, HanaTextField/HanaSelect/etc. */
.hana-button:focus-visible,
.hana-icon-button:focus-visible,
.hana-field__control:focus-visible {
    outline: none;
}

.hana-button:disabled,
.hana-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

/* Icon fills 70% of its host box by default; hosts override per instance
   via --hana-icon-scale (e.g. HanaIconButton's IconScale parameter). */
.hana-icon {
    display: block;
    width: var(--hana-icon-scale, 70%);
    height: var(--hana-icon-scale, 70%);
    object-fit: contain;
    transition: filter 160ms ease;
}

/* Brand-tinted icon. The coloured disc is painted by CSS and the glyph is a mask,
   so both follow the active theme — an <img> with a baked-in SVG fill cannot.
   The glyph is a child element rather than a pseudo-element because the mask URL
   is supplied inline: a relative url() inside a custom property resolves against
   the stylesheet that consumes it (hana.css, served from _content/...), which
   double-prefixes the path. An inline style attribute resolves against the
   document base, the same as the <img src> path. */
.hana-icon--brand {
    position: relative;
    border-radius: 50%;
    background: var(--hana-icon-brand);
    transition: background 160ms ease;
}

.hana-icon__glyph {
    position: absolute;
    inset: 0;
    background: var(--hana-on-brand);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hana-shell-icon {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    place-items: center;
    color: currentColor;
}

    .hana-shell-icon::before,
    .hana-shell-icon::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
    }

.hana-shell-icon--section,
.hana-shell-icon--calendar,
.hana-shell-icon--rooms,
.hana-shell-icon--turnover,
.hana-shell-icon--occupancy,
.hana-shell-icon--adr,
.hana-shell-icon--channel,
.hana-shell-icon--payment,
.hana-shell-icon--trend,
.hana-shell-icon--reception,
.hana-shell-icon--reservations {
    width: 18px;
    height: 18px;
}

    .hana-shell-icon--section::before,
    .hana-shell-icon--calendar::before {
        inset: 2px;
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .hana-shell-icon--section::after,
    .hana-shell-icon--calendar::after {
        left: 5px;
        right: 5px;
        top: 7px;
        border-top: 2px solid currentColor;
    }

    .hana-shell-icon--rooms::before {
        left: 2px;
        right: 2px;
        bottom: 4px;
        height: 7px;
        border: 2px solid currentColor;
        border-radius: 3px;
    }

    .hana-shell-icon--rooms::after {
        left: 4px;
        top: 4px;
        width: 10px;
        height: 6px;
        border: 2px solid currentColor;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
    }

    .hana-shell-icon--turnover::before,
    .hana-shell-icon--reception::before {
        inset: 3px 2px;
        border: 2px solid currentColor;
        border-radius: 999px;
    }

    .hana-shell-icon--turnover::after,
    .hana-shell-icon--reception::after {
        left: 8px;
        top: 4px;
        height: 10px;
        border-left: 2px solid currentColor;
    }

    .hana-shell-icon--occupancy::before {
        inset: 2px;
        border: 3px solid currentColor;
        border-right-color: transparent;
        border-radius: 999px;
        transform: rotate(-35deg);
    }

    .hana-shell-icon--adr::before,
    .hana-shell-icon--trend::before {
        left: 2px;
        bottom: 3px;
        width: 14px;
        height: 10px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
    }

    .hana-shell-icon--adr::after,
    .hana-shell-icon--trend::after {
        left: 5px;
        top: 5px;
        width: 10px;
        height: 7px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: skewY(-26deg);
    }

    .hana-shell-icon--channel::before {
        inset: 2px;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.25;
    }

    .hana-shell-icon--channel::after {
        inset: 6px;
        border-radius: 999px;
        background: currentColor;
    }

    .hana-shell-icon--payment::before {
        inset: 4px 2px;
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .hana-shell-icon--payment::after {
        left: 4px;
        right: 4px;
        top: 8px;
        border-top: 2px solid currentColor;
    }

    .hana-shell-icon--reservations::before {
        inset: 2px;
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .hana-shell-icon--reservations::after {
        left: 5px;
        top: 5px;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
    }

.hana-field--select .hana-field__control {
    appearance: none;
    -webkit-appearance: none;
    min-height: 38px;
    padding: 0 38px 0 16px;
    border-radius: var(--hana-radius-sm);
    color: var(--hana-color-white);
    background-color: var(--hana-brand);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 15.016px
}

    .hana-field--select .hana-field__control:disabled {
        color: var(--hana-brand-soft);
        background-color: var(--hana-brand-dark);
        cursor: default;
    }

/* The placeholder carries the field name on the blue fill, so it reads white like a value. */
.hana-field--select .hana-field__control--placeholder {
    color: var(--hana-color-white);
}

/* Date has no __input-wrapper around its control, so it carries the underline itself.
   Matches the text field's rhythm: same min-height, same border, same focus colour. */
.hana-field--date .hana-field__control {
    width: 100%;
    min-height: 38px;
    padding: 4px 0 6px 0;
    border-bottom: 1px solid var(--hana-color-gray-350);
    color-scheme: light;
}

    .hana-field--date .hana-field__control:focus {
        border-bottom-color: var(--hana-brand-muted);
    }

    .hana-field--date .hana-field__control:disabled {
        border-bottom-style: dashed;
    }

.hana-metric-row {
    display: flex;
    width: 100%;
    min-height: 23px;
    align-items: center;
    gap: 11px;
    color: var(--hana-color-black);
    font-size: 13px;
    margin-bottom: 15px;
    margin-top: 15px
}


.hana-bar-progress {
    position: relative;
    display: block;
    height: 12.5px;
    border-radius: 0;
    overflow: visible;
}

.hana-bar-progress__fill {
    display: block;
    width: calc(var(--hana-bar-value) * 1%);
    height: 100%;
    border-radius: 0;
    background: var(--hana-color-gray-500);
}

.hana-bar-progress__value {
    background: var(--hana-brand-dark);
    position: absolute;
    top: 50%;
    left: calc(var(--hana-bar-value) * 1%);
    transform: translate(-100%, -50%);
    padding: 0 4px;
    color: var(--hana-on-brand);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
}

.hana-bar-progress__value--small {
    transform: translate(0%, -50%);
}

.hana-bar-progress__value--large {
    transform: translate(-100%, -50%);
}

.hana-report-old {
    width: min(var(--hana-main-width), 100%);
    margin: 0 auto;
}

.hana-report-old__body {
    border-radius: 10px;
}

.hana-report-old__actions {
    display: flex;
    gap: 10px;
    padding: 0 15px;
    margin-top: -35px;
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
}

.hana-report-old__content {
    padding: 0 16px 16px;
}

.hana-report-old__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hana-report-old__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 15px 12px;
    padding: 12px;
    background: var(--hana-brand-soft);
    border-radius: var(--hana-radius-md);
}

/* Heading card and body overlap by --hana-shell-overlap: the shell is a grid
   whose middle row is the overlap zone — card spans rows 1-2, body rows 2-3.
   The action buttons (first thing in the body) sit in that zone on top of the
   card's blue band at every width; no negative margins involved. */
.hana-report-shell {
    width: min(var(--hana-main-width), 100%);
    margin: 0 auto;
    container: hana-shell / inline-size;
    display: grid;
    grid-template-rows: auto var(--hana-shell-overlap) auto;
    grid-template-columns: 100%;
}

.hana-report-shell__body {
    grid-row: 2 / 4;
    grid-column: 1;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.hana-report-shell__actions {
    display: flex;
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 16px;
}

.hana-report-shell__content {
    padding: 0 16px 16px;
    container: hana-content / inline-size;
}

.hana-report-shell__card {
    grid-row: 1 / 3;
    grid-column: 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hana-report-shell__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 15px 12px;
    padding: 12px 0px;
    border-radius: var(--hana-radius-md);
}

.hana-error-text {
    margin: 8px 0 0;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--hana-color-red-500);
}

.hana-live-preview {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(150px, 220px);
    gap: 32px;
    align-items: start;
    padding: 32px;
    border: 1px solid var(--hana-brand);
    border-radius: var(--hana-radius-md);
    background: var(--hana-brand-frame);
}

.hana-live-preview__left,
.hana-live-preview__right {
    display: grid;
    gap: 18px;
}

.hana-live-preview__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hana-live-preview__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hana-live-preview__progress {
    display: grid;
    gap: 8px;
}

.hana-shell-board {
    display: grid;
    gap: 28px;
    padding: 28px;
    border-radius: 10px;
    background: var(--hana-color-orange-frame);
}

.hana-shell-board__top {
    display: grid;
    grid-template-columns: minmax(280px, 568px) minmax(260px, 1fr);
    gap: 28px;
    align-items: start;
}

.hana-shell-board__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(111px, 1fr));
    gap: 14px;
}

.hana-shell-board__middle {
    display: grid;
    grid-template-columns: minmax(260px, 346px) minmax(260px, 346px) auto auto;
    gap: 18px;
    align-items: start;
}

.hana-shell-board__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 306px));
    gap: 24px;
    align-items: start;
}

.hana-shell-board__rail {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.hana-shell-board__indicators {
    display: grid;
    gap: 8px;
}

.hana-live-preview {
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--hana-color-orange-frame);
}

.hana-live-preview__left {
    border-radius: 10px;
    padding: 20px;
    background: var(--hana-brand-frame);
}

.hana-live-preview__right {
    justify-items: center;
}

@media (max-width: 1080px) {
    .hana-live-preview {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .hana-shell-board__top,
    .hana-shell-board__middle {
        grid-template-columns: 1fr;
    }
}

/* ── HanaFilterButton ────────────────────────────────────────────────────── */
.hana-filter-button {
    position: relative;
    width: 148px;
    height: 99px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hfb-bg, var(--hana-brand));
    color: var(--hana-color-white);
    border: none;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 13.2px rgba(0, 0, 0, 0.04), inset 0 1px 6px rgba(0, 0, 0, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease;
    text-align: left;
}

    .hana-filter-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 0 13.2px rgba(0, 0, 0, 0.04);
    }

    .hana-filter-button:disabled {
        cursor: not-allowed;
        opacity: 0.62;
    }

    /* ball decoration — two overlapping circles clipped at bottom-right */
    .hana-filter-button::before {
        content: '';
        position: absolute;
        right: -20px;
        bottom: -20px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.13);
        box-shadow: inset 0 0 13.2px rgba(0, 0, 0, 0.04), inset 0 1px 6px rgba(0, 0, 0, 0.04);
        pointer-events: none;
    }

    .hana-filter-button::after {
        content: '';
        position: absolute;
        right: 28px;
        bottom: -22px;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.09);
        box-shadow: inset 0 0 13.2px rgba(0, 0, 0, 0.04), inset 0 1px 6px rgba(0, 0, 0, 0.04);
        pointer-events: none;
    }

.hana-filter-button__content {
    position: absolute;
    top: 17px;
    left: 14px;
    right: 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hana-filter-button__header {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.hana-filter-button__kicker {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.hana-filter-button__detail {
    display: block;
    font-size: 19px;
    font-weight: 800;
    line-height: 20px;
    margin-top: 2px;
}

.hana-filter-button__icon {
    position: absolute;
    left: 14px;
    bottom: 13px;
    width: 17px;
    height: 14px;
}

/* ── HanaReservation ────────────────────────────────────────────────────────── */

.hana-reservation {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-height: 49px;
    padding: 10px 12px;
    background: var(--hana-color-white);
    border-radius: 10px;
    box-shadow: var(--hana-shadow-brand);
    overflow: hidden;
    margin-bottom: 10px;
}

.hana-reservation__guest {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Body is a fixed-width column (Eudoxus Sans has no tabular digits, so a
   content-sized column drifts a few px per row). Fixed basis = identical
   left edge on every card; shrinks equally on tight viewports. */
.hana-reservation__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 0 1 130px;
    overflow: hidden;
    min-width: 0;
}

.hana-reservation__row {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}


/* Fills whatever the guest column got (it grows with the card), so wide
   screens show the full name and only genuinely long ones ellipsize. */
.hana-reservation__name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hana-color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hana-reservation__icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.hana-reservation__meta {
    font-size: 11px;
    font-weight: 500;
    color: var(--hana-color-black);
    white-space: nowrap;
    /* Equal-width digits: dates and counts occupy the same width on every row. */
    font-variant-numeric: tabular-nums;
}

.hana-reservation__meta--amount {
    display: inline-block;
    min-width: 6ch;
    font-weight: 700;
}

/* Reserve width for up to 2 digits so a single-digit night count doesn't shift the trailing items left. */
.hana-reservation__meta--nights {
    display: inline-block;
    min-width: 2ch;
    margin-right: 10px;
}

/* Reserve width for up to 2 digits so a double-digit room count doesn't shift the guest icon right. */
.hana-reservation__meta--rooms {
    display: inline-block;
    min-width: 1.4ch;
}

.hana-reservation .hana-icon-button {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: var(--hana-radius-sm);
    background: var(--hana-brand-bright);
}

    /* Inset glyph to match the Figma details icon (~13px in a 32px box). */
    .hana-reservation .hana-icon-button .hana-icon {
        width: 40%;
        height: 40%;
    }

/* Close/back button — Figma spec: 40x40 circle; glyph size comes from IconScale="44%".
   Shared by HanaReservationDetails and the Client ReservationCheckIn page, so it lives here
   rather than in either component's scoped CSS. */
.hana-icon-button--close {
    width: 40px;
    height: 40px;
}

/* Note button, pinned to the top-right of the notes box in HanaReservationDetails. Lives
   here for the same reason as --close: the host passes it through Class, and a rule in the
   host's scoped CSS would carry the host's scope attribute, never the button's. */
.hana-icon-button--note {
    position: absolute;
    top: 0;
    right: 0;
}

/* ── end HanaReservation ────────────────────────────────────────────────────── */


/* ── HanaDatePicker (shared: HanaDateHeading duplicates this markup inline instead of
   composing <HanaDatePicker>, so these classes must stay global — a scoped .razor.css
   would only match HanaDatePicker.razor's own elements, not HanaDateHeading's copy) ── */
.hana-date-picker {
    position: relative;
    background: var(--hana-brand-bright);
    overflow: hidden;
    padding: 0 16px 46px;
    width: 100%;
    border-radius: 0;
}

/* Day cells cap at --hana-day-cell so the calendar stays compact and centered
   at any container width; header and actions track the same width so the
   month label and nav arrows stay aligned with the grid edges. */
.hana-date-picker__header,
.hana-date-picker__weekdays,
.hana-date-picker__grid,
.hana-date-picker__actions {
    max-width: calc(var(--hana-day-cell) * 7);
    margin-inline: auto;
}

.hana-date-picker__header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 16px;
}

.hana-date-picker__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hana-date-picker__mode-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--hana-color-white);
    opacity: 0.75;
}

.hana-date-picker__month {
    display: block;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hana-color-white);
}

.hana-date-picker__nav {
    display: flex;
    gap: 25px;
    align-items: center;
}

    /* Nav arrows keep their muted look on hover/press — no color flash on
       click, and no stuck hover color after a tap on touch devices. */
    .hana-date-picker__nav .hana-icon-button--muted:hover:not(:disabled),
    .hana-date-picker__nav .hana-icon-button--muted:active {
        color: var(--hana-color-gray-600);
        background: var(--hana-color-gray-100);
    }

.hana-date-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, var(--hana-day-cell)));
    justify-content: center;
    text-align: center;
    margin-bottom: 6px;
}

.hana-date-picker__weekday {
    font-size: 11px;
    font-weight: 500;
    color: var(--hana-color-white);
    padding: 4px 0;
}

.hana-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, var(--hana-day-cell)));
    justify-content: center;
    gap: 0px 0;
}

.hana-date-picker__day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--hana-color-white);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

    /* State circle: fixed-size dot centered in the cell (smaller than the
       cell itself), shared by hover/selected/range states. */
    .hana-date-picker__day::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(var(--hana-day-dot), 100%);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: background 160ms ease;
        z-index: -1;
    }

    .hana-date-picker__day:hover:not(:disabled)::before {
        background: rgba(255, 255, 255, 0.15);
    }

    .hana-date-picker__day:focus,
    .hana-date-picker__day:focus-visible {
        outline: none;
    }

.hana-date-picker__day--selected::before {
    background: var(--hana-brand);
}

.hana-date-picker__day--selected-to::before {
    background: var(--hana-brand-deep);
}

.hana-date-picker__day--other-month {
    opacity: 0.4;
}

.hana-date-picker__day--range::before {
    background: var(--hana-brand-veil);
}

.hana-date-picker__day--empty {
    cursor: default;
    pointer-events: none;
}

/* Grayed/read-only state — matches disabled button token (opacity 0.62). */
.hana-date-picker--disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.hana-date-picker--embedded {
    background: none;
    width: auto;
    overflow: visible;
    padding: 0 0 16px;
}

.hana-date-picker__actions {
    display: flex;
    gap: 10px;
    padding-top: 14px;
}

    .hana-date-picker__actions .hana-filter-button {
        flex: 1;
    }

/* ── HanaDateHeading overrides (targets the shared markup above) ── */
.hana-date-heading .hana-date-picker {
    position: relative;
    z-index: 1;
    background: transparent;
    width: 100%;
    padding: 10px 18px calc(var(--hana-shell-overlap) + 16px);
}

.hana-date-heading .hana-date-picker__header {
    padding-bottom: 10px;
    /* Start the month label over the first day column's digits: half a track
       (a track is min(--hana-day-cell, 1/7 of the row)) minus half a character,
       so it stays aligned as the day cells shrink on narrow screens. */
    padding-left: calc(min(var(--hana-day-cell) / 2, 100% / 14) - 0.5ch);
}

.hana-date-heading .hana-date-picker__mode-kicker {
    opacity: 1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.hana-date-heading .hana-date-picker__month {
    font-size: 19px;
    line-height: 1;
    text-transform: capitalize;
}

.hana-date-heading .hana-date-picker__nav {
    gap: 8px;
}

.hana-date-heading .hana-date-picker__weekday {
    font-size: 11px;
}

.hana-date-heading .hana-date-picker__day {
    font-size: 14px;
    line-height: 1;
}

/* ── end HanaDateHeading ─────────────────────────────────────────────────────── */

@keyframes hana-spin {
    to {
        transform: rotate(360deg);
    }
}

.hana-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Default surface for a field is a white card, so the label is dark. Fields placed on a
   dark surface (login) opt out by setting --hana-field-label-color on their container. */
.hana-field__label {
    font-size: 14px;
    color: var(--hana-field-label-color, var(--hana-color-gray-700));
    margin-bottom: 4px;
}

.hana-field__input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    border-bottom: 1px solid var(--hana-color-gray-350);
}

.hana-field__control {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--hana-color-gray-800);
    padding: 4px 0 6px 0;
    min-width: 0;
    box-shadow: none;
}

.hana-field__input-wrapper:focus-within {
    border-bottom-color: var(--hana-brand-muted);
}

/* A textarea is taller than the icon slots it sits beside, so the wrapper stops centring
   its children and lets the control own the full box. */
.hana-field--multiline .hana-field__input-wrapper {
    align-items: stretch;
}

/* Only the height is the caller's to change: horizontal resize would break the field out
   of whatever grid track it was placed in. */
.hana-field__control--multiline {
    font-family: inherit;
    line-height: 1.35;
    resize: vertical;
}

.hana-field__control::placeholder {
    color: var(--hana-color-gray-400);
}

.hana-field__control:disabled {
    color: var(--hana-color-gray-450);
    cursor: not-allowed;
}

.hana-field__icon {
    display: flex;
    align-items: center;
    color: var(--hana-color-gray-700);
    font-size: 18px;
}

.hana-field__icon--start {
    margin-right: 8px;
}

.hana-field__icon--end {
    margin-left: 8px;
    cursor: pointer;
}

.hana-field__icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

    .hana-field__icon-button:focus,
    .hana-field__icon-button:focus-visible {
        outline: none;
        box-shadow: none;
    }

/* ── Shared reservation-family elements (used by HanaGuestRow, HanaReservationRow,
   HanaReservationDetails, and by several Client pages that render this markup
   inline outside a component's scoped CSS boundary) ──────────────────────────── */

.hana-reservation__meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.margin-bottom {
    margin-bottom: 60px;
}

.hana-bar-progress__fill {
    background: var(--hana-gradient-main);
}

.hana-bar-progress--previous .hana-bar-progress__fill {
    background: var(--hana-color-gray-200);
}



/* Height derives from row count × row height (+ 32px x-axis) instead of a
   fixed total; variants tune the two tokens. */
.hana-chart-grid {
    --hana-chart-rows: 12;
    --hana-chart-row-h: 47px;
    display: grid;
    grid-template-columns: var(--hana-chart-label-col) 1fr;
    grid-template-rows: auto 32px;
}

/* Aligns chart-adjacent content (headline value, legend) with the plot area
   by indenting it past the y-label column. */
.hana-chart-indent {
    padding-left: var(--hana-chart-label-col);
}

.hana-bar-progress--previous .hana-bar-progress__value {
    background: var(--hana-color-gray-500);
}

.hana-chart-grid__y-labels {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-rows: repeat(var(--hana-chart-rows), var(--hana-chart-row-h));
    align-items: center;
    font-size: 11px;
    font-weight: 500;
}


.hana-chart-grid__plot {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: repeat(var(--hana-chart-rows), var(--hana-chart-row-h));
    gap: 2px;
    position: relative;
    border-bottom: 1px solid var(--hana-brand-grid);
    border-right: 1px solid var(--hana-brand-grid);
    background-image: linear-gradient(to right, var(--hana-brand-grid) 1px, transparent 1px);
    background-size: 25% 100%;
    background-repeat: repeat-x;
}

.hana-chart-grid__row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.hana-chart-grid__x-labels {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    align-items: start;
    font-size: 10px;
    white-space: nowrap;
}

    .hana-chart-grid__x-labels > div {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
    }



.hana-metric-row__value {
    font-size: 13px;
    font-weight: 800;
    color: var(--hana-color-black);
}

.hana-metric-row__value--large {
    font-size: 18px;
}

.hana-metric-row__percent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--hana-color-gray-990);
}

.hana-metric-row__icon {
    color: var(--hana-color-red-400);
    font-size: 18px;
    line-height: 1;
}

.hana-chart-grid__footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-right: 16px;
}


.hana-chart-grid--full {
    --hana-chart-rows: 12;
}

.hana-chart-grid--small {
    --hana-chart-rows: 4;
    --hana-chart-row-h: 57px;
}
/* ── end shared reservation/chart/metric-row elements ─────────────────────────── */

/* ── HanaBarChart ────────────────────────────────────────────────────────────── */
.hana-bar-chart__legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hana-bar-chart__legend-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--hana-color-gray-900);
    margin-right: 4px;
}

.hana-bar-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hana-color-gray-900);
}

    .hana-bar-chart__legend-item::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 8px;
        border-radius: 2px;
    }

.hana-bar-chart__legend-item--previous::before {
    background: var(--hana-color-gray-200);
}

.hana-bar-chart__legend-item--current::before {
    background: var(--hana-gradient-main);
}

/* ── end HanaBarChart ────────────────────────────────────────────────────────── */


/* Cross-component: HanaCapacityOverview customizes its nested HanaIndicator children. */
.hana-occupancy-stats .hana-indicator__top {
    font-size: 14px;
}


/* Taller, full-width bar variant used inside HanaPercentBars rows. */
.hana-bar-progress--tall {
    width: 100%;
    height: 22px;
    border-radius: 0;
}

    .hana-bar-progress--tall .hana-bar-progress__fill {
        border-radius: 0;
    }

    /* Badge fills the full bar height (flush, no vertical gap). */
    .hana-bar-progress--tall .hana-bar-progress__value {
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 10px;
        border-radius: 0;
    }

    .hana-bar-progress--tall .hana-bar-progress__value--large {
        transform: translateX(-100%);
    }

    .hana-bar-progress--tall .hana-bar-progress__value--small {
        transform: translateX(0);
    }
/* HanaRoomChargeRow — Figma "H Comp1" (1593:8464), 305.75 x 49.5 */

.hana-room-charge {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 6px 9px;
    background: var(--hana-color-white);
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 7px var(--hana-brand-shadow-ink);
    overflow: hidden;
}

.hana-room-charge--clickable {
    cursor: pointer;
}

    .hana-room-charge--clickable:hover {
        background: var(--hana-color-near-white);
        box-shadow: 0 3px 10px var(--hana-brand-shadow-ink-strong);
    }

/* Status bar — Figma 2 x 29.9. HanaIndicator's own 40px height is shared with the
   reservation rows, so the override is scoped to this row. */
.hana-room-charge .hana-indicator-main {
    flex-shrink: 0;
    height: 30px;
}

.hana-room-charge__room {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 72px;
    min-width: 0;
    margin-left: 13px;
    overflow: hidden;
}

.hana-room-charge__room-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

.hana-room-charge__room-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    object-fit: contain;
}

.hana-room-charge__room-number {
    color: var(--hana-color-gray-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hana-room-charge__room-type {
    margin-top: 1px;
    color: var(--hana-color-gray-600);
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nights / guests. Absent from Figma node 1593:8464 but part of the live row, so the
   column keeps its own widths and never shrinks into the amount. */
.hana-room-charge__stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    min-width: 42px;
    gap: 3px;
}

.hana-room-charge__stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hana-room-charge__stat-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
}

.hana-room-charge__stat-value {
    color: var(--hana-color-gray-950);
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
}

.hana-room-charge__amount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 15px 0 6px;
    color: var(--hana-color-gray-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    text-align: right;
    white-space: nowrap;
}

.hana-room-charge__pay-wrapper {
    display: contents;
}

/* Charge button — Figma 32x32 flush to the row's right edge. The sizing lives on the row
   because the wrapper is display:contents: the button is a direct flex child, so without
   flex-shrink:0 it is the only shrinkable item and the row's overflow:hidden clips it on
   narrow screens. */
.hana-room-charge .hana-icon-button {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
/*  HanaRoomChargeDetails */

.room-charges-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hana-room-charge-details-wrapper {
    width: 100%;
}

/* Figma's detail card carries 16px gutters, not HanaSectionCard's default 24 — the item
   columns are dimensioned for that 275px content box. Scoped to this wrapper so no other
   section card moves. */
.hana-room-charge-details-wrapper .hana-section-card__body {
    padding: 16px;
}

.hana-room-charge-details {
    width: 100%;
    margin-inline: auto;
    background: var(--hana-color-white);
    border-radius: 10px;
    box-sizing: border-box;
}

.hana-room-charge-details__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.hana-room-charge-details__room {
    min-width: 0;
}

.hana-room-charge-details__room-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--hana-color-gray-900);
    font-size: 27px;
    font-weight: 800;
    line-height: 30px;
}

.hana-room-charge-details__room-icon {
    width: 18px;
    height: 18px;
}

.hana-room-charge-details__room-type {
    margin-top: 3px;
    color: var(--hana-color-gray-600);
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    text-transform: uppercase;
}

.hana-room-charge-details__guest {
    width: 132px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--hana-color-gray-350);
    color: var(--hana-color-gray-900);
    font-size: 13px;
    font-weight: 800;
    line-height: 15px;
    text-transform: uppercase;
}

.hana-room-charge-details__stay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.hana-room-charge-details__stay-item {
    min-width: 0;
}

.hana-room-charge-details__stay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

    .hana-room-charge-details__stay-label img {
        width: 11px;
        height: 11px;
    }

.hana-room-charge-details__stay-item strong {
    display: block;
    margin-top: 2px;
    padding-left: 19px;
    font-size: 12px;
    font-weight: 700;
}

.hana-room-charge-details__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hana-room-charge-details__item-name {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hana-color-gray-350);
    font-size: 15px;
    font-weight: 500;
}

/* Column widths come from the Figma card's 275px content box: Kol. 60, Cena 117,
   Iznos takes the rest and is right-aligned. */
.hana-room-charge-details__item-header,
.hana-room-charge-details__item-values {
    display: grid;
    grid-template-columns: 60px 117px 1fr;
}

.hana-room-charge-details__item-header {
    margin-top: 9px;
    color: var(--hana-color-gray-600);
    font-size: 13px;
    font-weight: 700;
}

.hana-room-charge-details__item-values {
    margin-top: 3px;
    color: var(--hana-color-gray-900);
    font-size: 16px;
    font-weight: 800;
}

    .hana-room-charge-details__item-header span:last-child,
    .hana-room-charge-details__item-values strong:last-child {
        text-align: right;
    }

.hana-room-charge-details__empty {
    padding: 20px 0;
    color: var(--hana-color-gray-600);
    text-align: center;
}

.hana-room-charge-details__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

.hana-room-charge-details__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--hana-color-gray-900);
    font-size: 13px;
    font-weight: 700;
}

    .hana-room-charge-details__summary-row strong {
        font-size: 16px;
        font-weight: 800;
        white-space: nowrap;
    }

.hana-room-charge-details__divider {
    height: 1px;
    margin: 23px 2px 21px;
    background: var(--hana-color-gray-350);
}

.hana-room-charge-details__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Figma buttons: 28px tall, 8px radius, 12px label — smaller than HanaButton's default
   38/5/13, so the row overrides them locally rather than adding a variant. */
.hana-room-charge-details__actions .hana-button {
    min-height: 28px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 12px;
}

/* "Odustani" is Hotelier Azure (--hana-brand-bright), not the secondary variant's own
   --hana-brand-dark; recolouring through --hana-button-bg keeps hover and disabled intact. */
.hana-room-charge-details__actions .hana-button--secondary {
    --hana-button-bg: var(--hana-brand-bright);
    font-weight: 500;
}
/* ── Global focus-ring suppression ──────────────────────────────────────────────
   MudBlazor's stylesheet used to suppress every native/focus ring app-wide; removing
   it exposed focus outlines AND each component's :focus-visible box-shadow ring.
   This restores the pre-removal look: no focus ring on any interactive element.
   Placed last + !important so it wins over every component's :focus rule. Only :focus
   states are targeted, so active/hover/elevation box-shadows are untouched. */
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.hana-paid-icon {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
    border-radius: 2px;
    background: var(--hana-color-green-500);
}

.hana-not-paid-icon {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
    border-radius: 2px;
    background: var(--hana-color-red-500);
}