@import '_content/NeatYacht.Blazor.Shared/NeatYacht.Blazor.Shared.84ixyjs4c3.bundle.scp.css';

/* /Components/Calendar/TagItem.razor.rz.scp.css */
.tag-color-box[b-982n2esgnq] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    margin-right: 10px;
    flex: 0 0 14px;
    display: inline-block;
    box-sizing: border-box;
    align-self: center;
}

.edit-button[b-982n2esgnq] {
    opacity: 0;
    transition: opacity 0.2s;
}

.tag-item:hover .edit-button[b-982n2esgnq] {
    opacity: 1;
}
/* /Components/Calendar/TagList.razor.rz.scp.css */
.tag-list-container[b-x9uoyoaiy5] {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 13.5rem);
    min-height: 0;
}

.tag-list-scroll[b-x9uoyoaiy5] {
    list-style: none;
    margin: 0;
    padding: 0 0.3rem 0 0;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}
/* /Components/FontPicker.razor.rz.scp.css */
.font-picker[b-dsktbpp0i3] {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .font-picker[b-dsktbpp0i3] {
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.4rem 0.6rem;
    }

    .font-picker[b-dsktbpp0i3]  .rz-label {
        display: none;
    }
}
/* /Pages/Calendar/Calendar.razor.rz.scp.css */
.calendar-scheduler-wrapper[b-4i37qi29a0] {
    position: relative;
}

.calendar-loading-overlay[b-4i37qi29a0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.calendar-header>*[b-4i37qi29a0] {
    flex: 1;
}

.calendar-header>div[b-4i37qi29a0] {
    display: flex;
    align-content: center;
    justify-content: center;
}

.calendar-header>div>button[b-4i37qi29a0] {
    margin: 0 0.5rem;
    /* The glyph below is smaller than the Radzen default, so the button no longer
       gets its size from padding. An explicit 44px square keeps the tap target
       usable at the 375px viewport even though the arrow itself shrank. */
    padding: 0;
    line-height: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.calendar-header>div>button .rzi[b-4i37qi29a0] {
    font-size: 20px;
}

.calendar-header>h2[b-4i37qi29a0] {
    text-align: right;
}

.calendar-appointment[b-4i37qi29a0] {
    display: flex;
    /* Top-aligned so the title stays where it can be read. With height:100% below, an
       all-day appointment in week/day view is over 1100px tall, and a vertically centred
       label lands in the middle of that -- off-screen until you scroll. The tag colour
       bar opts back into stretching (see .calendar-appointment-tags). */
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    /* Fill the slot Radzen sized for this appointment rather than collapsing to the text
       height. In week and day view Radzen gives an all-day appointment the whole column
       (24h x 48px = 1152px, top: 0) -- with height:auto this div rendered 20px tall at the
       very top of it, which is why an all-day event read as missing entirely. */
    height: 100%;
    border-radius: 0.5rem;
    padding: 0rem 0.45rem;
    overflow: hidden;
    container-type: inline-size;
}

.calendar-scheduler-wrapper[b-4i37qi29a0]  .rz-month-view .calendar-appointment {
    min-height: 1.2rem;
    padding: 0.08rem 0.3rem;
}

.calendar-appointment--single-day[b-4i37qi29a0] {
    background-color: transparent !important;
    border-radius: 0;
    padding: 0rem 0.2rem;
}

.calendar-appointment--multi-day[b-4i37qi29a0] {
    border-radius: 0.5rem;
}

.calendar-appointment-content[b-4i37qi29a0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.calendar-appointment-text[b-4i37qi29a0] {
    display: block;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    /* Matches .calendar-appointment-time below, so the title and time read as one line.
       0.8rem is ~12.8px at the default root size -- deliberately kept above the ~12px
       legibility floor, which is why this does not go lower. */
    font-size: 0.8rem;
}

.calendar-appointment-time[b-4i37qi29a0] {
    flex-shrink: 0;
    font-size: 0.8rem;
    opacity: 0.9;
    color: inherit;
}

.calendar-appointment-tags[b-4i37qi29a0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 1px 0;
    height: auto;
    /* Spans the appointment's full height even though the row is top-aligned, so a tall
       all-day block reads as a continuous colour bar down the day. */
    align-self: stretch;
}

.calendar-appointment-tag[b-4i37qi29a0] {
    width: 6px;
    min-width: 6px;
    border-radius: 3px;
    flex: 1;
}

.calendar-scheduler-wrapper[b-4i37qi29a0]  .rz-week-view .rz-view-header .rz-slot-header,
.calendar-scheduler-wrapper[b-4i37qi29a0]  .rz-week-view .rz-scheduler-header .rz-slot-header {
    text-transform: none;
}
/* /Pages/Calendar/Index.razor.rz.scp.css */
/* ::deep is required here: RadzenButton renders its own <button>, which Blazor's
   CSS isolation does not stamp with this component's scope attribute, so a plain
   .add-appointment-button rule compiles to a selector that never matches.
   Scoped from .content-container, which is declared in Index.razor and does get
   the attribute.

   Note this is `::deep`, not `:deep(...)` -- the latter is not Blazor syntax and
   passes through to the browser untransformed as an invalid selector.

   The button is ButtonSize.Small, which on its own leaves a tap target under the
   44px minimum, so min-height keeps it thumb-usable at the 375px viewport while
   the button stays visually small. */
.content-container[b-zxjj6u4e2z]  .add-appointment-button {
    min-height: 44px;
}
/* /Pages/Login.razor.rz.scp.css */
.login-holder[b-001thgruvj] {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box[b-001thgruvj] {
    min-width: 400px;
    align-self: center;
    background-color: #eee;
    min-height: 400px;
    padding: 20px;
}

.login-box-holder[b-001thgruvj] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-title[b-001thgruvj] {
    flex: 0;
}

.login-form[b-001thgruvj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 50px;
}

.login-buttons[b-001thgruvj] {
    flex: 0;
}

/* One step of the login flow (credentials, or the authenticator code). Only one is
   rendered at a time, so it repeats .login-form's spacing for its own fields. */
.login-step[b-001thgruvj] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-step-intro[b-001thgruvj] {
    margin-bottom: 0;
    /* A long email has no natural break opportunity; force one so the 375px
       viewport never gains a horizontal scrollbar. */
    overflow-wrap: anywhere;
}

.login-step-account[b-001thgruvj] {
    font-weight: 700;
}

.login-step-back[b-001thgruvj] {
    text-align: center;
}
/* /Pages/YachtSelection.razor.rz.scp.css */
.login-holder[b-q96olqc9zf]
{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box[b-q96olqc9zf]
{
    min-width: 400px;
    align-self: center;
    background-color: #eee;
    min-height: 400px;
    padding: 20px;
}

.login-box-holder[b-q96olqc9zf]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-title[b-q96olqc9zf]
{
    flex: 0;
}

.login-form[b-q96olqc9zf]
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 50px;
}

.login-buttons[b-q96olqc9zf]
{
    flex: 0;
}