/* Safari/WebKit compatibility layer.
   Keep this file additive: normalize browser quirks without changing page geometry.
   All new cabinet pages and migrated reference pages must be built against this layer:
   avoid fixed-only heights, give flex/grid children min-width: 0 / min-height: 0,
   and pair backdrop-filter/viewport rules with WebKit-safe fallbacks. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Safari: datetime literals (., :, /) live in ::-webkit-datetime-edit-text
   and ignore input `color`. `inherit`/`currentColor` also resolve to black
   inside this shadow tree — set the concrete text color explicitly.
   datetime-local color lives on .payhot-datetime-local (PayhotDateTimeLocal.razor.css). */
input[type="date"],
input[type="time"] {
    color: #1d1d1d;
    -webkit-text-fill-color: #1d1d1d;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-second-field,
input[type="time"]::-webkit-datetime-edit-millisecond-field,
input[type="time"]::-webkit-datetime-edit-meridiem-field {
    color: #1d1d1d !important;
    -webkit-text-fill-color: #1d1d1d !important;
    opacity: 1;
}

.app-root,
.app-main,
.app-content,
.app-sidebar,
.sidebar-nav,
.auth-page,
.auth-card,
.payhot-auth-page,
.payhot-auth-shell,
.payhot-auth-card,
.payhot-auth-aside,
.payhot-page,
.payhot-page .desktop-frame,
.payhot-page .payment-grid,
.payment-shell,
.payment-checkout,
.payment-layout,
.payment-checkout-main,
.payment-main {
    min-width: 0;
}

.figma-frame,
.cabinet-shell-underlay,
.cabinet-page-slot,
.topbar,
.side-menu,
.side-menu-list,
.page-footer,
.notifications-page,
.admin-payhot-page,
.admin-payhot-drawer,
.admin-payhot-backdrop,
.notifications-hero,
.notifications-feed-card,
.notifications-feed,
.notification-feed-item,
.notification-feed-main,
.notification-feed-copy,
.notification-raw-modal,
.notification-raw-head,
.notification-raw-code,
.balance-card,
.balance-value-row,
.store-copy {
    min-width: 0;
}

.app-main,
.app-content,
.app-sidebar,
.sidebar-nav,
.auth-page,
.auth-card,
.payhot-auth-page,
.payhot-auth-shell,
.payhot-auth-card,
.payhot-auth-aside,
.payhot-next-layout,
.payhot-next-chat-body,
.payhot-page .desktop-frame,
.payhot-page .payment-grid,
.payhot-page .right-column,
.payhot-page .left-column,
.payhot-page .main-panel,
.payment-shell,
.payment-checkout,
.payment-layout,
.payment-checkout-main,
.payment-main {
    min-height: 0;
}

.side-menu,
.side-menu-list,
.cabinet-shell-underlay,
.cabinet-page-slot,
.notifications-page,
.admin-payhot-page,
.admin-payhot-drawer,
.notifications-feed-card,
.notifications-feed,
.notification-raw-modal,
.notification-raw-code,
.page-footer {
    min-height: 0;
}

.app-root,
.app-main,
.auth-page,
.payhot-auth-page,
.payment-shell,
.payhot-page,
.payhot-page .desktop-frame {
    min-height: 100vh;
}

.app-sidebar {
    height: 100vh;
}

.payment-toast-surface {
    -webkit-backdrop-filter: blur(22px);
}

.topbar {
    -webkit-backdrop-filter: blur(16px);
}

.notifications-overlay-root {
    min-width: 0;
    z-index: 70000;
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    isolation: isolate;
}

.notifications-overlay-backdrop {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    -webkit-backdrop-filter: blur(14px);
}

.header-notifications-modal {
    height: 750px;
    max-height: none;
}

.notification-dialog-root {
    min-width: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100svh;
    min-height: 100dvh;
    max-width: 100%;
    isolation: isolate;
}

.notification-dialog-backdrop {
    width: auto;
    height: auto;
    min-height: 100vh;
    -webkit-backdrop-filter: blur(14px);
}

.admin-payhot-backdrop {
    min-height: 100vh;
    -webkit-backdrop-filter: blur(6px);
}

.header-notifications-modal,
.profile-dropdown,
.profile-dropdown-surface {
    -webkit-backdrop-filter: blur(20px);
}

@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) {
    .app-root,
    .app-main,
    .auth-page,
    .payhot-auth-page,
    .payment-shell,
    .payhot-page,
    .payhot-page .desktop-frame {
        min-height: -webkit-fill-available;
    }

    .app-sidebar {
        height: -webkit-fill-available;
    }

    .notification-dialog-root,
    .notifications-overlay-root,
    .notifications-overlay-backdrop {
        width: 100%;
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }

    .header-notifications-modal {
        height: 750px;
        max-height: none;
    }

    .notification-dialog-backdrop {
        min-height: -webkit-fill-available;
    }

    .figma-frame:has(.admin-payhot-page),
    .figma-frame:has(.admin-payhot-page) .cabinet-shell-underlay,
    .admin-payhot-backdrop {
        min-height: -webkit-fill-available;
    }
}

