/* =============================================
   Permissions widget – wider select boxes,
   narrower label column, proper chooser buttons.
   Targets Jazzmin / Bootstrap layout.
   ============================================= */

/* ── 1. Reduce label column ── */
.field-user_permissions > label.col-sm-3,
.field-groups > label.col-sm-3,
.field-permissions > label.col-sm-3 {
    flex: 0 0 10% !important;
    max-width: 10% !important;
    font-size: 0.82rem;
    padding-right: 4px !important;
}

/* ── 2. Expand widget column ── */
.field-user_permissions > .col-sm-9,
.field-groups > .col-sm-9,
.field-permissions > .col-sm-9 {
    flex: 0 0 90% !important;
    max-width: 90% !important;
}

/* ── 3. Selector root: flex layout ── */
.field-user_permissions .selector,
.field-groups .selector,
.field-permissions .selector {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

/* ── 4. Available and Chosen panels ── */
.field-user_permissions .selector-available,
.field-user_permissions .selector-chosen,
.field-groups .selector-available,
.field-groups .selector-chosen,
.field-permissions .selector-available,
.field-permissions .selector-chosen {
    flex: 1 1 44% !important;
    width: 44% !important;
    min-width: 0 !important;
}

/* ── 5. Select boxes: taller and full width ── */
.field-user_permissions select.filtered,
.field-groups select.filtered,
.field-permissions select.filtered {
    width: 100% !important;
    min-height: 300px !important;
    font-size: 0.80rem;
}

/* ── 6. Chooser column (arrows): compact, non-overlapping ── */
.field-user_permissions .selector-chooser,
.field-groups .selector-chooser,
.field-permissions .selector-chooser {
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 0 2px !important;
    margin: 0 4px;
}

/* Chooser buttons styling */
.field-user_permissions .selector-chooser a,
.field-groups .selector-chooser a,
.field-permissions .selector-chooser a {
    display: block;
    width: 28px;
    height: 28px;
}

/* ── 7. Filter input ── */
.field-user_permissions .selector-filter input,
.field-groups .selector-filter input,
.field-permissions .selector-filter input {
    width: 100% !important;
    box-sizing: border-box;
}

/* ── 8. Header labels compact ── */
.field-user_permissions .selector h2,
.field-groups .selector h2,
.field-permissions .selector h2 {
    font-size: 0.78rem;
    padding: 5px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 9. Help text ── */
.field-user_permissions .help-block,
.field-groups .help-block,
.field-permissions .help-block {
    font-size: 0.75rem;
    color: #777;
    margin-top: 6px;
}

/* =============================================
   Sticky Table Headers for Admin List Views
   ============================================= */

/* Ridurre spaziatura verticale globale per compattare la maschera */
body.change-list .content-header {
    padding: 0 0.5rem !important; /* Ancora più compatto */
}
body.change-list .content-header h1 {
    font-size: 1.3rem !important;
    margin: 0 !important;
}
body.change-list #change-list-filters {
    padding-bottom: 0.2rem !important;
}
body.change-list .card-body {
    padding: 0.2rem !important;
}
body.change-list .card-body.table-responsive {
    padding: 0 !important; /* Forza zero padding se è il contenitore scrollabile */
}
body.change-list .change-list-actions {
    padding-bottom: 0 !important;
    margin-bottom: 0.2rem !important;
}
body.change-list #changelist-search {
    margin-bottom: 2px !important;
}
body.change-list .actions {
    padding: 2px 0 !important;
    margin-bottom: 0 !important;
}

/* We ensure the table container is scrollable and doesn't overflow the screen */
.table-responsive {
    max-height: calc(100vh - 220px) !important; /* height adjusted for max compactness */
    overflow-y: auto !important;
    padding: 0 !important; /* RIMUOVE IL GAP */
    margin: 0 !important;
}

table#result_list, .table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important; /* Previene gap da border-spacing */
    border-spacing: 0 !important;
}

/* The table headers stay stuck at the top of the scrolling table */
table#result_list thead th,
.table thead th {
    position: sticky !important;
    top: -1px !important; /* Spinge la testata 1px in alto per coprire qualsiasi bordo */
    z-index: 999 !important; /* Assicura che resti sempre sopra le righe */
    background-color: #f4f6f9 !important; /* Colore solido di sfondo, non trasparente */
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1) !important;
    border-top: none !important; /* Rimuove bordi che creano gap */
    outline: 1px solid #f4f6f9; /* Copre eventuali microscopici gap */
}

/* Fix per evitare che lo sfondo trasparente lasci vedere le righe */
table#result_list thead tr,
.table thead tr {
    background-color: #f4f6f9 !important;
}

[data-theme="dark"] table#result_list thead th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] table#result_list thead tr,
[data-theme="dark"] .table thead tr {
    background-color: #343a40 !important;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.1) !important;
    outline: 1px solid #343a40;
}