@import url("../public/brand-theme.php");

/* Last-loaded project control layer: consistent water-glass controls without changing semantic states. */
:root {
    --ak-water-shift-x: 0px;
    --ak-water-shift-y: 0px;
}

html {
    background:
        radial-gradient(circle at 10% 14%, rgba(var(--brand-primary-rgb), 0.11), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(125, 211, 252, 0.16), transparent 26rem),
        linear-gradient(180deg, #f7fcff 0%, #eaf7fe 52%, #f9fdff 100%);
}

body:not([data-page="admin-utility-transactions"]) {
    isolation: isolate;
    background: transparent !important;
}

body:not([data-page="admin-utility-transactions"])::before,
body:not([data-page="admin-utility-transactions"])::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body:not([data-page="admin-utility-transactions"])::before {
    z-index: -3;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--brand-primary-rgb), 0.12), transparent 25rem),
        radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.92), transparent 20rem),
        radial-gradient(circle at 70% 78%, rgba(var(--brand-primary-rgb), 0.08), transparent 31rem),
        linear-gradient(180deg, #f8fdff 0%, #eaf8ff 46%, #f9fdff 100%);
}

body:not([data-page="admin-utility-transactions"])::after {
    z-index: -2;
    opacity: 0.72;
    background:
        radial-gradient(ellipse at 8% 82%, rgba(255, 255, 255, 0.82) 0 1.8rem, rgba(var(--brand-primary-rgb), 0.16) 1.9rem, transparent 3.6rem),
        radial-gradient(circle at 91% 42%, rgba(255, 255, 255, 0.72) 0 0.9rem, rgba(var(--brand-primary-rgb), 0.15) 1rem, transparent 2rem),
        radial-gradient(circle at 83% 56%, rgba(255, 255, 255, 0.62) 0 0.54rem, rgba(var(--brand-primary-rgb), 0.13) 0.62rem, transparent 1.28rem),
        radial-gradient(circle at 17% 91%, rgba(255, 255, 255, 0.68) 0 0.74rem, rgba(var(--brand-primary-rgb), 0.13) 0.84rem, transparent 1.5rem),
        repeating-radial-gradient(ellipse at 98% 78%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px 18px),
        repeating-radial-gradient(ellipse at -6% 100%, rgba(255, 255, 255, 0.26) 0 1px, transparent 2px 20px);
    filter: drop-shadow(0 18px 28px rgba(var(--brand-primary-rgb), 0.12));
    transform: translate3d(var(--ak-water-shift-x), var(--ak-water-shift-y), 0);
    transition: transform 0.38s ease-out;
}

