/* table-interactions.css */
/* Table interactions: drag&drop, multi-select, action buttons, hover buttons */

/* ==========================================
   DRAG & DROP ДЛЯ ТАБЛИЦЫ АКТИВНОСТЕЙ
   ========================================== */

/* Строка во время перетаскивания */
.competencies-table tbody tr {
    transition: opacity 0.2s ease;
    position: relative; /* Для позиционирования выезжающих кнопок */
}

.competencies-table tbody tr.dragging {
    opacity: 0.4;
    background-color: rgba(var(--brand-primary-rgb), 0.1);
}

/* Строка-цель при наведении */
.competencies-table tbody tr.drag-over-row {
    border-top: 3px solid var(--primary-color);
    background-color: rgba(var(--color-info-rgb), 0.1);
}

/* ✅ НОВОЕ: Отдельная колонка для drag handle */
.competencies-table tbody tr td.drag-handle-cell {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
    overflow: visible;
}

/* Drag handle - реальный элемент внутри отдельной колонки */
.row-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--label-color);
    opacity: 0;
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
    font-size: 20px;
    width: 24px;
    height: 24px;
    cursor: grab;
    user-select: none;
}

.competencies-table tbody tr:hover .row-drag-handle {
    opacity: 0.6;
}

.row-drag-handle:hover {
    opacity: 1 !important;
    color: var(--primary-color);
}

.row-drag-handle:active {
    cursor: grabbing;
}

/* ✅ НОВОЕ: Стили для редактируемой ячейки с порядковым номером */
.sequence-number-cell {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    min-width: 30px;
    max-width: 50px;
    padding: 2px 4px;
    text-align: left;
    border-radius: 4px;
    outline: none;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

.sequence-number-cell:hover {
    background-color: var(--bg-hover);
}

.sequence-number-cell:focus {
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 2px var(--brand-primary);
}

.sequence-number-cell:empty::before {
    content: '1';
    color: var(--text-tertiary);
}

/* ==========================================
   MULTI-SELECT ROWS
   ========================================== */

/* Selected row styling */
tr.row-selected {
    background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.15)) !important;
}

tr.row-selected:hover {
    background-color: var(--color-primary-bg-hover, rgba(59, 130, 246, 0.25)) !important;
}

/* ✅ FIX: Selected row styling for sticky columns (they have their own opaque background) */
/* Must use SOLID color (not transparent) to match the row selection visual appearance */
/* rgba(59, 130, 246, 0.15) on white #fff = approximately #e0ecfd */
/* rgba(59, 130, 246, 0.25) on white #fff = approximately #ccdffb */
tr.row-selected td:nth-child(1),
tr.row-selected td:nth-child(2),
tr.row-selected td:nth-child(3),
tr.row-selected td:nth-child(4) {
    background-color: #e0ecfd !important;
}

tr.row-selected:hover td:nth-child(1),
tr.row-selected:hover td:nth-child(2),
tr.row-selected:hover td:nth-child(3),
tr.row-selected:hover td:nth-child(4) {
    background-color: #ccdffb !important;
}

/* ✅ FIX: Action buttons panel background for selected rows */
tr.row-selected .activity-actions {
    background: transparent;
}

tr.row-selected:hover .activity-actions {
    background: linear-gradient(to right, transparent, #ccdffb 20%, #ccdffb);
}

tr.row-selected .activity-actions:hover {
    background: linear-gradient(to right, transparent, #ccdffb 20%, #ccdffb);
}

/* ==========================================
   ROW CHECKBOX COLUMN
   ========================================== */

/* Checkbox cell styling */
.row-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 1.5px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-primary);
    margin: 0 auto;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

/* Hover state */
tr:hover .row-checkbox {
    border-color: var(--text-tertiary);
}

/* Selected state */
tr.row-selected .row-checkbox {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
}

/* Checkbox icon - hidden by default */
.row-checkbox .checkbox-icon {
    font-size: 14px;
    color: var(--brand-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Show checkbox when row is selected */
tr.row-selected .row-checkbox .checkbox-icon {
    opacity: 1;
    color: white;
}

/* Checkbox cell column width */
th.col-checkbox,
td:has(.row-checkbox) {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 4px !important;
    text-align: center;
}

/* Select-all checkbox in header - same size as row-checkbox */
.select-all-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    /* Dark theme support - custom checkbox styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    border: 2px solid var(--border-secondary, #6b7280) !important;
    border-radius: 4px !important;
    transition: all 0.15s ease;
    position: relative;
}

.select-all-checkbox:hover {
    border-color: var(--text-tertiary, #9ca3af) !important;
}

.select-all-checkbox:checked {
    background-color: var(--brand-primary, #6366f1) !important;
    border-color: var(--brand-primary, #6366f1) !important;
}

.select-all-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Prevent text selection when shift-clicking */
.activity-table.selecting-rows {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Selection count indicator */
.selection-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================
   ACTION BUTTONS IN TABLE - NEW APPROACH
   ========================================== */

/* Wrapper for name column with buttons */
.name-column-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
}

/* Container for name and tags - stacked vertically */
.name-and-tags {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-name-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Placeholder for activities without name */
.untitled-placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Buttons positioned at the right edge of name column */
.activity-actions {
    position: absolute;
    right: -16px; /* Start outside the column */
    top: 50%;
    transform: translateY(-50%) translateX(100%); /* Hidden to the right */
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    padding-left: 4rem; /* Gradient on the left */
    background: transparent; /* ✅ По умолчанию прозрачный */
    border-radius: var(--radius-sm);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* ✅ НЕТ transition для background - мгновенная смена */
    pointer-events: none;
    white-space: nowrap;
    z-index: 5; /* Higher than other content in the cell */
}

/* Show buttons on row hover - slide in from right */
tr:hover .activity-actions {
    transform: translateY(-50%) translateX(0); /* Slide into view */
    background: linear-gradient(
        to right,
        transparent,
        var(--bg-hover) 20%,
        var(--bg-hover)
    ); /* ✅ Фон появляется при hover */
    pointer-events: all;
}

/* Keep buttons visible when hovering over them */
.activity-actions:hover {
    transform: translateY(-50%) translateX(0);
    background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover));
    pointer-events: all;
}

/* Special background for rows on hold */
tr[data-on-hold='true'] .activity-actions {
    background: transparent; /* ✅ По умолчанию прозрачный */
}

tr[data-on-hold='true']:hover .activity-actions {
    background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover)); /* ✅ Фон при hover */
}

