/* ==========================================================================
   F4M LIST construct - neutral structural skin (theme via CSS variables).
   PrimisWeb-specific look refinements live in resource/css (override layer).
   ========================================================================== */

.F4M_LIST{ width:100%; display:block; }
.F4M_LIST .button{ cursor:pointer; user-select:none; }
.F4M_LIST .button.disabled{ opacity:.45; pointer-events:none; }

/* ---- search bar ---- */
.F4M_LIST_SEARCHBAR{
    display:flex; flex-direction:row; align-items:stretch; gap:var(--margin2);
    width:100%;
}
.F4M_LIST_SEARCH_INPUT{ position:relative; flex:1 1 auto; /*display:flex;*/ }
.F4M_LIST_SEARCH_INPUT input[type=text]{
    width:100%; height:52px; margin:0;
    border-radius:var(--radius1); padding:0 52px 0 var(--margin3);
    background:var(--bianco1); border:1px solid var(--nero6);
}
.F4M_LIST_SEARCH_ICON{
    position:absolute; right:6px; top:6px; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--colore2); color:var(--nero0);
}
.F4M_LIST_SEARCH_ICON:hover{ background:var(--colore1); color:var(--bianco0); }

.F4M_LIST_BTN_FILTERS{
    display:flex; align-items:center; gap:var(--margin1);
    height:52px; padding:0 26px; border-radius:var(--radius1);
    background:var(--bianco1); color:var(--nero0); font-weight:500;
    white-space:nowrap;
}
.F4M_LIST_BTN_FILTERS:hover,
.F4M_LIST_BTN_FILTERS.active{ background:var(--colore1); color:var(--bianco0); }

/* ---- filter panel (collapsible) ---- */
.F4M_LIST_FILTERPANEL{
    display:none; width:100%;
    margin-top:var(--margin2); /*padding-top:var(--margin2);*/
    /*border-top:1px solid var(--dash-filter-border);*/
}
.F4M_LIST_FILTERPANEL_TITLE{
    font-size:var(--font-size2); font-weight:700; color:var(--nero1);
    margin-bottom:var(--margin2);
}
.F4M_LIST_PANEL_ACTIONS{
    display:flex; justify-content:flex-end; gap:var(--margin2);
    margin-top:var(--margin2);
}
.F4M_LIST_BTN_APPLY,
.F4M_LIST_BTN_RESET{
    display:flex; align-items:center; gap:var(--margin1);
    height:44px; padding:0 24px; border-radius:var(--radius1); font-weight:500;
}
.F4M_LIST_BTN_RESET{ background:var(--bianco1); color:var(--nero0); }
.F4M_LIST_BTN_RESET:hover{ background:var(--nero6); }
.F4M_LIST_BTN_APPLY{ background:var(--colore2); color:var(--nero0); }
.F4M_LIST_BTN_APPLY:hover{ background:var(--colore1); color:var(--bianco0); }

/* ---- active filter chips ---- */
.F4M_LIST_CHIPS{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--margin1);
    margin-top:var(--margin2);
}
.F4M_LIST_CHIP{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--bianco1); color:var(--nero1);
    border:1px solid var(--nero6);
    padding:4px 12px; border-radius:var(--radius1); font-size:var(--font-size0);
}
.F4M_LIST_CHIP_X{ cursor:pointer; color:var(--nero2); }
.F4M_LIST_CHIP_X:hover{ color:var(--color-servizio-civile); }
.F4M_LIST_CHIP_CLEAR{
    cursor:pointer; color:var(--colore1); font-size:var(--font-size0);
    font-weight:600; text-decoration:underline; margin-left:var(--margin1);
}

/* ---- toolbar ---- */
.F4M_LIST_TOOLBAR{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--margin2); margin-top:var(--margin1); flex-wrap:wrap;
}
.F4M_LIST_TOOLBAR_LEFT,
.F4M_LIST_TOOLBAR_RIGHT{ display:flex; align-items:center; gap:var(--margin1); }
/* il blocco destro va a capo invece di sforare il F4M_LIST_BOX:
   quando manca spazio il VIEW_TOGGLE scende sotto il bottone Colonne */