@supports (min-height: 100svh) {
    .app-root,
    .app-main,
    .payment-shell,
    .payhot-page,
    .payhot-page .desktop-frame {
        min-height: 100svh;
    }

    .app-sidebar {
        height: 100svh;
    }

    .notification-dialog-root,
    .notifications-overlay-root,
    .notifications-overlay-backdrop {
        width: 100%;
        height: 100svh;
        min-height: 100svh;
    }

    .header-notifications-modal {
        height: 750px;
        max-height: none;
    }

    .notification-dialog-backdrop {
        min-height: 100svh;
    }

    .figma-frame:has(.admin-payhot-page),
    .figma-frame:has(.admin-payhot-page) .cabinet-shell-underlay,
    .admin-payhot-backdrop {
        min-height: 100svh;
    }
}

@supports (min-height: 100dvh) {
    .app-root,
    .app-main,
    .payment-shell,
    .payhot-page,
    .payhot-page .desktop-frame {
        min-height: 100dvh;
    }

    .app-sidebar {
        height: 100dvh;
    }

    .notification-dialog-root,
    .notifications-overlay-root,
    .notifications-overlay-backdrop {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
    }

    .figma-frame:has(.admin-payhot-page),
    .figma-frame:has(.admin-payhot-page) .cabinet-shell-underlay,
    .admin-payhot-backdrop {
        min-height: 100dvh;
    }

    .header-notifications-modal {
        height: 750px;
        max-height: none;
    }

    .notification-dialog-backdrop {
        min-height: 100dvh;
    }
}

/* Project-wide WebKit/Safari hardening.
   Keep these rules defensive: they only normalize known Safari quirks around
   dynamic viewport units, fixed overlays, flex/grid intrinsic sizing and
   backdrop rendering. Page geometry remains owned by payhot-next/payhot-page. */
.figma-frame.has-cabinet-modal .cabinet-page-slot {
    z-index: calc(var(--payhot-modal-backdrop-z, 2147483000) - 10);
}

.payhot-dropdown-menu.is-portal {
    position: fixed;
    max-width: calc(100vw - 16px);
    max-width: min(var(--payhot-dropdown-width, 100%), calc(100vw - 16px));
    -webkit-overflow-scrolling: touch;
}

