/* Miscenalleous styling that DOES NOT have to do with sidebars.
   PLEASE use sidebar.css for anything related to the sidebars.
*/

/* ─── Datatables ─────────────────────────────────────────────────────────── */

table.dataTable tbody tr.selected > * {
    background-color: #cfe2ff !important;
    color:            inherit !important;
}

table.dataTable tbody tr td a {
    position: relative;
    z-index:  10;
}

th.select-checkbox {
    width: 20px !important;
}

/* ─── Row-level permission restrictions ──────────────────────────────────── */

tr.row-restricted td {
    opacity: 0.5;
    cursor:  not-allowed;
}

tr.row-restricted-flash td {
    background-color: #fff3cd !important;
    transition:       background-color 0.3s ease;
}


/* ─── Notifications Slack default label ──────────────────────────────────── */

#deliverSlack:disabled + label {
    opacity: 1;
    color: inherit;
}

/* ── Dark mode overrides for custom elements ──────────────────────────────── */

[data-bs-theme="dark"] .sidebar {
    border-right-color: var(--bs-border-color);
    background-color:   var(--bs-body-bg);
}

[data-bs-theme="dark"] .sidebar .nav-link {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color:      #fff !important;
}

/* Masquerade banner stays orange in both modes */
[data-bs-theme="dark"] #masquerade-banner {
    background: #ff6b00;
    color:      #fff;
}

/* ── Dark mode: sidebar toggle buttons ───────────────────────────────────── */

[data-bs-theme="dark"] .bi-layout-sidebar {
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .bi-layout-sidebar:hover {
    color:      #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Dark mode: DataTables columnControl buttons ─────────────────────────── */

[data-bs-theme="dark"] .dtcc-button-icon {
    color:            rgba(255, 255, 255, 0.75) !important;
    border-color:     rgba(255, 255, 255, 0.2) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .dtcc-button:hover {
    color:            #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Dark mode: notification watch config items ───────────────────────────── */
[data-bs-theme="dark"] .watch-config-item {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .watch-config-item .bg-light {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .watch-config-item code {
    color: var(--bs-body-color);
}

/* ── Dark mode: share user chips ──────────────────────────────────────────── */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color:            var(--bs-body-color) !important;
    border-color:     var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .badge.bg-light .btn-close {
    filter: invert(1);
}

/* Read-only column in edit mode */
.dt-edit-mode .col-readonly {
    opacity:    0.5;
    cursor:     not-allowed !important;
}

/* ─── Table header styling ───────────────────────────────────────────────── */

table.dataTable thead > tr > td {
    border-bottom: 2px solid #6c757d !important;
    font-weight:500;
}

[data-bs-theme="dark"] table.dataTable thead > tr > td {
    background-color: var(--bs-secondary-bg) !important;
    border-bottom: 2px solid var(--bs-border-color-translucent) !important;
}

/* ── Dark mode: columnControl searchList dropdown ────────────────────────── */

[data-bs-theme="dark"] .dtcc-dropdown {
    background-color: var(--bs-body-bg) !important;
    border-color:     var(--bs-border-color) !important;
    color:            var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dtcc-search input[type="search"],
[data-bs-theme="dark"] .dtcc-search input[type="text"],
[data-bs-theme="dark"] .dtcc-search select,
[data-bs-theme="dark"] .dtcc-list-search {
    background-color: var(--bs-secondary-bg) !important;
    color:            var(--bs-body-color) !important;
    border-color:     var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .dtcc-search-type-icon path {
    fill: var(--bs-body-color) !important;
}
 
[data-bs-theme="dark"] .dtcc-search-type-icon svg,
[data-bs-theme="dark"] .dtcc-search-icon svg {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dtcc-search-type-icon, 
[data-bs-theme="dark"] .dtcc-search-icon {
    fill: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dtcc-button {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dtcc-button:hover {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .dtcc-search .dtcc-searchList-select-all,
[data-bs-theme="dark"] .dtcc-search .dtcc-searchList-deselect {
    color: var(--bs-body-color) !important;
}

/* ── columnControl searchList width ─────────────────────────────────────── */

.dtcc-dropdown {
    min-width: 300px !important;
}

/* ── Table scroll container — fixed viewport height ─────────────────────── */

.dt-scroll-body {
    max-height: none !important;
    height:     calc(100vh - 275px) !important;
    overflow-y: auto !important;
}