/* =========================================
   AURORA MOBILE FIXES - PHASE 3
   Refining Table Widths, Calendar, and Navigation
   ========================================= */

@media (max-width: 768px) {

    /* --- 1. Hide Period Selector (Current, 3M, 6M, 1Y) --- */
    .modern-filter-bar .filter-group:first-child {
        display: none !important;
    }

    /* --- 2. Action Buttons (Icons Only, Full Name on Hover) --- */
    /* Target the primary action buttons in the header */
    .primary-actions .action-btn,
    .secondary-actions .action-btn,
    .header-actions-wrapper button {
        padding: 8px 10px !important;
        min-width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    /* Hide text by default */
    .primary-actions .action-btn:not(:hover) span,
    .primary-actions .action-btn:not(:hover) .btn-text,
    .secondary-actions .action-btn:not(:hover) span,
    .secondary-actions .action-btn:not(:hover) .btn-text {
        display: none !important;
    }

    /* Show text on hover (optional, might not work well on touch, but requested) */
    .primary-actions .action-btn:hover span,
    .primary-actions .action-btn:hover .btn-text,
    .secondary-actions .action-btn:hover span,
    .secondary-actions .action-btn:hover .btn-text {
        display: inline !important;
    }

    /* --- 3. Button Layout (Single Line) --- */
    .header-actions-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        overflow-x: auto !important; /* Allow scrolling if too many buttons */
        padding-bottom: 4px !important; /* Space for scrollbar if needed */
    }

    .primary-actions,
    .secondary-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    /* Remove the divider if it takes up space */
    .header-actions-wrapper > div[style*="width: 1px"] {
        display: none !important;
    }

    /* --- 4. Table Column Widths (Cash Flow & Net Worth) --- */
    
    /* First Column (Account Name / Category) - Give it more space */
    .excel-table th:first-child,
    .excel-table td:first-child,
    .networth-table th:first-child,
    .networth-table td:first-child {
        width: auto !important; /* Allow it to grow */
        min-width: 140px !important; /* Ensure minimum readability */
        max-width: 60vw !important; /* Prevent it from taking over completely */
        white-space: normal !important; /* Allow text wrapping */
        position: sticky !important;
        left: 0;
        z-index: 10;
        background: white; /* Ensure background covers scrolling content if any */
        border-right: 1px solid #e2e8f0; /* Visual separation */
        overflow: visible !important; /* Allow content to be seen */
    }

    /* Amount Column (The single visible period) - Make it compact */
    .mobile-single-col,
    .excel-table td:not(:first-child),
    .networth-table td:not(:first-child) {
        width: 90px !important; /* Compact fixed width */
        min-width: 90px !important;
        max-width: 90px !important;
        padding: 8px 4px !important; /* Reduce padding */
        font-size: 13px !important;
        text-align: right !important;
    }
    
    /* Ensure the table fits the screen */
    .statement-table,
    .networth-table-container {
        width: 100% !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll since we have nav arrows */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .excel-table,
    .networth-table {
        width: 100% !important;
        table-layout: fixed !important; /* Force columns to respect widths */
        margin: 0 !important;
    }

    /* --- 5. Dashboard Calendar Fix --- */
    
    .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important; /* Force 7 columns */
        gap: 2px !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Prevent overflow */
    }
    
    .calendar-day {
        width: 100% !important; /* Fill the grid cell */
        min-width: 0 !important; /* Allow shrinking */
        aspect-ratio: 1 !important; /* Keep square */
        height: auto !important; /* Let aspect-ratio control height */
        min-height: 30px !important;
        font-size: 10px !important; /* Smaller font */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Ensure Calendar Header matches grid */
    .calendar-header {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
        gap: 2px !important;
    }
    
    .calendar-header div {
        text-align: center !important;
        font-size: 11px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* --- 6. Dashboard Bottom Tiles (Stack Vertically) --- */
    .stats-overview {
        grid-template-columns: 1fr !important; /* Stack vertically */
        gap: 16px !important;
    }
    
    .overview-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- 7. Net Worth Specifics --- */
    
    /* Fix sliding to left - ensure container is full width */
    #networth-content {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure the table container uses full width */
    .table-container {
        width: 100% !important;
        padding: 0 !important;
    }

}