/**
 * COPWATCHDOG MERCURY - Table Component Styles
 * Responsive table with sticky header and sortable columns
 * Uses CSS custom properties from pseudo.css for theme swapping
 * 
 * @package CopWatchdog_Mercury
 * @version 2.0.0
 * 
 * ARCHITECTURE: Uses foundation tokens (--cwd-sf-*, --cwd-tx-*, etc.) that themes override
 */

/* ================================================= */
/* TABLE WRAPPER */
/* ================================================= */

.cwd-table-wrapper {
    background: var(--adp-bg-01);
    border: var(--adp-bd-w) solid var(--cwd-c-n2) !important;
    border-top: none !important;
    border-radius: var(--adp-bd-r) var(--adp-bd-r) 0 0;
    box-shadow: var(--adp-sh);
    overflow: hidden;
    min-height: 600px;
    position: relative;
    scroll-margin-top: 20px;
}

.cwd-table-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 700px;
    max-height: calc(100vh - 250px);
    position: relative;
}

/* ================================================= */
/* TABLE BASE */
/* ================================================= */

table.cwd-table {
    width: 100% !important;
    border-spacing: 0 !important;
    font-family: var(--adp-ff) !important;
    font-size: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem) !important; /* 12-14px fluid */
    table-layout: fixed !important;
}

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

table.cwd-table thead {
    background: var(--adp-bg-02) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    border-top: none !important;
}

table.cwd-table th {
    padding: clamp(0.5rem, 0.429rem + 0.36vw, 0.75rem) clamp(0.75rem, 0.643rem + 0.54vw, 1.125rem) !important; /* 8-12px × 12-18px */
    text-align: left !important;
    font-weight: var(--cwd-t-fw-md) !important;
    font-size: clamp(0.6875rem, 0.652rem + 0.18vw, 0.8125rem) !important; /* 11-13px fluid */
    letter-spacing: var(--cwd-t-ls-tg) !important;
    color: var(--adp-t-02) !important;
    border: none !important;
    border-bottom: var(--adp-bd-w) solid var(--cwd-c-n2) !important;
    border-top: none !important;
    white-space: nowrap !important;
    transition: var(--cwd-m-t-fast) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--adp-bg-02) !important;
    vertical-align: middle !important;
}

table.cwd-table th.numeric {
    text-align: left !important;
}

/* ================================================= */
/* SORTABLE COLUMNS */
/* ================================================= */

table.cwd-table th.sortable {
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    padding: clamp(0.5rem, 0.429rem + 0.36vw, 0.75rem) !important;
}

table.cwd-table th.sortable:hover {
    background: var(--adp-bg-hov) !important;
    color: var(--adp-t-01) !important;
}

table.cwd-table th.sortable .sort-indicator {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--adp-t-03) !important;
    opacity: 0.4 !important;
}

table.cwd-table th.sortable .sort-indicator::before {
    content: '⇅' !important;
}

table.cwd-table th.sortable.sort-asc .sort-indicator::before {
    content: '↑' !important;
    color: var(--adp-ac-01) !important;
    opacity: 1 !important;
}

table.cwd-table th.sortable.sort-desc .sort-indicator::before {
    content: '↓' !important;
    color: var(--adp-ac-01) !important;
    opacity: 1 !important;
}

/* ================================================= */
/* TABLE BODY */
/* ================================================= */

table.cwd-table tbody tr {
    border-bottom: var(--cwd-b-w-md) solid var(--cwd-c-n2) !important;
    transition: var(--cwd-m-t-fast) !important;
    background: var(--adp-bg-01) !important;
}

table.cwd-table tbody tr:hover {
    background: #FAFBFC !important;
}

table.cwd-table tbody tr:last-child {
    border-bottom: none !important;
}

table.cwd-table td {
    padding: clamp(0.5rem, 0.429rem + 0.36vw, 0.75rem) !important;
    font-size: var(--cwd-t-fs-3xs) !important;
    color: var(--adp-t-01) !important;
    line-height: var(--cwd-t-lh-rg) !important;
    max-height: var(--cwd-s-16) !important; /* ~3 lines at 1.5 line-height */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    text-align: left !important;
    vertical-align: top !important;
}

table.cwd-table td a {
    color: var(--adp-ac-01) !important;
    text-decoration: none !important;
    font-size: var(--cwd-t-fs-2xs);
    font-weight: var(--cwd-t-fw-md);
}

/* Scrollbar styling for cells */
table.cwd-table td::-webkit-scrollbar {
    width: 4px;
}

table.cwd-table td::-webkit-scrollbar-track {
    background: transparent;
}

table.cwd-table td::-webkit-scrollbar-thumb {
    background: var(--adp-bd-01);
    border-radius: 2px;
}

table.cwd-table td::-webkit-scrollbar-thumb:hover {
    background: var(--adp-bd-02);
}

table.cwd-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Scrollable cell content for long text */
table.cwd-table td.scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

table.cwd-table td.scrollable::-webkit-scrollbar {
    height: 4px;
}

table.cwd-table td.scrollable::-webkit-scrollbar-thumb {
    background: var(--adp-bd-01);
    border-radius: 2px;
}

table.cwd-table td.scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--adp-bd-02);
}

/* ================================================= */
/* STICKY COLUMNS */
/* ================================================= */

/* Rank column - sticky at left: 0 */
table.cwd-table th[data-field="rank"],
table.cwd-table td:nth-child(2) {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: var(--adp-bg-02) !important;
    /* Visual seam fix when adjacent sticky column is applied */
    border-right: var(--adp-bd-w) solid var(--cwd-c-n2) !important;
    box-shadow: 1px 0 0 rgba(0,0,0,0.02) inset !important;
}