body:not([data-page="admin-utility-transactions"]):hover::after {
    transform: translate3d(calc(var(--ak-water-shift-x) + 5px), calc(var(--ak-water-shift-y) - 3px), 0);
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.78;
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg::before,
body:not([data-page="admin-utility-transactions"]) .ak-water-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg::before {
    right: -9rem;
    bottom: 4%;
    width: 42rem;
    height: 10rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.55) transparent transparent transparent;
    transform: rotate(-10deg);
    box-shadow: 0 -10px 24px rgba(var(--brand-primary-rgb), 0.07);
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg::after {
    left: -8rem;
    bottom: 1%;
    width: 34rem;
    height: 8rem;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
    transform: rotate(9deg);
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop {
    position: absolute;
    display: block;
    width: var(--ak-drop-size, 2.5rem);
    height: var(--ak-drop-size, 2.5rem);
    border-radius: 999px;
    background:
        radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.98) 0 16%, rgba(255, 255, 255, 0.48) 17% 28%, transparent 29%),
        radial-gradient(circle at 60% 68%, rgba(195, 235, 255, 0.58), rgba(var(--brand-primary-rgb), 0.16) 62%, transparent 70%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(196, 234, 252, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 8px 10px 18px rgba(255, 255, 255, 0.78),
        inset -10px -12px 20px rgba(var(--brand-primary-rgb), 0.13),
        0 10px 20px rgba(var(--brand-primary-rgb), 0.13);
    transition: transform 0.42s ease-out;
}

body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--1 { left: 6%; top: 73%; --ak-drop-size: 3rem; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--2 { left: 12%; top: 86%; --ak-drop-size: 1.1rem; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--3 { left: 88%; top: 39%; --ak-drop-size: 2rem; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--4 { left: 92%; top: 54%; --ak-drop-size: 1.3rem; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--5 { left: 22%; top: 15%; --ak-drop-size: 0.85rem; opacity: 0.58; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--6 { left: 75%; top: 19%; --ak-drop-size: 1rem; opacity: 0.6; }
body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop--7 { left: 47%; top: 91%; --ak-drop-size: 0.7rem; opacity: 0.48; }

body:not([data-page="admin-utility-transactions"]) :where(
    main,
    .page-shell,
    .public-shell,
    .service-main,
    .service-shell,
    .dashboard-shell,
    .profile-shell,
    .wallet-shell,
    .auth-page,
    .admin-support-main,
    .admin-console,
    .support-console-board,
    .content-area
) {
    background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    body:not([data-page="admin-utility-transactions"])::after,
    body:not([data-page="admin-utility-transactions"]) .ak-water-bg__drop {
        transition: none !important;
        transform: none !important;
    }
}

:where(
    .admin-search-input,
    .smart-search-input,
    input[type="search"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select:not([class*="status"]):not([data-utility-status-select])
) {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.24) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(221, 242, 253, 0.58)) !important;
    color: var(--brand-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(var(--brand-primary-rgb), 0.1),
        0 8px 22px rgba(var(--brand-deep-rgb), 0.09) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

:where(
    .admin-search-input,
    .smart-search-input,
    input[type="search"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select:not([class*="status"]):not([data-utility-status-select])
):focus {
    border-color: rgba(var(--brand-primary-rgb), 0.58) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(210, 239, 254, 0.72)) !important;
    box-shadow:
        0 0 0 4px var(--brand-ring),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 12px 28px rgba(var(--brand-deep-rgb), 0.14) !important;
    outline: none !important;
}

:where(
    .btn.ghost,
    .btn.secondary,
    .copy-chip,
    .rd-copy-btn,
    .walletFilterBtn,
    .table-zoom-btn,
    .proofLink,
    .proof-modal__btn,
    .utility-filter-close,
    .utility-filter-chip,
    .utility-payment-sync-btn,
    .utility-row-toggle,
    .utility-row-toggle-btn,
    .utility-receipt-download-btn,
    .history-receipt-download,
    .pager a,
    .pagination a,
    .pagination button,
    .page-controls button,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn])
) {
    border: 1px solid var(--brand-control-border) !important;
    background: var(--brand-control-secondary) !important;
    color: var(--brand-deep) !important;
    box-shadow: var(--brand-control-shadow-soft) !important;
    text-shadow: none !important;
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

:where(
    .btn.ghost,
    .btn.secondary,
    .copy-chip,
    .rd-copy-btn,
    .walletFilterBtn,
    .table-zoom-btn,
    .proofLink,
    .proof-modal__btn,
    .utility-filter-close,
    .utility-filter-chip,
    .utility-payment-sync-btn,
    .utility-row-toggle,
    .utility-row-toggle-btn,
    .utility-receipt-download-btn,
    .history-receipt-download,
    .pager a,
    .pagination a,
    .pagination button,
    .page-controls button,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn])
):hover,
:where(
    .btn.ghost,
    .btn.secondary,
    .copy-chip,
    .rd-copy-btn,
    .walletFilterBtn,
    .table-zoom-btn,
    .proofLink,
    .proof-modal__btn,
    .utility-filter-close,
    .utility-filter-chip,
    .utility-payment-sync-btn,
    .utility-row-toggle,
    .utility-row-toggle-btn,
    .utility-receipt-download-btn,
    .history-receipt-download,
    .pager a,
    .pagination a,
    .pagination button,
    .page-controls button,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn])
):focus-visible {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: var(--brand-control-primary) !important;
    color: #fff !important;
    box-shadow: var(--brand-control-shadow) !important;
    transform: translateY(-1px);
    outline: none !important;
}

:where(.btn.primary, .cta-btn, button[type="submit"].btn:not(.ghost):not(.secondary)) {
    background: var(--brand-control-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
    box-shadow: var(--brand-control-shadow) !important;
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
}

:where(.btn, button, a)[disabled],
:where(.btn, button, a)[aria-disabled="true"],
:where(.pager a, .pagination a).is-disabled {
    transform: none !important;
    filter: grayscale(0.08) !important;
    opacity: 0.58 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

:where(.admin-panel, .info-card, .history-scroll, .walletTableWrap, .table-wrap, .data-table-wrap) {
    border-color: rgba(var(--brand-primary-rgb), 0.14);
}

:where(
    .admin-content,
    .admin-panel,
    .admin-panel-scroll,
    .panel-actions,
    .utility-filter-group,
    .service-filter-group,
    .history-scroll,
    .walletTableWrap,
    .table-wrap,
    .data-table-wrap,
    .auth-main,
    .auth-forms,
    .auth-card,
    .auth-form
) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

:where(
    .history-scroll,
    .walletTableWrap,
    .table-wrap,
    .data-table-wrap
) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(
    .panel-actions,
    .admin-table-actions,
    .utility-copy-line,
    .utility-payment-status,
    .utility-payment-ref,
    .auth-form,
    .form-row,
    .field-row
) > * {
    min-width: 0;
}

:where(
    .cellDesc,
    .cellUser,
    .payment-reference,
    .transaction-id,
    .order-id,
    [data-transaction-id],
    [data-payment-id]
) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

:where(.admin-panel, .info-card) :where(table thead th) {
    background:
        linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.98), rgba(var(--brand-deep-rgb), 1)) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

:where(.admin-panel, .info-card) :where(table tbody tr:hover td) {
    background: rgba(var(--brand-primary-rgb), 0.055);
}

/* Non-utility pages: keep custom buttons/inputs in the AK water-glass brand language. */
body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar-toggle,
    .admin-nav-group-toggle,
    .admin-sidebar .admin-nav-button,
    .admin-nav-button--support,
    .admin-ops-period button,
    .admin-utility-quick__rows-select,
    .admin-modal__close,
    .walletFilterPopupClose,
    .walletFilterBtn,
    .walletFooter select,
    .toolbar input,
    .toolbar select,
    .walletToolbarField input,
    .walletToolbarField select,
    .coupon-table-tools input[type="search"],
    .coupon-table-tools select,
    .coupon-table-footer select,
    .panel-actions--inline input[type="search"],
    .panel-actions--inline select,
    .admin-inline-form input,
    .admin-inline-form select,
    .admin-filter-select,
    .admin-select,
    .wallet-admin-form input,
    .admin-reset-form input,
    .proof-modal__close,
    .proofLink,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn]),
    .sahi-side-toggle,
    .sahi-toggle-btn,
    .sahi-ops-period button,
    .sahi-utility-quick-search,
    .sahi-utility-quick-rows-select,
    .sahi-form input,
    .sahi-form select,
    .sahi-form textarea,
    .edField input,
    .edField select,
    .edField textarea,
    .agh-month select,
    .go-modal__actions .btn,
    .go-field input,
    .go-qty__input,
    .go-pin-boxes input
) {
    border-color: var(--brand-control-border) !important;
    background: var(--brand-control-secondary) !important;
    color: var(--brand-deep) !important;
    box-shadow: var(--brand-control-shadow-soft) !important;
    text-shadow: none !important;
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar-toggle,
    .admin-sidebar .admin-nav-button,
    .admin-nav-button--support,
    .admin-ops-period button,
    .walletFilterPopupClose,
    .walletFilterBtn,
    .proof-modal__close,
    .proofLink,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn]),
    .sahi-side-toggle,
    .sahi-toggle-btn,
    .sahi-ops-period button,
    .go-modal__actions .btn
):hover,
body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar-toggle,
    .admin-sidebar .admin-nav-button,
    .admin-nav-button--support,
    .admin-ops-period button,
    .walletFilterPopupClose,
    .walletFilterBtn,
    .proof-modal__close,
    .proofLink,
    .table-actions button,
    .admin-table-actions button:not(.action-credit):not(.action-debit):not(.action-reject):not([data-refund-action]):not([data-user-delete-btn]),
    .sahi-side-toggle,
    .sahi-toggle-btn,
    .sahi-ops-period button,
    .go-modal__actions .btn
):focus-visible,
body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar .admin-nav-button.is-active,
    .admin-ops-period button.is-active,
    .sahi-ops-period button.is-active,
    .sahi-toggle-btn[data-state="on"]
) {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: var(--brand-control-primary) !important;
    color: #fff !important;
    box-shadow: var(--brand-control-shadow) !important;
    outline: none !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar .admin-nav-button .icon-circle,
    .admin-nav-group-toggle .admin-nav-group-chevron,
    .admin-nav-button--support .icon-circle
) {
    border-color: rgba(var(--brand-primary-rgb), 0.22) !important;
    background: rgba(var(--brand-primary-rgb), 0.12) !important;
    color: var(--brand-deep) !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-sidebar .admin-nav-button:hover .icon-circle,
    .admin-sidebar .admin-nav-button:focus-visible .icon-circle,
    .admin-sidebar .admin-nav-button.is-active .icon-circle,
    .admin-nav-button--support .icon-circle
) {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-range-row input[type="range"],
    input[type="range"]
) {
    accent-color: var(--brand-primary) !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-toggle-row,
    .sahi-toggle-row
) {
    border-color: rgba(var(--brand-primary-rgb), 0.16) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(221, 242, 253, 0.46)) !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-toggle-label strong,
    .sahi-toggle-row strong
) {
    color: var(--brand-ink) !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .admin-toggle-label small,
    .sahi-toggle-row p
) {
    color: rgba(var(--brand-deep-rgb), 0.72) !important;
}

