/* ── Admin Verteco custom overrides on top of Tabler ── */

/* Inline editable cells */
td.editable {
    cursor: text;
    transition: background 150ms ease;
}
td.editable:hover {
    background: var(--tblr-primary-lt);
}
td.editable:focus {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
    background: var(--tblr-primary-lt);
}

/* Inline selects should blend with the table cell */
td.editable-select .inline-select {
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 24px 2px 4px;
    min-width: 110px;
    font-size: inherit;
}
td.editable-select:hover .inline-select {
    border-color: var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}
td.editable-select .inline-select:focus {
    border-color: var(--tblr-primary);
    background: var(--tblr-bg-surface);
    outline: none;
    box-shadow: 0 0 0 2px var(--tblr-primary-lt);
}

/* Notifications container */
#notification {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
}

/* Make the table horizontally scrollable while card stays clean */
.card .table-responsive {
    overflow-x: auto;
}

/* Truncated last-edited-by */
td[data-field="last_edited_by"] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Saving indicator for cells */
td.saving {
    opacity: 0.5;
    pointer-events: none;
}

/* Button loading state */
.btn.loading {
    pointer-events: none;
    opacity: 0.65;
}

/* Sortable table headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover {
    color: var(--tblr-primary);
}
th.sortable::after {
    content: ' ↕';
    opacity: 0.3;
    font-size: 0.75em;
}
th.sortable.sort-asc::after {
    content: ' ↑';
    opacity: 1;
}
th.sortable.sort-desc::after {
    content: ' ↓';
    opacity: 1;
}

/* Compact icon-only sidebar */
@media (min-width: 992px) {
    .sidebar-compact {
        width: 60px !important;
        min-width: 60px !important;
    }
    .sidebar-compact .nav-link {
        padding: 0.75rem 0 !important;
    }
    .sidebar-compact .nav-link-icon {
        font-size: 1.3rem;
    }
    .sidebar-compact + .page-wrapper {
        margin-left: 60px !important;
    }
}

/* Sync indicator (top bar) */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}