table.cwd-table tbody tr:hover td:nth-child(2) {
    background: #FAFBFC !important;
}

/* Last Name column - sticky after Rank */
table.cwd-table th[data-field="last_name"],
table.cwd-table td:nth-child(4) {
    position: sticky !important;
    /* align left offset to the rank column width to avoid gaps */
    left: calc(var(--th-sortable-sm, 0px)) !important;
    z-index: 5 !important;
    background: var(--adp-bg-02) !important;
}

table.cwd-table tbody tr:hover td:nth-child(4) {
    background: #FAFBFC !important;
}

/* Sticky header cells need higher z-index */
table.cwd-table thead th[data-field="rank"],
table.cwd-table thead th[data-field="last_name"] {
    z-index: 101 !important;
}

/* ================================================= */
/* COLUMN WIDTHS - Uses variables from pseudo.css */
/* ================================================= */
table.cwd-table th[data-field="city"]                        { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="source_file"]                 { width: var(--th-sortable-md); min-width: var(--th-sortable-md); }
table.cwd-table th[data-field="date_reported"]               { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="time_reported"]               { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="rank"]                        { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="first_name"]                  { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="last_name"]                   { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="trial_room"]                  { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="case_type"]                   { width: var(--th-sortable-md); min-width: var(--th-sortable-md); }
table.cwd-table th[data-field="badge"]                       { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="pct"]                         { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="pct_url"]                     { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="race"]                        { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="gender"]                      { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="tax_id"]                      { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="email"]                       { width: var(--th-sortable-lg); min-width: var(--th-sortable-lg); }
table.cwd-table th[data-field="service_start"]               { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="last_earned"]                 { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="disciplined"]                 { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="articles"]                    { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_complaints"]              { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_allegations"]             { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_substantiated"]           { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_substantiated_charges"]   { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_unsubstantiated"]         { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_within_guidelines"]       { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="num_lawsuits"]                { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="total_settlements"]           { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="status"]                      { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="base_salary"]                 { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="pay_basis"]                   { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="regular_hours"]               { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="regular_gross_paid"]          { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="ot_hours"]                    { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="total_ot_paid"]               { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="total_other_pay"]             { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="created_at"]                  { width: var(--th-sortable-md); min-width: var(--th-sortable-md); }
table.cwd-table th[data-field="source_id"]                   { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="last_updated"]                { width: var(--th-sortable-md); min-width: var(--th-sortable-md); }
table.cwd-table th[data-field="version_tag"]                 { width: var(--th-sortable-xs); min-width: var(--th-sortable-xs); }
table.cwd-table th[data-field="ingest_status"]               { width: var(--th-sortable-sm); min-width: var(--th-sortable-sm); }
table.cwd-table th[data-field="current_assignment"]          { width: var(--th-sortable-xl); min-width: var(--th-sortable-xl); }
table.cwd-table th[data-field="assignment_start"]            { width: var(--th-sortable-md); min-width: var(--th-sortable-md); }
table.cwd-table th[data-field="previous_assignments"]        { width: var(--th-sortable-2xl); min-width: var(--th-sortable-2xl); }

/* ================================================= */
/* NO RESULTS */
/* ================================================= */

.cwd-no-results {
    text-align: center;
    padding: 2rem 1.5rem;
    color: var(--adp-t-03);
    font-style: italic;
}

/* ================================================= */
/* PAGINATION - Handled by base.css */
/* ================================================= */

.cwd-pagination {
    margin: var(--cwd-s-2) 0 0 0;
}

.cwd-btn-page {
    padding: 0.5rem 1rem;
    background: var(--adp-bg-02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--adp-bd-01);
    border-radius: var(--adp-bd-r);
    font-size: 14px;
    transition: var(--cwd-m-t-fast);
    color: inherit;
    cursor: pointer;
}

.cwd-btn-page:hover:not(:disabled) {
    background: var(--adp-ac-01);
    color: white;
    border-color: var(--adp-ac-01);
}

.cwd-btn-page:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cwd-page-info {
    font-size: 12px;
    color: var(--adp-t-02);
    margin: var(--cwd-s-0) var(--cwd-s-8); 
}

/* ================================================= */
/* RESPONSIVE DESIGN - Structural layout changes only */
/* ================================================= */

@media (max-width: 768px) {
    /* Keep only structural changes - typography/padding now fluid via clamp() */
    .cwd-table-container {
        border-radius: var(--adp-bd-r);
    }
    
    /* Remove rank column sticky on mobile - not enough space */
    table.cwd-table th[data-field="rank"],
    table.cwd-table td:nth-child(2) {
        position: relative !important;
        left: auto !important;
        z-index: auto !important;
    }
    
    /* Adjust last_name sticky position since rank is no longer sticky */
    table.cwd-table th[data-field="last_name"],
    table.cwd-table td:nth-child(4) {
        left: 0 !important;
    }
    
    /* Keep prev/next buttons on same row, but wrap pagination */
    .cwd-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .cwd-page-info {
        order: -1;
        width: 100%; /* Force page info to own row */
        text-align: center;
        margin-bottom: var(--cwd-s-2);
    }
}

/* ================================================= */
/* PRINT STYLES */
/* ================================================= */

@media print {
    .cwd-controls,
    .cwd-pagination {
        display: none !important;
    }
    
    table.cwd-table {
        font-size: 10px !important;
    }
    
    table.cwd-table tbody tr:hover {
        background: none !important;
    }
}