body[data-page="dashboard"] :where(
    .wallet-banner,
    .dashboard-greeting,
    .dashboard-command-center,
    .dashboard-service-health,
    .hero-highlight-card,
    .quick-action-card,
    .service-health-metrics article,
    .service-health-item,
    .dashboard-panel,
    .dashboard-coupons,
    .dashboard-panel-links
),
body[data-page="wallet"] :where(
    .wallet-primary-card,
    .wallet-stats article,
    .wallet-history-card,
    .wallet-load-modal__dialog
),
body[data-page="profile"] :where(
    .profile-card,
    .mobile-card__status,
    .kyc-status-block
) {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(221, 242, 253, 0.58)),
        radial-gradient(circle at 12% 0%, rgba(var(--brand-primary-rgb), 0.14), transparent 42%) !important;
    color: var(--brand-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 24px 60px rgba(var(--brand-deep-rgb), 0.14) !important;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body[data-page="dashboard"] :where(
    .wallet-banner .label,
    .wallet-banner h2,
    .wallet-banner .wallet-updated,
    .dashboard-command-center h3,
    .dashboard-service-health h3,
    .hero-highlight-card strong,
    .quick-action-card strong,
    .service-health-metrics strong,
    .service-health-item strong
) {
    color: var(--brand-ink) !important;
}

body[data-page="dashboard"] :where(
    .wallet-banner .wallet-updated,
    .quick-action-card small,
    .service-health-metrics span,
    .service-health-item small,
    .dashboard-greeting p
) {
    color: rgba(var(--brand-deep-rgb), 0.72) !important;
}

body[data-page="dashboard"] :where(
    .wallet-avatar,
    .wallet-identity-chip,
    .quick-action-tag
),
body[data-page="wallet"] :where(
    .wallet-avatar,
    .wallet-heading-top .badge,
    .wallet-identity-row
) {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18) !important;
    background: rgba(var(--brand-primary-rgb), 0.11) !important;
    color: var(--brand-deep) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-page="dashboard"] .wallet-banner .wallet-avatar {
    background: linear-gradient(145deg, rgba(var(--brand-primary-rgb), 0.2), rgba(var(--brand-deep-rgb), 0.12)) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.32) !important;
    color: var(--brand-deep) !important;
}

