/* ============================================
   ToxicKaluchi Neon DataTables Theme
   ============================================ */
/* Table borders */
table.dataTable {
    border: 2px solid rgba(4, 217, 255, 0.3);
    background-color: transparent;
    background: none;
    --bs-table-bg: transparent;
}

/* Table header */
table.dataTable thead th {
    background-image: linear-gradient(to top right, rgba(91, 69, 244, .3), rgba(4, 217, 255, .3));
    border: 2px solid rgba(4, 217, 255, 0.3);
    color: var(--tk-slate-gray);
    text-shadow: 1px 1px 3px var(--tk-void-purple);
    text-align: center;
    padding: 0.5rem;
}
table.dataTable thead th.watched {
    max-width: 2rem;
}
table.dataTable thead th.image {
    max-width: 5.625rem;
}
table.dataTable thead th.item {
    text-align: left;
}
table.dataTable thead th.genre,
table.dataTable thead th.watch {
    max-width: 5rem;
}
table.dataTable thead th.released {
    max-width: 6rem;
}
table.dataTable thead th.run-time,
table.dataTable thead th.date-watched {
    max-width: 7rem;
}

table.dataTable thead>tr>th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after {
    border-top: var(--dt-order-arrow-height) solid var(--tk-lavender);
    opacity: .8;
}
table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before {
    border-bottom: var(--dt-order-arrow-height) solid var(--tk-lavender);
    opacity: .8;
}
table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before {
    border-bottom-color: var(--tk-kaluchi);
    opacity: 1;
}

table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after {
    border-top-color: var(--tk-kaluchi);
    opacity: 1;
}


#disney-pixar-table_wrapper {
    a {
        color: var(--tk-lavender);
    }
    a:hover {
        color: var(--tk-kaluchi);
    }
    .row.mb-3 {
        display: flex;
        justify-content: space-between;
        padding: .75rem 1.625rem;
        margin: 0rem !important;
        border-bottom: 4px solid rgba(4, 217, 255, 1);
        flex-direction: row-reverse;
        box-shadow: inset 0 0 20px rgba(4, 217, 255, 0.6);
        text-shadow: 1px 1px 3px var(--tk-void-purple);
    }
    
    tr.item-watched {
        background:rgba(91, 69, 244, 0.35);
        border: 2px solid rgba(4, 217, 255, 1);
        
    }
    td {
        border-right: 2px solid rgba(4, 217, 255, 1);
    }
    tr.item-watched td {
        border-right: 2px solid rgba(4, 217, 255, 1);
    }
    td.image img {
        max-width: 60px;
    }
    td.item {
        color: var(--tk--off-white);
        text-shadow: 1px 1px 2px var(--tk-void-purple);
    }
    td .notes {
        font-size: 0.875rem;
        line-height: 1rem;
    }
    td.released,
    td.genre,
    td.run-time,
    td.date-watched,
    td.watch {
        color: var(--tk--off-white);
        text-shadow: 1px 1px 2px var(--tk-void-purple);
    }
}
div.dt-container div.dt-paging {
    margin-bottom: 1rem !important;
}
.disabled>.page-link,
.page-link.disabled,
.page-link {
    font-family: var(--tk-font-gaming);
    border: 2px solid var(--tk-blue);
    background-color: #111;
    color: var(--tk-blue);
}
.page-link:hover {
    background-color: var(--tk-royal-blue);
    box-shadow: inset 0 0 20px var(--tk-void-purple);
    color: var(--tk-blue);
    border-color: var(--tk-blue)
}
.active>.page-link,
.page-link.active {
    color: var(--tk-blue);
    background-color: var(--tk-royal-blue);
    border: 2px solid var(--tk-blue);
    box-shadow: inset 0 0 20px var(--tk-void-purple);
}
.dt-info {
    padding: 10px;
    text-shadow: 1px 1px 2px var(--tk-void-purple);
}









/* Search bar */
.dataTables_filter input {
    background: #0b0b0b;
    border: 2px solid var(--tk-toxic);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--tk-plum);
    box-shadow:
        0 0 6px var(--tk-toxic),
        0 0 12px var(--tk-void-purple);
}

.dataTables_filter input:focus {
    outline: none;
    box-shadow:
        0 0 10px var(--tk-toxic),
        0 0 20px var(--tk-royal-blue);
}

/* Length dropdown */
.dataTables_length select {
    background: #0b0b0b;
    border: 2px solid var(--tk-toxic);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--tk-plum);
    box-shadow:
        0 0 6px var(--tk-toxic),
        0 0 12px var(--tk-void-purple);
}



/* Hover rows */
table.dataTable tbody tr:hover {
    background-color: rgba(176, 38, 255, 0.15);
    /* plum glow */
    box-shadow:
        /*inset 0 0 20px var(--tk-blue),*/
        inset 0 0 20px var(--tk-void-purple);
}

/* Selected row */
table.dataTable tbody tr.selected {
    background-color: rgba(0, 255, 0, 0.25);
    /* toxic glow */
    box-shadow:
        inset 0 0 12px var(--tk-toxic),
        inset 0 0 24px var(--tk-royal-blue);
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #0b0b0b;
    border: 2px solid var(--tk-toxic);
    border-radius: 6px;
    color: var(--tk-plum) !important;
    margin: 0 4px;
    padding: 6px 12px;
    text-shadow: 0 0 6px var(--tk-toxic);
    transition: all 0.25s ease;
}

/* Pagination hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tk-void-purple);
    color: var(--tk-toxic) !important;
    box-shadow:
        0 0 10px var(--tk-toxic),
        0 0 20px var(--tk-royal-blue),
        0 0 30px var(--tk-void-purple);
}

/* Active page */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--tk-plum);
    color: #fff !important;
    border-color: var(--tk-toxic);
    box-shadow:
        0 0 12px var(--tk-plum),
        0 0 24px var(--tk-royal-blue),
        0 0 36px var(--tk-void-purple);
}










/* FILTER SECTION */
.tk-filter-group {
    margin-bottom: 0.5rem;
}
.tk-filter-panel {
    display: flex;
    gap: .25rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tk-filter-custom-select {
    position: relative;
    width: 100%;
    max-width: 200px;
}

.tk-filter-custom-select select,
.tk-filter-custom-select select:focus,
.tk-filter-custom-select select:focus-within,
.tk-filter-custom-select select:active,
#dt-length-0 {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    padding: .25rem 2.25rem .25rem .825rem;

    font-size: .75rem;
    font-weight: 500;
    color: var(--tk-blue);

    background: #111;
    border: 2px solid var(--tk-blue);
    border-radius: 6px;

    cursor: pointer;
}

#dt-length-0 {
    width: auto;;
}

.tk-filter-custom-select select:hover,
#dt-length-0:hover {
    border: 2px solid var(--tk-royal-blue);
}

/* Custom arrow */
.tk-filter-custom-select:after {
    content: "▼";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 17px;
    font-size: 12px;
    color: var(--tk-plum);
    pointer-events: none;
}
#dt-length-0:after {
    content: "▼";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--tk-plum);
    pointer-events: none;
}

.tk-filter-custom-textbox {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.tk-filter-custom-textbox input,
.tk-filter-custom-textbox:focus,
.dt-search input,
.dt-search input:focus {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: .125rem 2.25rem .125rem .825rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--tk-blue);

    background: #111;
    border: 2px solid var(--tk-blue);
    border-radius: 6px;

    cursor: pointer;
}
.tk-filter-custom-textbox input:hover,
.dt-search input:hover {
    border: 2px solid var(--tk-royal-blue);
}