: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;
}

.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);
}

.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-finance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 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-danger {
    background-color: rgba(239, 68, 68, .10) !important;
    color: #991B1B !important;
    border-color: rgba(239, 68, 68, .25) !important;
}

.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-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;
}

@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 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@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;
    }

    .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,
    .employee-check-grid {
        grid-template-columns: 1fr;
    }

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

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

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

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