@import '_content/Hotelier.Hana/Hotelier.Hana.l4z5tqpkgy.bundle.scp.css';

/* /Pages/ConfirmationDialog.razor.rz.scp.css */
.logout[b-1zugbwc209] {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}

.logout__card[b-1zugbwc209] {
    width: 100%;
    max-width: 340px;

    padding: 24px;
    border-radius: 16px;
    background: #fff;

    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.logout__badge[b-1zugbwc209] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 16px;

    border-radius: 50%;
}

.logout__badge-h[b-1zugbwc209] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logout__logo[b-1zugbwc209] {
    display: block;
    max-width: 180px;
    margin: 0 auto 20px;
}

.logout__text[b-1zugbwc209] {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.logout__actions[b-1zugbwc209] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.logout__btn[b-1zugbwc209] {
    min-width: 110px;
    height: 40px;

    padding: 0 20px;
    border: 0;
    border-radius: 8px;

    font-size: 14px;
    cursor: pointer;
}
/* /Pages/Forecast.razor.rz.scp.css */
.forecast__groups[b-et6melou71] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 16px;
}

/* Fullscreen chart overlay. Opened on group-button click; mobile shows it landscape. */
.forecast-fullscreen[b-et6melou71] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hana-color-white);
}

.forecast-fullscreen__header[b-et6melou71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 13px 20px;
    background: #0071bb; /* "Hotelier Azure" header */
}

.forecast-fullscreen__title[b-et6melou71] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Matches HanaSectionHeading2 text: white, bold, 15px. */
.forecast-fullscreen__heading[b-et6melou71] {
    color: var(--hana-color-white);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.forecast-fullscreen__legend[b-et6melou71] {
    display: flex;
    align-items: center;
    gap: 25px;
}

.forecast-fullscreen__chip[b-et6melou71] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: none;
    cursor: pointer;
}

.forecast-fullscreen__swatch[b-et6melou71] {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--forecast-chip-swatch, var(--hana-color-gray-500));
}

.forecast-fullscreen__chip-label[b-et6melou71] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5ed7ff; /* inactive label */
}

.forecast-fullscreen__chip--active .forecast-fullscreen__chip-label[b-et6melou71] {
    color: var(--hana-color-white);
}

.forecast-fullscreen__body[b-et6melou71] {
    flex: 1;
    min-height: 0;
    padding: 8px 16px 16px;
}

/* Fallback for browsers without Screen Orientation lock (e.g. iOS Safari):
   force a landscape layout by rotating the overlay when the device is portrait. */
@media (orientation: portrait) {
    .forecast-fullscreen[b-et6melou71] {
        width: 100vh;
        height: 100vw;
        transform: rotate(90deg);
        transform-origin: top left;
        left: 100%;
    }
}
/* /Pages/GuestCheckIn.razor.rz.scp.css */
.checkin-panel[b-ubb46vvd2d] {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 0;
    max-height: 100%;
}

/* EditForm renders the <form>, so it is outside this component's scope and needs ::deep.
   Without an explicit width it shrink-to-fits as a flex item and every field collapses. */
.checkin-panel[b-ubb46vvd2d]  form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
}

.checkin-panel[b-ubb46vvd2d]  .hana-section-card {
    min-height: 0;
    max-height: 100%;
}

/* The whole field list scrolls, actions included: they are part of the body now, not a footer. */
.checkin-panel[b-ubb46vvd2d]  .hana-section-card__body {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
}

