:root {
    --bg: #f7fbff;
    --surface: #ffffff;
    --surface-soft: rgba(255, 255, 255, 0.96);
    --border: #e7eef8;
    --shadow: 0 8px 18px rgba(77, 131, 191, 0.08);
    --primary: #63b4ff;
    --primary-dark: #479ef3;
    --primary-bright: #79c1ff;
    --accent: #63b4ff;
    --ink: #1c2d49;
    --muted: #7f92ab;
    --warning: #fff2b0;
    --topbar-h: 68px;
    --content-pad: 24px;
    --ui-font: 14px;
    --tab-font: 14px;
    --tab-pad-y: 16px;
    --tabs-h: 56px;
}

/* Voucher module overrides */
.vouchers-shell {
    max-width: 1200px;
}

.vouchers-tabs {
    display: flex;
    justify-content: center;
    gap: 132px;
    max-width: none;
    padding: 16px var(--content-pad) 0;
    margin: 0 calc(-1 * var(--content-pad)) 22px;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: relative;
    top: 0;
    z-index: 55;
}

.vouchers-tab {
    font-size: 16px;
    padding-bottom: 18px;
}

.vouchers-tab.is-active::after {
    width: 156px;
}

.vouchers-toolbar {
    justify-content: flex-start;
    gap: 12px;
}

.vouchers-toolbar__group {
    gap: 10px;
}

.vouchers-toolbar__group--end {
    margin-left: 0;
}

.vouchers-toolbar .dashboard-filter,
.vouchers-toolbar .sales-search-field {
    min-height: 52px;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    background: #f8fafc;
    color: #263244;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

.vouchers-toolbar .dashboard-filter {
    min-width: 196px;
}

.vouchers-toolbar .sales-search-field {
    width: clamp(210px, 22vw, 320px);
    min-width: 0;
    max-width: 320px;
    flex: 0 0 auto;
}

.vouchers-toolbar .sales-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: #263244;
    font: inherit;
}

.vouchers-toolbar .sales-search-field input:focus,
.vouchers-toolbar .sales-search-field input:focus-visible {
    outline: none;
    box-shadow: none;
}

.vouchers-toolbar .sales-search-field input::placeholder {
    color: #aeb8c8;
}

.voucher-discount-board {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0 0;
}

.voucher-discount-board__note {
    margin-bottom: 14px;
    font-size: 13px;
}

.voucher-discount-list {
    gap: 10px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.voucher-discount-item {
    padding: 14px 16px 13px;
    border-radius: 16px;
}

.voucher-discount-item strong {
    font-size: 14px;
}

.voucher-discount-item span {
    margin-top: 3px;
    font-size: 12px;
}

.voucher-discount-dialog {
    max-width: 560px;
}

.voucher-discount-modal {
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(28, 53, 95, 0.14);
}

.voucher-discount-modal__head {
    padding: 24px 24px 10px;
}

.voucher-discount-modal__head h2 {
    font-size: 22px;
}

.voucher-discount-modal__esc,
.voucher-discount-modal__close {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
}

.voucher-discount-modal__body {
    padding: 4px 24px 18px;
}

.voucher-discount-modal__footer {
    gap: 12px;
    padding: 0 24px 24px;
}

.voucher-discount-field {
    gap: 8px;
    margin-bottom: 18px;
}

.voucher-discount-field > span {
    font-size: 13px;
}

.voucher-discount-field .customer-input-flat {
    min-height: 52px;
    border-radius: 14px;
    font-size: 14px;
}

.voucher-discount-field .customer-input-flat::placeholder {
    color: #c1c9d7;
}

.voucher-discount-amount {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.voucher-discount-amount .customer-input-flat {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.voucher-discount-amount__switch button {
    font-size: 16px;
}

.voucher-discount-scopes {
    gap: 10px;
}

.voucher-discount-scope {
    gap: 12px;
}

.voucher-discount-scope span {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.voucher-discount-scope strong {
    font-size: 13px;
}

.vouchers-filter-chips {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vouchers-filter-chip {
    width: 96px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dfe7f4;
    border-radius: 10px;
    background: #ffffff;
    color: #30435f;
    font-size: 15px;
    font-weight: 700;
}

.vouchers-filter-chip.is-active {
    background: #f7f9fc;
    color: #121d35;
}

.vouchers-table-card {
    overflow: hidden;
    border: 1px solid #e3ebf6;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.voucher-table th,
.voucher-table td {
    padding: 18px 16px;
    vertical-align: middle;
}

.voucher-table th {
    color: #223955;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.voucher-table th i {
    margin-left: 10px;
    font-size: 15px;
}

.voucher-table td {
    color: #2b3d58;
    font-size: 13px;
}

.voucher-table tr + tr td {
    border-top: 1px solid #edf2f9;
}

.voucher-table__type {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voucher-table__type strong,
.voucher-table td strong {
    color: #1f3150;
    font-size: 13px;
    font-weight: 700;
}

.voucher-table__badge {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.voucher-table__badge--gift {
    background: #6fd1a0;
}

.voucher-table__badge--service {
    background: #ffec59;
    color: #ffffff;
}

.voucher-table__status {
    display: inline-flex;
    min-width: 142px;
    justify-content: center;
    padding: 10px 18px;
    border: 2px solid #6fd5e2;
    border-radius: 999px;
    color: #6fd5e2;
    font-size: 14px;
    font-weight: 700;
}

.voucher-table__status--inactive {
    border-color: #d6dce8;
    color: #8b96a8;
}

.voucher-fab-menu {
    position: absolute;
    right: 0;
    bottom: 78px;
    width: 280px;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(20, 36, 64, 0.14);
}

.voucher-fab-menu[hidden] {
    display: none !important;
}

.voucher-fab-menu__item,
.voucher-fab-menu__close {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    background: #ffffff;
    color: #2f4161;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

.voucher-fab-menu__item + .voucher-fab-menu__item {
    border-top: 1px solid #eef3f8;
}

.voucher-fab-menu__item i,
.voucher-fab-menu__close i {
    font-size: 18px;
}

.voucher-fab-menu__close {
    background: linear-gradient(135deg, #76a8ff 0%, #5a88ef 100%);
    color: #ffffff;
}

.vouchers-table-card .inventory-table__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-top: 1px solid #edf2f9;
    background: #ffffff;
}

.vouchers-table-card .inventory-table__footer > span {
    color: #31435f;
    font-size: 13px;
}

.vouchers-table-card .inventory-table__footer-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.vouchers-table-card .inventory-table__page-size,
.vouchers-table-card .inventory-table__pager,
.vouchers-table-card .inventory-table__page,
.vouchers-table-card .inventory-table__goto,
.vouchers-table-card .inventory-table__collapse {
    min-height: 42px;
    height: 42px;
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    background: #ffffff;
    color: #223955;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.vouchers-table-card .inventory-table__page-size {
    min-width: 108px;
    padding: 0 14px;
}

.vouchers-table-card .inventory-table__pager,
.vouchers-table-card .inventory-table__collapse {
    width: 42px;
    padding: 0;
}

.vouchers-table-card .inventory-table__page,
.vouchers-table-card .inventory-table__goto {
    min-width: 42px;
    padding: 0 12px;
}

.vouchers-table-card .inventory-table__page.is-active {
    background: linear-gradient(135deg, #76a8ff 0%, #5a88ef 100%);
    border-color: #5a88ef;
    color: #ffffff;
}

.vouchers-table-card .inventory-table__footer-controls > span {
    color: #31435f;
    font-size: 13px;
}

.vouchers-shell {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 66vh;
}

.vouchers-tabs {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4edf8;
}

.vouchers-tab {
    position: relative;
    padding: 0 0 16px;
    border: 0;
    background: transparent;
    color: #1e2f4d;
    font-size: 16px;
    font-weight: 700;
}

.vouchers-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #76a8ff 0%, #5c8ef5 100%);
    transform: translateX(-50%);
    transition: width 0.2s ease;
}

.vouchers-tab.is-active {
    color: #6f97f4;
}

.vouchers-tab.is-active::after {
    width: 156px;
}

.vouchers-panels {
    padding: 0 2px;
}

.vouchers-panel[hidden] {
    display: none !important;
}

.vouchers-toolbar--compact {
    justify-content: flex-start;
    margin-bottom: 18px;
    gap: 12px;
}

.vouchers-toolbar--compact .dashboard-filter {
    min-width: 196px;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 14px;
}

.vouchers-toolbar__group {
    gap: 10px;
}

.vouchers-search {
    min-width: 0;
    width: clamp(210px, 22vw, 320px);
    max-width: 320px;
}

.vouchers-search input {
    min-height: 52px;
    border-radius: 14px;
    font-size: 14px;
}

.vouchers-empty-card {
    max-width: 980px;
    min-height: 430px;
    border-radius: 18px;
    background: #fcfdff;
}

.vouchers-empty-card h2 {
    font-size: 22px;
}

.vouchers-empty-card p {
    max-width: 520px;
    font-size: 15px;
}

.vouchers-empty-action {
    min-width: 220px;
    padding: 13px 20px;
    border-radius: 14px;
    color: #6b91f5;
    font-size: 16px;
}

.vouchers-card-list {
    display: grid;
    gap: 12px;
}

.vouchers-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border: 1px solid #dfe9f8;
    border-radius: 16px;
    background: #ffffff;
}

.vouchers-card-item__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vouchers-card-item__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef4ff;
    color: #6f97f4;
    font-size: 16px;
}

.vouchers-card-item__left strong,
.voucher-discount-item strong {
    display: block;
    color: #223955;
    font-size: 14px;
    font-weight: 700;
}

.vouchers-card-item__left span,
.voucher-discount-item span {
    display: block;
    margin-top: 3px;
    color: #7d8da3;
    font-size: 12px;
}

.vouchers-card-item__status {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef5ff;
    color: #6f97f4;
    font-size: 12px;
    font-weight: 700;
}

.voucher-discount-board {
    max-width: 900px;
    margin: 0;
    padding: 8px 0 0 18px;
}

.voucher-discount-board__note {
    margin: 0 0 14px;
    color: #223955;
    font-size: 13px;
}

.voucher-discount-list {
    display: grid;
    gap: 10px;
}

.voucher-discount-item {
    width: 100%;
    padding: 14px 16px 13px;
    border: 1px solid #eef3fb;
    border-radius: 16px;
    background: #ffffff;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.voucher-discount-item.is-soft {
    background: #f7f9fd;
}

.voucher-discount-item:hover {
    border-color: #d7e5fb;
    background: #f9fbff;
    transform: translateY(-1px);
}

.voucher-discount-dialog {
    max-width: 560px;
}

.voucher-discount-modal {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(28, 53, 95, 0.14);
}

.voucher-discount-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 10px;
}

.voucher-discount-modal__head h2 {
    margin: 0;
    color: #111d35;
    font-size: 22px;
    font-weight: 800;
}

.voucher-discount-modal__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.voucher-discount-modal__esc,
.voucher-discount-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #f5f7fb;
    color: #111d35;
    font-size: 16px;
    font-weight: 700;
}

.voucher-discount-modal__body {
    padding: 4px 24px 18px;
}

.voucher-discount-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 24px 24px;
}

.voucher-discount-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.voucher-discount-field > span {
    color: #223955;
    font-size: 13px;
    font-weight: 600;
}

.voucher-discount-field .customer-input-flat {
    min-height: 52px;
    border-radius: 14px;
    font-size: 14px;
}

.voucher-discount-amount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
}

.voucher-discount-amount .customer-input-flat {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.voucher-discount-amount__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.voucher-discount-amount__switch button {
    border: 0;
    background: #f1f3f7;
    color: #7b8596;
    font-size: 16px;
    font-weight: 700;
}

.voucher-discount-amount__switch button:first-child {
    border-left: 1px solid #e2e8f3;
}

.voucher-discount-amount__switch button:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.voucher-discount-amount__switch .is-active {
    background: linear-gradient(135deg, #648eeb 0%, #4f7de0 100%);
    color: #ffffff;
}

.voucher-discount-scopes {
    display: grid;
    gap: 10px;
}

.voucher-discount-scope {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5a85ee;
}

.voucher-discount-scope input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.voucher-discount-scope span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf3ff;
    color: transparent;
    font-size: 18px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.voucher-discount-scope input:checked + span {
    background: linear-gradient(135deg, #76a8ff 0%, #5a88ef 100%);
    color: #ffffff;
}

.voucher-discount-scope strong {
    font-size: 13px;
    font-weight: 500;
}

.voucher-discount-delete {
    min-width: 108px;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    background: #e14969;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 991px) {
    .vouchers-shell {
        max-width: 100%;
    }

    .vouchers-tabs {
        gap: 28px;
    }

    .vouchers-tab.is-active::after {
        width: 108px;
    }

    .vouchers-toolbar--compact {
        flex-direction: column;
        align-items: stretch;
    }

    .vouchers-toolbar__group--end,
    .vouchers-search {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .voucher-discount-dialog {
        max-width: 92vw;
    }

    .voucher-discount-amount {
        grid-template-columns: 1fr;
    }

    .voucher-discount-amount .customer-input-flat {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .voucher-discount-amount__switch button:first-child {
        border-left: 0;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--ink);
    background: #ffffff;
    overflow-x: hidden;
}

body.app-shell {
    font-size: var(--ui-font);
    height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6, .topbar__title, .hero-title, .section-title, .panel-subtitle {
    font-family: "Manrope", sans-serif;
}

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

.dashboard-shell {
    min-height: 100vh;
    height: 100vh;
    background: #ffffff;
}

.sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 234px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-right: 1px solid #edf2fa;
}

.sidebar-panel__header {
    padding: 8px 12px 10px;
}

.brand-card,
.page-card,
.soft-card,
.metric-card,
.showcase-card,
.state-card,
.auth-card {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.brand-card {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 6px 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
}

.avatar-badge,
.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f4f5f7;
    color: #2d3138;
    font-weight: 800;
    font-size: 22px;
}

.brand-card__text {
    min-width: 0;
}

.brand-card__name {
    max-width: 140px;
    color: #20242b;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-card__sub {
    color: #6d7380;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.brand-card__chevron {
    margin-left: auto;
    color: #6c7280;
    font-size: 11px;
}

.brand-profile {
    position: relative;
}

.brand-profile-menu {
    width: 286px;
    margin-top: 10px !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.brand-profile-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 92px;
    width: 16px;
    height: 16px;
    border-left: 1px solid #e6ebf2;
    border-top: 1px solid #e6ebf2;
    background: #fff;
    transform: rotate(45deg);
}

.brand-profile-menu__item,
.brand-profile-menu__logout {
    display: block;
    width: 100%;
    padding: 18px 24px;
    border: 0;
    background: #fff;
    color: #60656d;
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
}

.brand-profile-menu__item:hover,
.brand-profile-menu__logout:hover {
    background: #f5f9ff;
    color: #4f9fea;
}

.brand-profile-menu__section {
    display: grid;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #eef2f7;
    color: #60656d;
    font-size: 18px;
}

.brand-profile-menu__section strong {
    color: #60656d;
    font-size: 15px;
    font-weight: 800;
}

.side-navigation {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    padding: 0 10px;
    overflow-y: hidden;
}

.side-navigation__link {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
    color: #35506f;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.side-navigation__link i {
    font-size: 18px;
}

.side-navigation__link:hover,
.side-navigation__link.is-active {
    background: #edf6ff;
    color: #65b4ff;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 12px 20px;
}

.sidebar-logout {
    border: 1px solid #e6eef9;
    border-radius: 999px;
    background: #ffffff;
    color: #6285a8;
    font-weight: 600;
}

.main-panel {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin-left: 234px;
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.topbar {
    flex: 0 0 var(--topbar-h);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    min-height: 68px;
    padding: 0 22px;
    border-radius: 0;
    background: linear-gradient(180deg, #6ab8fb 0%, #5eaef4 100%);
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.18);
    z-index: 60;
}

.topbar__left {
    display: flex;
    align-items: center;
}

.topbar__title {
    font-size: 15px;
    font-weight: 700;
}

.topbar__actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 238px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1;
}

.search-pill span {
    opacity: 0.88;
}

.topbar-icon {
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
}

.content-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--content-pad) 30px;
    background: #ffffff;
}

.page-card,
.soft-card,
.metric-card,
.showcase-card,
.state-card {
    background: var(--surface-soft);
    border-radius: 18px;
}

.page-card {
    padding: 22px;
}

.page-card--compact {
    padding: 18px 20px;
}

.soft-card {
    padding: 16px;
}

.metric-card {
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
}

.metric-card span {
    color: var(--muted);
}

.metric-card strong {
    margin-top: 0.5rem;
    font-size: 1.75rem;
}

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

.section-title {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    font-weight: 800;
}

.panel-subtitle {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.banner-note {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--warning);
}

.agenda-item,
.timeline-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fbff;
}

.timeline-item {
    flex-direction: column;
    align-items: flex-start;
}

.calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    padding: 12px 0;
    border-bottom: 1px solid #e7eef8;
}

.calendar-toolbar__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.calendar-date-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.calendar-board {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 0;
    border: 1px solid #e7eef8;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-time-rail {
    border-right: 1px solid #e7eef8;
    background: #fbfdff;
}

.calendar-time-rail__head {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #90a1b7;
    border-bottom: 1px solid #edf2f8;
}

.calendar-time-mark {
    height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    font-size: 11px;
    color: #8a9bb0;
}

.calendar-staff-board {
    overflow: hidden;
}

.calendar-staff-board__head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    min-width: 700px;
    height: 58px;
    border-bottom: 1px solid #edf2f8;
    background: #ffffff;
}

.calendar-staff-header {
    padding: 10px 12px;
    border-right: 1px solid #edf2f8;
}

.calendar-staff-header strong {
    display: block;
    font-size: 14px;
}

.calendar-staff-header span {
    display: block;
    font-size: 12px;
    color: #8a9bb0;
}

.calendar-staff-board__body {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    min-width: 700px;
}

.calendar-day-column {
    position: relative;
    border-right: 1px solid #edf2f8;
}

.calendar-day-slots {
    position: relative;
}

.calendar-slot {
    position: relative;
    width: 100%;
    height: 20px;
    display: block;
    border: 0;
    border-bottom: 1px solid #f1f5fa;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.calendar-slot:hover {
    background: rgba(99, 180, 255, 0.08);
}

.calendar-slot:hover::after {
    content: attr(data-time);
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: #4f84ff;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.calendar-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.calendar-overlay-card {
    position: absolute;
    left: 8px;
    right: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #5eaef4, #6ec7ff);
    box-shadow: 0 8px 16px rgba(94, 174, 244, 0.22);
    overflow: hidden;
}

.calendar-overlay-card strong,
.calendar-overlay-card span,
.calendar-overlay-card small {
    display: block;
    line-height: 1.2;
}

.calendar-overlay-card strong {
    font-size: 12px;
    margin-bottom: 2px;
}

.calendar-overlay-card span,
.calendar-overlay-card small {
    font-size: 10px;
    opacity: 0.96;
}

.calendar-overlay-card--blocked {
    background: linear-gradient(135deg, #9caaba, #8d9fb2);
    box-shadow: none;
}

.calendar-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ff6d8e;
    z-index: 5;
}

.calendar-now-line span {
    position: absolute;
    left: 12px;
    top: -10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff6d8e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.calendar-selection-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    background: #fbfdff;
}

.calendar-selection-bar__label {
    font-size: 12px;
    color: #90a1b7;
    margin-bottom: 2px;
}

.calendar-fab-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
}

.calendar-fab {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #63b4ff 0%, #4f84ff 100%);
    color: #fff;
    box-shadow: 0 18px 30px rgba(79, 132, 255, 0.3);
    font-size: 26px;
}

.calendar-fab.is-open i {
    display: inline-block;
    transform: rotate(45deg);
}

.calendar-fab-menu {
    position: absolute;
    right: 0;
    bottom: 76px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.2s ease;
}

.calendar-fab-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-fab-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    padding: 12px 16px;
    border: 1px solid #e7eef8;
    border-radius: 999px;
    background: #ffffff;
    color: #24405f;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(77, 131, 191, 0.12);
}

.calendar-modal {
    border: 0;
    border-radius: 20px;
}

.sales-shell {
    position: relative;
}

.sales-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 calc(-1 * var(--content-pad)) 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 55;
}

.sales-tab {
    padding: var(--tab-pad-y) 10px calc(var(--tab-pad-y) + 2px);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #000000;
    font-size: var(--tab-font);
    font-weight: 700;
}

.sales-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.sales-tab-panels {
    padding-top: 18px;
}

.sales-panel {
    display: none;
}

.sales-panel.is-active {
    display: block;
    overflow: visible;
}

.sales-panel.is-active[data-sales-panel="services"],
.sales-panel.is-active[data-sales-panel="invoices"],
.sales-panel.is-active[data-sales-panel="vouchers"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sales-toolbar {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    align-items: center;
    margin-bottom: 30px;

    position: sticky;
    top: var(--tabs-h);
    z-index: 54;
    background: #ffffff;
    padding: 16px 0 18px;
    border-bottom: 1px solid #e7eef8;
    overflow: visible;
}

.sales-toolbar__group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.sales-toolbar .dropdown {
    position: relative;
    z-index: 60;
}

.sales-toolbar__group--end {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
}

.sales-toolbar .dashboard-filter,
.sales-toolbar .sales-search-field,
.sales-toolbar .sales-backdate,
.sales-toolbar .sales-refresh-btn {
    min-height: 56px;
    height: 56px;
    padding: 0 20px;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    background: #f8fafc;
    color: #263244;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

.sales-toolbar .dashboard-filter:hover,
.sales-toolbar .sales-search-field:hover,
.sales-toolbar .sales-backdate:hover,
.sales-toolbar .sales-refresh-btn:hover {
    border-color: #d7e1ee;
    background: #f5f7fa;
}

.sales-toolbar .dashboard-filter span,
.sales-toolbar .sales-search-field span,
.sales-toolbar .sales-backdate span,
.sales-toolbar .sales-switch > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-toolbar .dashboard-filter--shop {
    flex: 0 1 360px;
    width: clamp(240px, 22vw, 360px);
    min-width: 220px;
    justify-content: space-between;
}

.sales-toolbar .dashboard-filter:not(.dashboard-filter--shop):not(.dashboard-filter--wide):not(.sales-btn-print):not(.sales-search-select):not(.sales-filter-disabled) {
    flex: 0 1 auto;
    min-width: 128px;
    max-width: 220px;
    justify-content: center;
}

.sales-toolbar .sales-btn-print {
    flex: 0 1 240px;
    min-width: 190px;
    max-width: 260px;
    justify-content: center;
}

.sales-toolbar .dashboard-filter--wide {
    flex: 0 1 300px;
    min-width: 220px;
    max-width: 330px;
    justify-content: space-between;
}

.sales-toolbar .sales-search-select {
    flex: 0 1 210px;
    min-width: 150px;
    max-width: 220px;
    justify-content: space-between;
}

.sales-toolbar .sales-filter-disabled {
    flex: 0 1 220px;
    min-width: 150px;
    max-width: 240px;
    justify-content: space-between;
}

.sales-switch {
    display: flex;
    flex: 0 1 300px;
    align-items: center;
    gap: 10px;
    color: #394657;
    font-size: 14px;
    white-space: nowrap;
}

.sales-switch input {
    display: none;
}

.sales-switch input:checked + .sales-switch__track {
    background: #5d84e6;
}

.sales-switch input:checked + .sales-switch__track::after {
    left: 31px;
}

.sales-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 28px;
    border-radius: 999px;
    background: #e2e7ef;
}

.sales-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.sales-grid-two {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 18px;
    align-items: start;
}

.sales-grid-two--secondary {
    margin-top: 28px;
}

.sales-section-title {
    margin: 0 0 14px;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #30343c;
}

.sales-table-card {
    border: 1px solid #e4edf9;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 54, 92, 0.05);
}

.sales-table-card--wide {
    overflow: hidden;
}

.sales-table-card--services {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sales-panel.is-active[data-sales-panel="services"] .sales-table-card--services,
.sales-panel.is-active[data-sales-panel="vouchers"] .sales-table-card--services {
    height: calc(100vh - 300px);
    min-height: 420px;
    max-height: calc(100vh - 300px);
}

.sales-panel.is-active[data-sales-panel="invoices"] .sales-table-card--services {
    height: auto;
    min-height: 0;
    max-height: none;
}

.sales-table-scroll {
    overflow: auto;
    min-width: 0;
}

.sales-table-scroll--services {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

.sales-panel[data-sales-panel="invoices"] .sales-table-scroll--services {
    overflow-y: hidden;
}

.sales-table-scroll--invoices {
    overflow-x: hidden;
}

.sales-table-scroll--services::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.sales-table-scroll--services::-webkit-scrollbar-thumb {
    background: #c7cfdd;
    border-radius: 999px;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
}

.sales-table thead th {
    padding: 20px 18px;
    border-right: 0;
    border-bottom: 1px solid #edf2fa;
    color: #30343c;
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.sales-table tbody td {
    padding: 22px 18px;
    border-right: 0;
    border-bottom: 1px solid #edf2fa;
    color: #4a4f58;
    font-size: 15px;
    vertical-align: top;
}

.sales-table tbody td:nth-child(n+2),
.sales-table thead th:nth-child(n+2) {
    text-align: right;
}

.sales-table--wide tbody td,
.sales-table--wide thead th {
    text-align: left !important;
}

.sales-table--services {
    min-width: 1360px;
}

.sales-table--invoices {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.sales-table--invoices thead th,
.sales-table--invoices tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-table--invoices thead th:nth-child(1),
.sales-table--invoices tbody td:nth-child(1) {
    width: 16%;
}

.sales-table--invoices thead th:nth-child(2),
.sales-table--invoices tbody td:nth-child(2) {
    width: 18%;
}

.sales-table--invoices thead th:nth-child(3),
.sales-table--invoices tbody td:nth-child(3) {
    width: 18%;
}

.sales-table--invoices thead th:nth-child(4),
.sales-table--invoices tbody td:nth-child(4) {
    width: 14%;
}

.sales-table--invoices thead th:nth-child(5),
.sales-table--invoices tbody td:nth-child(5) {
    width: 10%;
}

.sales-table--invoices thead th:nth-child(6),
.sales-table--invoices tbody td:nth-child(6) {
    width: 14%;
}

.sales-table--invoices thead th:nth-child(7),
.sales-table--invoices tbody td:nth-child(7) {
    width: 10%;
    text-align: center !important;
}

.sales-table--invoices .sales-status-pill {
    min-width: 0;
    width: 100%;
    max-width: 140px;
    padding-inline: 16px;
}

.sales-table--services thead th,
.sales-table--services tbody td {
    padding: 22px 18px;
    font-size: 15px;
    background: #ffffff;
}

.js-sales-invoice-row {
    cursor: pointer;
}

.js-sales-invoice-row:focus-visible {
    outline: 2px solid #86bdf7;
    outline-offset: -2px;
}

.js-sales-invoice-row:hover td,
.js-sales-invoice-row:focus-visible td {
    background: #f8fbff;
}

.sales-table__sticky-left,
.sales-table__sticky-right {
    position: sticky;
    z-index: 2;
    background: inherit;
}

.sales-table--services thead .sales-table__sticky-left,
.sales-table--services thead .sales-table__sticky-right {
    z-index: 4;
    background: #ffffff;
}

.sales-table__sticky-left {
    left: 0;
    min-width: 140px;
    box-shadow: 14px 0 18px rgba(255, 255, 255, 0.95);
}

.sales-table__sticky-right {
    right: 0;
    min-width: 164px;
    text-align: center !important;
    box-shadow: -14px 0 18px rgba(255, 255, 255, 0.95);
}

.sales-ref-code {
    color: #5b84ea;
    font-weight: 700;
}

.sales-ref-code--button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.sales-ref-code--button small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5b84ea;
    font-size: 12px;
    font-weight: 600;
}

.sales-customer-link {
    color: #5b84ea;
    text-decoration: none;
    font-weight: 500;
}

.sales-customer-link:hover,
.sales-customer-link:focus-visible {
    color: #4b73d4;
    text-decoration: underline;
}

.sales-customer-name--walkin {
    color: #30343c;
    font-weight: 500;
}

.sales-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #d9e3f2;
    border-radius: 10px;
    background: #ffffff;
    color: #30343c;
    font-weight: 600;
    line-height: 1;
}

.sales-code-copy i {
    color: #7e8ea6;
    font-size: 15px;
}

.sales-code-copy:hover,
.sales-code-copy:focus-visible {
    border-color: #bfd0eb;
    background: #f7fbff;
}

.sales-table tbody tr:last-child td {
    border-bottom: 0;
}

.sales-table--daily thead th,
.sales-table--daily tbody td {
    padding: 18px 16px;
    font-size: 15px;
}

.sales-table--daily tbody td:first-child {
    width: 38%;
}

.sales-table__row--emphasis td {
    font-weight: 700;
    color: #30343c;
}

.sales-table__row--muted td {
    background: #f1f5fb;
    font-weight: 700;
}

.sales-table__row--negative td {
    color: #f0442f;
    font-weight: 700;
}

.sales-chart-card {
    min-height: 196px;
    border: 1px solid #e7eef8;
    background: #ffffff;
    padding: 18px 18px 10px;
}

.sales-chart-card__canvas {
    position: relative;
    min-height: 340px;
}

.sales-donut-chart {
    width: 100% !important;
    height: 340px !important;
}

.sales-empty-chart {
    min-height: 196px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #e7eef8;
    background: #f7f7f7;
}

.sales-empty-chart__icon {
    display: flex;
    align-items: end;
    gap: 10px;
    height: 54px;
    margin-bottom: 14px;
}

.sales-empty-chart__icon span {
    display: block;
    width: 6px;
    background: #828282;
    border-radius: 999px;
}

.sales-empty-chart__icon span:nth-child(1) { height: 22px; }
.sales-empty-chart__icon span:nth-child(2) { height: 46px; }
.sales-empty-chart__icon span:nth-child(3) { height: 32px; }

.sales-empty-chart__text,
.sales-no-data {
    color: #9a9ea7;
    font-size: 24px;
    text-align: center !important;
}

.sales-filter-disabled {
    color: #c3cad6;
}

.sales-toolbar--services {
    gap: 12px;
}

.sales-toolbar--services .dashboard-filter,
.sales-toolbar--services .sales-search-field {
    min-height: 52px;
    height: 52px;
    border-radius: 12px;
    background: #ffffff;
}

.sales-toolbar--services .dashboard-filter--shop {
    width: clamp(220px, 18vw, 280px);
    min-width: 220px;
    max-width: 280px;
}

.sales-toolbar--services .sales-toolbar-dropdown--staff {
    width: clamp(180px, 16vw, 240px);
    min-width: 180px;
    max-width: 240px;
    justify-content: space-between;
}

.sales-toolbar--services .dashboard-filter--wide {
    width: clamp(320px, 24vw, 460px);
    min-width: 320px;
    max-width: 460px;
}

.sales-toolbar--services .sales-search-combo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
}

.sales-toolbar--services .sales-search-select {
    min-width: 180px;
    max-width: 180px;
}

.sales-search-field {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 360px;
    min-width: 260px;
    max-width: 560px;
    color: #c3cad6;
    font-size: 15px;
    font-weight: 500;
}

.sales-search-field--input {
    position: relative;
    gap: 0;
    min-width: 300px;
    max-width: 380px;
    padding: 0 18px;
    border: 1px solid #e6edf7;
    border-radius: 12px;
    background: #ffffff;
    color: #c3cad6;
}

.sales-search-field--input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263244;
    font-size: 15px;
    font-weight: 500;
}

.sales-search-field--input input::placeholder {
    color: #c3cad6;
}

.sales-search-field--input i {
    flex: 0 0 auto;
    font-size: 22px;
}

.sales-scrollbar {
    height: 12px;
    margin: 0 0 2px;
    background: linear-gradient(90deg, #cfd6de 0 80%, #f0f2f5 80% 100%);
}

.sales-refresh-btn {
    flex: 0 0 auto;
    color: #263244;
    font-size: 14px;
    font-weight: 600;
}

.sales-backdate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 190px;
    gap: 12px;
    max-width: 210px;
    color: #424850;
    font-size: 14px;
    font-weight: 600;
}

.sales-backdate input {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #d8dee8;
}

.sales-toolbar-menu {
    min-width: 220px;
    padding: 8px;
    border: 1px solid #e6edf7;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(38, 50, 68, 0.16);
    margin-top: 8px;
    z-index: 1080;
}

.sales-toolbar-menu .dropdown-item {
    border-radius: 12px;
    padding: 11px 14px;
    font-weight: 600;
    color: #2d3748;
}

.sales-toolbar-menu .dropdown-item:hover,
.sales-toolbar-menu .dropdown-item:focus,
.sales-toolbar-menu .dropdown-item.is-active {
    background: #edf4ff;
    color: #5d84e6;
}

.sales-date-button {
    justify-content: center !important;
    text-align: center;
}

.sales-date-button i {
    margin-right: auto;
}

.sales-date-button span {
    flex: 1 1 auto;
    text-align: center;
    margin-right: 18px;
}

.sales-date-picker {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sales-summary-modal {
    background: #f5f7fb;
}

.sales-summary-modal__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e6edf7;
}

.sales-summary-modal__header h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #2d3748;
}

.sales-summary-modal__close {
    justify-self: end;
    border: 0;
    background: transparent;
    color: #1f2937;
    font-size: 26px;
}

.sales-summary-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    min-height: calc(100vh - 78px);
}

.sales-summary-preview {
    display: grid;
    place-items: start center;
    padding: 18px 16px;
    overflow: auto;
    background: linear-gradient(180deg, #eef4ff 0%, #f7f9fd 100%);
}

.sales-summary-receipt {
    width: min(100%, 330px);
    min-height: 480px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.14);
    padding: 12px 10px 16px;
    font-family: "Courier New", monospace;
    color: #000000;
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: 13px;
}

.sales-summary-sidebar {
    border-left: 1px solid #e6edf7;
    background: #ffffff;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-summary-segmented {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #ececec;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

.sales-summary-segmented button {
    border: 0;
    min-height: 48px;
    background: transparent;
    color: #667085;
    font-size: 15px;
}

.sales-summary-segmented button.is-active {
    background: #5d84e6;
    color: #ffffff;
}

.sales-summary-checkbox {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    color: #5d84e6;
}

.sales-summary-checkbox input {
    display: none;
}

.sales-summary-checkbox__box {
    width: 32px;
    height: 32px;
    border: 1px solid #d9e1ef;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: transparent;
}

.sales-summary-checkbox input:checked + .sales-summary-checkbox__box {
    background: #5d84e6;
    border-color: #5d84e6;
    color: #ffffff;
}

.sales-summary-calendar {
    border: 1px solid #e6edf7;
    border-radius: 4px;
    padding: 22px 16px 14px;
}

.sales-summary-calendar__head,
.sales-summary-calendar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sales-summary-calendar__head strong {
    font-size: 18px;
    color: #334155;
}

.sales-summary-calendar__nav {
    display: flex;
    gap: 10px;
}

.sales-summary-calendar__nav button,
.sales-summary-calendar__footer button {
    border: 0;
    background: transparent;
    color: #111827;
    font-weight: 700;
}

.sales-summary-calendar__weekdays,
.sales-summary-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.sales-summary-calendar__weekdays {
    margin-top: 18px;
    color: #94a3b8;
    font-weight: 700;
}

.sales-summary-calendar__days {
    margin-top: 12px;
}

.sales-summary-calendar__days span {
    display: grid;
    place-items: center;
    min-height: 28px;
    color: #0f172a;
    font-size: 13px;
}

.sales-summary-calendar__days .is-empty {
    visibility: hidden;
}

.sales-summary-calendar__days .is-muted {
    color: #c6d0dd;
}

.sales-summary-calendar__days .is-active {
    width: 34px;
    margin: 0 auto;
    border-radius: 999px;
    background: #5d84e6;
    color: #ffffff;
    font-weight: 700;
}

.sales-summary-calendar__footer {
    margin-top: 18px;
    background: #f6f6f6;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}

.sales-summary-range {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: #dbe8ff;
    padding: 10px 12px;
    text-align: left;
    color: #334155;
}

.sales-summary-range__dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid #ffffff;
    outline: 2px solid #5d84e6;
    background: #5d84e6;
    flex: 0 0 auto;
}

.sales-summary-range strong,
.sales-summary-range small {
    display: block;
}

.sales-summary-range small {
    color: #6b7280;
    font-size: 15px;
}

.sales-summary-print-btn {
    margin-top: auto;
    min-height: 50px;
    border: 0;
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

@media (max-width: 1500px) {
    .sales-toolbar {
        gap: 8px;
    }

    .sales-toolbar__group {
        gap: 8px;
    }

    .sales-toolbar .dashboard-filter,
    .sales-toolbar .sales-search-field,
    .sales-toolbar .sales-backdate,
    .sales-toolbar .sales-refresh-btn {
        min-height: 48px;
        height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px;
    }

    .sales-toolbar .dashboard-filter--shop {
        width: 220px;
        min-width: 180px;
        max-width: 240px;
    }

    .sales-toolbar .sales-filter-disabled,
    .sales-toolbar .sales-search-select {
        min-width: 130px;
        max-width: 170px;
    }

    .sales-toolbar .dashboard-filter--wide {
        min-width: 190px;
        max-width: 230px;
    }

    .sales-toolbar .sales-btn-print {
        min-width: 175px;
        max-width: 210px;
    }

    .sales-toolbar .sales-search-field {
        min-width: 210px;
    }

    .sales-switch {
        flex-basis: 240px;
        font-size: 13px;
    }

    .sales-switch__track {
        width: 48px;
        height: 24px;
    }

    .sales-switch__track::after {
        width: 18px;
        height: 18px;
    }

    .sales-backdate {
        flex-basis: 150px;
        max-width: 170px;
    }

    .sales-backdate input {
        width: 26px;
        height: 26px;
    }
}

.sales-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: 10px 24px;
    border: 1.5px solid #63b4ff;
    border-radius: 999px;
    background: transparent;
    color: #63b4ff;
    font-weight: 700;
    cursor: default;
    line-height: 1;
    white-space: nowrap;
}

.sales-status-pill.is-arrived,
.sales-status-pill.is-confirmed {
    border-color: #8fddb2;
    color: #5cb883;
    background: #eefaf3;
}

.sales-status-pill.is-completed {
    border-color: #96dff0;
    color: #69c7d8;
    background: #edfafd;
}

.sales-status-pill.is-started {
    border-color: #f4b355;
    color: #ee9c23;
    background: #fff6e9;
}

.sales-status-pill.is-no-show,
.sales-status-pill.is-cancelled {
    border-color: #ff7b8f;
    color: #ed4d68;
    background: #fff1f4;
}

.sales-status-pill.is-voided {
    border-color: #cbd3df;
    color: #6f7b8c;
    background: #f5f7fa;
}

.sales-status-pill.is-new {
    border-color: #d5d9df;
    color: #111827;
    background: #f3f4f6;
}

.sales-service-view-dialog {
    width: min(1024px, calc(100vw - 56px));
    max-width: min(1024px, calc(100vw - 56px));
}

.sales-service-view {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    max-height: calc(100vh - 84px);
    background: #fff;
    position: relative;
}

.sales-service-view.is-muted::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(15, 23, 42, 0.32);
}

.sales-service-view__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 84px);
    padding: 28px 28px 0;
    background: #fff;
}

.sales-service-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.sales-service-view__header h2 {
    margin: 0;
    color: #30343a;
    font-size: 26px;
    font-weight: 800;
}

.sales-service-view__close {
    border: 0;
    background: transparent;
    color: #20252d;
    font-size: 24px;
    line-height: 1;
}

.sales-service-view__customer {
    margin-bottom: 16px;
    color: #111827;
    font-size: 16px;
}

.sales-service-view__status-wrap {
    position: relative;
    margin-bottom: 24px;
}

.sales-service-view__status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f5f6f8;
    color: #111827;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.sales-service-view__status[aria-expanded="true"] {
    border-color: #87a6ff;
    box-shadow: 0 0 0 1px rgba(135, 166, 255, 0.24);
}

.sales-service-view__status i.bi-chevron-down,
.sales-service-view__status i.bi-chevron-up {
    position: absolute;
    right: 18px;
    color: #a6adb7;
}

.sales-service-view__status.is-new {
    border-color: #d5d9df;
    background: #f3f4f6;
    color: #111827;
}

.sales-service-view__status.is-confirmed,
.sales-service-view__status.is-arrived {
    border-color: #71cb9c;
    background: #e7f8f0;
    color: #55a879;
}

.sales-service-view__status.is-started {
    border-color: #e2bf68;
    background: #fff6e3;
    color: #c58a2e;
}

.sales-service-view__status.is-completed {
    border-color: #89d2e2;
    background: #e7f7fb;
    color: #55abc1;
}

.sales-service-view__status.is-no-show,
.sales-service-view__status.is-cancelled {
    border-color: #ff7b8f;
    background: #fff1f4;
    color: #ed4d68;
}

.sales-service-view__status.is-locked {
    cursor: default;
}

.sales-service-view__status.is-locked i.bi-chevron-down,
.sales-service-view__status.is-locked i.bi-chevron-up {
    display: none;
}

.sales-service-view__status-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.sales-service-view__status-menu[hidden] {
    display: none;
}

.sales-service-view__status-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    padding: 2px 12px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

.sales-service-view__status-option.is-confirmed,
.sales-service-view__status-option.is-arrived {
    color: #5bad80;
}

.sales-service-view__status-option.is-started {
    color: #db9a37;
}

.sales-service-view__status-option.is-completed {
    color: #61c6d9;
}

.sales-service-view__status-option.is-no-show,
.sales-service-view__status-option.is-cancelled {
    color: #ed4d68;
}

.sales-service-view__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #111827;
    font-size: 16px;
}

.sales-service-view__summary {
    display: none;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f5f5f5;
}

.sales-service-view__summary-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #4b5563;
    font-size: 22px;
}

.sales-service-view__summary strong {
    display: block;
    flex: 1;
    min-width: 0;
    color: #30343a;
    font-size: 18px;
    font-weight: 700;
}

.sales-service-view__summary-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5b83ff;
    font-size: 22px;
}

.sales-service-view__summary.is-visible {
    display: flex;
}

.sales-service-view__services {
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    max-height: min(32vh, 320px);
    overflow: auto;
    padding-right: 3px;
}

.sales-service-view__service {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f5f5f5;
}

.sales-service-view__service.is-expanded {
    border-color: #d7d7d7;
    background: #fff;
}

.sales-service-view__service-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 68px;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    text-align: left;
}

.sales-service-view__service-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #c9cdd3;
    color: #fff;
    font-weight: 700;
}

.sales-service-view__service-title {
    flex: 1;
    min-width: 0;
    color: #111827;
    font-size: 21px;
    font-weight: 800;
}

.sales-service-view__service-body {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 0 64px 16px;
}

.sales-service-view__service.is-expanded .sales-service-view__service-body {
    display: grid;
}

.sales-service-view__service-detail span {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}

.sales-service-view__service-detail strong {
    color: #30343a;
    font-size: 16px;
}

.sales-service-view__updated {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px;
    color: #737a84;
}

.sales-service-view__notes {
    margin-bottom: 16px;
    color: #737a84;
    font-size: 14px;
}

.sales-service-view__footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin: 0 -28px;
    padding: 14px 28px 16px;
    border-top: 1px solid #edf0f4;
    background: #fff;
    box-shadow: 0 -10px 22px rgba(255, 255, 255, 0.92);
}

.sales-service-view__total {
    color: #d44962;
    font-size: 18px;
    font-weight: 800;
}

.sales-service-view__more-wrap {
    position: relative;
}

.sales-service-view__more-wrap[hidden] {
    display: none;
}

.sales-service-view__more,
.sales-service-view__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    height: 54px;
    border: 0;
    border-radius: 10px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 800;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sales-service-view__more {
    gap: 10px;
    min-width: 188px;
    border: 1px solid #e7ebf1;
    background: #f3f5f8;
    color: #2f3848;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sales-service-view__more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 20;
    display: grid;
    min-width: 244px;
    padding: 10px 0;
    border: 1px solid #e4e9f1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
}

.sales-service-view__more-menu[hidden] {
    display: none;
}

.sales-service-view__more-menu::after {
    content: "";
    position: absolute;
    right: 56px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    border-right: 1px solid #e4e9f1;
    border-bottom: 1px solid #e4e9f1;
    background: #fff;
    transform: rotate(45deg);
}

.sales-service-view__more-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 24px;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 16px;
    text-align: left;
}

.sales-service-view__more-option:hover {
    background: #f8fafc;
}

.sales-service-view__more-option.is-danger {
    color: #ed4d68;
}

.sales-service-view__more-option.is-disabled {
    color: #4b5563;
    opacity: 0.78;
    cursor: default;
}

.sales-service-product-panel__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(15, 23, 42, 0.42);
}

.sales-service-product-panel__backdrop[hidden] {
    display: none;
}

.sales-service-product-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    width: min(430px, 100vw);
    padding: 22px 18px 16px;
    background: #fff;
    box-shadow: -16px 0 36px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.sales-service-product-panel[hidden] {
    display: none;
}

.sales-service-product-panel.is-open {
    transform: translateX(0);
}

.sales-service-product-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sales-service-product-panel__header h3 {
    margin: 0;
    color: #30343a;
    font-size: 22px;
    font-weight: 400;
}

.sales-service-product-panel__close {
    border: 0;
    background: transparent;
    color: #30343a;
    font-size: 24px;
}

.sales-service-product-panel__search {
    margin-bottom: 14px;
}

.sales-service-product-panel__search input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    font-size: 15px;
    outline: none;
}

.sales-service-product-panel__search input:focus {
    border-color: #5b83ff;
    box-shadow: 0 0 0 1px #5b83ff inset;
}

.sales-service-product-panel__results {
    display: grid;
    margin-bottom: 14px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.sales-service-product-panel__results[hidden] {
    display: none;
}

.sales-service-product-panel__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    background: #fff;
    text-align: left;
}

.sales-service-product-panel__result + .sales-service-product-panel__result {
    border-top: 1px solid #f1f5f9;
}

.sales-service-product-panel__result strong {
    display: block;
    color: #30343a;
    font-size: 15px;
    font-weight: 400;
}

.sales-service-product-panel__result span,
.sales-service-product-panel__result small {
    color: #7b8088;
    font-size: 14px;
}

.sales-service-product-panel__result small {
    align-self: center;
}

.sales-service-product-panel__empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 168px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 8px;
    background: #f7f7f7;
    color: #7b8088;
    text-align: center;
}

.sales-service-product-panel__empty[hidden] {
    display: none;
}

.sales-service-product-panel__empty i {
    font-size: 56px;
    line-height: 1;
}

.sales-service-product-panel__selected {
    display: grid;
    gap: 12px;
    margin-bottom: auto;
}

.sales-service-product-panel__selected[hidden] {
    display: none;
}

.sales-service-product-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #eceff3;
    border-radius: 8px;
    background: #fff;
}

.sales-service-product-row__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f5;
    color: #4b5563;
    font-size: 18px;
}

.sales-service-product-row__name {
    color: #30343a;
    font-size: 15px;
    font-weight: 400;
}

.sales-service-product-row__qty {
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    min-width: 126px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.sales-service-product-row__qty span,
.sales-service-product-row__qty button {
    display: grid;
    place-items: center;
    height: 100%;
    border: 0;
    background: transparent;
    color: #30343a;
    font-size: 18px;
}

.sales-service-product-row__qty button {
    font-weight: 700;
}

.sales-service-product-panel__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 14px;
}

.sales-service-product-panel__footer button {
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}

.sales-service-product-panel__cancel {
    border: 0;
    background: #f5f5f5;
    color: #111827;
}

.sales-service-product-panel__done {
    border: 1px solid #dbe2f3;
    background: #fff;
    color: #5b83ff;
}

.sales-service-view__checkout {
    min-width: 238px;
    background: #7eaef9;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sales-service-cancel-dialog {
    max-width: 470px;
}

.sales-service-no-show-dialog {
    max-width: 500px;
}

.sales-service-no-show {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
}

.sales-service-no-show__body {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 34px;
}

.sales-service-no-show__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #5b83ff;
    color: #fff;
    font-size: 20px;
}

.sales-service-no-show__body p {
    margin: 0;
    color: #20252d;
    font-size: 16px;
    line-height: 1.45;
}

.sales-service-no-show__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 34px 16px;
    border-top: 1px solid #eef2f6;
}

.sales-service-no-show__cancel,
.sales-service-no-show__confirm {
    height: 56px;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
}

.sales-service-no-show__cancel {
    background: #f5f5f5;
    color: #30343a;
}

.sales-service-no-show__confirm {
    background: #d8445d;
    color: #fff;
}

.sales-service-cancel {
    border: 0;
    border-radius: 14px;
}

.sales-service-cancel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 10px;
}

.sales-service-cancel__header h2 {
    margin: 0;
    color: #30343a;
    font-size: 22px;
    font-weight: 800;
}

.sales-service-cancel__close {
    border: 0;
    background: transparent;
    color: #30343a;
    font-size: 20px;
    line-height: 1;
}

.sales-service-cancel__body {
    padding: 2px 20px 20px;
}

.sales-service-cancel__body p {
    margin: 0 0 16px;
    color: #30343a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.sales-service-cancel__options {
    display: grid;
    gap: 6px;
}

.sales-service-cancel__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 8px;
    border-radius: 10px;
    cursor: pointer;
}

.sales-service-cancel__option input {
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: #7eaef9;
}

.sales-service-cancel__option span {
    color: #30343a;
    font-size: 14px;
    line-height: 1.4;
}

.sales-service-cancel__option:has(input:checked) {
    background: #f5f9ff;
}

.sales-service-cancel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.sales-service-cancel__dismiss,
.sales-service-cancel__submit {
    min-width: 96px;
    height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.sales-service-cancel__dismiss {
    border: 1px solid #d8e1eb;
    background: #fff;
    color: #596171;
}

.sales-service-cancel__submit {
    border: 0;
    background: #7eaef9;
    color: #fff;
}

.sales-service-cancel__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.modal-backdrop.show {
    opacity: 1;
    background: rgba(15, 23, 42, 0.58);
}

.sales-service-toast[hidden] {
    display: none;
}

.sales-service-toast {
    position: fixed;
    top: max(18px, calc(50vh - 445px));
    left: 50%;
    z-index: 1062;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 540px;
    max-width: min(90vw, 540px);
    padding: 22px 26px 22px 22px;
    border-radius: 52px;
    border: 1px solid #eef2f6;
    background: rgba(255, 255, 255, 0.98);
    color: #30343a;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    transform: translate(-50%, 0);
}

.sales-service-toast__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #5fb48a;
    font-size: 34px;
}

.sales-service-toast span {
    flex: 1 1 auto;
    font-size: 24px;
    font-weight: 500;
}

.sales-service-toast__close {
    border: 0;
    background: transparent;
    color: #30343a;
    font-size: 24px;
    line-height: 1;
}

.sales-invoice-view[hidden] {
    display: none;
}

.sales-invoice-view {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #111827;
    overflow: hidden;
}

.sales-invoice-view__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 76px;
    padding: 0 24px;
    border-bottom: 1px solid #edf1f6;
}

.sales-invoice-view__header h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
}

.sales-invoice-view__close {
    justify-self: end;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 30px;
    line-height: 1;
}

.sales-invoice-view__body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 32vw);
    overflow: hidden;
}

.sales-invoice-view__left {
    position: relative;
    min-width: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 44px 96px;
}

.sales-invoice-paper {
    width: min(560px, 100%);
    padding: 34px 30px 28px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
}

.sales-invoice-paper__brand {
    text-align: center;
    font-size: 14px;
}

.sales-invoice-paper__logo {
    width: 82px;
    height: 82px;
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
    font-size: 42px;
}

.sales-invoice-paper__brand strong,
.sales-invoice-paper__meta strong {
    display: block;
    font-size: 16px;
}

.sales-invoice-paper__brand span {
    display: block;
    margin-top: 12px;
    line-height: 1.35;
}

.sales-invoice-paper__meta {
    margin: 24px 0 26px;
    text-align: center;
    font-size: 14px;
}

.sales-invoice-paper__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 26px 120px;
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
    font-size: 14px;
}

.sales-invoice-paper__item strong,
.sales-invoice-paper__item span:last-child {
    font-weight: 700;
}

.sales-invoice-paper__item small {
    display: block;
    margin-top: 3px;
    line-height: 1.25;
}

.sales-invoice-paper__totals {
    margin-top: 18px;
    border-top: 2px solid #111827;
    border-bottom: 1px solid #d9dee8;
    padding: 6px 0 20px;
}

.sales-invoice-paper__totals div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px 120px;
    gap: 10px;
    align-items: center;
    font-size: 15px;
    line-height: 1.55;
}

.sales-invoice-paper__totals div span:first-child {
    grid-column: 1;
    font-weight: 700;
}

.sales-invoice-paper__totals div strong {
    grid-column: 3;
    text-align: right;
}

.sales-invoice-paper__totals div::before {
    content: "Rp";
    grid-column: 2;
}

.sales-invoice-paper__footer {
    margin-top: 22px;
    padding-top: 18px;
    text-align: center;
    font-size: 14px;
}

.sales-invoice-floating-actions {
    position: absolute;
    right: 24px;
    bottom: 28px;
    display: grid;
    gap: 16px;
}

.sales-invoice-floating-actions button,
.sales-invoice-share button i {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f5f6f8;
    color: #5c6573;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
    font-size: 24px;
}

.sales-invoice-view__right {
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 24px 24px;
    border-left: 1px solid #edf1f6;
    overflow: auto;
}

.sales-invoice-view__right h3 {
    align-self: flex-start;
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.sales-invoice-status {
    margin-top: auto;
    min-width: 112px;
    padding: 12px 24px;
    border: 1px solid #6dc7d1;
    border-radius: 999px;
    color: #63c0c9;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.sales-invoice-status.is-unpaid {
    border-color: #d18a2e;
    color: #c08028;
}

.sales-invoice-status.is-voided {
    border-color: #c9d1db;
    color: #6e7887;
}

.sales-invoice-meta {
    margin-top: 34px;
    color: #687386;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
}

.sales-invoice-share {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: auto;
}

.sales-invoice-share button {
    border: 0;
    background: transparent;
    color: #687386;
    font-size: 15px;
    text-align: center;
}

.sales-invoice-share button i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: none;
    font-size: 18px;
}

.sales-invoice-share button span {
    display: block;
}

.sales-invoice-actions {
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 26px;
}

.sales-invoice-actions button {
    height: 56px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #f5f7fa;
    font-weight: 800;
    font-size: 17px;
}

.sales-invoice-actions button:last-child {
    background: #ffffff;
    color: #4f84ff;
}

.sales-pagination {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 56px;
    border-top: 1px solid #edf1f6;
}

.sales-pagination button,
.sales-pagination span {
    width: 38px;
    height: 38px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-pagination span {
    background: #63b4ff;
    color: #ffffff;
    font-weight: 700;
}

.sales-pagination button {
    background: transparent;
    color: #c0c7d2;
}

.sales-pagination--services {
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
}

.sales-pagination--fixed {
    position: relative;
    z-index: 3;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    overflow-x: hidden;
    background: #ffffff;
    border-top: 1px solid #edf1f6;
}

.sales-pagination__meta,
.sales-pagination__goto {
    color: #4a5567;
    font-size: 12px;
}

.sales-pagination__select,
.sales-pagination__input,
.sales-pagination__page,
.sales-pagination__nav,
.sales-pagination__top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    width: auto !important;
    border-radius: 8px;
    font-size: 12px;
}

.sales-pagination__select,
.sales-pagination__input,
.sales-pagination__top {
    border: 1px solid #e7eef8;
    background: #f7f7f8;
    color: #111827;
}

.sales-pagination__select {
    min-width: 86px;
    gap: 8px;
    padding: 0 12px;
}

.sales-pagination__nav {
    width: 28px;
    min-width: 28px;
    color: #bcc4d1 !important;
}

.sales-pagination__page {
    min-width: 34px;
    background: #74d6aa;
    color: #ffffff !important;
    font-weight: 700;
}

.sales-pagination__input {
    min-width: 44px;
    padding: 0 12px;
    background: #f2f3f5;
    color: #111827;
}

.sales-pagination__top {
    margin-left: auto;
    min-width: 40px;
    background: #ffffff;
}

.sales-cash-header,
.sales-cashflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.sales-cash-header__info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #394657;
    font-size: 18px;
}

.sales-open-register-modal {
    border-radius: 24px;
    overflow: hidden;
}

.sales-open-register-modal__header,
.sales-open-register-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
}

.sales-open-register-modal__header {
    border-bottom: 1px solid #edf1f6;
}

.sales-open-register-modal__header h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #30343c;
}

.sales-open-register-modal__body {
    padding: 26px 32px 12px;
}

.sales-open-register-modal__body p {
    margin: 0 0 8px;
    font-size: 18px;
    color: #101828;
}

.sales-open-register-modal__hint {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 8px;
    background: #effdf7;
    color: #63cfa2;
    font-size: 15px;
    margin-bottom: 22px;
}

.sales-open-register-modal__field {
    margin-bottom: 22px;
}

.sales-open-register-modal__field label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    color: #30343c;
}

.sales-open-register-modal__field .form-control {
    min-height: 64px;
    border: 1px solid #edf1f6;
    border-radius: 12px;
    background: #f7f7f7;
    font-size: 20px;
}

.sales-open-register-modal__field textarea.form-control {
    min-height: 110px;
    font-size: 16px;
}

.sales-open-register-modal__footer {
    justify-content: center;
    gap: 22px;
    padding-top: 10px;
    padding-bottom: 30px;
}

.sales-open-register-modal__cancel,
.sales-open-register-modal__save {
    min-width: 128px;
    min-height: 64px;
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
}

.sales-open-register-modal__cancel {
    background: #f4f4f4;
    color: #202939;
}

.sales-open-register-modal__save {
    background: #74d6aa;
    color: #ffffff;
}

.sales-register-view[hidden] {
    display: none;
}

.sales-register-view {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #ffffff;
    color: #101828;
    overflow: auto;
}

.sales-register-view__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 78px;
    padding: 0 24px;
    border-bottom: 1px solid #edf1f6;
}

.sales-register-view__header h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
}

.sales-register-view__close {
    justify-self: end;
    border: 0;
    background: transparent;
    font-size: 30px;
    color: #111827;
}

.sales-register-view__body {
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 24px 120px;
}

.sales-register-view__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 700px;
    gap: 20px;
    padding: 22px;
    border: 1px solid #e7eef8;
    border-radius: 22px;
    background: #ffffff;
}

.sales-register-view__identity {
    display: flex;
    gap: 22px;
    align-items: center;
}

.sales-register-view__avatar {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #c9cfda;
    color: #ffffff;
    font-size: 34px;
}

.sales-register-view__identity-copy h3 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    color: #2d3139;
}

.sales-register-view__identity-copy p,
.sales-register-view__meta div {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.sales-register-view__totals {
    border: 1px solid #edf1f6;
    border-radius: 18px;
    overflow: hidden;
}

.sales-register-view__totals > strong {
    display: block;
    padding: 14px 18px 0;
    font-size: 18px;
}

.sales-register-view__totals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.sales-register-view__totals-grid > div {
    padding: 10px 18px 14px;
    border-left: 1px solid #edf1f6;
}

.sales-register-view__totals-grid > div:first-child {
    border-left: 0;
}

.sales-register-view__totals-grid span,
.sales-register-view__totals-grid small {
    display: block;
    text-align: right;
}

.sales-register-view__totals-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    text-align: right;
}

.sales-register-view__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 20px 0 12px;
}

.sales-register-view__tabs {
    display: flex;
    gap: 0;
}

.sales-register-view__tabs button,
.sales-register-view__actions button,
.sales-register-view__floating {
    border: 1px solid #d8dee8;
    background: #ffffff;
    color: #394657;
    border-radius: 10px;
    min-height: 56px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 700;
}

.sales-register-view__tabs button.is-active {
    background: #74d6aa;
    border-color: #74d6aa;
    color: #ffffff;
}

.sales-register-view__actions {
    display: flex;
    gap: 14px;
}

.sales-register-view__panel {
    display: none;
}

.sales-register-view__panel.is-active {
    display: block;
}

.sales-register-view__floating {
    position: fixed;
    right: 28px;
    bottom: 32px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.sales-cashflow-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 18px;
    flex: 1;
    padding: 26px 28px;
    border: 1px solid #e7eef8;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(99, 180, 255, 0.08);
}

.sales-cashflow-card__left {
    display: flex;
    align-items: center;
    gap: 22px;
}

.sales-cashflow-card__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: #f6f7f9;
    font-size: 40px;
}

.sales-cashflow-card__left h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #30343c;
}

.sales-cashflow-card__left span {
    color: #464b54;
    font-size: 15px;
}

.sales-cashflow-card__right {
    display: flex;
    align-items: stretch;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    overflow: hidden;
}

.sales-cashflow-total,
.sales-cashflow-range {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sales-cashflow-total {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 200px;
}

.sales-cashflow-total span {
    color: #30343c;
    font-size: 15px;
}

.sales-cashflow-total strong {
    font-size: 22px;
}

.sales-cashflow-range {
    border-left: 1px solid #d8dee8;
    font-size: 18px;
    font-weight: 700;
    color: #222c3b;
}

.sales-fab-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 45;
}

.sales-fab {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #63b4ff;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 14px 22px rgba(79, 132, 255, 0.24);
}

.sales-fab-menu {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.sales-fab-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sales-fab-menu__item {
    min-width: 180px;
    padding: 12px 16px;
    border: 1px solid #e7eef8;
    background: #ffffff;
    color: #31455f;
    box-shadow: 0 10px 22px rgba(77, 131, 191, 0.12);
}

.sales-agenda-modal {
    border: 0;
}

.sales-agenda-modal__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e7eef8;
}

.sales-agenda-modal__header h2 {
    margin: 0;
    justify-self: center;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
}

.sales-agenda-modal__header .btn-close {
    justify-self: end;
    font-size: 22px;
}

.sales-agenda-modal__body {
    display: grid;
    grid-template-columns: 1fr 560px;
    min-height: calc(100vh - 90px);
}

.sales-agenda-left {
    display: flex;
    flex-direction: column;
    padding: 22px 16px 0;
}

.sales-agenda-searchbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid #e7eef8;
    border-radius: 8px;
    background: #f7f9fb;
    color: #c1c7d1;
    font-size: 18px;
}

.sales-agenda-searchbar span {
    flex: 1;
}

.sales-agenda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.sales-chip {
    padding: 14px 34px;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 18px;
    font-weight: 600;
}

.sales-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 22px;
    margin-top: 12px;
}

.sales-service-card {
    display: grid;
    grid-template-columns: 95px 1fr;
    border: 1px solid #d9dfe8;
    background: #ffffff;
}

.sales-service-card__thumb {
    display: grid;
    place-items: center;
    min-height: 88px;
    background: #e0e0e0;
    font-size: 22px;
}

.sales-service-card__body {
    padding: 16px 12px;
}

.sales-service-card__body strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}

.sales-service-card__body span {
    color: #6f7580;
    font-size: 16px;
}

.sales-agenda-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding: 18px 22px;
    border-top: 1px solid #e7eef8;
}

.sales-agenda-footer__summary {
    color: #4f84ff;
    font-size: 20px;
    font-weight: 700;
}

.sales-agenda-footer__action {
    padding: 14px 26px;
    border: 0;
    border-radius: 6px;
    background: #63b4ff;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.customers-shell {
    margin-top: 0;
    height: calc(100vh - var(--topbar-h) - 30px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.customers-tabs {
    display: flex;
    justify-content: center;
    gap: 100px;
    max-width: none;
    padding: 0 var(--content-pad);
    margin: 0 calc(-1 * var(--content-pad)) 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: relative;
    top: 0;
    z-index: 55;
}

.customers-tab {
    padding: 16px 10px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
}

.customers-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.customers-panels {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 18px;
    overflow: hidden;
}

.customers-panel {
    display: none;
}

.customers-panel.is-active {
    display: block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.customers-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 54;

    background: #fff;
    padding: 14px var(--content-pad);
    margin-left: calc(-1 * var(--content-pad));
    margin-right: calc(-1 * var(--content-pad));

    border-bottom: 1px solid #e7eef8;
    box-shadow: 0 6px 12px rgba(77, 131, 191, 0.06);
}

.customers-toolbar__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customers-toolbar__group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}

.customers-toolbar__group--end {
    margin-left: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.customers-filter-disabled {
    width: clamp(140px, 16vw, 200px);
    min-width: 0;
    justify-content: center;
    color: #c4cad3;
}

.customers-filter-name {
    width: clamp(110px, 13vw, 150px);
    min-width: 0;
    justify-content: space-between;
}

.customers-table-card {
    overflow-x: auto;
}

.customers-table {
       min-width: 1110px;
}

.customers-table thead th {
    padding: 10px 6px 8px;
    border-bottom: 1px solid #e7eef8;
    color: #27384d;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customers-table tbody tr {
    border-bottom: 1px solid #e5ebf3;
}

.customers-table tbody td {
    padding: 8px 6px;
    color: #30343c;
    font-size: 13px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* EXCEPTION: kolom kiri tetap kiri */
.customers-table thead th:nth-child(1),
.customers-table thead th:nth-child(2),
.customers-table thead th:nth-child(3),
.customers-table thead th:nth-child(8),
.customers-table tbody td:nth-child(1),
.customers-table tbody td:nth-child(2),
.customers-table tbody td:nth-child(3),
.customers-table tbody td:nth-child(8) {
    text-align: center;
}

.customers-person-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.customers-person-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.customers-table thead th:first-child {
    padding-left: 58px;
}

.customers-person-cell__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f2f3f5;
    color: #71757d;
    font-size: 26px;
}

.customers-person-cell strong {
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customers-toolbar .sales-search-field {
    width: clamp(200px, 22vw, 320px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
}

.customers-toolbar .dashboard-filter {
    padding: 9px 12px;
    font-size: 13px;
}

.customers-search-field {
    min-width: 0;
}

.customers-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #2d3b52;
    font-size: 13px;
}

.customers-search-field input::placeholder {
    color: #a5b2c6;
}

.ss-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ss-dropdown-menu {
    border: 1px solid #e7eef8;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 18px 32px rgba(22, 46, 78, 0.14);
    min-width: 160px;
}

.ss-dropdown-menu--wide {
    min-width: 260px;
}

.ss-dropdown-menu .dropdown-item {
    font-size: 15px;
    padding: 10px 18px;
    color: #2a3444;
}

.ss-dropdown-menu .dropdown-item:hover,
.ss-dropdown-menu .dropdown-item:focus {
    background: #edf6ff;
    color: #2a3444;
}

.ss-dropdown-menu .dropdown-item.is-active {
    color: #63b4ff;
    font-weight: 700;
}

.staff-toolbar .dropdown .ss-dropdown-menu {
    width: 100%;
    min-width: 100%;
}

.staff-toolbar .dropdown.is-open .ss-dropdown-menu {
    display: block;
}

.customers-table thead th:nth-child(1),
.customers-table tbody td:nth-child(1) { width: 220px; }
.customers-table thead th:nth-child(2),
.customers-table tbody td:nth-child(2) { width: 140px; }
.customers-table thead th:nth-child(3),
.customers-table tbody td:nth-child(3) { width: 210px; }
.customers-table thead th:nth-child(4),
.customers-table tbody td:nth-child(4) { width: 120px; }
.customers-table thead th:nth-child(5),
.customers-table tbody td:nth-child(5) { width: 120px; }
.customers-table thead th:nth-child(6),
.customers-table tbody td:nth-child(6) { width: 170px; }
.customers-table thead th:nth-child(7),
.customers-table tbody td:nth-child(7) { width: 130px; }
.customers-table thead th:nth-child(8),
.customers-table tbody td:nth-child(8) { width: 160px; }
.customers-table thead th:nth-child(9),
.customers-table tbody td:nth-child(9) { width: 140px; }

.customers-shell {
    overflow-x: hidden;
}

/* Konten utama menjadi scroller halaman agar sidebar dan topbar tetap diam. */
.content-panel {
    overflow-x: hidden;
    overflow-y: auto;
}

.customers-status-pill {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid #f5c9d0;
    border-radius: 999px;
    background: #fff5f6;
    color: #ef4d63;
    font-size: 12px;
}

.customers-table-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #50545c;
    font-size: 14px;
}

.customers-mini-filter {
    min-width: 120px;
    justify-content: space-between;
}

.customers-mini-input {
    min-width: 76px;
    justify-content: center;
}

.customers-pagination-btn,
.customers-pagination-current {
    width: 34px;
    height: 34px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customers-pagination-btn {
    background: transparent;
    color: #c0c7d2;
}

.customers-pagination-current {
    background: #63b4ff;
    color: #ffffff;
    font-weight: 700;
}

.customers-tags-list {
    max-width: 1040px;
    margin: 40px auto 0;
    width: 100%;
}

.customers-tag-row {
    width: 100%;
    display: grid;
    grid-template-columns: 74px 1fr 50px 28px;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #e7eef8;
    background: #ffffff;
    color: #2f3948;
    text-align: left;
    border-radius: 12px;
}

.customers-tag-row__handle {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #c9cdd5;
    font-size: 32px;
}

.customers-tag-row__handle:hover {
    background: #f4f8ff;
    color: #aab4c2;
}

.customers-tag-row__name {
    font-size: 16px;
}

.customers-tag-row__count,
.customers-tag-row__arrow {
    justify-self: end;
    color: #7e8793;
    font-size: 14px;
}

.customers-fab-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 46;
}

.customers-fab {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: #63b4ff;
    color: #ffffff;
    font-size: 26px;
    box-shadow: 0 18px 30px rgba(79, 132, 255, 0.28);
}

.customers-tags-card {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.customers-tags-card .customers-tags-list {
    min-width: 760px;
    margin: 0;
    padding: 22px 12px;
}

/* Tag Pelanggan: scroll hanya di card (bukan 1 halaman) */
.customers-panel[data-customer-panel="tags"].is-active {
    overflow: hidden;
}

.customers-panel[data-customer-panel="tags"].is-active .customers-tags-card {
    max-width: 1040px;
    margin: 18px auto 0;
    height: calc(100% - 18px);
    overscroll-behavior: contain;
}

.customers-tags-card .customers-tag-row + .customers-tag-row {
    margin-top: 14px;
}

.customers-tag-row__arrow i {
    font-size: 18px;
}

.customers-tag-edit-modal {
    border: 0;
    border-radius: 16px;
}

.customers-tag-edit-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 10px;
    border-bottom: 1px solid #e7eef8;
}

.customers-tag-edit-modal__header h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 40px;
    font-weight: 800;
}

.customers-tag-edit-modal__body {
    padding: 18px 22px 10px;
}

.customers-tag-edit-modal__body label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #505a69;
}

.customers-tag-edit-modal__label {
    margin-top: 18px;
    font-weight: 700;
    color: #505a69;
}

.customers-tag-edit-list {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #e7eef8;
    border-radius: 12px;
    background: #ffffff;
}

.customers-tag-edit-empty {
    min-height: 240px;
    display: grid;
    place-items: center;
    text-align: center;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 26px;
    color: rgba(28, 45, 73, 0.55);
}

.customers-tag-edit-empty__icon {
    font-size: 50px;
    opacity: 0.5;
}

.customers-tag-edit-empty__title {
    font-size: 30px;
    font-weight: 800;
    margin-top: 8px;
}

.customers-tag-edit-empty__sub {
    font-size: 18px;
    opacity: 0.7;
    max-width: 360px;
}

.customers-tag-edit-chip {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e7eef8;
    border-radius: 10px;
    background: #ffffff;
    color: #4f84ff;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
}

.customers-tag-edit-delete {
    margin-top: 18px;
    padding: 14px 22px;
    border: 0;
    border-radius: 10px;
    background: #dc4860;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.customers-tag-edit-modal__footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px 20px;
    border-top: 1px solid #e7eef8;
    background: #ffffff;
}

.customer-modal {
    border: 0;
    background: #ffffff;
    min-height: 100vh;
}

.customer-edit-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.customer-modal__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e7eef8;
}

.customer-modal__header h2 {
    margin: 0;
    justify-self: center;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
}

.customer-modal__header .btn-close {
    justify-self: end;
    font-size: 18px;
}

.customer-edit-modal__header h2 {
    font-size: 28px;
    font-weight: 800;
}

.customer-edit-modal__tabs {
    display: flex;
    justify-content: center;
    gap: 56px;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
}

.customer-edit-modal__tab {
    padding: 14px 8px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #3b4352;
    font-size: 16px;
    font-weight: 700;
}

.customer-edit-modal__tab.is-active {
    color: #66cfb6;
    border-bottom-color: #66cfb6;
}

.customer-edit-modal__body {
    overflow-y: auto;
    padding: 24px 0 0;
}

.customer-edit-panel {
    display: none;
}

.customer-edit-panel.is-active {
    display: block;
}

.customer-edit-profile,
.customer-edit-form {
    max-width: 1160px;
    margin: 0 auto;
}

.customer-edit-profile {
    padding: 0 24px 28px;
}

.customer-edit-profile__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #e7eef8;
    border-radius: 16px 16px 0 0;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 39, 68, 0.08);
}

.customer-edit-profile__identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.customer-edit-profile__avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f1f3f7;
    color: #6b7280;
    font-size: 38px;
}

.customer-edit-profile__identity h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #222b3b;
}

.customer-edit-profile__meta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #687284;
    font-size: 14px;
}

.customer-edit-profile__shortcuts {
    display: flex;
    gap: 16px;
    align-items: center;
}

.customer-profile-shortcut {
    width: 88px;
    border: 0;
    background: transparent;
    display: grid;
    gap: 8px;
    justify-items: center;
    color: #4d5564;
    font-size: 13px;
}

.customer-profile-shortcut__icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #e7eef8;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(18, 31, 53, 0.08);
    color: #77d7c6;
    font-size: 28px;
}

.customer-profile-shortcut.is-active .customer-profile-shortcut__icon {
    border-color: #66cfb6;
    color: #66cfb6;
}

.customer-edit-profile__stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    padding: 16px 10px;
    border: 1px solid #e7eef8;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(22, 39, 68, 0.08);
}

.customer-profile-stat {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 0 10px;
    text-align: center;
}

.customer-profile-stat span {
    color: #39414f;
    font-size: 13px;
}

.customer-profile-stat strong {
    color: #263244;
    font-size: 16px;
    font-weight: 800;
}

.customer-edit-profile__section-head {
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.customer-detail-switcher {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 8px;
}

.customer-detail-switcher__btn {
    min-width: 128px;
    min-height: 50px;
    border: 0;
    background: #e9e9eb;
    color: #66686d;
    font-size: 16px;
    font-weight: 700;
}

.customer-detail-switcher__btn.is-active {
    background: #dff4ee;
    color: #55b798;
}

.customer-edit-profile__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.customer-profile-action {
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid #dce5f1;
    border-radius: 6px;
    background: #ffffff;
    color: #4d5564;
    font-size: 14px;
    font-weight: 700;
}

.customer-profile-action--primary {
    border-color: #66cfb6;
    background: #66cfb6;
    color: #ffffff;
}

.customer-agenda-modal .sales-chip {
    border: 0;
}

.customer-agenda-searchbar input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    color: #31415d;
}

.customer-agenda-service-card {
    width: 100%;
    border: 1px solid #dce6f4;
    background: #ffffff;
    text-align: left;
}

.customer-agenda-service-card.is-selected {
    border-color: #6a8af5;
    box-shadow: 0 0 0 2px rgba(106, 138, 245, 0.12);
}

.customer-agenda-service-card[hidden] {
    display: none;
}

.customer-detail-card {
    margin-top: 18px;
}

.customer-detail-card__title {
    margin-bottom: 10px;
    color: #263244;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.customer-detail-table-wrap {
    overflow-x: auto;
    border: 1px solid #e7eef8;
    border-bottom: 0;
    background: #ffffff;
}

.customer-detail-table {
    min-width: 980px;
}

.customer-detail-table__footer {
    border: 1px solid #e7eef8;
    border-top: 0;
    background: #ffffff;
}

.customer-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    color: #7e8793;
    font-size: 12px;
    font-weight: 700;
    background: #f7fafc;
}

.customer-detail-status--completed {
    border-color: #b6edf3;
    background: #ecfbff;
    color: #65cedc;
}

.customer-detail-status--new {
    border-color: #ccd2db;
    background: #f9f9fa;
    color: #79818e;
}

.customer-detail-status--cancelled {
    border-color: #f3c1cb;
    background: #fff5f6;
    color: #ef4d63;
}

.customer-edit-form {
    padding: 0 24px 30px;
}

.customer-edit-photo-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.customer-edit-photo {
    width: 154px;
    height: 154px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f1f3f7;
    color: #343a46;
    font-size: 84px;
}

.customer-toggle-row--interactive {
    position: relative;
}

.customer-marketing-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.customer-toggle-track {
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: #e6e9ef;
    position: relative;
    transition: background 0.16s ease;
}

.customer-toggle-track::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.16s ease;
}

.customer-marketing-toggle:checked + .customer-toggle-track {
    background: #5b84e6;
}

.customer-marketing-toggle:checked + .customer-toggle-track::after {
    transform: translateX(26px);
}

.customer-tag-picker-menu .dropdown-item.is-active {
    background: #eef4ff;
    color: #4f84ff;
}

.customer-delete-btn {
    margin-top: 22px;
    width: fit-content;
    padding: 14px 22px;
    border: 0;
    border-radius: 8px;
    background: #dc4860;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.customer-edit-modal__footer {
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 28px 18px;
}

.customer-modal__body {
    padding: 18px 0 0;
    background: #ffffff;
}

.customer-form-grid {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.customer-form-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.customer-form-col label,
.customer-form-col h3 {
    margin: 0;
    color: #2c3340;
    font-size: 14px;
    font-weight: 500;
}

.customer-form-col h3 {
    margin-top: 12px;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.customer-upload-box {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d6dbe4;
    background: #ffffff;
    color: #707988;
    font-size: 14px;
}

.customer-upload-box span {
    color: #63b4ff;
}

.customer-input-flat {
    border: 0;
    border-radius: 6px;
    background: #f3f5f8;
    box-shadow: none;
    font-size: 14px;
}

.customer-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 6px;
}

.customer-segmented--two {
    grid-template-columns: repeat(2, 1fr);
}

.customer-segmented button {
    min-height: 46px;
    border: 0;
    background: #f2f2f2;
    color: #66707d;
    font-size: 14px;
}

.customer-segmented button.is-active {
    background: #5b84e6;
    color: #ffffff;
}

.customer-phone-row {
    display: grid;
    grid-template-columns: 72px 1fr;
}

.customer-phone-flag {
    background: linear-gradient(180deg, #d53131 0 50%, #ffffff 50% 100%);
    border-right: 1px solid #f3f5f8;
}

.customer-counter-field {
    position: relative;
}

.customer-counter-field span {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #7e8793;
    font-size: 14px;
}

.customer-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding: 12px 18px;
    border: 0;
    background: #f3f5f8;
    color: #9ba3ae;
    font-size: 16px;
}

.customer-picker strong {
    color: #4f84ff;
}

.customer-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.customer-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    padding: 14px 18px 16px;
    background: #ffffff;
    border-top: 1px solid #e7eef8;
    position: sticky;
    bottom: 0;
}

.customer-footer-btn {
    min-width: 140px;
    padding: 12px 16px;
    border: 0;
    background: #f3f3f3;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 700;
}

.customer-footer-btn--primary {
    background: #63b4ff;
    color: #ffffff;
}

.customer-footer-btn--disabled {
    color: #b8bbc1;
}

.customer-tag-modal {
    max-width: 520px;
    margin: 0 auto;
    border: 0;
    border-radius: 16px;
}

.customer-tag-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px 10px;
}

.customer-tag-modal__header h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
}

.customer-tag-modal__body {
    padding: 0 22px 16px;
}

.customer-tag-modal__body label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.customer-tag-input {
    border: 2px solid #5b84e6;
    border-radius: 6px;
    box-shadow: none;
}

.customer-tag-delete {
    margin-top: 26px;
    padding: 12px 22px;
    border: 0;
    border-radius: 6px;
    background: #dc4860;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.customer-tag-modal__footer {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 22px 20px;
}

.customers-merge-modal,
.customers-date-modal,
.customers-import-modal {
    border: 0;
    border-radius: 16px;
}

.customers-merge-modal__header,
.customers-date-modal__header,
.customers-import-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 10px;
    border-bottom: 1px solid #e7eef8;
}

.customers-merge-modal__header h2,
.customers-date-modal__header h2,
.customers-import-modal__header h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 800;
}

.customers-merge-modal__body {
    padding: 28px 22px 10px;
}

.customers-merge-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 18px;
}

.customers-merge-empty__title {
    font-size: 40px;
    font-weight: 700;
    color: rgba(28, 45, 73, 0.46);
}

.customers-merge-empty__btn {
    padding: 12px 22px;
    font-size: 16px;
    color: #4f84ff;
    background: #ffffff;
    border-color: #cfe2ff;
}

.customers-merge-modal__footer,
.customers-date-modal__footer,
.customers-import-modal__footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 16px 22px 20px;
    border-top: 1px solid #e7eef8;
    background: #ffffff;
}

.customers-date-modal__body {
    padding: 18px 22px 8px;
}

.customers-date-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
}

.customers-date-presets {
    display: grid;
    gap: 12px;
}

.customers-date-presets__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.customers-date-preset {
    border: 1px solid #e7eef8;
    border-radius: 10px;
    background: #f6f8fb;
    padding: 14px 16px;
    font-weight: 700;
    color: #1f2937;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.customers-date-preset.is-active {
    border-color: #4f7fe8;
    background: #4f7fe8;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(79, 127, 232, 0.18);
}

.customers-date-picker {
    border: 1px solid #e7eef8;
    border-radius: 14px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 12px 22px rgba(17, 44, 78, 0.1);
}

.customers-date-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.customers-date-fields label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #505a69;
    margin-bottom: 6px;
}

.customers-date-input {
    border-radius: 10px;
    border-color: #e7eef8;
    background: #f8fbff;
    padding: 12px 14px;
    font-size: 14px;
}

.customers-date-range-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.customers-date-inline .flatpickr-calendar {
    border: 1px solid #e7eef8;
    box-shadow: none;
    margin: 0 auto;
}

.customers-date-inline {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 420px;
    padding-top: 6px;
}

.customers-date-apply {
    color: #4f84ff;
    background: #ffffff;
    border: 1px solid #cfe2ff;
}

.customers-import-modal__body {
    padding: 28px 22px 8px;
}

.customers-import-hero {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 16px;
}

.customers-import-hero__icons {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.customers-import-file {
    width: 68px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid #e7eef8;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #6f7a89;
    background: #ffffff;
}

.customers-import-hero p {
    max-width: 720px;
    margin: 0;
    color: #606a79;
    font-size: 16px;
}

.customers-import-link {
    color: #4f84ff;
    text-decoration: none;
}

.customers-import-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

.customers-import-action {
    min-width: 200px;
    justify-content: center;
}

.customers-import-upload input {
    display: none;
}

.customers-import-meta {
    color: #7c8798;
    font-size: 14px;
}

.customers-import-btn {
    background: #63b4ff;
    color: #ffffff;
}

.customers-import-btn:disabled {
    opacity: 0.55;
}

.staff-shell {
    position: relative;
}

.staff-tabs {
    display: flex;
    justify-content: center;
    gap: 120px;
    max-width: none;
    padding: 0 var(--content-pad);
    margin: 0 calc(-1 * var(--content-pad)) 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 55;
}

.staff-tab {
    padding: var(--tab-pad-y) 10px calc(var(--tab-pad-y) + 2px);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #000000;
    font-size: var(--tab-font);
    font-weight: 700;
}

.staff-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.staff-panels {
    padding-top: 18px;
}

.staff-panel {
    display: none;
}

.staff-panel.is-active {
    display: block;
}

.staff-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.staff-toolbar__group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.staff-toolbar__group--end {
    margin-left: auto;
}

.staff-mode-switch {
    gap: 0;
    padding: 4px;
    border-radius: 9px;
    background: #f4f6f9;
}

.staff-mode-btn {
    min-width: 84px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #687281;
    font-size: 13px;
}

.staff-mode-btn.is-active {
    background: #63b4ff;
    color: #ffffff;
}

.staff-panel[data-staff-panel="work"] .staff-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 330px));
    justify-content: start;
    align-items: center;
    gap: 12px;
}

.staff-panel[data-staff-panel="work"] .staff-toolbar__group:not(.staff-mode-switch) {
    display: contents;
}

.staff-panel[data-staff-panel="work"] .staff-mode-switch,
.staff-panel[data-staff-panel="work"] .dropdown,
.staff-panel[data-staff-panel="work"] .dashboard-filter {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
}

.staff-panel[data-staff-panel="work"] .staff-mode-switch {
    height: 52px;
}

.staff-panel[data-staff-panel="work"] .staff-mode-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    font-size: 14px;
}

.staff-toolbar .dashboard-filter,
.staff-toolbar .sales-search-field {
    min-height: 38px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
}

.staff-toolbar .dashboard-filter--shop {
    min-width: 290px;
}

.staff-toolbar .dashboard-filter--wide {
    min-width: 260px;
}

.staff-toolbar .sales-search-field {
    min-width: 240px;
}

.staff-toolbar .sales-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #263244;
    font: inherit;
}

.staff-toolbar .sales-search-field input::placeholder {
    color: #aeb8c8;
}

.staff-range-filter {
    min-width: 300px;
    justify-content: space-between;
}

.staff-range-filter {
    position: relative;
}

.staff-range-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}

.staff-range-filter span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.staff-schedule-view {
    display: none;
}

.staff-schedule-view.is-active {
    display: block;
}

.staff-schedule-card,
.staff-summary-card,
.staff-member-row,
.staff-commission-table {
    border: 1px solid #e7eef8;
    background: #ffffff;
}

.staff-schedule-card,
.staff-commission-table {
    overflow: hidden;
}

.staff-schedule-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    min-width: 0;
}

/* Chrome scroll styling (mendekati scrollbar abu-abu di contoh) */
.staff-schedule-scroll::-webkit-scrollbar {
    height: 12px;
}

.staff-schedule-scroll::-webkit-scrollbar-track {
    background: #f0f2f5;
    border-radius: 999px;
}

.staff-schedule-scroll::-webkit-scrollbar-thumb {
    background: #cfd6de;
    border-radius: 999px;
}

.flatpickr-day.is-hover-week {
    background: #eef6ff !important;
    border-color: transparent !important;
    color: #1c2d49 !important;
}

.staff-schedule-card__head {
    border-bottom: 1px solid #e7eef8;
}

.staff-schedule-card__head--week {
    /* legacy */
}

.staff-schedule-card__head--month {
    /* legacy */
}

.staff-schedule-days-grid {
    display: grid;
    width: max-content;
    min-width: 100%;
}

.staff-schedule-days-grid--week {
    grid-template-columns: repeat(7, 180px);
}

.staff-week-table {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

.staff-month-table {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

.staff-week-right,
.staff-month-right {
    min-width: 0;
}

.staff-week-left {
    border-right: 1px solid #e7eef8;
}

.staff-month-left {
    border-right: 1px solid #e7eef8;
}

.staff-week-left__row {
    height: 110px;
    display: flex;
    align-items: center;
}

.staff-week-left__head {
    display: flex;
    justify-content: center; /* horizontal tengah */
    align-items: center;     /* vertical tengah */
    padding-left: 0;
    text-align: center;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
}

.staff-week-right__head {
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
}

.staff-week-left__head,
.staff-week-right__head {
    height: 52px;
    display: flex;
    align-items: center;
}

.staff-month-left__head,
.staff-month-right__head {
    height: 46px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
}

.staff-month-left__body,
.staff-month-right__body {
    background: #ffffff;
}

.staff-month-left__row,
.staff-month-days-row {
    border-bottom: 1px solid #edf1f6;
}

.staff-month-left__row {
    min-height: 84px;
    display: flex;
    align-items: stretch;
}

.staff-month-left__row .staff-schedule-person {
    padding-top: 14px;
    padding-bottom: 14px;
}

.staff-week-left__row,
.staff-week-days-row {
    border-bottom: 1px solid #edf1f6;
}

.staff-week-left__row .staff-schedule-person {
    padding-top: 14px;
    padding-bottom: 14px;
}

.staff-week-days-row .staff-schedule-cell {
    min-height: 88px;
}

.staff-schedule-card__staff-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f84ff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 0;
}

.staff-schedule-day,
.staff-schedule-month-day {
    position: relative;
    padding: 10px 8px 8px;
    text-align: center;
    color: #2d333d;
}

.staff-schedule-day strong {
    display: block;
    font-size: 13px;
}

.staff-schedule-day span {
    display: block;
    margin-top: 4px;
    color: #5c6675;
    font-size: 12px;
}

.staff-schedule-day.is-today::before,
.staff-schedule-month-day.is-today::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 24px;
    right: 24px;
    height: 8px;
    border-radius: 999px;
    background: #4f84ff;
}

.staff-schedule-month-day {
    padding-top: 16px;
    font-size: 12px;
    font-weight: 700;
}

.staff-schedule-row {
    border-bottom: 1px solid #edf1f6;
}

.staff-schedule-row--week {
    /* legacy */
}

.staff-schedule-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
}

.staff-schedule-person__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f2f3f5;
    color: #71757d;
    font-size: 24px;
}

.staff-schedule-person__avatar--initials {
    background: #d3d8e0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.staff-schedule-person strong {
    font-size: 15px;
    font-weight: 700;
}

.staff-schedule-cell {
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 12px;
}

.staff-schedule-add {
    border: 0;
    background: transparent;
    color: #6e7580;
    font-size: 28px;
}

.staff-schedule-hours {
    color: #26384d;
    font-size: 14px;
}

.staff-schedule-cell.has-bookings {
    align-content: center;
    gap: 8px;
    padding: 10px;
}

.staff-booking-list {
    display: grid;
    width: 100%;
    gap: 6px;
}

.staff-booking-item {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #b9dcff;
    border-radius: 8px;
    background: linear-gradient(180deg, #eef8ff 0%, #dff1ff 100%);
    color: #17324d;
    text-align: left;
    box-shadow: 0 8px 16px rgba(99, 180, 255, 0.14);
}

.staff-booking-item strong {
    color: #2f8fe6;
    font-size: 12px;
    font-weight: 800;
}

.staff-booking-item span {
    color: #17324d;
    font-size: 12px;
    font-weight: 800;
}

.staff-booking-item small {
    color: #5f7894;
    font-size: 11px;
    line-height: 1.3;
}

.staff-booking-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}

.staff-booking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(47, 143, 230, 0.28);
}

.staff-schedule-days-grid--month {
    display: grid;
    gap: 3px;
    padding: 8px 6px 6px;
    width: max-content;
    min-width: 100%;
}

.staff-month-cell {
    width: 100%;
    min-height: 40px;
    border-radius: 6px;
    background: #dff5ff;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}

.staff-month-cell.is-filled {
    background: #63b4ff;
    cursor: pointer;
}

.staff-month-cell:hover {
    background: #eaf6ff;
}

.staff-month-cell.is-filled:hover {
    background: #4f96ee;
}

.staff-month-cell .staff-schedule-add {
    border: 0;
    background: transparent;
    color: #6e7580;
    font-size: 20px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.staff-month-cell:hover .staff-schedule-add {
    opacity: 1;
    transform: scale(1);
}

.staff-month-cell.is-filled .staff-schedule-add,
.staff-month-cell.is-filled:hover .staff-schedule-add {
    display: none;
}

.staff-month-cell.is-filled .staff-work-selected-hours,
.staff-month-cell.is-filled .staff-schedule-hours {
    display: none;
}

.staff-schedule-month-day {
    position: relative;
    justify-content: center;
    padding: 12px 10px 10px;
    text-align: center;
    color: #2d333d;
    font-size: 13px;
    font-weight: 700;
}

.staff-schedule-month-day strong {
    display: block;
    font-size: 14px;
}

.staff-schedule-month-day.is-today::before {
    left: 20px;
    right: 20px;
}

.staff-schedule-card__footer {
    padding: 0 0 12px;
}

.staff-schedule-scrollbar {
    height: 10px;
    margin: 0 0 12px;
    background: linear-gradient(90deg, #cfd6de 0 82%, #f0f2f5 82% 100%);
}

.staff-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 42px;
    padding: 0 56px;
}

.staff-pagination button,
.staff-pagination span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
}

.staff-pagination button {
    background: transparent;
    color: #b5bfcd;
    font-size: 18px;
}

.staff-pagination span {
    background: #63b4ff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
}

.staff-pagination__caret {
    border: 1px solid #d9e2ee !important;
    border-radius: 6px;
    color: #6f7b89 !important;
    margin-left: 12px;
}

.staff-month-popover {
    position: fixed;
    z-index: 2000;
    width: 430px;
    max-width: calc(100vw - 20px);
    padding: 14px 14px 12px;
    background: #ffffff;
    border: 1px solid #e7eef8;
    border-radius: 14px;
    box-shadow: 0 18px 32px rgba(22, 46, 78, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.staff-month-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.staff-month-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.staff-month-popover__nav {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: #f4f6f9;
    color: #5a6576;
}

.staff-month-popover__title {
    flex: 1 1 auto;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
}

.staff-month-popover__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    padding: 8px 4px 4px;
}

.staff-month-popover__month {
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 8px 4px;
    border-radius: 10px;
}

.staff-month-popover__month:hover,
.staff-month-popover__month:focus-visible {
    background: #edf6ff;
    color: #2a3444;
}

.staff-month-popover__month.is-active {
    color: #63b4ff;
    font-weight: 800;
}

.staff-summary-card {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    margin-bottom: 26px;
    padding: 34px 40px;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(99, 180, 255, 0.08);
}

.staff-summary-card__left,
.staff-summary-card__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.staff-summary-card__right {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 28px;
    border-left: 1px solid #e7eef8;
}

.staff-summary-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #d8d8d8;
    font-size: 30px;
}

.staff-summary-card strong {
    display: block;
    color: #1b1e23;
    font-size: 24px;
    font-weight: 700;
}

.staff-summary-card span {
    color: #737780;
    font-size: 18px;
}

.staff-filter-disabled {
    min-width: 290px;
    justify-content: center;
    color: #c4cad3;
}

.staff-member-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.staff-member-row {
    display: grid;
    grid-template-columns: 1.35fr 1.5fr 1fr 0.8fr 1.3fr;
    gap: 20px;
    align-items: center;
    padding: 18px 16px;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.staff-member-row:hover,
.staff-member-row:focus-visible {
    border-color: #9dc9ff;
    box-shadow: 0 12px 24px rgba(79, 132, 255, 0.12);
    outline: 0;
    transform: translateY(-1px);
}

.staff-member-cell {
    color: #353a42;
    font-size: 18px;
}

.staff-member-cell--person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.staff-member-cell--person strong {
    font-size: 22px;
}

.staff-member-cell--link {
    color: #4f84ff;
}

.staff-member-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid #bcefff;
    color: #5b6574;
    font-size: 28px;
    overflow: hidden;
}

.staff-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-search-short {
    min-width: 310px;
}

/* Anggota Staf: compact sizing + single row toolbar */
.staff-panel[data-staff-panel="members"] .staff-summary-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
    padding: 22px 26px;
    border-radius: 16px;
}

.staff-panel[data-staff-panel="members"] .staff-summary-card__left,
.staff-panel[data-staff-panel="members"] .staff-summary-card__right {
    gap: 14px;
}

.staff-panel[data-staff-panel="members"] .staff-summary-card__right {
    padding-left: 26px;
}

.staff-panel[data-staff-panel="members"] .staff-summary-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
}

.staff-panel[data-staff-panel="members"] .staff-summary-card strong {
    font-size: 22px;
}

.staff-panel[data-staff-panel="members"] .staff-summary-card span {
    font-size: 14px;
}

.staff-toolbar--members {
    display: grid;
    grid-template-columns: 250px 140px 126px 140px 150px minmax(210px, 260px);
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    z-index: 8;
}

.staff-toolbar--members .staff-toolbar__group {
    display: contents;
}

.staff-toolbar--members .staff-toolbar__group--end {
    display: contents;
}

.staff-toolbar--members .dashboard-filter,
.staff-toolbar--members .sales-search-field,
.staff-toolbar--members .dropdown {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
}

.staff-toolbar--members .dashboard-filter,
.staff-toolbar--members .sales-search-field {
    min-height: 52px;
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
}

.staff-toolbar--members .staff-filter-disabled {
    justify-content: center;
}

.staff-toolbar--members .sales-search-field input {
    min-width: 0;
}

.staff-export-menu .dropdown-item,
.staff-name-menu .dropdown-item {
    min-height: 50px;
    font-size: 16px;
}

.staff-panel[data-staff-panel="members"] .staff-member-list {
    gap: 10px;
}

.staff-panel[data-staff-panel="members"] .staff-member-row {
    grid-template-columns: 1.25fr 1.35fr 1fr 0.8fr 1.15fr;
    gap: 14px;
    padding: 12px 12px;
}

.staff-panel[data-staff-panel="members"] .staff-member-cell {
    font-size: 14px;
}

.staff-panel[data-staff-panel="members"] .staff-member-cell--person {
    gap: 12px;
}

.staff-panel[data-staff-panel="members"] .staff-member-cell--person strong {
    font-size: 18px;
}

.staff-panel[data-staff-panel="members"] .staff-member-avatar {
    width: 48px;
    height: 48px;
    border-width: 2px;
    font-size: 22px;
}

/* Komisi: toolbar satu baris + table-only horizontal/vertical scroll */
.staff-toolbar--commission {
    display: grid;
    grid-template-columns: 172px 172px minmax(250px, 340px) minmax(220px, 1fr);
    align-items: center;
    justify-content: start;
    justify-items: stretch;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.staff-toolbar--commission .staff-toolbar__group {
    display: contents;
}

.staff-toolbar--commission .staff-toolbar__group--end {
    display: contents;
    margin-left: 0;
}

.staff-toolbar--commission .dashboard-filter--shop,
.staff-toolbar--commission .js-staff-commission-staff-filter,
.staff-toolbar--commission .dashboard-filter--wide,
.staff-search-short--commission,
.staff-toolbar--commission .dropdown {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    flex: none;
}

.staff-toolbar--commission .dashboard-filter--wide {
    overflow: hidden;
    max-width: 340px;
}

.staff-toolbar--commission .dashboard-filter--wide span,
.staff-search-short--commission span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-commission-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #e7eef8;
    background: #ffffff;
    overflow: hidden;
}

.staff-commission-table__scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    height: 460px;
    max-height: 460px;
    scrollbar-gutter: stable;
}

.staff-commission-table__footer {
    border-top: 1px solid #edf1f6;
}

.staff-commission-grid {
    width: max-content;
    min-width: 1460px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.staff-panel.is-active,
.staff-shell,
.staff-panels {
    min-width: 0;
}

.staff-commission-grid thead th,
.staff-commission-grid tbody td {
    white-space: nowrap;
    background: #ffffff;
}

.staff-commission-grid thead th,
.staff-commission-grid tbody td {
    padding: 18px 18px;
    font-size: 15px;
    border-bottom: 1px solid #edf1f6;
    border-right: 1px solid #edf1f6;
    text-align: left !important;
    vertical-align: middle;
}

.staff-commission-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 16px;
    font-weight: 800;
}

.staff-commission-grid tbody td {
    min-height: 88px;
    color: #3b4048;
}

.staff-commission-grid thead th:nth-child(1),
.staff-commission-grid tbody td:nth-child(1) { width: 150px; }

.staff-commission-grid thead th:nth-child(2),
.staff-commission-grid tbody td:nth-child(2) { width: 180px; }

.staff-commission-grid thead th:nth-child(3),
.staff-commission-grid tbody td:nth-child(3) { width: 260px; }

.staff-commission-grid thead th:nth-child(4),
.staff-commission-grid tbody td:nth-child(4) { width: 180px; }

.staff-commission-grid thead th:nth-child(5),
.staff-commission-grid tbody td:nth-child(5) { width: 270px; }

.staff-commission-grid thead th:nth-child(6),
.staff-commission-grid tbody td:nth-child(6) { width: 120px; }

.staff-commission-grid thead th:nth-child(7),
.staff-commission-grid tbody td:nth-child(7) { width: 180px; }

.staff-commission-grid thead th:nth-child(8),
.staff-commission-grid tbody td:nth-child(8) { width: 180px; }

.staff-commission-grid thead th:nth-child(9),
.staff-commission-grid tbody td:nth-child(9) { width: 150px; }

.staff-commission-grid thead th:nth-child(10),
.staff-commission-grid tbody td:nth-child(10) { width: 130px; }

.staff-commission-grid thead th:last-child,
.staff-commission-grid tbody td:last-child {
    border-right: 0;
}

.staff-commission-col-invoice {
    position: sticky !important;
    left: 0;
    z-index: 4;
    box-shadow: 1px 0 0 #e7eef8;
}

.staff-commission-grid thead .staff-commission-col-invoice {
    z-index: 5;
}

.staff-commission-col-actions {
    position: sticky !important;
    right: 0;
    z-index: 4;
    box-shadow: -1px 0 0 #e7eef8;
}

.staff-commission-grid thead .staff-commission-col-actions {
    z-index: 5;
}

.staff-commission-invoice {
    font-weight: 800;
}

.staff-commission-invoice.is-paid {
    color: #57b48d;
}

.staff-commission-invoice.is-draft {
    color: #5a84f1;
}

.staff-commission-person {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5a84f1;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.staff-commission-staff-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.staff-commission-staff-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 27, 45, 0.3);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.staff-commission-staff-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #ffffff;
    box-shadow: -16px 0 36px rgba(19, 27, 45, 0.14);
    transform: translateX(100%);
    transition: transform 0.18s ease;
}

.staff-commission-staff-drawer.is-open .staff-commission-staff-drawer__backdrop {
    opacity: 1;
}

.staff-commission-staff-drawer.is-open .staff-commission-staff-drawer__panel {
    transform: translateX(0);
}

.staff-commission-staff-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #ebf0f8;
}

.staff-commission-staff-drawer__head h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    font-weight: 800;
}

.staff-commission-staff-drawer__body {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    padding: 20px 24px;
    min-height: 0;
}

.staff-commission-staff-drawer__search {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 52px;
    height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 0 18px 0 20px;
    border: 1px solid #e1e9f6;
    border-radius: 14px;
    background: #f8fbff;
    color: #b8c4d8;
    box-sizing: border-box;
}

.staff-commission-staff-drawer__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #25324a;
    font-size: 16px;
    outline: none;
}

.staff-commission-staff-drawer__search input::placeholder {
    color: #b8c4d8;
}

.staff-commission-staff-drawer__search i {
    font-size: 16px;
}

.staff-commission-staff-drawer__list {
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
    min-height: 0;
}

.staff-commission-staff-drawer__option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #e2e8f4;
    border-radius: 12px;
    background: #f8fbff;
    color: #243047;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.staff-commission-staff-drawer__option i {
    opacity: 0;
    color: #ffffff;
    transition: opacity 0.16s ease;
}

.staff-commission-staff-drawer__option.is-active {
    border-color: #5a84f1;
    background: #5a84f1;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(90, 132, 241, 0.18);
}

.staff-commission-staff-drawer__option.is-active i {
    opacity: 1;
}

.staff-commission-staff-drawer__empty {
    padding: 18px 16px;
    border-radius: 14px;
    background: #f8fbff;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
}

.staff-commission-staff-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 24px 18px;
    border-top: 1px solid #ebf0f8;
    background: #ffffff;
}

.staff-commission-staff-drawer__footer .customer-footer-btn {
    min-height: 52px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.staff-commission-staff-drawer__footer .staff-save-btn {
    background: #5a84f1;
    color: #ffffff;
}

.staff-commission-action {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #eff6ff;
    color: #5a84f1;
    font-size: 18px;
}

.staff-commission-action:hover {
    background: #dcecff;
}

.staff-commission-action.is-paid {
    color: #57b48d;
    background: #effaf4;
}

.staff-commission-action.is-paid:hover {
    background: #dcf4e6;
}

.staff-commission-action.is-draft {
    color: #5a84f1;
    background: #eff6ff;
}

.staff-commission-adjust-dialog {
    max-width: 980px;
}

.staff-commission-adjust-modal {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 54px rgba(18, 31, 53, 0.2);
}

.staff-commission-adjust__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
}

.staff-commission-adjust__head h2 {
    margin: 0;
    color: #30343c;
    font-size: 26px;
    font-weight: 800;
}

.staff-commission-adjust__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #7aaeff 0%, #5a84f1 100%);
    color: #ffffff;
}

.staff-commission-adjust__hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.staff-commission-adjust__avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #3f4650;
    font-size: 28px;
    flex: 0 0 auto;
}

.staff-commission-adjust__avatar--small {
    width: 44px;
    height: 44px;
    font-size: 22px;
    background: #f3f6fb;
}

.staff-commission-adjust__hero-copy {
    display: grid;
    gap: 1px;
}

.staff-commission-adjust__hero-copy strong {
    font-size: 18px;
    font-weight: 800;
}

.staff-commission-adjust__hero-copy div,
.staff-commission-adjust__hero-copy span,
.staff-commission-adjust__hero-copy small {
    color: #ffffff;
    font-size: 14px;
}

.staff-commission-adjust__hero-copy small {
    font-size: 13px;
    opacity: 0.96;
}

.staff-commission-adjust-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 58px;
    width: min(360px, 100%);
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    flex: 0 0 auto;
}

.staff-commission-adjust-input input {
    width: 100%;
    border: 0;
    padding: 0 18px;
    background: #ffffff;
    color: #20242c;
    font-size: 17px;
}

.staff-commission-adjust-input button {
    border: 0;
    background: #eef3ff;
    color: #7a7f89;
    font-size: 16px;
}

.staff-commission-adjust-input button.is-active {
    background: #5a84f1;
    color: #ffffff;
}

.staff-commission-adjust__body {
    display: grid;
    gap: 14px;
    padding: 18px 24px 14px;
    background: #ffffff;
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.staff-commission-adjust-group {
    display: grid;
    gap: 10px;
}

.staff-commission-adjust-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 0 22px;
    border: 0;
    border-radius: 32px;
    background: #f2f5fb;
    color: #41464f;
    font-size: 15px;
}

.staff-commission-adjust-group__label,
.staff-commission-adjust-group__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.staff-commission-adjust-group__meta i {
    transition: transform 0.16s ease;
}

.staff-commission-adjust-group__toggle.is-open .staff-commission-adjust-group__meta i {
    transform: rotate(180deg);
}

.staff-commission-adjust-group__list {
    display: grid;
    gap: 8px;
}

.staff-commission-adjust-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) minmax(260px, 360px);
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.staff-commission-adjust-row__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.staff-commission-adjust-row__copy,
.staff-commission-adjust-row__item {
    display: grid;
    gap: 2px;
}

.staff-commission-adjust-row__copy strong,
.staff-commission-adjust-row__item strong {
    color: #30343c;
    font-size: 15px;
    font-weight: 700;
}

.staff-commission-adjust-row__copy span,
.staff-commission-adjust-row__item span {
    color: #6b7280;
    font-size: 13px;
}

.staff-commission-adjust__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 12px 24px 22px;
    background: #ffffff;
}

.staff-commission-adjust__footer .customer-footer-btn {
    min-height: 54px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
}

.staff-commission-adjust__footer .staff-save-btn {
    background: #5a84f1;
    color: #ffffff;
}

.staff-active-pill {
    display: inline-flex;
    padding: 10px 22px;
    border: 1px solid #bde7f6;
    border-radius: 999px;
    background: #eefbff;
    color: #57b2d8;
    font-size: 16px;
}

.staff-active-pill.is-inactive {
    border-color: #d9dee7;
    background: #f5f7fb;
    color: #7f8794;
}

.staff-attendance-edit {
    color: #4f84ff;
    font-size: 28px;
}

.staff-commission-table {
    overflow: hidden;
}

.staff-fab-group {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 46;
    display: none;
    flex-direction: column;
    gap: 14px;
    align-items: end;
}

.staff-secondary-fab {
    width: 74px;
    height: 74px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #30343c;
    font-size: 34px;
    box-shadow: 0 14px 26px rgba(77, 131, 191, 0.14);
}

.staff-modal {
    border: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.staff-modal__tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 760px;
    margin: 0 auto;
    border-bottom: 1px solid #e7eef8;
}

.staff-modal__tab {
    padding: 18px 10px;
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: #31353d;
    font-size: 16px;
    font-weight: 700;
}

.staff-modal__tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.staff-new-panel {
    display: none;
}

.staff-new-panel.is-active {
    display: block;
}

.staff-new-narrow {
    width: min(860px, calc(100% - 48px));
    margin: 0 auto;
}

.staff-location-card,
.staff-new-commission-card,
.staff-commission-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
    padding: 18px 22px;
    border: 1px solid #e7eef8;
    border-radius: 12px;
    background: #ffffff;
}

.staff-location-card > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    align-items: center;
}

.staff-location-card strong,
.staff-new-commission-card strong {
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.staff-location-card small,
.staff-new-commission-card small {
    display: block;
    color: #7b8494;
    font-size: 13px;
}

.staff-location-icon {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f3f7fb;
    color: #334155;
    font-size: 20px;
}

.staff-check input,
.staff-service-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.staff-check span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid #cdd7e5;
    border-radius: 7px;
    background: #ffffff;
}

.staff-check input:checked + span {
    border-color: #63b4ff;
    background: #63b4ff;
}

.staff-check input:checked + span::after {
    content: "";
    width: 8px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.staff-service-group {
    margin-top: 18px;
    border: 1px solid #e7eef8;
    border-radius: 12px;
    overflow: hidden;
}

.staff-service-group h3 {
    margin: 0;
    padding: 14px 18px;
    background: #f8fbff;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

.staff-service-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 18px;
    border-top: 1px solid #edf2f8;
    color: #2f3744;
    font-weight: 700;
    cursor: pointer;
}

.staff-service-check--all {
    border: 1px solid #e7eef8;
    border-radius: 12px;
}

.staff-service-check span::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-flex;
    margin-right: 12px;
    vertical-align: middle;
    border: 2px solid #cdd7e5;
    border-radius: 6px;
    background: #ffffff;
}

.staff-service-check input:checked + span::before {
    border-color: #63b4ff;
    background: #63b4ff;
    box-shadow: inset 0 0 0 4px #63b4ff;
}

.staff-service-check input:checked + span::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 50%;
    width: 7px;
    height: 13px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: translateY(-58%) rotate(45deg);
}

.staff-new-commission-card {
    margin-bottom: 18px;
}

.staff-new-commission-card button,
.staff-commission-service-row button {
    border: 0;
    background: transparent;
    color: #4f84ff;
    font-weight: 800;
}

.staff-commission-service-list {
    display: grid;
    gap: 10px;
}

.staff-commission-editor {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(18, 28, 42, 0.42);
}

.staff-commission-editor[hidden] {
    display: none;
}

.staff-commission-editor__box {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(18, 28, 42, 0.24);
}

.staff-commission-editor__head,
.staff-commission-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #e7eef8;
}

.staff-commission-editor__head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}

.staff-commission-editor__head button {
    border: 0;
    background: transparent;
    font-size: 18px;
}

.staff-commission-editor__services {
    padding: 6px 22px 0;
}

.staff-commission-editor__controls {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    padding: 18px 22px;
}

.staff-commission-editor__footer {
    justify-content: flex-end;
    border-top: 1px solid #e7eef8;
    border-bottom: 0;
}

.staff-modal .customer-modal__header h2 {
    font-size: 24px;
}

.staff-modal .customer-modal__header {
    flex: 0 0 auto;
}

.staff-modal .customer-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 32px;
}

.staff-modal .customer-modal__footer {
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    justify-content: flex-end;
    gap: 16px;
    padding: 14px 24px;
}

.staff-modal .customer-footer-btn {
    min-width: 150px;
    min-height: 52px;
    border-radius: 0;
}

.staff-modal .staff-save-btn {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-edit-delete {
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    border: 1px solid #ffd0d8;
    background: #fff5f7;
    color: #df4361;
    font-size: 15px;
    font-weight: 800;
}

.staff-edit-delete:hover {
    background: #ffe8ed;
}

.staff-modal__tab.is-active {
    color: #77abf7;
    border-bottom-color: #77abf7;
}

.staff-native-date {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.staff-photo-avatar img,
.staff-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.staff-new-panel[data-staff-new-panel="locations"] .staff-new-narrow {
    width: min(854px, calc(100% - 48px));
    margin: 0 auto;
    padding-top: 70px;
}

.staff-new-panel[data-staff-new-panel="locations"] .staff-location-search,
.staff-new-panel[data-staff-new-panel="locations"] .staff-location-row {
    width: 100%;
}

.staff-location-intro {
    margin: 0 0 30px;
    color: #111827;
    font-size: 17px;
}

.staff-location-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(600px, 100%);
    height: 56px;
    padding: 0 16px 0 22px;
    border-radius: 4px;
    background: #f1f2f4;
    color: #aeb6c3;
}

.staff-location-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 16px;
}

.staff-location-search input::placeholder {
    color: #bec5d0;
}

.staff-location-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(600px, 100%);
    min-height: 56px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #e8edf5;
    color: #111827;
    font-size: 17px;
    cursor: pointer;
}

.staff-location-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.staff-location-row i {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #d7dde8;
    border-radius: 3px;
    background: #ffffff;
}

.staff-location-row input:checked + i,
.staff-location-row input:checked ~ i {
    border-color: #4f7fe8;
    background: #4f7fe8;
}

.staff-location-row input:checked + i::after,
.staff-location-row input:checked ~ i::after {
    content: "";
    width: 8px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.staff-service-check input:checked + span::before,
.staff-check input:checked + span {
    border-color: #4f7fe8;
    background: #4f7fe8;
    box-shadow: inset 0 0 0 4px #4f7fe8;
}

.staff-commission-setting {
    width: min(600px, 100%);
    margin: 0 auto 28px;
}

.staff-commission-setting > label {
    display: block;
    margin-bottom: 4px;
    color: #111827;
    font-size: 15px;
}

.staff-commission-setting > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 0 18px 0 22px;
    border-radius: 4px;
    background: #f1f1f1;
    color: #111827;
    font-size: 18px;
}

.staff-commission-setting button {
    border: 0;
    background: transparent;
    color: #4f7fe8;
    font-weight: 800;
}

.staff-commission-editor {
    z-index: 80;
    align-items: start;
    justify-items: center;
    padding-top: 18px;
}

.staff-commission-editor__box {
    width: min(720px, calc(100vw - 72px));
    max-height: calc(100vh - 34px);
    border-radius: 8px;
}

.staff-commission-editor__head {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    padding: 18px 24px 32px;
    border-bottom: 0;
}

.staff-commission-editor__head h3 {
    font-size: 26px;
    line-height: 1;
}

.staff-commission-editor__handle {
    display: grid;
    align-content: center;
    justify-content: center;
    gap: 3px;
    height: 36px;
}

.staff-commission-editor__handle i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c8cdd6;
}

.staff-commission-editor__body {
    padding: 0 24px 16px;
}

.staff-commission-default {
    display: grid;
    gap: 6px;
    color: #333842;
}

.staff-commission-default > span {
    font-size: 15px;
}

.staff-commission-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
    height: 44px;
    overflow: hidden;
    border-radius: 4px;
    background: #eeeeee;
}

.staff-commission-input input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 16px;
    color: #111827;
    font-size: 16px;
    line-height: normal;
}

.staff-commission-input button {
    width: 100%;
    height: 100%;
    border: 0;
    background: #e7e7e7;
    color: #777;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.staff-commission-input button.is-active {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-commission-default-check {
    width: 100%;
    justify-content: start;
    min-height: 48px;
    margin: 12px 0 16px;
    border-bottom: 0;
}

.staff-commission-default-check i {
    order: 0;
}

.staff-commission-default-check span {
    order: 1;
    font-size: 15px;
}

.staff-commission-editor__filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 244px;
    gap: 14px;
    align-items: center;
}

.staff-commission-editor__filters .staff-location-row,
.staff-commission-editor__filters .staff-location-search {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dfe6f1;
    padding-inline: 14px;
}

.staff-commission-editor__filters .staff-location-search input {
    font-size: 15px;
}

.staff-commission-editor__filters .staff-location-row i,
.staff-commission-default-check i {
    width: 28px;
    height: 28px;
}

.staff-commission-assigned {
    justify-content: flex-start;
}

.staff-commission-assigned span {
    font-size: 15px;
}

.staff-commission-editor__location {
    margin: 26px 0 12px;
    color: #4f7fe8;
    text-align: right;
    font-weight: 800;
    font-size: 15px;
}

.staff-commission-table-editor {
    border: 1px solid #e5ebf4;
    background: #ffffff;
    max-height: min(300px, calc(100vh - 350px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.staff-commission-table-editor__head,
.staff-commission-table-editor__row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.9fr) minmax(330px, 2.8fr);
}

.staff-commission-table-editor__head span,
.staff-commission-table-editor__row > span,
.staff-commission-table-editor__row > div {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-right: 1px solid #e5ebf4;
    border-bottom: 1px solid #edf2f8;
}

.staff-commission-table-editor__head span {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
    color: #30343c;
    font-size: 15px;
    font-weight: 800;
}

.staff-commission-table-editor__row > span {
    font-size: 15px;
}

.staff-commission-table-editor__head span:last-child,
.staff-commission-table-editor__row > div:last-child {
    border-right: 0;
}

.staff-commission-input--row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
    height: 44px;
}

.staff-commission-input input:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.staff-commission-input button:disabled {
    cursor: not-allowed;
}

.staff-commission-input--row.is-disabled {
    opacity: 0.68;
}

.staff-commission-confirm {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    background: rgba(20, 24, 31, 0.45);
}

.staff-commission-confirm[hidden] {
    display: none;
}

.staff-commission-confirm__box {
    position: relative;
    width: min(520px, calc(100% - 36px));
    padding: 28px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.22);
}

.staff-commission-confirm__box h3 {
    margin: 0 0 36px;
    color: #30343c;
    font-size: 26px;
    font-weight: 800;
}

.staff-commission-confirm__box p {
    max-width: 390px;
    margin: 0 0 42px;
    color: #30343c;
    font-size: 16px;
    line-height: 1.45;
}

.staff-commission-confirm__close {
    position: absolute;
    top: 22px;
    right: 22px;
    border: 0;
    background: transparent;
    font-size: 18px;
}

.staff-commission-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.staff-commission-confirm__actions .customer-footer-btn {
    min-width: 112px;
    min-height: 48px;
}

.staff-commission-confirm__continue {
    background: #df4361;
    color: #ffffff;
}

.staff-commission-editor__footer {
    gap: 16px;
    padding: 18px 24px 22px;
    border-top: 0;
}

.staff-commission-editor__footer .customer-footer-btn {
    width: 150px;
    height: 54px;
}

.staff-modal input[type="number"] {
    -moz-appearance: textfield;
}

.staff-modal input[type="number"]::-webkit-outer-spin-button,
.staff-modal input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

@media (max-width: 860px) {
    .staff-commission-editor__filters {
        grid-template-columns: 1fr;
    }

    .staff-commission-table-editor {
        overflow-x: auto;
    }

    .staff-commission-table-editor__head,
    .staff-commission-table-editor__row {
        min-width: 680px;
    }
}

.staff-work-dialog {
    max-width: 560px;
}

.staff-work-modal {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 22px 46px rgba(20, 32, 48, 0.2);
    max-height: calc(100vh - 34px);
    overflow-x: hidden;
    overflow-y: auto;
}

.staff-work-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 26px 18px;
}

.staff-work-modal__head h2 {
    max-width: 410px;
    margin: 0;
    color: #30343c;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
}

.staff-work-close {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #2f3540;
    font-size: 18px;
}

.staff-work-modal__body {
    padding: 10px 26px 20px;
}

.staff-work-label,
.staff-work-section-label {
    margin-bottom: 4px;
    color: #646b76;
    font-size: 14px;
    font-weight: 500;
}

.staff-work-date {
    margin-bottom: 18px;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.staff-work-shifts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staff-work-shift {
    position: relative;
}

.staff-work-shift__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.staff-work-field label {
    display: block;
    margin-bottom: 5px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

.staff-work-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border-radius: 6px;
    background: #f6f6f6;
    color: #111827;
}

.staff-work-input i {
    color: #a7adb7;
    font-size: 15px;
}

.staff-work-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
}

.staff-work-input input::placeholder {
    color: #b9bec8;
}

.staff-work-break-note {
    margin: 10px 0 10px;
    text-align: center;
    color: #7b7f87;
    font-size: 13px;
    font-weight: 500;
}

.staff-work-remove-shift {
    position: absolute;
    right: 0;
    top: 24px;
    border: 0;
    background: transparent;
    color: #dc4860;
    font-size: 20px;
}

.staff-work-add-shift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 255px;
    height: 46px;
    margin: 10px 0 22px;
    border: 0;
    border-radius: 6px;
    background: #f6f6f6;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.staff-work-add-shift:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.staff-work-repeat {
    margin-bottom: 10px;
}

.staff-work-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 5px;
    background: #eeeeef;
}

.staff-work-segmented button {
    min-height: 46px;
    border: 0;
    background: transparent;
    color: #73777f;
    font-size: 16px;
    font-weight: 500;
}

.staff-work-segmented button.is-active {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-work-weekly-options {
    margin-top: 10px;
}

.staff-work-date-field {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 6px;
    background: #f6f6f6;
    color: #b7bdc8;
}

.staff-work-date-field input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 15px;
}

.staff-work-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 255px;
    height: 46px;
    margin-top: 16px;
    border: 0;
    border-radius: 6px;
    background: #d83d5f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.staff-work-delete[hidden] {
    display: none;
}

.staff-work-modal__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 26px 24px;
}

.staff-work-footer-btn {
    height: 48px;
    border: 0;
    border-radius: 6px;
    background: #f5f5f5;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.staff-work-save {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-work-save:disabled {
    background: #f0f0f0;
    color: #a7a7a7;
}

.staff-time-picker {
    position: fixed;
    z-index: 2060;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e7eef8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(20, 32, 48, 0.16);
}

.staff-time-picker[hidden] {
    display: none;
}

.staff-time-picker__col {
    min-width: 0;
    border-right: 1px solid #eef2f7;
}

.staff-time-picker__col:last-child {
    border-right: 0;
}

.staff-time-picker__label {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b1;
    font-size: 13px;
    font-weight: 700;
}

.staff-time-picker__list {
    max-height: 214px;
    overflow-y: auto;
    padding: 3px;
}

.staff-time-picker__option {
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #2c323b;
    font-size: 15px;
    font-weight: 600;
}

.staff-time-picker__option:hover,
.staff-time-picker__option:focus {
    background: #eef5ff;
}

.staff-time-picker__option.is-active {
    background: #4f7fe8;
    color: #ffffff;
}

.business-hours-card {
    display: grid;
    gap: 18px;
}

.business-hours-card__default {
    width: fit-content;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    border: 1px solid #e6edf7;
    background: #f5f7fb;
    color: #243248;
    font-size: 14px;
    font-weight: 700;
}

.business-hours-list {
    display: grid;
    gap: 18px;
}

.business-hours-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(132px, 1fr) minmax(132px, 1fr);
    gap: 12px;
    align-items: center;
}

.business-hours-row.is-disabled {
    opacity: 0.72;
}

.business-hours-row__toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.business-hours-row__toggle input {
    display: none;
}

.business-hours-row__check {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5deea;
    border-radius: 4px;
    background: #ffffff;
    color: transparent;
    font-size: 18px;
}

.business-hours-row__toggle input:checked + .business-hours-row__check {
    border-color: #3f8cff;
    background: #3f8cff;
    color: #ffffff;
}

.business-hours-row__label {
    color: #13233a;
    font-size: 16px;
    font-weight: 500;
}

.business-hours-row__time {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #edf1f6;
    border-radius: 6px;
    background: #f5f7fb;
    color: #13233a;
    font-size: 16px;
}

.business-hours-row__time:disabled {
    opacity: 0.65;
}

.business-hours-row__time i {
    color: #a7b1c1;
    font-size: 14px;
}

.business-time-picker {
    position: fixed;
    z-index: 2065;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e7eef8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(20, 32, 48, 0.16);
}

.business-time-picker[hidden] {
    display: none;
}

.business-time-picker__col {
    min-width: 0;
    border-right: 1px solid #eef2f7;
}

.business-time-picker__col:last-child {
    border-right: 0;
}

.business-time-picker__label {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b1;
    font-size: 13px;
    font-weight: 700;
}

.business-time-picker__list {
    max-height: 214px;
    overflow-y: auto;
    padding: 3px;
}

.business-time-picker__option {
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #2c323b;
    font-size: 15px;
    font-weight: 600;
}

.business-time-picker__option:hover,
.business-time-picker__option:focus {
    background: #eef5ff;
}

.business-time-picker__option.is-active {
    background: #12c9a0;
    color: #ffffff;
}

.staff-work-selected-hours {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #26384d;
    font-size: 14px;
}

.staff-work-repeat-date-calendar .flatpickr-day.flatpickr-disabled,
.staff-work-repeat-date-calendar .flatpickr-day.prevMonthDay,
.staff-work-repeat-date-calendar .flatpickr-day.nextMonthDay {
    color: #d0d4db !important;
    background: #fafafa !important;
}

.staff-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.staff-role-grid button {
    min-height: 54px;
    border: 0;
    border-radius: 6px;
    background: #f2f2f2;
    color: #6d7784;
    font-size: 16px;
}

.staff-role-grid button.is-active {
    background: #5b84e6;
    color: #ffffff;
}

.staff-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.staff-color-grid button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 6px;
}

.staff-color-grid button.is-active {
    outline: 2px solid #4f84ff;
    outline-offset: 2px;
}

.staff-color-grid__add {
    display: grid;
    place-items: center;
    background: #f3f5f8 !important;
    color: #4f84ff;
    font-size: 24px;
}

.staff-photo-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.staff-photo-avatar {
    display: grid;
    place-items: center;
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background: #96d4ff;
    color: #343840;
    font-size: 54px;
}

.staff-social-row {
    display: grid;
    grid-template-columns: 54px 1fr;
}

.staff-social-row span {
    display: grid;
    place-items: center;
    background: #d14d86;
    color: #ffffff;
    font-size: 24px;
}

.staff-save-btn {
    background: #63b4ff;
    color: #ffffff;
}

.services-shell {
    position: relative;
}

.services-tabs {
    display: flex;
    justify-content: center;
    gap: 150px;
    max-width: none;
    padding: 0 var(--content-pad);
    margin: 0 calc(-1 * var(--content-pad)) 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 55;
}

.services-tab {
    padding: var(--tab-pad-y) 10px calc(var(--tab-pad-y) + 2px);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #000000;
    font-size: var(--tab-font);
    font-weight: 700;
}

.services-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.services-panels {
    padding-top: 18px;
}

.services-panel {
    display: none;
}

.services-panel.is-active {
    display: block;
}

.services-toolbar {
    display: grid;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin-bottom: 18px;
}

.services-toolbar__group {
    display: contents;
}

.services-toolbar__group--end {
    margin-left: 0;
}

.services-panel[data-services-panel="groups"] .services-toolbar {
    grid-template-columns: minmax(220px, 320px) minmax(460px, 1fr);
}

.services-panel[data-services-panel="services"] .services-toolbar {
    grid-template-columns: minmax(180px, 250px) minmax(180px, 220px) minmax(130px, 148px) minmax(260px, 1fr);
}

.services-panel[data-services-panel="packages"] .services-toolbar {
    grid-template-columns: minmax(180px, 250px) minmax(180px, 220px) minmax(130px, 148px) minmax(260px, 1fr);
}

.services-toolbar .dashboard-filter,
.services-toolbar .sales-search-field {
    width: 100%;
    min-width: 0 !important;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

.services-toolbar .dashboard-filter--shop {
    justify-content: space-between;
}

.services-toolbar .sales-search-field span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.services-search {
    min-width: 0;
    max-width: 980px;
}

.services-search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #3a4c65;
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

.services-search input::placeholder {
    color: #c3cad6;
}

.services-filter-disabled {
    min-width: 0;
    justify-content: center;
    color: #c4cad3;
}

.services-toolbar .services-menu-wrap {
    width: 100%;
    min-width: 0;
}

.services-toolbar__shop-menu {
    width: 100% !important;
    min-width: 0 !important;
}

.services-toolbar-dropdown {
    width: 100%;
    min-width: 0;
}

.services-toolbar-dropdown--compact {
    max-width: 148px;
}

.services-toolbar-dropdown__toggle {
    justify-content: space-between;
}

.services-toolbar .services-dots {
    width: 40px;
    height: 40px;
}

.services-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.services-group-card,
.service-card,
.services-package-card {
    border: 1px solid #e7eef8;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(99, 180, 255, 0.08);
}

.services-group-card {
    padding: 16px 16px 14px;
    border-color: color-mix(in srgb, var(--service-group-accent, #6a7dff) 22%, #dfe8f4);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--service-group-accent, #6a7dff) 12%, rgba(99, 180, 255, 0.04));
}

.services-group-card__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.services-group-card__thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--service-group-accent, #6a7dff) 22%, #ffffff), color-mix(in srgb, var(--service-group-accent, #6a7dff) 10%, #f7f9ff));
    color: var(--service-group-accent, #6a7dff);
    font-size: 22px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--service-group-accent, #6a7dff) 18%, #dfe8f4);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.services-group-card__thumb.is-photo {
    color: transparent;
}

.services-group-card__header,
.service-card__header,
.services-package-card__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.service-card__header > div:first-of-type,
.services-package-card__head > div:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

.services-group-card__header h3,
.service-card__header h3,
.services-package-card__head h3 {
    margin: 0 0 4px;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #101a31;
}

.services-group-card__header span,
.services-package-card__head span,
.service-card__group {
    color: #70839c;
    font-size: 13px;
}

.services-card-thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff5ff, #f7f9ff);
    color: #7f8fff;
    font-size: 22px;
    box-shadow: inset 0 0 0 1px #dbe7f5;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.services-card-thumb.is-photo {
    color: transparent;
}

.services-group-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-group-inline-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--service-group-accent, #6a7dff) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--service-group-accent, #6a7dff) 10%, #edf2fb);
}

.services-group-inline-item strong {
    color: #223955;
    font-size: 15px;
    font-weight: 800;
}

.services-group-inline-item span {
    color: var(--service-group-accent, #4f84ff);
    font-size: 15px;
    font-weight: 700;
}

.services-menu-wrap {
    position: relative;
}

.services-dots {
    width: 38px;
    height: 38px;
    border: 1px solid #e2ebf7;
    border-radius: 12px;
    background: #ffffff;
    color: #3b587b;
    font-size: 16px;
}

.services-dots--vertical {
    border-radius: 50%;
}

.services-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    padding: 8px;
    border: 1px solid #e7eef8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 26px rgba(77, 131, 191, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.18s ease;
    z-index: 10;
}

.services-dropdown--toolbar {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 100%;
}

.services-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.services-dropdown button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #304861;
    text-align: left;
}

.services-dropdown button:hover {
    background: #f3f8ff;
}

.services-dropdown button[data-service-group-action="edit"] {
    color: #304861;
}

.services-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

.service-card {
    display: grid;
    grid-template-columns: 10px 1fr;
    overflow: hidden;
}

.service-card__accent {
    background: linear-gradient(180deg, #63b4ff 0%, #4f84ff 100%);
}

.service-card__content {
    padding: 14px 14px 12px;
}

.service-card__header h3 {
    margin-top: 6px;
}

.service-card p {
    margin: 0 0 14px;
    color: #66788f;
    font-size: 14px;
    line-height: 1.5;
}

.service-card__meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: #4f84ff;
    font-size: 14px;
    font-weight: 600;
}

.service-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-card__footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.service-card__variants {
    color: #7b8ba1;
    font-size: 14px;
}

.service-card__footer strong,
.services-package-card__price {
    color: #1a3150;
    font-size: 16px;
    font-weight: 800;
}

.services-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.services-package-card {
    padding: 16px;
}

.services-package-card__head {
    align-items: center;
}

.services-package-card__items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.services-package-card__items span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef6ff;
    color: #4f84ff;
    font-size: 14px;
    font-weight: 600;
}

.services-package-form__grid .services-group-field--full {
    grid-column: 1 / -1;
}

#servicePackageModal {
    overflow: hidden;
}

#servicePackageModal .modal-dialog-centered {
    min-height: 100vh;
    height: 100vh;
    align-items: stretch;
}

.services-package-dialog {
    max-width: 100vw !important;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
}

#servicePackageModal .modal-content {
    height: 100vh;
    box-shadow: none;
}

.services-package-modal {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.services-package-modal .customer-tag-modal__header {
    position: relative;
    justify-content: center;
    padding: 18px 32px 16px;
    border-bottom: 1px solid #e8eef7;
    background: #ffffff;
}

.services-package-modal .customer-tag-modal__header h2 {
    color: #27385b;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}

.services-package-modal .customer-tag-modal__header .btn-close {
    position: absolute;
    top: 20px;
    right: 24px;
}

.services-package-modal .customer-tag-modal__body {
    min-height: 0;
    padding: 18px 22px 16px;
    overflow: auto;
    background: #ffffff;
}

.services-package-modal .customer-tag-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 22px 16px;
    border-top: 1px solid #e8eef7;
    background: #ffffff;
}

.services-package-modal .customer-tag-modal__footer .customer-footer-btn {
    min-width: 0;
    width: 136px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
}

.services-package-builder {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    justify-content: stretch;
    gap: 18px 24px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

.services-package-builder__form {
    display: grid;
    gap: 16px;
}

.services-package-modal .services-group-field {
    gap: 7px;
}

.services-package-modal .services-group-field label {
    color: #243456;
    font-size: 13px;
    font-weight: 700;
}

.services-package-modal .services-group-field .form-control,
.services-package-modal .services-group-field .form-select {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
    color: #233753;
    box-shadow: none;
    font-size: 13px;
}

.services-package-modal .services-group-field .form-control:focus,
.services-package-modal .services-group-field .form-select:focus {
    border-color: #8eb1ff;
    box-shadow: 0 0 0 3px rgba(95, 134, 239, 0.14);
}

.services-package-modal .services-group-textarea {
    min-height: 86px;
    resize: none;
}

.services-package-divider {
    height: 1px;
    margin: 4px 0 0;
    background: #dfe5ee;
}

.services-package-segmented button {
    min-height: 46px;
    font-size: 13px;
}

.services-package-price-input {
    position: relative;
}

.services-package-price-input .form-control {
    padding-right: 44px;
}

.services-package-price-input span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8ea9;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

.services-package-price-input [data-service-package-price-prefix] {
    left: 14px;
}

.services-package-price-input [data-service-package-price-suffix] {
    right: 14px;
}

.services-package-price-input [data-service-package-price-prefix]:not([hidden]) + .form-control {
    padding-left: 36px;
}

.services-package-builder__summary {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #dce6f4;
    border-radius: 12px;
    background: #ffffff;
}

.services-package-builder__add {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 10px;
    background: #f8fbff;
    color: #233753;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #dce6f4;
}

.services-package-builder__selected {
    display: grid;
    gap: 10px;
}

.services-package-builder__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #ffffff;
}

.services-package-builder__item-handle {
    display: grid;
    gap: 5px;
    justify-items: center;
}

.services-package-builder__item-handle span {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #d5d5d5;
}

.services-package-builder__item-body {
    min-width: 0;
}

.services-package-builder__item-link {
    display: inline-block;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5a7ff0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.services-package-builder__item-link:hover {
    text-decoration: underline;
}

.services-package-builder__item-body span {
    display: block;
    color: #556478;
    font-size: 12px;
}

.services-package-builder__item-price {
    text-align: right;
}

.services-package-builder__item-price small,
.services-package-builder__item-price strong {
    display: block;
}

.services-package-builder__item-price small {
    margin-bottom: 2px;
    color: #6f7b8f;
    font-size: 11px;
    font-weight: 500;
    text-decoration: line-through;
}

.services-package-builder__item-price strong {
    color: #1f2838;
    font-size: 13px;
    font-weight: 500;
}

.services-package-builder__item-remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ff5b4e;
    font-size: 14px;
}

.services-package-builder__empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 300px;
    padding: 32px 18px;
    border: 1px dashed #dce6f4;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

.services-package-builder__empty-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #eef5ff;
    color: #63b4ff;
    font-size: 30px;
}

.services-package-builder__empty h3 {
    margin: 0;
    color: #213959;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.services-package-builder__empty p {
    margin: 0;
    color: #6f8098;
    font-size: 13px;
    line-height: 1.6;
}

.services-package-builder__summary-bar {
    margin-top: auto;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: #eef5ff;
    color: #3b6cc9;
    font-size: 13px;
    font-weight: 700;
}

.services-package-builder__totals {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #ffffff;
}

.services-package-builder__totals-icon {
    width: 58px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #dddddd;
    border-radius: 14px;
}

.services-package-builder__totals-icon span {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #7b7b7b;
}

.services-package-builder__totals-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.services-package-builder__totals-group small {
    color: #556478;
    font-size: 12px;
}

.services-package-builder__totals-group strong {
    color: #2f3f5d;
    font-size: 13px;
    font-weight: 400;
}

.services-package-builder__totals-group--price {
    text-align: right;
}

.services-package-builder__totals-price small,
.services-package-builder__totals-price strong {
    display: block;
}

.services-package-builder__totals-price small {
    color: #6f7b8f;
    font-size: 11px;
    font-weight: 500;
    text-decoration: line-through;
}

.services-package-builder__totals-price strong {
    color: #2f3f5d;
    font-size: 13px;
    font-weight: 500;
}

.services-package-picker-dialog {
    max-width: min(1080px, calc(100vw - 80px)) !important;
}

#servicePackageItemModal {
    background: rgba(100, 116, 139, 0.24);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop.show:has(+ #servicePackageItemModal.show),
#servicePackageItemModal.show {
    background-color: rgba(100, 116, 139, 0.24);
}

.services-package-picker {
    min-height: 620px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.services-package-picker__header {
    padding: 18px 20px 0;
}

.services-package-picker__search {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 18px 0 0;
    border: 1px solid #dce6f4;
    border-radius: 12px;
    background: #f8fbff;
    color: #b8c4d8;
}

.services-package-picker__back {
    width: 44px;
    height: 44px;
    margin-left: 8px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #334b69;
    font-size: 22px;
}

.services-package-picker__search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #26384d;
    font-size: 14px;
    outline: none;
}

.services-package-picker__search input::placeholder {
    color: #b8c4d8;
}

.services-package-picker__body {
    min-height: 0;
    padding: 16px 20px 18px;
    overflow: auto;
}

.services-package-picker__tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: #eef5ff;
}

.services-package-picker__tabs button,
.services-package-picker__filters button {
    border: 0;
    background: transparent;
    color: #3d4f69;
    font-weight: 700;
}

.services-package-picker__tabs button {
    min-width: 110px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 12px;
}

.services-package-picker__tabs button.is-active {
    background: #5f86ef;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(95, 134, 239, 0.18);
}

.services-package-picker__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.services-package-picker__filters button {
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    background: #f4f7fc;
    font-size: 11px;
}

.services-package-picker__filters button.is-active {
    background: #63b4ff;
    color: #ffffff;
}

.services-package-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.services-package-picker-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #ffffff;
    color: #1f314d;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(99, 180, 255, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.services-package-picker-card:hover {
    border-color: #8fb8ff;
    transform: translateY(-1px);
}

.services-package-picker-card.is-selected {
    border-color: #5f86ef;
    box-shadow: 0 0 0 2px rgba(95, 134, 239, 0.12), 0 10px 20px rgba(99, 180, 255, 0.1);
}

.services-package-picker-card__thumb {
    min-height: 72px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #edf4ff, #dcecff);
    color: #5f86ef;
    font-size: 20px;
    font-weight: 800;
}

.services-package-picker-card__thumb--product {
    background: linear-gradient(135deg, #eaf7ff, #d8f0ff);
    color: #3899d8;
}

.services-package-picker-card__body {
    min-width: 0;
    padding: 10px 10px 10px 14px;
}

.services-package-picker-card__body strong {
    display: block;
    margin-bottom: 4px;
    color: #1b2e49;
    font-size: 12px;
    font-weight: 800;
}

.services-package-picker-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #7488a1;
    font-size: 11px;
}

.services-package-picker-card > i {
    justify-self: center;
    color: transparent;
    font-size: 14px;
}

.services-package-picker-card.is-selected > i {
    color: #5f86ef;
}

.services-package-picker__empty {
    margin-top: 18px;
    padding: 22px 16px;
    border-radius: 12px;
    background: #f8fbff;
    color: #73859c;
    font-size: 13px;
    text-align: center;
}

.services-package-picker__selected {
    margin-top: 18px;
    border: 1px solid #e6eef9;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.services-package-picker__selected.is-collapsed .services-package-picker__selected-list {
    display: none;
}

.services-package-picker__selected-list {
    display: grid;
}

.services-package-picker-selected__row {
    display: grid;
    grid-template-columns: 34px 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef3fb;
}

.services-package-picker-selected__row:last-child {
    border-bottom: 0;
}

.services-package-picker-selected__remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ff5b4e;
}

.services-package-picker-selected__qty {
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #f4f4f4;
    color: #6d7482;
    font-size: 12px;
    font-weight: 700;
}

.services-package-picker-selected__name {
    padding: 0;
    border: 0;
    background: transparent;
    color: #5a7ff0;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.services-package-picker-selected__name:hover {
    text-decoration: underline;
}

.services-package-picker-selected__price {
    color: #1f2838;
    font-size: 12px;
}

.services-package-picker__selected-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #eef3fb;
}

.services-package-picker__selected-total {
    color: #5f86ef;
    font-size: 12px;
    font-weight: 700;
}

.services-package-picker__selected-toggle {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6d7482;
}

.services-package-picker__selected.is-collapsed .services-package-picker__selected-toggle i {
    transform: rotate(180deg);
}

.services-package-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e6eef9;
    background: #ffffff;
}

.services-package-picker__footer-summary {
    color: #3b6cc9;
    font-size: 13px;
    font-weight: 700;
}

.services-package-picker__footer .customer-footer-btn {
    min-width: 160px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 12px;
}

.services-package-picker__footer .staff-save-btn,
.services-package-picker-choice__footer .staff-save-btn {
    background: #63b4ff;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(99, 180, 255, 0.22);
}

.services-package-picker-choice {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
}

.services-package-picker-choice__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(100, 116, 139, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.services-package-picker-choice__dialog {
    position: relative;
    width: min(480px, calc(100vw - 48px));
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.services-package-picker-choice__content {
    padding: 22px 24px 18px;
}

.services-package-picker-choice__content h3 {
    margin: 0 0 4px;
    color: #1f2838;
    font-size: 16px;
    font-weight: 500;
}

.services-package-picker-choice__content p {
    margin: 0 0 14px;
    color: #1f2838;
    font-size: 12px;
}

.services-package-picker-choice__content p[data-service-package-choice-tagline] {
    margin-bottom: 6px;
}

.services-package-picker-choice__option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 10px;
    border: 0;
    background: #eaf3ff;
    text-align: left;
}

.services-package-picker-choice__option-text strong,
.services-package-picker-choice__option-text small {
    display: block;
}

.services-package-picker-choice__option-text strong {
    color: #1f2838;
    font-size: 14px;
    font-weight: 700;
}

.services-package-picker-choice__option-text small {
    margin-top: 4px;
    color: #6d7482;
    font-size: 12px;
}

.services-package-picker-choice__radio {
    width: 18px;
    height: 18px;
    border: 2px solid #5f86ef;
    border-radius: 999px;
    box-shadow: inset 0 0 0 4px #ffffff;
    background: #5f86ef;
    flex: 0 0 18px;
}

.services-package-picker-choice__qty {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 14px;
    max-width: 240px;
    margin: 16px auto 0;
}

.services-package-picker-choice__qty button {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2838;
    font-size: 24px;
    line-height: 1;
}

.services-package-picker-choice__qty button:disabled {
    opacity: 0.35;
}

.services-package-picker-choice__qty strong {
    min-height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f4f4f4;
    color: #1f2838;
    font-size: 16px;
    font-weight: 700;
}

.services-package-picker-choice__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 24px 18px;
}

.services-package-picker-choice__footer .customer-footer-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border-radius: 8px;
    font-size: 12px;
}

.services-package-item-editor {
    position: absolute;
    inset: 0;
    z-index: 1065;
}

.services-package-item-editor__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(100, 116, 139, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.services-package-item-editor__dialog {
    position: relative;
    z-index: 1;
    width: min(660px, calc(100% - 32px));
    margin: 120px auto 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
    overflow: visible;
}

.services-package-item-editor__content {
    padding: 24px 28px 20px;
}

.services-package-item-editor__content h3 {
    margin: 0 0 18px;
    color: #1f2838;
    font-size: 28px;
    font-weight: 800;
}

.services-package-item-editor__preview {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #f7f7f7;
}

.services-package-item-editor__avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #c9ced8;
}

.services-package-item-editor__preview-body strong,
.services-package-item-editor__preview-body span {
    display: block;
}

.services-package-item-editor__preview-body strong {
    color: #1f2838;
    font-size: 14px;
    font-weight: 700;
}

.services-package-item-editor__preview-body span {
    margin-top: 4px;
    color: #6d7482;
    font-size: 12px;
}

.services-package-item-editor__preview-price {
    color: #1f2838;
    font-size: 14px;
}

.services-package-item-editor__help {
    margin: 18px 0 16px;
    color: #3c4657;
    font-size: 12px;
    line-height: 1.55;
}

.services-package-item-editor__select {
    position: relative;
    z-index: 3;
}

.services-package-item-editor__select-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid #5f86ef;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2838;
    font-size: 12px;
}

.services-package-item-editor__select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.services-package-item-editor__select-menu button {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    background: #ffffff;
    color: #5b6576;
    font-size: 12px;
    text-align: left;
}

.services-package-item-editor__select-menu button.is-active {
    background: #f3f6fb;
    color: #1f2838;
    font-weight: 700;
}

.services-package-item-editor__qty,
.services-package-item-editor__time {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #edf1f6;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.services-package-item-editor__qty button,
.services-package-item-editor__time button {
    min-height: 72px;
    border: 0;
    background: transparent;
    color: #1f2838;
    font-size: 34px;
    line-height: 1;
}

.services-package-item-editor__qty strong,
.services-package-item-editor__time strong {
    display: grid;
    place-items: center;
    color: #1f2838;
    font-size: 42px;
    font-weight: 500;
}

.services-package-item-editor__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 28px 24px;
}

.services-package-item-editor__footer .customer-footer-btn {
    width: 100%;
    min-height: 50px;
    border-radius: 8px;
}

@media (max-width: 991.98px) {
    .services-package-dialog,
    .services-package-modal,
    #servicePackageModal .modal-dialog-centered,
    #servicePackageModal .modal-content {
        height: auto;
        min-height: 100vh;
    }

    .services-package-modal .customer-tag-modal__body {
        padding: 20px 18px;
    }

    .services-package-modal .customer-tag-modal__footer {
        padding: 16px 18px 20px;
    }

    .services-package-builder {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .services-package-builder__item {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .services-package-builder__item-price,
    .services-package-builder__item-remove {
        justify-self: end;
    }

    .services-package-builder__totals {
        grid-template-columns: 58px 1fr;
    }

    .services-package-builder__totals-group--price {
        text-align: left;
    }

    .services-package-picker__grid {
        grid-template-columns: 1fr;
    }

    .services-package-picker__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .services-package-picker__footer .customer-footer-btn {
        width: 100%;
    }
}

.services-fab-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 46;
}

#serviceGroupModal .modal-dialog.modal-xl {
    max-width: min(1120px, calc(100vw - 48px)) !important;
    width: 100%;
    margin: 1.5rem auto;
}

#serviceGroupModal .services-dialog {
    width: 100%;
    min-width: 0;
    min-height: auto;
}

.services-dialog {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
}

.services-group-modal__header {
    padding: 26px 32px 12px;
}

.services-group-modal__header h2 {
    color: #243456;
    font-size: 28px;
    font-weight: 800;
}

.services-group-modal__body {
    padding: 8px 32px 22px;
}

.services-group-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
    align-items: start;
}

.services-group-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-group-field label {
    color: #1f2838;
    font-size: 15px;
    font-weight: 700;
}

.services-group-field .form-control {
    width: 100%;
    min-height: 60px;
    padding: 14px 18px;
    border: 2px solid #e7eef8;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

.services-group-field .form-control:focus {
    border-color: #c7daf8;
    box-shadow: 0 0 0 3px rgba(122, 168, 255, 0.12);
}

.services-group-field #serviceGroupName {
    min-height: 60px;
}

.services-group-textarea {
    width: 100%;
    min-height: 120px;
    resize: none;
}

.services-group-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-width: none;
    gap: 8px;
}

.services-group-color-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 12px;
    background: var(--service-color, #76b6e8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.services-group-color-swatch.is-active {
    box-shadow: 0 0 0 2px #4e8fff, inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.services-group-color-swatch:hover,
.services-group-color-swatch:focus-visible {
    transform: translateY(-1px);
}

.services-group-color-swatch:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px #4e8fff, inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.services-group-color-swatch--custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    color: #3d434f;
    font-size: 30px;
    box-shadow: inset 0 0 0 1px #e0e4eb;
}

.services-group-color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.services-group-help {
    max-width: 100%;
    margin: 2px 0 0;
    color: #6d7482;
    font-size: 12px;
    line-height: 1.5;
}

.services-group-help--compact {
    margin-top: 0;
}

.customer-footer-btn--danger {
    background: #ef4a5d;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(239, 74, 93, 0.22);
}

.services-group-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 32px 30px;
}

.services-group-modal__footer .customer-footer-btn {
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(20, 33, 61, 0.08);
}

.services-picker-dialog {
    max-width: 760px;
}

.services-picker-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 30px 12px;
}

.services-picker-option {
    display: grid;
    grid-template-columns: 1fr auto 24px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #e7eef8;
    border-radius: 14px;
    background: #ffffff;
    color: #223955;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.services-picker-option:hover {
    border-color: #7aa7ea;
}

.services-picker-option.is-selected {
    border-color: #6f9df0;
    background: #f7faff;
    box-shadow: 0 0 0 2px rgba(111, 157, 240, 0.12);
}

.services-picker-option strong {
    font-size: 18px;
}

.services-picker-option span,
.services-picker-option i {
    color: #71859f;
}

#serviceGroupPickerModal [data-service-picker-next]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

#serviceCreateModal {
    overflow: hidden;
}

#serviceCreateModal .modal-content {
    height: 100vh;
    box-shadow: none;
}

.services-create-modal {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.services-create-dialog {
    max-width: 100vw !important;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
}

#serviceCreateModal .modal-dialog-centered {
    min-height: 100vh;
    height: 100vh;
    align-items: stretch;
}

.services-create-modal__header {
    position: relative;
    padding: 16px 28px 12px;
    border-bottom: 1px solid #e8eef7;
    text-align: center;
    background: #ffffff;
    z-index: 3;
}

.services-create-modal__header h2 {
    margin: 0;
    color: #27385b;
    font-size: 24px;
    font-weight: 800;
}

.services-create-modal__header .btn-close {
    position: absolute;
    top: 18px;
    right: 24px;
}

.services-create-modal__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 24px;
    border-bottom: 1px solid #e8eef7;
    background: #ffffff;
    z-index: 3;
}

.services-create-tab {
    padding: 16px 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #2f3f5d;
    font-size: 13px;
    font-weight: 700;
}

.services-create-tab.is-active {
    color: #5f86ef;
    border-bottom-color: #5f86ef;
}

.services-create-modal__body {
    position: relative;
    min-height: 0;
    max-height: none;
    padding: 18px 22px 16px;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b6c2d8 #ffffff;
}

.services-create-modal__body::-webkit-scrollbar {
    width: 10px;
}

.services-create-modal__body::-webkit-scrollbar-track {
    background: #ffffff;
}

.services-create-modal__body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b6c2d8;
    background-clip: padding-box;
}

.services-create-panel {
    display: none;
}

.services-create-panel.is-active {
    display: block;
}

.services-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 18px 24px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

.services-create-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.services-create-column--right {
    padding-top: 2px;
}

.services-create-variant-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services-create-variant-section + .services-create-variant-section {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid #edf2fa;
}

.services-create-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.services-create-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.services-create-field--span2 {
    grid-column: span 2;
}

.services-create-field label {
    color: #243456;
    font-size: 13px;
    font-weight: 700;
}

.services-create-field .form-control,
.services-create-field .form-select {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
    color: #233753;
    box-shadow: none;
    font-size: 13px;
}

.services-create-field .form-control:focus,
.services-create-field .form-select:focus {
    border-color: #8eb1ff;
    box-shadow: 0 0 0 3px rgba(95, 134, 239, 0.14);
}

.services-create-field .form-control:disabled,
.services-create-field .form-select:disabled,
.services-create-location-card__field .form-control:disabled {
    background: #eef3fb;
    color: #94a2b6;
    opacity: 1;
    cursor: not-allowed;
}

.services-create-textarea {
    min-height: 86px;
    resize: none;
}

.services-create-inline-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
    color: #2c3c58;
    font-size: 13px;
    text-align: left;
}

.services-create-inline-box strong {
    color: #5f86ef;
    font-weight: 700;
}

.services-create-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
}

.services-create-segmented button {
    min-height: 46px;
    border: 0;
    background: transparent;
    color: #5a6b85;
    font-size: 13px;
    font-weight: 700;
}

.services-create-segmented button.is-active {
    background: #5f86ef;
    color: #ffffff;
}

.services-create-media-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.services-create-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
    color: #243456;
    font-size: 13px;
    font-weight: 700;
}

.services-create-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f3f7ff;
    color: #5d6d86;
    font-size: 12px;
    line-height: 1.5;
}

.services-create-note i {
    color: #5f86ef;
}

.services-create-variant-add {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #ffffff;
    color: #2f4f98;
    font-size: 13px;
    font-weight: 700;
}

.services-create-variant-stack {
    gap: 0;
    margin-bottom: -8px;
}

.services-create-variant-card-list {
    display: grid;
    gap: 12px;
}

.services-create-variant-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 14px 14px;
    border: 1px solid #dce6f4;
    border-radius: 4px;
    background: #ffffff;
}

.services-create-variant-card__body {
    min-width: 0;
}

.services-create-variant-card__title {
    margin: 0 0 8px;
    color: #101a31;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
}

.services-create-variant-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6d7a8d;
    font-size: 13px;
}

.services-create-variant-card__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #c8ced7;
}

.services-create-variant-card__edit {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f86ef;
    font-size: 15px;
    font-weight: 700;
}

.services-create-variant-actions {
    gap: 10px;
    padding-top: 0;
}

.services-create-variant-actions__divider {
    width: 100%;
    height: 1px;
    background: #d7deea;
}

.services-create-variant-actions__buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
}

.services-create-variant-actions__finish,
.services-create-variant-actions__close {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 700;
}

.services-create-variant-actions__finish {
    color: #5f86ef;
    font-size: 15px;
}

.services-create-variant-actions__close {
    color: #ef4668;
    font-size: 16px;
}

.services-create-variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 180px auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #dce6f4;
    border-radius: 12px;
    background: #f8fbff;
}

.services-create-variant-row .form-control {
    min-height: 42px;
    border-radius: 10px;
    background: #ffffff;
}

.services-create-variant-row button {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #eaf0fb;
    color: #486bb8;
    font-weight: 700;
}

.services-create-simple {
    max-width: 640px;
    margin: 0 auto;
}

.services-create-simple__title {
    margin: 0 0 16px;
    color: #243456;
    font-size: 14px;
}

.services-create-search {
    position: relative;
    margin-bottom: 14px;
}

.services-create-search .form-control {
    min-height: 46px;
    padding-right: 40px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
}

.services-create-search i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #95a6c3;
}

.services-create-checklist {
    display: grid;
}

.services-create-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 0 0 0 48px;
    border-bottom: 1px solid #e7edf7;
    color: #243456;
    font-size: 14px;
}

.services-create-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-create-check i {
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #5f86ef;
    color: #ffffff;
    transform: translateY(-50%);
}

.services-create-check--blue span {
    color: #5f86ef;
}

.services-create-resource-card {
    max-width: 620px;
    margin: 18px auto 0;
    padding: 18px;
    border: 1px solid #e2eaf6;
    border-radius: 12px;
    background: #ffffff;
}

.services-create-resource-card h3 {
    margin: 0 0 18px;
    color: #233753;
    font-size: 17px;
    font-weight: 800;
}

.services-create-resource-card p {
    margin: 0;
    color: #394b6b;
    font-size: 14px;
}

.services-create-settings {
    max-width: 620px;
    margin: 0 auto;
}

.services-create-settings__panel {
    display: grid;
    gap: 16px;
}

.services-create-settings .services-create-field .form-select,
.services-create-settings .services-create-field .form-control,
.services-create-settings__duration {
    min-height: 56px;
    border-radius: 8px;
    background: #f4f4f4;
}

.services-create-settings .services-create-inline-box {
    min-height: 56px;
    border-radius: 8px;
    background: #f4f4f4;
    font-size: 14px;
}

.services-create-settings__costume {
    width: 100%;
}

.services-create-settings .services-create-inline-box span {
    color: #101a31;
    font-size: 15px;
    font-weight: 700;
}

.services-create-settings__duration {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    overflow: hidden;
    border: 1px solid #dce6f4;
}

.services-create-settings__duration .form-control {
    min-height: 54px;
    border: 0;
    border-right: 1px solid #dce6f4;
    border-radius: 0;
    background: #ffffff;
    font-size: 22px;
    font-weight: 500;
}

.services-create-settings__duration .form-control:focus {
    box-shadow: inset 0 0 0 1px #5f86ef;
}

.services-create-settings__duration span {
    display: grid;
    place-items: center;
    color: #9ba7b7;
    font-size: 16px;
    font-weight: 500;
}

.services-create-settings__divider {
    height: 1px;
    background: #dfe5ee;
}

.services-create-settings__check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #101a31;
    cursor: pointer;
}

.services-create-settings__check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-create-settings__check span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid #d7deea;
    border-radius: 2px;
    background: #ffffff;
}

.services-create-settings__check input:checked + span {
    border-color: #5f86ef;
    background: #5f86ef;
    box-shadow: inset 0 0 0 8px #ffffff;
}

.services-create-settings__check strong {
    color: #101a31;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.services-create-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 22px 16px;
    background: #ffffff;
    z-index: 3;
}

.services-create-modal__footer .customer-footer-btn {
    min-width: 128px;
    min-height: 48px;
    border-radius: 12px;
}

.services-create-drawer-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.services-create-drawer-layer.is-open {
    pointer-events: auto;
}

.services-create-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 40, 65, 0.36);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.services-create-drawer-layer.is-open .services-create-drawer-backdrop {
    opacity: 1;
}

.services-create-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: min(100vw, 400px);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #ffffff;
    box-shadow: -20px 0 48px rgba(27, 43, 74, 0.12);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.services-create-drawer.is-open {
    transform: translateX(0);
}

.services-create-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #edf2fa;
}

.services-create-drawer__header h3 {
    margin: 0;
    color: #202f4d;
    font-size: 18px;
    font-weight: 800;
}

.services-create-drawer__body {
    min-height: 0;
    padding: 18px 20px;
    overflow-y: auto;
    overflow-x: visible;
}

.services-create-drawer__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid #edf2fa;
    background: #ffffff;
}

.services-create-drawer__footer .customer-footer-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
}

.customer-footer-btn--ghost {
    border: 1px solid #d8e3f5;
    background: #ffffff;
    color: #5f86ef;
}

.services-create-drawer__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    color: #263654;
    font-size: 14px;
}

.services-create-drawer__switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-create-drawer__switch i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #5f86ef;
    color: #ffffff;
    font-size: 18px;
    flex-shrink: 0;
}

.services-create-drawer__switch input:not(:checked) + i {
    background: #eef3fb;
    color: transparent;
    box-shadow: inset 0 0 0 1px #d7e0ef;
}

.services-create-drawer__search {
    position: relative;
    margin-bottom: 18px;
}

.services-create-drawer__search .form-control,
.services-create-drawer__field .form-control,
.services-create-location-card__field .form-control {
    min-height: 52px;
    border: 1px solid #dce6f4;
    border-radius: 10px;
    background: #f8fbff;
    box-shadow: none;
}

.services-create-drawer__search .form-control {
    padding-right: 40px;
}

.services-create-drawer__search i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #a3b1c7;
}

.services-create-location-card {
    border: 1px solid #dfe7f2;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.services-create-location-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: #f9fbff;
}

.services-create-location-card__head strong {
    color: #263654;
    font-size: 15px;
    font-weight: 800;
}

.services-create-location-card__head button {
    border: 0;
    background: transparent;
    color: #b2bfce;
    font-size: 20px;
}

.services-create-location-card__prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 20px;
}

.services-create-location-card__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-create-location-card__field label,
.services-create-drawer__field label {
    color: #243456;
    font-size: 13px;
    font-weight: 700;
}

.services-create-drawer__section h4 {
    margin: 6px 0 14px;
    color: #111c31;
    font-size: 18px;
    font-weight: 800;
}

.services-create-product-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 12;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(20, 40, 72, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.services-create-product-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 42px;
    width: 14px;
    height: 14px;
    border-top: 1px solid #dfe7f2;
    border-left: 1px solid #dfe7f2;
    background: #ffffff;
    transform: rotate(45deg);
}

.services-create-product-dropdown__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 20px;
    border: 0;
    border-bottom: 1px solid #edf2fa;
    background: #ffffff;
    text-align: left;
}

.services-create-product-dropdown__item:hover {
    background: #f7faff;
}

.services-create-product-dropdown__item:last-child {
    border-bottom: 0;
}

.services-create-product-dropdown__item strong {
    color: #1f2d47;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

.services-create-product-dropdown__item span {
    color: #7a879a;
    font-size: 12px;
}

.services-create-product-selected {
    display: grid;
    gap: 12px;
}

.services-create-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.services-create-product-row__info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.services-create-product-row__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f4fa;
    color: #4a5871;
    font-size: 20px;
    flex-shrink: 0;
}

.services-create-product-row__name {
    color: #243456;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.services-create-product-row__qty {
    display: grid;
    grid-template-columns: 1fr 44px 44px;
    align-items: center;
    background: #f7f9fd;
}

.services-create-product-row__qty-value {
    text-align: center;
    color: #2d3d5a;
    font-size: 18px;
    font-weight: 700;
}

.services-create-product-row__qty button {
    height: 100%;
    border: 0;
    background: transparent;
    color: #2c3545;
    font-size: 22px;
    font-weight: 700;
}

.services-create-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.services-create-drawer__toggle > span:first-child {
    color: #28364d;
    font-size: 15px;
}

.services-create-drawer__toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-create-drawer__toggle-ui {
    position: relative;
    width: 58px;
    height: 30px;
    border-radius: 999px;
    background: #dbe2ee;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.services-create-drawer__toggle-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s ease;
}

.services-create-drawer__toggle input:checked + .services-create-drawer__toggle-ui {
    background: #5f86ef;
}

.services-create-drawer__toggle input:checked + .services-create-drawer__toggle-ui::after {
    transform: translateX(26px);
}

.services-create-availability__mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f8;
}

.services-create-availability__mode button {
    min-height: 54px;
    border: 0;
    background: transparent;
    color: #737f92;
    font-size: 14px;
    font-weight: 700;
}

.services-create-availability__mode button.is-active {
    background: #5f86ef;
    color: #ffffff;
}

.services-create-availability__content {
    display: none;
}

.services-create-availability__content.is-active {
    display: block;
}

.services-create-calendar {
    margin-bottom: 18px;
}

.services-create-calendar__header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    margin-bottom: 16px;
}

.services-create-calendar__header button {
    border: 0;
    background: transparent;
    color: #7f8aa0;
    font-size: 24px;
}

.services-create-calendar__header strong {
    text-align: center;
    color: #25344f;
    font-size: 18px;
    font-weight: 800;
}

.services-create-calendar__weekdays,
.services-create-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.services-create-calendar__weekdays {
    margin-bottom: 10px;
}

.services-create-calendar__weekdays span {
    text-align: center;
    color: #a2adc0;
    font-size: 12px;
    font-weight: 700;
}

.services-create-calendar__day {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #293345;
    font-size: 15px;
    font-weight: 700;
}

.services-create-calendar__day.is-selected {
    background: #d85a4b;
    color: #ffffff;
}

.services-create-availability__selected {
    display: grid;
    gap: 12px;
}

.services-create-date-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 0 16px;
    border-radius: 10px;
    background: #f7f9fd;
    color: #3b4352;
    font-size: 14px;
}

.services-create-date-chip button {
    border: 0;
    background: transparent;
    color: #ef4a3a;
    font-size: 22px;
    line-height: 1;
}

.services-create-weekdays {
    display: grid;
    gap: 16px;
}

.services-create-weekday {
    display: flex;
    align-items: center;
    gap: 14px;
}

.services-create-weekday input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-create-weekday span {
    width: 32px;
    height: 32px;
    border: 2px solid #d8e0ee;
    border-radius: 4px;
    background: #ffffff;
    flex-shrink: 0;
}

.services-create-weekday input:checked + span {
    background: #5f86ef;
    border-color: #5f86ef;
    box-shadow: inset 0 0 0 6px #ffffff;
}

.services-create-weekday strong {
    color: #202f45;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 991px) {
    #serviceGroupModal .modal-dialog {
        max-width: calc(100vw - 28px);
        margin: 14px auto;
    }

    .services-group-form__grid {
        grid-template-columns: 1fr;
    }

    .services-group-color-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: none;
    }

    .services-group-modal__footer {
        grid-template-columns: 1fr;
    }

    .services-create-modal__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-create-dialog {
        max-width: 100vw !important;
        width: 100vw;
        margin: 0;
    }

    .services-create-grid,
    .services-create-variant-row,
    .services-create-row {
        grid-template-columns: 1fr;
    }

    .services-create-field--span2 {
        grid-column: auto;
    }

    .services-create-media-actions {
        grid-template-columns: 1fr;
    }

    .services-create-modal__footer {
        justify-content: stretch;
        flex-direction: column;
    }

    .services-create-modal__footer .customer-footer-btn {
        width: 100%;
    }

    .services-create-drawer {
        width: min(100vw, 420px);
    }

    .services-create-location-card__prices,
    .services-create-product-row {
        grid-template-columns: 1fr;
    }
}

.vouchers-shell {
    position: relative;
    min-height: 72vh;
}

.vouchers-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 34px;
}

.vouchers-toolbar__group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.vouchers-toolbar__group--end {
    margin-left: auto;
}

.vouchers-filter-chips {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vouchers-filter-chip {
    min-width: 58px;
    height: 48px;
    padding: 0 18px;
    border: 1px solid #e1e8f3;
    border-radius: 8px;
    background: #ffffff;
    color: #626d7a;
    font-size: 18px;
    font-weight: 700;
}

.vouchers-filter-chip.is-active {
    background: #f3f8ff;
    color: #111d35;
}

.vouchers-search {
    min-width: 310px;
}

.vouchers-empty-card {
    max-width: 990px;
    margin: 0 auto;
    min-height: 344px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    border: 1px solid #e7eef8;
    border-radius: 4px;
    background: #f7f7f7;
}

.vouchers-empty-card__icon {
    position: relative;
    width: 82px;
    height: 70px;
    margin-bottom: 14px;
}

.vouchers-empty-card__icon span {
    position: absolute;
    width: 30px;
    height: 42px;
    border: 2px solid #d8dbe0;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

.vouchers-empty-card__icon span:nth-child(1) {
    left: 8px;
    top: 12px;
    transform: rotate(-18deg);
}

.vouchers-empty-card__icon span:nth-child(2) {
    left: 26px;
    top: 6px;
}

.vouchers-empty-card__icon span:nth-child(3) {
    left: 44px;
    top: 12px;
    transform: rotate(18deg);
}

.vouchers-empty-card h2 {
    margin: 0 0 12px;
    color: #6c7077;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
}

.vouchers-empty-card p {
    max-width: 620px;
    margin: 0 0 18px;
    color: #777b82;
    font-size: 18px;
    text-align: center;
    line-height: 1.45;
}

.vouchers-empty-action {
    min-width: 242px;
    padding: 14px 20px;
    border: 1px solid #d7e5f7;
    border-radius: 10px;
    background: #ffffff;
    color: #5d95ff;
    font-size: 18px;
    font-weight: 700;
}

.vouchers-action-modal {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.vouchers-action-row,
.vouchers-action-close {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border: 0;
    background: #ffffff;
    color: #2f3339;
    font-size: 24px;
    text-align: left;
}

.vouchers-action-row + .vouchers-action-row {
    border-top: 1px solid #eef2f7;
}

.vouchers-action-close {
    background: #63b4ff;
    color: #ffffff;
}

.vouchers-action-row i,
.vouchers-action-close i {
    font-size: 28px;
}

.vouchers-editor {
    border: 0;
}

.vouchers-editor-tabs {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
    border-bottom: 1px solid #e7eef8;
}

.vouchers-editor-tab {
    min-width: 190px;
    padding: 18px 10px;
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: #30343c;
    font-size: 16px;
    font-weight: 700;
}

.vouchers-editor-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.vouchers-editor-layout {
    max-width: 1220px;
    margin: 0 auto;
}

.vouchers-editor-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vouchers-editor-grid,
.vouchers-preview-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vouchers-editor-grid {
    gap: 18px;
    padding: 18px;
    border: 1px solid #e7eef8;
    border-radius: 4px;
    background: #ffffff;
}

.vouchers-editor-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vouchers-editor-col label {
    margin: 0;
    color: #2e3540;
    font-size: 16px;
}

.vouchers-editor-col small {
    color: #6f7d8d;
    font-size: 13px;
    line-height: 1.35;
}

.vouchers-money-input {
    font-size: 18px;
}

.vouchers-stepper {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    min-height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f5f8;
}

.vouchers-stepper button,
.vouchers-stepper span {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    font-size: 24px;
    color: #28394f;
}

.vouchers-preview-shell {
    padding: 18px;
    border: 1px solid #e7eef8;
    border-radius: 4px;
    background: #ffffff;
}

.vouchers-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.vouchers-preview-head strong {
    font-size: 18px;
}

.vouchers-preview-switch {
    position: relative;
    width: 50px;
    height: 28px;
    border-radius: 999px;
    background: #5b84e6;
}

.vouchers-preview-switch::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
}

.vouchers-preview-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid #dfe9f5;
    border-radius: 24px;
}

.vouchers-preview-card::before,
.vouchers-preview-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dfe9f5;
    transform: translateY(-50%);
    z-index: 2;
}

.vouchers-preview-card::before {
    left: -21px;
}

.vouchers-preview-card::after {
    right: -21px;
}

.vouchers-preview-left,
.vouchers-preview-right {
    padding: 30px 32px;
}

.vouchers-preview-left {
    background: #ffffff;
    text-align: center;
}

.vouchers-preview-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.vouchers-preview-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 700;
}

.vouchers-preview-brand i {
    color: #b6becb;
    font-size: 26px;
}

.vouchers-preview-qr {
    width: 170px;
    height: 170px;
    margin: 0 auto 18px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.04) 75%, transparent 75%),
        linear-gradient(rgba(0,0,0,0.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.04) 75%, transparent 75%);
    background-size: 38px 38px;
}

.vouchers-preview-left p,
.vouchers-preview-left span {
    margin: 0;
    color: #37404d;
    font-size: 16px;
}

#voucherServiceModal .modal-content,
#voucherGiftModal .modal-content {
    min-height: 100vh;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: #ffffff;
}

#voucherServiceModal .customer-modal__header,
#voucherGiftModal .customer-modal__header {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 18px;
}

#voucherServiceModal .customer-modal__header h2,
#voucherGiftModal .customer-modal__header h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #5c8ef5;
    font-size: 24px;
    font-weight: 800;
}

#voucherServiceModal .customer-modal__header .btn-close,
#voucherGiftModal .customer-modal__header .btn-close {
    margin: 0;
    font-size: 15px;
}

#voucherServiceModal .customer-modal__body,
#voucherGiftModal .customer-modal__body {
    padding: 16px 0 0;
    overflow-y: auto;
    padding-bottom: 110px;
}

#voucherGiftModal .modal-content,
#voucherGiftModal .customer-modal,
#voucherGiftModal .customer-modal__body,
#voucherGiftModal .customer-modal__header {
    background: #ffffff;
}

#voucherGiftModal .customer-modal__body {
    overflow-y: auto;
    overflow-x: visible;
    padding-bottom: 140px;
}

#voucherServiceModal .modal-content,
#voucherGiftModal .modal-content {
    position: relative;
}

#voucherServiceModal .vouchers-editor-layout,
#voucherGiftModal .vouchers-editor-layout {
    max-width: 760px;
}

#voucherGiftModal .vouchers-editor-layout {
    padding-bottom: 180px;
}

#voucherServiceModal .vouchers-editor-form,
#voucherGiftModal .vouchers-editor-form {
    gap: 14px;
}

#voucherServiceModal .vouchers-editor-grid,
#voucherGiftModal .vouchers-editor-grid {
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
}

#voucherServiceModal .vouchers-editor-col,
#voucherGiftModal .vouchers-editor-col {
    gap: 8px;
}

#voucherServiceModal .vouchers-editor-col label,
#voucherGiftModal .vouchers-editor-col label {
    font-size: 13px;
}

#voucherServiceModal .vouchers-editor-col small,
#voucherGiftModal .vouchers-editor-col small {
    font-size: 11px;
}

#voucherServiceModal .customer-input-flat,
#voucherGiftModal .customer-input-flat,
#voucherServiceModal .customer-picker,
#voucherGiftModal .customer-picker,
#voucherServiceModal .customer-segmented button,
#voucherGiftModal .customer-segmented button {
    min-height: 46px;
    border-radius: 10px;
    font-size: 13px;
    color: #111111;
}

#voucherServiceModal .customer-input-flat::placeholder,
#voucherGiftModal .customer-input-flat::placeholder,
#voucherServiceModal .customer-picker span,
#voucherGiftModal .customer-picker span,
#voucherServiceModal .customer-picker i,
#voucherGiftModal .customer-picker i {
    color: #111111;
}

#voucherServiceModal .vouchers-quantity-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#voucherServiceModal .vouchers-quantity-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    background: #f5f7fb;
}

#voucherServiceModal .vouchers-quantity-box > span {
    flex: 1;
    text-align: center;
    color: #263a58;
    font-size: 16px;
    font-weight: 600;
}

#voucherServiceModal .vouchers-quantity-box__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

#voucherServiceModal .vouchers-quantity-box__actions button {
    border: 0;
    background: transparent;
    color: #263a58;
    font-size: 24px;
    font-weight: 700;
}

#voucherServiceModal .customer-picker strong,
#voucherGiftModal .customer-picker strong,
#voucherServiceModal .customer-picker i,
#voucherGiftModal .customer-picker i {
    font-size: 12px;
    color: #111111;
}

#voucherServiceModal .customer-toggle-row,
#voucherGiftModal .customer-toggle-row {
    min-height: 38px;
}

#voucherServiceModal .sales-switch__track,
#voucherGiftModal .sales-switch__track {
    width: 54px;
    height: 32px;
    border: 0;
    background: #d8dee8;
    box-shadow: none;
}

#voucherServiceModal .sales-switch__track::after,
#voucherGiftModal .sales-switch__track::after {
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
}

#voucherServiceModal .sales-switch__track.is-active,
#voucherGiftModal .sales-switch__track.is-active {
    background: #5b84e6;
}

#voucherServiceModal .sales-switch__track.is-active::after,
#voucherGiftModal .sales-switch__track.is-active::after {
    transform: translateX(22px);
}

#voucherServiceModal .vouchers-money-input,
#voucherGiftModal .vouchers-money-input {
    font-size: 15px;
    color: #111111;
}

#voucherServiceModal textarea.customer-input-flat,
#voucherGiftModal textarea.customer-input-flat {
    min-height: 108px;
}

#voucherServiceModal .vouchers-preview-shell,
#voucherGiftModal .vouchers-preview-shell {
    padding: 14px;
    border-radius: 10px;
}

#voucherServiceModal .vouchers-preview-head,
#voucherGiftModal .vouchers-preview-head {
    margin-bottom: 14px;
}

#voucherServiceModal .vouchers-preview-head strong,
#voucherGiftModal .vouchers-preview-head strong {
    font-size: 18px;
    font-weight: 800;
}

#voucherServiceModal .vouchers-preview-body,
#voucherGiftModal .vouchers-preview-body {
    min-height: 110px;
    border: 1px solid #e7eef8;
    border-radius: 12px;
    background: #ffffff;
}

#voucherServiceModal .vouchers-preview-switch,
#voucherGiftModal .vouchers-preview-switch {
    width: 42px;
    height: 24px;
    border: 0;
    padding: 0;
    background: #d8deea;
    cursor: pointer;
}

#voucherServiceModal .vouchers-preview-switch::after,
#voucherGiftModal .vouchers-preview-switch::after {
    left: 3px;
    right: auto;
    top: 3px;
    width: 18px;
    height: 18px;
}

#voucherServiceModal .vouchers-preview-switch.is-active,
#voucherGiftModal .vouchers-preview-switch.is-active {
    background: #5b84e6;
}

#voucherServiceModal .vouchers-preview-switch.is-active::after,
#voucherGiftModal .vouchers-preview-switch.is-active::after {
    left: auto;
    right: 3px;
}

#voucherServiceModal .vouchers-preview-empty,
#voucherGiftModal .vouchers-preview-empty {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 18px 22px;
    border: 1px solid #e7eef8;
    border-radius: 12px;
    color: #7b879a;
    font-size: 16px;
    text-align: center;
    background: #ffffff;
}

#voucherServiceModal .vouchers-preview-card,
#voucherGiftModal .vouchers-preview-card {
    min-height: 235px;
    border-radius: 18px;
}

#voucherServiceModal .vouchers-preview-card::before,
#voucherGiftModal .vouchers-preview-card::before,
#voucherServiceModal .vouchers-preview-card::after,
#voucherGiftModal .vouchers-preview-card::after {
    width: 28px;
    height: 28px;
}

#voucherServiceModal .vouchers-preview-card::before,
#voucherGiftModal .vouchers-preview-card::before {
    left: -14px;
}

#voucherServiceModal .vouchers-preview-card::after,
#voucherGiftModal .vouchers-preview-card::after {
    right: -14px;
}

#voucherServiceModal .vouchers-preview-left,
#voucherGiftModal .vouchers-preview-left,
#voucherServiceModal .vouchers-preview-right,
#voucherGiftModal .vouchers-preview-right {
    padding: 18px 20px;
}

#voucherServiceModal .vouchers-preview-brand,
#voucherGiftModal .vouchers-preview-brand {
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
}

#voucherServiceModal .vouchers-preview-brand i,
#voucherGiftModal .vouchers-preview-brand i {
    font-size: 20px;
}

#voucherServiceModal .vouchers-preview-qr,
#voucherGiftModal .vouchers-preview-qr {
    width: 112px;
    height: 112px;
    margin: 0 auto 12px;
    background-size: 24px 24px;
}

#voucherServiceModal .vouchers-preview-left p,
#voucherGiftModal .vouchers-preview-left p,
#voucherServiceModal .vouchers-preview-left span,
#voucherGiftModal .vouchers-preview-left span,
#voucherServiceModal .vouchers-preview-right span,
#voucherGiftModal .vouchers-preview-right span {
    font-size: 12px;
}

#voucherServiceModal .vouchers-preview-right strong,
#voucherGiftModal .vouchers-preview-right strong {
    font-size: 18px;
}

#voucherServiceModal .customer-modal__footer,
#voucherGiftModal .customer-modal__footer {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}

#voucherServiceModal .customer-footer-btn,
#voucherGiftModal .customer-footer-btn {
    min-width: 116px;
    min-height: 42px;
    border-radius: 10px;
    font-size: 14px;
}

#voucherServiceModal .voucher-service-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(430px, 100%);
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e5edf8;
    box-shadow: -10px 0 30px rgba(25, 43, 74, 0.08);
    z-index: 35;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

#voucherServiceModal .voucher-service-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#voucherServiceModal .voucher-service-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eef3fb;
}

#voucherServiceModal .voucher-service-panel__head strong {
    color: #1c2d49;
    font-size: 18px;
    font-weight: 700;
}

#voucherServiceModal .voucher-service-panel__close {
    border: 0;
    background: transparent;
    color: #5f6673;
    font-size: 22px;
}

#voucherServiceModal .voucher-service-panel__body {
    flex: 1;
    overflow-y: auto;
    position: relative;
    padding: 18px 20px 20px;
}

#voucherServiceModal .voucher-service-panel__search {
    display: block;
    width: 100%;
}

#voucherServiceModal .voucher-service-panel__search input {
    width: 100%;
    min-height: 60px;
    padding: 0 18px;
    border: 1px solid #d7e3ff;
    border-radius: 12px;
    background: #f7f8fb;
    color: #293d5b;
    font-size: 15px;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

#voucherServiceModal .voucher-service-panel__search input::placeholder {
    color: #b8c1d1;
}

#voucherServiceModal .voucher-service-panel__search input:focus {
    border-color: #5d86f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(93, 134, 241, 0.12);
}

#voucherServiceModal .voucher-service-panel__list {
    position: absolute;
    top: 88px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    border: 1px solid #dfe6f4;
    border-radius: 10px;
    overflow: auto;
    max-height: min(420px, calc(100vh - 240px));
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(36, 50, 72, 0.14);
    z-index: 5;
}

#voucherServiceModal .voucher-service-panel__list::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 56px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #dfe6f4;
    border-left: 1px solid #dfe6f4;
    background: #ffffff;
    transform: rotate(45deg);
}

#voucherServiceModal .voucher-service-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-top: 1px solid #edf2fa;
    background: #ffffff;
    cursor: pointer;
}

#voucherServiceModal .voucher-service-option:first-child {
    border-top: 0;
}

#voucherServiceModal .voucher-service-option.is-selected {
    background: #f2f6fc;
}

#voucherServiceModal .voucher-service-option__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#voucherServiceModal .voucher-service-option__meta strong {
    color: #111d35;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

#voucherServiceModal .voucher-service-option__meta span {
    color: #7a8597;
    font-size: 12px;
}

#voucherServiceModal .voucher-service-option__meta i {
    font-size: 12px;
    vertical-align: middle;
}

#voucherServiceModal .voucher-service-option__stepper {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #4c7df0;
}

#voucherServiceModal .voucher-service-option__stepper span {
    min-width: 10px;
    color: #263a58;
    font-size: 15px;
    text-align: center;
}

#voucherServiceModal .voucher-service-option__stepper button,
#voucherServiceModal .voucher-service-option__add,
#voucherServiceModal .voucher-service-option__remove {
    border: 0;
    background: transparent;
    color: #4c7df0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

#voucherServiceModal .voucher-service-option__remove {
    color: #e34d67;
}

#voucherServiceModal .voucher-service-panel__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 18px 16px;
    border-radius: 10px;
    background: #f7f7f7;
    color: #243650;
    font-size: 14px;
    line-height: 1.45;
}

#voucherServiceModal .voucher-service-panel.is-searching .voucher-service-panel__notice {
    margin-top: 250px;
}

#voucherServiceModal .voucher-service-panel__selected {
    display: grid;
    gap: 0;
    margin-top: 18px;
}

#voucherServiceModal .voucher-service-selected__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background: #f7f9fc;
    border-top: 1px solid #edf2fa;
}

#voucherServiceModal .voucher-service-selected__item:first-child {
    border-top: 0;
}

#voucherServiceModal .voucher-service-selected__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#voucherServiceModal .voucher-service-selected__meta strong {
    color: #111d35;
    font-size: 18px;
    font-weight: 500;
}

#voucherServiceModal .voucher-service-selected__meta span {
    color: #7a8597;
    font-size: 14px;
}

#voucherServiceModal .voucher-service-panel__notice i {
    font-size: 26px;
    color: #2f3339;
}

#voucherServiceModal .voucher-service-panel__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 20px;
    border-top: 1px solid #eef3fb;
    background: #ffffff;
}

#voucherServiceModal .voucher-service-panel__button {
    flex: 1;
    min-height: 52px;
    border: 1px solid #dfe7f4;
    border-radius: 10px;
    background: #ffffff;
    color: #151f35;
    font-size: 15px;
    font-weight: 700;
}

#voucherServiceModal .voucher-service-panel__button--primary {
    color: #5e85f2;
}

#voucherServiceModal .voucher-expiry-picker,
#voucherGiftModal .voucher-expiry-picker {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 8px;
}

#voucherServiceModal .voucher-expiry-picker .customer-picker,
#voucherGiftModal .voucher-expiry-picker .customer-picker {
    width: 100%;
}

#voucherServiceModal .voucher-expiry-picker.is-specific .customer-picker,
#voucherGiftModal .voucher-expiry-picker.is-specific .customer-picker {
    justify-content: flex-start;
    gap: 10px;
    padding-right: 44px;
}

#voucherServiceModal .voucher-expiry-picker.is-specific .customer-picker i,
#voucherGiftModal .voucher-expiry-picker.is-specific .customer-picker i {
    order: -1;
    font-size: 18px;
    color: #c0c8d6;
}

#voucherServiceModal .voucher-expiry-picker.is-specific .customer-picker span,
#voucherGiftModal .voucher-expiry-picker.is-specific .customer-picker span {
    color: #111111;
}

#voucherServiceModal .voucher-expiry-picker__clear,
#voucherGiftModal .voucher-expiry-picker__clear {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c0c8d6;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, color 160ms ease;
}

#voucherServiceModal .voucher-expiry-picker.has-value:hover .voucher-expiry-picker__clear,
#voucherServiceModal .voucher-expiry-picker.has-value:focus-within .voucher-expiry-picker__clear,
#voucherGiftModal .voucher-expiry-picker.has-value:hover .voucher-expiry-picker__clear,
#voucherGiftModal .voucher-expiry-picker.has-value:focus-within .voucher-expiry-picker__clear {
    opacity: 1;
    pointer-events: auto;
}

#voucherServiceModal .voucher-expiry-picker__clear i,
#voucherGiftModal .voucher-expiry-picker__clear i {
    font-size: 18px;
}

#voucherServiceModal .voucher-expiry-dropdown,
#voucherGiftModal .voucher-expiry-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 430px;
    overflow: auto;
    padding: 8px 0;
    border: 1px solid #dfe6f4;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(36, 50, 72, 0.14);
    z-index: 20;
}

#voucherServiceModal .voucher-expiry-dropdown::before,
#voucherGiftModal .voucher-expiry-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 44px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #dfe6f4;
    border-left: 1px solid #dfe6f4;
    background: #ffffff;
    transform: rotate(45deg);
}

#voucherServiceModal .voucher-expiry-option,
#voucherGiftModal .voucher-expiry-option {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    background: #ffffff;
    color: #6c7482;
    font-size: 16px;
    text-align: left;
}

#voucherServiceModal .voucher-expiry-option.is-active,
#voucherGiftModal .voucher-expiry-option.is-active {
    background: #eef2f8;
    color: #111111;
    font-weight: 700;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar,
#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar.open,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar.open {
    position: absolute;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 0;
    border: 1px solid #dfe6f4;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(36, 50, 72, 0.14);
    z-index: 21;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar::before,
#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar::after,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar::before,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar::after {
    display: none;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar.arrowTop::before,
#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar.arrowTop::after,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar.arrowTop::before,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar.arrowTop::after {
    display: none;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar .flatpickr-innerContainer,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar .flatpickr-innerContainer {
    overflow: hidden;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar .flatpickr-days,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar .flatpickr-days {
    width: 100% !important;
}

#voucherServiceModal .voucher-expiry-picker .flatpickr-calendar .dayContainer,
#voucherGiftModal .voucher-expiry-picker .flatpickr-calendar .dayContainer {
    min-width: 100%;
    max-width: 100%;
}

#voucherServiceModal .voucher-location-panel,
#voucherGiftModal .voucher-location-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(430px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e5edf8;
    box-shadow: -10px 0 30px rgba(25, 43, 74, 0.08);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    z-index: 36;
}

#voucherServiceModal .voucher-location-panel.is-open,
#voucherGiftModal .voucher-location-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#voucherServiceModal .voucher-location-panel__head,
#voucherServiceModal .voucher-location-panel__footer,
#voucherGiftModal .voucher-location-panel__head,
#voucherGiftModal .voucher-location-panel__footer {
    padding: 18px 24px;
    border-bottom: 1px solid #eef3fb;
}

#voucherServiceModal .voucher-location-panel__footer,
#voucherGiftModal .voucher-location-panel__footer {
    margin-top: auto;
    border-top: 1px solid #eef3fb;
    border-bottom: 0;
}

#voucherServiceModal .voucher-location-panel__head,
#voucherGiftModal .voucher-location-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#voucherServiceModal .voucher-location-panel__head strong,
#voucherGiftModal .voucher-location-panel__head strong {
    color: #111111;
    font-size: 18px;
}

#voucherServiceModal .voucher-location-panel__close,
#voucherGiftModal .voucher-location-panel__close {
    border: 0;
    background: transparent;
    color: #5f6673;
    font-size: 22px;
}

#voucherServiceModal .voucher-location-panel__body,
#voucherGiftModal .voucher-location-panel__body {
    flex: 1;
    padding: 18px 24px;
    overflow: auto;
}

#voucherServiceModal .voucher-location-panel__search,
#voucherGiftModal .voucher-location-panel__search {
    position: relative;
    display: block;
    margin-bottom: 18px;
}

#voucherServiceModal .voucher-location-panel__search input,
#voucherGiftModal .voucher-location-panel__search input {
    width: 100%;
    min-height: 58px;
    padding: 0 56px 0 18px;
    border: 0;
    border-radius: 10px;
    background: #f5f6f8;
    color: #111111;
    font-size: 15px;
}

#voucherServiceModal .voucher-location-panel__search input::placeholder,
#voucherServiceModal .voucher-location-panel__search i,
#voucherGiftModal .voucher-location-panel__search input::placeholder,
#voucherGiftModal .voucher-location-panel__search i {
    color: #111111;
}

#voucherServiceModal .voucher-location-panel__search i,
#voucherGiftModal .voucher-location-panel__search i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

#voucherServiceModal .voucher-location-option,
#voucherGiftModal .voucher-location-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border: 0;
    border-top: 1px solid #edf2f9;
    background: transparent;
    color: #111111;
    font-size: 16px;
    text-align: left;
}

#voucherServiceModal .voucher-location-option:first-child,
#voucherGiftModal .voucher-location-option:first-child {
    border-top: 0;
}

#voucherServiceModal .voucher-location-option i,
#voucherGiftModal .voucher-location-option i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: #d7dfea;
    color: transparent;
    font-size: 24px;
}

#voucherServiceModal .voucher-location-option.is-selected i,
#voucherGiftModal .voucher-location-option.is-selected i {
    background: #5b84e6;
    color: #ffffff;
}

#voucherServiceModal .voucher-location-panel__button,
#voucherGiftModal .voucher-location-panel__button {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #111111;
    font-size: 16px;
    font-weight: 700;
}

.vouchers-preview-left span {
    display: block;
    margin-top: 22px;
    color: #6b7787;
}

.vouchers-preview-right strong {
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #111d35;
}

.vouchers-preview-services {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 22px;
}

.vouchers-preview-services span {
    margin-top: 0;
    color: #111111;
    font-size: 16px;
}

.vouchers-preview-message {
    margin: 34px 0 0;
    color: #111111;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
}

.vouchers-preview-right span {
    margin-top: auto;
    color: #1f2e43;
    font-size: 16px;
}

.vouchers-preview-services span {
    margin-top: 0;
}

.vouchers-preview-right span i {
    margin-right: 6px;
}

.vouchers-preview-card--service .vouchers-preview-right {
    background: linear-gradient(180deg, #fff8a6 0%, #fff46f 100%);
}

.vouchers-preview-card--class .vouchers-preview-right {
    background: linear-gradient(180deg, #c8f7ff 0%, #9befff 100%);
}

.vouchers-preview-card--gift .vouchers-preview-right {
    background: linear-gradient(180deg, #d6efff 0%, #9ed7ff 100%);
}

.analytics-shell {
    position: relative;
}

.analytics-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
    margin: 0 auto 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 55;
}

.analytics-tab {
    padding: var(--tab-pad-y) 10px calc(var(--tab-pad-y) + 2px);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #111111;
    font-size: var(--tab-font);
    font-weight: 700;
}

.analytics-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.analytics-panels {
    padding-top: 18px;
}

.analytics-panel {
    display: none;
}

.analytics-panel.is-active {
    display: block;
}

.analytics-toolbar,
.analytics-detail-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.analytics-toolbar {
    margin-bottom: 22px;
}

.analytics-toolbar__group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.analytics-toolbar__group--end {
    margin-left: auto;
}

.analytics-toolbar .dashboard-filter--shop,
.analytics-detail-toolbar .dashboard-filter--shop {
    min-width: 242px;
}

.analytics-staff-filter {
    min-width: 238px;
    max-width: 238px;
}

.analytics-filter-menu,
.reviews-filter-menu {
    min-width: 240px;
    padding: 8px;
    border: 1px solid #e3ebf6;
    border-radius: 16px;
    box-shadow: 0 18px 32px rgba(17, 44, 78, 0.12);
}

.analytics-filter-option {
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 600;
}

.analytics-filter-option.is-active,
.analytics-filter-option:active {
    background: #edf5ff;
    color: #1f4d8f;
}

.analytics-overview-grid,
.analytics-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.analytics-overview-card,
.analytics-report-card,
.analytics-report-detail {
    border: 1px solid #e3ebf6;
    background: #ffffff;
}

.analytics-overview-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 198px;
    padding: 24px 22px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.analytics-overview-card h3 {
    margin: 0 0 10px;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 500;
    color: #161f31;
}

.analytics-overview-card__value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 0;
}

.analytics-overview-card__value strong,
.analytics-overview-card__value span {
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #2e3138;
}

.analytics-overview-card__details {
    display: none;
    margin-top: 14px;
    color: #414853;
    font-size: 14px;
    line-height: 1.35;
}

.analytics-overview-card__details > div + div {
    margin-top: 2px;
}

.analytics-overview-card:hover,
.analytics-overview-card:focus-visible,
.analytics-overview-card.is-expanded {
    border-color: #d4e3f8;
    box-shadow: 0 12px 24px rgba(77, 131, 191, 0.08);
}

.analytics-overview-card:focus-visible {
    outline: 0;
}

.analytics-overview-card.is-expanded {
    justify-content: flex-start;
    min-height: 220px;
    transform: translateY(-1px);
}

.analytics-overview-card.is-expanded .analytics-overview-card__details {
    display: block;
}

.analytics-report-grid {
    position: relative;
}

.analytics-panel[data-analytics-panel="reports"].is-detail-open .analytics-report-grid,
.analytics-panel[data-analytics-panel="reports"].is-detail-open .analytics-report-popover {
    display: none;
}

.analytics-report-card {
    padding: 18px 24px 26px;
    color: #3a404b;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.analytics-report-card.is-selected {
    border-color: #cfe2ff;
    box-shadow: 0 12px 24px rgba(99, 180, 255, 0.08);
}

.analytics-report-card:hover,
.analytics-report-card:focus-visible {
    border-color: #d9e5f3;
    box-shadow: 0 12px 22px rgba(77, 131, 191, 0.08);
    transform: translateY(-1px);
}

.analytics-report-card:focus-visible {
    outline: 0;
}

.analytics-report-card__icon {
    margin-bottom: 22px;
    font-size: 64px;
    color: #3b3f45;
}

.analytics-report-card__content h3 {
    margin: 0 0 12px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 700;
}

.analytics-report-card__content p {
    margin: 0;
    color: #464b54;
    font-size: 18px;
    line-height: 1.5;
}

.analytics-report-popover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    border: 1px solid #dfe8f3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 32px rgba(77, 131, 191, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.18s ease;
    z-index: 12;
}

.analytics-report-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.analytics-report-popover__list {
    max-height: 260px;
    overflow: auto;
    padding: 0;
}

.analytics-report-group {
    display: none;
}

.analytics-report-group.is-active {
    display: block;
}

.analytics-report-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 0;
    border-top: 1px solid #edf2f7;
    background: #ffffff;
    color: #24364f;
    font-size: 16px;
    text-align: left;
}

.analytics-report-group .analytics-report-item:first-child {
    border-top: 0;
}

.analytics-report-item.is-active,
.analytics-report-item:hover {
    background: #f5f9ff;
}

.analytics-report-item i {
    color: #b8bec9;
}

.analytics-report-detail {
    display: none;
    margin-top: 28px;
    padding: 18px 22px 28px;
    border-radius: 0;
}

.analytics-report-detail.is-active {
    display: block;
}

.analytics-report-panels {
    display: flex;
    flex-direction: column;
}

.analytics-report-panel {
    display: none;
}

.analytics-report-panel.is-active {
    display: block;
}

.analytics-report-detail__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}

.analytics-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: #232d3d;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
}

.analytics-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3e4754;
    font-size: 16px;
}

.analytics-switch__track {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #5b84e6;
}

.analytics-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
}

.analytics-report-tables {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.analytics-report-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-report-kpi {
    padding: 18px 20px;
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.analytics-report-kpi span {
    display: block;
    margin-bottom: 10px;
    color: #607086;
    font-size: 14px;
    font-weight: 700;
}

.analytics-report-kpi strong {
    display: block;
    margin-bottom: 8px;
    color: #192538;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.analytics-report-kpi small {
    color: #708196;
    font-size: 13px;
    line-height: 1.4;
}

.analytics-report-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-report-chart {
    margin-bottom: 24px;
}

.analytics-report-chart__frame {
    min-height: 300px;
    padding: 18px 20px 12px;
    border: 1px solid #e7eef8;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.analytics-report-chart__frame--compact {
    min-height: 340px;
}

.analytics-report-chart canvas {
    width: 100% !important;
    height: 260px !important;
}

.analytics-report-chart__frame--compact canvas {
    height: 300px !important;
}

.analytics-report-highlight {
    padding: 16px 18px;
    border: 1px solid #e7eef8;
    border-radius: 14px;
    background: #ffffff;
}

.analytics-report-highlight span {
    display: block;
    margin-bottom: 8px;
    color: #7690b0;
    font-size: 13px;
    font-weight: 700;
}

.analytics-report-highlight strong {
    display: block;
    margin-bottom: 8px;
    color: #1c2940;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.analytics-report-highlight small {
    color: #5f7188;
    font-size: 13px;
    line-height: 1.45;
}

.analytics-table-block h3 {
    margin: 0 0 10px;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.analytics-report-placeholder {
    margin: 0;
    color: #556477;
    font-size: 16px;
    line-height: 1.6;
}

.analytics-table {
    width: 100%;
}

.analytics-table thead th {
    text-align: left !important;
}

.analytics-table tbody td {
    text-align: right;
}

.analytics-table tbody td:first-child,
.analytics-table thead th:first-child {
    text-align: left !important;
}

.analytics-table--empty tbody td {
    text-align: center !important;
}

.analytics-detail-menu {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 70;
    display: none;
}

.analytics-panel[data-analytics-panel="reports"].is-detail-open .analytics-detail-menu {
    display: block;
}

.analytics-detail-menu__trigger {
    width: 74px;
    height: 74px;
    border: 0;
    border-radius: 50%;
    background: #63b4ff;
    color: #ffffff;
    font-size: 28px;
    box-shadow: 0 18px 30px rgba(79, 132, 255, 0.28);
}

.analytics-detail-menu__panel {
    position: absolute;
    right: 0;
    bottom: 92px;
    width: 320px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 8px 0;
    border: 1px solid #dce6f4;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 48px rgba(38, 75, 142, 0.18);
    overflow: hidden;
}

.analytics-detail-menu__group {
    display: none;
}

.analytics-detail-menu__group.is-active {
    display: block;
}

.analytics-detail-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border: 0;
    border-bottom: 1px solid #edf2fb;
    background: #ffffff;
    color: #24324b;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}

.analytics-detail-menu__item:last-child {
    border-bottom: 0;
}

.analytics-detail-menu__item.is-active,
.analytics-detail-menu__item:hover {
    background: #f3f8ff;
    color: #4f85ff;
}

.analytics-detail-menu__item i {
    color: #9cb4e6;
    font-size: 18px;
}

.reviews-shell {
    position: relative;
}

.reviews-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
    margin: 0 auto 0;
    border-bottom: 1px solid #e7eef8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 55;
}

.reviews-tab {
    padding: var(--tab-pad-y) 10px calc(var(--tab-pad-y) + 2px);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #141414;
    font-size: var(--tab-font);
    font-weight: 700;
}

.reviews-tab.is-active {
    color: #63b4ff;
    border-bottom-color: #63b4ff;
}

.reviews-panels {
    padding-top: 18px;
}

.reviews-panel {
    display: none;
}

.reviews-panel.is-active {
    display: block;
}

.reviews-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}

.reviews-toolbar__group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.reviews-toolbar__group--end {
    margin-left: auto;
}

.reviews-filter-rating {
    min-width: 210px;
    justify-content: space-between;
}

.reviews-filter-rating--logs {
    min-width: 360px;
}

.reviews-search {
    min-width: 430px;
}

.reviews-rating-menu {
    min-width: 290px;
}

.reviews-rating-option {
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1f2937;
    text-align: left;
}

.reviews-rating-option strong {
    font-size: 16px;
    font-weight: 700;
}

.reviews-rating-option__stars {
    display: flex;
    gap: 8px;
    color: #e8edf5;
    font-size: 24px;
}

.reviews-rating-option__stars .is-filled {
    color: #f2b93b;
}

.reviews-rating-option.is-active,
.reviews-rating-option:hover {
    background: #f7faff;
}

.reviews-log-filter-menu {
    min-width: 560px;
}

.reviews-log-filter-option {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.9fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #223955;
    text-align: left;
}

.reviews-log-filter-option strong {
    font-size: 14px;
    font-weight: 700;
}

.reviews-log-filter-option span {
    color: #6d7a8d;
    font-size: 13px;
}

.reviews-log-filter-option.is-active,
.reviews-log-filter-option:hover {
    background: #f7faff;
}

.reviews-summary-card {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 22px 26px;
    border: 1px solid #e7eef8;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(99, 180, 255, 0.08);
}

.reviews-summary-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #30343c;
}

.reviews-summary-cell strong {
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
}

.reviews-summary-cell--brand strong {
    font-size: 22px;
}

.reviews-summary-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #f4f6f8;
    color: #606a78;
    font-size: 32px;
}

.reviews-stars {
    display: flex;
    gap: 8px;
    color: #e6ebf3;
    font-size: 20px;
}

.reviews-stars .is-filled {
    color: #63b4ff;
}

.reviews-empty-card {
    min-height: 316px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 26px;
    border: 1px solid #e7eef8;
    background: #f7f7f7;
}

.reviews-empty-card__icon {
    margin-bottom: 10px;
    color: #7b7e84;
    font-size: 72px;
}

.reviews-empty-card h2 {
    margin: 0 0 12px;
    color: #6d7076;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.reviews-empty-card p {
    max-width: 520px;
    margin: 0;
    color: #7d8088;
    font-size: 18px;
    line-height: 1.45;
    text-align: center;
}

.reviews-log-table thead th {
    white-space: nowrap;
}

.sales-agenda-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid #e7eef8;
}


.sales-agenda-customer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 30px 24px;
}

.sales-agenda-customer__avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f0f0f0;
    font-size: 30px;
    color: #73767d;
}

.sales-agenda-customer strong {
    display: block;
    font-size: 20px;
}

.sales-agenda-customer span {
    display: inline-flex;
    margin-top: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 14px;
}

.sales-agenda-more {
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: 24px;
    color: #77797d;
}

.sales-agenda-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 24px;
}

.sales-agenda-actions button {
    padding: 16px 20px;
    border: 0;
    border-radius: 8px;
    background: #f1f1f1;
    color: #a7acb3;
    font-size: 18px;
    font-weight: 700;
}


.dashboard-match {
    display: block;
}

.dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dashboard-section-card {
    padding: 26px 28px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(99, 180, 255, 0.07);
}

.dashboard-section-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
}

.dashboard-section-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #101a31;
}

.dashboard-match__filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dashboard-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid #dfe8f5;
    background: #f8fbff;
    color: #1f2f46;
    font-size: 13px;
    position: relative;
}

.dashboard-filter--wide {
    min-width: 310px;
    justify-content: space-between;
}

.dashboard-filter__select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sales-toolbar,
.customers-toolbar__inner,
.staff-toolbar,
.services-toolbar,
.analytics-toolbar,
.analytics-detail-toolbar,
.reviews-toolbar,
.vouchers-toolbar {
    min-width: 0;
}

.customers-toolbar__group,
.staff-toolbar__group,
.analytics-toolbar__group,
.reviews-toolbar__group,
.vouchers-toolbar__group {
    min-width: 0;
    flex-wrap: nowrap;
}

.customers-toolbar__group--end,
.staff-toolbar__group--end,
.analytics-toolbar__group--end,
.reviews-toolbar__group--end,
.vouchers-toolbar__group--end {
    min-width: 0;
}

:is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) :is(.dashboard-filter, .sales-search-field) {
    min-height: 52px;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    background: #f8fafc;
    color: #263244;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

:is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) :is(.dashboard-filter, .sales-search-field):hover {
    border-color: #d7e1ee;
    background: #f5f7fa;
}

:is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) :is(.dashboard-filter, .sales-search-field) span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) .sales-search-field {
    flex: 1 1 300px;
    justify-content: space-between;
    min-width: 220px;
    max-width: 560px;
    color: #aeb8c8;
    font-weight: 500;
}

.staff-panel[data-staff-panel="attendance"] .staff-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 278px) minmax(220px, 278px) minmax(240px, 1fr);
    gap: 8px;
    align-items: center;
    justify-content: start;
}

.staff-panel[data-staff-panel="attendance"] .staff-toolbar__group:nth-child(2) {
    display: contents;
}

.staff-panel[data-staff-panel="attendance"] .dropdown,
.staff-panel[data-staff-panel="attendance"] .dashboard-filter--shop,
.staff-panel[data-staff-panel="attendance"] .staff-search-short {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
}

.staff-panel[data-staff-panel="attendance"] :is(.dashboard-filter, .sales-search-field) {
    min-height: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
}

.staff-panel[data-staff-panel="attendance"] .staff-mode-switch {
    width: 100%;
    height: 46px;
    padding: 3px;
    border-radius: 14px;
}

.staff-panel[data-staff-panel="attendance"] .staff-mode-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
}

.staff-panel[data-staff-panel="attendance"] .staff-attendance-only {
    display: none;
}

.staff-panel[data-staff-panel="attendance"].is-attendance-mode .staff-attendance-only {
    display: inline-flex;
}

.staff-panel[data-staff-panel="attendance"].is-attendance-mode .staff-toolbar {
    grid-template-columns: minmax(220px, 252px) minmax(216px, 240px) minmax(96px, 112px) minmax(272px, 1fr) minmax(202px, 236px);
    gap: 4px;
}

.staff-panel[data-staff-panel="attendance"].is-attendance-mode .staff-toolbar .staff-search-short {
    min-width: 0;
}

.staff-attendance-export-menu {
    min-width: 120px;
    padding: 8px 0;
    text-align: center;
}

.staff-attendance-export-menu .dropdown-item {
    justify-content: center;
    padding: 12px 22px;
    color: #60646c;
    font-size: 17px;
}

.staff-attendance-table-card {
    border: 1px solid #e7eef8;
    background: #ffffff;
    overflow: hidden;
}

.staff-attendance-scroll {
    max-height: 360px;
    overflow: auto;
}

.staff-attendance-table {
    width: max-content;
    min-width: 1780px;
    border-collapse: separate;
    border-spacing: 0;
}

.staff-attendance-table th,
.staff-attendance-table td {
    min-width: 110px;
    padding: 18px 16px;
    border-bottom: 1px solid #edf2f8;
    background: #ffffff;
    color: #30343c;
    font-size: 15px;
    text-align: left;
    vertical-align: middle;
}

.staff-attendance-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 800;
}

.staff-attendance-table td {
    height: 86px;
}

.staff-attendance-date-col {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 150px !important;
    box-shadow: 1px 0 0 #e7eef8;
}

.staff-attendance-table th.staff-attendance-date-col {
    z-index: 5;
}

.staff-attendance-name {
    max-width: 150px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4f7fe8;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.staff-attendance-selfie {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    margin-right: 10px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #30343c;
    font-size: 28px;
    vertical-align: middle;
}

.staff-attendance-edit-btn {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #eff6ff;
    color: #4f7fe8;
    font-size: 18px;
}

.staff-attendance-edit-btn:hover {
    background: #dcecff;
}

.staff-attendance-detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.staff-attendance-detail-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.34);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.staff-attendance-detail-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 100vw);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #ffffff;
    box-shadow: -18px 0 34px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.18s ease;
}

.staff-attendance-detail-drawer.is-open .staff-attendance-detail-drawer__backdrop {
    opacity: 1;
}

.staff-attendance-detail-drawer.is-open .staff-attendance-detail-drawer__panel {
    transform: translateX(0);
}

.staff-attendance-detail-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid #ebf0f8;
}

.staff-attendance-detail-drawer__head h2 {
    margin: 0;
    color: #1a2234;
    font-size: 22px;
    font-weight: 800;
}

.staff-attendance-detail-drawer__body {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
    padding: 18px 24px 20px;
    min-height: 0;
}

.staff-attendance-detail-drawer__profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.staff-attendance-detail-drawer__person {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.staff-attendance-detail-drawer__person strong {
    color: #273247;
    font-size: 18px;
    font-weight: 800;
}

.staff-attendance-detail-drawer__switch {
    position: relative;
    display: inline-flex;
    width: 54px;
    height: 32px;
    flex: 0 0 auto;
}

.staff-attendance-detail-drawer__switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.staff-attendance-detail-drawer__switch span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #5a84f1;
    box-shadow: inset 0 0 0 1px rgba(90, 132, 241, 0.15);
}

.staff-attendance-detail-drawer__switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.16s ease;
}

.staff-attendance-detail-drawer__switch input:not(:checked) + span {
    background: #d8deea;
}

.staff-attendance-detail-drawer__switch input:not(:checked) + span::after {
    transform: translateX(-22px);
}

.staff-attendance-detail-drawer__blank {
    min-height: 100%;
    background: #ffffff;
}

.inventory-shell {
    display: grid;
    gap: 22px;
}

.inventory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 28px 30px;
    border: 1px solid #dbe8fb;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(143, 196, 255, 0.7), transparent 28%),
        linear-gradient(135deg, #f7fbff 0%, #eef5ff 48%, #f9fbff 100%);
    box-shadow: 0 18px 42px rgba(63, 118, 211, 0.08);
}

.inventory-hero__eyebrow {
    color: #5b85e9;
}

.inventory-hero__title {
    margin: 8px 0 10px;
    color: #22314a;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

.inventory-hero__copy {
    max-width: 760px;
    margin: 0;
    color: #60708e;
    font-size: 15px;
    line-height: 1.6;
}

.inventory-plus-btn {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5d86ed 0%, #74b0ff 100%);
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 18px 28px rgba(93, 134, 237, 0.26);
}

.inventory-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.inventory-metric-card {
    display: grid;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid #e2ebf8;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(24, 51, 90, 0.05);
}

.inventory-metric-card span {
    color: #6f7d95;
    font-size: 13px;
    font-weight: 700;
}

.inventory-metric-card strong {
    color: #20314f;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.inventory-metric-card small {
    color: #92a0b7;
    font-size: 13px;
}

.inventory-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border-radius: 24px;
    background: #edf4ff;
}

.inventory-tab {
    min-height: 52px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #5e6d85;
    font-size: 15px;
    font-weight: 800;
}

.inventory-tab.is-active {
    background: linear-gradient(135deg, #5d86ed 0%, #75b4ff 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(93, 134, 237, 0.24);
}

.inventory-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(220px, 280px) minmax(260px, 1fr);
    gap: 12px;
    align-items: center;
}

.inventory-toolbar .dropdown,
.inventory-toolbar .dashboard-filter,
.inventory-search-field {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
}

.inventory-search-field {
    position: relative;
    padding-right: 46px !important;
}

.inventory-search-field input {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0 46px 0 18px;
    background: transparent;
    color: #34435f;
    font-size: 14px;
    outline: none;
}

.inventory-search-field input::placeholder {
    color: #9aa8bf;
}

.inventory-search-field i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.inventory-panel {
    display: block;
}

.inventory-table-card {
    border: 1px solid #e4edf9;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 54, 92, 0.05);
    overflow: hidden;
}

.inventory-table-card__title {
    padding: 24px 24px 14px;
    color: #22314a;
    font-size: 24px;
    font-weight: 800;
}

.inventory-table-wrap {
    overflow-x: auto;
    border-top: 1px solid #edf2fa;
}

.inventory-table {
    min-width: 920px;
}

.inventory-table td,
.inventory-table th {
    white-space: nowrap;
}

.inventory-table td:first-child,
.inventory-table th:first-child {
    white-space: normal;
}

.inventory-table-footer {
    border-top: 1px solid #edf2fa;
}

.inventory-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.inventory-status--safe {
    background: #edf7ff;
    color: #4c83e7;
}

.inventory-status--attention {
    background: #fff4e8;
    color: #dd8a2f;
}

.inventory-status--accent {
    background: #eef0ff;
    color: #6577ea;
}

.inventory-status--muted {
    background: #f4f6fa;
    color: #7c8798;
}

.inventory-quick-modal {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 28px 60px rgba(22, 41, 76, 0.18);
}

.inventory-quick-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 14px;
}

.inventory-quick-modal__head h2 {
    margin: 0;
    color: #22314a;
    font-size: 26px;
    font-weight: 800;
}

.inventory-quick-modal__body {
    padding: 0 24px 20px;
    color: #62738f;
    font-size: 15px;
    line-height: 1.6;
}

.inventory-quick-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px 24px;
}

@media (max-width: 1100px) {
    .inventory-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .inventory-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .inventory-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px;
    }

    .inventory-plus-btn {
        justify-self: start;
    }

    .inventory-metrics,
    .inventory-tabs,
    .inventory-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-hero__title {
        font-size: 24px;
    }
}

.inventory-shell {
    position: relative;
    gap: 10px;
}

.inventory-panel {
    display: grid;
    gap: 10px;
}

.inventory-toolbar--products {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(110px, 126px) minmax(120px, 138px) minmax(120px, 138px) minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
}

.inventory-hero,
.inventory-metrics {
    display: none;
}

.inventory-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    gap: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid #e5edf8;
}

.inventory-tab {
    min-height: 62px;
    border-radius: 0;
    background: transparent;
    color: #111111;
    font-size: 14px;
    font-weight: 800;
    position: relative;
}

.inventory-tab.is-active {
    background: transparent;
    color: #68a8f8;
    box-shadow: none;
}

.inventory-tab.is-active::after {
    content: "";
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #78abf4;
}

.inventory-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0 2px;
}

.inventory-toolbar--products {
    display: grid;
    grid-template-columns: minmax(230px, 340px) repeat(3, minmax(112px, 126px)) minmax(260px, 1fr);
    gap: 12px;
    align-items: center;
}

.inventory-toolbar--purchases {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(240px, 300px) minmax(120px, 126px) minmax(120px, 126px) minmax(260px, 1fr);
    gap: 12px;
    align-items: center;
}

.inventory-toolbar--opname {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(150px, 170px) 1fr minmax(260px, 320px) minmax(220px, 320px);
    gap: 12px;
    align-items: center;
}

.inventory-toolbar__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.inventory-toolbar .dropdown {
    flex: 0 0 auto;
}

.inventory-toolbar .dashboard-filter,
.inventory-toolbar .sales-search-field {
    min-height: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fbfcff;
}

.inventory-toolbar .dashboard-filter {
    flex: 0 0 auto;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
}

.inventory-toolbar--products .dropdown,
.inventory-toolbar--products .dashboard-filter,
.inventory-toolbar--products .sales-search-field {
    width: 100%;
}

.inventory-toolbar--purchases .dropdown,
.inventory-toolbar--purchases .dashboard-filter,
.inventory-toolbar--purchases .sales-search-field {
    width: 100%;
}

.inventory-toolbar--opname .dropdown,
.inventory-toolbar--opname .dashboard-filter,
.inventory-toolbar--opname .sales-search-field {
    width: 100%;
}

.inventory-toolbar--products .dropdown .ss-dropdown-menu {
    width: 100%;
    min-width: 100%;
}

.inventory-toolbar--purchases .dropdown .ss-dropdown-menu {
    width: 100%;
    min-width: 100%;
}

.inventory-toolbar--opname .dropdown .ss-dropdown-menu {
    width: 100%;
    min-width: 100%;
}

.inventory-toolbar--products .dashboard-filter:not(.dashboard-filter--shop) {
    justify-content: center;
}

.inventory-toolbar--purchases .dashboard-filter:not(.dashboard-filter--shop):not(.dashboard-filter--wide) {
    justify-content: center;
}

.inventory-toolbar--opname .dashboard-filter:not(.dashboard-filter--shop):not(.dashboard-filter--wide) {
    justify-content: center;
}

.inventory-search-field {
    margin-left: auto;
    width: min(100%, 430px);
    padding-right: 42px !important;
}

.inventory-toolbar--products .inventory-search-field {
    margin-left: 0;
    width: 100%;
}

.inventory-toolbar--purchases .inventory-search-field {
    margin-left: 0;
    width: 100%;
}

.inventory-toolbar--opname .inventory-search-field {
    margin-left: 0;
    width: 100%;
}

.inventory-toolbar--opname .inventory-date-trigger {
    min-height: 46px !important;
    height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
}

.inventory-toolbar--opname .inventory-date-trigger__content strong {
    font-size: 12px;
}

.inventory-toolbar--opname .inventory-date-trigger__content small {
    font-size: 10px;
}

.inventory-toolbar--simple {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0 2px;
}

.inventory-master-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 8px 0 2px;
}

.inventory-master-tab {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #d9e5f7;
    border-radius: 12px;
    background: #fbfcff;
    color: #5d6980;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.inventory-master-tab.is-active {
    border-color: #78abf4;
    background: #eef5ff;
    color: #233149;
}

.inventory-master-panel {
    display: grid;
    gap: 10px;
}

.inventory-table--simple tbody tr,
.inventory-table--suppliers tbody tr {
    cursor: pointer;
    transition: background 0.18s ease;
}

.inventory-table--simple tbody tr:hover,
.inventory-table--suppliers tbody tr:hover {
    background: #f6fbff;
}

.inventory-toolbar--simple .inventory-search-field {
    flex: 0 0 360px;
    margin-left: 0;
    width: min(100%, 360px);
}

.inventory-date-trigger {
    min-height: 62px !important;
    height: 62px !important;
    justify-content: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.inventory-date-trigger__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    line-height: 1.15;
}

.inventory-date-trigger__content strong {
    color: #111111;
    font-size: 15px;
    font-weight: 800;
}

.inventory-date-trigger__content small {
    color: #111111;
    font-size: 11px;
    font-weight: 600;
}

.inventory-status-dropdown {
    position: relative;
}

.inventory-status-menu {
    margin-top: 10px !important;
    padding: 18px 0 !important;
    border-radius: 10px;
}

.inventory-status-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-top: 1px solid #e7eef8;
    border-left: 1px solid #e7eef8;
    transform: translateX(-50%) rotate(45deg);
}

.inventory-status-menu .dropdown-item {
    padding: 12px 28px;
    color: #676d78;
    font-size: 15px;
}

.inventory-search-field input {
    padding: 0 44px 0 14px;
    font-size: 12px;
}

.inventory-search-field i {
    right: 16px;
    color: #b6c2d7;
    font-size: 13px;
}

.inventory-table-card {
    border-radius: 0;
    box-shadow: none;
}

.inventory-table-wrap {
    border-top: 1px solid #e8eef7;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.inventory-table {
    min-width: 100%;
}

.inventory-table--products {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
}

.inventory-table--products thead th:nth-child(1),
.inventory-table--products tbody td:nth-child(1) {
    width: 42%;
}

.inventory-table--products thead th:nth-child(2),
.inventory-table--products tbody td:nth-child(2) {
    width: 20%;
}

.inventory-table--products thead th:nth-child(3),
.inventory-table--products tbody td:nth-child(3) {
    width: 20%;
}

.inventory-table--products thead th:nth-child(4),
.inventory-table--products tbody td:nth-child(4) {
    width: 18%;
}

.inventory-table thead th {
    color: #233149;
    font-size: 13px;
    font-weight: 700;
    padding-top: 8px;
    padding-bottom: 6px;
}

.inventory-table tbody td {
    font-size: 13px;
    color: #2f3b50;
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: middle;
}

.inventory-table-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inventory-table-head--end {
    justify-content: flex-end;
}

.inventory-sort {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #c5ccd8;
    font-size: 9px;
    line-height: 1;
}

.inventory-table--purchases thead th:last-child,
.inventory-table--purchases tbody td:last-child {
    text-align: right;
}

.inventory-table--products tbody tr[hidden] {
    display: none;
}

.inventory-table--purchases tbody tr[hidden] {
    display: none;
}

.inventory-table--opname tbody tr[hidden] {
    display: none;
}

.inventory-table--opname tbody tr {
    cursor: pointer;
    transition: background 0.18s ease;
}

.inventory-table--opname tbody tr:hover {
    background: #f4f8ff;
}

.inventory-table--opname .inventory-name-cell strong {
    color: #5f87f4;
}

.inventory-table--opname .inventory-status {
    min-width: 148px;
    min-height: 38px;
    border: 2px solid transparent;
    background: #ffffff;
}

.inventory-table--opname .inventory-status--accent {
    border-color: #5f87f4;
    background: #eef4ff;
    color: #5f87f4;
}

.inventory-table--opname .inventory-status--attention {
    border-color: #e69d34;
    background: #ffffff;
    color: #e69d34;
}

.inventory-table--opname .inventory-status--safe {
    border-color: #63ccdf;
    background: #ffffff;
    color: #63ccdf;
}

.inventory-table--opname .inventory-status--muted {
    border-color: #ea596f;
    background: #ffffff;
    color: #ea596f;
}

.inventory-opname-detail-dialog {
    margin: 0;
    max-width: 100vw;
}

.inventory-opname-detail-modal {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.inventory-opname-detail__header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6edf8;
    background: #ffffff;
}

.inventory-opname-detail__header h2 {
    margin: 0;
    color: #243248;
    font-size: 24px;
    font-weight: 800;
}

.inventory-opname-detail__header .btn-close {
    position: absolute;
    top: 22px;
    right: 22px;
}

.inventory-opname-detail__body {
    width: min(100%, 1220px);
    margin: 0 auto;
    padding: 16px 18px 24px;
    display: grid;
    gap: 14px;
}

.inventory-opname-detail__summary {
    border: 1px solid #dfe7f5;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(36, 50, 72, 0.06);
}

.inventory-opname-detail__summary-top,
.inventory-opname-detail__summary-bottom {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.inventory-opname-detail__summary-top {
    grid-template-columns: minmax(0, 1fr) auto;
    background: #fbfcff;
}

.inventory-opname-detail__summary-top strong {
    display: block;
    color: #243248;
    font-size: 15px;
    font-weight: 800;
}

.inventory-opname-detail__summary-top span {
    color: #5f6b80;
    font-size: 12px;
}

.inventory-opname-detail__summary-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inventory-opname-detail__summary-actions button,
.inventory-opname-detail__review {
    min-width: 96px;
    min-height: 44px;
    border: 1px solid #d9e2f1;
    border-radius: 8px;
    background: #ffffff;
    color: #5f87f4;
    font-size: 13px;
    font-weight: 700;
}

.inventory-opname-detail__summary-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 220px;
}

.inventory-opname-detail__summary-bottom span {
    display: block;
    margin-bottom: 6px;
    color: #5f6b80;
    font-size: 12px;
}

.inventory-opname-detail__summary-bottom strong {
    color: #243248;
    font-size: 15px;
    font-weight: 700;
}

.inventory-opname-detail__review {
    justify-self: end;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    background: linear-gradient(135deg, #7ea6ff 0%, #5f87f4 100%);
    color: #ffffff;
}

.inventory-opname-detail__toolbar {
    display: flex;
    justify-content: flex-end;
}

.inventory-opname-detail__search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 420px);
    min-height: 46px;
    padding: 0 44px 0 14px !important;
    border: 1px solid #dfe7f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(36, 50, 72, 0.05);
    overflow: hidden;
}

.inventory-opname-detail__search input {
    width: 100%;
    color: #243248;
    font-size: 14px;
}

.inventory-opname-detail__search input::placeholder {
    color: #b5bfd2;
}

.inventory-opname-detail__search i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5bfd2;
    font-size: 18px;
}

.inventory-opname-detail__table {
    border: 1px solid #dfe7f5;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
}

.inventory-opname-detail__table table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-opname-detail__table th,
.inventory-opname-detail__table td {
    padding: 12px 12px;
    border-bottom: 1px solid #e8edf6;
    color: #243248;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.inventory-opname-detail__table th {
    color: #243248;
    font-size: 13px;
    font-weight: 800;
}

.inventory-opname-detail__product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inventory-opname-detail__product-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f3f5f8;
    color: #5e6779;
    font-size: 18px;
}

.inventory-opname-detail__product strong {
    color: #5f87f4;
    font-size: 12px;
    font-weight: 500;
}

.inventory-opname-detail__counter {
    width: 156px;
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    overflow: hidden;
    border-radius: 6px;
    background: #f4f4f5;
}

.inventory-opname-detail__counter input {
    border: 0;
    background: #ffffff;
    color: #243248;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.inventory-opname-detail__counter button {
    border: 0;
    background: transparent;
    color: #243248;
    font-size: 18px;
    font-weight: 800;
}

.inventory-opname-detail__difference {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #243248;
    font-size: 13px;
    font-weight: 700;
}

.inventory-opname-detail__difference-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #c3c9d6;
}

.inventory-opname-detail__difference.is-complete .inventory-opname-detail__difference-icon {
    background: #5f87f4;
}

.inventory-opname-detail__difference.is-short .inventory-opname-detail__difference-icon {
    background: #e94f6b;
}

.inventory-opname-detail__difference.is-over .inventory-opname-detail__difference-icon {
    background: #9a9a9a;
}

.inventory-opname-detail__menu {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f8f7fb;
    color: #111827;
    font-size: 17px;
}

.inventory-opname-detail__menu-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.inventory-opname-detail__menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    padding: 8px;
    border: 1px solid #dfe7f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 26px rgba(36, 50, 72, 0.14);
    z-index: 4;
}

.inventory-opname-detail__menu-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    border-top: 1px solid #dfe7f5;
    border-left: 1px solid #dfe7f5;
    background: #ffffff;
}

.inventory-opname-detail__menu-popover button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3c4f71;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    padding: 0 16px;
}

.inventory-opname-mini-dialog {
    max-width: 600px;
}

.inventory-opname-mini-modal,
.inventory-opname-import-modal {
    border-radius: 14px;
    border: 0;
    background: #ffffff;
}

.inventory-opname-mini-modal__header,
.inventory-opname-import-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 10px;
}

.inventory-opname-mini-modal__header h2,
.inventory-opname-import-modal__header h2 {
    margin: 0;
    color: #243248;
    font-size: 24px;
    font-weight: 800;
}

.inventory-opname-mini-modal__body {
    display: grid;
    gap: 14px;
    padding: 8px 22px 16px;
}

.inventory-opname-mini-modal__field {
    display: grid;
    gap: 8px;
}

.inventory-opname-mini-modal__field span {
    color: #38465d;
    font-size: 14px;
    font-weight: 600;
}

.inventory-opname-mini-modal__field small {
    color: #7d8797;
    font-size: 13px;
    text-align: right;
}

.inventory-opname-mini-modal__footer,
.inventory-opname-import-modal__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 24px 22px;
}

.inventory-opname-mini-modal__footer .customer-footer-btn,
.inventory-opname-import-modal__footer .customer-footer-btn {
    min-height: 46px;
    font-size: 14px;
}

.inventory-opname-mini-modal__footer .customer-footer-btn--primary,
.inventory-opname-import-modal__footer .customer-footer-btn--primary {
    background: linear-gradient(135deg, #7ea6ff 0%, #5f87f4 100%);
    color: #ffffff;
}

.inventory-opname-import-dialog {
    max-width: 820px;
}

.inventory-opname-import-modal__body {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 10px 24px 22px;
    text-align: center;
}

.inventory-opname-import-modal__hero {
    display: grid;
    place-items: center;
    min-height: 120px;
}

.inventory-opname-import-modal__files {
    display: inline-flex;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(36, 50, 72, 0.12);
}

.inventory-opname-import-modal__files span {
    width: 56px;
    height: 64px;
    border: 2px solid #dfe7f5;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #6d7d98;
    font-size: 18px;
    font-weight: 800;
}

.inventory-opname-import-modal__body p {
    margin: 0;
    color: #243248;
    font-size: 16px;
}

.inventory-opname-import-modal__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-opname-import-modal__upload {
    min-width: 160px;
    justify-content: center;
}

.inventory-opname-import-modal__meta {
    color: #6c7890;
    font-size: 12px;
}

.inventory-opname-review-dialog {
    margin: 0;
    max-width: 100vw;
}

.inventory-opname-review-modal {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.inventory-opname-review__header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6edf8;
    background: #ffffff;
}

.inventory-opname-review__header h2 {
    margin: 0;
    color: #243248;
    font-size: 24px;
    font-weight: 800;
}

.inventory-opname-review__header .btn-close {
    position: absolute;
    top: 22px;
    right: 22px;
}

.inventory-opname-review__body {
    width: min(100%, 1220px);
    margin: 0 auto;
    padding: 16px 18px 24px;
    display: grid;
    gap: 14px;
}

.inventory-opname-review__summary {
    border: 1px solid #dfe7f5;
    border-radius: 12px;
    overflow: visible;
    position: relative;
    z-index: 4;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(36, 50, 72, 0.06);
}

.inventory-opname-review__summary-top,
.inventory-opname-review__summary-bottom {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.inventory-opname-review__summary-top {
    grid-template-columns: minmax(0, 1fr) auto;
    background: linear-gradient(135deg, #edf4ff 0%, #e4eeff 100%);
}

.inventory-opname-review__summary.is-cancelled .inventory-opname-review__summary-top {
    background: #fbe5ea;
}

.inventory-opname-review__summary.is-complete .inventory-opname-review__summary-top {
    background: #eef9fc;
}

.inventory-opname-review__summary.is-counting .inventory-opname-review__summary-top {
    background: #fff6ea;
}

.inventory-opname-review__summary-top strong {
    display: block;
    color: #243248;
    font-size: 15px;
    font-weight: 800;
}

.inventory-opname-review__summary-top span {
    color: #5f6b80;
    font-size: 12px;
}

.inventory-opname-review__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    min-height: 46px;
    padding: 0 18px;
    border: 2px solid #5f87f4;
    border-radius: 999px;
    background: #eef4ff;
    color: #5f87f4 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.inventory-opname-review__status.is-reviewing {
    border-color: #5f87f4;
    color: #5f87f4 !important;
}

.inventory-opname-review__status.is-cancelled {
    border-color: #ea596f;
    color: #ea596f !important;
}

.inventory-opname-review__status.is-complete {
    border-color: #63ccdf;
    background: #eefcf9;
    color: #63ccdf !important;
}

.inventory-opname-review__status.is-counting {
    border-color: #e69d34;
    color: #e69d34 !important;
}

.inventory-opname-review__summary-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.inventory-opname-review__summary-bottom span {
    display: block;
    margin-bottom: 6px;
    color: #5f6b80;
    font-size: 12px;
}

.inventory-opname-review__summary-bottom strong {
    color: #243248;
    font-size: 15px;
    font-weight: 700;
}

.inventory-opname-review__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.inventory-opname-review__cancelled-meta {
    min-width: 0;
}

.inventory-opname-review__more,
.inventory-opname-review__complete {
    min-width: 106px;
    min-height: 44px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.inventory-opname-review__more {
    border: 1px solid #d9e2f1;
    background: #ffffff;
    color: #243248;
}

.inventory-opname-review__complete {
    border: 0;
    background: linear-gradient(135deg, #7ea6ff 0%, #5f87f4 100%);
    color: #ffffff;
}

.inventory-opname-review__more-wrap {
    position: relative;
    z-index: 40;
}

.inventory-opname-review__more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 8px;
    border: 1px solid #dfe7f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 30px rgba(36, 50, 72, 0.16);
    z-index: 45;
}

.inventory-opname-review__more-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 34px;
    width: 14px;
    height: 14px;
    border-top: 1px solid #dfe7f5;
    border-left: 1px solid #dfe7f5;
    background: #ffffff;
    transform: rotate(45deg);
}

.inventory-opname-review__more-menu button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3c4f71;
    font-size: 14px;
    font-weight: 500;
}

.inventory-opname-review__more-menu button:last-child {
    color: #ea596f;
}

.inventory-opname-review__more-menu button:hover {
    background: #f6f9ff;
}

.inventory-opname-review__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.inventory-opname-review__toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inventory-opname-review__export {
    min-width: 112px;
    min-height: 42px;
    border: 1px solid #d9e2f1;
    border-radius: 10px;
    background: #ffffff;
    color: #5f87f4;
    font-size: 13px;
    font-weight: 700;
}

.inventory-opname-review__chips {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inventory-opname-review__chip {
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid #d9e2f1;
    border-radius: 999px;
    background: #ffffff;
    color: #5d6980;
    font-size: 13px;
    font-weight: 700;
}

.inventory-opname-review__chip.is-active {
    border-color: #7ea6ff;
    background: #eef4ff;
    color: #5f87f4;
}

.inventory-opname-review__search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 420px);
    min-height: 46px;
    padding: 0 44px 0 14px !important;
    border: 1px solid #dfe7f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(36, 50, 72, 0.05);
    overflow: hidden;
}

.inventory-opname-review__search input {
    width: 100%;
    color: #243248;
    font-size: 14px;
}

.inventory-opname-review__search input::placeholder {
    color: #b5bfd2;
}

.inventory-opname-review__search i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5bfd2;
    font-size: 18px;
}

.inventory-opname-review__note {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 10px;
    background: #f5f7fb;
}

.inventory-opname-review__note p {
    margin: 0;
    color: #243248;
    font-size: 14px;
    font-weight: 500;
}

.inventory-opname-review__table {
    border: 1px solid #dfe7f5;
    background: #ffffff;
}

.inventory-opname-review__table table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-opname-review__table th,
.inventory-opname-review__table td {
    padding: 14px 14px;
    border-bottom: 1px solid #e8edf6;
    color: #243248;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.inventory-opname-review__table th {
    font-size: 14px;
    font-weight: 800;
}

.inventory-opname-review__empty {
    text-align: center !important;
    color: #70809b !important;
}

.inventory-opname-cancel-dialog {
    max-width: 600px;
}

.inventory-opname-cancel-modal {
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 42px rgba(36, 50, 72, 0.16);
}

.inventory-opname-cancel-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 10px;
}

.inventory-opname-cancel-modal__header h2 {
    margin: 0;
    color: #243248;
    font-size: 22px;
    font-weight: 800;
}

.inventory-opname-cancel-modal__body {
    display: grid;
    gap: 16px;
    padding: 10px 22px 16px;
}

.inventory-opname-cancel-modal__body p {
    margin: 0;
    color: #374151;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
}

.inventory-opname-cancel-modal__field {
    display: grid;
    gap: 8px;
}

.inventory-opname-cancel-modal__field span {
    color: #243248;
    font-size: 14px;
    font-weight: 600;
}

.inventory-opname-cancel-modal__field small {
    justify-self: end;
    color: #7c8798;
    font-size: 12px;
}

.inventory-opname-cancel-modal__footer {
    padding: 0 22px 22px;
}

.inventory-opname-cancel-modal__submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 8px;
    background: #df4660;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.inventory-opname-complete-dialog {
    max-width: 620px;
}

.inventory-opname-complete-modal {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(36, 50, 72, 0.22);
}

.inventory-opname-complete-modal__body {
    padding: 56px 36px 26px;
}

.inventory-opname-complete-modal__body p {
    margin: 0;
    color: #374151;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

.inventory-opname-complete-modal__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 34px 28px;
}

.inventory-opname-complete-modal__cancel,
.inventory-opname-complete-modal__submit {
    min-height: 56px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
}

.inventory-opname-complete-modal__cancel {
    background: #f3f4f6;
    color: #202938;
}

.inventory-opname-complete-modal__submit {
    background: linear-gradient(135deg, #7ea6ff 0%, #5f87f4 100%);
    color: #ffffff;
}

.inventory-opname-detail__table tbody tr.is-complete,
.inventory-opname-detail__table tbody tr.is-short,
.inventory-opname-detail__table tbody tr.is-over {
    background: #eef7ff;
}

.inventory-table--simple tbody tr[hidden],
.inventory-table--suppliers tbody tr[hidden] {
    display: none;
}

.inventory-table--simple thead th,
.inventory-table--simple tbody td,
.inventory-table--suppliers thead th,
.inventory-table--suppliers tbody td {
    text-align: left !important;
}

.inventory-table--simple thead th:first-child,
.inventory-table--simple tbody td:first-child,
.inventory-table--suppliers thead th:first-child,
.inventory-table--suppliers tbody td:first-child,
.inventory-table--suppliers thead th:nth-child(2),
.inventory-table--suppliers tbody td:nth-child(2),
.inventory-table--suppliers thead th:nth-child(3),
.inventory-table--suppliers tbody td:nth-child(3) {
    text-align: left !important;
}

.inventory-simple-cell {
    color: #22314a;
    font-size: 13px;
    font-weight: 700;
    text-align: left !important;
}

.inventory-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-name-cell strong {
    color: #111111;
    font-size: 13px;
    font-weight: 800;
}

.inventory-name-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: #22314a;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    transition: color 0.18s ease;
}

.inventory-name-button:hover,
.inventory-name-button:focus-visible {
    color: #5a84f1;
    outline: none;
}

.inventory-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f8;
    color: #6d7687;
    font-size: 17px;
    flex: 0 0 auto;
}

.inventory-table-footer {
    padding: 12px 16px;
    gap: 10px;
    font-size: 12px;
}

.inventory-footer-caret {
    min-width: 68px;
}

.inventory-fab {
    position: fixed;
    right: 24px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #86b7ff 0%, #6f9cf3 100%);
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 14px 22px rgba(111, 156, 243, 0.22);
    z-index: 50;
}

.inventory-fab[aria-expanded="true"] {
    background: linear-gradient(180deg, #6f90ff 0%, #5f79f0 100%);
}

.inventory-fab-menu {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: min(320px, calc(100vw - 32px));
    display: grid;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(34, 49, 74, 0.18);
    z-index: 55;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.inventory-fab-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.inventory-fab-menu__item {
    min-height: 76px;
    border: 0;
    border-top: 1px solid #e7edf8;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 26px;
    background: #ffffff;
    color: #33486a;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}

.inventory-fab-menu__item:first-child {
    border-top: 0;
}

.inventory-fab-menu__item i {
    font-size: 28px;
    line-height: 1;
}

.inventory-fab-menu__item--close {
    background: linear-gradient(180deg, #6f90ff 0%, #5f79f0 100%);
    color: #ffffff;
}

.inventory-order-dialog {
    margin: 0;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

.inventory-order-modal {
    border: 0;
    border-radius: 0;
    background: #ffffff;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-order-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px 10px;
    border-bottom: 1px solid #e8eef7;
    position: relative;
    background: #ffffff;
}

.inventory-order-modal__header h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    font-weight: 800;
}

.inventory-order-modal__header-actions {
    position: absolute;
    right: 24px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-order-modal__esc {
    min-width: 46px;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.inventory-order-stepper {
    position: relative;
    width: min(100%, 620px);
    margin: 18px auto 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 16px;
}

.inventory-order-stepper__track {
    position: absolute;
    top: 14px;
    left: 12%;
    right: 12%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7db3ff 0%, #5f87f4 100%);
}

.inventory-order-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #8ca0c7;
    font-size: 15px;
    font-weight: 700;
}

.inventory-order-step span {
    width: 28px;
    height: 28px;
    border: 3px solid #d9e6ff;
    border-radius: 50%;
    background: #ffffff;
}

.inventory-order-step.is-active {
    color: #5f87f4;
}

.inventory-order-step.is-active span {
    border-color: #6ea2ff;
    background: #6ea2ff;
}

.inventory-order-step.is-current span {
    background: #ffffff;
    box-shadow: inset 0 0 0 5px #6ea2ff;
}

.inventory-order-modal__body {
    padding: 18px 22px 34px;
    min-height: 0;
    flex: 1 1 auto;
    height: calc(100vh - 84px);
    max-height: calc(100vh - 84px);
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #9aa8c3 #eef3fb;
    background: #ffffff;
}

.inventory-order-modal__body::-webkit-scrollbar {
    width: 14px;
}

.inventory-order-modal__body::-webkit-scrollbar-track {
    background: #eef3fb;
}

.inventory-order-modal__body::-webkit-scrollbar-thumb {
    border: 3px solid #eef3fb;
    border-radius: 999px;
    background: #9aa8c3;
}

.inventory-order-modal__body::-webkit-scrollbar-thumb:hover {
    background: #7f8fb0;
}

.inventory-order-panel {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.inventory-order-pick-grid {
    display: grid;
    gap: 12px;
    width: min(100%, 680px);
    margin: 0 auto;
}

.inventory-order-pick-grid--single {
    width: min(100%, 620px);
}

.inventory-order-pick-card {
    border: 1px solid #dfe6f4;
    border-radius: 14px;
    display: grid;
    gap: 8px;
    padding: 18px 22px;
    background: #ffffff;
    color: #243248;
    text-align: left;
    box-shadow: 0 12px 22px rgba(36, 50, 72, 0.08);
}

.inventory-order-pick-card strong {
    font-size: 22px;
    font-weight: 800;
}

.inventory-order-pick-card span {
    color: #5f87f4;
    font-size: 15px;
    font-weight: 700;
}

.inventory-order-pick-card small {
    color: #6b7280;
    font-size: 14px;
}

.inventory-order-pick-card.is-active {
    border-color: #6ea2ff;
    box-shadow: 0 16px 28px rgba(95, 135, 244, 0.18);
}

.inventory-order-summary {
    border: 1px solid #dfe6f4;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(36, 50, 72, 0.08);
}

.inventory-order-summary__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    align-items: stretch;
}

.inventory-order-summary__supplier,
.inventory-order-summary__location {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 14px 18px;
}

.inventory-order-summary__supplier strong,
.inventory-order-summary__location strong {
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.inventory-order-summary__supplier span,
.inventory-order-summary__location span {
    color: #6b7280;
    font-size: 13px;
}

.inventory-order-summary__arrow {
    display: grid;
    place-items: center;
    border-left: 1px solid #e5ebf5;
    border-right: 1px solid #e5ebf5;
    color: #5f87f4;
    font-size: 26px;
}

.inventory-order-summary__footer {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
    background: #f7f9fd;
}

.inventory-order-summary__footer span {
    display: block;
    color: #374151;
    font-size: 14px;
}

.inventory-order-summary__footer strong {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

.inventory-order-summary__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
}

.inventory-order-note-toggle {
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.inventory-order-note-toggle.is-active {
    color: #5f87f4;
}

.inventory-order-submit {
    min-width: 132px;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #7db3ff 0%, #5f87f4 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.inventory-order-submit:disabled {
    background: #d7dfef;
    color: #ffffff;
}

.inventory-order-note {
    width: 100%;
    margin-top: 16px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    min-height: 48px;
    padding: 12px 14px;
    color: #243248;
    font-size: 14px;
    resize: vertical;
}

.inventory-order-searchbar {
    margin-top: 16px;
}

.inventory-order-searchbar input {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    padding: 0 16px;
    color: #243248;
    font-size: 14px;
}

.inventory-order-table {
    margin-top: 16px;
    border: 1px solid #dfe6f4;
    background: #ffffff;
}

.inventory-order-table table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-order-table th,
.inventory-order-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e7edf8;
    color: #243248;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.inventory-order-table th {
    font-weight: 800;
}

.inventory-order-table td input {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    padding: 0 12px;
    color: #111827;
    font-size: 13px;
}

.inventory-order-table td input[type="number"]::-webkit-outer-spin-button,
.inventory-order-table td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inventory-order-table td input[type="number"] {
    -moz-appearance: textfield;
}

.inventory-order-table td:last-child {
    width: 64px;
    text-align: center;
}

.inventory-order-table td:last-child button {
    border: 0;
    background: transparent;
    color: #ff5e73;
    font-size: 18px;
}

.inventory-order-back {
    margin-top: 16px;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #5f87f4;
    font-size: 15px;
    font-weight: 700;
}

.inventory-status--purchase-ordered {
    border: 2px solid #5f87f4;
    background: #ffffff;
    color: #5f87f4;
}

.inventory-status--purchase-received {
    border: 2px solid #67cddd;
    background: #ffffff;
    color: #67cddd;
}

.inventory-status--purchase-cancelled {
    border: 2px solid #ea5a6d;
    background: #ffffff;
    color: #ea5a6d;
}

.inventory-table--purchases tbody tr[data-inventory-purchase-row] {
    cursor: pointer;
    transition: background 0.18s ease;
}

.inventory-table--purchases tbody tr[data-inventory-purchase-row]:hover {
    background: #f6fbff;
}

.inventory-table--purchases tbody tr.inventory-purchase-row--fresh {
    background: #edf7ff;
}

.inventory-order-searchfield {
    position: relative;
}

.inventory-order-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border: 1px solid #dfe6f4;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(36, 50, 72, 0.12);
    z-index: 8;
}

.inventory-order-suggestion {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-top: 1px solid #edf2fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 16px;
    background: #ffffff;
    color: #4b5563;
    font-size: 15px;
    text-align: left;
}

.inventory-order-suggestion:first-child {
    border-top: 0;
}

.inventory-order-suggestion:hover {
    background: #f7faff;
}

.inventory-order-suggestion span {
    color: #4b5563;
}

.inventory-order-suggestion small {
    color: #8b97aa;
    font-size: 14px;
}

.inventory-order-detail__body {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    padding: 22px 18px 32px;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    background: #ffffff;
    overflow: visible;
}

.inventory-order-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 1120px);
    min-width: 1040px;
}

.inventory-order-detail__status-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.inventory-order-detail__status-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #7b7b7b;
    color: #ffffff;
    font-size: 30px;
}

.inventory-order-detail__status-copy {
    display: grid;
    gap: 4px;
}

.inventory-order-detail__status-copy strong {
    color: #111827;
    font-size: 24px;
    font-weight: 800;
}

.inventory-order-detail__status-copy span {
    color: #6b7280;
    font-size: 16px;
}

.inventory-order-detail__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inventory-order-detail__tool {
    min-width: 168px;
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f5f7fb;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

.inventory-order-summary--detail {
    width: min(100%, 1120px);
    margin-top: 4px;
    overflow: hidden;
    min-width: 1040px;
}

.inventory-order-summary--detail .inventory-order-summary__route {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
}

.inventory-order-summary--detail .inventory-order-summary__supplier,
.inventory-order-summary--detail .inventory-order-summary__location {
    min-height: 106px;
    gap: 6px;
    padding: 16px 20px;
}

.inventory-order-summary--detail .inventory-order-summary__supplier strong,
.inventory-order-summary--detail .inventory-order-summary__location strong {
    font-size: 18px;
}

.inventory-order-summary--detail .inventory-order-summary__supplier span,
.inventory-order-summary--detail .inventory-order-summary__location span {
    font-size: 12px;
}

.inventory-order-summary--detail .inventory-order-summary__arrow {
    font-size: 24px;
}

.inventory-order-summary__footer--detail {
    min-height: 120px;
    padding: 18px 20px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    row-gap: 14px;
}

.inventory-order-summary__footer--detail span {
    font-size: 14px;
}

.inventory-order-summary__footer--detail strong {
    font-size: 22px;
}

.inventory-order-summary__footer--detail > div:first-child {
    min-width: 0;
}

.inventory-order-detail__action {
    min-width: 144px;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.inventory-order-detail__action:disabled {
    opacity: 0.55;
}

.inventory-order-detail__action--danger {
    background: #df4b61;
}

.inventory-order-detail__action--success {
    background: #6fd0a0;
}

.inventory-order-detail__action--ghost {
    background: transparent;
    color: #111827;
}

.inventory-order-detail__section {
    display: grid;
    gap: 8px;
    width: min(100%, 1120px);
    min-width: 1040px;
}

.inventory-order-detail__label {
    color: #243248;
    font-size: 16px;
    font-weight: 700;
}

.inventory-order-detail__note {
    width: 100%;
    min-height: 72px;
    border: 1px solid #dfe6f4;
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
    color: #243248;
    font-size: 14px;
    resize: none;
}

.inventory-order-table--detail {
    margin-top: 0;
    border-radius: 0;
}

.inventory-order-table--detail table {
    width: 100%;
    table-layout: fixed;
}

.inventory-order-table--detail {
    width: min(100%, 1120px);
    min-width: 1040px;
}

.inventory-order-table--detail th,
.inventory-order-table--detail td {
    padding: 15px 18px;
    font-size: 14px;
}

.inventory-order-table--detail th {
    font-weight: 800;
}

.inventory-order-table--detail th:first-child,
.inventory-order-table--detail td:first-child {
    width: 34%;
    text-align: left;
}

.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail th:nth-child(2),
.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail td:nth-child(2) {
    width: 16%;
    text-align: center;
}

.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail th:nth-child(3),
.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail td:nth-child(3) {
    width: 22%;
    text-align: right;
}

.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail th:last-child,
.inventory-order-detail-modal[data-detail-columns="4"] .inventory-order-table--detail td:last-child {
    width: 22%;
    text-align: right;
}

.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail th:nth-child(2),
.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail td:nth-child(2) {
    width: 16%;
    text-align: center;
}

.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail th:nth-child(3),
.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail td:nth-child(3) {
    width: 16%;
    text-align: center;
}

.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail th:nth-child(4),
.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail td:nth-child(4) {
    width: 17%;
    text-align: right;
}

.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail th:last-child,
.inventory-order-detail-modal[data-detail-columns="5"] .inventory-order-table--detail td:last-child {
    width: 17%;
    text-align: right;
}

.inventory-order-table--detail td input {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    padding: 0 10px;
    color: #111827;
    font-size: 15px;
}

.inventory-order-detail__logs {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    width: min(100%, 1120px);
    min-width: 1040px;
}

.inventory-order-detail__logs-toggle {
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: #f5f7fb;
    color: #243248;
    font-size: 18px;
    font-weight: 800;
}

.inventory-order-detail__logs-panel {
    overflow-x: auto;
}

.inventory-order-detail__logs-toggle i {
    color: #4b5563;
    font-size: 16px;
}

.inventory-order-detail-modal {
    min-height: 100vh;
    height: 100vh;
    background: #ffffff;
    overflow: hidden;
}

.inventory-master-dialog {
    max-width: 400px;
}

.inventory-supplier-dialog {
    max-width: 620px;
}

.inventory-master-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.inventory-master-modal__header {
    min-height: 68px;
    padding: 16px 20px 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-master-modal__header h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.inventory-master-modal__header-actions {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-master-modal__esc {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fb;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.inventory-master-modal__body {
    padding: 8px 20px 16px;
    display: grid;
    gap: 14px;
}

.inventory-master-modal__body--supplier {
    gap: 12px;
}

.inventory-master-modal__field {
    display: grid;
    gap: 6px;
}

.inventory-master-modal__field span {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
}

.inventory-master-modal .customer-input-flat {
    min-height: 44px;
    font-size: 14px;
}

.inventory-master-modal textarea.customer-input-flat {
    min-height: 68px;
}

.inventory-master-modal__danger {
    min-width: 94px;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: #df4660;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.inventory-master-modal__footer {
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-master-modal__footer .customer-footer-btn {
    min-height: 44px;
    font-size: 14px;
}

.inventory-master-supplier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.inventory-master-modal__field--full {
    grid-column: 1 / -1;
}

.inventory-order-detail__confirm {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
}

.inventory-order-detail__confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.48);
}

.inventory-order-detail__confirm-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.22);
}

.inventory-order-detail__confirm-card p {
    margin: 0;
    padding: 24px 28px 18px;
    color: #111827;
    font-size: 15px;
    line-height: 1.45;
}

.inventory-order-detail__confirm-button {
    width: calc(100% - 36px);
    min-height: 52px;
    margin: 12px 18px 16px;
    border: 0;
    border-radius: 6px;
    background: #df4660;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.inventory-order-detail-modal[data-order-status="cancelled"] .inventory-order-detail__status-icon {
    background: #ea5a6d;
}

.inventory-order-detail-modal[data-order-status="received"] .inventory-order-detail__status-icon {
    background: #67cddd;
}

.inventory-quick-modal {
    border-radius: 18px;
}

.inventory-product-dialog {
    margin: 0;
    max-width: 100vw;
}

.inventory-product-modal {
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.inventory-product-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 32px 16px;
    border-bottom: 1px solid #e8eef7;
    position: relative;
}

.inventory-product-modal__header h2 {
    margin: 0;
    color: #243248;
    font-size: 28px;
    font-weight: 800;
}

.inventory-product-modal__header .btn-close {
    position: absolute;
    top: 22px;
    right: 24px;
    opacity: 1;
}

.inventory-product-modal__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: center;
    border-bottom: 1px solid #e8eef7;
    background: #ffffff;
}

.inventory-product-modal__tab {
    min-height: 70px;
    border: 0;
    background: transparent;
    color: #2d3748;
    font-size: 17px;
    font-weight: 700;
    position: relative;
}

.inventory-product-modal__tab.is-active {
    color: #5f87f4;
}

.inventory-product-modal__tab.is-active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: #5f87f4;
}

.inventory-product-modal__body {
    padding: 28px 32px 132px;
    display: grid;
    gap: 24px;
    min-height: calc(100vh - 156px);
    overflow-y: auto;
    background: #ffffff;
}

.inventory-product-modal__panel {
    width: min(100%, 820px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.inventory-product-modal__panel[data-inventory-product-panel="history"] {
    width: min(100%, 930px);
    padding-top: 6px;
}

.inventory-product-modal__panel[data-inventory-product-panel="details"] {
    width: min(100%, 930px);
}

.inventory-product-card,
.inventory-product-location-card {
    border: 1px solid #dde7f6;
    border-radius: 8px;
    background: #ffffff;
    padding: 18px;
}

.inventory-product-history-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px;
    border: 1px solid #dfe6f2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(36, 50, 72, 0.08);
}

.inventory-product-history-card__main {
    display: flex;
    align-items: center;
    gap: 18px;
}

.inventory-product-history-card__icon {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #f5f7fb;
    color: #243248;
    font-size: 50px;
}

.inventory-product-history-card__copy h3 {
    margin: 0 0 8px;
    color: #243248;
    font-size: 22px;
    font-weight: 700;
}

.inventory-product-history-card__stats {
    margin: 0;
    display: grid;
    gap: 6px;
}

.inventory-product-history-card__stats div {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.inventory-product-history-card__stats dt {
    color: #6a7486;
    font-size: 14px;
    font-weight: 500;
}

.inventory-product-history-card__stats dd {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.inventory-product-history-card__side {
    display: grid;
    grid-template-columns: auto 154px;
    overflow: hidden;
    border-radius: 14px;
}

.inventory-product-history-card__location {
    min-width: 168px;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #f8f8f8;
}

.inventory-product-history-card__location-dropdown {
    position: relative;
}

.inventory-product-history-card__location-btn {
    min-height: 52px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    background: transparent;
    color: #243248;
    font-size: 15px;
    font-weight: 700;
}

.inventory-product-history-card__location-btn i {
    color: #b3bbc8;
}

.inventory-product-history-card__location-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 10px;
    right: 10px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #dfe6f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(36, 50, 72, 0.12);
    z-index: 3;
}

.inventory-product-history-card__location-menu button {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #243248;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 0 10px;
}

.inventory-product-history-card__location-menu button.is-active {
    background: #eef4ff;
    color: #5f87f4;
}

.inventory-product-history-card__qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px 18px;
    color: #111827;
}

.inventory-product-history-card__qty i {
    font-size: 24px;
}

.inventory-product-history-card__qty strong {
    font-size: 22px;
    font-weight: 700;
}

.inventory-product-history-card__actions {
    display: grid;
}

.inventory-product-history-card__actions button {
    border: 0;
    background: #5f87f4;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    min-height: 62px;
}

.inventory-product-history-card__actions button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.inventory-stock-adjustment {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 12;
}

.inventory-stock-adjustment__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.36);
}

.inventory-stock-adjustment__dialog {
    position: relative;
    width: min(100%, 494px);
    border: 1px solid #dbe4f2;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 24px 46px rgba(36, 50, 72, 0.18);
}

.inventory-stock-adjustment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 10px;
}

.inventory-stock-adjustment__header h3 {
    margin: 0;
    color: #243248;
    font-size: 26px;
    font-weight: 800;
}

.inventory-stock-adjustment__close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #243248;
    font-size: 24px;
}

.inventory-stock-adjustment__summary {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #78d9c0 0%, #6ac8a4 100%);
    color: #ffffff;
}

.inventory-stock-adjustment__summary.is-decrease {
    background: linear-gradient(135deg, #ea5d78 0%, #dc4765 100%);
}

.inventory-stock-adjustment__summary-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.94);
    color: #6a768c;
    font-size: 24px;
}

.inventory-stock-adjustment__summary-copy {
    display: grid;
    gap: 2px;
}

.inventory-stock-adjustment__summary-copy small {
    font-size: 13px;
    font-weight: 500;
}

.inventory-stock-adjustment__summary-copy strong {
    font-size: 22px;
    font-weight: 800;
}

.inventory-stock-adjustment__summary-qty {
    font-size: 28px;
    font-weight: 800;
}

.inventory-stock-adjustment__body {
    display: grid;
    gap: 16px;
    padding: 18px 24px 16px;
}

.inventory-stock-adjustment__field {
    display: grid;
    gap: 8px;
}

.inventory-stock-adjustment__field > span {
    color: #38465d;
    font-size: 14px;
    font-weight: 600;
}

.inventory-stock-adjustment__qtybox {
    min-height: 56px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    background: #f5f7fb;
}

.inventory-stock-adjustment__qtybox input {
    border: 0;
    background: transparent;
    color: #243248;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.inventory-stock-adjustment__qtyactions {
    display: grid;
    grid-template-columns: repeat(2, 52px);
}

.inventory-stock-adjustment__qtyactions button {
    border: 0;
    background: transparent;
    color: #2f3d55;
    font-size: 22px;
    font-weight: 800;
}

.inventory-stock-adjustment__reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.inventory-stock-adjustment__reasons button {
    min-height: 54px;
    border: 0;
    border-radius: 8px;
    background: #f3f5f8;
    color: #808998;
    font-size: 14px;
    font-weight: 700;
}

.inventory-stock-adjustment__reasons button.is-active {
    background: #5f87f4;
    color: #ffffff;
}

.inventory-stock-adjustment__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 24px 22px;
}

.inventory-product-history-section {
    display: grid;
    gap: 18px;
}

.inventory-product-history-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.inventory-product-history-section__head h3 {
    margin: 0;
    color: #243248;
    font-size: 20px;
    font-weight: 800;
}

.inventory-product-history-section__tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.inventory-product-history-pill,
.inventory-product-history-export {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: #f6f7f9;
    color: #111827;
}

.inventory-product-history-pill {
    display: grid;
    padding: 7px 18px;
    text-align: center;
}

.inventory-product-history-pill strong {
    font-size: 15px;
    font-weight: 800;
}

.inventory-product-history-pill small {
    font-size: 13px;
}

.inventory-product-history-export {
    min-width: 122px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
}

.inventory-product-history-table {
    border: 1px solid #e1e8f1;
    background: #ffffff;
}

.inventory-product-history-table table {
    width: 100%;
    border-collapse: collapse;
}

.inventory-product-history-table th,
.inventory-product-history-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e7edf5;
    color: #243248;
    font-size: 14px;
    vertical-align: top;
    text-align: left;
}

.inventory-product-history-table th {
    font-weight: 800;
}

.inventory-product-history-table td:nth-child(5) {
    color: #5f87f4;
}

.inventory-product-history-table__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #3f4b5f;
    font-size: 13px;
}

.inventory-product-settings-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid #dde7f6;
    border-radius: 12px;
    background: #ffffff;
}

.inventory-product-settings-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #e3ebf7;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%);
}

.inventory-product-settings-card__row h3 {
    margin: 0 0 6px;
    color: #243248;
    font-size: 18px;
    font-weight: 800;
}

.inventory-product-settings-card__row p,
.inventory-product-settings-card__note {
    margin: 0;
    color: #657086;
    font-size: 14px;
}

.inventory-product-settings-badge,
.inventory-product-settings-pill {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #eaf1ff;
    color: #5f87f4;
    font-size: 14px;
    font-weight: 800;
}

.inventory-product-settings-card__note {
    padding: 18px 20px;
    border-radius: 12px;
    background: #f7faff;
}

.inventory-product-card h3 {
    margin: 0;
    color: #31343b;
    font-size: 16px;
    font-weight: 800;
}

.inventory-product-detail-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 20px;
    align-items: start;
}

.inventory-product-detail-form {
    display: grid;
    gap: 14px;
}

.inventory-product-detail-form label,
.inventory-variant-grid label,
.inventory-product-location-card label {
    display: grid;
    gap: 8px;
    color: #2f3642;
    font-size: 13px;
    font-weight: 500;
}

.inventory-product-textarea {
    min-height: 74px;
    resize: vertical;
}

.inventory-product-photo {
    display: grid;
    gap: 8px;
}

.inventory-product-photo__label {
    color: #2f3642;
    font-size: 13px;
    font-weight: 500;
}

.inventory-product-photo__dropzone {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d5dced;
    border-radius: 10px;
    background: #ffffff;
    color: #66707d;
    font-size: 14px;
    text-align: center;
    padding: 16px;
    cursor: pointer;
}

.inventory-product-photo__dropzone strong {
    color: #5b84e6;
}

.inventory-product-photo small {
    color: #778093;
    font-size: 11px;
}

.inventory-product-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.inventory-product-sales-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8d96a7;
    font-size: 14px;
    font-weight: 500;
}

.inventory-product-note {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    background: #f3f5f8;
    color: #2f3642;
    font-size: 13px;
}

.inventory-product-note.is-active {
    background: #eef5ff;
    color: #4d7fe8;
}

.inventory-variant-list {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

.inventory-variant-card {
    position: relative;
    border: 1px solid #dde7f6;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px 14px 16px;
}

.inventory-variant-card.is-collapsed .inventory-variant-card__body {
    display: none;
}

.inventory-variant-card__top {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.inventory-variant-card__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.inventory-variant-card__icon {
    border: 0;
    background: transparent;
    color: #fb4f63;
    font-size: 18px;
    line-height: 1;
}

.inventory-variant-card__done {
    min-width: 104px;
    min-height: 46px;
    border: 1px solid #d8e3f7;
    border-radius: 8px;
    background: #ffffff;
    color: #5b84e6;
    font-size: 14px;
    font-weight: 700;
}

.inventory-variant-card__confirm {
    position: absolute;
    top: -104px;
    right: 72px;
    width: 300px;
    max-width: calc(100vw - 80px);
    padding: 16px 18px 14px;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 20px rgba(23, 38, 64, 0.12);
    z-index: 3;
}

.inventory-variant-card__confirm::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 42%;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-right: 1px solid #e6ebf5;
    border-bottom: 1px solid #e6ebf5;
    transform: rotate(45deg);
}

.inventory-variant-card__confirm p {
    margin: 0 0 14px;
    color: #1f2329;
    font-size: 14px;
}

.inventory-variant-card__confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.inventory-variant-card__confirm-actions button {
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
}

.inventory-variant-card__confirm-actions .js-inventory-variant-confirm-delete {
    color: #fb4f63;
}

.inventory-variant-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 14px;
    align-items: start;
}

.inventory-variant-grid__name {
    grid-column: 1 / 3;
}

.inventory-variant-grid__stack {
    grid-column: 3 / 5;
    display: grid;
    gap: 14px;
}

.inventory-variant-grid small {
    color: #ff4f63;
    font-size: 11px;
}

.inventory-variant-grid .customer-input-flat.is-invalid {
    border: 1px solid #ff4f63;
    background: #fffefe;
}

.inventory-variant-chip {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f3f5f8;
}

.inventory-variant-chip strong {
    color: #2f3642;
    font-size: 13px;
    font-weight: 700;
}

.inventory-variant-chip button {
    border: 0;
    background: transparent;
    color: #5b84e6;
    font-size: 13px;
    font-weight: 700;
}

.inventory-variant-add {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid #dde7f6;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 15px;
    font-weight: 800;
}

.inventory-variant-add i {
    color: #111111;
    font-size: 18px;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] {
    width: min(100%, 820px);
    padding-top: 2px;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-product-location-card {
    width: min(100%, 420px);
    margin: 0 auto;
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-product-location-search {
    display: block !important;
    position: relative;
    margin: 8px auto 0;
    width: min(100%, 420px);
    min-height: 38px;
    border: 0;
    border-radius: 7px;
    background: #f7f7f7;
    padding-right: 36px !important;
    box-shadow: none;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-product-location-search input {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0 36px 0 13px;
    background: transparent;
    color: #3b4860;
    font-size: 13px;
    font-weight: 400;
    outline: none;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-product-location-search input::placeholder {
    color: #c3cad6;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-product-location-search i {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #c3ccda;
    font-size: 16px;
    pointer-events: none;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-list {
    width: min(100%, 420px);
    margin: 0 auto;
    display: grid;
    gap: 0;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0;
    border-bottom: 1px solid #eceff4;
    color: #263449 !important;
    font-size: 13px !important;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-item:hover {
    background: transparent;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-item > span:first-child {
    flex: 1 1 auto;
    cursor: pointer;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #5f87f4;
    border-radius: 4px;
    background: #5f87f4;
    color: #ffffff;
    font-size: 14px;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check input:checked + i {
    border-color: #5f87f4;
    background: #5f87f4;
    color: #ffffff;
    box-shadow: none;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check input:not(:checked) + i {
    border-color: #d7dde8;
    background: #ffffff;
    color: transparent;
}

.inventory-product-modal__panel[data-inventory-product-panel="locations"] .inventory-location-check input:focus-visible + i {
    outline: 3px solid rgba(99, 180, 255, 0.32);
    outline-offset: 2px;
}

.inventory-product-location-card--empty {
    min-height: 280px;
    padding: 0;
}

.inventory-product-modal__footer {
    position: fixed;
    right: 36px;
    bottom: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 5;
}

.inventory-product-modal__footer .customer-footer-btn[disabled] {
    background: #f3f3f3;
    color: #b8bbc1;
}

.inventory-product-modal__footer .customer-footer-btn {
    min-width: 136px;
    min-height: 84px;
    border-radius: 8px;
    box-shadow: 0 10px 18px rgba(36, 50, 72, 0.12);
    font-size: 18px;
    font-weight: 800;
}

.inventory-product-modal__footer .customer-footer-btn--primary {
    border: 0;
    background: linear-gradient(180deg, #77a7ff 0%, #5f87f4 100%);
    color: #ffffff;
}

.inventory-product-modal .customer-input-flat,
.inventory-product-modal .form-select.customer-input-flat {
    min-height: 46px;
    font-size: 13px;
}

.inventory-product-modal .form-control,
.inventory-product-modal .form-select,
.inventory-product-modal .btn {
    border-radius: 0.85rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.inventory-import-modal .customers-import-btn {
    background: #78abf4;
    color: #ffffff;
}

.inventory-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 1085;
}

.inventory-filter-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.24);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.inventory-filter-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(460px, 100vw);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #ffffff;
    box-shadow: -18px 0 36px rgba(17, 24, 39, 0.12);
    transform: translateX(100%);
    transition: transform 0.18s ease;
}

.inventory-filter-drawer.is-open .inventory-filter-drawer__backdrop {
    opacity: 1;
}

.inventory-filter-drawer.is-open .inventory-filter-drawer__panel {
    transform: translateX(0);
}

.inventory-filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 18px;
}

.inventory-filter-drawer__head h2 {
    margin: 0;
    color: #111827;
    font-size: 34px;
    font-weight: 800;
}

.inventory-filter-drawer__body {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 20px 28px;
}

.inventory-filter-drawer__body label {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

.inventory-filter-drawer__body .customer-input-flat {
    min-height: 78px;
    border: 0;
    border-radius: 10px;
    background: #f6f7f9;
    font-size: 16px;
    color: #243248;
}

.inventory-filter-drawer__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 28px 22px;
}

.inventory-filter-drawer__footer .customer-footer-btn {
    min-height: 78px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.inventory-filter-drawer__footer .customer-footer-btn--primary {
    border: 1px solid #cfdaf7;
    background: #ffffff;
    color: #5a84f1;
}

@media (max-width: 1200px) {
    .inventory-toolbar--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-toolbar--purchases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-toolbar--opname {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-toolbar--products .inventory-search-field {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
    }

    .inventory-toolbar--purchases .inventory-search-field {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
    }

    .inventory-toolbar--opname .inventory-search-field {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
    }

    .inventory-search-field {
        width: 100%;
        margin-left: 0;
    }

    .inventory-product-detail-grid,
    .inventory-variant-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-variant-grid__name,
    .inventory-variant-grid__stack {
        grid-column: auto;
    }

    .inventory-variant-card__confirm {
        right: 0;
    }
}

@media (max-width: 720px) {
    .inventory-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-tab {
        min-height: 50px;
        font-size: 13px;
    }

    .inventory-toolbar--products,
    .inventory-toolbar--purchases,
    .inventory-toolbar--opname,
    .inventory-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-toolbar--products .inventory-search-field,
    .inventory-toolbar--purchases .inventory-search-field,
    .inventory-toolbar--opname .inventory-search-field,
    .inventory-toolbar .dropdown,
    .inventory-toolbar .dashboard-filter,
    .inventory-search-field {
        width: 100%;
    }

    .inventory-master-tabs {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-master-dialog,
    .inventory-supplier-dialog {
        max-width: calc(100vw - 24px);
        margin: 0 auto;
    }

    .inventory-master-modal__body,
    .inventory-master-modal__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .inventory-master-supplier-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-product-modal__body {
        padding: 18px 16px 132px;
    }

    .inventory-product-modal__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-product-modal__tab {
        min-height: 54px;
        font-size: 15px;
    }

    .inventory-product-card,
    .inventory-product-location-card {
        padding: 18px;
    }

    .inventory-product-modal__footer {
        padding: 14px 16px 18px;
    }

    .inventory-product-modal__footer .customer-footer-btn {
        min-width: 120px;
    }

    .inventory-variant-card__confirm {
        top: -150px;
        width: min(320px, calc(100vw - 32px));
        max-width: min(320px, calc(100vw - 32px));
    }

    .inventory-toolbar__spacer {
        display: none;
    }

    .inventory-fab {
        right: 18px;
        bottom: 18px;
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .inventory-filter-drawer__panel {
        width: 100vw;
    }

    .inventory-filter-drawer__head {
        padding: 18px 20px 14px;
    }

    .inventory-filter-drawer__body,
    .inventory-filter-drawer__footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.staff-attendance-detail-drawer__footer {
    padding: 16px 24px 22px;
    border-top: 1px solid #ebf0f8;
    background: #ffffff;
}

.staff-attendance-detail-drawer__footer .customer-footer-btn {
    width: 100%;
    min-height: 54px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.staff-attendance-fab {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 46;
    width: 66px;
    height: 66px;
    border: 0;
    border-radius: 50%;
    background: #4f7fe8;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(79, 127, 232, 0.28);
    font-size: 26px;
}

.staff-attendance-fab[hidden] {
    display: none;
}

.staff-new-attendance-dialog {
    max-width: 470px;
}

.staff-new-attendance-modal {
    border: 0;
    border-radius: 8px;
    overflow: visible;
}

.staff-new-attendance-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 16px;
}

.staff-new-attendance-modal__head h2 {
    margin: 0;
    color: #30343c;
    font-size: 22px;
    font-weight: 800;
}

.staff-new-attendance-modal__body {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px 24px 18px;
}

.staff-new-attendance-modal__body > label,
.staff-new-attendance-grid label > span {
    color: #30343c;
    font-size: 13px;
    font-weight: 700;
}

.staff-new-attendance-modal .customer-picker,
.staff-new-attendance-modal .customer-input-flat,
.staff-time-field {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 4px;
    background: #f2f2f2;
    color: #111827;
    font-size: 15px;
}

.staff-new-attendance-modal .form-select.customer-input-flat {
    padding: 0 38px 0 14px;
    color: #30343c;
}

.staff-new-attendance-modal .form-select.customer-input-flat:invalid,
.staff-new-attendance-modal .form-select.customer-input-flat.is-invalid {
    box-shadow: inset 0 0 0 1px #f28c8c;
}

.staff-new-attendance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
}

.staff-new-attendance-grid label {
    display: grid;
    gap: 6px;
}

.staff-time-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    text-align: left;
}

.staff-time-field i,
.staff-new-attendance-modal .customer-picker i {
    color: #aeb8c8;
}

.attendance-time-picker {
    position: absolute;
    left: 24px;
    top: 252px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, 132px);
    max-width: calc(100% - 48px);
    overflow: hidden;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
    border: 1px solid #e4ecf8;
}

.attendance-time-picker[hidden] {
    display: none;
}

.attendance-time-picker__col {
    display: grid;
    grid-template-rows: 38px 178px;
    border-right: 1px solid #edf2f8;
}

.attendance-time-picker__col:last-child {
    border-right: 0;
}

.attendance-time-picker__col > span {
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-weight: 800;
    font-size: 12px;
    background: #f8fbff;
}

.attendance-time-picker__list {
    overflow-y: auto;
}

.attendance-time-picker__list button {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: #ffffff;
    color: #30343c;
    font-size: 15px;
}

.attendance-time-picker__list button.is-active {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-new-attendance-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 22px 24px 24px;
}

.staff-new-attendance-modal__footer .customer-footer-btn {
    min-height: 46px;
    border-radius: 4px;
}

.staff-new-attendance-modal .staff-save-btn {
    background: #4f7fe8;
    color: #ffffff;
}

.staff-attendance-date-modal .flatpickr-calendar.inline,
.staff-commission-date-modal .flatpickr-calendar.inline {
    width: fit-content;
    max-width: 100%;
    border: 1px solid #e4ecf8;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.staff-attendance-date-modal .customers-date-inline,
.staff-commission-date-modal .customers-date-inline {
    display: flex;
    justify-content: center;
}

.staff-attendance-date-modal .flatpickr-rContainer,
.staff-attendance-date-modal .flatpickr-days,
.staff-attendance-date-modal .dayContainer,
.staff-commission-date-modal .flatpickr-rContainer,
.staff-commission-date-modal .flatpickr-days,
.staff-commission-date-modal .dayContainer {
    width: auto;
    min-width: 0;
}

.staff-attendance-date-modal .flatpickr-day.selected,
.staff-attendance-date-modal .flatpickr-day.startRange,
.staff-attendance-date-modal .flatpickr-day.endRange,
.staff-commission-date-modal .flatpickr-day.selected,
.staff-commission-date-modal .flatpickr-day.startRange,
.staff-commission-date-modal .flatpickr-day.endRange {
    background: #4f7fe8;
    border-color: #4f7fe8;
}

.staff-attendance-date-modal .flatpickr-day.inRange,
.staff-commission-date-modal .flatpickr-day.inRange {
    background: #eaf2ff;
    border-color: #eaf2ff;
    color: #3159a6;
}

.staff-attendance-date-modal .flatpickr-months .flatpickr-month,
.staff-attendance-date-modal .flatpickr-current-month .flatpickr-monthDropdown-months,
.staff-attendance-date-modal .flatpickr-current-month input.cur-year,
.staff-commission-date-modal .flatpickr-months .flatpickr-month,
.staff-commission-date-modal .flatpickr-current-month .flatpickr-monthDropdown-months,
.staff-commission-date-modal .flatpickr-current-month input.cur-year {
    color: #1f2d3d;
    font-weight: 700;
}

@media (max-width: 1500px) {
    :is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) :is(.dashboard-filter, .sales-search-field) {
        min-height: 48px;
        height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px;
    }

    :is(.sales-toolbar, .customers-toolbar, .staff-toolbar, .services-toolbar, .analytics-toolbar, .analytics-detail-toolbar, .reviews-toolbar, .vouchers-toolbar) .sales-search-field {
        min-width: 180px;
    }

    .staff-panel[data-staff-panel="attendance"] .staff-toolbar {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
        gap: 8px;
    }

    .staff-panel[data-staff-panel="attendance"].is-attendance-mode .staff-toolbar {
        grid-template-columns: minmax(200px, 1.05fr) minmax(200px, 1.05fr) minmax(100px, 0.62fr) minmax(250px, 1.3fr) minmax(200px, 1fr);
    }

    .staff-panel[data-staff-panel="attendance"].is-attendance-mode .staff-toolbar {
        grid-template-columns: minmax(220px, 1.1fr) minmax(210px, 1fr) minmax(110px, 0.6fr) minmax(260px, 1.3fr) minmax(220px, 1fr);
    }
}

.dashboard-match__metrics {
    display: flex;
    gap: 160px;
    margin-bottom: 22px;
}

.dashboard-inline-metric span {
    display: block;
    margin-bottom: 8px;
    color: #53657e;
    font-size: 13px;
}

.dashboard-inline-metric strong {
    display: block;
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    color: #111d35;
}

.dashboard-chart-wrap {
    padding: 8px 0 0;
    background: #ffffff;
}

.dashboard-chart-frame {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
}

.js-dashboard-reference-chart {
    display: block;
    width: 100% !important;
    height: 360px !important;
    min-height: 0;
    max-height: 360px;
}

.dashboard-scrollbar-fake {
    margin: 14px 18px 0;
    height: 16px;
    border-radius: 999px;
    background: #eff3f8;
    position: relative;
}

.dashboard-scrollbar-fake span {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    border-radius: 999px;
    background: #bac8da;
}

.dashboard-agenda-meta {
    margin-bottom: 14px;
}

.dashboard-agenda-meta__count {
    font-size: 34px;
    font-weight: 500;
    color: #101a31;
}

.dashboard-agenda-meta__sub {
    margin-top: 4px;
    color: #7d7f85;
    font-size: 17px;
}

.dashboard-empty-panel {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f6f7f9;
}

.dashboard-empty-panel--small {
    min-height: 460px;
}

.dashboard-empty-panel__icon {
    position: relative;
    width: 130px;
    height: 92px;
    margin-bottom: 18px;
}

.dashboard-empty-panel__icon::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 40px;
    height: 72px;
    border-left: 4px solid #77797d;
    border-bottom: 4px solid #77797d;
}

.dashboard-empty-panel__icon::after {
    content: "";
    position: absolute;
    left: 44px;
    top: 14px;
    width: 68px;
    height: 58px;
    border: 4px solid #77797d;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    transform: rotate(0deg);
    clip-path: inset(0 0 32px 0);
}

.dashboard-empty-panel__text {
    color: #73767d;
    font-size: 34px;
    font-weight: 600;
    text-align: center;
}

.dashboard-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
}

.dashboard-top-card {
    padding: 34px 42px 40px;
    border: 1px solid #d8dee8;
    border-radius: 4px;
}

.dashboard-top-card__title {
    margin-bottom: 24px;
    color: #7d7f85;
    font-size: 22px;
    font-weight: 500;
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: 18px;
    background: linear-gradient(180deg, rgba(231, 237, 245, 0.96), rgba(231, 237, 245, 0));
    backdrop-filter: blur(10px);
}

.public-shell:not(.public-shell--booking) {
    background:
        radial-gradient(circle at top left, rgba(126, 194, 255, 0.22), transparent 24%),
        linear-gradient(180deg, #eef3f7 0%, #ffffff 20%, #ffffff 100%);
}

.public-shell:not(.public-shell--booking) .public-header .navbar {
    gap: 18px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(198, 210, 225, 0.9);
    box-shadow: 0 18px 42px rgba(19, 36, 61, 0.12);
}

.public-shell:not(.public-shell--booking) .public-header .navbar-brand {
    margin: 0;
    padding: 14px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #56c4fb 0%, #329bff 100%);
    box-shadow: 0 14px 28px rgba(50, 155, 255, 0.28);
}

.public-shell:not(.public-shell--booking) .public-header .brand-mark {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.public-shell:not(.public-shell--booking) .public-header .ms-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
}

.public-shell:not(.public-shell--booking) .public-header .ms-auto > a:not(.btn) {
    color: #22334d !important;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.salon-hero {
    padding: 12px 0 28px;
}

.salon-hero__shell {
    position: relative;
}

.salon-hero__frame {
    position: relative;
    padding-bottom: 0;
}

.salon-hero__visual {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border-radius: 0 0 34px 34px;
    background:
        linear-gradient(180deg, rgba(18, 24, 36, 0.14), rgba(18, 24, 36, 0.68)),
        linear-gradient(135deg, #607792 0%, #334861 44%, #1f2937 100%);
    box-shadow: 0 38px 80px rgba(20, 30, 48, 0.22);
}

.salon-hero__image,
.salon-hero__backdrop {
    position: absolute;
    inset: 0;
}

.salon-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) blur(1px);
    transform: scale(1.03);
}

.salon-hero__backdrop {
    background:
        linear-gradient(180deg, rgba(16, 26, 43, 0.1) 0%, rgba(16, 26, 43, 0.76) 100%),
        radial-gradient(circle at top center, rgba(95, 180, 255, 0.26), transparent 34%);
}

.salon-hero__spot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.salon-hero__spot--one {
    top: 70px;
    left: 8%;
    width: 180px;
    height: 180px;
    background: rgba(89, 198, 255, 0.28);
}

.salon-hero__spot--two {
    right: 12%;
    bottom: 86px;
    width: 220px;
    height: 220px;
    background: rgba(75, 140, 255, 0.18);
}

.salon-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
    padding: 170px 20px 150px;
}

.salon-hero__kicker {
    color: #79d7ff;
    font-size: 1.3rem;
    font-style: italic;
    letter-spacing: 0.05em;
}

.salon-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    line-height: 1.02;
    font-weight: 800;
    text-wrap: balance;
}

.salon-hero__copy {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.02rem;
    line-height: 1.8;
}

.salon-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.salon-hero__badge {
    position: absolute;
    right: 22px;
    bottom: 18px;
    z-index: 1;
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(16, 22, 33, 0.72);
    color: #ffffff;
    text-align: right;
    backdrop-filter: blur(8px);
}

.salon-hero__badge strong {
    font-size: 0.92rem;
}

.salon-hero__badge span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

.consultation-banner {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    width: min(100%, 980px);
    margin: 18px auto 0;
    padding: 30px 38px;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(66, 197, 255, 0.96), rgba(80, 171, 255, 0.96));
    box-shadow: 0 22px 48px rgba(29, 106, 181, 0.24);
    transform: none;
}

.consultation-banner__copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.1;
}

.consultation-banner__copy p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.7;
}

.consultation-banner__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: center;
}

.consultation-banner__field,
.consultation-banner__button {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
}

.consultation-banner__field {
    background: rgba(255, 255, 255, 0.96);
    color: #7d8ca3;
    font-size: 0.92rem;
}

.consultation-banner__field--wide,
.consultation-banner__button {
    grid-column: 1 / -1;
}

.consultation-banner__button {
    justify-content: center;
    border: 0;
    background: #0f1726;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
}

.consultation-banner__button:hover {
    color: #ffffff;
}

.salon-story {
    padding-top: 52px;
    padding-bottom: 48px;
}

.salon-story__title {
    max-width: 520px;
    line-height: 1.08;
}

.salon-story__copy {
    margin: 18px 0 0;
    color: #596a80;
    line-height: 1.85;
}

.salon-hours {
    margin-top: 28px;
}

.salon-hours__title {
    color: #59b7f6;
    font-size: 2rem;
    font-style: italic;
}

.salon-hours__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.salon-hours__grid strong,
.salon-hours__grid span {
    display: block;
}

.salon-hours__grid strong {
    color: #20324c;
    font-size: 0.92rem;
}

.salon-hours__grid span {
    margin-top: 6px;
    color: #58a5ea;
    font-size: 0.82rem;
    font-weight: 700;
}

.salon-hours__meta {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    color: #5f7894;
}

.salon-hours__meta span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.salon-gallery {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    min-height: 480px;
}

.salon-gallery__card {
    display: grid;
    align-content: end;
    min-height: 220px;
    padding: 24px;
    border-radius: 0;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(239, 247, 255, 0.96), rgba(196, 222, 255, 0.96));
    box-shadow: 0 18px 38px rgba(28, 63, 104, 0.1);
}

.salon-gallery__card--wide {
    min-height: 250px;
    background:
        linear-gradient(155deg, rgba(247, 252, 255, 0.96), rgba(207, 229, 255, 0.96)),
        radial-gradient(circle at top right, rgba(78, 181, 255, 0.3), transparent 28%);
}

.salon-gallery__card--tall {
    grid-row: span 2;
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(100, 194, 255, 0.92), rgba(64, 145, 248, 0.96));
    color: #ffffff;
}

.salon-gallery__card span,
.salon-gallery__card small {
    display: block;
}

.salon-gallery__card span {
    color: #5a7ca4;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.salon-gallery__card strong {
    margin-top: 12px;
    color: #193251;
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    line-height: 1.08;
}

.salon-gallery__card small {
    margin-top: 10px;
    color: #647890;
    line-height: 1.7;
}

.salon-gallery__card--tall span,
.salon-gallery__card--tall strong,
.salon-gallery__card--tall small {
    color: #ffffff;
}

.salon-showcase {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.salon-showcase__head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.salon-showcase__head--left {
    margin: 0 0 14px;
    text-align: left;
}

.salon-showcase__head p {
    margin: 16px 0 0;
    color: #6d7d91;
    line-height: 1.75;
}

.salon-package-card {
    height: 100%;
    border: 1px solid #dce5ef;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(25, 53, 86, 0.08);
}

.salon-package-card__media {
    display: grid;
    place-items: center;
    min-height: 250px;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
}

.salon-package-card__media--1 {
    background: linear-gradient(145deg, #dbefff 0%, #78c4ff 100%);
}

.salon-package-card__media--2 {
    background: linear-gradient(145deg, #b2dcff 0%, #4ca8ff 100%);
}

.salon-package-card__media--3 {
    background: linear-gradient(145deg, #8fc9ff 0%, #257df6 100%);
}

.salon-package-card__body {
    padding: 22px 22px 24px;
}

.salon-package-card__body h3 {
    margin: 0;
    color: #172a45;
    font-size: 1.18rem;
}

.salon-package-card__body p {
    margin: 12px 0 0;
    color: #6b7b90;
    line-height: 1.75;
}

.salon-package-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.salon-package-card__meta strong {
    color: #1f3252;
    font-size: 1.05rem;
}

.salon-package-card__meta a {
    color: #3a9ef7;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.salon-reviews {
    padding-top: 8px;
    padding-bottom: 72px;
}

.salon-review-card {
    height: 100%;
    padding: 26px 24px;
    border: 1px solid #dde6ef;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 16px 34px rgba(26, 47, 78, 0.08);
}

.salon-review-card__stars {
    color: #52b5ff;
    font-size: 1rem;
    letter-spacing: 0.18em;
}

.salon-review-card p {
    margin: 14px 0 18px;
    color: #5f7288;
    line-height: 1.8;
}

.salon-review-card strong {
    color: #1c304c;
}

.page-card .table > :not(caption) > * > * {
    background: transparent;
}

.auth-card {
    max-width: 1100px;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    border-radius: 2rem;
    overflow: hidden;
    background: #fff;
}

.auth-card__visual {
    padding: 3rem;
    background: linear-gradient(135deg, rgba(108, 190, 255, 0.95), rgba(87, 142, 255, 0.75));
    color: #fff;
}

.auth-card__visual h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.demo-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.demo-list div {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.2);
}

.demo-list span {
    display: block;
    opacity: 0.88;
    margin-top: 0.35rem;
}

.auth-card__form {
    padding: 3rem;
    background: rgba(255,255,255,0.92);
}

.guest-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.state-card {
    max-width: 520px;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
}

.state-card__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(131, 215, 227, 0.18);
    color: var(--primary-dark);
    font-size: 1.8rem;
}

.permission-grid {
    display: grid;
    gap: 1rem;
}

.permission-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
}

.permission-check small {
    display: block;
    color: var(--muted);
}

.timeline-item em {
    font-style: normal;
    color: var(--primary-dark);
}

.btn-dark {
    background-color: var(--ink);
    border-color: var(--ink);
}

.btn-light,
.form-control,
.form-select {
    border-color: var(--border);
}

.account-shell {
    display: grid;
    gap: 18px;
    width: min(820px, 100%);
    margin: 18px auto 0;
    padding-bottom: 24px;
}

.account-profile-card,
.account-card {
    border: 1px solid #dde3eb;
    border-radius: 8px;
    background: #fff;
}

.account-profile-card {
    display: grid;
    grid-template-columns: minmax(230px, 38%) 1fr;
    gap: 24px;
    padding: 34px 28px;
}

.account-profile-card__left {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
}

.account-avatar {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border: 3px solid #bfeeff;
    border-radius: 50%;
    background: #f5f6f8;
    color: #333941;
    font-size: 58px;
}

.account-badges {
    display: flex;
    gap: 8px;
}

.account-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 92px;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #dfe4eb;
    border-radius: 4px;
    color: #111827;
    font-weight: 700;
}

.account-action,
.account-social,
.account-verify-card button,
.account-phone-row button {
    border: 0;
    border-radius: 4px;
    font-weight: 800;
}

.account-action {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    background: #f3f4f6;
    color: #111827;
    font-size: 15px;
}

.account-profile-card__right {
    align-self: center;
}

.account-profile-card__right h2,
.account-card h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
}

.account-profile-card__right p,
.account-card p {
    margin: 0 0 14px;
    color: #626872;
    font-size: 14px;
    line-height: 1.45;
}

.account-profile-card__right label {
    display: block;
    margin: 10px 0 5px;
    color: #30343a;
    font-size: 15px;
}

.account-field {
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 4px;
    background: #f3f3f3;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.account-field--with-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-field--with-link a {
    color: #4b91e6;
    text-decoration: none;
}

.account-phone-row {
    display: grid;
    grid-template-columns: 58px 1fr 92px;
    align-items: center;
}

.account-phone-code {
    display: grid;
    place-items: center;
    height: 20px;
    background: #2f8fe7;
    color: #fff;
    font-size: 0;
}

.account-field--phone {
    color: #a0a0a0;
    font-weight: 500;
}

.account-phone-row button {
    min-height: 46px;
    background: #f3f3f3;
    color: #4b91e6;
    font-size: 15px;
}

.account-card {
    padding: 18px 20px;
}

.account-verify-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
}

.account-verify-card__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 58px;
    border-radius: 4px;
    background: #e5e7eb;
    color: #fff;
    font-size: 34px;
}

.account-verify-card__icon span {
    position: absolute;
    right: -12px;
    bottom: -10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    border-radius: 999px;
    background: #b9ecff;
    color: #2f8fe7;
}

.account-verify-card button {
    grid-column: 1 / -1;
    min-height: 46px;
    background: #55aaf5;
    color: #fff;
    font-size: 15px;
}

.account-social {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #dfe4eb;
    background: #fff;
    color: #3d4148;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
}

.account-social i {
    color: #4468a8;
    font-size: 22px;
}

.account-security-row {
    display: grid;
    grid-template-columns: 30px 1fr 60px;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
}

.account-security-row > i {
    color: #222831;
    font-size: 24px;
}

.account-security-row strong,
.account-security-row span {
    display: block;
}

.account-security-row strong {
    color: #3d4148;
    font-size: 16px;
    font-weight: 500;
}

.account-security-row span {
    color: #747b86;
}

.account-switch input {
    display: none;
}

.account-switch span {
    display: block;
    width: 50px;
    height: 26px;
    border-radius: 999px;
    background: #d9dde3;
    padding: 3px;
    cursor: pointer;
}

.account-switch span::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.account-switch input:checked + span {
    background: #55aaf5;
}

.account-switch input:checked + span::before {
    transform: translateX(24px);
}

.customer-account-shell {
    min-height: calc(100vh - 96px);
    padding: 44px 0 64px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.12) 0%, rgba(255, 255, 255, 0) 34%),
        #ffffff;
}

.customer-account-shell .container {
    max-width: 1240px;
}

.customer-account-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 28px 30px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(99, 180, 255, 0.2) 0%, rgba(255, 255, 255, 0.96) 48%),
        #ffffff;
    box-shadow: 0 18px 36px rgba(60, 116, 177, 0.1);
}

.customer-account-hero__eyebrow,
.customer-section-card__head span,
.customer-profile-panel__label {
    display: block;
    margin-bottom: 8px;
    color: #3b92e6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.customer-account-hero h1,
.customer-section-card__head h2,
.customer-profile-panel h2 {
    margin: 0;
    color: #142743;
    font-weight: 800;
}

.customer-account-hero h1 {
    font-size: 40px;
    line-height: 1.1;
}

.customer-account-hero p {
    max-width: 680px;
    margin: 12px 0 0;
    color: #6d7f99;
    font-size: 15px;
    line-height: 1.7;
}

.customer-account-hero__action,
.customer-profile-panel__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #63b4ff 0%, #3d9bf2 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 26px rgba(61, 155, 242, 0.22);
}

.customer-account-hero__action {
    flex: 0 0 auto;
    padding: 0 22px;
}

.customer-account-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.customer-profile-panel,
.customer-section-card {
    border: 1px solid #dfeaf7;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(50, 91, 140, 0.08);
}

.customer-profile-panel {
    position: sticky;
    top: 22px;
    padding: 26px;
}

.customer-profile-panel__avatar {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #eaf5ff 0%, #d8ecff 100%);
    color: #2f8fe6;
    font-size: 26px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px #c9e5ff;
}

.customer-profile-panel h2 {
    font-size: 30px;
    line-height: 1.15;
}

.customer-profile-panel__details {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.customer-profile-panel__details div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f7fbff;
    color: #526985;
}

.customer-profile-panel__details i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: #eaf5ff;
    color: #3b92e6;
}

.customer-profile-panel__details span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-profile-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.customer-profile-panel__stats div {
    min-height: 82px;
    padding: 12px;
    border: 1px solid #dcecff;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.customer-profile-panel__stats span {
    display: block;
    min-height: 30px;
    color: #7387a0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.customer-profile-panel__stats strong {
    display: block;
    margin-top: 8px;
    color: #142743;
    font-size: 22px;
    line-height: 1;
}

.customer-profile-panel__logout {
    width: 100%;
}

.customer-account-main {
    display: grid;
    gap: 24px;
}

.customer-section-card {
    padding: 24px;
}

.customer-section-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.customer-section-card__head h2 {
    font-size: 28px;
    line-height: 1.15;
}

.customer-section-card__count {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf6ff;
    color: #3b92e6;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.customer-booking-list {
    display: grid;
    gap: 12px;
}

.customer-booking-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e4eef9;
    border-radius: 8px;
    background: #ffffff;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.customer-booking-item:hover,
.customer-voucher-ticket:hover {
    border-color: #bedcff;
    box-shadow: 0 14px 26px rgba(63, 132, 205, 0.09);
    transform: translateY(-2px);
}

.customer-booking-item__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    background: #eaf5ff;
    color: #3b92e6;
    font-size: 20px;
}

.customer-booking-item__content {
    min-width: 0;
}

.customer-booking-item__content strong {
    display: block;
    color: #142743;
    font-size: 15px;
    font-weight: 800;
}

.customer-booking-item__content span {
    display: block;
    margin-top: 4px;
    color: #7488a1;
    font-size: 13px;
}

.customer-status-pill,
.customer-voucher-ticket em {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.customer-status-pill.is-info {
    background: #edf6ff;
    color: #3b92e6;
}

.customer-status-pill.is-success,
.customer-voucher-ticket.is-active em {
    background: #e8f7f1;
    color: #178663;
}

.customer-status-pill.is-danger,
.customer-voucher-ticket.is-muted em {
    background: #f4f6f9;
    color: #7b8799;
}

.customer-voucher-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.customer-voucher-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 104px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid #dcecff;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(99, 180, 255, 0.12) 0%, rgba(255, 255, 255, 0) 58%),
        #ffffff;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.customer-voucher-ticket::before,
.customer-voucher-ticket::after {
    content: "";
    position: absolute;
    right: 82px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dcecff;
}

.customer-voucher-ticket::before {
    top: -9px;
}

.customer-voucher-ticket::after {
    bottom: -9px;
}

.customer-voucher-ticket__mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(180deg, #63b4ff 0%, #3d9bf2 100%);
    color: #ffffff;
    font-size: 20px;
}

.customer-voucher-ticket strong {
    display: block;
    color: #142743;
    font-size: 15px;
    font-weight: 800;
}

.customer-voucher-ticket span {
    display: block;
    margin-top: 6px;
    color: #7488a1;
    font-size: 13px;
}

.customer-empty-state {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 160px;
    align-content: center;
    border: 1px dashed #cce3ff;
    border-radius: 8px;
    background: #f8fcff;
    color: #6d8099;
    text-align: center;
}

.customer-empty-state i {
    color: #63b4ff;
    font-size: 28px;
}

.customer-empty-state strong {
    color: #142743;
}

.booking-experience-section {
    padding: 32px 16px 88px;
    background:
        radial-gradient(circle at top left, rgba(176, 220, 255, 0.28), transparent 24%),
        radial-gradient(circle at top right, rgba(235, 246, 255, 0.92), transparent 32%),
        linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
}

.booking-experience-shell {
    width: min(100%, 860px);
    margin: 0 auto;
}

.booking-experience-shell,
.booking-picker-shell,
.booking-summary-screen__shell,
.booking-confirmation-screen__shell,
.booking-payment-screen__shell,
.booking-qris-screen__shell,
.booking-proof-screen__shell,
.booking-pending-screen__shell {
    padding: 18px 18px 24px;
    border: 1px solid #e3e8f0;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(45, 71, 108, 0.08);
    box-sizing: border-box;
}

.booking-experience {
    display: grid;
    gap: 18px;
}

.booking-experience__top {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
}

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

.booking-experience__title strong {
    color: #16304b;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
}

.booking-experience__title small {
    margin-top: 4px;
    color: #7387a2;
    font-size: 14px;
    font-weight: 500;
}

.booking-back-link {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #dfeaf5;
    color: #16304b;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(22, 48, 75, 0.06);
}

.booking-back-link i {
    font-size: 20px;
}

.booking-overline {
    margin: 4px 0 6px;
    color: #9f7e63;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-title {
    margin: 0;
    color: #1a2b44;
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.08;
}

.booking-venue-card,
.booking-panel,
.booking-service-group,
.booking-summary {
    border: 1px solid rgba(220, 228, 240, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 44px rgba(49, 71, 107, 0.08);
}

.booking-venue-card {
    overflow: hidden;
}

.booking-venue-card__visual {
    position: relative;
    min-height: 300px;
    background: linear-gradient(135deg, #ffffff 0%, #eef7ff 46%, #dceeff 100%);
}

.booking-venue-card__visual > img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}

.booking-venue-card__art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 246, 255, 0.72) 100%),
        linear-gradient(135deg, #eef7ff 0%, #ffffff 58%, #d7ebff 100%);
}

.booking-venue-card__art-blur,
.booking-venue-card__art-wall,
.booking-venue-card__art-table,
.booking-venue-card__art-chair-back,
.booking-venue-card__art-chair-seat,
.booking-venue-card__art-chair-leg,
.booking-venue-card__art-plant {
    position: absolute;
    display: block;
}

.booking-venue-card__art-blur {
    inset: 0 auto 0 -7%;
    width: 42%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(236, 245, 255, 0.42) 42%, transparent 78%);
    filter: blur(4px);
}

.booking-venue-card__art-wall {
    inset: 12% 14% 18% 28%;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0 58%, rgba(225, 239, 255, 0.86) 58% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.booking-venue-card__art-table {
    left: 34%;
    top: 30%;
    width: 24%;
    height: 10%;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #dfeeff 100%);
    box-shadow: 0 18px 32px rgba(119, 162, 206, 0.14);
}

.booking-venue-card__art-table::after {
    content: "";
    position: absolute;
    left: 48%;
    top: 88%;
    width: 10%;
    height: 120%;
    border-radius: 999px;
    background: linear-gradient(180deg, #92a7bf 0%, #7488a1 100%);
}

.booking-venue-card__art-chair-back {
    right: 11%;
    top: 15%;
    width: 21%;
    height: 36%;
    border-radius: 28px 28px 18px 18px;
    background: linear-gradient(180deg, #cfe6ff 0%, #9fc8f6 100%);
    transform: skew(-6deg);
    box-shadow: 0 24px 40px rgba(112, 156, 207, 0.2);
}

.booking-venue-card__art-chair-seat {
    right: 14%;
    top: 48%;
    width: 24%;
    height: 18%;
    border-radius: 24px 24px 16px 16px;
    background: linear-gradient(180deg, #dceeff 0%, #b6d7fb 100%);
    box-shadow: 0 18px 26px rgba(112, 156, 207, 0.16);
}

.booking-venue-card__art-chair-leg {
    right: 12%;
    top: 62%;
    width: 18%;
    height: 24%;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #8fa7c1 0%, #6f87a1 100%);
}

.booking-venue-card__art-plant {
    left: 50%;
    top: 19%;
    width: 5%;
    height: 12%;
    border-radius: 12px;
    background: linear-gradient(180deg, #c7d8ec 0%, #9db6d2 100%);
}

.booking-venue-card__art-plant::before {
    content: "";
    position: absolute;
    left: -22%;
    top: -42%;
    width: 146%;
    height: 72%;
    border-radius: 999px 999px 0 0;
    background: radial-gradient(circle at center bottom, #6fb87f 0%, #3d8f58 72%, transparent 74%);
}

.booking-venue-card__floating {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #c4c0c4;
    font-size: 28px;
    box-shadow: 0 12px 24px rgba(55, 68, 89, 0.12);
}

.booking-venue-card__body {
    padding: 20px 20px 18px;
}

.booking-venue-card__title {
    display: block;
    color: #1a2b44;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 700;
}

.booking-venue-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: #8f97a3;
    font-size: 14px;
}

.booking-venue-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef2f5;
    color: #222c39;
    font-size: 13px;
    font-weight: 700;
}

.booking-venue-card__status.is-open {
    background: #eaf4ff;
    color: #4f84ff;
}

.booking-venue-card__status.is-closed {
    background: #f4efe8;
    color: #5c5a58;
}

.booking-venue-card__address {
    margin: 12px 0 0;
    color: #7b8799;
    font-size: 15px;
    line-height: 1.55;
}

.booking-quick-nav {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.booking-quick-nav__item {
    border: 0;
    background: transparent;
    color: #707c8e;
    text-align: center;
}

.booking-quick-nav__icon {
    display: inline-flex;
    width: 74px;
    height: 74px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 1px solid #d7dde8;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #2e3541;
    font-size: 28px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.booking-quick-nav__label {
    display: block;
    font-size: 14px;
}

.booking-quick-nav__item.is-active .booking-quick-nav__icon,
.booking-quick-nav__item:hover .booking-quick-nav__icon {
    border-color: #e3b98f;
    color: #b5703d;
    box-shadow: 0 14px 28px rgba(193, 138, 88, 0.14);
    transform: translateY(-2px);
}

.booking-quick-nav__item.is-active .booking-quick-nav__label {
    color: #17283d;
    font-weight: 700;
}

.booking-section-caption {
    margin: -2px 0 4px;
    color: #26384f;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 600;
    text-align: center;
}

.booking-main-stack {
    display: grid;
    gap: 16px;
}

.booking-main-stack.is-focused,
.booking-panel.is-focused {
    box-shadow: 0 0 0 3px rgba(229, 184, 136, 0.24), 0 20px 44px rgba(49, 71, 107, 0.08);
}

.booking-panel {
    padding: 18px 18px 20px;
}

.booking-panel--date {
    padding: 18px 18px 14px;
}

.booking-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.booking-panel__head--compact {
    margin-bottom: 14px;
}

.booking-panel__eyebrow,
.booking-summary__label {
    display: block;
    margin-bottom: 4px;
    color: #9a7c61;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.booking-panel__title,
.booking-summary strong {
    color: #13263d;
    font-size: 1rem;
    font-weight: 800;
}

.booking-date-toggle,
.booking-inline-action {
    border: 0;
    border-radius: 14px;
    background: #fff0e1;
    color: #b86d36;
    font-weight: 800;
}

.booking-date-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.booking-inline-action {
    padding: 10px 14px;
    font-size: 13px;
}

.booking-date-rail {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}

.booking-date-pill {
    display: grid;
    min-height: 74px;
    align-content: center;
    justify-items: center;
    padding: 8px 6px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #13263d;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.booking-date-pill__top,
.booking-date-pill small {
    font-size: 12px;
    font-weight: 600;
}

.booking-date-pill strong {
    font-size: 1.1rem;
    font-weight: 800;
}

.booking-date-pill.is-active {
    background: linear-gradient(180deg, #e7ba8f 0%, #d99a64 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(184, 111, 54, 0.2);
}

.booking-date-pill.is-active strong {
    font-size: 1.65rem;
    line-height: 1;
}

.booking-date-pill.is-current-day {
    background: #f7f4ef;
}

.booking-services-list {
    display: grid;
    gap: 14px;
}

.booking-service-group {
    overflow: hidden;
}

.booking-service-group__head {
    width: 100%;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 18px;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
    text-align: left;
}

.booking-service-group__avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--booking-group-accent, #63b4ff) 16%, #eef4ff);
    overflow: hidden;
    color: var(--booking-group-accent, #63b4ff);
    font-weight: 800;
}

.booking-service-group__avatar img,
.booking-service-item__thumb img,
.booking-staff-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-service-group__meta,
.booking-service-item__copy,
.booking-staff-chip__copy,
.booking-summary__meta {
    min-width: 0;
}

.booking-service-group__meta strong,
.booking-service-item__copy strong,
.booking-staff-chip__copy strong {
    display: block;
    color: #13263d;
    font-size: 1.05rem;
    font-weight: 800;
}

.booking-service-group__meta small,
.booking-service-item__copy small,
.booking-staff-chip__copy small,
.booking-helper,
.booking-summary small {
    color: #6d8099;
    font-size: 13px;
}

.booking-service-group__head > i {
    justify-self: end;
    color: #7d8ea5;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.booking-service-group.is-open .booking-service-group__head > i {
    transform: rotate(180deg);
}

.booking-service-group__body {
    display: none;
    padding: 0 18px 12px;
    background: linear-gradient(180deg, #fffaf6 0%, #ffffff 100%);
}

.booking-service-group.is-open .booking-service-group__body {
    display: grid;
}

.booking-service-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 40px;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid #edf3f9;
    background: transparent;
    text-align: left;
}

.booking-service-item:first-child {
    border-top: 0;
}

.booking-service-item__thumb,
.booking-staff-chip__avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #f9f4ed;
    overflow: hidden;
    color: #b5703d;
}

.booking-service-item__thumb i {
    font-size: 18px;
}

.booking-service-item__action {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #d89a62;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 12px 18px rgba(184, 111, 54, 0.18);
}

.booking-service-item.is-selected .booking-service-item__action {
    background: #13263d;
    box-shadow: 0 12px 18px rgba(19, 38, 61, 0.18);
}

.booking-staff-list,
.booking-slots {
    display: grid;
    gap: 10px;
}

.booking-staff-chip {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e3ecf6;
    border-radius: 18px;
    background: #ffffff;
    text-align: left;
}

.booking-staff-chip.is-selected {
    border-color: #d99a64;
    background: #fff7f0;
    box-shadow: inset 0 0 0 1px rgba(184, 111, 54, 0.16);
}

.booking-empty-state {
    padding: 16px;
    border-radius: 16px;
    background: #f7fbff;
    color: #71849d;
    font-size: 14px;
    text-align: center;
}

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

.booking-slot-pill {
    min-height: 44px;
    border: 1px solid #dfeaf5;
    border-radius: 14px;
    background: #ffffff;
    color: #17304c;
    font-weight: 700;
}

.booking-slot-pill.is-selected {
    border-color: #d99a64;
    background: #d99a64;
    color: #ffffff;
}

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

.booking-field {
    display: grid;
    gap: 8px;
}

.booking-field span {
    color: #2b3f57;
    font-size: 13px;
    font-weight: 700;
}

.booking-field--full {
    grid-column: 1 / -1;
}

.booking-field .form-control {
    min-height: 52px;
    border-radius: 16px;
    border-color: #dfeaf5;
    box-shadow: none;
}

.booking-panel--contact {
    padding-bottom: 18px;
}

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

.booking-contact-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px;
    border: 1px solid #e6ecf5;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    color: #21344c;
    text-decoration: none;
}

.booking-contact-card--wide {
    grid-column: 1 / -1;
}

.booking-contact-card strong {
    color: #162740;
    font-size: 15px;
}

.booking-contact-card span:last-child {
    color: #6d8099;
    line-height: 1.55;
}

.booking-contact-card__icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff0e1;
    color: #b86d36;
    font-size: 18px;
}

.booking-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.booking-submit-button {
    min-width: 220px;
    min-height: 54px;
    border-radius: 18px;
    font-weight: 800;
}

.public-shell--booking {
    background:
        linear-gradient(90deg, #f5f5f5 0, #f5f5f5 42px, #e5e5e5 42px, #e5e5e5 43px, #fafafa 43px, #fafafa 100%);
}

.public-shell--booking main {
    padding: 18px 0 48px;
}

.public-shell--booking .container.pt-4 {
    max-width: 740px;
}

.booking-experience-section {
    padding: 14px 18px 42px;
}

.booking-experience-shell {
    max-width: 700px;
}

.booking-experience {
    gap: 18px;
}

.booking-venue-card,
.booking-panel,
.booking-summary,
.booking-option-card,
.booking-switch-card {
    border: 1px solid #ece8e3;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.booking-venue-card {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(20, 22, 28, 0.08);
}

.booking-venue-card__visual,
.booking-venue-card__visual > img {
    min-height: 280px;
    max-height: 280px;
}

.booking-venue-card__body {
    padding: 18px 18px 16px;
}

.booking-venue-card__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;
}

.booking-venue-card__meta {
    gap: 12px;
    margin-top: 8px;
    font-size: 15px;
    color: #8f97a3;
}

.booking-venue-card__status {
    min-height: 27px;
    padding: 0 12px;
    background: #f0f0f0;
    color: #1e2938;
    font-size: 13px;
    font-weight: 500;
}

.booking-venue-card__status.is-open {
    background: #eaf4ff;
    color: #4f84ff;
}

.booking-venue-card__status.is-closed {
    background: #f1f1f1;
    color: #404449;
}

.booking-venue-card__address {
    margin-top: 6px;
    color: #8f97a3;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-venue-card__floating {
    right: 16px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.9);
    color: #d0d0d0;
    font-size: 27px;
}

.booking-quick-nav {
    gap: 26px;
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 2px 6px 0;
}

.booking-quick-nav__item {
    min-width: 110px;
    flex: 0 0 auto;
}

.booking-quick-nav__icon {
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
    border-color: #d6d6d6;
    color: #303030;
    font-size: 31px;
    box-shadow: none;
}

.booking-quick-nav__label {
    color: #9a96a1;
    font-size: 13px;
}

.booking-quick-nav__item.is-active .booking-quick-nav__icon,
.booking-quick-nav__item:hover .booking-quick-nav__icon {
    border-color: #d6d6d6;
    color: #303030;
    box-shadow: none;
    transform: none;
    background: #fbfbfb;
}

.booking-quick-nav__item.is-active .booking-quick-nav__label {
    color: #4f4a55;
    font-weight: 600;
}

.booking-section-caption {
    margin: 2px 0 6px;
    color: #1d1d1d;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}

.booking-intro-stack {
    display: grid;
    gap: 16px;
}

.booking-option-card,
.booking-switch-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-align: left;
}

.booking-option-card {
    border-radius: 2px;
    color: #1f2a3b;
}

.booking-option-card__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(180deg, #63b4ff 0%, #4f84ff 100%);
    color: #ffffff;
    font-size: 18px;
    position: relative;
}

.booking-option-card__icon::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 10px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
}

.booking-option-card__copy,
.booking-switch-card__copy {
    min-width: 0;
}

.booking-option-card__copy strong,
.booking-switch-card__copy strong {
    display: block;
    color: #1b2a3e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.booking-option-card__copy small,
.booking-switch-card__copy small {
    display: block;
    margin-top: 1px;
    color: #9895a0;
    font-size: 12px;
    line-height: 1.3;
}

.booking-option-card__copy small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-option-card__arrow {
    color: #b7aa9b;
    font-size: 30px;
}

.booking-switch-card {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 2px;
}

.booking-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.booking-switch__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.booking-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c9c9c9;
    transition: background-color 0.2s ease;
}

.booking-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.booking-switch__input:checked + .booking-switch__track {
    background: #63b4ff;
}

.booking-switch__input:checked + .booking-switch__track::after {
    transform: translateX(20px);
}

.booking-main-stack {
    gap: 14px;
    margin-top: 10px;
}

.booking-contact-panel {
    display: grid;
    gap: 0;
    border: 1px solid #ece8e3;
    border-radius: 2px;
    background: #ffffff;
}

.booking-contact-panel__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 18px;
    color: #425066;
    font-size: 14px;
}

.booking-contact-panel__row + .booking-contact-panel__row {
    border-top: 1px solid #f0ece7;
}

.booking-contact-panel__row strong {
    color: #1b2a3e;
    font-size: 13px;
}

.booking-contact-panel__row a,
.booking-contact-panel__row span {
    color: #7e8798;
    text-decoration: none;
    line-height: 1.45;
}

.booking-picker-section {
    padding: 8px 18px 28px;
}

.booking-picker-shell {
    width: min(100%, 700px);
    margin: 0 auto;
    min-height: calc(100vh - 48px);
    position: relative;
}

.booking-picker-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.booking-picker-header h1 {
    margin: 0;
    color: #101010;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}

.booking-picker-back,
.booking-picker-header__spacer {
    width: 44px;
    height: 44px;
}

.booking-picker-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2d3d;
    text-decoration: none;
    font-size: 27px;
}

.booking-picker-dates {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) 28px;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.booking-picker-date {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 60px;
    padding: 4px 0;
    border-radius: 14px;
    color: #182a3b;
    text-decoration: none;
    line-height: 1.05;
}

.booking-picker-date span,
.booking-picker-date strong,
.booking-picker-date small {
    display: block;
}

.booking-picker-date span {
    font-size: 13px;
    font-weight: 600;
}

.booking-picker-date strong {
    font-size: 14px;
    font-weight: 500;
}

.booking-picker-date small {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
}

.booking-picker-date.is-active {
    background: #63b4ff;
    color: #ffffff;
}

.booking-picker-date.is-active strong {
    font-size: 20px;
    font-weight: 800;
}

.booking-picker-date-more {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #1c334e;
    font-size: 22px;
    transition: transform 0.2s ease;
}

.booking-picker-date-more i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.booking-picker-date-more.is-open i {
    transform: rotate(180deg);
}

.booking-picker-calendar-popover.flatpickr-calendar {
    width: 228px;
    padding: 10px 10px 12px;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
}

.booking-picker-calendar-popover.flatpickr-calendar::before,
.booking-picker-calendar-popover.flatpickr-calendar::after {
    display: none;
}

.booking-picker-calendar-popover .flatpickr-months {
    align-items: center;
    margin-bottom: 8px;
}

.booking-picker-calendar-popover .flatpickr-month {
    height: 28px;
}

.booking-picker-calendar-popover .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 28px;
    padding: 0;
    color: #3b3f45;
    font-size: 13px;
    font-weight: 700;
}

.booking-picker-calendar-popover .flatpickr-current-month .flatpickr-monthDropdown-months,
.booking-picker-calendar-popover .flatpickr-current-month input.cur-year {
    padding: 0;
    color: #3b3f45;
    font-size: 13px;
    font-weight: 700;
}

.booking-picker-calendar-popover .flatpickr-current-month input.cur-year {
    width: 52px;
}

.booking-picker-calendar-popover .flatpickr-prev-month,
.booking-picker-calendar-popover .flatpickr-next-month {
    top: 8px;
    padding: 0 4px;
    color: #8d939c;
}

.booking-picker-calendar-popover .flatpickr-prev-month:hover,
.booking-picker-calendar-popover .flatpickr-next-month:hover {
    color: #586171;
}

.booking-picker-calendar-popover .flatpickr-prev-month svg,
.booking-picker-calendar-popover .flatpickr-next-month svg {
    display: none;
}

.booking-picker-calendar-popover .flatpickr-prev-month::after,
.booking-picker-calendar-popover .flatpickr-next-month::after {
    font-size: 16px;
    line-height: 1;
}

.booking-picker-calendar-popover .flatpickr-prev-month::after {
    content: "<";
}

.booking-picker-calendar-popover .flatpickr-next-month::after {
    content: ">";
}

.booking-picker-calendar-popover .flatpickr-weekdays {
    margin-bottom: 4px;
}

.booking-picker-calendar-popover span.flatpickr-weekday {
    color: #7f8794;
    font-size: 11px;
    font-weight: 500;
}

.booking-picker-calendar-popover .flatpickr-days,
.booking-picker-calendar-popover .dayContainer {
    width: 208px;
    min-width: 208px;
    max-width: 208px;
}

.booking-picker-calendar-popover .flatpickr-day {
    max-width: 29px;
    height: 29px;
    line-height: 29px;
    border-radius: 8px;
    color: #262d39;
    font-size: 12px;
    font-weight: 600;
}

.booking-picker-calendar-popover .flatpickr-day.prevMonthDay,
.booking-picker-calendar-popover .flatpickr-day.nextMonthDay,
.booking-picker-calendar-popover .flatpickr-day.flatpickr-disabled {
    color: #d1d5db;
}

.booking-picker-calendar-popover .flatpickr-day.today {
    border-color: transparent;
}

.booking-picker-calendar-popover .flatpickr-day.selected,
.booking-picker-calendar-popover .flatpickr-day.startRange,
.booking-picker-calendar-popover .flatpickr-day.endRange {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

.booking-picker-calendar-popover .flatpickr-day:hover {
    background: #eef4ff;
    border-color: #eef4ff;
}

.booking-picker-calendar-popover .flatpickr-innerContainer {
    justify-content: center;
}

.booking-picker-calendar-popover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 10px 0;
    border-top: 1px solid #f0f0f0;
}

.booking-picker-calendar-popover__value {
    color: #9aa0aa;
    font-size: 11px;
    font-weight: 600;
}

.booking-picker-calendar-popover__today {
    border: 0;
    background: transparent;
    color: #20242b;
    font-size: 12px;
    font-weight: 600;
}

.booking-picker-group-card {
    margin-bottom: 18px;
    border: 1px solid #dbdbdb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(20, 22, 28, 0.04);
    overflow: hidden;
}

.booking-picker-group-card__head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 20px 12px;
    width: 100%;
    border: 0;
    background: #ffffff;
    text-align: left;
}

.booking-picker-group-card__thumb {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: #f4efe8;
}

.booking-picker-group-card__thumb img,
.booking-picker-service__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-picker-group-card__thumb i,
.booking-picker-service__thumb i {
    color: #766454;
    font-size: 16px;
}

.booking-picker-group-card__head strong {
    color: #111827;
    font-size: 18px;
    font-weight: 500;
}

.booking-picker-group-card__chevron {
    justify-self: end;
    color: #9aa0aa;
    font-size: 24px;
    transition: transform 0.2s ease;
}

.booking-picker-group-card.is-collapsed .booking-picker-group-card__chevron {
    transform: rotate(-90deg);
}

.booking-picker-services {
    display: grid;
    gap: 12px;
    transition: opacity 0.18s ease;
}

.booking-picker-services[hidden] {
    display: none !important;
}

.booking-picker-service {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 10px;
    border-radius: 12px;
}

.booking-picker-service__thumb {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 12px;
    background: #f3efe9;
}

.booking-picker-service__copy {
    min-width: 0;
}

.booking-picker-service__copy strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.booking-picker-service__copy small {
    display: block;
    color: #9499a3;
    font-size: 13px;
    line-height: 1.2;
}

.booking-picker-service__action {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #63b4ff;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(99, 180, 255, 0.28);
}

.booking-picker-service.is-selected {
    background: #eef7ff;
}

.booking-picker-service.is-selected .booking-picker-service__action {
    display: none;
}

.booking-picker-service__stepper {
    display: inline-grid;
    grid-template-columns: 24px 20px 24px;
    align-items: center;
    gap: 8px;
}

.booking-picker-service__stepper-btn {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #1f2f44;
    font-size: 14px;
}

.booking-picker-service__stepper strong {
    color: #101828;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.booking-picker-bookmark {
    position: fixed;
    left: max(34px, calc(50vw - 315px));
    bottom: 16px;
    display: inline-flex;
    gap: 10px;
    min-width: 120px;
    height: 60px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #ffffff;
    color: #2e3848;
    font-size: 30px;
    box-shadow: 0 6px 18px rgba(18, 24, 34, 0.08);
    z-index: 20;
    transition: bottom 0.2s ease;
}

.booking-picker-bookmark span {
    font-size: 14px;
    font-weight: 500;
}

.booking-picker-category-panel {
    position: fixed;
    left: max(24px, calc(50vw - 325px));
    bottom: 90px;
    width: min(330px, calc(100vw - 48px));
    border: 1px solid #dddddd;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 24, 34, 0.14);
    overflow: hidden;
    z-index: 30;
    transition: bottom 0.2s ease;
}

.js-booking-picker.has-selection .booking-picker-bookmark {
    bottom: 86px;
}

.js-booking-picker.has-selection .booking-picker-category-panel {
    bottom: 160px;
}

.booking-picker-category-panel__head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #efefef;
}

.booking-picker-category-panel__icon,
.booking-picker-category-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #303030;
    font-size: 18px;
}

.booking-picker-category-panel__head strong {
    color: #2a2a2a;
    font-size: 15px;
    font-weight: 500;
}

.booking-picker-category-panel__close {
    border: 0;
    background: transparent;
    color: #303030;
    font-size: 22px;
}

.booking-picker-category-panel__body {
    display: grid;
}

.booking-picker-category-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    color: #2a2a2a;
    text-decoration: none;
}

.booking-picker-category-item + .booking-picker-category-item {
    border-top: 1px solid #f2f2f2;
}

.booking-picker-category-item.is-active {
    background: #fbfbfb;
}

.booking-picker-category-item__label {
    font-size: 15px;
    font-weight: 500;
}

.booking-picker-category-item__count {
    color: #8f8f8f;
    font-size: 15px;
    font-weight: 700;
}

.booking-picker-selection-sheet {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: 8px 10px 18px;
    height: 100vh;
    background: rgba(79, 132, 255, 0.22);
    z-index: 40;
    overflow-y: auto;
}

.booking-picker-selection-sheet__dialog {
    width: min(100%, 350px);
    min-height: 775px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.18);
    overflow: hidden;
}

.booking-picker-selection-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px;
}

.booking-picker-selection-sheet__header strong {
    color: #141414;
    font-size: 16px;
    font-weight: 500;
}

.booking-picker-selection-sheet__close {
    border: 0;
    background: transparent;
    color: #1e1e1e;
    font-size: 20px;
}

.booking-picker-selection-sheet__visual {
    overflow: hidden;
    margin: 0 12px 14px;
    border: 1px solid #ececec;
}

.booking-picker-selection-sheet__visual img {
    width: 100%;
    height: 227px;
    object-fit: cover;
    display: block;
}

.booking-picker-selection-sheet__summary {
    padding: 16px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    margin: 0 12px 12px;
}

.booking-picker-selection-sheet__summary strong {
    display: block;
    color: #3b3b3b;
    font-size: 16px;
    font-weight: 700;
}

.booking-picker-selection-sheet__summary small {
    display: block;
    margin-top: 4px;
    color: #9c9c9c;
    font-size: 12px;
}

.booking-picker-selection-sheet__count {
    margin: 0 12px 8px;
    color: #8d8d8d;
    font-size: 12px;
}

.booking-picker-selection-sheet__options {
    display: grid;
    gap: 10px;
    padding: 0 12px;
}

.booking-picker-selection-sheet__option {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.booking-picker-selection-sheet__option.is-selected {
    background: #eef7ff;
}

.booking-picker-selection-sheet__option-thumb {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: #f3efe9;
}

.booking-picker-selection-sheet__option-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-picker-selection-sheet__option-copy strong {
    display: block;
    color: #202020;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.booking-picker-selection-sheet__option-copy small {
    display: block;
    color: #8f8f8f;
    font-size: 12px;
    line-height: 1.2;
}

.booking-picker-selection-sheet__option-radio {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b4b4b4;
    border-radius: 50%;
    background: #ffffff;
}

.booking-picker-selection-sheet__option.is-selected .booking-picker-selection-sheet__option-radio {
    border-color: #d26ae8;
    box-shadow: inset 0 0 0 4px #ffffff;
    background: #d26ae8;
}

.booking-picker-selection-sheet__qty {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 14px 12px 0;
    border: 1px solid #cfd8e3;
    border-radius: 2px;
    overflow: hidden;
}

.booking-picker-selection-sheet__qty-btn {
    min-height: 32px;
    border: 0;
    background: #ffffff;
    color: #2f3d50;
    font-size: 16px;
}

.booking-picker-selection-sheet__qty strong {
    min-width: 48px;
    text-align: center;
    color: #202020;
    font-size: 15px;
}

.booking-picker-selection-sheet__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 12px 0;
}

.booking-picker-selection-sheet__cancel,
.booking-picker-selection-sheet__submit {
    min-height: 34px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
}

.booking-picker-selection-sheet__cancel {
    border: 1px solid #cfd8e3;
    background: #ffffff;
    color: #333333;
}

.booking-picker-selection-sheet__submit {
    border: 0;
    background: #63b4ff;
    color: #ffffff;
}

.booking-picker-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: min(100%, 700px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
    border-top: 1px solid #cfd8e3;
    background: #ffffff;
    transform: translateX(-50%);
    z-index: 35;
}

.booking-picker-cost-panel {
    position: fixed;
    left: 50%;
    bottom: 54px;
    width: min(100%, 700px);
    padding: 14px 12px 12px;
    border: 1px solid #e6e8ec;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #ffffff;
    box-shadow: 0 -6px 20px rgba(18, 24, 34, 0.08);
    transform: translateX(-50%);
    z-index: 34;
}

.booking-picker-cost-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.booking-picker-cost-panel__head strong,
.booking-picker-cost-panel__head span {
    font-size: 13px;
    font-weight: 600;
}

.booking-picker-cost-panel__head strong {
    color: #4f84ff;
}

.booking-picker-cost-panel__head span {
    color: #4f84ff;
    text-align: right;
}

.booking-picker-cost-panel__items {
    display: grid;
    gap: 8px;
}

.booking-picker-cost-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.booking-picker-cost-row__name,
.booking-picker-cost-row__meta {
    display: block;
}

.booking-picker-cost-row__name {
    color: #4a5565;
    font-size: 13px;
    line-height: 1.35;
}

.booking-picker-cost-row__meta {
    margin-top: 2px;
    color: #7d8795;
    font-size: 12px;
}

.booking-picker-cost-row__price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #40536d;
    font-size: 13px;
    white-space: nowrap;
}

.booking-picker-cost-row__remove {
    border: 0;
    background: transparent;
    color: #ff5b73;
    font-size: 16px;
    line-height: 1;
}

.booking-picker-bottom-bar__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    min-width: 0;
}

.booking-picker-bottom-bar__summary.is-open .booking-picker-bottom-bar__chevron i {
    transform: rotate(180deg);
}

.booking-picker-bottom-bar__summary strong,
.booking-picker-bottom-bar__summary small {
    display: block;
    min-width: 0;
}

.booking-picker-bottom-bar__summary strong {
    color: #38404a;
    font-size: 13px;
    font-weight: 500;
    grid-column: 1;
    grid-row: 1;
}

.booking-picker-bottom-bar__summary small {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-picker-bottom-bar__chevron {
    color: #33506f;
    font-size: 18px;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.booking-picker-bottom-bar__chevron i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.booking-picker-bottom-bar__continue {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 4px;
    background: #63b4ff;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .booking-picker-bottom-bar {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 10px;
        padding: 10px 8px 12px;
    }

    .booking-picker-bottom-bar__summary small {
        font-size: 14px;
    }

    .booking-picker-bottom-bar__continue {
        min-height: 38px;
        font-size: 14px;
    }
}

.booking-time-section {
    padding: 8px 18px 26px;
}

.booking-time-shell {
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 18px 18px 22px;
    border: 1px solid #d7e6fb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(42, 93, 173, 0.08);
}

.booking-time-day-banner {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 48px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #63b4ff;
    color: #ffffff;
    text-align: center;
}

.booking-time-day-banner__check {
    position: absolute;
    top: -9px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #63b4ff;
    color: #ffffff;
    font-size: 11px;
}

.booking-time-day-banner strong,
.booking-time-day-banner small {
    display: block;
    line-height: 1.05;
}

.booking-time-day-banner strong {
    font-size: 13px;
    font-weight: 700;
}

.booking-time-day-banner small {
    font-size: 12px;
    font-weight: 600;
}

.booking-time-service-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(18, 24, 34, 0.08);
}

.booking-time-service-card__thumb {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 8px;
    background: #f3efe9;
}

.booking-time-service-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-time-service-card__copy strong,
.booking-time-service-card__copy small {
    display: block;
}

.booking-time-service-card__copy strong {
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 500;
}

.booking-time-service-card__copy small {
    color: #9a9a9a;
    font-size: 12px;
}

.booking-time-caption {
    margin: 12px 0 12px;
    color: #3f5070;
    font-size: 14px;
    text-align: center;
}

.booking-time-helper,
.booking-time-empty {
    margin: 0 0 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.booking-time-helper {
    color: #6c7f99;
}

.booking-time-empty {
    color: #6a7a90;
}

.booking-time-slot-group + .booking-time-slot-group {
    margin-top: 18px;
}

.booking-time-slot-group h2 {
    margin: 0 0 10px;
    color: #1f3350;
    font-size: 14px;
    font-weight: 500;
}

.booking-time-slot-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px 8px;
}

.booking-time-slot {
    min-height: 31px;
    border: 1px solid #d5dbe5;
    border-radius: 999px;
    background: #ffffff;
    color: #30435d;
    font-size: 12px;
    font-weight: 500;
}

.booking-time-slot.is-selected {
    border-color: #7fb3ff;
    background: #e8f1ff;
    color: #315fe3;
}

.booking-time-slot.is-muted {
    background: #d7d7d7;
    border-color: #d7d7d7;
    color: #646a73;
    cursor: not-allowed;
}

.booking-time-continue {
    width: 100%;
    margin-top: 110px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #63b4ff;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.booking-time-submit-form {
    margin-top: 110px;
}

.booking-time-continue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.booking-panel {
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 22, 28, 0.05);
}

.booking-summary {
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 22, 28, 0.05);
}

.booking-summary-screen {
    min-height: 100vh;
    padding: 10px 18px 24px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.16) 0%, rgba(99, 180, 255, 0) 145px),
        #ffffff;
}

.booking-summary-screen__shell {
    display: flex;
    width: min(100%, 700px);
    min-height: calc(100vh - 34px);
    margin: 0 auto;
    flex-direction: column;
}

.booking-summary-screen__header {
    margin-bottom: 6px;
}

.booking-summary-screen__date {
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(99, 180, 255, 0.09);
    color: #1f3350;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.booking-summary-card {
    border: 1px solid #d9e8ff;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(78, 140, 207, 0.08);
    overflow: hidden;
}

.booking-summary-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px;
}

.booking-summary-card__service {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
}

.booking-summary-card__thumb {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: #eef6ff;
    color: #4b88d9;
}

.booking-summary-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-summary-card__copy {
    display: grid;
    gap: 1px;
}

.booking-summary-card__copy strong {
    color: #121a27;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.booking-summary-card__copy small {
    color: #78a6df;
    font-size: 12px;
    font-weight: 600;
}

.booking-summary-card__copy span {
    color: #7b8faa;
    font-size: 14px;
    font-weight: 500;
}

.booking-summary-card__staff {
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    justify-items: center;
    gap: 2px;
    min-width: 44px;
    color: #7a8ca6;
    font-size: 11px;
    text-align: center;
}

.booking-summary-card__staff-badge {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #f1f7ff 0%, #dcecff 100%);
    color: #7b94ba;
    font-size: 12px;
    font-weight: 700;
}

.booking-summary-card__staff i {
    color: #88a3c9;
    font-size: 11px;
}

.booking-summary-card__staff-picker {
    padding: 0 12px 12px;
    border-top: 1px solid #edf4ff;
}

.booking-summary-card__staff-picker-label {
    padding: 10px 0 8px;
    color: #5f7391;
    font-size: 13px;
    font-weight: 600;
}

.booking-summary-card__staff-options {
    display: grid;
    gap: 8px;
}

.booking-summary-card__staff-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9e8ff;
    border-radius: 12px;
    background: #f8fbff;
    color: #18314f;
    text-align: left;
}

.booking-summary-card__staff-option.is-selected {
    border-color: #8dbfff;
    background: #eaf4ff;
    box-shadow: inset 0 0 0 1px rgba(99, 180, 255, 0.22);
}

.booking-summary-card__staff-option-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #f1f7ff 0%, #dcecff 100%);
    color: #7b94ba;
    flex-shrink: 0;
}

.booking-summary-card__staff-option-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-summary-card__staff-option-copy {
    display: grid;
    gap: 2px;
}

.booking-summary-card__staff-option-copy strong {
    color: #1a2b44;
    font-size: 14px;
    font-weight: 700;
}

.booking-summary-card__staff-option-copy small {
    color: #7290b7;
    font-size: 12px;
    font-weight: 500;
}

.booking-summary-card__time-picker {
    display: grid;
    max-height: 292px;
    overflow-y: auto;
    border-top: 1px solid #edf4ff;
    background: #ffffff;
}

.booking-summary-card__time-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid #f0f5fc;
    background: #ffffff;
    color: #11223a;
    text-align: left;
}

.booking-summary-card__time-option:first-child {
    border-top: 0;
}

.booking-summary-card__time-option.is-selected {
    background: #edf5ff;
}

.booking-summary-card__time-option-icon {
    color: #284f8f;
    font-size: 18px;
    line-height: 1;
}

.booking-summary-card__time-option strong {
    font-size: 14px;
    font-weight: 700;
}

.booking-summary-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid #edf4ff;
}

.booking-summary-card__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f1f35;
}

.booking-summary-card__time i {
    color: #284f8f;
    font-size: 18px;
}

.booking-summary-card__time strong {
    font-size: 14px;
    font-weight: 700;
}

.booking-summary-card__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4e78bd;
    font-size: 18px;
}

.booking-summary-screen__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    box-shadow: 0 14px 28px rgba(59, 156, 246, 0.26);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.booking-confirmation-screen {
    min-height: 100vh;
    padding: 10px 18px 24px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.14) 0%, rgba(99, 180, 255, 0) 155px),
        #ffffff;
}

.booking-confirmation-screen__shell {
    width: min(100%, 700px);
    margin: 0 auto;
}

.booking-confirmation-screen__header {
    margin-bottom: 10px;
}

.booking-confirmation-screen__time {
    color: #99a8bc;
    font-size: 12px;
    font-weight: 600;
}

.booking-confirmation-form {
    display: grid;
    gap: 16px;
}

.booking-confirmation-card {
    border: 1px solid #dceafe;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(78, 140, 207, 0.08);
    overflow: hidden;
}

.booking-confirmation-card__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px 14px 12px;
}

.booking-confirmation-card__thumb {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #eef6ff;
    color: #4b88d9;
}

.booking-confirmation-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-confirmation-card__business {
    display: grid;
    gap: 2px;
}

.booking-confirmation-card__business strong {
    color: #101828;
    font-size: 18px;
    font-weight: 700;
}

.booking-confirmation-card__business small {
    color: #6e87a7;
    font-size: 12px;
    font-weight: 600;
}

.booking-confirmation-card__business span {
    color: #8596ad;
    font-size: 12px;
    line-height: 1.3;
}

.booking-confirmation-card__date-pill {
    display: grid;
    min-width: 52px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #edf5ff;
    color: #5e9ced;
    text-align: center;
}

.booking-confirmation-card__date-pill small {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking-confirmation-card__date-pill strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.booking-confirmation-card__summary {
    border-top: 1px solid #edf4ff;
    padding: 14px;
}

.booking-confirmation-card__time-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #122235;
}

.booking-confirmation-card__time-row i {
    color: #2f5fa5;
    font-size: 20px;
}

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

.booking-confirmation-card__time-row strong {
    font-size: 16px;
    font-weight: 700;
}

.booking-confirmation-card__time-row small {
    color: #7288a5;
    font-size: 13px;
    margin-top: 3px;
}

.booking-confirmation-card__total-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #5f9fe8;
}

.booking-confirmation-card__count {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #63b4ff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.booking-confirmation-card__total-row strong {
    color: #5f9fe8;
    font-size: 16px;
    font-weight: 700;
}

.booking-confirmation-card__total-row i {
    color: #6e7f95;
    font-size: 16px;
}

.booking-confirmation-panel {
    display: grid;
    gap: 14px;
}

.booking-confirmation-panel__caption {
    margin: 0;
    color: #1c2e47;
    font-size: 14px;
    font-weight: 500;
}

.booking-confirmation-profile {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dceafe;
    border-radius: 14px;
    background: #f8fbff;
}

.booking-confirmation-profile span,
.booking-confirmation-profile strong {
    display: block;
}

.booking-confirmation-profile span {
    color: #6f829d;
    font-size: 12px;
    margin-bottom: 3px;
}

.booking-confirmation-profile strong {
    color: #15253a;
    font-size: 15px;
    font-weight: 700;
}

.booking-confirmation-field {
    display: grid;
    gap: 8px;
}

.booking-confirmation-field label {
    color: #1c2e47;
    font-size: 13px;
    font-weight: 600;
}

.booking-confirmation-field input,
.booking-confirmation-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #deebff;
    border-radius: 12px;
    background: #f9fbff;
    color: #13233a;
    font-size: 14px;
}

.booking-confirmation-field textarea {
    resize: vertical;
    min-height: 84px;
}

.booking-confirmation-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #1c2e47;
    font-size: 14px;
    font-weight: 500;
}

.booking-confirmation-note {
    margin: 0;
    color: #566a86;
    font-size: 13px;
    line-height: 1.4;
}

.booking-confirmation-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid #dce4ef;
    border-radius: 10px;
    background: #ffffff;
    color: #ff4b6e;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.booking-confirmation-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(59, 156, 246, 0.22);
}

.booking-cancel-modal[hidden] {
    display: none !important;
}

.booking-cancel-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.booking-cancel-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(2px);
}

.booking-cancel-modal__dialog {
    position: relative;
    width: min(100% - 32px, 360px);
    margin: 88px auto 0;
    padding: 18px 16px 16px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.22);
}

.booking-cancel-modal__title {
    margin: 0 0 16px;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.booking-cancel-modal__reasons {
    display: grid;
    gap: 8px;
}

.booking-cancel-modal__reason {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #eef2f7;
    border-radius: 4px;
    background: #f6f7f9;
    color: #98a4b5;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.booking-cancel-modal__reason.is-selected {
    border-color: #f7a3b6;
    background: #fff0f4;
    color: #ef476f;
}

.booking-cancel-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.booking-cancel-modal__back,
.booking-cancel-modal__confirm {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.booking-cancel-modal__back {
    border: 0;
    background: #f1f3f7;
    color: #6c7889;
}

.booking-cancel-modal__confirm {
    border: 0;
    background: #ff2f6d;
    color: #ffffff;
}

.booking-payment-screen {
    min-height: 100vh;
    padding: 10px 18px 24px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.12) 0%, rgba(99, 180, 255, 0) 140px),
        #ffffff;
}

.booking-payment-screen__shell {
    width: min(100%, 700px);
    margin: 0 auto;
}

.booking-payment-screen__header {
    margin-bottom: 12px;
}

.booking-payment-form {
    display: grid;
    gap: 14px;
}

.booking-payment-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dceafe;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(78, 140, 207, 0.08);
}

.booking-payment-total-card small,
.booking-payment-total-card strong {
    display: block;
}

.booking-payment-total-card small {
    color: #51657f;
    font-size: 13px;
    font-weight: 500;
}

.booking-payment-total-card strong {
    color: #17b98f;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
}

.booking-payment-total-card i {
    color: #7e91aa;
    font-size: 18px;
}

.booking-payment-method {
    display: grid;
    grid-template-columns: 24px 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 14px;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #ffffff;
    color: #13233a;
    text-align: left;
}

.booking-payment-method.is-selected {
    border-color: #8dbfff;
    background: #f5faff;
    box-shadow: inset 0 0 0 1px rgba(99, 180, 255, 0.2);
}

.booking-payment-method__radio {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border: 1px solid #c6d3e4;
    border-radius: 50%;
    background: #ffffff;
}

.booking-payment-method.is-selected .booking-payment-method__radio {
    border-color: #63b4ff;
    box-shadow: inset 0 0 0 6px #63b4ff;
}

.booking-payment-method__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1f3557 0%, #315fe3 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.booking-payment-method__logo--onsite {
    background: #ffffff;
    color: #3d4858;
    border: 1px solid #d6dee8;
    font-size: 24px;
    letter-spacing: 0;
}

.booking-payment-method__copy strong,
.booking-payment-method__copy small {
    display: block;
}

.booking-payment-method__copy strong {
    color: #16263d;
    font-size: 15px;
    font-weight: 700;
}

.booking-payment-method__copy small {
    color: #7b8faa;
    font-size: 12px;
    font-weight: 500;
}

.booking-payment-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 4px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8fafc;
    color: #c2cbd7;
    font-size: 18px;
    font-weight: 700;
}

.booking-payment-submit:not(:disabled) {
    border-color: transparent;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    box-shadow: 0 14px 28px rgba(59, 156, 246, 0.22);
    color: #ffffff;
}

.booking-qris-screen {
    min-height: 100vh;
    padding: 6px 10px 20px;
    background: #f5f8fc;
}

.booking-qris-screen__shell {
    width: min(100%, 480px);
    margin: 0 auto;
}

.booking-qris-screen__header {
    margin-bottom: 10px;
}

.booking-qris-card {
    overflow: hidden;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
}

.booking-qris-card__brand {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 0 18px;
    background: linear-gradient(135deg, #123b6f 0%, #0d2f59 68%);
    color: #ffffff;
}

.booking-qris-card__brand strong {
    font-size: 20px;
    font-weight: 800;
}

.booking-qris-card__summary {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #edf2f7;
}

.booking-qris-card__summary strong,
.booking-qris-card__summary small {
    display: block;
}

.booking-qris-card__summary strong {
    color: #1e293b;
    font-size: 26px;
    font-weight: 800;
}

.booking-qris-card__details-toggle {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
}

.booking-qris-card__timer {
    padding: 12px 18px;
    border-bottom: 1px solid #edf2f7;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.booking-qris-card__timer strong {
    margin-left: 4px;
}

.booking-qris-card__panel {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 0;
}

.booking-qris-card__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #edf2f7;
}

.booking-qris-card__panel-head strong {
    color: #374151;
    font-size: 16px;
    font-weight: 800;
}

.booking-qris-card__panel-head span {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.booking-qris-card__image-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 18px 12px;
}

.booking-qris-card__image-wrap img {
    width: min(100%, 340px);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.booking-qris-card__image-fallback {
    display: flex;
    width: min(100%, 340px);
    min-height: 340px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    background: #f8fafc;
}

.booking-qris-card__actions {
    display: grid;
    gap: 16px;
    margin-top: auto;
    padding: 18px;
    border-top: 1px solid #edf2f7;
    background: #ffffff;
}

.booking-qris-card__actions form {
    margin: 0;
}

.booking-qris-card__download,
.booking-qris-card__status {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.booking-qris-card__download {
    border: 1px solid #1f2937;
    background: #ffffff;
    color: #374151;
}

.booking-qris-card__status {
    border: 0;
    background: #3f3f4c;
    color: #ffffff;
}

.booking-qris-details {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.booking-qris-details__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.42);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.booking-qris-details__sheet {
    position: absolute;
    right: max(10px, calc(50vw - 240px));
    bottom: 0;
    left: max(10px, calc(50vw - 240px));
    min-height: 48vh;
    border-radius: 18px 18px 0 0;
    background: #ffffff;
    box-shadow: 0 -10px 34px rgba(17, 24, 39, 0.14);
    transform: translateY(100%);
    transition: transform 0.28s ease;
}

.booking-qris-details.is-open .booking-qris-details__backdrop {
    opacity: 1;
}

.booking-qris-details.is-open .booking-qris-details__sheet {
    transform: translateY(0);
}

.booking-qris-details__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 16px 12px;
}

.booking-qris-details__head strong {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.booking-qris-details__close {
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 18px;
}

.booking-qris-details__body {
    padding: 0 16px 22px;
}

.booking-qris-details__row,
.booking-qris-details__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booking-qris-details__row {
    padding: 8px 0 16px;
    color: #4b5563;
    font-size: 14px;
}

.booking-qris-details__row strong,
.booking-qris-details__total strong {
    color: #3f3f46;
    font-size: 14px;
    font-weight: 600;
}

.booking-qris-details__total {
    padding-top: 12px;
    border-top: 1px dashed #cdd7e5;
    color: #3f3f46;
    font-size: 15px;
    font-weight: 600;
}

.booking-proof-screen {
    min-height: 100vh;
    padding: 10px 18px 24px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.12) 0%, rgba(99, 180, 255, 0) 140px),
        #ffffff;
}

.booking-proof-screen__shell {
    width: min(100%, 700px);
    margin: 0 auto;
}

.booking-proof-screen__header {
    margin-bottom: 12px;
}

.booking-proof-form {
    display: grid;
    gap: 16px;
}

.booking-proof-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid #dceafe;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(78, 140, 207, 0.08);
}

.booking-proof-card__top small,
.booking-proof-card__top strong,
.booking-proof-card__top span {
    display: block;
}

.booking-proof-card__top small {
    color: #6e87a7;
    font-size: 12px;
    font-weight: 600;
}

.booking-proof-card__top strong {
    color: #1f3557;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.booking-proof-card__top span {
    color: #7b8faa;
    font-size: 13px;
    font-weight: 500;
}

.booking-proof-upload {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 18px;
    border: 1px dashed #9ec8ff;
    border-radius: 16px;
    background: #f7fbff;
    text-align: center;
}

.booking-proof-upload__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #eaf4ff 0%, #dcecff 100%);
    color: #4f8fe6;
    font-size: 24px;
}

.booking-proof-upload strong {
    color: #17304f;
    font-size: 18px;
    font-weight: 700;
}

.booking-proof-upload small {
    color: #7b8faa;
    font-size: 13px;
}

.booking-proof-upload__button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.booking-proof-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #dceafe;
    border-radius: 12px;
    background: #f8fbff;
    color: #36527a;
    font-size: 14px;
    font-weight: 600;
}

.booking-proof-file i {
    color: #4f8fe6;
    font-size: 18px;
}

.booking-proof-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8fafc;
    color: #c2cbd7;
    font-size: 18px;
    font-weight: 700;
}

.booking-proof-submit:not(:disabled) {
    border-color: transparent;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    box-shadow: 0 14px 28px rgba(59, 156, 246, 0.22);
    color: #ffffff;
}

.booking-pending-screen {
    min-height: 100vh;
    padding: 24px 18px;
    background:
        linear-gradient(180deg, rgba(99, 180, 255, 0.14) 0%, rgba(99, 180, 255, 0) 180px),
        #ffffff;
}

.booking-pending-screen__shell {
    width: min(100%, 620px);
    min-height: calc(100vh - 48px);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.booking-pending-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 28px;
    padding: 36px 24px 24px;
    text-align: center;
}

.booking-pending-card__icon {
    display: inline-flex;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    border: 4px solid #20c8dd;
    border-radius: 50%;
    color: #20c8dd;
    font-size: 46px;
}

.booking-pending-card h1 {
    margin: 10px 0 0;
    color: #0b1f3f;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.booking-pending-card p {
    margin: 0;
    color: #17253d;
    font-size: 15px;
    line-height: 1.45;
}

.booking-pending-card__email {
    color: #2f7df6;
    font-size: 15px;
    font-weight: 600;
}

.booking-pending-card__action {
    display: inline-flex;
    min-width: 250px;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 0 24px;
    border-radius: 6px;
    background: linear-gradient(180deg, #63b4ff 0%, #3b9cf6 100%);
    box-shadow: 0 14px 28px rgba(59, 156, 246, 0.22);
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.form-control,
.form-select,
.btn {
    border-radius: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

@media (max-width: 991.98px) {
    .public-header {
        padding-top: 12px;
    }

    .public-shell:not(.public-shell--booking) .public-header .navbar {
        border-radius: 28px;
    }

    .public-shell:not(.public-shell--booking) .public-header .navbar-brand {
        width: 100%;
        justify-content: center;
    }

    .public-shell:not(.public-shell--booking) .public-header .ms-auto {
        width: 100%;
        justify-content: center;
    }

    .salon-hero__visual {
        min-height: 560px;
    }

    .salon-hero__content {
        padding-top: 138px;
        padding-bottom: 124px;
    }

    .consultation-banner {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .salon-story {
        padding-top: 88px;
    }

    .salon-gallery,
    .salon-hours__grid {
        grid-template-columns: 1fr;
    }

    .salon-gallery__card,
    .salon-gallery__card--wide,
    .salon-gallery__card--tall {
        min-height: 220px;
    }

    .salon-package-card__media {
        min-height: 220px;
    }

    body.app-shell {
        height: auto;
        overflow: auto;
    }

    .dashboard-shell {
        height: auto;
        min-height: 100vh;
    }

    .sidebar-panel {
        position: static;
        width: auto;
        height: auto;
    }

    .main-panel {
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        overflow: visible;
    }

    .topbar {
        position: sticky;
        top: 0;
    }

    .auth-card {
        grid-template-columns: 1fr;
        display: block;
    }

    .topbar {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .topbar__actions,
    .section-head,
    .dashboard-section-card__header,
    .dashboard-match__metrics,
    .dashboard-match__filters {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-match__metrics {
        gap: 22px;
    }

    .dashboard-filter--wide,
    .search-pill {
        min-width: 0;
        width: 100%;
    }

    .dashboard-top-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-top-card {
        padding: 22px;
    }

    .dashboard-empty-panel__text {
        font-size: 26px;
    }

    .calendar-toolbar,
    .calendar-selection-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-board {
        grid-template-columns: 60px 1fr;
    }

    .calendar-fab-wrapper {
        right: 16px;
        bottom: 16px;
    }

    .sales-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: -18px -16px 0;
    }

    .sales-toolbar,
    .sales-cash-header,
    .sales-cashflow-header,
    .sales-cashflow-card,
    .sales-cashflow-card__right,
    .sales-agenda-modal__body,
    .sales-grid-two {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .sales-grid-two--secondary {
        margin-top: 20px;
    }

    .sales-toolbar__group {
        flex-wrap: wrap;
    }

    .sales-toolbar__group--end {
        margin-left: 0;
    }

    .dashboard-filter--shop,
    .sales-search-field,
    .sales-search-select,
    .sales-btn-print {
        min-width: 0;
        width: 100%;
    }

    .sales-service-grid {
        grid-template-columns: 1fr;
    }

    .sales-chart-card__canvas {
        min-height: 280px;
    }

    .sales-donut-chart {
        height: 280px !important;
    }

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

    .sales-summary-sidebar {
        border-left: 0;
        border-top: 1px solid #e6edf7;
    }

    .sales-fab-wrapper {
        right: 16px;
        bottom: 16px;
    }

    .customers-tabs,
    .staff-tabs,
    .staff-modal__tabs,
    .services-tabs,
    .analytics-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .customers-toolbar,
    .staff-toolbar,
    .services-toolbar,
    .analytics-toolbar,
    .analytics-detail-toolbar,
    .reviews-toolbar,
    .vouchers-toolbar,
    .staff-summary-card,
    .customer-form-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-panel[data-staff-panel="attendance"] .staff-toolbar {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .staff-panel[data-staff-panel="attendance"] .staff-toolbar__group:nth-child(2) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .staff-schedule-card__head--week,
    .staff-schedule-row--week {
        grid-template-columns: 220px repeat(7, minmax(140px, 1fr));
    }

    .staff-schedule-card__head--month {
        grid-template-columns: 220px repeat(24, minmax(54px, 1fr));
    }

    .staff-schedule-row--month,
    .staff-member-row {
        grid-template-columns: 1fr;
    }

    .staff-summary-card__right {
        border-left: 0;
        padding-left: 0;
    }

    .staff-member-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .analytics-overview-grid,
    .analytics-report-grid,
    .vouchers-editor-grid,
    .vouchers-preview-card,
    .reviews-summary-card {
        grid-template-columns: 1fr;
    }

    .analytics-report-popover {
        position: static;
        width: 100%;
        max-width: none;
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: none;
        overflow: hidden;
    }

    .analytics-report-popover.is-open {
        max-height: none;
        margin-top: 18px;
        opacity: 1;
        visibility: visible;
    }

    .staff-fab-group,
    .customers-fab-wrapper,
    .services-fab-wrapper,
    .analytics-detail-menu {
        right: 16px;
        bottom: 16px;
    }

    .analytics-detail-menu__panel {
        bottom: 86px;
        width: min(300px, calc(100vw - 32px));
    }

    .content-panel {
        overflow: visible;
        padding: 18px 16px 28px;
    }

    .brand-profile-menu {
        width: min(286px, calc(100vw - 24px));
    }

    .account-shell {
        margin-top: 18px;
    }

    .account-profile-card,
    .account-verify-card {
        grid-template-columns: 1fr;
        padding: 24px 18px;
    }

    .account-profile-card__left {
        justify-items: stretch;
    }

    .account-avatar {
        justify-self: center;
    }

    .account-badges {
        justify-content: center;
        flex-wrap: wrap;
    }

    .account-phone-row {
        grid-template-columns: 54px 1fr;
    }

    .account-phone-row button {
        grid-column: 1 / -1;
        margin-top: 8px;
    }

    .account-security-row {
        grid-template-columns: 30px 1fr;
    }

    .account-switch {
        grid-column: 2;
    }

    .customer-account-shell {
        padding: 24px 0 44px;
    }

    .customer-account-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
    }

    .customer-account-hero h1 {
        font-size: 30px;
    }

    .customer-account-hero__action {
        width: 100%;
    }

    .customer-account-grid,
    .customer-voucher-grid {
        grid-template-columns: 1fr;
    }

    .customer-section-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-profile-panel {
        position: static;
    }

    .customer-profile-panel__stats {
        grid-template-columns: 1fr;
    }

    .customer-booking-item,
    .customer-voucher-ticket {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .customer-status-pill,
    .customer-voucher-ticket em {
        grid-column: 2;
        justify-self: start;
    }

    .hero-stats,
    .preview-grid {
        grid-template-columns: 1fr;
    }

    .booking-experience-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .booking-experience__top {
        grid-template-columns: 44px 1fr;
    }

    .booking-title {
        text-align: left;
        font-size: 1.9rem;
    }

    .booking-venue-card__visual,
    .booking-venue-card__visual > img {
        min-height: 224px;
    }

    .booking-quick-nav {
        gap: 14px;
    }

    .booking-quick-nav__icon {
        width: 66px;
        height: 66px;
        font-size: 24px;
    }

    .booking-section-caption {
        font-size: 1.15rem;
        line-height: 1.45;
    }

    .booking-date-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .booking-contact-grid,
    .booking-field-grid,
    .booking-slots {
        grid-template-columns: 1fr;
    }

    .booking-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-submit-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .public-shell:not(.public-shell--booking) .public-header .navbar {
        padding: 12px;
        border-radius: 22px;
    }

    .public-shell:not(.public-shell--booking) .public-header .ms-auto {
        gap: 8px 12px;
    }

    .salon-hero__frame {
        padding-bottom: 24px;
    }

    .salon-hero__visual {
        min-height: 520px;
        border-radius: 0 0 22px 22px;
    }

    .salon-hero__content {
        gap: 16px;
        padding: 124px 18px 92px;
    }

    .salon-hero__kicker {
        font-size: 1rem;
    }

    .salon-hero__copy {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .salon-hero__actions,
    .consultation-banner__form {
        grid-template-columns: 1fr;
    }

    .salon-hero__actions .btn,
    .consultation-banner__button {
        width: 100%;
    }

    .consultation-banner {
        position: static;
        width: 100%;
        margin-top: 12px;
        transform: none;
    }

    .salon-story {
        padding-top: 26px;
    }

    .salon-gallery__card,
    .salon-package-card,
    .salon-review-card {
        border-radius: 18px;
    }

    .salon-package-card__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}