:root {
    --pa-core-canvas: #f7f7f8;
    --pa-color-canvas: var(--pa-core-canvas);
}

body.pa-native-app-mode,
.pa-app-shell {
    background: var(--pa-color-canvas);
}

.pa-header-tervehdys {
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 500 !important;
}

.paaasia-paivan-asiakkaat__new .pa-ui-icon {
    width: 18px;
    height: 18px;
}

.pa-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pa-notice__brand {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--pa-editorial-1, #c7b2b4);
}

.pa-notice__brand .pa-ui-icon {
    width: 22px;
    height: 22px;
}

.pa-customer-popup-native :where(.pa-popup-title, .pa-customer-card__summary h2, .pa-booking-card__header h2) {
    font-size: clamp(21px, 2.6vw, 28px) !important;
    font-weight: 500 !important;
    letter-spacing: -.025em;
}

@media (max-width: 767px) {
    html:has(body.pa-native-app-mode),
    body.pa-native-app-mode {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    body.pa-native-app-mode.admin-bar .pa-app-header {
        top: 0;
    }

    .pa-app-shell {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        box-sizing: border-box;
    }

    .pa-app-shell__view {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pa-app-shell .pa-functional-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 8px !important;
    }

    .pa-app-shell .pa-functional-icon :where(svg, i, img),
    .pa-app-shell .pa-functional-icon > .pa-header-icon-fallback {
        width: 30px !important;
        height: 30px !important;
    }

    .paaasia-paivan-asiakkaat__summary-row {
        grid-template-columns: minmax(0, 1fr) 128px !important;
    }

    .paaasia-paivan-asiakkaat__quick-actions {
        width: 128px !important;
        min-width: 128px !important;
        gap: 3px;
    }

    button.paaasia-paivan-asiakkaat__quick-action,
    a.paaasia-paivan-asiakkaat__quick-action {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
    }

    .paaasia-paivan-asiakkaat__quick-action :where(svg, i) {
        width: 22px !important;
        height: 22px !important;
    }
}