/*
 * Responsive login compatibility layer.
 *
 * Loaded after login.css so the existing SuperAdmin, operator, and partner
 * visual designs stay intact while their fixed desktop canvases become
 * usable on physical mobile and tablet viewports.
 */

html[data-auth-responsive] {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
}

html[data-auth-responsive] body[data-auth-role] {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-auth-responsive] body[data-auth-role] *,
html[data-auth-responsive] body[data-auth-role] *::before,
html[data-auth-responsive] body[data-auth-role] *::after {
    box-sizing: border-box;
}

html[data-auth-responsive] body[data-auth-role] :where(input, select, textarea) {
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

html[data-auth-responsive] body[data-auth-role] :where(button, a) {
    -webkit-tap-highlight-color: transparent;
}

html[data-auth-responsive] body[data-auth-role] :where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--auth-button, #0ea5e9) 70%, #ffffff);
    outline-offset: 2px;
}

/* Operator login */
html[data-auth-responsive] body[data-auth-role="operator"] .auth-shell {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

html[data-auth-responsive] body[data-auth-role="operator"] :where(
    .auth-card,
    .auth-hero,
    .login-panel,
    .login-form
) {
    min-width: 0;
}

html[data-auth-responsive] body[data-auth-role="operator"] .login-panel {
    grid-template-columns: minmax(0, 1fr);
}

html[data-auth-responsive] body[data-auth-role="operator"] .login-panel > * {
    width: 100%;
    max-width: 100%;
}

html[data-auth-responsive] body[data-auth-role="operator"] .login-heading-copy {
    flex: 1 1 auto;
    min-width: 0;
}

html[data-auth-responsive] body[data-auth-role="operator"] .login-heading-divider {
    width: 100%;
}

/* SuperAdmin login */
html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(20px, 4vw, 40px);
}

html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-panel {
    width: min(610px, 100%);
    max-width: 100%;
}

html[data-auth-responsive] body[data-auth-role="superadmin"] :where(
    .super-admin-minimal-close,
    .super-admin-minimal-password-toggle,
    .super-admin-minimal-submit.login-button,
    .super-admin-phone-auth-close
) {
    min-width: 44px;
    min-height: 44px;
}

/* Partner login */
html[data-auth-responsive] body[data-auth-role="partner"] {
    background: #ffffff;
}

html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-login {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(28px, 4vw, 48px) clamp(28px, 8vw, 112px);
    overflow: hidden;
}

html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-card {
    width: min(360px, 100%);
}

html[data-auth-responsive] body[data-auth-role="partner"] :where(
    .partner-sweet-submit,
    .partner-password-change-submit,
    .partner-password-change-close,
    .partner-password-change-input button
) {
    min-height: 44px;
}

