/* =========================================================
   Mercantico - sistemazione utenti admin e responsive globale
   ========================================================= */

html,body{max-width:100%;overflow-x:hidden}
.main{min-width:0}
.panel{max-width:100%}
input,select,textarea,button,.btn{max-width:100%}

/* Utenti admin: niente tabelle con form annidati, solo schede stabili. */
.admin-users-page{width:100%;max-width:100%}
.admin-user-form{align-items:end}
.admin-users-list-panel{overflow:visible}
.admin-user-list{display:grid;grid-template-columns:1fr;gap:16px;width:100%}
.admin-user-card{
    background:linear-gradient(#fff,#f7f7f7);
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding:16px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    overflow:hidden;
}
.admin-user-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-bottom:12px;
    margin-bottom:14px;
    border-bottom:1px solid #e4e4e4;
}
.admin-user-card-head strong{display:block;font-size:19px;color:#222;line-height:1.2;overflow-wrap:anywhere}
.admin-user-card-head span{display:block;margin-top:3px;color:#666;overflow-wrap:anywhere}
.admin-role-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:6px 10px;
    border-radius:999px;
    background:#242424;
    color:#fff;
    font-style:normal;
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-user-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.admin-user-fields label{min-width:0}
.admin-active-check{
    min-height:36px;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start;
    gap:8px!important;
    padding:7px 9px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
}
.admin-created-at{display:flex;flex-direction:column;gap:5px;color:#333;font-weight:700;min-height:36px;justify-content:center}
.admin-created-at span{color:#666;font-weight:400;overflow-wrap:anywhere}
.admin-permissions-block{margin-top:14px;min-width:0}
.admin-permissions-block>b{display:block;margin-bottom:8px;color:#222}
.admin-permission-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:8px!important;
    width:100%;
}
.admin-permission-grid label{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    gap:7px!important;
    min-width:0;
    padding:8px 9px;
    border:1px solid #e0e0e0;
    border-radius:8px;
    background:#fff;
    font-size:13px;
    line-height:1.25;
}
.admin-permission-grid input{flex:0 0 auto;margin-top:1px;width:auto!important;min-height:auto!important}
.admin-permission-grid span{min-width:0;overflow-wrap:anywhere}
.admin-user-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #e4e4e4}
.admin-user-actions form{margin:0}
.admin-user-actions .btn,.admin-user-actions button{min-width:118px}
.empty-state{padding:18px;border:1px dashed #ccc;border-radius:10px;background:#fff;color:#666;font-weight:700}

/* Tabelle e form generali: prevenzione accavallamenti. */
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
main table{table-layout:auto}
main th,main td{vertical-align:top}
main td input,main td select,main td textarea{min-width:140px}
.actions{white-space:normal!important}
.actions .btn,.actions button,.actions form{margin:2px;vertical-align:middle}

@media (min-width:981px){
    .main{margin-right:224px!important;margin-left:0!important;max-width:calc(100% - 224px)!important}
    .side{right:0!important;left:auto!important;width:224px!important}
    .admin-user-card{padding:18px}
}

@media (max-width:1180px) and (min-width:981px){
    .admin-user-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-permission-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
}

@media (max-width:980px){
    html,body{width:100%;overflow-x:hidden!important}
    body{background:#f3f5f8!important}
    .mobile-topbar{display:flex!important;position:sticky!important;top:0!important;width:100%!important;z-index:10020!important}
    .main{margin:0!important;max-width:100%!important;width:100%!important;padding:12px 10px 82px!important;overflow-x:hidden!important;background:#f3f5f8!important}
    h1{margin:6px 0 12px!important;padding:10px 2px 12px!important;background:transparent!important;color:#111!important;border-bottom:0!important;text-shadow:none!important;font-size:26px!important;line-height:1.1!important}
    h1:after{content:"";display:block;width:72px;height:4px;background:#155e63;border-radius:99px;margin-top:8px}
    h2{font-size:20px!important;line-height:1.2!important}
    .panel{width:100%!important;max-width:100%!important;margin:0 0 12px!important;padding:12px!important;border-radius:13px!important;overflow:visible!important}
    .grid,.form-grid,.row,.cards,.status-strip,.module-grid,.customer-fields,.client-workflow-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;margin-left:0!important;margin-right:0!important}
    .full{grid-column:1/-1!important}
    label{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important}
    input,select,textarea{width:100%!important;min-width:0!important;font-size:16px!important}
    textarea{min-height:112px!important}
    button,.btn,input[type="submit"],input[type="button"],a.button,a.btn{min-height:42px!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important}
    .toolbar,.filters,.filterbar,.searchbar,.actions,.btn-row,.form-actions,.field-row,.form-row{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;max-width:100%!important;align-items:stretch!important}
    .toolbar>*,.filters>*,.filterbar>*,.searchbar>*,.actions>*,.btn-row>*,.form-actions>*,.field-row>*,.form-row>*{flex:1 1 100%!important;min-width:0!important;margin:0!important}

    .admin-user-card{padding:12px;border-radius:13px}
    .admin-user-card-head{display:block}
    .admin-role-badge{margin-top:8px;max-width:100%;white-space:normal;text-align:center}
    .admin-user-fields{grid-template-columns:1fr!important;gap:10px!important}
    .admin-permission-grid{grid-template-columns:1fr!important;gap:7px!important}
    .admin-permission-grid label{font-size:14px;padding:9px}
    .admin-user-actions{display:grid;grid-template-columns:1fr;gap:8px;justify-content:stretch}
    .admin-user-actions .btn,.admin-user-actions button,.admin-user-actions form{width:100%;min-width:0;margin:0}

    .table-wrap,.table-responsive{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;border-radius:12px!important;background:#fff!important}
    main table{display:table!important;width:max-content!important;min-width:100%!important;max-width:none!important;border-collapse:separate!important;border-spacing:0!important}
    main table thead{display:table-header-group!important}
    main table tbody{display:table-row-group!important}
    main table tr{display:table-row!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important}
    main table th,main table td{display:table-cell!important;min-width:110px!important;max-width:260px!important;padding:9px 10px!important;white-space:normal!important;overflow-wrap:anywhere!important;vertical-align:top!important}
    main table td input,main table td select,main table td textarea{min-width:160px!important}
    main table td.actions,main table td:last-child{min-width:170px!important;max-width:240px!important}

    .side{width:min(90vw,340px)!important;right:0!important;left:auto!important;transform:translate3d(110%,0,0)!important;z-index:10030!important}
    body.menu-open .side{transform:translate3d(0,0,0)!important}
    .side-backdrop{z-index:10025!important}
}

@media (max-width:420px){
    .main{padding-left:8px!important;padding-right:8px!important}
    h1{font-size:24px!important}
    .panel{padding:10px!important}
    main table th,main table td{min-width:96px!important;max-width:220px!important;padding:8px!important}
    main table td input,main table td select,main table td textarea{min-width:150px!important}
}