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

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

/* Desktop: Show dropdown and hint */
@media (min-width: 992px) {
    .raw-data-dropdown-col {
        display: flex !important;
    }
    
    .raw-data-hint-col {
        display: flex !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;
    }
    
    /* Hint row and Actions row - stack buttons vertically */
    .raw-data-hint-row,
    .raw-data-actions-row {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1rem !important;
    }
    
    /* Show hint text on mobile - full width above grid */
    .raw-data-hint-col {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 10;
        padding: 0 !important;
        margin-bottom: 0.75rem;
    }
    
    .raw-data-hint-col i {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }
    
    /* Stack action buttons full width */
    .raw-data-summary-col,
    .raw-data-match-col,
    .raw-data-categorize-col,
    .raw-data-bulk-edit-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        justify-content: stretch !important;
        order: 1;
    }
    
    .raw-data-summary-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;
    }
    
    /* Transaction grids - reduce height on mobile */
    #rawdata-grid,
    #rawdata-pivot-grid {
        height: 400px !important;
    }
    
    /* Save row - reorganize for mobile */
    .raw-data-save-row {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 0 0.5rem;
    }
    
    /* 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;
    }
    
    /* 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) {
    /* Slightly larger grid on tablet */
    #rawdata-grid,
    #rawdata-pivot-grid {
        height: 500px !important;
    }
}

/* 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;
    }
    
    /* Smaller grid on very small screens */
    #rawdata-grid,
    #rawdata-pivot-grid {
        height: 350px !important;
    }
}

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