/* Phone-only compaction. Desktop default layout is unchanged. */
@media (max-width: 820px) {
    html.hris-phone header,
    html.hris-phone header.ati-app-header,
    html.acc-phone header,
    html.acc-phone header.ati-app-header,
    html.supply-phone header,
    html.supply-phone header.ati-app-header,
    html.staff-mobile header,
    html.staff-mobile header.ati-app-header,
    html.staff-mobile body > header,
    html.hris-phone body.hris-layout > header,
    html.acc-phone body.acc-layout > header,
    html.supply-phone body.supply-layout > header,
    html.staff-mobile body.staff-mobile > header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html.hris-phone .ati-official-banner,
    html.acc-phone .ati-official-banner,
    html.supply-phone .ati-official-banner,
    html.staff-mobile .ati-official-banner {
        display: none !important;
    }

    html.hris-phone body.hris-layout .dashboard-layout,
    html.acc-phone body.acc-layout .dashboard-layout,
    html.supply-phone body.supply-layout .wrapper,
    html.staff-mobile body.staff-mobile .dashboard-layout {
        display: block !important;
        min-width: 0;
    }

    html.hris-phone .main-content,
    html.acc-phone .main-content,
    html.supply-phone .main-content,
    html.staff-mobile .main-content {
        padding: 0.75rem 0.8rem 1.1rem !important;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    html.hris-phone .hr-hello,
    html.acc-phone .ac-hello,
    html.supply-phone .su-hello {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        padding: 0.75rem 0.8rem !important;
    }
    html.hris-phone .hr-hello h1,
    html.acc-phone .ac-hello h1,
    html.supply-phone .su-hello h1 {
        font-size: 1.05rem !important;
        word-break: break-word;
    }
    html.hris-phone .hr-hello-tag,
    html.acc-phone .ac-hello-tag,
    html.supply-phone .su-hello-tag {
        max-width: 100% !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        font-size: 0.68rem !important;
    }

    html.hris-phone .hm-appbar a,
    html.acc-phone .ac-appbar a,
    html.supply-phone .su-appbar a,
    html.staff-mobile .sm-appbar-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.95rem !important;
    }
    html.hris-phone .hm-appbar a span,
    html.acc-phone .ac-appbar a span,
    html.supply-phone .su-appbar a span {
        display: none;
    }

    html.hris-phone .hm-banner,
    html.acc-phone .ac-banner,
    html.supply-phone .su-banner,
    html.staff-mobile .sm-banner {
        gap: 0.4rem;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    html.hris-phone .hm-banner img,
    html.acc-phone .ac-banner img,
    html.supply-phone .su-banner img,
    html.staff-mobile .sm-banner img {
        height: 32px !important;
    }
    html.hris-phone .hm-banner-txt .l4,
    html.acc-phone .ac-banner-txt .l4,
    html.supply-phone .su-banner-txt .l4 {
        display: none;
    }
    html.hris-phone .hm-banner-user em,
    html.acc-phone .ac-banner-user em,
    html.supply-phone .su-banner-user em {
        display: none;
    }
    html.hris-phone .hm-banner-user strong,
    html.acc-phone .ac-banner-user strong,
    html.supply-phone .su-banner-user strong {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html.hris-phone .hr-stat-row {
        grid-template-columns: 1fr 1fr !important;
    }
    html.hris-phone .hr-stat,
    html.hris-phone .hr-stat--present,
    html.hris-phone .hr-stat--absent {
        grid-column: auto !important;
    }
    html.hris-phone .hr-charts,
    html.hris-phone .hr-actions,
    html.acc-phone .ac-actions,
    html.supply-phone .su-actions,
    html.supply-phone .su-stat-row,
    html.supply-phone .su-cat-row {
        grid-template-columns: 1fr 1fr !important;
    }
    html.acc-phone .ac-stat-row {
        grid-template-columns: 1fr !important;
    }

    html.hris-phone .dashboard-grid,
    html.acc-phone .dashboard-grid,
    html.supply-phone .dashboard-grid,
    html.staff-mobile .dashboard-grid,
    html.hris-phone .form-grid,
    html.acc-phone .form-grid,
    html.supply-phone .form-grid,
    html.staff-mobile .form-grid,
    html.staff-mobile .info-grid {
        grid-template-columns: 1fr !important;
    }

    html.hris-phone .hr-table,
    html.acc-phone .data-table,
    html.acc-phone .ac-activity-table,
    html.supply-phone .data-table,
    html.staff-mobile .data-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html.staff-mobile .sm-welcome {
        max-width: 5.5rem;
    }
    html.staff-mobile .sm-welcome strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 5.5rem;
    }
}

@media (max-width: 480px) {
    html.hris-phone .hr-charts,
    html.hris-phone .hr-actions,
    html.acc-phone .ac-actions,
    html.supply-phone .su-actions {
        grid-template-columns: 1fr !important;
    }
    html.staff-mobile .sm-welcome {
        display: none !important;
    }
    html.hris-phone .hm-banner-txt .l1,
    html.acc-phone .ac-banner-txt .l1,
    html.supply-phone .su-banner-txt .l1,
    html.staff-mobile .sm-banner-txt .l1 {
        display: none;
    }
}

/* Global phone layout for every page (Super Admin, forms, tables). */
@media (max-width: 820px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .ati-phone-burger {
        display: grid !important;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-right: 0.35rem;
        flex-shrink: 0;
        border: 0;
        border-radius: 0.55rem;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        cursor: pointer;
    }
    .ati-phone-burger svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

    /* Official banner — shrink huge desktop title */
    .ati-official-banner {
        padding: 0.55rem 0.75rem !important;
        gap: 0.55rem !important;
    }
    .ati-official-banner img {
        height: 36px !important;
        width: auto !important;
    }
    .ati-official-banner > div:first-child {
        gap: 0.4rem !important;
    }
    .ati-official-banner > div:last-child span:nth-child(1) { font-size: 0.55rem !important; }
    .ati-official-banner > div:last-child span:nth-child(2) {
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
    .ati-official-banner > div:last-child span:nth-child(3) { font-size: 0.58rem !important; }
    .ati-official-banner > div:last-child span:nth-child(4) { display: none !important; }

    header.ati-app-header,
    header.ati-app-header[style] {
        padding: 0.55rem 0.7rem !important;
    }
    header.ati-app-header nav,
    header.ati-app-header nav[style] {
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
    }
    header.ati-app-header .logo,
    header.ati-app-header a.logo[style] {
        font-size: 1.02rem !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    header.ati-app-header .logo span,
    header.ati-app-header a.logo span[style] {
        display: none;
    }

    body:not(.homepage):not(.lp-phone):not(.staff-mobile) .dashboard-layout,
    body.sa-layout .dashboard-layout,
    body.supply-layout .wrapper {
        display: block !important;
        min-width: 0 !important;
    }

    body:not(.staff-mobile) .sidebar,
    body:not(.staff-mobile) .admin-sidebar,
    body:not(.staff-mobile) .hris-sidebar,
    body:not(.staff-mobile) .acc-sidebar,
    body:not(.staff-mobile) .supply-sidebar,
    body:not(.staff-mobile) #sidebar,
    body.sa-layout .admin-sidebar,
    body:not(.homepage):not(.lp-phone) .admin-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1300;
        width: min(82vw, 300px) !important;
        min-width: 0 !important;
        max-width: min(82vw, 300px) !important;
        min-height: 100dvh !important;
        overflow-y: auto;
        transform: translateX(-104%);
        transition: transform 0.25s ease;
        pointer-events: none;
        visibility: hidden;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    body:not(.staff-mobile) .sidebar.is-open,
    body:not(.staff-mobile) .admin-sidebar.is-open,
    body:not(.staff-mobile) .hris-sidebar.is-open,
    body:not(.staff-mobile) .acc-sidebar.is-open,
    body:not(.staff-mobile) .supply-sidebar.is-open,
    body:not(.staff-mobile) #sidebar.is-open {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    .ati-phone-overlay {
        display: none;
        pointer-events: none;
    }
    .ati-phone-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(10, 24, 14, 0.45);
        pointer-events: auto;
    }

    .main-content,
    #content,
    body.sa-layout .main-content {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.85rem 0.85rem 1.25rem !important;
        overflow-x: hidden;
    }
    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-grid,
    .form-grid,
    .info-grid,
    .sa-columns,
    body.sa-layout .sa-columns,
    body.sa-layout .sa-kpis,
    .sa-kpis {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }
    .sa-panel,
    .dashboard-panel {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .data-table,
    .att-table,
    table[style*="min-width"],
    #sg-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input, select, textarea, .form-control, .btn, button.btn {
        max-width: 100%;
    }
    .form-control[style*="min-width"],
    input[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    .nav-links,
    .header-actions {
        gap: 0.35rem !important;
    }
}

.ati-phone-burger { display: none; }

@media (max-width: 480px) {
    .sa-kpis { grid-template-columns: 1fr 1fr !important; }
    .ati-official-banner > div:last-child span:nth-child(1) { display: none !important; }
}

/* Fluid phone widths: 320 / 360 / 390 / 430 / 600 */
@media (max-width: 820px) {
    html {
        --ati-gutter: clamp(0.55rem, 4vw, 1rem);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    img, svg, video {
        max-width: 100%;
    }
    .hm-banner, .ac-banner, .su-banner, .sm-banner,
    .hm-appbar, .ac-appbar, .su-appbar, .sm-appbar {
        width: 100%;
        padding-left: var(--ati-gutter) !important;
        padding-right: var(--ati-gutter) !important;
        box-sizing: border-box;
    }
    .hm-banner img, .ac-banner img, .su-banner img, .sm-banner img {
        height: clamp(26px, 8.5vw, 42px) !important;
        width: auto !important;
    }
    .hm-tab, .ac-tab, .su-tab, .sm-tab {
        min-width: 0;
        overflow: hidden;
        font-size: clamp(0.48rem, 2.4vw, 0.68rem) !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .hm-tab svg, .ac-tab svg, .su-tab svg, .sm-tab svg {
        width: clamp(18px, 5.5vw, 22px);
        height: clamp(18px, 5.5vw, 22px);
        flex-shrink: 0;
    }
    header .nav-links > div[style*="flex-direction: column"],
    header .header-actions > .nav-links > div[style*="flex-direction: column"] {
        display: none !important;
    }
    .main-content,
    #content {
        padding-left: var(--ati-gutter) !important;
        padding-right: var(--ati-gutter) !important;
    }
}

@media (max-width: 430px) {
    html.hris-phone .hr-charts,
    html.hris-phone .hr-actions,
    html.acc-phone .ac-actions,
    html.supply-phone .su-actions {
        grid-template-columns: 1fr !important;
    }
    html.hris-phone .hr-stat-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 360px) {
    html.hris-phone .hr-stat-row,
    html.supply-phone .su-stat-row,
    html.supply-phone .su-cat-row,
    html.acc-phone .ac-stat-row,
    .sa-kpis {
        grid-template-columns: 1fr !important;
    }
    .hm-banner-txt .l3,
    .ac-banner-txt .l3,
    .su-banner-txt .l3,
    .sm-banner-txt .l3 {
        display: none;
    }
}