@media (max-width: 767px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    html,
    body {
        scroll-behavior: smooth !important;
        min-width: 0 !important;
    }

    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden;
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    html,
    body,
    .content,
    .container,
    section,
    .result-box,
    .casepaper-table-wrap {
        max-width: 100vw !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        line-height: 1.25 !important;
    }

    label,
    .doctor-calendar-nav label,
    .doctor-panel > div > label {
        display: block !important;
        width: 100% !important;
    }

    button,
    .btn-link,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    select,
    input,
    textarea {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .sidebar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        display: flex;
        flex-wrap: nowrap !important;
        gap: 10px;
        align-items: center !important;
        justify-content: flex-start;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 10px 12px 10px calc(12px + env(safe-area-inset-left)) !important;
        box-sizing: border-box;
        border-right: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 0 !important;
        background: rgba(7, 31, 52, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: 0 -14px 34px rgba(10, 35, 56, 0.32) !important;
        z-index: 1200 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar #sidebarUserCard {
        display: none !important;
    }

    .sidebar .consult-sidebar-panel,
    .sidebar .sidebar-field {
        display: block !important;
        flex: 0 0 100% !important;
        min-width: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .sidebar .consult-sidebar-panel {
        max-height: calc(100vh - 170px) !important;
        overflow: auto !important;
    }

    .sidebar .consult-sidebar-panel .consult-sidebar-row {
        padding: 4px 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    .product-badge {
        display: none !important;
    }

    .sidebar .menu-item,
    .sidebar .submenu-item {
        flex: 0 0 auto;
        min-width: 90px;
        max-width: 140px;
        height: auto;
        margin: 0 !important;
        padding: 12px 10px !important;
        border-left: 0 !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff !important;
        box-sizing: border-box;
        scroll-snap-align: center;
        transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .sidebar .menu-item .mobile-menu-icon,
    .sidebar .submenu-item .mobile-menu-icon {
        display: block;
        font-size: 1.4rem;
        line-height: 1;
        margin-bottom: 6px;
    }

    .sidebar .menu-item .mobile-menu-text,
    .sidebar .submenu-item .mobile-menu-text {
        display: block;
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        max-height: 2.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .sidebar .menu-item:hover,
    .sidebar .submenu-item:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.22) !important;
    }

    .sidebar .menu-item.active,
    .sidebar .submenu-item.active {
        background: rgba(255, 255, 255, 0.22) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    }

    .sidebar .submenu {
        display: contents !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        flex-basis: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        align-items: center !important;
        gap: 8px;
        padding: 10px 12px !important;
        flex-wrap: nowrap;
    }

    .header h1 {
        width: auto;
        min-width: 0;
        flex: 1;
        font-size: 1.15rem !important;
        line-height: 1.2;
    }

    .header-actions {
        width: auto;
        justify-content: flex-end;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap;
    }

    #istClock {
        display: none !important;
        padding-right: 0 !important;
        font-size: 0.85rem !important;
    }

    #istClock > div {
        flex-wrap: wrap;
        gap: 0.45rem !important;
    }

    .content {
        padding: 12px !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box;
        border-radius: 14px !important;
    }

    .reception-workflow-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .reception-workflow-bar h1 {
        font-size: 1.25rem !important;
        line-height: 1.15 !important;
    }

    .reception-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .reception-quick-actions a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px !important;
    }

    .home-dashboard {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .home-dashboard h2 {
        margin: 0 0 12px;
        font-size: 1.25rem;
    }

    .home-reception-grid,
    .home-doctor-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 12px 0 !important;
    }

    .home-doctor-wrap {
        max-width: 100% !important;
        margin: 12px 0 !important;
    }

    .home-dashboard-card,
    #homeDoctorStatsPanel {
        padding: 14px !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%) !important;
        border: 1px solid rgba(30, 80, 130, 0.08) !important;
        box-shadow: 0 20px 40px rgba(17, 46, 74, 0.08);
    }

    .home-dashboard-card h3,
    #homeDoctorStatsPanel h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    .home-calendar-nav {
        display: grid !important;
        grid-template-columns: minmax(72px, auto) 1fr minmax(72px, auto);
        gap: 8px;
        align-items: center !important;
    }

    .home-calendar-nav strong {
        text-align: center;
        font-size: 0.95rem !important;
    }

    .home-calendar-nav button {
        width: auto !important;
        min-height: 40px;
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    #homeAppointmentCalendar {
        min-width: 0 !important;
        table-layout: fixed;
        font-size: 0.72rem !important;
    }

    #homeAppointmentCalendar th,
    #homeAppointmentCalendar td {
        padding: 5px 3px !important;
        word-break: break-word;
    }

    #homeTodayQueueResult table {
        min-width: 560px;
    }

    #homeMonthlyStats table {
        min-width: 0 !important;
    }

    .home-start-hint,
    #health-hint {
        display: none;
    }

    section:not(.toolbar) {
        padding: 14px !important;
        margin: 10px 0 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid rgba(28, 70, 108, 0.08) !important;
        box-shadow: 0 18px 32px rgba(23, 55, 83, 0.08) !important;
    }

    .consult-layout,
    .registration-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .registration-panel,
    .dental-chart-panel,
    .odontogram,
    .jaw-section {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .dental-chart-heading,
    .tooth-system-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .finding-chip-row,
    .consult-sidebar-chip-group {
        gap: 8px !important;
    }

    .finding-chip,
    .consult-sidebar-chip {
        min-height: 38px;
        padding: 8px 10px !important;
    }

    h2,
    h3 {
        line-height: 1.2;
    }

    .form-grid,
    .consult-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    div[style*="grid-template-columns"],
    form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .form-inline,
    .toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    label {
        font-size: 0.9rem !important;
    }

    input,
    select,
    textarea,
    button,
    .btn-link,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 44px;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="text"],
    input[type="tel"],
    select {
        appearance: auto;
    }

    button,
    .btn-link,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .patient-result-item {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .patient-result-item button {
        margin-left: 0 !important;
        width: 100%;
    }

    .result-box {
        max-height: 55vh !important;
        overflow: auto !important;
        font-size: 0.9rem !important;
    }

    table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse;
    }

    table th,
    table td {
        white-space: normal !important;
        word-break: break-word !important;
        padding: 8px !important;
    }

    .billing-panel table,
    .doctor-panel table,
    #appointmentsList table,
    #billingLiveInvoiceResult table,
    #billingPatientHistoryResult table {
        min-width: 0 !important;
    }

    .casepaper-table,
    #medicineTable {
        min-width: 0 !important;
        width: 100% !important;
    }

    #medicineTable {
        font-size: 0.86rem !important;
    }

    .doctor-calendar-nav {
        display: grid !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .doctor-panel > div[style*="display: flex"] {
        display: grid !important;
        gap: 10px !important;
    }

    .doctor-calendar-nav button,
    .doctor-calendar-nav select,
    .doctor-calendar-nav label,
    .doctor-panel > div > button,
    .doctor-panel > div > label,
    .doctor-panel > div > select {
        width: 100% !important;
    }

    .doctor-panel h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.85rem !important;
    }

    .doctor-panel .result-box,
    #appointmentsList {
        width: 100% !important;
    }

    .doctor-panel .result-box {
        padding: 12px !important;
        box-shadow: 0 8px 18px rgba(17, 46, 74, 0.08) !important;
    }

    #medicineTable th,
    #medicineTable td {
        padding: 6px !important;
    }

    .casepaper-table-wrap,
    .result-box,
    section,
    .content,
    .container {
        overflow-x: auto;
    }

    #medicineTable {
        display: table;
    }

    #medicineTableBody input,
    #medicineTableBody select,
    #medicineTableBody button {
        min-width: 88px;
    }

    .doctor-appointments-container,
    .workbench-container,
    .workbench-right-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .doctor-panel,
    .billing-panel,
    .billing-command-bar {
        border-radius: 10px !important;
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    .billing-command-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .billing-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .billing-quick-actions a {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #lastPrescriptionContainer,
    #casepaperContainer,
    #prescriptionPrintViewerSection {
        max-width: 100% !important;
    }

    #prescriptionPrintViewerFrame {
        height: 70vh !important;
    }

    .dentist-note-suggestions,
    .consultation-inline-suggestions,
    #adviseLabsSuggestions {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 8px !important;
        padding-bottom: 4px;
        max-width: 100% !important;
    }

    .dentist-note-suggestions::-webkit-scrollbar,
    .consultation-inline-suggestions::-webkit-scrollbar,
    #adviseLabsSuggestions::-webkit-scrollbar {
        display: none;
    }

    .dentist-note-suggestions .lab-suggestion-btn,
    .consultation-inline-suggestions .consult-sidebar-chip,
    #adviseLabsSuggestions .lab-suggestion-btn {
        flex: 0 1 auto;
        max-width: 100%;
        width: auto !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .opd-standalone .header {
        padding-top: calc(10px + env(safe-area-inset-top)) !important;
    }

    #casepaperSearchInput,
    #casepaperSearchBtn,
    #editPrescriptionBtn,
    #savePrescriptionChangesBtn,
    #printPrescriptionBtn,
    #pauseConsultationBtn,
    #nextPatientBtn,
    #doctorBillingAddBtn {
        width: 100% !important;
        max-width: 100% !important;
    }

    #doctorBillingSummary,
    #doctorBillingResult,
    #prescriptionResult,
    #consultationDraftResult,
    #casepaperList,
    #casepaperResult {
        max-width: 100%;
    }

    #doctorBillingRctRow2,
    #doctorBillingNextApptRow {
        grid-template-columns: 1fr !important;
    }

    #doctorBillingRctRow2[style],
    #doctorBillingNextApptRow[style] {
        gap: 10px !important;
        padding: 10px !important;
    }

    #doctorBillingRctRow2.is-hidden {
        display: none !important;
    }

    #doctorBillingNextApptRow [style*="display:contents"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #casepaperViewerFrame {
        height: 72vh !important;
    }

    .doctor-calendar,
    #appointmentsList,
    .casepaper-table,
    #medicineTable {
        width: 100% !important;
        min-width: 0 !important;
    }

    .doctor-calendar {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .doctor-calendar th,
    .doctor-calendar td {
        padding: 5px 6px !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    section:not(.toolbar),
    .doctor-panel,
    .billing-panel,
    .result-box,
    .container,
    .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .doctor-panel,
    .billing-panel {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .doctor-panel button,
    .doctor-panel .btn-link,
    .doctor-panel input,
    .doctor-panel select,
    .doctor-panel textarea {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 0.92rem !important;
    }

    .doctor-panel > div[style*="display: flex"] {
        align-items: stretch !important;
    }

    #doctorEmergencyConfirmPanel label,
    #doctorEmergencyConfirmPanel div {
        width: 100% !important;
    }

    .modal-content,
    [role="dialog"] {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 120px) !important;
        overflow: auto !important;
    }
}

