/* Shared mobile layout, loaded after both skins. Desktop rules stay in their modules. */
.mobile-menu-backdrop { display: none; }
@media screen and (max-width: 1024px) {
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .main-content { margin-left: 0 !important; min-width: 0; width: 100%; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .sidebar {
        width: min(86vw, 300px) !important;
        height: 100dvh;
        z-index: 501;
        transform: translateX(-100%);
        visibility: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .sidebar.mobile-open { transform: translateX(0); visibility: visible; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .sidebar-nav { min-height: 0; overscroll-behavior: contain; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .sidebar-nav .nav-item { min-height: 44px; flex-shrink: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .sidebar-toggle { min-width: 44px; min-height: 44px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .mobile-menu-btn { display: flex; min-width: 44px; min-height: 44px; }
    .mobile-menu-backdrop:not([hidden]) {
        display: block; position: fixed; inset: 0; z-index: 500;
        border: 0; background: rgb(0 0 0 / 48%); touch-action: manipulation;
    }
    body.mobile-nav-open { overflow: hidden; }
    body.mobile-nav-open .page-container { overflow: hidden; }
}
@media screen and (max-width: 768px) {
    html[data-skin] body #loginScreen { overflow-y: auto; align-items: safe center; padding: 16px; }
    html[data-skin] body .login-container { max-width: 100%; margin-block: auto; padding: 24px 18px; }
    html[data-skin] body .gender-options { flex-wrap: wrap; }
    html[data-skin] body .schedule-day { flex-direction: column; align-items: stretch; gap: 12px; }
    html[data-skin] body .schedule-times { flex-wrap: wrap; }
    html[data-skin] body .dashboard-content { grid-template-columns: minmax(0, 1fr); }
    html[data-skin] body .dashboard-left, html[data-skin] body .dashboard-right { min-width: 0; }
    html[data-skin] body .card-header { flex-wrap: wrap; gap: 12px; }
    html[data-skin] body .appointment-card { flex-wrap: wrap; }
    html[data-skin] body .appointment-info { min-width: 0; overflow-wrap: anywhere; }
    html[data-skin] body .page-header > div { min-width: 0; flex-wrap: wrap; }
    html[data-skin] body .payments-list { max-width: 100%; overflow-x: auto; }
    html[data-skin] body .profile-tab span { display: inline; }
    html[data-skin] body .profile-tab { min-height: 44px; white-space: nowrap; }
    html[data-skin] body .modal-content { padding: 16px !important; }
    html[data-skin] body .modal-content > h2 { padding-right: 44px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .app-container { min-height: 100dvh; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .main-content, html[data-skin] body:is(.light-theme, :not(.light-theme)) .page-container,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .page-content, html[data-skin] body:is(.light-theme, :not(.light-theme)) .card, html[data-skin] body:is(.light-theme, :not(.light-theme)) .card-body,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .settings-content, html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-fullwidth-container {
        min-width: 0; max-width: 100%;
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .page-container { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header { height: auto; min-height: 64px; padding: 10px 12px !important; gap: 8px; flex-wrap: wrap; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header-left { flex: 1 1 190px; min-width: 0; gap: 8px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header-right { gap: 6px; flex-wrap: wrap; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header .search-box { display: flex; width: auto; min-width: 0; flex: 1; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header .search-input { width: 100%; min-width: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .notification-btn, html[data-skin] body:is(.light-theme, :not(.light-theme)) .quick-add-btn { min-width: 44px; min-height: 44px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .page-header, html[data-skin] body:is(.light-theme, :not(.light-theme)) .patients-list-header,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .profile-header-bar, html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-header {
        flex-direction: column; align-items: stretch; gap: 12px;
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .page-actions, html[data-skin] body:is(.light-theme, :not(.light-theme)) .profile-quick-actions,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .payments-filters, html[data-skin] body:is(.light-theme, :not(.light-theme)) .stats-filters,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-header-controls, html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-filters,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal-footer, html[data-skin] body:is(.light-theme, :not(.light-theme)) .supplier-contact,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .invoice-card-footer { flex-wrap: wrap; gap: 8px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-title { min-width: 0; font-size: 18px; text-align: left; overflow-wrap: anywhere; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-header-controls .calendar-title { flex-basis: 100%; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-fullwidth-container { height: auto; overflow: visible; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .week-view { overflow-x: auto; max-width: 100%; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .week-view-improved { height: min(70dvh, 640px); }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .week-view .week-header, html[data-skin] body:is(.light-theme, :not(.light-theme)) .week-view .week-grid { min-width: 760px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-grid { overflow-x: auto; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-weekdays, html[data-skin] body:is(.light-theme, :not(.light-theme)) .calendar-days { min-width: 630px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .appointments-main-layout { grid-template-columns: minmax(0, 1fr); }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .waiting-room-sidebar { max-height: none; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .patients-grid, html[data-skin] body:is(.light-theme, :not(.light-theme)) .invoice-grid,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .supplies-grid, html[data-skin] body:is(.light-theme, :not(.light-theme)) .ortho-patients-grid { grid-template-columns: minmax(0, 1fr); }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .tabs, html[data-skin] body:is(.light-theme, :not(.light-theme)) .patient-tabs, html[data-skin] body:is(.light-theme, :not(.light-theme)) .profile-tabs-bar,
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .finance-tabs, html[data-skin] body:is(.light-theme, :not(.light-theme)) .stats-tabs {
        max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start;
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) :is(.tabs, .patient-tabs, .profile-tabs-bar, .finance-tabs, .stats-tabs) > * { flex-shrink: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .table-container { max-width: 100%; overflow-x: auto; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .table-container table { min-width: 600px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .table-container :is(th, td) { display: table-cell !important; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .patient-profile-page { padding: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .profile-patient-banner { flex-wrap: wrap; padding: 16px; gap: 12px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .patient-info-value { overflow-wrap: anywhere; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal { padding: 8px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal-content, html[data-skin] body:is(.light-theme, :not(.light-theme)) .popup-content {
        min-width: 0 !important; width: 100% !important; max-width: 100% !important;
        max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal-close { min-width: 44px; min-height: 44px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal-header { padding-right: 56px; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal :is(input, select, textarea), html[data-skin] body:is(.light-theme, :not(.light-theme)) :is(.form-input, .form-select, .search-input) {
        font-size: 16px; max-width: 100%; min-width: 0;
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) :is(.btn, .calendar-nav-btn, .calendar-today-btn, .view-toggle-btn, .patient-tab) {
        min-height: 44px; touch-action: manipulation;
    }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .notification-panel { width: calc(100% - 24px); right: 12px; max-height: 75dvh; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .toast-container { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .toast { max-width: 100%; min-width: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .pwa-install-banner { width: calc(100% - 24px); padding: 12px; gap: 8px; flex-wrap: wrap; }
}
@media screen and (max-width: 480px) {
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header-left { flex-basis: 100%; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .header-right { width: 100%; justify-content: flex-end; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .search-box { display: flex; max-width: 100%; min-width: 0; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .form-row, html[data-skin] body:is(.light-theme, :not(.light-theme)) .patient-info-grid, html[data-skin] body:is(.light-theme, :not(.light-theme)) .order-item { grid-template-columns: minmax(0, 1fr); }
    /* Several older dialogs use inline two-column form grids. */
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .modal [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .supplier-card { flex-wrap: wrap; }
    html[data-skin] body:is(.light-theme, :not(.light-theme)) .supplier-stats { flex-basis: 100%; text-align: left; }
}