/* Special background for locked rows */
tr.activity-locked .activity-actions {
    background: transparent; /* ✅ По умолчанию прозрачный */
}

tr.activity-locked:hover .activity-actions {
    background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover)); /* ✅ Фон при hover */
}

.btn-icon {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon .material-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Keep step-row buttons visible on hover (for modal) */
.step-row:hover .btn-icon {
    opacity: 1;
}

.btn-icon:hover {
    background-color: var(--bg-hover);
}

.btn-icon-hold .material-icons {
    transition: color 0.2s ease;
}

.btn-icon-hold:hover {
    background-color: var(--bg-hover);
}

.btn-icon-hold:hover .material-icons {
    color: var(--text-primary);
}

/* Active state when activity is on hold */
.btn-icon-hold.hold-active {
    opacity: 1; /* Always visible as status indicator */
}

.btn-icon-hold.hold-active .material-icons {
    color: var(--color-warning);
}

.btn-icon-hold.hold-active:hover {
    background-color: var(--color-warning-bg);
}

.btn-icon-hold.hold-active:hover .material-icons {
    color: var(--color-warning);
}

/* Unlock button styles (replaces Hold when activity is locked for editing) */
.btn-icon-unlock {
    opacity: 1; /* Always visible as status indicator */
}

.btn-icon-unlock .material-icons {
    color: var(--color-warning);
    transition: color 0.2s ease;
}

.btn-icon-unlock:hover {
    background-color: var(--color-warning-bg);
}

.btn-icon-unlock:hover .material-icons {
    color: var(--color-warning);
}

/* Lock avatar styles */
.lock-avatar {
    display: inline-flex;
    margin-left: 8px;
}

.lock-avatar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
}

.btn-icon-edit:hover .material-icons {
    color: var(--brand-primary);
}

.btn-icon-delete:hover .material-icons {
    color: var(--color-error);
}

/* Folder icon button styling */
.btn-icon-folder:hover .material-icons {
    color: var(--color-warning);
}

/* ==========================================
   DARK THEME OVERRIDES
   ========================================== */

/* Dark theme: Selected row sticky columns background
   rgba(59, 130, 246, 0.15) on dark #111827 = approximately #1a2744
   rgba(59, 130, 246, 0.25) on dark #111827 = approximately #1e3a5f */
[data-theme='dark'] tr.row-selected td:nth-child(1),
[data-theme='dark'] tr.row-selected td:nth-child(2),
[data-theme='dark'] tr.row-selected td:nth-child(3),
[data-theme='dark'] tr.row-selected td:nth-child(4) {
    background-color: #1a2744 !important;
}

[data-theme='dark'] tr.row-selected:hover td:nth-child(1),
[data-theme='dark'] tr.row-selected:hover td:nth-child(2),
[data-theme='dark'] tr.row-selected:hover td:nth-child(3),
[data-theme='dark'] tr.row-selected:hover td:nth-child(4) {
    background-color: #1e3a5f !important;
}

/* Dark theme: Action buttons panel background for selected rows */
[data-theme='dark'] tr.row-selected:hover .activity-actions {
    background: linear-gradient(to right, transparent, #1e3a5f 20%, #1e3a5f);
}

[data-theme='dark'] tr.row-selected .activity-actions:hover {
    background: linear-gradient(to right, transparent, #1e3a5f 20%, #1e3a5f);
}