.orders-detail-backdrop,
.drawer-backdrop,
.admin-payhot-backdrop,
.cashbox-method-editor-backdrop,
.cashbox-request-backdrop,
.settlements-runtime-page .detail-backdrop,
.cashout-backdrop,
.recurring-overlay-backdrop,
.payment-links-runtime-page .payment-link-qr-scrim,
.payment-links-runtime-page .statistics-backdrop,
.exports-detail-overlay::before,
.export-create-scrim,
.notification-dialog-backdrop,
.profile-reference-modal-backdrop,
.profile-drawer-backdrop,
.notifications-overlay-backdrop {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.cashbox-method-editor-overlay,
.cashbox-request-overlay,
.cashout-overlay,
.exports-detail-overlay,
.export-create-overlay,
.payment-links-runtime-page .payment-link-qr-modal,
.payment-links-runtime-page .payment-link-statistics-overlay,
.notification-dialog-root,
.profile-reference-modal-layer,
.profile-drawer-layer,
.profile-overlay-root,
.notifications-overlay-root {
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
}

@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    .figma-frame,
    .cabinet-shell-underlay,
    .cabinet-page-slot,
    .auth-page,
    .auth-card,
    .payhot-auth-page,
    .payhot-auth-shell,
    .payhot-auth-card,
    .payhot-auth-aside,
    .payment-shell,
    .payment-checkout,
    .payment-layout,
    .payment-main,
    .payment-checkout-main {
        max-width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .cabinet-page-slot,
    .admin-payhot-page,
    .orders-runtime-page,
    .payment-links-runtime-page,
    .cashbox-runtime-page,
    .cashouts-runtime-page,
    .settlements-runtime-page,
    .recurring-runtime-page,
    .disputes-runtime-page,
    .exports-runtime-page,
    .statistics-runtime-page,
    .profile-reference-runtime,
    .notifications-page,
    .merchant-projects-page,
    .merchant-project-detail-page,
    .api-docs-runtime-page {
        overflow: visible;
    }

    .topbar,
    .side-menu,
    .page-footer {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .orders-detail-backdrop,
    .drawer-backdrop,
    .admin-payhot-backdrop,
    .cashbox-method-editor-backdrop,
    .cashbox-request-backdrop,
    .settlements-runtime-page .detail-backdrop,
    .cashout-backdrop,
    .recurring-overlay-backdrop,
    .payment-links-runtime-page .payment-link-qr-scrim,
    .payment-links-runtime-page .statistics-backdrop,
    .exports-detail-overlay::before,
    .export-create-scrim,
    .notification-dialog-backdrop,
    .profile-reference-modal-backdrop,
    .profile-drawer-backdrop,
    .notifications-overlay-backdrop {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        max-width: 100%;
        z-index: var(--payhot-modal-backdrop-z, 2147483000);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .cashbox-method-editor-overlay,
    .cashbox-request-overlay,
    .cashout-overlay,
    .exports-detail-overlay,
    .export-create-overlay,
    .project-create-overlay,
    .payment-links-runtime-page .payment-link-qr-modal,
    .payment-links-runtime-page .payment-link-statistics-overlay,
    .notification-dialog-root,
    .profile-reference-modal-layer,
    .profile-drawer-layer,
    .profile-overlay-root,
    .notifications-overlay-root {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        max-width: 100%;
        overflow: visible;
        z-index: var(--payhot-modal-backdrop-z, 2147483000);
        isolation: isolate;
    }

    .order-detail-panel,
    .orders-filter-legacy-panel,
    .admin-payhot-drawer,
    .admin-payhot-page .drawer-card.admin-payhot-drawer,
    .method-editor-panel,
    .cashbox-admin-drawer,
    .cashbox-request-panel,
    .settlement-detail-panel,
    .cashout-drawer,
    .recurring-drawer,
    .recurring-form-drawer,
    .recurring-created-modal,
    .payment-links-runtime-page .payment-link-qr-panel,
    .payment-links-runtime-page .statistics-modal,
    .exports-detail-panel,
    .export-create-panel,
    .project-create-modal,
    .notification-detail-modal,
    .notification-raw-modal,
    .profile-reference-modal-stage,
    .profile-drawer {
        z-index: var(--payhot-modal-panel-z, 2147483010);
        max-width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .payhot-dropdown-menu.is-portal {
        position: fixed;
        max-height: var(--payhot-dropdown-max-height, min(360px, calc(100vh - 24px)));
        z-index: var(--payhot-dropdown-layer, 180);
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .payhot-dropdown-dismiss.is-portal {
        position: fixed;
        inset: 0;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .orders-detail-backdrop,
    .drawer-backdrop,
    .admin-payhot-backdrop,
    .cashbox-method-editor-backdrop,
    .cashbox-request-backdrop,
    .settlements-runtime-page .detail-backdrop,
    .cashout-backdrop,
    .recurring-overlay-backdrop,
    .payment-links-runtime-page .payment-link-qr-scrim,
    .payment-links-runtime-page .statistics-backdrop,
    .exports-detail-overlay::before,
    .export-create-scrim,
    .notification-dialog-backdrop,
    .profile-reference-modal-backdrop,
    .profile-drawer-backdrop,
    .notifications-overlay-backdrop {
        background: rgba(5, 17, 34, 0.42);
    }
}

/* Auth pages need their own WebKit contract: they are outside the cabinet
   shell, so -webkit-fill-available must be anchored to html/body and the card
   must scroll instead of being compressed by Safari viewport calculations. */
@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) {
    html {
        min-height: 100%;
        height: -webkit-fill-available;
    }

    .payhot-auth-page {
        width: 100%;
        min-width: 0;
        min-height: 100vh;
        min-height: 100svh;
        min-height: -webkit-fill-available;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .payhot-auth-shell,
    .payhot-auth-shell-register {
        width: min(1120px, calc(100vw - 48px));
        max-width: 1120px;
        min-width: 0;
        grid-template-columns: minmax(0, 492px) minmax(0, 1fr);
    }

    .payhot-auth-shell-register {
        width: min(1120px, calc(100vw - 48px));
        grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
    }

    .payhot-auth-card,
    .register-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        overflow: visible;
        display: block;
    }

    .payhot-auth-card .auth-card-topbar,
    .payhot-auth-card .auth-copy,
    .payhot-auth-card .auth-form,
    .payhot-auth-card .auth-twofa-actions {
        position: relative;
        z-index: 1;
        width: 100%;
        min-width: 0;
        height: auto;
    }

    .payhot-auth-card .auth-form {
        display: grid;
    }

    /* Keep the login fields in regular flow after interactive navigation.
       Safari may otherwise retain an absolute .field rule from cabinet CSS. */
    .payhot-auth-card .auth-form-enhanced {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
        min-width: 0;
        height: auto;
        margin-top: 30px;
        visibility: visible;
        opacity: 1;
    }

    .payhot-auth-card .auth-form-enhanced > .field {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        visibility: visible;
        opacity: 1;
    }

    .payhot-auth-card .auth-form-enhanced > .field > input {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        min-width: 0;
        height: 54px;
        min-height: 54px;
        visibility: visible;
        opacity: 1;
        -webkit-text-fill-color: #1d1d1d;
    }

    .payhot-auth-aside {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 620px;
    }

    .payhot-auth-page input,
    .payhot-auth-page select,
    .payhot-auth-page button,
    .payhot-auth-page a {
        max-width: 100%;
    }
}

@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) {
    @media (max-width: 1020px) {
        .payhot-auth-shell,
        .payhot-auth-shell-register {
            width: min(620px, calc(100vw - 28px));
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 680px) {
        .payhot-auth-page {
            align-items: flex-start;
            justify-content: center;
            padding: 22px 14px;
        }

        .payhot-auth-shell,
        .payhot-auth-shell-register {
            width: 100%;
        }

        .payhot-auth-card {
            padding: 22px;
        }
    }
}