/**
 * DataTable Dark Theme Styles
 * Matches original OG Met App table styling, especially for Event Log
 */

/* ========================================
   BASE TABLE STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-table-container {
    background-color: #393B3F;
    border-radius: var(--card-border-radius);
    width: 100%;
    overflow-x: auto;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet {
    background-color: #393B3F;
    width: 100%;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner table {
    background-color: #393B3F;
    table-layout: fixed;
    width: 100%;
}

/* ========================================
   BASE TABLE STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .dash-table-container {
    background-color: white;
    border-radius: var(--card-border-radius);
    width: 100%;
    overflow-x: auto;
}

[data-mantine-color-scheme="light"] .dash-spreadsheet {
    background-color: white;
    width: 100%;
}

[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner table {
    background-color: white;
    table-layout: fixed;
    width: 100%;
}

/* ========================================
   TABLE HEADER STYLING
   ======================================== */

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #262626 !important;
    color: #CBCED4 !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 0.5rem 1.5rem 0.5rem 0 !important;
    padding-left: 0.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 0.5rem 1.5rem 0.5rem 0 !important;
    padding-left: 0.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* ========================================
   TABLE CELL STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: #393B3F !important;
    color: #CBCED4 !important;
    padding: 0.5rem !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #555 !important;
    font-size: 0.85rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    vertical-align: top !important;
}

/* ========================================
   TABLE CELL STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding: 0.5rem !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 0.85rem !important;
    background-color: white !important;
    color: #212529 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    vertical-align: top !important;
}

/* ========================================
   TABLE ROW STYLING
   ======================================== */
/* Striped rows - Dark Mode */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Striped rows - Light Mode */
[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Hover effect - Dark Mode */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: rgba(124, 139, 177, 0.1);
}

