/* Orders page responsive styles - mobile overrides */

/* Click-to-dial phone links — hidden on desktop, shown on mobile via media query */
.phone-dial-link {
  display: none;
}

/* Barcode scan links — hidden on desktop, shown on mobile via media query */
.barcode-scan-link {
  display: none;
}

@media screen and (max-width: 768px) {

  /* Disable double-tap-to-zoom on all elements */
  * {
    touch-action: manipulation;
  }

  /* ===== Hide elements on mobile ===== */

  /* Hide "Signed in successfully" flash notification */
  #Content > div:not(.content_wrapper) {
    display: none !important;
  }

  /* Hide Add Order button */
  #nitid-AddOrder {
    display: none !important;
  }

  /* Hide Export Orders header and controls */
  .orders-toolbar .toolbar-filters .filter-header:last-child,
  .orders-toolbar .export-orders {
    display: none !important;
  }

  /* Hide Print Order button in modal */
  .modal-content button[onclick="printOrder()"] {
    display: none !important;
  }

  /* ===== Toolbar area ===== */
  .orders-toolbar {
    height: auto !important;
    font-size: 12px;
    padding: 8px 12px !important;
    background: #fff;
  }

  /* Hide the title section (Orders heading) on mobile */
  .orders-toolbar .toolbar-title {
    display: none !important;
  }

  /* Hide the Filter By / Search By / Export header labels */
  .orders-toolbar .toolbar-filters:not(.filter-controls) {
    display: none !important;
  }

  /* Filter/Search/Export controls container */
  .orders-toolbar .filter-controls {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    display: block !important;
  }

  /* Override all height: 100% on nested divs */
  .orders-toolbar .filter-controls div {
    height: auto !important;
  }

  /* Filter section */
  .orders-toolbar .filter-by {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    border: none !important;
    padding: 0 0 8px 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .orders-toolbar .filter-by::before {
    content: "Filter:";
    font-weight: bold;
    font-size: 12px;
    color: #333;
    margin-right: 4px;
  }

  /* Reset the inner divs in filter-by */
  .orders-toolbar .filter-by > div {
    width: auto !important;
    height: auto !important;
    float: none !important;
    display: contents !important;
    border: none !important;
  }

  .orders-toolbar .filter-by form {
    display: contents !important;
  }

  .orders-toolbar .filter-by select {
    width: auto !important;
    min-width: 100px;
    margin: 0 !important;
    padding: 6px;
  }

  .orders-toolbar .filter-by button {
    padding: 6px 12px !important;
    margin: 0 !important;
  }

  /* Search section */
  .orders-toolbar .search-by {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    border: none !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid #eee;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .orders-toolbar .search-by::before {
    content: "Search:";
    font-weight: bold;
    font-size: 12px;
    color: #333;
    margin-right: 4px;
  }

  /* Reset the inner divs in search-by */
  .orders-toolbar .search-by > form {
    display: contents !important;
  }

  .orders-toolbar .search-by > form > div {
    width: auto !important;
    height: auto !important;
    float: none !important;
    display: contents !important;
    border: none !important;
  }

  .orders-toolbar .search-by select {
    width: auto !important;
    min-width: 80px;
    margin: 0 !important;
    padding: 6px;
  }

  .orders-toolbar .search-by input[type="text"] {
    width: 80px !important;
    margin: 0 !important;
    padding: 6px;
    box-sizing: border-box;
  }

  .orders-toolbar .search-by button,
  .orders-toolbar .search-by input[type="submit"] {
    padding: 6px 10px !important;
    margin: 0 !important;
  }

  /* Sort section (mobile only) */
  .orders-toolbar .sort-by-mobile {
    display: flex !important;
    width: 100%;
    float: none;
    height: auto;
    border: none;
    padding: 8px 0 0 0;
    border-top: 1px solid #eee;
    align-items: center;
    gap: 6px;
  }

  .orders-toolbar .sort-by-mobile::before {
    content: "Sort:";
    font-weight: bold;
    font-size: 12px;
    color: #333;
    margin-right: 4px;
  }

  .orders-toolbar .sort-by-mobile select {
    width: auto;
    min-width: 100px;
    margin: 0;
    padding: 6px;
  }

  .orders-toolbar .sort-by-mobile button {
    padding: 6px 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
  }

  /* ===== Orders table — card layout ===== */
  #gvDetails {
    border: none !important;
  }

  /* Hide only the main table header, not nested headers */
  #gvDetails > tbody > tr.header,
  #gvDetails > tr.header {
    display: none !important;
  }

  /* Main order rows (not detail rows) */
  #gvDetails tr.rows:not(.order-detail-row) {
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* When order is expanded (active), connect to detail row */
  #gvDetails tr.rows.active:not(.order-detail-row) {
    font-weight: inherit;
    background-color: #fff;
    border: 1px solid #0095eb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    box-shadow: none;
  }

  /* Detail rows - connected to parent order */
  #gvDetails tr.rows.order-detail-row {
    display: block !important;
    border: 1px solid #0095eb;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 12px;
    padding: 4px 8px;
    background: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Hide empty first td in detail rows */
  #gvDetails tr.rows.order-detail-row > td:first-child {
    display: none !important;
  }

  /* Hide collapsed detail rows */
  #gvDetails tr.rows.order-detail-row.collapsed,
  #gvDetails tr.rows.order-detail-row[style*="display: none"],
  #gvDetails tr.rows.order-detail-row[style*="display:none"] {
    display: none !important;
  }

  #gvDetails tr.rows:not(.order-detail-row) td {
    display: block;
    text-align: left;
    padding: 1px 0;
    border: none !important;
    color: #000;
    visibility: visible;
    overflow: visible;
    -webkit-text-size-adjust: 100%;
    font-size: 13px;
    line-height: 1.3;
  }

  /* Fix iOS auto-linking phone numbers */
  #gvDetails tr.rows:not(.order-detail-row) td.col-phone a,
  #gvDetails tr.rows:not(.order-detail-row) td.col-phone a[href^="tel"] {
    color: #000 !important;
    text-decoration: none !important;
    pointer-events: none !important;
  }

  #gvDetails tr.rows:not(.order-detail-row) td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 90px;
    margin-right: 8px;
    color: #555;
    font-size: 11px;
    text-transform: uppercase;
  }

  /* Hide columns not needed on mobile cards */
  #gvDetails tr.rows td.col-expand,
  #gvDetails tr.rows td.col-gender,
  #gvDetails tr.rows td.col-order-date,
  #gvDetails tr.rows td.col-appt-date {
    display: none !important;
  }

  /* Actions cell: no pseudo-element label */
  #gvDetails tr.rows td.col-actions {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #eee;
  }

  #gvDetails tr.rows td.col-actions::before {
    display: none;
  }

  /* Show mobile expand button on mobile */
  .mobile-expand-btn {
    display: inline-block !important;
  }

  /* Detail/expansion rows - additional styles */
  #gvDetails tr.rows.order-detail-row td {
    display: block;
  }

  #gvDetails tr.rows.order-detail-row td::before {
    display: none;
  }

  #gvDetails tr.rows.order-detail-row .ExpandColumn {
    padding: 2px 0;
  }

  #gvDetails tr.rows.order-detail-row table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Override inline margin-left on status section */
  #gvDetails tr.rows.order-detail-row .status-section {
    margin-left: 0 !important;
  }

  /* Services and Status sections */
  .services-section,
  .status-section {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 8px;
  }

  .services-section table,
  .status-section table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  .services-section h4,
  .status-section h4 {
    float: none !important;
    margin: 0;
    font-size: 14px;
    display: inline-block;
  }

  .services-section button,
  .status-section button {
    width: auto;
    margin: 0 0 0 10px;
    padding: 4px 10px;
    font-size: 12px;
  }

  .services-section th[colspan],
  .status-section th[colspan] {
    display: block;
    text-align: center;
  }

  /* Ensure the header rows with buttons are visible */
  .services-section > table > tbody > tr.header,
  .services-section > table > tr.header,
  .status-section > table > tbody > tr.header,
  .status-section > table > tr.header {
    display: table-row !important;
  }

  /* Services table (gvServices) */
  #gvServices {
    min-width: 0 !important;
    max-width: 100%;
  }

  #gvServices tr.header {
    display: none !important;
  }

  #gvServices tr.rows {
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px 6px;
    background: #fff;
  }

  #gvServices tr.rows td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px;
  }

  #gvServices tr.rows td:first-child::after {
    content: " - ";
  }

  #gvServices tr.rows td:first-child::before {
    display: none;
  }

  #gvServices tr.rows td:last-child::before {
    display: none;
  }

  /* Status table (gvStatus) */
  #gvStatus {
    min-width: 0 !important;
    max-width: 100%;
  }

  #gvStatus tr.header {
    display: none !important;
  }

  #gvStatus tr.rows {
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px 6px;
    background: #fff;
  }

  #gvStatus tr.rows td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px;
  }

  /* Status: value | Notes | Date */
  #gvStatus tr.rows td:nth-child(1)::before,
  #gvStatus tr.rows td:nth-child(2)::before,
  #gvStatus tr.rows td:nth-child(3)::before {
    display: none;
  }

  #gvStatus tr.rows td:nth-child(1)::after {
    content: " | ";
    color: #999;
  }

  #gvStatus tr.rows td:nth-child(2)::after {
    content: " | ";
    color: #999;
  }

  /* Edit/delete icons in status rows - display inline */
  #gvStatus tr.rows td:nth-child(4),
  #gvStatus tr.rows td:nth-child(5) {
    display: inline-block !important;
    width: auto;
    vertical-align: middle;
    margin-left: 5px;
  }

  #gvStatus tr.rows td:nth-child(4)::before,
  #gvStatus tr.rows td:nth-child(5)::before {
    display: none;
  }

  /* Pagination */
  #gvDetails tr.pager {
    display: block !important;
    text-align: center;
    border: none;
  }

  #gvDetails tr.pager td {
    display: block;
    border: none !important;
    padding: 12px 0;
  }

  #gvDetails tr.pager td::before {
    display: none;
  }

  /* ===== Modals ===== */
  body.modal-open {
    overflow: hidden !important;
  }

  body.modal-open #Top_bar {
    display: none !important;
  }

  .nitid-modal {
    padding-top: 0 !important;
    overflow-x: hidden;
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    width: 95% !important;
    max-width: 95vw;
    max-height: 95vh;
    overflow-y: auto;
    padding: 8px 10px !important;
    margin: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .modal-content h3 {
    margin: 4px 0 !important;
    font-size: 16px;
  }

  .modal-content hr {
    display: none !important;
  }

  .modal-bottom-spacer {
    display: none;
  }

  /* Ensure all modal children respect boundaries */
  .modal-content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Modal scroll area - override inline width */
  .modal-content > div[style*="width: 90%"],
  .modal-content > div[style*="width:90%"],
  .modal-content > div[style*="overflow-y: auto"] {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    overflow-x: hidden;
  }

  /* Modal form tables — single column */
  .modal-content table {
    width: 100% !important;
    table-layout: fixed;
  }

  .modal-content table tr {
    display: block;
    margin-bottom: 8px;
  }

  .modal-content table td {
    display: block;
    width: 100% !important;
    padding: 2px 0;
  }

  .modal-content table td[colspan] {
    width: 100%;
  }

  /* Nested tables in modal (like checkboxes) */
  .modal-content table table {
    width: 100%;
  }

  .modal-content table table tr {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
  }

  .modal-content table table td {
    display: inline-block;
    width: auto;
  }

  /* Override inline width:800px on select fields in modal */
  .modal-content select {
    max-width: 100%;
    width: 100% !important;
  }

  .modal-content select[style*="width:800px"],
  .modal-content select[style*="width: 800px"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* Override inline width:800px on textarea fields in modal */
  .modal-content textarea[style*="width: 800px"],
  .modal-content textarea[style*="width:800px"] {
    width: 100% !important;
    max-width: 100%;
  }

  .modal-content input[type="text"],
  .modal-content input[type="email"],
  .modal-content input[type="date"],
  .modal-content input[type="time"],
  .modal-content textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Print button in modal - hidden on mobile */
  .modal-content button[onclick="printOrder()"] {
    display: none !important;
  }

  /* Add Status modal (nitid-modal-two) */
  #nitid-modal-two .modal-content {
    padding: 15px;
  }

  #nitid-modal-two .modal-content label {
    display: block;
    margin-bottom: 5px;
  }

  #nitid-modal-two .modal-content select,
  #nitid-modal-two .modal-content textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  #nitid-modal-two .modal-content input[type="submit"],
  #nitid-modal-two .modal-content button {
    width: 100%;
    margin: 5px 0;
    padding: 12px;
  }

  /* Update Service modal (nitid-modal-three) */
  #nitid-modal-three .modal-content {
    padding: 15px;
  }

  #nitid-modal-three .modal-content h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  #nitid-modal-three .modal-content table {
    width: 100%;
  }

  #nitid-modal-three .modal-content table tr {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

  #nitid-modal-three .modal-content table th,
  #nitid-modal-three .modal-content table td {
    display: inline-block;
    width: auto;
    padding: 0 8px;
  }

  #nitid-modal-three .modal-content input[type="submit"],
  #nitid-modal-three .modal-content button {
    width: 100%;
    margin: 5px 0;
    padding: 12px;
  }

  /* ===== Click-to-dial phone links (mobile only) ===== */
  .modal-content table td:has(.phone-dial-link) {
    display: flex !important;
    align-items: center;
  }

  .modal-content table td:has(.phone-dial-link) input[type="text"] {
    flex: 1;
    min-width: 0;
  }

  .phone-dial-link {
    display: inline-block !important;
    font-size: 22px;
    margin-left: 8px;
    flex-shrink: 0;
    text-decoration: none;
    color: #007cba;
  }

  /* ===== Barcode scan links (mobile only) ===== */
  .modal-content table td:has(.barcode-scan-link) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  .modal-content table td:has(.barcode-scan-link) input[type="text"] {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }

  .barcode-scan-link {
    display: inline-block !important;
    font-size: 22px;
    margin-left: 8px;
    flex-shrink: 0;
    text-decoration: none;
    color: #007cba;
  }

  /* Scanner overlay */
  #barcode-scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #barcode-scanner-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    position: relative;
  }

  #barcode-scanner-close {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    font-size: 18px;
    font-weight: bold;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  /* ===== Phlebotomist mobile: hide non-essential fields ===== */
  .phleb-user .phleb-mobile-hide {
    display: none !important;
  }

  /* Phlebotomist mobile: tighten spacing so form fits on one screen */
  .phleb-user .modal-content table tr {
    margin-bottom: 4px;
  }

  .phleb-user .modal-content table td {
    padding: 1px 0;
  }

  .phleb-user .modal-content label {
    margin-bottom: 0;
  }

  .phleb-user .modal-content input,
  .phleb-user .modal-content select,
  .phleb-user .modal-content textarea {
    margin: 0 !important;
  }

  /* ===== General page layout overrides ===== */
  .column.mcb-column {
    width: 100% !important;
    float: none !important;
  }

  .section_wrapper {
    padding: 0 8px;
  }
}