/*
 * BJAS Shell Header Responsive Guard V20
 * Dedicated mobile/tablet header fixes loaded after shell_header.css.
 * Scoped to internal base header only; POS runtime stays untouched.
 */

@media (max-width: 1180px) {
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header],
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] *,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] * {
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        overflow: hidden !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user {
        min-width: 0 !important;
        overflow: visible !important;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header],
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] {
        --portal-header-offset-mobile: 64px !important;
        min-height: 64px !important;
        height: 64px !important;
        max-height: 64px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 14px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-logo,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .header-center-logo,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-logo,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .header-center-logo {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        width: 100% !important;
        max-width: none !important;
        gap: 8px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip) {
        height: 38px !important;
        min-height: 38px !important;
        max-width: 128px !important;
        padding-inline: 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        max-width: 176px !important;
        justify-self: end !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex: 0 0 38px !important;
        width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint) {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label) {
        display: inline-flex !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip {
        display: none !important;
    }
}

@media (max-width: 700px) {
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header],
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] {
        --portal-header-offset-mobile: 58px !important;
        min-height: 58px !important;
        height: 58px !important;
        max-height: 58px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand actions" !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 10px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-logo,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .header-center-logo,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-logo,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .header-center-logo {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        max-width: calc(100vw - 162px) !important;
        gap: 5px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-separator,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-separator {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip) {
        flex: 0 1 auto !important;
        height: 36px !important;
        min-height: 36px !important;
        padding-inline: 9px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip {
        max-width: 64px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip {
        max-width: 86px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        max-width: 150px !important;
        justify-self: end !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 5px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex: 0 0 36px !important;
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint) {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label) {
        display: inline-flex !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip {
        display: none !important;
    }

    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .topbar-dropdown,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .topbar-dropdown {
        position: fixed !important;
        top: 66px !important;
        right: 8px !important;
        left: auto !important;
        width: min(320px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 76px) !important;
        overflow-y: auto !important;
        z-index: 250 !important;
    }
}

/* V21: stronger one-row authority for tablet/mobile internal header.
   This intentionally lives outside layout_consistency_fixes.css so legacy global rules cannot
   make the header wrap into two rows again. */
@media (max-width: 1100px) {
    [data-internal-base-header].internal-shell-header,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header {
        min-height: 60px !important;
        height: 60px !important;
        max-height: 60px !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand actions" !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        overflow: visible !important;
    }

    [data-internal-base-header] :is(.internal-shell-logo, .header-center-logo, .internal-header-center, .internal-topbar-logo),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-shell-logo, .header-center-logo, .internal-header-center, .internal-topbar-logo),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-shell-logo, .header-center-logo, .internal-header-center, .internal-topbar-logo) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    [data-internal-base-header] .internal-shell-brand,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        grid-area: brand !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    [data-internal-base-header] .internal-shell-header-actions,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions {
        grid-area: actions !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    [data-internal-base-header] .internal-topbar-user,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    [data-internal-base-header] .internal-topbar-separator,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-separator,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-separator {
        display: none !important;
    }

    [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip) {
        flex: 0 1 auto !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint) {
        display: none !important;
    }

    [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label) {
        display: inline-flex !important;
    }

    [data-internal-base-header] .internal-break-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip {
        display: none !important;
    }
}

@media (max-width: 520px) {
    [data-internal-base-header].internal-shell-header,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header {
        min-height: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
        padding: 7px 8px !important;
        gap: 6px !important;
    }

    [data-internal-base-header] .internal-shell-brand,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        gap: 4px !important;
    }

    [data-internal-base-header] .internal-brand-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip {
        max-width: 70px !important;
        padding-inline: 8px !important;
    }

    [data-internal-base-header] .internal-homebase-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip {
        max-width: 86px !important;
        padding-inline: 8px !important;
    }

    [data-internal-base-header] .internal-topbar-user,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 4px !important;
    }

    [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }
}

/* V22: final mobile/tablet header authority.
   layout_consistency_fixes.css has multiple old logo/topbar rules; this scoped file wins last. */
