/*
 * shared-table-styles.css
 *
 * Purpose: Shared CSS styles for WellTracer Tracker table components.
 *
 * Section 1 — MFD (Manage Database) tables:
 *   AnalystsTable, CompaniesTable, RegionsTable, FieldsTable,
 *   WellsTable, SurveyStatusTable, RecommendationTagsTable.
 *
 * Section 2 — Survey tables:
 *   WellTracerTable, EchometerTable, FleximTable.
 *
 * Key assumptions:
 *   - MFD tables wrap content in a div with class "table-grid-wrapper"
 *   - Survey tables wrap content in a div with class "welltracer-table-container"
 *   - Child tables use "child-table" class with optional --child-min-width CSS variable
 *   - Compact single-column tables (Companies, Regions) add "compact-columns" modifier
 *   - Action buttons are wrapped in "table-header" > "table-actions" containers
 *   - MudBlazor components are used throughout (MudTable, MudDataGrid, MudPaper, MudButton)
 */

/* =============================================================================
 * SECTION 1 — MFD Table Styles
 * ============================================================================= */

/* --- Layout --- */
.table-container-wide {
    width: 100%;
    overflow-x: auto;
    text-align: center;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .table-container-wide {
        min-width: 700px;
    }
}

/* --- No-shadow table styling --- */
.table-grid-wrapper .no-shadow {
    box-shadow: none !important;
    border: none !important;
}

.table-grid-wrapper .no-shadow .mud-table-cell {
    border: none !important;
}

