/* ===================================================================
 * styles-tables.css
 * Purpose: Global table styles, sort indicators, table arrows
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* Table Styles */
.table {
    background: var(--dark-bg);
    color: var(--text-light);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
}

.table th {
    background-color: var(--darker-bg);
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    padding: 1rem;
    position: relative;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table td {
    background-color: var(--dark-bg);
    color: var(--text-light) !important;
    vertical-align: middle;
    padding: 0.5rem;
}

/* Table arrow elements and sort indicators */
.table th::before,
.table th::after,
.table-arrow,
.sort-arrow,
.table-sort-arrow {
    color: var(--color-accent-600) !important;
}

/* Form arrow elements */
.form-arrow,
.input-arrow,
.select-arrow,
.form-control::before,
.form-control::after {
    color: var(--color-accent-600) !important;
}

.table td,
.table td * {
    color: var(--text-light) !important;
}

.column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: rgba(245, 179, 1, 0.2);
    cursor: col-resize;
    z-index: 1;
    transition: background-color 0.2s;
}

/* ===================================================================
   PROJECTS TABLE DARK MODE OVERRIDES
   Note: The authoritative dark mode styles for .projects-table-card
   are defined inline in templates/projects.html to ensure they load
   last and override all global dark mode CSS rules.
   =================================================================== */

.column-resize-handle:hover {
    background-color: var(--primary-color);
    width: 4px;
}

th {
    position: relative;
    padding-right: 10px !important;
}

.table td {
    padding: 1px 2px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.table th {
    padding: 1px 2px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.form-control-sm {
    padding: 2px 4px;
    font-size: 0.85rem;
}

.unit-select {
    padding: 2px;
    font-size: 0.85rem;
}