/* Customer-only visual layer. Keep page actions, forms and route hooks unchanged. */
body.customer-ui {
    --user-bg: #f3f7fc;
    --user-surface: #ffffff;
    --user-surface-soft: #f7faff;
    --user-text: #18243a;
    --user-muted: #5d6d85;
    --user-border: #dce5f1;
    --user-accent: #2459d6;
    --user-accent-soft: #eaf1ff;
    --user-input: #ffffff;
    --user-shadow: 0 14px 38px rgba(24, 49, 92, 0.07);
    color: var(--user-text);
    background: var(--user-bg);
    color-scheme: light;
}

html.dark body.customer-ui {
    --user-bg: #091629;
    --user-surface: #10243d;
    --user-surface-soft: #152b47;
    --user-text: #eaf1ff;
    --user-muted: #afc0d9;
    --user-border: #2c4666;
    --user-accent: #83b0ff;
    --user-accent-soft: #193b6c;
    --user-input: #0d213a;
    --user-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
    color-scheme: dark;
}

/* Keep customer dialogs above the sidebar and blur only the page behind them. */
body.customer-ui #confirmationModal,
body.customer-ui [data-modal-name] {
    z-index: 1200;
}

body.customer-ui #confirmationModalBackdrop,
body.customer-ui [data-modal-name] > div:first-child {
    background: rgba(7, 20, 40, 0.64);
    -webkit-backdrop-filter: blur(9px) saturate(0.88);
    backdrop-filter: blur(9px) saturate(0.88);
}

body.customer-ui [data-modal-name] > div:first-child > div {
    background: transparent;
    opacity: 1;
}

body.customer-ui :is(.esim-purchase-dialog, .esim-details-dialog, .fund-wallet-mobile-dialog)::backdrop {
    background: rgba(7, 20, 40, 0.64);
    -webkit-backdrop-filter: blur(9px) saturate(0.88);
    backdrop-filter: blur(9px) saturate(0.88);
}

