:root {
    --facility-osh: #3B6EA5;
    --facility-mather: #4F7F64;
    --status-pending-deposit: #FBBF24;
    --status-deposit-received: #67E8F9;
    --status-pending-payment: #C4B5FD;
    --status-paid: #BEF264;
    --status-no-show: #FDA4AF;
}

body {
    font-family: "Public Sans", sans-serif;
}

.osh-navbar-brand {
    line-height: 0;
}

.osh-navbar-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: min(62vw, 20rem);
    object-fit: contain;
}

.osh-desktop-navigation {
    display: none;
}

@media (min-width: 768px) {
    .osh-desktop-navigation {
        display: flex;
    }
}

.osh-sidebar-logo {
    height: 48px;
    max-width: 100%;
}

.osh-page-shell {
    padding: 12px clamp(8px, 1.25vw, 16px);
}

@media (min-width: 1320px) {
    .osh-page-shell {
        padding-right: 0;
        padding-left: 0;
    }
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.field-validation-error,
.validation-summary-errors {
    color: #ba1a1a;
}

.input-validation-error {
    border-color: #ba1a1a;
}

.form-input-focus:focus {
    border-color: #08355f;
    box-shadow: 0 0 0 2px rgb(8 53 95 / 20%);
    outline: none;
}

select {
    padding-right: 2.75rem;
    background-position: right 0.75rem center;
    text-overflow: ellipsis;
}

.osh-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    border: 1px solid #c3c6d0;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.osh-filter-toolbar-compact {
    padding: 8px;
}

.osh-filter-field {
    min-width: 180px;
}

.osh-filter-field-wide {
    min-width: min(100%, 300px);
    flex: 1 1 300px;
}

.osh-filter-label {
    display: block;
    margin-bottom: 4px;
    color: #43474f;
    font-size: 12px;
    font-weight: 700;
}

input.osh-filter-control,
select.osh-filter-control,
textarea.osh-filter-control,
.osh-filter-control {
    width: 100%;
    border: 1px solid #c3c6d0;
    border-radius: 0.5rem;
    background-color: #fbf8ff;
    padding: 0.55rem 0.75rem;
    color: #161a32;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input.osh-filter-control:focus,
select.osh-filter-control:focus,
textarea.osh-filter-control:focus,
.osh-filter-control:focus {
    border-color: #08355f;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgb(8 53 95 / 18%);
}

.osh-filter-toolbar-inline {
    flex-wrap: nowrap;
}

.osh-filter-toolbar-inline .osh-filter-field-wide {
    min-width: 240px;
    flex: 1 1 260px;
}

.osh-filter-toolbar-inline .osh-filter-reset {
    flex: 0 0 auto;
}

.osh-housekeeper-reservations-toolbar {
    gap: 10px;
}

.osh-housekeeper-reservations-toolbar .osh-filter-field {
    min-width: 130px;
    flex: 0 1 150px;
}

.osh-housekeeper-reservations-toolbar .osh-filter-field-wide {
    min-width: 240px;
    flex: 1 1 280px;
}

.osh-housekeeper-guest-list-toolbar .osh-filter-field-wide {
    max-width: 420px;
    flex: 0 1 420px;
}

.osh-filter-toolbar .k-datepicker,
.osh-filter-toolbar .k-dateinput,
.osh-filter-toolbar .k-picker {
    width: 100%;
}

.osh-filter-toolbar .k-picker.osh-filter-control,
.osh-filter-toolbar .k-datepicker.osh-filter-control {
    min-height: 38px;
    padding: 0;
}

.osh-filter-toolbar .k-picker .k-input-inner {
    padding: 0.55rem 0.75rem;
    font-size: 14px;
    line-height: 1.5;
}

.osh-filter-search {
    position: relative;
}

.osh-filter-search input.osh-filter-control,
.osh-filter-search .osh-filter-control {
    padding-left: 2.5rem;
}

.osh-filter-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    color: #73777f;
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.osh-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid #c3c6d0;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.5rem 1rem;
    color: #43474f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.osh-filter-reset:hover {
    background: #f4f2ff;
    color: #08355f;
}

.osh-filter-hidden-row {
    display: none !important;
}

