/* RESPONSIVE STYLES                          */
/* Breakpoints: 1400px, 1200px, 992px,       */
/* 768px, 576px. Mobile sidebar, compact UI.  */

/* Large Screens */
@media (max-width: 1400px) {
    .calendar-main {
        width: calc(100% - 360px);
    }

    .appointments-sidebar {
        width: 360px;
    }
}

/* Medium-Large Screens */
@media (max-width: 1200px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Medium Screens (Tablets) */
@media (max-width: 992px) {
    .calendar-content {
        flex-direction: column;
    }

    .calendar-main {
        width: 100%;
        order: 1;
    }

    .appointments-sidebar {
        width: 100%;
        height: auto;
        max-height: 300px;
        order: 2;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .month-grid {
        gap: 2px;
    }

    .day-cell {
        min-height: 80px;
        padding: 0.35rem;
    }

    .day-number {
        font-size: 0.85rem;
    }

    .appointment-pill {
        padding: 0.15rem 0.35rem;
        font-size: 0.65rem;
    }

    .slide-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablets and Small Laptops */
@media (max-width: 768px) {

    /* Appointments Header Controls - Wrap on smaller screens */
    .appointments-header-controls {
        padding: 0.75rem 1rem;
    }

    .header-controls-left {
        width: 100%;
        justify-content: space-between;
    }

    .header-controls-right {
        width: 100%;
        justify-content: flex-start;
    }

    .appointments-title {
        font-size: 1.1rem;
    }

    .appointments-month {
        font-size: 0.82rem;
    }

    .header-provider-btn,
    .header-type-btn {
        font-size: 0.78rem;
        padding: 4px 8px;
    }

    .header-status-filters {
        flex-wrap: wrap;
    }

    .header-filter-checkbox {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    .header-action-btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .search-box {
        min-width: 150px;
    }

    .search-input {
        min-width: 100px;
    }

    .view-toggle {
        display: none;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }

    /* Timeline Toolbar - Mobile */
    .timeline-toolbar {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }

    .timeline-toolbar-left,
    .timeline-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .timeline-date-display {
        font-size: 1rem;
        min-width: auto;
    }

    .timeline-view-pills {
        order: 3;
        width: 100%;
        justify-content: space-between;
    }

    .timeline-view-pills .view-pill {
        flex: 1;
        text-align: center;
    }

    /* Provider Pill - Mobile */
    .view-pill.provider-pill {
        padding: 0.5rem 0.75rem;
    }

    .view-pill.provider-pill span:not(.provider-count-badge) {
        display: none;
    }

    .provider-count-badge {
        margin-left: 0;
        min-width: 20px;
        height: 20px;
        font-size: 0.6875rem;
    }

    /* Provider Drawer - Mobile Full Screen */
    .provider-drawer {
        right: -100%;
        left: auto;
        width: 100%;
        top: 180px;
    }

    .provider-drawer.open {
        right: 0;
        left: 0;
    }

    .provider-card {
        padding: 0.875rem;
    }

    .provider-card-avatar {
        width: 42px;
        height: 42px;
        font-size: 1.125rem;
    }

    .provider-card-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .stat-divider {
        display: none;
    }

    /* Timeline Grid - Compact on Mobile */
    .timeline-providers-header,
    .timeline-row {
        grid-template-columns: 60px repeat(2, 1fr) !important;
    }

    .timeline-provider-header {
        font-size: 0.7rem;
    }

    .timeline-provider-specialty {
        display: none;
    }

    /* Header adjustments */
    .calendar-header-bar {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .header-nav {
        gap: 0.5rem;
    }

    .nav-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .current-month {
        font-size: 1rem;
    }

    .current-year {
        display: none;
    }

    .image-preview-row {
        flex-wrap: wrap;
    }

    .image-preview-thumb {
        margin-bottom: 10px;
    }

    .print-approval-content {
        width: 95%;
        margin: 10px;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {

    /* Appointments Header Controls - Stack vertically */
    .appointments-header-controls {
        padding: 0.5rem;
        flex-direction: column;
        align-items: stretch;
    }

    .header-controls-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .appointments-title {
        font-size: 1rem;
    }

    .appointments-month {
        font-size: 0.8rem;
        width: fit-content;
    }

    .header-controls-right {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .header-filter-checkbox,
    .header-provider-btn,
    .header-type-btn,
    .header-action-btn {
        width: 100%;
        justify-content: center;
    }

    .header-status-filters {
        flex-direction: column;
        width: 100%;
    }

    .header-filter-checkbox {
        width: 100%;
    }

    .header-provider-dropdown,
    .header-type-dropdown {
        left: 0;
        right: 0;
        min-width: 100%;
    }

    .search-wrapper {
        display: none;
    }

    /* Timeline mobile optimizations */
    .timeline-providers-header,
    .timeline-row {
        grid-template-columns: 50px 1fr !important;
    }

    .timeline-apt-room,
    .timeline-apt-treatment {
        display: none;
    }

    /* But keep the note visible on the provider's own schedule cards. */
    .pv-schedule-grid .timeline-apt-treatment {
        display: block;
        white-space: normal;
    }

    .calendar-header-bar {
        padding: 0.5rem;
    }

    .header-info {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .quick-action-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .lang-toggle span {
        display: none;
    }

    .lang-toggle i {
        margin-right: 0;
    }

    /* Month grid adjustments */
    .month-grid {
        gap: 1px;
    }

    .weekday-header {
        font-size: 0.7rem;
        padding: 0.35rem 0;
    }

    .day-cell {
        min-height: 60px;
        padding: 0.25rem;
    }

    .day-number {
        font-size: 0.75rem;
        width: 22px;
        height: 22px;
    }

    .appointment-pill {
        display: none;
    }

    .more-appointments {
        display: block;
        font-size: 0.65rem;
        padding: 0.1rem;
    }

    /* Sidebar adjustments */
    .sidebar-header {
        padding: 0.75rem 1rem;
    }

    .sidebar-title {
        font-size: 1rem;
    }

    .appointment-card {
        padding: 0.75rem;
    }

    .patient-name {
        font-size: 0.9rem;
    }

    .treatment-name {
        font-size: 0.8rem;
    }
}

/* Very Small Phones */
@media (max-width: 360px) {
    .calendar-header-bar {
        padding: 0.4rem;
    }

    .nav-btn {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .today-btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }

    .day-cell {
        min-height: 50px;
    }

    .day-number {
        font-size: 0.7rem;
        width: 20px;
        height: 20px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .day-cell:hover {
        transform: none;
    }

    .appointment-card:hover {
        transform: none;
    }

    .nav-btn:hover,
    .today-btn:hover,
    .quick-action-btn:hover {
        transform: none;
    }

    /* Increase touch targets */
    .nav-btn,
    .today-btn,
    .quick-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .calendar-header-bar {
        padding: 0.4rem 1rem;
    }

    .appointments-sidebar {
        max-height: 200px;
    }

    .sidebar-appointments {
        max-height: 150px;
    }
}

/* iOS Safari zooms a focused field under 16px; force 16px on touch only, keeping pinch-zoom. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        /* !important so it beats per-component 13–14px rules with higher specificity (e.g. .pv-apt-search). */
        font-size: 16px !important;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .appointment-pill,
    .status-badge,
    .provider-badge {
        -webkit-font-smoothing: antialiased;
    }
}