@media (prefers-reduced-transparency: reduce) {
    body.customer-ui #confirmationModalBackdrop,
    body.customer-ui [data-modal-name] > div:first-child,
    body.customer-ui :is(.esim-purchase-dialog, .esim-details-dialog, .fund-wallet-mobile-dialog)::backdrop {
        background: rgba(7, 20, 40, 0.84);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

body.customer-ui .main-content,
body.customer-ui .content-area {
    background: var(--user-bg);
    color: var(--user-text);
}

body.customer-ui .content-area {
    max-width: 1500px;
    margin-inline: auto;
    padding: clamp(1rem, 2.2vw, 2rem);
}

body.customer-ui .sidebar {
    --sidebar-text: #e7efff;
    --sidebar-muted: #a9bddc;
    --sidebar-border: rgba(184, 209, 255, 0.17);
    background: radial-gradient(circle at 90% 0%, rgba(61, 126, 229, 0.27), transparent 38%),
        linear-gradient(175deg, #123365 0%, #0c2852 52%, #091d3c 100%);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 8px 0 28px rgba(10, 35, 75, 0.12);
    overscroll-behavior: contain;
}

html.dark body.customer-ui .sidebar {
    background: radial-gradient(circle at 90% 0%, rgba(39, 94, 175, 0.23), transparent 40%),
        linear-gradient(175deg, #0a1e3d 0%, #091b36 58%, #071528 100%);
}

body.customer-ui .sidebar-header {
    padding: 1.4rem 1.35rem 1.15rem;
    border-bottom: 1px solid var(--sidebar-border);
}

body.customer-ui .sidebar-logo {
    display: block;
    width: 149px;
    height: auto;
}

body.customer-ui .user-profile {
    margin: 1rem 0.85rem 1.15rem;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sidebar-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: none;
}

body.customer-ui .sidebar .user-avatar-container {
    padding: 0.85rem;
}

body.customer-ui .sidebar .user-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.75rem;
    background: #edf4ff;
    color: #15468d;
    box-shadow: none;
}

body.customer-ui .sidebar .user-info,
body.customer-ui .sidebar .balance-only {
    min-width: 0;
}

body.customer-ui .sidebar .user-name,
body.customer-ui .sidebar .balance-amount {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.customer-ui .sidebar .user-name {
    font-size: 0.9rem;
}

body.customer-ui .sidebar .user-status,
body.customer-ui .sidebar .balance-label {
    color: var(--sidebar-muted);
    font-size: 0.75rem;
}

body.customer-ui .sidebar .user-profile .online-dot {
    left: 0;
    bottom: 0;
    flex: none;
}

body.customer-ui .sidebar .balance-section {
    gap: 0.55rem;
    padding: 0.8rem 0.85rem;
    border-top: 1px solid var(--sidebar-border);
    background: rgba(0, 0, 0, 0.08);
}

body.customer-ui .sidebar .balance-amount {
    font-size: 1.13rem;
    line-height: 1.3;
}

body.customer-ui .sidebar .add-funds-btn {
    min-height: 40px;
    border: 1px solid rgba(168, 201, 255, 0.4);
    border-radius: 0.7rem;
    background: #2864d6;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

body.customer-ui .sidebar .add-funds-btn:hover {
    background: #3978ef;
    color: #fff;
}

body.customer-ui .sidebar .menu-section {
    padding: 0 0.85rem 1.25rem;
}

body.customer-ui .sidebar .menu-title {
    margin: 1.15rem 0.7rem 0.5rem;
    color: var(--sidebar-muted);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

body.customer-ui .sidebar .menu-title:first-child {
    margin-top: 0.35rem;
}

body.customer-ui .sidebar .menu-list {
    margin-bottom: 0.65rem;
}

body.customer-ui .sidebar .menu-item {
    margin-bottom: 0.15rem;
}

body.customer-ui .sidebar .menu-link {
    min-height: 44px;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    color: var(--sidebar-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.customer-ui .sidebar button.menu-link {
    width: 100%;
    appearance: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

body.customer-ui .sidebar .menu-link:hover,
body.customer-ui .sidebar .menu-link:focus-visible,
body.customer-ui .sidebar button.menu-link:hover,
body.customer-ui .sidebar button.menu-link:focus-visible {
    border-color: var(--sidebar-border);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: none !important;
}

body.customer-ui .sidebar .menu-link:focus-visible {
    outline: 2px solid #b8d5ff;
    outline-offset: 2px;
}

body.customer-ui .sidebar .menu-link.active,
body.customer-ui .sidebar button.menu-link.active {
    border-color: rgba(173, 205, 255, 0.26);
    background: rgba(95, 151, 249, 0.22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.customer-ui .sidebar .menu-link.active::before {
    top: 0.6rem;
    bottom: 0.6rem;
    height: auto;
    transform: none;
    background: #a9c9ff;
}

body.customer-ui .sidebar .menu-icon {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 0.3rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.08);
}

body.customer-ui .sidebar .menu-link:is(:hover, .active) .menu-icon {
    background: rgba(178, 210, 255, 0.18);
}

body.customer-ui .sidebar .menu-badge {
    background: rgba(174, 206, 255, 0.2);
    color: #f1f7ff;
}

body.customer-ui .sidebar .menu-tag--new {
    border: 1px solid rgba(105, 224, 168, 0.3);
    background: rgba(19, 148, 94, 0.23);
    color: #b6f7d2;
    box-shadow: none;
}

body.customer-ui .sidebar .dropdown-menu.show {
    margin: 0.2rem 0 0.4rem 1.1rem;
    padding: 0.3rem;
    border-left: 1px solid var(--sidebar-border);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.12);
}

body.customer-ui .sidebar .dropdown-menu .menu-link {
    min-height: 40px;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
}

body.customer-ui .sidebar .dropdown-menu .menu-icon {
    width: 16px;
    height: 16px;
    padding: 0.23rem;
}

body.customer-ui .sidebar-close {
    border: 1px solid var(--sidebar-border);
    background: #1a437d;
}

@media (max-width: 768px) {
    body.customer-ui .sidebar {
        height: 100dvh !important;
    }
}

body.customer-ui .menu-link {
    min-height: 2.75rem;
    border-radius: 0.8rem;
}

body.customer-ui .menu-link:focus-visible,
body.customer-ui .top-bar a:focus-visible,
body.customer-ui .top-bar button:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

body.customer-ui .top-bar {
    min-height: 4.5rem;
    background: var(--user-surface);
    border-bottom: 1px solid var(--user-border);
    box-shadow: 0 4px 20px rgba(28, 48, 87, 0.04);
}

body.customer-ui .top-bar :is(.provider-label, .mobile-provider-name) {
    color: var(--user-muted);
}

body.customer-ui .top-bar :is(.provider-btn, .action-btn, .mobile-menu-toggle, .mobile-provider-switch, .theme-toggle) {
    background: var(--user-surface-soft);
    color: var(--user-text);
    border: 1px solid var(--user-border);
    border-radius: 0.8rem;
    text-decoration: none;
}

body.customer-ui .top-bar :is(.provider-btn, .action-btn, .mobile-menu-toggle, .mobile-provider-switch, .theme-toggle):hover {
    background: var(--user-accent-soft);
    color: var(--user-accent);
    border-color: var(--user-accent);
}

body.customer-ui .top-bar .mobile-provider-section {
    background: var(--user-surface-soft);
    border-color: var(--user-border);
    border-radius: 0.8rem;
}

body.customer-ui .top-bar .user-avatar {
    background: var(--user-accent-soft);
    color: var(--user-accent);
    border-color: var(--user-border);
    box-shadow: none;
}

body.customer-ui .top-actions {
    gap: 0.55rem;
}

body.customer-ui .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

body.customer-ui .theme-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

body.customer-ui .theme-toggle__sun,
html.dark body.customer-ui .theme-toggle__moon {
    display: none;
}

html.dark body.customer-ui .theme-toggle__sun {
    display: block;
}

body.customer-ui :is(.welcome-card, .content-card, .transactions-card) {
    background: var(--user-surface);
    color: var(--user-text);
    border: 1px solid var(--user-border);
    border-radius: 1.25rem;
    box-shadow: var(--user-shadow);
}

body.customer-ui .welcome-card {
    border-top: 1px solid var(--user-border);
}

body.customer-ui .content-card {
    padding: clamp(1.1rem, 2vw, 1.75rem);
}

body.customer-ui :is(.welcome-title, .card-title, .empty-title, .balance-value) {
    color: var(--user-text);
    letter-spacing: -0.025em;
}

body.customer-ui :is(.welcome-subtitle, .empty-subtitle, .balance-info h3) {
    color: var(--user-muted);
}

body.customer-ui .card-header {
    margin-bottom: 1.25rem;
}

body.customer-ui .balance-display,
body.customer-ui .empty-icon {
    background: var(--user-surface-soft);
    border-color: var(--user-border);
}

body.customer-ui .online-indicator {
    background: var(--user-accent-soft);
    color: var(--user-accent);
}

html.dark body.customer-ui .status-badge.status-complete,
html.dark body.customer-ui .status-badge.status-successful {
    background: #173e32;
    color: #a7e8c3;
}

html.dark body.customer-ui .status-badge.status-pending {
    background: #483819;
    color: #ffdf92;
}

html.dark body.customer-ui .status-badge.status-rejected,
html.dark body.customer-ui .status-badge.status-failed,
html.dark body.customer-ui .status-badge.status-cancelled {
    background: #4b2831;
    color: #ffb2c0;
}

body.customer-ui .content-area :is(.form-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, select) {
    background-color: var(--user-input);
    color: var(--user-text);
    border-color: var(--user-border);
    border-radius: 0.8rem;
    min-height: 2.75rem;
}

body.customer-ui .content-area :is(input, textarea, select)::placeholder {
    color: var(--user-muted);
    opacity: 0.85;
}

body.customer-ui .content-area select option {
    background: var(--user-input);
    color: var(--user-text);
}

body.customer-ui .content-area :is(input, textarea, select):focus-visible {
    border-color: var(--user-accent);
    outline: 2px solid var(--user-accent);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(77, 132, 238, 0.16);
}

body.customer-ui .content-area :is(.form-label, label) {
    color: var(--user-text);
}

body.customer-ui .content-area :is(.btn-primary, .btn-secondary) {
    border-radius: 0.8rem;
    min-height: 2.7rem;
    justify-content: center;
    font-weight: 650;
}

body.customer-ui .content-area .btn-secondary {
    background: var(--user-surface);
    color: var(--user-accent);
    border-color: var(--user-border);
}

body.customer-ui .content-area .btn-secondary:hover {
    background: var(--user-accent-soft);
}

body.customer-ui .content-area :is(.custom-table, table) {
    color: var(--user-text);
}

body.customer-ui .content-area :is(.custom-table thead, table thead) {
    background: var(--user-surface-soft);
}

body.customer-ui .content-area :is(.custom-table th, .custom-table td, table th, table td) {
    border-color: var(--user-border);
}

body.customer-ui .content-area :is(.custom-table th, table th) {
    color: var(--user-muted);
}

body.customer-ui .content-area :is(.custom-table tbody tr:hover, table tbody tr:hover) {
    background: var(--user-surface-soft);
}

body.customer-ui .select2-container--default .select2-selection--single,
body.customer-ui .select2-dropdown,
body.customer-ui .select2-search--dropdown .select2-search__field {
    background: var(--user-input);
    color: var(--user-text);
    border-color: var(--user-border);
    border-radius: 0.8rem;
}

body.customer-ui .select2-container--default .select2-selection--single .select2-selection__rendered,
body.customer-ui .select2-container--default .select2-results__option[aria-selected=true] {
    color: var(--user-text);
}

body.customer-ui .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--user-surface-soft);
}

body.customer-ui .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--user-muted);
}

/* Select2 moves utility and SMS option menus directly under <body>. */
body.customer-ui .select2-container--default .select2-results__option {
    color: var(--user-text);
}

body.customer-ui .select2-container--default .select2-results__option--disabled {
    color: var(--user-muted);
}

body.customer-ui .select2-container .option-name {
    color: var(--user-text);
}

body.customer-ui .select2-container .option-info {
    color: var(--user-muted);
}

body.customer-ui .select2-container .option-price {
    color: var(--user-accent);
}

body.customer-ui .select2-container--default .select2-results__option--selected {
    background: var(--user-accent-soft);
    color: var(--user-text);
}

body.customer-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
body.customer-ui .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--user-accent-soft);
    color: var(--user-text);
}

body.customer-ui .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .option-name {
    color: var(--user-text);
}

/* Select2 moves SMS service results outside the page wrapper into <body>. */
body.customer-ui .select2-dropdown .service-name,
body.customer-ui .select2-selection .service-name {
    color: var(--user-text);
}

body.customer-ui .select2-dropdown .service-short,
body.customer-ui .select2-selection .service-short {
    color: var(--user-muted);
}

body.customer-ui .select2-dropdown .service-price,
body.customer-ui .select2-selection .service-price,
body.customer-ui .content-area .tier-total-price {
    color: var(--user-accent);
}

body.customer-ui .pagination-container :is(a, span[aria-current] span) {
    border-color: var(--user-border);
}

body.customer-ui .pagination-container a {
    background: var(--user-surface);
    color: var(--user-accent);
}

html.dark body.customer-ui .content-area :is(.bg-white, .bg-gray-50, .bg-slate-50) {
    background-color: var(--user-surface-soft) !important;
}

html.dark body.customer-ui .content-area :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800) {
    color: var(--user-text) !important;
}

html.dark body.customer-ui .content-area :is(.text-gray-600, .text-gray-500, .text-slate-600, .text-slate-500) {
    color: var(--user-muted) !important;
}

html.dark body.customer-ui .content-area :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-200) {
    border-color: var(--user-border) !important;
}

html.dark body.customer-ui .content-area :is(.bg-blue-50, .bg-indigo-50) {
    background-color: var(--user-accent-soft) !important;
}

html.dark body.customer-ui .content-area :is(.text-blue-700, .text-blue-800, .text-indigo-700) {
    color: var(--user-accent) !important;
}

body.customer-ui .mobile-bottom-nav__bar {
    background: var(--user-surface);
    border-color: var(--user-border);
    box-shadow: 0 10px 34px rgba(19, 47, 89, 0.16);
}

html.dark body.customer-ui .mobile-bottom-nav__bar {
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.44);
}