/* Guests stack vertically; each block after the first is divided from the one above. */
.checkin-room[b-ubb46vvd2d] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Heading hugs the guest content below it; guests are separated by the parent's 20px gap. */
.checkin-room__guest[b-ubb46vvd2d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Checked-in guests are read-only: just the booked name and an arrival badge. */
.checkin-room__readonly[b-ubb46vvd2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.checkin-room__name[b-ubb46vvd2d] {
    font-size: 15px;
    font-weight: 700;
    color: var(--hana-color-gray-600);
}

.checkin-room__badge[b-ubb46vvd2d] {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hana-color-white);
    background: var(--hana-color-green-500);
    border-radius: 999px;
}

/* Single column at every width: the design is a narrow guest card, so fields never pair up. */
.checkin-form[b-ubb46vvd2d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
}

/* Design labels are smaller and bolder than the library default, and values a step larger.
   Scoped to this card so the rest of the app keeps the shared field rhythm. */
.checkin-form[b-ubb46vvd2d]  .hana-field__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--hana-color-gray-600);
}

/* Only the underlined controls take the grey value colour - selects keep their filled blue look. */
.checkin-form[b-ubb46vvd2d]  .hana-field:not(.hana-field--select) .hana-field__control {
    font-size: 15px;
    color: var(--hana-color-gray-600);
}

.checkin-form__gender[b-ubb46vvd2d] {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 38px;
}

.checkin-form__gender-label[b-ubb46vvd2d] {
    font-size: 13px;
    font-weight: 700;
    color: var(--hana-color-gray-600);
}

/* Sits in the field flow, so no divider and no padding of its own - the only rule above it is
   the last text field's own underline. */
.checkin-form__actions[b-ubb46vvd2d] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

    .checkin-form__actions[b-ubb46vvd2d]  .hana-button {
        flex: 1 1 0;
        min-width: 0;
    }
/* /Pages/InvoicesOverview.razor.rz.scp.css */
/* Each payment summary renders as its own rounded white block with spacing. */
.invoices-overview[b-3bugtjqic8]  .payment-summary-card {
    margin-bottom: 12px;
    border-radius: var(--hana-radius-md);
    box-shadow: var(--hana-shadow-blue);
    overflow: hidden;
}
/* /Pages/ListRoomCharges.razor.rz.scp.css */
/* Layout this page owns. These two classes used to sit in Hana's hana.css beside the
   detail panel's own rules, but nothing in the library renders them — they are on this
   page's markup, so they belong here. */

.room-charges-list[b-69zfu79x1k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hana-room-charge-details-wrapper[b-69zfu79x1k] {
    width: 100%;
}

/* The design's detail card carries 16px gutters, not HanaSectionCard's default 24 — the item
   columns are dimensioned for that 275px content box. ::deep because the section card is
   rendered by HanaRoomChargeDetails, not by this page; the wrapper scopes it so no other
   section card moves. */
.hana-room-charge-details-wrapper[b-69zfu79x1k]  .hana-section-card__body {
    padding: 16px;
}
/* /Pages/Login.razor.rz.scp.css */
/* Design node 1940:6197 — reference frame 336 x 745. Every offset below is that frame's
   geometry kept 1:1; the column is capped at 336px and centred so the proportions
   survive on the 480px AuthLayout container and on desktop. */

.login-page[b-0x4zfgzkda] {
    position: relative;
    /* Owns a stacking context so the fixed backdrop below can sit behind the page
       content without falling behind .auth-main-content's own background. */
    z-index: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* Full-bleed artwork: fixed, so it escapes the 480px auth container and covers the
   viewport the way the design's edge-to-edge frame does.

   The design paints a solid #002262 ground with a radial wash over it at 46% opacity.
   That wash is a circle of r=316.68 centred at (168, 266.44) in the 336 x 745 frame;
   as percentages of the frame that is 94.25% x 42.51% at 50% 35.76%, which keeps the
   design's proportions when the fixed layer stretches to the viewport. */
.login-page[b-0x4zfgzkda]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 94.25% 42.51% at 50% 35.76%,
            rgba(73, 174, 241, 0.46) 0%,
            rgba(58, 147, 207, 0.46) 25%,
            rgba(43, 121, 173, 0.46) 50%,
            rgba(28, 95, 139, 0.46) 75%,
            rgba(14, 68, 105, 0.46) 100%),
        #002262;
}

