/* Doify Final UI QA 1.0 — overflow, zoom, accessibility and resilient content */

:where(.guest-auth-page,body.doify-modern),
:where(.guest-auth-page,body.doify-modern) *,
:where(.guest-auth-page,body.doify-modern) *::before,
:where(.guest-auth-page,body.doify-modern) *::after { box-sizing: border-box; }

:where(.guest-auth-page,body.doify-modern) {
    max-width: 100%;
    overflow-x: clip;
}

body.doify-modern :where(.app-shell,.workspace,.content,main,section,article,aside,form,fieldset,nav,header,footer,div),
.guest-auth-page :where(.guest-shell,.auth-card,.auth-flow,.mobile-brand,form,fieldset,footer,div) {
    min-width: 0;
}

:where(.guest-auth-page,body.doify-modern) :where(img,svg,video,canvas,iframe) { max-width: 100%; }
:where(.guest-auth-page,body.doify-modern) :where(p,li,dd,td,th,small,strong,a,button,label,legend,summary) { overflow-wrap: anywhere; }
:where(.guest-auth-page,body.doify-modern) :where(input,select,textarea,button) { max-width: 100%; }

body.doify-modern .content { width: 100%; max-width: 100%; }
body.doify-modern .page-head > :first-child { min-width: 0; }
body.doify-modern .page-head :where(h1,p) { max-width: 78ch; }
body.doify-modern :where(.head-actions,.page-actions,.button-row,.form-actions) { max-width: 100%; flex-wrap: wrap; }
body.doify-modern :where(.panel,.ds-card,.company-card,.record-card,.document-card,.asset-type-card) { min-width: 0; }

body.doify-modern :where(.table-wrap,.data-table-wrap,.travel-entry-table,.work-timeline-scroll) {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.doify-modern :where(.table-wrap,.data-table-wrap) table { margin: 0; }
body.doify-modern :where(.table-wrap,.data-table-wrap) :where(td,th) { max-width: 26rem; }
body.doify-modern :where(.table-wrap,.data-table-wrap) :where(td,th) > :where(a,strong,span,small) { max-width: 100%; }

body.doify-modern :where(.section-hub,.inbox-source-tabs,.notification-section-hub,.asset-form-types,.timeline-range-presets) {
    max-width: 100%;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

body.doify-modern :where(dialog,.ds-dialog,[role="dialog"]) { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }

:where(.guest-auth-page,body.doify-modern) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 2px solid var(--ds-color-brand-600,#5968f2);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(89,104,242,.14);
}

:where(.guest-auth-page,body.doify-modern) :where(button,[role="button"],[type="submit"],.button):disabled {
    cursor: not-allowed;
    opacity: .55;
}

.guest-auth-page .auth-card {
    box-sizing: border-box;
    max-width: calc(100vw - 1rem);
}

.guest-auth-page :where(.auth-flow,.mobile-brand,.guest-legal,.auth-secondary-action) { width: 100%; max-width: 100%; }
.guest-auth-page .mobile-brand > :last-child { min-width: 0; }
.guest-auth-page .mobile-brand small { display: block; overflow-wrap: anywhere; }

/* Page loading stays above every shell until styles and deferred scripts settle. */
:where(.guest-auth-page,body.doify-modern) .page-loading-overlay { contain: layout paint; }
:where(.guest-auth-page,body.doify-modern) .page-loading-card { box-sizing: border-box; max-width: calc(100vw - 2rem); }

@media (hover:none),(pointer:coarse) {
    :where(.guest-auth-page,body.doify-modern) :where(button,.button,[role="button"],summary,input:not([type="hidden"]),select) {
        min-height: 2.75rem;
    }
}

@media (max-width: 56.25rem) {
    .guest-auth-page .auth-card {
        width: min(30rem,calc(100% - 1rem));
        max-width: calc(100vw - 1rem);
        margin-inline: auto;
        overflow-x: hidden;
    }

    .guest-auth-page .guest-shell { max-width: 100vw; overflow-x: clip; }
    .guest-auth-page .guest-legal { row-gap: .25rem; }

    body.doify-modern :where(.page-head,.panel-head) { min-width: 0; }
    body.doify-modern .page-head :where(.head-actions,.page-actions) { width: 100%; }
    body.doify-modern .page-head :where(.head-actions,.page-actions) > :where(a,button,form) { min-width: 0; flex: 1 1 9rem; }
    body.doify-modern .page-head :where(.head-actions,.page-actions) form :where(button,.button) { width: 100%; }
    body.doify-modern :where(.form-grid,.filter-grid,.detail-grid,.split-panels) > * { min-width: 0; }
    body.doify-modern :where(.form-actions,.button-row) > :where(button,.button,a) { min-width: 0; }

    /* Keep frequent mobile actions comfortably tappable even when the browser
       reports a fine pointer (for example tablets with a connected mouse). */
    body.doify-modern :where(.mobile-nav-close,.password-toggle,summary,.table-actions a,.table-actions button,.row-actions a,.row-actions button) {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }
    body.doify-modern label:has(> input[type="checkbox"]),
    body.doify-modern label:has(> input[type="radio"]) {
        min-height: 2.75rem;
        align-items: center;
    }
    .guest-auth-page .guest-legal a { min-height: 2.75rem; align-items: center; }
}

/* 200% zoom commonly produces a CSS viewport around this range on desktop. */
@media (max-width: 40rem) {
    body.doify-modern .content { padding-inline: .75rem; }
    body.doify-modern .page-head { gap: .75rem; }
    body.doify-modern .page-head h1 { font-size: clamp(1.15rem,6vw,1.4rem); }
    body.doify-modern :where(.head-actions,.page-actions,.form-actions,.button-row) { align-items: stretch; }
    body.doify-modern :where(.head-actions,.page-actions,.form-actions) > :where(a,button,form,.button) { width: 100%; flex-basis: 100%; }
    body.doify-modern :where(.head-actions,.page-actions,.form-actions) form :where(button,.button) { width: 100%; }
    body.doify-modern :where(.stats,.employee-stats,.correspondence-stats,.timeline-overview,.health-grid) { grid-template-columns: minmax(0,1fr); }
    body.doify-modern :where(.panel,.settings-section,.employee-form-section,.ds-card) { padding-inline: .8rem; }
    body.doify-modern .table-wrap { border-radius: var(--ds-radius-sm,.5rem); }

    .guest-auth-page .auth-card { width: calc(100% - .75rem); max-width: calc(100vw - .75rem); padding-inline: 1rem; }
    .guest-auth-page .mobile-brand { align-items: flex-start; }
    .guest-auth-page .guest-legal a { white-space: normal; }
}

@media (max-width: 22.5rem) {
    body.doify-modern .content { padding-inline: .5rem; }
    body.doify-modern :where(.panel,.settings-section,.employee-form-section,.ds-card) { border-radius: .75rem; }
    .guest-auth-page .auth-card { width: calc(100% - .5rem); max-width: calc(100vw - .5rem); padding-inline: .75rem; border-radius: 1rem; }
}

@media (forced-colors: active) {
    :where(.guest-auth-page,body.doify-modern) :where(.badge,.button,button,.panel,.ds-card,.alert,input,select,textarea) { border: 1px solid CanvasText; }
    :where(.guest-auth-page,body.doify-modern) :where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.guest-auth-page,body.doify-modern) *,
    :where(.guest-auth-page,body.doify-modern) *::before,
    :where(.guest-auth-page,body.doify-modern) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}