@media (max-width: 1200px) {
    body[data-has-app-shell="1"]:not(.pos-shell),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) {
        --shell-header-height: 56px !important;
    }

    [data-internal-base-header].internal-shell-header,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-height: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
        padding: 7px 10px !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        inset: auto !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        transform: scale(0) !important;
    }

    [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) img,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) img,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) img {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    [data-internal-base-header] .internal-shell-brand,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 154px) !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    [data-internal-base-header] .internal-shell-header-actions,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 148px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    [data-internal-base-header] .internal-topbar-user,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-topbar-user {
        gap: 5px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip) {
        flex: 0 1 auto !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 9px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
    }

    [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label, .shell-break-chip-label, .shell-break-chip-hint) {
        display: none !important;
    }

    [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label) {
        display: inline-flex !important;
    }

    [data-internal-base-header] .internal-break-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-break-chip {
        display: none !important;
    }
}

@media (max-width: 430px) {
    [data-internal-base-header].internal-shell-header,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header].internal-shell-header {
        padding-inline: 8px !important;
        gap: 6px !important;
    }

    [data-internal-base-header] .internal-shell-brand,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-brand {
        max-width: calc(100vw - 142px) !important;
        gap: 4px !important;
    }

    [data-internal-base-header] .internal-brand-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-brand-chip {
        max-width: 68px !important;
        padding-inline: 8px !important;
    }

    [data-internal-base-header] .internal-homebase-chip,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-homebase-chip {
        max-width: 78px !important;
        padding-inline: 8px !important;
    }

    [data-internal-base-header] .internal-shell-header-actions,
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] .internal-shell-header-actions {
        max-width: 132px !important;
    }

    [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body[data-has-app-shell="1"]:not(.pos-shell) [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex-basis: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}

/* V23: mobile/tablet header authority for iPhone Safari.
   Keep header one row; timer/break chip is not allowed to sit in the header on /absen/. */
@media (max-width: 767px) {
    body[data-has-app-shell="1"].attendance-page-shell,
    html[data-theme] body[data-has-app-shell="1"].attendance-page-shell {
        --shell-header-height: 54px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.attendance-page-shell [data-internal-base-header].internal-shell-header,
    html[data-theme] body.attendance-page-shell [data-internal-base-header].internal-shell-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 120 !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-shell-brand {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(100vw - 134px) !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-topbar-separator,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-topbar-separator {
        display: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.internal-brand-chip, .internal-homebase-chip) {
        flex: 0 1 auto !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        font-size: 10.5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-brand-chip,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-brand-chip {
        max-width: 72px !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-homebase-chip,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-homebase-chip {
        max-width: 78px !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-shell-header-actions,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-shell-header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 128px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-topbar-user,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-topbar-user {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 128px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-break-chip,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-break-chip,
    body.attendance-page-shell [data-internal-base-header] :is(.shell-break-chip, .mobile-break-chip),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.shell-break-chip, .mobile-break-chip) {
        display: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.internal-ai-button, .notification-button.internal-icon-button, .profile-button.internal-user-pill) {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }

    body.attendance-page-shell [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.profile-name, .dropdown-icon, .internal-ai-button .full-label, .internal-homebase-chip .full-label) {
        display: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.internal-ai-button .short-label, .internal-homebase-chip .short-label) {
        display: inline-flex !important;
    }

    body.attendance-page-shell [data-internal-base-header] .topbar-dropdown,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .topbar-dropdown {
        max-width: calc(100vw - 16px) !important;
        right: 0 !important;
    }
}

@media (max-width: 360px) {
    body.attendance-page-shell [data-internal-base-header] .internal-homebase-chip,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-homebase-chip {
        display: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-shell-brand,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-shell-brand {
        max-width: calc(100vw - 122px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.attendance-page-shell [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center),
    html[data-theme] body.attendance-page-shell [data-internal-base-header] :is(.header-center-logo, .internal-topbar-logo, .internal-shell-logo, .internal-header-center) {
        display: none !important;
    }

    body.attendance-page-shell [data-internal-base-header] .internal-break-chip,
    html[data-theme] body.attendance-page-shell [data-internal-base-header] .internal-break-chip {
        display: none !important;
    }
}