/* Curves hang off the frame's top-right corner. The bands themselves cover x=45.5
   to 336 and y=0 to 128.4 of the 336-wide design frame, so both variants below are
   pinned to that corner and differ only in how much glow bleed they carry.

   The design tool's own SVG export is not usable here: it wraps each band in a filter chain
   ending in feMorphology radius="37" dilate, which the tool composites its own way but
   a browser applies literally, painting near-white blobs over the artwork. */
.login-curves[b-0x4zfgzkda] {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    max-width: none;
    pointer-events: none;
}

/* Hand-authored from the design's three band paths and their linear gradients, with
   the edge glow redrawn as blurred strokes along each band's outer arc. Transparent,
   so the backdrop above shows through and there is no seam. 10px of the viewBox is
   left-side bleed for the glow, hence 300.491 rather than the 290.491 band box. */
.login-curves--svg[b-0x4zfgzkda] {
    width: 300.491px;
    height: 138.441px;
}

/* The design tool's 4x PNG render of the same node. Pixel-exact, but it flattens the glow
   against the backdrop, so this variant is opaque and its bleed (27px left, 32.1px
   below the bands) shows as a rectangular seam against the page. */
.login-curves--png[b-0x4zfgzkda] {
    width: 317.5px;
    height: 160.5px;
}

.login-brand[b-0x4zfgzkda] {
    margin-top: 163px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-brand__wordmark[b-0x4zfgzkda] {
    width: 97px;
    height: 32px;
}

.login-brand__subtitle[b-0x4zfgzkda] {
    color: var(--hana-color-white);
    font-size: 8.594px;
    font-weight: 500;
    line-height: 11.062px;
    letter-spacing: 0.1719px;
    text-align: center;
}

.login-logo[b-0x4zfgzkda] {
    margin-top: 48px;
    width: 236px;
    height: 57.65px;
}

.login-form[b-0x4zfgzkda] {
    margin-top: 45px;
    width: 236px;
}

/* ── Hana field overrides ─────────────────────────────────────────────────────
   HanaTextField renders its own markup, so these rules cross the scope boundary
   with ::deep. The library default is a dark 16px control on a white card; the
   login sits on the dark artwork, so text, rule and icons all go white. */

/* Rows are on a 36px pitch and the text sits on the rule, not centred in the row. */
.login-form[b-0x4zfgzkda]  .hana-field__input-wrapper {
    align-items: flex-end;
    min-height: 36px;
    padding-bottom: 3px;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.login-form[b-0x4zfgzkda]  .hana-field__input-wrapper:focus-within {
    border-bottom-color: var(--hana-color-white);
}

.login-form[b-0x4zfgzkda]  .hana-field__control {
    padding: 0;
    font-size: 12px;
    line-height: 15.016px;
    color: var(--hana-color-white);
}

/* The design shows the field name as resting text in the same white as a typed
   value, so the muted library placeholder colour is overridden outright. */
.login-form[b-0x4zfgzkda]  .hana-field__control::placeholder {
    color: var(--hana-color-white);
    opacity: 1;
}

.login-form[b-0x4zfgzkda]  .hana-field__icon--start {
    margin-right: 10px;
    margin-bottom: 3px;
}

/* The bundled glyphs are drawn black for light surfaces. brightness(0) flattens
   each one to black first so invert(1) lands on pure white whatever the source
   fill was — no white duplicate of the asset needed. */
.login-form[b-0x4zfgzkda]  .login-field__icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.login-submit[b-0x4zfgzkda] {
    margin-top: 28px;
}

.login-submit[b-0x4zfgzkda]  .hana-button {
    min-height: 30px;
    height: 30px;
    padding: 0;
    background: var(--hana-gradient-main);
    font-size: 12px;
    font-weight: 500;
    line-height: 15.016px;
}
/* /Pages/Logout.razor.rz.scp.css */
/* Backdrop */
.logout[b-wnlaod27vc] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);    
}