.F4M_LIST_TOOLBAR_RIGHT{ flex-wrap:wrap; justify-content:flex-end; }
.F4M_LIST_GLOBAL_WRAP{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.F4M_LIST_TOTAL{
    display:inline-flex; align-items:center;
    background:var(--color-soci-light); border:1px solid #ffe69c;
    padding:6px 16px; border-radius:var(--radius1); font-size:var(--font-size1);
}
.F4M_LIST_TOTAL .F4M_LIST_GLOBAL_WRAP{ margin-right:8px; }
.F4M_LIST_TOTAL .value{ font-weight:700; }
.F4M_LIST_BULK > .F4M_LIST_QUICK { display:flex; align-items:center; gap:var(--margin1); }
.F4M_LIST_TOOLBAR .button{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:var(--bianco1); color:var(--nero0);
}
.F4M_LIST_TOOLBAR .button:hover{ background:var(--colore1); color:var(--bianco0); }
.F4M_LIST_TOOLBAR .button.active{ background:var(--colore1); color:var(--bianco0); }

/* ---- results ---- */
.F4M_LIST_RESULTS{ width:100%; margin-top:var(--margin1); }
.F4M_LIST_GRID{ width:100%; min-height:120px; }
.F4M_LIST_EMPTY,
.F4M_LIST_ERROR,
.F4M_LIST_PROMPT{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--margin2); padding:var(--margin4) var(--margin3); text-align:center;
    color:var(--nero2);
}
.F4M_LIST_EMPTY i,
.F4M_LIST_ERROR i,
.F4M_LIST_PROMPT i{ font-size:48px; color:var(--colore2); }
.F4M_LIST_ERROR i{ color:var(--color-servizio-civile); }

/* ---- cards ---- */
.F4M_LIST_CARDS{
    display:grid; gap:var(--margin3);
    grid-template-columns:repeat(var(--f4m-card-cols,2),minmax(0,1fr));
}
.F4M_LIST_CARD{
    position:relative;
    background:var(--bianco0); border:none;
    border-radius:var(--radius2); padding:var(--margin3); cursor:pointer;
    box-shadow:var(--box-shadow1); transition:var(--transition0);
}
.F4M_LIST_CARD:hover{ background:var(--colore1); color:var(--bianco0); }
/* selection checkbox: top-right, above card content, never overlapping it */
.F4M_LIST_CARD_CHK_WRAP{
    position:absolute; top:10px; right:10px; z-index:3;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--bianco0); border-radius:50%; padding:1px;
}
.F4M_LIST_CARD{ padding-right:calc(var(--margin3) + 28px); }

/* ---- pager (prev/next only; page-size selector lives in the top toolbar) ---- */
.F4M_LIST_PAGER{
    display:flex; align-items:center; justify-content:center;
    gap:var(--margin2); margin-top:var(--margin3); flex-wrap:wrap;
}
.F4M_LIST_PAGESIZE{ display:flex; align-items:center; gap:var(--margin1); white-space:nowrap; }
.F4M_LIST_PAGESIZE_SEL{ width:auto; min-width:90px; }
.F4M_LIST_GROUPBY{ display:flex; align-items:center; gap:var(--margin1); white-space:nowrap; }
.F4M_LIST_GROUPBY_SEL{ width:auto; min-width:140px; }
.F4M_LIST_PAGES{ display:flex; align-items:center; gap:var(--margin2); }
.F4M_LIST_PAGES .button{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:var(--bianco1); color:var(--nero0);
}
.F4M_LIST_PAGES .button:hover{ background:var(--colore1); color:var(--bianco0); }
.F4M_LIST_PAGE_INFO{ font-size:var(--font-size1); color:var(--nero1); min-width:64px; text-align:center; }

/* ---- column chooser modal ---- */
.F4M_LIST_COLS_CHOOSER{ text-align:left; }
.F4M_LIST_COLS_TITLE{ font-weight:700; margin-bottom:var(--margin2); }
.F4M_LIST_COL_OPT{ display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; }

/* ---- grouped view ---- */
/* Per-group accent color via the --f4m-group-color custom property (set inline from
   the <group color="..."> attribute). Falls back to the celeste brand color (--colore1). */