.osh-login-landing {
    position: relative;
    isolation: isolate;
    background-image:
        url("/images/landing-hetch-hetchy.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #1f2937;
}

.osh-login-landing::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 18% 10%, rgb(8 53 95 / 20%), transparent 34rem),
        linear-gradient(110deg, rgb(5 22 40 / 54%) 0%, rgb(5 22 40 / 34%) 38%, rgb(5 22 40 / 18%) 100%);
}

.osh-login-navbar {
    border-bottom: 1px solid rgb(255 255 255 / 48%);
    background: rgb(255 255 255 / 78%);
    box-shadow: 0 14px 38px rgb(8 31 55 / 13%);
    backdrop-filter: blur(18px);
}

.osh-login-navbar-inner {
    min-height: 64px;
}

.osh-login-brand-logo {
    height: 48px;
    max-width: min(58vw, 18rem);
}

.osh-login-register-link {
    border: 1px solid rgb(8 53 95 / 12%);
    background: #08355f;
    box-shadow: 0 10px 22px rgb(8 53 95 / 18%);
}

.osh-login-panel {
    color: #1f2937;
}

.osh-login-heading {
    color: #f8fafc;
    text-shadow: 0 2px 14px rgb(5 22 40 / 28%);
}

.osh-login-lock-badge {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 82%);
    color: #08355f;
    box-shadow: 0 14px 26px rgb(5 22 40 / 16%);
    backdrop-filter: blur(12px);
}

.osh-login-lock-badge .material-symbols-outlined {
    font-size: 1.65rem;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.osh-login-title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.osh-login-subtitle {
    color: rgb(248 250 252 / 88%);
    text-wrap: pretty;
}

.osh-landing-card {
    border-color: rgb(255 255 255 / 62%) !important;
    border-radius: 0.875rem;
    background: rgb(255 255 255 / 91%) !important;
    box-shadow: 0 18px 44px rgb(8 31 55 / 18%);
}

.osh-login-card {
    padding: clamp(1.25rem, 2vw, 1.75rem);
}

.osh-login-card label,
.osh-step-card h4 {
    color: #172033;
}

.osh-login-card input[type="email"],
.osh-login-card input[type="password"] {
    border-color: #cbd5e1;
    background: rgb(255 255 255 / 96%);
    color: #111827;
}

.osh-password-input::-ms-reveal {
    display: none;
}

.osh-login-card input::placeholder {
    color: #8a94a6;
}

.osh-login-card p,
.osh-login-card span,
.osh-landing-lede,
.osh-facility-card p,
.osh-step-card p,
.osh-reservation-notes p {
    color: #4b5563;
}

.osh-login-card button span {
    color: inherit;
}

.osh-login-trust-row {
    color: rgb(248 250 252 / 84%);
    text-shadow: 0 2px 12px rgb(5 22 40 / 22%);
}

.osh-landing-heading {
    color: #082f55;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.osh-landing-lede {
    max-width: 62ch;
}

.osh-facility-card {
    position: relative;
    overflow: hidden;
    border-color: #d7dee8 !important;
    background: rgb(248 250 252 / 72%) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.osh-facility-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
}

.osh-facility-card-osh::before {
    background: var(--facility-osh);
}

.osh-facility-card-mather::before {
    background: var(--facility-mather);
}

.osh-facility-card-osh .osh-facility-card-title {
    color: var(--facility-osh);
}

.osh-facility-card-mather .osh-facility-card-title {
    color: var(--facility-mather);
}

.osh-step-card {
    align-items: flex-start;
    border: 1px solid #d8e0ea;
    background: rgb(248 250 252 / 78%) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%);
}

.osh-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.55rem;
    background: #e8f1fb;
    color: #08355f;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.osh-reservation-notes {
    border: 1px solid #c7d8eb !important;
    background: rgb(232 241 251 / 92%) !important;
    color: #21364f !important;
    box-shadow: 0 14px 32px rgb(8 31 55 / 12%);
}

.osh-reservation-notes h3 {
    color: #08355f;
}

.osh-login-landing > header,
.osh-login-landing > main,
.osh-login-landing > footer {
    position: relative;
    z-index: 1;
}