/* Card — 305x148, rounded 10 (design spec). */
.logout__card[b-wnlaod27vc] {
    position: relative;
    width: min(305px, 90vw);
    min-height: 148px;
    padding: 28px 20px 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* H badge — navy square overhanging the card top, centered. */
.logout__badge[b-wnlaod27vc] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #02416e;
    border-radius: 6px;
}

.logout__badge-h[b-wnlaod27vc] {
    width: 14px;
    height: 15px;
    /* Force the H glyph white regardless of source color. */
    filter: brightness(0) invert(1);
}

/* Brand wordmark, centered under the badge. */
.logout__logo[b-wnlaod27vc] {
    display: block;
    height: 14px;
    width: auto;
    margin: 10px auto 0;
}

.logout__text[b-wnlaod27vc] {
    margin: 16px 0 18px;
    font-family: "Eudoxus Sans";
    font-size: 13px;
    line-height: 15px;
    font-weight: 500;
    color: #000000;
}

.logout__actions[b-wnlaod27vc] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Blue buttons — #0071BB, 28px tall, rounded 8 (design spec). */
.logout__btn[b-wnlaod27vc] {
    min-width: 40px;
    height: 28px;
    padding: 0 15px;
    background: #0071bb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "Eudoxus Sans";
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease;
}

    .logout__btn:hover[b-wnlaod27vc] {
        background: #005a95;
    }
/* /Pages/ManagerReport.razor.rz.scp.css */
/* The .hana-report-table markup below is written in this page's own .razor, only nested
   inside HanaSectionCard's ChildContent. Razor still stamps this page's scope attribute on
   it, so these rules need no ::deep — unlike the HanaSectionHeading2 rules further down. */

/* Report rows sit inside HanaSectionCard, which already pads its body — drop the
   table's extra top margin and tighten per-row vertical padding. */
.manager-report .hana-report-table[b-mcja7cwq2n] {
    margin-top: 0;
}

.manager-report .hana-report-table__row[b-mcja7cwq2n] {
    padding: 8px 0;
}

.manager-report .hana-report-table__row:last-child[b-mcja7cwq2n] {
    border-bottom: 0;
}

/* Dan/Mesec/Godina column header: bold label with a leading vertical accent bar. */
.manager-report .hana-report-table__head[b-mcja7cwq2n] {
    gap: 0 24px;
    /* 24px horizontal matches the card body padding so these columns line up
       with the card value columns. */
    padding: 8px 24px 16px;
}

.manager-report .hana-report-table__head span[b-mcja7cwq2n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--hana-metric-label-size);
    font-weight: 800;
    color: var(--hana-color-black);
}

.manager-report .hana-report-table__head span[b-mcja7cwq2n]::before {
    content: "";
    flex-shrink: 0;
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background: var(--hana-color-black);
}

/* ::deep — HanaSectionHeading2 is a child component, so the span it renders carries that
   component's scope attribute, not this page's. Block titles arrive uppercase from the
   data — show as sentence case. */
.manager-report[b-mcja7cwq2n]  .hana-section-heading2 span {
    display: inline-block;
    text-transform: lowercase;
}

.manager-report[b-mcja7cwq2n]  .hana-section-heading2 span::first-letter {
    text-transform: uppercase;
}
/* /Pages/Overview.razor.rz.scp.css */
.hana-turnover-total[b-k5oa9jkfgc] {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.hana-turnover-total__label[b-k5oa9jkfgc] {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 13.783px;
    color: var(--hana-color-gray-600);
}

.hana-turnover-total__value[b-k5oa9jkfgc] {
    font-size: 21px;
    font-weight: 800;
    color: var(--hana-color-gray-900);
}
/* /Pages/ReservationCheckIn.razor.rz.scp.css */
.reservation-checkin[b-nvv90yjp06] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
    padding: 17px 13px;
    font-family: var(--hana-font-family);
}