/* Hover effect - Light Mode */
[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover {
    background-color: #e8f4f8;
}

/* ========================================
   FILTER CELLS STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-filter {
    background-color: #3B3D41 !important;
}

[data-mantine-color-scheme="dark"] .dash-filter input {
    background-color: #3B3D41 !important;
    color: #CBCED4 !important;
    border: 1px solid rgba(106, 106, 106, 0.5);
}

[data-mantine-color-scheme="dark"] .dash-filter input::placeholder {
    color: #999;
    opacity: 1;
}

/* ========================================
   FILTER CELLS STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .dash-filter input {
    background-color: #f8f9fa;
    border: 1px solid #d0d0d0;
}

/* ========================================
   SORT ARROW STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .column-header--sort,
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .sort {
    color: #CBCED4;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .column-header--sort::after {
    color: #CBCED4;
}

/* Position sort arrows on the right */
.dash-spreadsheet-container .column-header--sort {
    position: relative;
    padding-right: 20px;
}

.dash-spreadsheet-container .column-header--sort::after {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

/* ========================================
   EXPORT BUTTON POSITIONING
   ======================================== */
.dash-spreadsheet-container .dash-spreadsheet-menu {
    position: relative;
}

.dash-spreadsheet-container .export {
    position: absolute;
    transform: translate(-100%, -100%);
}

/* ========================================
   HIDE "Toggle Columns" AND FILTER TOGGLE BUTTONS
   ======================================== */
.dash-spreadsheet-container .dash-spreadsheet-menu .show-hide {
    display: none !important;
}

/* Hide the "Toggle filter case sensitivity" button */
.dash-filter--case {
    display: none !important;
}

.dash-spreadsheet-container .dash-filter--case {
    display: none !important;
}

button.dash-filter--case {
    display: none !important;
}

/* ========================================
   DROPDOWN IN TABLE (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-dropdown {
    z-index: 90000000;
    background-color: #393B3F;
    color: #CBCED4;
}

[data-mantine-color-scheme="dark"] .Select-menu-outer {
    background-color: #393B3F;
    border: 1px solid rgba(106, 106, 106, 0.5);
    z-index: 90000000;
}

[data-mantine-color-scheme="dark"] .Select-option {
    background-color: #393B3F;
    color: #CBCED4;
}

[data-mantine-color-scheme="dark"] .Select-option:hover {
    background-color: rgba(124, 139, 177, 0.2);
}

/* ========================================
   PAGINATION STYLING (Dark Mode)
   ======================================== */
.dash-spreadsheet-container .previous-next-container {
    color: #CBCED4 !important;
    font-size: 9px !important;
    transform: scale(0.65) !important;
    transform-origin: left center !important;
    margin-left: 0 !important;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .previous-next-container {
    color: #CBCED4 !important;
}

.dash-spreadsheet-container .previous-next-container * {
    font-size: 9px !important;
}

.dash-spreadsheet-container .previous-next-container button {
    background-color: transparent !important;
    color: #CBCED4 !important;
    border: 1px solid rgba(106, 106, 106, 0.5) !important;
    border-radius: 2px !important;
    padding: 1px 3px !important;
    font-size: 9px !important;
    min-height: 16px !important;
    height: 18px !important;
    max-height: 18px !important;
    line-height: 1 !important;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .previous-next-container button {
    background-color: transparent !important;
    color: #CBCED4 !important;
    border-color: rgba(106, 106, 106, 0.5) !important;
}

.dash-spreadsheet-container .previous-next-container button:hover {
    background-color: rgba(124, 139, 177, 0.2) !important;
    border-color: #7C8BB1 !important;
}

.dash-spreadsheet-container .previous-next-container input {
    background-color: #3B3D41 !important;
    color: #CBCED4 !important;
    border: 1px solid rgba(106, 106, 106, 0.5) !important;
    border-radius: 2px !important;
    padding: 1px 3px !important;
    font-size: 9px !important;
    max-width: 28px !important;
    width: 28px !important;
    min-height: 16px !important;
    height: 18px !important;
    max-height: 18px !important;
    line-height: 1 !important;
}

/* ========================================
   PAGINATION STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .dash-spreadsheet-container .previous-next-container button {
    border: 1px solid #d0d0d0 !important;
    color: #212529 !important;
}

[data-mantine-color-scheme="light"] .dash-spreadsheet-container .previous-next-container button:hover {
    background-color: rgba(2, 73, 125, 0.1) !important;
}

[data-mantine-color-scheme="light"] .dash-spreadsheet-container .previous-next-container input {
    background-color: white !important;
    color: #212529 !important;
    border: 1px solid #d0d0d0 !important;
}

/* ========================================
   CONDENSED ROW HEIGHT
   ======================================== */
.dash-spreadsheet-container .dash-spreadsheet-inner table tr {
    height: 16px;
    line-height: 1.1em;
}

.dash-spreadsheet-container .dash-spreadsheet-inner table td,
.dash-spreadsheet-container .dash-spreadsheet-inner table th {
    line-height: 1.1em;
}

/* ========================================
   SELECTED CELL STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner .cell--selected {
    background-color: rgba(124, 139, 177, 0.3) !important;
}

/* ========================================
   SELECTED CELL STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .dash-spreadsheet-container .dash-spreadsheet-inner .cell--selected {
    background-color: rgba(2, 73, 125, 0.2) !important;
}

/* ========================================
   COLUMN-SPECIFIC STYLING
   ======================================== */
/* Component column - no wrapping, smaller font, fits on one line */
.dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="component-name"],
.dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="compone"] {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}

/* ========================================
   FONT INHERITANCE
   ======================================== */
.dash-spreadsheet-container,
.dash-spreadsheet-container * {
    font-family: 'Oswald', sans-serif !important;
}

/* ========================================
   SCROLLBAR STYLING (Dark Mode - Optional)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container ::-webkit-scrollbar-track {
    background: #262626;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container ::-webkit-scrollbar-thumb {
    background: rgba(106, 106, 106, 0.5);
    border-radius: 5px;
}

[data-mantine-color-scheme="dark"] .dash-spreadsheet-container ::-webkit-scrollbar-thumb:hover {
    background: #7C8BB1;
}

/* ========================================
   DATA TABLE TOOLTIP (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .dash-table-tooltip {
    background-color: #393B3F !important;
    color: #CBCED4 !important;
    border: 1px solid rgba(106, 106, 106, 0.5) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   CONDITIONAL FORMATTING SUPPORT
   ======================================== */
/* Keep conditional colors visible in dark mode */
[data-mantine-color-scheme="dark"] .dash-spreadsheet-container .dash-cell.cell-conditional-formatting {
    filter: brightness(0.9);
}

/* ========================================
   MAP AND EVENT LOG CARD BORDERS (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .map-card {
    border: 1px solid #555 !important;
}

[data-mantine-color-scheme="dark"] .event-log-card {
    border: 1px solid #555 !important;
}