/* Final mobile polish layer. Keep this at the end so it wins over older mobile fallbacks. */
@media (max-width: 767px) {
    :root {
        --mobile-bg: #edf3f7;
        --mobile-surface: #ffffff;
        --mobile-ink: #12354e;
        --mobile-muted: #5a6b80;
        --mobile-border: rgba(30, 79, 120, 0.12);
        --mobile-primary: #1a4d6d;
        --mobile-nav: #12354e;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: var(--mobile-bg) !important;
    }

    body.opd-mobile-shell {
        min-height: 100vh !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        color: #172433 !important;
    }

    body.opd-mobile-shell .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.opd-mobile-shell .header {
        min-height: 56px !important;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
        background: rgba(248, 251, 255, 0.98) !important;
        border-bottom: 1px solid rgba(183, 205, 223, 0.72) !important;
        box-shadow: 0 8px 18px rgba(17, 46, 74, 0.06) !important;
    }

    body.opd-mobile-shell .header h1 {
        font-family: "DM Sans", "Segoe UI", sans-serif !important;
        font-size: clamp(1.06rem, 5vw, 1.32rem) !important;
        font-weight: 800 !important;
        line-height: 1.14 !important;
        color: var(--mobile-ink) !important;
        letter-spacing: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    body.opd-mobile-shell .header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    body.opd-mobile-shell .content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 10px 2px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell .container,
    body.opd-mobile-shell .home-dashboard,
    body.opd-mobile-shell .workbench-container,
    body.opd-mobile-shell .doctor-appointments-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow-x: hidden !important;
    }

    body.opd-mobile-shell .sidebar {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        height: 74px !important;
        max-height: 74px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: rgba(18, 53, 78, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 20px !important;
        box-shadow: 0 18px 36px rgba(10, 35, 56, 0.34) !important;
        z-index: 5000 !important;
        scrollbar-width: none !important;
        scroll-snap-type: x mandatory !important;
        backdrop-filter: blur(18px) !important;
    }

    body.opd-mobile-shell .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    body.opd-mobile-shell .sidebar #sidebarUserCard,
    body.opd-mobile-shell .sidebar .consult-sidebar-panel,
    body.opd-mobile-shell .sidebar .sidebar-field,
    body.opd-mobile-shell .sidebar .menu-toggle {
        display: none !important;
    }

    body.opd-mobile-shell .sidebar .submenu {
        display: contents !important;
    }

    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex: 0 0 clamp(62px, 18vw, 74px) !important;
        width: clamp(62px, 18vw, 74px) !important;
        min-width: clamp(62px, 18vw, 74px) !important;
        max-width: clamp(62px, 18vw, 74px) !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        border: 0 !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.88) !important;
        background: transparent !important;
        box-shadow: none !important;
        scroll-snap-align: center !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 25px !important;
        height: 23px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.13) !important;
        color: #ffffff !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
    }

    body.opd-mobile-shell .sidebar .menu-item.active,
    body.opd-mobile-shell .sidebar .submenu-item.active {
        color: var(--mobile-ink) !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    }

    body.opd-mobile-shell .sidebar .menu-item.active .mobile-menu-icon,
    body.opd-mobile-shell .sidebar .submenu-item.active .mobile-menu-icon {
        color: var(--mobile-ink) !important;
        background: #e8f4fd !important;
    }

    body.opd-mobile-shell .reception-hero,
    body.opd-mobile-shell .home-dashboard-card,
    body.opd-mobile-shell #homeDoctorStatsPanel,
    body.opd-mobile-shell .doctor-panel,
    body.opd-mobile-shell .billing-panel,
    body.opd-mobile-shell .registration-panel,
    body.opd-mobile-shell .reception-workflow-bar,
    body.opd-mobile-shell section:not(.toolbar) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: 0 12px 24px rgba(21, 50, 79, 0.07) !important;
    }

    body.opd-mobile-shell h1,
    body.opd-mobile-shell h2,
    body.opd-mobile-shell h3,
    body.opd-mobile-shell h4 {
        font-family: "DM Sans", "Segoe UI", sans-serif !important;
        letter-spacing: 0 !important;
        color: var(--mobile-ink) !important;
        overflow-wrap: anywhere !important;
    }

    body.opd-mobile-shell .reception-actions,
    body.opd-mobile-shell .reception-quick-actions,
    body.opd-mobile-shell .billing-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    body.opd-mobile-shell .reception-action,
    body.opd-mobile-shell .reception-quick-actions a,
    body.opd-mobile-shell .billing-quick-actions a,
    body.opd-mobile-shell button,
    body.opd-mobile-shell .btn-link,
    body.opd-mobile-shell input[type="submit"],
    body.opd-mobile-shell input[type="button"],
    body.opd-mobile-shell input[type="reset"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.16 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell label {
        font-size: 0.88rem !important;
        color: var(--mobile-muted) !important;
        gap: 4px !important;
    }

    body.opd-mobile-shell input,
    body.opd-mobile-shell select,
    body.opd-mobile-shell textarea {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell textarea {
        min-height: 86px !important;
    }

    body.opd-mobile-shell .form-grid,
    body.opd-mobile-shell .registration-layout,
    body.opd-mobile-shell .patient-details-panel,
    body.opd-mobile-shell .home-reception-grid,
    body.opd-mobile-shell .home-doctor-grid,
    body.opd-mobile-shell .consult-layout,
    body.opd-mobile-shell .workbench-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.opd-mobile-shell .toolbar,
    body.opd-mobile-shell .form-inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    body.opd-mobile-shell .result-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 55vh !important;
        margin: 8px 0 10px !important;
        padding: 12px !important;
        overflow: auto !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
        line-height: 1.45 !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell table {
        border-radius: 12px !important;
    }

    body.opd-mobile-shell table th,
    body.opd-mobile-shell table td {
        padding: 7px !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    body.opd-mobile-shell #homeTodayQueueResult table,
    body.opd-mobile-shell #appointmentsList table,
    body.opd-mobile-shell #billingLiveInvoiceResult table,
    body.opd-mobile-shell #billingPatientHistoryResult table {
        min-width: 560px !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar {
        min-width: 100% !important;
        table-layout: fixed !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar th,
    body.opd-mobile-shell #homeAppointmentCalendar td {
        padding: 5px 3px !important;
        font-size: 0.68rem !important;
    }

    body.opd-mobile-shell #homeDoctorDateAppointmentsResult {
        min-height: auto !important;
        max-height: 55vh !important;
    }

    body.opd-mobile-shell .product-badge,
    body.opd-mobile-shell .home-start-hint,
    body.opd-mobile-shell #health-hint {
        display: none !important;
    }
}