.reservation-checkin__header[b-nvv90yjp06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reservation-checkin__title[b-nvv90yjp06] {
    font-size: 15px;
    font-weight: 600;
    color: var(--hana-color-blue-900);
}

.reservation-checkin__empty[b-nvv90yjp06] {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--hana-color-gray-600);
}

/* Selected-room panel: heading, the room's booked guests, and the add action. */
.reservation-checkin__panel[b-nvv90yjp06] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-checkin__panel-head[b-nvv90yjp06] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reservation-checkin__panel-icon[b-nvv90yjp06] {
    width: 16px;
    height: 16px;
}

.reservation-checkin__panel-title[b-nvv90yjp06] {
    font-size: 13px;
    font-weight: 800;
    color: var(--hana-color-black);
}

.reservation-checkin__guests[b-nvv90yjp06] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Guest row: a coloured arrival bar on the left, then a white pill rounded on its right edge only. */
.reservation-checkin__guest[b-nvv90yjp06] {
    display: flex;
    align-items: stretch;
    gap: 9px;
    min-height: 28px;
}

.reservation-checkin__guest-bar[b-nvv90yjp06] {
    flex: 0 0 auto;
    width: 3px;
    border-radius: 2px;
}

.reservation-checkin__guest--in .reservation-checkin__guest-bar[b-nvv90yjp06] {
    background: var(--hana-color-green-500);
}

.reservation-checkin__guest--out .reservation-checkin__guest-bar[b-nvv90yjp06] {
    background: var(--hana-color-yellow-500);
}

.reservation-checkin__guest-name[b-nvv90yjp06] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 6px 15px 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--hana-color-gray-600);
    background: var(--hana-color-white);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Fixed ~96px square tiles like the design (three across on a phone width, more when wider) -
   not stretched to fill, which blew them up on desktop. The page body never scrolls sideways. */
.reservation-checkin__rooms[b-nvv90yjp06] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 96px);
    justify-content: start;
    gap: 10px;
}

.reservation-checkin__overlay[b-nvv90yjp06] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
}

/* The dialog never scrolls itself - the guest form's card body owns the scroll, so the heading
   and the submit row stay in view on short viewports. */
.reservation-checkin__dialog[b-nvv90yjp06] {
    display: flex;
    width: 100%;
    max-width: 560px;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background: var(--hana-color-white);
    border-radius: var(--hana-radius-md);
    box-shadow: var(--hana-shadow-blue);
}

.reservation-checkin__dialog:focus[b-nvv90yjp06],
.reservation-checkin__dialog:focus-visible[b-nvv90yjp06] {
    outline: none;
}

/* Below the two-column field breakpoint there is nothing to gain from a wide dialog. */
@media (max-width: 640px) {
    .reservation-checkin__dialog[b-nvv90yjp06] {
        max-width: 420px;
    }
}
/* /Pages/ReservationDetails.razor.rz.scp.css */
[b-p4dmymbw7b] .hana-report-shell__actions {
    margin-top: 0;
}
/* /Pages/ReservationNote.razor.rz.scp.css */
.reservation-note[b-6a36sabsq2] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 13px;
    background: rgba(0, 0, 0, 0.35);
}

.reservation-note__card[b-6a36sabsq2] {
    position: relative;
    width: 100%;
    max-width: 310px;
    min-height: 352px;
    padding: 25px 22px 60px;
    background: var(--hana-color-white);
    border-radius: 5px;
    box-shadow: var(--hana-shadow-blue);
}

.reservation-note__text[b-6a36sabsq2] {
    margin: 0;
    font-family: var(--hana-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.263;
    color: var(--hana-color-black);
    white-space: pre-wrap;
    word-break: break-word;
}

.reservation-note__actions[b-6a36sabsq2] {
    position: absolute;
    right: 22px;
    bottom: 22px;
}
/* /Pages/RoomsAvailability.razor.rz.scp.css */

/* Filter toggle (Occupied/Free) — two equal HanaButtons in a row. */
.roomocc__toggle[b-lyacd4ppp8] {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 0 16px;
}

.roomocc__toggle-item[b-lyacd4ppp8] {
    flex: 1;
}

/* === Current-day capacity split (occupied / free / blocked / broken) === */
.roomocc-today[b-lyacd4ppp8] {
    width: 100%;
    margin: 8px 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hana-color-gray-350);
}