.F4M_LIST_GROUPS{ display:flex; flex-direction:column; gap:var(--margin3); }
.F4M_LIST_GROUP{
    /* accent: set --f4m-group-* inline (palette -> --color-<name>-*, or a single --f4m-group-color).
       Light/extra-light/dark default to tints derived from --f4m-group-color via color-mix. */
    --f4m-group-color:var(--colore1);
    --f4m-group-dark:var(--f4m-group-color);
    --f4m-group-light:color-mix(in srgb, var(--f4m-group-color) 22%, #fff);
    --f4m-group-extra-light:color-mix(in srgb, var(--f4m-group-color) 7%, #fff);
    border:1px solid var(--f4m-group-light);
    border-radius:8px; overflow:hidden; background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.03);
}
.F4M_LIST_GROUP_HEAD{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--margin2); padding:8px 15px; cursor:pointer; user-select:none;
    background:linear-gradient(90deg, var(--f4m-group-light) 0%, var(--f4m-group-extra-light) 100%);
    border-bottom:1px solid var(--f4m-group-light);
}
.F4M_LIST_GROUP_TITLE{
    display:flex; align-items:center; gap:12px;
    font-weight:700; font-size:1.05em; text-transform:uppercase;
    color:var(--f4m-group-dark);
}
.F4M_LIST_GROUP_TITLE i{ font-size:1.2em; }
.F4M_LIST_GROUP_LEFT{ display:flex; align-items:center; gap:14px; min-width:0; }
.F4M_LIST_GROUP_RIGHT{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.F4M_LIST_GROUP_BADGE{
    background:var(--f4m-group-dark); color:#fff;
    font-size:.9em; font-weight:700; padding:5px 12px; border-radius:8px !important;
}
/* selection variant: holds the per-table select-all checkbox + sel/total counter */
.F4M_LIST_GROUP_BADGE_SEL{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 6px; }
.F4M_LIST_GROUP_BADGE_SEL .F4M_LIST_GCHK_ALL_WRAP{ margin:0; }
.F4M_LIST_GROUP_BADGE_SEL .F4M_LIST_GROUP_SELINFO{ color:#fff; font-weight:700; font-size:1em; }
.F4M_LIST_GROUP_CHEVRON{ display:inline-flex; transition:transform .2s; color:var(--f4m-group-dark); }
.F4M_LIST_GROUP.collapsed .F4M_LIST_GROUP_CHEVRON{ transform:rotate(-90deg); }
.F4M_LIST_GROUP_BODY{ background:#fff; }
/* footer strip: repeats the selection badge + pager below the content, same
   accent gradient/layout as the head but with a top border. */
.F4M_LIST_GROUP_FOOT{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--margin2); padding:8px 15px;
    background:linear-gradient(90deg, var(--f4m-group-light) 0%, var(--f4m-group-extra-light) 100%);
    border-top:1px solid var(--f4m-group-light);
}
/* Dashboard-style template table: fixed layout; scroll orizzontale se le colonne non entrano (vedi sezione RESPONSIVE) */
.F4M_LIST_GROUP_TABLE{ width:100%; }
.F4M_LIST_GROUP_TABLE table{ table-layout:fixed; width:100%; border-collapse:collapse; background:#fff; margin-bottom:0; }
.F4M_LIST_GROUP_TABLE thead{ background:#f8f9fa; }
.F4M_LIST_GROUP_TABLE th{
    font-size:.85em; text-transform:uppercase; letter-spacing:.5px;
    padding:12px 15px; border-bottom:2px solid #dee2e6; text-align:left; vertical-align:middle;
}
.F4M_LIST_GROUP_TABLE td{ font-size:.95em; vertical-align:middle; padding:12px 15px; word-wrap:break-word; overflow-wrap:break-word; }
.F4M_LIST_GROUP_TABLE tbody tr{ border-bottom:1px solid #eaebec; cursor:pointer; }
.F4M_LIST_GROUP_TABLE tbody tr:last-child{ border-bottom:none; }
/* secondary row: extra/secondary columns rendered full-width under the main row */
.F4M_LIST_GROUP_TABLE tbody tr:has(+ .F4M_LIST_GROUP_SUBROW){ border-bottom:none; }
.F4M_LIST_GROUP_SUBROW{ cursor:pointer; }
.F4M_LIST_GROUP_SUBROW > td{ padding:0 15px 12px 15px; border-bottom:1px solid #eaebec; background:#fff; }
/* unified hover: a record's main row and its secondary row highlight as one */
.F4M_LIST_GROUP_TABLE tbody tr:hover{ background:#f3f4f6; }
.F4M_LIST_GROUP_TABLE tbody tr:hover + .F4M_LIST_GROUP_SUBROW > td{ background:#f3f4f6; }
.F4M_LIST_GROUP_TABLE tbody tr:has(+ .F4M_LIST_GROUP_SUBROW:hover){ background:#f3f4f6; }
.F4M_LIST_GROUP_SUBROW:hover > td{ background:#f3f4f6; }
/* selection checkbox column — same round SVG check used across the gestionale grids */
.F4M_LIST_GCHK_COL,.F4M_LIST_GCHK_CELL{ width:30px; text-align:center; }
.F4M_LIST_GCHK,.F4M_LIST_GCHK_ALL,.F4M_LIST_GPAGE_ALL,.F4M_LIST_CARD_CHK,.F4M_LIST_GLOBAL_CHK{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:24px; height:24px; cursor:pointer; margin:0; vertical-align:middle; flex:0 0 auto;
    background:url('/resource/radio_off.svg') no-repeat center; background-size:contain;
}
/* override form/checkbox.css `label > input[type=checkbox]{display:none}` (specificity 0,1,2):
   our select-all boxes are wrapped in <label>, so restore them with higher specificity. */
.F4M_LIST_GCHK_ALL_WRAP > input[type="checkbox"],
.F4M_LIST_GLOBAL_WRAP > input[type="checkbox"],
.F4M_LIST_CARD_CHK_WRAP > input[type="checkbox"]{ display:inline-block; }
.F4M_LIST_GCHK:checked,.F4M_LIST_GCHK_ALL:checked,.F4M_LIST_GPAGE_ALL:checked,
.F4M_LIST_CARD_CHK:checked,.F4M_LIST_GLOBAL_CHK:checked{ background-image:url('/resource/check_on.svg'); }
/* tri-state "mixed": global (view) + per-table select-all + per-page header select-all */
.F4M_LIST_GCHK_ALL:indeterminate,.F4M_LIST_GPAGE_ALL:indeterminate,.F4M_LIST_GLOBAL_CHK:indeterminate{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23217346'/><rect x='6' y='10.5' width='12' height='3' rx='1.5' fill='%23fff'/></svg>");
}
/* collapser toggle: reuse Dashboard widget (form.css div[f4m_collapser]) but inline in the header */
.F4M_LIST_GROUP_TOGGLE{ float:none; display:inline-flex; align-items:center; }
.F4M_LIST_GROUP_TOGGLE div[opener],
.F4M_LIST_GROUP_TOGGLE div[closer]{ display:inline-flex; align-items:center; font-size:1.1em; }
.dash-subrow{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px 18px; font-size:.9em; color:var(--nero1,#6c757d); }
.dash-subrow-label{
    font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.8em;
    white-space:nowrap; padding-top:4px; color:var(--nero1,#000000);
}
/* one labelled segment per secondary-row datum (Lista_Quote: misericordia, modalità incasso, ...) */
.dash-subrow-item{ display:inline-flex; align-items:baseline; gap:6px; }
.dash-subrow-item .dash-subrow-label{ padding-top:0; }
/* stacked variant: one datum per line (Lista_Quote) */
.dash-subrow.dash-subrow-stack{ flex-direction:column; gap:3px; }
.dash-subrow.dash-subrow-stack .dash-subrow-item{ width:100%; }
/* stacked cell helpers (secondary line under the main value) */
.F4M_LIST_GROUP_TABLE .dash-cell-sub{ font-size:.95em; color:var(--nero1,#6c757d); margin-top:2px; }
.F4M_LIST_GROUP_TABLE .dash-cell-line{ display:flex; align-items:center; gap:6px; min-width:0; word-break:break-word; }
.F4M_LIST_GROUP_TABLE .dash-cell-line i{ flex:0 0 auto; }
.F4M_LIST_GROUP_TABLE .dash-cell-line + .dash-cell-line{ margin-top:3px; }
.F4M_LIST_GROUP_TABLE .dash-cell-line i{ color:var(--colore1); }
/* multi-misericordia: main bold, others normal on the lines below */
.dash-mise-line{ line-height:1.35; }
.dash-mise-main{ font-weight:700; }
.dash-mise-other{ color:var(--nero1,#6c757d); }
/* anno inizio: one year per line, aligned with the misericordie rows */
.dash-anno-line{ line-height:1.35; font-weight:400; }
.dash-anno-main{ font-weight:700; }
.dash-anno-other{ font-weight:400; }
/* incarichi pills wrap inside the cell */
.dash-incarichi-cell{ display:flex; flex-wrap:wrap; gap:2px; }
/* cards inside a group keep their grid, with padding */
.F4M_LIST_GROUP_CONTENT.F4M_LIST_CARDS{ display:grid; gap:var(--margin3); padding:var(--margin3); }
/* vista card raggruppata: le card su grigio di default (niente pannello bianco tra le card),
   lo shadow sotto ogni card resta */
.F4M_LIST_GROUP:has(.F4M_LIST_GROUP_CONTENT.F4M_LIST_CARDS){ background:transparent; border:none; box-shadow:none; }
.F4M_LIST_GROUP_BODY:has(.F4M_LIST_CARDS){ background:transparent; }
.F4M_LIST_GCHK_ALL_WRAP{ display:inline-flex; align-items:center; cursor:pointer; }
.F4M_LIST_GROUP_SELINFO{ font-size:var(--font-size1); color:var(--nero1); font-weight:600; }
/* per-group pager — inline in the colored head, buttons only */
.F4M_LIST_GROUP_PAGER{
    display:inline-flex; align-items:center;
    gap:6px; padding:0;
}
.F4M_LIST_GROUP_PAGER .button{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background:var(--bianco0); color:var(--f4m-group-dark);
}
.F4M_LIST_GROUP_PAGER .button:hover{ background:var(--f4m-group-dark); color:var(--bianco0); }
.F4M_LIST_GROUP_PAGER .button.disabled{ opacity:.4; pointer-events:none; }
.F4M_LIST_GROUP_PAGE_INFO{ font-size:var(--font-size1); color:var(--f4m-group-dark); font-weight:600; min-width:48px; text-align:center; }

/* ==========================================================================
   RESPONSIVE
   - cards: column count degrades by breakpoint (large -> 2 -> 1)
   - tables: no horizontal scroll on desktop; scroll enabled on small screens
   - toolbar: stacks and wraps on small screens
   ========================================================================== */

/* tables: scroll orizzontale quando le colonne non entrano (anche desktop).
   width:100% mantiene fluide le liste con colonne in % (riempiono il contenitore);
   min-width:max-content = larghezza intrinseca (somma delle width px in table-layout
   fixed): quando supera il contenitore il wrapper scrolla invece di comprimere. */
.F4M_LIST_GROUP_TABLE{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.F4M_LIST_GROUP_TABLE table{ width:100%; min-width:0; }

/* tablet: cap cards at 2 columns */
@media only screen and (max-width:1200px){
    .F4M_LIST_CARDS,
    .F4M_LIST_GROUP_CONTENT.F4M_LIST_CARDS{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* small / mobile */
@media only screen and (max-width:767px){
    .F4M_LIST_SEARCHBAR{ flex-direction:column; }
    .F4M_LIST_BTN_FILTERS{ width:100%; justify-content:center; }

    /* cards: single column (or the per-list mobile override) */
    .F4M_LIST_CARDS,
    .F4M_LIST_GROUP_CONTENT.F4M_LIST_CARDS{ grid-template-columns:repeat(var(--f4m-card-cols-mobile,1),minmax(0,1fr)); }

    /* toolbar: stack the two sides, let buttons wrap, full-width rows */
    .F4M_LIST_TOOLBAR{ flex-direction:column; align-items:stretch; }
    .F4M_LIST_TOOLBAR_LEFT,
    .F4M_LIST_TOOLBAR_RIGHT{ width:100%; flex-wrap:wrap; justify-content:flex-start; }
    .F4M_LIST_TOOLBAR_RIGHT{ justify-content:flex-end; }
    .F4M_LIST_BULK{ margin-left:0; flex-wrap:wrap; }
    .F4M_LIST_PAGER{ flex-direction:column; align-items:stretch; gap:var(--margin2); }

    /* tables: scroll orizzontale (gia' attivo da desktop). Floor 760px ma senza
       comprimere le tabelle a colonne fisse piu' larghe (max delle due). */
    .F4M_LIST_GROUP_TABLE{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .F4M_LIST_GROUP_TABLE table{ min-width:760px; }
    .F4M_LIST_GRID{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .F4M_LIST_GRID > div[f4m_type="GRID"]{ min-width:760px; }

    /* toolbar page-size selector: keep on its own row, full width */
    .F4M_LIST_PAGESIZE{ width:100%; justify-content:flex-start; }
    .F4M_LIST_GROUPBY{ width:100%; justify-content:flex-start; }

    /* testata gruppo: impila i due lati -> RIGHT va sotto LEFT, entrambi a larghezza piena */
    .F4M_LIST_GROUP_HEAD{ flex-direction:column; align-items:stretch; }
    .F4M_LIST_GROUP_LEFT,
    .F4M_LIST_GROUP_RIGHT{ width:100%; }
    .F4M_LIST_GROUP_RIGHT{ justify-content:flex-start; }
}