/* PARSGAS_MOBILE_PERFORMANCE_V1
   زیرساخت مشترک واکنش‌گرایی و کارایی رابط پارس گاز
*/
:root{
    --pg-mobile-gap:12px;
    --pg-touch-size:44px;
    --pg-mobile-radius:14px;
}

html{
    width:100%;
    max-width:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

img,
svg,
video,
canvas{
    max-width:100%;
}

button,
input,
select,
textarea{
    max-width:100%;
}

.pg-mobile-table{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    border-radius:inherit;
}

.pg-mobile-table:focus-visible{
    outline:3px solid rgba(184,80,43,.22);
    outline-offset:2px;
}

.pg-mobile-table > table{
    margin:0;
}

.pg-mobile-scroll-hint{
    display:none;
}

.pg-mobile-runtime .pg-mobile-table[data-overflowing="1"]::after{
    content:"برای دیدن ستون‌های بیشتر، جدول را به چپ و راست بکشید";
    position:sticky;
    right:8px;
    bottom:6px;
    z-index:3;
    display:none;
    width:max-content;
    max-width:calc(100vw - 48px);
    margin:6px 8px 8px;
    padding:5px 9px;
    border:1px solid rgba(184,80,43,.18);
    border-radius:999px;
    color:#71402c;
    background:rgba(255,248,244,.94);
    box-shadow:0 4px 12px rgba(89,46,25,.08);
    font-size:10px;
    pointer-events:none;
}

.pg-mobile-runtime .pg-responsive-form{
    min-width:0;
}

.pg-mobile-runtime .pg-mobile-stack{
    min-width:0;
}

.pg-mobile-runtime .pg-lazy-section{
    content-visibility:auto;
    contain-intrinsic-size:auto 360px;
}

.pg-mobile-runtime [hidden]{
    display:none !important;
}

@media (max-width:900px){
    :root{
        --pg-mobile-gap:10px;
    }

    body{
        min-height:100svh;
    }

    .container,
    .page-container,
    .report-container,
    .dashboard-container,
    .content,
    .page-content,
    .main-content,
    .workspace-content,
    .app-content,
    .payroll-wrapper,
    .security-main{
        max-width:100% !important;
    }

    .container,
    .page-container,
    .report-container,
    .dashboard-container,
    .content,
    .page-content,
    .main-content,
    .workspace-content{
        padding-inline:min(14px,3.5vw) !important;
    }

    .page-header,
    .report-header,
    .section-header,
    .card-header,
    .panel-head,
    .page-head,
    .toolbar,
    .actions,
    .header-actions,
    .form-actions,
    .filter-actions,
    .report-actions,
    .welcome-card,
    .payroll-hero{
        flex-wrap:wrap !important;
        gap:var(--pg-mobile-gap) !important;
    }

    .page-header > *,
    .report-header > *,
    .section-header > *,
    .panel-head > *,
    .page-head > *,
    .toolbar > *,
    .welcome-card > *{
        min-width:0;
    }

    .filters,
    .filter-grid,
    .filters-grid,
    .form-grid,
    .fields-grid,
    .detail-grid,
    .summary-grid,
    .stats-grid,
    .cards,
    .cards-grid,
    .quick-grid,
    .quick-grid-home,
    .kpi-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .two-column,
    .three-column,
    .customers-layout{
        grid-template-columns:minmax(0,1fr) !important;
    }

    .filter-actions,
    .form-actions,
    .page-actions,
    .report-actions{
        grid-column:1 / -1 !important;
        width:100%;
    }

    .filter-actions > *,
    .form-actions > *,
    .page-actions > *,
    .report-actions > *{
        flex:1 1 150px;
    }

    button,
    [type="button"],
    [type="submit"],
    [role="button"],
    .btn,
    .button,
    .topbar-link,
    .action-button,
    .small-button,
    .secondary-button,
    .primary-button{
        min-height:var(--pg-touch-size);
        touch-action:manipulation;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea{
        min-height:44px;
        font-size:16px !important;
    }

    textarea{
        min-height:96px;
    }

    .modal,
    .modal-content,
    .dialog,
    dialog,
    .pg-modal,
    .pg-modal-content{
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100svh - 24px) !important;
    }

    .pg-mobile-table{
        margin-inline:0;
        border-radius:12px;
    }

    .pg-mobile-table > table{
        min-width:max(680px,100%);
    }

    .pg-mobile-runtime .pg-mobile-table[data-overflowing="1"]::after{
        display:block;
    }

    table th,
    table td{
        padding-block:10px;
    }

    .tabs,
    .tabs-list,
    .nav-tabs,
    .payroll-nav,
    .toolbar-scroll{
        overflow-x:auto !important;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
        -webkit-overflow-scrolling:touch;
    }

    .tabs > *,
    .tabs-list > *,
    .nav-tabs > *,
    .payroll-nav > *{
        flex:0 0 auto;
    }

    .app-topbar,
    .top-header{
        padding-inline:10px !important;
    }

    .app-sidebar,
    .menu-sidebar,
    .security-sidebar{
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
}

@media (max-width:560px){
    .card,
    .panel,
    .report-card,
    .section-card,
    .form-card{
        padding:13px !important;
        border-radius:var(--pg-mobile-radius) !important;
    }

    h1{
        font-size:clamp(19px,6vw,25px) !important;
    }

    h2{
        font-size:clamp(17px,5vw,22px) !important;
    }

    .btn,
    .button,
    button,
    [role="button"]{
        max-width:100%;
    }

    .form-actions,
    .filter-actions,
    .page-actions,
    .report-actions{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
    }

    .form-actions > *,
    .filter-actions > *,
    .page-actions > *,
    .report-actions > *{
        width:100%;
    }

    .pg-mobile-table > table{
        min-width:max(620px,100%);
    }
}

@media (hover:none) and (pointer:coarse){
    a:hover,
    button:hover,
    .btn:hover,
    .card:hover,
    .panel:hover{
        transform:none !important;
    }

    button,
    a,
    input,
    select,
    textarea{
        -webkit-tap-highlight-color:rgba(184,80,43,.14);
    }
}

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

@media print{
    .pg-mobile-scroll-hint{
        display:none !important;
    }

    .pg-mobile-table{
        overflow:visible !important;
    }

    .pg-mobile-table > table{
        min-width:0 !important;
    }
}