.roomocc-today__title[b-lyacd4ppp8] {
    font-size: 13px;
    font-weight: 700;
    color: var(--hana-color-gray-900, #1a2333);
    margin: 0 0 14px;
}

.roomocc-today__grid[b-lyacd4ppp8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 18px;
}

.roomocc-stat[b-lyacd4ppp8] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.roomocc-stat__bar[b-lyacd4ppp8] {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.roomocc-stat__bar--occupied[b-lyacd4ppp8] {
    background: #4F92D6;
}

.roomocc-stat__bar--free[b-lyacd4ppp8] {
    background: #1F3F77;
}

.roomocc-stat__bar--blocked[b-lyacd4ppp8] {
    background: #F2B705;
}

.roomocc-stat__bar--broken[b-lyacd4ppp8] {
    background: #E23B3B;
}

.roomocc-stat__body[b-lyacd4ppp8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roomocc-stat__top[b-lyacd4ppp8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.roomocc-stat__label[b-lyacd4ppp8] {
    font-size: 14px;
    font-weight: 500;
    color: black;
}

.roomocc-stat__value[b-lyacd4ppp8] {
    font-size: 14px;
    font-weight: 700;
    color: black;
}

.roomocc-stat__pct[b-lyacd4ppp8] {
    font-size: 10px;
    font-weight: 800;
    color: black;
}

/* === Per-date room-type card === */
.rooms-card[b-lyacd4ppp8] {
    width: 100%;
    margin: 0 0 16px;
}

/* Two-segment tab on top of the card: date (light) + total (dark). */
.rooms-card__header[b-lyacd4ppp8] {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
}

.rooms-card__date[b-lyacd4ppp8],
.rooms-card__total[b-lyacd4ppp8] {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hana-color-white);
    white-space: nowrap;
}

.rooms-card__date[b-lyacd4ppp8] {
    background: var(--hana-gradient-main);
    border-top-left-radius: 10px;
}

.rooms-card__total[b-lyacd4ppp8] {
    background: var(--hana-color-blue-700);
    border-top-right-radius: 10px;
}

.rooms-card__body[b-lyacd4ppp8] {
    background: var(--hana-color-white);
    border-radius: 10px;
    border-top-left-radius: 0;
    box-shadow: var(--hana-shadow-blue);
    padding: 16px;
}

/* Dynamic room types: prefer 6 columns, decrement to fit long labels.
   - (100% - 5*10px)/6 = width of one of six columns ⇒ never narrower ⇒ max 6.
   - max(--cell-min, …) ⇒ if longest label wider than 1/6, track grows ⇒ fewer fit.
   --cell-min is set per card (longest RoomType length in ch) on the element. */
.rooms-card__grid[b-lyacd4ppp8] {
    display: grid;
    grid-template-columns: repeat(auto-fit,
        minmax(max(var(--cell-min, 70px), (100% - 5 * 8px) / 6), 1fr));
    column-gap: 8px;
    row-gap: 18px;
}

.rooms-cell[b-lyacd4ppp8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rooms-cell__label[b-lyacd4ppp8] {
    font-size: 11px;
    font-weight: 500;
    color: black;
    overflow-wrap: break-word;
    word-break: break-word;
}

.rooms-cell__value[b-lyacd4ppp8] {
    font-size: 11px;
    font-weight: 800;
    color: black;
}
/* /Pages/RoomsAvailabilityByDays.razor.rz.scp.css */
/* Grouping toggle (day/month/year) — three equal HanaButtons in a row. */
.roomocc__toggle[b-0ri9pubxa7] {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 0 16px;
}

.roomocc__toggle-item[b-0ri9pubxa7] {
    flex: 1;
}

/* Centered content column (matches Overview layout). */
.roomocc__center[b-0ri9pubxa7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* === "Današnji dan" capacity split === */
.roomocc-today[b-0ri9pubxa7] {
    width: 100%;
    max-width: 340px;
    margin: 8px 0 20px;
    padding-bottom:20px;
    border-bottom: 1px solid var(--hana-color-gray-350);
}

.roomocc-today__title[b-0ri9pubxa7] {
    font-size: 13px;
    font-weight: 700;
    color: var(--hana-color-gray-900, #1a2333);
    margin: 0 0 14px;
}

.roomocc-today__grid[b-0ri9pubxa7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 18px;
}

.roomocc-stat[b-0ri9pubxa7] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.roomocc-stat__bar[b-0ri9pubxa7] {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.roomocc-stat__bar--occupied[b-0ri9pubxa7] {
    background: #4F92D6;
}

.roomocc-stat__bar--free[b-0ri9pubxa7] {
    background: #1F3F77;
}

.roomocc-stat__bar--blocked[b-0ri9pubxa7] {
    background: #F2B705;
}

.roomocc-stat__bar--broken[b-0ri9pubxa7] {
    background: #E23B3B;
}

.roomocc-stat__body[b-0ri9pubxa7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roomocc-stat__top[b-0ri9pubxa7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.roomocc-stat__label[b-0ri9pubxa7] {
    font-size: 14px;
    font-weight: 500;
    color: black;
}

.roomocc-stat__value[b-0ri9pubxa7] {
    font-size: 14px;
    font-weight: 700;
    color: black;
}

.roomocc-stat__pct[b-0ri9pubxa7] {
    font-size: 10px;
    font-weight: 800;
    color: black;
}
/* /Pages/TurnoverByBooker.razor.rz.scp.css */
/* Anchors the corner expand button to the card body's bottom-right. */
.tbb-card__body[b-uovm9kt1m4] {
    position: relative;
}

/* Nested corner button: flush to the card's right/bottom edges. --hana-corner-radius
   inherits down into HanaIconButton's Corner variant so its rounded corners match
   the 10px card radius (see app.css .tbb-card__body). */
.tbb-card__action[b-uovm9kt1m4] {
    position: absolute;
    right: 0;
    bottom: 0;
    --hana-corner-radius: 10px;
}
/* /Pages/TurnoverByPaymentType.razor.rz.scp.css */
/* The date pill is a tab; the white rounded block is the body below it.
   Keep the outer card transparent so the strip beside the pill shows the page. */
.turnover-by-payment-type[b-2i7yml9sl5]  .hana-payment-card {
    margin-bottom: 12px;
    background: transparent;
    overflow: visible;
}

/* Body carries the rounded white block + shadow. */
.turnover-by-payment-type[b-2i7yml9sl5]  .hana-payment-body {
    background: var(--hana-color-white);
    border-radius: var(--hana-radius-md);
    box-shadow: var(--hana-shadow-blue);
}

/* Date pill sits on the card; drop the header's underline that runs past it. */
.turnover-by-payment-type[b-2i7yml9sl5]  .hana-date-header {
    border-bottom: 0;
}
/* /Pages/TurnoverByPaymentTypeTotal.razor.rz.scp.css */
.hana-turnover-total[b-k5nj29cpdq] {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.hana-turnover-total__label[b-k5nj29cpdq] {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 13.783px;
    color: var(--hana-color-gray-600);
}

.hana-turnover-total__value[b-k5nj29cpdq] {
    font-size: 21px;
    font-weight: 800;
    color: var(--hana-color-gray-900);
}
/* /Pages/TurnoverByServiceType.razor.rz.scp.css */
/* Two blocks per service: a blue gradient header (item name) sitting on a white body (amounts). */
.ps-card[b-at1s9jx19s] {
    margin-bottom: 12px;
    border-radius: var(--hana-radius-md);
    box-shadow: var(--hana-shadow-blue);
    overflow: hidden;
}

/* Blue block — item name. Width follows the text; caps at the card width
   with an ellipsis for extreme names. */
.ps-card__header[b-at1s9jx19s] {
    display: inline-block;
    background: var(--hana-gradient-main);
    color: var(--hana-color-white);
    max-width: 100%;
    padding: 6px 14px 4.5px 9.3px;
    font-family: "Eudoxus Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 13.783px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* White block — amounts row. */
.ps-card__body[b-at1s9jx19s] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 6px 10px;
}

.ps-metric[b-at1s9jx19s] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ps-metric__label[b-at1s9jx19s] {
    font-size: 10px;
    font-weight: 500;
    color: var(--hana-color-gray-600);
}

.ps-metric__value[b-at1s9jx19s] {
    font-size: 10px;
    font-weight: 700;
    color: var(--hana-color-black);
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-422p8oaopj] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-422p8oaopj] {
    flex: 1;
}

.sidebar[b-422p8oaopj] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-422p8oaopj] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-422p8oaopj]  a, .top-row .btn-link[b-422p8oaopj] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-422p8oaopj] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 767.98px) {
    .top-row:not(.auth)[b-422p8oaopj] {
        display: none;
    }

    .top-row.auth[b-422p8oaopj] {
        justify-content: space-between;
    }

    .top-row a[b-422p8oaopj], .top-row .btn-link[b-422p8oaopj] {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .page[b-422p8oaopj] {
        flex-direction: row;
    }

    .sidebar[b-422p8oaopj] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-422p8oaopj] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-422p8oaopj] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* Drawer content skin. The Hana package ships only the drawer box itself (HanaSideNav
   overlay/panel); the brand block and the nav rows are host markup, so they are styled
   with the component that renders them.

   Rows are <NavLink> components, and Razor stamps the scope attribute on elements this
   file's markup writes — never on markup a child component renders. So every rule that
   targets the <a> itself goes through ::deep from a plain wrapper; the img/span elements
   inside the NavLink child content are written here and match directly. */

.hana-side-nav__brand[b-zhfox64t9x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 15px 16px;
    background: var(--hana-color-gray-100);
}

.hana-side-nav__brand-logo[b-zhfox64t9x] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.hana-side-nav__brand-name[b-zhfox64t9x] {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--hana-color-black);
}

.hana-side-nav__nav[b-zhfox64t9x] {
    display: flex;
    flex-direction: column;
    padding: 8px 15px;
    flex: 1;
    background: var(--hana-color-gray-100);
}

    .hana-side-nav__nav[b-zhfox64t9x]  .hana-side-nav__nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 7px;
        height: 38px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 500;
        line-height: 15px;
        color: var(--hana-color-black);
        text-decoration: none;
        border-radius: 10px;
        transition: background 160ms ease, color 160ms ease;
    }

    /* Icon variant: leading 21px glyph, text starts ~40px like the design spec. */
    .hana-side-nav__nav[b-zhfox64t9x]  .hana-side-nav__nav-link--icon {
        padding-left: 12px;
    }

    /* Full-width divider under every row (design Line79). Separate from the rounded hover box. */
    .hana-side-nav__nav[b-zhfox64t9x]  .hana-side-nav__nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--hana-color-gray-200);
    }

    .hana-side-nav__nav[b-zhfox64t9x]  .hana-side-nav__nav-link:hover {
        background: var(--hana-color-gray-200);
    }

    /* Brand seed rather than the blue-100 primitive, so the active row follows the theme. */
    .hana-side-nav__nav[b-zhfox64t9x]  .hana-side-nav__nav-link.active {
        background: var(--hana-brand-soft);
        font-weight: 700;
    }

.hana-side-nav__nav-icon[b-zhfox64t9x] {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    object-fit: contain;
}

.hana-side-nav__group-label[b-zhfox64t9x] {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hana-color-black);
}

    .hana-side-nav__group-label[b-zhfox64t9x]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--hana-color-gray-200);
    }