body[data-page="dashboard"] .wallet-banner .wallet-avatar svg,
body[data-page="dashboard"] .wallet-banner .wallet-avatar svg * {
    color: var(--brand-deep) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

body[data-page="dashboard"] .wallet-banner :where(.label, h2) {
    color: var(--brand-ink) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body[data-page="dashboard"] .wallet-banner .wallet-identity-chip {
    background: rgba(var(--brand-primary-rgb), 0.16) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.3) !important;
    color: var(--brand-deep) !important;
}

body[data-page="dashboard"] .wallet-banner :where(
    .wallet-identity-chip-label,
    .wallet-identity-chip-value,
    .wallet-identity-chip-copy
) {
    color: var(--brand-deep) !important;
}

body[data-page="dashboard"] .wallet-banner .wallet-updated {
    color: rgba(var(--brand-deep-rgb), 0.78) !important;
}

body[data-page="dashboard"] .wallet-banner-actions :where(.btn.primary, .btn.ghost) {
    border: 1px solid var(--brand-control-border) !important;
    background: var(--brand-control-secondary) !important;
    color: var(--brand-ink) !important;
    box-shadow: var(--brand-control-shadow-soft) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
}

body[data-page="dashboard"] .wallet-banner-actions :where(.btn.primary, .btn.ghost):hover,
body[data-page="dashboard"] .wallet-banner-actions :where(.btn.primary, .btn.ghost):focus-visible {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: var(--brand-control-primary) !important;
    color: #fff !important;
    box-shadow: var(--brand-control-shadow) !important;
}

body[data-page="dashboard"] .wallet-icon-btn .icon-circle {
    border-color: rgba(var(--brand-primary-rgb), 0.34) !important;
    background: rgba(var(--brand-primary-rgb), 0.18) !important;
    color: var(--brand-deep) !important;
    font-weight: 900 !important;
}

body[data-page="dashboard"] .wallet-banner-actions :where(.btn.primary, .btn.ghost):hover .icon-circle,
body[data-page="dashboard"] .wallet-banner-actions :where(.btn.primary, .btn.ghost):focus-visible .icon-circle {
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Utility transactions: readable fixed columns and a single glass footer language. */
body[data-page="admin-utility-transactions"] .panel-actions--stretch {
    position: relative;
    z-index: 30;
    overflow: visible;
    padding: 0.58rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(217, 241, 253, 0.48));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(var(--brand-deep-rgb), 0.08);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

body[data-page="admin-utility-transactions"] .utility-filter-group .admin-search-input {
    min-width: 260px !important;
    border-radius: 14px !important;
}

body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table {
    table-layout: fixed !important;
    width: 1560px !important;
    min-width: 1560px !important;
    max-width: 1560px !important;
}

body[data-page="admin-utility-transactions"] .admin-panel-scroll {
    position: relative;
    z-index: 1;
}

body[data-page="admin-utility-transactions"] .utility-filter-panel {
    z-index: 100 !important;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg, #ffffff, #eef8ff) !important;
    box-shadow:
        0 24px 60px rgba(var(--brand-deep-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(1) { width: 48px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(2) { width: 160px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(3) {
    width: 0;
    display: none !important;
}
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(4) { width: 150px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(5) { width: 90px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(6) {
    width: 0;
    display: none !important;
}
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(7) { width: 165px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(8) { width: 145px; }
body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-orders-table :is(th, td):nth-child(8) { width: 172px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(9) { width: 320px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(10) { width: 335px; }
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(11),
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(12),
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(13) {
    width: 0;
    display: none !important;
}
body[data-page="admin-utility-transactions"] .utility-orders-table :is(th, td):nth-child(14) { width: 100px; }

body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table th,
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0.58rem !important;
    padding-right: 0.58rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table th {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(2),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(4),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(5),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(7),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(8),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(9),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(10),
body[data-page="admin-utility-transactions"] .admin-panel[data-admin-panel="utility"] .utility-orders-table td:nth-child(14) {
    text-overflow: clip !important;
}

body[data-page="admin-utility-transactions"] .utility-copy-line,
body[data-page="admin-utility-transactions"] .utility-payment-status,
body[data-page="admin-utility-transactions"] .utility-payment-ref {
    min-width: 0;
    max-width: 100%;
}

body[data-page="admin-utility-transactions"] .utility-copy-line strong,
body[data-page="admin-utility-transactions"] .utility-payment-ref strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

body[data-page="admin-utility-transactions"] td[data-label="Date"] {
    display: table-cell !important;
}

body[data-page="admin-utility-transactions"] .utility-date-ref {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    line-height: 1.1;
    white-space: nowrap;
}

body[data-page="admin-utility-transactions"] .utility-date-ref strong,
body[data-page="admin-utility-transactions"] .utility-date-ref small {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
}

body[data-page="admin-utility-transactions"] td[data-label="Gateway Order ID"],
body[data-page="admin-utility-transactions"] [data-utility-gateway-order-cell] {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.18;
}

body[data-page="admin-utility-transactions"] .utility-date-ref strong {
    color: var(--brand-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

body[data-page="admin-utility-transactions"] .utility-date-ref small {
    color: rgba(11, 20, 55, 0.62);
    font-size: 0.68rem;
    font-weight: 600;
}

body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-date-ref {
    display: grid;
    row-gap: 0.2rem;
    line-height: 1.22;
}

body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-date-ref strong,
body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-date-ref small {
    line-height: 1.25;
}

body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-date-ref small {
    font-size: 0.7rem;
}

body[data-page="admin-utility-transactions"] :where(
    .copy-chip,
    .utility-row-toggle,
    .utility-row-toggle-btn,
    .utility-receipt-download-btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    white-space: nowrap;
}

body[data-page="admin-utility-transactions"] .copy-chip {
    min-height: 24px;
    padding: 0.12rem 0.55rem !important;
}

body[data-page="admin-utility-transactions"] :where(.utility-row-toggle, .utility-row-toggle-btn) {
    width: 30px;
    height: 30px;
    padding: 0 !important;
}

body[data-page="admin-utility-transactions"] .utility-receipt-download-btn {
    min-height: 28px;
    padding: 0.28rem 0.68rem !important;
    text-decoration: none;
}

body[data-page="admin-utility-transactions"] .utility-orders-footer-actions {
    background:
        linear-gradient(145deg, rgba(var(--brand-deep-rgb), 0.94), rgba(var(--brand-primary-rgb), 0.82)) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 16px 38px rgba(var(--brand-deep-rgb), 0.28) !important;
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

body[data-page="admin-utility-transactions"] .utility-orders-footer-actions :where(
    .btn.ghost,
    .utility-row-limit,
    .utility-page-label,
    .utility-zoom-label
) {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 18px rgba(2, 45, 75, 0.18) !important;
}

body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-orders-footer-actions :is(
    .btn.ghost,
    .utility-row-limit,
    .utility-page-label,
    .utility-zoom-label
) {
    min-height: 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(12, 22, 59, 0.72) !important;
    color: #ffffff !important;
}

body[data-page="admin-utility-transactions"][data-utility-service="sahi_recharge"] .utility-orders-footer-actions :is(.btn.ghost, .utility-page-label, .utility-zoom-label) {
    min-width: 58px;
}

body[data-page="admin-utility-transactions"] .utility-orders-footer-actions .utility-row-limit {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    height: 36px !important;
}

body[data-page="admin-utility-transactions"] .utility-orders-footer-actions .btn.ghost:hover,
body[data-page="admin-utility-transactions"] .utility-orders-footer-actions .btn.ghost:focus-visible {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)) !important;
}

body[data-page="admin-utility-transactions"] .utility-orders-footer-actions .utility-row-limit-select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 30px 0 8px !important;
    border: 0 !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 700px) {
    body[data-page="admin-utility-transactions"] .panel-actions--stretch {
        border-radius: 14px;
        padding: 0.48rem;
    }

    body[data-page="admin-utility-transactions"] .utility-filter-group .admin-search-input {
        min-width: 210px !important;
    }

    body[data-page="admin-utility-transactions"] .utility-filter-panel {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    body[data-page="admin-utility-transactions"] .utility-filter-date-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    body[data-page="admin-utility-transactions"] .utility-filter-date-row .admin-filter-date {
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page="admin-utility-transactions"] .utility-filter-date-row [data-utility-load] {
        grid-column: 1 / -1;
        width: 100% !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :where(input, select, textarea, button, .btn, .pager a, .pagination a) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Compact, crisp site header */
html,
body {
    margin-top: 0 !important;
}

header.site-header {
    top: 0 !important;
    margin: 0 !important;
    padding: 0 8px 8px !important;
    border-top: 0 !important;
    background: #064a78 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

header.site-header::before {
    display: none !important;
}

header.site-header > .site-header {
    margin-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background:
        linear-gradient(120deg, rgba(7, 98, 155, 0.94), rgba(4, 59, 101, 0.96)),
        linear-gradient(110deg, rgba(255, 255, 255, 0.14), transparent 38%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 14px 34px rgba(2, 38, 67, 0.3);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.site-header .header-primary {
    margin-top: 0 !important;
    background: transparent !important;
}

.site-header .header-primary {
    min-height: 55px;
    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
}

.site-header .header-secondary {
    margin: 0 10px 8px;
    padding-top: 0.22rem;
    padding-bottom: 0.32rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(1, 38, 67, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.site-header .brand {
    gap: 0.58rem;
}

.site-header .brand > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-header .brand-name {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 850 !important;
    letter-spacing: 0.012em !important;
    line-height: 1 !important;
    text-shadow:
        0 1px 0 rgba(0, 24, 46, 0.72),
        0 2px 7px rgba(0, 25, 48, 0.34) !important;
}

.site-header .brand-sub {
    color: rgba(255, 255, 255, 0.96) !important;
    font-weight: 650 !important;
    letter-spacing: 0.012em !important;
    line-height: 1.08 !important;
    margin-top: 0.14rem !important;
    text-shadow: 0 1px 2px rgba(0, 24, 46, 0.55);
}

.site-header .header-bell,
.site-header .support-link.header-bell {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-header .header-bell:hover,
.site-header .header-bell:focus-visible {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.site-header .header-bell svg {
    width: 21px;
    height: 21px;
    filter: drop-shadow(0 1px 2px rgba(0, 25, 48, 0.42));
}

@media (max-width: 700px) {
    header.site-header {
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 5px !important;
    }

    header.site-header > .site-header {
        border-radius: 0 0 15px 15px;
    }

    .site-header .header-primary {
        min-height: 52px;
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
    }

    .site-header .header-secondary {
        margin-right: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        border-radius: 11px;
    }

    .site-header .header-bell,
    .site-header .support-link.header-bell {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

/* Project-wide clean card surface: white water-glass + soft water-drop shadow.
   Utility transactions stay page-specific because that table has its own layout language. */
body:not([data-page="admin-utility-transactions"]) :where(
    .card,
    .info-card,
    .admin-panel,
    .support-thread,
    .auth-card,
    .profile-card,
    .mobile-card__status,
    .kyc-status-block,
    .wallet-banner,
    .wallet-primary-card,
    .wallet-stats article,
    .wallet-history-card,
    .wallet-load-modal__dialog,
    .dashboard-greeting,
    .dashboard-command-center,
    .dashboard-service-health,
    .dashboard-panel,
    .dashboard-coupons,
    .dashboard-panel-links,
    .hero-card,
    .hero-highlight-card,
    .hero-meta-card,
    .dashboard-metrics article,
    .quick-action-card,
    .service-health-metrics article,
    .service-health-item,
    .service-card,
    .action-card,
    .sahi-panel,
    .sahi-card,
    .sahi-subpanel,
    .sahi-ops-chart-card,
    .sahi-summary-stat,
    .sahi-toggle-row,
    .walletTableWrap,
    .table-wrap,
    .data-table-wrap,
    .refund-shell,
    .walletTableScroll,
    .walletFilterPopup,
    .proof-modal__dialog,
    .admin-modal__dialog,
    .coupon-card,
    .gift-card,
    .go-card,
    .go-panel,
    .go-modal__sheet,
    .checkout-modal__dialog,
    .checkout-card,
    .form-card,
    .plan-panel,
    .payment-handshake,
    .support-highlights article,
    .utility-card,
    .floating-card,
    .event-card,
    .task-card,
    .reward-card,
    .reseller-card,
    .reseller-panel
) {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(232, 247, 255, 0.66)),
        radial-gradient(circle at 16% 0%, rgba(var(--brand-primary-rgb), 0.16), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(var(--brand-deep-rgb), 0.08), transparent 46%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(var(--brand-primary-rgb), 0.08),
        0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 42px rgba(var(--brand-deep-rgb), 0.12),
        0 36px 90px rgba(var(--brand-primary-rgb), 0.11) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

body:not([data-page="admin-utility-transactions"]) :where(
    .card,
    .info-card,
    .admin-panel,
    .support-thread,
    .auth-card,
    .profile-card,
    .wallet-banner,
    .wallet-primary-card,
    .dashboard-command-center,
    .dashboard-service-health,
    .dashboard-panel,
    .quick-action-card,
    .service-card,
    .sahi-panel,
    .sahi-card,
    .sahi-subpanel,
    .go-card,
    .go-panel,
    .form-card,
    .utility-card
):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--brand-primary-rgb), 0.1),
        0 2px 0 rgba(255, 255, 255, 0.76),
        0 22px 52px rgba(var(--brand-deep-rgb), 0.14),
        0 44px 105px rgba(var(--brand-primary-rgb), 0.14) !important;
}