.table-grid-wrapper .no-shadow .mud-table-row:not(:last-child) .mud-table-cell {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* --- Multiselect checkbox column --- */
.table-grid-wrapper .has-multiselect th:first-child,
.table-grid-wrapper .has-multiselect td:first-child {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 4px !important;
    text-align: center !important;
}

.table-grid-wrapper .has-multiselect th:first-child .mud-checkbox,
.table-grid-wrapper .has-multiselect td:first-child .mud-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Auto-layout table (centered, nowrap cells) --- */
.table-grid-wrapper.compact-columns .mud-table {
    table-layout: auto;
    width: 100%;
    min-width: min-content;
}

.table-grid-wrapper.compact-columns .mud-table th,
.table-grid-wrapper.compact-columns .mud-table td {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Header & Actions --- */
.table-header {
    margin: 24px 0;
}

.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.table-title {
    display: flex;
    align-items: center;
}

.action-button {
    min-width: 120px;
}

.table-paper {
    overflow: hidden;
}

/* --- Column helpers --- */
.edit-column-header {
    width: 120px;
    min-width: 120px;
    text-align: center;
}

.cell-center {
    text-align: center;
    vertical-align: middle;
}

.justify-center {
    justify-content: center;
}

/* --- Child table (nested inside another table) ---
 * Override --child-min-width on the element to customize per component.
 * Default: 800px (used by AnalystsTable).
 */
.child-table {
    overflow-x: auto;
    overflow-y: visible;
    min-width: var(--child-min-width, 800px);
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    isolation: auto !important;
    position: relative;
}

.child-table .mud-table {
    min-width: var(--child-min-width, 800px) !important;
    position: relative;
    overflow: visible;
}

/* --- Selector (region/field dropdowns) --- */
.selector-section {
    margin: 24px 0;
    max-width: 400px;
}

.selector-dropdown {
    min-width: 300px;
}

/* --- Color picker shared (SurveyStatus + RecommendationTags) --- */
.color-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: inline-block;
}

.color-edit-section {
    min-width: 320px;
    max-width: 400px;
}

.color-picker-inline {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px;
    background: #fff;
}

.inline-color-picker {
    width: 100% !important;
    max-width: 300px !important;
}

/* =============================================================================
 * SECTION 2 — Survey Table Styles
 * Used by: WellTracerTable, EchometerTable, FleximTable
 * ============================================================================= */

/* --- Filter panel --- */
.filter-panel .mud-expand-panel-header {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.filter-panel .mud-expand-panel-header:hover {
    background-color: var(--mud-palette-primary-darken) !important;
}

.filter-panel .mud-expand-panel-header .mud-expand-panel-icon {
    color: var(--mud-palette-primary-text) !important;
}

/* --- Common UI elements --- */
.lock-icon {
    color: #666;
}

.placeholder-text {
    color: #999;
}

.flex-end-container {
    display: flex;
    justify-content: flex-end;
}

/* --- Column visibility button --- */
.column-visibility-btn {
    min-width: 160px;
    height: 36px;
}

/* --- Survey Status Chip --- */
.survey-status-chip {
    border: 1px solid rgba(0,0,0,0.12) !important;
    font-weight: 500 !important;
}

.status-color-indicator {
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.12);
}

/* --- Survey table container --- */
.welltracer-table-container {
    overflow-x: auto;
    position: relative;
    width: 100%;
    border-radius: 8px;
    background-color: white;
}

/* Table root */
.welltracer-table-container .mud-table-root {
    width: auto !important;
    min-width: min-content;
}

/* Table layout */
.welltracer-table-container .mud-table {
    table-layout: auto !important;
    min-width: min-content;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

/* General cell styling */
.welltracer-table-container .mud-table th,
.welltracer-table-container .mud-table td {
    padding: 8px 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header borders */
.welltracer-table-container .mud-table thead th {
    border-bottom: 2px solid var(--mud-palette-divider) !important;
    border-right: 1px solid var(--mud-palette-divider) !important;
    background-color: #f8f9fa !important;
}

/* Remove border from last header column */
.welltracer-table-container .mud-table thead th:last-child {
    border-right: none !important;
}

/* Body cell borders */
.welltracer-table-container .mud-table tbody td {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    border-right: 1px solid var(--mud-palette-divider) !important;
}

/* Remove border from last body column */
.welltracer-table-container .mud-table tbody td:last-child {
    border-right: none !important;
}

/* Striped rows */
.welltracer-table-container .mud-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.05) !important;
}


/* Sticky header row background */
.welltracer-table-container .mud-table thead tr {
    background: white;
}

/* DataGrid header/cell backgrounds */
.welltracer-table-container .mud-data-grid thead th {
    background: #ffffff !important;
}

.welltracer-table-container .mud-data-grid tbody td {
    background: #ffffff !important;
}

/* Cell auto-height for wrapped content */
.welltracer-table-container .mud-table td {
    height: auto !important;
    min-height: 52px;
    vertical-align: top !important;
}

/* --- Sticky Columns ---
 * Uses MudBlazor's built-in StickyLeft="true" on column definitions.
 * MudBlazor handles position:sticky, z-index, and background-color automatically.
 * Multiple sticky columns need manual left offsets via HeaderStyle/CellStyle
 * on the column (MudBlazor #10035 — all StickyLeft columns default to left:0).
 */

/* --- Column width classes --- */
.compact-xs {
    max-width: 80px !important;
    min-width: 80px !important;
    width: 80px !important;
}

.compact-sm {
    max-width: 100px !important;
    min-width: 100px !important;
    width: 100px !important;
}

.compact-md {
    max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}

.compact-lg {
    max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}

.compact-xl {
    max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
}

.compact-xxl {
    max-width: 240px !important;
    min-width: 240px !important;
    width: 240px !important;
}

.compact-xxxl {
    max-width: 240px !important;
    min-width: 240px !important;
    width: 240px !important;
}

/* --- Text wrapping --- */
.allow-wrap {
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.2 !important;
}

/* --- Text list styling for multiple items --- */
.text-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.text-item {
    font-size: 0.875rem;
    line-height: 1.25;
    padding: 2px 0;
    color: #333;
}

.text-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

/* Styling for single text values */
.text-value {
    font-size: 0.875rem;
    line-height: 1.25;
    color: #333;
    font-weight: 500;
}

/* --- Comments/Recommendation column --- */
.comments-cell,
.recommendation-cell {
    max-width: 240px !important;
    min-width: 240px !important;
    width: 240px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 8px 12px !important;
    position: relative;
}

.comments-content,
.recommendation-content {
    width: 100%;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
    padding: 4px 0;
    cursor: default;
}

.comments-content.truncated-text,
.recommendation-content.truncated-text {
    cursor: help;
    color: #333 !important;
}

.no-comments {
    color: #999;
    font-style: italic;
}

/* Comments cell overflow */
.welltracer-table-container .mud-table td.comments-cell,
.welltracer-table-container .mud-data-grid td.comments-cell {
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
}

.wrapped-text {
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4;
    padding: 4px 8px;
}

/* --- Centered content helper --- */
.centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible !important;
}

/* --- Tooltip styling --- */
.mud-tooltip {
    max-width: 400px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    font-size: 0.875rem !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
}

/* --- Truncated text with hover expand --- */
.truncated-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

.truncated-text:hover {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* --- DataGrid border removal --- */
.mud-data-grid.border-none,
.mud-data-grid.border-none table,
.mud-data-grid.border-none thead,
.mud-data-grid.border-none tbody {
    border: none !important;
    box-shadow: none !important;
}

.mud-data-grid-pager {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- Linked survey indicator (expand/collapse badge) --- */
.linked-survey-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    overflow: visible;
}

/* Hierarchy column cells must allow badge overflow */
.welltracer-table-container .mud-table td.hierarchy-badge-cell {
    overflow: visible !important;
}

/* --- Child row (WellTracerTable expand/collapse) --- */
.child-row-container {
    margin: 3px;
    max-width: 80vw;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.child-row-grid {
    margin: 0;
    width: calc(100% - 30px);
}

.child-row-item {
    text-align: left;
    padding-top: 0;
}

.child-tabs-container {
    width: auto;
    overflow-x: auto;
}