/**
 * Accessible Vessel Table Styles
 * 
 * WCAG 2.1 AA Compliant Table Component
 * Designed per accessibility-a11y skill patterns
 */

.vessel-table-container {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.vessel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* Caption (screen reader only by default) */
.vessel-table caption {
    padding: var(--space-3);
    font-weight: var(--font-semibold);
    text-align: left;
    color: var(--color-text);
}

.vessel-table caption.sr-only-table-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Headers */
.vessel-table__th {
    padding: var(--space-3);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.vessel-table__th--actions {
    text-align: center;
    width: 100px;
}

/* Sort buttons in headers */
.sort-button {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 150ms;
}

.sort-button:hover {
    background-color: var(--color-bg-hover);
}

.sort-button:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

.sort-indicator {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Selected sort header */
.vessel-table__th[aria-sort="asc"] .sort-indicator,
.vessel-table__th[aria-sort="desc"] .sort-indicator {
    color: var(--color-info);
}

/* Cells */
.vessel-table__cell {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Row styles */
.vessel-table__row {
    cursor: pointer;
    transition: background-color 150ms;
}

.vessel-table__row:hover,
.vessel-table__row:focus {
    background-color: var(--color-bg-hover);
}

.vessel-table__row:focus {
    outline: 2px solid var(--color-info);
    outline-offset: -2px;
}

.vessel-table__row--flagged {
    background-color: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
}

.vessel-table__row--flagged:hover {
    background-color: var(--color-danger-bg-hover, rgba(239, 68, 68, 0.15));
}

/* Vessel name cell */
.vessel-table__cell--name {
    font-weight: var(--font-medium);
}

.vessel-name {
    color: var(--color-text);
}

.vessel-flag {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
}

/* Status cell */
.vessel-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.vessel-status--confirmed {
    background-color: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #16a34a);
}

.vessel-status--flagged {
    background-color: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger, #dc2626);
}

.vessel-status--suspicious {
    background-color: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning, #d97706);
}

.vessel-status--active {
    background-color: var(--color-info-bg, #dbeafe);
    color: var(--color-info, #2563eb);
}

/* Actions cell */
.vessel-table__cell--actions {
    text-align: center;
}

.vessel-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: var(--space-1);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-base);
    transition: all 150ms;
}

.vessel-table__action:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border);
}

.vessel-table__action:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

.vessel-table__action + .vessel-table__action {
    margin-left: var(--space-2);
}

/* Empty state */
.vessel-table__empty-cell {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

/* Responsive table */
@media (max-width: 640px) {
    .vessel-table-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .vessel-table {
        font-size: var(--text-xs);
    }
    
    .vessel-table__th,
    .vessel-table__cell {
        padding: var(--space-2);
    }
    
    /* Hide action buttons on very small screens */
    .vessel-table__th--actions,
    .vessel-table__cell--actions {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .vessel-table__th {
        border-bottom: 2px solid currentColor;
    }
    
    .vessel-table__cell {
        border-bottom: 1px solid currentColor;
    }
    
    .vessel-table__row:focus,
    .vessel-table__action:focus {
        outline: 3px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vessel-table__row,
    .sort-button,
    .vessel-table__action {
        transition: none;
    }
}