/*
 * spreadsheet_tabulator.css
 * ════════════════════════════════════════════════════════════════════════════
 * Companion stylesheet for the Tabulator-based spreadsheet view.
 * Contains Tabulator core overrides plus all preserved spreadsheet
 * toolbar, filter-bar, group-row, and column-chooser styles.
 *
 * Load order (vendor CSS first, then this file):
 *   tabulator.min.css  (standard theme)
 *   spreadsheet_tabulator.css   ← this file
 */


/* ── Tabulator core overrides ───────────────────────────────────────── */
.tabulator {
    width: 100% !important;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
}
.tabulator-header {
    background: #f8fafc;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.78rem;
    min-height: unset;
}
.tabulator-col {
    border-right: 1px solid #e9ecef;
    background: #f8fafc;
    padding: 0;
}
.tabulator-col:hover { background: #f1f5f9; }
.tabulator-col-title {
    font-weight: 600;
    color: #374151;
    padding: 5px 8px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabulator-col.tabulator-sortable .tabulator-col-title { cursor: pointer; }
.tabulator-col.tabulator-col-sorter-element { background: #eef2f9; }
.tabulator-col-sorter { display: inline-flex; }
.tabulator-arrow { display: none; } /* use CSS sort indicators instead */
.tabulator-col.tabulator-sortable[aria-sort="ascending"]  .tabulator-col-title::after { content: ' ▲'; font-size: .65em; color: #6ea8fe; }
.tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-title::after { content: ' ▼'; font-size: .65em; color: #6ea8fe; }

/* Header filter row */
.tabulator-header-filter { padding: 2px 4px 4px; }
.tabulator-header-filter input,
.tabulator-header-filter select {
    font-size: 0.72rem;
    padding: 2px 5px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid #ced4da;
    width: 100%;
    background: #fff;
    outline: none;
    color: #374151;
}
.tabulator-header-filter input:focus { border-color: #6ea8fe; box-shadow: 0 0 0 2px rgba(110,168,254,.15); }

/* Rows */
.tabulator-row { border-bottom: 1px solid #f1f5f9; }
.tabulator-row:hover .tabulator-cell { background: rgba(59,130,246,.04); cursor: pointer; }
.tabulator-row.tabulator-selectable:hover { background: transparent; }

/* Cells */
.tabulator-cell {
    padding: 4px 8px;
    border-right: 1px solid #f1f5f9;
    vertical-align: middle;
    min-height: 28px;
    overflow: visible; /* allow badge overflow */
}
.tabulator-cell:last-child { border-right: none; }

/* Rownum column */
.tabulator-cell[tabulator-field="rownum"] {
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
    min-width: 36px;
    max-width: 40px;
}
.tabulator-col[tabulator-field="rownum"] { max-width: 40px; }

/* Group rows */
.tabulator-group {
    background: #eef2f9;
    border-bottom: 1px solid #dde4ef;
    border-top: 1px solid #dde4ef;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
}
.tabulator-group:hover { background: #e2eaf6; }
.tabulator-group span { color: #6b7280; font-weight: 400; margin-left: 6px; }

/* Column resize handle */
.tabulator-col-resize-handle {
    width: 6px;
    background: transparent;
    border-right: 2px solid transparent;
    transition: border-color 0.1s;
}
.tabulator-col-resize-handle:hover,
.tabulator-col-resize-handle.active { border-right-color: #6ea8fe; cursor: col-resize; }

/* Empty state */
.tabulator-placeholder { padding: 2rem; text-align: center; color: #6b7280; font-size: 0.85rem; }


/* ── Preserved spreadsheet styles (unchanged) ── */


/* ═══════════════════════════════════════════════════════════════════════════
   § 1  SERVER-SIDE FILTER BAR
   Always-visible row of inputs above the toolbar.
   Selects auto-submit via onchange; search submits on Enter or the button.
   Two-tier design: this narrows the DB result set before Tabulator gets it;
   the toolbar's own search filters further client-side across all columns.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-filterbar {
    padding: 6px 8px;
    margin: 0 0 4px;
    background: #f8fafc;
    border: 1px solid #dde3ec;
    border-radius: 6px;
}
.ss-filterbar-form {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}
.ss-filterbar-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #8a9bb0;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 2px;
}

/* Search field: icon on left, optional × on right */
.ss-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 140px;
    max-width: 195px;
    flex: 0 0 auto;
}
.ss-search-icon {
    position: absolute;
    left: 8px;
    color: #9aabbf;
    font-size: 11px;
    pointer-events: none;
    z-index: 1;
}
.ss-search-clear {
    position: absolute;
    right: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: #b0bec5;
    cursor: pointer;
}
.ss-search-clear:hover { color: #e53935; }

/* All inputs / selects share the same height and font */
.ss-filterbar-input,
.ss-filterbar-select {
    height: 28px;
    font-size: 11.5px;
    border: 1px solid #cdd5de;
    border-radius: 4px;
    background: #fff;
    color: #1f2933;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.ss-filterbar-input {
    width: 100%;
    padding: 0 20px 0 26px; /* left room for icon, right room for × */
}
.ss-filterbar-select {
    padding: 0 6px;
    min-width: 110px;
    max-width: 160px;
    cursor: pointer;
}
.ss-filterbar-input:focus,
.ss-filterbar-select:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 2px rgba(110,168,254,.2);
}

.ss-filterbar-submit {
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #17324d;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
    flex-shrink: 0;
}
.ss-filterbar-submit:hover { background: #1f4060; }

.ss-filterbar-clear {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid #c6d0dc;
    border-radius: 4px;
    font-size: 11.5px;
    color: #6a7a8c;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
    flex-shrink: 0;
}
.ss-filterbar-clear:hover { color: #c0392b; border-color: #f0a0a0; }


/* ═══════════════════════════════════════════════════════════════════════════
   § 2  ACTIVE FILTER INDICATOR BAR
   Chips showing each active server-side filter with individual × to remove.
   Only rendered by PHP when at least one filter is active.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-active-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 9px;
    margin: 0 0 4px;
    background: #eef4ff;
    border: 1px solid #c8d9f5;
    border-radius: 5px;
    font-size: 11.5px;
}
.ss-active-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #3b5680;
    flex-shrink: 0;
    white-space: nowrap;
}
.ss-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #aec6e8;
    border-radius: 999px;
    color: #1f3a5a;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.ss-active-chip i { color: #6d92c4; font-size: 10px; }
.ss-active-chip-x {
    color: #6d92c4;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    margin-left: 1px;
}
.ss-active-chip-x:hover { color: #c0392b; }
.ss-active-bar-count {
    margin-left: auto;
    font-weight: 700;
    color: #3b5680;
    white-space: nowrap;
    font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 3  EMPTY STATE
   Shown in place of the table when server-side filtering returns 0 rows.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 220px;
    padding: 2.5rem 2rem;
    border: 1px solid #dde1e8;
    border-radius: 0 0 6px 6px;
    background: #fff;
    text-align: center;
}
.ss-empty-icon  { font-size: 2rem; color: #c5d3e2; }
.ss-empty-title { margin: 0; font-size: 14px; font-weight: 700; color: #3d5166; }
.ss-empty-sub   { margin: 0; font-size: 12.5px; color: #8a9ab0; }
.ss-empty-sub a { color: #4a7fcc; }


/* ═══════════════════════════════════════════════════════════════════════════
   § 4  SPREADSHEET TOOLBAR ROW
   arrangeToolbar() moves the generated toolbar row into
   #taskSpreadsheetToolbarHost and adds .ss-toolbar-row.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-toolbar-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 5px 10px;
    background: #f5f7fa;
    border: 1px solid #dde1e8;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin: 0;
}
.ss-toolbar-row .ss-toolbar-left {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.ss-toolbar-row .ss-toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 1 1 auto;
}
.ss-toolbar-right-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 5  TOOLBAR BUTTONS & CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-toolbar-btn {
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #c6d0dc;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #3d5166;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.ss-toolbar-btn:hover { background: #f0f4fa; border-color: #adbdd0; }

.ss-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.ss-zoom-label {
    font-size: 11px;
    font-weight: 600;
    color: #6a7a8c;
    white-space: nowrap;
}

.ss-end-count {
    font-size: 11px;
    color: #8a9ab0;
    white-space: nowrap;
}
.ss-end-filters {
    font-size: 11px;
    color: #8a9ab0;
    white-space: nowrap;
}
.spreadsheet-end-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: #8a9ab0;
    border-top: 1px solid #eef1f6;
    background: #fafbfd;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 6  FLOATING HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-floating-head-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .15s, transform .15s;
}
.ss-floating-head-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 7  GROUP HEADER ROWS
   Injected group header rows inside the table body; also applied to
   Tabulator's native .tabulator-group rows.
   ═══════════════════════════════════════════════════════════════════════════ */

.spreadsheet-table tbody tr.ss-group-header              { cursor: default; }
.spreadsheet-table tbody tr.ss-group-header:hover td     { background: #e6ecf5 !important; }
.spreadsheet-table tbody tr.ss-group-header td.ss-group-header-cell {
    padding: 5px 12px !important;
    background: #eaeff8 !important;
    border-top: 2px solid #c8d5e8 !important;
    border-bottom: 1px solid #d4dbe6 !important;
}
.ss-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7b93ae;
    margin-right: 6px;
}
.ss-group-value {
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
}

/* Identical rules mirrored for Tabulator native group rows */
.tabulator-group                         { cursor: default; }
.tabulator-group:hover                   { background: #e6ecf5; }
.tabulator-group .ss-group-header-cell {
    padding: 5px 12px;
    background: #eaeff8;
    border-top: 2px solid #c8d5e8;
    border-bottom: 1px solid #d4dbe6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 8  GROUP-BY SELECT  (in toolbar)
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-groupby-select {
    height: 28px;
    padding: 2px 4px 2px 8px;
    font-size: 11.5px;
    font-family: inherit;
    font-weight: 600;
    border: 1px solid #c6d0dc;
    border-radius: 4px;
    background-color: #fff;
    color: #3d5166;
    cursor: pointer;
    outline: none;
    max-width: 140px;
}
.ss-groupby-select:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 2px rgba(110,168,254,.2);
}
.ss-groupby-select option[value="-1"] { color: #8a9bb0; }


/* ═══════════════════════════════════════════════════════════════════════════
   § 9  COLUMN RESIZE HANDLE
   Absolute at right edge; th/col header position:sticky is the container.
   ═══════════════════════════════════════════════════════════════════════════ */

.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 10  COLUMN CHOOSER MODAL
   Bootstrap modal generated by buildColumnChooserModal(), appended to body.
   Items are draggable (HTML5 DnD) for column reordering.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-col-chooser-dialog {
    max-width: 265px;
    width:     265px;
}
.ss-col-chooser-dialog .modal-content { font-size: 12px; }

/* Compact header: title | filter input | ✕ */
.ss-cc-header {
    padding:     5px 10px;
    gap:         6px;
    flex-wrap:   nowrap;
    align-items: center;
}
.ss-cc-title {
    font-size:   12px;
    font-weight: 700;
    color:       #2c3e50;
    white-space: nowrap;
    flex-shrink: 0;
}
.ss-cc-header .ss-col-filter-input {
    flex:          1 1 auto;
    min-width:     0;
    height:        24px;
    font-size:     11px;
    padding:       2px 6px;
    border-radius: 3px;
    border:        1px solid #c6d0dc;
}
.ss-cc-header .btn-close { flex-shrink: 0; font-size: 0.65em; margin: 0; padding: 4px; }

/* Scrollable list */
.ss-col-chooser-body { max-height: 320px; overflow-y: auto; padding: 0; }

/* Item rows */
.ss-col-item {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       3px 8px;
    border-bottom: 1px solid #f0f3f7;
    cursor:        default;
    transition:    background .1s;
}
.ss-col-item:last-child         { border-bottom: none; }
.ss-col-item.ss-col-dragging    { opacity: 0.4; }
.ss-col-item.ss-col-drag-over   { background: #e8f0fe; border-top: 2px solid #4a90d9; }

.ss-col-grip              { color: #c0c8d4; font-size: 10px; cursor: grab; flex-shrink: 0; }
.ss-col-grip:active       { cursor: grabbing; }
.ss-col-item .ss-col-cb   { margin: 0; flex-shrink: 0; }
.ss-col-item .form-check-label { font-size: 11.5px; line-height: 1.3; margin: 0; }

/* Compact footer */
.ss-cc-footer      { padding: 5px 10px; gap: 4px; }
.ss-cc-footer .btn { font-size: 11px; padding: 2px 8px; }

.ss-col-all-btn,
.ss-col-none-btn {
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}