/**
 * sc_col_mgr.css — Universal Column Manager (28 Apr 2026)
 * Grow24 AI · Token-only · Zero hardcoded colors (Rule 15)
 *
 * Classes:
 *   .scm-btn            — column-chooser icon button (absolute top-right of container)
 *   .scm-btn--active    — button pressed / panel open state
 *   .scm-panel          — floating settings panel
 *   .scm-panel--open    — animated open state
 *   .scm-col-item       — row in the panel list
 *   .scm-col-item--locked   — non-hideable column (lock icon, no drag)
 *   .scm-col-item--dragging — being dragged
 *   .scm-col-item--over     — drop target highlight
 */

/* ── Column-chooser button ──────────────────────────────────────────── */
.scm-btn {
    position       : absolute;
    top            : 50%;
    right          : var(--space-2, 8px);
    transform      : translateY(-50%);
    z-index        : 5;

    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 22px;
    height         : 16px;
    min-height     : 0;
    padding        : 0;

    background     : var(--color-surface-elevated, #fff);
    border         : 1px solid var(--color-border-default, #ddd);
    border-radius  : var(--radius-sm, 4px);
    color          : var(--color-text-muted, #888);
    cursor         : pointer;
    transition     : background var(--transition-fast, 120ms),
                     color      var(--transition-fast, 120ms),
                     border-color var(--transition-fast, 120ms),
                     box-shadow var(--transition-fast, 120ms);
}

.scm-btn:hover {
    background  : var(--color-surface-hover, #f5f5f5);
    color       : var(--color-text-body, #111);
    border-color: var(--color-brand, #4f46e5);
    box-shadow  : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.10));
}

.scm-btn--active,
.scm-btn[aria-expanded="true"] {
    background  : var(--color-brand-soft, rgba(79,70,229,.10));
    color       : var(--color-brand, #4f46e5);
    border-color: var(--color-brand, #4f46e5);
}

/* ── Floating panel ─────────────────────────────────────────────────── */
.scm-panel {
    position      : fixed;         /* body-appended — immune to overflow-x:auto clipping */
    /* top/right set dynamically in _openPanel via JS */
    z-index       : var(--z-dropdown, 400);

    width         : 270px;
    min-width     : 220px;
    max-height    : 480px;

    display       : flex;
    flex-direction: column;

    background    : var(--color-surface-elevated, #fff);
    border        : 1px solid var(--color-border-default, #ddd);
    border-radius : var(--radius-xl, 12px);
    box-shadow    : var(--shadow-xl, 0 8px 32px rgba(0,0,0,.15));

    /* Transition */
    opacity       : 0;
    transform     : translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition    : opacity  var(--transition-base, 180ms) var(--ease-out, ease),
                    transform var(--transition-base, 180ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    pointer-events: none;
}

.scm-panel--open {
    opacity       : 1;
    transform     : translateY(0) scale(1);
    pointer-events: all;
}

/* ── Panel header ─────────────────────────────────────────────────── */
.scm-panel-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : var(--space-3, 12px) var(--space-4, 16px) var(--space-2, 8px);
    border-bottom  : 1px solid var(--color-border-subtle, #eee);
    flex-shrink    : 0;
}

.scm-panel-title {
    font-size  : var(--text-sm, 13px);
    font-weight: 600;
    color      : var(--color-text-body, #111);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.scm-panel-close {
    background  : none;
    border      : none;
    cursor      : pointer;
    color       : var(--color-text-muted, #888);
    font-size   : 18px;
    line-height : 1;
    padding     : 2px 4px;
    border-radius: var(--radius-sm, 4px);
    transition  : color var(--transition-fast, 120ms);
}
.scm-panel-close:hover { color: var(--color-text-body, #111); }

/* ── Hint line ──────────────────────────────────────────────────────── */
.scm-panel-hint {
    margin      : 0;
    padding     : var(--space-1, 4px) var(--space-4, 16px);
    font-size   : var(--text-xs, 11px);
    color       : var(--color-text-muted, #888);
    flex-shrink : 0;
}

/* ── Column list ────────────────────────────────────────────────────── */
.scm-col-list {
    flex        : 1 1 auto;
    overflow-y  : auto;
    padding     : var(--space-1, 4px) var(--space-2, 8px);
}

/* Custom scrollbar */
.scm-col-list::-webkit-scrollbar { width: 5px; }
.scm-col-list::-webkit-scrollbar-track { background: transparent; }
.scm-col-list::-webkit-scrollbar-thumb {
    background: var(--color-border-default, #ddd);
    border-radius: 99px;
}

/* ── Individual column item ─────────────────────────────────────────── */
.scm-col-item {
    display       : flex;
    align-items   : center;
    gap           : var(--space-2, 8px);
    padding       : var(--space-2, 8px) var(--space-2, 8px);
    border-radius : var(--radius-md, 6px);
    cursor        : grab;
    user-select   : none;
    transition    : background var(--transition-fast, 120ms);
    position      : relative;
}

.scm-col-item:hover {
    background: var(--color-surface-hover, #f5f5f5);
}

.scm-col-item--locked {
    cursor: default;
    opacity: 0.65;
}

.scm-col-item--dragging {
    opacity   : 0.45;
    cursor    : grabbing;
    background: var(--color-surface-hover, #f5f5f5);
}

.scm-col-item--over {
    background  : var(--color-brand-soft, rgba(79,70,229,.08));
    border-radius: var(--radius-md, 6px);
}
.scm-col-item--over::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    height     : 2px;
    background : var(--color-brand, #4f46e5);
    border-radius: var(--radius-sm, 4px);
}

/* ── Drag handle ────────────────────────────────────────────────────── */
.scm-drag-handle {
    display     : flex;
    align-items : center;
    justify-content: center;
    width       : 18px;
    flex-shrink : 0;
    color       : var(--color-text-muted, #aaa);
    cursor      : inherit;
}

.scm-grip-svg {
    display : block;
    opacity : 0.55;
    transition: opacity var(--transition-fast, 120ms);
}
.scm-col-item:not(.scm-col-item--locked):hover .scm-drag-handle {
    color: var(--color-text-body, #555);
}
.scm-col-item:not(.scm-col-item--locked):hover .scm-grip-svg {
    opacity: 1;
}

/* ── Column label + checkbox ────────────────────────────────────────── */
.scm-col-label {
    display    : flex;
    align-items: center;
    gap        : var(--space-2, 8px);
    flex       : 1;
    font-size  : var(--text-sm, 13px);
    color      : var(--color-text-body, #111);
    cursor     : pointer;
}
.scm-col-item--locked .scm-col-label {
    cursor: default;
}

.scm-col-check {
    width        : 15px;
    height       : 15px;
    accent-color : var(--color-brand, #4f46e5);
    cursor       : pointer;
    flex-shrink  : 0;
}
.scm-col-item--locked .scm-col-check {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Sub-part rows (independent toggles inside a multi-value column cell) ──
   e.g. a "Name + SKU" column shows two indented sub-rows: Product name / SKU code. */
.scm-part-item {
    display      : flex;
    align-items  : center;
    padding      : 3px var(--space-2, 8px);
    margin       : 1px 0 1px var(--space-6, 28px);  /* indent under the parent column row */
    border-left  : 2px solid var(--color-border-subtle, #eee);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    transition   : background var(--transition-fast, 120ms);
}
.scm-part-item:hover { background: var(--color-surface-hover, #f5f5f5); }

.scm-part-label {
    display    : flex;
    align-items: center;
    gap        : var(--space-2, 8px);
    flex       : 1;
    font-size  : var(--text-xs, 11px);
    color      : var(--color-text-muted, #666);
    cursor     : pointer;
}

.scm-part-check {
    width       : 13px;
    height      : 13px;
    accent-color: var(--color-brand, #4f46e5);
    cursor      : pointer;
    flex-shrink : 0;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.scm-panel-footer {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : var(--space-2, 8px) var(--space-4, 16px) var(--space-3, 12px);
    border-top     : 1px solid var(--color-border-subtle, #eee);
    flex-shrink    : 0;
}

.scm-reset-btn {
    background  : none;
    border      : none;
    cursor      : pointer;
    font-size   : var(--text-xs, 11px);
    color       : var(--color-text-muted, #888);
    padding     : 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition  : color var(--transition-fast, 120ms);
}
.scm-reset-btn:hover { color: var(--color-brand, #4f46e5); }

.scm-save-status {
    font-size : var(--text-xs, 11px);
    color     : var(--color-success-solid, #22c55e);
    font-weight: 500;
    min-width : 60px;
    text-align: right;
}

/* ── Prevent button overlap on last header cell ─────────────────────── */
/* When SCColMgr is active, push last th's content left so the 30×30 button
   at top:8px/right:8px doesn't sit on top of the sort arrow or label text. */
.scm-active table thead th:last-child {
    padding-right: 44px; /* 30px btn + 8px offset + 6px gap */
}

/* ── Mobile: full-width panel on narrow screens ─────────────────────── */
@media (max-width: 480px) {
    .scm-panel {
        width   : calc(100vw - var(--space-4, 16px) * 2);
        right   : var(--space-4, 16px);
        max-height: 65vh;
    }
}