/**
 * Unified AG Grid Styles for Yieldier
 *
 * This stylesheet provides consistent AG Grid styling across all pages.
 * Features: border, rounded corners, pagination, record count, vertical text centering
 *
 * Used by: commodity-detail.html, company-detail.html, activity.html, definitions.html,
 *          sec-filings.html, companies.html, market-feed.html, preferreds.html, bonds.html
 */

/* ============================================
   AG Grid Theme Customization - Claude-Inspired
   ============================================ */
.ag-theme-alpine {
    --ag-header-background-color: var(--color-bg-secondary);
    --ag-odd-row-background-color: var(--color-bg-primary);
    --ag-row-hover-color: var(--color-accent-subtle);
    --ag-selected-row-background-color: var(--color-accent-subtle);
    --ag-font-family: var(--font-family);
    --ag-font-size: 13px;
    --ag-header-font-weight: 500;
    --ag-borders: solid 1px;
    --ag-border-color: var(--border-color-subtle);
    --ag-header-foreground-color: var(--text-secondary);
    --ag-row-border-color: var(--border-color-subtle);
    --ag-background-color: var(--color-surface);
}

/* ============================================
   Grid Container Styling
   ============================================ */
.ag-theme-alpine {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color-subtle);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   Header Styling
   ============================================ */
.ag-theme-alpine .ag-header {
    border-bottom: 1px solid var(--border-color);
}

.ag-theme-alpine .ag-header-cell {
    padding: 0 12px;
}

.ag-theme-alpine .ag-header-cell-text {
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================
   Cell Styling - Vertical Centering
   ============================================ */
.ag-theme-alpine .ag-cell {
    padding: 0 12px;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.ag-theme-alpine .ag-cell-value {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ============================================
   Row Styling
   ============================================ */
.ag-theme-alpine .ag-row {
    border-bottom: 1px solid var(--border-color-subtle);
    transition: background-color var(--transition-fast);
}

.ag-theme-alpine .ag-row:hover {
    background-color: var(--color-accent-subtle) !important;
}

.ag-theme-alpine .ag-row-selected {
    background-color: var(--color-accent-subtle) !important;
}

/* Clickable rows */
.ag-theme-alpine .ag-row.cursor-pointer,
.clickable-rows .ag-theme-alpine .ag-row {
    cursor: pointer;
}

/* ============================================
   Pagination Styling
   ============================================ */
.ag-theme-alpine .ag-paging-panel {
    border-top: 1px solid var(--border-color);
    background: var(--color-bg-secondary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ag-theme-alpine .ag-paging-row-summary-panel,
.ag-theme-alpine .ag-paging-page-summary-panel {
    font-size: 13px;
    color: var(--text-secondary);
}

.ag-theme-alpine .ag-paging-button {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin: 0 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ag-theme-alpine .ag-paging-button:hover:not(.ag-disabled) {
    background: var(--color-accent-subtle);
    border-color: var(--color-primary);
}

.ag-theme-alpine .ag-paging-button.ag-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Page size selector */
.ag-theme-alpine .ag-paging-page-size .ag-picker-field-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}

/* ============================================
   Filter Styling
   ============================================ */
.ag-theme-alpine .ag-filter {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.ag-theme-alpine .ag-filter-toolpanel-header {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================
   Sort Icons
   ============================================ */
.ag-theme-alpine .ag-sort-indicator-icon {
    color: var(--color-primary);
}

.ag-theme-alpine .ag-header-cell-sorted-asc .ag-sort-indicator-icon,
.ag-theme-alpine .ag-header-cell-sorted-desc .ag-sort-indicator-icon {
    color: var(--color-primary);
}

/* ============================================
   Loading Overlay
   ============================================ */
.ag-theme-alpine .ag-overlay-loading-wrapper {
    background: rgba(250, 249, 247, 0.95);
}

.ag-theme-alpine .ag-overlay-loading-center {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================
   No Rows Overlay
   ============================================ */
.ag-theme-alpine .ag-overlay-no-rows-wrapper {
    background: var(--color-surface);
}

.ag-theme-alpine .ag-overlay-no-rows-center {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 40px;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.ag-theme-alpine .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.ag-theme-alpine .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.ag-theme-alpine .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.ag-theme-alpine .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
.ag-theme-alpine .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================
   Common Cell Formatting Classes
   ============================================ */
.price-positive,
.ag-theme-alpine .price-positive {
    color: var(--color-positive);
}

.price-negative,
.ag-theme-alpine .price-negative {
    color: var(--color-negative);
}

.text-muted,
.ag-theme-alpine .text-muted {
    color: var(--text-secondary);
}

.text-primary,
.ag-theme-alpine .text-primary {
    color: var(--text-primary);
}

.font-bold,
.ag-theme-alpine .font-bold {
    font-weight: 600;
}

/* ============================================
   Link Styling in Cells
   ============================================ */
.ag-theme-alpine a,
.ag-theme-alpine .title-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ag-theme-alpine a:hover,
.ag-theme-alpine .title-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .ag-theme-alpine {
        --ag-font-size: 12px;
    }

    .ag-theme-alpine .ag-cell {
        padding: 0 8px;
    }

    .ag-theme-alpine .ag-header-cell {
        padding: 0 8px;
    }

    .ag-theme-alpine .ag-paging-panel {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
}