/*
 * Column visibility panel only.
 *
 * An earlier version of this file restyled every button in the system —
 * radius, weight, semantic colours, the lot. That was too broad: it changed
 * screens nobody had asked about and made the app inconsistent with itself
 * mid-rollout. All of that has been removed. Buttons now render exactly as the
 * theme intends, with their original colours.
 *
 * What remains is the one thing that was actually asked for: the column
 * visibility menu, which shipped as a flat blue block of white text giving no
 * indication of which columns were switched on — the single thing the control
 * exists to tell you.
 */

/* ------------------------------------------------------------------ */
/* Export buttons — light tints                                         */
/* ------------------------------------------------------------------ */

/*
 * Scoped strictly to DataTables' own export buttons (.dt-button). The Add and
 * Download Excel buttons are .tw-dw-btn anchors and are deliberately not
 * matched by anything here, so their gradient is untouched.
 */

.dt-buttons .dt-button {
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-weight: 600;
}

.dt-buttons .dt-button:hover {
    filter: brightness(.97);
}

/* Declared before the specific rules below: colvis and pdf are both
   "collection" buttons, so a generic rule placed after them would win and
   tint Column visibility with the PDF colour. */
.dt-buttons .buttons-collection {
    background: #eef1f6 !important; color: #3f4a5a !important; border-color: #dfe4ec !important;
}

.dt-buttons .buttons-csv {
    background: #e8f6ee !important; color: #12704a !important; border-color: #cfe9dc !important;
}
.dt-buttons .buttons-excel {
    background: #e6f4ef !important; color: #146b4f !important; border-color: #cde7dd !important;
}
.dt-buttons .buttons-print {
    background: #eef1f6 !important; color: #3f4a5a !important; border-color: #dfe4ec !important;
}
.dt-buttons .buttons-colvis {
    background: #eeecfd !important; color: #4a3ac0 !important; border-color: #ddd8fa !important;
}
.dt-buttons .buttons-pdf {
    background: #fdeeec !important; color: #ad3125 !important; border-color: #f8d9d5 !important;
}
.dt-buttons .buttons-copy {
    background: #fcf3e3 !important; color: #8b5a09 !important; border-color: #f3e3c6 !important;
}

/* ------------------------------------------------------------------ */
/* Column visibility panel                                              */
/* ------------------------------------------------------------------ */

.dt-button-collection,
div.dt-button-collection {
    background: #fff !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .14) !important;
    padding: 7px !important;
    min-width: 232px;
    max-width: calc(100vw - 24px);
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 2001;
}

.dt-button-collection .dt-button,
div.dt-button-collection .dt-button {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 9px;
    width: 100% !important;
    height: auto !important;
    min-height: 40px;
    margin: 0 0 2px !important;
    padding: 8px 11px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
}

/*
 * The label lives in a <span> inside the button, and the theme paints that
 * span blue — which is why the panel showed a ragged column of blue pills of
 * different widths next to the tick boxes. Flatten the span so the row reads
 * as one line of text.
 */
.dt-button-collection .dt-button span,
div.dt-button-collection .dt-button span {
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: inherit !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    text-align: left;
}

.dt-button-collection .dt-button:hover {
    background: #f4f6f9 !important;
}

/* A row that stays highlighted after being tapped looks stuck. */
.dt-button-collection .dt-button:focus {
    outline: none;
}

/* Header added by mobile-tables.js so the panel reads as a menu with a
   purpose rather than a floating list. */
.dt-collection-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 11px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef0f4;
}

.dt-collection-title strong {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.dt-collection-title span {
    font-size: 11.5px;
    color: #8a8f98;
    font-weight: 500;
}

/* The tick box: empty when the column is hidden, filled when it is shown. */
.dt-button-collection .dt-button::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cfd5df;
    border-radius: 5px;
    background: #fff;
    transition: background-color .12s ease, border-color .12s ease;
}

.dt-button-collection .dt-button.active {
    color: #111827 !important;
    font-weight: 600 !important;
}

.dt-button-collection .dt-button.active::before {
    background: #2f5fe0;
    border-color: #2f5fe0;
    /* Tick drawn inline so no icon font is required. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
}

.dt-button-background {
    background: rgba(17, 24, 39, .22) !important;
}

/* On a phone, anchor the panel to the bottom rather than letting it hang off
   the right edge and get clipped. */
@media (max-width: 767px) {
    .dt-button-collection,
    div.dt-button-collection {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 66vh;
        border-radius: 16px !important;
    }

    .dt-button-collection .dt-button {
        min-height: 46px;
        font-size: 15px !important;
    }
}