/* ===========================================
   TABLES.CSS - CENTRALIZED TABLE STYLES
   For Dash DataTables
   Uses UI Kit color palette
   =========================================== */

/* === CSS VARIABLES FOR TABLES === */
:root {
    /* Table Colors - Light Mode */
    --table-bg: #ffffff;
    --table-header-bg: #E9DCCB;
    --table-header-text: #4a4a4a;
    --table-cell-text: #4a4a4a;
    --table-border-color: #d4c4b0;
    --table-row-hover: #f5ebe0;
    --table-row-selected: #dceef3;
    --table-row-stripe: #faf7f4;
    
    /* Filter/Input Colors */
    --table-input-bg: #ffffff;
    --table-input-border: #d4c4b0;
    --table-input-text: #4a4a4a;
    --table-input-placeholder: #999999;
    
    /* Pagination Colors */
    --table-pagination-text: #4a4a4a;
    --table-pagination-active-bg: var(--color-slate, #92B7C2);
    --table-pagination-active-text: #ffffff;
}

/* === BASE TABLE CONTAINER === */
.dash-table-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none !important;
    outline: none !important;
}

/* === TABLE WRAPPER === */
.dash-spreadsheet-container {
    border-radius: 12px;
    overflow: hidden;
    border: none !important;
    outline: none !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner {
    border-radius: 12px;
    border: none !important;
    outline: none !important;
}

/* === EMPTY TABLE STATE === */
/* Target the specific empty/no-data classes */
.dash-spreadsheet-inner.dash-empty-01,
.dash-spreadsheet-inner.dash-no-data,
.dash-spreadsheet-container.dash-empty-01,
.dash-spreadsheet-container.dash-no-data,
.dash-spreadsheet.dash-empty-01,
.dash-spreadsheet.dash-no-data,
div.dash-spreadsheet-inner.dash-spreadsheet.dash-empty-01.dash-no-data,
div.dash-spreadsheet-inner.dash-spreadsheet.dash-empty-01.dash-no-data.dash-fill-width {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove thick border when table is empty/filtered to no results */
.dash-table-container,
.dash-spreadsheet-container,
.dash-spreadsheet-inner,
.dash-spreadsheet-container .dash-spreadsheet-inner,
.dash-spreadsheet-container .dash-spreadsheet-inner table,
.dash-spreadsheet-container .dash-spreadsheet-inner tbody,
.dash-spreadsheet-container .dash-spreadsheet-inner tbody:empty {
    border: none !important;
    outline: none !important;
    box-shadow: none;
}

/* Target the cell-table which has inline border styles */
.dash-spreadsheet-container .cell-table,
.dash-spreadsheet-inner .cell-table,
table.cell-table {
    border: none !important;
    border-collapse: collapse !important;
    outline: none !important;
}

/* Target dt-table-container__row elements */
.dt-table-container__row,
.dt-table-container__row-0,
.dt-table-container__row-1,
div[class*="dt-table-container__row"] {
    border: none !important;
    outline: none !important;
}

/* Target the cell elements */
.dash-spreadsheet-inner .cell,
.dash-spreadsheet-inner div[class*="cell-"],
.dash-fixed-content {
    border: none !important;
    outline: none !important;
}

/* Override the thick gray border on empty/no-data state */
.dash-no-data,
.dash-empty-01,
.dash-spreadsheet-inner.dash-no-data,
.dash-spreadsheet-container.dash-no-data {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-width: 0 !important;
}

/* Re-apply only the subtle shadow to the main container */
.dash-table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Maintain rounded corners when empty */
.dash-table-container:empty,
.dash-spreadsheet-container:empty,
.dash-spreadsheet-inner:empty {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove any focus/active borders on the table elements */
.dash-spreadsheet-container .dash-spreadsheet-inner table,
.dash-spreadsheet-container .dash-spreadsheet-inner table:focus,
.dash-spreadsheet-container .dash-spreadsheet-inner table:active,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:active,
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* === REMOVE TABLE FOCUS/SELECTION OUTLINES === */
/* This removes the border/stroke that appears when clicking elements */
.dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Remove ALL focus-related borders that cause table to "shrink" */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input-active,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.cell--selected,
.dash-table-container.focused,
.dash-spreadsheet-container.focused,
.dash-spreadsheet-inner.focused {
    background-color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Remove the "focused" box shadow on cells */
.dash-spreadsheet-container .dash-spreadsheet-inner .input-active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-cell,
.dash-spreadsheet-container .focused,
.dash-spreadsheet-inner .focused {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove active cell highlight completely */
.dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.cell--active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-inner td[data-dash-column].focused,
td.dash-cell.focused {
    background-color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Target the table container focus state that causes shrinking */
.dash-table-container:focus,
.dash-table-container:focus-within,
.dash-table-container:focus-visible,
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:focus-within,
.dash-spreadsheet-container:focus-visible,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:focus-within,
.dash-spreadsheet-inner:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove any inset borders/shadows on focus */
.dash-table-container *:focus,
.dash-table-container *:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
}

/* === TABLE BORDERS === */
.dash-spreadsheet-container .dash-spreadsheet-inner *,
.dash-spreadsheet-container .dash-spreadsheet-inner *:before,
.dash-spreadsheet-container .dash-spreadsheet-inner *:after {
    border-color: var(--table-border-color) !important;
}

/* === TABLE HEADER === */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
}

/* Add gap between column name and sort arrows */
.dash-spreadsheet-container .dash-spreadsheet-inner th .column-header--sort,
.dash-spreadsheet-container .dash-spreadsheet-inner th .dash-header-column {
    gap: 8px !important;
}

/* Alternative: target the header cell content div */
.dash-spreadsheet-container .dash-spreadsheet-inner th > div {
    gap: 8px !important;
}

/* Round the top corners of first/last header cells */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:first-child th:first-child {
    border-top-left-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:first-child th:last-child {
    border-top-right-radius: 20px !important;
}

/* Round the bottom corners of last row cells */
.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th .column-header-name {
    color: var(--table-header-text) !important;
}

/* === TABLE CELLS === */
.dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--table-bg) !important;
    color: var(--table-cell-text) !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
}

/* === STRIPED ROWS === */
.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:nth-child(even) td {
    background-color: var(--table-row-stripe) !important;
}

/* === ROW HOVER === */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: var(--table-row-hover) !important;
}

/* === SELECTED ROW === */
.dash-spreadsheet-container .dash-spreadsheet-inner tr.row-selected td,
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected {
    background-color: var(--table-row-selected) !important;
}

/* === FILTER INPUTS === */
.dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) {
    background-color: var(--table-input-bg) !important;
    color: var(--table-input-text) !important;
    border: 1px solid var(--table-input-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]):focus {
    border-color: var(--color-slate, #92B7C2) !important;
    box-shadow: 0 0 0 2px rgba(146, 183, 194, 0.2) !important;
    outline: none !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner input::placeholder {
    color: var(--table-input-placeholder) !important;
    font-style: italic;
}

/* === FILTER CASE-SENSITIVE TOGGLE (Aa button) === */
/* Classes: dash-filter--case--sensitive (active) / dash-filter--case--insensitive (inactive) */

/* Inactive state - insensitive (default) */
.dash-spreadsheet-container input.dash-filter--case.dash-filter--case--insensitive,
input.dash-filter--case.dash-filter--case--insensitive,
.dash-spreadsheet-container input[type="button"].dash-filter--case.dash-filter--case--insensitive {
    opacity: 1 !important;
    background-color: #f5f5f5 !important;
    color: #666666 !important;
    border: 1px solid var(--table-input-border) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    margin-right: 8px !important;
}

/* Hover state */
.dash-spreadsheet-container input.dash-filter--case:hover,
input.dash-filter--case:hover {
    opacity: 1 !important;
    background-color: #e0e0e0 !important;
    color: #333333 !important;
}

/* Active/highlighted state - has --sensitive class */
.dash-spreadsheet-container input.dash-filter--case.dash-filter--case--sensitive,
input.dash-filter--case.dash-filter--case--sensitive,
.dash-spreadsheet-container input[type="button"].dash-filter--case.dash-filter--case--sensitive,
input[type="button"].dash-filter--case.dash-filter--case--sensitive {
    opacity: 1 !important;
    background-color: #92B7C2 !important;
    color: #ffffff !important;
    border: 1px solid #6E868D !important;
    border-color: #6E868D !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    min-width: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    margin-right: 8px !important;
}

/* Remove focus outline that creates brown stroke around table */
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:focus-within,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:focus-within,
.dash-table-container:focus,
.dash-table-container:focus-within,
.dash-spreadsheet-container *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove any overlay/veil on the filter row - AGGRESSIVE */
.dash-spreadsheet-container .dash-filter,
.dash-spreadsheet-container .dash-header,
.dash-spreadsheet-container tr.dash-filter,
.dash-spreadsheet-container tr.dash-filter td,
.dash-spreadsheet-container tr.dash-filter th {
    position: relative !important;
    overflow: visible !important;
}

/* Kill ALL pseudo-elements that might create veil */
.dash-spreadsheet-container .dash-filter::before,
.dash-spreadsheet-container .dash-filter::after,
.dash-spreadsheet-container .dash-header::before,
.dash-spreadsheet-container .dash-header::after,
.dash-spreadsheet-container tr.dash-filter::before,
.dash-spreadsheet-container tr.dash-filter::after,
.dash-spreadsheet-container tr.dash-filter td::before,
.dash-spreadsheet-container tr.dash-filter td::after,
.dash-spreadsheet-container .dash-cell::before,
.dash-spreadsheet-container .dash-cell::after,
.dash-spreadsheet-container td::before,
.dash-spreadsheet-container td::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Remove cell focus/selection styling that may cause the veil */
.dash-spreadsheet-container .dash-cell.focused,
.dash-spreadsheet-container .dash-cell.selected,
.dash-spreadsheet-container td.focused,
.dash-spreadsheet-container td.selected,
.dash-spreadsheet-container th.focused,
.dash-spreadsheet-container th.selected,
.dash-spreadsheet-container .cell--selected,
.dash-spreadsheet-container .focused {
    background-color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Make sure filter input wrapper doesn't cover the Aa button */
.dash-spreadsheet-container .dash-filter .dash-cell,
.dash-spreadsheet-container tr.dash-filter td,
.dash-spreadsheet-container .dash-input-cell-value-container,
.dash-spreadsheet-container .cell-value-shadow {
    overflow: visible !important;
    position: relative !important;
}

/* The cell-value-shadow is often the culprit for veils */
.dash-spreadsheet-container .cell-value-shadow,
.dash-spreadsheet-container .dash-cell-value-shadow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure Aa buttons are always clickable */
.dash-spreadsheet-container input.dash-filter--case {
    pointer-events: auto !important;
    z-index: 100 !important;
}

/* === SORT ICONS === */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort {
    color: var(--table-header-text) !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort:hover {
    opacity: 1;
}

/* === PAGINATION === */
.dash-table-container .previous-next-container {
    padding: 12px 16px !important;
    background-color: var(--table-bg) !important;
    border-top: 1px solid var(--table-border-color) !important;
}

.dash-table-container .previous-next-container .page-number,
.dash-table-container .previous-next-container .last-page,
.dash-table-container .previous-next-container .first-page,
.dash-table-container .previous-next-container .previous-page,
.dash-table-container .previous-next-container .next-page {
    color: var(--table-pagination-text) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    transition: all 0.2s ease !important;
}

.dash-table-container .previous-next-container .page-number:hover,
.dash-table-container .previous-next-container .last-page:hover,
.dash-table-container .previous-next-container .first-page:hover,
.dash-table-container .previous-next-container .previous-page:hover,
.dash-table-container .previous-next-container .next-page:hover {
    background-color: var(--table-row-hover) !important;
}

.dash-table-container .previous-next-container .page-number.current {
    background-color: var(--table-pagination-active-bg) !important;
    color: var(--table-pagination-active-text) !important;
    font-weight: 600 !important;
}

/* === CHECKBOX STYLING === */
.dash-spreadsheet-container .dash-spreadsheet-inner input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-slate, #92B7C2);
}

/* === EDITABLE CELLS === */
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--editable {
    cursor: text;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--editable:hover {
    background-color: var(--table-row-hover) !important;
}

/* === NO DATA MESSAGE === */
.dash-table-container .dash-spreadsheet-container .dash-no-data {
    color: var(--table-input-placeholder);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ===========================================
   DARK MODE OVERRIDES
   =========================================== */

.dark-theme {
    /* Table Colors - Dark Mode */
    --table-bg: #2d2d2d;
    --table-header-bg: #3a3a3a;
    --table-header-text: #e0e0e0;
    --table-cell-text: #e0e0e0;
    --table-border-color: #444444;
    --table-row-hover: #404040;
    --table-row-selected: #3d5a63;
    --table-row-stripe: #333333;
    
    /* Filter/Input Colors - Dark Mode */
    --table-input-bg: #2d2d2d;
    --table-input-border: #555555;
    --table-input-text: #e0e0e0;
    --table-input-placeholder: #888888;
    
    /* Pagination Colors - Dark Mode */
    --table-pagination-text: #e0e0e0;
    --table-pagination-active-bg: #6E868D;
}

/* Dark mode specific overrides */
.dark-theme .dash-table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort {
    color: #e0e0e0 !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort:hover {
    color: #ffffff !important;
}

.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]):focus {
    border-color: #6E868D !important;
    box-shadow: 0 0 0 2px rgba(110, 134, 141, 0.3) !important;
}

/* Dark mode filter toggle */
.dark-theme .dash-spreadsheet-container input.dash-filter--case,
.dark-theme input.dash-filter--case {
    opacity: 1 !important;
    border-color: #555555 !important;
    color: #aaaaaa !important;
    background-color: #3a3a3a !important;
}

.dark-theme .dash-spreadsheet-container input.dash-filter--case:hover,
.dark-theme input.dash-filter--case:hover {
    opacity: 1 !important;
    background-color: #4a4a4a !important;
    color: #e0e0e0 !important;
}

/* Dark mode active state - has --sensitive class */
.dark-theme .dash-spreadsheet-container input.dash-filter--case.dash-filter--case--sensitive,
.dark-theme input.dash-filter--case.dash-filter--case--sensitive {
    opacity: 1 !important;
    background-color: #6E868D !important;
    color: #ffffff !important;
    border-color: #5a7078 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Dark mode - remove selection/focus outlines */
.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.cell--selected,
.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-cell {
    box-shadow: none !important;
    outline: none !important;
}