/* PESO-IMS Phase 5: shared design foundation */
:root {
    --peso-primary: #0e3b87;
    --peso-primary-strong: #082e6c;
    --peso-primary-soft: #edf4ff;
    --peso-success: #16803c;
    --peso-success-soft: #eaf9ef;
    --peso-warning: #a85b00;
    --peso-warning-soft: #fff7df;
    --peso-danger: #b42318;
    --peso-danger-soft: #fff0ee;
    --peso-info: #175cd3;
    --peso-bg: #f4f7fb;
    --peso-surface: #ffffff;
    --peso-surface-muted: #f8fafc;
    --peso-border: #dfe6ef;
    --peso-border-strong: #cbd5e1;
    --peso-text: #142033;
    --peso-muted: #667085;
    --peso-subtle: #8a96a8;
    --peso-radius-sm: 8px;
    --peso-radius: 12px;
    --peso-radius-lg: 16px;
    --peso-radius-xl: 20px;
    --peso-shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
    --peso-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --peso-shadow-modal: 0 24px 70px rgba(15, 23, 42, .22);
    --peso-control-h: 44px;
    --peso-page-max: 1200px;
}

:where(.peso-app, .auth-app, .kiosk-app),
:where(.peso-app, .auth-app, .kiosk-app) * {
    box-sizing: border-box;
}

:where(.peso-app, .auth-app, .kiosk-app) {
    color: var(--peso-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(.peso-app, .auth-app, .kiosk-app) img,
:where(.peso-app, .auth-app, .kiosk-app) video,
:where(.peso-app, .auth-app, .kiosk-app) canvas,
:where(.peso-app, .auth-app, .kiosk-app) svg {
    max-width: 100%;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(button, a, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(23, 92, 211, .22);
    outline-offset: 2px;
}

:where(.peso-app, .auth-app, .kiosk-app) button:disabled,
:where(.peso-app, .auth-app, .kiosk-app) [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(input, select, textarea) {
    max-width: 100%;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(td, th, p, span, strong, a, label) {
    overflow-wrap: break-word;
}

/* Restore visible scrollbars where scrolling is meaningful. */
:where(.peso-app, .auth-app, .kiosk-app) :is(
    .table-responsive,
    .table-scroll,
    .modal-body,
    .modal-body-custom,
    .applicant-modal-body,
    .notification-dropdown,
    .profile-menu-dropdown,
    .nav-links
) {
    scrollbar-width: thin;
    scrollbar-color: #b8c4d4 transparent;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(
    .table-responsive,
    .table-scroll,
    .modal-body,
    .modal-body-custom,
    .applicant-modal-body,
    .notification-dropdown,
    .profile-menu-dropdown,
    .nav-links
)::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}

:where(.peso-app, .auth-app, .kiosk-app) :is(
    .table-responsive,
    .table-scroll,
    .modal-body,
    .modal-body-custom,
    .applicant-modal-body,
    .notification-dropdown,
    .profile-menu-dropdown,
    .nav-links
)::-webkit-scrollbar-thumb {
    background: #b8c4d4;
    border-radius: 999px;
}

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


/* PESO password visibility normalization */
/* Keep the app's persistent custom eye button and suppress browser-native duplicate reveal controls. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.password-toggle {
    opacity: 1 !important;
    visibility: visible !important;
}