.osh-login-landing .login-card-shadow,
.osh-login-landing main section > .rounded-xl {
    backdrop-filter: blur(10px);
}

@media (max-width: 720px) {
    .osh-filter-toolbar-inline {
        flex-wrap: wrap;
    }

    .osh-login-landing {
        background-attachment: scroll;
        background-position: center top;
    }

    .osh-login-landing::before {
        position: absolute;
        background:
            linear-gradient(180deg, rgb(5 22 40 / 48%) 0%, rgb(5 22 40 / 32%) 42%, rgb(5 22 40 / 24%) 100%);
    }

    .osh-navbar-logo,
    .osh-login-brand-logo {
        height: 36px;
        max-width: 60vw;
    }

    .osh-sidebar-logo {
        height: 42px;
        max-width: 100%;
    }
}

.osh-facility-visual {
    display: flex;
    height: 100%;
    min-height: 12rem;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 18px;
    background-color: var(--facility-osh);
    color: #ffffff;
}

.osh-facility-visual-osh {
    background-color: var(--facility-osh);
}

.osh-facility-visual-mather {
    background-color: var(--facility-mather);
}

.osh-facility-visual-map {
    border-bottom: 1px solid #c3c6d0;
    background:
        linear-gradient(90deg, rgb(8 53 95 / 8%) 1px, transparent 1px),
        linear-gradient(0deg, rgb(79 127 100 / 8%) 1px, transparent 1px),
        #f4f2ff;
    background-size: 28px 28px;
    color: #08355f;
}

.osh-facility-visual-icon {
    font-size: 44px;
    opacity: 0.9;
}

.osh-facility-visual-title,
.osh-facility-visual-meta {
    display: block;
}

.osh-facility-visual-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.osh-facility-visual-meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.78;
}

.tonal-elevation-1 {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px -1px rgb(0 0 0 / 1%);
}

.osh-scheduler-shell {
    overflow-x: auto;
}

.osh-scheduler-shell .k-scheduler {
    border: 0;
    background: #ffffff;
    color: #161a32;
    font-family: "Public Sans", sans-serif;
}

.osh-scheduler-shell .k-scheduler-toolbar,
.osh-scheduler-shell .k-scheduler-footer {
    border-color: #c3c6d0;
    background: #f4f2ff;
}

.osh-scheduler-shell .k-toolbar .k-button,
.osh-scheduler-shell .k-scheduler-navigation .k-button {
    border-radius: 0.5rem;
    border-color: #c3c6d0;
    color: #08355f;
}

.osh-scheduler-shell .k-button-solid-primary {
    border-color: #08355f;
    background-color: #08355f;
    color: #ffffff;
}

.osh-scheduler-shell .k-scheduler-header,
.osh-scheduler-shell .k-scheduler-header th,
.osh-scheduler-shell .k-scheduler-table td,
.osh-scheduler-shell .k-scheduler-table th {
    border-color: #c3c6d0;
}

.osh-scheduler-shell .k-scheduler-header th,
.osh-scheduler-shell .k-scheduler-groupcolumn {
    background: #f4f2ff;
    color: #43474f;
    font-size: 12px;
    font-weight: 700;
}

.osh-scheduler-shell .k-scheduler-table td {
    background: #ffffff;
}

.osh-scheduler-shell .k-scheduler-table td.k-other-month,
.osh-scheduler-shell .k-scheduler-table td.k-nonwork-hour {
    background: #fbf8ff;
}

.osh-scheduler-shell .k-scheduler-table td.k-selected {
    background: #beead1;
    box-shadow: inset 0 0 0 2px #08355f;
}