@media (max-width: 380px) {
    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex-basis: 60px !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-text {
        font-size: 0.62rem !important;
    }
}

@media (max-width: 480px) {
    .sidebar {
        height: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    .sidebar .menu-item,
    .sidebar .submenu-item {
        flex-basis: 74px;
        width: 74px;
        min-width: 74px;
        max-width: 74px;
        height: 56px;
        font-size: 0.62rem !important;
        padding: 7px 5px !important;
    }

    .header h1 {
        font-size: 1.05rem !important;
    }

    #istClock {
        font-size: 0.8rem !important;
    }

    section:not(.toolbar) {
        padding: 10px !important;
    }

    table {
        width: 100% !important;
        min-width: 0 !important;
    }

    table th,
    table td {
        white-space: normal !important;
        word-break: break-word !important;
        padding: 8px !important;
    }

    .reception-quick-actions,
    .billing-quick-actions {
        grid-template-columns: 1fr !important;
    }

    .doctor-panel h2,
    .doctor-panel h3,
    .doctor-panel h4,
    .header h1 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    .doctor-calendar th,
    .doctor-calendar td {
        font-size: 0.76rem !important;
    }

    .doctor-panel > div[style*="display: flex"] {
        display: grid !important;
        gap: 10px !important;
    }

    .doctor-panel > div[style*="display: flex"] button,
    .doctor-panel > div[style*="display: flex"] label,
    .doctor-panel > div[style*="display: flex"] select,
    .doctor-panel > div[style*="display: flex"] input {
        width: 100% !important;
    }

    .doctor-panel,
    .result-box,
    section:not(.toolbar) {
        margin: 6px 0 !important;
        padding: 10px !important;
    }

    .doctor-panel h2,
    .doctor-panel h3,
    .doctor-panel h4,
    .header h1 {
        font-size: 0.98rem !important;
        line-height: 1.25 !important;
    }

    .doctor-calendar,
    #appointmentsList {
        overflow-x: auto !important;
    }

    .doctor-calendar th,
    .doctor-calendar td {
        font-size: 0.72rem !important;
        padding: 5px 4px !important;
    }

    button,
    .btn-link,
    input,
    select,
    textarea {
        font-size: 0.9rem !important;
        min-height: 38px !important;
    }

    body {
        overflow-x: hidden !important;
    }

    #medicineTable {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #edf3f7 !important;
    }

    body {
        padding: 0 0 calc(92px + env(safe-area-inset-bottom)) !important;
        color: #172433 !important;
    }

    .main-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .header {
        width: 100% !important;
        min-height: 58px !important;
        padding: calc(8px + env(safe-area-inset-top)) 14px 9px !important;
        background: rgba(248, 251, 255, 0.98) !important;
        border-bottom: 1px solid rgba(183, 205, 223, 0.72) !important;
        box-shadow: 0 6px 16px rgba(17, 46, 74, 0.06) !important;
    }

    .header h1 {
        font-family: "DM Sans", "Segoe UI", sans-serif !important;
        font-size: clamp(1.08rem, 5.2vw, 1.38rem) !important;
        font-weight: 800 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        color: #12354e !important;
        overflow-wrap: anywhere !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    .header-actions {
        flex-shrink: 0 !important;
    }

    .header-actions > a[href="/logout/"],
    .header-actions > a[href="/login/"] {
        display: none !important;
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 12px 6px !important;
        overflow-x: hidden !important;
    }

    .container,
    .home-dashboard,
    .workbench-container,
    .doctor-appointments-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        height: 72px !important;
        max-height: 72px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: rgba(18, 53, 78, 0.96) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 22px !important;
        box-shadow: 0 16px 34px rgba(10, 35, 56, 0.34) !important;
        z-index: 5000 !important;
        scrollbar-width: none !important;
        backdrop-filter: blur(16px) !important;
    }

    .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .sidebar #sidebarUserCard,
    .sidebar .consult-sidebar-panel,
    .sidebar .sidebar-field,
    .sidebar .menu-toggle {
        display: none !important;
    }

    .sidebar .menu-item,
    .sidebar .submenu-item {
        flex: 0 0 70px !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 6px 5px !important;
        border: 0 !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow: hidden !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .sidebar .mobile-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 26px !important;
        height: 24px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .sidebar .mobile-menu-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .sidebar .menu-item.active,
    .sidebar .submenu-item.active {
        background: #ffffff !important;
        color: #12354e !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    }

    .sidebar .menu-item.active .mobile-menu-icon,
    .sidebar .submenu-item.active .mobile-menu-icon {
        background: #e8f4fd !important;
        color: #12354e !important;
    }

    .reception-hero,
    .home-dashboard-card,
    #homeDoctorStatsPanel,
    .doctor-panel,
    .billing-panel,
    section:not(.toolbar) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 16px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(28, 73, 114, 0.08) !important;
        box-shadow: 0 12px 24px rgba(21, 50, 79, 0.07) !important;
    }

    .reception-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .reception-hero h2,
    .home-dashboard-card h3,
    #homeDoctorStatsPanel h3,
    .doctor-panel h2,
    .doctor-panel h3,
    .billing-panel h2,
    .billing-panel h3 {
        font-family: "DM Sans", "Segoe UI", sans-serif !important;
        font-size: clamp(1.12rem, 5.6vw, 1.45rem) !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
        margin-top: 0 !important;
    }

    .reception-hero p,
    .home-dashboard-card p,
    .doctor-panel p,
    .billing-panel p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .reception-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .reception-action,
    button,
    .btn-link,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 9px 11px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    input,
    select,
    textarea {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
    }

    .result-box,
    .casepaper-table-wrap,
    #homeTodayQueueResult,
    #homeMonthlyStats,
    #appointmentsList,
    .doctor-calendar {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #homeTodayQueueResult table,
    #appointmentsList table,
    .doctor-calendar {
        min-width: 520px !important;
    }

    #homeMonthlyStats table,
    #homeAppointmentCalendar {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
}

/* Mobile polish lock: this is intentionally last. */
@media (max-width: 767px) {
    body.opd-mobile-shell {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        background: #edf3f7 !important;
    }

    body.opd-mobile-shell .header {
        min-height: 56px !important;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
        background: rgba(248, 251, 255, 0.98) !important;
    }

    body.opd-mobile-shell .header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    body.opd-mobile-shell .header-actions > a[href="/logout/"],
    body.opd-mobile-shell .header-actions > a[href="/login/"] {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 11px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    body.opd-mobile-shell .content {
        padding: 10px 10px 2px !important;
        overflow-x: hidden !important;
    }

    body.opd-mobile-shell .sidebar {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        height: 74px !important;
        max-height: 74px !important;
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 20px !important;
        background: rgba(18, 53, 78, 0.98) !important;
    }

    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex: 0 0 clamp(62px, 18vw, 74px) !important;
        width: clamp(62px, 18vw, 74px) !important;
        min-width: clamp(62px, 18vw, 74px) !important;
        max-width: clamp(62px, 18vw, 74px) !important;
        height: 58px !important;
        padding: 6px 4px !important;
        border-radius: 15px !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-icon {
        min-width: 25px !important;
        height: 23px !important;
        font-size: 0.66rem !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-text {
        font-size: 0.66rem !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    body.opd-mobile-shell .container,
    body.opd-mobile-shell .home-dashboard,
    body.opd-mobile-shell .workbench-container,
    body.opd-mobile-shell .doctor-appointments-container {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body.opd-mobile-shell .reception-hero,
    body.opd-mobile-shell .home-dashboard-card,
    body.opd-mobile-shell #homeDoctorStatsPanel,
    body.opd-mobile-shell .doctor-panel,
    body.opd-mobile-shell .billing-panel,
    body.opd-mobile-shell .registration-panel,
    body.opd-mobile-shell .reception-workflow-bar,
    body.opd-mobile-shell section:not(.toolbar) {
        margin: 0 0 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid rgba(30, 79, 120, 0.12) !important;
        box-shadow: 0 12px 24px rgba(21, 50, 79, 0.07) !important;
    }

    body.opd-mobile-shell .form-grid,
    body.opd-mobile-shell .registration-layout,
    body.opd-mobile-shell .patient-details-panel,
    body.opd-mobile-shell .home-reception-grid,
    body.opd-mobile-shell .home-doctor-grid,
    body.opd-mobile-shell .consult-layout,
    body.opd-mobile-shell .workbench-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.opd-mobile-shell .reception-actions,
    body.opd-mobile-shell .reception-quick-actions,
    body.opd-mobile-shell .billing-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.opd-mobile-shell input,
    body.opd-mobile-shell select,
    body.opd-mobile-shell textarea {
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }

    body.opd-mobile-shell button,
    body.opd-mobile-shell .btn-link,
    body.opd-mobile-shell input[type="submit"],
    body.opd-mobile-shell input[type="button"],
    body.opd-mobile-shell input[type="reset"] {
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
    }

    body.opd-mobile-shell .result-box {
        max-height: 55vh !important;
        padding: 12px !important;
        border-radius: 14px !important;
        font-size: 0.88rem !important;
        line-height: 1.45 !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar th,
    body.opd-mobile-shell #homeAppointmentCalendar td {
        padding: 5px 3px !important;
        font-size: 0.68rem !important;
    }
}

@media (max-width: 380px) {
    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex-basis: 60px !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }
}

.mobile-only-nav {
    display: none !important;
}

@media (max-width: 767px) {
    body.opd-mobile-shell .sidebar .mobile-only-nav {
        display: flex !important;
    }

    body.opd-mobile-shell .sidebar {
        height: 78px !important;
        max-height: 78px !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex-basis: clamp(66px, 18vw, 78px) !important;
        width: clamp(66px, 18vw, 78px) !important;
        min-width: clamp(66px, 18vw, 78px) !important;
        max-width: clamp(66px, 18vw, 78px) !important;
        height: 60px !important;
        border-radius: 16px !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-icon {
        min-width: 28px !important;
        height: 24px !important;
        letter-spacing: 0 !important;
        font-size: 0.68rem !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }

    body.opd-mobile-shell .sidebar .mobile-menu-text {
        font-size: 0.68rem !important;
        letter-spacing: 0 !important;
    }

    body.opd-mobile-shell .sidebar a[href="/logout/"] {
        color: #ffe4e6 !important;
    }

    body.opd-mobile-shell .sidebar a[href="/logout/"] .mobile-menu-icon {
        background: rgba(220, 38, 38, 0.22) !important;
        color: #ffffff !important;
    }

    body.opd-mobile-shell .sidebar a[href="/logout/"].active {
        background: #fff1f2 !important;
        color: #991b1b !important;
    }

    body.opd-mobile-shell .sidebar a[href="/logout/"].active .mobile-menu-icon {
        background: #fecdd3 !important;
        color: #991b1b !important;
    }
}

/* Tablet shell: compact left rail for Android tablets and iPads. */
@media (min-width: 768px) and (max-width: 1023px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        background: #edf3f7 !important;
    }

    body.opd-tablet-shell {
        display: flex !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
        color: #172433 !important;
    }

    body.opd-tablet-shell .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 108px !important;
        height: 100vh !important;
        padding: 12px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: linear-gradient(180deg, #173f5c 0%, #12354e 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 10px 0 24px rgba(10, 35, 56, 0.2) !important;
        z-index: 1200 !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
    }

    body.opd-tablet-shell .sidebar #sidebarUserCard,
    body.opd-tablet-shell .sidebar .consult-sidebar-panel,
    body.opd-tablet-shell .sidebar .sidebar-field,
    body.opd-tablet-shell .sidebar .menu-toggle {
        display: none !important;
    }

    body.opd-tablet-shell .sidebar .submenu {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body.opd-tablet-shell .sidebar .mobile-only-nav {
        display: flex !important;
    }

    body.opd-tablet-shell .sidebar .menu-item,
    body.opd-tablet-shell .sidebar .submenu-item {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        min-height: 64px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 6px !important;
        border: 0 !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.92) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        font-size: 0.72rem !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        white-space: normal !important;
    }

    body.opd-tablet-shell .sidebar .menu-item:hover,
    body.opd-tablet-shell .sidebar .submenu-item:hover {
        background: rgba(255, 255, 255, 0.16) !important;
        transform: translateY(-1px) !important;
    }

    body.opd-tablet-shell .sidebar .menu-item.active,
    body.opd-tablet-shell .sidebar .submenu-item.active {
        background: #ffffff !important;
        color: #12354e !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
    }

    body.opd-tablet-shell .sidebar .mobile-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 30px !important;
        height: 26px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    body.opd-tablet-shell .sidebar .mobile-menu-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    body.opd-tablet-shell .sidebar .menu-item.active .mobile-menu-icon,
    body.opd-tablet-shell .sidebar .submenu-item.active .mobile-menu-icon {
        background: #e8f4fd !important;
        color: #12354e !important;
    }

    body.opd-tablet-shell .sidebar a[href="/logout/"] {
        margin-top: auto !important;
        color: #ffe4e6 !important;
        background: rgba(220, 38, 38, 0.16) !important;
    }

    body.opd-tablet-shell .sidebar a[href="/logout/"] .mobile-menu-icon {
        background: rgba(220, 38, 38, 0.28) !important;
        color: #ffffff !important;
    }

    body.opd-tablet-shell .main-content {
        margin-left: 108px !important;
        width: calc(100vw - 108px) !important;
        flex: 0 0 calc(100vw - 108px) !important;
        min-width: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.opd-tablet-shell .header {
        min-height: 68px !important;
        padding: 14px 18px !important;
        background: rgba(248, 251, 255, 0.98) !important;
        border-bottom: 1px solid rgba(183, 205, 223, 0.72) !important;
        box-shadow: 0 6px 16px rgba(17, 46, 74, 0.06) !important;
        gap: 12px !important;
    }

    body.opd-tablet-shell .header h1 {
        font-size: clamp(1.35rem, 2.3vw, 1.75rem) !important;
        line-height: 1.18 !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body.opd-tablet-shell .header-actions {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    body.opd-tablet-shell #istClock {
        font-size: 0.86rem !important;
        padding-right: 0.35rem !important;
    }

    body.opd-tablet-shell .header-actions > a[href="/logout/"],
    body.opd-tablet-shell .header-actions > a[href="/login/"] {
        min-height: 40px !important;
        padding: 9px 14px !important;
        border-radius: 12px !important;
    }

    body.opd-tablet-shell .content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.opd-tablet-shell .container,
    body.opd-tablet-shell .home-dashboard,
    body.opd-tablet-shell .workbench-container,
    body.opd-tablet-shell .doctor-appointments-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.opd-tablet-shell .home-reception-grid,
    body.opd-tablet-shell .home-doctor-grid,
    body.opd-tablet-shell .consult-layout,
    body.opd-tablet-shell .registration-layout,
    body.opd-tablet-shell .workbench-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.opd-tablet-shell .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.opd-tablet-shell div[style*="grid-template-columns"],
    body.opd-tablet-shell form[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.opd-tablet-shell #doctorBillingNextApptRow,
    body.opd-tablet-shell #doctorBillingRctRow2,
    body.opd-tablet-shell #doctorBillingAddonsForm,
    body.opd-tablet-shell #doctorBillingProcedureForm {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.opd-tablet-shell #doctorBillingRctRow2.is-hidden {
        display: none !important;
    }

    body.opd-tablet-shell #doctorBillingNextApptRow [style*="display:contents"] {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.opd-tablet-shell section:not(.toolbar),
    body.opd-tablet-shell .doctor-panel,
    body.opd-tablet-shell .billing-panel,
    body.opd-tablet-shell .registration-panel,
    body.opd-tablet-shell .reception-workflow-bar,
    body.opd-tablet-shell .home-dashboard-card,
    body.opd-tablet-shell #homeDoctorStatsPanel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 14px !important;
        padding: 16px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid rgba(30, 79, 120, 0.12) !important;
        box-shadow: 0 12px 24px rgba(21, 50, 79, 0.07) !important;
        box-sizing: border-box !important;
    }

    body.opd-tablet-shell input,
    body.opd-tablet-shell select,
    body.opd-tablet-shell textarea {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    body.opd-tablet-shell button,
    body.opd-tablet-shell .btn-link,
    body.opd-tablet-shell input[type="submit"],
    body.opd-tablet-shell input[type="button"],
    body.opd-tablet-shell input[type="reset"] {
        min-height: 42px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    body.opd-tablet-shell .result-box,
    body.opd-tablet-shell .casepaper-table-wrap,
    body.opd-tablet-shell #homeTodayQueueResult,
    body.opd-tablet-shell #homeMonthlyStats,
    body.opd-tablet-shell #appointmentsList,
    body.opd-tablet-shell .doctor-calendar {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.opd-tablet-shell #homeTodayQueueResult table,
    body.opd-tablet-shell #appointmentsList table,
    body.opd-tablet-shell #billingLiveInvoiceResult table,
    body.opd-tablet-shell #billingPatientHistoryResult table,
    body.opd-tablet-shell #medicineTable,
    body.opd-tablet-shell .casepaper-table {
        min-width: 640px !important;
    }

    body.opd-tablet-shell #homeAppointmentCalendar,
    body.opd-tablet-shell #homeMonthlyStats table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    body.opd-tablet-shell table th,
    body.opd-tablet-shell table td {
        padding: 8px !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    body.opd-tablet-shell .product-badge {
        right: 12px !important;
        bottom: 10px !important;
        z-index: 900 !important;
    }
}

@media (min-width: 768px) and (max-width: 920px) {
    body.opd-tablet-shell #istClock {
        display: none !important;
    }

    body.opd-tablet-shell .form-grid,
    body.opd-tablet-shell div[style*="grid-template-columns"],
    body.opd-tablet-shell form[style*="grid-template-columns"],
    body.opd-tablet-shell #doctorBillingNextApptRow,
    body.opd-tablet-shell #doctorBillingRctRow2,
    body.opd-tablet-shell #doctorBillingAddonsForm,
    body.opd-tablet-shell #doctorBillingProcedureForm {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive table system: consistent grey-blue tables for mobile and tablet shells. */
@media (max-width: 1023px) {
    body.opd-mobile-shell,
    body.opd-tablet-shell {
        --responsive-table-border: #c9d8e6;
        --responsive-table-head: #dceaf5;
        --responsive-table-head-text: #12354e;
        --responsive-table-row: #ffffff;
        --responsive-table-row-alt: #f3f7fb;
        --responsive-table-cell: #1f3347;
        --responsive-table-muted: #5c7085;
        --responsive-table-hover: #eaf3fa;
    }

    body.opd-mobile-shell .result-box,
    body.opd-mobile-shell .casepaper-table-wrap,
    body.opd-mobile-shell .prescription-history-table-wrap,
    body.opd-mobile-shell .doctor-appointments-table-wrap,
    body.opd-mobile-shell .reminder-table-wrap,
    body.opd-mobile-shell .table-container,
    body.opd-mobile-shell .billing-invoice-table-wrapper,
    body.opd-mobile-shell #appointmentsList,
    body.opd-mobile-shell #homeTodayQueueResult,
    body.opd-mobile-shell #homeMonthlyStats,
    body.opd-mobile-shell #homeDoctorDateAppointmentsResult,
    body.opd-mobile-shell #billingLiveInvoiceResult,
    body.opd-mobile-shell #billingPatientHistoryResult,
    body.opd-mobile-shell #manageTodayAppointments,
    body.opd-mobile-shell #manageBookingResult,
    body.opd-tablet-shell .result-box,
    body.opd-tablet-shell .casepaper-table-wrap,
    body.opd-tablet-shell .prescription-history-table-wrap,
    body.opd-tablet-shell .doctor-appointments-table-wrap,
    body.opd-tablet-shell .reminder-table-wrap,
    body.opd-tablet-shell .table-container,
    body.opd-tablet-shell .billing-invoice-table-wrapper,
    body.opd-tablet-shell #appointmentsList,
    body.opd-tablet-shell #homeTodayQueueResult,
    body.opd-tablet-shell #homeMonthlyStats,
    body.opd-tablet-shell #homeDoctorDateAppointmentsResult,
    body.opd-tablet-shell #billingLiveInvoiceResult,
    body.opd-tablet-shell #billingPatientHistoryResult,
    body.opd-tablet-shell #manageTodayAppointments,
    body.opd-tablet-shell #manageBookingResult {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        border: 1px solid var(--responsive-table-border) !important;
        border-radius: 10px !important;
        background: #eef4f9 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell table,
    body.opd-tablet-shell table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: var(--responsive-table-row) !important;
        color: var(--responsive-table-cell) !important;
        border: 1px solid var(--responsive-table-border) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    body.opd-mobile-shell table th,
    body.opd-mobile-shell table td,
    body.opd-tablet-shell table th,
    body.opd-tablet-shell table td {
        border: 0 !important;
        border-right: 1px solid var(--responsive-table-border) !important;
        border-bottom: 1px solid var(--responsive-table-border) !important;
        color: var(--responsive-table-cell) !important;
        line-height: 1.35 !important;
        vertical-align: top !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }

    body.opd-mobile-shell table th:last-child,
    body.opd-mobile-shell table td:last-child,
    body.opd-tablet-shell table th:last-child,
    body.opd-tablet-shell table td:last-child {
        border-right: 0 !important;
    }

    body.opd-mobile-shell table tr:last-child td,
    body.opd-tablet-shell table tr:last-child td {
        border-bottom: 0 !important;
    }

    body.opd-mobile-shell table th,
    body.opd-mobile-shell table thead td,
    body.opd-mobile-shell table tr:first-child th,
    body.opd-tablet-shell table th,
    body.opd-tablet-shell table thead td,
    body.opd-tablet-shell table tr:first-child th {
        background: var(--responsive-table-head) !important;
        color: var(--responsive-table-head-text) !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    body.opd-mobile-shell table tbody tr:nth-child(even) td,
    body.opd-tablet-shell table tbody tr:nth-child(even) td {
        background: var(--responsive-table-row-alt) !important;
    }

    body.opd-mobile-shell table tbody tr:nth-child(odd) td,
    body.opd-tablet-shell table tbody tr:nth-child(odd) td {
        background: var(--responsive-table-row) !important;
    }

    body.opd-mobile-shell table tbody tr:hover td,
    body.opd-tablet-shell table tbody tr:hover td {
        background: var(--responsive-table-hover) !important;
    }

    body.opd-mobile-shell table td small,
    body.opd-tablet-shell table td small {
        color: var(--responsive-table-muted) !important;
    }

    body.opd-mobile-shell table button,
    body.opd-mobile-shell table .btn-link,
    body.opd-tablet-shell table button,
    body.opd-tablet-shell table .btn-link {
        min-height: 34px !important;
        width: auto !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    body.opd-mobile-shell table {
        min-width: 560px !important;
        font-size: 0.82rem !important;
    }

    body.opd-mobile-shell table th,
    body.opd-mobile-shell table td {
        padding: 8px 7px !important;
        font-size: 0.82rem !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar,
    body.opd-mobile-shell #homeMonthlyStats table,
    body.opd-mobile-shell #medicineTable {
        min-width: 100% !important;
        table-layout: fixed !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar th,
    body.opd-mobile-shell #homeAppointmentCalendar td {
        padding: 5px 3px !important;
        font-size: 0.68rem !important;
        overflow-wrap: break-word !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.opd-tablet-shell table {
        min-width: 680px !important;
        font-size: 0.88rem !important;
    }

    body.opd-tablet-shell table th,
    body.opd-tablet-shell table td {
        padding: 9px 10px !important;
        font-size: 0.88rem !important;
    }

    body.opd-tablet-shell #homeAppointmentCalendar,
    body.opd-tablet-shell #homeMonthlyStats table,
    body.opd-tablet-shell #medicineTable {
        min-width: 100% !important;
        table-layout: fixed !important;
    }
}

/* Orientation-safe table alignment for mobile/tablet portrait and landscape. */
@media (max-width: 1023px) {
    body.opd-mobile-shell :is(section, div):has(> table),
    body.opd-tablet-shell :is(section, div):has(> table),
    body.opd-mobile-shell :is(.result-box, .casepaper-table-wrap, .prescription-history-table-wrap, .doctor-appointments-table-wrap, .reminder-table-wrap, .table-container, .billing-invoice-table-wrapper, #appointmentsList, #homeTodayQueueResult, #homeDoctorDateAppointmentsResult, #billingLiveInvoiceResult, #billingPatientHistoryResult, #manageTodayAppointments, #manageBookingResult),
    body.opd-tablet-shell :is(.result-box, .casepaper-table-wrap, .prescription-history-table-wrap, .doctor-appointments-table-wrap, .reminder-table-wrap, .table-container, .billing-invoice-table-wrapper, #appointmentsList, #homeTodayQueueResult, #homeDoctorDateAppointmentsResult, #billingLiveInvoiceResult, #billingPatientHistoryResult, #manageTodayAppointments, #manageBookingResult) {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-inline: contain !important;
    }

    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar),
    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) th,
    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) td,
    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) th,
    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) td {
        min-width: 96px !important;
        max-width: 220px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) th,
    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) th {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    body.opd-mobile-shell #homeAppointmentCalendar,
    body.opd-mobile-shell #homeMonthlyStats table,
    body.opd-mobile-shell #medicineTable,
    body.opd-mobile-shell .doctor-calendar,
    body.opd-tablet-shell #homeAppointmentCalendar,
    body.opd-tablet-shell #homeMonthlyStats table,
    body.opd-tablet-shell #medicineTable,
    body.opd-tablet-shell .doctor-calendar {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
    }
}

@media (max-width: 1023px) and (orientation: portrait) {
    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        min-width: 640px !important;
    }

    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        min-width: 780px !important;
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    body.opd-mobile-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        min-width: 760px !important;
    }

    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        min-width: 900px !important;
    }
}

/* Phase responsive system: exactly three supported shells.
   Mobile: 0-767px, Tablet: 768-1023px, Desktop: 1024px+. */
.responsive-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.responsive-card {
    min-width: 0 !important;
    border: 1px solid #d7e6f2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(23, 63, 92, 0.08) !important;
    box-sizing: border-box !important;
}

.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

.mobile-card-list {
    display: none;
}

.portrait-required-message {
    display: none;
}

@media (max-width: 767px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        min-width: 0 !important;
    }

    .mobile-only {
        display: revert !important;
    }

    .tablet-only,
    .desktop-only {
        display: none !important;
    }

    .responsive-page,
    .container,
    .content,
    section,
    .result-box,
    .responsive-card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .responsive-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .table-responsive table {
        min-width: 640px !important;
    }

    .mobile-card-list {
        display: grid !important;
        gap: 12px !important;
    }

    .mobile-card-list .responsive-card {
        display: grid !important;
        gap: 10px !important;
    }

    .mobile-card-field {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .mobile-card-label {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-card-value {
        color: #172433;
        font-size: 0.92rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .mobile-card-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    .mobile-card-actions > *,
    .mobile-card-actions .btn-link,
    .mobile-card-actions button {
        width: auto !important;
        min-width: 88px !important;
        flex: 1 1 calc(50% - 8px) !important;
        margin: 0 !important;
    }

    .table-to-cards {
        display: none !important;
    }

    .form-grid,
    .registration-layout,
    .patient-details-panel,
    .consult-layout,
    .rx-layout,
    .workbench-grid,
    .home-reception-grid,
    .home-doctor-grid {
        grid-template-columns: 1fr !important;
    }

    .form-inline,
    .toolbar,
    .billing-command-bar,
    .reception-workflow-bar,
    .reception-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn-link {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .portrait-required-message {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        background: #edf3f7 !important;
        color: #12354e !important;
        text-align: center !important;
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
        box-sizing: border-box !important;
    }

    .sidebar,
    .main-content,
    .product-badge {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: revert !important;
    }

    .mobile-only,
    .desktop-only {
        display: none !important;
    }

    body.opd-tablet-shell .sidebar {
        width: 108px !important;
    }

    body.opd-tablet-shell .main-content {
        margin-left: 108px !important;
        width: calc(100vw - 108px) !important;
        flex: 0 0 calc(100vw - 108px) !important;
    }

    body.opd-tablet-shell .form-grid,
    body.opd-tablet-shell .patient-details-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.opd-tablet-shell .table-responsive table,
    body.opd-tablet-shell table:not(#homeAppointmentCalendar):not(#medicineTable):not(.doctor-calendar) {
        min-width: 720px !important;
    }
}

@media (min-width: 1024px) {
    .desktop-only {
        display: revert !important;
    }

    .mobile-only,
    .tablet-only {
        display: none !important;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .main-content {
        margin-left: 220px !important;
        width: calc(100vw - 220px) !important;
        flex: 0 0 calc(100vw - 220px) !important;
    }
}

/* Production responsive layout contract.
   Supported shells: Mobile 0-767, Tablet 768-1023, Desktop 1024+. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

.responsive-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.responsive-card {
    min-width: 0;
    border: 1px solid #d7e6f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(23, 63, 92, 0.08);
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-card-list {
    display: none;
}

.portrait-required-message {
    display: none;
}

.mobile-only,
.tablet-only {
    display: none !important;
}

.desktop-only {
    display: revert !important;
}

@media (max-width: 767px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        background: #edf3f7 !important;
    }

    body.opd-mobile-shell {
        display: block !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 0 0 calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-only {
        display: revert !important;
    }

    .tablet-only,
    .desktop-only {
        display: none !important;
    }

    body.opd-mobile-shell .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        flex: none !important;
        overflow: visible !important;
    }

    body.opd-mobile-shell .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
        gap: 8px !important;
    }

    body.opd-mobile-shell .header h1 {
        min-width: 0 !important;
        font-size: clamp(1.05rem, 5vw, 1.32rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    body.opd-mobile-shell .header-actions {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    body.opd-mobile-shell #istClock,
    body.opd-mobile-shell .header-actions > a[href="/logout/"],
    body.opd-mobile-shell .header-actions > a[href="/login/"] {
        display: none !important;
    }

    body.opd-mobile-shell .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    body.opd-mobile-shell .container,
    body.opd-mobile-shell .responsive-page,
    body.opd-mobile-shell .home-dashboard,
    body.opd-mobile-shell .workbench-container,
    body.opd-mobile-shell .doctor-appointments-container,
    body.opd-mobile-shell .doctor-consultation-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.opd-mobile-shell section:not(.toolbar),
    body.opd-mobile-shell .responsive-card,
    body.opd-mobile-shell .registration-panel,
    body.opd-mobile-shell .doctor-panel,
    body.opd-mobile-shell .billing-panel,
    body.opd-mobile-shell .home-dashboard-card,
    body.opd-mobile-shell #homeDoctorStatsPanel,
    body.opd-mobile-shell .reception-hero,
    body.opd-mobile-shell .reception-workflow-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 10px !important;
        padding: 14px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid rgba(30, 79, 120, 0.12) !important;
        box-shadow: 0 12px 24px rgba(21, 50, 79, 0.07) !important;
    }

    body.opd-mobile-shell .form-grid,
    body.opd-mobile-shell .registration-layout,
    body.opd-mobile-shell .patient-details-panel,
    body.opd-mobile-shell .consult-layout,
    body.opd-mobile-shell .rx-layout,
    body.opd-mobile-shell .workbench-grid,
    body.opd-mobile-shell .home-reception-grid,
    body.opd-mobile-shell .home-doctor-grid,
    body.opd-mobile-shell div[style*="grid-template-columns"],
    body.opd-mobile-shell form[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.opd-mobile-shell .toolbar,
    body.opd-mobile-shell .form-inline,
    body.opd-mobile-shell .reception-hero,
    body.opd-mobile-shell .reception-workflow-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.opd-mobile-shell label,
    body.opd-mobile-shell input,
    body.opd-mobile-shell select,
    body.opd-mobile-shell textarea,
    body.opd-mobile-shell button,
    body.opd-mobile-shell .btn-link {
        max-width: 100% !important;
    }

    body.opd-mobile-shell input,
    body.opd-mobile-shell select,
    body.opd-mobile-shell textarea {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        font-size: 16px !important;
    }

    body.opd-mobile-shell button,
    body.opd-mobile-shell .btn-link,
    body.opd-mobile-shell input[type="submit"],
    body.opd-mobile-shell input[type="button"],
    body.opd-mobile-shell input[type="reset"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body.opd-mobile-shell .sidebar {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        height: 78px !important;
        max-height: 78px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 20px !important;
        z-index: 5000 !important;
        scrollbar-width: none !important;
    }

    body.opd-mobile-shell .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    body.opd-mobile-shell .sidebar #sidebarUserCard,
    body.opd-mobile-shell .sidebar .consult-sidebar-panel,
    body.opd-mobile-shell .sidebar .sidebar-field,
    body.opd-mobile-shell .sidebar .menu-toggle {
        display: none !important;
    }

    body.opd-mobile-shell .sidebar .submenu {
        display: contents !important;
    }

    body.opd-mobile-shell .sidebar .menu-item,
    body.opd-mobile-shell .sidebar .submenu-item {
        flex: 0 0 clamp(66px, 18vw, 78px) !important;
        width: clamp(66px, 18vw, 78px) !important;
        min-width: clamp(66px, 18vw, 78px) !important;
        max-width: clamp(66px, 18vw, 78px) !important;
        height: 60px !important;
        padding: 6px 4px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 16px !important;
        white-space: normal !important;
    }

    body.opd-mobile-shell .table-responsive.has-mobile-cards {
        display: none !important;
    }

    body.opd-mobile-shell .mobile-card-list {
        display: grid !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.opd-mobile-shell .mobile-data-card {
        display: grid !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    body.opd-mobile-shell .mobile-data-card-title {
        color: #12354e;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    body.opd-mobile-shell .mobile-data-card-body {
        display: grid;
        gap: 8px;
    }

    body.opd-mobile-shell .mobile-card-field {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    body.opd-mobile-shell .mobile-card-label {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    body.opd-mobile-shell .mobile-card-value {
        color: #172433;
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    body.opd-mobile-shell .mobile-card-actions .mobile-card-value {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.opd-mobile-shell .mobile-card-actions a,
    body.opd-mobile-shell .mobile-card-actions button {
        flex: 1 1 calc(50% - 8px) !important;
        width: auto !important;
        min-width: 88px !important;
    }

    body.opd-mobile-shell .modal-content,
    body.opd-mobile-shell [role="dialog"] {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 104px) !important;
        overflow: auto !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .portrait-required-message {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        background: #edf3f7 !important;
        color: #12354e !important;
        text-align: center !important;
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
    }

    .sidebar,
    .main-content,
    .product-badge {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.opd-tablet-shell {
        display: flex !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
    }

    .tablet-only {
        display: revert !important;
    }

    .mobile-only,
    .desktop-only {
        display: none !important;
    }

    body.opd-tablet-shell .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 108px !important;
        height: 100vh !important;
        padding: 10px 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
    }

    body.opd-tablet-shell .sidebar #sidebarUserCard,
    body.opd-tablet-shell .sidebar .consult-sidebar-panel,
    body.opd-tablet-shell .sidebar .sidebar-field {
        display: none !important;
    }

    body.opd-tablet-shell .sidebar .menu-item,
    body.opd-tablet-shell .sidebar .submenu-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 9px 6px !important;
        border-left: 0 !important;
        border-radius: 8px !important;
        text-align: center !important;
        font-size: 0.76rem !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    body.opd-tablet-shell .main-content {
        margin-left: 108px !important;
        width: calc(100vw - 108px) !important;
        max-width: calc(100vw - 108px) !important;
        flex: 0 0 calc(100vw - 108px) !important;
        min-width: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.opd-tablet-shell .header {
        min-width: 0 !important;
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    body.opd-tablet-shell .header h1 {
        min-width: 0 !important;
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    body.opd-tablet-shell .header-actions {
        gap: 8px !important;
        min-width: 0 !important;
    }

    body.opd-tablet-shell .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        overflow-x: hidden !important;
    }

    body.opd-tablet-shell .container,
    body.opd-tablet-shell .responsive-page,
    body.opd-tablet-shell .home-dashboard,
    body.opd-tablet-shell .workbench-container,
    body.opd-tablet-shell .doctor-appointments-container,
    body.opd-tablet-shell .doctor-consultation-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body.opd-tablet-shell .form-grid,
    body.opd-tablet-shell .registration-layout,
    body.opd-tablet-shell .patient-details-panel,
    body.opd-tablet-shell .home-reception-grid,
    body.opd-tablet-shell .home-doctor-grid,
    body.opd-tablet-shell .consult-layout,
    body.opd-tablet-shell .workbench-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.opd-tablet-shell .table-responsive {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    body.opd-tablet-shell .mobile-card-list {
        display: none !important;
    }

    body.opd-tablet-shell table {
        min-width: 680px !important;
        width: max-content !important;
        border-collapse: collapse !important;
        font-size: 0.86rem !important;
    }

    body.opd-tablet-shell table th,
    body.opd-tablet-shell table td {
        padding: 8px 9px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (min-width: 1024px) {
    html,
    body {
        overflow: hidden;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) {
        display: flex;
        height: 100vh;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .sidebar {
        width: 220px !important;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .main-content {
        margin-left: 220px !important;
        width: calc(100vw - 220px) !important;
        max-width: calc(100vw - 220px) !important;
        flex: 0 0 calc(100vw - 220px) !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .content,
    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .container,
    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .responsive-page {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .table-responsive {
        display: block !important;
    }

    body:not(.opd-mobile-shell):not(.opd-tablet-shell) .mobile-card-list {
        display: none !important;
    }
}