:root {
    --color-primary: #066AC4;
    --color-secondary: #09ABDB;
    --color-accent: #2DCDF1;
    --color-glow: #5EE1FE;
    --color-navy: #0B1F2A;
    --color-dark: #071923;
    --color-gray: #5E6B73;
    --color-border: #D9EEF7;
    --color-bg: #F5FBFF;
    --color-white: #FFFFFF;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --gradient-brand: linear-gradient(135deg, #066AC4 0%, #09ABDB 48%, #2DCDF1 100%);
    --app-sidebar-width: 260px;
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 6, 106, 196;
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-navy);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-secondary);
    --bs-border-color: var(--color-border);
    --bs-success: var(--color-success);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(94, 225, 254, .18), transparent 30rem),
        var(--color-bg);
    color: var(--color-navy);
}

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    width: var(--app-sidebar-width);
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-navy) 100%) !important;
    box-shadow: 12px 0 30px rgba(7, 25, 35, .08);
}

.app-sidebar .border-secondary {
    border-color: rgba(94, 225, 254, .16) !important;
}

.app-sidebar .fw-semibold {
    color: var(--color-white);
}

.brand-symbol {
    width: 2rem;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 12px rgba(94, 225, 254, .20));
}

.brand-logo {
    width: min(20rem, 100%);
    height: auto;
    display: block;
}

.brand-logo-sm {
    width: min(14rem, 100%);
}

.app-sidebar .nav-link {
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .68) !important;
    font-weight: 500;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
    background: rgba(9, 171, 219, .14);
    border-color: rgba(94, 225, 254, .20);
    color: var(--color-white) !important;
}

header.bg-white,
section.bg-white {
    background: rgba(255, 255, 255, .92) !important;
}

header.border-bottom,
section.border-bottom {
    border-color: var(--color-border) !important;
}

.public-hero {
    background:
        radial-gradient(circle at 84% 18%, rgba(94, 225, 254, .32), transparent 18rem),
        radial-gradient(circle at 8% 18%, rgba(9, 171, 219, .14), transparent 22rem),
        linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
}

.public-preview {
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        var(--gradient-brand) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0 18px 44px rgba(6, 106, 196, .14);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(11, 31, 42, .08);
}

.plan-card.is-featured {
    border-color: rgba(45, 205, 241, .85);
    box-shadow: 0 18px 44px rgba(6, 106, 196, .14);
}

