/* ==========================================================================
   digitalpulse.website Custom Responsive Enhancements
   Targeting breakpoints: 320px, 375px, 768px, 1024px, 1280px+
   ========================================================================== */

@font-face {
    font-family: 'SolaimanLipi';
    src: local('SolaimanLipi'), local('Solaiman Lipi'),
         url('/static/Assets/fonts/SolaimanLipi.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SolaimanLipi';
    src: local('SolaimanLipi-Bold'), local('Solaiman Lipi Bold'),
         url('/static/Assets/fonts/SolaimanLipi-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalpurush';
    src: local('Kalpurush'), local('Kalpurush Regular'),
         url('/static/Assets/fonts/Kalpurush.woff2') format('woff2'),
         url('/static/Assets/fonts/Kalpurush.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SutonnyMJ';
    src: local('SutonnyMJ'), local('sutonnymj'),
         url('/static/Assets/fonts/SutonnyMJ.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SutonnyMJ';
    src: local('SutonnyMJ-Bold'), local('sutonnymj-bold'),
         url('/static/Assets/fonts/SutonnyMJ-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Bengali Font Support & High-Legibility Sizing
   -------------------------------------------------------------------------- */
/* Legacy Bijoy ANSI Font Support (Strictly for explicit Bijoy tagged content) */
.bn-bijoy,
[style*="SutonnyMJ"],
[style*="sutonnymj"],
td[style*="SutonnyMJ"],
td[style*="sutonnymj"],
div[style*="SutonnyMJ"],
div[style*="sutonnymj"] {
    font-family: 'SutonnyMJ', sutonnymj, sans-serif !important;
}

/* Modern Unicode Bengali Support for All Prescription Text & UI */
.bn,
.bn input,
.bn select,
.bn textarea,
.bn-text,
.bn-unicode,
.specialNote {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
}

/* Specific Unicode font for Doses, Duration, Advice inputs */
input.dosesName,
input.duration,
input.advice,
#txtDosesName,
#txtDuration,
#txtAdvice,
.rx-unicode-input {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600;
}

/* Unicode vs Bijoy dual font support for Medication Table Cells */
.bn-unicode,
td.med-doses-cell,
td.med-duration-cell,
td.med-advice-cell,
td.med-doses-cell.bn-unicode,
td.med-duration-cell.bn-unicode,
td.med-advice-cell.bn-unicode {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}

.bn-bijoy,
td.med-doses-cell.bn-bijoy,
td.med-duration-cell.bn-bijoy,
td.med-advice-cell.bn-bijoy {
    font-family: 'SutonnyMJ', sutonnymj, sans-serif !important;
    font-size: 19px !important;
    line-height: 1.45 !important;
}

/* Placeholders should use standard UI sans-serif font rather than SutonnyMJ */
input.dosesName::placeholder,
input.duration::placeholder,
input.advice::placeholder,
input.specialNote::placeholder {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    text-transform: none !important;
}

input.dosesName::-webkit-input-placeholder,
input.duration::-webkit-input-placeholder,
input.advice::-webkit-input-placeholder,
input.specialNote::-webkit-input-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    text-transform: none !important;
}

/* Enhanced font sizing for Bengali table cells */
#tabChiefComplaintList td.bn-text,
#tabSpecialNote td.bn-text,
.table td.bn-text {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    vertical-align: middle !important;
}

#tabChiefComplaintList td[style*="SutonnyMJ"],
#tabChiefComplaintList td[style*="sutonnymj"],
#tabSpecialNote td[style*="SutonnyMJ"],
#tabSpecialNote td[style*="sutonnymj"],
.table td[style*="SutonnyMJ"],
.table td[style*="sutonnymj"] {
    font-family: sutonnymj, 'SutonnyMJ', sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    vertical-align: middle !important;
}

/* Quick Doses, Duration & Advice Dropdown list in Bengali */
#dosesDropdownList,
#durationDropdownList,
#adviceDropdownList {
    min-width: 220px !important;
}

#dosesDropdownList li a,
#durationDropdownList li a,
#adviceDropdownList li a {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    line-height: 1.35 !important;
}

.bn .tt-dropdown-menu,
.tt-dropdown-menu .tt-suggestion.bn {
    font-family: 'SolaimanLipi', 'Kalpurush', 'Hind Siliguri', 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   2. Global Header Top & Branding Logo Responsiveness
   -------------------------------------------------------------------------- */
.page-header .page-header-top > .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 75px;
    position: relative;
    box-sizing: border-box;
}

.page-header .page-header-top .page-logo {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 480px;
    height: 75px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.page-header .page-header-top .page-logo a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 100%;
    height: 100%;
    text-decoration: none;
}

.page-header .page-header-top .page-logo img.logo-default {
    max-height: 42px;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    margin: 0 !important;
}

.page-header .page-header-top .top-menu {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    float: none !important;
}

.page-header .page-header-top .top-menu .dropdown-user .dropdown-toggle {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 10px !important;
    min-height: 38px;
    touch-action: manipulation;
}

.page-header .page-header-top .menu-toggler {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 0 10px !important;
    display: none;
    float: none !important;
    min-width: 38px;
    min-height: 34px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   3. Breakpoint Scaling for Header & Navigation
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .page-header {
        height: 52px !important;
        min-height: 52px !important;
    }
    .page-header .page-header-top {
        display: none !important;
    }
    .page-header .page-header-menu {
        display: block !important;
        height: 52px !important;
        visibility: visible !important;
    }
}

@media (max-width: 991px) {
    .page-header .page-header-top .menu-toggler {
        display: block !important;
    }

    .page-header .page-header-top .page-logo {
        max-width: calc(100% - 120px) !important;
    }

    .page-header .page-header-menu {
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid #3598dc;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .page-header .page-header-menu .hor-menu .navbar-nav > li > a {
        padding: 12px 15px;
        font-size: 14px;
    }

    .page-header .page-header-top .top-menu .dropdown-user .dropdown-toggle {
        padding: 6px 8px !important;
        background: rgba(255,255,255,0.08);
        border-radius: 4px;
        min-width: 38px;
        min-height: 34px;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .page-header .page-header-top .top-menu .dropdown-user .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        min-width: 175px;
    }
}

@media (max-width: 767px) {
    .page-header .page-header-top .page-logo {
        max-width: calc(100% - 95px) !important;
    }

    .page-header .page-header-top .page-logo img.logo-default {
        max-height: 34px !important;
    }
}

@media (max-width: 480px) {
    .page-header .page-header-top .page-logo {
        max-width: calc(100% - 85px) !important;
    }

    .page-header .page-header-top .page-logo img.logo-default {
        max-height: 30px !important;
    }
}

@media (max-width: 360px) {
    .page-header .page-header-top .page-logo {
        max-width: calc(100% - 75px) !important;
    }

    .page-header .page-header-top .page-logo img.logo-default {
        max-height: 25px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Dashboard Tiles Responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .tiles {
        margin-right: 0 !important;
    }

    .tiles .tile {
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    .tiles .tile.double {
        width: 100% !important;
        max-width: 100% !important;
    }

    .tiles .tile.double-down {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   5. Patient Profile Sidebar (Prescription Editor)
   -------------------------------------------------------------------------- */
.prescription-sidebar {
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    #appointment_list_container.prescription-flex-container,
    #appointment_list_container:has(.prescription-sidebar) {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    #appointment_list_container.prescription-flex-container::before,
    #appointment_list_container.prescription-flex-container::after,
    #appointment_list_container:has(.prescription-sidebar)::before,
    #appointment_list_container:has(.prescription-sidebar)::after {
        display: none !important;
    }

    .prescription-sidebar {
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 220px !important;
        -ms-flex: 0 0 220px !important;
        flex: 0 0 220px !important;
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        margin-right: 20px !important;
        margin-left: 0 !important;
        float: none !important;
    }

    .prescription-main-content {
        -webkit-box-flex: 1 !important;
        -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: calc(100% - 240px) !important;
        margin-left: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
}

@media (max-width: 991px) {
    #appointment_list_container.prescription-flex-container,
    #appointment_list_container:has(.prescription-sidebar) {
        display: block !important;
    }

    .prescription-sidebar {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important;
        margin-right: 0 !important;
    }

    .prescription-sidebar .profile-sidebar-portlet {
        display: flow-root !important;
        padding: 12px 15px !important;
        margin-bottom: 10px !important;
    }

    .prescription-sidebar .profile-userpic {
        float: left !important;
        width: 55px !important;
        margin: 0 12px 0 0 !important;
    }

    .prescription-sidebar .profile-userpic img {
        width: 55px !important;
        height: 55px !important;
    }

    .prescription-sidebar .profile-usertitle {
        float: left !important;
        margin-top: 5px !important;
        text-align: left !important;
    }

    .prescription-sidebar .profile-userbuttons {
        float: right !important;
        margin-top: 12px !important;
    }

    .prescription-sidebar .profile-usertitle1 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-around;
        -ms-flex-pack: justify;
        justify-content: space-around;
        padding: 8px 12px !important;
    }

    .prescription-main-content {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   6. Medication Entry Row Responsive Grid
   -------------------------------------------------------------------------- */
.medication-entry-row {
    margin-left: -4px;
    margin-right: -4px;
}

.medication-entry-row .med-col {
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}

#dosesDropdownList,
.med-doses .dropdown-menu,
.dropdown-menu.dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
}

#btnDosesDropdown {
    height: 38px !important;
    padding: 6px 10px !important;
}

/* Desktop View (>= 992px) */
@media (min-width: 992px) {
    .medication-entry-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    .medication-entry-row .med-presentation {
        width: 12% !important;
        flex: 0 0 12%;
    }

    .medication-entry-row .med-tradename {
        width: 20% !important;
        flex: 0 0 20%;
    }

    .medication-entry-row .med-doses {
        width: 23% !important;
        flex: 0 0 23%;
    }

    .medication-entry-row .med-duration {
        width: 16% !important;
        flex: 0 0 16%;
    }

    .medication-entry-row .med-advice {
        width: 22% !important;
        flex: 0 0 22%;
    }

    .medication-entry-row .med-actions {
        width: 7% !important;
        flex: 0 0 76px;
        min-width: 76px;
        white-space: nowrap;
        text-align: right;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        gap: 4px;
    }

    .medication-entry-row .med-actions .btn {
        margin: 0 !important;
        padding: 6px 10px !important;
        height: 38px !important;
        line-height: 24px !important;
        display: -webkit-inline-flex !important;
        display: inline-flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .medication-entry-row .dropdown-toggle,
    .medication-entry-row .rx-dropdown-btn {
        height: 38px !important;
        line-height: 24px !important;
        padding: 6px 8px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-left: none !important;
        transition: all 0.2s ease !important;
        display: -webkit-inline-flex !important;
        display: inline-flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }

    .medication-entry-row .dropdown-toggle:hover,
    .medication-entry-row .dropdown-toggle:focus,
    .medication-entry-row .rx-dropdown-btn:hover,
    .medication-entry-row .rx-dropdown-btn:focus {
        background: #eff6ff !important;
        border-color: #3b82f6 !important;
    }

    .medication-entry-row .rx-blue-caret,
    .medication-entry-row .dropdown-toggle i,
    .medication-entry-row .rx-dropdown-btn i {
        color: #2563eb !important;
        font-size: 14px !important;
        font-weight: bold !important;
        transition: color 0.2s ease !important;
    }

    .medication-entry-row .dropdown-toggle:hover i,
    .medication-entry-row .rx-dropdown-btn:hover i {
        color: #1d4ed8 !important;
    }

    .medication-entry-row .dropdown-toggle .caret,
    .medication-entry-row .rx-dropdown-btn .caret {
        color: #2563eb !important;
        border-top-color: #2563eb !important;
        border-bottom-color: #2563eb !important;
    }
}

/* Quick Dosage & Duration Shortcut Bar - Removed */
.rx-quick-shortcuts-bar,
#rxQuickShortcutsBar {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Tablet View (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .medication-entry-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
    }

    .medication-entry-row .med-col {
        margin-bottom: 8px;
    }

    .medication-entry-row .med-presentation {
        width: 25% !important;
        flex: 0 0 25%;
    }

    .medication-entry-row .med-tradename {
        width: 75% !important;
        flex: 0 0 75%;
    }

    .medication-entry-row .med-doses {
        width: 50% !important;
        flex: 0 0 50%;
    }

    .medication-entry-row .med-duration {
        width: 25% !important;
        flex: 0 0 25%;
    }

    .medication-entry-row .med-advice {
        width: 25% !important;
        flex: 0 0 25%;
    }

    .medication-entry-row .med-actions {
        width: 100% !important;
        flex: 0 0 100%;
        text-align: right;
        margin-top: 4px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        gap: 6px;
    }

    .medication-entry-row .med-actions .btn {
        height: 38px;
        padding: 6px 14px;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        margin: 0;
    }
}

/* Mobile View (<= 767px) */
@media (max-width: 767px) {
    .medication-entry-row {
        margin-left: 0;
        margin-right: 0;
    }

    .medication-entry-row .med-col {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 8px;
    }

    .medication-entry-row .med-presentation {
        width: 35% !important;
        float: left;
        padding-right: 4px;
    }

    .medication-entry-row .med-tradename {
        width: 65% !important;
        float: left;
        padding-left: 4px;
    }

    .medication-entry-row .med-doses {
        clear: both;
        width: 100% !important;
    }

    .medication-entry-row .med-duration {
        width: 50% !important;
        float: left;
        padding-right: 4px;
    }

    .medication-entry-row .med-advice {
        width: 50% !important;
        float: left;
        padding-left: 4px;
    }

    .medication-entry-row .med-actions {
        clear: both;
        width: 100% !important;
        margin-top: 5px;
        display: -webkit-flex;
        display: flex;
        gap: 8px;
    }

    .medication-entry-row .med-actions .btn {
        flex: 1 1 50%;
        min-height: 38px;
        padding: 8px 16px;
        font-size: 14px;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        margin: 0;
    }

    /* Fallback for form-group children with hardcoded inline widths on mobile */
    .row.form-group > div[style*="width:"],
    .row.form-group > div[style*="float: left"] {
        width: 100% !important;
        float: none !important;
        margin-bottom: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   7. Investigation, Special Note, and Chief Complaint Reflow
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .investigation-entry-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .investigation-entry-row .inv-category {
        width: 25% !important;
        flex: 0 0 25%;
        padding-right: 5px;
    }

    .investigation-entry-row .inv-testname {
        width: 65% !important;
        flex: 0 0 65%;
        padding-right: 5px;
    }

    .investigation-entry-row .inv-actions {
        width: 10% !important;
        flex: 0 0 10%;
    }

    .special-note-entry-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .special-note-entry-row .sn-text {
        width: 90% !important;
        flex: 0 0 90%;
        padding-right: 5px;
    }

    .special-note-entry-row .sn-actions {
        width: 10% !important;
        flex: 0 0 10%;
    }

    .chief-complaint-entry-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 6px;
        margin-bottom: 12px;
    }

    .chief-complaint-entry-row .cc-col {
        box-sizing: border-box;
    }

    .chief-complaint-entry-row .cc-complaint {
        width: 50% !important;
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 6px;
    }

    .chief-complaint-entry-row .cc-duration {
        width: 40% !important;
        flex: 0 0 40%;
        max-width: 40%;
        padding-right: 6px;
    }

    .chief-complaint-entry-row .cc-actions {
        width: 10% !important;
        flex: 0 0 10%;
        max-width: 10%;
        padding-left: 0;
        display: flex;
        align-items: stretch;
    }

    .chief-complaint-entry-row .cc-actions .btn {
        width: 100% !important;
        height: 34px !important;
        line-height: 20px !important;
        padding: 6px 4px !important;
        font-size: 13px !important;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .chief-complaint-entry-row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .investigation-entry-row .inv-category,
    .investigation-entry-row .inv-testname,
    .investigation-entry-row .inv-actions,
    .special-note-entry-row .sn-text,
    .special-note-entry-row .sn-actions,
    .chief-complaint-entry-row .cc-complaint,
    .chief-complaint-entry-row .cc-duration,
    .chief-complaint-entry-row .cc-actions {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding-right: 0 !important;
        margin-bottom: 8px;
    }

    .investigation-entry-row .inv-actions .btn,
    .special-note-entry-row .sn-actions .btn,
    .chief-complaint-entry-row .cc-actions .btn {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   8. Tabs and Portlet Headers Responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .tabbable-custom > .nav-tabs {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 2px solid #ddd;
    }

    .tabbable-custom > .nav-tabs > li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
        margin-bottom: 2px;
    }

    .tabbable-custom > .nav-tabs > li > a {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .portlet > .portlet-title {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        min-height: auto;
        padding-bottom: 10px;
    }

    .portlet > .portlet-title > .caption {
        float: none;
        margin-bottom: 6px;
    }

    .portlet > .portlet-title > .actions {
        float: none;
        margin: 2px;
    }
}

/* --------------------------------------------------------------------------
   9. Tables, DataTables, and Overflow Prevention
   -------------------------------------------------------------------------- */
.table-responsive {
    width: 100% !important;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto !important;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #e7ecf1;
}

.table-responsive > .table {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #tabChiefComplaintList,
    #tabWaitingList,
    #tabCompletedList,
    #OptionList,
    .dataTables_wrapper table.dataTable {
        min-width: 580px !important;
    }
}

/* Compact Generic Name & Action columns in Medication table */
#tabChiefComplaintList th:nth-child(3),
#tabChiefComplaintList td:nth-child(3) {
    width: 6% !important;
    white-space: nowrap;
}

#tabChiefComplaintList th:last-child,
#tabChiefComplaintList td:last-child {
    width: 5% !important;
    min-width: 60px !important;
    max-width: 75px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#tabChiefComplaintList td:last-child .btn {
    margin: 1px !important;
}

.table-responsive .btn-xs {
    min-width: 28px;
    min-height: 28px;
    padding: 4px 6px;
    line-height: 1.4;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.dataTables_wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 5px;
}

.dataTables_wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        float: none !important;
        margin-bottom: 8px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 220px !important;
        display: inline-block !important;
    }
}

/* --------------------------------------------------------------------------
   10. Modals Responsiveness
   -------------------------------------------------------------------------- */
.modal-dialog.responsive-modal-dialog,
.modal-dialog {
    max-width: 900px;
    width: 95% !important;
    margin: 30px auto !important;
}

#myModalContent,
.modal-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .modal-dialog.responsive-modal-dialog,
    .modal-dialog {
        width: 96% !important;
        margin: 10px auto !important;
    }

    .modal-content {
        padding: 0 !important;
    }

    .modal-body {
        padding: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* --------------------------------------------------------------------------
   11. Mobile Touch Ergonomics & Prescription Quick Action Bar
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Touch friendly button heights */
    .portlet.light > .portlet-title > .actions .btn,
    .btn-circle.green-jungle,
    #btnAddMedication,
    #btnAddChiefComplaints,
    #btnAddInvestigation {
        min-height: 40px !important;
        line-height: 24px !important;
        padding: 7px 16px !important;
        font-size: 14px !important;
        display: -webkit-inline-flex !important;
        display: inline-flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }

    /* Action bar container on prescription header */
    .portlet.light > .portlet-title {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .portlet.light > .portlet-title > .actions {
        margin: 0 !important;
        float: none !important;
    }

    /* Form input touch sizing for medication entries */
    .drugName,
    #ddlQuickDoses,
    #txtQuantity,
    #txtDescription,
    #txtRemarks {
        min-height: 40px !important;
        font-size: 15px !important;
        border-radius: 4px !important;
    }

    .dosesName,
    .duration,
    .advice,
    .specialNote,
    #txtDosesName,
    #txtDuration,
    #txtAdvice,
    #txtspecialNoteName {
        min-height: 40px !important;
        font-size: 18px !important;
        border-radius: 4px !important;
    }

    /* Ensure table rows in medication list have comfortable tap padding */
    #medicationList td,
    #chiefComplaintsList td,
    #investigationList td {
        padding: 10px 8px !important;
        vertical-align: middle !important;
    }

    /* Typeahead dropdown list touch friendliness */
    .tt-dropdown-menu {
        max-height: 260px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        min-width: 260px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    }

    .tt-suggestion {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
}