body.customer-ui .mobile-bottom-nav__item {
    color: var(--user-muted);
}

body.customer-ui .mobile-bottom-nav__item:hover,
body.customer-ui .mobile-bottom-nav__item.is-active {
    color: var(--user-accent);
    background: var(--user-accent-soft);
    border-color: var(--user-border);
}

body.customer-ui .mobile-bottom-nav__item:focus-visible {
    outline-color: var(--user-accent);
}

body.customer-ui .mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon {
    filter: none;
}

body.customer-ui .mobile-bottom-nav__glow {
    display: none;
}

@media (max-width: 1053px) {
    body.customer-ui .theme-toggle__label {
        display: none;
    }

    body.customer-ui .top-actions {
        gap: 0.3rem;
    }
}

@media (max-width: 768px) {
    body.customer-ui .content-area {
        padding: 1rem 0.8rem 1.5rem;
    }

    body.customer-ui .content-card,
    body.customer-ui .welcome-card {
        border-radius: 1rem;
    }

    body.customer-ui .top-bar {
        min-height: 3.7rem;
        padding: 0.5rem 0.8rem;
    }
}

@media (max-width: 390px) {
    body.customer-ui .top-actions__services {
        display: none;
    }

    body.customer-ui .top-bar .mobile-provider-section {
        margin-left: 2.75rem;
        max-width: 6.4rem;
        min-width: 0;
    }

    body.customer-ui .mobile-provider-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.customer-ui .top-bar .action-btn {
        padding: 0.45rem;
    }
}

@media (max-width: 350px) {
    body.customer-ui .top-actions__profile {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.customer-ui :is(.content-card, .welcome-card, .menu-link, .action-btn, .theme-toggle) {
        transition: none;
    }
}