.osh-scheduler-shell .k-event {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.osh-scheduler-shell .k-scheduler-monthview .k-scheduler-table td {
    height: 152px;
    vertical-align: top;
}

.osh-scheduler-shell .k-scheduler-monthview .k-event {
    min-height: 60px;
    overflow: hidden;
}

.osh-scheduler-shell .k-scheduler-monthview .k-event .k-event-template {
    height: 100%;
}

.osh-scheduler-shell .k-scheduler-table td.osh-scheduler-selected-date {
    background: #beead1;
    box-shadow: inset 0 0 0 1px var(--selected-facility-color, var(--facility-mather));
}

.osh-scheduler-shell .k-scheduler-table td.osh-scheduler-selected-start {
    box-shadow: inset 4px 0 0 var(--selected-facility-color, #08355f), inset 0 0 0 1px var(--selected-facility-color, var(--facility-mather));
}

.osh-scheduler-shell .k-scheduler-table td.osh-scheduler-checkout-date {
    background: #fff7cc;
    box-shadow: inset 0 0 0 2px #08355f;
}

.osh-scheduler-event {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    border-left: 4px solid var(--event-color);
    border-radius: 0.25rem;
    background-color: var(--event-color);
    padding: 4px 6px;
    color: #ffffff;
    line-height: 1.2;
}

.osh-scheduler-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.osh-scheduler-event-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.osh-scheduler-status-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    background: var(--status-color);
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.osh-scheduler-event-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    opacity: 0.92;
}

.osh-scheduler-event-light {
    color: #311302;
}

.osh-scheduler-event-selected {
    outline: 2px solid #08355f;
    outline-offset: -2px;
}

.osh-scheduler-event-unavailable {
    border: 1px dashed #73777f;
    border-left-width: 4px;
    background: #dee0ff;
    color: #43474f;
}

.osh-scheduler-event-holiday {
    background: #D3D3D3;
}

.osh-scheduler-event-reserved {
    background: #73777f;
}

.osh-scheduler-empty {
    position: absolute;
    inset: auto 16px 16px 16px;
    border: 1px solid #c3c6d0;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 92%);
    padding: 12px;
    text-align: center;
    color: #43474f;
    font-size: 14px;
}

.osh-grid-shell {
    overflow-x: auto;
}

.osh-grid-shell .k-grid {
    min-width: 1120px;
    border: 0;
    background: #ffffff;
    color: #161a32;
    font-family: "Public Sans", sans-serif;
}

.osh-grid-shell .k-grid-header,
.osh-grid-shell .k-grid-header th,
.osh-grid-shell .k-grid-content td,
.osh-grid-shell .k-grid-pager {
    border-color: #c3c6d0;
}

.osh-grid-shell .k-grid-header th {
    background: #f4f2ff;
    color: #43474f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.osh-grid-shell .k-grid-content td {
    padding: 10px 12px;
    font-size: 14px;
}

.osh-grid-shell .k-table-row:hover,
.osh-grid-shell .k-master-row:hover {
    background: #fbf8ff;
    cursor: pointer;
}

.osh-grid-shell .k-pager,
.osh-grid-shell .k-grid-pager {
    background: #ffffff;
    color: #43474f;
}

.osh-grid-shell .k-button,
.osh-grid-shell .k-pager-numbers .k-link {
    border-radius: 0.5rem;
}

.osh-grid-shell .k-dropdownlist .k-input-inner,
.osh-grid-shell .k-combobox .k-input-inner,
.osh-scheduler-shell .k-dropdownlist .k-input-inner,
.osh-scheduler-shell .k-combobox .k-input-inner {
    padding-right: 2rem;
}

.osh-grid-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.osh-grid-action-link,
.osh-grid-icon-link,
.osh-grid-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 0.5rem;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.osh-grid-action-link {
    color: #08355f;
}

.osh-grid-action-link:hover,
.osh-grid-icon-link:hover,
.osh-grid-icon-button:hover {
    background: #f4f2ff;
}

.osh-grid-icon-link,
.osh-grid-icon-button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.osh-grid-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
}

.osh-grid-status-ok {
    border-color: #a5d0b9;
    background: #c1ecd4;
    color: #274e3d;
}

.osh-grid-status-muted {
    border-color: #c3c6d0;
    background: #f4f2ff;
    color: #43474f;
}

.osh-grid-status-error {
    border-color: #ba1a1a;
    background: #ffdad6;
    color: #93000a;
}

.osh-grid-empty {
    padding: 24px;
    text-align: center;
    color: #43474f;
    font-size: 14px;
}

.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .osh-scheduler-shell .k-scheduler {
        min-width: 760px;
    }

    .osh-grid-shell .k-grid {
        min-width: 1040px;
    }
}