.plan-card h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.detail-panel,
.template-card {
    padding: 1rem;
    background: rgba(245, 251, 255, .76);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.detail-panel h4 {
    margin: 0 0 .75rem;
    font-size: .9rem;
    font-weight: 800;
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(7rem, .45fr) 1fr;
    gap: .45rem .75rem;
    margin: 0;
}

.detail-list dt {
    color: var(--color-gray);
    font-size: .82rem;
    font-weight: 600;
}

.detail-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.plan-builder-section {
    padding: 1rem;
    background: rgba(245, 251, 255, .72);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.plan-feature-editor {
    display: grid;
    gap: .85rem;
}

.plan-feature-row {
    display: grid;
    grid-template-columns: minmax(8rem, .8fr) minmax(12rem, 1.1fr) minmax(14rem, 1.4fr) minmax(6rem, .45fr);
    gap: .75rem;
    align-items: end;
}

.plan-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.plan-variant-card {
    padding: 1rem;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.plan-table-icon {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-primary);
    background: rgba(45, 205, 241, .12);
    border: 1px solid rgba(45, 205, 241, .32);
    border-radius: 8px;
}

.plan-table-icon .bp-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.icon-preview {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .45rem;
    padding: .35rem .5rem;
    color: var(--color-gray);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
}

.icon-preview img {
    width: 1rem;
    height: 1rem;
}

.plan-badge {
    width: fit-content;
    padding: .35rem .55rem;
    color: var(--color-white);
    background: var(--gradient-brand);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.plan-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.plan-period-box {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.plan-period-box span {
    color: var(--color-gray);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-period-box strong {
    font-size: 1.8rem;
    line-height: 1;
}

.plan-period-box small {
    color: var(--color-gray);
}

.plan-period-box em {
    color: var(--color-success);
    font-size: .84rem;
    font-style: normal;
    font-weight: 800;
}

.plan-feature-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-gray);
}

.signup-plan-summary,
.subscription-summary {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.subscription-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signup-plan-summary span,
.subscription-summary span {
    display: block;
    color: var(--color-gray);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.signup-plan-summary strong,
.subscription-summary strong {
    display: block;
    color: var(--color-navy);
    font-size: 1.1rem;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.auth-shell > .row {
    width: 100%;
}

.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.shadow-sm {
    box-shadow: 0 14px 34px rgba(11, 31, 42, .08) !important;
}

.table {
    --bs-table-color: var(--color-navy);
    --bs-table-border-color: var(--color-border);
}

.table thead th {
    color: var(--color-navy);
    background: rgba(245, 251, 255, .72);
    font-weight: 700;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary {
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(6, 106, 196, .20);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #055AA7 0%, #088FBD 50%, #22BCE0 100%);
    border-color: transparent;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: rgba(6, 106, 196, .40);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

.btn-link {
    color: var(--color-primary);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--color-secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-gray);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-bg);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-navy);
}

.form-control,
.form-select {
    border-color: var(--color-border);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 .2rem rgba(45, 205, 241, .20);
}

.field-label-help {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.field-help-link {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: rgba(45, 205, 241, .10);
    border: 1px solid rgba(6, 106, 196, .28);
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.field-help-link:hover,
.field-help-link:focus {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-kicker {
    margin: 0 0 .35rem;
    color: var(--color-primary);
    font-size: .86rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-filter-panel {
    padding: 1rem;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.dashboard-finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
}

.dashboard-finance-card {
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.1rem;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(11, 31, 42, .07);
}

.dashboard-finance-card span {
    color: var(--color-gray);
    font-weight: 700;
}

.dashboard-finance-card strong {
    display: block;
    color: var(--color-navy);
    font-size: clamp(1.65rem, 2vw, 2.2rem);
    line-height: 1.1;
}

.dashboard-finance-card small {
    color: var(--color-gray);
    line-height: 1.45;
}

.dashboard-finance-card-primary {
    color: var(--color-white);
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 18px 44px rgba(6, 106, 196, .20);
}

.dashboard-finance-card-primary span,
.dashboard-finance-card-primary strong,
.dashboard-finance-card-primary small {
    color: var(--color-white);
}

.address-autocomplete {
    position: relative;
}

.address-suggestion-menu {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .25rem);
    right: .75rem;
    left: .75rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: .35rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(11, 31, 42, .14);
}

.address-suggestion-item {
    display: block;
    width: 100%;
    padding: .6rem .7rem;
    color: var(--color-navy);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.address-suggestion-item:hover,
.address-suggestion-item:focus {
    background: var(--color-bg);
    outline: 0;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.calendar-nav-btn {
    width: 2.6rem;
    padding-right: 0;
    padding-left: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.calendar-view-select {
    width: 8.5rem;
}

.calendar-card {
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.calendar-scroll {
    max-height: calc(100vh - 15rem);
    overflow: auto;
}

.calendar-week-board {
    --calendar-row-height: 2.45rem;
    --calendar-time-col: 4.65rem;
}

.calendar-week-head,
.calendar-week-body {
    min-width: calc(var(--calendar-time-col) + (var(--calendar-days, 7) * 8.75rem));
    display: grid;
    grid-template-columns: var(--calendar-time-col) repeat(var(--calendar-days, 7), minmax(8.75rem, 1fr));
}

.calendar-week-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.calendar-week-scroll {
    max-height: calc(100vh - 13.5rem);
}

.calendar-time-head,
.calendar-day-head {
    border-right: 1px solid var(--color-border);
}

.calendar-time-head {
    background: rgba(245, 251, 255, .72);
}

.calendar-day-head {
    min-height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .45rem .65rem;
    background: rgba(245, 251, 255, .72);
}

.calendar-day-head span {
    color: var(--color-gray);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-day-head strong {
    color: var(--color-navy);
    font-size: .95rem;
}

.calendar-week-body {
    align-items: stretch;
}

.calendar-time-column {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
}

.calendar-day-column {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--calendar-slot-count, 30), var(--calendar-row-height));
    background: rgba(255, 255, 255, .82);
    border-right: 1px solid var(--color-border);
}

.calendar-time-label {
    height: var(--calendar-row-height);
    padding: .25rem .45rem;
    color: var(--color-gray);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.calendar-slot {
    height: var(--calendar-row-height);
    min-height: 0;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(245, 251, 255, .34));
    border-bottom: 1px solid rgba(217, 238, 247, .82);
    cursor: pointer;
}

.calendar-slot:hover,
.calendar-slot:focus {
    background: rgba(45, 205, 241, .10);
    outline: 0;
}

.calendar-event {
    display: grid;
    gap: .04rem;
    padding: .3rem .42rem;
    overflow: hidden;
    color: var(--color-navy);
    background: linear-gradient(180deg, rgba(245, 251, 255, .98), rgba(217, 238, 247, .82));
    border: 1px solid rgba(9, 171, 219, .28);
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(6, 106, 196, .12);
    font-size: .72rem;
    line-height: 1.16;
    text-decoration: none;
}

.calendar-event:hover,
.calendar-event:focus {
    color: var(--color-navy);
    background: var(--color-white);
    outline: 0;
}

.calendar-event-block {
    position: absolute;
    z-index: 3;
    min-height: 1.45rem;
    padding: .24rem .36rem;
}

.calendar-event strong,
.calendar-event span,
.calendar-event em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-time,
.calendar-event em {
    color: var(--color-primary);
    font-style: normal;
}

.calendar-event-time {
    font-size: .66rem;
    font-weight: 800;
}

.calendar-event em {
    color: var(--color-gray);
}

.calendar-month-weekdays,
.calendar-month-grid {
    min-width: 56rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(8rem, 1fr));
}

.calendar-month-weekdays {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.calendar-month-weekdays div {
    padding: .75rem;
    color: var(--color-gray);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    border-right: 1px solid var(--color-border);
}

.calendar-month-day {
    min-height: 7.25rem;
    display: grid;
    align-content: start;
    gap: .32rem;
    padding: .42rem;
    background: rgba(255, 255, 255, .82);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.calendar-month-day:hover,
.calendar-month-day:focus {
    background: rgba(45, 205, 241, .08);
    outline: 0;
}

.calendar-month-day.is-muted {
    background: rgba(245, 251, 255, .52);
}

.calendar-month-day.is-muted .calendar-month-day-number {
    color: var(--color-gray);
}

.calendar-month-day.is-today .calendar-month-day-number,
.calendar-year-day.is-today {
    color: var(--color-white);
    background: var(--gradient-brand);
}

.calendar-month-day-number {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 900;
}

.calendar-month-events {
    display: grid;
    gap: .22rem;
}

.calendar-event-compact {
    padding: .24rem .34rem;
    font-size: .68rem;
}

.calendar-event-compact span {
    color: var(--color-primary);
    font-size: .62rem;
}

.calendar-more {
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 800;
}

.calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.calendar-year-month {
    padding: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.calendar-year-month-head {
    margin-bottom: .75rem;
}

.calendar-year-month-head a {
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
}

.calendar-year-weekdays,
.calendar-year-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem;
}

.calendar-year-weekdays {
    margin-bottom: .3rem;
}

.calendar-year-weekdays span {
    color: var(--color-gray);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
}

.calendar-year-day {
    position: relative;
    min-height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.calendar-year-day.is-muted {
    color: rgba(94, 107, 115, .48);
}

.calendar-year-day.has-events::after {
    content: "";
    position: absolute;
    right: .32rem;
    bottom: .18rem;
    width: .32rem;
    height: .32rem;
    background: var(--color-secondary);
    border-radius: 999px;
}

.calendar-year-day:hover,
.calendar-year-day:focus {
    color: var(--color-primary);
    background: var(--color-bg);
    outline: 0;
}

.booking-property-search,
.booking-assignment-picker {
    position: relative;
}

.booking-suggestion-menu {
    position: absolute;
    z-index: 1090;
    right: .75rem;
    left: .75rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: .35rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(11, 31, 42, .14);
}

.booking-suggestion-item {
    width: 100%;
    display: grid;
    gap: .15rem;
    padding: .65rem .75rem;
    color: var(--color-navy);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.booking-suggestion-item:hover,
.booking-suggestion-item:focus {
    background: var(--color-bg);
    outline: 0;
}

.booking-suggestion-item span {
    color: var(--color-gray);
    font-size: .86rem;
}

.calendar-weekday-checks {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

.calendar-weekday-check {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.calendar-weekday-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.password-toggle {
    min-width: 3rem;
}

.password-toggle .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.text-muted {
    color: var(--color-gray) !important;
}

.bg-light {
    background-color: var(--color-bg) !important;
}

.text-bg-primary {
    background: var(--gradient-brand) !important;
}

.text-bg-success,
.alert-success {
    background-color: rgba(34, 197, 94, .12) !important;
    color: #166534 !important;
    border-color: rgba(34, 197, 94, .25) !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, .13) !important;
    color: #92400E !important;
    border-color: rgba(245, 158, 11, .28) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, .10) !important;
    color: #991B1B !important;
    border-color: rgba(239, 68, 68, .25) !important;
}

.app-alert {
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(11, 31, 42, .06);
}

.badge.text-bg-light {
    background: var(--color-bg) !important;
    color: var(--color-primary) !important;
}

.bubble-alert {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-navy);
    box-shadow: 0 22px 54px rgba(11, 31, 42, .18);
}

.bubble-alert .swal2-title {
    color: var(--color-navy);
    font-size: 1.25rem;
}

.bubble-alert .swal2-html-container,
.bubble-alert .swal2-content {
    color: var(--color-gray);
}

.bubble-alert .swal2-actions {
    gap: .5rem;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    color: currentColor;
}

.panel-switcher {
    min-width: 14rem;
}

.roadmap-card {
    border-top: 3px solid var(--color-secondary);
}

.roadmap-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--color-secondary);
    flex: 0 0 auto;
}

.employee-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.employee-stat {
    min-height: 5.25rem;
    display: grid;
    align-content: center;
    gap: .15rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.employee-stat span,
.employee-stat small {
    color: var(--color-gray);
    font-size: .78rem;
}

.employee-stat strong {
    color: var(--color-navy);
    font-size: 1.25rem;
    line-height: 1.1;
}

.employee-stat-primary {
    color: var(--color-white);
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 18px 44px rgba(6, 106, 196, .18);
}

.employee-stat-primary span,
.employee-stat-primary strong,
.employee-stat-primary small {
    color: var(--color-white);
}

.employee-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.employee-check {
    min-height: 2.65rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.employee-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-employee-list {
    display: grid;
    gap: .55rem;
}

.team-employee-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 4.5rem;
    padding: .7rem .8rem;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.team-employee-row:hover,
.team-employee-row:focus-within {
    border-color: rgba(9, 171, 219, .55);
    box-shadow: 0 10px 24px rgba(6, 106, 196, .08);
}

.team-employee-info {
    min-width: 0;
    display: grid;
    gap: .2rem;
}

.team-employee-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.team-employee-meta {
    color: var(--color-gray);
    font-size: .85rem;
}

.service-preset-card {
    min-height: 8.5rem;
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: .85rem;
    color: var(--color-navy);
    text-decoration: none;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.service-preset-card:hover,
.service-preset-card.is-active {
    color: var(--color-navy);
    border-color: rgba(9, 171, 219, .7);
    box-shadow: 0 12px 28px rgba(6, 106, 196, .1);
}

.service-preset-card span {
    color: var(--color-gray);
    font-size: .86rem;
}

.service-preset-card small {
    color: var(--color-primary);
    font-weight: 700;
}

.catalog-select-panel {
    height: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.catalog-check-list {
    display: grid;
    gap: .55rem;
}

.catalog-check-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: 3.25rem;
    padding: .7rem .75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.catalog-check-row span {
    min-width: 0;
}

.catalog-check-row strong,
.catalog-check-row small {
    display: block;
}

.catalog-check-row small {
    color: var(--color-gray);
}

.catalog-price-input {
    width: 8rem;
    flex: 0 0 auto;
}

.package-frequency-panel,
.booking-customize-panel {
    padding: 1rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.package-frequency-table {
    min-width: 48rem;
}

.booking-customize-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.booking-customize-grid h4 {
    margin: 0 0 .55rem;
    font-size: .95rem;
    font-weight: 800;
}

.booking-item-list {
    display: grid;
    gap: .5rem;
    max-height: 24rem;
    overflow: auto;
    padding-right: .25rem;
}

.booking-item-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    min-height: 3rem;
    padding: .65rem .7rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.booking-item-row span {
    min-width: 0;
}

.booking-item-row strong,
.booking-item-row small {
    display: block;
}

.booking-item-row small {
    color: var(--color-gray);
    font-size: .82rem;
}

.booking-addon-row {
    align-items: center;
}

.booking-addon-controls {
    display: grid;
    grid-template-columns: 4.6rem 7.6rem;
    gap: .45rem;
    flex: 0 0 auto;
}

.booking-addon-controls input:disabled {
    opacity: .55;
}

.checklist-builder {
    padding: 1rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.checklist-selected-panel {
    padding: .85rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.checklist-selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 2rem;
}

.checklist-selected-chip {
    max-width: 100%;
    padding: .35rem .55rem;
    color: var(--color-primary);
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
    overflow-wrap: anywhere;
    background: rgba(9, 171, 219, .1);
    border: 1px solid rgba(9, 171, 219, .35);
    border-radius: 999px;
}

.checklist-task-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    max-height: 34rem;
    overflow: auto;
    padding-right: .25rem;
}

.checklist-task-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: 3.2rem;
    padding: .7rem .75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.checklist-task-row span {
    min-width: 0;
}

.checklist-task-row strong,
.checklist-task-row small {
    display: block;
}

.checklist-task-row small {
    color: var(--color-gray);
    font-size: .82rem;
}

.booking-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    background: linear-gradient(135deg, rgba(6, 106, 196, .08), rgba(45, 205, 241, .12));
    border: 1px solid rgba(45, 205, 241, .32);
    border-radius: 8px;
}

.booking-total-row span {
    color: var(--color-gray);
    font-weight: 700;
}

.booking-total-row strong {
    color: var(--color-primary);
    font-size: 1.35rem;
}

.route-board {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.route-filters .form-label {
    color: var(--color-navy);
    font-size: .84rem;
    font-weight: 700;
}

.route-board-scroll {
    max-height: calc(100vh - 18rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.route-board-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

.route-board-table th,
.route-board-table td {
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    vertical-align: top;
}

.route-subject-col {
    left: 0;
    min-width: 0;
    position: sticky;
    width: 15rem;
    z-index: 2;
}

.route-board-table thead .route-subject-col,
.route-board-table tbody .route-subject-col {
    background: var(--color-bg);
}

.route-board-table thead th {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
    padding: .65rem .55rem;
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 3;
}

.route-board-table thead .route-subject-col {
    z-index: 4;
}

.route-board-table tbody th,
.route-board-table tbody td {
    height: 4.8rem;
    padding: .65rem;
}

.route-board-table tbody tr:last-child th,
.route-board-table tbody tr:last-child td {
    border-bottom: 0;
}

.route-day-weekday {
    color: var(--color-gray);
    display: block;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.route-cell {
    min-width: 0;
}

.route-cell .text-muted {
    display: block;
    padding-top: .35rem;
}

.route-action-btn {
    border-radius: 999px;
    box-shadow: none;
    font-size: .75rem;
    min-height: 2rem;
    min-width: 4.5rem;
    padding: .35rem .55rem;
}

.route-cell-count {
    color: var(--color-gray);
    font-size: .72rem;
    line-height: 1.2;
    margin-top: .25rem;
}

.route-modal-job-list {
    display: grid;
    gap: .65rem;
    max-height: 18rem;
    overflow: auto;
}

.route-modal-job {
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    padding: .75rem;
}

.route-modal-job small {
    color: var(--color-gray);
    display: block;
}

.route-stop-index {
    align-items: center;
    background: var(--gradient-brand);
    border-radius: 999px;
    color: var(--color-white);
    display: inline-flex;
    flex: 0 0 1.75rem;
    font-size: .82rem;
    font-weight: 800;
    height: 1.75rem;
    justify-content: center;
}

.route-summary-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.route-summary-grid > div {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: .85rem;
}

.route-summary-grid span {
    color: var(--color-gray);
    display: block;
    font-size: .82rem;
}

.route-summary-grid strong {
    display: block;
    font-size: 1rem;
    margin-top: .15rem;
}

.route-map-frame {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-height: 22rem;
    overflow: hidden;
}

.route-map-frame iframe {
    border: 0;
    display: block;
    height: 22rem;
    width: 100%;
}

.route-map-placeholder {
    align-items: center;
    color: var(--color-gray);
    display: flex;
    min-height: 22rem;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.field-report-filters .form-label {
    color: var(--color-navy);
    font-size: .84rem;
    font-weight: 700;
}

.field-report-metrics {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.field-report-metric {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.field-report-metric span {
    color: var(--color-gray);
    display: block;
    font-size: .82rem;
    font-weight: 700;
}

.field-report-metric strong {
    display: block;
    font-size: 1.45rem;
    margin-top: .25rem;
}

.field-report-metric-primary {
    background: var(--gradient-brand);
    border-color: transparent;
}

.field-report-metric-primary span,
.field-report-metric-primary strong {
    color: var(--color-white);
}

.field-report-list {
    display: grid;
    gap: 1rem;
}

.field-report-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(11, 31, 42, .06);
    overflow: hidden;
}

.field-report-accordion .accordion-item {
    color: var(--color-navy);
}

.field-report-accordion .accordion-button {
    background: var(--color-white);
    box-shadow: none;
    color: var(--color-navy);
    text-align: left;
}

.field-report-accordion .accordion-button:not(.collapsed) {
    background: var(--color-white);
    box-shadow: none;
}

.field-report-accordion .accordion-button::after {
    flex: 0 0 auto;
    margin-left: 1rem;
}

.field-report-card-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
    width: 100%;
}

.field-report-title-block {
    min-width: 0;
}

.field-report-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
}

.field-report-schedule {
    color: var(--color-navy);
    min-width: 10rem;
    text-align: right;
}

.field-report-schedule span {
    color: var(--color-gray);
    display: block;
    font-size: .9rem;
}

.field-status-badge,
.field-alert-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    padding: .3rem .6rem;
}

.field-status-to_start {
    background: #E8F7FF;
    color: #066AC4;
}

.field-status-in_progress {
    background: #DBF7FF;
    color: #06799E;
}

.field-status-completed {
    background: #DCFCE7;
    color: #166534;
}

.field-status-needs_review {
    background: #FEF3C7;
    color: #92400E;
}

.field-status-delayed,
.field-alert-pill-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.field-alert-pill {
    background: #FFF7ED;
    color: #9A3412;
}

.field-report-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem;
}

.field-report-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.field-report-panel h4 {
    font-size: .95rem;
    margin-bottom: .85rem;
}

.field-report-facts {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.field-report-facts dt {
    color: var(--color-gray);
    font-size: .76rem;
    font-weight: 800;
}

.field-report-facts dd {
    margin: 0;
}

.field-report-facts small {
    color: var(--color-gray);
    display: block;
}

.field-checklist-progress .progress {
    height: .55rem;
    margin: .5rem 0 .8rem;
}

.field-checklist-items,
.field-exception-list {
    display: grid;
    gap: .55rem;
}

.field-checklist-item {
    align-items: flex-start;
    display: flex;
    gap: .55rem;
}

.field-checklist-item strong,
.field-media-row strong {
    display: block;
}

.field-checklist-item small,
.field-media-row small {
    color: var(--color-gray);
    display: block;
}

.field-check-dot {
    background: var(--color-border);
    border-radius: 999px;
    flex: 0 0 .65rem;
    height: .65rem;
    margin-top: .35rem;
    width: .65rem;
}

.field-check-dot-done {
    background: var(--color-success);
}

.field-check-dot-pending {
    background: var(--color-warning);
}

.field-note {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: .55rem;
    padding: .7rem;
}

.field-media-row {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: .55rem;
    padding: .7rem;
}

@media (max-width: 991.98px) {
    :root {
        --app-sidebar-width: 100%;
    }

    .plan-grid {
        grid-template-columns: 1fr;
    }

    .subscription-summary {
        grid-template-columns: 1fr;
    }

    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        z-index: 1020;
        width: 100%;
    }

    .app-sidebar nav {
        flex-direction: row !important;
        gap: .35rem;
        overflow-x: auto;
        padding-bottom: .6rem !important;
        scrollbar-width: thin;
    }

    .app-sidebar .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    header.bg-white {
        padding: 1rem !important;
    }

    header.bg-white > .d-flex {
        align-items: flex-start !important;
        gap: .75rem;
    }

    header.bg-white > .d-flex,
    header.bg-white > .d-flex > .d-flex {
        flex-wrap: wrap;
    }

    .panel-switcher {
        min-width: min(100%, 18rem);
    }

    main.container-fluid {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .calendar-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-weekday-checks,
    .employee-summary-grid,
    .dashboard-finance-grid,
    .employee-check-grid,
    .plan-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-feature-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-price-input {
        width: 7rem;
    }

    .booking-customize-grid {
        grid-template-columns: 1fr;
    }

    .checklist-task-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .brand-symbol {
        width: 1.65rem;
    }

    .app-sidebar .nav-link {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    header.bg-white h1 {
        width: 100%;
        font-size: 1.1rem;
    }

    .panel-switcher {
        width: 100%;
    }

    header.bg-white form,
    header.bg-white form .btn {
        width: 100%;
    }

    .row.g-3 > [class*="col-"] {
        min-width: 100%;
    }

    .table {
        min-width: 44rem;
    }

    .route-board-table {
        min-width: 0;
    }

    .route-subject-col {
        width: 8.5rem;
    }

    .route-action-btn {
        min-width: 0;
        width: 100%;
    }

    .calendar-view-select,
    .calendar-toolbar-actions .btn-primary {
        width: 100%;
    }

    .calendar-year-grid {
        grid-template-columns: 1fr;
    }

    .calendar-weekday-checks,
    .employee-summary-grid,
    .dashboard-finance-grid,
    .field-report-grid,
    .field-report-metrics,
    .route-summary-grid,
    .employee-check-grid,
    .plan-feature-row,
    .plan-variant-grid {
        grid-template-columns: 1fr;
    }

    .field-report-card-header {
        flex-direction: column;
    }

    .field-report-schedule {
        text-align: left;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-check-row {
        flex-wrap: wrap;
    }

    .catalog-price-input {
        width: 100%;
    }

    .booking-item-row,
    .booking-addon-row {
        flex-wrap: wrap;
    }

    .booking-addon-controls {
        width: 100%;
        grid-template-columns: minmax(4.5rem, .7fr) minmax(8rem, 1.3fr);
    }

    .plan-period-grid {
        grid-template-columns: 1fr;
    }
}