/* ===========================
   Raw Data Page Styles
=========================== */

/* ===========================
   Mobile/Tablet Responsive Layout
=========================== */

/* Desktop: Show dropdown and hint; hide mobile-only summary */
@media (min-width: 992px) {
    .raw-data-dropdown-col {
        display: flex !important;
    }
    
    .raw-data-hint-col {
        display: flex !important;
    }
    
    /* Hide mobile-only summary button on desktop */
    .raw-data-summary-mobile-col {
        display: none !important;
    }
    
    /* Add gap between save buttons on desktop */
    .raw-data-save-row {
        gap: 10px;
    }
}

/* Tablet and Mobile: Reorganize layout */
@media (max-width: 991px) {
    /* Header row - hide dropdown on mobile */
    .raw-data-header-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .raw-data-header-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Hide Edit Mode/Pivot Mode dropdown on mobile */
    .raw-data-dropdown-col {
        display: none !important;
    }
    
    /* Hide hint text on mobile - saves vertical space */
    .raw-data-hint-row {
        display: none !important;
    }
    .raw-data-actions-row {
        margin-top: 0.5rem !important;
    }
    
    /* Action buttons: 2-column layout - Row1 hint full width, Row2 Summary|Match, Row3 Categorize|Speed Review */
    .raw-data-actions-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    .raw-data-actions-row {
        display: contents !important;
    }
    .raw-data-summary-col,
    .raw-data-summary-mobile-col,
    .raw-data-match-col,
    .raw-data-categorize-col,
    .raw-data-bulk-edit-col {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .raw-data-summary-col button,
    .raw-data-summary-mobile-col button,
    .raw-data-match-col button,
    .raw-data-categorize-col button,
    .raw-data-bulk-edit-col button {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* Grid height handled by flex layout (rawdata-grid-area is flex: 1) */
    
    /* AG Grid mobile: larger touch targets and readable cells */
    #rawdata-grids-container .ag-theme-alpine .ag-row,
    #rawdata-grids-container .ag-theme-alpine-dark .ag-row {
        min-height: 44px !important;
    }
    #rawdata-grids-container .ag-theme-alpine .ag-cell,
    #rawdata-grids-container .ag-theme-alpine-dark .ag-cell {
        font-size: 14px !important;
        line-height: 44px !important;
    }
    #rawdata-grids-container .ag-body-horizontal-scroll-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Grid area: ensure visible minimum height on mobile */
    .rawdata-grid-area {
        flex: 1 1 auto !important;
        min-height: 390px !important;
        overflow: hidden !important;
    }
    /* Cascade height: 100% through all intermediate wrappers (dcc.Loading, etc.)
       without changing their display mode — preserves AG Grid internals */
    .rawdata-grid-area > *,
    .rawdata-grid-area > * > *,
    .rawdata-grid-area > * > * > *,
    #rawdata-grids-container,
    #edit-grid-container,
    #pivot-grid-container {
        height: 100% !important;
    }
    /* AG Grid: fill its container, override inline 725px */
    #rawdata-grid,
    #rawdata-pivot-grid {
        height: 100% !important;
    }
    
    /* Save row - pinned at bottom of flex container (no position:fixed needed) */
    .raw-data-save-row {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 0.5rem;
        margin: 0 !important;
        padding: 10px 0 !important;
        flex-shrink: 0 !important;
        background-color: var(--bg-primary) !important;
        border-top: 1px solid var(--border-primary);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* Save and Delete buttons side by side on mobile */
    .raw-data-save-col,
    .raw-data-delete-col {
        flex: 1 !important;
        order: 1;
        padding: 0 !important;
    }
    
    .raw-data-save-col {
        max-width: none !important;
    }
    
    .raw-data-delete-col {
        max-width: none !important;
    }
    
    .raw-data-save-col button,
    .raw-data-delete-col button {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* Message takes full width below buttons */
    .raw-data-message-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        order: 2;
        margin-top: 0.75rem;
        padding: 0 !important;
    }
}

/* Tablet specific adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Grid height handled by flex layout on tablet too */
}

/* Small mobile optimizations */
@media (max-width: 576px) {
    /* Smaller header text */
    .raw-data-header-col .page-header {
        font-size: 1.75rem;
    }
    
    .last-transaction-date {
        font-size: 0.9rem;
    }
    
    /* Compact buttons */
    .raw-data-summary-col button,
    .raw-data-match-col button,
    .raw-data-categorize-col button,
    .raw-data-bulk-edit-col button,
    .raw-data-save-col button,
    .raw-data-delete-col button {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    
    /* Grid height handled by flex layout */
}

/* ===========================
   Dark Mode Support
=========================== */

/* Summary of Uploads button - match upload page (visible in dark mode) */
[data-theme="dark"] #summary-button {
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] #summary-button:hover {
    color: var(--text-primary) !important;
    border-color: var(--brand-purple) !important;
    background-color: rgba(180, 100, 255, 0.1) !important;
}

/* ===========================
   Green Button Hover Styles
=========================== */
#match-transfers-button:hover {
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
}