/*
 * BJAS ERP — Mobile workflows V17
 *
 * Final owner layer for the two operational surfaces that need structures
 * different from desktop: HRIS weekly scheduling and photo attendance.
 * The layer is mobile-only; routes, forms, fields, and desktop geometry stay
 * owned by the existing application.
 */

@media screen and (max-width: 820px) {
    /* HRIS · Jadwal Tim: employee cards replace the crushed weekly matrix. */
    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) {
        --v17-border: #d9e2ee;
        --v17-border-soft: #e9eef5;
        --v17-ink: #10213b;
        --v17-muted: #65758b;
        --v17-navy: #163f78;
        --v17-navy-soft: #eef4fc;
        --v17-soft: #f7f9fc;
        height: auto !important;
        min-height: 100% !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        background: #f6f8fb !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) :is(
        .page-content.hris-schedule-v98-content,
        .schedule-hris-layout,
        .hris-schedule-panel
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-hris-layout {
        display: block !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .hris-schedule-panel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        gap: 12px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) :is(
        .hris-mobile-drawer-bar,
        .hris-mobile-drawer-backdrop,
        [data-hris-mobile-drawer]
    ) {
        display: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-heading {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid var(--v17-border) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-title {
        margin: 0 !important;
        color: var(--v17-ink) !important;
        font-size: 23px !important;
        font-weight: 780 !important;
        letter-spacing: -.025em !important;
        line-height: 1.12 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-context {
        display: flex !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 5px 8px !important;
        margin: 5px 0 0 !important;
        color: var(--v17-muted) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) :is(
        .schedule-page-actions,
        .schedule-page-actions .page-actions
    ) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-actions .page-actions {
        grid-column: 1 / -1 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-actions :is(
        .ghost-button,
        .primary-button
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 9px 8px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-toolbar {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-week-control {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        grid-template-columns: 36px minmax(0, 1fr) 36px !important;
        grid-column: 1 !important;
        gap: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-week-control a {
        display: grid !important;
        min-width: 0 !important;
        height: 42px !important;
        place-items: center !important;
        color: var(--v17-navy) !important;
        font-size: 19px !important;
        text-decoration: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-week-control strong {
        min-width: 0 !important;
        align-self: center !important;
        overflow: hidden !important;
        color: var(--v17-ink) !important;
        font-size: 10.5px !important;
        font-weight: 750 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-today-link {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        grid-column: 2 !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--v17-navy) !important;
        font-size: 11px !important;
        font-weight: 720 !important;
        text-decoration: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-search-field {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        grid-column: 1 / -1 !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-search-field img {
        width: 16px !important;
        height: 16px !important;
        justify-self: center !important;
        opacity: .7 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-search-field input {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 10px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        font-size: 16px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-select-field {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        grid-column: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-select-field select {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 30px 0 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        color: var(--v17-ink) !important;
        font-size: 13px !important;
        font-weight: 650 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-override-toggle {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        grid-column: 1 / -1 !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--v17-ink) !important;
        font-size: 12px !important;
        font-weight: 680 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-override-toggle input {
        position: relative !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        appearance: none !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #d6deea !important;
        cursor: pointer !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-override-toggle input::after {
        content: "" !important;
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgb(16 33 59 / 20%) !important;
        transition: transform 160ms ease !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-override-toggle input:checked {
        background: var(--v17-navy) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-override-toggle input:checked::after {
        transform: translateX(16px) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview-item {
        display: flex !important;
        min-width: 0 !important;
        min-height: 68px !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 11px 13px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid var(--v17-border) !important;
        border-bottom: 1px solid var(--v17-border) !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview-item:nth-child(2n) {
        border-right: 0 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview-item:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview-item span {
        color: var(--v17-muted) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-overview-item strong {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: var(--v17-ink) !important;
        font-size: 16px !important;
        font-weight: 780 !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-calendar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-calendar-savebar[data-live-check-dirty="1"] {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
        padding: 10px !important;
        border: 1px solid #ead6a2 !important;
        border-radius: 8px !important;
        background: #fff9e9 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-board-scroll,
    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .bjas-mobile-table-scroll-wrap {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-matrix,
    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-matrix tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-matrix thead {
        display: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-matrix tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-integrated-matrix tbody tr {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgb(16 33 59 / 4%) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-member-cell {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 58px !important;
        grid-column: 1 !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid var(--v17-border) !important;
        background: var(--v17-soft) !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-member-avatar {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-member-copy {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-member-copy strong {
        color: var(--v17-ink) !important;
        font-size: 13px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-member-copy small {
        margin-top: 3px !important;
        color: var(--v17-muted) !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-cell {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 52px !important;
        grid-template-columns: 78px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        overflow: visible !important;
        border: 0 !important;
        border-bottom: 1px solid var(--v17-border-soft) !important;
        background: #fff !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-cell:last-child {
        border-bottom: 0 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-cell::before {
        content: attr(data-mobile-day-label) !important;
        display: block !important;
        min-width: 0 !important;
        color: var(--v17-muted) !important;
        font-size: 10px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-cell.is-today {
        box-shadow: inset 3px 0 0 var(--v17-navy) !important;
        background: var(--v17-navy-soft) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-shift-row {
        display: flex !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-shift-label {
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 12px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-lower-row {
        display: flex !important;
        min-width: 52px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-live-check {
        display: inline-flex !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-check-label {
        display: inline !important;
        color: var(--v17-muted) !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-checkbox-mark {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 5px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-schedule-calendar-footer {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 12px 0 0 !important;
        padding: 10px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--v17-border) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-pagination-summary {
        min-width: 0 !important;
        color: var(--v17-muted) !important;
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-pagination-summary strong {
        color: var(--v17-ink) !important;
        font-size: 12px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-pagination-controls {
        display: grid !important;
        grid-template-columns: 44px 64px 44px !important;
        gap: 6px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-pagination-controls :is(a, span, strong) {
        display: grid !important;
        min-width: 0 !important;
        min-height: 44px !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--v17-navy) !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-footer-right {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-legend {
        display: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-tools-menu {
        position: relative !important;
        display: block !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-tools-menu > summary {
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        place-items: center !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--v17-navy) !important;
        list-style: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-tools-menu .schedule-calendar-tools {
        position: absolute !important;
        z-index: 20 !important;
        right: 0 !important;
        bottom: calc(100% + 6px) !important;
        display: grid !important;
        width: min(220px, calc(100vw - 40px)) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 6px !important;
        overflow: visible !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 14px 36px rgb(16 33 59 / 16%) !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-tools-menu:not([open]) .schedule-calendar-tools {
        display: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-calendar-tools button {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: var(--v17-ink) !important;
        font-size: 11px !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-legend-box {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: 1px solid var(--v17-border) !important;
        border-radius: 9px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-legend-summary {
        display: flex !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 9px 12px !important;
        color: var(--v17-ink) !important;
        font-size: 11px !important;
        font-weight: 720 !important;
        list-style: none !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-legend-content {
        padding: 0 12px 12px !important;
        color: var(--v17-muted) !important;
        font-size: 10px !important;
    }

    /* Attendance · Absen Foto: one-column capture flow with safe controls. */
    html body.bjas-mobile-task-v17.attendance-photo-shell {
        --v17-att-border: #d9e2ee;
        --v17-att-ink: #10213b;
        --v17-att-muted: #65758b;
        --v17-att-navy: #163f78;
        --v17-att-navy-hover: #123565;
        --v17-att-navy-soft: #eef4fc;
        --v17-att-soft: #f7f9fc;
        overflow-x: clip !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell :is(
        .attendance-page,
        .attendance-portal-shell,
        .attendance-capture-card,
        .attendance-portal-form,
        .attendance-capture-grid,
        .attendance-photo-workspace
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-page-header {
        display: block !important;
        min-height: 0 !important;
        margin: 0 0 12px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid var(--v17-att-border) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-page-header h1 {
        margin: 0 !important;
        color: var(--v17-att-ink) !important;
        font-size: 23px !important;
        font-weight: 780 !important;
        letter-spacing: -.025em !important;
        line-height: 1.12 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-portal-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 0 104px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-feedback:empty,
    html body.bjas-mobile-task-v17.attendance-photo-shell [data-attendance-report-link][hidden] {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat {
        display: flex !important;
        min-width: 0 !important;
        min-height: 62px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid var(--v17-att-border) !important;
        border-bottom: 1px solid var(--v17-att-border) !important;
        border-radius: 0 !important;
        background: #fff !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat:nth-child(2n) {
        border-right: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat > span {
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat > strong {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        color: var(--v17-att-ink) !important;
        font-size: 14px !important;
        font-weight: 780 !important;
        line-height: 1.15 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat--shift > strong {
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-capture-card {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-capture-header {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 13px 14px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--v17-att-border) !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-capture-header > div {
        min-width: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-section-kicker {
        margin: 0 0 3px !important;
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        font-weight: 740 !important;
        letter-spacing: .06em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-capture-header h2 {
        margin: 0 !important;
        color: var(--v17-att-ink) !important;
        font-size: 18px !important;
        font-weight: 780 !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-capture-header p:not(.attendance-section-kicker) {
        display: block !important;
        margin: 3px 0 0 !important;
        color: var(--v17-att-muted) !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-schedule-source {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 2px 8px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: var(--v17-att-soft) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-schedule-source > span {
        grid-row: 1 / 3 !important;
        align-self: center !important;
        padding: 4px 7px !important;
        border-radius: 999px !important;
        background: var(--v17-att-navy-soft) !important;
        color: var(--v17-att-navy) !important;
        font-size: 9px !important;
        font-weight: 740 !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-schedule-source > strong {
        min-width: 0 !important;
        color: var(--v17-att-ink) !important;
        font-size: 11.5px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-schedule-source > small {
        min-width: 0 !important;
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-portal-form {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-manual-shift-panel {
        width: auto !important;
        margin: 12px 12px 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-strip {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 12px 12px 0 !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-button {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 7px 6px !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--v17-att-navy) !important;
        font-size: 11px !important;
        font-weight: 740 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-button strong {
        min-width: 0 !important;
        overflow: hidden !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-button.is-selected {
        border-color: var(--v17-att-navy) !important;
        background: var(--v17-att-navy) !important;
        color: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-button:disabled {
        border-color: var(--v17-att-border) !important;
        background: var(--v17-att-soft) !important;
        color: #8997aa !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-dot {
        width: 6px !important;
        min-width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: currentColor !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-context {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2px !important;
        margin: 8px 12px 0 !important;
        padding: 8px 10px !important;
        overflow: visible !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: var(--v17-att-soft) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-context > span {
        color: var(--v17-att-ink) !important;
        font-size: 11px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-context > small {
        min-width: 0 !important;
        color: var(--v17-att-muted) !important;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell :is(
        .attendance-capture-grid,
        .attendance-photo-workspace
    ) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-panel {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 12px !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-panel-heading {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-panel-heading > span {
        display: grid !important;
        min-width: 44px !important;
        min-height: 28px !important;
        place-items: center !important;
        padding: 4px 6px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 999px !important;
        background: var(--v17-att-navy-soft) !important;
        color: var(--v17-att-navy) !important;
        font-size: 9px !important;
        font-weight: 740 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-panel-heading strong {
        display: block !important;
        color: var(--v17-att-ink) !important;
        font-size: 13px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-panel-heading small {
        display: block !important;
        margin-top: 2px !important;
        color: var(--v17-att-muted) !important;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-frame {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border: 1px solid #213754 !important;
        border-radius: 9px !important;
        background: #0f1f34 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-frame::before {
        content: "Kamera aktif setelah tombol Scan & Kirim ditekan" !important;
        position: absolute !important;
        z-index: 0 !important;
        inset: 50% 22px auto !important;
        transform: translateY(-50%) !important;
        color: rgb(255 255 255 / 64%) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-frame :is(
        video,
        img,
        canvas
    ) {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-frame :is(
        img[hidden],
        canvas[hidden]
    ) {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-scan-overlay {
        z-index: 2 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-actions {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        margin: 9px 0 0 !important;
        padding: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-button {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 62px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 9px 11px !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-navy) !important;
        border-radius: 9px !important;
        background: var(--v17-att-navy) !important;
        color: #fff !important;
        text-align: left !important;
        box-shadow: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-button:hover:not(:disabled) {
        background: var(--v17-att-navy-hover) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-icon {
        display: grid !important;
        width: 38px !important;
        height: 38px !important;
        place-items: center !important;
        border: 1px solid rgb(255 255 255 / 28%) !important;
        border-radius: 50% !important;
        background: rgb(255 255 255 / 10%) !important;
        color: #fff !important;
        font-size: 21px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-copy {
        display: grid !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-copy strong {
        min-width: 0 !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 780 !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-copy small {
        display: block !important;
        min-width: 0 !important;
        color: rgb(255 255 255 / 76%) !important;
        font-size: 9px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-progress {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 8px 0 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-progress > span {
        display: flex !important;
        min-width: 0 !important;
        min-height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 5px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 7px !important;
        background: var(--v17-att-soft) !important;
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        font-weight: 720 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-one-tap-progress i {
        display: grid !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        place-items: center !important;
        border-radius: 50% !important;
        background: #e4eaf2 !important;
        color: var(--v17-att-ink) !important;
        font-size: 8px !important;
        font-style: normal !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell [data-camera-status] {
        display: block !important;
        margin: 7px 0 0 !important;
        color: var(--v17-att-muted) !important;
        font-size: 9.5px !important;
        line-height: 1.4 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-guard {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin: 9px 0 0 !important;
        padding: 9px 10px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: var(--v17-att-soft) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-guard-dot {
        display: block !important;
        width: 8px !important;
        min-width: 8px !important;
        height: 8px !important;
        margin-top: 4px !important;
        border-radius: 50% !important;
        background: var(--v17-att-muted) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-guard-copy {
        display: grid !important;
        min-width: 0 !important;
        gap: 2px !important;
        color: var(--v17-att-muted) !important;
        font-size: 9.5px !important;
        line-height: 1.4 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-guard-copy > strong {
        color: var(--v17-att-ink) !important;
        font-size: 10.5px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-face-identity-status {
        display: inline-flex !important;
        width: fit-content !important;
        min-height: 24px !important;
        align-items: center !important;
        margin-top: 3px !important;
        padding: 3px 7px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: var(--v17-att-ink) !important;
        font-size: 9px !important;
        font-weight: 720 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-form-panel {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 0 12px 12px !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-disclosure {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-summary {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        list-style: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-summary-icon {
        display: grid !important;
        width: 28px !important;
        height: 28px !important;
        place-items: center !important;
        border-radius: 50% !important;
        background: var(--v17-att-navy-soft) !important;
        color: var(--v17-att-navy) !important;
        font-size: 11px !important;
        font-weight: 760 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-summary strong {
        display: block !important;
        min-width: 0 !important;
        color: var(--v17-att-ink) !important;
        font-size: 10.5px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-summary small {
        display: block !important;
        min-width: 0 !important;
        margin-top: 2px !important;
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-summary-action {
        color: var(--v17-att-navy) !important;
        font-size: 9.5px !important;
        font-weight: 740 !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-content {
        display: block !important;
        padding: 11px !important;
        border-top: 1px solid var(--v17-att-border) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-mobile-data-disclosure:not([open]) .attendance-mobile-data-content {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-form-quick-grid,
    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-form-panel .form-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-location-approval-note {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        border: 1px solid #cddced !important;
        border-radius: 8px !important;
        background: #f2f7fd !important;
        color: #31557f !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-location-approval-note strong {
        color: #24476f !important;
        font-size: 10.5px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-note-panel {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-note-panel > summary {
        display: flex !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        color: var(--v17-att-ink) !important;
        font-size: 10.5px !important;
        font-weight: 720 !important;
        list-style: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-section {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 8px !important;
        background: var(--v17-att-soft) !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-copy {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-copy > span {
        display: inline-flex !important;
        min-height: 26px !important;
        align-items: center !important;
        padding: 4px 7px !important;
        border-radius: 999px !important;
        background: var(--v17-att-navy-soft) !important;
        color: var(--v17-att-navy) !important;
        font-size: 9px !important;
        font-weight: 740 !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-copy strong {
        display: block !important;
        color: var(--v17-att-ink) !important;
        font-size: 10.5px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-submit-copy small {
        display: block !important;
        margin-top: 2px !important;
        color: var(--v17-att-muted) !important;
        font-size: 9px !important;
        line-height: 1.35 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--v17-att-border) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-section-header {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        list-style: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-title-block {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-title {
        margin: 0 !important;
        color: var(--v17-att-ink) !important;
        font-size: 14px !important;
        font-weight: 780 !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-note {
        margin: 3px 0 0 !important;
        color: var(--v17-att-muted) !important;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-header-actions {
        display: flex !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        color: var(--v17-att-navy) !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-history-card > .panel-content {
        padding: 0 12px 12px !important;
        border-top: 1px solid var(--v17-att-border) !important;
    }
}

@media screen and (min-width: 500px) and (max-width: 820px) {
    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-camera-frame {
        aspect-ratio: 16 / 9 !important;
        max-height: 390px !important;
    }
}

@media screen and (max-width: 359px) {
    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-page-actions :is(
        .ghost-button,
        .primary-button
    ) {
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .schedule-matrix-cell {
        grid-template-columns: 64px minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding-inline: 9px !important;
    }

    html body.bjas-mobile-task-v17:is(.hris-schedule-isolated-shell, .schedule-team-calendar-shell) .team-calendar-check-label {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-overview-card .att-stat {
        min-height: 68px !important;
        padding-inline: 10px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-button {
        font-size: 10px !important;
        padding-inline: 4px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell .attendance-action-dot {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* V17 audit corrections — one active mobile contract                         */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 821px) {
    /* Keep dense desktop workspaces readable without changing their geometry. */
    body.bjas-mockup-v5 #mainContent :is(
        small,
        label,
        button,
        table th,
        table td,
        .helper-text,
        .module-shortcut-desc,
        .gateway-v113-card-copy p
    ) {
        font-size: max(11px, .72em) !important;
    }

    body.bjas-admin-page .bjas-admin-mini-grid > div {
        gap: 6px !important;
        padding-inline: 14px !important;
    }

    body.bjas-admin-page .bjas-admin-mini-grid > div > :is(span, strong) {
        display: block !important;
        width: 100% !important;
    }

    body.workspace-gateway-v113 .gateway-v113-summary-copy small,
    body.bjas-admin-page .bjas-admin-kicker,
    body .page-eyebrow {
        font-size: 11px !important;
    }

    body #mainContent :is(
        [class*="-kicker"],
        [class*="-eyebrow"],
        [class*="-subtitle"],
        [class*="-meta"],
        [class*="pagination"] :is(a, button, span, strong),
        .helper-text
    ) {
        font-size: max(11px, .72em) !important;
    }

    body #mainContent :is(
        .attendance-one-tap-progress strong,
        .bjas-admin-card p,
        .hris-native-row small,
        .hris-native-row-meta,
        .portal-kicker
    ) {
        font-size: 11px !important;
    }

    body.wms-input-item-shell #mainContent p,
    body.hris-operations-approved #mainContent :is(
        small,
        button,
        .hris-native-row p,
        [class*="-meta"]
    ),
    body.bjas-admin-page #mainContent .bjas-admin-card p {
        font-size: max(11px, .72em) !important;
    }

    body.hris-operations-approved :is(
        .hris-employee-row-copy small,
        .hris-ops-panel-header > p,
        .hris-ops-detail-title > p
    ),
    body.bjas-admin-page .bjas-admin-action-card > p {
        font-size: 11px !important;
    }

    html body.hris-employee-approved.hris-employee-approved #mainContent
        .hris-employee-row-copy > small,
    html body.hris-operations-approved.hris-operations-approved #mainContent
        .hris-ops-panel-header > p,
    html body.hris-operations-approved.hris-operations-approved #mainContent
        .hris-ops-detail-title > p {
        font-size: 11px !important;
    }

    html body.hris-operations-approved.hris-operations-approved
        .hris-ops-panel-header.hris-ops-panel-header > p,
    html body.hris-operations-approved.hris-operations-approved
        .hris-ops-detail-title.hris-ops-detail-title > p {
        font-size: 11px !important;
    }
}

@media screen and (max-width: 820px) {
    /* One 44 px interaction standard across the mobile application. */
    html body.bjas-mobile-polished-v17 :is(
        button,
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select,
        textarea,
        summary,
        [role="button"],
        a.button,
        a.btn,
        [class*="-actions"] > a
    ) {
        min-height: 44px !important;
    }

    html body.bjas-mobile-polished-v17 button,
    html body.bjas-mobile-polished-v17 button[aria-label] {
        min-width: 44px !important;
    }

    html body.bjas-mobile-task-v17.wms-input-item-shell :is(
        .master-combobox-toggle,
        .wms-taxonomy-combobox-toggle
    ) {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        small,
        .helper-text,
        [class*="-kicker"],
        [class*="-eyebrow"]
    ) {
        font-size: max(10px, .72em) !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        .attendance-one-tap-progress strong,
        .attendance-section-kicker,
        .ai-kicker
    ) {
        font-size: 10px !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        [class*="pagination"] a,
        [class*="pagination"] button,
        .pager a,
        .pager button,
        a.ghost-button,
        a.primary-button,
        a.receipt-button,
        .career-signin-switch a,
        .career-help-actions a,
        .career-help-cta-actions a,
        .career-about-side-action,
        .career-about-link-grid a,
        .career-astra-button
    ) {
        display: inline-flex !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        .admin-local-link,
        .sales-log-reset-btn,
        .career-astra-inline-link,
        .career-about-band-actions a,
        .career-signin-actions-row a
    ) {
        display: inline-flex !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding-block: 8px !important;
    }

    html body.bjas-mobile-polished-v17 .ai-nav a.ai-nav-button {
        min-height: 44px !important;
    }

    html body.bjas-mobile-polished-v17 .ai-composer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: 44px minmax(140px, 1fr) 46px !important;
    }

    html body.bjas-mobile-polished-v17 .ai-composer textarea {
        width: 100% !important;
        min-width: 140px !important;
        max-width: 100% !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        .breadcrumbs,
        .breadcrumb,
        [aria-label="Breadcrumb"],
        [aria-label="Navigasi breadcrumb"]
    ) a {
        display: inline-flex !important;
        min-height: 40px !important;
        align-items: center !important;
        padding-block: 6px !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        input[type="checkbox"],
        input[type="radio"]
    ) {
        min-width: 20px !important;
        min-height: 20px !important;
    }

    html body.bjas-mobile-polished-v17 :is(
        .bjas-mobile-task-topbar__back,
        .bjas-mobile-task-topbar__action,
        .bjas-mobile-task-topbar__avatar
    ) {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar__actions {
        gap: 4px !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar__brand {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar__logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        transform: scale(1.3) !important;
        transform-origin: center !important;
    }

    html body.bjas-mobile-task-v17 #mainContent {
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    html body.bjas-mobile-task-v17 :is(
        .page-content,
        .bjas-admin-main,
        .internal-module-panel,
        .attendance-portal-shell
    ) {
        scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    /* Workspace screens have one heading each. */
    html body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-screen-head {
        display: none !important;
    }

    html body.workspace-gateway-v113.bjas-mobile-task-v17[data-mobile-workspace-mode="activity"]
        .gateway-mobile-screen-head--activity {
        display: grid !important;
    }

    html body.workspace-gateway-v113.bjas-mobile-task-v17[data-mobile-workspace-mode="menu"]
        .gateway-mobile-screen-head--activity {
        display: none !important;
    }

    /* Kategori & Brand: task toolbar + labelled master cards. */
    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-page {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-header {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-actions {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-actions > :is(
        a,
        button,
        form
    ),
    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-actions form > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpis {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--mobile-line) !important;
        border-radius: var(--mobile-radius) !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi {
        display: flex !important;
        min-width: 0 !important;
        min-height: 66px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-right: 1px solid var(--mobile-line) !important;
        border-bottom: 1px solid var(--mobile-line) !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi:nth-child(2n) {
        border-right: 0 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi > :is(span, strong) {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi > span {
        color: var(--mobile-muted) !important;
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-kpi > strong {
        color: var(--mobile-ink) !important;
        font-size: 18px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-grid {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-toolbar {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-toolbar > input {
        grid-column: 1 / -1 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-toolbar > :is(
        input,
        select,
        button
    ) {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-panel-body,
    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-list {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table,
    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > thead {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody {
        display: grid !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody > tr {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--mobile-line) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody > tr > td {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: minmax(76px, .42fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--mobile-line) !important;
        font-size: 12px !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody > tr > td:first-child,
    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody > tr > td:last-child {
        grid-column: 1 / -1 !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page table.category-brand-table > tbody > tr > td::before {
        content: attr(data-label) !important;
        color: var(--mobile-muted) !important;
        font-size: 10px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-row-actions {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-row-actions > :is(
        button,
        form
    ),
    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-row-actions form > button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* OTP: each employee is one card and actions never collapse vertically. */
    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-table--responsive td[data-label="Action"] {
        display: block !important;
        padding: 10px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-table--responsive td[data-label="Action"]::before {
        display: block !important;
        margin-bottom: 8px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions > form {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions > form:nth-child(3) {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions :is(input, button) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    /* Hak Per User: separate every label/value and keep controls comfortable. */
    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-mini-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-mini-grid > div {
        display: flex !important;
        min-width: 0 !important;
        min-height: 68px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 10px 12px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-mini-grid > div > :is(span, strong) {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-permission-title {
        display: flex !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px 7px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-permission-controls {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-permission-choice {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        white-space: normal !important;
    }

    /* Notifications: toolbar actions wrap as complete buttons. */
    html body.bjas-mobile-task-v17 .notifications-page-shell .notification-center-toolbar.is-page {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    html body.bjas-mobile-task-v17 .notifications-page-shell :is(
        .notification-center-tabs,
        .notification-center-actions
    ) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    html body.bjas-mobile-task-v17 .notifications-page-shell .notification-center-actions
        .notification-mini-action:first-child {
        grid-column: 1 / -1 !important;
    }

    html body.bjas-mobile-task-v17 .notifications-page-shell :is(
        .notification-tab,
        .notification-mini-action
    ) {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        overflow: visible !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-task-v17 .notifications-page-shell .notification-card {
        padding-bottom: 8px !important;
    }

    html body.bjas-mobile-task-v17 .notifications-page-shell .notification-entry-action {
        min-width: 84px !important;
    }

    /*
     * POS follows the operational order: customer → scan → cart → total →
     * actions. The full selector intentionally matches the old POS authority
     * so this final workflow contract wins without changing transaction JS.
     */
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot > .sr-only {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-window {
        position: static !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot :is(
            .pos-ipos-topbar,
            .pos-ipos-layout,
            .pos-ipos-main,
            .pos-ipos-transaction-panel,
            .pos-ipos-draft-panel,
            .pos-ipos-cart-panel,
            .pos-ipos-payment-dock,
            .pos-ipos-quickbar,
            .pos-ipos-bottom-panel
        ) {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-topbar {
        order: 1 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot :is(.pos-ipos-toolbar, .pos-ipos-topactions) {
        position: static !important;
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-layout {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 10px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-main {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 10px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-transaction-panel {
        order: 1 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-draft-panel {
        order: 2 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-cart-panel {
        order: 3 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-payment-dock {
        order: 2 !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-quickbar {
        order: 3 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-bottom-panel {
        order: 4 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-log-shell {
        order: 5 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot#posCheckoutRoot :is(
            .pos-ipos-panel,
            .pos-ipos-payment-dock,
            .pos-ipos-quickbar,
            .pos-ipos-bottom-panel
        ) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot#posCheckoutRoot :is(
            .pos-ipos-window,
            .pos-ipos-topbar,
            .pos-ipos-layout,
            .pos-ipos-main,
            .pos-ipos-quickbar,
            .pos-ipos-bottom-panel
        ) {
        grid-auto-rows: max-content !important;
        align-content: start !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot :is(
            button,
            input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
            select,
            textarea,
            summary
        ) {
        min-height: 44px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-toolbar-pill :is(select, button, a) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-cd-pos-control .pos-cd-toggle {
        min-width: 64px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot :is(
            .pos-ipos-cart-head-actions .pos-vintage-mini,
            #posCatalogOpenButtonSecondary,
            .pos-ipos-log-head-actions .pos-vintage-mini
        ) {
        display: inline-flex !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot :is(.pos-ipos-menu-trigger, .pos-ipos-close) {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-cartbox {
        overflow: visible !important;
        border: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable,
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable {
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable > thead {
        display: none !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable > tbody {
        display: grid !important;
        gap: 9px !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable > tbody > tr.pos-vintage-cart-row {
        position: relative !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--mobile-line) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable
        > tbody > tr.pos-vintage-cart-row > td {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(64px, .42fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--mobile-line) !important;
        font-size: 12px !important;
        text-align: left !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot table.pos-ipos-carttable
        > tbody > tr.pos-vintage-cart-row > td::before {
        color: var(--mobile-muted) !important;
        font-size: 9.5px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-cell-no::before { content: "No" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-code::before { content: "Kode" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-description-cell::before { content: "Barang" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-qty-cell::before { content: "Jumlah" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-unit-cell::before { content: "Satuan" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-price-cell::before { content: "Harga" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-discount-cell::before { content: "Diskon" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-total-cell::before { content: "Total" !important; }
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-action-cell::before { content: "Aksi" !important; }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot :is(
        .pos-cart-description-cell,
        .pos-cart-qty-cell,
        .pos-cart-action-cell
    ) {
        grid-column: 1 / -1 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-description-cell {
        grid-template-columns: minmax(64px, .25fr) minmax(0, 1fr) !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-qty-cell .pos-qty-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-action-cell {
        border-bottom: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot .pos-cart-action-cell > button {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot :is(.pos-cart-empty-row, .pos-ipos-carttable tbody > tr:not(.pos-vintage-cart-row)),
    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot :is(.pos-cart-empty-row, .pos-ipos-carttable tbody > tr:not(.pos-vintage-cart-row)) > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface] #posCheckoutRoot :is(.pos-cart-empty-row, .pos-ipos-carttable tbody > tr:not(.pos-vintage-cart-row)) > td {
        padding: 0 !important;
        border: 0 !important;
    }

    html body.bjas-mobile-task-v17.bjas-mobile-polished-v17.pos-shell.pos-page-wide[data-has-app-shell][data-app-surface]
        #posCheckoutRoot .pos-ipos-payment-compact {
        position: static !important;
        z-index: auto !important;
        bottom: auto !important;
        box-shadow: none !important;
    }

    /* Locally-scrollable tables remain contained and visually signposted. */
    html body.bjas-mobile-polished-v17 .bjas-mobile-table-scroll-wrap {
        position: relative !important;
        overscroll-behavior-inline: contain !important;
        scrollbar-gutter: stable !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-table-scroll-wrap::after {
        content: "Geser tabel untuk melihat kolom lain" !important;
        position: sticky !important;
        left: 8px !important;
        display: inline-flex !important;
        min-height: 28px !important;
        align-items: center !important;
        margin: 6px 8px 8px !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;
        background: var(--mobile-primary-soft) !important;
        color: var(--mobile-primary) !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        pointer-events: none !important;
    }

    /* Close the remaining sub-pixel overflow and tiny-copy findings. */
    html body.bjas-mobile-task-v17 :is(
        .attendance-page,
        .attendance-portal-shell,
        .biometric-workspace,
        .biometric-workspace-grid
    ) {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell,
    html body.bjas-mobile-task-v17.hris-biometric-page-shell #mainContent,
    html body.bjas-mobile-task-v17.hris-biometric-page-shell :is(
        .hris-module-layout,
        .hris-operations-shell,
        .hris-biometric-workspace,
        .biometric-workspace
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell
        .internal-shell-breadcrumb .breadcrumb-list li + li::before {
        display: none !important;
        content: none !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell
        .hris-ops-summary-strip :is(strong, h3)::after {
        display: none !important;
        content: none !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell :is(
        .hris-operations-header,
        .hris-operations-header > div,
        .hris-operations-context
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell .hris-operations-context {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-task-v17.hris-biometric-page-shell .sr-only {
        overflow: hidden !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell :is(
        .att-stat > span,
        .attendance-submit-copy small,
        .attendance-history-note,
        .attendance-history-header-actions
    ),
    html body.workspace-gateway-v113.bjas-mobile-task-v17[data-mobile-workspace-mode="activity"]
        .gateway-v113-summary-copy small {
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell #mainContent :is(
        .attendance-section-kicker,
        .attendance-action-context small,
        .attendance-photo-workspace small,
        .attendance-one-tap-progress strong,
        .attendance-history-note small,
        .attendance-history-header-actions small
    ) {
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17.attendance-photo-shell #mainContent small {
        font-size: 10px !important;
    }

    html body.bjas-mobile-task-v17.attendance-overtime-shell
        .attendance-overtime-page.attendance-overtime-page .overtime-duration-pair {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(72px, 1fr)) !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-task-v17.attendance-overtime-shell
        .attendance-overtime-page.attendance-overtime-page .overtime-duration-unit {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px !important;
    }

    html body.bjas-mobile-task-v17.attendance-overtime-shell
        .attendance-overtime-page.attendance-overtime-page .overtime-duration-unit input {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 100% !important;
    }

    /*
     * Invoice/surat jalan previews become readable cards on screen only.
     * Their @media print layout remains the original A4 table.
     */
    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview.manual-invoice-sheet,
        #manualDeliveryPreview.manual-delivery-sheet
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        zoom: 1 !important;
        overflow: hidden !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        .manual-invoice-preview,
        .manual-delivery-preview,
        .print-preview-shell,
        .print-document-body,
        .manual-invoice-body,
        .manual-delivery-body
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-inline: 0 !important;
        overflow: visible !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-document-header,
        .manual-topbar,
        .manual-delivery-topbar
    ) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-brand-lockup,
        .manual-brand-row,
        .manual-delivery-brand
    ) {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: center !important;
        gap: 10px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-store-logo,
        .manual-logo,
        .manual-logo-fallback,
        .manual-delivery-logo,
        .manual-delivery-logo-fallback
    ) {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-store-meta,
        .manual-brand-text,
        .manual-delivery-brand-text
    ) {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-title,
        .manual-invoice-title,
        .manual-delivery-title,
        .manual-delivery-title strong
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        #manualInvoicePreview,
        #manualDeliveryPreview
    ) :is(
        .print-document-body,
        .manual-invoice-body,
        .manual-delivery-body
    ) {
        padding: 14px !important;
        gap: 12px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        .manual-meta-bar,
        .manual-delivery-meta-grid,
        .manual-customer-row,
        .manual-delivery-party-row,
        .manual-amounts,
        .print-bottom-grid,
        .print-signatures
    ) {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ),
    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) :is(tbody, tr, td) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) {
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) colgroup,
    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) thead {
        display: none !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) tbody {
        display: grid !important;
        gap: 8px !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) tbody > tr {
        display: grid !important;
        gap: 8px !important;
        padding: 10px !important;
        border: 1px solid var(--mobile-line) !important;
        border-radius: 9px !important;
        background: #fff !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(72px, .38fr) minmax(0, .62fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 10px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page :is(
        table.manual-table.bjas-mobile-card-table,
        table.manual-delivery-table.bjas-mobile-card-table
    ) tbody > tr > td::before {
        content: attr(data-mobile-label) !important;
        color: var(--mobile-muted) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    html body.bjas-mobile-task-v17 .attendance-overtime-page :is(
        button,
        a,
        summary
    ) {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html body.bjas-mobile-polished-v17.pos-manual-doc-page
    .manual-logo-picker input[type="file"] {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 1px !important;
        min-width: 1px !important;
        max-width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        max-height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 359px) {
    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar {
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        padding-inline: 8px !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar.is-home {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar__brand {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html body.bjas-mobile-polished-v17 .bjas-mobile-task-topbar__logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body.bjas-mobile-task-v17.wms-category-brand-page .category-brand-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions,
    html body.bjas-mobile-task-v17.bjas-admin-page .bjas-admin-otp-actions > form:nth-child(3) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}