/* Flexible tables ("testing tables"). Token-driven; tokens.css owns :root. */

.flexi-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.flexi-head h1{margin:0}

.flexi-panel{display:grid;gap:var(--space-2);margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--r-3);background:#fff}
.flexi-panel.is-collapsed{display:none}
/* The GET form is a plain child of the panel div (the POST manage forms live
   beside it in the Views section); it keeps the panel's internal grid. */
.flexi-filter-form{display:grid;gap:var(--space-2);min-width:0;width:100%}

.flexi-section{box-sizing:border-box;min-width:0;border:1px solid var(--border);border-radius:var(--r-2);background:var(--panel);padding:0}
.flexi-section > summary{cursor:pointer;padding:var(--space-2) var(--space-3);font-weight:600;color:var(--ink);user-select:none;list-style:revert;align-items:center;gap:var(--space-2)}
.flexi-section > summary::after{content:"";display:block;clear:both}
.flexi-section[open] > summary{border-bottom:1px solid var(--border)}
.flexi-section > .form-grid,
.flexi-section > .flexi-filter-segments,
.flexi-section > .flexi-sort-grid,
.flexi-section > .help,
.flexi-section > .flexi-view-manage,
.flexi-section > .flexi-views-grid{padding:var(--space-2) var(--space-3)}
/* Nested subsections (e.g. Manage views inside Views) inset within the parent. */
.flexi-section > .flexi-section{margin:0 var(--space-3) var(--space-2)}

.flexi-sort-grid{display:grid;gap:var(--space-2) var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){.flexi-sort-grid{grid-template-columns:1fr}}

.flexi-date-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.flexi-date-pair label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--fs-1);color:var(--muted)}

/* The major filter editors form a responsive workspace: four across on a
   desktop, two across at intermediate widths, and one across on narrow
   screens. Each segment remains a single grid item, so its trigger and draft
   summary rail always travel together. */
.flexi-filter-segments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);align-items:start}
.flexi-seg{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.flexi-seg-head{font-weight:600;color:var(--ink)}
.flexi-seg-fields{display:grid;gap:var(--space-2)}
.flexi-filter-field{display:grid;gap:var(--space-2);min-width:0}

/* A toggle family is one visually isolated group containing an intrinsic-size
   stream of badges. Long labels take only the space they need; the stream
   wraps naturally instead of stretching every criterion into a grid cell. */
.flexi-toggle-grid{display:flex;flex-wrap:wrap;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;gap:6px;padding:8px;border:1px solid var(--bubble-border);border-radius:var(--r-2);background:var(--bubble-bg)}
.flexi-toggle-grid > *{flex:0 0 auto;min-width:0}
.flexi-toggle-grid .flexi-filter-field:has(.field-bubble--enhanced-toggle){display:contents}
.flexi-toggle-grid .field-bubble--enhanced-toggle{flex:0 0 auto;padding:0;border:0;background:transparent;box-shadow:none}
/* Mixed category cards retain one soft enclosure per enum family (Priority,
   Employment type, etc.) while their choices flow as compact badges. */
.flexi-seg-fields > .flexi-filter-field:has(.field-bubble--enhanced-toggle){display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:1px solid var(--bubble-border);border-radius:var(--r-2);background:var(--bubble-bg)}
.flexi-seg-fields > .flexi-filter-field:has(.field-bubble--enhanced-toggle) > .field-bubble--enhanced-toggle{flex:0 0 auto;padding:0;border:0;background:transparent;box-shadow:none}
.flexi-toggle-label{font-size:var(--fs-1);color:var(--muted)}
.field-bubble--enhanced-toggle > .flexi-toggle-label{display:none}
/* No-JS: the native checkbox shows inside the bubble; keep it hugging. */
.flexi-toggle input[type=checkbox]{width:auto}

/* Cycling toggle: flexi_table.js visually hides the native <select>/<checkbox>
   (.sr-only from components.css) and reveals a name-only button. Colour and
   outline style communicate state; with JS off the native control remains. */
.flexi-toggle{display:inline-flex;align-items:center}
.public-jobs-enum-group,.public-jobs-weekly-hours{grid-column:1/-1}
/* Enhanced badges visibly contain the criterion name only. State remains
   distinguishable without colour through the shared badge treatment below. */

.flexi-job-item{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

.flexi-apply{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.flexi-apply .flexi-dirty{flex-basis:100%}

/* Bulk bar: flexi_table.js drives visibility via the `hidden` attribute, so
   the display rule MUST be scoped to :not([hidden]) — a bare rule would
   override the UA's [hidden]{display:none} and show an empty bar on load. */
.flexi-bulk-bar:not([hidden]){display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--r-2);background:var(--panel)}
/* Row-select checkboxes hug their intrinsic size (the global input width
   rule would stretch them across the cell). */
.flexi-select-col input{width:auto}

.flexi-table th{white-space:nowrap}
/* H2: the totals footer. `.table-rows` paints tbody cells only, so an
   unstyled <tfoot> renders transparent and reads as floating text. */
.flexi-table tfoot td{padding:var(--space-1) var(--space-2);border-top:2px solid var(--border);background:var(--panel);white-space:nowrap}
.flexi-table tfoot .flexi-total-row td:first-child{white-space:normal}
.flexi-bubbles{display:inline-flex;gap:4px;flex-wrap:wrap}

.flexi-table-band{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-1)}
.flexi-col-remove{display:inline-block;margin-left:4px;padding:0 6px;border-radius:var(--r-2);color:var(--danger-ink);background:var(--danger-soft);text-decoration:none;font-weight:700}
.flexi-add-col{position:relative}
/* The marker suppression that lived here is components.css's `summary.btn`
   rule now — table_page.html:119 is `<summary class="btn">`, this selector's
   only call site. Both were (0,1,1), so this one won purely by loading later:
   two sources of truth for one treatment, with the newer rule dead at the one
   place it was written for. `cursor:pointer` comes from the base `.btn` rule. */
.flexi-add-menu{position:absolute;right:0;z-index:30;min-width:220px;margin-top:4px;padding:var(--space-1);display:grid;gap:2px;border:1px solid var(--border);border-radius:var(--r-2);background:#fff;box-shadow:0 6px 18px rgba(var(--shadow-color)/.12)}
.flexi-add-menu a{padding:6px 10px;border-radius:var(--r-2);text-decoration:none;color:var(--ink)}
.flexi-add-menu a:hover{background:var(--panel)}

.flexi-views-grid{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.flexi-views-grid .btn{text-align:center}

.flexi-view-manage{display:grid;gap:var(--space-2)}
.flexi-view-save{display:flex;gap:var(--space-2);align-items:end;flex-wrap:wrap}
.flexi-view-save label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--muted)}
.flexi-view-save label.flexi-check{flex-direction:row;align-items:center;gap:6px}
.flexi-view-rows{display:grid;gap:var(--space-1)}
/* Name column flexes, the two action forms hug — buttons align across rows. */
.flexi-view-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2);align-items:center}
.flexi-view-row form{display:inline}