/* --------------------------------------------------------------------------
   12. Prescription Tab Navigation & Horizontal Swipeable Pills
   -------------------------------------------------------------------------- */
.prescription-tabs-scrollable {
    display: -webkit-flex;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #eef1f5;
}

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

    .page-container,
    .page-content-wrapper,
    .page-content,
    .page-content > .container-fluid,
    #appointment_list_container,
    .prescription-main-content,
    .tabbable,
    .tabbable-custom,
    .portlet.light {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .prescription-tabs-scrollable {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding: 6px 2px 10px 2px !important;
        margin-bottom: 15px !important;
        border-bottom: 2px solid #e2e8f0 !important;
        gap: 8px !important;
        scrollbar-width: thin !important;
        -ms-overflow-style: -ms-autohiding-scrollbar !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .prescription-tabs-scrollable::-webkit-scrollbar {
        height: 5px !important;
    }

    .prescription-tabs-scrollable::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }

    .prescription-tabs-scrollable > li {
        float: none !important;
        display: inline-block !important;
        -webkit-flex-shrink: 0 !important;
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .prescription-tabs-scrollable > li > a {
        border-radius: 20px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #475569 !important;
        margin-right: 0 !important;
        display: block !important;
        transition: all 0.2s ease-in-out !important;
    }

    .prescription-tabs-scrollable > li.active > a,
    .prescription-tabs-scrollable > li.active > a:hover,
    .prescription-tabs-scrollable > li.active > a:focus {
        background: #3598dc !important;
        color: #ffffff !important;
        border-color: #3598dc !important;
        box-shadow: 0 2px 6px rgba(53, 152, 220, 0.35) !important;
    }
}

/* --------------------------------------------------------------------------
   13. Prescription Action Bar (Desktop & Mobile Sticky)
   -------------------------------------------------------------------------- */
.prescription-actions-bar {
    float: right;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.prescription-actions-bar .actions {
    float: none;
    display: inline-block;
    margin: 0 4px;
}

.prescription-actions-bar .actions.hide {
    display: none !important;
}

.prescription-actions-bar .actions .btn {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}


@media (max-width: 768px) {
    .prescription-actions-bar {
        float: none !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        padding: 8px 10px !important;
        margin: 4px 0 10px 0 !important;
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .prescription-actions-bar .actions {
        margin: 0 !important;
        float: none !important;
        flex: 1 1 auto !important;
    }

    .prescription-actions-bar .actions .btn {
        width: 100% !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
        min-height: 38px !important;
    }
}

/* --------------------------------------------------------------------------
   14. General Exam & Investigation Responsive Layout
   -------------------------------------------------------------------------- */
.general-exam-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.general-exam-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
}

.general-exam-card .exam-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.general-exam-card .exam-unit {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: none;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.general-exam-card .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    height: 38px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

.general-exam-card .form-control:focus {
    border-color: #3598dc !important;
    box-shadow: 0 0 0 2px rgba(53, 152, 220, 0.2) !important;
}

.pulse-exam-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 16px;
}

.pulse-exam-section .pulse-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulse-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

/* Previous Investigation entry row */
.investigation-entry-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    -webkit-align-items: center;
    align-items: center;
    margin: 12px 0;
}

.investigation-entry-row .inv-cat {
    -webkit-flex: 1 1 200px;
    flex: 1 1 200px;
}

.investigation-entry-row .inv-name {
    -webkit-flex: 1 1 200px;
    flex: 1 1 200px;
}

.investigation-entry-row .inv-findings {
    -webkit-flex: 2 1 280px;
    flex: 2 1 280px;
}

.investigation-entry-row .inv-actions {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .general-exam-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .pulse-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .investigation-entry-row .inv-cat,
    .investigation-entry-row .inv-name,
    .investigation-entry-row .inv-findings,
    .investigation-entry-row .inv-actions {
        -webkit-flex: 1 1 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .investigation-entry-row .inv-actions .btn {
        width: 100% !important;
        min-height: 40px !important;
    }
}

@media (max-width: 480px) {
    .general-exam-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------------------------------------
   15. Table Scroll Cues & Scrollbar Customization
   -------------------------------------------------------------------------- */
.table-responsive {
    border: 1px solid #eef1f5 !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.table-responsive::-webkit-scrollbar {
    height: 6px !important;
    width: 6px !important;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   16. Twitter Typeahead Global Sizing & Chief Complaint Alignment
   -------------------------------------------------------------------------- */
.twitter-typeahead {
    width: 100% !important;
    display: block !important;
    position: relative;
}

.twitter-typeahead .tt-hint,
.twitter-typeahead .tt-input {
    width: 100% !important;
}

.input-group .twitter-typeahead {
    display: table-cell !important;
    width: 100% !important;
}

.tt-dropdown-menu {
    min-width: 100% !important;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10050 !important;
}

#chiefComlaintList table,
#chiefComlaintList #tabChiefComplaintList {
    table-layout: fixed !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

#chiefComlaintList table th,
#chiefComlaintList table td {
    vertical-align: middle !important;
    box-sizing: border-box;
}

#chiefComlaintList table th:first-child,
#chiefComlaintList table td:first-child {
    width: 50% !important;
    word-break: break-word;
}

#chiefComlaintList table th:nth-child(2),
#chiefComlaintList table td:nth-child(2) {
    width: 40% !important;
    word-break: break-word;
}

#chiefComlaintList table th:nth-child(3),
#chiefComlaintList table td:nth-child(3) {
    width: 10% !important;
    text-align: center !important;
    white-space: nowrap;
}