/*
 * PORTALE V9.0 — RESPONSIVE MOBILE
 * Global responsive layer loaded last.
 */

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

body{
    overflow-x:hidden;
}

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

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

.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-backdrop{
    display:none;
}

/* Prevent long values from breaking layouts */
.ticket-main-top,
.ticket-main-meta,
.compact-user-main,
.catalog-item-main,
.location-main,
.comment-body,
.report-complex-cell,
.mail-error-cell,
.requester-profile-grid > *,
.summary-list > *{
    min-width:0;
    overflow-wrap:anywhere;
}

/* Tablet */
@media(max-width:1100px){
    .content{
        max-width:none!important;
    }

    .new-ticket-layout{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .new-ticket-side{
        position:static!important;
        width:auto!important;
    }

    .refined-overview-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .refined-main-column,
    #dashboard-side-column{
        min-width:0!important;
    }

    .catalog-compact-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

/* Mobile navigation + global shell */
@media(max-width:900px){
    :root{
        --mobile-page-pad:14px;
        --mobile-top-space:66px;
    }

    body{
        min-width:0!important;
    }

    body.mobile-nav-open{
        overflow:hidden!important;
    }

    .app{
        display:block!important;
        min-height:100vh!important;
    }

    .main,
    .dashboard-main{
        width:100%!important;
        min-width:0!important;
        margin-left:0!important;
        padding-left:0!important;
    }

    .content,
    .refined-dashboard,
    .simple-user-dashboard,
    .new-ticket-content,
    .admin-compact-page,
    .report-content,
    .ticket-content{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:
            var(--mobile-top-space)
            var(--mobile-page-pad)
            28px!important;
        box-sizing:border-box!important;
    }

    .breadcrumb{
        margin-top:0!important;
        margin-bottom:12px!important;
        white-space:normal!important;
        overflow-wrap:anywhere;
    }

    /* Off-canvas menu */
    .portal-sidebar.sidebar{
        position:fixed!important;
        top:0!important;
        bottom:0!important;
        left:0!important;
        z-index:10020!important;
        width:min(82vw,290px)!important;
        min-width:0!important;
        height:100dvh!important;
        max-height:100dvh!important;
        transform:translateX(-105%)!important;
        transition:transform .22s ease!important;
        box-shadow:0 18px 50px rgba(4,18,31,.28)!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
    }

    .portal-sidebar.sidebar.mobile-open{
        transform:translateX(0)!important;
    }

    .mobile-nav-toggle{
        position:fixed!important;
        top:12px!important;
        left:12px!important;
        z-index:10010!important;
        display:flex!important;
        width:44px!important;
        height:44px!important;
        min-height:44px!important;
        padding:10px!important;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        border:1px solid #dbe3ea!important;
        border-radius:11px!important;
        background:#fff!important;
        box-shadow:0 5px 20px rgba(28,48,68,.13)!important;
        cursor:pointer;
    }

    .mobile-nav-toggle span{
        display:block;
        width:100%;
        height:2px;
        border-radius:999px;
        background:#243d56;
    }

    .mobile-nav-close{
        position:absolute!important;
        top:10px!important;
        right:10px!important;
        display:flex!important;
        width:36px!important;
        height:36px!important;
        min-height:36px!important;
        align-items:center;
        justify-content:center;
        border:0!important;
        border-radius:9px!important;
        background:rgba(255,255,255,.08)!important;
        color:#fff!important;
        font-size:26px!important;
        line-height:1!important;
        cursor:pointer;
    }

    .mobile-nav-backdrop:not([hidden]){
        position:fixed!important;
        inset:0!important;
        z-index:10015!important;
        display:block!important;
        background:rgba(11,26,40,.46)!important;
        backdrop-filter:blur(2px);
    }

    .portal-sidebar .brand{
        position:relative!important;
        padding-right:42px!important;
    }

    .portal-sidebar .sidebar-account{
        margin-top:auto!important;
    }

    /* Headings/actions */
    .refined-head,
    .simple-user-head,
    .new-ticket-heading,
    .compact-page-head,
    .report-heading,
    .ticket-header{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:12px!important;
    }

    .refined-head-actions,
    .head-actions,
    .report-heading > div:last-child,
    .ticket-header-actions{
        width:100%!important;
        display:flex!important;
        flex-wrap:wrap!important;
        gap:8px!important;
    }

    .refined-head-actions .btn,
    .head-actions .btn,
    .simple-new-ticket,
    .report-export-button{
        min-height:44px!important;
    }

    h1{
        overflow-wrap:anywhere;
    }

    /* Touch targets */
    .btn,
    button,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"]{
        min-height:44px;
    }

    textarea{
        min-height:96px;
    }

    input,
    select,
    textarea{
        font-size:16px!important; /* prevents iOS zoom */
    }

    /* Dashboard */
    .refined-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:9px!important;
    }

    .refined-kpi{
        min-width:0!important;
        min-height:104px!important;
        padding:13px!important;
    }

    .refined-report-grid,
    .refined-overview-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:12px!important;
    }

    #dashboard-category-card,
    #dashboard-workload-card,
    #dashboard-carico-card,
    #dashboard-chronology-card{
        width:100%!important;
        height:auto!important;
        max-height:none!important;
    }

    #dashboard-workload-card .assignee-workload-list,
    #dashboard-chronology-card .activity-refined-list{
        max-height:320px!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch;
    }

    .refined-ticket-row{
        position:relative!important;
        display:grid!important;
        grid-template-columns:auto minmax(0,1fr)!important;
        gap:9px 11px!important;
        padding:13px!important;
    }

    .ticket-number-block{
        grid-column:1!important;
        grid-row:1 / span 2!important;
    }

    .refined-ticket-main{
        grid-column:2!important;
        min-width:0!important;
    }

    .refined-ticket-state{
        grid-column:2!important;
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        flex-wrap:wrap!important;
        gap:7px!important;
    }

    .ticket-open-button{
        margin-left:auto!important;
    }

    .ticket-row-delete{
        position:absolute!important;
        right:10px!important;
        bottom:9px!important;
    }

    /* User dashboard — priority mobile experience */
    .simple-user-dashboard{
        padding-top:72px!important;
    }

    .simple-user-head{
        margin-bottom:15px!important;
    }

    .simple-user-head h1{
        font-size:26px!important;
        line-height:1.15!important;
    }

    .simple-user-head p{
        font-size:14px!important;
        line-height:1.5!important;
    }

    .simple-new-ticket{
        width:100%!important;
        justify-content:center!important;
        min-height:50px!important;
        font-size:15px!important;
    }

    .simple-user-summary{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:7px!important;
    }

    .simple-summary-card,
    .simple-user-summary > div{
        min-width:0!important;
        padding:11px 8px!important;
        text-align:center!important;
    }

    .simple-user-summary strong{
        font-size:23px!important;
    }

    .simple-user-summary small{
        display:none!important;
    }

    .user-ticket-card .refined-card-head{
        padding:13px!important;
    }

    .user-ticket-card .refined-ticket-row{
        border-radius:0!important;
    }

    /* New ticket */
    .new-ticket-layout{
        display:block!important;
    }

    .new-ticket-main,
    .new-ticket-side{
        width:100%!important;
        min-width:0!important;
    }

    .new-ticket-side{
        margin-top:12px!important;
    }

    .panel,
    .refined-card{
        border-radius:10px!important;
    }

    .ticket-form-grid,
    .requester-profile-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .requester-profile-wide,
    .compact-form-wide{
        grid-column:1!important;
    }

    .new-ticket-submit-row{
        position:sticky!important;
        bottom:0!important;
        z-index:20!important;
        display:grid!important;
        grid-template-columns:1fr 1.25fr!important;
        gap:8px!important;
        margin:16px calc(var(--mobile-page-pad) * -1) -28px!important;
        padding:10px var(--mobile-page-pad) calc(10px + env(safe-area-inset-bottom))!important;
        background:rgba(255,255,255,.96)!important;
        border-top:1px solid #dfe6ed!important;
        box-shadow:0 -5px 18px rgba(28,48,68,.08)!important;
        backdrop-filter:blur(8px);
    }

    .new-ticket-submit-row .btn{
        width:100%!important;
        min-height:48px!important;
        justify-content:center!important;
    }

    .upload-area{
        padding:20px 14px!important;
    }

    /* Ticket detail */
    .ticket-layout,
    .ticket-detail-layout,
    .ticket-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .ticket-sidebar{
        width:100%!important;
        position:static!important;
    }

    .comment,
    .history-row,
    .attachment-row,
    .participant,
    .participant-full-row{
        overflow-wrap:anywhere;
    }

    /* Users */
    .mini-kpi-row,
    .users-stats{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .compact-toolbar{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:9px!important;
    }

    .compact-search{
        width:100%!important;
    }

    .compact-filter-chips{
        display:flex!important;
        width:100%!important;
        gap:6px!important;
        overflow-x:auto!important;
        padding-bottom:3px!important;
        -webkit-overflow-scrolling:touch;
    }

    .filter-chip{
        flex:0 0 auto!important;
    }

    .compact-user-row{
        display:grid!important;
        grid-template-columns:44px minmax(0,1fr) auto!important;
        gap:9px 10px!important;
        padding:13px!important;
    }

    .compact-avatar{
        grid-column:1!important;
        grid-row:1!important;
    }

    .compact-user-main{
        grid-column:2!important;
        grid-row:1!important;
    }

    .compact-user-groups{
        grid-column:1 / 3!important;
        grid-row:2!important;
        padding-left:54px!important;
    }

    .compact-user-location{
        grid-column:1 / 3!important;
        grid-row:3!important;
        padding-left:54px!important;
        min-width:0!important;
    }

    .compact-user-row > .row-icon-button{
        grid-column:3!important;
        grid-row:1!important;
    }

    /* Catalog */
    .catalog-compact-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .catalog-category-head,
    .catalog-title-line,
    .catalog-head-buttons{
        flex-wrap:wrap!important;
    }

    .catalog-item-row,
    .compact-location-row{
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:9px!important;
    }

    .compact-tabs{
        overflow-x:auto!important;
        white-space:nowrap!important;
        -webkit-overflow-scrolling:touch;
    }

    /* Modals */
    .modal-backdrop{
        align-items:flex-end!important;
        padding:0!important;
    }

    .modal-card,
    .admin-modal,
    .admin-modal-small{
        width:100%!important;
        max-width:none!important;
        max-height:92dvh!important;
        margin:0!important;
        border-radius:16px 16px 0 0!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch;
    }

    .modal-body.compact-form-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .modal-footer,
    .user-edit-footer{
        position:sticky!important;
        bottom:0!important;
        z-index:2!important;
        background:#fff!important;
        padding-bottom:calc(12px + env(safe-area-inset-bottom))!important;
    }

    /* Reports / communications */
    .report-filter-grid,
    .mail-config-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .report-filter-actions,
    .mail-queue-toolbar,
    .mail-queue-actions,
    .mail-queue-selection{
        width:100%!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:8px!important;
    }

    .mail-queue-actions .btn,
    .report-filter-actions .btn{
        width:100%!important;
    }

    .report-table-wrap{
        width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
    }

    .report-table{
        min-width:760px!important;
    }
}

