/**
 * Medical App — Global Responsive Enhancements
 * Loaded after style.css. Uses Bootstrap 5 breakpoints.
 */

/* ==========================================================================
   Foundation
   ========================================================================== */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

body.sidebar-open-mobile {
  overflow: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Prevent layout blowout from long strings */
.theme-body,
.card-body,
.modal-body,
.codex-breadcrumb {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   Sidebar overlay (tablet / mobile)
   ========================================================================== */

.codex-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 23, 34, 0.45);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media screen and (max-width: 1199px) {
  body.daactive-sidebar .codex-sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  body.daactive-sidebar .codex-sidebar {
    box-shadow: 0 0 40px rgba(5, 23, 34, 0.2);
  }
}

@media screen and (max-width: 767px) {
  .codex-sidebar {
    width: min(285px, 88vw);
  }
}

/* ==========================================================================
   Layout shell
   ========================================================================== */

@media screen and (min-width: 1400px) {
  .theme-body > .container-fluid {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
}

@media screen and (min-width: 2560px) {
  .theme-body > .container-fluid {
    max-width: 2400px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 1199px) {
  .themebody-wrap {
    margin-inline-start: 0;
  }

  .codex-header {
    margin-inline-start: 0;
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .themebody-wrap {
    margin-top: 72px;
    min-height: calc(100vh - 72px);
  }

  .codex-header {
    padding: 12px 16px;
  }

  .codex-header .flex-between {
    flex-wrap: wrap;
    gap: 8px;
  }

  .codex-header .header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .codex-header .header-right {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 575px) {
  .themebody-wrap {
    margin-top: 64px;
  }

  .theme-body {
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

@media screen and (max-width: 991px) {
  .codex-header .navsearch-bar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .codex-header .navsearch-bar .form-control.active {
    width: min(229px, calc(100vw - 120px));
    z-index: 5;
  }

  .codex-header .nav-iconlist .hover-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
    max-width: calc(100vw - 24px);
  }
}

@media screen and (max-width: 575px) {
  .codex-header .navsearch-bar {
    margin-inline-start: 8px;
  }

  .codex-header .nav-iconlist > li:nth-child(1),
  .codex-header .nav-iconlist > li:nth-child(2) {
    display: none;
  }
}

/* Touch-friendly header controls */
.codex-header .navicon-wrap,
.codex-header .sidebar-action {
  min-width: 44px;
  min-height: 44px;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

@media screen and (max-width: 767px) {
  .codex-breadcrumb .breadcrumb-contain {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .codex-breadcrumb .right-breadcrumb ul {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ==========================================================================
   Cards & dashboard grid
   ========================================================================== */

.theme-body .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

@media screen and (max-width: 575px) {
  .theme-body .row > [class*="col-md-"],
  .theme-body .row > [class*="col-lg-"],
  .theme-body .row > [class*="col-xl-"],
  .theme-body .row > [class*="col-xxl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .card .card-header h4,
  .card .card-header h3 {
    font-size: 1rem;
    line-height: 1.35;
  }

  .card .card-header .btn,
  .card .card-header .float-end {
    float: none !important;
    width: 100%;
    margin-top: 4px;
  }

  .card .card-header .setting-card,
  .card .card-header .action-menu {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
  .common-dash .row > .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Chart containers */
.earning-chart .card-body > div,
.visitor-performance .card-body > div,
.visitor-ratetbl .card-body > div,
#hospitalsurvay,
#recoverystatistics,
#diseasesreport,
.apexcharts-canvas {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.theme-body .form-control,
.theme-body .form-select,
.theme-body textarea,
.auth-main .form-control,
.auth-main .form-select {
  width: 100%;
  max-width: 100%;
}

.theme-body .input-group {
  flex-wrap: wrap;
}

.theme-body .input-group > .form-control,
.theme-body .input-group > .form-select {
  flex: 1 1 auto;
  min-width: 0;
}

@media screen and (max-width: 767px) {
  .theme-body [class*="col-md-"],
  .theme-body [class*="col-lg-"],
  .theme-body [class*="col-xl-"],
  .theme-body [class*="col-xxl-"] {
    margin-bottom: 0;
  }

  .theme-body .form-group[class*="col-"],
  .theme-body .col-md-4,
  .theme-body .col-md-6,
  .theme-body .col-md-3,
  .theme-body .col-md-8,
  .theme-body .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .theme-body .form-check-inline,
  .theme-body .custom-chek {
    display: block;
    margin-inline-end: 0;
    margin-bottom: 8px;
  }

  .theme-body .btn-group,
  .theme-body .btn-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .auth-main .auth-remember {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media screen and (max-width: 575px) {
  .theme-body .card-body .btn:not(.btn-sm):not(.btn-link),
  .modal-footer .btn {
    min-height: 44px;
  }

  .theme-body .d-flex.gap-2,
  .theme-body .d-flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* Select2 */
.select2-container {
  width: 100% !important;
  max-width: 100%;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

.select2-dropdown {
  max-width: calc(100vw - 24px);
}

/* Flatpickr */
.flatpickr-input-group,
.flatpickr-input-group .form-control {
  width: 100%;
  max-width: 100%;
}

.flatpickr-calendar {
  max-width: calc(100vw - 16px);
}

/* Demographics / profile switchers */
#demographics-form-switcher,
#profile-record-switcher,
.profile-record-switcher,
.patient-form-switcher-toolbar__selector .form-select,
.patient-form-switcher-toolbar__selector .select2-container {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
}

.patient-form-switcher-dropdown.select2-dropdown {
  box-sizing: border-box;
  max-width: calc(100vw - 24px) !important;
}

/* ==========================================================================
   Tables & DataTables
   ========================================================================== */

.table-responsive,
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card-body:has(> table),
.card-body:has(> .dataTables_wrapper) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card-body > table {
  min-width: 520px;
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: start;
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    max-width: 100%;
    margin-inline-start: 0;
    margin-top: 6px;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    width: 100%;
  }

  .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }

  .dataTables_wrapper .dt-buttons .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Admin patient horizontal nav */
.admin-patient-top-bar {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}

.admin-patient-top-bar > ul > li {
  scroll-snap-align: start;
}

@media screen and (max-width: 575px) {
  .admin-patient-top-bar > ul > li > a {
    padding: 10px 12px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Modals
   ========================================================================== */

@media screen and (max-width: 575px) {
  .modal-dialog {
    margin: 0.75rem;
    max-width: calc(100vw - 1.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 1.5rem);
  }

  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    margin: 0;
  }

  .patient-pdf-section-modal__actions {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Buttons & action bars
   ========================================================================== */

@media screen and (max-width: 575px) {
  .theme-body .btn-group-vertical-sm-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .theme-body .btn-group-vertical-sm-stack .btn {
    width: 100%;
    border-radius: 0.375rem !important;
    margin-bottom: 8px;
  }

  .userchat-typebox {
    flex-wrap: wrap;
    gap: 8px;
  }

  .userchat-typebox .form-control {
    flex: 1 1 100%;
    order: 1;
  }

  .userchat-typebox .btn {
    flex: 1 1 calc(50% - 4px);
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

@media screen and (max-width: 767px) {
  .hos-welcome h3 {
    font-size: 1.35rem;
    line-height: 1.35;
  }

  .hosinfo-count h3 {
    font-size: 1.125rem;
  }

  .breadcrumb-item h1 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 575px) {
  .codex-authbox .auth-header h3 {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Patient form pages (tabs, toolbars, navy panels)
   ========================================================================== */

@media screen and (max-width: 991px) {
  .patient-form-tab-nav .nav-tabs,
  .patient-form-tab-nav .nav-pills {
    flex-wrap: wrap;
    gap: 6px;
  }

  .patient-form-tab-nav .nav-link {
    flex: 1 1 auto;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .patient-profile-record-bar-shell .container-fluid {
    padding-inline: 12px;
  }
}

@media screen and (max-width: 767px) {
  .patient-form-page .patient-saved-records-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .patient-form-page .patient-saved-records-table .notes-cell {
    max-width: none;
  }

  .ptfu-page .patient-form-navy-panel > .card-body {
    padding: 16px;
  }
}

/* Pathology / imaging tab navs inside cards */
@media screen and (max-width: 575px) {
  .nav-tabs .nav-item,
  .nav-pills .nav-item {
    flex: 1 1 100%;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Chat, calendar, slick
   ========================================================================== */

@media screen and (max-width: 991px) {
  .codex-chat .cdxapp-sidebar,
  .codex-chat .cdxapp-xl-sidebar {
    max-width: calc(100vw - 32px);
  }

  .hosdoct-grid {
    flex-direction: column;
    text-align: center;
  }

  .hosdoct-grid .doct-detail {
    padding-inline-start: 0;
    margin-top: 12px;
  }
}

@media screen and (max-width: 575px) {
  .card-body > .btn.float-end,
  .card-body > a.btn.float-end {
    float: none !important;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Chat layout
   ========================================================================== */

@media screen and (max-width: 991px) {
  .chatbox-container .chatbox-container-inner {
    height: auto;
    max-height: none;
  }

  .messages-box,
  .chat-box {
    height: 50vh;
    min-height: 280px;
  }

  .chat-box-holder .media.width-50 {
    max-width: 85% !important;
  }
}

@media screen and (max-width: 575px) {
  .messages-box,
  .chat-box {
    height: 45vh;
    min-height: 240px;
  }

  .chatbox-container .bg-primary.d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }

  .chatbox-container .bg-primary.d-flex .btn {
    width: 100%;
  }

  #chat-form .chat-input {
    height: 44px;
    line-height: 44px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

@media screen and (max-width: 767px) {
  .codex-footer {
    text-align: center;
    padding: 16px;
  }

  .codex-footer .row > div {
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   Accessibility — minimum touch targets
   ========================================================================== */

@media (pointer: coarse) {
  .btn:not(.btn-sm):not(.btn-link):not(.paginate_button) {
    min-height: 44px;
  }

  .navicon-wrap,
  .sidebar-action,
  .paginate_button {
    min-width: 44px;
    min-height: 44px;
  }
}