.sb-owner-body {
    --sbo-navy: #153562;
    --sbo-teal: #119b91;
    --sbo-mint: #4bc8b3;
    --sbo-bg: #f5f7fa;
    --sbo-card: #fff;
    --sbo-text: #172033;
    --sbo-muted: #778198;
    --sbo-line: #e5e9ef;
    min-height: 100vh;
    background: var(--sbo-bg);
    color: var(--sbo-text);
}

/* Keep Owner Portal typography aligned with the Sales Book design system. */
.sb-owner-body {
    font-family: var(--sb-font-regular);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sb-owner-body h1,
.sb-owner-body h2,
.sb-owner-body h3,
.sb-owner-body h4,
.sb-owner-body h5,
.sb-owner-body h6,
.sb-owner-body strong,
.sb-owner-body b {
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.sb-owner-body button,
.sb-owner-body input,
.sb-owner-body select,
.sb-owner-body textarea {
    font-family: inherit;
}

.sb-owner-body button {
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        filter .18s ease;
}

.sb-owner-body button:focus-visible {
    outline: 3px solid rgba(17, 155, 145, .24);
    outline-offset: 2px;
}

.sb-owner-body button:not(:disabled):not(.sbo-staff-limit-modal__backdrop):not(.sbo-add-staff-modal__backdrop):not(.agent-add-staff-modal__backdrop):not(.agent-add-outlet-modal__backdrop):not(.sbo-remove-staff-modal__backdrop):not(.sbo-role-modal__backdrop):not(.sbo-pin-modal__backdrop):not(.sbo-owner-pin-modal__backdrop):not(.sbo-handover-detail__backdrop):not(.sbo-staff-pack-modal__backdrop):not(.sbo-close-day-modal__backdrop):not(.sbo-share-summary-modal__backdrop):not(.agent-confirm-handover-modal__backdrop):not(.agent-message-staff-modal__backdrop):not(.agent-ask-staff-modal__backdrop):not(.agent-shortage-modal__backdrop):not(.agent-expenses-sheet__backdrop):not(.agent-add-expense-modal__backdrop):not(.agent-signoff-modal__backdrop):not(.agent-force-close-modal__backdrop):not(.agent-report-modal__backdrop):active {
    transform: translateY(0) scale(.98);
}

@media (hover: hover) and (pointer: fine) {
    .sb-owner-body button:not(:disabled):not(.sbo-staff-limit-modal__backdrop):not(.sbo-add-staff-modal__backdrop):not(.agent-add-staff-modal__backdrop):not(.agent-add-outlet-modal__backdrop):not(.sbo-remove-staff-modal__backdrop):not(.sbo-role-modal__backdrop):not(.sbo-pin-modal__backdrop):not(.sbo-owner-pin-modal__backdrop):not(.sbo-handover-detail__backdrop):not(.sbo-staff-pack-modal__backdrop):not(.sbo-close-day-modal__backdrop):not(.sbo-share-summary-modal__backdrop):not(.agent-confirm-handover-modal__backdrop):not(.agent-message-staff-modal__backdrop):not(.agent-ask-staff-modal__backdrop):not(.agent-shortage-modal__backdrop):not(.agent-expenses-sheet__backdrop):not(.agent-add-expense-modal__backdrop):not(.agent-signoff-modal__backdrop):not(.agent-force-close-modal__backdrop):not(.agent-report-modal__backdrop):hover {
        filter: brightness(.96);
        transform: translateY(-1px);
    }
}

.sbo-auth-body {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #153562, #41cdb6) 1;
}

.sbo-auth-shell {
    min-height: calc(100vh - 3px);
    display: grid;
    place-items: center;
    padding: 48px 20px;
    position: relative;
}

.sbo-fullscreen {
    position: fixed;
    top: 13px;
    right: 13px;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    color: #3e4654;
    background: transparent;
    cursor: pointer;
}

.sbo-fullscreen svg { width: 100%; height: 100%; }
.sbo-auth-panel { width: min(100%, 360px); }

.sbo-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}

.sbo-brand__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    border-radius: 13px;
    color: #fff;
    background: var(--sbo-navy);
    box-shadow: 0 8px 18px rgba(21, 53, 98, .22);
}

.sbo-brand__icon svg { width: 29px; height: 29px; }
.sbo-brand__name { display: block; text-align: center; font-size: 20px; line-height: 1; }
.sbo-brand__name strong { color: var(--sbo-navy); }
.sbo-brand__name b { color: var(--sbo-teal); }

.sbo-brand__name small {
    display: block;
    margin-top: 8px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-regular);
    letter-spacing: .01em;
}

.sbo-auth-card {
    padding: 27px 25px 25px;
    border: 1px solid #e2e6eb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(26, 41, 66, .06);
}

.sbo-auth-card h1 {
    margin: 0 0 7px;
    font-size: 17px;
    line-height: 1.25;
}

.sbo-auth-card > p {
    margin: 0 0 20px;
    color: var(--sbo-muted);
    font-size: 12px;
    line-height: 1.45;
}

.sbo-auth-form { margin-top: 16px; }

.sbo-phone-field {
    display: flex;
    align-items: center;
    height: 52px;
    overflow: hidden;
    border: 1px solid #dce1e8;
    border-radius: 12px;
    background: #fafbfc;
    transition: border-color .2s, box-shadow .2s;
}

.sbo-phone-field:focus-within {
    border-color: var(--sbo-navy);
    box-shadow: 0 0 0 3px rgba(21, 53, 98, .1);
}

.sbo-phone-code {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0 13px;
    border-right: 1px solid #e2e6eb;
    color: var(--sbo-text);
    background: #f2f4f7;
    font: 13px var(--sb-font-semibold);
}

.sbo-phone-field input {
    min-width: 0;
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 14px;
    color: var(--sbo-text);
    background: transparent;
    font: 15px var(--sb-font-regular);
    letter-spacing: .05em;
}

.sbo-phone-field input::placeholder { color: #aab2c0; }

.sbo-primary-button {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--sbo-navy);
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
    transition: background .2s, transform .2s, opacity .2s;
}

.sbo-primary-button svg { width: 16px; height: 16px; }
.sbo-primary-button span:last-child { margin-left: 1px; }
.sbo-primary-button:hover { background: #0d284f; transform: translateY(-1px); }
.sbo-primary-button:disabled { cursor: not-allowed; transform: none; opacity: .4; }

.sbo-button-loader {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 1px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sbo-button-spin .7s linear infinite;
}

.sbo-primary-button.is-loading {
    opacity: .75;
}

.sbo-primary-button.is-loading .sbo-button-icon,
.sbo-primary-button.is-loading .sbo-button-arrow {
    display: none;
}

.sbo-primary-button.is-loading .sbo-button-loader {
    display: inline-block;
}

@keyframes sbo-button-spin {
    to { transform: rotate(360deg); }
}

.sbo-global-submit-loading {
    pointer-events: none;
    cursor: wait !important;
    opacity: .78;
    transform: none !important;
}

.sbo-global-submit-spinner {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    display: inline-block;
    flex: 0 0 15px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sbo-button-spin .7s linear infinite;
}

.sbo-field-error {
    margin: 8px 0 0;
    color: #d54b4b;
    font-size: 11px;
    line-height: 1.35;
}

.sbo-field-error--center { text-align: center; }

.sbo-alert {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.4;
}

.sbo-alert--error { color: #a13232; border: 1px solid #f1caca; background: #fff1f1; }
.sbo-alert--success { color: #14705c; border: 1px solid #bce9df; background: #ecfbf7; }
.sbo-alert--warning { color: #8a5b08; border: 1px solid #ecd69c; background: #fff9e8; }

.sbo-notifications {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 400;
    width: min(420px, calc(100% - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.sbo-notification {
    position: relative;
    min-height: 62px;
    padding: 13px 44px 13px 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(18, 32, 51, .2);
    pointer-events: auto;
    animation: sbo-notification-in .24s ease-out both;
}

.sbo-notification__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 16px var(--sb-font-bold);
}

.sbo-notification p { margin: 0; font-size: 13px; line-height: 1.45; }

.sbo-notification > button {
    position: absolute;
    top: 10px;
    right: 9px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    color: currentColor;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    opacity: .72;
}

.sbo-notification > button:hover { background: rgba(0, 0, 0, .06); opacity: 1; }

.sbo-notification__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    transform-origin: left;
    animation: sbo-notification-progress 6s linear forwards;
    opacity: .48;
}

.sbo-notification.is-paused .sbo-notification__progress { animation-play-state: paused; }
.sbo-notification.is-hiding { animation: sbo-notification-out .24s ease-in both; }
.sbo-notification--success { color: #116e5a; border-color: #aee4d6; background: #effcf8; }
.sbo-notification--success .sbo-notification__icon { color: #fff; background: #159579; }
.sbo-notification--warning { color: #8a5b08; border-color: #ecd69c; background: #fff9e8; }
.sbo-notification--warning .sbo-notification__icon { color: #fff; background: #d79618; }
.sbo-notification--error { color: #a13232; border-color: #edbcbc; background: #fff2f2; }
.sbo-notification--error .sbo-notification__icon { color: #fff; background: #d65454; }

@keyframes sbo-notification-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sbo-notification-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(18px); }
}

@keyframes sbo-notification-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.sbo-benefits {
    display: flex;
    justify-content: center;
    gap: 23px;
    margin: 18px 0 22px;
    color: var(--sbo-muted);
    font-size: 10px;
}

.sbo-benefits span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sbo-benefits i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: #eef2f7; font-style: normal; }
.sbo-benefits span:nth-child(1) i { background: #fff3de; }
.sbo-benefits span:nth-child(2) i { background: #fff0ee; }
.sbo-benefits span:nth-child(3) i { color: #2ca9c6; background: #e6f7fb; }

.sbo-help { margin: 0; text-align: center; color: #9098a8; font-size: 10px; }
.sbo-help a { color: var(--sbo-teal); text-decoration: none; font-family: var(--sb-font-semibold); }

.sbo-verify-card { text-align: center; padding-top: 24px; }

.sbo-message-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    border-radius: 11px;
    color: var(--sbo-navy);
    background: #eef1f5;
}

.sbo-message-icon svg { width: 25px; height: 25px; }
.sbo-verify-card > p strong { color: var(--sbo-text); }

.sbo-debug-code {
    margin: -7px 0 13px;
    padding: 6px 9px;
    border-radius: 7px;
    color: #78610d;
    background: #fff8d8;
    font-size: 10px;
}

.sbo-otp-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }

.sbo-otp-group input {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid #dce1e8;
    border-radius: 11px;
    outline: 0;
    text-align: center;
    color: var(--sbo-navy);
    background: #f8f9fb;
    font: 18px var(--sb-font-bold);
}

.sbo-otp-group input:focus {
    border-color: var(--sbo-navy);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(21, 53, 98, .08);
}

.sbo-otp-progress { display: flex; justify-content: center; gap: 5px; margin: 13px 0 0; }
.sbo-otp-progress span { width: 22px; height: 3px; border-radius: 3px; background: var(--sbo-navy); }
.sbo-verify-card .sbo-primary-button { margin-top: 16px; background: #e9edf2; color: #8490a2; }
.sbo-verify-card .sbo-primary-button:not(:disabled) { color: #fff; background: var(--sbo-navy); }
.sbo-verify-card .sbo-primary-button.is-loading { color: #fff; background: var(--sbo-navy); }

.sbo-verify-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.sbo-verify-actions a, .sbo-link-button { color: #7d8696; font: 10px var(--sb-font-regular); text-decoration: none; }
.sbo-link-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.sbo-link-button:disabled { cursor: default; opacity: .7; }

.sbo-tip {
    display: flex;
    gap: 9px;
    margin: 14px 0 23px;
    padding: 11px 14px;
    border: 1px solid #f5e8ad;
    border-radius: 11px;
    color: #7f7251;
    background: #fffbed;
    font-size: 10px;
    line-height: 1.4;
}

.sbo-tip p { margin: 0; }

/* Dashboard */
.sbo-dashboard-body { background: #eef2f5; }

.sbo-dashboard {
    width: min(100%, 540px);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--sbo-bg);
    box-shadow: 0 0 30px rgba(24, 41, 65, .08);
}

.sbo-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 62px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sbo-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.sbo-dashboard-brand, .sbo-dashboard-user { display: flex; align-items: center; gap: 9px; }

.sbo-dashboard-brand__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #fff;
    background: var(--sbo-navy);
}

.sbo-dashboard-brand > span:last-child { display: flex; flex-direction: column; }
.sbo-dashboard-brand strong { color: var(--sbo-navy); font-size: 13px; }
.sbo-dashboard-brand small { color: var(--sbo-muted); font-size: 9px; margin-top: 2px; }

.sbo-dashboard-user select {
    max-width: 120px;
    height: 31px;
    border: 1px solid var(--sbo-line);
    border-radius: 8px;
    color: var(--sbo-text);
    background: #fff;
    font: 10px var(--sb-font-regular);
}

.sbo-branch-switcher { position: relative; }
.sbo-branch-switcher summary { list-style: none; }
.sbo-branch-switcher summary::-webkit-details-marker { display: none; }

.sbo-branch-switcher > summary {
    min-width: 162px;
    height: 42px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d5dce6;
    border-radius: 22px;
    color: var(--sbo-navy);
    background: #fff;
    cursor: pointer;
}

.sbo-branch-switcher > summary > span { font-size: 17px; }
.sbo-branch-switcher > summary strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--sb-font-semibold); }
.sbo-branch-switcher > summary b { font: 14px var(--sb-font-regular); transition: transform .18s; }
.sbo-branch-switcher[open] > summary { border-color: #bfcbdc; box-shadow: 0 0 0 3px rgba(21, 53, 98, .08); }
.sbo-branch-switcher[open] > summary b { transform: rotate(180deg); }

.sbo-branch-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: min(340px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #dce2e9;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(18, 35, 57, .22);
}

.sbo-branch-switcher__panel > header {
    padding: 16px 18px 12px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
}

.sbo-branch-switcher__panel > header strong { color: #737e91; font: 11px var(--sb-font-bold); letter-spacing: .05em; }
.sbo-branch-switcher__panel > header small { margin-top: 5px; color: #7f8999; font-size: 12px; }
.sbo-branch-switcher__panel form { margin: 0; }

.sbo-branch-option {
    width: 100%;
    min-height: 92px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    color: var(--sbo-text);
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.sbo-branch-option:not(:disabled):hover { background: #f7f9fb; }
.sbo-branch-option:disabled { cursor: default; opacity: 1; }
.sbo-branch-option.is-loading { opacity: .55; }

.sbo-branch-option__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--sbo-navy);
    background: #e8edf4;
    font-size: 20px;
}

.sbo-branch-option__copy { min-width: 0; display: flex; flex-direction: column; }
.sbo-branch-option__copy strong { overflow: hidden; color: #1e293b; text-overflow: ellipsis; white-space: nowrap; font: 16px var(--sb-font-semibold); }
.sbo-branch-option__copy small { margin-top: 3px; overflow: hidden; color: #7b8699; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sbo-branch-option__copy em { margin-top: 5px; color: #059669; font: 11px var(--sb-font-semibold); font-style: normal; }
.sbo-branch-option__copy em.is-off { color: #7b8699; }
.sbo-branch-option__state { color: var(--sbo-navy); font: 18px var(--sb-font-bold); }
.sbo-branch-option__state.is-off { padding: 4px 8px; border-radius: 12px; color: #7c8798; background: #edf0f4; font-size: 10px; }

.sbo-branch-switcher__manage {
    min-height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    color: var(--sbo-teal);
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
}

.sbo-branch-switcher__manage:hover { background: #f2faf8; }

.sbo-avatar {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: #fff;
    background: var(--sbo-teal);
    font: 10px var(--sb-font-bold);
}

.sbo-avatar--light { color: var(--sbo-navy); background: #e9eef5; }
.sbo-icon-button { border: 0; color: var(--sbo-muted); background: transparent; cursor: pointer; font-size: 18px; }
.sbo-dashboard-content { padding: 18px 15px 88px; }

.sbo-greeting { display: flex; align-items: start; justify-content: space-between; margin-bottom: 15px; }
.sbo-greeting h1 { margin: 0 0 4px; font-size: 19px; }
.sbo-greeting p { margin: 0; color: var(--sbo-muted); font-size: 10px; }

.sbo-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    color: #17816f;
    background: #e5f8f3;
    font: 9px var(--sb-font-semibold);
}

.sbo-live i { width: 6px; height: 6px; border-radius: 50%; background: #20b894; box-shadow: 0 0 0 3px rgba(32, 184, 148, .12); }

.sbo-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid #f0c7c7;
    border-radius: 11px;
    color: #9b3434;
    background: #fff1f1;
}

.sbo-notice__icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: #fbdcdc; }
.sbo-notice > div { flex: 1; display: flex; flex-direction: column; }
.sbo-notice strong { font-size: 11px; }
.sbo-notice small { margin-top: 2px; color: #bd6c6c; font-size: 8px; }
.sbo-notice__badge { padding: 5px 9px; border-radius: 12px; color: #fff; background: #e65858; font: 8px var(--sb-font-semibold); }

.sbo-sales-card {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--sbo-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(25, 42, 66, .04);
}

.sbo-sales-card__top { padding: 15px; display: flex; justify-content: space-between; }
.sbo-sales-card__top > div:first-child { display: flex; flex-direction: column; }
.sbo-sales-card__top span { color: var(--sbo-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.sbo-sales-card__top strong { margin: 3px 0; color: var(--sbo-navy); font-size: 24px; }
.sbo-sales-card__top small { color: var(--sbo-muted); font-size: 9px; }
.sbo-cashier { display: flex; align-items: center; flex-direction: column; gap: 4px; }
.sbo-payment-bars { padding: 12px 15px 14px; border-top: 1px solid #eef1f4; background: #fafbfc; }

.sbo-payment-row {
    display: grid;
    grid-template-columns: 45px 1fr 82px;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
    font-size: 9px;
}

.sbo-payment-row > div { height: 5px; overflow: hidden; border-radius: 4px; background: #e8ecf1; }
.sbo-payment-row i { display: block; height: 100%; border-radius: inherit; }
.sbo-payment-row strong { text-align: right; font-size: 9px; }

.sbo-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sbo-metric-card { position: relative; padding: 13px; border: 1px solid var(--sbo-line); border-radius: 12px; background: #fff; }
.sbo-metric-card small, .sbo-metric-card strong, .sbo-metric-card em { display: block; }
.sbo-metric-card small { color: var(--sbo-muted); font-size: 8px; text-transform: uppercase; }
.sbo-metric-card strong { margin: 5px 0 4px; color: var(--sbo-navy); font-size: 16px; }
.sbo-metric-card em { color: var(--sbo-muted); font-size: 8px; font-style: normal; }
.sbo-metric-icon { position: absolute; right: 11px; top: 11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.sbo-metric-icon--teal { color: #087f72; background: #ddf7f1; }
.sbo-metric-icon--blue { color: #286a9b; background: #e3f2fb; }

.sbo-section { margin-top: 18px; }
.sbo-section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.sbo-section-heading h2 { margin: 0; font-size: 13px; }
.sbo-section-heading p { margin: 3px 0 0; color: var(--sbo-muted); font-size: 8px; }
.sbo-count-badge { display: grid; place-items: center; min-width: 23px; height: 20px; padding: 0 6px; border-radius: 10px; color: #7d42bc; background: #efe4fb; font: 8px var(--sb-font-semibold); }
.sbo-count-badge--mint { color: #0b7c68; background: #ddf8f1; }
.sbo-section-total { color: #d68b10; font-size: 11px; }
.sbo-list { display: flex; flex-direction: column; gap: 7px; }

.sbo-list-card {
    min-height: 56px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--sbo-line);
    border-radius: 11px;
    background: #fff;
}
a.sbo-list-card--link { color: inherit; text-decoration: none; }
a.sbo-count-badge { text-decoration: none; }

.sbo-list-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    font: 10px var(--sb-font-bold);
}

.sbo-list-avatar--purple { color: #7543ac; background: #efe4fb; }
.sbo-list-avatar--yellow { color: #a66a08; background: #fff0ce; }
.sbo-list-avatar--mint { color: #087866; background: #dcf7f1; }
.sbo-list-avatar--navy { color: #fff; background: var(--sbo-navy); }
.sbo-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sbo-list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.sbo-list-main small { overflow: hidden; margin-top: 3px; color: var(--sbo-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.sbo-list-value { display: flex; align-items: end; flex-direction: column; }
.sbo-list-value strong { font-size: 10px; }
.sbo-list-value span { margin-top: 3px; color: #c88619; font-size: 7px; }
.sbo-list-value--success strong { color: #168971; }
.sbo-rank { color: #8f97a4; font: 9px var(--sb-font-semibold); }
.sbo-status-pill { padding: 4px 7px; border-radius: 8px; color: #137d69; background: #def7f1; font: 7px var(--sb-font-semibold); }
.sbo-status-pill--danger { color: #b33f3f; background: #ffeded; }
.sbo-empty { padding: 16px; border: 1px dashed #dce1e7; border-radius: 10px; color: var(--sbo-muted); text-align: center; background: rgba(255,255,255,.5); font-size: 9px; }

.sbo-sale-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
    font-size: 8px;
}

.sbo-sale-row:first-child { border-radius: 10px 10px 0 0; }
.sbo-sale-row:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
.sbo-sale-row > span { color: var(--sbo-muted); }
.sbo-sale-row > div { display: flex; flex-direction: column; }
.sbo-sale-row > div strong { font-size: 9px; }
.sbo-sale-row small { margin-top: 2px; color: var(--sbo-muted); font-size: 7px; }
.sbo-sale-row > strong { color: var(--sbo-navy); font-size: 9px; }
.sbo-sale-row em { padding: 3px 6px; border-radius: 7px; color: #16866f; background: #e2f7f2; font-size: 7px; font-style: normal; }
.sbo-section--last { margin-bottom: 10px; }

.sbo-day-footer {
    margin: 8px 0 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
    border: 1px solid #e2e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22, 34, 51, .05);
}
.sbo-day-footer__credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sbo-day-footer__balances {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.sbo-day-footer__balances p {
    margin: 0;
    color: #5d6b82;
    font-size: 13px;
    line-height: 1.35;
}
.sbo-day-footer__balances strong {
    color: #172234;
    font-family: var(--sb-font-bold);
}
.sbo-day-footer__balances .is-low strong,
.sbo-day-footer__balances .is-low span {
    color: #d29a1d;
}
.sbo-day-footer__balances .is-wa strong,
.sbo-day-footer__balances .is-wa span {
    color: #d64545;
}
.sbo-day-footer__topup {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sbo-teal);
    border-radius: 12px;
    background: #fff;
    color: var(--sbo-teal);
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
}
.sbo-day-footer__close {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--sbo-navy);
    color: #fff;
    text-decoration: none;
    font: 16px/1.2 var(--sb-font-bold);
}
.sbo-day-footer__note {
    margin: -2px 0 0;
    color: #8a96a8;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
}
.sbo-day-footer__close:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Close Day preview / confirm modals */
.sbo-close-day-modal[hidden] { display: none; }
.sbo-close-day-modal {
    padding: 20px;
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 1500;
    inset: 0;
}
.sbo-close-day-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: rgba(12, 18, 26, .55);
    backdrop-filter: blur(3px);
    cursor: default;
}
.sbo-close-day-modal__backdrop:hover,
.sbo-close-day-modal__backdrop:active {
    transform: none !important;
    filter: none !important;
}
.sbo-close-day-modal__dialog {
    width: min(420px, 100%);
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(10, 18, 28, .3);
}
.sbo-close-day-modal__dialog > header {
    padding: 18px 18px 12px;
    display: grid;
    grid-template-columns: 42px 1fr 34px;
    gap: 12px;
    align-items: start;
}
.sbo-close-day-modal__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f8f3;
    color: #1aa36c;
    font-size: 18px;
}
.sbo-close-day-modal__icon.is-lock {
    background: #eef2f8;
    color: var(--sbo-navy);
}
.sbo-close-day-modal__icon.is-approve {
    background: #e8f8f3;
    color: var(--sbo-teal);
}
.sbo-close-day-modal__dialog h2 {
    margin: 2px 0 4px;
    color: #172234;
    font: 20px/1.2 var(--sb-font-bold);
}
.sbo-close-day-modal__dialog header p {
    margin: 0;
    color: #8a96a8;
    font-size: 13px;
}
.sbo-close-day-modal__dialog header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3f5f8;
    color: #6b778a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.sbo-close-day-modal__summary {
    margin: 0 18px;
    padding: 14px;
    display: grid;
    gap: 10px;
    border-radius: 14px;
    background: #f4f6f8;
}
.sbo-close-day-modal__summary > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.sbo-close-day-modal__summary span {
    color: #6b778a;
    font-size: 13px;
}
.sbo-close-day-modal__summary strong {
    color: #172234;
    font: 14px/1.3 var(--sb-font-bold);
    text-align: right;
}
.sbo-close-day-modal__summary .is-ok { color: #1aa36c; }
.sbo-close-day-modal__summary .is-amber { color: #d29a1d; }
.sbo-close-day-modal__summary .is-danger,
.sbo-close-day-modal__summary .is-variance strong,
.sbo-close-day-modal__summary.is-compact .is-variance strong {
    color: #d64545;
}
.sbo-close-day-modal__summary .is-variance span,
.sbo-close-day-modal__summary.is-compact .is-variance span {
    color: #d29a1d;
    font-family: var(--sb-font-bold);
}
.sbo-close-day-modal__warn {
    margin: 12px 18px 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    border: 1px solid #f0d39a;
    border-radius: 14px;
    background: #fff8e8;
    color: #c07a12;
}
.sbo-close-day-modal__warn strong {
    display: block;
    margin-bottom: 3px;
    font: 14px/1.3 var(--sb-font-bold);
}
.sbo-close-day-modal__warn p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}
.sbo-close-day-modal__copy {
    margin: 0 18px 12px;
    color: #46536a;
    font-size: 14px;
    line-height: 1.5;
}
.sbo-close-day-modal__copy em {
    color: #d64545;
    font-style: normal;
    font-family: var(--sb-font-bold);
}
.sbo-close-day-modal__actions {
    margin-top: 16px;
    padding: 0 18px 18px;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
}
.sbo-close-day-modal__actions .is-cancel,
.sbo-close-day-modal__actions .is-continue {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-close-day-modal__actions .is-cancel {
    border: 1.5px solid var(--sbo-navy);
    background: #fff;
    color: var(--sbo-navy);
}
.sbo-close-day-modal__actions .is-continue {
    border: 0;
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-close-day-modal__actions .is-continue.is-teal {
    background: #3b9f98;
}
.sbo-close-day-modal__actions .is-continue:disabled {
    background: #8da7a5;
    cursor: not-allowed;
}

.sbo-approve-commissions-modal .sbo-close-day-modal__dialog {
    width: min(430px, 100%);
}
.sbo-approve-commissions-modal .sbo-close-day-modal__dialog > header {
    grid-template-columns: 1fr 34px;
    padding-bottom: 14px;
}
.sbo-approve-commissions-modal .sbo-close-day-modal__icon {
    display: none;
}
.sbo-approve-commissions-modal .sbo-close-day-modal__dialog h2 {
    margin-top: 4px;
}
.sbo-approve-commissions-modal .sbo-close-day-modal__dialog header p {
    max-width: 330px;
    color: #6b778a;
    font-size: 14px;
    line-height: 1.45;
}
.sbo-approve-commissions-modal__list {
    margin: 0 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
    border-radius: 14px;
    background: #f4f6f8;
}
.sbo-approve-commissions-modal__list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.sbo-approve-commissions-modal__list strong {
    color: #172234;
    font: 14px/1.2 var(--sb-font-bold);
}
.sbo-approve-commissions-modal__list span {
    color: var(--sbo-teal);
    font: 14px/1.2 var(--sb-font-bold);
}
.sbo-approve-commissions-modal__list p {
    margin: 0;
    color: #8a96a8;
    font-size: 13px;
}

.sbo-close-day-success .sbo-close-day-modal__dialog.is-success {
    padding: 28px 22px 24px;
    text-align: center;
}
.sbo-close-day-success__x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a96a8;
    font-size: 22px;
    cursor: pointer;
}
.sbo-close-day-success__check {
    width: 84px;
    height: 84px;
    margin: 8px auto 14px;
    display: grid;
    place-items: center;
    border: 3px solid #23a566;
    border-radius: 50%;
    color: #23a566;
    background: #eafaf1;
}
.sbo-close-day-success h2 {
    margin: 0 0 8px;
    color: #172234;
    font: 22px/1.2 var(--sb-font-bold);
}
.sbo-close-day-success p {
    margin: 0 auto 18px;
    max-width: 320px;
    color: #6b778a;
    font-size: 14px;
    line-height: 1.5;
}
.sbo-close-day-success__btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 14px;
    background: var(--sbo-navy);
    color: #fff;
    text-decoration: none;
    font: 15px var(--sb-font-bold);
}

/* Close Day page */
.sbo-close-day-header {
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-close-day-header h1 {
    margin: 0;
    font: 22px/1.2 var(--sb-font-bold);
}
.sbo-close-day-header p {
    margin: 2px 0 0;
    color: var(--sbo-muted);
    font-size: 12px;
}
.sbo-close-day-header__back {
    margin: 0 !important;
    color: var(--sbo-teal) !important;
    font: 12px var(--sb-font-semibold) !important;
}
.sbo-close-day-content {
    padding: 16px 15px 110px;
    display: grid;
    gap: 14px;
}
.sbo-close-day-card {
    padding: 14px;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
}
.sbo-close-day-card__head {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sbo-close-day-card__head h2 {
    margin: 0;
    font: 16px/1.2 var(--sb-font-bold);
}
.sbo-close-day-badge {
    padding: 5px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
}
.sbo-close-day-badge.is-open {
    background: #fff4d8;
    color: #b88412;
}
.sbo-close-day-badge.is-closed {
    background: #e8f8f3;
    color: #1aa36c;
}
.sbo-close-day-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-close-day-metrics article {
    padding: 12px;
    border-radius: 12px;
    background: #f5f7fa;
}
.sbo-close-day-metrics small {
    color: #8a96a8;
    font-size: 11px;
}
.sbo-close-day-metrics strong {
    display: block;
    margin-top: 4px;
    color: var(--sbo-navy);
    font: 18px var(--sb-font-bold);
}
.sbo-close-day-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.sbo-close-day-checks li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
}
.sbo-close-day-checks li > span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
}
.sbo-close-day-checks .is-pass > span {
    background: #e8f8f3;
    color: #1aa36c;
}
.sbo-close-day-checks .is-warn > span {
    background: #fff4d8;
    color: #d29a1d;
}
.sbo-close-day-checks strong {
    display: block;
    font: 13px/1.3 var(--sb-font-semibold);
}
.sbo-close-day-checks small {
    color: #8a96a8;
    font-size: 11px;
}
.sbo-close-day-checks a {
    color: var(--sbo-teal);
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}
.sbo-close-day-progress {
    margin-top: 14px;
    display: grid;
    gap: 6px;
}
.sbo-close-day-progress i {
    height: 8px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
}
.sbo-close-day-progress i span {
    display: block;
    width: var(--progress);
    height: 100%;
    background: linear-gradient(90deg, #1aa36c, #41cdb6);
}
.sbo-close-day-progress small {
    color: #8a96a8;
    font-size: 12px;
}
.sbo-close-day-field {
    display: grid;
    gap: 7px;
}
.sbo-close-day-field > span {
    color: #46536a;
    font: 13px var(--sb-font-semibold);
}
.sbo-close-day-field input {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d5dde6;
    border-radius: 12px;
    font: 16px var(--sb-font-bold);
}
.sbo-close-day-hint {
    margin: 10px 0 0;
    color: #1aa36c;
    font-size: 13px;
}
.sbo-close-day-amount {
    margin: 0;
    font: 28px/1.1 var(--sb-font-bold);
}
.sbo-close-day-amount.is-ok { color: #1aa36c; }
.sbo-close-day-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
}
.sbo-close-day-pill.is-ok { background: #e8f8f3; color: #1aa36c; }
.sbo-close-day-pill.is-pending { background: #fff4d8; color: #b88412; }
.sbo-close-day-approve {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--sbo-teal);
    color: #fff;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-close-day-commissions {
    display: grid;
    gap: 10px;
}
.sbo-close-day-commissions article {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.sbo-close-day-commissions__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sbo-close-day-approve.is-inline {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
}
.sbo-close-day-commissions strong {
    display: block;
    font: 14px var(--sb-font-semibold);
}
.sbo-close-day-commissions small {
    color: #6b778a;
    font-size: 12px;
}
.sbo-close-day-empty {
    margin: 0;
    color: #8a96a8;
    font-size: 13px;
}
.sbo-close-day-summary {
    margin: 0;
    display: grid;
    gap: 10px;
}
.sbo-close-day-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.sbo-close-day-summary dt {
    color: #6b778a;
    font-size: 13px;
}
.sbo-close-day-summary dd {
    margin: 0;
    color: #172234;
    font: 14px var(--sb-font-bold);
}
.sbo-close-day-summary .is-ok { color: #1aa36c; }
.sbo-close-day-summary .is-variance dt,
.sbo-close-day-summary .is-variance dd {
    color: #d29a1d;
}
.sbo-close-day-final {
    margin: 12px 0 0;
    color: #8a96a8;
    font-size: 12px;
}
.sbo-close-day-submit {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: var(--sbo-navy);
    color: #fff;
    text-decoration: none;
    font: 16px var(--sb-font-bold);
    cursor: pointer;
}
.sbo-close-day-pending-note {
    margin: 8px 0 0;
    color: #d29a1d;
    text-align: center;
    font: 13px var(--sb-font-semibold);
}
.sbo-close-day-draft {
    width: 100%;
    margin-top: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #46536a;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-close-day-page form.is-locked .sbo-close-day-field input {
    background: #f5f7fa;
}

.sbo-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    width: min(100%, 540px);
    height: 64px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--sbo-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -3px 16px rgba(22, 39, 62, .06);
}

.sbo-bottom-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #939baa; text-decoration: none; font-size: 8px; }
.sbo-bottom-nav a span { font-size: 15px; line-height: 1; }
.sbo-bottom-nav a.is-active { color: var(--sbo-teal); font-family: var(--sb-font-semibold); }

/* Delytt Sales Book typography and component scale */
.sbo-auth-panel { width: min(100%, 560px); }
.sbo-brand { margin-bottom: 30px; }
.sbo-brand__icon { width: 66px; height: 66px; border-radius: 14px; }
.sbo-brand__icon svg { width: 36px; height: 36px; }
.sbo-brand__name { font-size: 28px; font-family: var(--sb-font-bold); }
.sbo-brand__name small { margin-top: 10px; font: 16px/1.4 var(--sb-font-regular); }
.sbo-auth-card { padding: 38px 52px 36px; border-radius: 30px; }
.sbo-auth-card h1 {
    margin-bottom: 10px;
    font: normal clamp(28px, 4vw, 36px)/1.2 var(--sb-font-bold);
    letter-spacing: -.02em;
}
.sbo-auth-card > p { margin-bottom: 26px; font: 18px/1.5 var(--sb-font-regular); }
.sbo-auth-form { margin-top: 20px; }
.sbo-phone-field { height: 64px; border-radius: 14px; }
.sbo-phone-code { padding: 0 18px; font: 18px var(--sb-font-semibold); }
.sbo-phone-field input { padding: 0 18px; font: 19px var(--sb-font-regular); }
.sbo-primary-button { min-height: 60px; border-radius: 14px; font: 20px var(--sb-font-bold); }
.sbo-primary-button svg { width: 21px; height: 21px; }
.sbo-field-error, .sbo-alert { font-size: 15px; }
.sbo-benefits { gap: 32px; font-size: 14px; }
.sbo-benefits i { width: 40px; height: 40px; font-size: 17px; }
.sbo-help { font-size: 14px; }
.sbo-message-icon { width: 60px; height: 60px; }
.sbo-message-icon svg { width: 32px; height: 32px; }
.sbo-debug-code { font-size: 14px; }
.sbo-otp-group { gap: 10px; }
.sbo-otp-group input { min-height: 62px; font: normal 24px var(--sb-font-bold); }
.sbo-verify-actions a, .sbo-link-button { font-size: 14px; }
.sbo-tip { padding: 16px 18px; font-size: 14px; }

.sbo-dashboard,
.sbo-bottom-nav { width: min(100%, 720px); }
.sbo-dashboard-header { min-height: 80px; padding: 14px 24px; }
.sbo-dashboard-brand__icon { width: 46px; height: 46px; font-size: 20px; }
.sbo-dashboard-brand strong { font-size: 18px; }
.sbo-dashboard-brand small { font-size: 13px; }
.sbo-dashboard-user select { height: 42px; max-width: 170px; font-size: 14px; }
.sbo-avatar { width: 42px; height: 42px; font-size: 14px; }
.sbo-dashboard-content { padding: 28px 24px 110px; }
.sbo-greeting h1 { font: normal 28px/1.2 var(--sb-font-bold); }
.sbo-greeting p { font-size: 15px; }
.sbo-live { padding: 7px 12px; font-size: 13px; }
.sbo-notice { padding: 16px; }
.sbo-notice strong { font-size: 16px; }
.sbo-notice small { font-size: 13px; }
.sbo-notice__badge { font-size: 12px; }
.sbo-sales-card__top { padding: 22px; }
.sbo-sales-card__top span { font-size: 13px; }
.sbo-sales-card__top strong { font-size: 34px; }
.sbo-sales-card__top small { font-size: 14px; }
.sbo-payment-bars { padding: 18px 22px 20px; }
.sbo-payment-row { grid-template-columns: 70px 1fr 120px; gap: 12px; font-size: 14px; }
.sbo-payment-row strong { font-size: 14px; }
.sbo-metric-card { padding: 20px; }
.sbo-metric-card small { font-size: 12px; }
.sbo-metric-card strong { font-size: 23px; }
.sbo-metric-card em { font-size: 13px; }
.sbo-section-heading h2 { font-size: 20px; }
.sbo-section-heading p { font-size: 13px; }
.sbo-section-total { font-size: 16px; }
.sbo-count-badge { min-width: 32px; height: 27px; font-size: 12px; }
.sbo-list-card { min-height: 78px; padding: 14px 16px; }
.sbo-list-avatar { width: 44px; height: 44px; font-size: 14px; }
.sbo-list-main strong { font-size: 16px; }
.sbo-list-main small { font-size: 13px; }
.sbo-list-value strong { font-size: 15px; }
.sbo-list-value span, .sbo-status-pill { font-size: 11px; }
.sbo-empty { padding: 22px; font-size: 14px; }
.sbo-sale-row { padding: 15px; font-size: 13px; }
.sbo-sale-row > div strong, .sbo-sale-row > strong { font-size: 14px; }
.sbo-sale-row small, .sbo-sale-row em { font-size: 11px; }
.sbo-bottom-nav { height: 80px; }
.sbo-bottom-nav a { font-size: 12px; }
.sbo-bottom-nav a span { font-size: 21px; }

/* More menu */
.sbo-more-page { background: #f4f6f8; }

.sbo-more-header {
    min-height: 90px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}

.sbo-more-header h1 { margin: 0 0 5px; font: normal 30px/1.15 var(--sb-font-bold); }
.sbo-more-header p { margin: 0; color: var(--sbo-muted); font-size: 14px; }
.sbo-more-profile { display: flex; align-items: center; gap: 9px; }
.sbo-more-profile > span:last-child { display: flex; flex-direction: column; }
.sbo-more-profile strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.sbo-more-profile small { margin-top: 3px; color: var(--sbo-muted); font-size: 12px; }
.sbo-more-content { padding: 16px 24px 110px; }

.sbo-location-pill {
    min-height: 44px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e7eaee;
    border-radius: 9px;
    color: #4c5565;
    background: #fff;
    font-size: 13px;
}

.sbo-location-pill strong { font-size: 14px; }
.sbo-location-pill small { margin-left: auto; color: var(--sbo-muted); font-size: 12px; }

.sbo-plan-warning {
    min-height: 72px;
    margin-top: 15px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #f2caca;
    border-radius: 11px;
    color: #a13d3d;
    background: #fff0f0;
    text-decoration: none;
}

.sbo-plan-warning > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ffdddd;
}

.sbo-plan-warning > div { flex: 1; display: flex; flex-direction: column; }
.sbo-plan-warning strong { font-size: 16px; }
.sbo-plan-warning small { margin-top: 4px; color: #c06a6a; font-size: 13px; }
.sbo-plan-warning b { font-size: 22px; }

.sbo-menu-section { margin-top: 25px; }
.sbo-menu-heading { margin: 0 0 9px 4px; display: flex; flex-direction: column; }
.sbo-menu-heading strong { color: #6f7888; font: 12px var(--sb-font-semibold); letter-spacing: .08em; }
.sbo-menu-heading small { margin-top: 4px; color: #a0a7b3; font-size: 12px; }

.sbo-menu-card {
    overflow: hidden;
    border: 1px solid #e7eaee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(25, 42, 66, .025);
}

.sbo-menu-row {
    width: 100%;
    min-height: 78px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    color: var(--sbo-text);
    background: #fff;
    text-align: left;
    text-decoration: none;
    font-family: var(--sb-font-regular);
    cursor: pointer;
    transition: background .15s;
}

.sbo-menu-row:last-child, .sbo-menu-form:last-child .sbo-menu-row { border-bottom: 0; }
.sbo-menu-row:hover { background: #fafbfc; }

.sbo-menu-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font: 18px var(--sb-font-semibold);
}

.sbo-menu-icon--mint { color: #138b78; background: #e2f7f2; }
.sbo-menu-icon--blue { color: #3b6dac; background: #eaf0f9; }
.sbo-menu-icon--purple { color: #7653ae; background: #efe9f9; }
.sbo-menu-icon--yellow { color: #ac770c; background: #fff2d4; }
.sbo-menu-icon--green { color: #198c69; background: #e2f7ed; }
.sbo-menu-icon--red { color: #c54d59; background: #ffebed; }

.sbo-menu-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sbo-menu-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.sbo-menu-copy small { overflow: hidden; margin-top: 5px; color: var(--sbo-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sbo-menu-arrow { flex: 0 0 auto; color: #aab0ba; font-size: 23px; }

.sbo-menu-badge, .sbo-menu-tag {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 8px;
    color: #287e70;
    background: #e4f6f2;
    font: 11px var(--sb-font-semibold);
}

.sbo-menu-badge--yellow, .sbo-menu-tag--yellow { color: #9b6c0a; background: #fff1ca; }
.sbo-menu-tag--red { color: #b24b55; background: #ffeaec; text-transform: capitalize; }
.sbo-menu-form { margin: 0; }
.sbo-menu-row--danger .sbo-menu-copy strong { color: #c24d58; }

.sbo-more-footer { padding: 20px 4px 6px; color: #979eaa; text-align: center; }
.sbo-more-footer p { margin: 0 0 19px; display: flex; align-items: center; font-size: 12px; }
.sbo-more-footer p span { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #24b88f; }
.sbo-more-footer p b { margin-left: auto; font: 12px var(--sb-font-regular); }
.sbo-more-footer small { font-size: 11px; }
.sbo-more-footer nav { margin-top: 6px; display: flex; justify-content: center; gap: 12px; }
.sbo-more-footer a { color: #89919e; font-size: 11px; text-decoration: none; }

/* Staff and PINs */
.sbo-staff-page { background: #f3f5f8; }

.sbo-staff-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}

.sbo-back-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--sbo-text);
    text-decoration: none;
    font: 30px/1 var(--sb-font-regular);
}

.sbo-back-button:hover { background: #f0f3f7; }
.sbo-staff-header h1 { margin: 0 0 4px; font: normal 27px/1.15 var(--sb-font-bold); }
.sbo-staff-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }

.sbo-add-staff-button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--sbo-navy);
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-add-staff-button span { margin-right: 4px; font-size: 18px; }
.sbo-staff-content { padding: 14px 22px 110px; }

.sbo-staff-tabs {
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #e9edf2;
}

.sbo-staff-tabs button,
.sbo-staff-tabs a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    color: #6c7585;
    background: transparent;
    font: 13px var(--sb-font-semibold);
    text-decoration: none;
}

.sbo-staff-tabs button.is-active,
.sbo-staff-tabs a.is-active {
    color: var(--sbo-navy);
    background: #fff;
    box-shadow: 0 1px 4px rgba(24, 42, 67, .08);
}

.sbo-staff-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.sbo-staff-stats article {
    min-height: 78px;
    display: grid;
    place-content: center;
    gap: 4px;
    border: 1px solid #e7eaee;
    border-radius: 12px;
    text-align: center;
    background: #fff;
}

.sbo-staff-stats strong { font-size: 22px; }
.sbo-staff-stats strong.is-active { color: #169678; }
.sbo-staff-stats strong.is-inactive { color: #777f8c; }
.sbo-staff-stats small { color: var(--sbo-muted); font-size: 11px; }

.sbo-staff-info, .sbo-staff-footer-note {
    margin-top: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid #aae5d7;
    border-radius: 12px;
    color: #236f63;
    background: #e9faf6;
}

.sbo-staff-info > span, .sbo-staff-footer-note > span { font-size: 18px; }
.sbo-staff-info p, .sbo-staff-footer-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.sbo-staff-info strong { font-family: var(--sb-font-semibold); }

.sbo-staff-usage {
    margin-top: 14px;
    min-height: 72px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: 28px 1fr 120px;
    align-items: center;
    gap: 10px;
    border: 1px solid #cad4e2;
    border-radius: 16px;
    background: #eef1f5;
}

.sbo-staff-usage__icon { color: var(--sbo-navy); font-size: 20px; }
.sbo-staff-usage > div:nth-child(2) { display: flex; flex-direction: column; }
.sbo-staff-usage strong { color: #18243a; font-size: 16px; }
.sbo-staff-usage small { margin-top: 3px; color: #6d7b93; font-size: 11px; }
.sbo-staff-progress { height: 7px; overflow: hidden; border-radius: 7px; background: #cdd5df; }
.sbo-staff-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sbo-navy); transition: width .3s; }

.sbo-staff-search {
    height: 48px;
    margin-top: 14px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e0e5eb;
    border-radius: 10px;
    color: #7d8694;
    background: #fff;
}

.sbo-staff-search span { font-size: 20px; }
.sbo-staff-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--sbo-text); background: transparent; font: 14px var(--sb-font-regular); }
.sbo-staff-search:focus-within { border-color: var(--sbo-teal); box-shadow: 0 0 0 3px rgba(17, 155, 145, .1); }

.sbo-staff-search__loader {
    flex: 0 0 auto;
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d7dde5;
    border-top-color: var(--sbo-teal);
    border-radius: 50%;
    animation: sbo-button-spin .7s linear infinite;
}

.sbo-staff-search.is-loading .sbo-staff-search__loader { display: block; }
.sbo-staff-search__status { min-height: 17px; margin: 6px 2px 0; color: var(--sbo-muted); font-size: 11px; }
.sbo-staff-search__empty { margin-top: 14px; }
.sbo-staff-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.sbo-staff-card {
    position: relative;
    min-height: 150px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #e5e9ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25, 42, 66, .025);
}

.sbo-staff-card[hidden] { display: none; }
.sbo-staff-card.is-inactive { opacity: .62; }
.sbo-staff-card > img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sbo-staff-card__main { flex: 1; min-width: 0; }
.sbo-staff-card__title { padding-right: 28px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sbo-staff-card__title > strong { font-size: 16px; }

.sbo-role-pill {
    padding: 3px 7px;
    border: 1px solid #cad6e6;
    border-radius: 8px;
    color: var(--sbo-navy);
    background: #f0f4f9;
    font: 10px var(--sb-font-semibold);
}

.sbo-staff-card__main > p { margin: 7px 0 2px; color: #475164; font-size: 13px; }
.sbo-staff-card__main > small { color: var(--sbo-muted); font-size: 11px; }
.sbo-staff-security, .sbo-staff-meta { margin-top: 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.sbo-staff-security span, .sbo-staff-meta span {
    padding: 4px 7px;
    border-radius: 7px;
    color: #6c7585;
    background: #f0f2f5;
    font-size: 10px;
}

.sbo-staff-security span.is-success { color: #147b67; background: #e2f7f1; }
.sbo-staff-security span.is-warning { color: #a6730b; background: #fff2d3; }
.sbo-staff-actions { position: absolute; top: 12px; right: 10px; z-index: 5; }
.sbo-staff-actions summary { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #697385; cursor: pointer; font-size: 20px; list-style: none; }
.sbo-staff-actions summary::-webkit-details-marker { display: none; }
.sbo-staff-actions summary:hover { background: #f0f3f6; }

.sbo-staff-actions > div {
    position: absolute;
    top: 32px;
    right: 0;
    width: 210px;
    overflow: hidden;
    border: 1px solid #dfe4ea;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(20, 37, 60, .16);
}

.sbo-staff-actions button { width: 100%; min-height: 42px; padding: 0 13px; border: 0; color: #30394a; background: #fff; text-align: left; font: 12px var(--sb-font-regular); cursor: pointer; }
.sbo-staff-actions button:hover { background: #f5f7f9; }
.sbo-staff-actions button:disabled { color: #a5abb5; cursor: not-allowed; background: #f8f9fa; }
.sbo-staff-actions button.is-danger { color: #c34e59; border-top: 1px solid #edf0f3; }
.sbo-staff-footer-note {
    padding: 17px 18px;
    align-items: flex-start;
    gap: 13px;
    color: #64728a;
    border-color: #d8dfe8;
    border-radius: 16px;
    background: #f0f2f5;
}

.sbo-staff-footer-note__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #169b96;
}

.sbo-staff-footer-note__icon svg { width: 100%; height: 100%; }
.sbo-staff-footer-note > div { min-width: 0; }
.sbo-staff-footer-note p { font-size: 12px; line-height: 1.55; }
.sbo-staff-footer-note p strong { color: #25344f; font-family: var(--sb-font-bold); }
.sbo-staff-footer-note p em { color: #70809a; }
.sbo-staff-footer-note p.sbo-staff-footer-note__plan { margin-top: 7px; }
.sbo-staff-footer-note__plan b { color: var(--sbo-navy); font-family: var(--sb-font-bold); }

.sbo-staff-card { min-height: 188px; padding: 20px; gap: 16px; border-radius: 16px; }

.sbo-staff-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
}

.sbo-staff-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sbo-staff-avatar i { position: absolute; right: 0; bottom: 2px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #9aa2ae; }
.sbo-staff-avatar i.is-online { background: #13b98c; }
.sbo-staff-card__title > strong { font-size: 18px; }
.sbo-staff-card__main > p { margin-top: 6px; font-size: 14px; }
.sbo-staff-card__main > small { font-size: 12px; }
.sbo-staff-security { margin-top: 13px; gap: 10px; }

.sbo-staff-security span, .sbo-regenerate-pin, .sbo-pin-status {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 10px;
    color: #657084;
    background: #f0f2f5;
    font: 12px var(--sb-font-regular);
}

.sbo-staff-security .sbo-pin-mask { padding: 0 13px; border: 1px solid #d9dee6; font-family: var(--sb-font-semibold); letter-spacing: .08em; }
.sbo-regenerate-pin { padding: 0; color: #078d7a; background: transparent; cursor: pointer; font-family: var(--sb-font-semibold); }
.sbo-staff-security span.is-success, .sbo-pin-status.is-success { color: #078d69; background: transparent; font-family: var(--sb-font-semibold); }
.sbo-staff-security span.is-warning, .sbo-pin-status.is-warning { color: #a6730b; background: #fff2d3; }
.sbo-pin-status { cursor: pointer; }
.sbo-pin-status:disabled { cursor: not-allowed; }
.sbo-staff-access, .sbo-staff-permissions { margin-top: 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.sbo-staff-access span {
    padding: 5px 10px;
    border: 1px solid #cdd6e2;
    border-radius: 12px;
    color: #33425a;
    background: #f7f9fb;
    font-size: 11px;
}

.sbo-staff-access span.is-shops { color: #09856f; border-color: #9adbc9; background: #e8faf4; }
.sbo-staff-permissions span { padding: 5px 9px; border-radius: 9px; color: #687286; background: #eceff3; font-size: 11px; }

.sbo-roles-info {
    margin-top: 14px;
    padding: 15px 17px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #cbd4e1;
    border-radius: 12px;
    color: #445064;
    background: #e9edf3;
}

.sbo-roles-info > span { color: var(--sbo-navy); font-size: 20px; }
.sbo-roles-info p { margin: 0; font-size: 13px; line-height: 1.55; }
.sbo-roles-info strong { font-family: var(--sb-font-semibold); }
.sbo-role-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.sbo-role-card {
    padding: 16px 18px 17px;
    border: 1px solid #e4e8ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25, 42, 66, .025);
}

.sbo-role-card__header { display: flex; align-items: center; gap: 8px; }

.sbo-role-name {
    padding: 5px 10px;
    border-radius: 9px;
    color: #243247;
    font: 13px var(--sb-font-semibold);
}

.sbo-system-role {
    padding: 4px 7px;
    border-radius: 8px;
    color: #657085;
    background: #edf0f4;
    font: 10px var(--sb-font-semibold);
}

.sbo-role-staff-count { margin-left: auto; color: var(--sbo-muted); font-size: 12px; }
.sbo-role-edit { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #6f7888; background: transparent; cursor: pointer; font-size: 17px; }
.sbo-role-edit:hover { background: #f0f3f6; }
.sbo-role-permissions { margin-top: 13px; display: grid; gap: 8px; }

.sbo-role-permissions > div {
    min-height: 25px;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 7px;
}

.sbo-permission-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font: 11px var(--sb-font-bold);
}

.sbo-role-permissions strong { font-size: 13px; }
.sbo-role-permissions small { padding: 4px 7px; border-radius: 7px; color: #667186; background: #edf0f4; font-size: 10px; }
.sbo-role-permissions .is-enabled .sbo-permission-check { color: #fff; background: #22b894; }
.sbo-role-permissions .is-disabled { opacity: .38; }
.sbo-role-permissions .is-disabled .sbo-permission-check { color: #88919f; border: 1px solid #aeb5c0; }

.sbo-create-role-button {
    width: 100%;
    min-height: 50px;
    margin-top: 14px;
    border: 1px dashed #cbd2dc;
    border-radius: 11px;
    color: var(--sbo-navy);
    background: rgba(255, 255, 255, .55);
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-create-role-button:hover { border-color: var(--sbo-navy); background: #fff; }

.sbo-modal-open { overflow: hidden; }

.sbo-staff-limit-modal {
    position: fixed;
    inset: 0;
    z-index: 135;
    display: none;
    place-items: center;
    padding: 18px;
}

.sbo-staff-limit-modal.is-open { display: grid; }

.sbo-staff-limit-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 13, 20, .8);
    cursor: default;
}

.sbo-staff-limit-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.sbo-staff-limit-modal header {
    min-height: 66px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e4e8ed;
}

.sbo-staff-limit-modal header > span { color: var(--sbo-navy); font-size: 24px; }
.sbo-staff-limit-modal h2 { margin: 0; font: normal 20px var(--sb-font-bold); }

.sbo-staff-limit-modal header button {
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    border-radius: 8px;
    color: #626d7c;
    background: transparent;
    cursor: pointer;
    font-size: 23px;
}

.sbo-staff-limit-modal header button:hover { background: #f0f3f6; }
.sbo-staff-limit-modal__body { padding: 22px 22px 18px; }
.sbo-staff-limit-modal__body strong { color: var(--sbo-navy); font: 18px var(--sb-font-bold); }
.sbo-staff-limit-modal__body p { margin: 9px 0 0; color: #6c7686; font-size: 14px; line-height: 1.55; }
.sbo-staff-limit-modal footer { padding: 0 22px 22px; }

.sbo-staff-limit-modal footer button {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--sbo-navy);
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}

/* Add staff modal */
.sbo-add-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 14px;
}

.sbo-add-staff-modal.is-open { display: grid; }

.sbo-add-staff-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 13, 20, .8);
    cursor: default;
}

.sbo-add-staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    height: min(920px, calc(100vh - 28px));
    overflow: hidden;
    border-radius: 16px;
    background: #f8f9fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.sbo-add-staff-modal form {
    height: calc(100% - 68px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.sbo-add-staff-modal__header {
    min-height: 68px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}

.sbo-add-staff-modal__header > span { color: var(--sbo-navy); font-size: 24px; }
.sbo-add-staff-modal__header h2 { margin: 0; font: normal 22px var(--sb-font-bold); }

.sbo-add-staff-modal__header button {
    width: 34px;
    height: 34px;
    margin-left: auto;
    border: 0;
    border-radius: 8px;
    color: #5d6675;
    background: transparent;
    cursor: pointer;
    font-size: 25px;
}

.sbo-add-staff-modal__header button:hover { background: #eef1f4; }

.sbo-add-staff-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 20px 30px 24px;
    scrollbar-color: #8e949c transparent;
    scrollbar-width: thin;
}

.sbo-add-staff-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.sbo-profile-image-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.sbo-profile-image-field__label {
    color: #252d3a;
    font: 14px var(--sb-font-semibold);
}

.sbo-profile-image-field__label small {
    font-family: var(--sb-font-regular);
    color: #738096;
}

.sbo-profile-image-field__picker {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px dashed #c9d2de;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.sbo-profile-image-field__picker:hover,
.sbo-profile-image-field__picker:focus-within {
    border-color: var(--sbo-navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21, 53, 98, .1);
}

.sbo-profile-image-field__preview {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: #e8eef5;
    display: grid;
    place-items: center;
}

.sbo-profile-image-field__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbo-profile-image-field__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbo-profile-image-field__copy strong {
    color: #1f2a3a;
    font: 14px var(--sb-font-semibold);
}

.sbo-profile-image-field__copy small {
    color: #738096;
    font: 12px var(--sb-font-regular);
}

.sbo-add-staff-field > span {
    color: #252d3a;
    font: 14px var(--sb-font-semibold);
}

.sbo-add-staff-field > span small { font-family: var(--sb-font-regular); }

.sbo-add-staff-field > input,
.sbo-add-staff-field > select,
.sbo-add-staff-phone {
    width: 100%;
    min-height: 52px;
    border: 1px solid #dce1e8;
    border-radius: 13px;
    color: var(--sbo-text);
    background: #fff;
    font: 16px var(--sb-font-regular);
    transition: border-color .18s, box-shadow .18s;
}

.sbo-add-staff-field > input,
.sbo-add-staff-field > select { padding: 0 15px; }

.sbo-add-staff-field > input:focus,
.sbo-add-staff-field > select:focus,
.sbo-add-staff-phone:focus-within {
    border-color: var(--sbo-navy);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(21, 53, 98, .12);
}

.sbo-add-staff-phone {
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sbo-add-staff-phone b { color: #8590a1; font-size: 17px; }
.sbo-add-staff-phone > span { color: #738096; font-size: 16px; }

.sbo-add-staff-phone input {
    min-width: 0;
    flex: 1;
    align-self: stretch;
    border: 0;
    outline: 0;
    color: var(--sbo-text);
    background: transparent;
    font-size: 16px;
}

.sbo-add-staff-permissions {
    min-height: 25px;
    margin: -7px 0 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sbo-add-staff-permissions span {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #42516a;
    background: #f8fafc;
    font-size: 10px;
}

.sbo-add-staff-pin-note {
    margin: 3px 0 16px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #8ce5c7;
    border-radius: 13px;
    color: #086a57;
    background: #eafff7;
}

.sbo-add-staff-pin-note > span { flex: 0 0 auto; font-size: 20px; }
.sbo-add-staff-pin-note strong { font: 15px var(--sb-font-semibold); }
.sbo-add-staff-pin-note p { margin: 8px 0 10px; font-size: 13px; line-height: 1.5; }
.sbo-add-staff-pin-note p b { font-family: var(--sb-font-bold); }

.sbo-add-staff-pin-note small {
    min-height: 40px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    border: 1px solid #bfe9dc;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    font-size: 11px;
}

.sbo-add-staff-section {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid #dce2e9;
    border-radius: 13px;
    background: #f0f2f5;
}

.sbo-add-staff-section legend {
    width: 100%;
    padding: 0;
    color: #273246;
    font: 15px var(--sb-font-semibold);
}

.sbo-add-staff-section > p { margin: 7px 0 13px; color: var(--sbo-muted); font-size: 11px; }
.sbo-add-staff-branches { display: grid; gap: 9px; }

.sbo-add-staff-branches label {
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d4dae3;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
}

.sbo-add-staff-branches input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--sbo-navy);
}

.sbo-add-staff-branches span { font: 14px var(--sb-font-semibold); }
.sbo-sales-visibility { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-sales-visibility label { cursor: pointer; }
.sbo-sales-visibility input { position: absolute; opacity: 0; pointer-events: none; }

.sbo-sales-visibility span {
    min-height: 55px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dbe4;
    border-radius: 12px;
    background: #fff;
    font: 14px var(--sb-font-semibold);
}

.sbo-sales-visibility input:checked + span {
    border-color: var(--sbo-navy);
    color: var(--sbo-navy);
    background: #e8edf5;
    box-shadow: 0 0 0 1px var(--sbo-navy);
}

.sbo-add-staff-modal__footer {
    min-height: 78px;
    padding: 13px 22px;
    display: grid;
    grid-template-columns: .8fr 1fr 1.45fr;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #e1e5eb;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -6px 18px rgba(22, 37, 57, .05);
}

.sbo-add-staff-cancel,
.sbo-add-staff-only,
.sbo-add-staff-send {
    min-height: 50px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.sbo-add-staff-cancel { border: 1px solid #dce1e8; color: var(--sbo-text); background: #fff; }
.sbo-add-staff-only { border: 1px solid #cad3df; color: var(--sbo-navy); background: #f7f9fc; }
.sbo-add-staff-send { border: 0; color: #fff; background: var(--sbo-navy); }

.sbo-add-staff-only:disabled,
.sbo-add-staff-send:disabled { cursor: not-allowed; opacity: .42; }

.sbo-add-staff-only.is-loading .sbo-button-loader,
.sbo-add-staff-send.is-loading .sbo-button-loader { display: inline-block; }

.sbo-remove-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    place-items: center;
    padding: 18px;
}

.sbo-remove-staff-modal.is-open { display: grid; }

.sbo-remove-staff-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 13, 20, .82);
    cursor: default;
}

.sbo-remove-staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    overflow: hidden;
    border-radius: 16px;
    background: #f9fafb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.sbo-remove-staff-modal__header {
    min-height: 66px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #ece3e3;
    background: #fff;
}

.sbo-remove-staff-modal__header > span { color: #d84c4c; font-size: 24px; }
.sbo-remove-staff-modal__header h2 { margin: 0; color: #c84a4a; font: normal 20px var(--sb-font-bold); }

.sbo-remove-staff-modal__header button {
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    border-radius: 8px;
    color: #646d7a;
    background: transparent;
    cursor: pointer;
    font-size: 23px;
}

.sbo-remove-staff-modal__header button:hover { background: #f1f3f5; }
.sbo-remove-staff-modal form { padding: 22px; }
.sbo-remove-staff-modal form > p { margin: 0; color: #6b7484; font-size: 15px; line-height: 1.55; }
.sbo-remove-staff-modal form > p strong { color: var(--sbo-text); }
.sbo-remove-staff-modal footer { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sbo-remove-staff-cancel,
.sbo-remove-staff-submit {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-remove-staff-cancel { border: 2px solid var(--sbo-navy); color: var(--sbo-text); background: #fff; }
.sbo-remove-staff-submit { border: 0; color: #fff; background: #e54444; }
.sbo-remove-staff-submit:disabled { cursor: not-allowed; opacity: .55; }
.sbo-remove-staff-submit.is-loading .sbo-button-loader { display: inline-block; }

.sbo-role-modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 18px; }
.sbo-role-modal.is-open { display: grid; }

.sbo-role-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 13, 20, .78);
    cursor: default;
}

.sbo-role-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 610px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    border-radius: 16px;
    background: #f8f9fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.sbo-role-modal__header {
    min-height: 68px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e3e7ed;
    background: #fff;
}

.sbo-role-modal__header h2 { margin: 0; font: normal 20px var(--sb-font-bold); }
.sbo-role-modal__shield { color: var(--sbo-navy); font-size: 24px; }
.sbo-role-modal__close { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #596273; background: transparent; cursor: pointer; font-size: 25px; }
.sbo-role-modal__close:hover { background: #eef1f5; }
.sbo-role-modal form { padding: 18px; }

.sbo-role-modal__notice {
    min-height: 62px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #d8dee8;
    border-radius: 11px;
    color: #485468;
    background: #edf0f5;
}

.sbo-role-modal__notice > span { color: var(--sbo-navy); font-size: 19px; }
.sbo-role-modal__notice p { margin: 0; font-size: 13px; line-height: 1.45; }
.sbo-role-field { margin-top: 17px; display: flex; flex-direction: column; gap: 7px; }
.sbo-role-field > span, .sbo-badge-colors legend, .sbo-role-modal__permissions legend { color: #273246; font: 14px var(--sb-font-semibold); }

.sbo-role-field input {
    height: 52px;
    padding: 0 14px;
    border: 1.5px solid #d6dce5;
    border-radius: 11px;
    outline: 0;
    color: var(--sbo-text);
    background: #fff;
    font: 16px var(--sb-font-regular);
}

.sbo-role-field input:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21, 53, 98, .1); }
.sbo-badge-colors { margin: 17px 0 0; padding: 0; border: 0; }
.sbo-badge-colors legend { margin-bottom: 9px; }
.sbo-badge-colors label { display: inline-block; margin-right: 8px; cursor: pointer; }
.sbo-badge-colors input { position: absolute; opacity: 0; pointer-events: none; }

.sbo-badge-colors i {
    display: block;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(30, 40, 55, .18);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(30, 40, 55, .12);
}

.sbo-badge-colors input:checked + i {
    border-color: var(--sbo-navy);
    box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px rgba(21, 53, 98, .25);
}
.sbo-role-modal__permissions { margin: 18px 0 0; padding: 0; border: 0; }
.sbo-role-modal__permissions legend { margin-bottom: 9px; }

.sbo-role-modal__permissions > div {
    overflow: hidden;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
    background: #fff;
}

.sbo-role-permission-option {
    min-height: 70px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto 42px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e9ecf0;
    cursor: pointer;
}

.sbo-role-permission-option:last-child { border-bottom: 0; }
.sbo-role-permission-option > span { min-width: 0; display: flex; flex-direction: column; }
.sbo-role-permission-option strong { font-size: 15px; }
.sbo-role-permission-option small { margin-top: 4px; color: var(--sbo-muted); font-size: 12px; }
.sbo-role-permission-option em { padding: 5px 8px; border: 1px solid #d7dde6; border-radius: 7px; color: #667186; font-size: 10px; font-style: normal; white-space: nowrap; }
.sbo-role-permission-option input { position: absolute; opacity: 0; pointer-events: none; }

.sbo-role-permission-option > i {
    position: relative;
    width: 40px;
    height: 23px;
    border-radius: 14px;
    background: #e5e9ef;
    transition: background .2s;
}

.sbo-role-permission-option > i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(22, 35, 54, .2);
    transition: transform .2s;
}

.sbo-role-permission-option input:checked + i { background: var(--sbo-teal); }
.sbo-role-permission-option input:checked + i::after { transform: translateX(17px); }

.sbo-role-modal__footer {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sbo-role-cancel, .sbo-role-submit {
    min-height: 52px;
    border-radius: 11px;
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-role-cancel { border: 1px solid #dce1e8; color: var(--sbo-text); background: #fff; }
.sbo-role-submit { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; color: #fff; background: var(--sbo-navy); }
.sbo-role-submit:disabled { cursor: not-allowed; opacity: .42; }
.sbo-role-submit.is-loading .sbo-button-loader { display: inline-block; }

.sbo-pin-modal { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 18px; }
.sbo-pin-modal.is-open { display: grid; }

.sbo-pin-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 13, 20, .8);
}

.sbo-pin-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    overflow: hidden;
    border-radius: 17px;
    background: #f8f9fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.sbo-pin-modal__header {
    min-height: 72px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e1e6ec;
    background: #fff;
}

.sbo-pin-modal__header > span { color: var(--sbo-teal); font-size: 25px; }
.sbo-pin-modal__header h2 { margin: 0; font: normal 21px var(--sb-font-bold); }
.sbo-pin-modal__header button { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #5d6675; background: transparent; cursor: pointer; font-size: 25px; }
.sbo-pin-modal__header button:hover { background: #eef1f4; }
.sbo-pin-modal form { padding: 20px; }
.sbo-pin-question { margin: 0 0 15px; color: #667083; font-size: 15px; }
.sbo-pin-question strong { color: var(--sbo-text); }

.sbo-pin-privacy {
    padding: 15px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #9ee2cf;
    border-radius: 12px;
    color: #206f61;
    background: #e7faf4;
}

.sbo-pin-privacy > span { flex: 0 0 auto; font-size: 19px; }
.sbo-pin-privacy p { margin: 0; font-size: 13px; line-height: 1.55; }
.sbo-pin-privacy strong { font-family: var(--sb-font-semibold); }

.sbo-pin-details {
    margin: 15px 0 0;
    padding: 14px 16px;
    border: 1px solid #dde2e9;
    border-radius: 12px;
    background: #eef1f5;
}

.sbo-pin-details > div { min-height: 30px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.sbo-pin-details dt { color: #778193; font-size: 13px; }
.sbo-pin-details dd { margin: 0; color: #2d394d; text-align: right; font: 13px var(--sb-font-semibold); }
.sbo-pin-modal__footer { margin-top: 18px; display: grid; grid-template-columns: .8fr 1.2fr 1.45fr; gap: 10px; }

.sbo-pin-cancel, .sbo-pin-regenerate, .sbo-pin-send {
    min-height: 52px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.sbo-pin-cancel { border: 1px solid #cfd6df; color: var(--sbo-text); background: #fff; }
.sbo-pin-regenerate { border: 1px solid #a8ddd0; color: #16836f; background: #f3fcf9; }
.sbo-pin-send { border: 0; color: #fff; background: var(--sbo-navy); }
.sbo-pin-regenerate:disabled, .sbo-pin-send:disabled { cursor: not-allowed; opacity: .45; }
.sbo-pin-regenerate.is-loading .sbo-button-loader, .sbo-pin-send.is-loading .sbo-button-loader { display: inline-block; }
.sbo-pin-details dd small { margin-left: 4px; color: var(--sbo-muted); font: 10px var(--sb-font-regular); }
.sbo-resend-pin-modal .sbo-pin-modal__dialog { width: min(100%, 560px); }
.sbo-resend-pin-modal__footer { grid-template-columns: 1fr 1fr; }

@media (hover: hover) and (pointer: fine) {
    .sbo-add-staff-button:hover,
    .sbo-add-staff-send:not(:disabled):hover,
    .sbo-role-submit:not(:disabled):hover,
    .sbo-pin-send:not(:disabled):hover {
        background: #0d284f;
        box-shadow: 0 8px 18px rgba(21, 53, 98, .2);
    }

    .sbo-add-staff-cancel:hover,
    .sbo-remove-staff-cancel:hover,
    .sbo-role-cancel:hover,
    .sbo-pin-cancel:hover {
        border-color: var(--sbo-navy);
        color: var(--sbo-navy);
        background: #f4f7fb;
    }

    .sbo-add-staff-only:not(:disabled):hover,
    .sbo-pin-regenerate:not(:disabled):hover {
        border-color: var(--sbo-teal);
        color: #0a7565;
        background: #e6f8f3;
    }

    .sbo-fullscreen:hover,
    .sbo-icon-button:hover,
    .sbo-link-button:not(:disabled):hover {
        color: var(--sbo-navy);
    }

    .sbo-regenerate-pin:hover,
    .sbo-pin-status:not(:disabled):hover {
        color: #056b5d;
        background: #e6f8f3;
    }

    .sbo-staff-actions button.is-danger:not(:disabled):hover,
    .sbo-menu-row--danger:hover {
        color: #a83d48;
        background: #fff1f2;
    }

    .sbo-remove-staff-submit:not(:disabled):hover {
        background: #c93434;
        box-shadow: 0 8px 18px rgba(201, 52, 52, .22);
    }
}

@media (max-width: 420px) {
    .sbo-auth-shell { padding: 36px 14px; }
    .sbo-auth-card { padding: 23px 19px; }
    .sbo-auth-card h1 { font-size: 26px; }
    .sbo-auth-card > p { font-size: 16px; }
    .sbo-brand__name { font-size: 24px; }
    .sbo-brand__name small { font-size: 14px; }
    .sbo-phone-code, .sbo-phone-field input { font-size: 16px; }
    .sbo-primary-button { font-size: 18px; }
    .sbo-benefits, .sbo-help { font-size: 12px; }
    .sbo-dashboard-header { padding: 10px 11px; }
    .sbo-dashboard-brand__icon { width: 38px; height: 38px; }
    .sbo-dashboard-brand > span:last-child { display: none; }
    .sbo-dashboard-user { gap: 5px; }
    .sbo-dashboard-user .sbo-avatar { width: 34px; height: 34px; font-size: 11px; }
    .sbo-branch-switcher > summary { min-width: 0; width: 140px; height: 38px; padding: 0 10px; }
    .sbo-branch-switcher > summary strong { font-size: 11px; }
    .sbo-branch-switcher__panel { position: fixed; top: 66px; right: 11px; width: calc(100vw - 22px); }
    .sbo-dashboard-content { padding-left: 11px; padding-right: 11px; }
    .sbo-dashboard-user select { max-width: 82px; }
    .sbo-greeting h1 { font-size: 24px; }
    .sbo-section-heading h2 { font-size: 18px; }
    .sbo-list-main strong { font-size: 15px; }
    .sbo-list-main small { font-size: 12px; }
    .sbo-sale-row { grid-template-columns: 34px 1fr auto; }
    .sbo-sale-row em { display: none; }
    .sbo-more-header { padding: 13px 14px; }
    .sbo-more-header h1 { font-size: 26px; }
    .sbo-more-header p { font-size: 13px; }
    .sbo-more-profile strong { max-width: 85px; }
    .sbo-more-content { padding-left: 11px; padding-right: 11px; }
    .sbo-location-pill small { display: none; }
    .sbo-menu-row { padding-left: 10px; padding-right: 10px; }
    .sbo-menu-copy strong { font-size: 15px; }
    .sbo-menu-copy small { font-size: 12px; }
    .sbo-menu-badge, .sbo-menu-tag { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sbo-staff-header { padding: 12px 11px; grid-template-columns: 32px 1fr auto; gap: 7px; }
    .sbo-staff-header h1 { font-size: 22px; }
    .sbo-staff-header p { display: none; }
    .sbo-add-staff-button { padding: 0 11px; font-size: 12px; }
    .sbo-staff-content { padding-left: 11px; padding-right: 11px; }
    .sbo-staff-usage { grid-template-columns: 28px 1fr; gap: 8px; }
    .sbo-staff-progress { grid-column: 1 / -1; width: 100%; }
    .sbo-staff-card { padding: 13px 10px; gap: 10px; }
    .sbo-staff-card > img { width: 42px; height: 42px; }
    .sbo-staff-avatar { width: 46px; height: 46px; }
    .sbo-staff-security { gap: 6px; }
    .sbo-staff-security span, .sbo-regenerate-pin, .sbo-pin-status { min-height: 30px; font-size: 10px; }
    .sbo-staff-actions > div { width: 190px; }
    .sbo-staff-tabs a { font-size: 11px; }
    .sbo-role-card { padding: 14px 12px; }
    .sbo-role-permissions strong { font-size: 12px; }
    .sbo-role-permissions small { font-size: 9px; }
    .sbo-add-staff-modal { padding: 14px; place-items: center; align-items: center; }
    .sbo-add-staff-modal__dialog { width: min(100%, 560px); height: min(920px, calc(100vh - 28px)); max-height: calc(100vh - 28px); border-radius: 20px; }
    .sbo-add-staff-modal__header { padding: 12px 14px; }
    .sbo-add-staff-modal__body { padding: 16px 14px 20px; }
    .sbo-sales-visibility { grid-template-columns: 1fr; }
    .sbo-add-staff-modal__footer { padding: 10px 12px; grid-template-columns: 1fr 1fr; }
    .sbo-add-staff-send { grid-column: 1 / -1; grid-row: 1; }
    .sbo-add-staff-cancel, .sbo-add-staff-only { grid-row: 2; }
    .sbo-role-modal { padding: 14px; place-items: center; align-items: center; }
    .sbo-role-modal__dialog { width: min(100%, 610px); max-height: calc(100vh - 28px); border-radius: 20px; }
    .sbo-role-modal form { padding: 14px; }
    .sbo-role-permission-option { min-height: 64px; padding: 10px; grid-template-columns: 1fr auto 40px; gap: 8px; }
    .sbo-role-permission-option strong { font-size: 14px; }
    .sbo-role-permission-option small { font-size: 11px; }
    .sbo-role-permission-option em { max-width: 75px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
    .sbo-pin-modal { padding: 14px; place-items: center; align-items: center; }
    .sbo-pin-modal__dialog { width: min(100%, 560px); max-height: calc(100vh - 28px); border-radius: 20px; }
    .sbo-remove-staff-modal,
    .sbo-staff-limit-modal { padding: 14px; place-items: center; align-items: center; }
    .sbo-remove-staff-modal__dialog,
    .sbo-staff-limit-modal__dialog { width: min(100%, 500px); max-height: calc(100vh - 28px); border-radius: 20px; }
    .sbo-pin-modal form { padding: 14px; }
    .sbo-pin-modal__footer { grid-template-columns: 1fr 1fr; }
    .sbo-pin-send { grid-column: 1 / -1; grid-row: 1; }
    .sbo-pin-cancel, .sbo-pin-regenerate { grid-row: 2; }
    .sbo-resend-pin-modal__footer .sbo-pin-send,
    .sbo-resend-pin-modal__footer .sbo-pin-cancel { grid-column: auto; grid-row: auto; }
}

@media (min-width: 700px) {
    .sbo-dashboard { margin-top: 14px; margin-bottom: 14px; min-height: calc(100vh - 28px); border-radius: 16px; overflow: hidden; }
    .sbo-bottom-nav { bottom: 14px; border-radius: 0 0 16px 16px; }
}

/* Shops and devices */
.sbo-shops-page {
    background: #f4f6f7;
    color: #182333;
}

.sbo-shops-header {
    min-height: 72px;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-bottom: 1px solid #e7ebef;
}

.sbo-shops-back {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #14243a;
    font-size: 22px;
    text-decoration: none;
}

.sbo-shops-back:hover { background: #f0f3f5; }
.sbo-shops-header h1 { margin: 0; font-size: 23px; line-height: 1.15; }
.sbo-shops-header p { margin: 3px 0 0; color: #7a8592; font-size: 12px; }

.sbo-shop-add-button,
.sbo-devices-heading button,
.sbo-shops-empty button {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #e1e6eb;
    border-radius: 9px;
    background: #fff;
    color: #14243a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sbo-shop-add-button:hover { border-color: #163c72; color: #163c72; }
.sbo-shops-content { padding: 16px 18px 98px; }

.sbo-shop-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sbo-shop-tabs::-webkit-scrollbar { display: none; }
.sbo-shop-tabs button {
    min-height: 39px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid #e3e8ed;
    border-radius: 22px;
    background: #fff;
    color: #657080;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.sbo-shop-tabs button:hover { border-color: #173d72; color: #173d72; }
.sbo-shop-tabs button.is-active { background: #173d72; border-color: #173d72; color: #fff; box-shadow: 0 5px 12px rgba(23, 61, 114, .18); }
.sbo-shop-tabs small { padding: 2px 5px; border-radius: 8px; background: #eef0f2; color: #7a8592; font-size: 8px; text-transform: uppercase; }
.sbo-shop-panel[hidden] { display: none; }

.sbo-shop-card {
    overflow: visible;
    background: #fff;
    border: 1px solid #e0e6eb;
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(29, 43, 61, .07);
}

.sbo-shop-card__head {
    min-height: 96px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 15px;
    background: linear-gradient(120deg, #123a70, #48658a);
    border-radius: 17px 17px 0 0;
    color: #fff;
}

.sbo-shop-building {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.11);
    font-size: 28px;
    overflow: hidden;
}

.sbo-shop-building.has-image {
    padding: 0;
    background: rgba(255,255,255,.18);
}

.sbo-shop-building img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbo-shop-card__head h2 { margin: 0 0 6px; font-size: 20px; }
.sbo-shop-status { padding: 3px 8px; border-radius: 11px; font-size: 10px; font-weight: 700; }
.sbo-shop-status.is-active { background: rgba(45, 206, 145, .18); color: #77efbe; }
.sbo-shop-status.is-inactive { background: #75859a; color: #fff; }
.sbo-shop-branch-code {
    display: inline-block;
    margin: 8px 0 0 8px;
    padding: 3px 8px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: #d7e2f0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}
.sbo-shop-menu { font-size: 22px; opacity: .72; }
.sbo-shop-actions { position: relative; }
.sbo-shop-actions summary { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; list-style: none; font-size: 22px; }
.sbo-shop-actions summary::-webkit-details-marker { display: none; }
.sbo-shop-actions summary:hover { background: rgba(255,255,255,.2); }
.sbo-shop-actions > div { width: 200px; padding: 7px; position: absolute; z-index: 8; top: 39px; right: 0; background: #fff; border: 1px solid #e0e5e9; border-radius: 11px; box-shadow: 0 9px 28px rgba(14, 27, 43, .22); }
.sbo-shop-actions form, .sbo-shop-actions button { width: 100%; }
.sbo-shop-actions button { padding: 9px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: transparent; color: #273544; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.sbo-shop-actions button span { width: 18px; font-size: 16px; text-align: center; }
.sbo-shop-actions button:hover { background: #f1f4f6; }
.sbo-shop-actions button.is-danger { color: #c84348; }
.sbo-shop-facts { margin: 0; border-radius: 0 0 17px 17px; overflow: hidden; }
.sbo-shop-facts > div { min-height: 77px; padding: 13px 20px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 14px; border-top: 1px solid #e8ecef; }
.sbo-shop-fact-icon { color: #7e8b9f; font-size: 20px; text-align: center; }
.sbo-shop-fact-copy { display: grid; gap: 4px; }
.sbo-shop-fact-copy small { color: #6f7f96; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.sbo-shop-fact-copy strong { color: #0c1726; font-size: 15px; font-weight: 700; }
.sbo-shop-facts em { color: #079c73; font-size: 11px; font-style: normal; font-weight: 600; }

.sbo-devices-heading {
    margin: 22px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sbo-devices-heading h3, .sbo-all-shops h3 { margin: 0; font-size: 18px; text-transform: capitalize; }
.sbo-devices-heading p { margin: 3px 0 0; color: #75839a; font-size: 13px; }
.sbo-devices-heading button, .sbo-shops-empty button { min-height: 42px; padding: 0 18px; background: #173d72; border-color: #173d72; color: #fff; font-size: 13px; }
.sbo-devices-heading button:hover, .sbo-shops-empty button:hover { background: #0e2e5d; }
.sbo-devices-heading button:disabled { background: #aab3bc; border-color: #aab3bc; cursor: not-allowed; transform: none; }
.sbo-device-list { display: grid; gap: 14px; }
.sbo-device-card {
    min-height: 98px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 18px;
    box-shadow: 0 2px 7px rgba(24, 40, 61, .04);
}

.sbo-device-icon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 17px; background: #edf0f4; color: #66758d; font-size: 25px; }
.sbo-device-icon.is-online { background: #e8f8f1; color: #138762; }
.sbo-device-copy h4 { margin: 0 0 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #101b2a; font-size: 17px; }
.sbo-device-copy h4 span { margin-left: 0; padding: 3px 8px; border: 1px solid #d7dde4; border-radius: 11px; background: #eef1f4; color: #738096; font-size: 10px; font-weight: 500; }
.sbo-device-copy h4 span.is-online { background: #e8f8f1; color: #138762; }
.sbo-device-copy p { margin: 0 0 3px; color: #738096; font-size: 12px; }
.sbo-device-copy small { margin: 0; color: #738096; font-size: 11px; }
.sbo-device-copy p strong { color: #26364b; }
.sbo-device-actions { position: relative; }
.sbo-device-actions summary { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; list-style: none; font-size: 20px; }
.sbo-device-actions summary::-webkit-details-marker { display: none; }
.sbo-device-actions summary:hover { background: #f0f3f5; }
.sbo-device-actions > div { width: 170px; padding: 7px; position: absolute; z-index: 4; top: 34px; right: 0; background: #fff; border: 1px solid #e0e5e9; border-radius: 11px; box-shadow: 0 8px 24px rgba(23, 34, 48, .14); }
.sbo-device-actions form, .sbo-device-actions button { width: 100%; }
.sbo-device-actions button { padding: 9px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.sbo-device-actions button span { width: 17px; font-size: 16px; text-align: center; }
.sbo-device-actions button:hover { background: #f1f4f6; }
.sbo-device-actions button.is-danger { color: #bb3540; }
.sbo-device-empty { padding: 23px; display: grid; justify-items: center; gap: 4px; background: #fff; border: 1px dashed #ccd4db; border-radius: 12px; text-align: center; }
.sbo-device-empty > span { font-size: 26px; color: #82909e; }
.sbo-device-empty strong { font-size: 13px; }
.sbo-device-empty p { margin: 0; color: #87919c; font-size: 10px; }
.sbo-shop-plan-note { margin: 8px 0 0; color: #a36c17; font-size: 10px; }

.sbo-all-shops { margin-top: 23px; }
.sbo-all-shops h3 { margin-bottom: 13px; color: #68768d; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.sbo-all-shops button {
    width: 100%;
    min-height: 78px;
    margin-bottom: 11px;
    padding: 11px 19px;
    display: grid;
    grid-template-columns: 48px 1fr auto 14px;
    align-items: center;
    gap: 14px;
    border: 1px solid #e5e9ed;
    border-radius: 18px;
    background: #fff;
    color: #172334;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.sbo-all-shops button:hover { border-color: #173d72; transform: translateY(-1px); }
.sbo-all-shops button.is-current { border-color: #8296b2; box-shadow: inset 0 0 0 1px #8296b2; }
.sbo-all-shops button.is-inactive { opacity: .55; }
.sbo-overview-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #edf1f6; color: #173d72; font-size: 24px; overflow: hidden; }
.sbo-overview-icon.has-image { padding: 0; background: #dce5f0; }
.sbo-overview-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbo-all-shops button > span { display: grid; }
.sbo-all-shops button > span:nth-child(3) { text-align: right; }
.sbo-all-shops strong { color: #111c2b; font-size: 15px; }
.sbo-all-shops small { margin-top: 4px; color: #708097; font-size: 11px; }
.sbo-all-shops button > span:nth-child(3) small { color: #079c73; }
.sbo-all-shops button > b { color: #8290a5; font-size: 21px; }

.sbo-shop-billing-note, .sbo-shop-device-note {
    margin-top: 18px;
    padding: 17px 16px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 10px;
    border: 1px solid #b9dcd8;
    border-radius: 18px;
    background: #edf7f6;
    color: #667790;
}

.sbo-shop-device-note { min-height: 70px; align-items: center; border-color: #dfe4e9; background: #f2f4f6; }
.sbo-shop-note-icon { color: #149d91; font-size: 19px; line-height: 1.2; text-align: center; }
.sbo-shop-billing-note p, .sbo-shop-device-note p { margin: 0; font-size: 12px; line-height: 1.5; }
.sbo-shop-billing-note strong { display: block; margin-bottom: 2px; color: #172536; font-size: 14px; }
.sbo-shop-billing-note b { color: #172536; }
.sbo-shop-billing-note a { margin-top: 8px; display: inline-block; color: #118f85; font-size: 12px; font-weight: 700; text-decoration: none; }
.sbo-shop-billing-note a:hover { color: #086f68; text-decoration: underline; }

.sbo-shops-empty { padding: 55px 20px; display: grid; justify-items: center; gap: 9px; background: #fff; border: 1px dashed #cbd4dc; border-radius: 14px; text-align: center; }
.sbo-shops-empty > span { font-size: 42px; color: #173d72; }
.sbo-shops-empty h2, .sbo-shops-empty p { margin: 0; }
.sbo-shops-empty p { color: #7d8995; font-size: 12px; }

.sbo-shop-modal[hidden] { display: none; }
.sbo-shop-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
}

.sbo-shop-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(11, 18, 24, .78);
    cursor: default;
}

.sbo-shop-modal__backdrop:hover, .sbo-shop-modal__backdrop:active { transform: none !important; filter: none !important; }
.sbo-shop-modal__dialog {
    width: min(100%, 470px);
    max-height: calc(100vh - 40px);
    padding: 26px 28px 24px;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}

.sbo-shop-modal__dialog--device { width: min(100%, 450px); }
.sbo-shop-modal__close {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 17px;
    right: 18px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #66717e;
    font-size: 25px;
    cursor: pointer;
}

.sbo-shop-modal__close:hover { background: #f0f2f4; }
.sbo-shop-modal h2 { margin: 0 42px 19px 0; display: flex; align-items: center; gap: 10px; font-size: 20px; }
.sbo-shop-modal h2 span { color: #173d72; font-size: 24px; }
.sbo-shop-modal__info { margin-bottom: 20px; padding: 13px; display: flex; gap: 10px; border: 1px solid #c9e1e2; border-radius: 11px; background: #eff8f8; color: #587073; font-size: 11px; line-height: 1.45; }
.sbo-shop-modal form { display: grid; gap: 13px; }
.sbo-shop-modal label { display: grid; gap: 6px; color: #283443; font-size: 12px; font-weight: 700; }
.sbo-shop-modal label[hidden],
.sbo-shop-modal [data-other-device-type-title-field][hidden],
.sbo-shop-modal [data-edit-other-device-type-title-field][hidden] { display: none !important; }
.sbo-shop-modal label i { color: #ca3845; font-style: normal; }
.sbo-shop-modal input, .sbo-shop-modal select {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    border: 1px solid #dce2e7;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    color: #263342;
    font: inherit;
    font-size: 13px;
}

.sbo-shop-modal input:focus, .sbo-shop-modal select:focus { border-color: #173d72; box-shadow: 0 0 0 2px rgba(23, 61, 114, .1); }
.sbo-shop-phone { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid #dce2e7; border-radius: 10px; overflow: hidden; }
.sbo-shop-phone:focus-within { border-color: #173d72; box-shadow: 0 0 0 2px rgba(23, 61, 114, .1); }
.sbo-shop-phone b { padding-left: 13px; color: #566474; font-size: 12px; }
.sbo-shop-phone input { border: 0; box-shadow: none !important; }
.sbo-shop-modal__buttons { margin-top: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-shop-modal__buttons button { min-height: 47px; border: 1px solid #dce2e7; border-radius: 10px; background: #fff; color: #263342; font: inherit; font-weight: 700; cursor: pointer; }
.sbo-shop-modal__buttons button:last-child { background: #173d72; border-color: #173d72; color: #fff; }
.sbo-shop-modal__buttons button:hover { border-color: #173d72; }
.sbo-shop-modal__buttons button:last-child:hover { background: #0e2e5d; }
.sbo-shop-modal__buttons button:disabled { opacity: .7; cursor: wait; }
.sbo-shop-modal .sbo-shop-pay { margin-top: 2px; }
.sbo-shop-modal .sbo-staff-pack-note { margin-top: -2px; }
.sbo-remove-device-modal__dialog { width: min(100%, 480px); padding: 27px 30px 30px; }
.sbo-remove-device-modal h2 { margin-bottom: 22px; color: #e8443b; }
.sbo-remove-device-modal h2 span { color: #e8443b; }
.sbo-remove-device-modal p { margin: 0 0 18px; color: #718096; font-size: 14px; }
.sbo-remove-device-modal p strong { color: #263342; }
.sbo-remove-device-modal form { display: block; }
.sbo-remove-device-modal .sbo-shop-modal__buttons { margin-top: 0; }
.sbo-remove-device-modal .sbo-remove-device-confirm,
.sbo-remove-device-modal .sbo-remove-device-confirm:hover { background: #e8443b; border-color: #e8443b; color: #fff; }
.sbo-modal-open { overflow: hidden; }

@media (max-width: 520px) {
    .sbo-shops-header { min-height: 64px; padding: 10px 11px; grid-template-columns: 31px 1fr auto; gap: 6px; }
    .sbo-shops-back { width: 31px; height: 31px; }
    .sbo-shops-header h1 { font-size: 19px; }
    .sbo-shops-header p { font-size: 9px; }
    .sbo-shop-add-button { min-height: 34px; padding: 0 9px; font-size: 10px; }
    .sbo-shops-content { padding: 12px 10px 92px; }
    .sbo-shop-card__head { min-height: 84px; padding: 14px; grid-template-columns: 46px 1fr auto; gap: 11px; }
    .sbo-shop-building { width: 46px; height: 46px; border-radius: 13px; font-size: 24px; }
    .sbo-shop-card__head h2 { font-size: 17px; }
    .sbo-shop-facts > div { min-height: 68px; grid-template-columns: 22px 1fr; padding: 10px 13px; gap: 11px; }
    .sbo-shop-fact-copy strong { font-size: 13px; }
    .sbo-devices-heading { margin-top: 18px; }
    .sbo-devices-heading h3 { font-size: 16px; }
    .sbo-devices-heading p { font-size: 11px; }
    .sbo-devices-heading button { min-height: 38px; padding: 0 10px; font-size: 11px; }
    .sbo-device-card { min-height: 82px; padding: 12px; grid-template-columns: 45px 1fr auto; gap: 11px; border-radius: 14px; }
    .sbo-device-icon { width: 45px; height: 45px; border-radius: 13px; font-size: 22px; }
    .sbo-device-copy h4 { font-size: 14px; gap: 5px; }
    .sbo-device-copy p { font-size: 10px; }
    .sbo-device-copy small { font-size: 9px; }
    .sbo-all-shops button { min-height: 68px; grid-template-columns: 40px 1fr auto 9px; gap: 9px; padding: 9px; border-radius: 14px; }
    .sbo-overview-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 20px; }
    .sbo-all-shops strong { font-size: 12px; }
    .sbo-all-shops small { font-size: 9px; }
    .sbo-shop-modal { padding: 16px; place-items: center; }
    .sbo-shop-modal__dialog, .sbo-shop-modal__dialog--device { width: min(100%, 470px); max-height: calc(100vh - 32px); padding: 22px 16px 18px; border-radius: 16px; }
}

/* Services and items */
.sbo-catalog-page { background: #f4f6f7; color: #182333; font-family: var(--sb-font-regular); }
.sbo-catalog-header { min-height: 72px; padding: 12px 18px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; background: #fff; border-bottom: 1px solid #e7ebef; }
.sbo-catalog-header > a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #14243a; font-size: 22px; text-decoration: none; }
.sbo-catalog-header > a:hover { background: #f0f3f5; }
.sbo-catalog-header h1 { margin: 0; font: 23px/1.15 var(--sb-font-semibold); }
.sbo-catalog-header p { margin: 3px 0 0; color: #7a8592; font-size: 12px; }
.sbo-catalog-header > button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: #173d72; color: #fff; font: 12px var(--sb-font-semibold); cursor: pointer; }
.sbo-catalog-header > button:hover { background: #0e2e5d; }
.sbo-catalog-content { padding: 16px 18px 100px; }
.sbo-catalog-tabs { margin-bottom: 18px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; background: #e9ebef; border-radius: 10px; }
.sbo-catalog-tabs button { min-height: 39px; border: 0; border-radius: 8px; background: transparent; color: #657080; font: 12px var(--sb-font-regular); cursor: pointer; }
.sbo-catalog-tabs button.is-active { background: #fff; color: #16263b; font-weight: 700; box-shadow: 0 1px 5px rgba(25, 39, 56, .08); }
[data-catalog-panel][hidden], .sbo-catalog-modal[hidden], [data-item-card][hidden], [data-search-empty][hidden] { display: none; }
.sbo-catalog-stats { margin-bottom: 18px; display: grid; gap: 12px; }
.sbo-catalog-stats--items { grid-template-columns: repeat(3, 1fr); }
.sbo-catalog-stats--categories { grid-template-columns: repeat(2, 1fr); }
.sbo-catalog-stats div { min-height: 78px; display: grid; place-content: center; text-align: center; background: #fff; border: 1px solid #e0e6eb; border-radius: 14px; box-shadow: 0 3px 12px rgba(29,43,61,.04); }
.sbo-catalog-stats strong { font: 22px/1 var(--sb-font-semibold); }
.sbo-catalog-stats div:nth-child(2) strong { color: #0b9b82; }
.sbo-catalog-stats small { margin-top: 7px; color: #7a8592; font-size: 11px; }
.sbo-catalog-filters { display: grid; grid-template-columns: 1fr 155px; gap: 10px; }
.sbo-catalog-filters label { height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e6eb; border-radius: 11px; }
.sbo-catalog-filters input, .sbo-catalog-filters select { width: 100%; height: 46px; border: 1px solid #e0e6eb; border-radius: 11px; outline: 0; background: #fff; color: #263446; font: 13px var(--sb-font-regular); }
.sbo-catalog-filters label input { height: auto; border: 0; }
.sbo-catalog-filters select { padding: 0 12px; }
.sbo-catalog-search:focus-within { border-color: var(--sbo-teal); box-shadow: 0 0 0 3px rgba(17,155,145,.1); }
.sbo-catalog-search__loader { flex: 0 0 auto; display: none; width: 18px; height: 18px; border: 2px solid #d7dde5; border-top-color: var(--sbo-teal); border-radius: 50%; animation: sbo-button-spin .7s linear infinite; }
.sbo-catalog-search.is-loading .sbo-catalog-search__loader { display: block; }
.sbo-catalog-search__status { min-height: 17px; margin: 6px 2px 0; color: var(--sbo-muted); font-size: 11px; }
.sbo-category-pills { margin: 11px 0 14px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.sbo-category-pills::-webkit-scrollbar { display: none; }
.sbo-category-pills button { min-height: 36px; padding: 0 12px; flex: 0 0 auto; border: 1px solid #dfe4e8; border-radius: 19px; background: #fff; color: #566476; font: 11px var(--sb-font-semibold); cursor: pointer; }
.sbo-category-pills button.is-active { background: #173d72; border-color: #173d72; color: #fff; }
.sbo-catalog-item-list, .sbo-category-list { display: grid; gap: 14px; }
.sbo-catalog-item { min-height: 110px; padding: 16px 18px; display: grid; grid-template-columns: 50px 1fr auto auto; align-items: start; gap: 14px; position: relative; background: #fff; border: 1px solid #e0e6eb; border-radius: 17px; box-shadow: 0 3px 12px rgba(29,43,61,.05); }
.sbo-catalog-item[hidden] { display: none; }
.sbo-catalog-item.is-inactive { opacity: .48; }
.sbo-catalog-emoji { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; font-size: 25px; }
.sbo-catalog-item__main h3 { margin: 1px 0 7px; color: #0c1726; font: 16px var(--sb-font-semibold); }
.sbo-catalog-item__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.sbo-catalog-item__tags small { color: #6f7f96; font-size: 10px; }
.sbo-catalog-tag { padding: 4px 7px; border-radius: 9px; font-size: 10px; font-family: var(--sb-font-semibold); }
.sbo-catalog-tag--violet { background: #f1ebff; color: #7043c7; }
.sbo-catalog-tag--amber { background: #fff5d7; color: #9a7116; }
.sbo-catalog-tag--slate { background: #f0f2f4; color: #6d7887; }
.sbo-catalog-price { margin-top: 11px; display: block; color: #173d72; font: 15px var(--sb-font-semibold); }
.sbo-catalog-toggle-form { margin-top: 4px; }
.sbo-catalog-toggle { width: 29px; height: 17px; padding: 2px; display: flex; justify-content: flex-start; border: 1px solid #9aa5b1; border-radius: 10px; background: #fff; cursor: pointer; }
.sbo-catalog-toggle i { width: 11px; height: 11px; border-radius: 50%; background: #84909d; transition: transform .2s; }
.sbo-catalog-toggle.is-on { border-color: #0c9786; background: #e7f8f4; }
.sbo-catalog-toggle.is-on i { background: #0c9786; transform: translateX(12px); }
.sbo-catalog-actions { position: relative; }
.sbo-catalog-actions summary { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #738093; cursor: pointer; list-style: none; font-size: 20px; }
.sbo-catalog-actions summary::-webkit-details-marker { display: none; }
.sbo-catalog-actions summary:hover { background: #f0f2f4; }
.sbo-catalog-actions > div { width: 175px; padding: 7px; position: absolute; z-index: 60; top: 34px; right: 0; background: #fff; border: 1px solid #e1e5e9; border-radius: 11px; box-shadow: 0 9px 28px rgba(24,37,53,.2); }
.sbo-catalog-actions button { width: 100%; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #273546; text-align: left; font: 12px var(--sb-font-regular); cursor: pointer; }
.sbo-catalog-actions button:hover { background: #f2f4f6; }
.sbo-catalog-actions button.is-danger { color: #c54045; }
.sbo-catalog-tip { margin-top: 16px; padding: 16px 17px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #dfe4e9; border-radius: 17px; background: #f1f3f6; color: #64748b; font-size: 11px; line-height: 1.55; }
.sbo-catalog-tip__icon { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; fill: none; stroke: #16a79f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sbo-catalog-tip p { margin: 0; }
.sbo-catalog-tip b { color: #111827; font-family: var(--sb-font-semibold); }
.sbo-catalog-tip b.is-commission { color: #6327e8; }
.sbo-catalog-tip b.is-open-price { color: #e26400; }
.sbo-category-card { min-height: 84px; padding: 14px 18px; display: grid; grid-template-columns: 50px 1fr 28px 32px; align-items: center; gap: 14px; background: #fff; border: 1px solid #e0e6eb; border-radius: 16px; box-shadow: 0 3px 12px rgba(29,43,61,.04); }
.sbo-category-card h3 { margin: 0 0 7px; font: 16px var(--sb-font-semibold); }
.sbo-category-card p { margin: 0; color: #6f7f96; font-size: 11px; }
.sbo-category-open { width: 25px; height: 30px; border: 0; background: transparent; color: #7d8997; font-size: 21px; cursor: pointer; }
.sbo-category-card .sbo-category-open,
.sbo-category-card .sbo-catalog-actions summary {
    position: relative;
}
.sbo-category-card [data-tooltip]::before,
.sbo-category-card [data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.sbo-category-card [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 80;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
    padding: 6px 10px;
    border-radius: 8px;
    background: #1e293b;
    color: #fff;
    font: 11px/1.35 var(--sb-font-regular);
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
}
.sbo-category-card [data-tooltip]::before {
    content: "";
    position: absolute;
    z-index: 80;
    top: 50%;
    right: calc(100% + 2px);
    transform: translateY(-50%) translateX(4px);
    border: 6px solid transparent;
    border-left-color: #1e293b;
}
@media (hover: hover) {
    .sbo-category-card [data-tooltip]:hover::before,
    .sbo-category-card [data-tooltip]:hover::after,
    .sbo-category-card [data-tooltip]:focus-visible::before,
    .sbo-category-card [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}
.sbo-category-card .sbo-catalog-actions[open] summary[data-tooltip]::before,
.sbo-category-card .sbo-catalog-actions[open] summary[data-tooltip]::after {
    opacity: 0 !important;
}
.sbo-new-category-row { min-height: 58px; border: 1px dashed #bfc9d3; border-radius: 14px; background: transparent; color: #647285; font: 12px var(--sb-font-semibold); cursor: pointer; }
.sbo-new-category-row:hover { border-color: #173d72; color: #173d72; }
.sbo-catalog-empty { padding: 38px 20px; display: grid; justify-items: center; gap: 5px; border: 1px dashed #ccd4db; border-radius: 13px; background: #fff; text-align: center; }
.sbo-catalog-empty[hidden] { display: none; }
.sbo-catalog-empty > span { color: #173d72; font-size: 30px; }
.sbo-catalog-empty h3, .sbo-catalog-empty p { margin: 0; }
.sbo-catalog-empty p { color: #7d8996; font-size: 10px; }

.sbo-catalog-color--teal { background: #e5faf5; color: #087b6c; }.sbo-catalog-color--blue { background: #e8f1ff; color: #2968c8; }.sbo-catalog-color--violet { background: #f1eaff; color: #7044cb; }.sbo-catalog-color--pink { background: #ffe9f3; color: #c93679; }.sbo-catalog-color--amber { background: #fff4d7; color: #9a7116; }.sbo-catalog-color--orange { background: #fff0e5; color: #c35c17; }.sbo-catalog-color--green { background: #e7f8eb; color: #27803c; }.sbo-catalog-color--rose { background: #ffeaec; color: #ca3a4c; }.sbo-catalog-color--indigo { background: #ececff; color: #5154c9; }.sbo-catalog-color--slate { background: #edf0f4; color: #617086; }
.sbo-catalog-color-dot--teal { background: #19b8aa; }.sbo-catalog-color-dot--blue { background: #3c82ee; }.sbo-catalog-color-dot--violet { background: #8752ee; }.sbo-catalog-color-dot--pink { background: #e83e8c; }.sbo-catalog-color-dot--amber { background: #f49a09; }.sbo-catalog-color-dot--orange { background: #ff6415; }.sbo-catalog-color-dot--green { background: #16b879; }.sbo-catalog-color-dot--rose { background: #f23958; }.sbo-catalog-color-dot--indigo { background: #6265ed; }.sbo-catalog-color-dot--slate { background: #64748b; }

.sbo-catalog-modal { position: fixed; z-index: 1200; inset: 0; padding: 20px; display: grid; place-items: center; }
.sbo-catalog-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(10, 16, 22, .8); cursor: default; }
.sbo-catalog-modal__backdrop:hover, .sbo-catalog-modal__backdrop:active { transform: none !important; filter: none !important; }
.sbo-catalog-modal__dialog { width: min(100%, 480px); max-height: calc(100vh - 40px); padding: 28px 30px 30px; position: relative; z-index: 1; overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 22px 60px rgba(0,0,0,.26); }
.sbo-item-modal__dialog { width: min(100%, 450px); }
.sbo-catalog-modal__close { width: 34px; height: 34px; position: absolute; top: 16px; right: 17px; border: 0; border-radius: 50%; background: transparent; color: #637080; font-size: 25px; cursor: pointer; }
.sbo-catalog-modal__close:hover { background: #f0f2f4; }
.sbo-catalog-modal h2 { margin: 0 40px 22px 0; display: flex; align-items: center; gap: 10px; color: #172334; font-size: 20px; }
.sbo-catalog-modal h2:first-letter { color: #173d72; }
.sbo-catalog-modal form { display: grid; gap: 14px; }
.sbo-catalog-modal label { display: grid; gap: 6px; color: #263342; font-size: 12px; font-weight: 700; }
.sbo-catalog-modal input:not([type="checkbox"]), .sbo-catalog-modal select { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #dbe1e6; border-radius: 11px; outline: 0; background: #fff; color: #263342; font: inherit; font-size: 13px; }
.sbo-catalog-modal input:focus, .sbo-catalog-modal select:focus { border-color: #173d72; box-shadow: 0 0 0 2px rgba(23,61,114,.1); }
.sbo-emoji-selected { display: flex; align-items: center; gap: 10px; color: #758299; font-size: 12px; }
.sbo-emoji-selected strong { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid #172334; border-radius: 13px; background: #f7f8fa; font-size: 29px; }
.sbo-emoji-grid { padding: 12px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; border: 1px solid #dfe4e8; border-radius: 11px; background: #f8f9fa; }
.sbo-emoji-grid button { width: 32px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 9px; background: transparent; font-size: 20px; cursor: pointer; }
.sbo-emoji-grid button:hover, .sbo-emoji-grid button.is-selected { border-color: #7388a4; background: #fff; }
.sbo-color-picker { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; border: 0; }
.sbo-color-picker legend { margin-bottom: 8px; color: #263342; font-size: 12px; font-weight: 700; }
.sbo-color-picker button { min-height: 63px; display: grid; justify-items: center; align-content: center; gap: 5px; border: 1px solid #dce2e7; border-radius: 11px; background: #fff; color: #68768a; font: inherit; font-size: 9px; cursor: pointer; }
.sbo-color-picker button.is-selected { border-color: #173d72; box-shadow: 0 0 0 1px #173d72; }
.sbo-color-picker i { width: 24px; height: 24px; border-radius: 50%; }
.sbo-category-preview { margin: 0; color: #7a8697; font-size: 11px; }
.sbo-category-preview span { margin-left: 5px; padding: 5px 9px; border: 1px solid #3ad5c4; border-radius: 12px; background: #e7fbf7; color: #087b6c; }
.sbo-category-preview em { font-style: normal; font-weight: 700; }
.sbo-catalog-modal__buttons { margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-catalog-modal__buttons button { min-height: 48px; border: 1px solid #dce2e7; border-radius: 11px; background: #fff; color: #263342; font: inherit; font-weight: 700; cursor: pointer; }
.sbo-catalog-modal__buttons button:last-child { background: #173d72; border-color: #173d72; color: #fff; }
.sbo-catalog-modal__buttons button:last-child:hover { background: #0e2e5d; }
.sbo-catalog-modal__buttons button.is-danger { background: #e8443b; border-color: #e8443b; }
.sbo-item-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-item-modal__header { margin: 0 0 20px; display: grid; grid-template-columns: 48px 1fr 36px; align-items: center; gap: 12px; }
.sbo-item-modal__badge { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #E8F0FE; color: #3366CC; }
.sbo-item-modal__titles { min-width: 0; }
.sbo-item-modal__titles h2 { margin: 0 !important; color: #1e293b; font-size: 20px; line-height: 1.2; }
.sbo-item-modal__titles p { margin: 4px 0 0; color: #64748B; font-size: 13px; line-height: 1.35; }
.sbo-item-modal__close { position: static !important; top: auto !important; right: auto !important; }
.sbo-catalog-field__control { position: relative; display: block; }
.sbo-catalog-field__icon,
.sbo-catalog-field__chevron { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; color: #64748B; }
.sbo-catalog-field__icon { left: 14px; color: #3366CC; }
.sbo-catalog-field__chevron { right: 12px; color: #94A3B8; }
.sbo-catalog-field__control input,
.sbo-catalog-field__control select { padding-left: 42px !important; }
.sbo-catalog-field__control--select select { appearance: none; -webkit-appearance: none; padding-right: 36px !important; }
.sbo-required { color: #EF4444; font-style: normal; font-weight: 700; }
.sbo-item-option-group { padding: 0 0 12px; overflow: hidden; border-radius: 12px; background: #f3f5f7; }
.sbo-item-option { min-height: 64px; padding: 12px 15px; display: grid !important; grid-template-columns: 42px 1fr 40px; align-items: center; gap: 12px; border-radius: 12px; background: #f3f5f7; cursor: pointer; }
.sbo-item-option__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.sbo-item-option__icon--tax { background: #DCFCE7; color: #16A34A; }
.sbo-item-option__icon--commission { background: #F3E8FF; color: #9333EA; }
.sbo-item-option__icon--open { background: #FFEDD5; color: #EA580C; }
.sbo-item-option__copy { display: grid; gap: 3px; min-width: 0; }
.sbo-item-option small { color: #7c899b; font-size: 10px; font-weight: 400; }
.sbo-item-option input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-item-option i { width: 40px; height: 24px; padding: 3px; justify-self: end; border: 2px solid #7d899b; border-radius: 999px; background: #fff; box-sizing: border-box; }
.sbo-item-option i::after { content: ""; width: 14px; height: 14px; display: block; border-radius: 50%; background: #7d899b; transition: transform .2s; }
.sbo-item-option input:checked + i { border-color: #3366CC; background: #E8F0FE; }
.sbo-item-option input:checked + i::after { background: #3366CC; transform: translateX(16px); }
.sbo-commission-rate { padding: 0 15px; display: grid; gap: 6px; }
.sbo-commission-rate__row { display: flex; align-items: center; gap: 8px; color: #7b8797; font-weight: 400; }
.sbo-commission-rate__row em { font-style: normal; white-space: nowrap; }
.sbo-commission-rate input { width: 90px !important; }
.sbo-item-modal__buttons { grid-template-columns: 1fr !important; }
.sbo-item-modal__secure { margin: 4px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #94A3B8; font-size: 12px; }
.sbo-catalog-delete-modal p { margin: 0 0 8px; color: #718096; font-size: 13px; }

@media (max-width: 520px) {
    .sbo-catalog-header { min-height: 64px; padding: 10px; grid-template-columns: 30px 1fr auto; gap: 6px; }
    .sbo-catalog-header h1 { font-size: 19px; }
    .sbo-catalog-header p { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .sbo-catalog-header > button { min-height: 34px; padding: 0 9px; font-size: 10px; }
    .sbo-catalog-content { padding: 12px 10px 92px; }
    .sbo-catalog-filters { grid-template-columns: 1fr 125px; }
    .sbo-catalog-item { min-height: 94px; padding: 12px 10px; grid-template-columns: 42px 1fr auto auto; gap: 9px; }
    .sbo-catalog-emoji { width: 39px; height: 39px; border-radius: 10px; font-size: 20px; }
    .sbo-catalog-item__main h3 { font-size: 14px; }
    .sbo-catalog-item__tags { gap: 3px; }
    .sbo-catalog-toggle-form { display: none; }
    .sbo-category-card { min-height: 74px; padding: 11px; grid-template-columns: 42px 1fr 22px 27px; gap: 8px; }
    .sbo-category-card h3 { font-size: 14px; }
    .sbo-category-card p { font-size: 10px; }
    .sbo-catalog-modal { padding: 16px; place-items: center; }
    .sbo-catalog-modal__dialog, .sbo-item-modal__dialog { width: min(100%, 480px); max-height: calc(100vh - 32px); padding: 23px 15px 18px; border-radius: 16px; }
    .sbo-emoji-grid { grid-template-columns: repeat(5, 1fr); }
    .sbo-emoji-grid button { width: 100%; }
    .sbo-color-picker { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .sbo-color-picker button { min-height: 56px; font-size: 8px; }
}

@media (max-width: 360px) {
    .sbo-item-modal__dialog { padding: 16px 12px 14px; }
    .sbo-item-modal__header { grid-template-columns: 40px 1fr 32px; gap: 8px; }
    .sbo-item-modal__badge { width: 40px; height: 40px; }
    .sbo-item-form-row { grid-template-columns: 1fr; }
    .sbo-item-option { padding: 10px; grid-template-columns: 36px minmax(0, 1fr) 40px; align-items: start; gap: 8px; }
    .sbo-item-option__icon { width: 36px; height: 36px; }
    .sbo-item-option__copy { min-width: 0; overflow-wrap: anywhere; }
    .sbo-commission-rate { padding: 0 10px; }
    .sbo-commission-rate__row { flex-wrap: wrap; }
    .sbo-commission-rate__row em { white-space: normal; }
    .sbo-commission-rate input { width: 72px !important; }
}

/* Customer follow-ups */
.sbo-followups-page { min-height: 100vh; background: #f5f6f8; font-family: var(--sb-font-regular); }
.sbo-followups-header { min-height: 88px; padding: 15px 22px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--sbo-line); background: #fff; }
.sbo-followups-header > a { width: 38px; height: 38px; display: grid; place-items: center; color: var(--sbo-navy); font-size: 25px; text-decoration: none; }
.sbo-followups-header h1 { margin: 0 0 4px; color: var(--sbo-text); font: normal 27px/1.15 var(--sb-font-bold); }
.sbo-followups-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-followups-header > button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--sbo-navy); color: #fff; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-followups-content { padding: 18px 22px 110px; }
.sbo-followups-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sbo-followups-stats article { min-height: 112px; padding: 15px 17px; display: grid; grid-template-columns: 1fr auto; position: relative; overflow: hidden; border: 1px solid #e4e8ed; border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(24,38,57,.04); }
.sbo-followups-stats article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; }
.sbo-followups-stats article b { grid-column: 1 / -1; align-self: end; text-align: center; font: 24px var(--sb-font-semibold); }
.sbo-followups-stats article small { grid-column: 1 / -1; text-align: center; color: #57657a; font-size: 12px; }
.sbo-followups-stats article em { padding: 4px 7px; position: absolute; top: 15px; right: 15px; border-radius: 8px; color: #fff; font: normal 10px var(--sb-font-semibold); }
.sbo-followups-stats .is-purple { border-color: #d9cdf8; background: #f7f4ff; color: #6d37dc; }
.sbo-followups-stats .is-purple > span { background: #eee8ff; }
.sbo-followups-stats .is-purple em { background: #7a42e5; }
.sbo-followups-stats .is-red { color: #c73e4a; }
.sbo-followups-stats .is-red > span { background: #fff0f1; }
.sbo-followups-stats .is-red em { background: #e14b55; }
.sbo-followups-stats .is-amber { color: #ad7215; }
.sbo-followups-stats .is-amber > span { background: #fff5d9; }
.sbo-followups-stats .is-amber em { background: #eda817; }
.sbo-followups-stats .is-green { color: #087c68; }
.sbo-followups-stats .is-green > span { background: #ddf8ef; }
.sbo-followups-stats .is-green em { background: #0b9d7f; }
.sbo-followups-tabs { margin: 16px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sbo-followups-tabs::-webkit-scrollbar { display: none; }
.sbo-followups-tabs button { min-height: 42px; padding: 0 15px; flex: 0 0 auto; border: 0; border-radius: 21px; background: #e9ecf0; color: #627086; font: 13px var(--sb-font-regular); cursor: pointer; }
.sbo-followups-tabs button span { min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(25,36,51,.08); font-size: 10px; }
.sbo-followups-tabs button.is-active { background: #7742df; color: #fff; }
.sbo-followups-list { display: grid; gap: 14px; }
.sbo-followup-card { padding: 18px; border: 1px solid #e0e5ea; border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(26,39,58,.05); }
.sbo-followup-card[hidden] { display: none; }
.sbo-followup-card__top { display: grid; grid-template-columns: 48px 1fr 28px; align-items: start; gap: 14px; }
.sbo-followup-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#8e58eb,#bd72eb); color: #fff; font: 13px var(--sb-font-semibold); }
.sbo-followup-card__copy { min-width: 0; }
.sbo-followup-card__copy h2 { margin: 0 0 5px; color: #142033; font: 17px var(--sb-font-semibold); }
.sbo-followup-card__copy h2 small { margin-left: 6px; padding: 3px 7px; border-radius: 7px; background: #f0eaff; color: #6e39db; font-size: 10px; }
.sbo-followup-card__copy h2 small.is-overdue { background: #fff1e8; color: #ca6e18; }
.sbo-followup-card__copy h2 small.is-done { background: #e8f7f1; color: #087a65; }
.sbo-followup-card__copy p { margin: 0 0 4px; overflow: hidden; color: #627086; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sbo-followup-card__copy > small { color: #7a8798; font-size: 11px; }
.sbo-followup-card__arrow { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f0f2f4; color: #7c8796; font-size: 18px; cursor: pointer; }
.sbo-followup-card__actions { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sbo-followup-card__actions a, .sbo-followup-card__actions button, .sbo-followup-card__actions .is-completed { width: 100%; min-height: 42px; display: grid; place-items: center; border: 1px solid #83cbbd; border-radius: 10px; background: #fff; color: #087b68; text-decoration: none; font: 12px var(--sb-font-semibold); cursor: pointer; }
.sbo-followup-card__actions form { margin: 0; }
.sbo-followup-card__actions a.is-call { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; }
.sbo-followup-card__actions .is-completed { border-color: #dce2e7; background: #f3f5f6; color: #738092; }
.sbo-followups-empty { padding: 42px 15px; display: grid; justify-items: center; gap: 5px; border: 1px dashed #cfd6dd; border-radius: 15px; background: #fff; text-align: center; }
.sbo-followups-empty[hidden] { display: none; }
.sbo-followups-empty > span { color: #7540dc; font-size: 30px; }
.sbo-followups-empty h2, .sbo-followups-empty p { margin: 0; }
.sbo-followups-empty h2 { font: 17px var(--sb-font-semibold); }
.sbo-followups-empty p { color: #788596; font-size: 12px; }
.sbo-followup-modal[hidden] { display: none; }
.sbo-followup-modal { padding: 18px; display: grid; place-items: center; position: fixed; z-index: 190; inset: 0; }
.sbo-followup-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(16,24,34,.53); cursor: default; }
.sbo-followup-modal__dialog { width: min(620px,100%); max-height: 92vh; padding: 24px; position: relative; overflow-y: auto; border-radius: 18px; background: #fff; box-shadow: 0 22px 58px rgba(14,25,41,.3); }
.sbo-followup-modal__dialog > header { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.sbo-followup-modal__dialog h2 { margin: 0; color: #111d2e; font: 22px var(--sb-font-bold); }
.sbo-followup-modal__dialog header p { margin: 4px 0 0; color: #7a8797; font-size: 12px; }
.sbo-followup-modal__dialog header > button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f2f4f6; color: #788391; font-size: 20px; cursor: pointer; }
.sbo-followup-modal fieldset { margin: 0 0 18px; padding: 0; display: grid; gap: 12px; border: 0; }
.sbo-followup-modal legend { width: 100%; margin-bottom: 12px; color: #172336; font: 13px var(--sb-font-semibold); }
.sbo-followup-modal legend span { width: 24px; height: 24px; margin-right: 8px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--sbo-navy); color: #fff; font-size: 10px; }
.sbo-followup-modal label { display: grid; gap: 6px; color: #425066; font-size: 12px; text-transform: uppercase; }
.sbo-followup-modal label[hidden] { display: none; }
.sbo-followup-modal label small { color: #8a95a4; text-transform: none; }
.sbo-followup-modal input, .sbo-followup-modal select, .sbo-followup-modal textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #dce2e8; border-radius: 10px; outline: 0; background: #fff; color: #243247; font: 14px var(--sb-font-regular); text-transform: none; }
.sbo-followup-modal textarea { min-height: 66px; resize: vertical; }
.sbo-followup-modal input:focus, .sbo-followup-modal select:focus, .sbo-followup-modal textarea:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,59,106,.09); }
.sbo-followup-customer-search { position: relative; }
.sbo-followup-customer-search > label { margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; }
.sbo-followup-customer-search > label small { color: var(--sbo-navy); font: 11px var(--sb-font-semibold); cursor: default; }
.sbo-followup-customer-search__input { min-height: 50px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #cfd7e1; border-radius: 10px; background: #fff; }
.sbo-followup-customer-search__input:focus-within { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,59,106,.09); }
.sbo-followup-customer-search__input > span { color: #728198; font-size: 17px; }
.sbo-followup-modal .sbo-followup-customer-search__input input { min-width: 0; min-height: auto; padding: 0; flex: 1; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.sbo-followup-customer-search__input i { width: 17px; height: 17px; flex: 0 0 auto; display: none; border: 2px solid #d6dde5; border-top-color: var(--sbo-teal); border-radius: 50%; animation: sbo-button-spin .7s linear infinite; }
.sbo-followup-customer-search.is-loading .sbo-followup-customer-search__input i { display: block; }
.sbo-followup-customer-results { margin-top: 6px; overflow: hidden; border: 1px solid #dce2e8; border-radius: 11px; background: #fff; box-shadow: 0 10px 25px rgba(25,39,58,.13); }
.sbo-followup-customer-results[hidden] { display: none; }
.sbo-followup-customer-result { width: 100%; min-height: 62px; padding: 10px 13px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #e7ebef; background: #fff; color: #172337; text-align: left; cursor: pointer; }
.sbo-followup-customer-result:last-child { border-bottom: 0; }
.sbo-followup-customer-result:hover { background: #f5f8fa; }
.sbo-followup-customer-result__avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e5eaf0; color: #24426d; font: 11px var(--sb-font-semibold); }
.sbo-followup-customer-result > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.sbo-followup-customer-result strong { font: 14px var(--sb-font-semibold); }
.sbo-followup-customer-result small { color: #718096; font-size: 11px; }
.sbo-followup-customer-result em { padding: 5px 9px; border-radius: 10px; background: #e8edf3; color: #294467; font: normal 10px var(--sb-font-semibold); }
.sbo-followup-customer-result.is-new { grid-template-columns: 38px 1fr; color: #68768b; font-size: 13px; }
.sbo-followup-customer-status { min-height: 16px; margin: 5px 1px 0; color: #7c8898; font-size: 11px; }
.sbo-followup-kind { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.sbo-followup-kind label { display: block; }
.sbo-followup-kind input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-followup-kind span { min-height: 44px; display: grid; place-items: center; border: 1px solid #dbe1e7; border-radius: 9px; color: #536176; font-size: 13px; text-transform: none; cursor: pointer; }
.sbo-followup-kind input:checked + span { border-color: var(--sbo-navy); box-shadow: inset 0 0 0 1px var(--sbo-navy); color: #162a48; }
.sbo-followup-date-shortcuts { display: flex; gap: 7px; }
.sbo-followup-date-shortcuts button { min-height: 38px; padding: 0 12px; border: 1px solid #dce2e7; border-radius: 8px; background: #fff; color: #536176; font: 12px var(--sb-font-regular); cursor: pointer; }
.sbo-followup-date-shortcuts button.is-active { border-color: var(--sbo-teal); background: #eef9f7; color: #087c6b; }
.sbo-followup-modal__errors { padding: 9px 11px; border-radius: 9px; background: #fff0f1; color: #b6323f; font-size: 9px; }
.sbo-followup-modal__errors p { margin: 2px 0; }
.sbo-followup-modal footer { padding: 12px 0 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; position: relative; background: #fff; flex-shrink: 0; }
.sbo-followup-modal footer button { min-height: 48px; border: 1px solid #d7dee5; border-radius: 10px; background: #fff; color: #26354a; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-followup-modal footer button[type="submit"] { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; }
.sbo-complete-followup-modal[hidden] { display: none; }
.sbo-complete-followup-modal { padding: 18px; display: grid; place-items: center; position: fixed; z-index: 195; inset: 0; font-family: var(--sb-font-regular); }
.sbo-complete-followup-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(16,24,34,.56); backdrop-filter: blur(3px); cursor: default; }
.sbo-complete-followup-modal__dialog { width: min(430px,100%); padding: 22px; position: relative; border-radius: 18px; background: #f8f9fb; box-shadow: 0 22px 58px rgba(14,25,41,.3); }
.sbo-complete-followup-modal__dialog > header { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; }
.sbo-complete-followup-modal__dialog h2 { margin: 0; color: #111d2e; font: 20px var(--sb-font-bold); }
.sbo-complete-followup-modal__dialog header p { margin: 5px 0 0; color: #778398; font-size: 13px; }
.sbo-complete-followup-modal__dialog header button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #edf0f4; color: #778397; font-size: 21px; cursor: pointer; }
.sbo-complete-followup-modal fieldset { margin: 0; padding: 0; display: grid; gap: 10px; border: 0; }
.sbo-complete-followup-modal legend { margin-bottom: 10px; color: #68758a; font: 13px var(--sb-font-semibold); }
.sbo-complete-followup-modal label { display: block; }
.sbo-complete-followup-modal label input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-complete-followup-modal label span { min-height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 13px; border: 1px solid #d7dee6; border-radius: 11px; background: #fff; color: #263246; font-size: 14px; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.sbo-complete-followup-modal label span i { width: 19px; height: 19px; flex: 0 0 auto; border: 2px solid #8190a4; border-radius: 50%; background: #fff; }
.sbo-complete-followup-modal label input:checked + span { border-color: var(--sbo-navy); background: #f3f6fa; box-shadow: inset 0 0 0 1px var(--sbo-navy); }
.sbo-complete-followup-modal label input:checked + span i { border: 5px solid var(--sbo-navy); }
.sbo-complete-followup-confirm { width: 100%; min-height: 50px; margin-top: 18px; border: 0; border-radius: 11px; background: var(--sbo-navy); color: #fff; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-complete-followup-confirm:disabled { background: #91a0b8; color: #fff; cursor: not-allowed; opacity: 1; }
.sbo-followup-action-modal[hidden] { display: none; }
.sbo-followup-action-modal { padding: 18px; display: grid; place-items: center; position: fixed; z-index: 194; inset: 0; font-family: var(--sb-font-regular); }
.sbo-followup-action-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(16,24,34,.56); backdrop-filter: blur(3px); cursor: default; }
.sbo-followup-action-modal__dialog { width: min(460px,100%); padding: 24px; position: relative; border-radius: 18px; background: #f8f9fb; box-shadow: 0 22px 58px rgba(14,25,41,.3); }
.sbo-followup-action-modal__dialog > header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.sbo-followup-action-modal__dialog h2 { margin: 0; color: #111d2e; font: 20px var(--sb-font-bold); }
.sbo-followup-action-modal__dialog header button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #edf0f4; color: #778397; font-size: 21px; cursor: pointer; }
.sbo-followup-action-modal__dialog > p { margin: 0 0 18px; color: #718096; font-size: 14px; }
.sbo-followup-action-modal__dialog > p strong { color: #1d293b; font-family: var(--sb-font-semibold); }
.sbo-followup-action-options, .sbo-followup-reassign-options { margin: 0; padding: 0; display: grid; gap: 10px; border: 0; }
.sbo-followup-action-options label, .sbo-followup-reassign-options label { display: block; }
.sbo-followup-action-options input, .sbo-followup-reassign-options input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-followup-action-options label > span { min-height: 56px; padding: 0 15px; display: flex; align-items: center; gap: 14px; border: 1px solid #d7dee6; border-radius: 11px; background: #fff; color: #263246; font-size: 15px; cursor: pointer; }
.sbo-followup-action-options label > span i { width: 20px; height: 20px; border: 2px solid #8190a4; border-radius: 50%; background: #fff; }
.sbo-followup-action-options input:checked + span { border-color: #e3a236; background: #fffaf1; box-shadow: inset 0 0 0 1px #e3a236; }
.sbo-followup-action-options input:checked + span i { border: 5px solid #e3a236; }
.sbo-followup-action-submit { width: 100%; min-height: 50px; margin-top: 18px; border: 0; border-radius: 11px; background: var(--sbo-navy); color: #fff; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-followup-action-submit.is-remind { border: 1px solid #e9a52e; background: #fff; color: #d88d20; }
.sbo-followup-action-submit:disabled { border-color: #e5b96f; background: #f7f8fa; color: #dba668; cursor: not-allowed; opacity: 1; }
.sbo-followup-action-modal textarea { width: 100%; min-height: 126px; padding: 14px; resize: vertical; border: 1px solid #d7dee6; border-radius: 12px; outline: 0; background: #fff; color: #263246; font: 14px/1.5 var(--sb-font-regular); }
.sbo-followup-action-modal textarea:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,59,106,.09); }
.sbo-followup-reassign-options label > span { min-height: 64px; padding: 0 14px; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 10px; border: 1px solid #d7dee6; border-radius: 11px; background: #fff; cursor: pointer; }
.sbo-followup-reassign-options label > span i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #dce3ec; color: #28436a; font: normal 11px var(--sb-font-semibold); }
.sbo-followup-reassign-options label > span b { color: #263246; font: 14px var(--sb-font-semibold); }
.sbo-followup-reassign-options label > span em { display: none; color: var(--sbo-navy); font: normal 20px var(--sb-font-semibold); }
.sbo-followup-reassign-options input:checked + span { border-color: var(--sbo-navy); background: #f1f5fa; box-shadow: inset 0 0 0 1px var(--sbo-navy); }
.sbo-followup-reassign-options input:checked + span em { display: block; }
.sbo-followup-detail-modal { place-items: center; }
.sbo-followup-detail-modal__dialog { width: min(650px,100%); max-height: 94vh; padding: 24px; position: relative; overflow-y: auto; border-radius: 20px; background: #f8f9fb; box-shadow: 0 22px 58px rgba(14,25,41,.3); }
.sbo-followup-detail-modal__dialog > header { padding-bottom: 18px; display: grid; grid-template-columns: 56px 1fr auto 36px; align-items: center; gap: 14px; border-bottom: 1px solid #e0e5eb; }
.sbo-followup-detail-avatar { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#8e58eb,#ad56e8); color: #fff; font: 15px var(--sb-font-semibold); }
.sbo-followup-detail-modal__dialog h2 { margin: 0 0 4px; color: #151f30; font: 21px var(--sb-font-bold); }
.sbo-followup-detail-modal__dialog header p { margin: 0; color: #718096; font-size: 13px; }
.sbo-followup-detail-modal__dialog header > small { padding: 4px 8px; border-radius: 9px; background: #f0eaff; color: #6f3dde; font: 10px var(--sb-font-semibold); text-transform: capitalize; }
.sbo-followup-detail-modal__dialog header > button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #edf0f4; color: #778397; font-size: 22px; cursor: pointer; }
.sbo-followup-detail-modal dl { margin: 18px 0; padding: 17px; display: grid; gap: 12px; border-radius: 15px; background: #f1f3f6; }
.sbo-followup-detail-modal dl div { display: flex; justify-content: space-between; gap: 20px; }
.sbo-followup-detail-modal dt { color: #718096; font-size: 13px; }
.sbo-followup-detail-modal dd { margin: 0; color: #172235; font: 13px var(--sb-font-semibold); text-align: right; }
.sbo-followup-detail-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sbo-followup-detail-contact a { min-height: 48px; display: grid; place-items: center; border: 1px solid #22b99c; border-radius: 11px; color: #05816a; text-decoration: none; font: 14px var(--sb-font-semibold); }
.sbo-followup-detail-contact a:first-child { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; }
.sbo-followup-detail-modal__dialog > h3 { margin: 20px 0 10px; color: #718096; font: 12px var(--sb-font-semibold); text-transform: uppercase; }
.sbo-followup-detail-actions { display: grid; gap: 10px; }
.sbo-followup-detail-actions > button { min-height: 74px; padding: 10px 16px; display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 12px; border: 1px solid #d8dee6; border-radius: 13px; background: #fff; text-align: left; cursor: pointer; }
.sbo-followup-detail-actions > button[hidden] { display: none; }
.sbo-followup-detail-actions > button > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eaf7f4; color: #10917d; font-size: 19px; }
.sbo-followup-detail-actions > button > span.is-amber { background: #fff7e5; color: #e39213; }
.sbo-followup-detail-actions > button > span.is-slate { background: #edf0f4; color: #244570; }
.sbo-followup-detail-actions > button b { display: grid; gap: 4px; color: #202b3d; font: 16px var(--sb-font-semibold); }
.sbo-followup-detail-actions > button small { color: #718096; font: 12px var(--sb-font-regular); }
.sbo-followup-detail-actions > button > i { color: #718096; font: normal 22px var(--sb-font-regular); text-align: right; }
.sbo-followup-detail-actions > button.is-done { border-color: #76ddbd; background: #eafbf5; }
.sbo-followup-detail-actions > button.is-done b, .sbo-followup-detail-actions > button.is-done i { color: #07876e; }

@media (max-width: 520px) {
    .sbo-followups-header { padding: 12px 11px; grid-template-columns: 32px 1fr auto; gap: 7px; }
    .sbo-followups-header h1 { font-size: 22px; }
    .sbo-followups-header p { display: none; }
    .sbo-followups-header > button { padding: 0 11px; font-size: 12px; }
    .sbo-followups-content { padding: 12px 11px 96px; }
    .sbo-followups-stats article { min-height: 100px; padding: 12px; }
    .sbo-followup-card { padding: 13px 10px; }
    .sbo-followup-card__top { grid-template-columns: 44px 1fr 26px; gap: 10px; }
    .sbo-followup-avatar { width: 44px; height: 44px; }
    .sbo-followup-card__copy h2 { font-size: 15px; }
    .sbo-followup-card__copy p { font-size: 12px; }
    .sbo-followup-modal { padding: 14px; place-items: center; }
    .sbo-followup-modal__dialog { width: min(620px, 100%); max-height: calc(100vh - 28px); padding: 18px 14px; border-radius: 18px; }
    .sbo-complete-followup-modal { padding: 14px; place-items: center; }
    .sbo-complete-followup-modal__dialog { width: min(430px, 100%); padding: 20px 14px; border-radius: 18px; }
    .sbo-followup-action-modal { padding: 14px; place-items: center; }
    .sbo-followup-action-modal__dialog { width: min(430px, 100%); padding: 20px 14px; border-radius: 18px; }
    .sbo-followup-detail-modal__dialog { width: min(650px, 100%); max-height: calc(100vh - 28px); padding: 18px 12px; border-radius: 18px; }
    .sbo-followup-detail-modal__dialog > header { grid-template-columns: 48px 1fr auto 32px; gap: 9px; }
    .sbo-followup-detail-avatar { width: 48px; height: 48px; }
    .sbo-followup-detail-modal__dialog h2 { font-size: 18px; }
}

/* Expense book ? follows the Staff & PINs page scale and typography. */
.sbo-expense-page { background: #f3f5f8; color: var(--sbo-text); font-family: var(--sb-font-regular); }
.sbo-expense-header { min-height: 88px; padding: 15px 22px; display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--sbo-line); background: #fff; }
.sbo-expense-header > a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--sbo-text); text-decoration: none; font: 30px/1 var(--sb-font-regular); }
.sbo-expense-header > a:hover { background: #f0f3f7; }
.sbo-expense-header__icon { display: none; }
.sbo-expense-header h1 { margin: 0 0 4px; color: var(--sbo-text); font: normal 27px/1.15 var(--sb-font-bold); }
.sbo-expense-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-expense-header__badge { padding: 6px 10px; border-radius: 13px; background: #f3aa24; color: #fff; font: 11px var(--sb-font-semibold); }
.sbo-expense-header > button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--sbo-navy); color: #fff; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-header > button:disabled, .sbo-record-expense:disabled { opacity: .5; cursor: not-allowed; }
.sbo-expense-content { padding: 14px 22px 110px; }
.sbo-expense-note { min-height: 54px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #f0e2ad; border-radius: 12px; background: #fffbea; color: #8d743c; }
.sbo-expense-note span { color: #c58916; font-size: 18px; }
.sbo-expense-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.sbo-expense-period h2 { margin: 16px 0 9px; display: inline-flex; align-items: center; gap: 8px; color: #647084; font: 12px var(--sb-font-semibold); letter-spacing: 0; text-transform: none; line-height: 1; }
.sbo-expense-period h2 svg { display: block; flex-shrink: 0; color: #3366CC; }
.sbo-expense-period > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.sbo-expense-period a { min-height: 78px; padding: 10px 6px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px solid #dfe4e9; border-radius: 12px; background: #fff; color: var(--sbo-text); text-decoration: none; }
.sbo-expense-period a span { font-size: 18px; }
.sbo-expense-period a strong { font: 13px var(--sb-font-semibold); }
.sbo-expense-period a small { color: var(--sbo-muted); font-size: 10px; }
.sbo-expense-period a.is-active { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; box-shadow: 0 5px 12px rgba(21,53,98,.18); }
.sbo-expense-period a.is-active small { color: #d4deec; }
.sbo-expense-custom-range { margin-top: 8px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; border: 1px solid #dfe4e9; border-radius: 11px; background: #fff; }
.sbo-expense-custom-range[hidden] { display: none; }
.sbo-expense-custom-range label { display: grid; gap: 4px; color: #6f7d90; font-size: 9px; text-transform: uppercase; }
.sbo-expense-custom-range input { min-width: 0; height: 36px; padding: 0 8px; border: 1px solid #dce2e8; border-radius: 8px; color: #26354a; font: 11px var(--sb-font-regular); }
.sbo-expense-custom-range button { height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--sbo-navy); color: #fff; font: 10px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-summary { margin: 14px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sbo-expense-summary article { min-height: 88px; padding: 13px 15px; display: grid; align-content: center; border: 1px solid #e7eaee; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(25,42,66,.025); }
.sbo-expense-summary small { color: var(--sbo-muted); font-size: 10px; text-transform: uppercase; }
.sbo-expense-summary strong { margin: 6px 0 4px; color: var(--sbo-text); font: 20px var(--sb-font-bold); }
.sbo-expense-summary span { color: var(--sbo-muted); font-size: 10px; }
.sbo-expense-summary .is-cash { border-color: #eee2ac; background: #fffbea; }
.sbo-expense-summary .is-cash strong { color: #b1760d; }
.sbo-expense-summary .is-check { border-color: #f0d7d9; background: #fff3f3; }
.sbo-expense-summary .is-check strong { color: #c63d47; }
.sbo-record-expense { width: 100%; min-height: 64px; padding: 10px 16px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; border: 0; border-radius: 12px; background: var(--sbo-navy); color: #fff; text-align: left; cursor: pointer; }
.sbo-record-expense > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); font-size: 20px; }
.sbo-record-expense b { display: grid; gap: 3px; font: 15px var(--sb-font-semibold); }
.sbo-record-expense small { color: #c9d5e5; font: 11px var(--sb-font-regular); }
.sbo-record-expense i { font: normal 20px var(--sb-font-regular); }
.sbo-expense-filters { margin: 14px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sbo-expense-filters::-webkit-scrollbar { display: none; }
.sbo-expense-filters a { min-height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; border-radius: 20px; background: #e9edf2; color: #6c7585; text-decoration: none; font: 12px var(--sb-font-semibold); }
.sbo-expense-filters a span { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: rgba(23,35,51,.08); font-size: 9px; }
.sbo-expense-filters a.is-active { background: var(--sbo-navy); color: #fff; }
.sbo-expense-filters a.is-active span { background: rgba(255,255,255,.15); }
.sbo-expense-list { display: grid; gap: 10px; }
.sbo-expense-card { min-height: 116px; padding: 17px 18px; display: grid; grid-template-columns: 44px 1fr auto 28px; align-items: start; gap: 14px; border: 1px solid #e2e7ec; border-radius: 17px; background: #fff; box-shadow: 0 2px 8px rgba(25,42,66,.04); cursor: pointer; }
.sbo-expense-card:hover { border-color: #cbd5e2; box-shadow: 0 5px 15px rgba(25,42,66,.07); }
.sbo-expense-card:focus-visible { outline: 3px solid rgba(17,155,145,.2); outline-offset: 2px; }
.sbo-expense-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff5d7; color: #bd7e12; font-size: 19px; }
.sbo-expense-card > div { min-width: 0; }
.sbo-expense-card h2 { margin: 2px 0 7px; color: #101b2a; font: 16px var(--sb-font-bold); }
.sbo-expense-card p { margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--sbo-muted); font-size: 11px; }
.sbo-expense-card p i { color: #a3acb8; font-style: normal; }
.sbo-expense-card p .is-payment { font-family: var(--sb-font-semibold); }
.sbo-expense-card p .is-payment.is-cash { color: #bd7009; }
.sbo-expense-card p .is-payment.is-digital { color: #078d70; }
.sbo-expense-card > div > div { display: flex; flex-wrap: wrap; gap: 7px; }
.sbo-expense-card > strong { margin-top: 2px; color: #b45309; white-space: nowrap; font: 16px var(--sb-font-bold); }
.sbo-expense-card > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #697385; font-size: 18px; cursor: pointer; }
.sbo-expense-card > button:hover { background: #f0f3f6; }
.sbo-expense-status, .sbo-expense-tag { min-height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid #dfe4e9; border-radius: 12px; color: #6c7585; background: #f0f2f5; font-size: 10px; }
.sbo-expense-status.is-needs-check, .sbo-expense-status.is-waiting-check { border-color: #efbd54; background: #fff9e8; color: #b56b08; }
.sbo-expense-status.is-needs-photo { border-color: #f3a78a; background: #fff6ef; color: #cf4d1c; }
.sbo-expense-status.is-approved { border-color: #b8e1d5; background: #ecfaf5; color: #087d69; }
.sbo-expense-status.is-not-approved { border-color: #efc7ca; background: #fff1f2; color: #b53a46; }
.sbo-expense-tag.is-photo { border-color: #b7dfd5; background: #effaf7; color: #087c69; }
.sbo-expense-tag.is-no-photo { border-color: #f0bdc2; background: #fff1f2; color: #c83c48; }
.sbo-expense-tag.is-items { border-color: #c5d0df; background: #eef2f7; color: var(--sbo-navy); }
.sbo-expense-empty { padding: 42px 15px; display: grid; justify-items: center; gap: 5px; border: 1px dashed #cfd6dd; border-radius: 14px; background: #fff; text-align: center; }
.sbo-expense-empty > span { color: #c68a1b; font-size: 30px; }
.sbo-expense-empty h2, .sbo-expense-empty p { margin: 0; }
.sbo-expense-empty h2 { font: 16px var(--sb-font-semibold); }
.sbo-expense-empty p { color: #818c9c; font-size: 11px; }

.sbo-expense-modal[hidden], .sbo-expense-detail[hidden] { display: none; }
.sbo-expense-modal, .sbo-expense-detail { padding: 20px; display: grid; place-items: center; position: fixed; z-index: 1300; inset: 0; }
.sbo-expense-modal__backdrop, .sbo-expense-detail__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(13,20,28,.56); backdrop-filter: blur(3px); cursor: default; }
.sbo-expense-modal__backdrop:hover, .sbo-expense-modal__backdrop:active, .sbo-expense-detail__backdrop:hover, .sbo-expense-detail__backdrop:active { transform: none !important; filter: none !important; }
.sbo-expense-modal__dialog { width: min(680px,100%); max-height: calc(100vh - 40px); position: relative; z-index: 1; overflow-y: auto; border-radius: 24px; background: #f8f9fb; box-shadow: 0 25px 65px rgba(10,18,28,.3); }
.sbo-expense-modal__handle { width: 42px; height: 4px; margin: 12px auto 1px; display: block; border-radius: 3px; background: #d9dee5; }
.sbo-expense-modal header { min-height: 72px; padding: 10px 20px; display: grid; grid-template-columns: auto 40px 1fr 38px; align-items: center; gap: 10px; border-bottom: 1px solid #e4e8ed; }
.sbo-expense-modal header > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #e4e9f0; color: var(--sbo-navy); font-size: 20px; }
.sbo-expense-modal header h2 { margin: 0; font: 18px var(--sb-font-bold); }
.sbo-expense-modal header p { margin: 3px 0 0; color: #7a8699; font-size: 11px; }
.sbo-expense-modal header button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf0f4; color: #768397; font-size: 22px; cursor: pointer; }
.sbo-expense-modal header button[hidden] { display: block; visibility: hidden; }
.sbo-expense-progress { padding: 12px 20px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.sbo-expense-progress i { height: 6px; border-radius: 4px; background: #e6e9ee; }
.sbo-expense-progress i.is-active { background: var(--sbo-navy); }
.sbo-expense-modal form { padding: 23px 20px 22px; }
.sbo-expense-form-errors { margin-bottom: 12px; padding: 8px 11px; border-radius: 9px; background: #fff0f1; color: #b6323f; font-size: 10px; }
.sbo-expense-form-errors p { margin: 2px 0; }
.sbo-expense-step { display: none; }
.sbo-expense-step.is-active { display: grid; }
.sbo-expense-step__emoji { justify-self: center; font-size: 29px; }
.sbo-expense-step h3 { margin: 9px 0 5px; text-align: center; font: 22px var(--sb-font-bold); }
.sbo-expense-step > p { margin: 0 0 24px; color: #778399; text-align: center; font-size: 14px; }
.sbo-expense-amount { min-height: 67px; padding: 0 16px; display: flex; align-items: center; border: 2px solid var(--sbo-navy); border-radius: 14px; background: #fff; }
.sbo-expense-amount span { padding-right: 13px; border-right: 1px solid #d7dde5; color: #6f7b8e; font: 16px var(--sb-font-semibold); }
.sbo-expense-amount input { min-width: 0; height: 62px; padding: 0 14px; flex: 1; border: 0; outline: 0; background: transparent; color: #172234; font: 26px var(--sb-font-bold); }
.sbo-expense-next, .sbo-expense-save { width: 100%; min-height: 50px; margin-top: 20px; border: 0; border-radius: 13px; background: var(--sbo-navy); color: #fff; font: 16px var(--sb-font-bold); cursor: pointer; }
.sbo-expense-next span { margin-left: 8px; font-size: 21px; }
.sbo-expense-next:disabled { background: #91a0b8; color: #f5f7fa; cursor: not-allowed; opacity: 1; }
.sbo-expense-options { display: grid; gap: 10px; }
.sbo-expense-options--categories { grid-template-columns: 1fr 1fr; }
.sbo-expense-options label { display: block; }
.sbo-expense-options input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-expense-options--categories label > span { min-height: 53px; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid #d7dee6; border-radius: 12px; background: #fff; color: #172234; font-size: 14px; cursor: pointer; }
.sbo-expense-options--categories i { width: 9px; height: 9px; border-radius: 50%; background: #d7dce3; }
.sbo-expense-options--categories input:checked + span { border-color: var(--sbo-navy); background: #e9edf3; box-shadow: inset 0 0 0 1px var(--sbo-navy); color: var(--sbo-navy); }
.sbo-expense-options--categories input:checked + span i { background: var(--sbo-navy); }
.sbo-expense-options--payment label > span { min-height: 76px; padding: 13px 18px; display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 14px; border: 1px solid #d7dee6; border-radius: 14px; background: #fff; cursor: pointer; }
.sbo-expense-options--payment label > span > b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff7e5; font-size: 20px; }
.sbo-expense-options--payment label:nth-child(2) > span > b { background: #e8faf4; color: #079d73; }
.sbo-expense-options--payment label:nth-child(3) > span > b { background: #e9edf3; color: var(--sbo-navy); }
.sbo-expense-options--payment strong { display: grid; gap: 4px; font: 16px var(--sb-font-semibold); }
.sbo-expense-options--payment small { color: #778399; font: 11px var(--sb-font-regular); }
.sbo-expense-options--payment label > span > i { width: 18px; height: 18px; border: 2px solid #c8d0da; border-radius: 50%; }
.sbo-expense-options--payment input:checked + span { border-color: var(--sbo-navy); box-shadow: inset 0 0 0 1px var(--sbo-navy); }
.sbo-expense-options--payment input:checked + span > i { border: 5px solid var(--sbo-navy); }
.sbo-expense-item-linker[hidden], .sbo-expense-item-browser[hidden], .sbo-expense-selected-items[hidden], .sbo-expense-item-empty[hidden] { display: none; }
.sbo-expense-item-linker { margin-top: 18px; padding: 16px; border: 2px solid #c3cedd; border-radius: 16px; background: #eef1f5; }
.sbo-expense-item-linker > header { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 10px; }
.sbo-expense-item-linker > header > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #dde4ee; color: var(--sbo-navy); font-size: 18px; }
.sbo-expense-item-linker > header strong { color: #172234; font: 15px var(--sb-font-semibold); }
.sbo-expense-item-linker > header strong small { margin-left: 6px; color: #7b8799; font: 12px var(--sb-font-regular); }
.sbo-expense-item-linker > header p { margin: 4px 0 0; color: #718096; font-size: 10px; }
.sbo-expense-item-linker__choice { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-expense-item-linker__choice button { min-height: 44px; border: 1px solid #d7dee6; border-radius: 11px; background: #fff; color: #778399; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-item-linker__choice button:last-child, .sbo-expense-item-linker__choice button.is-active { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; }
.sbo-expense-item-linker__choice button:first-child.is-active { border-color: #aab5c5; background: #dfe4eb; color: #526176; }
.sbo-expense-item-browser { margin-top: 14px; }
.sbo-expense-item-search { min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #d6dee8; border-radius: 11px; background: #fff; }
.sbo-expense-item-search > span { color: #718096; font-size: 18px; }
.sbo-expense-item-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #243247; font: 13px var(--sb-font-regular); }
.sbo-expense-item-search button { width: 25px; height: 25px; padding: 0; border: 0; background: transparent; color: #788596; font-size: 18px; cursor: pointer; }
.sbo-expense-item-search i { width: 17px; height: 17px; flex: 0 0 auto; display: none; border: 2px solid #d7dde5; border-top-color: var(--sbo-teal); border-radius: 50%; animation: sbo-button-spin .7s linear infinite; }
.sbo-expense-item-linker.is-loading .sbo-expense-item-search i { display: block; }
.sbo-expense-item-linker.is-loading .sbo-expense-item-search button { display: none; }
.sbo-expense-item-search:focus-within { border-color: var(--sbo-teal); box-shadow: 0 0 0 3px rgba(17,155,145,.1); }
.sbo-expense-item-categories { margin: 10px 0 7px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.sbo-expense-item-categories::-webkit-scrollbar { display: none; }
.sbo-expense-item-categories button { min-height: 30px; padding: 0 11px; flex: 0 0 auto; border: 1px solid #d4dce6; border-radius: 16px; background: #fff; color: #718096; font: 10px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-item-categories button.is-active { border-color: var(--sbo-navy); background: var(--sbo-navy); color: #fff; }
.sbo-expense-item-search__status { min-height: 15px; margin: 0 1px 6px; color: #778399; font-size: 10px; }
.sbo-expense-item-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sbo-expense-item-results > button { min-height: 58px; padding: 9px 11px; display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 8px; border: 1px solid #d4dce6; border-radius: 11px; background: #fff; color: #172234; text-align: left; cursor: pointer; }
.sbo-expense-item-results > button > span { font-size: 20px; text-align: center; }
.sbo-expense-item-results > button > strong { display: grid; gap: 2px; font: 12px var(--sb-font-semibold); }
.sbo-expense-item-results > button small { color: #7b8799; font: 9px var(--sb-font-regular); }
.sbo-expense-item-results > button > i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #aeb8c6; font: normal 10px var(--sb-font-semibold); }
.sbo-expense-item-results > button.is-selected { border: 2px solid var(--sbo-navy); background: #dce3ed; color: var(--sbo-navy); }
.sbo-expense-item-results > button.is-selected > i { background: var(--sbo-navy); }
.sbo-expense-item-empty { padding: 18px; border: 1px dashed #cbd4df; border-radius: 10px; color: #7b8799; text-align: center; background: #fff; font-size: 11px; }
.sbo-expense-selected-items { margin-top: 14px; padding-top: 8px; border-top: 1px solid #cbd4df; }
.sbo-expense-selected-items h4 { margin: 0 0 10px; color: var(--sbo-navy); font: 10px var(--sb-font-semibold); letter-spacing: .03em; text-transform: uppercase; }
.sbo-expense-selected-items > div { display: grid; gap: 9px; }
.sbo-expense-selected-items article { padding: 12px; border: 1px solid #d4dce6; border-radius: 12px; background: #fff; }
.sbo-expense-selected-items article > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sbo-expense-selected-items article > header strong { color: #172234; font: 13px var(--sb-font-semibold); }
.sbo-expense-selected-items article > header small { color: #718096; font: 9px var(--sb-font-regular); }
.sbo-expense-selected-items article > header button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #778399; font-size: 18px; cursor: pointer; }
.sbo-expense-selected-items article > div { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sbo-expense-selected-items label { display: grid; gap: 5px; color: #718096; font: 9px var(--sb-font-semibold); text-transform: uppercase; }
.sbo-expense-selected-items input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d7dee6; border-radius: 10px; outline: 0; background: #f7f8fa; color: #172234; font: 13px var(--sb-font-regular); }
.sbo-expense-selected-items input:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 2px rgba(21,53,98,.08); }
.sbo-expense-review { margin-bottom: 17px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; position: relative; border-radius: 14px; background: #f1f3f6; }
.sbo-expense-review small { color: #718096; font: 10px var(--sb-font-semibold); text-transform: uppercase; }
.sbo-expense-review strong { grid-column: 1; margin-top: 7px; font: 20px var(--sb-font-bold); }
.sbo-expense-review p { grid-column: 1; margin: 4px 0 0; color: #718096; font-size: 12px; }
.sbo-expense-review i { width: 31px; height: 31px; grid-column: 2; grid-row: 1 / 4; align-self: center; display: grid; place-items: center; border: 2px solid #0ab889; border-radius: 50%; color: #0aaf84; font-style: normal; }
.sbo-expense-field { margin-bottom: 14px; display: grid; gap: 7px; color: #6f7d92; font-size: 12px; text-transform: uppercase; }
.sbo-expense-field > span small { color: #9ca6b5; text-transform: none; }
.sbo-expense-field input[type="text"], .sbo-expense-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d7dee6; border-radius: 11px; outline: 0; background: #fff; color: #26354a; font: 13px var(--sb-font-regular); text-transform: none; }
.sbo-expense-field textarea { min-height: 72px; resize: vertical; }
.sbo-expense-field input:focus, .sbo-expense-field textarea:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,53,98,.08); }
.sbo-expense-upload { min-height: 65px; padding: 10px 14px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; border: 1px solid #d7dee6; border-radius: 12px; background: #fff; cursor: pointer; text-transform: none; }
.sbo-expense-upload > b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #e8edf3; color: #718096; font-size: 20px; }
.sbo-expense-upload > strong { display: grid; gap: 3px; color: #172234; font: 14px var(--sb-font-semibold); }
.sbo-expense-upload > strong small { color: #7d899b; font: 10px var(--sb-font-regular); }
.sbo-expense-upload em { max-width: 145px; overflow: hidden; color: #0b8873; text-overflow: ellipsis; white-space: nowrap; font: normal 9px var(--sb-font-regular); }
.sbo-expense-save { margin-top: 3px; background: #079c72; }

.sbo-expense-detail > section { width: min(660px,100%); max-height: calc(100vh - 40px); position: relative; z-index: 1; overflow-y: auto; border-radius: 24px; background: #f8f9fb; box-shadow: 0 22px 58px rgba(14,25,41,.3); }
.sbo-expense-detail__handle { width: 42px; height: 4px; margin: 12px auto 1px; display: block; border-radius: 3px; background: #d9dee5; }
.sbo-expense-detail header { min-height: 76px; padding: 11px 20px; display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 12px; border-bottom: 1px solid #e0e5eb; background: #fff; }
.sbo-expense-detail header > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff4d6; color: #c37a09; font-size: 20px; }
.sbo-expense-detail h2 { margin: 0 0 4px; font: 18px var(--sb-font-bold); }
.sbo-expense-detail header p { margin: 0; color: #788596; font-size: 11px; }
.sbo-expense-detail header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #edf0f4; color: #758195; font-size: 22px; cursor: pointer; }
.sbo-expense-detail__body { padding: 18px 20px 22px; }
.sbo-expense-detail__hero { min-height: 108px; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 17px; background: #f1f3f6; }
.sbo-expense-detail__hero strong { color: #b65308; font: 31px var(--sb-font-bold); }
.sbo-expense-detail__hero span { color: #172234; font: 14px var(--sb-font-semibold); }
.sbo-expense-detail__hero span:first-letter { color: #079c72; }
.sbo-expense-detail dl { margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-expense-detail dl div { min-height: 74px; padding: 13px; display: grid; align-content: center; gap: 7px; border: 1px solid #e0e5eb; border-radius: 12px; background: #fff; }
.sbo-expense-detail dt { color: #718096; font: 10px var(--sb-font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.sbo-expense-detail dd { margin: 0; color: #172234; font: 14px var(--sb-font-semibold); }
.sbo-expense-detail dd > span { width: fit-content; min-height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid #f3b26b; border-radius: 11px; background: #fff8ef; color: #d05d16; font: 9px var(--sb-font-regular); }
.sbo-expense-detail dd > span.is-approved { border-color: #9bd9c8; background: #ecfaf5; color: #087d69; }
.sbo-expense-detail dd > span.is-not-approved { border-color: #efb8bd; background: #fff1f2; color: #b53a46; }
.sbo-expense-detail__missing, .sbo-expense-detail__receipt { min-height: 78px; margin-bottom: 14px; padding: 14px 16px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 13px; border: 2px dashed #ffb0ad; border-radius: 14px; background: #fff8f8; color: #d62f38; text-decoration: none; }
.sbo-expense-detail__missing > b, .sbo-expense-detail__receipt > b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #ffe6e7; font-size: 20px; }
.sbo-expense-detail__missing > span, .sbo-expense-detail__receipt > span { display: grid; gap: 4px; }
.sbo-expense-detail__missing strong, .sbo-expense-detail__receipt strong { font: 14px var(--sb-font-semibold); }
.sbo-expense-detail__missing small, .sbo-expense-detail__receipt small { font-size: 11px; }
.sbo-expense-detail__receipt.is-uploaded { border-style: solid; border-color: #a7ddcf; background: #effaf7; color: #087d69; }
.sbo-expense-detail__receipt.is-uploaded > b { background: #d9f4ec; }
.sbo-expense-detail__note { min-height: 48px; margin: 0 0 14px; padding: 11px 16px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 9px; border: 1px solid #e0e5eb; border-radius: 11px; background: #f2f4f7; color: #718096; font-size: 12px; line-height: 1.45; }
.sbo-expense-detail__note b { color: #718096; font-size: 17px; }
.sbo-expense-detail__note.has-note { align-items: start; background: #fff; color: #4e5c70; }
.sbo-expense-detail__linked-items { margin: 0 0 16px; }
.sbo-expense-detail__linked-items h3 { margin: 0 0 9px; color: var(--sbo-navy); font: 12px var(--sb-font-bold); letter-spacing: .03em; text-transform: uppercase; }
.sbo-expense-detail__linked-items > section { overflow: hidden; border: 2px solid #bcc9da; border-radius: 16px; background: #e9edf3; }
.sbo-expense-detail__linked-items article { min-height: 68px; padding: 11px 17px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #c9d2df; }
.sbo-expense-detail__linked-icon { font-size: 20px; text-align: center; }
.sbo-expense-detail__linked-items article > span:nth-child(2) { display: grid; gap: 4px; }
.sbo-expense-detail__linked-items article strong { color: #172234; font: 15px var(--sb-font-semibold); }
.sbo-expense-detail__linked-items article small { color: #718096; font-size: 11px; }
.sbo-expense-detail__linked-items article > b { color: var(--sbo-navy); font: 14px var(--sb-font-bold); white-space: nowrap; }
.sbo-expense-detail__linked-items footer { min-height: 42px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #d7dfeb; color: var(--sbo-navy); }
.sbo-expense-detail__linked-items footer strong, .sbo-expense-detail__linked-items footer b { font: 12px var(--sb-font-bold); text-transform: uppercase; }
.sbo-expense-detail__linked-items footer b { text-transform: none; }
.sbo-expense-detail__no-items { min-height: 80px; padding: 14px 17px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; border: 2px dashed #d1d8e2; border-radius: 16px; background: #f7f8fa; color: #7a8699; }
.sbo-expense-detail__no-items > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #edf0f4; color: #718096; font-size: 18px; }
.sbo-expense-detail__no-items > div { display: grid; gap: 4px; }
.sbo-expense-detail__no-items strong { color: #748095; font: 15px var(--sb-font-semibold); }
.sbo-expense-detail__no-items small { color: #99a3b2; font-size: 11px; }
.sbo-expense-detail__review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-expense-detail__review-actions form { margin: 0; }
.sbo-expense-detail__review-actions button { width: 100%; min-height: 52px; border: 1px solid #ff4640; border-radius: 12px; background: transparent; color: #dc3937; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-detail__review-actions form:first-child button { border-color: #079c72; background: #079c72; color: #fff; }
.sbo-expense-detail__request { margin: 12px 0 0; }
.sbo-expense-detail__request button { width: 100%; min-height: 50px; border: 1px solid #f0762f; border-radius: 12px; background: transparent; color: #dd571d; font: 14px var(--sb-font-semibold); cursor: pointer; }
.sbo-expense-detail__request.is-note button { border-color: #9b75ff; color: #6d35e3; }
.sbo-expense-detail__contact { margin-top: 16px; padding-top: 10px; border-top: 1px solid #e0e5eb; }
.sbo-expense-detail__contact > small { display: block; margin-bottom: 9px; color: #718096; font: 10px var(--sb-font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.sbo-expense-detail__contact > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-expense-detail__contact a { min-height: 48px; display: grid; place-items: center; border: 1px solid #9eacc2; border-radius: 12px; color: var(--sbo-navy); text-decoration: none; font: 14px var(--sb-font-semibold); }
.sbo-expense-detail__contact a:last-child { border-color: #50d8aa; color: #087d69; }

@media (max-width: 520px) {
    .sbo-expense-header { min-height: 72px; padding: 12px 11px; grid-template-columns: 32px 1fr auto; gap: 7px; }
    .sbo-expense-header > a { width: 32px; height: 32px; }
    .sbo-expense-header h1 { font-size: 22px; }
    .sbo-expense-header p { display: none; }
    .sbo-expense-header__badge { display: none; }
    .sbo-expense-header > button { min-height: 38px; padding: 0 11px; font-size: 12px; }
    .sbo-expense-content { padding: 12px 11px 96px; }
    .sbo-expense-note { padding: 12px; }
    .sbo-expense-note p { font-size: 11px; }
    .sbo-expense-period > div { gap: 6px; }
    .sbo-expense-period a { min-height: 68px; padding: 7px 2px; }
    .sbo-expense-period a strong { font-size: 10px; }
    .sbo-expense-period a small { font-size: 8px; }
    .sbo-expense-summary { gap: 7px; }
    .sbo-expense-summary article { min-height: 80px; padding: 10px 8px; }
    .sbo-expense-summary strong { font-size: 16px; }
    .sbo-expense-card { min-height: 96px; padding: 13px 10px; grid-template-columns: 40px 1fr auto 24px; gap: 10px; }
    .sbo-expense-card__icon { width: 40px; height: 40px; }
    .sbo-expense-card h2 { font-size: 14px; }
    .sbo-expense-card p { font-size: 10px; }
    .sbo-expense-card > strong { font-size: 13px; }
    .sbo-expense-status, .sbo-expense-tag { min-height: 21px; font-size: 9px; }
    .sbo-expense-custom-range { grid-template-columns: 1fr 1fr; }
    .sbo-expense-custom-range button { grid-column: 1 / -1; }
    .sbo-expense-modal, .sbo-expense-detail { padding: 0; place-items: end center; }
    .sbo-expense-modal__dialog { width: 100%; max-height: 96vh; border-radius: 22px 22px 0 0; }
    .sbo-expense-modal header { min-height: 65px; padding: 8px 12px; grid-template-columns: auto 36px 1fr 34px; gap: 7px; }
    .sbo-expense-modal header > span { width: 36px; height: 36px; }
    .sbo-expense-modal header h2 { font-size: 16px; }
    .sbo-expense-modal form { padding: 18px 12px; }
    .sbo-expense-step h3 { font-size: 20px; }
    .sbo-expense-step > p { margin-bottom: 18px; font-size: 13px; }
    .sbo-expense-options--categories { gap: 7px; }
    .sbo-expense-options--categories label > span { min-height: 50px; padding: 0 10px; font-size: 12px; }
    .sbo-expense-options--payment label > span { min-height: 68px; padding: 10px 12px; grid-template-columns: 40px 1fr 17px; gap: 10px; }
    .sbo-expense-options--payment label > span > b { width: 40px; height: 40px; }
    .sbo-expense-item-linker { padding: 12px 10px; }
    .sbo-expense-item-linker > header { grid-template-columns: 34px 1fr; gap: 8px; }
    .sbo-expense-item-linker > header > span { width: 34px; height: 34px; }
    .sbo-expense-item-linker > header strong { font-size: 13px; }
    .sbo-expense-item-linker > header p { font-size: 9px; }
    .sbo-expense-item-linker__choice button { min-height: 42px; font-size: 12px; }
    .sbo-expense-item-results { gap: 7px; }
    .sbo-expense-item-results > button { min-height: 55px; padding: 8px; grid-template-columns: 24px 1fr 18px; gap: 6px; }
    .sbo-expense-item-results > button > span { font-size: 17px; }
    .sbo-expense-item-results > button > strong { font-size: 10px; }
    .sbo-expense-selected-items article { padding: 10px; }
    .sbo-expense-detail > section { width: 100%; max-height: 96vh; padding: 0; border-radius: 18px 18px 0 0; }
    .sbo-expense-detail header { min-height: 68px; padding: 9px 12px; grid-template-columns: 40px 1fr 34px; gap: 9px; }
    .sbo-expense-detail header > span { width: 40px; height: 40px; }
    .sbo-expense-detail h2 { font-size: 16px; }
    .sbo-expense-detail header p { font-size: 10px; }
    .sbo-expense-detail__body { padding: 14px 12px 18px; }
    .sbo-expense-detail__hero { min-height: 96px; }
    .sbo-expense-detail__hero strong { font-size: 27px; }
    .sbo-expense-detail dl { gap: 8px; }
    .sbo-expense-detail dl div { min-height: 68px; padding: 11px; }
    .sbo-expense-detail__missing, .sbo-expense-detail__receipt { min-height: 70px; padding: 11px 12px; }
    .sbo-expense-detail__linked-items article { min-height: 60px; padding: 9px 11px; grid-template-columns: 26px 1fr auto; gap: 8px; }
    .sbo-expense-detail__linked-icon { font-size: 17px; }
    .sbo-expense-detail__linked-items article strong { font-size: 13px; }
    .sbo-expense-detail__linked-items article small { font-size: 10px; }
    .sbo-expense-detail__linked-items article > b { font-size: 12px; }
    .sbo-expense-detail__linked-items footer { padding: 0 11px; }
    .sbo-expense-detail__linked-items footer strong, .sbo-expense-detail__linked-items footer b { font-size: 10px; }
    .sbo-expense-detail__review-actions { gap: 9px; }
    .sbo-expense-detail__review-actions button,
    .sbo-expense-detail__request button,
    .sbo-expense-detail__contact a { font-size: 13px; }
}

/* Change owner PIN */
.sbo-owner-pin-modal[hidden] { display: none !important; }
.sbo-owner-pin-modal:not([hidden]) { display: grid; }
.sbo-owner-pin-modal { padding: 20px; place-items: center; position: fixed; z-index: 1400; inset: 0; font-family: var(--sb-font-regular); }
.sbo-owner-pin-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(15,23,42,.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: default; }
.sbo-owner-pin-modal__backdrop:hover, .sbo-owner-pin-modal__backdrop:active { transform: none !important; filter: none !important; }
.sbo-owner-pin-modal__dialog { width: min(420px,100%); max-height: calc(100vh - 40px); position: relative; z-index: 1; overflow-y: auto; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(15,30,55,.28); }
.sbo-owner-pin-modal__handle { width: 40px; height: 4px; margin: 10px auto 0; display: block; border-radius: 999px; background: #d5dce6; }
.sbo-owner-pin-modal__dialog > header,
.sbo-owner-pin-modal__header { min-height: 0; padding: 14px 20px 8px; display: grid; grid-template-columns: 44px minmax(0,1fr) 36px; align-items: center; gap: 12px; border-bottom: 0; background: #fff; }
.sbo-owner-pin-modal__dialog > header > span,
.sbo-owner-pin-modal__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e8f0fe; color: #3366cc; font-size: 0; }
.sbo-owner-pin-modal__dialog h2 { margin: 0 0 2px; color: #1e293b; font: normal 16px/1.25 var(--sb-font-bold); letter-spacing: -0.01em; }
.sbo-owner-pin-modal__dialog header p,
.sbo-owner-pin-modal__titles p { margin: 0; color: #8a94a6; font: normal 14px/1.35 var(--sb-font-regular); }
@media (min-width: 768px) {
    .sbo-owner-pin-modal__dialog h2 { font-size: 18px; }
}
.sbo-owner-pin-modal__dialog header button,
.sbo-owner-pin-modal__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef2f6; color: #647084; font-size: 0; cursor: pointer; display: grid; place-items: center; }
.sbo-owner-pin-modal form { padding: 8px 20px 20px; }
.sbo-owner-pin-modal form > label,
.sbo-owner-pin-field { margin-bottom: 14px; display: grid; gap: 7px; color: #334155; font: normal 16px/1.3 var(--sb-font-semibold); }
.sbo-owner-pin-field__label { display: block; color: #334155; font: normal 16px/1.3 var(--sb-font-semibold); }
.sbo-owner-pin-input { min-height: 48px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 8px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; }
.sbo-owner-pin-input:focus-within { border-color: #3366cc; box-shadow: 0 0 0 3px rgba(51,102,204,.12); background: #fff; }
.sbo-owner-pin-input input { min-width: 0; height: 46px; flex: 1; border: 0; outline: 0; background: transparent; color: #1e293b; font: 14px var(--sb-font-regular); letter-spacing: .04em; }
.sbo-owner-pin-input input::placeholder { color: #94a3b8; letter-spacing: 0; opacity: 1; }
.sbo-owner-pin-input button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 0; cursor: pointer; display: grid; place-items: center; }
.sbo-owner-pin-input button:hover { background: #f1f5f9; color: #647084; }
.sbo-owner-pin-submit { width: 100%; min-height: 50px; margin-top: 4px; border: 0; border-radius: 12px; background: #3366cc; color: #fff; font: 15px var(--sb-font-bold); cursor: pointer; }
.sbo-owner-pin-submit:disabled { background: #95a5c0; color: #fff; cursor: not-allowed; opacity: 1; }
.sbo-owner-pin-modal form > small,
.sbo-owner-pin-modal__hint { margin-top: 14px; display: block; color: #94a3b8; text-align: center; font-size: 12px; line-height: 1.4; }
.sbo-owner-pin-modal__errors { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fef1f2; color: #b91c1c; font-size: 13px; }
.sbo-owner-pin-modal__errors p { margin: 3px 0; }

@media (max-width: 520px) {
    .sbo-owner-pin-modal { padding: 16px; place-items: center; }
    .sbo-owner-pin-modal__dialog { width: min(420px,100%); max-height: calc(100vh - 32px); border-radius: 24px; }
    .sbo-owner-pin-modal__dialog > header,
    .sbo-owner-pin-modal__header { padding: 12px 16px 6px; grid-template-columns: 40px minmax(0,1fr) 34px; gap: 10px; }
    .sbo-owner-pin-modal__dialog > header > span,
    .sbo-owner-pin-modal__icon { width: 40px; height: 40px; }
    .sbo-owner-pin-modal__dialog header button,
    .sbo-owner-pin-modal__close { width: 34px; height: 34px; }
    .sbo-owner-pin-modal__dialog h2 { font-size: 16px; }
    .sbo-owner-pin-modal form { padding: 6px 16px 18px; }
}

/* Notification alerts ? legacy only (new theme uses .alerts-ui in ui-updates-salesbook.css) */
.sbo-alerts-page:not(.alerts-ui) { background: #f3f5f8; color: var(--sbo-text); font-family: var(--sb-font-regular); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header { min-height: 82px; padding: 12px 20px; display: grid; grid-template-columns: 36px 44px 1fr; align-items: center; gap: 11px; border-bottom: 1px solid var(--sbo-line); background: #fff; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header > a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--sbo-text); text-decoration: none; font: 28px/1 var(--sb-font-regular); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header > a:hover { background: #f0f3f7; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e3e8ef; color: var(--sbo-navy); font-size: 21px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header h1 { margin: 0 0 4px; font: 20px/1.15 var(--sb-font-bold); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header p { margin: 0; color: var(--sbo-muted); font-size: 10px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-content { padding: 16px 20px 110px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-content form { display: grid; gap: 20px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-card { padding: 17px; border: 1px solid #dfe4e9; border-radius: 17px; background: #fff; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-card h2 { margin: 0; color: #597097; font: 11px var(--sb-font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label { display: block; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options input { position: absolute; opacity: 0; pointer-events: none; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label > span { min-height: 76px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px solid #d6dde6; border-radius: 12px; background: #f8f9fb; color: #60708a; cursor: pointer; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label b { color: #172234; font-size: 20px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label strong { font: 13px var(--sb-font-semibold); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options input:checked + span { border: 2px solid #172234; background: #fff; color: var(--sbo-navy); box-shadow: 0 2px 5px rgba(25,42,66,.05); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-phone { margin-top: 14px; display: grid; gap: 6px; color: #172234; font: 11px var(--sb-font-semibold); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-phone[hidden] { display: none; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-phone input { width: 100%; height: 42px; padding: 0 13px; border: 1px solid #dce2e8; border-radius: 11px; outline: 0; background: #f5f7f9; color: #172234; font: 12px var(--sb-font-regular); letter-spacing: .05em; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-phone input:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,53,98,.08); background: #fff; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-phone small { color: #718096; font: 9px var(--sb-font-regular); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-types > header { display: flex; align-items: center; justify-content: space-between; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-types > header button { padding: 0; border: 0; background: transparent; color: #078d7a; font: 10px var(--sb-font-regular); cursor: pointer; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-types > div { margin-top: 10px; display: grid; gap: 7px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option { min-height: 61px; padding: 9px 12px; display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 11px; border-radius: 12px; background: #f7f8fa; cursor: pointer; transition: opacity .18s, background .18s; opacity: .52; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option.is-enabled { opacity: 1; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; font-size: 20px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-navy { background: #e3e9f1; color: var(--sbo-navy); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-amber { background: #fff6df; color: #e08808; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-teal { background: #e6f8f5; color: #31afa3; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-rose { background: #fff0f2; color: #ff2852; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-violet { background: #f0edff; color: #5847ff; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-orange { background: #fff3e9; color: #ff8a51; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon.is-green { background: #e9f9f3; color: #06a678; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > span:nth-child(2) strong { color: #172234; font: 13px var(--sb-font-semibold); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > span:nth-child(2) small { overflow: hidden; color: #718096; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > i { width: 44px; height: 24px; padding: 3px; justify-self: end; border-radius: 13px; background: #e3e7ed; transition: background .2s; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > i::after { content: ""; width: 18px; height: 18px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,35,55,.18); transition: transform .2s; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option input[type="checkbox"]:checked + i { background: var(--sbo-navy); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alert-option input[type="checkbox"]:checked + i::after { transform: translateX(20px); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-quiet > p { margin: 5px 0 15px; color: #718096; font-size: 10px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-quiet > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-quiet label { display: grid; gap: 6px; color: #172234; font: 11px var(--sb-font-semibold); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-quiet input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #dce2e8; border-radius: 11px; outline: 0; background: #f5f7f9; color: #172234; font: 12px var(--sb-font-regular); }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-quiet input:focus { border-color: var(--sbo-navy); box-shadow: 0 0 0 3px rgba(21,53,98,.08); background: #fff; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-save { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--sbo-navy); color: #fff; font: 13px var(--sb-font-bold); cursor: pointer; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-save:disabled { background: #91a0b8; cursor: not-allowed; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-errors { padding: 11px 13px; border: 1px solid #efc6ca; border-radius: 11px; background: #fff1f2; color: #b63b47; font-size: 11px; }
.sbo-alerts-page:not(.alerts-ui) .sbo-alerts-errors p { margin: 3px 0; }

@media (max-width: 520px) {
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header { min-height: 70px; padding: 10px 11px; grid-template-columns: 31px 39px 1fr; gap: 7px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header > a { width: 31px; height: 31px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header > span { width: 39px; height: 39px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-header h1 { font-size: 17px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-content { padding: 12px 10px 96px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-content form { gap: 14px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alerts-card { padding: 13px 11px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options { gap: 6px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label > span { min-height: 68px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-channel-options label strong { font-size: 11px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option { min-height: 57px; padding: 8px; grid-template-columns: 36px 1fr 40px; gap: 8px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option__icon { width: 36px; height: 36px; font-size: 18px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > span:nth-child(2) strong { font-size: 11px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > span:nth-child(2) small { font-size: 8px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > i { width: 40px; height: 23px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option > i::after { width: 17px; height: 17px; }
    .sbo-alerts-page:not(.alerts-ui) .sbo-alert-option input[type="checkbox"]:checked + i::after { transform: translateX(17px); }
}

/* My Handovers ? follows the Staff & PINs page scale and typography. */
.sbo-handover-page { background: #f3f5f8; color: var(--sbo-text); font-family: var(--sb-font-regular); }
.sbo-handover-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-handover-header h1 { margin: 0 0 4px; color: var(--sbo-text); font: normal 27px/1.15 var(--sb-font-bold); }
.sbo-handover-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-handover-header__badge {
    padding: 6px 10px;
    border-radius: 13px;
    background: #f3aa24;
    color: #fff;
    font: 11px var(--sb-font-semibold);
}
.sbo-handover-content { padding: 14px 22px 110px; }

.sbo-handover-sms-alert {
    margin-bottom: 14px;
    min-height: 54px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 11px;
    border: 1px solid #f0e2ad;
    border-radius: 12px;
    background: #fffbea;
    color: #8d743c;
    text-decoration: none;
}
.sbo-handover-sms-alert__icon { color: #c58916; font-size: 18px; line-height: 1; }
.sbo-handover-sms-alert strong { display: block; color: #7a5f1f; font: 13px var(--sb-font-semibold); }
.sbo-handover-sms-alert p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #8d743c; }
.sbo-handover-sms-alert i { color: #c58916; font: 22px/1 var(--sb-font-regular); font-style: normal; }

.sbo-handover-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-handover-summary article {
    min-height: 108px;
    padding: 14px 15px;
    display: grid;
    align-content: start;
    gap: 2px;
    border: 1px solid #e7eaee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25,42,66,.025);
}
.sbo-handover-summary__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font: 13px var(--sb-font-bold);
}
.sbo-handover-summary small,
.sbo-handover-summary__label {
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sbo-handover-summary strong,
.sbo-handover-summary__value {
    margin: 4px 0 2px;
    color: var(--sbo-text);
    font: 22px var(--sb-font-bold);
}
.sbo-handover-summary em,
.sbo-handover-summary__meta {
    color: var(--sbo-muted);
    font: 11px var(--sb-font-regular);
    font-style: normal;
}
.sbo-handover-summary .is-handed {
    border-color: #A7F3D0;
    background: #ECFDF5;
}
.sbo-handover-summary .is-handed .sbo-handover-summary__icon { background: #0d9488; color: #fff; }
.sbo-handover-summary .is-handed strong,
.sbo-handover-summary .is-handed .sbo-handover-summary__value,
.sbo-handover-summary .is-handed small,
.sbo-handover-summary .is-handed .sbo-handover-summary__label { color: #0d9488; }
.sbo-handover-summary .is-pending {
    border-color: #FDE68A;
    background: #FFFBEB;
}
.sbo-handover-summary .is-pending .sbo-handover-summary__icon { background: #B45309; color: #fff; }
.sbo-handover-summary .is-pending strong,
.sbo-handover-summary .is-pending .sbo-handover-summary__value,
.sbo-handover-summary .is-pending small,
.sbo-handover-summary .is-pending .sbo-handover-summary__label { color: #B45309; }
.sbo-handover-summary .is-staff {
    border-color: #FED7AA;
    background: #FFF7ED;
}
.sbo-handover-summary .is-staff .sbo-handover-summary__icon { background: #EA580C; color: #fff; }
.sbo-handover-summary .is-staff strong,
.sbo-handover-summary .is-staff .sbo-handover-summary__value,
.sbo-handover-summary .is-staff small,
.sbo-handover-summary .is-staff .sbo-handover-summary__label { color: #C2410C; }
.sbo-handover-summary .is-rejected {
    border-color: #FECACA;
    background: #FEF2F2;
}
.sbo-handover-summary .is-rejected .sbo-handover-summary__icon { background: #DC2626; color: #fff; }
.sbo-handover-summary .is-rejected strong,
.sbo-handover-summary .is-rejected .sbo-handover-summary__value,
.sbo-handover-summary .is-rejected small,
.sbo-handover-summary .is-rejected .sbo-handover-summary__label { color: #DC2626; }

.sbo-handover-filters {
    margin: 14px 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sbo-handover-filters::-webkit-scrollbar { display: none; }
.sbo-handover-filters a {
    min-height: 38px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: #e9edf2;
    color: #6c7585;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}
.sbo-handover-filters a span {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(23,35,51,.08);
    font-size: 9px;
}
.sbo-handover-filters a.is-active {
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-handover-filters a.is-active span { background: rgba(255,255,255,.15); }

.sbo-handover-list { display: grid; gap: 10px; }
.sbo-handover-card {
    min-height: 92px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: start;
    gap: 14px;
    border: 1px solid #e2e7ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25,42,66,.04);
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.sbo-handover-card:hover { border-color: #cdd5df; box-shadow: 0 4px 14px rgba(25,42,66,.07); }
.sbo-handover-card:focus-visible { outline: 3px solid rgba(17,155,145,.24); outline-offset: 2px; }
.sbo-handover-card__avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 14px var(--sb-font-bold);
}
.sbo-handover-card__avatar.is-teal { background: #119b91; }
.sbo-handover-card__avatar.is-navy { background: #153562; }
.sbo-handover-card__avatar.is-green { background: #1f6b4a; }
.sbo-handover-card__main { min-width: 0; }
.sbo-handover-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sbo-handover-card__title strong {
    color: #101b2a;
    font: 15px var(--sb-font-bold);
}
.sbo-handover-card__main p {
    margin: 0 0 3px;
    color: var(--sbo-muted);
    font-size: 12px;
    line-height: 1.4;
}
.sbo-handover-card__amount {
    text-align: right;
    white-space: nowrap;
}
.sbo-handover-card__amount strong {
    display: block;
    color: #101b2a;
    font: 15px var(--sb-font-bold);
}
.sbo-handover-card__amount small {
    display: block;
    margin-top: 6px;
    color: var(--sbo-muted);
    font-size: 11px;
}

.sbo-handover-status {
    min-height: 22px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 11px;
    font: 10px var(--sb-font-semibold);
}
.sbo-handover-status.is-confirmed {
    border: 1px solid #b8e1d5;
    background: #ecfaf5;
    color: #087d69;
}
.sbo-handover-status.is-pending {
    border: 1px solid #efbd54;
    background: #fff9e8;
    color: #b56b08;
}
.sbo-handover-status.is-rejected {
    border: 1px solid #efc7ca;
    background: #fff1f2;
    color: #b53a46;
}

.sbo-handover-empty {
    padding: 42px 15px;
    display: grid;
    justify-items: center;
    gap: 5px;
    border: 1px dashed #cfd6dd;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.sbo-handover-empty > span { color: var(--sbo-teal); font-size: 30px; }
.sbo-handover-empty h2,
.sbo-handover-empty p { margin: 0; }
.sbo-handover-empty h2 { font: 16px var(--sb-font-semibold); }
.sbo-handover-empty p { color: #818c9c; font-size: 11px; }

.sbo-handover-detail[hidden] { display: none; }
.sbo-handover-detail {
    padding: 20px;
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 1300;
    inset: 0;
    font-family: var(--sb-font-regular);
}
.sbo-handover-detail__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(13,20,28,.56);
    backdrop-filter: blur(3px);
    cursor: default;
}
.sbo-handover-detail__backdrop:hover,
.sbo-handover-detail__backdrop:active { transform: none !important; filter: none !important; }
.sbo-handover-detail__dialog {
    width: min(660px,100%);
    max-height: calc(100vh - 40px);
    position: relative;
    z-index: 1;
    overflow-y: auto;
    border-radius: 24px;
    background: #f8f9fb;
    box-shadow: 0 22px 58px rgba(14,25,41,.3);
}
.sbo-handover-detail__handle {
    width: 42px;
    height: 4px;
    margin: 12px auto 1px;
    display: block;
    border-radius: 3px;
    background: #d9dee5;
}
.sbo-handover-detail__dialog > header {
    min-height: 76px;
    padding: 11px 20px;
    display: grid;
    grid-template-columns: 44px 1fr 36px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e0e5eb;
    background: #fff;
}
.sbo-handover-detail__avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 14px var(--sb-font-bold);
}
.sbo-handover-detail__avatar.is-teal { background: #119b91; }
.sbo-handover-detail__avatar.is-navy { background: #153562; }
.sbo-handover-detail__avatar.is-green { background: #1f6b4a; }
.sbo-handover-detail__dialog h2 {
    margin: 0 0 4px;
    color: #172234;
    font: 19px var(--sb-font-bold);
}
.sbo-handover-detail__dialog header p {
    margin: 0;
    color: #788596;
    font-size: 12px;
}
.sbo-handover-detail__dialog header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}
.sbo-handover-detail__body { padding: 18px 20px 22px; }
.sbo-handover-detail__amount {
    min-height: 118px;
    padding: 18px 16px 16px;
    display: grid;
    justify-items: center;
    gap: 8px;
    border-radius: 17px;
    background: #f1f3f6;
}
.sbo-handover-detail__amount > small {
    color: #718096;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.sbo-handover-detail__amount > strong {
    color: #172234;
    font: 31px var(--sb-font-bold);
}
.sbo-handover-detail__status {
    min-height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #9bd9c8;
    border-radius: 999px;
    background: #ecfaf5;
    color: #087d69;
    font: 11px var(--sb-font-semibold);
}
.sbo-handover-detail__status.is-pending {
    border-color: #f0d08a;
    background: #fff8e8;
    color: #b1760d;
}
.sbo-handover-detail__status.is-rejected {
    border-color: #efb8bd;
    background: #fff1f2;
    color: #b53a46;
}
.sbo-handover-detail__facts {
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    border: 1px solid #e0e5eb;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.sbo-handover-detail__facts div {
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e8ecf1;
}
.sbo-handover-detail__facts div:last-child { border-bottom: 0; }
.sbo-handover-detail__facts dt {
    color: #718096;
    font-size: 13px;
}
.sbo-handover-detail__facts dd {
    margin: 0;
    color: #172234;
    font: 13px var(--sb-font-semibold);
    text-align: right;
}
.sbo-handover-detail__note {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f1f3f6;
}
.sbo-handover-detail__note > small {
    display: block;
    margin-bottom: 6px;
    color: #718096;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-handover-detail__note p {
    margin: 0;
    color: #4e5c70;
    font-size: 13px;
    line-height: 1.45;
}
.sbo-handover-detail__actions {
    margin-top: 18px;
    padding-top: 4px;
}
.sbo-handover-detail__actions > small {
    display: block;
    margin-bottom: 10px;
    color: #718096;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-handover-detail__call,
.sbo-handover-detail__whatsapp,
.sbo-handover-detail__review {
    width: 100%;
    min-height: 50px;
    margin-bottom: 10px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
}
.sbo-handover-detail__call[hidden],
.sbo-handover-detail__whatsapp[hidden] { display: none; }
.sbo-handover-detail__call {
    border: 1px solid var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-handover-detail__whatsapp {
    border: 1px solid #22b99c;
    background: #fff;
    color: #05816a;
}
.sbo-handover-detail__review {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #6b7484;
}
.sbo-handover-detail__review.is-reviewed {
    border-color: #c9d4df;
    background: #f3f5f8;
    color: #8a95a5;
}

@media (max-width: 520px) {
    .sbo-handover-header { min-height: 70px; padding: 10px 11px; gap: 8px; }
    .sbo-handover-header h1 { font-size: 20px; }
    .sbo-handover-header p { font-size: 12px; }
    .sbo-handover-content { padding: 12px 10px 96px; }
    .sbo-handover-summary article { min-height: 96px; padding: 12px; }
    .sbo-handover-summary strong { font-size: 18px; }
    .sbo-handover-card { padding: 14px 12px; gap: 10px; }
    .sbo-handover-card__avatar { width: 40px; height: 40px; font-size: 12px; }
    .sbo-handover-card__title strong { font-size: 14px; }
    .sbo-handover-card__amount strong { font-size: 14px; }

    .sbo-handover-detail { padding: 0; place-items: end center; }
    .sbo-handover-detail__dialog { width: 100%; max-height: 96vh; border-radius: 20px 20px 0 0; }
    .sbo-handover-detail__dialog > header { min-height: 68px; padding: 9px 12px; grid-template-columns: 40px 1fr 34px; gap: 9px; }
    .sbo-handover-detail__avatar { width: 40px; height: 40px; font-size: 12px; }
    .sbo-handover-detail__dialog h2 { font-size: 17px; }
    .sbo-handover-detail__body { padding: 16px 13px 20px; }
    .sbo-handover-detail__amount > strong { font-size: 26px; }
}

/* Credit Ledger */
.sbo-credit-page { background: #f3f5f8; }
.sbo-credit-summary {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sbo-credit-summary article {
    min-height: 78px;
    padding: 12px 14px;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid #e2e7ec;
    border-radius: 14px;
    background: #fff;
}
.sbo-credit-summary article.is-alert {
    border-color: #f0c8cb;
    background: #fff5f6;
}
.sbo-credit-summary small {
    color: var(--sbo-muted);
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-credit-summary strong {
    color: var(--sbo-text);
    font: 18px var(--sb-font-bold);
}
.sbo-credit-summary article.is-alert strong { color: #c63d47; }

.sbo-credit-toolbar {
    margin: 14px 0 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.sbo-credit-search {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
    min-width: 0;
    margin-top: 0;
    height: auto;
    box-sizing: border-box;
}
.sbo-credit-search__status {
    margin-top: 6px;
    margin-bottom: 12px;
}
.sbo-credit-filters {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}
.sbo-credit-filters a {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8dee6;
    border-radius: 999px;
    color: #6c7585;
    background: #fff;
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
    white-space: nowrap;
}
.sbo-credit-filters a.is-active {
    border-color: var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-credit-list { display: grid; gap: 12px; }
.sbo-credit-card {
    padding: 16px 18px;
    display: grid;
    gap: 12px;
    border: 1px solid #e2e7ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25,42,66,.04);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.sbo-credit-card:hover { border-color: #cdd5df; box-shadow: 0 4px 14px rgba(25,42,66,.07); }
.sbo-credit-card__top {
    display: grid;
    grid-template-columns: 44px 1fr auto 18px;
    gap: 12px;
    align-items: start;
}
.sbo-credit-card__avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf0f4;
    color: #5d6675;
    font: 14px var(--sb-font-bold);
}
.sbo-credit-card__identity strong {
    display: block;
    color: #101b2a;
    font: 16px var(--sb-font-bold);
}
.sbo-credit-card__identity p {
    margin: 4px 0 0;
    color: var(--sbo-muted);
    font-size: 12px;
}
.sbo-credit-status {
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    font: 10px var(--sb-font-semibold);
}
.sbo-credit-status.is-active {
    border: 1px solid #9bd9c8;
    background: #ecfaf5;
    color: #087d69;
}
.sbo-credit-status.is-suspended {
    border: 1px solid #efc7ca;
    background: #fff1f2;
    color: #b53a46;
}
.sbo-credit-card__arrow {
    color: #9aa5b3;
    font: 24px/1 var(--sb-font-regular);
    text-align: right;
}
.sbo-credit-card__metrics {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
}
.sbo-credit-card__metrics small {
    display: block;
    margin-bottom: 4px;
    color: var(--sbo-muted);
    font-size: 11px;
}
.sbo-credit-card__metrics strong {
    color: var(--sbo-text);
    font: 15px var(--sb-font-bold);
}
.sbo-credit-card__limit {
    text-align: right;
    color: var(--sbo-muted);
    font-size: 11px;
}
.sbo-credit-card__edit-limit {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a95a5;
    font-size: 13px;
    cursor: pointer;
}
.sbo-credit-card__bar {
    height: 8px;
    border-radius: 999px;
    background: #e9edf2;
    overflow: hidden;
}
.sbo-credit-card__bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1f9b84;
}
.sbo-credit-card__bar > i.is-near { background: #e2a20d; }
.sbo-credit-card__bar > i.is-over { background: #d84c4c; }
.sbo-credit-card__usage-label {
    margin-top: 6px;
    display: inline-block;
    font: 10px var(--sb-font-semibold);
}
.sbo-credit-card__usage-label.is-near { color: #b1760d; }
.sbo-credit-card__usage-label.is-over { color: #c63d47; }
.sbo-credit-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sbo-credit-card__footer small {
    color: var(--sbo-muted);
    font-size: 11px;
    text-transform: capitalize;
}
.sbo-credit-card__followup {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    background: #f1ecff;
    color: #6d35e3;
    font: 12px var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
}

.sbo-credit-empty {
    padding: 42px 15px;
    display: grid;
    justify-items: center;
    gap: 5px;
    border: 1px dashed #cfd6dd;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.sbo-credit-empty > span { color: var(--sbo-teal); font-size: 30px; }
.sbo-credit-empty h2,
.sbo-credit-empty p { margin: 0; }
.sbo-credit-empty h2 { font: 16px var(--sb-font-semibold); }
.sbo-credit-empty p { color: #818c9c; font-size: 11px; }
.sbo-credit-empty--compact { padding: 24px 12px; }

.sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
.sbo-credit-limit-modal .sbo-add-staff-modal__dialog,
.sbo-credit-payment-modal .sbo-add-staff-modal__dialog,
.sbo-credit-reminder-modal .sbo-add-staff-modal__dialog {
    width: min(100%, 480px);
    height: auto;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
}

.sbo-credit-customer-modal form,
.sbo-credit-limit-modal form,
.sbo-credit-payment-modal form,
.sbo-credit-reminder-modal form {
    height: auto;
    display: block;
}

.sbo-credit-modal__header {
    min-height: 64px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr 34px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}

.sbo-credit-modal__header h2 {
    margin: 0;
    color: #172234;
    font: 18px var(--sb-font-bold);
}

.sbo-credit-modal__header p {
    margin: 4px 0 0;
    color: #788596;
    font-size: 12px;
}

.sbo-credit-modal__header button {
    width: 34px;
    height: 34px;
    margin-left: 0;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}

.sbo-credit-customer-form {
    padding: 18px 20px 20px;
    display: grid;
    gap: 14px;
}
.sbo-credit-customer-form label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: #172234;
    font: 14px var(--sb-font-semibold);
}
.sbo-credit-customer-form input,
.sbo-credit-customer-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #f7f8fa;
    color: var(--sbo-text);
    font: 14px var(--sb-font-regular);
}
.sbo-credit-customer-form input:focus,
.sbo-credit-customer-form select:focus {
    outline: 0;
    border-color: var(--sbo-teal);
    box-shadow: 0 0 0 3px rgba(17,155,145,.1);
    background: #fff;
}
.sbo-credit-customer-form__errors {
    padding: 10px 12px;
    border: 1px solid #efc6ca;
    border-radius: 10px;
    background: #fff1f2;
    color: #b63b47;
    font-size: 12px;
}
.sbo-credit-customer-form__errors p { margin: 3px 0; }
.sbo-credit-customer-form__footer {
    margin-top: 6px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10px;
}
.sbo-credit-customer-form__footer button {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-customer-form__footer button[type="button"] {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #6c7585;
}
.sbo-credit-customer-form__footer button[type="submit"] {
    border: 1px solid var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-credit-payment-modal__header {
    min-height: 64px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 40px 1fr 34px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}
.sbo-credit-payment-modal__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e7f7f4;
    color: var(--sbo-teal);
    font-size: 18px;
}
.sbo-credit-payment-modal__header h2 {
    margin: 0;
    color: #172234;
    font: 18px var(--sb-font-bold);
}
.sbo-credit-payment-modal__header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}

.sbo-credit-payment-form {
    padding: 18px 18px 20px;
    display: grid;
    gap: 14px;
}
.sbo-credit-payment-outstanding {
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    background: #f3f5f8;
    color: #5d6675;
    font-size: 14px;
}
.sbo-credit-payment-outstanding strong {
    margin-left: 4px;
    color: #172234;
    font: 14px var(--sb-font-bold);
}
.sbo-credit-payment-field {
    display: grid;
    gap: 7px;
    margin: 0;
    color: #172234;
    font: 14px var(--sb-font-semibold);
}
.sbo-credit-payment-field input,
.sbo-credit-payment-staff select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #f7f8fa;
    color: var(--sbo-text);
    font: 14px var(--sb-font-regular);
}
.sbo-credit-payment-field input:focus,
.sbo-credit-payment-staff select:focus {
    outline: 0;
    border-color: var(--sbo-teal);
    box-shadow: 0 0 0 3px rgba(17,155,145,.1);
    background: #fff;
}
.sbo-credit-payment-methods {
    margin: 0;
    padding: 0;
    border: 0;
}
.sbo-credit-payment-methods legend {
    margin-bottom: 8px;
    color: #172234;
    font: 14px var(--sb-font-semibold);
}
.sbo-credit-payment-methods__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sbo-credit-payment-methods__options button {
    min-height: 44px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #fff;
    color: #6c7585;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-payment-methods__options button:hover:not(.is-active) {
    border-color: #c5ced8;
    background: #f8f9fb;
}
.sbo-credit-payment-methods__options button.is-active {
    border-color: var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
    filter: none;
    transform: none;
}
.sbo-credit-payment-staff {
    position: relative;
    display: block;
}
.sbo-credit-payment-staff > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a95a5;
    font: 15px/1 var(--sb-font-regular);
    font-style: normal;
    pointer-events: none;
}
.sbo-credit-payment-staff select {
    padding-left: 38px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a95a5' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.sbo-credit-payment-staff-hint {
    color: #c58916;
    font: 12px var(--sb-font-regular);
}
.sbo-credit-payment-staff-hint[hidden] { display: none; }
.sbo-credit-payment-form__footer {
    margin-top: 4px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10px;
}
.sbo-credit-payment-form__footer button {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-payment-form__footer button[type="button"] {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #6c7585;
}
.sbo-credit-payment-form__footer button[type="submit"] {
    border: 1px solid var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-credit-payment-form__footer button[type="submit"]:disabled {
    border-color: #a8b3c2;
    background: #a8b3c2;
    color: #fff;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.sbo-credit-limit-modal__header {
    min-height: 64px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 40px 1fr 34px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}
.sbo-credit-limit-modal__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf0f4;
    color: var(--sbo-navy);
    font-size: 18px;
}
.sbo-credit-limit-modal__header h2 {
    margin: 0;
    color: #172234;
    font: 18px var(--sb-font-bold);
}
.sbo-credit-limit-modal__header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}
.sbo-credit-limit-form {
    padding: 18px 18px 20px;
    display: grid;
    gap: 14px;
}
.sbo-credit-limit-customer {
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    background: #f3f5f8;
    color: #5d6675;
    font-size: 14px;
}
.sbo-credit-limit-customer strong {
    color: #172234;
    font: 14px var(--sb-font-bold);
}
.sbo-credit-limit-field {
    display: grid;
    gap: 7px;
    margin: 0;
    color: #172234;
    font: 14px var(--sb-font-semibold);
}
.sbo-credit-limit-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #f7f8fa;
    color: var(--sbo-text);
    font: 14px var(--sb-font-regular);
}
.sbo-credit-limit-field input:focus,
.sbo-credit-limit-field input.is-warning {
    outline: 0;
    border-color: var(--sbo-navy);
    box-shadow: 0 0 0 3px rgba(21,53,98,.12);
    background: #fff;
}
.sbo-credit-limit-warning {
    color: #c58916;
    font: 12px var(--sb-font-regular);
}
.sbo-credit-limit-warning[hidden] { display: none; }
.sbo-credit-limit-form__footer {
    margin-top: 4px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10px;
}
.sbo-credit-limit-form__footer button {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-limit-form__footer button[type="button"] {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #6c7585;
}
.sbo-credit-limit-form__footer button[type="submit"] {
    border: 1px solid var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-credit-reminder-modal__header {
    min-height: 64px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 40px 1fr 34px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}
.sbo-credit-reminder-modal__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e7f7f4;
    color: var(--sbo-teal);
    font-size: 18px;
}
.sbo-credit-reminder-modal__header h2 {
    margin: 0;
    color: #172234;
    font: 18px var(--sb-font-bold);
}
.sbo-credit-reminder-modal__header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}
.sbo-credit-reminder-body {
    padding: 16px 18px 20px;
    display: grid;
    gap: 14px;
}
.sbo-credit-reminder-copy {
    margin: 0;
    color: #788596;
    font-size: 13px;
    line-height: 1.45;
}
.sbo-credit-reminder-message { display: block; }
.sbo-credit-reminder-message textarea {
    width: 100%;
    min-height: 128px;
    padding: 14px;
    border: 2px solid var(--sbo-navy);
    border-radius: 14px;
    background: #fff;
    color: #172234;
    font: 14px/1.5 var(--sb-font-regular);
    resize: vertical;
}
.sbo-credit-reminder-message textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(21,53,98,.12);
}
.sbo-credit-reminder-actions {
    display: grid;
    gap: 10px;
}
.sbo-credit-reminder-actions form { margin: 0; }
.sbo-credit-reminder-whatsapp,
.sbo-credit-reminder-actions button {
    width: 100%;
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
}
.sbo-credit-reminder-whatsapp {
    border: 0;
    background: #1f9b55;
    color: #fff;
}
.sbo-credit-reminder-actions button {
    border: 1px solid #d8dee6;
    background: #fff;
    color: #172234;
}
.sbo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sbo-credit-detail-page { background: #f3f5f8; }
.sbo-credit-detail-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-credit-detail-header h1 {
    margin: 0 0 4px;
    font: normal 24px/1.15 var(--sb-font-bold);
}
.sbo-credit-detail-header p {
    margin: 0;
    color: var(--sbo-muted);
    font-size: 13px;
}

.sbo-credit-detail-card {
    padding: 18px;
    display: grid;
    gap: 16px;
    border: 1px solid #e2e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25,42,66,.04);
}
.sbo-credit-detail-profile {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
}
.sbo-credit-detail-avatar {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sbo-navy);
    color: #fff;
    font: 15px var(--sb-font-bold);
}
.sbo-credit-detail-profile strong { font: 18px var(--sb-font-bold); }
.sbo-credit-detail-profile p { margin: 4px 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-credit-detail-profile small { color: #8a95a5; font-size: 11px; }
.sbo-credit-detail-kra {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    background: #f3f5f8;
    color: #6c7585;
    font-size: 12px;
}
.sbo-credit-detail-kra button {
    border: 0;
    background: transparent;
    color: #8a95a5;
    cursor: pointer;
}
.sbo-credit-detail-kra button.sbo-credit-detail-kra-edit,
.sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:hover,
.sbo-credit-detail-kra button.sbo-credit-detail-kra-edit:focus {
    cursor: pointer !important;
    pointer-events: auto;
    opacity: 1;
}
.sbo-credit-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sbo-credit-detail-stats article {
    min-height: 74px;
    padding: 12px;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid #e2e7ec;
    border-radius: 12px;
    background: #fff;
}
.sbo-credit-detail-stats article.is-muted { background: #f3f5f8; }
.sbo-credit-detail-stats article.is-available {
    border-color: #9bd9c8;
    background: #ecfaf5;
}
.sbo-credit-detail-stats small {
    color: var(--sbo-muted);
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-credit-detail-stats strong {
    color: var(--sbo-text);
    font: 16px var(--sb-font-bold);
}
.sbo-credit-detail-stats article.is-available strong { color: #087d69; }
.sbo-credit-detail-usage > div:first-child {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    color: #6c7585;
    font-size: 12px;
}
.sbo-credit-detail-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-credit-detail-primary .is-reminder,
.sbo-credit-detail-primary .is-payment {
    min-height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-detail-primary .is-reminder { background: var(--sbo-teal); }
.sbo-credit-detail-primary .is-reminder:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
    transform: none;
}
.sbo-credit-detail-primary .is-payment { background: var(--sbo-navy); }
.sbo-credit-detail-suspend { margin: 0; }
.sbo-credit-detail-suspend button {
    width: 100%;
    min-height: 48px;
    border: 1px solid #efb8bd;
    border-radius: 12px;
    background: #fff;
    color: #c63d47;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-credit-detail-suspend.is-active button {
    border-color: #9bd9c8;
    color: #087d69;
}
.sbo-credit-detail-followup {
    min-height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f1ecff;
    color: #6d35e3;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
}

.sbo-credit-ledger-section { margin-top: 18px; }
.sbo-credit-ledger-section h2 {
    margin: 0 0 10px;
    color: #718096;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.sbo-credit-ledger-table {
    overflow: hidden;
    border: 1px solid #e2e7ec;
    border-radius: 14px;
    background: #fff;
}
.sbo-credit-ledger-table__head,
.sbo-credit-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 88px;
    gap: 12px;
    align-items: center;
}
.sbo-credit-ledger-table__head {
    min-height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid #e8ecf1;
    color: #9aa5b3;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-credit-ledger-table__head .is-amount,
.sbo-credit-ledger-table__head .is-balance {
    text-align: right;
}
.sbo-credit-ledger-row {
    min-height: 68px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef1f4;
}
.sbo-credit-ledger-row:last-child { border-bottom: 0; }
.sbo-credit-ledger-row .is-desc {
    min-width: 0;
}
.sbo-credit-ledger-row strong {
    display: block;
    overflow: hidden;
    color: var(--sbo-text);
    font: 14px var(--sb-font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sbo-credit-ledger-row small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--sbo-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sbo-credit-ledger-row .is-amount {
    font: 14px var(--sb-font-bold);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sbo-credit-ledger-row .is-amount.is-debit { color: #c63d47; }
.sbo-credit-ledger-row .is-amount.is-credit { color: #087d69; }
.sbo-credit-ledger-row .is-balance {
    color: var(--sbo-text);
    font: 14px var(--sb-font-semibold);
    font-style: normal;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sbo-credit-ledger-legend {
    margin-top: 10px;
    display: grid;
    gap: 4px;
    color: #8a95a5;
    font-size: 11px;
}
.sbo-credit-ledger-legend i {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 50%;
    font-style: normal;
    font-size: 10px;
}
.sbo-credit-ledger-legend i.is-debit { background: #ffe8ea; color: #c63d47; }
.sbo-credit-ledger-legend i.is-credit { background: #e8faf4; color: #087d69; }

@media (max-width: 767px) {
    .sbo-credit-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .sbo-credit-filters {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .sbo-credit-search,
    .sbo-credit-filters {
        width: 100%;
        flex: 1 1 auto;
    }

    .sbo-credit-customer-modal,
    .sbo-credit-limit-modal,
    .sbo-credit-payment-modal,
    .sbo-credit-reminder-modal {
        padding: 0;
        align-items: end;
    }
    .sbo-credit-customer-modal .sbo-add-staff-modal__dialog,
    .sbo-credit-limit-modal .sbo-add-staff-modal__dialog,
    .sbo-credit-payment-modal .sbo-add-staff-modal__dialog,
    .sbo-credit-reminder-modal .sbo-add-staff-modal__dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }

    .sbo-credit-summary strong { font-size: 16px; }
    .sbo-credit-detail-stats { grid-template-columns: 1fr; }
    .sbo-credit-detail-primary { grid-template-columns: 1fr; }
    .sbo-credit-ledger-table__head,
    .sbo-credit-ledger-row {
        grid-template-columns: minmax(0, 1fr) 78px 72px;
        gap: 8px;
    }
    .sbo-credit-ledger-table__head,
    .sbo-credit-ledger-row { padding-left: 12px; padding-right: 12px; }
    .sbo-credit-ledger-row .is-amount,
    .sbo-credit-ledger-row .is-balance { font-size: 13px; }
}

/* ?? Live Sales Book ??????????????????????????????????????????? */
.sbo-live-sales-page { background: #f3f5f8; }

.sbo-live-sales-page .sbo-live-sales-header {
    grid-template-columns: 38px 1fr auto;
}

.sbo-live-sales-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sbo-live-sales-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    color: #6c7585;
    background: #fff;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

.sbo-live-sales-icon:hover {
    background: #f0f3f7;
}

.sbo-live-sales-icon.is-active {
    border-color: var(--sbo-teal);
    color: var(--sbo-teal);
    background: #eefaf8;
}

.sbo-live-sales-icon[hidden] {
    display: none !important;
}

.sbo-live-sales-tabs {
    position: relative;
    margin-bottom: 14px;
}

.sbo-live-sales-tabs button {
    position: relative;
    gap: 8px;
    cursor: pointer;
    transition:
        color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.sbo-live-sales-tabs button:not(:disabled):active {
    transform: scale(.985);
}

.sbo-live-sales-tabs__icon {
    font-size: 14px;
    line-height: 1;
}

.sbo-live-sales-tabs__icon.is-lock {
    color: #d4a017;
    filter: grayscale(0);
}

.sbo-live-sales-tabs button:not(.is-active) .sbo-live-sales-tabs__icon:not(.is-lock) {
    color: #6c7585;
}

.sbo-live-sales-tabs button.is-active {
    color: var(--sbo-navy);
}

.sbo-live-sales-tabs__dot {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f3aa24;
    box-shadow: 0 0 0 2px #e9edf2;
}

.sbo-live-sales-panel {
    animation: sbo-live-panel-in .22s ease;
}

.sbo-live-sales-panel[hidden] {
    display: none !important;
}

@keyframes sbo-live-panel-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sbo-live-sales-summary {
    margin-bottom: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #e9edf2;
    -webkit-overflow-scrolling: touch;
}

.sbo-live-sales-summary span {
    flex: 0 0 auto;
    padding: 0 12px;
    color: #6c7585;
    font-size: 12px;
    white-space: nowrap;
    border-right: 1px solid #d5dbe3;
}

.sbo-live-sales-summary span:first-child { padding-left: 2px; }
.sbo-live-sales-summary span:last-child { border-right: 0; }

.sbo-live-sales-summary b {
    color: #18243a;
    font: 12px var(--sb-font-semibold);
}

.sbo-live-sales-summary em {
    color: #18243a;
    font-style: normal;
    font-family: var(--sb-font-semibold);
}

.sbo-live-sales-overdue {
    margin-bottom: 10px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #f2caca;
    border-radius: 12px;
    background: #fff1f1;
    color: #b54747;
}

.sbo-live-sales-overdue p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.sbo-live-sales-overdue a {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    color: #fff;
    background: #d64545;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
}

.sbo-live-sales-credits {
    margin-bottom: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 42, 67, .03);
}

.sbo-live-sales-credits__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--sbo-muted);
    font-size: 12px;
}

.sbo-live-sales-credits__item b {
    overflow: hidden;
    color: #18243a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 13px var(--sb-font-semibold);
}

.sbo-live-sales-credits__item i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-style: normal;
    font-size: 13px;
}

.sbo-live-sales-credits__item i.is-sms { color: #147b67; background: #e2f7f1; }
.sbo-live-sales-credits__item i.is-wa { color: #1f8a3b; background: #e8f8ec; }

.sbo-live-sales-credits__btn {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #9fd9cf;
    border-radius: 9px;
    color: #0f8f82;
    background: #f3fbf9;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}

.sbo-live-sales-toolbar { margin-bottom: 12px; }

.sbo-live-sales-page .sbo-live-sales-search {
    margin-top: 0;
}

.sbo-live-sales-page .sbo-live-sales-search.is-loading .sbo-staff-search__loader {
    display: block;
}

.sbo-live-sales-filters {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sbo-live-sales-filters a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e4e8ed;
    border-radius: 999px;
    color: #6c7585;
    background: #fff;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
}

.sbo-live-sales-filters a.is-active {
    border-color: var(--sbo-teal);
    color: #fff;
    background: var(--sbo-teal);
}

.sbo-live-sales-filters button,
.sbo-day-closures-staff button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e4e8ed;
    border-radius: 999px;
    color: #6c7585;
    background: #fff;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.sbo-live-sales-filters button.is-active,
.sbo-day-closures-staff button.is-active {
    border-color: var(--sbo-teal);
    color: #fff;
    background: var(--sbo-teal);
}

.sbo-live-sales-periods {
    margin-top: 12px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #e9edf2;
}

.sbo-live-sales-periods a,
.sbo-live-sales-periods button {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #6c7585;
    background: transparent;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-live-sales-periods a.is-active,
.sbo-live-sales-periods button.is-active {
    color: #fff;
    background: var(--sbo-navy);
    box-shadow: 0 1px 4px rgba(24, 42, 67, .08);
}

.sbo-live-sales-custom {
    margin-top: 10px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
}

.sbo-live-sales-custom[hidden] {
    display: none !important;
}

.sbo-live-sales-custom label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--sbo-muted);
    font-size: 11px;
}

.sbo-live-sales-custom input {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #e4e8ed;
    border-radius: 8px;
    font: 13px var(--sb-font-regular);
}

.sbo-live-sales-custom input[type="date"] {
    cursor: pointer;
}

.sbo-live-sales-custom input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

.sbo-live-sales-custom button {
    align-self: end;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--sbo-navy);
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-live-sales-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-live-sale {
    padding: 14px 14px 14px 12px;
    display: grid;
    grid-template-columns: 58px 40px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 10px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 42, 67, .03);
}

.sbo-live-sale.is-voided { opacity: .72; }
.sbo-live-sale.is-refunded { opacity: .88; }

.sbo-live-sale > time {
    color: #6d7b93;
    font-size: 12px;
    white-space: nowrap;
}

.sbo-live-sale__avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 11px var(--sb-font-bold);
}

.sbo-live-sale__avatar.is-teal { background: #119b91; }
.sbo-live-sale__avatar.is-navy { background: #153562; }
.sbo-live-sale__avatar.is-green { background: #2f9e6f; }

.sbo-live-sale__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sbo-live-sale__copy strong {
    overflow: hidden;
    color: #18243a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 15px var(--sb-font-semibold);
}

.sbo-live-sale__copy small {
    overflow: hidden;
    color: #6d7b93;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.sbo-live-sale__copy small.is-void {
    color: #c34e59;
    font-family: var(--sb-font-semibold);
}
.sbo-live-sale__copy small.is-refund {
    color: #c2410c;
    font-family: var(--sb-font-semibold);
}

.sbo-live-sale__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.sbo-live-sale__meta > strong {
    color: #18243a;
    font: 15px var(--sb-font-bold);
    white-space: nowrap;
}

.sbo-live-sale__meta > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.sbo-live-sale__pill {
    padding: 4px 8px;
    border-radius: 7px;
    font: 10px/1.2 var(--sb-font-semibold);
    font-style: normal;
    white-space: nowrap;
}

.sbo-live-sale__pill.is-cash { color: #a6730b; background: #fff2d3; }
.sbo-live-sale__pill.is-mpesa { color: #147b67; background: #e2f7f1; }
.sbo-live-sale__pill.is-card { color: #6b4fb8; background: #efe8ff; }
.sbo-live-sale__pill.is-credit { color: #9a3412; background: #ffedd5; }
.sbo-live-sale__pill.is-other { color: #5b6475; background: #eef1f5; }
.sbo-live-sale__pill.is-status-synced { color: #147b67; background: #e2f7f1; }
.sbo-live-sale__pill.is-status-edited { color: #a6730b; background: #fff2d3; }
.sbo-live-sale__pill.is-status-voided { color: #c34e59; background: #ffe0e3; }
.sbo-live-sale__pill.is-status-refunded { color: #c2410c; background: #ffedd5; }

.sbo-live-sale__chevron {
    color: #a5abb5;
    font-size: 18px;
    line-height: 1;
}

.sbo-live-sales-empty {
    padding: 42px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px dashed #d5dbe3;
    border-radius: 14px;
    background: #fff;
    color: var(--sbo-muted);
}

.sbo-live-sales-empty span { font-size: 28px; }

.sbo-live-sales-empty h2 {
    margin: 10px 0 4px;
    color: #18243a;
    font: normal 18px/1.2 var(--sb-font-bold);
}

.sbo-live-sales-empty p { margin: 0; font-size: 13px; }

.sbo-live-sales-count {
    margin: 16px auto 0;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    color: #6c7585;
    background: #e9edf2;
    font: 12px var(--sb-font-semibold);
}

.sbo-live-sales-fab {
    position: fixed;
    right: max(18px, calc(50% - 360px + 18px));
    bottom: 96px;
    z-index: 20;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--sbo-teal);
    box-shadow: 0 10px 24px rgba(17, 155, 145, .28);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.sbo-live-sales-fab[hidden] { display: none !important; }

/* ?? Day Closures tab ??????????????????????????????????????????? */
.sbo-day-closures-summary {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sbo-day-closures-summary article {
    padding: 12px 12px 11px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 42, 67, .03);
}

.sbo-day-closures-summary article.is-short {
    border-color: #f3c4c8;
    background: #fff6f7;
}

.sbo-day-closures-summary article.is-over {
    border-color: #bfe8dc;
    background: #f3fbf8;
}

.sbo-day-closures-summary small {
    display: block;
    color: #7a8496;
    font: 10px/1.2 var(--sb-font-semibold);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sbo-day-closures-summary strong {
    display: block;
    margin-top: 6px;
    color: #18243a;
    font: normal 16px/1.15 var(--sb-font-bold);
}

.sbo-day-closures-summary strong.is-ok { color: #147b67; }
.sbo-day-closures-summary strong.is-short { color: #c34e59; }
.sbo-day-closures-summary strong.is-over { color: #147b67; }

.sbo-day-closures-summary span {
    display: block;
    margin-top: 4px;
    color: #8a93a3;
    font-size: 11px;
}

.sbo-day-closures-toolbar {
    margin-bottom: 12px;
}

.sbo-day-closures-periods {
    margin-bottom: 10px;
    margin-top: 0;
}

.sbo-day-closures-staff {
    margin-top: 2px;
}

.sbo-day-closures-results {
    position: relative;
}

.sbo-day-closures-results__body {
    position: relative;
    min-height: 120px;
}

.sbo-day-closures-results.is-loading .sbo-day-closures-list,
.sbo-day-closures-results.is-loading [data-day-closures-summary],
.sbo-day-closures-results.is-loading [data-day-closures-count] {
    opacity: .45;
    pointer-events: none;
}

.sbo-day-closures-loader {
    position: absolute;
    inset: 24px 0 auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 10px 16px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(21, 53, 98, .12);
    color: var(--sbo-navy);
    font: 13px var(--sb-font-semibold);
}

.sbo-day-closures-loader[hidden] { display: none; }

.sbo-day-closures-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy);
    border-radius: 50%;
    animation: sbo-day-closures-spin .7s linear infinite;
}

@keyframes sbo-day-closures-spin {
    to { transform: rotate(360deg); }
}

.sbo-day-closures-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sbo-day-closures-list.is-animated {
    animation: sbo-live-panel-in .22s ease;
}

.sbo-day-close {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: stretch;
    padding: 12px 12px 12px 10px;
    border: 1px solid #e4e8ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 42, 67, .03);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sbo-day-close:hover,
.sbo-day-close:focus-visible {
    border-color: #c9d3e0;
    box-shadow: 0 6px 18px rgba(24, 42, 67, .08);
    outline: none;
}

.sbo-day-close:active {
    transform: scale(.995);
}

.sbo-day-close__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border-radius: 12px;
    background: #eef2f7;
    color: #18243a;
}

.sbo-day-close__date strong {
    font: normal 18px/1 var(--sb-font-bold);
}

.sbo-day-close__date span {
    margin-top: 3px;
    color: #6d7b93;
    font: 11px var(--sb-font-semibold);
    text-transform: uppercase;
}

.sbo-day-close__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbo-day-close__top,
.sbo-day-close__mid,
.sbo-day-close__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sbo-day-close__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.sbo-day-close__title > strong {
    color: #18243a;
    font: normal 14px/1.2 var(--sb-font-bold);
}

.sbo-day-close__status {
    padding: 3px 8px;
    border-radius: 999px;
    font: 10px/1.2 var(--sb-font-semibold);
    font-style: normal;
}

.sbo-day-close__status.is-draft {
    color: #a6730b;
    background: #fff2d3;
}

.sbo-day-close__status.is-final {
    color: #147b67;
    background: #e2f7f1;
}

.sbo-day-close__amount {
    color: #18243a;
    font: normal 15px/1.2 var(--sb-font-bold);
    white-space: nowrap;
}

.sbo-day-close__staff {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sbo-day-close__avatar,
.sbo-day-closure__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font: 10px/1 var(--sb-font-bold);
    background: var(--sbo-teal);
}

.sbo-day-close__avatar.is-navy,
.sbo-day-closure__avatar.is-navy { background: var(--sbo-navy); }
.sbo-day-close__avatar.is-green,
.sbo-day-closure__avatar.is-green { background: #2f9e7a; }
.sbo-day-close__avatar.is-teal,
.sbo-day-closure__avatar.is-teal { background: var(--sbo-teal); }

.sbo-day-close__staff b {
    display: block;
    color: #24324a;
    font: 12px/1.2 var(--sb-font-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbo-day-close__staff small {
    color: #8a93a3;
    font-size: 11px;
}

.sbo-day-close__tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font: 11px/1.2 var(--sb-font-semibold);
    white-space: nowrap;
}

.sbo-day-close__tag.is-short { color: #c34e59; }
.sbo-day-close__tag.is-over { color: #147b67; }

.sbo-day-close__foot {
    padding-top: 8px;
    border-top: 1px solid #eef1f5;
    color: #6d7b93;
    font-size: 11px;
}

.sbo-day-close__foot .is-short { color: #c34e59; font-family: var(--sb-font-semibold); }
.sbo-day-close__foot .is-over { color: #147b67; font-family: var(--sb-font-semibold); }
.sbo-day-close__foot .is-balanced { color: #24324a; font-family: var(--sb-font-semibold); }

.sbo-day-close__chevron {
    align-self: center;
    color: #a5abb5;
    font-size: 18px;
    line-height: 1;
}

/* ?? Day closure modal ?????????????????????????????????????????? */
.sbo-day-closure {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
}

.sbo-day-closure[hidden] { display: none !important; }

.sbo-day-closure__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 28, 45, .48);
    cursor: pointer;
}

.sbo-day-closure__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17, 28, 45, .22);
    overflow: hidden;
}

.sbo-day-closure__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}

.sbo-day-closure__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sbo-day-closure__eyebrow small {
    color: #6d7b93;
    font: 11px/1.2 var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sbo-day-closure__eyebrow em {
    font-style: normal;
    color: #24324a;
}

.sbo-day-closure__badge {
    margin-left: auto;
    margin-right: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 11px/1.2 var(--sb-font-semibold);
    font-style: normal;
}

.sbo-day-closure__badge.is-draft {
    color: #a6730b;
    background: #fff2d3;
}

.sbo-day-closure__badge.is-final {
    color: #147b67;
    background: #e2f7f1;
}

.sbo-day-closure__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #eef2f7;
    color: #24324a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.sbo-day-closure__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px 16px 18px;
}

.sbo-day-closure__intro h2 {
    margin: 0;
    color: #18243a;
    font: normal 24px/1.15 var(--sb-font-bold);
}

.sbo-day-closure__intro p {
    margin: 4px 0 0;
    color: #7a8496;
    font-size: 13px;
}

.sbo-day-closure__people {
    margin-top: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    background: #f5f7fa;
}

.sbo-day-closure__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sbo-day-closure__person small,
.sbo-day-closure__txns small {
    display: block;
    color: #8a93a3;
    font-size: 11px;
}

.sbo-day-closure__person strong,
.sbo-day-closure__txns strong {
    display: block;
    margin-top: 2px;
    color: #18243a;
    font: normal 14px/1.2 var(--sb-font-bold);
}

.sbo-day-closure__txns {
    text-align: right;
}

.sbo-day-closure__total {
    margin-top: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #153562 0%, #1c4478 100%);
    color: #fff;
}

.sbo-day-closure__total small {
    display: block;
    opacity: .78;
    font: 10px/1.2 var(--sb-font-semibold);
    letter-spacing: .05em;
}

.sbo-day-closure__total strong {
    display: block;
    margin-top: 4px;
    font: normal 22px/1.1 var(--sb-font-bold);
}

.sbo-day-closure__total span {
    font-size: 18px;
    opacity: .85;
}

.sbo-day-closure__payments {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbo-day-closure__payments article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    background: #fff;
}

.sbo-day-closure__payments i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-style: normal;
    font-size: 14px;
}

.sbo-day-closure__payments i.is-cash { background: #fff2d3; }
.sbo-day-closure__payments i.is-mpesa { background: #e2f7f1; }
.sbo-day-closure__payments i.is-card { background: #e8eefc; }

.sbo-day-closure__payments span {
    color: #24324a;
    font: 13px var(--sb-font-semibold);
}

.sbo-day-closure__payments strong {
    color: #18243a;
    font: normal 13px/1.2 var(--sb-font-bold);
    white-space: nowrap;
}

.sbo-day-closure__variance {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #f0d2d5;
    border-radius: 14px;
    background: #fff7f8;
}

.sbo-day-closure__variance.is-balanced,
.sbo-day-closure__variance.is-over {
    border-color: #c9e8df;
    background: #f4fbf8;
}

.sbo-day-closure__variance-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.sbo-day-closure__variance-row small {
    display: block;
    color: #8a93a3;
    font-size: 11px;
}

.sbo-day-closure__variance-row strong {
    display: block;
    margin-top: 3px;
    color: #18243a;
    font: normal 15px/1.2 var(--sb-font-bold);
}

.sbo-day-closure__variance-row > span {
    color: #9aa3b2;
    font-size: 16px;
}

.sbo-day-closure__variance-result {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e7c5c9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sbo-day-closure__variance.is-balanced .sbo-day-closure__variance-result,
.sbo-day-closure__variance.is-over .sbo-day-closure__variance-result {
    border-top-color: #c9e8df;
}

.sbo-day-closure__variance-result small {
    color: #8a93a3;
    font: 10px/1.2 var(--sb-font-semibold);
    letter-spacing: .04em;
}

.sbo-day-closure__variance-result strong {
    color: #c34e59;
    font: normal 15px/1.2 var(--sb-font-bold);
}

.sbo-day-closure__variance-result.is-balanced strong,
.sbo-day-closure__variance-result.is-over strong {
    color: #147b67;
}

.sbo-day-closure__variants {
    margin-top: 14px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

.sbo-day-closure__variants-head,
.sbo-day-closure__variant {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) .8fr .95fr;
    gap: 8px;
    align-items: center;
}

.sbo-day-closure__variants-head {
    padding: 10px 12px;
    background: #f5f7fa;
    color: #8a93a3;
    font: 10px/1.2 var(--sb-font-semibold);
    letter-spacing: .04em;
}

.sbo-day-closure__variant {
    padding: 11px 12px;
    border-top: 1px solid #eef1f5;
}

.sbo-day-closure__variant > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sbo-day-closure__variant i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9d0db;
}

.sbo-day-closure__variant.is-short i { background: #c34e59; }
.sbo-day-closure__variant.is-over i { background: #147b67; }

.sbo-day-closure__variant span {
    color: #24324a;
    font: 12px/1.3 var(--sb-font-semibold);
}

.sbo-day-closure__variant b,
.sbo-day-closure__variant strong {
    font: normal 12px/1.2 var(--sb-font-bold);
    text-align: right;
}

.sbo-day-closure__variant b { color: #6d7b93; }
.sbo-day-closure__variant strong { color: #18243a; }
.sbo-day-closure__variant.is-short strong { color: #c34e59; }
.sbo-day-closure__variant.is-over strong { color: #147b67; }

.sbo-day-closure__variant strong small {
    font: 10px var(--sb-font-semibold);
}

.sbo-day-closure__empty {
    margin: 0;
    padding: 16px;
    color: #8a93a3;
    font-size: 13px;
    text-align: center;
}

.sbo-day-closure__warning {
    margin-top: 14px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #fff6df;
    color: #8a6512;
}

.sbo-day-closure__warning[hidden] { display: none !important; }

.sbo-day-closure__warning p {
    margin: 0;
    font: 12px/1.35 var(--sb-font-semibold);
}

.sbo-day-closure__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef1f5;
    background: #fff;
}

.sbo-day-closure__footer button,
.sbo-day-closure__footer a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font: 14px/1 var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
}

.sbo-day-closure__footer .is-print {
    border: 1px solid #d7dde6;
    background: #fff;
    color: #24324a;
}

.sbo-day-closure__footer .is-print:disabled,
.sbo-day-closure.is-loading .sbo-day-closure__footer .is-print {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.sbo-day-closure__footer .is-finalize {
    border: 0;
    background: #1aa37a;
    color: #fff;
}

.sbo-day-closure__footer .is-finalize.is-busy {
    opacity: .7;
    pointer-events: none;
}

.sbo-day-closure__footer .is-export {
    border: 1px solid #d7dde6;
    background: #f5f7fa;
    color: #24324a;
}

.sbo-day-closure__footer .is-export[hidden],
.sbo-day-closure__footer .is-finalize[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .sbo-day-closures-summary {
        gap: 7px;
    }

    .sbo-day-closures-summary strong {
        font-size: 14px;
    }

    .sbo-day-close {
        grid-template-columns: 46px minmax(0, 1fr) 14px;
        gap: 8px;
        padding: 11px 10px;
    }

    .sbo-day-closure {
        padding: 12px;
        place-items: end center;
    }

    .sbo-day-closure__dialog {
        width: 100%;
        border-radius: 20px 20px 12px 12px;
        max-height: min(94vh, 860px);
    }
}

@media print {
    /* sales-book.css sets body * { visibility: hidden } for QR printing */
    .sbo-day-closure:not([hidden]),
    .sbo-day-closure:not([hidden]) * {
        visibility: visible !important;
    }

    body:has(.sbo-day-closure:not([hidden])) > *:not(.sbo-day-closure),
    .sbo-day-closure__backdrop,
    .sbo-day-closure__close,
    .sbo-day-closure__footer {
        display: none !important;
    }

    .sbo-day-closure:not([hidden]),
    .sbo-day-closure:not([hidden]) .sbo-day-closure__dialog,
    .sbo-day-closure:not([hidden]) .sbo-day-closure__body {
        position: static !important;
        inset: auto !important;
        max-height: none !important;
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .sbo-day-closure:not([hidden]) {
        display: block !important;
        padding: 12px !important;
        color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.sbo-live-sales-closures {
    margin-top: 8px;
    padding: 42px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e4e8ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 42, 67, .03);
}

.sbo-live-sales-closures__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff7e4;
    font-size: 24px;
}

.sbo-live-sales-closures h2 {
    margin: 14px 0 6px;
    color: #18243a;
    font: normal 20px/1.2 var(--sb-font-bold);
}

.sbo-live-sales-closures p {
    margin: 0 0 18px;
    max-width: 340px;
    color: #6d7b93;
    font-size: 14px;
    line-height: 1.55;
}

.sbo-live-sales-closures button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--sbo-navy);
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

@media (max-width: 767px) {
    .sbo-live-sales-page .sbo-live-sales-header {
        min-height: 72px;
        padding: 12px 11px;
        gap: 8px;
    }

    .sbo-live-sales-page .sbo-live-sales-header h1 { font-size: 22px; }
    .sbo-live-sales-page .sbo-live-sales-header p {
        display: block;
        font-size: 11px;
    }

    .sbo-live-sales-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .sbo-live-sales-page .sbo-staff-content {
        padding-left: 11px;
        padding-right: 11px;
    }

    .sbo-live-sale {
        grid-template-columns: 50px 34px minmax(0, 1fr) auto 12px;
        gap: 7px;
        padding: 12px 10px;
    }

    .sbo-live-sale > time { font-size: 11px; }

    .sbo-live-sale__copy strong,
    .sbo-live-sale__meta > strong { font-size: 13px; }

    .sbo-live-sales-credits { grid-template-columns: 1fr; }
    .sbo-live-sales-credits__btn { justify-self: start; }
    .sbo-live-sales-custom { grid-template-columns: 1fr; }

    .sbo-live-sales-fab {
        right: 16px;
        bottom: 92px;
    }

    .sbo-live-sales-tabs button {
        min-height: 40px;
        font-size: 12px;
        padding: 0 8px;
    }
}


/* -- Record Sale modal ----------------------------------------- */
.sbo-record-sale {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
}
.sbo-record-sale[hidden] { display: none !important; }
.sbo-record-sale__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(23, 32, 51, .48);
    cursor: pointer;
}
.sbo-record-sale__sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(90vh, 820px);
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(24, 42, 67, .22);
    overflow: hidden;
}
.sbo-record-sale__handle {
    display: none;
}
.sbo-record-sale__step {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.sbo-record-sale__step[hidden] { display: none !important; }
.sbo-record-sale__header {
    padding: 16px 18px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
}
.sbo-record-sale__header > div { min-width: 0; }
.sbo-record-sale__header h2 {
    margin: 0;
    color: #18243a;
    font: normal 22px/1.2 var(--sb-font-bold);
}
.sbo-record-sale__header p {
    margin: 3px 0 0;
    color: #6d7b93;
    font-size: 13px;
}
.sbo-record-sale__nav,
.sbo-record-sale__close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #5b6475;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}
.sbo-record-sale__nav:hover,
.sbo-record-sale__close:hover { background: #f0f3f7; }
.sbo-record-sale__cart-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--sbo-teal);
    cursor: pointer;
}
.sbo-record-sale__cart-btn[hidden] { display: none !important; }
.sbo-record-sale__cart-btn em {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: #153562;
    color: #fff;
    font: 10px var(--sb-font-bold);
    font-style: normal;
}
.sbo-record-sale__progress {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 0 18px 12px;
}
.sbo-record-sale__progress i {
    height: 3px;
    border-radius: 99px;
    background: #e4e8ed;
}
.sbo-record-sale__progress i.is-active { background: var(--sbo-teal); }
.sbo-record-sale__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 18px 18px;
}
.sbo-record-sale__search { margin-bottom: 12px; }
.sbo-record-sale__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
}
.sbo-record-sale__chips button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e4e8ed;
    border-radius: 999px;
    color: #6c7585;
    background: #fff;
    font: 12px var(--sb-font-regular);
    cursor: pointer;
    white-space: nowrap;
}
.sbo-record-sale__chips button.is-active {
    border-color: var(--sbo-teal);
    color: #fff;
    background: var(--sbo-teal);
    font-family: var(--sb-font-medium);
}
.sbo-record-sale__group { margin-bottom: 16px; }
.sbo-record-sale__group > h3 {
    margin: 0 0 8px 2px;
    color: #6d7b93;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .08em;
}
.sbo-record-sale__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-record-sale__card {
    position: relative;
    min-height: 92px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.sbo-record-sale__card.is-selected {
    border-color: var(--sbo-teal);
    box-shadow: 0 0 0 1px rgba(17, 155, 145, .15);
}
.sbo-record-sale__card > strong {
    color: #18243a;
    font: 14px var(--sb-font-medium);
}
.sbo-record-sale__price {
    margin-top: auto;
    color: var(--sbo-teal);
    font: 13px var(--sb-font-regular);
}
.sbo-record-sale__open {
    margin-top: auto;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 8px;
    color: #a6730b;
    background: #fff2d3;
    font: 11px var(--sb-font-regular);
}
.sbo-record-sale__qty-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--sbo-teal);
    font: 11px var(--sb-font-bold);
    font-style: normal;
}
.sbo-record-sale__card-actions {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 28px 1fr 28px auto;
    align-items: center;
    gap: 6px;
}
.sbo-record-sale__card-actions button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.sbo-record-sale__card-actions button[data-rs-qty-dec] { background: #f0f3f7; color: #5b6475; }
.sbo-record-sale__card-actions button[data-rs-qty-inc] { background: var(--sbo-teal); color: #fff; }
.sbo-record-sale__card-actions b,
.sbo-record-sale__card-actions .sbo-record-sale__qty-input { text-align: center; font: 13px var(--sb-font-bold); }
.sbo-record-sale__card-actions .sbo-record-sale__qty-input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    -moz-appearance: textfield;
}
.sbo-record-sale__card-actions .sbo-record-sale__qty-input::-webkit-outer-spin-button,
.sbo-record-sale__card-actions .sbo-record-sale__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sbo-record-sale__card-actions i { color: #18243a; font: 12px var(--sb-font-regular); font-style: normal; }
.sbo-record-sale__loading,
.sbo-record-sale__empty {
    padding: 36px 16px;
    text-align: center;
    color: #6d7b93;
}
.sbo-record-sale__empty h3 {
    margin: 0 0 6px;
    color: #18243a;
    font: normal 16px/1.2 var(--sb-font-bold);
}
.sbo-record-sale__empty p { margin: 0; font-size: 13px; }
.sbo-record-sale__footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e4e8ed;
    background: #fff;
}
.sbo-record-sale__primary {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--sbo-teal);
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__primary:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.sbo-record-sale__primary strong,
.sbo-record-sale__primary em { font-style: normal; font-family: var(--sb-font-semibold); }
.sbo-record-sale__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    color: #18243a;
    font: 13px var(--sb-font-semibold);
}
.sbo-record-sale__field small { color: #6d7b93; font-family: var(--sb-font-regular); }
.sbo-record-sale__field i { color: #c34e59; font-style: normal; }
.sbo-record-sale__field textarea,
.sbo-record-sale__field > input[type="text"] {
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #f7f8fa;
    font: 14px var(--sb-font-regular);
    resize: vertical;
}
.sbo-record-sale__money {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
}
.sbo-record-sale__money.is-large {
    min-height: 58px;
    border-color: #153562;
}
.sbo-record-sale__money em {
    color: #6d7b93;
    font: 18px var(--sb-font-semibold);
    font-style: normal;
}
.sbo-record-sale__money input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #18243a;
    font: 18px var(--sb-font-bold);
    outline: 0;
}
.sbo-record-sale__add-more {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 1.5px dashed #cfd6df;
    border-radius: 12px;
    color: var(--sbo-teal);
    background: #f7fbfa;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__review-card {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
}
.sbo-record-sale__review-card > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}
.sbo-record-sale__review-card > header strong {
    color: #18243a;
    font: 16px var(--sb-font-semibold);
}
.sbo-record-sale__review-card > header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #c34e59;
    background: #ffe8ea;
    cursor: pointer;
}
.sbo-record-sale__review-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d7b93;
    font-size: 12px;
}
.sbo-record-sale__review-controls {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
.sbo-record-sale__stepper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #e4e8ed;
    border-radius: 999px;
    background: #f7f8fa;
}
.sbo-record-sale__stepper button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #18243a;
    font-size: 16px;
    cursor: pointer;
}
.sbo-record-sale__stepper b,
.sbo-record-sale__stepper .sbo-record-sale__qty-input { min-width: 18px; text-align: center; }
.sbo-record-sale__stepper .sbo-record-sale__qty-input {
    width: 52px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    -moz-appearance: textfield;
}
.sbo-record-sale__stepper .sbo-record-sale__qty-input::-webkit-outer-spin-button,
.sbo-record-sale__stepper .sbo-record-sale__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sbo-record-sale__review-totals {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-record-sale__amount-card {
    position: relative;
    padding: 18px 16px;
    border-radius: 14px;
    background: #eef1f5;
}
.sbo-record-sale__amount-card small {
    color: #6d7b93;
    font-size: 12px;
}
.sbo-record-sale__amount-card strong {
    display: block;
    margin-top: 4px;
    color: #18243a;
    font: normal 28px/1.1 var(--sb-font-bold);
}
.sbo-record-sale__amount-card > span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dff3ef;
    font-size: 18px;
}
.sbo-record-sale__section { margin-top: 18px; }
.sbo-record-sale__section h3 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d7b93;
    font: 12px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-record-sale__section h3 small {
    margin-left: auto;
    color: #a0a7b3;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sb-font-regular);
}
.sbo-record-sale__cashier {
    width: 100%;
    min-height: 54px;
    padding: 0 14px;
    border: 1.5px dashed #cfd6df;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.sbo-record-sale__cashier.is-missing {
    border-color: #f0b35a;
    border-style: solid;
    background: #fff8ee;
}
.sbo-record-sale__section.is-missing-cashier h3 small.is-required {
    color: #c58916;
}
.sbo-record-sale__cashier-empty,
.sbo-record-sale__cashier-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6d7b93;
    font: 14px var(--sb-font-regular);
}
.sbo-record-sale__cashier-empty[hidden],
.sbo-record-sale__cashier-picked[hidden],
.sbo-record-sale__customer-actions[hidden],
.sbo-record-sale__customer-selected[hidden],
.sbo-record-sale__hint[hidden] {
    display: none !important;
}
.sbo-record-sale__cashier-picked i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--sbo-teal);
    font: 11px var(--sb-font-bold);
    font-style: normal;
}
.sbo-record-sale__cashier-picked strong {
    flex: 1;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-record-sale__cashier b { margin-left: auto; color: #a5abb5; font-family: var(--sb-font-regular); }
.sbo-record-sale__hint {
    margin: 8px 0 0;
    color: #c58916;
    font-size: 12px;
}
.sbo-record-sale__hint.is-center { text-align: center; margin-bottom: 8px; }
.sbo-record-sale__customer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-record-sale__customer-actions button {
    min-height: 46px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    color: #5b6475;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__customer-actions button:disabled {
    cursor: not-allowed;
    opacity: .7;
}
.sbo-record-sale__customer-actions button.is-teal {
    border-color: #9fd9cf;
    color: #0f8f82;
    background: #f3fbf9;
}
.sbo-record-sale__customer-actions button.is-teal:disabled {
    opacity: .55;
}
.sbo-record-sale__customer-selected {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.sbo-record-sale__customer-picked-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
    text-align: left;
}
.sbo-record-sale__customer-picked-copy strong {
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-record-sale__customer-picked-copy small {
    color: #6d7b93;
    font: 11px var(--sb-font-regular);
}
.sbo-record-sale__customer-clear {
    width: 42px;
    height: 42px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    color: #6d7b93;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.sbo-record-sale__customer-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 560px);
}
.sbo-record-sale__customer-search {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--sbo-navy);
    border-radius: 12px;
    background: #fff;
}
.sbo-record-sale__customer-search > span {
    color: #728198;
    font-size: 17px;
}
.sbo-record-sale__customer-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #18243a;
    font: 14px var(--sb-font-regular);
}
.sbo-record-sale__customer-search i {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    display: none;
    border: 2px solid #d6dde5;
    border-top-color: var(--sbo-teal);
    border-radius: 50%;
    animation: sbo-button-spin .7s linear infinite;
}
.sbo-record-sale__customer-search.is-loading i { display: block; }
.sbo-record-sale__customer-list {
    flex: 1;
    min-height: 180px;
    max-height: 320px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}
.sbo-record-sale__customer-empty {
    margin: 24px 0;
    color: #7c8898;
    text-align: center;
    font: 13px var(--sb-font-regular);
}
.sbo-record-sale__customer-row {
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.sbo-record-sale__customer-row:hover,
.sbo-record-sale__customer-row.is-active {
    background: #f3f5f8;
    border-color: #d8dee7;
}
.sbo-record-sale__customer-row i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #24426d;
    background: #e5eaf0;
    font: 11px var(--sb-font-semibold);
    font-style: normal;
}
.sbo-record-sale__customer-row > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.sbo-record-sale__customer-row strong {
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-record-sale__customer-row small {
    color: #718096;
    font-size: 11px;
}
.sbo-record-sale__customer-row em {
    display: grid;
    justify-items: end;
    gap: 2px;
    font-style: normal;
}
.sbo-record-sale__customer-row em small {
    color: #9aa3b2;
    font: 10px var(--sb-font-regular);
}
.sbo-record-sale__customer-row em b {
    color: var(--sbo-teal);
    font: 13px var(--sb-font-bold);
}
.sbo-record-sale__customer-status {
    min-height: 16px;
    margin: 8px 0 0;
    color: #7c8898;
    font-size: 11px;
}
.sbo-record-sale__customer-dialog-footer {
    margin-top: 14px;
    display: grid !important;
    grid-template-columns: 1fr !important;
}
.sbo-record-sale__pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-record-sale__pay-grid button {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    color: #5b6475;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__pay-grid button b { font-size: 18px; font-weight: normal; }
.sbo-record-sale__pay-grid button.is-active {
    border-color: var(--sbo-teal);
    color: #fff;
    background: var(--sbo-teal);
}
.sbo-record-sale__pay-grid button:disabled { opacity: .45; cursor: not-allowed; }

.sbo-record-sale__dialog {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 18px;
}
.sbo-record-sale__dialog[hidden] { display: none !important; }
.sbo-record-sale__dialog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(23, 32, 51, .42);
    cursor: pointer;
}
.sbo-record-sale__dialog > section {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: 90vh;
    overflow: auto;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 42, 67, .22);
}
.sbo-record-sale__dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.sbo-record-sale__dialog header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #18243a;
    font: normal 18px/1.2 var(--sb-font-bold);
}
.sbo-record-sale__dialog header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5b6475;
    font-size: 22px;
    cursor: pointer;
}
.sbo-record-sale__amount-summary {
    padding: 16px;
    border-radius: 12px;
    background: #eef1f5;
    text-align: center;
    margin-bottom: 14px;
}
.sbo-record-sale__amount-summary strong {
    display: block;
    color: #18243a;
    font: 20px var(--sb-font-semibold);
}
.sbo-record-sale__amount-summary small {
    color: #6d7b93;
    font-size: 14px;
}
.sbo-record-sale__quick { margin-top: 14px; }
.sbo-record-sale__quick > span {
    display: block;
    margin-bottom: 8px;
    color: #222;
     font: 18px var(--sb-font-semibold);
}
.sbo-record-sale__quick > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sbo-record-sale__quick button {
    min-height: 40px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #f7f8fa;
    color: #18243a;
    font: 16px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__dialog footer {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-record-sale__dialog footer button {
    min-height: 46px;
    border: 1px solid #d5dbe3;
    border-radius: 12px;
    background: #fff;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__dialog footer button.is-primary {
    border: 0;
    color: #fff;
    background: var(--sbo-teal);
}
.sbo-record-sale__dialog footer button.is-navy {
    border: 0;
    color: #fff;
    background: var(--sbo-navy);
}
.sbo-record-sale__cashier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sbo-record-sale__cashier-list button {
    min-height: 54px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.sbo-record-sale__cashier-list button.is-active {
    border-color: var(--sbo-teal);
    background: #f3fbf9;
}
.sbo-record-sale__cashier-list i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--sbo-navy);
    font: 11px var(--sb-font-bold);
    font-style: normal;
}
.sbo-record-sale__cashier-list strong {
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-record-sale__confirm-summary {
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: #eef1f5;
}
.sbo-record-sale__confirm-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e0e5ec;
    font-size: 14px;
}
.sbo-record-sale__confirm-summary > div:last-child { border-bottom: 0; }
.sbo-record-sale__confirm-summary dt { color: #6d7b93; }
.sbo-record-sale__confirm-summary dd { margin: 0; color: #18243a; font-family: var(--sb-font-semibold); }
.sbo-record-sale__confirm-summary dd[data-rs-confirm-cashier] { color: var(--sbo-teal); }
.sbo-record-sale__confirm-summary .is-total dt,
.sbo-record-sale__confirm-summary .is-total dd {
    color: #18243a;
    font: 16px var(--sb-font-bold);
}
.sbo-record-sale__success-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5b6475;
    font-size: 22px;
    cursor: pointer;
}
.sbo-record-sale__success-icon {
    width: 64px;
    height: 64px;
    margin: 12px auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #13b98c;
    box-shadow: 0 0 0 10px #e7f8f1;
    font: 28px var(--sb-font-bold);
}
.sbo-record-sale__dialog > section h3#rs-success-title,
.sbo-record-sale__dialog > section > h3 {
    text-align: center;
    justify-content: center;
}
.sbo-record-sale__success-total {
    margin: 6px 0 0;
    text-align: center;
    color: #18243a;
    font: 16px var(--sb-font-semibold);
}
.sbo-record-sale__success-staff {
    margin: 6px 0 0;
    text-align: center;
    color: #6d7b93;
    font-size: 13px;
}
.sbo-record-sale__receipt {
    margin-top: 18px;
    text-align: center;
}
.sbo-record-sale__receipt > span {
    display: block;
    margin-bottom: 8px;
    color: #6d7b93;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .08em;
}
.sbo-record-sale__receipt > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sbo-record-sale__receipt button {
    min-height: 42px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #fff;
    color: #18243a;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__receipt button:disabled {
    color: #5b6475;
    cursor: not-allowed;
}
.sbo-record-sale__receipt button.is-soon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.1;
    opacity: 0.9;
}
.sbo-record-sale__receipt button.is-soon em {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    color: #7c3aed;
    background: #ede9fe;
    font: 10px var(--sb-font-semibold);
    font-style: normal;
}
.sbo-record-sale__receipt-hint {
    margin: 10px 0 0;
    text-align: center;
    color: #b45309;
    font: 12px var(--sb-font-semibold);
}
.sbo-record-sale__receipt-status {
    margin: 10px 0 0;
    text-align: center;
    color: #2563eb;
    font: 12px var(--sb-font-semibold);
}
.sbo-record-sale__receipt-status.is-error {
    color: #dc2626;
}
.sbo-record-sale__receipt-status.is-success {
    color: #15803d;
}
.sbo-record-sale__success-actions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-record-sale__success-actions button {
    min-height: 46px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-record-sale__success-actions button.is-navy {
    border: 0;
    color: #fff;
    background: var(--sbo-navy);
}

@media (max-width: 767px) {
    .sbo-record-sale {
        padding: 12px;
    }
    .sbo-record-sale__sheet {
        width: 100%;
        max-height: min(92vh, 820px);
        border-radius: 16px;
    }
    .sbo-record-sale__header { padding-left: 12px; padding-right: 12px; }
    .sbo-record-sale__header h2 { font-size: 20px; }
    .sbo-record-sale__body,
    .sbo-record-sale__footer,
    .sbo-record-sale__progress { padding-left: 12px; padding-right: 12px; }
    .sbo-record-sale__card > strong { font-size: 13px; }
}

/* -- Sale detail modal ----------------------------------------- */
.sbo-live-sale[data-open-sale-detail] {
    cursor: pointer;
}
.sbo-live-sale[data-open-sale-detail]:hover {
    border-color: #c9d3df;
    box-shadow: 0 2px 8px rgba(24, 42, 67, .06);
}

.sbo-sale-detail {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 18px;
}
.sbo-sale-detail[hidden] { display: none !important; }
.sbo-sale-detail__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(23, 32, 51, .48);
    cursor: pointer;
}
.sbo-sale-detail__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    max-height: min(92vh, 760px);
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(24, 42, 67, .22);
}
.sbo-sale-detail__hero {
    position: relative;
    padding: 18px 18px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    background: #e8f7f3;
    border-radius: 18px 18px 0 0;
}
.sbo-sale-detail__hero small {
    display: block;
    color: #5f8f86;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .08em;
}
.sbo-sale-detail__hero strong {
    display: block;
    margin-top: 4px;
    color: #18243a;
    font: normal 28px/1.1 var(--sb-font-bold);
}
.sbo-sale-detail__hero p {
    margin: 6px 0 0;
    color: #6d7b93;
    font-size: 13px;
}
.sbo-sale-detail__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-right: 28px;
    padding-top: 4px;
}
.sbo-sale-detail__badges em {
    padding: 4px 9px;
    border-radius: 999px;
    font: 11px/1.2 var(--sb-font-semibold);
    font-style: normal;
    white-space: nowrap;
}
.sbo-sale-detail__badges .is-status,
.sbo-sale-detail__badges .is-synced { color: #147b67; background: #dff7f1; }
.sbo-sale-detail__badges .is-edited { color: #a6730b; background: #fff2d3; }
.sbo-sale-detail__badges .is-voided { color: #c34e59; background: #ffe0e3; }
.sbo-sale-detail__badges .is-refunded { color: #c2410c; background: #ffedd5; }
.sbo-sale-detail__badges .is-pay.is-cash { color: #a6730b; background: #fff2d3; }
.sbo-sale-detail__badges .is-pay.is-mpesa { color: #147b67; background: #dff7f1; }
.sbo-sale-detail__badges .is-pay.is-card { color: #6b4fb8; background: #efe8ff; }
.sbo-sale-detail__badges .is-pay.is-credit { color: #9a3412; background: #ffedd5; }
.sbo-sale-detail__badges .is-pay.is-other { color: #5b6475; background: #eef1f5; }
.sbo-sale-detail__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #5b6475;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}
.sbo-sale-detail__close:hover { background: rgba(255,255,255,.55); }
.sbo-sale-detail__body { padding: 14px 16px 16px; }
.sbo-sale-detail__people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-sale-detail__people article {
    padding: 12px;
    border-radius: 12px;
    background: #f3f5f8;
}
.sbo-sale-detail__people span {
    display: block;
    margin-bottom: 4px;
    color: #6d7b93;
    font-size: 14px;
}
.sbo-sale-detail__people small {
    display: block;
    color: #8a94a6;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .06em;
}
.sbo-sale-detail__people strong {
    display: block;
    margin-top: 3px;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-sale-detail__items-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
}
.sbo-sale-detail__items-card > h3,
.sbo-sale-detail__receipt > h3 {
    margin: 0 0 10px;
    color: #8a94a6;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .08em;
}
.sbo-sale-detail__item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.sbo-sale-detail__item i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2f6f9e;
    background: #e4f0fa;
    font: 11px var(--sb-font-semibold);
    font-style: normal;
}
.sbo-sale-detail__item span {
    color: #18243a;
    font-size: 14px;
}
.sbo-sale-detail__item span small {
    color: #6d7b93;
    font-size: 12px;
}
.sbo-sale-detail__item span small.is-refunded {
    color: #c2410c;
}
.sbo-sale-detail__item strong {
    color: #18243a;
    font: 14px var(--sb-font-semibold);
    white-space: nowrap;
}
.sbo-sale-detail__totals {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e4e8ed;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sbo-sale-detail__totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #6d7b93;
    font-size: 13px;
}
.sbo-sale-detail__totals > div.is-total {
    color: #18243a;
    font-family: var(--sb-font-semibold);
}
.sbo-sale-detail__totals b {
    font-family: inherit;
    font-weight: normal;
}
.sbo-sale-detail__payrow {
    margin-top: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 12px;
    background: #f3f5f8;
}
.sbo-sale-detail__payrow span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #18243a;
    font: 14px var(--sb-font-semibold);
}
.sbo-sale-detail__payrow small {
    color: #6d7b93;
    font-size: 13px;
}
.sbo-sale-detail__void-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #c34e59;
    background: #fff1f2;
    font-size: 13px;
}
.sbo-sale-detail__refund-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: #c2410c;
    background: #fff7ed;
    font-size: 13px;
}
.sbo-sale-detail__note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
}
.sbo-sale-detail__note > h3 {
    margin: 0 0 8px;
    color: #8a94a6;
    font: 11px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sbo-sale-detail__note > p {
    margin: 0;
    color: #18243a;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.sbo-sale-detail__receipt { margin-top: 16px; }
.sbo-sale-detail__receipt > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sbo-sale-detail__receipt button {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    color: #2563EB;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-sale-detail__receipt button:hover {
    border-color: #bfd0f7;
    background: #f5f8ff;
}
.sbo-sale-detail__receipt button:disabled {
    color: #5b6475;
    cursor: not-allowed;
    opacity: .55;
}
.sbo-sale-detail__receipt button span { font-size: 16px; color: inherit; }
.sbo-sale-detail__receipt-status {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
}
.sbo-sale-detail__receipt-status.is-success {
    color: #176b55;
    background: #e8faf3;
}
.sbo-sale-detail__receipt-status.is-error {
    color: #b42318;
    background: #fef3f2;
}
.sbo-receipt-send {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
}
.sbo-receipt-send[hidden] { display: none !important; }
.sbo-receipt-send__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(8, 13, 20, .55);
    cursor: pointer;
}
.sbo-receipt-send__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(24, 42, 67, .28);
    overflow: hidden;
}
.sbo-receipt-send__dialog > header {
    min-height: 64px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e7ebf0;
}
.sbo-receipt-send__dialog > header h2 {
    margin: 0;
    font: 18px var(--sb-font-bold);
    color: #18243a;
}
.sbo-receipt-send__dialog > header button {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5d6675;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.sbo-receipt-send__dialog > header button:hover { background: #eef1f4; }
.sbo-receipt-send__dialog form {
    padding: 18px 16px 16px;
    display: grid;
    gap: 10px;
}
.sbo-receipt-send__dialog label {
    color: #4b5567;
    font: 13px var(--sb-font-semibold);
}
.sbo-receipt-send__dialog input {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d7dde7;
    border-radius: 12px;
    font: 15px var(--sb-font-regular);
    color: #18243a;
}
.sbo-receipt-send__dialog input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.sbo-receipt-send__hint {
    margin: 0;
    color: #6d7b93;
    font-size: 12px;
    line-height: 1.45;
}
.sbo-receipt-send__status {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
}
.sbo-receipt-send__status.is-success {
    color: #176b55;
    background: #e8faf3;
}
.sbo-receipt-send__status.is-error {
    color: #b42318;
    background: #fef3f2;
}
.sbo-receipt-send__actions {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
}
.sbo-receipt-send__actions[hidden],
.sbo-receipt-send [data-sd-refund-nav][hidden],
.sbo-receipt-send [data-sd-refund-step][hidden],
.sbo-receipt-send label[hidden],
.sbo-receipt-send textarea[hidden],
.sbo-receipt-send [data-sd-refund-note-label][hidden],
.sbo-receipt-send [data-sd-refund-status][hidden],
.sbo-receipt-send .sbo-refund-field[hidden],
.sbo-receipt-send .sbo-refund-panel[hidden] {
    display: none !important;
}
.sbo-receipt-send__actions button {
    min-height: 48px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-receipt-send__actions .is-cancel {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #18243a;
}
.sbo-receipt-send__actions .is-send {
    border: 0;
    background: #2563EB;
    color: #fff;
}
.sbo-receipt-send__actions .is-send:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.sbo-sale-detail__actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-sale-detail__actions button {
    min-height: 46px;
    border-radius: 12px;
    background: #fff;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-sale-detail__actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.sbo-sale-detail__actions .is-void {
    border: 1.5px solid #2563EB;
    color: #2563EB;
}
.sbo-sale-detail__actions .is-refund {
    border: 1.5px solid #2563EB;
    color: #2563EB;
}
.sbo-void-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.sbo-void-reasons__chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    background: #fff;
    color: #334155;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-void-reasons__chip.is-active {
    border-color: #2563EB;
    background: #eff4ff;
    color: #2563EB;
}
.sbo-receipt-send__dialog.is-refund-wizard {
    width: min(100%, 440px);
    max-height: min(92vh, 760px);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header {
    min-height: auto;
    padding: 18px 18px 8px;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: start;
    gap: 10px;
    border-bottom: 0;
    flex: 0 0 auto;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__back,
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__close {
    width: 40px;
    height: 40px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__back {
    background: #e8efff;
    color: #3056d3;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__close {
    background: #edf0f4;
    color: #6b7280;
    font-size: inherit;
    line-height: 1;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__back:hover { background: #dce6ff; }
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__close:hover { background: #e5e9ef; }
.sbo-refund-header__copy {
    min-width: 0;
    padding-top: 2px;
}
.sbo-receipt-send__dialog.is-refund-wizard > header.sbo-refund-header .sbo-refund-header__copy h2 {
    margin: 0;
    color: #172234;
    font: 22px/1.2 var(--sb-font-bold);
}
.sbo-refund-header__copy p {
    margin: 4px 0 0;
    color: #7b8797;
    font: 13px/1.35 var(--sb-font-regular);
}
.sbo-refund-form {
    padding: 8px 18px 18px !important;
    gap: 12px !important;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.sbo-refund-panel {
    display: grid;
    gap: 14px;
}
.sbo-refund-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.sbo-refund-steps span {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid #e5e9ef;
    color: #8b95a7;
    background: #fff;
    font: 13px var(--sb-font-semibold);
}
.sbo-refund-steps span em {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef1f5;
    color: #8b95a7;
    font: 12px var(--sb-font-bold);
    font-style: normal;
}
.sbo-refund-steps span b {
    font: 13px var(--sb-font-semibold);
}
.sbo-refund-steps span.is-active {
    border-color: #3056d3;
    color: #3056d3;
    background: #fff;
    box-shadow: none;
}
.sbo-refund-steps span.is-active em {
    background: #3056d3;
    color: #fff;
}
.sbo-refund-hint {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #7b8797;
    font: 12px/1.45 var(--sb-font-regular);
}
.sbo-refund-hint i {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8efff;
    color: #3056d3;
}
.sbo-refund-field {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #172234;
    font: 14px var(--sb-font-semibold);
}
.sbo-refund-field.is-optional {
    color: #5d6675;
    font: 13px var(--sb-font-semibold);
}
.sbo-refund-field.is-optional small {
    color: #8b95a7;
    font: 13px var(--sb-font-regular);
}
.sbo-refund-field__control {
    position: relative;
    display: block;
}
.sbo-refund-field__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8efff;
    color: #3056d3;
    pointer-events: none;
}
.sbo-refund-field__control--select select {
    width: 100%;
    min-height: 52px;
    padding: 0 40px 0 50px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #fff;
    color: #172234;
    font: 15px var(--sb-font-regular);
    appearance: none;
    -webkit-appearance: none;
}
.sbo-refund-field__control--select select:focus {
    outline: none;
    border-color: #3056d3;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(48, 86, 211, .12);
}
.sbo-refund-field__chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    color: #94A3B8;
    pointer-events: none;
}
.sbo-refund-note-wrap {
    position: relative;
    display: block;
}
.sbo-refund-field textarea,
.sbo-refund-note-wrap textarea {
    width: 100%;
    min-height: 110px;
    margin: 0;
    padding: 14px 14px 28px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    resize: vertical;
    background: #fff;
    font: 14px var(--sb-font-regular);
    color: #1f2937;
}
.sbo-refund-field textarea:focus,
.sbo-refund-note-wrap textarea:focus {
    outline: none;
    border-color: #3056d3;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(48, 86, 211, .12);
}
.sbo-refund-note-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #9aa3b2;
    font: 11px var(--sb-font-regular);
    font-style: normal;
    pointer-events: none;
}
.sbo-refund-note-count b {
    font: 11px var(--sb-font-semibold);
}
.sbo-refund-pay-section {
    display: grid;
    gap: 6px;
}
.sbo-refund-pay-section > h3 {
    margin: 0;
    color: #172234;
    font: 13px var(--sb-font-semibold);
}
.sbo-refund-pay-source {
    margin: 0;
    color: #7b8797;
    font: 11px var(--sb-font-regular);
}
.sbo-refund-pay-source strong {
    color: #3056d3;
    font: 11px var(--sb-font-bold);
}
.sbo-refund-pay-grid {
    margin: 0;
    gap: 6px !important;
}
.sbo-refund-form .sbo-refund-pay-grid.sbo-record-sale__pay-grid button {
    min-height: 42px !important;
    height: 42px;
    gap: 6px !important;
    padding: 0 8px !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    border-radius: 10px !important;
    font: 12px var(--sb-font-semibold) !important;
}
.sbo-refund-form .sbo-refund-pay-grid.sbo-record-sale__pay-grid button b {
    font-size: 14px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.sbo-refund-form .sbo-refund-pay-grid.sbo-record-sale__pay-grid button b svg {
    width: 15px !important;
    height: 15px !important;
}
.sbo-refund-form .sbo-refund-pay-grid.sbo-record-sale__pay-grid button.is-active {
    border-color: #3056d3 !important;
    background: #3056d3 !important;
    color: #fff !important;
}
.sbo-refund-panel[data-sd-refund-step="2"] {
    gap: 10px;
}
.sbo-refund-panel[data-sd-refund-step="2"] .sbo-refund-field textarea,
.sbo-refund-panel[data-sd-refund-step="2"] .sbo-refund-note-wrap textarea {
    min-height: 72px;
}
.sbo-refund-items {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    padding-right: 2px;
}
.sbo-refund-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    background: #fff;
}
.sbo-refund-item.is-disabled {
    opacity: .55;
    background: #f8fafc;
}
.sbo-refund-item__main {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.sbo-refund-item__main strong {
    color: #172234;
    font: 15px var(--sb-font-bold);
}
.sbo-refund-item__meta {
    color: #7b8797;
    font: 12px var(--sb-font-regular);
}
.sbo-refund-item__meta b {
    color: #16a34a;
    font: 12px var(--sb-font-bold);
}
.sbo-refund-item__price {
    color: #7b8797;
    font: 12px var(--sb-font-regular);
}
.sbo-refund-item__qty {
    display: grid;
    gap: 6px;
    justify-items: end;
}
.sbo-refund-item__qty > span {
    color: #7b8797;
    font: 11px var(--sb-font-regular);
}
.sbo-refund-stepper {
    display: inline-grid;
    grid-template-columns: 34px 36px 34px;
    align-items: stretch;
    min-height: 40px;
    border: 1.5px solid #3056d3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.sbo-refund-stepper button {
    border: 0;
    background: #fff;
    color: #3056d3;
    font: 18px/1 var(--sb-font-bold);
    cursor: pointer;
}
.sbo-refund-stepper button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.sbo-refund-stepper button:hover:not(:disabled) {
    background: #f0f4ff;
}
.sbo-refund-stepper strong {
    display: grid;
    place-items: center;
    border-left: 1px solid #c9d6ff;
    border-right: 1px solid #c9d6ff;
    color: #172234;
    font: 15px var(--sb-font-bold);
}
.sbo-refund-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding: 14px 14px;
    border: 0;
    border-radius: 14px;
    background: #f0f4ff;
    color: #5d6675;
    font: 13px var(--sb-font-regular);
}
.sbo-refund-total[data-step="2"] {
    background: transparent;
    padding: 12px 2px 2px;
    border-top: 1px solid #e7ebf0;
    border-radius: 0;
}
.sbo-refund-total__left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sbo-refund-total__left i {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #dce6ff;
    color: #3056d3;
}
.sbo-refund-total[data-step="2"] .sbo-refund-total__left i {
    display: none;
}
.sbo-refund-total strong {
    color: #3056d3;
    font: 20px var(--sb-font-bold);
    white-space: nowrap;
}
.sbo-refund-total strong em {
    font-style: normal;
}
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions {
    margin-top: 2px;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
}
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions button {
    min-height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 14px var(--sb-font-semibold);
}
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions .is-cancel {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #172234;
}
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions .is-send,
.sbo-receipt-send__actions .is-refund-confirm,
.sbo-receipt-send__actions .is-refund-next {
    border: 0;
    background: #3056d3;
    color: #fff;
}
.sbo-receipt-send__actions .is-refund-confirm:hover:not(:disabled),
.sbo-receipt-send__actions .is-refund-next:hover:not(:disabled),
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions .is-send:hover:not(:disabled) {
    background: #2748b5;
}
.sbo-receipt-send__dialog.is-refund-wizard .sbo-receipt-send__actions .is-send:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.sbo-receipt-send__dialog.is-refund-wizard select {
    font-family: inherit;
}
.sbo-receipt-send__dialog.is-refund-wizard textarea {
    margin: 0;
}
.sbo-receipt-send__dialog textarea {
    width: 100%;
    min-height: 84px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #d7deea;
    border-radius: 10px;
    resize: vertical;
    font: 14px var(--sb-font-regular);
    color: #1f2937;
}
.sbo-receipt-send__dialog textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.sbo-receipt-send__actions .is-void-confirm {
    background: #c34e59;
    border-color: #c34e59;
}
.sbo-sale-detail__loading {
    padding: 18px 8px;
    text-align: center;
    color: #6d7b93;
    font-size: 13px;
}

/* Approval Requests */
.sbo-approvals-page { min-height: 100vh; background: var(--sbo-bg); font-family: var(--sb-font-regular); }
.sbo-approvals-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-approvals-header > a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f1f4f8;
    color: var(--sbo-text);
    text-decoration: none;
    font: 28px/1 var(--sb-font-regular);
}
.sbo-approvals-header > a:hover { background: #e7ecf2; }
.sbo-approvals-header h1 {
    margin: 0 0 4px;
    color: var(--sbo-text);
    font: normal 27px/1.15 var(--sb-font-bold);
}
.sbo-approvals-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-approvals-header__badge {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f3aa24;
    color: #fff;
    font: 12px var(--sb-font-semibold);
}
.sbo-approvals-content { padding: 18px 22px 110px; }

.sbo-approvals-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sbo-approvals-summary article {
    min-height: 92px;
    padding: 16px 14px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(25, 42, 66, .04);
}
.sbo-approvals-summary strong {
    margin: 0 0 6px;
    font: 30px/1 var(--sb-font-bold);
}
.sbo-approvals-summary small {
    color: inherit;
    font-size: 12px;
    opacity: .85;
}
.sbo-approvals-summary .is-pending {
    border-color: #f3e0a8;
    background: #fff8e5;
    color: #b27a0c;
}
.sbo-approvals-summary .is-approved {
    border-color: #bfe8d9;
    background: #e9f9f2;
    color: #0d8a6d;
}
.sbo-approvals-summary .is-rejected {
    border-color: #f2c8cb;
    background: #fff1f2;
    color: #c44551;
}

.sbo-approvals-tabs {
    margin: 16px 0 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sbo-approvals-tabs::-webkit-scrollbar { display: none; }
.sbo-approvals-tabs a,
.sbo-approvals-tabs button {
    min-height: 38px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 20px;
    background: #e9edf2;
    color: #6c7585;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-approvals-tabs a span,
.sbo-approvals-tabs button span {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(23, 35, 51, .08);
    font-size: 9px;
}
.sbo-approvals-tabs a.is-active,
.sbo-approvals-tabs button.is-active {
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-approvals-tabs a.is-active span,
.sbo-approvals-tabs button.is-active span { background: rgba(255, 255, 255, .15); }

.sbo-approvals-toolbar {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.sbo-approvals-toolbar > small {
    color: var(--sbo-muted);
    font-size: 12px;
}
.sbo-approvals-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sbo-approvals-select {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dde3ea;
    border-radius: 20px;
    background: #fff;
    color: #5d687a;
    font: 12px var(--sb-font-semibold);
}
.sbo-approvals-select span { color: #8a94a5; font-size: 13px; }
.sbo-approvals-select select {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
    cursor: pointer;
}
.sbo-approvals-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sbo-approvals-custom-range[hidden] { display: none; }
.sbo-approvals-custom-range input[type="date"] {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #fff;
    color: var(--sbo-text);
    font: 12px var(--sb-font-regular);
}
.sbo-approvals-custom-range button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--sbo-navy);
    color: #fff;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-approvals-list { display: grid; gap: 12px; }
.sbo-approvals-results { position: relative; min-height: 120px; }
.sbo-approvals-results.is-loading .sbo-approvals-list {
    opacity: .45;
    pointer-events: none;
}
.sbo-approvals-loader {
    position: absolute;
    inset: 24px 0 auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 10px 16px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(21, 53, 98, .12);
    color: var(--sbo-navy);
    font: 13px var(--sb-font-semibold);
}
.sbo-approvals-loader[hidden] { display: none; }
.sbo-approvals-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy);
    border-radius: 50%;
    animation: sbo-approvals-spin .7s linear infinite;
}
@keyframes sbo-approvals-spin {
    to { transform: rotate(360deg); }
}
.sbo-approval-card {
    padding: 18px;
    border: 1px solid #e2e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25, 42, 66, .04);
}
.sbo-approval-card__top {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: start;
}
.sbo-approval-card__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
}
.sbo-approval-card__icon.is-void { background: #fff4d8; color: #c48912; }
.sbo-approval-card__icon.is-discount { background: #e8f1ff; color: #3b6fd8; }
.sbo-approval-card__icon.is-refund { background: #e8f8f1; color: #0d8a6d; }
.sbo-approval-card__icon.is-delete { background: #ffe9eb; color: #c44551; }
.sbo-approval-card__copy { min-width: 0; }
.sbo-approval-card__copy h2 {
    margin: 2px 0 8px;
    color: #101b2a;
    font: 16px/1.3 var(--sb-font-bold);
}
.sbo-approval-card__copy p {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 11px;
}
.sbo-approval-card__copy p span {
    padding: 3px 8px;
    border-radius: 8px;
    background: #f2f4f7;
    color: #667385;
    font-family: var(--sb-font-semibold);
}
.sbo-approval-card__copy p em {
    padding: 3px 8px;
    border-radius: 8px;
    font-style: normal;
    font-family: var(--sb-font-semibold);
}
.sbo-approval-card__copy p em.is-void { background: #fff4d8; color: #b27a0c; }
.sbo-approval-card__copy p em.is-discount { background: #e8f1ff; color: #3b6fd8; }
.sbo-approval-card__copy p em.is-refund { background: #e8f8f1; color: #0d8a6d; }
.sbo-approval-card__copy p em.is-delete { background: #ffe9eb; color: #c44551; }

.sbo-approval-status {
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font: 11px var(--sb-font-semibold);
}
.sbo-approval-status.is-pending {
    background: #fff4d8;
    color: #b27a0c;
}
.sbo-approval-status.is-approved {
    background: #e9f9f2;
    color: #0d8a6d;
}
.sbo-approval-status.is-rejected {
    background: #fff1f2;
    color: #c44551;
}

.sbo-approval-card__meta {
    margin-top: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    color: var(--sbo-muted);
    font-size: 12px;
}
.sbo-approval-card__meta strong {
    margin-left: auto;
    color: var(--sbo-text);
    font: 13px var(--sb-font-bold);
}

.sbo-approval-card__reason {
    margin-top: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 12px;
    background: #f5f7fa;
}
.sbo-approval-card__reason span {
    color: #c48912;
    font-size: 14px;
    line-height: 1.3;
}
.sbo-approval-card__reason p {
    margin: 0;
    color: #4d586b;
    font-size: 13px;
    line-height: 1.4;
}

.sbo-approval-card__actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-approval-card__actions form { margin: 0; }
.sbo-approval-card__actions button {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-approval-card__actions .is-reject {
    border: 1.5px solid #efb4b8;
    background: #fff;
    color: #c34e59;
}
.sbo-approval-card__actions .is-approve {
    border: 0;
    background: #0d8a6d;
    color: #fff;
}
.sbo-approval-card__actions button:disabled { opacity: .65; cursor: wait; }

.sbo-approvals-empty {
    padding: 48px 20px;
    text-align: center;
    border: 1px dashed #d7dde5;
    border-radius: 18px;
    background: #fff;
}
.sbo-approvals-empty span {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: #fff4d8;
    color: #c48912;
    font-size: 24px;
}
.sbo-approvals-empty h2 {
    margin: 0 0 6px;
    color: var(--sbo-text);
    font: 18px var(--sb-font-bold);
}
.sbo-approvals-empty p {
    margin: 0;
    color: var(--sbo-muted);
    font-size: 13px;
}

@media (max-width: 767px) {
    .sbo-approvals-header { min-height: 72px; padding: 12px 11px; gap: 8px; }
    .sbo-approvals-header > a { width: 34px; height: 34px; }
    .sbo-approvals-header h1 { font-size: 22px; }
    .sbo-approvals-header p { font-size: 12px; }
    .sbo-approvals-content { padding: 14px 11px 110px; }
    .sbo-approvals-summary { gap: 7px; }
    .sbo-approvals-summary article { min-height: 82px; padding: 12px 8px; }
    .sbo-approvals-summary strong { font-size: 24px; }
    .sbo-approval-card { padding: 14px 12px; }
    .sbo-approval-card__top { gap: 10px; }
    .sbo-approval-card__icon { width: 40px; height: 40px; }
    .sbo-approval-status { padding: 5px 8px; font-size: 10px; }
    .sbo-approval-card__copy h2 { font-size: 14px; }
    .sbo-approval-card__meta strong { margin-left: 0; width: 100%; }
    .sbo-approval-card__actions button { min-height: 44px; font-size: 13px; }
}

@media (max-width: 767px) {
    .sbo-sale-detail { padding: 12px; }
    .sbo-sale-detail__dialog { width: 100%; }
    .sbo-sale-detail__hero strong { font-size: 24px; }
}

/* Who Is Selling */
.sbo-selling-page { min-height: 100vh; background: var(--sbo-bg); }
.sbo-selling-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-selling-header > a:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f1f4f8;
    color: var(--sbo-text);
    text-decoration: none;
    font: 28px/1 var(--sb-font-regular);
}
.sbo-selling-header h1 { margin: 0 0 4px; color: var(--sbo-text); font: 27px/1.15 var(--sb-font-bold); }
.sbo-selling-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-selling-header__action {
    padding: 9px 13px;
    border: 1px solid #b8dcd7;
    border-radius: 999px;
    color: #087b70;
    text-decoration: none;
    font: 11px var(--sb-font-semibold);
}
.sbo-selling-content { padding: 18px 22px 110px; }
.sbo-selling-leader {
    min-height: 128px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #edda89;
    border-radius: 18px;
    background: linear-gradient(110deg, #fff4bd 0%, #fffbea 100%);
    box-shadow: 0 4px 14px rgba(140, 104, 13, .07);
}
.sbo-selling-medal { font-size: 46px; line-height: 1; }
.sbo-selling-leader small { color: #8f721d; font: 10px var(--sb-font-semibold); letter-spacing: .08em; }
.sbo-selling-leader h2 { margin: 4px 0; color: #161d2b; font: 20px var(--sb-font-bold); }
.sbo-selling-leader strong { display: block; color: #b77908; font: 26px var(--sb-font-bold); }
.sbo-selling-leader p { margin: 5px 0 0; color: #7d7358; font-size: 11px; }
.sbo-selling-leader__share { text-align: center; }
.sbo-selling-leader__share b { display: block; color: #a9750c; font: 18px var(--sb-font-bold); }
.sbo-selling-leader__share small { display: block; margin-top: 4px; font-size: 9px; letter-spacing: 0; }
.sbo-selling-leader--empty { grid-template-columns: 58px 1fr; }

.sbo-selling-metrics { margin: 14px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-selling-metrics article {
    min-height: 116px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(25, 42, 66, .04);
}
.sbo-selling-metrics small { color: var(--sbo-muted); font-size: 11px; }
.sbo-selling-metrics strong { display: block; margin: 8px 0 3px; color: #218d82; font: 23px var(--sb-font-bold); }
.sbo-selling-metrics strong.is-count { color: var(--sbo-text); font-size: 32px; }
.sbo-selling-metrics p { margin: 0 0 10px; color: var(--sbo-muted); font-size: 10px; }
.sbo-selling-metrics > article > i,
.sbo-selling-progress > i {
    height: 7px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf0;
}
.sbo-selling-metrics > article > i span,
.sbo-selling-progress > i span {
    width: var(--progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #35ad9e, #15998e);
}
.sbo-selling-active-faces { min-height: 24px; display: flex; justify-content: center; align-items: center; gap: 5px; }
.sbo-selling-active-faces span,
.sbo-selling-active-faces b {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid #a4ddd2;
    border-radius: 50%;
    background: #dff8f2;
    color: #087b6c;
    font: 8px var(--sb-font-semibold);
}
.sbo-selling-active-faces em { color: var(--sbo-muted); font: normal 10px var(--sb-font-regular); }
.sbo-selling-section-title { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sbo-selling-section-title h2 { margin: 0; color: #626e80; font: 11px var(--sb-font-semibold); letter-spacing: .12em; }
.sbo-selling-section-title small { color: var(--sbo-muted); font-size: 10px; }
.sbo-selling-list { display: grid; gap: 10px; }
.sbo-selling-card {
    min-height: 116px;
    padding: 15px 16px;
    display: grid;
    grid-template-columns: 34px 42px 1fr auto;
    align-items: center;
    gap: 11px;
    border: 1px solid #e2e7ec;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(25, 42, 66, .04);
}
.sbo-selling-card.is-leader { border-color: #e9d56d; box-shadow: 0 3px 14px rgba(171, 129, 18, .08); }
.sbo-selling-card.is-off-shift { opacity: .62; }
.sbo-selling-card__rank { text-align: center; color: #768093; font: 12px var(--sb-font-semibold); }
.sbo-selling-card__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sbo-navy);
    color: #fff;
    font: 11px var(--sb-font-bold);
}
.sbo-selling-card:nth-child(3n+2) .sbo-selling-card__avatar { background: #299d93; }
.sbo-selling-card:nth-child(3n) .sbo-selling-card__avatar { background: #1caa75; }
.sbo-selling-card__main { min-width: 0; }
.sbo-selling-card__name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sbo-selling-card__name h3 { margin: 0; color: var(--sbo-text); font: 14px var(--sb-font-bold); }
.sbo-selling-card__name span { padding: 3px 6px; border-radius: 7px; background: #fff3c7; color: #a7720c; font: 8px var(--sb-font-semibold); }
.sbo-selling-card__name span.is-off { background: #eef1f4; color: #8d96a5; }
.sbo-selling-card__main > strong { display: block; margin: 5px 0 2px; color: #258f84; font: 20px var(--sb-font-bold); }
.sbo-selling-card__main > small { color: var(--sbo-muted); font-size: 10px; }
.sbo-selling-progress { margin-top: 8px; }
.sbo-selling-progress p { margin: 0 0 4px; display: flex; justify-content: space-between; color: var(--sbo-muted); font-size: 9px; }
.sbo-selling-progress p b { color: #148a80; font-family: var(--sb-font-semibold); }
.sbo-selling-progress > i { height: 6px; }
.sbo-selling-card__actions { display: grid; gap: 7px; }
.sbo-selling-card__actions a,
.sbo-selling-card__actions button,
.sbo-selling-card__actions span {
    min-width: 84px;
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    background: #f0f2f5;
    color: #516077;
    text-align: center;
    text-decoration: none;
    font: 9px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-selling-card__actions [data-open-appreciate] { color: var(--sbo-navy); background: #edf1f6; }
.sbo-selling-card__actions span.is-disabled { opacity: .5; cursor: not-allowed; }
.sbo-selling-review,
.sbo-selling-manage {
    margin-top: 14px;
    min-height: 58px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e0e5eb;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.sbo-selling-review { border-left: 4px solid #e2aa22; }
.sbo-selling-review > span { color: #bd8110; }
.sbo-selling-review p,
.sbo-selling-manage p { margin: 0; display: grid; gap: 3px; }
.sbo-selling-review p strong,
.sbo-selling-manage p strong { color: var(--sbo-text); font-size: 11px; }
.sbo-selling-review p small,
.sbo-selling-manage p small { color: var(--sbo-muted); font-size: 9px; }
.sbo-selling-review > b { padding: 7px 10px; border: 1px solid #edd695; border-radius: 9px; color: #9b6c11; font-size: 9px; }
.sbo-selling-manage { border-style: dashed; }
.sbo-selling-manage > b { color: var(--sbo-muted); font-size: 20px; }
.sbo-selling-empty { padding: 40px 20px; text-align: center; border: 1px dashed #d8dee6; border-radius: 17px; background: #fff; }
.sbo-selling-empty > span { color: #299d93; font-size: 28px; }
.sbo-selling-empty h2 { margin: 10px 0 5px; font: 17px var(--sb-font-bold); }
.sbo-selling-empty p { margin: 0; color: var(--sbo-muted); font-size: 11px; }

@media (max-width: 767px) {
    .sbo-selling-header { min-height: 72px; padding: 11px; grid-template-columns: 34px 1fr auto; gap: 8px; }
    .sbo-selling-header > a:first-child { width: 34px; height: 34px; }
    .sbo-selling-header h1 { font-size: 20px; }
    .sbo-selling-header p { font-size: 10px; }
    .sbo-selling-header__action { padding: 7px 9px; font-size: 9px; }
    .sbo-selling-content { padding: 14px 11px 110px; }
    .sbo-selling-leader { min-height: 112px; padding: 15px; grid-template-columns: 46px 1fr auto; gap: 10px; }
    .sbo-selling-medal { font-size: 36px; }
    .sbo-selling-leader h2 { font-size: 17px; }
    .sbo-selling-leader strong { font-size: 22px; }
    .sbo-selling-leader--empty { grid-template-columns: 46px 1fr; }
    .sbo-selling-metrics article { min-height: 108px; padding: 13px 8px; }
    .sbo-selling-metrics strong { font-size: 19px; }
    .sbo-selling-card { padding: 13px 10px; grid-template-columns: 25px 38px 1fr; gap: 8px; }
    .sbo-selling-card__avatar { width: 38px; height: 38px; }
    .sbo-selling-card__actions { grid-column: 2 / -1; grid-template-columns: 1fr 1fr; }
    .sbo-selling-card__actions a,
    .sbo-selling-card__actions button,
    .sbo-selling-card__actions span { min-width: 0; }
}

/* Who Is Selling ? modals */
.sbo-selling-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sbo-selling-modal[hidden] { display: none !important; }
.sbo-selling-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(23, 32, 51, .48);
    cursor: pointer;
}
.sbo-selling-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    max-height: min(88vh, 720px);
    margin: auto;
    overflow: auto;
    padding: 14px 22px 24px;
    border-radius: 20px;
    background: #f6f8fa;
    box-shadow: 0 22px 50px rgba(30, 50, 80, .18);
    animation: sbo-selling-modal-in .24s ease;
}
@keyframes sbo-selling-modal-in {
    from { transform: translateY(12px) scale(.98); opacity: .6; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.sbo-selling-modal__handle {
    width: 42px;
    height: 5px;
    margin: 0 auto 18px;
    display: none;
    border-radius: 999px;
    background: #d5dbe3;
}
.sbo-selling-modal__emoji { text-align: center; font-size: 40px; line-height: 1; }
.sbo-selling-modal__dialog h2 { margin: 14px 0 0; text-align: center; color: var(--sbo-text); font: 22px var(--sb-font-bold); }
.sbo-selling-modal__sub { margin: 8px auto 0; max-width: 420px; text-align: center; color: var(--sbo-muted); font-size: 14px; line-height: 1.45; }
.sbo-selling-modal__message {
    margin: 20px 0 4px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--sbo-line);
    border-radius: 14px;
    background: #eef1f5;
    color: #2c3648;
    font: 15px/1.5 var(--sb-font-semibold);
}
.sbo-selling-modal__actions {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sbo-selling-modal__actions button {
    min-height: 54px;
    border-radius: 14px;
    font: 15px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-selling-modal__actions .is-cancel {
    border: 1px solid var(--sbo-line);
    background: #fff;
    color: var(--sbo-text);
}
.sbo-selling-modal__actions .is-send {
    border: 0;
    background: var(--sbo-navy);
    color: #fff;
}
.sbo-selling-modal__actions .is-send:disabled { opacity: .7; cursor: wait; }
.sbo-selling-modal__note { display: block; margin-top: 14px; text-align: center; color: var(--sbo-muted); font-size: 12px; }

.sbo-selling-modal--activity .sbo-selling-modal__dialog { background: #fff; }
.sbo-activity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.sbo-activity-head h2 { margin: 0; text-align: left; color: var(--sbo-text); font: 21px var(--sb-font-bold); }
.sbo-activity-head p { margin: 4px 0 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-activity-pulse { color: #1aa08f; font-size: 22px; }
.sbo-activity-body { margin-top: 20px; min-height: 90px; }
.sbo-activity-loading { padding: 24px 0; text-align: center; color: var(--sbo-muted); font-size: 13px; }
.sbo-activity-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.sbo-activity-timeline li {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: start;
    gap: 14px;
    position: relative;
}
.sbo-activity-timeline li::before {
    content: '';
    position: absolute;
    left: 72px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1aa08f;
}
.sbo-activity-timeline li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 76px;
    top: 18px;
    bottom: -18px;
    width: 1px;
    background: #d9e0e6;
}
.sbo-activity-time { color: var(--sbo-muted); font: 11px var(--sb-font-semibold); padding-top: 2px; }
.sbo-activity-copy { padding-left: 20px; color: var(--sbo-text); font: 15px/1.4 var(--sb-font-semibold); }
.sbo-activity-empty { padding: 26px 0; text-align: center; }
.sbo-activity-empty span { color: #1aa08f; font-size: 26px; }
.sbo-activity-empty p { margin: 8px 0 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-activity-all {
    margin-top: 22px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--sbo-line);
    border-radius: 14px;
    background: #fff;
    color: var(--sbo-text);
    text-decoration: none;
    font: 15px var(--sb-font-bold);
}
.sbo-activity-all b { color: var(--sbo-muted); font-weight: normal; }

@media (max-width: 767px) {
    .sbo-selling-modal__dialog { padding: 12px 15px 20px; }
    .sbo-selling-modal__dialog h2 { font-size: 20px; }
    .sbo-selling-modal__message { padding: 16px; font-size: 14px; }
    .sbo-activity-timeline li { grid-template-columns: 58px 1fr; gap: 10px; }
    .sbo-activity-timeline li::before { left: 64px; }
    .sbo-activity-timeline li:not(:last-child)::after { left: 68px; }
}

/* Commissions */
.sbo-commissions-page { min-height: 100vh; background: var(--sbo-bg); }
.sbo-commissions-header {
    min-height: 88px;
    padding: 15px 22px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sbo-line);
    background: #fff;
}
.sbo-commissions-header > a { color: var(--sbo-navy); text-decoration: none; font: 14px var(--sb-font-semibold); }
.sbo-commissions-header h1 { margin: 0 0 4px; color: var(--sbo-text); font: 26px/1.15 var(--sb-font-bold); }
.sbo-commissions-header p { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-commissions-header__actions { display: flex; align-items: center; gap: 8px; }
.sbo-commissions-period select,
.sbo-commissions-add {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-commissions-period select { border: 1px solid #dde3ea; background: #fff; color: var(--sbo-text); }
.sbo-commissions-add { border: 0; background: var(--sbo-navy); color: #fff; }
.sbo-commissions-add:disabled { opacity: .5; cursor: not-allowed; }
.sbo-commissions-content { padding: 18px 22px 110px; }
.sbo-commissions-custom { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.sbo-commissions-custom[hidden] { display: none; }
.sbo-commissions-custom input,
.sbo-commissions-custom button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #dde3ea;
    background: #fff;
    font: 12px var(--sb-font-semibold);
}
.sbo-commissions-custom button { border: 0; background: var(--sbo-navy); color: #fff; cursor: pointer; }
.sbo-commissions-tabs {
    margin-bottom: 14px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 14px;
    background: #e9edf2;
}
.sbo-commissions-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #667385;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-commissions-tabs button.is-active {
    background: #fff;
    color: var(--sbo-text);
    box-shadow: 0 2px 8px rgba(25, 42, 66, .08);
}
.sbo-commissions-results { position: relative; min-height: 180px; }
.sbo-commissions-results.is-loading [data-commissions-panel] { opacity: .4; pointer-events: none; }
.sbo-commissions-loader {
    position: absolute;
    inset: 28px 0 auto;
    z-index: 2;
    width: max-content;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(21, 53, 98, .12);
    color: var(--sbo-navy);
    font: 13px var(--sb-font-semibold);
}
.sbo-commissions-loader[hidden],
.commissions-loader[hidden] { display: none !important; }
.sbo-commissions-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy);
    border-radius: 50%;
    animation: sbo-approvals-spin .7s linear infinite;
}

/* Plans & Payments */
.sbo-plans-page { background: #f3f5f8; color: var(--sbo-text); font-family: var(--sb-font-regular); }
.sbo-plans-header {
    min-height: 0;
    padding: 18px 16px 16px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
    background: #36C;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
}
.sbo-plans-header > a:first-child,
.sbo-plans-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font: 28px/1 var(--sb-font-regular);
}
.sbo-plans-header > a:first-child:hover,
.sbo-plans-close:hover { background: rgba(255, 255, 255, 0.14); }
.sbo-plans-header h1 {
    margin: 0 0 4px;
    color: #ffffff;
    font: normal 22px/1.15 var(--sb-font-bold);
    letter-spacing: -0.02em;
}
.sbo-plans-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.35;
}
.sbo-plans-content { padding: 16px 16px 110px; display: grid; gap: 18px; }
.sbo-plans-section { display: grid; gap: 10px; }
.sbo-plans-section__head h2 {
    margin: 0;
    color: #222;
    font: 22px var(--sb-font-semibold);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
}
@media (max-width: 767px) {
    .sbo-plans-section__head h2 { font-size: 18px; }
}
.sbo-plans-card {
    padding: 4px 14px;
    border: 1px solid #e2e7ec;
    border-radius: 16px;
    background: #fff;
}
.sbo-plans-empty { margin: 14px 0; color: var(--sbo-muted); font-size: 13px; }
.sbo-plans-overdue {
    padding: 14px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px 12px;
    align-items: start;
    border: 1px solid #f3c4ca;
    border-radius: 16px;
    background: #fff1f3;
    color: #b43b48;
}
.sbo-plans-overdue__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ffd9de;
    font-size: 18px;
}
.sbo-plans-overdue > div { grid-column: 2; }
.sbo-plans-overdue strong { display: block; margin-bottom: 4px; font: 14px/1.3 var(--sb-font-bold); }
.sbo-plans-overdue p { margin: 0; font-size: 12px; line-height: 1.45; color: #9d4650; }
.sbo-plans-overdue__cta {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #ef6b78;
    color: #fff;
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}
.sbo-plans-shop-row,
.sbo-plans-invoice-row,
.sbo-plans-feature {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
}
.sbo-plans-addon-row,
.sbo-plans-upgrade-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
}
.sbo-plans-addon-row > div,
.sbo-plans-upgrade-row > div {
    min-width: 0;
}
.sbo-plans-feature { grid-template-columns: 28px 1fr; min-height: 0; padding: 11px 0; }
.sbo-plans-shop-row:last-child,
.sbo-plans-addon-row:last-child,
.sbo-plans-invoice-row:last-child,
.sbo-plans-upgrade-row:last-child,
.sbo-plans-feature:last-child { border-bottom: 0; }
.sbo-plans-shop-row__icon,
.sbo-plans-feature > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eaf0f8;
    color: var(--sbo-navy);
    font-size: 16px;
}
.sbo-plans-feature > span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e4f7ef;
    color: #1a9b6c;
    font: 13px/1 var(--sb-font-bold);
}
.sbo-plans-shop-row strong,
.sbo-plans-addon-row strong,
.sbo-plans-invoice-row strong,
.sbo-plans-upgrade-row strong,
.sbo-plans-feature p {
    display: block;
    margin: 0;
    font: 14px/1.25 var(--sb-font-semibold);
}
.sbo-plans-shop-row small,
.sbo-plans-addon-row small,
.sbo-plans-invoice-row small,
.sbo-plans-upgrade-row small {
    display: block;
    margin-top: 3px;
    color: var(--sbo-muted);
    font-size: 12px;
    line-height: 1.35;
}
.sbo-plans-status {
    padding: 4px 9px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}
.sbo-plans-status.is-active { background: #e5f8ef; color: #1a9b6c; }
.sbo-plans-status.is-inactive { background: #eef1f5; color: #7a8699; }
.sbo-plans-status.is-warning { background: #ffe8ea; color: #c24754; }
.sbo-plans-shops__footer {
    margin: 2px 0 10px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px dashed #e5e9ef;
    color: var(--sbo-muted);
    font-size: 12px;
}
.sbo-plans-shops__footer a {
    color: var(--sbo-teal);
    text-decoration: none;
    font: 12px var(--sb-font-semibold);
}
.sbo-plans-current {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(160deg, #153562 0%, #1d4577 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(21, 53, 98, .18);
}
.sbo-plans-current__top { display: grid; gap: 10px; }
.sbo-plans-current__top > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sbo-plans-current h3 { margin: 0; font: 28px/1.1 var(--sb-font-bold); }
.sbo-plans-current .sbo-plans-status.is-active { background: rgba(76, 217, 150, .18); color: #8dffc2; }
.sbo-plans-current .sbo-plans-status.is-warning { background: rgba(255, 180, 180, .2); color: #ffd0d4; }
.sbo-plans-current__price { margin: 0; font: 18px/1.2 var(--sb-font-bold); }
.sbo-plans-current__price small { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font: 12px var(--sb-font-regular); }
.sbo-plans-current__meta { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.4; }
.sbo-plans-current__actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-plans-btn {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    font: 13px var(--sb-font-semibold);
}
.sbo-plans-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.sbo-plans-btn--soft { background: #2f527f; color: #fff; }
.sbo-plans-btn--navy { background: var(--sbo-navy); color: #fff; }
.sbo-plans-btn--teal { background: var(--sbo-teal); color: #fff; }
.sbo-plans-btn--amber { background: #f0b429; color: #5c4308; }
.sbo-plans-btn--violet { background: #7b68c7; color: #fff; }
.sbo-plans-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.sbo-plans-staff-pack {
    padding: 16px;
    display: grid;
    gap: 14px;
    background: #eef4fb;
    border-color: #d7e4f4;
}
.sbo-plans-staff-pack__copy { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; }
.sbo-plans-staff-pack__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--sbo-navy);
    font-size: 18px;
}
.sbo-plans-staff-pack strong { display: block; margin-bottom: 4px; font: 15px var(--sb-font-bold); }
.sbo-plans-staff-pack p { margin: 0; color: #5d6b82; font-size: 12px; line-height: 1.45; }
.sbo-plans-credits { padding: 12px; display: grid; gap: 10px; }
.sbo-plans-credit {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
}
.sbo-plans-credit > div { display: flex; align-items: center; gap: 10px; }
.sbo-plans-credit > div > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.7);
    font-size: 16px;
}
.sbo-plans-credit strong { display: block; font: 14px var(--sb-font-semibold); }
.sbo-plans-credit small { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.sbo-plans-credit--sms { background: #fff4d8; color: #7a5a10; }
.sbo-plans-credit--wa { background: #efe9fb; color: #5a4a92; }
.sbo-plans-features { padding: 8px 14px; }
.sbo-plans-addons,
.sbo-plans-invoices,
.sbo-plans-upgrade-list,
.sbo-plans-faq { padding: 4px 14px; }
.sbo-plans-add {
    min-height: 34px;
    width: auto;
    max-width: max-content;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    border-radius: 999px;
    background: #e8eef7;
    color: var(--sbo-navy);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
    flex: 0 0 auto;
}
.sbo-plans-add.is-muted { background: #eef1f5; color: #7a8699; }
.sbo-plans-addon-row .sbo-plans-status,
.sbo-plans-upgrade-row .sbo-plans-status {
    justify-self: end;
    width: auto;
    max-width: max-content;
}
.sbo-plans-invoice-row { grid-template-columns: 1fr auto; }
.sbo-plans-invoice-row__meta { display: grid; justify-items: end; gap: 6px; }
.sbo-plans-invoice-row__meta strong { font: 13px var(--sb-font-bold); }
.sbo-plans-upgrade-row.is-current { background: #f7fafc; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 12px; }
.sbo-plans-pay { padding: 14px; display: grid; gap: 14px; }
.sbo-plans-pay-tabs {
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-radius: 12px;
    background: #e9edf2;
}
.sbo-plans-pay-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667385;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-plans-pay-tabs button.is-active {
    background: #fff;
    color: var(--sbo-text);
    box-shadow: 0 2px 8px rgba(25, 42, 66, .08);
}
.sbo-plans-pay-panel p { margin: 0 0 12px; color: #5d6b82; font-size: 13px; line-height: 1.45; }
.sbo-plans-help {
    padding: 18px;
    display: grid;
    gap: 12px;
    border-radius: 18px;
    background: linear-gradient(160deg, #d9f4ef 0%, #e7f8f5 100%);
    border: 1px solid #c6ebe4;
}
.sbo-plans-help > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    font-size: 20px;
}
.sbo-plans-help h2 { margin: 0 0 4px; font: 18px/1.2 var(--sb-font-bold); color: #0f6f68; }
.sbo-plans-help p { margin: 0; color: #3f746f; font-size: 13px; line-height: 1.4; }
.sbo-plans-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sbo-plans-perks article {
    padding: 14px 12px;
    border: 1px solid #e2e7ec;
    border-radius: 14px;
    background: #fff;
    display: grid;
    gap: 4px;
}
.sbo-plans-perks span { font-size: 18px; }
.sbo-plans-perks strong { font: 13px var(--sb-font-semibold); }
.sbo-plans-perks small { color: var(--sbo-muted); font-size: 11px; line-height: 1.35; }
.sbo-plans-faq-item { border-bottom: 1px solid #eef1f5; }
.sbo-plans-faq-item:last-child { border-bottom: 0; }
.sbo-plans-faq-item summary {
    list-style: none;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: #222;
    font: 16px/1.35 var(--sb-font-semibold);
}
.sbo-plans-faq-item summary::-webkit-details-marker { display: none; }
.sbo-plans-faq-item summary::after { content: none; display: none; }
.sbo-plans-faq-item__q { flex: 1 1 auto; min-width: 0; }
.sbo-plans-faq-item__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #E8F0FE;
    color: #3366CC;
    font-size: 0;
    line-height: 0;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.sbo-plans-faq-item__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}
.sbo-plans-faq-item[open] .sbo-plans-faq-item__icon {
    transform: rotate(180deg);
    background: #3366CC;
    color: #fff;
}
.sbo-plans-faq-item p {
    margin: 0 0 14px;
    color: #64748B;
    font-size: 14px;
    line-height: 1.45;
}
.sbo-plans-print { display: none; }

@media (max-width: 420px) {
 .sbo-plans-header { padding: 14px 12px 14px; }
 .sbo-plans-header h1 { font-size: 18px; color: #ffffff; }
 .sbo-plans-header p { font-size: 14px; color: rgba(255, 255, 255, 0.92); }
 .sbo-plans-content { padding: 12px 11px 110px; gap: 14px; }
 .sbo-plans-current h3 { font-size: 24px; }
 .sbo-plans-credit { flex-direction: column; align-items: stretch; }
 .sbo-plans-credit .sbo-plans-btn { width: 100%; }
}

@media print {
 .sbo-plans-header,
 .sbo-plans-content,
 .sbo-bottom-nav,
 .sbo-notifications { display: none !important; }
 .sbo-plans-print {
 display: block !important;
 padding: 24px;
 color: #111;
 font: 14px/1.5 sans-serif;
 }
 .sbo-plans-print h1 { margin: 0 0 8px; font-size: 22px; }
 .sbo-plans-print h2 { margin: 18px 0 8px; font-size: 18px; }
}

/* Extra Staff Pack modal */
.sbo-staff-pack-modal[hidden] { display: none; }
.sbo-staff-pack-modal {
    padding: 20px;
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 1400;
    inset: 0;
    font-family: var(--sb-font-regular);
}
.sbo-staff-pack-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(12, 18, 26, .55);
    backdrop-filter: blur(3px);
    cursor: default;
}
.sbo-staff-pack-modal__backdrop:hover,
.sbo-staff-pack-modal__backdrop:active {
    transform: none !important;
    filter: none !important;
}
.sbo-staff-pack-modal__dialog {
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    position: relative;
    z-index: 1;
    overflow-y: auto;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(10, 18, 28, .3);
}
.sbo-staff-pack-modal__handle {
    width: 42px;
    height: 4px;
    margin: 12px auto 2px;
    display: block;
    border-radius: 3px;
    background: #d9dee5;
}
.sbo-staff-pack-modal__dialog > header {
    min-height: 78px;
    padding: 8px 18px 14px;
    display: grid;
    grid-template-columns: 46px 1fr 36px;
    align-items: center;
    gap: 12px;
}
.sbo-staff-pack-modal__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e7eef8;
    color: #3d6aa8;
}
.sbo-staff-pack-modal__dialog h2 {
    margin: 0 0 4px;
    color: #172234;
    font: 20px/1.15 var(--sb-font-bold);
}
.sbo-staff-pack-modal__dialog header p {
    margin: 0;
    color: #7a8699;
    font-size: 12px;
}
.sbo-staff-pack-modal__dialog header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #758195;
    font-size: 22px;
    cursor: pointer;
}
.sbo-staff-pack-modal form {
    padding: 0 18px 20px;
    display: grid;
    gap: 16px;
}
.sbo-staff-pack-modal__errors {
    padding: 10px 12px;
    border: 1px solid #efc6ca;
    border-radius: 10px;
    background: #fff1f2;
    color: #b63b47;
    font-size: 12px;
}
.sbo-staff-pack-modal__errors p { margin: 3px 0; }
.sbo-staff-pack-included,
.sbo-staff-pack-branches,
.sbo-staff-pack-pay {
    display: grid;
    gap: 10px;
}
.sbo-staff-pack-included h3,
.sbo-staff-pack-branches h3,
.sbo-staff-pack-pay h3 {
    margin: 0;
    color: #222;
    font: 18px var(--sb-font-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.sbo-staff-pack-included {
    padding: 12px;
    border-radius: 16px;
    background: #f4f6f8;
}
.sbo-staff-pack-included__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sbo-staff-pack-included__grid article {
    min-height: 74px;
    padding: 10px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: start;
    border-radius: 12px;
    background: #fff;
}
.sbo-staff-pack-included__grid span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eaf0f8;
    color: #3d6aa8;
    font-size: 14px;
}
.sbo-staff-pack-included__grid span.is-check {
    background: #e5f8ef;
    color: #1a9b6c;
}
.sbo-staff-pack-included__grid strong {
    display: block;
    color: #172234;
    font: 12px/1.25 var(--sb-font-semibold);
}
.sbo-staff-pack-included__grid small {
    display: block;
    margin-top: 2px;
    color: #8a96a8;
    font-size: 10px;
    line-height: 1.3;
}
.sbo-staff-pack-branches__list {
    display: grid;
    gap: 8px;
}
.sbo-staff-pack-branch {
    min-height: 58px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: center;
    border: 1px solid #e2e7ec;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.sbo-staff-pack-branch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sbo-staff-pack-branch > i {
    width: 22px;
    height: 22px;
    border: 1.5px solid #c5ced9;
    border-radius: 6px;
    background: #fff;
    position: relative;
}
.sbo-staff-pack-branch.is-selected {
    border-color: #3366CC;
    background: #EEF3FF;
}
.sbo-staff-pack-branch.is-selected > i {
    border-color: #3366CC;
    background: #3366CC;
}
.sbo-staff-pack-branch.is-selected > i::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sbo-staff-pack-branch strong {
    display: block;
    color: #172234;
    font: 14px/1.25 var(--sb-font-semibold);
}
.sbo-staff-pack-branch small {
    display: block;
    margin-top: 2px;
    color: #8a96a8;
    font-size: 11px;
}
.sbo-staff-pack-branch.is-disabled {
    opacity: .62;
    background: #f7f8fa;
    cursor: not-allowed;
}
.sbo-staff-pack-empty {
    margin: 0;
    color: #8a96a8;
    font-size: 13px;
}
.sbo-staff-pack-pay__methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sbo-staff-pack-pay__methods label { display: block; }
.sbo-staff-pack-pay__methods input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sbo-staff-pack-pay__methods span {
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #dce2e8;
    border-radius: 12px;
    background: #fff;
    color: #5d6b82;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}
.sbo-staff-pack-pay__methods label.is-active span {
    border-color: #3366CC;
    background: #EEF3FF;
    color: #3366CC;
}
.sbo-staff-pack-pay__hint {
    margin: 0;
    color: #6b778a;
    font-size: 12px;
    line-height: 1.4;
}
.sbo-staff-pack-pay__hint strong { color: #172234; }
.sbo-staff-pack-submit {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: #3366CC;
    color: #fff;
    font: 18px var(--sb-font-bold);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
}
.sbo-staff-pack-submit:disabled {
    background: #93B4E8;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}
.sbo-staff-pack-note {
    display: block;
    color: #8a96a8;
    text-align: center;
    font-size: 11px;
}

/* Extra Staff Pack success */
.sbo-staff-pack-success__body {
    padding: 26px 22px 30px;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 12px;
}
.sbo-staff-pack-success__check {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border: 3px solid #23a566;
    border-radius: 50%;
    color: #23a566;
    background: #eafaf1;
}
.sbo-staff-pack-success__body h3 {
    margin: 4px 0 0;
    color: #178a54;
    font: 22px/1.2 var(--sb-font-bold);
}
.sbo-staff-pack-success__body p {
    margin: 0;
    max-width: 380px;
    color: #5d6b82;
    font-size: 14px;
    line-height: 1.5;
}
.sbo-staff-pack-success__note {
    padding: 10px 14px;
    border-radius: 12px;
    background: #f4f6f8;
    color: #6b778a !important;
    font-size: 12px !important;
}
.sbo-staff-pack-success__actions {
    margin-top: 8px;
    width: 100%;
    display: grid;
    gap: 10px;
}
.sbo-plans-btn--ghost-dark {
    background: #eef1f5;
    color: #46536a;
    border: 1px solid #dce2e8;
}

@media (max-width: 520px) {
    .sbo-staff-pack-modal { padding: 12px; place-items: end center; }
    .sbo-staff-pack-modal__dialog {
        width: 100%;
        max-height: 96vh;
        border-radius: 17px;
    }
    .sbo-staff-pack-modal form { padding: 0 14px 18px; }
    .sbo-staff-pack-success__body { padding: 22px 16px 26px; }
}

/* Buy SMS Credits */
.sbo-sms-credit-modal__dialog { width: min(560px, 100%); }
.sbo-sms-credit-modal__icon { background: #E8F0FE; color: #3366CC; font-size: 0; }
.sbo-sms-credit-modal__body { padding: 12px 18px 24px; display: grid; gap: 16px; }
.sbo-sms-credit-bundles,
.sbo-sms-credit-custom { display: grid; gap: 10px; }
.sbo-sms-credit-bundles h3,
.sbo-sms-credit-custom h3 {
    margin: 0;
    color: #222;
    font: 18px var(--sb-font-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.sbo-sms-credit-bundles h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sbo-sms-credit-bundles__gift {
    display: inline-grid;
    place-items: center;
    color: #3366CC;
    line-height: 0;
}
.sbo-sms-credit-bundles__gift svg { display: block; }
.sbo-sms-credit-bundles > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbo-sms-credit-bundles button {
    min-height: 78px;
    padding: 14px 14px 12px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 22px;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    background: #fff;
    color: #222;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.sbo-sms-credit-bundles button:hover {
    border-color: #93B4F0;
    background: #F8FAFF;
}
.sbo-sms-credit-bundles button.is-selected {
    border-color: #3366CC;
    background: #EEF3FF;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}
.sbo-sms-credit-bundles__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.sbo-sms-credit-bundles strong { font: 17px/1.2 var(--sb-font-bold); color: #222; }
.sbo-sms-credit-bundles small { color: #64748B; font-size: 12px; }
.sbo-sms-credit-bundles__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    background: #fff;
    position: relative;
    justify-self: end;
    align-self: center;
}
.sbo-sms-credit-bundles button.is-selected .sbo-sms-credit-bundles__radio {
    border-color: #3366CC;
    background: #3366CC;
    box-shadow: inset 0 0 0 3px #fff;
}
.sbo-sms-credit-bundles em {
    position: absolute;
    top: 8px;
    right: 13px;
    z-index: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: #3366CC;
    color: #fff;
    font: normal 10px/1.2 var(--sb-font-semibold);
}
.sbo-sms-credit-bundles button:has(em) {
    padding-top: 28px;
}
.sbo-sms-credit-bundles button:has(em) .sbo-sms-credit-bundles__radio {
    align-self: end;
    margin-bottom: 2px;
}
.sbo-sms-credit-custom {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #E0E8FF;
    background: #F8FAFF;
}
.sbo-sms-credit-custom__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sbo-sms-credit-custom__icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #E8F0FE;
    color: #3366CC;
    flex-shrink: 0;
    line-height: 0;
}
.sbo-sms-credit-custom__icon svg { display: block; }
.sbo-sms-credit-custom__body {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}
.sbo-sms-credit-custom__field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 14px;
    background: #fff;
}
.sbo-sms-credit-custom__field:focus-within {
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}
.sbo-sms-credit-custom__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #222;
    font: 21px var(--sb-font-bold);
    text-align: left;
    -moz-appearance: textfield;
}
.sbo-sms-credit-custom__field input::-webkit-outer-spin-button,
.sbo-sms-credit-custom__field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sbo-sms-credit-custom__field span {
    color: #8a94a6;
    font-size: 13px;
    white-space: nowrap;
}
.sbo-sms-credit-custom small {
    color: #3366CC;
    font-size: 12px;
}
.sbo-sms-credit-pay {
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 16px;
    background: #F8FAFF;
    gap: 12px;
}
.sbo-sms-credit-pay__head {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
}
.sbo-sms-credit-pay__icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #E8F8EF;
    color: #16A34A;
    line-height: 0;
}
.sbo-sms-credit-pay__icon svg { display: block; }
.sbo-sms-credit-pay__head h3 {
    margin: 0 0 4px;
    color: #222;
    font: 18px var(--sb-font-semibold);
}
.sbo-sms-credit-pay .sbo-staff-pack-pay__hint {
    margin: 0;
    color: #6b778a;
    font-size: 12px;
    line-height: 1.4;
}
.sbo-sms-credit-pay .sbo-staff-pack-pay__hint strong { color: #3366CC; }
.sbo-sms-credit-pay__gateways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
    background: #EEF2F7;
}
.sbo-sms-credit-pay__gateways > button {
    min-height: 44px;
    padding: 8px 12px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.sbo-sms-credit-pay__gateways > button.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.sbo-sms-credit-gateway-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 15px/1 var(--sb-font-bold);
    white-space: nowrap;
}
.sbo-sms-credit-gateway-logo--lollapay b {
    color: #2563EB;
    font-style: normal;
    font-weight: inherit;
}
.sbo-sms-credit-gateway-logo--lollapay em {
    color: #16A34A;
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
    position: static;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.sbo-sms-credit-gateway-logo--mpesa {
    color: #64748B;
    font-family: var(--sb-font-semibold);
    font-weight: normal;
}
.sbo-sms-credit-pay__gateways > button.is-active .sbo-sms-credit-gateway-logo--mpesa {
    color: #334155;
}
.sbo-sms-credit-gateway-logo--mpesa i {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    color: #16A34A;
    line-height: 0;
    flex-shrink: 0;
    font-size: 0;
}
.sbo-sms-credit-gateway-logo--mpesa i svg {
    display: block;
    width: 18px;
    height: 18px;
}
.sbo-sms-credit-error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #efc6ca;
    border-radius: 10px;
    background: #fff1f2;
    color: #b63b47;
    font-size: 12px;
}
.sbo-sms-credit-error[hidden] { display: none; }
.sbo-sms-credit-submit {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    background: #3366CC;
    color: #fff;
    font: 18px var(--sb-font-bold);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
}
.sbo-sms-credit-submit__icon {
    display: inline-grid;
    place-items: center;
    line-height: 0;
    color: #fff;
}
.sbo-sms-credit-submit__icon svg { display: block; }
.sbo-sms-credit-submit:disabled { background: #93B4E8; cursor: wait; box-shadow: none; }
.sbo-sms-credit-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    color: #8a96a8;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}
.sbo-sms-credit-note > span {
    display: inline-grid;
    place-items: center;
    color: #3366CC;
    line-height: 0;
    flex-shrink: 0;
}
.sbo-sms-credit-note svg { display: block; }
.sbo-sms-credit-success .sbo-staff-pack-success__body { min-height: 270px; align-content: center; }
.sbo-sms-credit-success .sbo-staff-pack-success__body p strong { color: #222; }
.sbo-sms-credit-success__summary {
    display: grid;
    gap: 6px;
    width: 100%;
    max-width: 340px;
}
.sbo-sms-credit-success__purchased {
    margin: 0;
    color: #178a54 !important;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.4;
}
.sbo-sms-credit-success__purchased strong {
    color: #0f6b40 !important;
    font: 20px/1.2 var(--sb-font-bold);
}
.sbo-sms-credit-success__purchased span {
    display: block;
    margin-top: 2px;
    color: #5d6b82;
    font-size: 13px;
    font-weight: 500;
}
.sbo-sms-credit-success__balance {
    margin: 0;
    color: #5d6b82;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 420px) {
    .sbo-sms-credit-modal__body { padding: 10px 13px 20px; }
    .sbo-sms-credit-bundles button { min-height: 70px; padding: 11px; }
    .sbo-sms-credit-bundles button:has(em) { padding-top: 26px; }
    .sbo-sms-credit-bundles strong { font-size: 15px; }
    .sbo-sms-credit-bundles h3,
    .sbo-sms-credit-custom h3,
    .sbo-sms-credit-pay__head h3 { font-size: 16px; }
    .sbo-sms-credit-submit { font-size: 16px; }
    .sbo-sms-credit-pay__gateways > button { min-height: 40px; }
}

/* Delytt Help modal */
.sbo-delytt-help-modal__dialog { width: min(520px, 100%); }
.sbo-delytt-help-modal__icon {
    background: #E8F0FE;
    color: #3366CC;
}
.sbo-delytt-help-modal__dialog > header {
    border-bottom: 1px solid #E8EDF3;
}
.sbo-delytt-help-modal__body {
    padding: 16px 18px 22px;
    display: grid;
    gap: 14px;
}
.sbo-delytt-help-field {
    display: grid;
    gap: 7px;
}
.sbo-delytt-help-field > span {
    color: #222;
    font: 18px/1.3 var(--sb-font-semibold);
}
.sbo-delytt-help-field > span em {
    color: #8a94a6;
    font: 14px/1 var(--sb-font-regular);
    font-style: normal;
}
.sbo-delytt-help-field input,
.sbo-delytt-help-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font: 16px/1.35 var(--sb-font-regular);
    outline: none;
    box-sizing: border-box;
}
.sbo-delytt-help-field textarea {
    min-height: 110px;
    resize: vertical;
}
.sbo-delytt-help-field input:focus,
.sbo-delytt-help-field textarea:focus {
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, .12);
}
.sbo-delytt-help-need {
    display: grid;
    gap: 9px;
}
.sbo-delytt-help-need > span {
    color: #222;
    font: 18px/1.3 var(--sb-font-semibold);
}
.sbo-delytt-help-need__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sbo-delytt-help-need__grid button {
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font: 14px/1.2 var(--sb-font-semibold);
    cursor: pointer;
    text-align: center;
}
.sbo-delytt-help-need__grid button.is-selected {
    border-color: #3366CC;
    border-width: 1.5px;
    color: #3366CC;
    background: #EEF3FF;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}
.sbo-delytt-help-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: #3366CC;
    color: #fff;
    font: 18px var(--sb-font-bold);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(51, 102, 204, 0.22);
}
.sbo-delytt-help-submit:disabled {
    background: #93B4E8;
    cursor: wait;
    box-shadow: none;
}
.sbo-delytt-help-note {
    display: block;
    color: #8a94a6;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
}
.sbo-delytt-help-success .sbo-staff-pack-success__body {
    min-height: 280px;
    align-content: center;
}
.sbo-delytt-help-success__done {
    margin-top: 8px;
    min-width: 160px;
    justify-self: center;
}

@media (max-width: 767px) {
    .sbo-delytt-help-field > span,
    .sbo-delytt-help-need > span { font-size: 16px; }
    .sbo-delytt-help-submit { font-size: 16px; }
    .sbo-delytt-help-field input,
    .sbo-delytt-help-field textarea { font-size: 15px; }
}

@media (max-width: 420px) {
    .sbo-delytt-help-modal__body { padding: 12px 14px 20px; }
    .sbo-delytt-help-need__grid button { min-height: 42px; font-size: 12px; padding: 9px 10px; }
}

/* ?? Advanced Filters modal ????????????????????????????????????? */
.sbo-adv-filters {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px 14px;
}

.sbo-adv-filters[hidden] {
    display: none !important;
}

.sbo-adv-filters__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(16, 24, 34, .56);
    backdrop-filter: blur(3px);
    cursor: default;
}

.sbo-adv-filters__backdrop:hover,
.sbo-adv-filters__backdrop:active {
    transform: none !important;
    filter: none !important;
}

.sbo-adv-filters__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: min(92vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: sbo-adv-filters-in .22s ease;
}

@keyframes sbo-adv-filters-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.sbo-adv-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
}

.sbo-adv-filters__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sbo-adv-filters__title-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef3f8;
    color: #5d6b7c;
    flex: 0 0 auto;
}

.sbo-adv-filters__title h2 {
    margin: 0;
    color: #172033;
    font: 18px/1.2 var(--sb-font-bold, var(--sb-font-semibold));
}

.sbo-adv-filters__close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8a94a4;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.sbo-adv-filters__close:hover {
    background: #f0f3f7;
    color: #536074;
}

.sbo-adv-filters__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 16px 8px;
    scrollbar-width: thin;
}

.sbo-adv-filters__section {
    margin-bottom: 16px;
}

.sbo-adv-filters__section h3 {
    margin: 0 0 10px;
    color: #9aa3b2;
    font: 11px/1.2 var(--sb-font-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sbo-adv-filters__void-icon {
    color: #e25555;
    font-size: 13px;
}

.sbo-adv-filters__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sbo-adv-filters__chips::-webkit-scrollbar {
    display: none;
}

.sbo-adv-filters__chips.is-wrap {
    flex-wrap: wrap;
    overflow: visible;
}

.sbo-adv-filters__chip {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #6b778a;
    font: 13px/1 var(--sb-font-semibold);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.sbo-adv-filters__chip:hover {
    background: #f5f7fa;
}

.sbo-adv-filters__chip.is-active {
    border-color: var(--sbo-teal);
    background: var(--sbo-teal);
    color: #fff;
}

.sbo-adv-filters__chip.is-void.is-active {
    border-color: #f0b7bd;
    background: #fdecef;
    color: #d24757;
}

.sbo-adv-filters__chip.is-staff.is-active {
    border-color: var(--sbo-navy);
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-adv-filters__range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sbo-adv-filters__range label {
    display: grid;
    gap: 6px;
}

.sbo-adv-filters__range span {
    color: #8a94a4;
    font: 12px/1.2 var(--sb-font-semibold);
}

.sbo-adv-filters__range input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e2e8ef;
    border-radius: 12px;
    background: #f4f6f9;
    color: #172033;
    font: 14px/1.2 var(--sb-font-semibold);
    outline: 0;
}

.sbo-adv-filters__range input:focus {
    border-color: #bfd4e8;
    background: #fff;
}

.sbo-adv-filters__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}

.sbo-adv-filters__reset,
.sbo-adv-filters__apply {
    min-height: 48px;
    border-radius: 12px;
    font: 14px/1 var(--sb-font-semibold);
    cursor: pointer;
}

.sbo-adv-filters__reset {
    border: 1px solid #dde3eb;
    background: #f3f5f8;
    color: #334155;
}

.sbo-adv-filters__reset:hover {
    background: #e9eef4;
}

.sbo-adv-filters__apply {
    border: 0;
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-adv-filters__apply:hover {
    filter: brightness(1.05);
}

@media (max-width: 420px) {
    .sbo-adv-filters {
        padding: 10px 10px 14px;
        align-items: end;
    }

    .sbo-adv-filters__dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 14px 14px;
    }
}


/* ===== Business Reports (Trends) ===== */
.sbo-reports-page {
    background: #f1f4f8;
    padding-bottom: 88px;
}

.sbo-reports-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 8px;
}

.sbo-reports-header__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sbo-reports-header__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e8eef8;
    font-size: 18px;
}

.sbo-reports-header h1 {
    margin: 0;
    font-size: 22px;
    color: #15233d;
}

.sbo-reports-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--sbo-muted);
}

.sbo-reports-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d5dbe6;
    background: #fff;
    color: #1f2a44;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.sbo-reports-branch {
    margin: 0 16px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8edf4;
    color: #4b5875;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
}

.sbo-reports-periods {
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sbo-reports-periods::-webkit-scrollbar { display: none; }

.sbo-reports-periods button {
    border: 0;
    background: #fff;
    color: #243049;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.sbo-reports-periods button.is-active {
    background: var(--sbo-navy);
    color: #fff;
}

.sbo-reports-main {
    position: relative;
    padding: 0 16px 24px;
    min-height: 240px;
}

.sbo-reports-page.is-loading [data-reports-content] {
    opacity: .45;
    pointer-events: none;
}

.sbo-reports-loader {
    position: absolute;
    inset: 40px 16px auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    background: rgba(255,255,255,.92);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}

.sbo-reports-loader[hidden] { display: none !important; }

.sbo-reports-loader__spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #d7deea;
    border-top-color: var(--sbo-navy);
    animation: sbo-reports-spin .7s linear infinite;
}

.sbo-reports-loader p {
    margin: 0;
    color: #51607c;
    font-size: 13px;
}

@keyframes sbo-reports-spin {
    to { transform: rotate(360deg); }
}

.sbo-reports-section { margin-bottom: 22px; }

.sbo-reports-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sbo-reports-section__title h2 {
    margin: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b778f;
}

.sbo-reports-profit {
    background: linear-gradient(160deg, #163a6b 0%, #1a2f55 100%);
    color: #fff;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 12px;
    cursor: pointer;
    border: 0;
    width: 100%;
    text-align: left;
}

.sbo-reports-profit__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sbo-reports-profit__top small {
    font-size: 11px;
    letter-spacing: .04em;
    opacity: .9;
}

.sbo-reports-profit__top a {
    color: #9ec5ff;
    font-size: 12px;
    text-decoration: none;
}

.sbo-reports-profit > strong {
    display: block;
    font-size: 34px;
    line-height: 1.1;
}

.sbo-reports-profit > p {
    margin: 6px 0 14px;
    font-size: 13px;
    opacity: .85;
}

.sbo-reports-profit__bars {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.12);
}

.sbo-reports-profit__bars i { background: #34d399; display: block; }
.sbo-reports-profit__bars b { background: #f87171; display: block; }

.sbo-reports-profit__legend {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
    opacity: .9;
}

.sbo-reports-profit__legend em,
.sbo-reports-profit__legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.sbo-reports-profit__legend em { background: #34d399; font-style: normal; }
.sbo-reports-profit__legend i { background: #f87171; }

.sbo-reports-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sbo-reports-card {
    border: 0;
    border-radius: 16px;
    padding: 14px;
    text-align: left;
    min-height: 108px;
    position: relative;
    cursor: pointer;
}

.sbo-reports-card small {
    display: block;
    font-size: 11px;
    margin-bottom: 8px;
    opacity: .85;
}

.sbo-reports-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.15;
}

.sbo-reports-card p {
    margin: 6px 0 0;
    font-size: 11px;
    opacity: .8;
}

.sbo-reports-card > span {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    opacity: .75;
}

.sbo-reports-card > em {
    position: absolute;
    top: 12px;
    right: 12px;
    font-style: normal;
    font-size: 11px;
    background: rgba(255,255,255,.55);
    border-radius: 999px;
    padding: 3px 8px;
}

.sbo-reports-card > em.is-down { color: #b91c1c; }

.sbo-reports-card.is-paid { background: #fef3c7; color: #92400e; }
.sbo-reports-card.is-expense { background: #ffe4e6; color: #9f1239; }
.sbo-reports-card.is-vat { background: #dcfce7; color: #166534; }
.sbo-reports-card.is-staff { background: #ede9fe; color: #5b21b6; }
.sbo-reports-card.is-credit { background: #ffedd5; color: #9a3412; grid-column: span 2; }

@media (min-width: 420px) {
    .sbo-reports-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .sbo-reports-card.is-paid,
    .sbo-reports-card.is-expense { grid-column: span 1; }
    .sbo-reports-card.is-credit { grid-column: span 1; }
}

.sbo-reports-list {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.sbo-reports-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eef1f6;
    background: #fff;
    display: grid;
    grid-template-columns: 42px 1fr auto 16px;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    text-align: left;
    cursor: pointer;
}

.sbo-reports-row:last-child { border-bottom: 0; }

.sbo-reports-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f3f5f9;
    font-size: 16px;
}

.sbo-reports-row__icon.is-pnl { background: #dcfce7; }
.sbo-reports-row__icon.is-pay { background: #fef3c7; }
.sbo-reports-row__icon.is-exp { background: #ffe4e6; }
.sbo-reports-row__icon.is-top { background: #e0f2fe; }
.sbo-reports-row__icon.is-vat { background: #dcfce7; }
.sbo-reports-row__icon.is-staff { background: #ede9fe; }
.sbo-reports-row__icon.is-credit { background: #ffedd5; }

.sbo-reports-row strong {
    display: block;
    font-size: 14px;
    color: #172033;
}

.sbo-reports-row small {
    display: block;
    margin-top: 2px;
    color: #7a869e;
    font-size: 11px;
}

.sbo-reports-row em {
    font-style: normal;
    font-size: 11px;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}

.sbo-reports-row em.is-green { background: #dcfce7; color: #15803d; }
.sbo-reports-row em.is-red { background: #ffe4e6; color: #be123c; }
.sbo-reports-row em.is-purple { background: #ede9fe; color: #6d28d9; }
.sbo-reports-row em.is-orange { background: #ffedd5; color: #c2410c; }

.sbo-reports-row > i {
    color: #94a3b8;
    font-style: normal;
    font-size: 18px;
}

.sbo-reports-share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.sbo-reports-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    padding: 14px 12px;
    font-size: 13px;
    text-decoration: none;
}

.sbo-reports-share__wa {
    background: #16a34a;
    color: #fff;
}

.sbo-reports-share__pdf {
    background: #fff;
    color: #172033;
    border: 1.5px solid #d5dbe6;
}

/* Custom date range modal */
.sbo-custom-range {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
}

.sbo-custom-range[hidden] { display: none !important; }

.sbo-custom-range__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
}

.sbo-custom-range__dialog {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}

.sbo-custom-range__header {
    background: var(--sbo-navy);
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
}

.sbo-custom-range__title {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.sbo-custom-range__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
}

.sbo-custom-range__header h2 {
    margin: 0;
    font-size: 17px;
}

.sbo-custom-range__header p {
    margin: 3px 0 0;
    font-size: 12px;
    opacity: .8;
}

.sbo-custom-range__close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.sbo-custom-range__body { padding: 16px; }

.sbo-custom-range__label {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .06em;
    color: #8b95a8;
}

.sbo-custom-range__presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sbo-custom-range__presets button {
    border: 1.5px solid #d8dee8;
    background: #fff;
    border-radius: 999px;
    padding: 10px 6px;
    font-size: 12px;
    color: #243049;
    cursor: pointer;
}

.sbo-custom-range__presets button.is-active {
    border-color: #111827;
    box-shadow: inset 0 0 0 1px #111827;
}

.sbo-custom-range__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: #9aa3b5;
    font-size: 12px;
}

.sbo-custom-range__divider::before,
.sbo-custom-range__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6ebf2;
}

.sbo-custom-range__field {
    display: block;
    margin-bottom: 12px;
}

.sbo-custom-range__field > span {
    display: block;
    font-size: 11px;
    letter-spacing: .05em;
    margin-bottom: 6px;
    color: #243049;
}

.sbo-custom-range__input {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    background: #f3f5f8;
    border-radius: 12px;
    min-height: 48px;
    padding: 0 4px;
}

.sbo-custom-range__input span {
    font-size: 15px;
    color: #172033;
}

.sbo-custom-range__input button {
    border: 0;
    background: transparent;
    font-size: 14px;
}

.sbo-custom-range__input input[type="date"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.sbo-custom-range__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e8f8f4;
    border: 1px solid #b7e7da;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 4px;
}

.sbo-custom-range__summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f766e;
    font-size: 14px;
}

.sbo-custom-range__summary small { color: #7b889e; font-size: 12px; }

.sbo-custom-range__footer {
    padding: 0 16px 16px;
    display: grid;
    gap: 8px;
}

.sbo-custom-range__apply,
.sbo-custom-range__cancel {
    border: 0;
    border-radius: 14px;
    padding: 14px;
    font-size: 15px;
    cursor: pointer;
}

.sbo-custom-range__apply {
    background: var(--sbo-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sbo-custom-range__cancel {
    background: #eef1f5;
    color: #243049;
}

/* Shared report detail modals */
.sbo-report-modal {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: grid;
    place-items: end center;
    padding: 12px 12px 18px;
}

.sbo-report-modal[hidden] { display: none !important; }

.sbo-report-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .5);
    cursor: pointer;
}

.sbo-report-modal__dialog {
    position: relative;
    width: min(460px, 100%);
    max-height: 92vh;
    background: #fff;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.sbo-report-modal__header {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 10px;
    align-items: start;
    padding: 16px 16px 8px;
}

.sbo-report-modal__header h2 {
    margin: 0;
    font-size: 18px;
}

.sbo-report-modal__header p {
    margin: 3px 0 0;
    color: #7a869e;
    font-size: 12px;
}

.sbo-report-modal__close {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.sbo-report-modal__body {
    overflow: auto;
    padding: 8px 16px 16px;
}

.sbo-report-modal__section {
    margin: 16px 0 10px;
    font-size: 11px;
    letter-spacing: .06em;
    color: #8b95a8;
}

.sbo-report-modal__footer {
    padding: 10px 16px 16px;
    display: grid;
    gap: 8px;
    border-top: 1px solid #eef1f6;
}

.sbo-report-modal__primary,
.sbo-report-modal__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    padding: 13px;
    font-size: 14px;
    text-decoration: none;
    border: 0;
}

.sbo-report-modal__primary { color: #fff; }
.sbo-report-modal__primary.is-navy { background: var(--sbo-navy); }
.sbo-report-modal__primary.is-orange { background: #ea580c; }
.sbo-report-modal__primary.is-red { background: #e11d48; }
.sbo-report-modal__primary.is-green { background: #15803d; }
.sbo-report-modal__primary.is-purple { background: #7c3aed; }

.sbo-report-modal__secondary {
    background: #fff;
    color: #243049;
    border: 1.5px solid #d5dbe6;
    cursor: pointer;
}

.sbo-report-empty {
    text-align: center;
    color: #7a869e;
    padding: 24px 8px;
    font-size: 13px;
}

.sbo-report-note {
    display: flex;
    gap: 10px;
    border-radius: 14px;
    padding: 12px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.45;
}

.sbo-report-note p { margin: 0; }
.sbo-report-note.is-amber { background: #fff7ed; color: #9a3412; }
.sbo-report-note.is-blue { background: #eff6ff; color: #1e40af; }
.sbo-report-note.is-green { background: #ecfdf5; color: #166534; }
.sbo-report-note.is-pink { background: #fff1f2; color: #9f1239; }
.sbo-report-note.is-purple { background: #f5f3ff; color: #5b21b6; }
.sbo-report-note.is-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

.sbo-pnl-hero {
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    margin-bottom: 12px;
}

.sbo-pnl-hero.is-profit { background: #163a6b; }
.sbo-pnl-hero.is-loss { background: #9f1239; }

.sbo-pnl-hero small { display: block; font-size: 11px; letter-spacing: .04em; }
.sbo-pnl-hero strong { display: block; font-size: 30px; margin: 6px 0; }
.sbo-pnl-hero p { margin: 0; opacity: .85; font-size: 13px; }

.sbo-pnl-side {
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sbo-pnl-side > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sbo-pnl-side span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
}

.sbo-pnl-side strong { display: block; font-size: 13px; }
.sbo-pnl-side small { color: #6b778f; font-size: 11px; }
.sbo-pnl-side b { font-size: 16px; white-space: nowrap; }

.sbo-pnl-side.is-in { background: #ecfdf5; border: 1px solid #a7f3d0; }
.sbo-pnl-side.is-in span { background: #16a34a; }
.sbo-pnl-side.is-in b { color: #15803d; }

.sbo-pnl-side.is-out { background: #fff1f2; border: 1px solid #fecdd3; }
.sbo-pnl-side.is-out span { background: #e11d48; }
.sbo-pnl-side.is-out b { color: #be123c; }

.sbo-pnl-calc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f8;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
}

.sbo-pnl-calc .is-green { color: #15803d; }
.sbo-pnl-calc .is-red { color: #be123c; }

.sbo-expense-break,
.sbo-exp-row,
.sbo-pay-method,
.sbo-vat-item,
.sbo-comm-row,
.sbo-credit-row,
.sbo-seller-row {
    background: #f7f8fb;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
}

.sbo-expense-break > div,
.sbo-exp-row > div,
.sbo-pay-method > div,
.sbo-vat-item > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbo-expense-break > div > div,
.sbo-exp-row > div > div,
.sbo-pay-method > div > div,
.sbo-vat-item > div > div {
    flex: 1;
    min-width: 0;
}

.sbo-expense-break i,
.sbo-exp-row i,
.sbo-pay-method i,
.sbo-comm-row > i,
.sbo-exp-ratio i {
    display: block;
    height: 7px;
    background: #e8edf4;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.sbo-expense-break i em,
.sbo-exp-row i em,
.sbo-pay-method i em,
.sbo-comm-row > i em,
.sbo-exp-ratio i em {
    display: block;
    height: 100%;
    background: #fb7185;
    border-radius: 999px;
}

.sbo-pay-method i em { background: var(--pay-color, #f59e0b); }
.sbo-comm-row > i em { background: #8b5cf6; }

.sbo-expense-break small,
.sbo-vat-item > small {
    display: block;
    margin-top: 6px;
    color: #7a869e;
    font-size: 11px;
}

.sbo-pay-hero,
.sbo-exp-hero,
.sbo-vat-hero,
.sbo-comm-hero,
.sbo-credit-hero {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    margin-bottom: 12px;
}

.sbo-pay-hero { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.sbo-exp-hero { background: linear-gradient(135deg, #e11d48, #fb7185); }
.sbo-vat-hero { background: linear-gradient(135deg, #15803d, #22c55e); }
.sbo-comm-hero { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.sbo-credit-hero { background: linear-gradient(90deg, #4568DC 0%, #5B7CFA 55%, #7B6CF0 100%); }

.sbo-pay-hero small,
.sbo-exp-hero small,
.sbo-vat-hero small,
.sbo-comm-hero small,
.sbo-credit-hero small {
    display: block;
    font-size: 10px;
    letter-spacing: .05em;
    opacity: .9;
}

.sbo-pay-hero strong,
.sbo-exp-hero strong,
.sbo-vat-hero strong,
.sbo-comm-hero strong,
.sbo-credit-hero strong {
    display: block;
    font-size: 24px;
    margin-top: 4px;
}

.sbo-pay-chart {
    background: #f7f8fb;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
}

.sbo-pay-chart > small {
    display: block;
    margin-bottom: 8px;
    color: #6b778f;
}

.sbo-pay-chart__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: end;
    height: 110px;
}

.sbo-pay-chart__bars > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}

.sbo-pay-chart__bars b {
    width: 100%;
    max-width: 28px;
    border-radius: 8px 8px 4px 4px;
    display: block;
}

.sbo-pay-chart__bars span { font-size: 11px; color: #51607c; }

.sbo-pay-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
    color: #51607c;
}

.sbo-pay-chart__legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.sbo-pay-method strong { color: var(--pay-color, #f59e0b); }
.sbo-pay-method b { color: var(--pay-color, #f59e0b); font-size: 15px; }

.sbo-exp-ratio {
    background: #fff;
    border-radius: 12px;
    padding: 4px 2px 12px;
    margin-bottom: 10px;
}

.sbo-exp-ratio > div {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.sbo-exp-ratio small {
    display: block;
    margin-top: 6px;
    color: #7a869e;
    font-size: 11px;
}

.sbo-vat-item em {
    display: inline-block;
    margin-top: 4px;
    background: #dcfce7;
    color: #15803d;
    border-radius: 999px;
    padding: 2px 8px;
    font-style: normal;
    font-size: 10px;
}

.sbo-vat-item b { color: #15803d; }

.sbo-comm-row__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbo-comm-row__top > span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ede9fe;
    color: #6d28d9;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.sbo-comm-row__top > div { flex: 1; min-width: 0; }
.sbo-comm-row__top strong { display: block; font-size: 14px; }
.sbo-comm-row__top small { color: #7a869e; font-size: 11px; }

.sbo-comm-row__earned {
    text-align: right;
}

.sbo-comm-row__earned b {
    display: block;
    color: #7c3aed;
    font-size: 14px;
}

.sbo-comm-row__earned small { color: #7a869e; }

.sbo-comm-row__math {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 11px;
    color: #51607c;
}

.sbo-comm-row__math em {
    font-style: normal;
    color: #7c3aed;
}

.sbo-credit-buckets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.sbo-credit-buckets article {
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    border: 1.5px solid #e5e9ef;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.sbo-credit-buckets small {
    display: block;
    font-size: 10px;
    letter-spacing: .04em;
}

.sbo-credit-buckets strong {
    display: block;
    font-size: 18px;
    margin: 4px 0;
}

.sbo-credit-buckets span { font-size: 11px; color: #6b778f; }

.sbo-credit-buckets .is-overdue { border-color: #fda4af; color: #be123c; }
.sbo-credit-buckets .is-pending { border-color: #93c5fd; color: #1d4ed8; }
.sbo-credit-buckets .is-partial { border-color: #fcd34d; color: #b45309; }

.sbo-credit-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbo-credit-row > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffedd5;
    color: #c2410c;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.sbo-credit-row > div { flex: 1; min-width: 0; }
.sbo-credit-row strong { display: block; font-size: 14px; }
.sbo-credit-row small { color: #7a869e; font-size: 11px; }

.sbo-credit-row__meta { text-align: right; }
.sbo-credit-row__meta b { display: block; color: #ea580c; font-size: 14px; }
.sbo-credit-row__meta em {
    display: inline-block;
    margin-top: 4px;
    font-style: normal;
    font-size: 10px;
    border-radius: 999px;
    padding: 2px 8px;
}

.sbo-credit-row__meta em.is-overdue { background: #ffe4e6; color: #be123c; }
.sbo-credit-row__meta em.is-pending { background: #dbeafe; color: #1d4ed8; }
.sbo-credit-row__meta em.is-partial { background: #fef3c7; color: #b45309; }

.sbo-seller-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbo-seller-row > b {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.sbo-seller-row > div { flex: 1; }
.sbo-seller-row strong { display: block; font-size: 14px; }
.sbo-seller-row small { color: #7a869e; font-size: 11px; }
.sbo-seller-row em { font-style: normal; color: #0f766e; font-size: 14px; }

@media (min-width: 768px) {
    .sbo-reports-page {
        max-width: 560px;
        margin: 0 auto;
    }

    .sbo-report-modal {
        place-items: center;
    }
}

/* =========================================================
   Mobile Money Agent Mode ? Owner Dashboard
   Uses current Sales Book / Owner Portal theme tokens.
   ========================================================= */
.agent-dashboard-ui.sbo-dashboard,
.sbo-dashboard.agent-dashboard-ui {
    --ad-danger: #e25555;
    --ad-danger-soft: #fdecec;
    --ad-success: #10b981;
    --ad-success-deep: #059669;
    --ad-warn: #f59e0b;
    --ad-warn-soft: #fff7e8;
    --ad-info: #3b82f6;
}

.agent-dashboard-content {
    padding: 20px 16px 110px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 2px;
}

.agent-dashboard-hero h1 {
    margin: 0;
    font: normal 28px/1.15 var(--sb-font-bold);
    color: var(--sbo-text);
}

.agent-dashboard-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-dashboard-hero__link {
    flex-shrink: 0;
    margin-top: 6px;
    color: #3366cc;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
}

.agent-card {
    padding: 16px;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
}

.agent-card__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-alert-card {
    padding: 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #e25555 0%, #d64545 100%);
    box-shadow: 0 10px 24px rgba(226, 85, 85, 0.28);
}

.agent-alert-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.agent-alert-card__head strong {
    font: 16px var(--sb-font-bold);
}

.agent-alert-card ul {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.agent-alert-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    color: #c0392b;
    background: #fff;
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
}

.agent-outlet-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-outlet-card__name {
    display: block;
    margin-bottom: 8px;
    font: 20px var(--sb-font-bold);
}

.agent-outlet-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-outlet-card__meta em {
    font-style: normal;
    padding: 3px 10px;
    border-radius: 999px;
    font: 12px var(--sb-font-semibold);
}

.agent-outlet-card__meta em.is-open {
    color: var(--ad-success-deep);
    background: #e7f8f1;
}

.agent-outlet-card__meta em.is-closed {
    color: #64748b;
    background: #eef2f6;
}

.agent-float-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-float-grid article {
    padding: 14px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #f8fafc;
}

.agent-float-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-float-grid strong {
    display: block;
    font: 18px var(--sb-font-bold);
}

.agent-float-grid em {
    display: block;
    margin-top: 4px;
    font: 12px var(--sb-font-semibold);
    font-style: normal;
}

.agent-float-grid em.is-down,
.agent-shortage-card strong,
.agent-stats-grid .is-withdrawals strong {
    color: var(--ad-danger);
}

.agent-float-grid em.is-up {
    color: var(--ad-success-deep);
}

.agent-shortage-card {
    background: var(--ad-danger-soft);
    border-color: #f7c7c7;
}

.agent-shortage-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agent-shortage-card__head em {
    font-style: normal;
    padding: 3px 10px;
    border-radius: 999px;
    color: #b91c1c;
    background: #fff;
    font: 11px var(--sb-font-semibold);
}

.agent-shortage-card > strong {
    display: block;
    margin: 4px 0 14px;
    font: 22px var(--sb-font-bold);
}

.agent-split-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-split-card strong {
    display: block;
    margin-bottom: 6px;
    font: 24px var(--sb-font-bold);
}

.agent-split-card p,
.agent-expense-card__head p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sbo-muted);
}

.agent-split-card .is-ok,
.agent-expense-card .is-ok { color: var(--ad-success-deep); font-family: var(--sb-font-semibold); }
.agent-split-card .is-warn,
.agent-expense-card .is-warn { color: #c27803; font-family: var(--sb-font-semibold); }

.agent-expense-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.agent-expense-card__head strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sbo-navy, #153562);
    font: 26px var(--sb-font-bold);
}

.agent-expense-card__head .agent-btn--navy {
    flex: 0 0 auto;
    border-radius: 12px;
    white-space: nowrap;
}

.agent-expense-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.agent-expense-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #eef1f5;
    font-size: 14px;
}

.agent-expense-list li:first-child {
    border-top: 0;
}

.agent-expense-list__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #3366cc;
}

.agent-expense-list__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-expense-list__copy strong {
    color: var(--sbo-navy, #153562);
    font: 14px/1.25 var(--sb-font-bold);
}

.agent-expense-list__copy small {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-expense-list em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-style: normal;
    color: var(--sbo-navy, #153562);
    font-family: var(--sb-font-bold);
    white-space: nowrap;
}

.agent-expense-list__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #22c55e;
}

.agent-expense-list__dot.is-warn {
    background: #f59e0b;
}

.agent-expense-card__actions,
.agent-stats-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-expense-card__actions .agent-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    gap: 6px;
}

.agent-staff-watch-card {
    display: grid;
    gap: 12px;
}

.agent-staff-watch {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding-top: 2px;
}

.agent-staff-watch__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--sbo-navy);
    font: 14px var(--sb-font-bold);
    flex-shrink: 0;
}

.agent-staff-watch__copy {
    min-width: 0;
}

.agent-staff-watch__copy strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 16px/1.25 var(--sb-font-bold);
}

.agent-staff-watch__copy small {
    display: block;
    margin-top: 2px;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-staff-watch__status {
    display: inline-flex;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    font-style: normal;
    color: #b42318;
    background: #fef3f2;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-staff-watch__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 96px;
}

.agent-staff-watch__ask,
.agent-staff-watch__profile {
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    justify-content: center;
}

.agent-staff-watch__ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agent-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-timeline li {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 16px 18px;
    border-left: 2px solid #e7ebf0;
    margin-left: 6px;
}

.agent-timeline li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.agent-timeline li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 0 0 3px #fff;
}

.agent-timeline li.is-positive::before { background: var(--ad-success); }
.agent-timeline li.is-danger::before { background: var(--ad-danger); }
.agent-timeline li.is-info::before { background: var(--ad-info); }

.agent-timeline strong {
    display: block;
    font-size: 14px;
}

.agent-timeline time {
    color: var(--sbo-muted);
    font-size: 12px;
    white-space: nowrap;
}

.agent-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.agent-stats-grid article {
    padding: 14px 10px;
    border-radius: 14px;
    text-align: center;
}

.agent-stats-grid strong {
    display: block;
    margin-bottom: 4px;
    font: 15px var(--sb-font-bold);
}

.agent-stats-grid span {
    color: #000;
    font-size: 12px;
}

.agent-stats-grid .is-deposits {
    background: #e7f8f1;
}
.agent-stats-grid .is-deposits strong { color: var(--ad-success-deep); }

.agent-stats-grid .is-withdrawals {
    background: var(--ad-danger-soft);
}

.agent-stats-grid .is-commission {
    background: #e8f1fe;
}
.agent-stats-grid .is-commission strong { color: #2563eb; }

.agent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-btn:disabled,
.agent-btn.is-disabled,
.agent-btn--call.is-disabled,
.agent-btn--whatsapp.is-disabled {
    cursor: not-allowed;
}

.agent-btn--success {
    color: #fff;
    background: var(--ad-success);
}

.agent-btn--danger {
    width: 100%;
    color: #fff;
    background: var(--ad-danger);
}

.agent-btn--navy {
    color: #fff;
    background: var(--sbo-navy);
}

.agent-btn--warn {
    color: #fff;
    background: #f59e0b;
}

.agent-btn--outline {
    color: var(--sbo-navy);
    border-color: #d5dce6;
    background: #fff;
}

.agent-btn--ghost,
.agent-btn.is-disabled {
    color: #94a3b8;
    border-color: #e2e8f0;
    background: #f8fafc;
    pointer-events: none;
}

.agent-empty {
    margin: 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

@media (min-width: 768px) {
    .agent-dashboard-content {
        padding: 24px 24px 120px;
        gap: 16px;
    }

    .agent-staff-watch {
        grid-template-columns: 52px 1fr auto;
        gap: 14px;
    }

    .agent-staff-watch__avatar {
        width: 52px;
        height: 52px;
    }
}

/* —— Money Agent: Staff Watch Ask modal —— */
.agent-ask-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-ask-staff-modal.is-open {
    display: grid;
}

.agent-ask-staff-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-ask-staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 20px;
    background: #f8fafc;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-ask-staff-modal__header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 18px 16px;
    background: var(--sbo-navy, #0f2747);
    color: #fff;
}

.agent-ask-staff-modal__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font: 14px var(--sb-font-bold);
}

.agent-ask-staff-modal__header-copy h2 {
    margin: 0;
    color: #fff;
    font: 18px/1.25 var(--sb-font-bold);
}

.agent-ask-staff-modal__header-copy p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.35;
}

.agent-ask-staff-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    align-self: start;
}

.agent-ask-staff-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.agent-ask-staff-modal__form {
    display: flex;
    flex-direction: column;
}

.agent-ask-staff-modal__body {
    padding: 16px 18px 8px;
    display: grid;
    gap: 12px;
}

.agent-ask-staff-modal__label {
    margin: 0;
    color: #64748b;
    font: 12px/1.2 var(--sb-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-ask-staff-modal__prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-ask-staff-prompt {
    appearance: none;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid #d0d7e2;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: 13px/1.3 var(--sb-font-semibold);
    cursor: pointer;
    text-align: left;
}

.agent-ask-staff-prompt.is-selected,
.agent-ask-staff-prompt:hover {
    border-color: var(--sbo-navy, #0f2747);
    color: var(--sbo-navy, #0f2747);
    background: #fff;
}

.agent-ask-staff-modal__textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border: 1.5px solid #d0d7e2;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    font: 14px/1.45 inherit;
    resize: vertical;
}

.agent-ask-staff-modal__textarea:focus {
    outline: none;
    border-color: var(--sbo-navy, #0f2747);
    box-shadow: 0 0 0 3px rgba(15, 39, 71, 0.12);
}

.agent-ask-staff-modal__textarea::placeholder {
    color: #94a3b8;
}

.agent-ask-staff-modal__error {
    margin: 0;
    color: var(--ad-danger, #b42318);
    font-size: 13px;
}

.agent-ask-staff-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    padding: 12px 18px 18px;
}

.agent-ask-staff-modal__cancel {
    min-height: 48px;
    border-radius: 14px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font: 14px/1 var(--sb-font-semibold);
    cursor: pointer;
}

.agent-ask-staff-modal__submit {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* =========================================================
   Money Agent ? Today ? All Outlets
   ========================================================= */
.agent-outlets-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px;
}

.agent-outlets-hero h1 {
    margin: 0;
    font: normal 26px/1.15 var(--sb-font-bold);
}

.agent-outlets-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-all-alert {
    padding: 16px;
    border: 1.5px solid #f0a8a8;
    border-radius: 16px;
    background: #fff8f8;
    box-shadow: 0 8px 22px rgba(226, 85, 85, 0.08);
}

.agent-all-alert__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #b91c1c;
}

.agent-all-alert__head strong {
    font: 16px var(--sb-font-bold);
}

.agent-all-alert ul {
    margin: 0 0 14px;
    padding-left: 18px;
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.55;
}

.agent-all-alert .agent-btn--danger {
    width: 100%;
}

.agent-all-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-all-totals article {
    padding: 14px;
    border: 1px solid var(--sbo-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.04);
}

.agent-all-totals span {
    display: block;
    margin-bottom: 6px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-all-totals strong {
    display: block;
    font: 18px var(--sb-font-bold);
    color: var(--sbo-text);
}

.agent-all-totals strong.is-up { color: var(--ad-success-deep); }
.agent-all-totals strong.is-down { color: var(--ad-danger); }

.agent-all-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.agent-all-status-card {
    padding: 14px;
    border: 1px solid #eef1f5;
    border-left-width: 4px;
    border-radius: 14px;
    background: #f8fafc;
}

.agent-all-status-card.is-danger { border-left-color: #e25555; }
.agent-all-status-card.is-warn { border-left-color: #f59e0b; }
.agent-all-status-card.is-success { border-left-color: #10b981; }

.agent-all-status-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.agent-all-status-card__head strong {
    display: block;
    margin-bottom: 6px;
    font: 16px var(--sb-font-bold);
}

.agent-all-status-card__head em {
    font-style: normal;
    padding: 3px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
}

.agent-all-status-card__head em.is-open {
    color: var(--ad-success-deep);
    background: #e7f8f1;
}

.agent-all-status-card__head em.is-closed {
    color: #64748b;
    background: #eef2f6;
}

.agent-all-status-card__badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-all-status-card.is-danger .agent-all-status-card__badge {
    color: #b91c1c;
    background: #fdecec;
}

.agent-all-status-card.is-warn .agent-all-status-card__badge {
    color: #c27803;
    background: #fff7e8;
}

.agent-all-status-card.is-success .agent-all-status-card__badge {
    color: #047857;
    background: #e7f8f1;
}

.agent-all-status-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.agent-all-status-card__metrics > div {
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.agent-all-status-card__metrics span {
    display: block;
    margin-bottom: 4px;
    color: var(--sbo-muted);
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-all-status-card__metrics strong {
    display: block;
    font: 15px var(--sb-font-bold);
}

.agent-all-status-card__metrics .is-low {
    background: #fff7e8;
    border-color: #fde68a;
}

.agent-all-status-card__metrics .is-low strong {
    color: #c27803;
}

.agent-all-status-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-all-status-card__foot p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-all-status-card__foot a {
    flex-shrink: 0;
    color: #3366cc;
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
}

.agent-all-shortage {
    background: var(--ad-danger-soft);
    border-color: #f7c7c7;
}

.agent-all-shortage > strong {
    display: block;
    margin: 2px 0 14px;
    font: 18px var(--sb-font-bold);
    color: #b91c1c;
}

.agent-all-not-closed {
    background: var(--ad-warn-soft);
    border-color: #fde68a;
}

.agent-all-not-closed > strong {
    display: block;
    margin: 2px 0 12px;
    font: 18px var(--sb-font-bold);
    color: #92400e;
}

.agent-all-not-closed ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.agent-all-not-closed li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #fde68a;
    font-size: 14px;
}

.agent-all-not-closed li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-all-not-closed em {
    font-style: normal;
    color: #92400e;
    font-size: 12px;
    white-space: nowrap;
}

.agent-all-not-closed .agent-btn--warn {
    width: 100%;
}

.agent-all-check-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.agent-all-check-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}

.agent-all-check-table th,
.agent-all-check-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
    white-space: nowrap;
}

.agent-all-check-table th {
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-all-check-table td.is-down { color: var(--ad-danger); font-family: var(--sb-font-semibold); }
.agent-all-check-table td.is-up { color: var(--ad-success-deep); font-family: var(--sb-font-semibold); }

.agent-all-check-status {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    font-style: normal;
}

.agent-all-check-status.is-danger {
    color: #b91c1c;
    background: #fdecec;
}

.agent-all-check-status.is-warn {
    color: #c27803;
    background: #fff7e8;
}

.agent-all-check-status.is-success {
    color: #047857;
    background: #e7f8f1;
}

.agent-timeline small {
    display: block;
    margin-top: 2px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-timeline li.is-warn::before { background: var(--ad-warn); }

.agent-all-footer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.agent-all-footer-stats article {
    padding: 14px 10px;
    border: 1px solid var(--sbo-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.04);
}

.agent-all-footer-stats span {
    display: block;
    margin-bottom: 6px;
    color: var(--sbo-muted);
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-all-footer-stats strong {
    display: block;
    font: 15px var(--sb-font-bold);
}

.agent-all-footer-stats strong.is-up {
    color: var(--ad-success-deep);
}

@media (min-width: 640px) {
    .agent-all-totals {
        grid-template-columns: repeat(4, 1fr);
    }

    .agent-all-status-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .agent-outlets-hero h1 {
        font-size: 28px;
    }
}

/* =========================================================
   Money Agent ? My Outlets (list)
   ========================================================= */
.agent-outlets-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-outlets-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font: 12px var(--sb-font-semibold);
}

.agent-outlets-chips .is-total,
.agent-outlets-chips .is-closed {
    color: #64748b;
    background: #eef2f6;
}

.agent-outlets-chips .is-open {
    color: #1d4ed8;
    background: #e8f1fe;
}

.agent-outlets-chips .is-short {
    color: #b91c1c;
    background: #fdecec;
}

.agent-outlets-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.agent-outlets-filters button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font: 13px var(--sb-font-semibold);
}

.agent-outlets-filters button.is-active {
    color: #fff;
    border-color: #3366cc;
    background: #3366cc;
}

.agent-outlets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-outlet-item {
    padding: 16px;
    border: 1px solid var(--sbo-line);
    border-left-width: 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
}

.agent-outlet-item.is-danger { border-left-color: #e25555; }
.agent-outlet-item.is-warn { border-left-color: #f59e0b; }
.agent-outlet-item.is-success { border-left-color: #10b981; }

.agent-outlet-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.agent-outlet-item__head strong {
    display: block;
    font: 18px var(--sb-font-bold);
}

.agent-outlet-item__head small {
    display: block;
    margin-top: 3px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-outlet-item__badge {
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-outlet-item.is-danger .agent-outlet-item__badge {
    color: #b91c1c;
    background: #fdecec;
}

.agent-outlet-item.is-warn .agent-outlet-item__badge {
    color: #c27803;
    background: #fff7e8;
}

.agent-outlet-item.is-success .agent-outlet-item__badge {
    color: #047857;
    background: #e7f8f1;
}

.agent-outlet-item__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.agent-outlet-item__metrics > div {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.agent-outlet-item__metrics span {
    display: block;
    margin-bottom: 4px;
    color: var(--sbo-muted);
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-outlet-item__metrics strong {
    display: block;
    font: 16px var(--sb-font-bold);
}

.agent-outlet-item__metrics i {
    display: block;
    margin-top: 4px;
    font: 12px var(--sb-font-semibold);
    font-style: normal;
    color: #e25555;
}

.agent-outlet-item__metrics .is-low {
    background: #fff7e8;
    border-color: #fde68a;
}

.agent-outlet-item__metrics .is-low i {
    color: #c27803;
}

.agent-outlet-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-outlet-item__foot p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-outlet-item__foot .agent-btn--danger,
.agent-outlet-item__foot .agent-btn--warn,
.agent-outlet-item__foot .agent-btn--navy {
    width: auto;
    min-width: 128px;
}

/* =========================================================
   Money Agent ? Outlet Details
   ========================================================= */
.agent-outlet-details__back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    color: #3366cc;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
}

.agent-outlet-details__hero h1 {
    margin: 0;
    font: normal 28px/1.15 var(--sb-font-bold);
    color: var(--sbo-text);
}

.agent-outlet-details__location {
    margin: 8px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-outlet-details__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-outlet-details__meta em {
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    font: 12px var(--sb-font-semibold);
}

.agent-outlet-details__meta em.is-open {
    color: #1d4ed8;
    background: #e8f1fe;
}

.agent-outlet-details__meta em.is-closed {
    color: #64748b;
    background: #eef2f6;
}

.agent-outlet-details__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #b91c1c;
    background: #fdecec;
    font: 14px var(--sb-font-semibold);
}

.agent-outlet-details__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.agent-outlet-details__actions .agent-btn {
    width: 100%;
}

.agent-outlet-details__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.agent-outlet-details__pills span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: #64748b;
    background: #eef2f6;
    font: 12px var(--sb-font-semibold);
}

.agent-outlet-shortage {
    border-color: #f7c7c7;
    background: #fff8f8;
}

.agent-outlet-shortage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.agent-outlet-shortage__head strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b91c1c;
    font: 16px var(--sb-font-bold);
}

.agent-outlet-shortage__head em {
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    color: #b91c1c;
    background: #fdecec;
    font: 11px var(--sb-font-semibold);
}

.agent-outlet-shortage ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.agent-outlet-shortage li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #f7c7c7;
    font-size: 14px;
}

.agent-outlet-shortage li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-outlet-shortage li.is-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f0a8a8;
    font-family: var(--sb-font-semibold);
}

.agent-outlet-shortage .is-down {
    color: var(--ad-danger);
    font-family: var(--sb-font-bold);
}

.agent-outlet-shortage__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-outlet-shortage__actions .agent-btn--danger {
    width: 100%;
}

.agent-outlet-movement__rows {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.agent-outlet-movement__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.agent-outlet-movement__rows span {
    color: var(--sbo-muted);
    font: 13px var(--sb-font-semibold);
}

.agent-outlet-movement__rows strong {
    font: 16px var(--sb-font-bold);
}

.agent-outlet-movement__rows .is-up { color: var(--ad-success-deep); }
.agent-outlet-movement__rows .is-down { color: var(--ad-danger); }
.agent-outlet-movement__rows .is-net { color: #2563eb; }

.agent-outlet-movement > .agent-btn {
    width: 100%;
}

.agent-outlet-staff {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px 12px;
    align-items: start;
    padding: 4px 0 8px;
}

.agent-outlet-staff + .agent-outlet-staff {
    border-top: 1px solid #eef1f5;
    padding-top: 14px;
    margin-top: 6px;
}

.agent-outlet-staff__copy strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.agent-outlet-staff__copy small {
    display: block;
    margin-top: 4px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-outlet-staff__copy em {
    font-style: normal;
    padding: 3px 8px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
}

.agent-outlet-staff__copy em.is-danger {
    color: #b91c1c;
    background: #fdecec;
}

.agent-outlet-staff__copy em.is-warn {
    color: #c27803;
    background: #fff7e8;
}

.agent-outlet-staff__copy em.is-success {
    color: #047857;
    background: #e7f8f1;
}

.agent-outlet-staff__copy em.is-muted {
    color: #64748b;
    background: #eef2f6;
}

.agent-outlet-staff__actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.agent-outlet-staff__link {
    color: #3366cc;
    text-decoration: none;
    font: 13px var(--sb-font-semibold);
}

@media (min-width: 640px) {
    .agent-outlet-staff {
        grid-template-columns: 42px 1fr auto;
        align-items: center;
    }

    .agent-outlet-staff__actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

/* =========================================================
   Money Agent ? My Staff
   ========================================================= */
.agent-staff-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-staff-hero h1 {
    margin: 0;
    font: normal 28px/1.15 var(--sb-font-bold);
}

.agent-staff-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-staff-add {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.agent-staff-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
}

.agent-staff-search__icon {
    color: #94a3b8;
    display: inline-flex;
}

.agent-staff-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 14px var(--sb-font-regular);
    color: var(--sbo-ink, #1e293b);
}

.agent-staff-search__loader {
    flex: 0 0 auto;
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d7dde5;
    border-top-color: #3366cc;
    border-radius: 50%;
    animation: sbo-button-spin .7s linear infinite;
}

.agent-staff-search.is-loading .agent-staff-search__loader {
    display: block;
}

.agent-staff-search__status {
    min-height: 17px;
    margin: -6px 2px 0;
    color: var(--sbo-muted);
    font-size: 11px;
}

.agent-staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-staff-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font: 12px var(--sb-font-semibold);
}

.agent-staff-chips .is-total {
    color: #1d4ed8;
    background: #e8f1fe;
}

.agent-staff-chips .is-on-duty {
    color: #047857;
    background: #e7f8f1;
}

.agent-staff-chips .is-alerts {
    color: #b91c1c;
    background: #fdecec;
}

.agent-staff-chips .is-off-duty {
    color: #64748b;
    background: #eef2f6;
}

.agent-staff-filters {
    display: flex;
    gap: 8px;
    padding: 4px;
    border-radius: 12px;
    background: #eef2f6;
    overflow-x: auto;
}

.agent-staff-filters button {
    flex: 1 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font: 13px var(--sb-font-semibold);
}

.agent-staff-filters button.is-active {
    color: #1e293b;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.agent-staff-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-staff-card {
    padding: 16px;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
}

.agent-staff-card__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.agent-staff-card__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f1fe;
    color: #3366cc;
    font: 14px var(--sb-font-bold);
}

.agent-staff-card__copy {
    flex: 1;
    min-width: 0;
}

.agent-staff-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.agent-staff-card__title strong {
    font: 16px var(--sb-font-bold);
}

.agent-staff-card__copy > small {
    display: block;
    margin-top: 2px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-staff-card__copy > p {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-staff-card__badge {
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-staff-card.is-danger .agent-staff-card__badge {
    color: #b91c1c;
    background: #fdecec;
}

.agent-staff-card.is-warn .agent-staff-card__badge {
    color: #c27803;
    background: #fff7e8;
}

.agent-staff-card.is-success .agent-staff-card__badge {
    color: #047857;
    background: #e7f8f1;
}

.agent-staff-card.is-muted .agent-staff-card__badge {
    color: #64748b;
    background: #eef2f6;
}

.agent-staff-card__alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-style: normal;
    font: 12px var(--sb-font-semibold);
}

.agent-staff-card__alert.is-danger { color: #b91c1c; }
.agent-staff-card__alert.is-warn { color: #c27803; }

.agent-staff-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f6;
}

.agent-staff-card__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-btn--call {
    min-height: 36px;
    padding: 0 12px;
    color: #fff;
    background: #22c55e;
    border: 1px solid #22c55e;
}

.agent-btn--whatsapp {
    min-height: 36px;
    padding: 0 12px;
    color: #16a34a;
    background: #fff;
    border: 1px solid #22c55e;
}

.agent-btn--whatsapp-solid {
    min-height: 44px;
    color: #fff;
    background: #22c55e;
    border: 1px solid #22c55e;
}

.agent-btn--broadcast {
    min-height: 44px;
    color: #3366cc;
    background: #fff;
    border: 1px solid #3366cc;
}

.agent-btn--call.is-disabled,
.agent-btn--whatsapp.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.agent-staff-card__profile {
    color: #3366cc;
    font: 13px var(--sb-font-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.agent-staff-profile {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-staff-profile__back {
    display: inline-flex;
    align-items: center;
    color: #3366cc;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
}

.agent-staff-profile__hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
}

.agent-staff-profile__hero.is-danger .agent-staff-card__badge {
    color: #b91c1c;
    background: #fdecec;
}

.agent-staff-profile__hero.is-warn .agent-staff-card__badge {
    color: #c27803;
    background: #fff7e8;
}

.agent-staff-profile__hero.is-success .agent-staff-card__badge {
    color: #047857;
    background: #e7f8f1;
}

.agent-staff-profile__hero.is-muted .agent-staff-card__badge {
    color: #64748b;
    background: #eef2f6;
}

.agent-staff-profile__avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f1fe;
    color: #3366cc;
    font: 18px var(--sb-font-bold);
}

.agent-staff-profile__identity {
    flex: 1;
    min-width: 0;
}

.agent-staff-profile__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.agent-staff-profile__title h1 {
    margin: 0;
    font: normal 24px/1.2 var(--sb-font-bold);
    color: var(--sbo-text);
}

.agent-staff-profile__role {
    margin: 4px 0 0;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-staff-profile__meta {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-staff-profile__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

.agent-staff-profile__alert.is-warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.agent-staff-profile__alert strong {
    display: block;
    font: 14px var(--sb-font-bold);
}

.agent-staff-profile__alert p {
    margin: 2px 0 0;
    font-size: 13px;
}

.agent-staff-profile__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.agent-staff-profile__contact > div > span {
    display: block;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-staff-profile__contact > div > strong {
    display: block;
    margin-top: 4px;
    font: 16px var(--sb-font-semibold);
}

.agent-staff-profile__contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-staff-profile__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.agent-staff-profile__stats article {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}

.agent-staff-profile__stats span {
    display: block;
    color: var(--sbo-muted);
    font-size: 11px;
}

.agent-staff-profile__stats strong {
    display: block;
    margin-top: 6px;
    font: 15px var(--sb-font-bold);
}

.agent-staff-profile__stats .is-up { color: #047857; }
.agent-staff-profile__stats .is-down { color: #b91c1c; }

.agent-staff-profile__list,
.agent-staff-profile__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-staff-profile__list li,
.agent-staff-profile__facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}

.agent-staff-profile__list strong,
.agent-staff-profile__facts strong {
    font: 14px var(--sb-font-semibold);
}

.agent-staff-profile__list small,
.agent-staff-profile__facts span {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-staff-profile__facts li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.agent-staff-profile__pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.agent-staff-profile__pin-value {
    font: 15px var(--sb-font-bold);
    letter-spacing: 0.12em;
    min-width: 3.5ch;
    text-align: right;
}

.agent-staff-profile__pin-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.agent-staff-profile__pin-toggle .agent-staff-profile__pin-eye {
    display: none;
}

.agent-staff-profile__pin-toggle .agent-staff-profile__pin-eye.is-show {
    display: block;
}

.agent-staff-profile__pin-toggle.is-visible .agent-staff-profile__pin-eye.is-show {
    display: none;
}

.agent-staff-profile__pin-toggle.is-visible .agent-staff-profile__pin-eye.is-hide {
    display: block;
}

.agent-staff-profile__pin-toggle:hover,
.agent-staff-profile__pin-toggle:focus-visible {
    color: #3366cc;
    background: #e8f1fe;
    outline: none;
}

@media (max-width: 420px) {
    .agent-staff-profile__stats {
        grid-template-columns: 1fr;
    }

    .agent-staff-profile__contact {
        align-items: stretch;
    }

    .agent-staff-profile__contact-actions {
        width: 100%;
    }

    .agent-staff-profile__contact-actions .agent-btn {
        flex: 1;
        justify-content: center;
    }
}

.agent-staff-attention {
    padding: 14px;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 16px;
    background: #fff7f7;
}

.agent-staff-attention > header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #b91c1c;
}

.agent-staff-attention > header strong {
    font: 15px var(--sb-font-bold);
}

.agent-staff-attention > header em {
    font-style: normal;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font: 11px var(--sb-font-bold);
}

.agent-staff-attention ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-staff-attention li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #fee2e2;
}

.agent-staff-attention li > div {
    flex: 1;
    min-width: 0;
}

.agent-staff-attention li strong {
    display: block;
    font: 14px var(--sb-font-semibold);
}

.agent-staff-attention li small {
    color: #b91c1c;
    font-size: 12px;
}

.agent-staff-attention .agent-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
}

.agent-staff-broadcast {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-staff-broadcast > p {
    margin: 0;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-staff-broadcast > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-staff-broadcast .agent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.agent-staff-add-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    color: #3366cc;
    background: #f8fafc;
    text-decoration: none;
    font: 14px var(--sb-font-semibold);
}

.agent-staff-add-block span {
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 420px) {
    .agent-staff-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .agent-staff-card__profile {
        text-align: right;
    }

    .agent-staff-broadcast > div {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Money Agent ? Add Staff Modal
   ========================================================= */
.agent-add-outlet-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-add-outlet-modal.is-open {
    display: grid;
}

.agent-add-outlet-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-add-outlet-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-add-outlet-modal__header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 22px 22px 16px;
    background: #fff;
    border-bottom: 1px solid #EEF2F7;
}

.agent-add-outlet-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E8F1FE;
    color: #2563EB;
}

.agent-add-outlet-modal__heading h2 {
    margin: 0;
    color: #0F172A;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-add-outlet-modal__heading p {
    margin: 4px 0 0;
    color: #94A3B8;
    font: 13px/1.35 var(--sb-font-regular);
}

.agent-add-outlet-modal__heading strong {
    display: block;
    margin-top: 4px;
    color: #2563EB;
    font: normal 16px/1.3 var(--sb-font-bold);
}

.agent-add-outlet-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.agent-add-outlet-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.agent-add-outlet-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.agent-add-outlet-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.agent-add-outlet-field > span {
    color: #334155;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3;
}

.agent-add-outlet-field > span i {
    color: #EF4444;
    font-style: normal;
}

.agent-add-outlet-field > input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font: 15px/1.2 var(--sb-font-regular);
    outline: 0;
}

.agent-add-outlet-field > input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.agent-add-outlet-phone {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    height: 48px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.agent-add-outlet-phone:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.agent-add-outlet-phone em {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 78px;
    height: 100%;
    padding: 0 12px;
    color: #64748B;
    font: 15px/1 var(--sb-font-semibold);
    font-style: normal;
    border-right: 1px solid #E5E7EB;
    background: #F8FAFC;
}

.agent-add-outlet-phone em svg {
    width: 10px;
    height: 6px;
    color: #94A3B8;
    flex: 0 0 auto;
}

.agent-add-outlet-field .agent-add-outlet-phone input[type="tel"],
.agent-add-outlet-phone input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 14px !important;
    background: #fff !important;
    font: 15px/1.2 var(--sb-font-regular) !important;
    outline: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}

.agent-add-outlet-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    background: #EFF6FF;
}

.agent-add-outlet-tip__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563EB;
}

.agent-add-outlet-tip__icon svg {
    width: 18px;
    height: 18px;
}

.agent-add-outlet-tip p {
    margin: 0;
    color: #475569;
    font: 13px/1.45 var(--sb-font-regular);
}

.agent-add-outlet-tip strong {
    color: #2563EB;
    font-family: var(--sb-font-semibold);
    font-size: 13px;
    font-weight: normal;
}

.agent-add-outlet-error {
    margin: 0;
    color: #DC2626;
    font: 12px/1.4 var(--sb-font-regular);
}

.agent-add-outlet-modal__footer {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 0 22px 22px;
    background: #fff;
}

.agent-add-outlet-cancel,
.agent-add-outlet-submit {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.agent-add-outlet-cancel {
    border: 1px solid #D1D5DB;
    background: #fff;
    color: #334155;
}

.agent-add-outlet-submit {
    border: 0;
    background: #2563EB;
    color: #fff;
}

.agent-add-outlet-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 400px) {
    .agent-add-outlet-modal__footer {
        grid-template-columns: 1fr;
    }

    .agent-add-outlet-cancel {
        order: 2;
    }

    .agent-add-outlet-submit {
        order: 1;
        white-space: normal;
        height: auto;
        min-height: 48px;
        padding: 12px 14px;
    }
}

.agent-add-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-add-staff-modal.is-open {
    display: grid;
}

.agent-add-staff-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-add-staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-add-staff-modal__header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 22px 22px 16px;
    background: #fff;
    border-bottom: 1px solid #EEF2F7;
}

.agent-add-staff-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563EB;
    background: #E8F1FE;
}

.agent-add-staff-modal__heading h2 {
    margin: 0;
    color: #0F172A;
    font: 18px/1.25 var(--sb-font-bold);
}

.agent-add-staff-modal__heading p {
    margin: 4px 0 0;
    color: #94A3B8;
    font: 13px/1.35 var(--sb-font-regular);
}

.agent-add-staff-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.agent-add-staff-modal__close:hover {
    background: #E2E8F0;
}

.agent-add-staff-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.agent-add-staff-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.agent-add-staff-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.agent-add-staff-field > span {
    color: #334155;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.agent-add-staff-field > span i {
    color: #EF4444;
    font-style: normal;
}

.agent-add-staff-field input,
.agent-add-staff-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font: 15px/1.2 var(--sb-font-regular);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
}

.agent-add-staff-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.agent-add-staff-field input:focus,
.agent-add-staff-field select:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.agent-add-staff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.agent-add-staff-phone {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    height: 48px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.agent-add-staff-phone:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.agent-add-staff-phone em {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 78px;
    padding: 0 12px;
    color: #64748B;
    font: 15px/1 var(--sb-font-semibold);
    font-style: normal;
    border-right: 1px solid #E5E7EB;
    background: #F8FAFC;
}

.agent-add-staff-phone em svg {
    width: 10px;
    height: 6px;
    color: #94A3B8;
}

.agent-add-staff-phone input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 14px !important;
    background: transparent !important;
    font: 15px/1.2 var(--sb-font-regular) !important;
}

.agent-add-staff-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    background: #EFF6FF;
}

.agent-add-staff-tip__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 11px/1 var(--sb-font-bold);
    text-transform: lowercase;
}

.agent-add-staff-tip p {
    margin: 0;
    color: #475569;
    font: 13px/1.45 var(--sb-font-regular);
}

.agent-add-staff-error {
    margin: -8px 0 0;
    color: #DC2626;
    font-size: 12px;
}

.agent-add-staff-alert {
    padding: 10px 12px;
    border-radius: 10px;
    color: #B91C1C;
    background: #FEECEC;
    font-size: 13px;
}

.agent-add-staff-modal__footer {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 0 22px 22px;
    background: #fff;
}

.agent-add-staff-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #2563EB;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
}

.agent-add-staff-submit svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.agent-add-staff-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.agent-add-staff-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    color: #334155;
    border: 1px solid #D1D5DB;
    background: #fff;
    font-family: var(--sb-font-semibold);
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 480px) {
    .agent-add-staff-row {
        grid-template-columns: 1fr;
    }

    .agent-add-staff-modal__footer {
        grid-template-columns: 1fr;
    }

    .agent-add-staff-cancel {
        order: 2;
    }

    .agent-add-staff-submit {
        order: 1;
    }
}

.agent-staff-add-block {
    width: 100%;
    cursor: pointer;
}

/* =========================================================
   Money Agent ? More
   ========================================================= */
.agent-more-hero {
    padding: 2px;
}

.agent-more-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-more-profile h1 {
    margin: 0;
    font: 22px var(--sb-font-bold);
}

.agent-more-profile p {
    margin: 4px 0 0;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-more-card {
    padding: 14px;
    border: 1px solid var(--sbo-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 50, 80, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-more-card__label {
    margin: 0 0 6px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-more-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.agent-more-row:hover {
    background: #f8fafc;
}

.agent-more-row strong {
    font: 15px var(--sb-font-semibold);
}

.agent-more-row span {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-more-logout .agent-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 12px !important;
}

.agent-sms-credits-hero {
    display: grid;
    gap: 4px;
}

.agent-sms-credits-hero .agent-dashboard-hero__link {
    display: inline-flex;
    margin-bottom: 8px;
}

.agent-sms-credits-hero h1 {
    margin: 0;
    font: normal 26px/1.15 var(--sb-font-bold);
}

.agent-sms-credits-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-sms-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.agent-sms-balance.is-low {
    border-color: #f0a8a8;
    background: #fff8f8;
}

.agent-sms-balance__copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.agent-sms-balance__icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef4ff;
    color: #1d4ed8;
    flex: 0 0 auto;
}

.agent-sms-balance.is-low .agent-sms-balance__icon {
    background: #fee2e2;
    color: #b91c1c;
}

.agent-sms-balance__copy strong {
    display: block;
    margin-top: 2px;
    font: 28px/1.1 var(--sb-font-bold);
}

.agent-sms-balance__copy p {
    margin: 4px 0 0;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-sms-purchase-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.agent-sms-purchase-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e8eef5;
}

.agent-sms-purchase-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.agent-sms-purchase-list strong {
    display: block;
    font: 15px var(--sb-font-semibold);
}

.agent-sms-purchase-list small {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-sms-purchase-list__right {
    text-align: right;
}

.agent-sms-purchase-list__right em {
    display: block;
    font: 14px var(--sb-font-semibold);
    font-style: normal;
}

.agent-btn--success.is-disabled {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
}


/* =========================================================
   Money Agent - Reports (aligned with Staff / Cash theme)
   ========================================================= */
.agent-reports-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-reports-hero h1 {
    margin: 0;
    color: #222222;
    font: normal 22px/1.2 var(--sb-font-bold);
    letter-spacing: -0.02em;
}

.agent-reports-hero p {
    margin: 6px 0 0;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-reports-period-menu {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
}

.agent-reports-period-menu summary {
    list-style: none;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    gap: 8px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #3366CC;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font: normal 14px/1 var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-reports-period-menu summary::-webkit-details-marker { display: none; }

.agent-reports-period-menu summary svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.agent-reports-period-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    min-width: 168px;
    padding: 8px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-reports-period-menu a,
.agent-reports-period-menu button {
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #334155;
    background: transparent;
    text-align: left;
    text-decoration: none;
    font: normal 14px/1.2 var(--sb-font-semibold);
    cursor: pointer;
}

.agent-reports-period-menu a:hover,
.agent-reports-period-menu button:hover {
    background: #EFF7FF;
    color: #3366CC;
}

.agent-reports-period-menu button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.agent-reports-promo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1e3a5f 0%, #3366CC 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.18);
}

.agent-reports-promo strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-reports-promo ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 14px var(--sb-font-regular);
    opacity: 0.95;
}

.agent-reports-promo ul li::before {
    content: "\2713  ";
    color: #86efac;
}

.agent-reports-promo__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-btn--outline-light {
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.agent-reports-tabs {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 0 2px;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.agent-reports-tabs a,
.agent-reports-tabs button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #fff;
    text-decoration: none;
    font: normal 14px/1 var(--sb-font-semibold);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.agent-reports-tabs a.is-active,
.agent-reports-tabs button.is-active {
    color: #fff;
    border-color: #3366CC;
    background: #3366CC;
    box-shadow: none;
}

.agent-reports-tabs button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.agent-reports-panel {
    position: relative;
    display: grid;
    gap: 16px;
}

.agent-reports-panel [data-reports-panel-body] {
    display: grid;
    gap: 16px;
}

.agent-reports-panel.is-loading [data-reports-panel-body] {
    opacity: 0.45;
    pointer-events: none;
}

.agent-reports-loader {
    position: absolute;
    top: 24px;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.08);
    color: #222222;
    font: normal 14px/1.2 var(--sb-font-semibold);
}

.agent-reports-loader[hidden] {
    display: none;
}

.agent-reports-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(51, 102, 204, 0.2);
    border-top-color: #3366CC;
    border-radius: 50%;
    animation: agent-cash-spin 0.7s linear infinite;
}

.agent-reports-custom {
    display: none;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.agent-reports-custom.is-open {
    display: grid;
}

.agent-reports-custom[hidden] {
    display: none !important;
}

.agent-reports-custom__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.agent-reports-custom label,
.agent-reports-custom__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-reports-custom span,
.agent-reports-custom__field > span:first-child {
    color: #8a94a6;
    font: normal 14px/1.2 var(--sb-font-semibold);
    text-transform: none;
    letter-spacing: 0;
}

.agent-reports-custom input,
.agent-reports-custom__control input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1.5px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    font: 16px var(--sb-font-regular);
    box-shadow: none;
}

.agent-reports-custom__control input:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-reports-custom__apply {
    width: auto;
    min-height: 44px;
    min-width: 96px;
    padding: 0 20px;
    border-radius: 10px;
}

.agent-reports-commission {
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #3366CC 0%, #4B7BE5 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(51, 102, 204, 0.22);
}

.agent-reports-commission p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9);
    font: normal 14px/1.2 var(--sb-font-semibold);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
}

.agent-reports-commission strong {
    display: block;
    color: #fff;
    font: normal 28px/1.15 var(--sb-font-bold);
}

.agent-reports-commission small {
    display: block;
    margin-top: 6px;
    font: 14px var(--sb-font-regular);
    opacity: 0.95;
}

.agent-reports-commission a,
.agent-reports-commission__link {
    display: inline-block;
    margin-top: 14px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font: normal 14px/1.2 var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.agent-reports-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-reports-kpis article {
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    box-shadow: none;
}

.agent-reports-kpis span {
    display: block;
    color: #000;
    font: clamp(14px, 3.4vw, 16px) var(--sb-font-regular);
    text-transform: none;
    letter-spacing: 0;
}

.agent-reports-kpis strong {
    display: block;
    margin-top: 8px;
    color: #000;
    font: normal clamp(16px, 4vw, 22px)/1.15 var(--sb-font-bold);
    word-break: break-word;
}

.agent-reports-kpis small,
.agent-reports-commission small,
.agent-reports-cash-kpis strong.is-up,
.is-up { color: #059669; }

.agent-reports-kpis small.is-down,
.is-down { color: #dc2626; }

.agent-reports-card {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-reports-card > header h2 {
    margin: 0;
    color: #222222;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-reports-card > .agent-btn {
    width: auto;
    align-self: flex-start;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px !important;
}

.agent-reports-card > .agent-btn--danger {
    width: auto;
}

.agent-reports-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-reports-table__head,
.agent-reports-table__row {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 0.8fr 0.9fr 0.7fr;
    gap: 6px;
    align-items: center;
}

.agent-reports-table__head {
    color: #8a94a6;
    font: normal 12px/1.2 var(--sb-font-semibold);
    text-transform: none;
    letter-spacing: 0;
}

.agent-reports-table__row {
    padding: 12px 0;
    border-top: 1px solid #E8EDF3;
    color: #1e293b;
    font: 14px var(--sb-font-regular);
}

.agent-reports-table__row em,
.agent-reports-list em,
.agent-reports-shortage-list em {
    font-style: normal;
    justify-self: start;
    padding: 3px 8px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-reports-table__row em.is-open,
.agent-reports-list em.is-info {
    color: #1d4ed8;
    background: #e8f1fe;
}

.agent-reports-table__row em.is-closed,
.agent-reports-list em.is-muted {
    color: #64748b;
    background: #eef2f6;
}

.agent-reports-table__row b.is-success,
.agent-reports-list em.is-success {
    color: #047857;
    background: #e7f8f1;
}

.agent-reports-table__row b.is-danger,
.agent-reports-list em.is-danger,
.agent-reports-list em.is-warn,
.agent-reports-shortage-list em.is-warn {
    color: #b91c1c;
    background: #fdecec;
}

.agent-reports-table__row b {
    font-weight: 600;
}

.agent-reports-table__row b.is-success {
    padding: 3px 8px;
    border-radius: 999px;
    background: #e7f8f1;
}

.agent-reports-table__row b.is-danger {
    padding: 3px 8px;
    border-radius: 999px;
}

.agent-reports-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-reports-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-reports-list li > div {
    flex: 1;
    min-width: 0;
}

.agent-reports-list strong {
    display: block;
    color: #1e293b;
    font: normal 16px/1.25 var(--sb-font-bold);
}

.agent-reports-list small {
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-reports-list__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF7FF;
    color: #3366CC;
}

.agent-reports-list__icon.is-success { background: #ecfdf3; color: #15803d; }
.agent-reports-list__icon.is-warn { background: #FFF7ED; color: #C27803; }
.agent-reports-list__icon.is-info { background: #EFF7FF; color: #3366CC; }

.agent-reports-shortage-kpis,
.agent-reports-cash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.agent-reports-shortage-kpis > div,
.agent-reports-cash-kpis > div {
    padding: 12px;
    border-radius: 15px;
    background: #F8FAFC;
    border: 1px solid #E0E8FF;
}

.agent-reports-shortage-kpis span,
.agent-reports-cash-kpis span {
    display: block;
    color: #000;
    font: 14px var(--sb-font-regular);
    text-transform: none;
    letter-spacing: 0;
}

.agent-reports-shortage-kpis strong,
.agent-reports-cash-kpis strong {
    display: block;
    margin-top: 6px;
    color: #000;
    font: normal 16px/1.2 var(--sb-font-bold);
}

.agent-reports-shortage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-reports-shortage-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f6;
}

.agent-reports-shortage-list strong {
    display: block;
    font: 13px var(--sb-font-semibold);
}

.agent-reports-shortage-list small {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-reports-shortage-list__meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.agent-reports-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 140px;
    padding: 8px 4px 0;
}

.agent-reports-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.agent-reports-chart__bars {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.agent-reports-chart__bars i,
.agent-reports-chart__bars b {
    display: block;
    width: 10px;
    height: 0;
    border-radius: 6px 6px 2px 2px;
    font-style: normal;
    cursor: pointer;
    transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease, transform 0.15s ease;
    transform-origin: bottom center;
}

.agent-reports-chart__bars i { background: #22c55e; }
.agent-reports-chart__bars b { background: #ef4444; font-weight: 400; }

.agent-reports-chart__bars i.is-hot,
.agent-reports-chart__bars b.is-hot {
    filter: brightness(1.08);
    transform: scaleX(1.15);
}

.agent-reports-chart__col > span {
    color: var(--sbo-muted);
    font-size: 11px;
}

.agent-reports-chart__legend {
    margin: 0;
    display: flex;
    gap: 14px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-reports-chart__legend i,
.agent-reports-chart__legend b {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    font-style: normal;
    font-weight: 400;
    vertical-align: middle;
}

.agent-reports-chart__legend i { background: #22c55e; }
.agent-reports-chart__legend b { background: #ef4444; }

.agent-reports-expense-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-reports-expenses-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-reports-expenses-card__header h2 {
    margin: 0;
}

.agent-reports-expenses-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--sbo-navy, #0f2747);
    font: 14px var(--sb-font-bold);
    flex-shrink: 0;
}

.agent-reports-expenses-kpis {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 10px;
}

.agent-reports-expenses-kpis span {
    display: block;
    margin-bottom: 4px;
    color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-reports-expenses-kpis strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 18px/1.2 var(--sb-font-bold);
}

.agent-reports-expenses-kpis strong.is-flagged {
    color: #f59e0b;
}

.agent-reports-expense-bars li {
    display: grid;
    grid-template-columns: 10px minmax(88px, 0.95fr) 1.4fr auto;
    gap: 8px;
    align-items: center;
}

.agent-reports-expense-bars__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.agent-reports-expense-bars strong {
    color: #334155;
    font: 13px var(--sb-font-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-reports-expense-bars i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef2f6;
    overflow: hidden;
}

.agent-reports-expense-bars em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f2747;
    font-style: normal;
}

.agent-reports-expense-bars b {
    min-width: 34px;
    text-align: right;
    color: #64748b;
    font: 12px var(--sb-font-semibold);
}

.agent-reports-expenses-card > .agent-btn {
    gap: 8px;
}

.agent-reports-footnote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #cfe9e0;
    background: #e7f8f1;
    pointer-events: none;
}

.agent-reports-footnote__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #0d9488;
}

.agent-reports-footnote__copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.agent-reports-footnote__copy strong {
    display: block;
    color: #0f172a;
    font: 14px/1.3 var(--sb-font-bold);
}

.agent-reports-footnote__copy small {
    display: block;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.agent-reports-footnote__chevron {
    flex-shrink: 0;
    color: #94a3b8;
    display: grid;
    place-items: center;
}

@media (max-width: 420px) {
    .agent-reports-custom {
        grid-template-columns: 1fr;
    }

    .agent-reports-table__head,
    .agent-reports-table__row {
        grid-template-columns: 0.8fr 1fr 0.8fr 0.9fr 0.7fr;
        font-size: 11px;
    }

    .agent-reports-promo__actions {
        grid-template-columns: 1fr;
    }
}

/* —— Money Agent: Reports detail modals —— */
.agent-report-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-report-modal.is-open {
    display: grid;
}

.agent-report-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.48);
    cursor: pointer;
}

.agent-report-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 1px solid #E0E8FF;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
    display: flex;
    flex-direction: column;
}

.agent-report-modal__header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 14px 16px;
    border-bottom: 0;
    background: #36C;
}

.agent-report-modal__icon,
.agent-report-modal__icon.is-green,
.agent-report-modal__icon.is-danger,
.agent-report-modal__icon.is-navy,
.agent-report-modal__icon.is-blue {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font: normal 16px/1 var(--sb-font-bold);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.agent-report-modal__header h2 {
    margin: 0;
    color: #fff;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-report-modal__header p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font: 14px/1.3 var(--sb-font-regular);
}

.agent-report-modal__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.agent-report-modal__close:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.agent-report-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    display: grid;
    gap: 14px;
    background: #F8FAFC;
    -webkit-overflow-scrolling: touch;
}

.agent-report-modal__section-title {
    margin: 0;
    color: #222222;
    font: normal 16px/1.25 var(--sb-font-bold);
}

.agent-report-modal__footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid #E8EDF3;
    background: #fff;
}

.agent-report-modal__footer.is-single {
    display: flex;
}

.agent-report-modal__footer .agent-btn {
    width: auto;
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    gap: 8px;
}

.agent-report-modal__primary {
    width: auto;
}

.agent-btn--outline-danger {
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
    background: #fff;
}

.agent-report-commission-hero,
.agent-commission-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: var(--sbo-navy, #153562);
    color: #fff;
}

.agent-report-commission-hero__copy > span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font: normal 11px/1.2 var(--sb-font-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-report-commission-hero__copy > strong {
    display: block;
    color: #fff;
    font: normal 30px/1.1 var(--sb-font-bold);
}

.agent-report-commission-hero__copy > small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font: 13px var(--sb-font-regular);
}

.agent-report-commission-hero__copy > small em {
    font-style: normal;
}

.agent-report-commission-hero__copy > small.is-up {
    color: #86EFAC;
}

.agent-report-commission-hero__copy > small.is-down {
    color: #FCA5A5;
}

.agent-report-commission-hero__deco {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.28);
}

.agent-report-type-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.agent-report-type-list li {
    display: grid;
    grid-template-columns: 40px 1fr auto 16px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
}

.agent-report-type-list strong {
    display: block;
    color: #0f172a;
    font: 14px var(--sb-font-bold);
}

.agent-report-type-list small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.agent-report-type-list b {
    color: #059669;
    font: 14px var(--sb-font-bold);
    white-space: nowrap;
}

.agent-report-type-list__chevron {
    display: inline-flex;
    color: #CBD5E1;
    font-style: normal;
}

.agent-report-trend {
    position: relative;
    height: 96px;
    border-radius: 14px;
    background: #f8fafc;
    overflow: visible;
    padding: 4px 2px 0;
}

.agent-report-trend svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.agent-report-trend__line {
    transition: stroke-dashoffset 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-report-trend__area {
    opacity: 0;
    transition: opacity 0.7s ease 0.2s;
}

.agent-report-trend__dot {
    fill: #fff;
    stroke: #22c55e;
    stroke-width: 2.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    cursor: pointer;
    transition: opacity 0.35s ease, transform 0.35s ease, r 0.15s ease;
}

.agent-report-trend__dot.is-hot {
    fill: #22c55e;
    transform: scale(1.35);
}

.agent-chart-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    min-width: 110px;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.agent-chart-tip.is-visible {
    opacity: 1;
}

.agent-chart-tip strong {
    display: block;
    margin-bottom: 2px;
    color: #cbd5e1;
    font: 11px var(--sb-font-semibold);
}

.agent-chart-tip span {
    display: block;
    font: 13px var(--sb-font-bold);
}

.agent-report-stat-row,
.agent-report-highlight-row,
.agent-report-cash-stats,
.agent-report-expense-stats {
    display: grid;
    gap: 8px;
}

.agent-report-stat-row,
.agent-report-cash-stats {
    grid-template-columns: repeat(3, 1fr);
}

.agent-report-highlight-row {
    grid-template-columns: 1fr 1fr;
}

.agent-report-expense-stats {
    grid-template-columns: 1fr 1fr;
}

.agent-report-stat-row article,
.agent-report-highlight-row article,
.agent-report-cash-stats article,
.agent-report-expense-stats article {
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
}

.agent-report-stat-row.is-danger article {
    background: #fef3f2;
}

.agent-report-cash-stats article.is-up {
    background: #ecfdf5;
}

.agent-report-cash-stats article.is-down {
    background: #fef2f2;
}

.agent-report-stat-row span,
.agent-report-highlight-row span,
.agent-report-cash-stats span,
.agent-report-expense-stats span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font: 10px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-report-stat-row strong,
.agent-report-highlight-row strong,
.agent-report-cash-stats strong,
.agent-report-expense-stats strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 18px var(--sb-font-bold);
}

.agent-report-highlight-row small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.agent-report-stat-row strong.is-danger,
.agent-report-cash-stats article.is-down strong {
    color: #b42318;
}

.agent-report-stat-row strong.is-success,
.agent-report-cash-stats article.is-up strong {
    color: #059669;
}

.agent-report-expense-stats strong.is-warn {
    color: #c27803;
}

.agent-report-data-table {
    display: grid;
    gap: 0;
}

.agent-report-data-table__head,
.agent-report-data-table__row {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 0.5fr 1fr 0.7fr;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    font-size: 12px;
}

.agent-report-data-table__head {
    color: #94a3b8;
    font: 11px var(--sb-font-semibold);
    border-bottom: 1px solid #eef2f7;
}

.agent-report-data-table__row {
    border-bottom: 1px solid #f1f5f9;
    color: #64748b;
}

.agent-report-data-table__row strong,
.agent-report-data-table__row b {
    color: var(--sbo-navy, #0f2747);
    font-family: var(--sb-font-bold);
}

.agent-report-data-table__row em {
    font-style: normal;
    font-family: var(--sb-font-bold);
}

.agent-report-data-table__row em.is-success { color: #059669; }
.agent-report-data-table__row em.is-danger { color: #b42318; }

.agent-report-outlet-cards,
.agent-report-staff-cards,
.agent-report-shortage-cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.agent-report-outlet-cards li,
.agent-report-staff-cards li {
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fff;
}

.agent-report-outlet-cards__top,
.agent-report-staff-cards__top {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 12px;
}

.agent-report-outlet-cards__icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #e8f1fe;
    color: #1d4ed8;
}

.agent-report-outlet-cards__top strong,
.agent-report-staff-cards__top strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 15px var(--sb-font-bold);
}

.agent-report-staff-cards__top small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.agent-report-outlet-cards__top em,
.agent-report-staff-cards__top em {
    font-style: normal;
    font: 12px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-report-outlet-cards__top em.is-success { color: #059669; }
.agent-report-outlet-cards__top em.is-danger { color: #b42318; }

.agent-report-staff-cards__top em {
    padding: 4px 10px;
    border-radius: 999px;
}

.agent-report-staff-cards__top em.is-success {
    color: #047857;
    background: #e7f8f1;
}

.agent-report-staff-cards__top em.is-warn {
    color: #c27803;
    background: #fff7e8;
}

.agent-report-staff-cards__top em.is-muted {
    color: #64748b;
    background: #f1f5f9;
}

.agent-report-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.agent-report-metric-grid span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 11px;
}

.agent-report-metric-grid strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 14px var(--sb-font-bold);
}

.agent-report-metric-grid strong.is-danger { color: #b42318; }
.agent-report-metric-grid strong.is-success { color: #059669; }

.agent-report-top-performer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.agent-report-top-performer > span {
    font-size: 18px;
    line-height: 1;
}

.agent-report-top-performer strong {
    display: block;
    font: 14px var(--sb-font-bold);
}

.agent-report-top-performer p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #059669;
}

.agent-report-shortage-cards li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
}

.agent-report-shortage-cards strong {
    display: block;
    color: var(--sbo-navy, #0f2747);
    font: 14px var(--sb-font-bold);
}

.agent-report-shortage-cards small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
}

.agent-report-shortage-cards em {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-style: normal;
    font: 11px var(--sb-font-semibold);
}

.agent-report-shortage-cards em.is-warn {
    color: #c27803;
    background: #fff7e8;
}

.agent-report-shortage-cards em.is-success {
    color: #047857;
    background: #e7f8f1;
}

.agent-report-shortage-cards em.is-info {
    color: #1d4ed8;
    background: #e8f1fe;
}

.agent-report-shortage-cards b {
    color: #b42318;
    font: 14px var(--sb-font-bold);
    white-space: nowrap;
}

.agent-report-modal-chart {
    min-height: 140px;
    padding: 8px 4px 0;
}

.agent-report-week-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-report-week-list li {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.agent-report-week-list span { color: #64748b; }
.agent-report-week-list b.is-up { color: #059669; font-weight: 600; }
.agent-report-week-list b.is-down { color: #b42318; font-weight: 600; }
.agent-report-week-list strong {
    text-align: right;
    color: var(--sbo-navy, #0f2747);
    font-family: var(--sb-font-bold);
}

.agent-report-donut {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 4px auto;
    display: grid;
    place-items: center;
}

.agent-report-donut__svg,
.agent-report-donut__hit {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.agent-report-donut__hit {
    position: absolute;
    inset: 0;
}

.agent-report-donut__track,
.agent-report-donut__segment,
.agent-report-donut__hit-seg {
    fill: none;
    stroke-linecap: butt;
}

.agent-report-donut__track {
    stroke: #eef2f7;
    stroke-width: 3.5;
}

.agent-report-donut__segment {
    stroke-width: 3.5;
    transition: stroke-dasharray 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
}

.agent-report-donut__hit-seg {
    stroke-width: 7;
    cursor: pointer;
    pointer-events: stroke;
}

.agent-report-donut.is-animated .agent-report-donut__segment.is-hot {
    opacity: 0.82;
    filter: brightness(1.12);
}

.agent-report-expense-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.agent-report-expense-legend li {
    display: grid;
    grid-template-columns: 10px 1fr 1.2fr auto;
    gap: 8px;
    align-items: center;
}

.agent-report-expense-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.agent-report-expense-legend strong {
    color: #334155;
    font: 13px var(--sb-font-semibold);
}

.agent-report-expense-legend i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.agent-report-expense-legend em {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-report-expense-legend b {
    color: #64748b;
    font: 12px var(--sb-font-semibold);
}

@media (max-width: 420px) {
    .agent-report-data-table__head,
    .agent-report-data-table__row {
        grid-template-columns: 0.7fr 1fr 0.45fr 0.9fr 0.6fr;
        font-size: 11px;
    }

    .agent-report-week-list li {
        grid-template-columns: 0.5fr 1fr 1fr 0.9fr;
        font-size: 12px;
    }

    .agent-report-modal__footer {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Money Agent — Outlet Handovers & Expenses */
.agent-handovers-hero h1 { margin: 0; font: normal 28px/1.15 var(--sb-font-bold); }
.agent-handovers-hero p { margin: 6px 0 0; color: var(--sbo-muted); font-size: 14px; }
.agent-handovers-stats,
.agent-expenses-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.agent-expenses-stats { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.agent-handovers-stats article,
.agent-expenses-stats article {
    padding: 14px 12px; border: 1px solid var(--sbo-line); border-radius: 14px; background: #fff;
    box-shadow: 0 6px 18px rgba(30, 50, 80, 0.04);
}
.agent-handovers-stats span,
.agent-expenses-stats span {
    display: block; margin-bottom: 6px; color: var(--sbo-muted);
    font: 11px var(--sb-font-semibold); letter-spacing: .04em; text-transform: uppercase;
}
.agent-handovers-stats strong,
.agent-expenses-stats strong { display: block; font: 18px var(--sb-font-bold); }
.agent-handovers-stats .is-up,
.agent-expenses-stats .is-up { color: var(--ad-success-deep); }
.agent-handovers-stats .is-warn,
.agent-expenses-stats .is-warn { color: #c27803; }
.agent-expenses-stats .is-total strong { color: #2563eb; }
.agent-handovers-action { border-color: #fde68a; background: #fffbeb; }
.agent-handovers-action__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
.agent-handovers-action__head strong { color: #92400e; font: 16px var(--sb-font-bold); }
.agent-handovers-action__head em {
    font-style: normal; padding: 4px 10px; border-radius: 999px; color: #c27803;
    background: #fff7e8; font: 11px var(--sb-font-semibold);
}
.agent-handover-pending {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.agent-handover-pending strong { display: block; font-size: 15px; }
.agent-handover-pending p { margin: 4px 0 0; color: var(--sbo-muted); font-size: 13px; }
.agent-handover-pending > em { font-style: normal; font: 16px var(--sb-font-bold); white-space: nowrap; }
.agent-handover-pending__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.agent-handover-pending__actions .agent-btn,
.agent-handover-pending__actions form { width: 100%; }
.agent-handover-pending__actions .agent-btn--success { width: 100%; }
.agent-handovers-filters,
.agent-expenses-filters {
    display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; -webkit-overflow-scrolling: touch;
}
.agent-handovers-filters button,
.agent-expenses-filters button {
    flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid #dbe2ea; border-radius: 999px;
    background: #fff; color: #64748b; cursor: pointer; font: 13px var(--sb-font-semibold);
}
.agent-handovers-filters button.is-active,
.agent-expenses-filters button.is-active { color: #fff; border-color: #3366cc; background: #3366cc; }
.agent-handovers-list,
.agent-expenses-list { display: flex; flex-direction: column; gap: 10px; }
.agent-handover-item,
.agent-expense-item { padding: 14px; border: 1px solid #eef1f5; border-radius: 14px; background: #f8fafc; }
.agent-handover-item__head,
.agent-expense-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agent-handover-item__head em,
.agent-expense-item__right em {
    display: inline-flex; padding: 3px 8px; border-radius: 999px; font: 11px var(--sb-font-semibold); font-style: normal;
}
.agent-handover-item.is-confirmed .agent-handover-item__head em,
.agent-expense-item.is-success .agent-expense-item__right em { color: #047857; background: #e7f8f1; }
.agent-handover-item.is-pending .agent-handover-item__head em,
.agent-expense-item.is-warn .agent-expense-item__right em { color: #c27803; background: #fff7e8; }
.agent-handover-item__people { margin: 8px 0 4px; font: 14px var(--sb-font-semibold); }
.agent-handover-item__meta,
.agent-expense-item__head p,
.agent-expense-item__head small { margin: 0; color: var(--sbo-muted); font-size: 13px; }
.agent-expense-item__head p { margin-top: 4px; }
.agent-expense-item__head small { display: block; margin-top: 4px; font-size: 12px; }
.agent-expense-item__right { text-align: right; }
.agent-expense-item__right strong { display: block; margin-top: 6px; font: 16px var(--sb-font-bold); }
.agent-expense-item__actions { margin-top: 10px; }
.agent-handovers-daily { margin: 0; padding: 0; list-style: none; }
.agent-handovers-daily li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0; border-top: 1px solid #eef1f5; font-size: 14px;
}
.agent-handovers-daily li:first-child { border-top: 0; padding-top: 0; }
.agent-handovers-daily li.is-highlight { margin-top: 4px; padding-top: 12px; border-top: 1px solid #d5dce6; }
.agent-handovers-daily .is-up { color: var(--ad-success-deep); }
.agent-handovers-daily .is-net { color: #2563eb; }
.agent-handovers-note { margin: 12px 0 0; font-size: 13px; }
.agent-handovers-note.is-warn { color: #c27803; font-family: var(--sb-font-semibold); }
.agent-handovers-policy { background: #eef6ff; border-color: #cfe0ff; }
.agent-handovers-policy p { margin: 0; color: #1e40af; font-size: 13px; line-height: 1.5; }
.agent-expenses-banner {
    display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 12px;
    color: #92400e; background: #fff7e8; font: 13px var(--sb-font-semibold);
}
.agent-expense-proof { border-color: #fde68a; background: #fffbeb; }
.agent-expense-proof__head strong { color: #92400e; font: 16px var(--sb-font-bold); }
.agent-expense-proof > p { margin: 8px 0 14px; color: #92400e; font-size: 13px; }
.agent-expense-proof__form { display: flex; flex-direction: column; gap: 10px; }
.agent-expense-proof__upload {
    display: grid; place-items: center; min-height: 120px; padding: 16px; border: 1.5px dashed #f59e0b;
    border-radius: 14px; background: #fff; text-align: center; cursor: pointer; color: #92400e;
    font: 14px var(--sb-font-semibold);
}
.agent-expense-proof__upload input { display: none; }
.agent-expense-proof__upload small { display: block; margin-top: 4px; font-size: 12px; color: #c27803; }
.agent-expense-proof__form textarea,
.agent-expense-add-form input,
.agent-expense-add-form select,
.agent-expense-add-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #dbe2ea; border-radius: 12px; background: #fff; font: 14px var(--sb-font);
}
.agent-expense-add-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.agent-expense-add-form label span { display: block; margin-bottom: 6px; color: var(--sbo-muted); font: 12px var(--sb-font-semibold); }

/* Confirm Handover modal — matches agent-add-staff modal pattern */
.agent-confirm-handover-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-confirm-handover-modal.is-open {
    display: grid;
}

.agent-confirm-handover-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-confirm-handover-modal__backdrop:hover,
.agent-confirm-handover-modal__backdrop:active {
    transform: none !important;
    filter: none !important;
}

.agent-confirm-handover-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-confirm-handover-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 20px 20px 8px;
}

.agent-confirm-handover-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    background: #e7f8f1;
}

.agent-confirm-handover-modal__header h2 {
    margin: 0;
    color: #1e293b;
    font: 20px/1.25 var(--sb-font-bold);
}

.agent-confirm-handover-modal__header p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 13px;
}

.agent-confirm-handover-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.agent-confirm-handover-modal__close:hover {
    background: #f1f5f9;
}

.agent-confirm-handover-modal__form {
    display: flex;
    flex-direction: column;
}

.agent-confirm-handover-modal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 20px 8px;
}

.agent-confirm-handover-modal__summary {
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
}

.agent-confirm-handover-modal__summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.agent-confirm-handover-modal__summary span {
    color: #94a3b8;
    font: 12px var(--sb-font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-confirm-handover-modal__summary strong {
    text-align: right;
    font-family: var(--sb-font-semibold);
    color: #1e293b;
}

.agent-confirm-handover-modal__summary hr {
    border: 0;
    border-top: 1px solid #e7ebf0;
    margin: 8px 0;
}

.agent-confirm-handover-modal__summary .is-amount strong {
    font: 22px var(--sb-font-bold);
    color: #1e293b;
}

.agent-confirm-handover-modal__disclaimer {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.agent-confirm-handover-modal__disclaimer strong {
    color: #1e293b;
    font-family: var(--sb-font-semibold);
}

.agent-confirm-handover-modal__footer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px 20px 20px;
}

.agent-confirm-handover-modal__cancel {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    color: #1e293b;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font: 14px var(--sb-font-semibold);
}

.agent-confirm-handover-modal__submit {
    width: 100%;
    min-height: 46px;
    border-radius: 12px !important;
    gap: 8px;
}

.agent-confirm-handover-modal__submit .sbo-button-loader {
    display: none;
}

.agent-confirm-handover-modal__submit.is-loading {
    opacity: .8;
    pointer-events: none;
}

.agent-confirm-handover-modal__submit.is-loading .agent-confirm-handover-modal__submit-icon {
    display: none;
}

.agent-confirm-handover-modal__submit.is-loading .sbo-button-loader {
    display: inline-block;
}

@media (max-width: 640px) {
    .agent-expenses-stats { grid-template-columns: 1fr 1fr; }
    .agent-expenses-stats .is-total { grid-column: 1 / -1; }
}


/* —— Money Agent: Alerts & Attention —— */
.agent-alerts-content {
    gap: 14px;
}

.agent-alerts-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-alerts-hero h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font: normal 26px/1.15 var(--sb-font-bold);
    color: var(--sbo-ink, #1e293b);
}

.agent-alerts-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-alerts-hero h1 .agent-alerts-hero__badge,
.agent-alerts-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ad-danger);
    color: #fff;
    font-family: var(--sb-font-bold);
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
}

.agent-alerts-hero__settings {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.agent-alerts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-alerts-filter {
    appearance: none;
    border: 1.5px solid #d5dce6;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 14px;
    font: 13px/1.2 var(--sb-font-semibold);
    cursor: pointer;
}

.agent-alerts-filter.is-active {
    background: #eef2f7;
    border-color: #cbd5e1;
    color: #0f172a;
}

.agent-alerts-filter.is-critical {
    color: var(--ad-danger);
    border-color: #f5b5b5;
}

.agent-alerts-filter.is-critical.is-active {
    background: var(--ad-danger-soft);
    border-color: var(--ad-danger);
}

.agent-alerts-filter.is-warning {
    color: #c27803;
    border-color: #f5d29a;
}

.agent-alerts-filter.is-warning.is-active {
    background: var(--ad-warn-soft);
    border-color: #f59e0b;
}

.agent-alerts-filter.is-resolved {
    color: #15803d;
    border-color: #86efac;
}

.agent-alerts-filter.is-resolved.is-active {
    background: #ecfdf5;
    border-color: #22c55e;
}

.agent-alerts-group {
    display: grid;
    gap: 12px;
}

.agent-alerts-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.agent-alerts-group__head span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.agent-alerts-group__head strong {
    font: 12px/1.2 var(--sb-font-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-alerts-group__head.is-critical {
    color: var(--ad-danger);
}

.agent-alerts-group__head.is-warning {
    color: #c27803;
}

.agent-alerts-empty {
    padding: 8px 2px;
}

.agent-issue-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    border-top: 4px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.agent-issue-card.is-critical {
    border-top-color: var(--ad-danger);
}

.agent-issue-card.is-warning {
    border-top-color: #f59e0b;
}

.agent-issue-card.is-resolved {
    opacity: 0.85;
    border-top-color: #22c55e;
}

.agent-issue-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-issue-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.agent-issue-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 13px/1 var(--sb-font-bold);
    flex-shrink: 0;
}

.agent-issue-card.is-critical .agent-issue-card__icon {
    background: var(--ad-danger-soft);
    color: var(--ad-danger);
}

.agent-issue-card.is-warning .agent-issue-card__icon {
    background: var(--ad-warn-soft);
    color: #c27803;
}

.agent-issue-card__title strong {
    font: 15px/1.25 var(--sb-font-bold);
    color: #0f172a;
}

.agent-issue-card__head time {
    color: var(--sbo-muted);
    font-size: 12px;
    white-space: nowrap;
}

.agent-issue-card__outlet {
    display: block;
    font: 15px/1.3 var(--sb-font-bold);
    color: #0f172a;
}

.agent-issue-card__body p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.45;
}

.agent-issue-card__staff {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.agent-issue-card__staff .agent-staff-card__avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.agent-issue-card__staff em {
    font-style: normal;
    color: #475569;
    font-size: 13px;
}

.agent-issue-card__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.agent-issue-card__actions .agent-btn {
    width: auto;
    min-height: 42px;
    padding: 0 14px;
    justify-content: center;
    text-align: center;
}

.agent-issue-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d5dce6;
    background: #fff;
    color: #334155;
    font: 13px/1 var(--sb-font-semibold);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.agent-issue-card__dismiss {
    margin: 0;
}

.agent-issue-card__dismiss .agent-issue-card__link {
    border: 0;
    background: transparent;
    color: #94a3b8;
    padding: 0 8px;
}

.agent-alerts-resolved {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    overflow: hidden;
}

.agent-alerts-resolved__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    color: #166534;
}

.agent-alerts-resolved__summary::-webkit-details-marker {
    display: none;
}

.agent-alerts-resolved__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #22c55e;
    color: #fff;
    font-size: 12px;
}

.agent-alerts-resolved__summary strong {
    flex: 1;
    font: 14px/1.2 var(--sb-font-bold);
}

.agent-alerts-resolved__summary em {
    font-style: normal;
    color: #16a34a;
    transition: transform 0.15s ease;
}

.agent-alerts-resolved[open] .agent-alerts-resolved__summary em {
    transform: rotate(180deg);
}

.agent-alerts-resolved__body {
    display: grid;
    gap: 12px;
    padding: 0 12px 12px;
}

.agent-alerts-quick {
    margin-top: 4px;
    display: grid;
    gap: 10px;
}

.agent-alerts-quick__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-alerts-quick__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 76px;
    padding: 14px;
    border-radius: 14px;
    border: 1.5px solid #dbe3ee;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    font: 14px/1.25 var(--sb-font-semibold);
}

.agent-alerts-quick__btn span {
    color: #64748b;
    font-size: 16px;
}

.agent-alerts-quick__btn span.is-danger {
    color: var(--ad-danger);
}

@media (min-width: 768px) {
    .agent-alerts-hero h1 {
        font-size: 30px;
    }

    .agent-issue-card__actions {
        grid-template-columns: minmax(180px, 240px) auto;
        justify-content: start;
    }
}

/* —— Money Agent: Message Staff modal —— */
.agent-message-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-message-staff-modal.is-open {
    display: grid;
}

.agent-message-staff-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-message-staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-message-staff-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 20px 20px 4px;
}

.agent-message-staff-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3366cc;
    background: #e8f1fe;
}

.agent-message-staff-modal__header h2 {
    margin: 0;
    color: #1e293b;
    font: 20px/1.25 var(--sb-font-bold);
}

.agent-message-staff-modal__header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.agent-message-staff-modal__header p strong {
    color: #0f172a;
    font-family: var(--sb-font-semibold);
}

.agent-message-staff-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.agent-message-staff-modal__close:hover {
    background: #f1f5f9;
}

.agent-message-staff-modal__form {
    display: flex;
    flex-direction: column;
}

.agent-message-staff-modal__body {
    padding: 12px 20px 8px;
    display: grid;
    gap: 14px;
}

.agent-message-staff-modal__person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.agent-message-staff-modal__person .agent-staff-card__avatar {
    width: 42px;
    height: 42px;
    font-size: 13px;
}

.agent-message-staff-modal__person strong {
    display: block;
    font: 15px/1.25 var(--sb-font-bold);
    color: #0f172a;
}

.agent-message-staff-modal__person small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
}

.agent-message-staff-modal__label {
    margin: 0;
    color: #64748b;
    font: 13px/1.2 var(--sb-font-semibold);
}

.agent-message-staff-modal__options {
    display: grid;
    gap: 8px;
}

.agent-message-staff-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.agent-message-staff-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.agent-message-staff-option span {
    display: block;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.4;
}

.agent-message-staff-option input:checked + span {
    border-color: #3366cc;
    background: #f3f7ff;
    color: #0f172a;
    box-shadow: 0 0 0 1px rgba(51, 102, 204, 0.15);
}

.agent-message-staff-modal__error {
    margin: 0;
    color: var(--ad-danger);
    font-size: 13px;
}

.agent-message-staff-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    padding: 12px 20px 20px;
}

.agent-message-staff-modal__cancel {
    min-height: 46px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font: 14px/1 var(--sb-font-semibold);
    cursor: pointer;
}

.agent-message-staff-modal__submit {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
}

.agent-issue-card__actions button.agent-issue-card__link {
    appearance: none;
    font-family: inherit;
}

/* —— Money Agent: Shortage Review —— */
.agent-shortage-review {
    gap: 14px;
}

.agent-shortage-review__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-shortage-review__hero h1 {
    margin: 0;
    font: normal 28px/1.15 var(--sb-font-bold);
}

.agent-shortage-review__hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-shortage-review__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 12px/1 var(--sb-font-semibold);
    font-style: normal;
    white-space: nowrap;
    background: #fff1e8;
    color: #c2410c;
}

.agent-shortage-review__badge.is-reviewed {
    background: #ecfdf5;
    color: #15803d;
}

.agent-shortage-review__badge.is-flagged {
    background: var(--ad-danger-soft);
    color: var(--ad-danger);
}

.agent-shortage-review__badge.is-escalated {
    background: #e8f1fe;
    color: #1d4ed8;
}

.agent-shortage-review__badge.is-pending {
    margin-left: 8px;
    background: #fff1e8;
    color: #c2410c;
}

.agent-shortage-review__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ad-danger-soft);
    color: #991b1b;
    font-size: 14px;
}

.agent-shortage-review__alert span {
    flex-shrink: 0;
}

.agent-shortage-review__total {
    padding: 18px 16px;
    border-radius: 14px;
    background: var(--ad-danger);
    color: #fff;
}

.agent-shortage-review__total small {
    display: block;
    opacity: 0.9;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-shortage-review__total strong {
    display: block;
    margin-top: 6px;
    font: 28px/1.1 var(--sb-font-bold);
}

.agent-shortage-review__total em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    opacity: 0.85;
    font-size: 13px;
}

.agent-shortage-review__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.agent-shortage-review__split span {
    display: block;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-shortage-review__split strong {
    display: block;
    margin-top: 4px;
    font: 18px var(--sb-font-bold);
}

.agent-shortage-review__split .is-down,
.agent-shortage-table .is-down,
.agent-shortage-modal__summary .is-down {
    color: var(--ad-danger);
}

.agent-shortage-table-wrap {
    overflow-x: auto;
}

.agent-shortage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.agent-shortage-table th,
.agent-shortage-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
}

.agent-shortage-table th {
    color: var(--sbo-muted);
    font-family: var(--sb-font-semibold);
}

.agent-shortage-context {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.agent-shortage-context li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.agent-shortage-context span {
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-shortage-context strong {
    text-align: right;
    font: 14px var(--sb-font-semibold);
}

.agent-shortage-context em {
    display: block;
    margin-top: 2px;
    color: var(--sbo-muted);
    font-style: normal;
    font-size: 12px;
    font-family: var(--sb-font-regular);
}

.agent-shortage-context__note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
}

.agent-shortage-field {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.agent-shortage-field__label {
    color: var(--sbo-muted);
    font: 11px/1.2 var(--sb-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-shortage-staff {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.agent-shortage-staff .agent-staff-card__avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.agent-shortage-staff strong {
    font: 14px var(--sb-font-bold);
}

.agent-shortage-field select,
.agent-shortage-field textarea {
    width: 100%;
    border: 1.5px solid #d5dce6;
    border-radius: 12px;
    padding: 12px 14px;
    font: 14px var(--sb-font-regular);
    color: #0f172a;
    background: #fff;
}

.agent-shortage-field textarea {
    resize: vertical;
    min-height: 96px;
}

.agent-shortage-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #334155;
    font-size: 14px;
    cursor: pointer;
}

.agent-shortage-upload {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 120px;
    padding: 18px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.agent-shortage-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.agent-shortage-upload__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #e8f1fe;
    color: #3366cc;
    font-size: 18px;
}

.agent-shortage-upload strong {
    font: 14px var(--sb-font-semibold);
}

.agent-shortage-upload em {
    color: var(--sbo-muted);
    font-style: normal;
    font-size: 12px;
}

.agent-shortage-upload.has-file {
    border-color: #93c5fd;
    background: #f3f7ff;
}

.agent-shortage-save-btn {
    width: 100%;
    margin-top: 12px;
}

.agent-shortage-message blockquote {
    margin: 12px 0;
    padding: 0;
    border: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.agent-shortage-message__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-shortage-message__foot.is-only-ask {
    flex-direction: column;
    align-items: stretch;
}

.agent-shortage-message__foot .agent-btn {
    width: auto;
    white-space: nowrap;
}

.agent-shortage-decision__btn {
    width: 100%;
    margin-top: 10px;
    min-height: 48px;
}

.agent-shortage-decision__btn.is-soft {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.agent-shortage-escalate-link {
    width: 100%;
    margin-top: 10px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-shortage-decision__note,
.agent-shortage-decision__done {
    margin: 14px 0 0;
    color: var(--sbo-muted);
    font-size: 13px;
    text-align: center;
}

.agent-shortage-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-shortage-modal.is-open {
    display: grid;
}

.agent-shortage-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-shortage-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    padding: 28px 22px 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    text-align: center;
}

.agent-shortage-modal__dialog.is-escalate {
    text-align: left;
    padding: 18px 20px 20px;
}

.agent-shortage-modal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font: 22px/1 var(--sb-font-bold);
}

.agent-shortage-modal__icon.is-success {
    background: #ecfdf5;
    color: #15803d;
}

.agent-shortage-modal__icon.is-danger {
    background: var(--ad-danger-soft);
    color: var(--ad-danger);
}

.agent-shortage-modal__icon.is-navy {
    margin: 0;
    background: #e8f1fe;
    color: #3366cc;
    font-size: 18px;
}

.agent-shortage-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.agent-shortage-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
}

.agent-shortage-modal__dialog h2 {
    margin: 0 0 8px;
    font: 20px/1.25 var(--sb-font-bold);
    color: #0f172a;
}

.agent-shortage-modal__dialog > p {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.agent-shortage-modal__summary {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #f8fafc;
}

.agent-shortage-modal__summary div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.agent-shortage-modal__summary span {
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-shortage-modal__dialog .agent-btn {
    width: 100%;
    min-height: 48px;
}

.agent-shortage-modal__cancel {
    width: 100%;
    margin-top: 10px;
    min-height: 48px;
    border-radius: 12px;
    border: 1.5px solid #334155;
    background: #fff;
    color: #0f172a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-shortage-modal__text-cancel {
    width: 100%;
    margin-top: 12px;
    border: 0;
    background: transparent;
    color: #64748b;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

/* —— Money Agent: Expenses Today sheet & Add Expense modal —— */
.agent-expenses-sheet,
.agent-add-expense-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: end center;
    padding: 0;
}

.agent-expenses-sheet.is-open,
.agent-add-expense-modal.is-open {
    display: grid;
}

.agent-add-expense-modal {
    place-items: center;
    padding: 16px;
}

.agent-expenses-sheet__backdrop,
.agent-add-expense-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-expenses-sheet__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 480px);
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.agent-expenses-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d5dce6;
}

.agent-expenses-sheet__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 8px;
}

.agent-expenses-sheet__header h2 {
    margin: 0;
    color: var(--sbo-navy, #153562);
    font: 24px/1.2 var(--sb-font-bold);
}

.agent-expenses-sheet__header p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 13px;
}

.agent-expenses-sheet__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.agent-expenses-sheet__header-actions .agent-btn {
    border-radius: 12px;
    min-height: 40px;
}

.agent-expenses-sheet__close,
.agent-add-expense-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.agent-expenses-sheet__close:hover,
.agent-add-expense-modal__close:hover {
    background: #f1f5f9;
}

.agent-expenses-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 18px 12px;
}

.agent-expenses-sheet__chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef4fb;
    color: var(--sbo-navy, #153562);
    font: 12px var(--sb-font-semibold);
}

.agent-expenses-sheet__chips .is-total {
    background: #e8f0fe;
}

.agent-expenses-sheet__chips .is-warn {
    background: #fff4e5;
    color: #c27803;
}

.agent-expenses-sheet__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px 18px 12px;
}

.agent-expenses-sheet__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-expenses-sheet__list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #fff;
}

.agent-expenses-sheet__list li.is-missing {
    border-color: #fde2b5;
    background: #fff8ee;
}

.agent-expenses-sheet__icon {
    color: #3366cc;
    display: grid;
    place-items: center;
}

.agent-expenses-sheet__copy strong {
    display: block;
    color: var(--sbo-navy, #153562);
    font: 14px/1.25 var(--sb-font-bold);
}

.agent-expenses-sheet__copy small {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12px;
}

.agent-expenses-sheet__right {
    text-align: right;
}

.agent-expenses-sheet__right > strong {
    display: block;
    color: var(--sbo-navy, #153562);
    font: 14px/1.2 var(--sb-font-bold);
}

.agent-expenses-sheet__badge {
    display: inline-flex;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.agent-expenses-sheet__badge.is-ok {
    color: #047857;
    background: #e7f8f1;
}

.agent-expenses-sheet__badge.is-warn {
    color: #c27803;
    background: #fff1d6;
}

.agent-expenses-sheet__footer {
    padding: 12px 18px 18px;
}

.agent-expenses-sheet__footer .agent-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
}

.agent-add-expense-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-add-expense-modal__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--sbo-navy, #153562);
    color: #fff;
    box-sizing: border-box;
}

.agent-add-expense-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.agent-add-expense-modal__header h2 {
    margin: 0;
    color: #fff;
    font: 20px/1.25 var(--sb-font-bold);
}

.agent-add-expense-modal__header p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.agent-add-expense-modal__close {
    color: rgba(255, 255, 255, 0.85);
}

.agent-add-expense-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.agent-add-expense-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.agent-add-expense-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    overflow: auto;
}

.agent-add-expense-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-add-expense-field__label {
    color: #94a3b8;
    font: 11px var(--sb-font-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-add-expense-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-add-expense-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d5dce6;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-add-expense-chip.is-selected {
    border-color: var(--sbo-navy, #153562);
    background: var(--sbo-navy, #153562);
    color: #fff;
}

.agent-add-expense-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #d5dce6;
    border-radius: 12px;
    background: #fff;
}

.agent-add-expense-amount em {
    font-style: normal;
    color: #64748b;
    font: 14px var(--sb-font-bold);
}

.agent-add-expense-amount input,
.agent-add-expense-field input[type="text"],
.agent-add-expense-field textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font: 16px var(--sb-font-semibold);
}

.agent-add-expense-field input[type="text"],
.agent-add-expense-field textarea {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d5dce6;
    border-radius: 12px;
    resize: vertical;
    font: 14px var(--sb-font-regular);
}

.agent-add-expense-field textarea {
    min-height: 84px;
}

.agent-add-expense-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px;
    border: 1.5px dashed #93c5fd;
    border-radius: 14px;
    background: #f8fbff;
    cursor: pointer;
}

.agent-add-expense-upload input {
    display: none;
}

.agent-add-expense-upload__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #60a5fa;
    flex: 0 0 auto;
}

.agent-add-expense-upload__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-add-expense-upload__copy strong {
    color: #334155;
    font: 13px var(--sb-font-semibold);
}

.agent-add-expense-upload__copy small {
    color: #94a3b8;
    font-size: 12px;
}

.agent-add-expense-error {
    margin: 0;
    color: #b91c1c;
    font-size: 12px;
}

.agent-add-expense-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 18px 18px;
}

.agent-add-expense-modal__cancel {
    min-height: 48px;
    border: 1px solid #d5dce6;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-add-expense-modal__submit {
    min-height: 48px;
    border-radius: 12px !important;
}

.agent-add-expense-modal__submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #94a3b8;
}

@media (min-width: 641px) {
    .agent-expenses-sheet {
        place-items: center;
        padding: 16px;
    }

    .agent-expenses-sheet__dialog {
        border-radius: 20px;
        max-height: min(92vh, 820px);
    }

    .agent-expenses-sheet__handle {
        display: none;
    }
}

/* —— Money Agent: Close Day Review page —— */
.agent-close-day-page {
    gap: 14px;
}

.agent-close-day-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-close-day-hero h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sbo-navy, #153562);
    font: normal 24px/1.2 var(--sb-font-bold);
}

.agent-close-day-hero__icon {
    color: #3366cc;
    display: inline-flex;
}

.agent-close-day-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-close-day-hero__time {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #e8f0fe;
    color: #3366cc;
    font: 12px var(--sb-font-semibold);
}

.agent-close-day-checklist ul,
.agent-close-day-issues ul,
.agent-close-day-handovers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-close-day-checklist li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eef1f5;
    font-size: 14px;
}

.agent-close-day-checklist li:first-child {
    border-top: 0;
    padding-top: 0;
}

.agent-close-day-checklist__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-family: var(--sb-font-bold);
}

.agent-close-day-checklist li.is-ok .agent-close-day-checklist__icon {
    color: #047857;
    background: #e7f8f1;
}

.agent-close-day-checklist li.is-danger .agent-close-day-checklist__icon,
.agent-close-day-issues li.is-danger .agent-close-day-issues__icon {
    color: #b91c1c;
    background: #fee2e2;
}

.agent-close-day-checklist li.is-warn .agent-close-day-checklist__icon,
.agent-close-day-issues li.is-warn .agent-close-day-issues__icon {
    color: #c27803;
    background: #fff4e5;
}

.agent-close-day-checklist__link {
    color: #3366cc;
    font: 13px var(--sb-font-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.agent-close-day-banner {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 13px var(--sb-font-semibold);
}

.agent-close-day-banner.is-danger {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.agent-close-day-banner.is-ok {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.agent-close-day-balances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agent-close-day-balances article {
    padding: 12px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #f8fafc;
}

.agent-close-day-balances span {
    display: block;
    color: #94a3b8;
    font: 10px var(--sb-font-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.agent-close-day-balances strong {
    display: block;
    margin-top: 6px;
    color: var(--sbo-navy, #153562);
    font: 18px var(--sb-font-bold);
}

.agent-close-day-balances article.is-short strong {
    color: #dc2626;
}

.agent-close-day-balances em {
    display: block;
    margin-top: 4px;
    color: #dc2626;
    font: 12px var(--sb-font-semibold);
    font-style: normal;
}

.agent-close-day-balances em.is-up {
    color: #047857;
}

.agent-close-day-issues__head,
.agent-close-day-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.agent-close-day-issues__head em {
    min-height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font: 11px var(--sb-font-semibold);
    font-style: normal;
}

.agent-close-day-section-head p {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--sbo-muted);
    font-size: 13px;
}

.agent-close-day-section-head .is-ok,
.agent-close-day-expenses .is-ok,
.agent-close-day-signoff .is-ok { color: var(--ad-success-deep); font-family: var(--sb-font-semibold); }
.agent-close-day-section-head .is-warn,
.agent-close-day-expenses .is-warn,
.agent-close-day-signoff .is-warn { color: #c27803; font-family: var(--sb-font-semibold); }

.agent-close-day-issues li,
.agent-close-day-handovers li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #fff;
}

.agent-close-day-issues li + li,
.agent-close-day-handovers li + li {
    margin-top: 10px;
}

.agent-close-day-issues__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.agent-close-day-issues .agent-btn,
.agent-close-day-handovers .agent-btn {
    width: auto;
    min-width: 88px;
    border-radius: 10px;
}

.agent-close-day-handovers small {
    display: block;
    margin-top: 3px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-close-day-expenses strong {
    display: block;
    margin: 2px 0 6px;
    font: 24px var(--sb-font-bold);
    color: var(--sbo-navy, #153562);
}

.agent-close-day-signoff__person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.agent-close-day-signoff__person small {
    display: block;
    margin-top: 2px;
}

.agent-close-day-signoff__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.agent-close-day-signoff__actions .agent-btn--navy {
    border-radius: 12px;
}

.agent-close-day-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 8px;
}

.agent-close-day-actions form {
    margin: 0;
}

.agent-close-day-actions__primary {
    width: 100%;
    min-height: 52px;
    border-radius: 14px !important;
}

.agent-close-day-actions__primary.is-locked {
    color: #94a3b8;
    background: #e2e8f0;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.agent-close-day-actions__force {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    gap: 8px;
    color: #c27803;
    border-color: #f6d7a6;
    background: #fffaf0;
}

.agent-close-day-actions__note {
    margin: 0;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.agent-signoff-modal,
.agent-force-close-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 16px;
}

.agent-signoff-modal.is-open,
.agent-force-close-modal.is-open {
    display: grid;
}

.agent-signoff-modal__backdrop,
.agent-force-close-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

.agent-signoff-modal__dialog,
.agent-force-close-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.agent-signoff-modal__header,
.agent-force-close-modal__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 18px 18px 8px;
}

.agent-force-close-modal__header {
    grid-template-columns: 40px 1fr auto;
}

.agent-force-close-modal__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff4e5;
    color: #c27803;
    font-size: 18px;
}

.agent-signoff-modal__header h2,
.agent-force-close-modal__header h2 {
    margin: 0;
    color: #0f172a;
    font: 20px/1.25 var(--sb-font-bold);
}

.agent-signoff-modal__header p,
.agent-force-close-modal__header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.agent-signoff-modal__close,
.agent-force-close-modal__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
}

.agent-signoff-modal__body,
.agent-force-close-modal__body {
    padding: 8px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-signoff-modal__person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #f5f7fa;
}

.agent-signoff-modal__person small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 12px;
}

.agent-signoff-modal__body > p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.agent-signoff-modal__footer,
.agent-force-close-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    padding: 14px 18px 18px;
}

.agent-signoff-modal__cancel,
.agent-force-close-modal__cancel {
    min-height: 46px;
    border: 1px solid #d5dce6;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-signoff-modal__footer .agent-btn,
.agent-force-close-modal__submit {
    width: 100%;
    min-height: 46px;
    border-radius: 12px !important;
}

.agent-force-close-modal__warn {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #f6d7a6;
    background: #fff8ee;
    color: #92400e;
}

.agent-force-close-modal__warn strong {
    display: block;
    margin-bottom: 8px;
    font: 13px var(--sb-font-bold);
}

.agent-force-close-modal__warn ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.agent-force-close-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-force-close-field > span {
    color: #94a3b8;
    font: 11px var(--sb-font-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.agent-force-close-field textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px;
    border: 1.5px solid #334155;
    border-radius: 12px;
    resize: vertical;
    font: 14px var(--sb-font-regular);
}

.agent-force-close-modal__submit {
    color: #fff !important;
    background: #f0a04b !important;
    border-color: #f0a04b !important;
}

.agent-force-close-modal__submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.agent-force-close-modal__hint {
    margin: -6px 18px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.agent-close-day-page .agent-confirm-handover-modal__header {
    grid-template-columns: 1fr auto;
}

/* —— Money Agent: Cash Movement page —— */
.agent-cash-page {
    gap: 14px;
    position: relative;
}

.agent-cash-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-cash-hero h1 {
    margin: 0;
    color: var(--sbo-navy, #153562);
    font: normal 26px/1.15 var(--sb-font-bold);
}

.agent-cash-hero p {
    margin: 6px 0 0;
    color: var(--sbo-muted);
    font-size: 14px;
}

.agent-cash-date-btn {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d5dce6;
    border-radius: 12px;
    background: #fff;
    color: var(--sbo-navy, #153562);
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-cash-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-cash-panel.is-loading > :not([data-cash-loader]) {
    opacity: .45;
    pointer-events: none;
}

.agent-cash-loader {
    position: absolute;
    inset: 24px 0 auto;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    color: var(--sbo-navy, #153562);
    font: 13px var(--sb-font-semibold);
}

.agent-cash-loader[hidden] { display: none; }

.agent-cash-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy, #153562);
    border-radius: 50%;
    animation: agent-cash-spin .7s linear infinite;
}

@keyframes agent-cash-spin {
    to { transform: rotate(360deg); }
}

.agent-cash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px !important;
}

.agent-cash-kpis article {
    text-align: center;
}

.agent-cash-kpis strong {
    display: block;
    font: 16px/1.2 var(--sb-font-bold);
}

.agent-cash-kpis span {
    display: block;
    margin-top: 4px;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-cash-kpis .is-up,
.agent-cash-list .is-up,
.agent-cash-day-summary .is-up { color: #16a34a; }

.agent-cash-kpis .is-down,
.agent-cash-list .is-down,
.agent-cash-day-summary .is-down { color: #dc2626; }

.agent-cash-kpis .is-net,
.agent-cash-day-summary .is-net { color: #2563eb; }

.agent-cash-day-summary .is-handover { color: #ea580c; }

.agent-cash-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: #e9edf2;
}

.agent-cash-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font: 13px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-cash-tabs button.is-active {
    background: #fff;
    color: var(--sbo-navy, #153562);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.agent-cash-chart {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: end;
    min-height: 160px;
    padding-top: 8px;
}

.agent-cash-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 140px;
    justify-content: flex-end;
}

.agent-cash-chart__col strong {
    font: 11px var(--sb-font-semibold);
    color: #64748b;
}

.agent-cash-chart__col i {
    display: block;
    width: 42px;
    border-radius: 10px 10px 4px 4px;
    min-height: 8px;
}

.agent-cash-chart__col i.is-deposit { background: #22c55e; }
.agent-cash-chart__col i.is-withdrawal { background: #ef4444; }
.agent-cash-chart__col i.is-handover { background: #f59e0b; }

.agent-cash-chart__col span {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-cash-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-cash-list li {
    display: grid;
    grid-template-columns: 64px auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #eef1f5;
}

.agent-cash-list li:first-child { border-top: 0; padding-top: 0; }

.agent-cash-list li.is-empty {
    display: block;
    color: var(--sbo-muted);
    text-align: center;
    padding: 18px 0;
}

.agent-cash-list time {
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-cash-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font: 11px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-cash-badge.is-deposit { color: #15803d; background: #dcfce7; }
.agent-cash-badge.is-withdrawal { color: #b91c1c; background: #fee2e2; }
.agent-cash-badge.is-handover,
.agent-cash-badge.is-transfer { color: #c2410c; background: #ffedd5; }

.agent-cash-list__copy strong {
    display: block;
    color: #334155;
    font: 13px/1.3 var(--sb-font-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-cash-list em {
    font-style: normal;
    font: 13px var(--sb-font-bold);
    white-space: nowrap;
}

.agent-cash-tracker__flow {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.agent-cash-tracker__flow > div {
    min-width: 88px;
    text-align: center;
}

.agent-cash-tracker__flow strong {
    display: block;
    color: var(--sbo-navy, #153562);
    font: 13px var(--sb-font-bold);
}

.agent-cash-tracker__flow span {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}

.agent-cash-tracker__flow > i {
    color: #cbd5e1;
    font-style: normal;
}

.agent-cash-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-cash-filters__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.agent-cash-filters__periods button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #d5dce6;
    border-radius: 999px;
    background: #fff;
    color: var(--sbo-navy, #153562);
    font: 12px var(--sb-font-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.agent-cash-filters__periods button.is-active {
    color: #fff;
    border-color: var(--sbo-navy, #153562);
    background: var(--sbo-navy, #153562);
}

.agent-cash-export {
    border-radius: 999px;
    gap: 6px;
}

.agent-cash-export.is-disabled,
.agent-cash-export[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto;
}

.agent-cash-day-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.agent-cash-day-summary__grid span {
    display: block;
    color: var(--sbo-muted);
    font-size: 12px;
}

.agent-cash-day-summary__grid strong {
    display: block;
    margin-top: 4px;
    font: 16px var(--sb-font-bold);
}

.agent-cash-range {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.4);
    box-sizing: border-box;
}

.agent-cash-range.is-open {
    display: grid;
}

.agent-cash-range__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.agent-cash-range__card {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    max-width: 400px;
    margin: 0;
    padding: 0;
    border: 1px solid #E0E8FF;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.agent-cash-range__header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    background: #3366CC;
}

.agent-cash-range__icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.agent-cash-range__header h2 {
    margin: 0;
    color: #fff;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-cash-range__header p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font: 14px/1.3 var(--sb-font-regular);
}

.agent-cash-range__close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.agent-cash-range__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #F8FAFC;
}

.agent-cash-range__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.agent-cash-range__field > span {
    color: #334155;
    font: 16px/1.3 var(--sb-font-semibold);
}

.agent-cash-range__input {
    position: relative;
    width: 100%;
}

.agent-cash-range__input input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222222;
    font: 15px/1.2 var(--sb-font-regular);
}

.agent-cash-range__input input:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-cash-range__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #E8EDF3;
}

.agent-cash-range__footer .agent-btn,
.agent-cash-range__card .agent-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
}

@media (max-width: 400px) {
    .agent-cash-range {
        padding: 12px;
    }

    .agent-cash-range__card {
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
    }

    .agent-cash-range__footer {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

/* —— Money Agent: E-Float Movement page —— */
.agent-efloat-page {
    gap: 14px;
    position: relative;
}

.agent-efloat-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.agent-efloat-hero h1 {
    margin: 0;
    color: #222222;
    font: normal 22px/1.2 var(--sb-font-bold);
    letter-spacing: -0.02em;
}

.agent-efloat-hero p {
    margin: 6px 0 0;
    color: #8a94a6;
    font: 14px/1.4 var(--sb-font-regular);
}

.agent-efloat-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-efloat-panel.is-loading > :not([data-efloat-loader]) {
    opacity: .45;
    pointer-events: none;
}

.agent-efloat-loader {
    position: absolute;
    inset: 24px 0 auto;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e7ec;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    color: #222222;
    font: 14px var(--sb-font-semibold);
}

.agent-efloat-loader[hidden] { display: none; }

.agent-efloat-loader i {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy, #153562);
    border-radius: 50%;
    animation: agent-cash-spin .7s linear infinite;
}

.agent-efloat-compliance {
    padding: 16px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: 22px;
    background: #fff;
    color: #222222;
    box-shadow: 0 4px 14px rgba(30, 50, 80, 0.05);
}

.agent-efloat-compliance__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.agent-efloat-compliance__head strong {
    display: block;
    color: #222222;
    font: 18px/1.25 var(--sb-font-bold);
}

@media (min-width: 768px) and (max-width: 1365px) {
    .agent-efloat-compliance__head strong,
    .agent-efloat-checklist > strong {
        font-size: 20px;
    }
}

@media (min-width: 1366px) {
    .agent-efloat-compliance__head strong,
    .agent-efloat-checklist > strong {
        font-size: 22px;
    }
}

.agent-efloat-compliance__head span {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-compliance__badge {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #B45309;
    border: 1px solid #FDE68A;
    font: 14px/1 var(--sb-font-semibold);
    font-style: normal;
    letter-spacing: 0;
}

.agent-efloat-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.agent-efloat-metrics article {
    padding: 14px 12px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
    text-align: left;
}

.agent-efloat-metrics i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 0 8px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #3366CC;
    font-style: normal;
    font-size: 14px;
}

.agent-efloat-metrics strong {
    display: block;
    font: normal clamp(14px, 3.8vw, 20px)/1.15 var(--sb-font-bold);
}

.agent-efloat-metrics span {
    display: block;
    margin-top: 4px;
    color: #000;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-metrics small {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-checklist {
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #F8FAFC;
}

.agent-efloat-checklist > strong {
    display: block;
    margin-bottom: 10px;
    color: #222222;
    font: 18px/1.25 var(--sb-font-bold);
}

.agent-efloat-checklist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-efloat-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    color: #1e293b;
    font: 16px/1.35 var(--sb-font-regular);
}

.agent-efloat-checklist li span {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.35;
}

.agent-efloat-checklist li i {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid #E0E8FF;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 14px;
    color: transparent;
}

.agent-efloat-checklist li.is-done i {
    border-color: #16A34A;
    background: #16A34A;
    color: #fff;
}

.agent-efloat-checklist__progress {
    margin-top: 10px;
}

.agent-efloat-checklist__progress > span {
    display: block;
    margin-bottom: 6px;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-checklist__bar {
    height: 6px;
    border-radius: 999px;
    background: #E0E8FF;
    overflow: hidden;
}

.agent-efloat-checklist__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #3366CC;
}

.agent-efloat-compliance__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.agent-efloat-compliance__foot > span {
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-compliance__cta {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #2563EB;
    border-radius: 10px;
    background: #fff;
    color: #2563EB;
    font: 16px var(--sb-font-semibold);
    text-decoration: none;
}

.agent-efloat-kpis {
    padding: 14px !important;
}

.agent-efloat-kpis__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.agent-efloat-kpis__grid article {
    padding: 12px 8px;
    border-radius: 12px;
    text-align: center;
    background: #f8fafc;
}

.agent-efloat-kpis__grid article.is-in {
    background: #ecfdf5;
}

.agent-efloat-kpis__grid article.is-out {
    background: #fef2f2;
}

.agent-efloat-kpis__grid strong {
    display: block;
    font: normal clamp(14px, 3.8vw, 20px)/1.15 var(--sb-font-bold);
}

.agent-efloat-kpis__grid .is-in strong { color: #059669; }
.agent-efloat-kpis__grid .is-out strong { color: #DC2626; }

.agent-efloat-kpis__grid span {
    display: block;
    margin-top: 4px;
    color: #000;
    font: clamp(14px, 3.4vw, 16px) var(--sb-font-regular);
}

.agent-efloat-balances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
}

.agent-efloat-balances span {
    display: block;
    color: #000;
    font: clamp(14px, 3.4vw, 16px) var(--sb-font-regular);
    text-transform: none;
    letter-spacing: 0;
}

.agent-efloat-balances strong {
    display: block;
    margin-top: 6px;
    font: normal clamp(16px, 4.8vw, 22px)/1.15 var(--sb-font-bold);
    color: #222222;
}

.agent-efloat-balances .is-current { color: #ea580c; }

.agent-efloat-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: #fff7ed;
}

.agent-efloat-alert.is-hidden,
.agent-efloat-alert[hidden] { display: none; }

.agent-efloat-alert strong {
    display: block;
    color: #DC2626;
    font: 14px var(--sb-font-bold);
}

.agent-efloat-alert p {
    margin: 4px 0 0;
    color: #991B1B;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-alert .agent-btn {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
}

.agent-efloat-actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
}

.agent-efloat-actions .agent-btn {
    min-height: 40px;
    height: 40px;
    border-radius: 10px;
    gap: 7px;
    font-size: 16px;
    padding: 0 14px;
}

.agent-efloat-actions__record {
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}

.agent-efloat-actions__export {
    border-color: #86efac !important;
    color: #15803d !important;
}

.agent-efloat-chart-card {
    padding: 16px !important;
    border-radius: 18px !important;
}

.agent-efloat-chart-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.agent-efloat-chart-card__head .agent-card__eyebrow {
    margin: 0;
    letter-spacing: .06em;
}

.agent-efloat-chart-card__bolt {
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1;
}

.agent-efloat-chart {
    position: relative;
    margin-top: 6px;
}

.agent-efloat-chart__plot {
    position: relative;
    height: 180px;
}

.agent-efloat-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.agent-efloat-chart__grid line,
.agent-efloat-chart__vgrid line {
    stroke: #e2e8f0;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.agent-efloat-chart__threshold {
    stroke: #f59e0b;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.agent-efloat-chart__line {
    stroke: #1e3a8a;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: var(--efloat-path-len, 1000);
    stroke-dashoffset: var(--efloat-path-len, 1000);
}

.agent-efloat-chart__line.is-drawn {
    animation: agent-efloat-draw 1.15s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes agent-efloat-draw {
    to { stroke-dashoffset: 0; }
}

.agent-efloat-chart__hits {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.agent-efloat-chart__dot {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2.5px solid #fff;
    border-radius: 50%;
    background: #1e3a8a;
    box-shadow: 0 1px 4px rgba(30, 58, 138, .25);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: scale(.4);
    transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}

.agent-efloat-chart__dot.is-visible {
    opacity: 1;
    transform: scale(1);
}

.agent-efloat-chart__dot:hover,
.agent-efloat-chart__dot:focus-visible,
.agent-efloat-chart__dot.is-active {
    outline: none;
    transform: scale(1.35);
    box-shadow: 0 4px 12px rgba(30, 58, 138, .35);
    z-index: 2;
}

.agent-efloat-chart__threshold-tag {
    position: absolute;
    right: 0;
    transform: translateY(4px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #B45309;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
    z-index: 2;
}

.agent-efloat-chart__threshold-tag em {
    font-style: normal;
}

.agent-efloat-chart__threshold-tag:hover,
.agent-efloat-chart__threshold-tag:focus-visible {
    background: #fffbeb;
    outline: none;
}

.agent-efloat-chart__tooltip {
    position: absolute;
    z-index: 4;
    min-width: 88px;
    max-width: 160px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    text-align: center;
}

.agent-efloat-chart__tooltip.is-near-left {
    transform: translate(0, calc(-100% - 14px));
}

.agent-efloat-chart__tooltip.is-near-left::after {
    left: 16px;
    margin-left: 0;
}

.agent-efloat-chart__tooltip.is-near-right {
    transform: translate(-100%, calc(-100% - 14px));
}

.agent-efloat-chart__tooltip.is-near-right::after {
    left: auto;
    right: 16px;
    margin-left: 0;
}

.agent-efloat-chart__tooltip[hidden] { display: none; }

.agent-efloat-chart__tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: #0f172a;
    transform: rotate(45deg);
}

.agent-efloat-chart__tooltip strong {
    display: block;
    font: 14px var(--sb-font-bold);
}

.agent-efloat-chart__tooltip span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 14px;
}

.agent-efloat-chart__threshold-tip {
    position: absolute;
    right: 8px;
    z-index: 4;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
    pointer-events: none;
    transform: translateY(calc(-100% - 8px));
    white-space: nowrap;
}

.agent-efloat-chart__threshold-tip[hidden] { display: none; }

.agent-efloat-chart__labels {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 10px;
}

.agent-efloat-chart__labels span {
    flex: 1;
    text-align: center;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 2px;
    border-bottom: 1px solid #eef1f5;
}

.agent-efloat-tabs button {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font: 14px/1 var(--sb-font-semibold);
    cursor: pointer;
}

.agent-efloat-tabs button.is-active {
    color: #fff;
    border-color: #3366CC;
    background: #3366CC;
}

.agent-efloat-list-card {
    padding: 4px 14px 6px !important;
    overflow: hidden;
}

.agent-efloat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-efloat-list li {
    display: grid;
    grid-template-columns: 64px auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 4px;
    border-top: 1px solid #eef1f5;
    border-radius: 10px;
    transition: background-color .15s ease;
}

.agent-efloat-list li:first-child { border-top: 0; }

.agent-efloat-list li:not(.is-empty):hover {
    background: #f8fafc;
}

.agent-efloat-list li.is-empty {
    display: block;
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
    text-align: left;
    padding: 18px 0;
}

.agent-efloat-list time {
    color: #8a94a6;
    font: 14px var(--sb-font-regular);
    white-space: nowrap;
}

.agent-efloat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 14px/1 var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-efloat-badge.is-withdrawal {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.agent-efloat-badge.is-topup {
    color: #16a34a;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.agent-efloat-badge.is-transfer {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.agent-efloat-list__copy {
    min-width: 0;
}

.agent-efloat-list__copy strong {
    display: block;
    overflow: hidden;
    color: #1e293b;
    font: 14px/1.3 var(--sb-font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-efloat-list__copy small {
    display: block;
    margin-top: 3px;
    color: #8a94a6;
    font: 14px/1.3 var(--sb-font-regular);
}

.agent-efloat-list em {
    font-style: normal;
    font: 14px/1.2 var(--sb-font-bold);
    white-space: nowrap;
    letter-spacing: -.01em;
}

.agent-efloat-list .is-up,
.agent-efloat-summary .is-up { color: #16a34a; }

.agent-efloat-list .is-down,
.agent-efloat-summary .is-down { color: #dc2626; }

.agent-efloat-summary .is-current { color: #ea580c; }

.agent-efloat-trail-card {
    position: relative;
    padding: 14px 14px 16px !important;
}

.agent-efloat-trail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 2px 2px;
    -webkit-overflow-scrolling: touch;
}

.agent-efloat-trail__node {
    flex: 1;
    min-width: 76px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    animation: agent-efloat-trail-in .45s ease forwards;
}

@keyframes agent-efloat-trail-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agent-efloat-trail__dot {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(21, 53, 98, .12);
    background: var(--sbo-navy, #153562);
    transition: transform .18s ease, box-shadow .18s ease;
}

.agent-efloat-trail__node.is-open .agent-efloat-trail__dot {
    background: var(--sbo-navy, #153562);
}

.agent-efloat-trail__node.is-open strong { color: var(--sbo-navy, #153562); }

.agent-efloat-trail__node.is-down .agent-efloat-trail__dot { background: #ef4444; }
.agent-efloat-trail__node.is-down strong { color: #dc2626; }

.agent-efloat-trail__node.is-up .agent-efloat-trail__dot { background: #22c55e; }
.agent-efloat-trail__node.is-up strong { color: #16a34a; }

.agent-efloat-trail__node.is-current .agent-efloat-trail__dot { background: #f59e0b; }
.agent-efloat-trail__node.is-current strong { color: #ea580c; }

.agent-efloat-trail__node strong {
    display: block;
    color: #222222;
    font: 14px/1.2 var(--sb-font-bold);
    letter-spacing: 0;
    transition: transform .18s ease;
}

.agent-efloat-trail__node span {
    display: block;
    margin-top: 4px;
    color: #8a94a6;
    font: 14px/1.2 var(--sb-font-regular);
}

.agent-efloat-trail__node:hover .agent-efloat-trail__dot,
.agent-efloat-trail__node:focus-visible .agent-efloat-trail__dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 1px rgba(21, 53, 98, .16), 0 4px 10px rgba(15, 23, 42, .18);
}

.agent-efloat-trail__node:hover strong,
.agent-efloat-trail__node:focus-visible strong {
    transform: scale(1.04);
}

.agent-efloat-trail__node:focus-visible {
    outline: none;
}

.agent-efloat-trail__arrow {
    flex-shrink: 0;
    align-self: center;
    margin-top: -10px;
    color: #cbd5e1;
    font: 16px/1 var(--sb-font-semibold);
    font-style: normal;
    opacity: 0;
    animation: agent-efloat-trail-in .45s ease .12s forwards;
}

.agent-efloat-trail__tip {
    position: absolute;
    z-index: 5;
    min-width: 92px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, -100%);
}

.agent-efloat-trail__tip[hidden] { display: none; }

.agent-efloat-trail__tip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: #0f172a;
    transform: rotate(45deg);
}

.agent-efloat-trail__tip strong {
    display: block;
    font: 13px var(--sb-font-bold);
}

.agent-efloat-trail__tip span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
}
.agent-efloat-summary {
    padding: 16px !important;
    border-radius: 16px !important;
    background: #f4f7fa !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

.agent-efloat-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.agent-efloat-summary__head .agent-card__eyebrow {
    margin: 0;
    color: var(--sbo-navy, #153562);
    letter-spacing: .06em;
}

.agent-efloat-summary__date {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid #E0E8FF;
    color: #64748b;
    font: 14px var(--sb-font-semibold);
    white-space: nowrap;
}

.agent-efloat-summary dl {
    margin: 0;
}

.agent-efloat-summary dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
}

.agent-efloat-summary dl > div.is-divider {
    display: block;
    height: 0;
    padding: 4px 0;
    border-top: 1px solid #dbe3ec;
}

.agent-efloat-summary dt {
    color: #000;
    font: 14px var(--sb-font-regular);
}

.agent-efloat-summary .is-closing dt {
    color: #222222;
    font: 14px var(--sb-font-bold);
}

.agent-efloat-summary dd {
    margin: 0;
    font: 14px var(--sb-font-bold);
    color: #222222;
    letter-spacing: 0;
}

.agent-efloat-summary dd.is-current {
    color: #2563EB;
    font-size: 16px;
}

.agent-efloat-summary .is-up { color: #16a34a; }
.agent-efloat-summary .is-down { color: #dc2626; }

.agent-efloat-summary__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #e7edf4;
}

.agent-efloat-summary__icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.agent-efloat-summary__note p {
    flex: 1;
    margin: 0;
    color: #8a94a6;
    font: 14px/1.4 var(--sb-font-regular);
}

.agent-efloat-summary__note strong {
    color: #222222;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.agent-efloat-summary__export {
    flex-shrink: 0;
    cursor: pointer;
}

.agent-efloat-summary__export:hover {
    color: #2563eb;
}

.agent-efloat-download__idle,
.agent-efloat-download__busy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.agent-efloat-download__busy[hidden],
.agent-efloat-download__idle[hidden] {
    display: none !important;
}

.agent-btn[data-efloat-download].is-loading {
    pointer-events: none;
    opacity: .92;
}

.agent-efloat-download__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: agent-cash-spin .7s linear infinite;
}

.agent-efloat-download__spinner.is-lg {
    width: 28px;
    height: 28px;
    border-width: 3px;
    border-color: rgba(21, 53, 98, .18);
    border-top-color: var(--sbo-navy, #153562);
}

.agent-efloat-download-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .42);
}

.agent-efloat-download-overlay.is-open {
    display: grid;
}

.agent-efloat-download-overlay__card {
    width: min(100%, 280px);
    padding: 22px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .24);
    text-align: center;
}

.agent-efloat-download-overlay__card .agent-efloat-download__spinner {
    margin: 0 auto 12px;
}

.agent-efloat-download-overlay__card strong {
    display: block;
    color: #222222;
    font: 16px var(--sb-font-bold);
}

.agent-efloat-download-overlay__card p {
    margin: 6px 0 0;
    color: #8a94a6;
    font-size: 14px;
}

.agent-efloat-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 16px;
    box-sizing: border-box;
}

.agent-efloat-modal.is-open { display: grid; }

.agent-efloat-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
}

.agent-efloat-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #E0E8FF;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 50, 80, 0.16);
    display: flex;
    flex-direction: column;
}

.agent-efloat-modal__header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    padding: 14px 16px;
    background: #3366CC;
}

.agent-efloat-modal__icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    flex-shrink: 0;
}

.agent-efloat-modal__header h2 {
    margin: 0;
    color: #fff;
    font: normal 18px/1.25 var(--sb-font-bold);
}

.agent-efloat-modal__header p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font: 14px/1.3 var(--sb-font-regular);
}

.agent-efloat-modal__header em {
    font-style: normal;
    font-family: var(--sb-font-semibold);
    color: #fff;
}

.agent-efloat-modal__close {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.agent-efloat-modal__form {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: #fff;
}

.agent-efloat-modal__fields,
.agent-efloat-modal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #F8FAFC;
}

.agent-efloat-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.agent-efloat-modal__field > span,
.agent-efloat-modal__label {
    display: block;
    margin: 0;
    color: #334155;
    font: 16px/1.3 var(--sb-font-semibold);
}

@media (min-width: 768px) {
    .agent-efloat-modal__field > span,
    .agent-efloat-modal__label,
    .agent-cash-range__field > span {
        font-size: 18px;
    }
}

.agent-efloat-modal__form input[type="number"],
.agent-efloat-modal__form input[type="text"],
.agent-efloat-modal__form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #222222;
    font: 15px/1.2 var(--sb-font-regular);
}

.agent-efloat-modal__form input::placeholder,
.agent-efloat-modal__form textarea::placeholder {
    color: #94a3b8;
    font-family: var(--sb-font-regular);
    font-size: 15px;
    opacity: 1;
}

.agent-efloat-modal__form textarea {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.4;
}

.agent-efloat-modal__form input:focus,
.agent-efloat-modal__form textarea:focus {
    outline: none;
    border-color: #3366CC;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.12);
}

.agent-efloat-modal__info {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #E0E8FF;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    font-size: 14px;
}

.agent-efloat-modal__info p {
    margin: 0;
    color: #8a94a6;
    font: 14px/1.4 var(--sb-font-regular);
}

.agent-efloat-modal__info strong {
    color: #222222;
    font-family: var(--sb-font-bold);
    font-weight: normal;
}

.agent-efloat-modal__footer,
.agent-efloat-modal__footer-static {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #E8EDF3;
}

.agent-efloat-modal__footer .agent-btn,
.agent-efloat-modal__footer-static .agent-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
}

.agent-efloat-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.agent-efloat-type-toggle label {
    box-sizing: border-box;
    margin: 0 !important;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font: 14px/1 var(--sb-font-semibold);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.agent-efloat-type-toggle label input { display: none; }

.agent-efloat-type-toggle label.is-active.is-withdrawal {
    border-color: #FECACA;
    background: #FEF1F2;
    color: #DC2626;
}

.agent-efloat-type-toggle label.is-active.is-topup {
    border-color: #BBF7D0;
    background: #ecfdf3;
    color: #15803d;
}

.agent-efloat-format {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}

.agent-efloat-format button {
    min-height: 36px;
    border: 1.5px solid #E0E8FF;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font: 14px var(--sb-font-semibold);
    cursor: pointer;
}

.agent-efloat-format button.is-active {
    border-color: #3366CC;
    background: #3366CC;
    color: #fff;
}

.agent-efloat-includes {
    margin: 0;
    padding: 14px;
    border: 1px solid #E0E8FF;
    border-radius: 15px;
    background: #fff;
}

.agent-efloat-includes > strong {
    display: block;
    margin-bottom: 10px;
    color: #222222;
    font: 14px var(--sb-font-bold);
    letter-spacing: 0;
    text-transform: none;
}

.agent-efloat-includes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-efloat-includes li {
    position: relative;
    padding: 5px 0 5px 22px;
    color: #1e293b;
    font-size: 14px;
}

.agent-efloat-includes li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    display: grid;
    place-items: center;
}

@media (max-width: 420px) {
    .agent-efloat-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-efloat-actions {
        grid-template-columns: 1fr;
    }

    .agent-efloat-list li {
        grid-template-columns: 56px auto minmax(0, 1fr);
        grid-template-areas:
            "time badge amount"
            ". copy copy";
        gap: 6px 10px;
        padding: 12px 2px;
    }

    .agent-efloat-list time { grid-area: time; }
    .agent-efloat-badge { grid-area: badge; justify-self: start; }
    .agent-efloat-list__copy { grid-area: copy; }
    .agent-efloat-list em {
        grid-area: amount;
        justify-self: end;
    }

    .agent-efloat-trail__node {
        min-width: 70px;
    }

    .agent-efloat-trail__node strong {
        font-size: 14px;
    }

    .agent-efloat-summary__note {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .agent-efloat-summary__export {
        margin-left: auto;
    }
}



.pb-10px{
    padding-bottom: 5px;
    margin-bottom: 0;
}