/* --- Compact filter workspace + anchored group editors ------------------- */
.flexi-section-summary{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:var(--space-2);font-weight:400;vertical-align:middle}
.flexi-disclosure-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:start;position:relative}
.flexi-filter-group{min-width:0;position:relative}
.flexi-filter-group > summary{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2);min-height:var(--control-h);padding:0 10px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--bg);cursor:pointer;font-weight:600;list-style:none}
.flexi-filter-group > summary::-webkit-details-marker{display:none}
.flexi-filter-group > summary::before{content:"\203a";display:inline-block;flex:0 0 auto;font-size:1.4em;line-height:1;transform-origin:center;transition:transform .12s ease}
.flexi-filter-group[open] > summary::before{transform:rotate(90deg)}
.flexi-filter-group > summary .flexi-active-count{margin-left:auto}
.flexi-filter-group > summary:hover{border-color:var(--accent)}
.flexi-filter-group > summary:focus-visible{outline:2px solid var(--focus-ring,var(--accent));outline-offset:2px}
.flexi-active-count:not(:empty){display:inline-flex;min-width:1.5em;justify-content:center;padding:2px 6px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-1)}
.flexi-popover-card{margin-top:4px;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--r-3);background:var(--bg);box-shadow:0 8px 28px rgba(var(--shadow-color)/.18)}
.flexi-filter-group.is-popover-enhanced > .flexi-popover-card{box-sizing:border-box;position:fixed;z-index:900;width:min(32rem,calc(100vw - 16px));max-height:min(70vh,36rem);overflow:auto;margin:0}
.flexi-popover-head{position:sticky;top:calc(var(--space-2) * -1);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);padding:var(--space-2);border-bottom:1px solid var(--border);background:var(--bg)}
.flexi-popover-close{display:none;flex:0 0 auto;min-width:36px}
.flexi-filter-group.is-popover-enhanced .flexi-popover-close{display:inline-flex}
.flexi-local-search-wrap:not([hidden]){display:grid;gap:4px;margin-bottom:var(--space-2);font-size:var(--fs-1);color:var(--muted)}
.flexi-toggle-legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2)}
.flexi-summary-rail{padding-top:2px}
/* S9: the fill, ink, ellipsis and nowrap that stood here were a third copy --
   `.badge` supplies three of them and filter_workspace.css the fourth, and
   this sheet loads last so it was quietly winning against both. */
