/* ── CRM table column show/hide + resize (js/crm-table-columns.js) ── */

/* Bootstrap's .table class sets width:100%, which under table-layout:fixed
   means the browser proportionally *compresses* every column back down to
   fit 100% the moment the sum of column widths exceeds the container —
   fighting a resize instead of accommodating it (the "columns pushed out of
   boundaries" bug). Letting the table's own width float with its columns
   instead (while never shrinking below the full container) lets the
   already-present .table-responsive wrapper do what it's there for: scroll
   horizontally once the columns genuinely need more room than the viewport,
   the same way Sheets/Airtable/any real data grid keeps a wide table from
   disturbing the rest of the page layout. */
table[data-crm-columns] {
    width: auto;
    min-width: 100%;
}

/* Its own row, right-aligned, sitting just above the table — a distinct
   "view options" strip (same convention Airtable/Notion/Linear use) rather
   than another button competing with Search/Filter/Export in the toolbar
   above it. */
.crm-col-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.crm-col-toggle-wrap {
    position: relative;
}
.crm-col-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.crm-col-toggle-btn:hover,
.crm-col-toggle-btn[aria-expanded="true"] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151;
}
.crm-col-toggle-menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    padding: 8px 12px;
    min-width: 190px;
}
/* !important throughout: this is a plain <button> with no other classes, so
   it inherits this theme's native/reset button chrome (grey background,
   border) at a specificity this one class can't otherwise beat reliably. */
.crm-col-toggle-select-all {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    color: #2563eb !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 0 8px !important;
    margin-bottom: 8px;
    cursor: pointer;
}
.crm-col-toggle-select-all:hover {
    text-decoration: underline;
}
.crm-col-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
    white-space: nowrap;
}

/* table-layout:fixed (needed for predictable resize/show-hide math) gives
   unsized columns — Select and Actions, the only ones with no data-column —
   whatever width the browser's auto-distribution leaves over. A "width:1%"
   shrink-to-content hint (what the Properties table's own Select column
   effectively gets for free under its default table-layout:auto) does NOT
   work here: fixed layout takes a declared width literally rather than as a
   hint, so 1% of the table's full width under-allocated both cells. Explicit
   pixel widths instead — Select is always the leading column when present
   (:first-child, falling through harmlessly to whatever real data-column
   happens to lead when it's absent, e.g. Deals without bulk-delete) and only
   ever holds a small checkbox; Actions is always trailing (:last-child) and
   needs more room than that despite its body cells only holding a small icon
   trigger, because its *header* still carries the text label "Actions". */
table[data-crm-columns] th:not([data-column]),
table[data-crm-columns] td:not([data-column]) {
    white-space: nowrap;
}
table[data-crm-columns] th:first-child:not([data-column]),
table[data-crm-columns] td:first-child:not([data-column]) {
    width: 48px;
}
table[data-crm-columns] th:last-child:not([data-column]),
table[data-crm-columns] td:last-child:not([data-column]) {
    width: 90px;
}

/* Resizing a data column down shrinks its cell box, but its content (text,
   badges, multi-line blocks) doesn't shrink with it under table-layout:fixed
   — without this, that content keeps its natural width and visibly spills
   into the next column instead of being clipped. word-break covers an
   unbroken long string (e.g. an email address) that would otherwise force
   the overflow before wrapping ever gets a chance to help. */
table[data-crm-columns] th[data-column],
table[data-crm-columns] td[data-column] {
    overflow: hidden;
    word-break: break-word;
}

/* Resize handle — a faint divider is visible at rest (rather than only on
   hover) so the boundary reads as draggable before a user ever finds it by
   accident, brightening to an accent color on hover/drag for confirmation.
   The hit area (14px) is kept wider than the visible line (2px) so it's easy
   to grab without needing pixel-perfect aim. */
table[data-crm-columns] th {
    position: relative;
}
.crm-col-resize-handle {
    position: absolute;
    top: 15%;
    right: -4px;
    width: 14px;
    height: 70%;
    cursor: col-resize;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crm-col-resize-handle::after {
    content: '';
    width: 2px;
    height: 100%;
    background: rgba(17, 24, 39, .14);
    border-radius: 1px;
    transition: background-color .15s, width .15s;
}
.crm-col-resize-handle:hover::after,
.crm-col-resize-handle.is-active::after {
    width: 3px;
    background: #2563eb;
}