/* ============================================
   MOBILE OPTIMIZATION STYLES
   ============================================ */

/* Base Mobile Styles */
@media (max-width: 640.98px) {
    html, body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /* Touch-friendly buttons - ensure equal sizing */
    button, .btn, .mud-button-root, .mud-icon-button,
    .download-button, .close-button,
    .send-button, .pagination-button {
        min-height: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        touch-action: manipulation;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Document buttons - allow text wrapping but maintain equal min height */
    .document-button {
        min-height: 64px !important;
        height: auto !important;
        min-width: 48px !important;
        padding: 1rem 1.25rem !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        touch-action: manipulation;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* Full-width buttons on mobile */
    button:not(.mud-icon-button):not(.btn-icon):not(.navbar-toggler):not(.pagination-button),
    .btn:not(.mud-icon-button):not(.btn-icon):not(.navbar-toggler):not(.pagination-button),
    .document-button, .download-button, .close-button,
    .send-button {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* MudBlazor button adjustments */
    ::deep .mud-button {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    ::deep .mud-icon-button {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0.5rem !important;
    }

    /* Button groups - ensure equal sizing */
    .btn-group button,
    .btn-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Button containers - ensure equal spacing */
    .preview-actions,
    .mud-dialog-actions,
    .button-group,
    [class*="button-container"],
    [class*="actions"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .preview-actions button,
    .mud-dialog-actions button,
    .mud-dialog-actions .mud-button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Tables - make scrollable on mobile */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table thead, table tbody, table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Forms */
    input, textarea, select, .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Cards and containers */
    .card, .mud-paper {
        margin: 0.5rem 0;
        padding: 1rem;
    }

    /* Spacing adjustments */
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .mx-4 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    /* Text sizing */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }

    /* Text inside containers and buttons */
    .card, .mud-paper, .container, [class*="container"] {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    .card p, .mud-paper p, .container p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Ensure text in buttons is properly sized and centered */
    button *, .btn *, .mud-button * {
        font-size: inherit !important;
        line-height: inherit !important;
        text-align: center !important;
    }

    /* MudBlazor AppBar adjustments */
    ::deep .mud-appbar {
        padding: 0 0.5rem;
    }

    ::deep .mud-appbar .mud-text {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* MudBlazor Menu adjustments */
    ::deep .mud-menu {
        min-width: 200px;
    }

    ::deep .mud-menu-item {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* MudBlazor NavLink adjustments */
    ::deep .mud-nav-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* MudBlazor Badge adjustments */
    ::deep .mud-badge {
        font-size: 0.75rem;
    }

    /* Prevent horizontal scroll */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Tabs - make scrollable on mobile */
    .rodio-tabs .nav-tabs {
        flex-direction: column;
        gap: 0.5rem;
        overflow-x: visible;
    }

    .rodio-tabs .nav-item {
        width: 100%;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .rodio-tabs .nav-link {
        width: 100%;
        padding: 1rem;
        min-height: 64px;
        height: auto;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .rodio-tabs .nav-link .button-list-text {
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    .rodio-tabs .icon-wrapper {
        width: 40px;
        height: 40px;
        margin-right: 0.75rem;
    }

    /* Charts and visualizations */
    .apexcharts-canvas, .apexcharts-svg {
        max-width: 100%;
        height: auto !important;
    }

    /* Dialog adjustments */
    ::deep .mud-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 1rem auto;
    }

    ::deep .mud-dialog-content {
        padding: 1rem;
    }

    /* Snackbar adjustments */
    ::deep .mud-snackbar {
        width: 90vw;
        max-width: 90vw;
    }

    /* Document grid buttons - ensure equal sizing */
    .documents-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .documents-grid .document-button {
        width: 100% !important;
        min-height: 64px !important;
        height: auto !important;
        padding: 1rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
    }

    /* Pagination buttons */
    .pagination-button {
        min-width: 48px !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 0.9375rem !important;
    }

    /* Ensure all button text is readable and properly sized */
    button span, .btn span, .mud-button span {
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Equal height for buttons in same row/container */
    .row button, .row .btn,
    [class*="col"] button, [class*="col"] .btn,
    .d-flex button, .d-flex .btn {
        height: 48px !important;
        min-height: 48px !important;
    }

    /* MudBlazor specific button containers */
    ::deep .mud-button-group button,
    ::deep .mud-button-group .mud-button {
        height: 48px !important;
        min-height: 48px !important;
    }

    /* Ensure buttons in dialog actions are equal */
    ::deep .mud-dialog-actions .mud-button {
        height: 48px !important;
        min-height: 48px !important;
        flex: 1 1 auto !important;
    }
}

/* Tablet Styles (641px to 991px) */
@media (min-width: 641px) and (max-width: 991.98px) {
    html, body {
        font-size: 15px;
    }

    /* Equal-sized buttons for tablets */
    button, .btn, .mud-button-root, .mud-icon-button,
    .document-button, .download-button, .close-button,
    .send-button, .pagination-button {
        min-height: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Button groups on tablet - can be side by side */
    .preview-actions,
    .mud-dialog-actions,
    .button-group,
    [class*="button-container"],
    [class*="actions"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .preview-actions button,
    .mud-dialog-actions button,
    .mud-dialog-actions .mud-button {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        max-width: calc(50% - 0.375rem) !important;
    }

    ::deep .mud-button {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }

    ::deep .mud-icon-button {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* Text in containers */
    .card, .mud-paper, .container, [class*="container"] {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    .card p, .mud-paper p, .container p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Ensure text in buttons is properly sized */
    button *, .btn *, .mud-button * {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    input, textarea, select, .form-control {
        font-size: 16px;
        min-height: 44px;
    }

    .rodio-tabs .nav-tabs {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .rodio-tabs .nav-item {
        flex: 0 1 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
    }

    .rodio-tabs .nav-link {
        padding: 0.875rem 1rem;
        min-height: 64px;
        height: auto;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .rodio-tabs .nav-link .button-list-text {
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    table {
        font-size: 0.9rem;
    }

    ::deep .mud-dialog {
        width: 85vw !important;
        max-width: 85vw !important;
    }

    /* Document grid buttons on tablet - 2 columns */
    .documents-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .documents-grid .document-button {
        width: 100% !important;
        min-height: 64px !important;
        height: auto !important;
        padding: 1rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
    }

    /* Pagination buttons on tablet */
    .pagination-button {
        min-width: 48px !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 0.9375rem !important;
    }

    /* Ensure all button text is readable */
    button span, .btn span, .mud-button span {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Equal height for buttons in same row/container on tablet */
    .row button, .row .btn,
    [class*="col"] button, [class*="col"] .btn,
    .d-flex button, .d-flex .btn {
        height: 48px !important;
        min-height: 48px !important;
    }

    /* MudBlazor specific button containers */
    ::deep .mud-button-group button,
    ::deep .mud-button-group .mud-button {
        height: 48px !important;
        min-height: 48px !important;
    }

    /* Ensure buttons in dialog actions are equal on tablet */
    ::deep .mud-dialog-actions .mud-button {
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* Desktop Styles (992px and above) - ensure proper sizing */
@media (min-width: 992px) {
    html, body {
        font-size: 16px;
    }

    button, .btn {
        min-height: 38px;
    }

    ::deep .mud-button {
        min-height: 36px;
    }

    .rodio-tabs .nav-item {
        flex-basis: calc(20% - 0.8rem);
        max-width: calc(20% - 0.8rem);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    a, button, .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    *:hover {
        transition: none;
    }

    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* Landscape mobile optimization */
@media (max-width: 991.98px) and (orientation: landscape) {
    .sidebar {
        height: 100vh;
        overflow-y: auto;
    }

    .content {
        padding-top: 3.5rem;
    }
}