.flexi-dirty{color:var(--warn-ink);font-weight:600}
.flexi-view-display{margin:0 var(--space-3) var(--space-2)}
.flexi-view-display-controls{display:grid;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
.people-filter-option.is-active{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.flexi-people-filter .people-filter-remove{display:none}
.flexi-people-filter.people-filter--enhanced .people-filter-remove{display:inline-block}
.flexi-people-filter .people-filter-input{display:none}
.flexi-people-filter.people-filter--enhanced .people-filter-input{display:block}
.people-filter-nojs-search{display:grid;gap:8px;margin-top:8px}
.people-filter-nojs-search-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.people-filter-nojs-search-row input{flex:1 1 14rem;min-width:0}
.people-filter-nojs-results{display:grid;gap:6px;max-height:16rem;overflow:auto}
.people-filter-nojs-results label{display:flex;gap:6px;align-items:flex-start}
.flexi-unavailable-criterion{display:flex;gap:7px;align-items:flex-start;font-weight:600}
.flexi-people-filter .people-filter-dropdown{width:min(22rem,100%);min-width:0;max-width:100%}
@media(max-width:1100px){.flexi-filter-segments{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .flexi-panel{padding:var(--space-2)}
  .flexi-filter-segments{grid-template-columns:minmax(0,1fr)}
  .flexi-filter-group.is-popover-enhanced > .flexi-popover-card{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .flexi-section-summary{display:flex;margin:var(--space-1) 0 0}
  #flexi-filter-form > .flexi-apply{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);width:100%;max-width:none}
  #flexi-filter-form > .flexi-apply > .btn,#flexi-filter-form > .flexi-apply > button{width:100%}
  #flexi-filter-form > .flexi-apply > .flexi-dirty{grid-column:1}
}

/* Wide result sets scroll inside their own Flexi-only viewport instead of
   widening the whole document on phones or at high browser zoom. */
.flexi-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
@media(max-width:400px){
  .flexi-date-pair{grid-template-columns:minmax(0,1fr)}
  .flexi-view-row{grid-template-columns:minmax(0,1fr)}
}

/* --- Cell clip + expander: caps row height to one line; full contents shown
   in a body-appended popout on hover/focus/click (flexi_table.js). Clip lives
   on an inner wrapper because the table is table-layout:auto. --- */
.flexi-clip-wrap{display:flex;align-items:center;gap:4px;max-width:var(--flexi-clip-max,14rem)}
.flexi-clip{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flexi-clip .flexi-bubbles{flex-wrap:nowrap}
.flexi-clip-full{display:none}
.flexi-clip-wrap.is-expandable{cursor:pointer}
.flexi-clip-wrap.is-expandable:focus-visible{outline:2px solid var(--focus-ring,var(--accent));border-radius:var(--r-2)}
.flexi-clip-more{flex:0 0 auto;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap}
.flexi-cell-popout{position:absolute;z-index:100;min-width:160px;max-width:360px;max-height:280px;overflow:auto;padding:var(--space-2);background:#fff;border:1px solid var(--border);border-radius:var(--r-3);box-shadow:0 6px 24px rgba(var(--shadow-color)/.15);white-space:normal}
.flexi-cell-popout:not(.is-open){display:none}

/* --- GDPR-risk whole-row tint (people only; activated by the Options toggle
   which adds .flexi-gdpr-on to the table). The :hover variants beat the
   app.css row-hover white-out. --- */
.flexi-gdpr-on tbody tr.gdpr-r1 td{background:var(--gdpr-r1)}
.flexi-gdpr-on tbody tr.gdpr-r2 td{background:var(--gdpr-r2)}
.flexi-gdpr-on tbody tr.gdpr-r3 td{background:var(--gdpr-r3)}
.flexi-gdpr-on tbody tr.gdpr-r1:hover td{background:var(--gdpr-r1)}
.flexi-gdpr-on tbody tr.gdpr-r2:hover td{background:var(--gdpr-r2)}
.flexi-gdpr-on tbody tr.gdpr-r3:hover td{background:var(--gdpr-r3)}

/* --- GDPR status text in the date/age cells (people only). Pending is the
   actionable state, so it gets the compliance amber; exempt is informational
   and stays muted. --- */
.gdpr-status{font-size:var(--fs-1);white-space:nowrap}
.gdpr-status-exempt{color:var(--muted);font-style:italic}
.gdpr-status-pending{color:var(--warn-ink);font-weight:600}