/* tableStyles.css
 * ICILS 2023 — Tabulator chrome (global) + per-archetype overrides.
 *
 * SECTIONS
 *   1. Global container styles
 *   2. Tabulator header
 *   3. Tabulator rows
 *   4. Tabulator cells
 *   5. Tabulator group headers
 *   6. Misc utilities used inside / next to tables (incl. table controls toolbar)
 *   7. Per-archetype overrides (scoped via body classes)
 *      7.1  body.icils-distribution-table        (Tables 5.1, 5.5)
 *      7.2  body.icils-benchmark-table           (Tables 5.2, 5.6)
 *      7.3  body.icils-achievement-section-table (Tables 6.1, 6.2, 6.7-6.10)
 *      7.4  body.icils-grouped-header-table      (Chapter 9, 7.3, D.10)
 *      7.5  body.icils-lrninto-table             (Table 7.13)
 *      7.6  body.icils-ncs23-curriculum-table    (Table 2.3)
 *
 * Tokens used here are defined in icils.css.
 *
 * Pages opt in to an archetype by adding the matching body class. Pages
 * with no archetype class get only the global chrome.
 */

/* ============================================================
   1. GLOBAL CONTAINER
   ============================================================ */


article.table {
   .container-fluid {
       max-width: 1200px;
       min-width: 0;
   }
   
   .table-container {
       overflow: auto;
       position: relative;
   }
   
   #table-container {
       max-height: 70vh;
   }
   
   .table-notes,
   .table-legend {
       margin-top: 1.5rem;
   }
   
   /* ============================================================
      2. TABULATOR HEADER
      ============================================================ */
   .tabulator-header {
       background-color: var(--iea-icils-yellow) !important;
       border-top: 1px solid var(--iea-tabulator-border) !important;
       border-bottom: 1px solid var(--iea-tabulator-border) !important;
       /* Stacking so header filters render above body */
       position: relative;
       z-index: 100;
   }
   
   .tabulator-col {
       position: relative;
   }
   
   .tabulator-col-group > .tabulator-col-content {
       background-color: var(--iea-icils-yellow-2);
       border: 2px solid var(--iea-icils-yellow);
   }
   
   .tabulator-header .tabulator-col,
   .tabulator-header .tabulator-col:hover,
   .tabulator-header .tabulator-col.tabulator-sortable:hover,
   .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"]:hover,
   .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"]:hover,
   .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"]:hover {
       background-color: var(--iea-icils-yellow) !important;
       border-color: var(--iea-icils-yellow-border) !important;
   }
   
   .tabulator-header .tabulator-col .tabulator-col-content,
   .tabulator-header .tabulator-col .tabulator-col-title {
       color: #333 !important;
       font-weight: 600 !important;
   }
   
   .tabulator-header .tabulator-col .tabulator-header-filter {
       background-color: var(--iea-icils-yellow) !important;
       border-color: var(--iea-icils-yellow-border) !important;
   }
   
   .tabulator-header .tabulator-col .tabulator-header-filter:hover {
       background-color: var(--iea-icils-yellow-border) !important;
   }
   
   /* ============================================================
      3. TABULATOR ROWS
      ============================================================ */
   /* ICILS 2023 Average: shade data cells only; leave chart / graphical columns neutral */
   .tabulator-row.icils-average-row {
       border-top: 1px solid var(--iea-tabulator-border);
       border-bottom: 1px solid var(--iea-tabulator-border);
   }
   
   .tabulator.tabulator-bootstrap .tabulator-row.icils-average-row:not(.tabulator-group),
   .tabulator.tabulator-bootstrap3 .tabulator-row.icils-average-row:not(.tabulator-group),
   .tabulator.tabulator-bulma .tabulator-row.icils-average-row:not(.tabulator-group) {
       background-color: transparent !important;
   }
   
   .tabulator-row.icils-average-row > .tabulator-cell:not(:has(.chart-container)) {
       background-color: var(--iea-icils-yellow-2) !important;
   }
   
   .tabulator-row.icils-average-row > .tabulator-cell:has(.chart-container) {
       background-color: #fff !important;
   }
}
   /* Table 7.13: CI bar column has no .chart-container wrapper */
   body.icils-lrninto-table .tabulator-row.icils-average-row:not(:hover) > .tabulator-cell:last-of-type {
       background-color: #fff !important;
   }
   
   .tabulator-row.icils-average-row:hover > .tabulator-cell {
       background-color: var(--iea-tabulator-row-hover) !important;
   }
   
   .tabulator-row-odd:not(.tabulator-group):not(.icils-average-row) {
       transition: background-color 0.2s ease;
       background-color: var(--iea-tabulator-row-odd) !important;
   }
   
   .tabulator-row-even:not(.tabulator-group):not(.icils-average-row) {
       background-color: #fff !important;
   }
   
   /* Override bootstrap / bulma theme striping */
   .tabulator.tabulator-bootstrap .tabulator-row:not(.tabulator-group),
   .tabulator.tabulator-bootstrap3 .tabulator-row:not(.tabulator-group),
   .tabulator.tabulator-bulma .tabulator-row:not(.tabulator-group) {
       background-color: var(--iea-tabulator-row-odd) !important;
   }
   
   .tabulator.tabulator-bootstrap .tabulator-row.tabulator-row-even:not(.tabulator-group),
   .tabulator.tabulator-bootstrap3 .tabulator-row.tabulator-row-even:not(.tabulator-group),
   .tabulator.tabulator-bulma .tabulator-row.tabulator-row-even:not(.tabulator-group) {
       background-color: #fff !important;
   }
   
   /* First data row after group header should be white */
   .tabulator-group + .tabulator-row:not(.tabulator-group):not(.icils-average-row) {
       background-color: #fff !important;
   }
   
   .tabulator-row:hover:not(.tabulator-group) {
       background-color: var(--iea-tabulator-row-hover) !important;
   }
   
   /* ============================================================
      4. TABULATOR CELLS
      ============================================================ */
   .tabulator-cell {
       vertical-align: middle;
       padding: 8px 4px !important;
   }
   
   /* Country column: same layout with/without notes (IcilsTablePage.formatCountryWithNoteHtml) */
   .tabulator-cell .icils-country-cell {
       display: inline-flex;
       align-items: center;
       column-gap: 0.2em;
       max-width: 100%;
   }
   
   .tabulator-cell .icils-country-note-slot {
       flex: 0 0 auto;
       min-width: 1em;
       display: inline-flex;
       justify-content: flex-end;
       align-items: center;
   }
   
   .tabulator-cell .icils-country-name {
       flex: 1 1 auto;
       min-width: 0;
   }
   
   .tabulator-cell .icils-country-note-sup {
       white-space: nowrap;
       font-weight: normal;
       line-height: 1;
   }
   
   .tabulator-cell .icils-country-note-sup span {
       font-weight: normal;
   }
   
   /* ============================================================
      5. TABULATOR GROUP HEADERS
      ============================================================ */
   .tabulator-group,
   .tabulator.tabulator-bootstrap .tabulator-group,
   .tabulator.tabulator-bootstrap3 .tabulator-group,
   .tabulator.tabulator-bulma .tabulator-group {
       background-color: var(--iea-icils-yellow) !important;
       color: var(--iea-black) !important;
       font-weight: bold !important;
       white-space: normal !important;
       word-wrap: break-word !important;
   }
   
   .tabulator-group:hover {
       background-color: var(--iea-icils-yellow) !important;
   }
   
   .tabulator-group .tabulator-arrow {
       border-top-color: var(--iea-black) !important;
   }
   
   .tabulator-group-toggle {
       display: none !important;
   }
   
   .tabulator-group-header .tabulator-col {
       padding-left: 0 !important;
   }
   
   /* Hide the synthetic "Countries" group row used by some pages */
   .tabulator-group:has(#countries-group-header) {
       display: none !important;
   }
   
   /* ============================================================
      6. UTILITIES (used adjacent to tables)
      ============================================================ */
   .significant {
       font-weight: bold;
   }
   
   .note {
       display: inline-block;
       width: 20px;
       text-align: center;
       margin-right: 8px;
   }
   
   /*
    * Table controls strip (country search, sort-by, sort-order, optional view toggle, exports).
    * Stays within the same width as the table panel (flex + min-width:0; no overflow:hidden here
    * — that would clip the country suggestions list, which is position:absolute below the input).
    * Country search: fixed width for the placeholder; below 65rem the strip wraps for small viewports.
    * Sort-by flexes (capped max-width so short labels do not stretch across the row); ellipsis when needed.
    * Sort-order: fixed width so Ascending / Descending are never clipped (title still synced in JS).
    */
   #main-content .form-inline:has(#sort-by) {
       --icils-toolbar-country-w: 24rem;
       --icils-toolbar-sort-order-w: 12rem;
       --icils-toolbar-sort-by-max-w: 28rem;
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 0.5rem 0.75rem;
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
       min-width: 0;
       overflow: visible;
   }
   
   @media (max-width: 65rem) {
       #main-content .form-inline:has(#sort-by) {
           flex-wrap: wrap;
       }
   
       #main-content .form-inline:has(#sort-by) > .form-group:has(#search-country) {
           flex: 1 1 100%;
           width: 100%;
           max-width: 100%;
           min-width: 0;
       }
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group {
       display: block;
       float: none;
       margin-right: 0 !important;
       margin-bottom: 0;
       vertical-align: unset;
       min-width: 0;
   }
   
   /* Country search: fixed width for full placeholder ("Click to see all countries…") */
   #main-content .form-inline:has(#sort-by) > .form-group:has(#search-country) {
       flex: 0 0 var(--icils-toolbar-country-w);
       width: var(--icils-toolbar-country-w);
       max-width: 100%;
       position: relative;
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group:has(#search-country) #search-country {
       width: 100%;
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group:has(#sort-by) {
       flex: 1 1 8rem;
       min-width: 0;
       max-width: min(100%, var(--icils-toolbar-sort-by-max-w, 28rem));
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group:has(#sort-order) {
       flex: 0 0 var(--icils-toolbar-sort-order-w);
       width: var(--icils-toolbar-sort-order-w);
       min-width: var(--icils-toolbar-sort-order-w);
       max-width: var(--icils-toolbar-sort-order-w);
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group:has(.view-toggle-container) {
       /* Do not shrink the segmented control — shrinking caused wrapped labels and a tall toggle */
       flex: 0 0 auto;
       min-width: auto;
       max-width: none;
   }
   
   #main-content .form-inline:has(#sort-by) > .form-group.pull-right {
       float: none !important;
       margin-left: auto;
       flex: 0 0 auto;
   }
   
   #main-content .form-inline:has(#sort-by) .view-toggle-container {
       max-width: none;
       flex-wrap: nowrap;
   }
   
   #main-content .form-inline:has(#sort-by) .view-toggle-container .view-toggle-btn {
       flex: 0 0 auto;
       min-height: 30px;
       height: 30px;
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
       gap: 5px;
       box-sizing: border-box;
   }
   
   #main-content .form-inline:has(#sort-by) .view-toggle-container .view-toggle-btn .fas {
       font-size: 12px;
       line-height: 1;
   }
   
   #main-content .form-inline:has(#sort-by) select.form-control,
   #main-content .form-inline:has(#sort-by) input.form-control {
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
       display: block;
   }
   
   /* Long sort-by labels: narrow closed control; full text when opened + title (JS) */
   #main-content .form-inline:has(#sort-by) select#sort-by.form-control {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   #main-content .form-inline:has(#sort-by) select#sort-order.form-control {
       overflow: hidden;
       text-overflow: clip;
       white-space: nowrap;
   }
   
   /* Achievement-section utility — also usable elsewhere */
   .section-border-right {
       border-right: 5px solid #fff !important;
   }
   
   /* Legend rows (only Table 2.3 uses these today, but kept global) */
   .legend-item {
       display: flex;
       align-items: center;
       margin-bottom: 0.15rem;
       padding: 0.1rem 0.5rem;
       border-radius: 4px;
       transition: background-color 0.2s ease;
   }
   
   .legend-item:hover {
       background-color: rgba(0, 0, 0, 0.05);
   }
   
   .legend-symbol {
       margin-right: 0.75rem;
       font-size: 1.2em;
       min-width: 1.5rem;
       text-align: center;
   }
   
   /* Distribution view-toggle component (only used by 5.1 / 5.5) */
   .view-toggle-container {
       display: inline-flex;
       align-items: center;
       background-color: var(--iea-study-gray-2);
       border-radius: 6px;
       padding: 1px;
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
       position: relative;
   }
   
   .view-toggle-btn {
       background: transparent;
       border: none;
       padding: 3px 10px;
       border-radius: 4px;
       cursor: pointer;
       color: var(--iea-icils-dark-gray);
       transition: all 0.2s ease;
       position: relative;
       z-index: 1;
       display: inline-flex;
       align-items: center;
       gap: 5px;
       min-width: 0;
       white-space: nowrap;
       font-size: 12px;
       line-height: 1.25;
       justify-content: center;
   }
   
   .view-toggle-btn:hover {
       background-color: rgba(249, 211, 66, 0.1);
       color: var(--iea-icils-dark-gray);
   }
   
   .view-toggle-btn.active,
   .view-toggle-btn.active:hover {
       background-color: var(--iea-icils-yellow);
       color: var(--iea-icils-dark-gray);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
   }
   
   @media (max-width: 768px) {
       .view-toggle-btn {
           padding: 3px 8px;
           font-size: 11px;
       }
       #main-content .form-inline:has(#sort-by) .view-toggle-container .view-toggle-btn {
           min-height: 30px;
           height: 30px;
           padding: 0 8px;
           font-size: 11px;
       }
       #main-content .form-inline:has(#sort-by) .view-toggle-container .view-toggle-btn .fas {
           font-size: 11px;
       }
       .view-toggle-btn .icon {
           font-size: 0.85em;
       }
   }
   
   /* NCS23 column-reorder controls (only Table 2.3 uses these today) */
   .column-reorder-controls {
       display: none;
       position: absolute;
       top: -35px;
       left: 50%;
       transform: translateX(-50%);
       justify-content: center;
       gap: 4px;
       opacity: 0;
       transition: opacity 0.3s ease, transform 0.2s ease;
       z-index: 1000;
       background: white;
       border: 1px solid #ddd;
       border-radius: 4px;
       padding: 4px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       white-space: nowrap;
   }
   
   .column-reorder-btn {
       background: #f8f9fa;
       border: none;
       border-radius: 3px;
       padding: 2px 6px;
       font-size: 10px;
       cursor: pointer;
       transition: all 0.2s ease;
       min-width: 20px;
       height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .column-reorder-btn:hover {
       background: #e0e0e0;
       border-color: #999;
   }
   
   .column-reorder-btn:active {
       background: #d0d0d0;
   }
   
   .column-reorder-btn:disabled {
       background: #f5f5f5;
       border-color: #ddd;
       color: #999;
       cursor: not-allowed;
   }
   
   .column-reorder-btn.left  { border-radius: 3px 0 0 3px; }
   .column-reorder-btn.right { border-radius: 0 3px 3px 0; }
   
   /* ============================================================
      7. PER-ARCHETYPE OVERRIDES (body-class scoped)
      ============================================================ */
   
   /* ----- 7.1 Distribution (Tables 5.1, 5.5) ------------------- */
   body.icils-distribution-table .tabulator-row:not(:hover):not(.tabulator-group) .tabulator-cell:last-of-type {
       background-color: #fff;
   }
   
   body.icils-distribution-table .tabulator-header .tabulator-col:not(:first-child) .tabulator-col-content,
   body.icils-distribution-table .tabulator-cell:not(:first-child) {
       text-align: center;
   }
   
   /* ----- 7.2 Benchmark (Tables 5.2, 5.6) ---------------------- */
   body.icils-benchmark-table .tabulator-headers .tabulator-col:last-of-type .tabulator-col-content {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
   
   body.icils-benchmark-table .tabulator-row:not(:hover):not(.tabulator-group) .tabulator-cell:last-of-type {
       background-color: #fff;
   }
   
   body.icils-benchmark-table .tabulator-header .tabulator-col:not(:first-child) .tabulator-col-content,
   body.icils-benchmark-table .tabulator-cell:not(:first-child) {
       text-align: center;
   }
   
   /* ----- 7.3 Achievement section (Tables 6.1, 6.2, 6.7-6.10) -- */
   body.icils-achievement-section-table .tabulator-row-odd:not(:hover) .tabulator-cell:last-of-type {
       background-color: #fff;
   }
   
   body.icils-achievement-section-table .tabulator-headers .tabulator-col:last-of-type .tabulator-col-content {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
   
   body.icils-achievement-section-table .tabulator-col-title {
       font-size: 12px;
       text-overflow: unset !important;
   }
   
   body.icils-achievement-section-table .tabulator-col[tabulator-field="Country"] {
       height: 45px !important;
   }
   
   /* ----- 7.4 Grouped header (Chapter 9, 7.3, D.10) ------------ */
   body.icils-grouped-header-table .tabulator-col-title {
       font-size: 11.2px;
   }
   
   body.icils-grouped-header-table .tabulator-col[tabulator-field="Country"] {
       height: 60px !important;
   }
   
   body.icils-grouped-header-table.icils-grouped-header-table--groupH60
       .tabulator .tabulator-header .tabulator-col-group-cols .tabulator-col .tabulator-col-content {
       height: 60px !important;
   }
   
   body.icils-grouped-header-table.icils-grouped-header-table--groupH80
       .tabulator .tabulator-header .tabulator-col-group-cols .tabulator-col .tabulator-col-content {
       height: 80px !important;
   }
   
   body.icils-grouped-header-table.icils-grouped-header-table--groupH90
       .tabulator .tabulator-header .tabulator-col-group-cols .tabulator-col .tabulator-col-content {
       height: 90px !important;
   }
   
   body.icils-grouped-header-table.icils-grouped-header-table--groupH100
       .tabulator .tabulator-header .tabulator-col-group-cols .tabulator-col .tabulator-col-content {
       height: 100px !important;
   }
   
   /* ----- 7.5 LRNINTO (Table 7.13) ----------------------------- */
   body.icils-lrninto-table .tabulator-col[tabulator-field="Country"] {
       height: 55px !important;
   }
   
   /* ----- 7.6 NCS23 curriculum (Table 2.3) --------------------- */
   
   
   
   body.icils-ncs23-curriculum-table .tabulator-col {
       display: flex;
       flex-direction: column;
       min-height: 50px;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-col .tabulator-col-content {
       flex: 1 1 auto;
       display: flex;
       flex-direction: column;
       padding: 4px !important;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-col .tabulator-header-filter {
       margin-top: auto !important;
       padding: 2px !important;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-col-title {
       padding: 2px !important;
       font-weight: 600;
   }
   
   body.icils-ncs23-curriculum-table .table-container {
       margin: 1rem 0;
       border-radius: 6px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       overflow-x: auto;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container {
       cursor: pointer;
       outline: none;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:hover {
       background-color: rgba(0, 0, 0, 0.02);
       border-radius: 4px;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:focus {
       outline: 2px solid #3273dc;
       outline-offset: 2px;
       border-radius: 4px;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container::before {
       content: '↔';
       position: absolute;
       top: -20px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 12px;
       color: #999;
       opacity: 0;
       transition: opacity 0.2s ease;
       pointer-events: none;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:hover::before {
       opacity: 1;
   }
   
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:hover .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:focus-within .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container:focus .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-header-filter-container.focused .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-col:hover .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-col:focus-within .column-reorder-controls,
   body.icils-ncs23-curriculum-table .tabulator-col:focus .column-reorder-controls {
       display: flex;
       opacity: 1;
   }