/* Small phones */
@media(max-width:520px){
    :root{
        --mobile-page-pad:11px;
    }

    .refined-kpis{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .refined-kpi{
        min-height:86px!important;
    }

    .simple-user-summary{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }

    .simple-summary-card,
    .simple-user-summary > div{
        padding:10px 5px!important;
    }

    .simple-user-summary span{
        font-size:9px!important;
    }

    .simple-user-summary strong{
        font-size:21px!important;
    }

    .mini-kpi-row,
    .users-stats{
        grid-template-columns:1fr 1fr!important;
    }

    .refined-ticket-row{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .ticket-number-block,
    .refined-ticket-main,
    .refined-ticket-state{
        grid-column:1!important;
        grid-row:auto!important;
    }

    .ticket-number-block{
        width:max-content!important;
    }

    .ticket-open-button{
        margin-left:0!important;
        width:100%!important;
        min-height:42px!important;
        justify-content:center!important;
    }

    .ticket-row-delete{
        position:static!important;
        grid-column:1!important;
        justify-self:end!important;
    }

    .new-ticket-submit-row{
        grid-template-columns:1fr!important;
    }

    .compact-user-row{
        grid-template-columns:40px minmax(0,1fr) auto!important;
    }

    .compact-user-groups,
    .compact-user-location{
        padding-left:50px!important;
    }

    .user-edit-footer,
    .user-edit-footer-right{
        flex-direction:column!important;
        align-items:stretch!important;
        width:100%!important;
    }

    .user-edit-footer .btn,
    .user-edit-footer-right .btn{
        width:100%!important;
    }
}

/* Safe area for modern phones */
@supports(padding:max(0px)){
    @media(max-width:900px){
        .mobile-nav-toggle{
            top:max(12px,env(safe-area-inset-top))!important;
            left:max(12px,env(safe-area-inset-left))!important;
        }

        .portal-sidebar.sidebar{
            padding-bottom:env(safe-area-inset-bottom)!important;
        }
    }
}