/* Mobile-specific styles for ProviderWorkspace */

/* ==========================================================================
   Mobile Breakpoint (< 600px - MudBlazor xs breakpoint)
   ========================================================================== */
@media (max-width: 599px) {
    /* Hide elements on mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Hide text labels, show only icons in compact areas */
    .hide-text-on-mobile .mud-button-label {
        display: none !important;
    }

    /* Compact padding on mobile */
    .mobile-compact {
        padding: 8px !important;
    }

    .mobile-compact-x {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mobile-compact-y {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Mobile container padding */
    .mud-main-content .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hide logo text on mobile, show only icon */
    .app-title-text {
        display: none !important;
    }

    /* Adjust AppBar spacing */
    .mud-appbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Make tables horizontally scrollable */
    .table-scroll-container {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .table-scroll-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .table-scroll-container.can-scroll::after {
        opacity: 1;
    }

    /* Ensure tables don't break layout */
    .mud-simple-table {
        min-width: 600px;
    }

    /* Mobile card view styles */
    .mobile-card-view .mud-card {
        margin-bottom: 12px;
    }

    .mobile-card-view .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .mobile-card-view .card-field {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mobile-card-view .card-field:last-child {
        border-bottom: none;
    }

    .mobile-card-view .card-field-label {
        color: rgba(0, 0, 0, 0.6);
        font-size: 0.875rem;
    }

    .mobile-card-view .card-field-value {
        font-weight: 500;
        text-align: right;
    }

    .mobile-card-view .card-actions {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin-top: 8px;
    }

    /* Filter panel toggle button */
    .mobile-filter-toggle {
        margin-bottom: 12px;
    }

    /* Adjust MudGrid spacing on mobile */
    .mud-grid {
        margin: -8px !important;
    }

    .mud-grid > .mud-item {
        padding: 8px !important;
    }

    /* Stack buttons vertically on mobile when needed */
    .mobile-stack-buttons {
        flex-direction: column !important;
    }

    .mobile-stack-buttons > * {
        width: 100%;
    }

    /* Compact chips on mobile */
    .mud-chip {
        font-size: 0.75rem;
    }

    /* Dialog adjustments for small screens */
    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        padding: 16px !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        padding: 8px 16px !important;
    }

    /* Adjust data labels in tables */
    .mud-table-cell[data-label]::before {
        font-weight: 600;
        margin-right: 8px;
    }

    /* Form fields full width on mobile */
    .mud-input,
    .mud-select,
    .mud-autocomplete {
        width: 100% !important;
    }

    /* Timeline view adjustments */
    .timeline-container {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 0;
        padding-right: 0;
    }

    .timeline-grid .staff-column {
        width: 100px !important;
        min-width: 100px !important;
        font-size: 0.75rem;
    }

    .timeline-grid .day-column {
        min-width: 70px !important;
    }

    .schedule-block {
        padding: 2px 4px !important;
        font-size: 0.7em !important;
    }

    .schedule-time {
        font-size: 0.85em !important;
    }

    .schedule-shift {
        font-size: 0.75em !important;
    }
}

/* ==========================================================================
   Small Tablet Breakpoint (600px - 959px - MudBlazor sm breakpoint)
   ========================================================================== */
@media (min-width: 600px) and (max-width: 959px) {
    /* Show elements only on tablet and up */
    .hide-on-tablet-down {
        display: none !important;
    }

    /* Slightly compact container padding */
    .mud-main-content .mud-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==========================================================================
   Show/Hide Utility Classes
   ========================================================================== */

/* Show only on mobile (xs) */
.show-on-mobile {
    display: none !important;
}

@media (max-width: 599px) {
    .show-on-mobile {
        display: initial !important;
    }

    .show-on-mobile.d-flex {
        display: flex !important;
    }

    .show-on-mobile.d-block {
        display: block !important;
    }
}

/* Hide on mobile only */
@media (max-width: 599px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Show only on tablet and smaller */
.show-on-tablet-down {
    display: none !important;
}

@media (max-width: 959px) {
    .show-on-tablet-down {
        display: initial !important;
    }

    .show-on-tablet-down.d-flex {
        display: flex !important;
    }
}

/* ==========================================================================
   Scroll Indicators
   ========================================================================== */
.scroll-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* ==========================================================================
   Mobile Filter Drawer
   ========================================================================== */
.mobile-filter-drawer {
    padding: 16px;
}

.mobile-filter-drawer .mud-navmenu {
    padding: 0;
}

/* ==========================================================================
   Responsive Cards (for table replacement on mobile)
   ========================================================================== */
.responsive-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 12px;
    margin-bottom: 12px;
}

.responsive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.responsive-card-title {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

.responsive-card-subtitle {
    font-size: 0.875rem;
    color: #666;
    margin-top: 2px;
}

.responsive-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.responsive-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.responsive-card-label {
    color: #666;
}

.responsive-card-value {
    font-weight: 500;
    color: #333;
}

.responsive-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Touch-Friendly Improvements
   ========================================================================== */
@media (max-width: 599px) {
    /* Larger touch targets */
    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Better spacing for tappable items */
    .mud-nav-link {
        min-height: 48px;
    }

    /* Improve list item spacing */
    .mud-list-item {
        min-height: 48px;
    }
}

/* ==========================================================================
   General Overrides (all screen sizes)
   ========================================================================== */

/* Fix MudTabs badge clipping - allow badges to overflow */
.facility-tabs,
.facility-tabs > *,
.facility-tabs .mud-tabs-header,
.facility-tabs .mud-tabs-toolbar,
.facility-tabs .mud-tabs-toolbar-wrapper,
.facility-tabs .mud-tabs-toolbar-content,
.facility-tabs .mud-tabs-tabbar-inner,
.facility-tabs .mud-tab,
.facility-tabs .mud-paper,
.tab-header-overflow,
.tab-header-overflow * {
    overflow: visible !important;
}