html[data-auth-responsive] body[data-auth-role="partner"] .partner-password-change-dialog {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

@media (max-width: 1180px) {
    html[data-auth-responsive] body[data-auth-role="operator"] .auth-card {
        width: min(1040px, 100%);
    }
}

@media (max-width: 900px) {
    html[data-auth-responsive] body[data-auth-role="operator"] .auth-shell {
        align-items: flex-start;
        padding: 16px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .auth-card {
        width: min(680px, 100%);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        border-radius: 28px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .auth-hero {
        min-height: 310px;
        padding: 36px 32px 78px;
        overflow: visible;
        border-radius: 28px 28px 0 0;
        z-index: 100;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-tooltip {
        top: calc(100% + 16px);
        bottom: auto;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-tooltip::before {
        top: auto;
        bottom: 100%;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-tooltip::after {
        top: auto;
        bottom: 100%;
        transform: translate(-50%, 5px) rotate(225deg);
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-item:last-child .hero-status-tooltip::after {
        transform: translate(50%, 5px) rotate(225deg);
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-content {
        margin-top: 0;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-panel {
        min-height: 550px;
        grid-template-rows: auto auto auto;
        align-content: start;
        padding: 0 clamp(28px, 7vw, 56px) 40px;
        border-radius: 0 0 28px 28px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-heading {
        padding-top: 36px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-heading-divider {
        height: 21px;
        margin-bottom: 0;
        background: linear-gradient(to bottom, #d5dce7 0 1px, transparent 1px 100%);
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-form {
        align-self: start;
        margin-top: 20px;
        transform: none;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-panel > .signup-row {
        align-self: start;
        margin-top: 20px;
        padding-top: 0;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-login {
        padding: 32px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-card {
        margin-top: clamp(72px, 12vh, 108px);
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-shape-top {
        top: -340px;
        right: -300px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-shape-right {
        right: -300px;
    }
}

@media (max-width: 600px) {
    html[data-auth-responsive] body[data-auth-role="operator"] .auth-shell {
        padding: 0;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .auth-card {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .auth-hero {
        min-height: 290px;
        padding: 32px 20px 74px;
        border-radius: 0;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-content h1 {
        font-size: clamp(2.1rem, 12vw, 3rem);
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-board {
        bottom: 16px;
        width: calc(100% - 28px);
        gap: 4px;
        padding: 10px 6px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-item {
        gap: 5px;
        font-size: 0.72rem;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-item :where(
        .status-label,
        .status-value-separator
    ) {
        display: none;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-item strong {
        overflow: hidden;
        font-size: 0.72rem;
        text-overflow: ellipsis;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-status-tooltip {
        width: min(270px, calc(100vw - 32px));
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .hero-storage-tooltip {
        width: min(330px, calc(100vw - 32px));
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-panel {
        min-height: 540px;
        padding: 0 20px 36px;
        border-radius: 0;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .login-heading {
        padding-top: 52px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] :where(
        .auth-input-group,
        .auth-input-group .form-control,
        .login-button,
        .operator-login-sms-auth-send
    ) {
        min-height: 44px;
    }

    html[data-auth-responsive] body[data-auth-role="operator"] .auth-country-popover {
        right: 0;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-stage {
        align-items: flex-start;
        padding: 16px;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-panel {
        min-height: min(560px, calc(100dvh - 32px));
        padding: 28px 20px 24px;
        border-radius: 24px;
        transform: none;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-fields {
        gap: 22px;
        margin: 20px 0;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-form .super-admin-minimal-password-field {
        margin-bottom: 0;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-action-row {
        flex-wrap: wrap;
        margin-top: 12px;
        margin-bottom: 0;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] .super-admin-minimal-submit.login-button {
        min-width: 96px;
        line-height: 44px;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] :where(
        .super-admin-phone-auth-modal,
        .super-admin-phone-request-modal
    ) {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    html[data-auth-responsive] body[data-auth-role="superadmin"] :where(
        .super-admin-phone-auth-dialog,
        .super-admin-phone-request-dialog
    ) {
        max-height: calc(100dvh - 24px);
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-login {
        padding: 20px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-header {
        min-height: 52px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-logo-mark {
        width: 34px;
        height: 46px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-logo-text strong {
        font-size: 1.08rem;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-logo-text small {
        font-size: 0.62rem;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-card {
        width: 100%;
        margin-top: clamp(48px, 9vh, 72px);
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-card h1 {
        font-size: 2.1rem;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-title-line {
        margin-bottom: 28px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-copy {
        margin-bottom: 32px;
        font-size: 0.78rem;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-field input {
        min-height: 44px;
        padding-bottom: 8px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-options {
        align-items: flex-start;
        gap: 12px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-orb {
        display: none;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-shape-top {
        top: -410px;
        right: -430px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-sweet-shape-right {
        top: 94px;
        right: -360px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-password-change-modal {
        align-items: flex-start;
        padding: 16px;
        overflow-y: auto;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-password-change-dialog {
        width: 100%;
        padding: 28px 20px 24px;
    }

    html[data-auth-responsive] body[data-auth-role="partner"] .partner-password-change-input {
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-auth-responsive] body[data-auth-role] *,
    html[data-auth-responsive] body[data-auth-role] *::before,
    html[data-auth-responsive] body[data-auth-role] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}