/* Custom Styles extracted from global.css */
body { font-family: 'Inter', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ================================
   GLOBAL SCROLLBAR - White/Light Theme
   Light gray thumb (#D9D9D9) on transparent track
   ================================ */

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #D9D9D9 transparent; }

/* Chrome, Edge, Safari */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: #BFBFBF; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Status Badges */
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: -0.096px; line-height: 1.2; }
.status-badge::before { content: ''; width: 12px; height: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.status-badge.status-pending { background-color: rgba(255, 171, 97, 0.1); color: #f19747; }
.status-badge.status-pending::before { background-image: url('/assets/cfa2861731f4ffa1f5bdc133b068e64cb144316a.svg'); }
.status-badge.status-success { background-color: rgba(81, 158, 138, 0.1); color: #519e8a; }
.status-badge.status-success::before { background-image: url('/assets/658af2fcd03961375f246dd5fff9888477fef6d4.svg'); }
.status-badge.status-failed { background-color: rgba(255, 17, 0, 0.1); color: #ff1100; }
.status-badge.status-failed::before { background-image: url('/assets/11976604bd28490eef9f04eb106d52253f43aae0.svg'); width: 14px; height: 14px; }
.status-badge.status-refunded { background-color: rgba(35, 141, 217, 0.1); color: #238dd9; }
.status-badge.status-refunded::before { background-image: url('/assets/d504c591dfa5015ae62c5eac7b5bb4a8054b35a9.svg'); width: 13px; height: 13px; }

/* FAQ */
.faq-content { transition: max-height 0.3s ease-out, opacity 0.3s ease-out; max-height: 0; opacity: 0; overflow: hidden; }
.faq-item.expanded .faq-content { max-height: 500px; opacity: 1; }
.faq-arrow { transition: transform 0.3s ease; transform: rotate(0deg); }
.faq-item.expanded .faq-arrow { transform: rotate(180deg); }
.list-bullet::before { content: "\2022"; font-family: 'Arimo', sans-serif; font-size: 15.544px; color: #3c4044; margin-right: 9px; }

/* Zigzag */
.zigzag-mobile { position: relative; background: white; border-left: 1px solid rgba(60,64,68,0.1); border-right: 1px solid rgba(60,64,68,0.1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); }
.zigzag-mobile::before { content: ""; position: absolute; top: -6px; left: -1px; right: -1px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 L6 0 L12 6' fill='%23ffffff' stroke='%233c40441a' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 12px 6px; }
.zigzag-mobile::after { content: ""; position: absolute; bottom: -6px; left: -1px; right: -1px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L6 6 L12 0' fill='%23ffffff' stroke='%233c40441a' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 12px 6px; }

/* Mobile Overrides */
@media (max-width: 767px) {
  .mobile-page-container { padding-top: 90px !important; padding-bottom: 60px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .mobile-heading { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .mobile-input-section { gap: 20px !important; margin-bottom: 8px !important; }
  .mobile-input-wrapper { width: 100% !important; }
  .mobile-input-field { height: 56px !important; border-radius: 28px !important; padding: 8px 6px 8px 20px !important; box-shadow: 0 2px 12px rgba(81, 158, 138, 0.08) !important; }
  .mobile-input-field input { font-size: 16px !important; }
  .mobile-label { font-size: 13px !important; margin-left: 16px !important; margin-bottom: 6px !important; }
  .mobile-input-field .shrink-0 { height: 40px !important; border-radius: 20px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .mobile-input-field .shrink-0 span { font-size: 14px !important; }
  .mobile-illustration { max-width: 100% !important; padding: 0 20px !important; margin-top: 20px !important; }
  .mobile-results { margin-top: 32px !important; padding: 0 !important; }
  .mobile-no-data { padding: 32px 16px !important; }
  .mobile-no-data-image { max-width: 280px !important; margin-bottom: 24px !important; }
  .mobile-no-data-title { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
  .mobile-no-data-subtitle { font-size: 16px !important; line-height: 1.5 !important; }
  .mobile-warning-section { margin-top: 48px !important; padding: 0 8px !important; }
  .mobile-warning-header { font-size: 15px !important; padding: 0 !important; line-height: 1 !important; }
  .mobile-warning-header-container { align-items: center !important; }
  .mobile-warning-header-container > div { align-self: center !important; }
  .mobile-warning-items { gap: 16px !important; padding: 0 !important; }
  .mobile-warning-item { max-width: 110px !important; }
  .mobile-warning-item p { white-space: nowrap !important; font-size: 11px !important; }
  .mobile-warning-icon { width: 40px !important; height: 40px !important; margin-bottom: 8px !important; }
  .mobile-warning-text { font-size: 13px !important; line-height: 1.3 !important; }
}
@media (max-width: 1099px) {
  .mobile-tablet-radius { border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; }
  #statusFilterDropdown { position: fixed !important; max-height: 280px; overflow-y: auto; }
}
@media screen and (min-width: 1200px) {
  /* Desktop: fix location-dot and connector alignment */
  .location-path {
    position: relative !important;
    min-height: 120px !important;
    padding-left: 30px !important;
  }

  .location-line .location-dot,
  .location-line-end .location-dot {
    position: absolute !important;
    left: -29px !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
  }

  .location-line {
    position: relative !important;
    min-height: 40px !important;
  }

  .location-line-end {
    position: relative !important;
    min-height: 40px !important;
  }

  .location-connector {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    top: 22px !important;
    width: 2px !important;
    height: calc(100% - 44px) !important;
    background: #519e8a !important;
    z-index: 1 !important;
  }

  /* removed .location-line-end::after as requested */

  /* New Route Timeline - Desktop */
  .route-container {
    gap: 12px !important;
    height: 180px !important;
  }

  .confirmed-card .route-container {
    height: 114px !important;
  }

  .timeline-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .timeline-line {
    width: 3px !important;
    /* min-height: 50px !important; */
  }
}

.bids-table {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}

.bids-table .bid-row,
.bids-table .bid-row.header {
  display: contents !important;
}

.bids-table > * {
  /* Ensure each header span / bid-cell uses full column box */
  box-sizing: border-box !important;
}

.bids-table .bid-row.header span,
.bids-table .bid-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  min-height: 64px !important;
  text-align: center !important;
}

.bids-table .bid-row.header span {
  font-weight: 600 !important;
  color: var(--text-muted, #667085) !important;
}

.bids-table .bid-amount {
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}

/* Vertical separators between columns: target 2nd and 3rd column grid cells */
.bids-table > :nth-child(3n + 2),
.bids-table > :nth-child(3n + 3) {
  border-left: 1px solid var(--border, #e4e7ec) !important;
}

/* Remove left border for first column and tidy last column */
.bids-table > :nth-child(3n + 1) {
  border-left: none !important;
}

/* If a cell contains the placeholder --, keep it vertically centered and muted */
.bids-table .bid-cell:empty,
.bids-table .bid-cell:has(.bid-amount:empty) {
  color: var(--text-muted, #9ca3af) !important;
}

/* Medium/smaller screens keep same grid but slightly reduced min-height */
@media screen and (max-width: 1024px) {
  .bids-table .bid-row.header span,
  .bids-table .bid-cell {
    min-height: 56px !important;
    padding: 10px 6px !important;
  }
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Collapse desktop nav into hamburger at wider breakpoint (<= 1200px)
   This ensures the header switches to mobile navigation for narrower layouts
   so the following items appear in the hamburger: Dashboard, Load Posts,
   Verifications, Tracking, Check Challan, More */
@media screen and (max-width: 1200px) {
  /* hide desktop nav */
  nav {
    display: none !important;
  }

  /* show hamburger button */
  .mobile-menu-btn {
    display: flex !important;
    order: -1 !important;
    margin-right: 16px !important;
  }

  /* keep logo and user actions aligned */
  .logo {
    order: 0 !important;
    margin-right: auto !important;
  }
}

/* Hide the filter toggle on desktop screens (we keep it available on mobile/tablet) */
@media (min-width: 1025px) {
  #filterModalToggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Strong mobile-specific final override to ensure alignment across all rules */
@media (max-width: 600px) {
  /* enforce grid with fixed weight column */
  .multiple-stops-columns .stop-row,
  .multiple-stops-columns .stop-row.additional-row {
    display: grid !important;
    grid-template-columns: 1fr 96px !important;
    gap: 8px !important;
    align-items: center !important;
    padding-right: 0 !important;
  }

  /* weight group sizing and relative positioning for absolute child */
  .multiple-stops-columns .stop-weight-group,
  .stop-row .stop-weight-group {
    flex: 0 0 96px !important;
    max-width: 96px !important;
    width: 96px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ensure input leaves room for delete icon */
  .multiple-stops-columns .stop-weight-group input,
  .stop-row .stop-weight-group input {
    padding-right: 12px !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  /* precise delete button placement - moved outside the weight input */
  .multiple-stops-columns .stop-weight-group .delete-row-btn,
  .stop-row .stop-weight-group .delete-row-btn,
  .stop-weight-group .delete-row-btn,
  .stop-delete-wrapper .delete-row-btn {
    /* remove absolute placement; align in flow and add margin */
    margin-left: 12px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
  }

  /* icon color and hover */
  .delete-row-btn i,
  .delete-row-btn img {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: #f74437 !important;
  }

  .delete-row-btn:hover {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Mobile-specific fixes: ensure multiple-stops rows and delete button align consistently */
@media (max-width: 600px) {
  .multiple-stops-columns .stop-row,
  .multiple-stops-columns .stop-row.additional-row {
    display: grid !important;
    grid-template-columns: 1fr 96px !important;
    /* input + weight (widened) */
    gap: 10px !important;
    align-items: center !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .multiple-stops-columns .stop-weight-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
  }

  .multiple-stops-columns .stop-weight-group input {
    padding-right: 48px !important;
    /* room for absolute button */
    height: 42px !important;
    box-sizing: border-box !important;
  }

  .multiple-stops-columns .stop-weight-group .delete-row-btn,
  .stop-weight-group .delete-row-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    background-color: transparent !important;
  }

  .multiple-stops-columns .stop-weight-group .delete-row-btn:hover,
  .stop-weight-group .delete-row-btn:hover {
    transform: translateY(-50%) !important;
    /* keep centered */
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .multiple-stops-columns .stop-row input,
  .multiple-stops-columns .stop-row .stop-input-group input {
    height: 42px !important;
    box-sizing: border-box !important;
  }
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #519e8a;
  /* Updated hamburger line color */
  border-radius: 2px;
  margin: 2px 0;
  transition: all 0.3s ease;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ============================================================
   MOBILE NAVIGATION OVERLAY
   ============================================================ */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Make schedule date/time non-bold while preserving semantics */
.schedule-info strong,
.schedule-info b {
  font-weight: 400 !important;
  font-weight: normal !important;
}

/* If schedule is wrapped in other containers, ensure strong doesn't inherit heavier weight */
.schedule-info strong *,
.schedule-info b * {
  font-weight: 400 !important;
}

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background-color: #ffffff;
  z-index: 1003;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  visibility: hidden;
}

.mobile-nav-drawer.active {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ec;
  min-height: 60px;
  flex-shrink: 0;
}

.mobile-nav-logo img {
  width: 60px;
  height: auto;
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #efeff1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-close:hover {
  background: #e4e7ec;
}

.mobile-nav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav-list > li {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-list > li:last-child {
  border-bottom: none;
}

.mobile-nav-list > li > a {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #3c4044;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-nav-list > li > a .nav-icon {
  width: 20px;
  margin-right: 14px;
  color: #757d85;
  font-size: 16px;
  text-align: center;
}

.mobile-nav-list > li > a span {
  flex: 1;
}

.mobile-nav-list > li > a .submenu-arrow {
  font-size: 12px;
  color: #757d85;
  transition: transform 0.2s ease;
}

.mobile-nav-list > li.open > a .submenu-arrow {
  transform: rotate(180deg);
}

.mobile-nav-list > li > a:hover {
  color: #519e8a;
  background-color: #f9fafb;
}

.mobile-nav-list > li > a:hover .nav-icon {
  color: #519e8a;
}

.mobile-nav-list > li > a.active {
  color: #519e8a;
  font-weight: 600;
  background-color: rgba(81, 158, 138, 0.08);
  border-left: 3px solid #519e8a;
}

.mobile-nav-list > li > a.active .nav-icon {
  color: #519e8a;
}

/* Mobile Submenu */
.mobile-submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fafbfc;
}

.mobile-nav-list > li.open .mobile-submenu {
  display: block;
}

.mobile-submenu li {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-submenu li:last-child {
  border-bottom: none;
}

.mobile-submenu li a {
  display: block;
  padding: 12px 20px 12px 54px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #757d85;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.mobile-submenu li a:hover {
  color: #519e8a;
  background-color: #f5f6f8;
  border-left-color: #519e8a;
}

.mobile-nav-footer {
  padding: 16px 20px;
  border-top: 1px solid #e4e7ec;
  flex-shrink: 0;
}

.mobile-demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 2px;
  background: rgba(81, 158, 138, 0.1);
  color: #519e8a;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid rgba(81, 158, 138, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-demo-btn:hover {
  background: rgba(81, 158, 138, 0.15);
  border-color: rgba(81, 158, 138, 0.3);
}

.mobile-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: #519e8a;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.mobile-call-btn:hover {
  background: #3d7f6e;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  border-top: 1px solid #e4e7ec;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.mobile-bottom-nav-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.mobile-bottom-nav-list li {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #667085;
  font-size: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  padding: 8px 4px;
  transition: color 0.2s ease;
  width: 100%;
  cursor: pointer;
}

.mobile-bottom-nav-item i {
  font-size: 20px;
}

.mobile-bottom-nav-item.active {
  color: #519e8a;
}

.mobile-bottom-nav-item:hover {
  color: #519e8a;
}

/* ============================================================
   TABLET STYLES (768px - 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
  /* Fix scrolling issue */
  html {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Header Layout - Tablet */
  header {
    justify-content: space-between !important;
    padding: 12px 20px !important;
    height: 70px !important;
  }

  /* Hide Desktop Nav */
  nav {
    display: none !important;
  }

  /* Show and Position Hamburger */
  .mobile-menu-btn {
    display: flex !important;
    order: -1 !important;
    margin-right: 16px !important;
  }

  .logo {
    order: 0 !important;
    margin-right: auto !important;
    /* Pushes user actions to the right */
  }

  .logo img {
    width: 65px !important;
    height: auto !important;
  }

  /* User Actions Container */
  .user-actions {
    gap: 12px !important;
    min-width: auto !important;
    justify-content: flex-end !important;
  }

  /* Tablet User Actions Items Order: 
       1. Notification
       2. Demo
       3. Post Load
       4. User Avatar
    */

  /* Mobile override: force filter grid to a single column on very small screens (320px) */
  @media (max-width: 320px) {
    .filter-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      row-gap: 10px !important;
      column-gap: 10px !important;
    }

    /* Ensure any element intended to span full width does so on tiny screens */
    .filter-grid .span-full,
    .form-group.span-full {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Make inputs and custom selects full width inside the grid on mobile */
    .filter-grid .select-trigger,
    .filter-grid input,
    .filter-grid .input-wrapper,
    .filter-grid .custom-select {
      width: 100% !important;
      box-sizing: border-box !important;
    }
  }

  .notification-icon {
    display: flex !important;
    order: 1 !important;
    width: 36px !important;
    height: 36px !important;
    margin-right: 4px !important;
  }

  .demo-button {
    display: flex !important;
    order: 2 !important;
  }

  .post-load-button {
    display: flex !important;
    order: 3 !important;
    min-width: 110px !important;
    font-size: 12px !important;
    padding: 0px 14px !important;
    height: 36px !important;
  }

  .user-profile {
    display: flex !important;
    order: 4 !important;
    margin-left: 4px !important;
  }

  .user-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  /* Main Content */
  main {
    margin-top: 70px !important;
    min-height: calc(100vh - 70px) !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Load Posts Page */
  .load-posts-page {
    padding: 16px !important;
    margin-top: 70px !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: calc(100vh - 70px) !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Hide Filter Sidebar */
  /* Filter sidebar hidden by default on mobile, shown via .mobile-open class */
  .filter-sidebar,
  .filter-sidebar.mobile-open {
    display: none !important;
  }

  .filter-icon {
    display: flex !important;
    cursor: pointer;
  }

  .main-load-content {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Tabs and Search */
  .tabs-and-search-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: auto !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
  }

  .tabs {
    overflow-x: auto !important;
    gap: 16px !important;
    /* padding-bottom: 4px !important; */
  }

  .tab-button {
    font-size: 13px !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }

  .search-and-actions {
    min-width: unset !important;
    gap: 12px !important;
  }

  .search-bar {
    width: 250px !important;
  }

  /* Load Post Cards */
  .load-posts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: 20px !important;
  }

  .load-post-wrapper {
    margin-bottom: 0 !important;
  }

  /* Post Header */
  .post-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .post-meta {
    font-size: 12px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
    /* border: 1px solid #e4e7ec !important; */
    border-bottom: none !important;
  }

  .card-actions-overflow,
  .card-actions-overflow-confirmed {
    display: none !important;
  }

  .post-header {
    position: relative !important;
  }

  .mobile-kebab-menu,
  .mobile-confirmed-kebab-menu {
    display: flex !important;
    position: absolute !important;
    top: 5px !important;
    right: 16px !important;
    width: 30px !important;
    height: 30px !important;

    /* Ensure equal spacing for L1/L2/L3 on tablet and mobile */
    @media screen and (max-width: 1024px) {
      .bids-table {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
      }

      .bids-table .bid-row.header,
      .bids-table .bid-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        gap: 0 !important;
        align-items: start !important;
      }

      .bids-table .bid-row.header span,
      .bids-table .bid-row .bid-cell {
        text-align: center !important;
        justify-self: center !important;
      }

      .bids-table .bid-row.header span {
        border-right: 1px solid #e4e7ec !important;
      }

      .bids-table .bid-row.header span:last-child,
      .bids-table .bid-row .bid-cell:last-child {
        border-right: none !important;
      }

      /* CSS fallback to hide arrow glyph if it was injected via ::after */
      .accept-bid-button-inline::after {
        display: none !important;
        content: none !important;
      }
    }

    @media screen and (max-width: 767px) {
      /* same rules for smaller mobiles to be explicit */
      .bids-table {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
      }

      .bids-table .bid-row.header,
      .bids-table .bid-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        gap: 0 !important;
        align-items: start !important;
      }

      .bids-table .bid-row.header span,
      .bids-table .bid-row .bid-cell {
        text-align: center !important;
        justify-self: center !important;
      }

      .accept-bid-button-inline::after {
        display: none !important;
        content: none !important;
      }
    }

    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
  }

  .mobile-kebab-menu i {
    font-size: 18px !important;
    color: #667085 !important;
  }

  .action-button {
    flex: 1 !important;
    min-width: 100px !important;
    font-size: 11px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    height: 42px !important;
    border-right: 1px solid #e4e7ec !important;
  }

  .action-button:last-child {
    border-right: none !important;
  }

  .action-button img {
    width: 16px !important;
    height: 16px !important;
  }

  /* Card Body */
  .load-post-card {
    border-radius: 0 0 12px 12px !important;
  }

  /* Desktop: fixed height for load post card */
  @media (min-width: 1024px) {
    .load-post-card {
      height: 342px !important;
    }
  }

  .card-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  /* Location Section */
  .location-section {
    padding: 16px !important;
    border-bottom: 1px solid #e4e7ec !important;
    border-right: none !important;
    height: auto !important;
  }

  .post-id-row {
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e4e7ec !important;
  }

  .location-path {
    margin-top: 0 !important;
    padding-left: 30px !important;
    gap: 0 !important;
  }

  .location-line,
  .location-line-end {
    position: relative !important;
    padding-left: 0 !important;
    height: auto !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  .location-line .location-dot,
  .location-line-end .location-dot {
    position: absolute !important;
    left: -29px !important;
    top: 0 !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
  }

  .location-connector {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    top: 22px !important;
    width: 2px !important;
    height: calc(100% - 44px) !important;
    background: #519e8a !important;
    z-index: 1 !important;
  }

  .location-info {
    gap: 2px !important;
  }

  .location-label {
    font-size: 12px !important;
    color: #667085 !important;
  }

  .location-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #101828 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .distance-info {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 12px 0 !important;
    font-size: 13px !important;
    color: #667085 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* New Route Timeline - Tablet */
  .route-container {
    gap: 10px !important;
  }

  .timeline-visual {
    padding-top: 2px !important;
  }

  .timeline-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .timeline-line {
    width: 2px !important;
    min-height: 35px !important;
  }

  .route-location-block .route-label {
    font-size: 11px !important;
  }

  .route-location-block .route-address-text {
    font-size: 13px !important;
  }

  .route-distance-info {
    padding: 10px 0 !important;
    font-size: 12px !important;
  }

  .schedule-info {
    display: block !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid #e4e7ec !important;
    font-size: 14px !important;
    color: #101828 !important;
  }

  /* Make schedule timestamps wrap instead of truncating with ellipsis */
  .schedule-info {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Details Section */
  .details-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 24px !important;
    padding: 16px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e4e7ec !important;
    height: auto !important;
  }

  .detail-item {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .detail-item .label {
    font-size: 12px !important;
    color: #667085 !important;
    width: auto !important;
    max-width: none !important;
    font-weight: 400 !important;
  }

  .detail-item .value {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
  }

  /* Bidding Section */
  .bidding-section {
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .bidding-header {
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .bidding-time-info {
    width: auto !important;
    flex: 1 !important;
    font-size: 13px !important;
  }

  .extend-time-button {
    margin-left: auto !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    height: 28px !important;
  }

  /* Bids Table */

  .bid-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .bid-cell {
    padding: 14px 10px !important;
  }

  .bid-amount {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  .accept-bid-button-inline {
    font-size: 11px !important;
    padding: 6px 12px !important;
    width: 90px !important;
  }

  .bidding-summary-row {
    padding: 12px 16px !important;
    margin-top: 0 !important;
  }

  .bid-actions {
    border-radius: 0 !important;
    margin-top: 0 !important;
  }

  .bid-actions span {
    font-size: 11px !important;
    padding: 10px 8px !important;
    min-height: 42px !important;
  }

  /* Description */
  .description-section {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  /* Confirmed Posts */
  .card-actions-overflow-confirmed {
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
  }

  .confirmed-action-btn {
    min-width: 110px !important;
    font-size: 11px !important;
    padding: 10px 14px !important;
  }

  .card-body-confirmed {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  .confirmed-details-section,
  .confirmed-info-section {
    display: grid !important;
    gap: 14px 24px !important;
    padding: 16px !important;
    border-left: none !important;
    border-right: none !important;
    height: auto !important;
  }

  .confirmed-info-section .detail-item {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .confirmed-info-section .detail-item .label {
    width: auto !important;
    font-size: 12px !important;
    color: #667085 !important;
  }

  .confirmed-info-section .detail-item .value {
    width: auto !important;
    font-size: 14px !important;
  }

  /* Empty State */
  .no-load-posts {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 50px auto 30px auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .no-load-posts img {
    width: 140px !important;
    height: auto !important;
  }

  .no-load-posts h1 {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
  }

  .create-load-post-button {
    margin-top: 16px !important;
    min-width: 200px !important;
  }

  .separator {
    position: relative !important;
    width: 85% !important;
    left: auto !important;
    top: auto !important;
    margin: 30px auto !important;
  }

  .what-else-can-do {
    position: relative !important;
    width: 100% !important;
    max-width: 650px !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    padding: 0 24px !important;
    margin: 0 auto 50px auto !important;
    box-sizing: border-box !important;
  }

  .what-else-can-do h2 {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    font-size: 17px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .buttons-grid {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    height: auto !important;
  }

  .buttons-grid button {
    width: auto !important;
    min-width: 170px !important;
    max-width: 200px !important;
    font-size: 13px !important;
    height: 40px !important;
    padding: 10px 20px 10px 14px !important;
  }

  /* Modals */

  .modal-content {
    max-width: 90% !important;
    width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .filter-modal-content {
    width: 90vw !important;
    max-width: 600px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  .filter-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* ============================================================
   MOBILE STYLES (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Fix scrolling issue */
  html {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 64px;
  }

  /* Header Layout - Mobile */
  header {
    padding: 10px 16px !important;
    height: 60px !important;
    justify-content: space-between !important;
  }

  .logo img {
    width: 55px !important;
    height: auto !important;
  }

  /* Show Mobile Elements */
  .mobile-menu-btn {
    display: flex !important;
    order: -1 !important;
    margin-right: 12px !important;
  }

  .logo {
    order: 0 !important;
    margin-right: auto !important;
    /* Pushes user actions to the right */
  }

  /* Mobile nav now uses visibility transitions, no display override needed */

  /* Hide Mobile Bottom Nav - Navigation is via hamburger menu only */
  .mobile-bottom-nav {
    display: none !important;
  }

  /* Hide Desktop Nav */
  nav {
    display: none !important;
  }

  .user-actions {
    gap: 8px !important;
    /* Reduced gap for mobile */
    min-width: auto !important;
    justify-content: flex-end !important;
  }

  /* Mobile User Actions Order:
       1. Notification
       2. Post Load
       Hide others
    */
  .notification-icon {
    display: flex !important;
    order: 1 !important;
  }

  .post-load-button {
    display: flex !important;
    order: 2 !important;
    min-width: auto !important;
    font-size: 11px !important;
    padding: 2px 10px !important;
    height: 32px !important;
    gap: 4px !important;
  }

  .demo-button {
    display: none !important;
  }

  .user-profile {
    display: none !important;
  }

  .post-load-button i {
    font-size: 11px !important;
  }

  .notification-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
  }

  .notification-icon .bell-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .notification-count {
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    top: -2px !important;
    right: 2px !important;
  }

  .user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  .user-profile i {
    font-size: 10px !important;
    margin-left: 2px !important;
  }

  /* Main Content */
  main {
    margin-top: 60px !important;
    min-height: calc(100vh - 124px) !important;
    padding-bottom: 64px !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Load Posts Page */
  .load-posts-page {
    padding: 12px !important;
    margin-top: 60px !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: calc(100vh - 124px) !important;
    padding-bottom: 80px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .filter-sidebar {
    display: none !important;
  }

  .filter-icon {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
  }

  .main-load-content {
    width: 100% !important;
    /* gap: 12px !important; */
    height: auto !important;
    overflow: visible !important;
  }

  /* Tabs and Search */
  .tabs-and-search-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    height: auto !important;
    margin-bottom: 0px !important;
  }

  .tabs {
    width: 100% !important;
    overflow-x: auto !important;
    gap: 12px !important;
    /* padding-bottom: 8px !important; */
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab-button {
    font-size: 12px !important;
    padding: 8px 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .search-and-actions {
    width: 100% !important;
    min-width: unset !important;
    gap: 10px !important;
  }

  .search-bar {
    flex: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
  }

  .search-bar input {
    font-size: 13px !important;
    padding-left: 12px !important;
  }

  .excel-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 6px !important;
  }

  .excel-icon img {
    width: 20px !important;
    height: 20px !important;
  }

  /* Load Post Cards */
  .load-posts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
  }

  .load-post-wrapper {
    margin-bottom: 0 !important;
  }

  /* Post Header */
  .post-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .post-meta {
    font-size: 11px !important;
    padding: 10px 14px !important;
    background: #f9fafb !important;
    border-radius: 12px 12px 0 0 !important;
    border: 1px solid #e4e7ec !important;
    border-bottom: none !important;
  }

  .card-actions-overflow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: 1px solid #e4e7ec !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff !important;
  }

  .action-button {
    flex: unset !important;
    width: 100% !important;
    font-size: 11px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border-right: 1px solid #e4e7ec !important;
    border-bottom: 1px solid #e4e7ec !important;
    height: auto !important;
    gap: 4px !important;
  }

  .action-button:nth-child(2n) {
    border-right: none !important;
  }

  .action-button:nth-child(n + 3) {
    border-bottom: none !important;
  }

  .action-button img {
    width: 14px !important;
    height: 14px !important;
  }

  /* Card Body */
  .load-post-card {
    border-radius: 0 0 12px 12px !important;
  }

  .card-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  /* Location Section */
  .location-section {
    padding: 16px !important;
    border-bottom: 1px solid #e4e7ec !important;
    border-right: none !important;
    height: auto !important;
  }

  .post-id-row {
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid #e4e7ec !important;
  }

  .post-id-badge {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101828 !important;
  }

  .open-status {
    font-size: 11px !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    background: rgba(81, 158, 138, 0.1) !important;
    color: #519e8a !important;
    font-weight: 500 !important;
  }

  .location-path {
    margin-top: 0 !important;
    padding-left: 30px !important;
    gap: 0 !important;
  }

  .location-line,
  .location-line-end {
    position: relative !important;
    padding-left: 0 !important;
    height: auto !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  .location-line .location-dot,
  .location-line-end .location-dot {
    position: absolute !important;
    left: -29px !important;
    top: 0 !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
  }

  .location-connector {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    top: 22px !important;
    width: 2px !important;
    height: calc(100% - 44px) !important;
    background: #519e8a !important;
    z-index: 1 !important;
  }

  .location-info {
    gap: 2px !important;
  }

  .location-label {
    font-size: 12px !important;
    color: #667085 !important;
  }

  .location-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #101828 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .distance-info {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 12px 0 !important;
    font-size: 13px !important;
    color: #667085 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .schedule-info {
    display: block !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid #e4e7ec !important;
    font-size: 14px !important;
    color: #101828 !important;
  }

  /* Details Section */
  .details-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 16px !important;
    padding: 14px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e4e7ec !important;
    height: auto !important;
  }

  .detail-item {
    flex-direction: column !important;
    gap: 3px !important;
  }

  .detail-item .label {
    font-size: 11px !important;
    color: #667085 !important;
    width: auto !important;
    max-width: none !important;
    font-weight: 400 !important;
  }

  .detail-item .value {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
  }

  /* Bidding Section */
  .bidding-section {
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .bidding-header {
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .bidding-time-info {
    width: 100% !important;
    flex: 1 !important;
    font-size: 12px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  .bidding-time-info span {
    font-size: 12px !important;
  }

  .bidding-timer {
    font-size: 13px !important;
  }

  .extend-time-button {
    font-size: 10px !important;
    padding: 4px 10px !important;
    height: 24px !important;
    margin-left: auto !important;
  }

  /* Bids Table */
  .bids-table {
    padding: 0 !important;
  }

  .bid-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .bid-row.header span {
    font-size: 12px !important;
    padding: 10px 6px !important;
    height: auto !important;
  }

  .bid-cell {
    padding: 12px 8px !important;
  }

  .bid-amount {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .accept-bid-button-inline {
    font-size: 10px !important;
    padding: 5px 10px !important;
    width: 80px !important;
  }

  .bidding-summary-row {
    padding: 10px 14px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
  }

  .view-all-bids {
    font-size: 11px !important;
  }

  /* Bid Actions */
  .bid-actions {
    grid-template-columns: repeat(3, 1fr) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }

  .bid-actions span {
    font-size: 10px !important;
    padding: 10px 6px !important;
    min-height: 38px !important;
    gap: 4px !important;
  }

  /* Description */
  .description-section {
    padding: 12px 14px !important;
    font-size: 12px !important;
  }

  /* Confirmed Posts */
  .post-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .card-actions-overflow-confirmed {
    display: none !important;
  }

  .mobile-confirmed-kebab-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
  }

  .mobile-confirmed-kebab-menu:hover {
    background-color: #f9fafb;
  }

  .mobile-confirmed-kebab-menu:active {
    background-color: #f2f4f7;
  }

  .confirmed-action-btn {
    font-size: 10px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid #e4e7ec !important;
    height: auto !important;
    justify-content: center !important;
    gap: 4px !important;
  }
}

.confirmed-action-btn:nth-child(2n) {
  border-right: none !important;
}

.confirmed-action-btn .icon img {
  width: 14px !important;
  height: 14px !important;
}

.load-post-card-confirmed-button {
  border-radius: 0 0 12px 12px !important;
}

.card-body-confirmed {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
}

.confirmed-details-section,
.confirmed-info-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-left: none !important;
  border-right: none !important;
  height: 200px !important;
  box-sizing: border-box !important;
}

/* Desktop/Tablet: 3-column layout for card-body-confirmed */
@media screen and (min-width: 768px) {
  /* Make location dots and connector follow mobile layout */
  .location-line .location-dot,
  .location-line-end .location-dot {
    position: absolute !important;
    left: -29px !important;
    top: 0 !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
  }

  .location-connector {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    top: 22px !important;
    width: 2px !important;
    height: calc(100% - 44px) !important;
    background: #519e8a !important;
    z-index: 1 !important;
  }

  /* removed .location-line-end::after per request */

  /* Tablet: make ongoing posts use 3-column desktop layout like confirmed posts */
  .card-body {
    display: grid !important;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(
        200px,
        455px
      ) !important;
    gap: 0 !important;
  }

  .card-body .location-section {
    border-right: 1px solid #e4e7ec !important;
    padding-right: 16px !important;
  }

  .card-body .details-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px 20px !important;
    padding: 20px 20px !important;
    border-left: 1px solid #e4e7ec !important;
    height: 292px;
  }

  .card-body-confirmed {
    display: grid !important;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.2fr) minmax(
        200px,
        1.2fr
      ) !important;
    gap: 0 !important;
  }

  .card-body-confirmed .location-section {
    border-right: 1px solid #e4e7ec !important;
    padding-right: 16px !important;
    height: 200px !important;
  }

  .card-body-confirmed .confirmed-details-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-left: 1px solid #e4e7ec !important;
    border-right: 1px solid #e4e7ec !important;
    height: 200px !important;
  }

  .card-body-confirmed .confirmed-info-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-left: none !important;
    height: 200px !important;
  }

  .card-body-confirmed .detail-item {
    flex-direction: row !important;
    gap: 8px !important;
  }

  .card-body-confirmed .detail-item .label {
    width: 110px !important;
    flex-shrink: 0 !important;
  }
}

/* Desktop: increase vertical gap for ongoing (non-confirmed) load post detail rows */
@media screen and (min-width: 1024px) {
  /* Target load-post cards that are NOT confirmed */
  .load-post-card:not(.confirmed-card) .details-section {
    gap: 22px 20px !important;
    /* row-gap: 22px; column-gap: 20px */
    padding-top: 24px !important;
    padding-left: 24px !important;
    padding-right: 20px !important;
  }

  .load-post-card:not(.confirmed-card) .detail-item {
    gap: 10px !important;
  }
}

.confirmed-details-section .detail-item,
.confirmed-info-section .detail-item {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  /* gap: 12px !important; */
  width: 100% !important;
}

.confirmed-details-section .detail-item .label,
.confirmed-info-section .detail-item .label {
  /* width: 120px !important; */
  flex-shrink: 0 !important;
  font-size: 13px !important;
  color: #667085 !important;
  margin-bottom: 0 !important;
}

.confirmed-details-section .detail-item .value,
.confirmed-info-section .detail-item .value {
  width: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.check-time-link.no-date {
  width: auto !important;
  padding: 5px 12px !important;
  font-size: 10px !important;
}

/* Modals */

.modal-content {
  width: 100% !important;
  margin: 10px !important;
  border-radius: 16px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.modal-header h2 {
  font-size: 16px !important;
}

.close-button {
  font-size: 22px !important;
  width: 28px !important;
  height: 28px !important;
}

.modal-footer {
  gap: 10px !important;
  padding-top: 16px !important;
}

/* Filter Modal */
.filter-modal-content {
  width: 95vw !important;
  height: auto !important;
  max-height: 85vh !important;
  padding: 16px !important;
  border-radius: 16px !important;
  overflow-y: auto !important;
}

.filter-modal-header h3 {
  font-size: 16px !important;
}

.filter-form-grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.filter-form-group {
  width: 100% !important;
  height: auto !important;
}

.filter-form-group label {
  font-size: 13px !important;
}

.filter-form-group input,
.filter-form-group select {
  height: 42px !important;
  font-size: 13px !important;
}

.filter-actions {
  flex-direction: column-reverse !important;
  gap: 10px !important;
}

.filter-clear-btn,
.filter-apply-btn {
  width: 100% !important;
  height: 42px !important;
}

/* Notification Modal - Tablet size */
.notification-modal {
  position: fixed !important;
  top: 60px !important;
  right: 10px !important;
  left: auto !important;
  width: 420px !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
  display: none !important;
}

.notification-modal[style*="display: flex"],
.notification-modal[style*="display: block"] {
  display: flex !important;
  flex-direction: column !important;
}

.notification-modal .modal-body {
  flex: 1 !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Profile Dropdown */
.profile-dropdown {
  position: fixed !important;
  top: 60px !important;
  right: 10px !important;
  width: calc(100vw - 20px) !important;
  max-width: 300px !important;
  border-radius: 12px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 124px) !important;
}

/* Empty State */
.no-load-posts {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  margin: 30px auto 20px auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.no-load-posts img {
  width: 110px !important;
  height: auto !important;
}

.no-load-posts h1 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 8px !important;
}

.create-load-post-button {
  width: auto !important;
  min-width: 180px !important;
  max-width: 220px !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  height: 42px !important;
  margin-top: 14px !important;
}

.separator {
  width: 90% !important;
  left: auto !important;
  position: relative !important;
  margin: 20px auto !important;
}

.what-else-can-do {
  width: 100% !important;
  max-width: 320px !important;
  left: auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  height: auto !important;
  margin: 0 auto 30px auto !important;
}

.what-else-can-do h2 {
  position: relative !important;
  width: 100% !important;
  left: auto !important;
  font-size: 15px !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

.buttons-grid {
  position: relative !important;
  width: 100% !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  height: auto !important;
}

.buttons-grid button {
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
  font-size: 11px !important;
  padding: 8px 12px 8px 8px !important;
  height: 36px !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

.buttons-grid button img {
  width: 14px !important;
  height: 14px !important;
  margin-right: 2px !important;
}

.buttons-grid button::before {
  display: none !important;
}

/* ============================================================
   SMALL MOBILE (max-width: 375px)
   ============================================================ */
@media screen and (max-width: 375px) {
  header {
    padding: 8px 12px !important;
    height: 56px !important;
  }

  .logo img {
    width: 48px !important;
  }

  .post-load-button {
    font-size: 10px !important;
    padding: 5px 8px !important;
    height: 28px !important;
  }

  .load-posts-page {
    padding: 10px !important;
    margin-top: 56px !important;
  }

  .tab-button {
    font-size: 11px !important;
    padding: 6px 2px !important;
  }

  .search-bar {
    height: 34px !important;
  }

  .post-meta {
    font-size: 10px !important;
    padding: 8px 12px !important;
  }

  .action-button {
    font-size: 10px !important;
    padding: 8px 6px !important;
  }

  .location-section {
    padding: 12px !important;
  }

  .post-id-badge {
    font-size: 12px !important;
  }

  .location-label {
    font-size: 10px !important;
  }

  .location-text {
    font-size: 12px !important;
  }

  .details-section {
    padding: 12px !important;
    gap: 10px 14px !important;
  }

  .detail-item .label {
    font-size: 10px !important;
  }

  .detail-item .value {
    font-size: 12px !important;
  }

  .bidding-header {
    padding: 8px 12px !important;
  }

  .bidding-time-info span {
    font-size: 11px !important;
  }

  .bid-cell {
    padding: 10px 6px !important;
  }

  .bid-amount {
    font-size: 13px !important;
  }

  .accept-bid-button-inline {
    font-size: 9px !important;
    padding: 4px 8px !important;
    width: 72px !important;
  }

  .bid-actions span {
    font-size: 9px !important;
    padding: 8px 4px !important;
  }

  .description-section {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  .confirmed-action-btn {
    font-size: 9px !important;
    padding: 8px 6px !important;
  }

  .no-load-posts {
    max-width: 260px !important;
    margin: 30px auto !important;
  }

  .no-load-posts img {
    width: 100px !important;
  }

  .no-load-posts h1 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .create-load-post-button {
    max-width: 200px !important;
    font-size: 13px !important;
    height: 40px !important;
  }
}

/* ============================================================
   CREATE LOAD REQUEST MODAL - RESPONSIVE STYLES
   ============================================================ */

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
  #modalOverlay .modal-content {
    max-width: 95vw !important;
    width: 700px !important;
    padding: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  #modalOverlay .modal-header h2 {
    font-size: 17px !important;
  }

  #modalOverlay .form-row {
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  #modalOverlay .form-group {
    width: 100% !important;
    flex: unset !important;
  }

  #modalOverlay .form-section {
    width: 100% !important;
  }

  #modalOverlay .toggle-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #modalOverlay .toggle-button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  #modalOverlay .time-selects {
    flex-direction: row !important;
    gap: 12px !important;
  }

  #modalOverlay .time-selects .custom-dropdown {
    flex: 1 !important;
    min-width: 100px !important;
  }

  #modalOverlay .dropdown-header {
    font-size: 14px !important;
    height: 42px !important;
  }

  #modalOverlay .form-group input,
  #modalOverlay .form-group select,
  #modalOverlay .form-group textarea {
    height: 42px !important;
    font-size: 14px !important;
  }

  #modalOverlay .checkbox-group label {
    font-size: 12px !important;
  }

  #modalOverlay .modal-footer {
    flex-direction: row !important;
    gap: 12px !important;
    padding-top: 20px !important;
  }

  #modalOverlay .cancel-button,
  #modalOverlay .create-button {
    width: auto !important;
    min-width: 120px !important;
  }

  /* Multiple Stops Fields */
  #modalOverlay .loading-points-container {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  #modalOverlay .loading-points-container .form-group {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 180px !important;
  }

  #modalOverlay .add-more-address-button {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* Material and Truck rows */
  #modalOverlay .material-row,
  #modalOverlay .truck-row {
    flex-direction: column !important;
  }

  #modalOverlay .material-row .material-field,
  #modalOverlay .material-row .weight-value-field,
  #modalOverlay .truck-row .truck-field,
  #modalOverlay .truck-row .payment-field {
    flex: unset !important;
    width: 100% !important;
  }
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 767px) {
  #modalOverlay .modal-content {
    width: calc(100vw - 20px) !important;
    max-width: 100% !important;
    margin: 10px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }

  #modalOverlay .modal-header {
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
  }

  #modalOverlay .modal-header h2 {
    font-size: 16px !important;
  }

  #modalOverlay .close-button {
    font-size: 24px !important;
    width: 28px !important;
    height: 28px !important;
  }

  #modalOverlay .modal-body {
    padding-top: 8px !important;
  }

  #modalOverlay .form-row {
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  #modalOverlay .form-group {
    width: 100% !important;
    flex: unset !important;
    gap: 4px !important;
  }

  #modalOverlay .form-group label {
    font-size: 13px !important;
  }

  #modalOverlay .form-section {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  #modalOverlay .form-section label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  #modalOverlay .toggle-buttons {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #modalOverlay .toggle-button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 34px !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    border-radius: 20px !important;
  }

  #modalOverlay .toggle-button i {
    font-size: 10px !important;
    margin-right: 4px !important;
  }

  #modalOverlay .time-selects {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #modalOverlay .time-selects .custom-dropdown {
    flex: unset !important;
    width: 100% !important;
    min-width: unset !important;
  }

  #modalOverlay .dropdown-header {
    font-size: 13px !important;
    height: 40px !important;
    padding: 8px 12px !important;
  }

  #modalOverlay .dropdown-header .selected-value {
    font-size: 13px !important;
  }

  #modalOverlay .form-group input,
  #modalOverlay .form-group select {
    height: 40px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  #modalOverlay .form-group textarea {
    font-size: 13px !important;
    min-height: 70px !important;
    padding: 10px 12px !important;
  }

  #modalOverlay .checkbox-group {
    margin-top: 4px !important;
  }

  #modalOverlay .checkbox-group input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
  }

  #modalOverlay .checkbox-group label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #modalOverlay .date-range-input-wrapper input[type="date"] {
    height: 40px !important;
    font-size: 13px !important;
  }

  #modalOverlay .date-range-calendar-icon {
    width: 18px !important;
    height: 18px !important;
    right: 10px !important;
  }

  /* Modal Footer - keep buttons in one row on mobile for compact layouts */
  #modalOverlay .modal-footer {
    flex-direction: row !important;
    gap: 12px !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  #modalOverlay .cancel-button {
    width: auto !important;
    height: 42px !important;
    font-size: 14px !important;
    order: 0 !important;
    padding: 8px 14px !important;
  }

  #modalOverlay .create-button {
    width: auto !important;
    height: 44px !important;
    font-size: 15px !important;
    order: 0 !important;
    padding: 8px 16px !important;
  }

  /* Multiple Stops Fields */
  #modalOverlay .loading-points-container {
    flex-direction: column !important;
    gap: 12px !important;
  }

  #modalOverlay .loading-points-container .form-group {
    flex: unset !important;
    width: 100% !important;
    min-width: unset !important;
  }

  #modalOverlay .remove-more-icon {
    align-self: flex-end !important;
    margin-bottom: 0 !important;
  }

  #modalOverlay .add-more-address-button {
    width: 100% !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
    justify-content: center !important;
  }

  #modalOverlay .add-more-address-button img {
    width: 14px !important;
    height: 14px !important;
  }

  /* Material and Truck rows */
  #modalOverlay .material-row,
  #modalOverlay .truck-row,
  #modalOverlay .one-stop-fields {
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Ensure truck row children are responsive and can wrap */
  #modalOverlay .truck-row {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* Default desktop proportions (desktop styles keep original layout) */
  #modalOverlay .truck-row .truck-field {
    flex: 0 0 calc(24% - 12px) !important;
    min-width: 160px !important;
  }

  /* Ensure required trucks field keeps similar width when present */
  #modalOverlay .truck-row .required-trucks-field,
  #modalOverlay .truck-row .required-trucks-field .form-group,
  #modalOverlay .truck-row .required-trucks-field input {
    flex: 0 0 auto;
  }

  #modalOverlay .truck-row .payment-field {
    flex: 0 0 calc(50% - 12px) !important;
    min-width: 220px !important;
  }

  /* Tablet: two-column layout for truck row */
  @media (max-width: 1024px) {
    #modalOverlay .truck-row .truck-field,
    #modalOverlay .truck-row .payment-field {
      flex: 1 1 48% !important;
      min-width: 220px !important;
    }

    /* Modal-specific: Add padding and nudge delete button for create-load modal */
    #createLoadModalOverlay #loadPostForToggle .checkbox-row {
      padding-top: 25px !important;
    }

    #createLoadModalOverlay .stop-delete-wrapper {
      margin-left: 18px !important;
    }

    /* tablet adjustments: reduce weight input padding-right and ensure delete icon is sizeable for touch */
    #createLoadModalOverlay .stop-weight-group input {
      padding-right: 12px !important;
      height: 40px !important;
    }

    #createLoadModalOverlay .stop-delete-wrapper .delete-row-btn {
      width: 44px !important;
      height: 44px !important;
    }
  }

  /* Mobile: stack all truck row fields full-width */
  @media (max-width: 767px) {
    #modalOverlay .truck-row {
      flex-direction: column !important;
      gap: 10px !important;
    }

    #modalOverlay .truck-row .truck-field,
    #modalOverlay .truck-row .payment-field,
    #modalOverlay .truck-row .required-trucks-field {
      flex: 1 1 100% !important;
      width: 100% !important;
      min-width: 0 !important;
    }
  }

  /* Conditional Payment Terms */
  #modalOverlay .conditional-payment-terms {
    margin-top: 0 !important;
  }

  /* Bulk Load Fields */
  #modalOverlay .bulk-load-fields {
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Description field */
  #modalOverlay #description {
    min-height: 80px !important;
  }
}

/* Small Mobile (max-width: 375px) */
@media screen and (max-width: 375px) {
  #modalOverlay .modal-content {
    margin: 8px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    max-height: 90vh !important;
  }

  #modalOverlay .modal-header h2 {
    font-size: 15px !important;
  }

  #modalOverlay .close-button {
    font-size: 22px !important;
    width: 26px !important;
    height: 26px !important;
  }

  #modalOverlay .form-row {
    gap: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #modalOverlay .form-group label {
    font-size: 12px !important;
  }

  #modalOverlay .toggle-buttons {
    gap: 4px !important;
  }

  #modalOverlay .toggle-button {
    padding: 5px 10px !important;
    font-size: 11px !important;
    height: 32px !important;
  }

  #modalOverlay .dropdown-header {
    font-size: 12px !important;
    height: 38px !important;
    padding: 6px 10px !important;
  }

  #modalOverlay .form-group input,
  #modalOverlay .form-group select {
    height: 38px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  #modalOverlay .form-group textarea {
    font-size: 12px !important;
    min-height: 60px !important;
  }

  #modalOverlay .checkbox-group label {
    font-size: 10px !important;
  }

  #modalOverlay .modal-footer {
    gap: 8px !important;
    padding-top: 14px !important;
  }

  #modalOverlay .cancel-button,
  #modalOverlay .create-button {
    height: 40px !important;
    font-size: 13px !important;
  }

  #modalOverlay .add-more-address-button {
    font-size: 11px !important;
    padding: 8px 14px !important;
  }
}

/* ============================================================
   ALL MODALS - COMPREHENSIVE RESPONSIVE STYLES
   ============================================================ */

/* Small Modal (Accept Bid, Success, etc.) - Tablet */
@media screen and (max-width: 1024px) {
  .small-modal {
    width: 90% !important;
    max-width: 400px !important;
    padding: 24px !important;
  }

  .small-modal .modal-body {
    padding: 20px 16px !important;
  }

  .small-modal .modal-icon {
    width: 80px !important;
    height: 80px !important;
  }

  .small-modal .confirmation-text,
  .small-modal .success-message {
    font-size: 16px !important;
  }

  .small-modal-footer {
    gap: 12px !important;
  }

  .small-modal-footer button {
    min-width: 120px !important;
    font-size: 14px !important;
  }

  /* Extended Modal (Extend Bid Time) */
  .extended-modal {
    width: 90% !important;
    max-width: 450px !important;
  }

  .extended-modal .time-selects {
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* Large Modal (View All Bids, Delete, Fulfill) */
  .large-modal,
  .large-modal-delete {
    width: 95% !important;
    max-width: 900px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  .large-modal .modal-header h2,
  .large-modal-delete .modal-header h2 {
    font-size: 17px !important;
  }

  /* Bids Table */
  .bids-table-full {
    overflow-x: auto !important;
  }

  .bid-full-row {
    min-width: 700px !important;
  }

  .bid-full-row span {
    font-size: 12px !important;
    padding: 10px 8px !important;
  }

  /* Review Details Table */
  .review-details-table {
    overflow-x: auto !important;
  }

  .review-row {
    min-width: 600px !important;
  }

  .review-row span {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  /* Fulfill modal vertical details layout (one line per label:value) */
  .fulfill-modal .review-details-table {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hide the column header from the review table for fulfill modal (we show labels instead) */
  .fulfill-modal .review-row.header {
    display: none !important;
  }

  .fulfill-modal .review-details-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .fulfill-modal .review-details-vertical .detail-line {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    font-size: 14px !important;
  }

  .fulfill-modal .review-details-vertical .detail-label {
    min-width: 220px !important;
    /* Keep labels aligned */
    font-weight: 600 !important;
    color: var(--text-muted, #6b7280) !important;
  }

  .fulfill-modal .review-details-vertical .detail-value {
    flex: 1 !important;
    color: var(--text, #111827) !important;
    font-weight: 500 !important;
  }

  /* Manage By Section */
  .manage-by-section {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .manage-by-section .form-group {
    flex: 1 1 200px !important;
  }
}

/* Small Modal - Mobile */
@media screen and (max-width: 767px) {
  .small-modal {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .small-modal .modal-body {
    padding: 16px 12px !important;
  }

  .small-modal .modal-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .small-modal .confirmation-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .small-modal .success-message {
    font-size: 15px !important;
  }

  .small-modal .note-message {
    font-size: 12px !important;
  }

  .small-modal-footer {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  .small-modal-footer button {
    width: 100% !important;
    min-width: unset !important;
    height: 42px !important;
  }

  /* Extended Modal */
  .extended-modal {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  .extended-modal .modal-header h2 {
    font-size: 16px !important;
  }

  .extended-modal .time-selects {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .extended-modal .time-selects .custom-dropdown {
    width: 100% !important;
  }

  /* Large Modal */
  .large-modal,
  .large-modal-delete {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 10px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    max-height: 88vh !important;
  }

  .large-modal .modal-header h2,
  .large-modal-delete .modal-header h2 {
    font-size: 15px !important;
  }

  /* Bids Table - Card Layout on Mobile */
  .bids-table-full {
    display: block !important;
  }

  .bid-full-row.header {
    display: none !important;
  }

  .bid-full-row:not(.header) {
    display: flex !important;
    flex-direction: column !important;
    min-width: unset !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .bid-full-row:not(.header) span {
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .bid-full-row:not(.header) span:last-child {
    border-bottom: none !important;
  }

  .bid-full-row:not(.header) span::before {
    content: attr(data-label);
    font-weight: 500 !important;
    color: #667085 !important;
    font-size: 11px !important;
  }

  /* Review Details Table - Stack on Mobile */
  .review-details-table {
    display: block !important;
  }

  .review-row.header {
    display: none !important;
  }

  .review-row:not(.header),
  .review-row-value {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-width: unset !important;
    padding: 12px !important;
  }

  .review-row span,
  .review-row-value span {
    font-size: 12px !important;
    padding: 4px 0 !important;
  }

  /* Manage By Section */
  .manage-by-section {
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Fulfill modal: Managed By toggle should be a 1x2 layout (Loadsor/Other) */
  .fulfill-modal .manage-by-section {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .fulfill-modal .manage-by-section .toggle-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 200px !important;
  }

  .fulfill-modal .manage-by-section .form-label {
    min-width: 140px !important;
    font-weight: 600 !important;
  }

  /* Fulfill form groups (Transporter name & mobile) should be single-line rows */
  .fulfill-modal .form-group.transport {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .fulfill-modal .form-group.transport label.form-label {
    min-width: 170px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .fulfill-modal .form-group.transport input[type="text"] {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .fulfill-modal .input-with-icon .icon {
    margin-right: 8px !important;
    color: #111827 !important;
  }

  .manage-by-section .form-group {
    width: 100% !important;
    flex: unset !important;
  }

  .manage-by-section .toggle-buttons {
    flex-wrap: wrap !important;
  }

  /* Modal Section Title */
  .modal-section-title {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    margin-top: 16px !important;
  }

  /* Delete/Fulfill Modal Footer */
  .large-modal-delete .modal-footer,
  .modal-footer.center-buttons {
    gap: 10px !important;
    margin-left: -16px;
    margin-right: -16px;
  }

  .large-modal-delete .modal-footer button,
  .modal-footer.center-buttons button {
    width: 100% !important;
  }
}

/* ============================================================
   FILTER MODAL - RESPONSIVE STYLES
   ============================================================ */
@media screen and (max-width: 1024px) {
  .filter-modal {
    width: 90% !important;
    max-width: 550px !important;
  }

  .filter-modal-content {
    padding: 20px !important;
  }

  .filter-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}

@media screen and (max-width: 767px) {
  .filter-modal {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 10px !important;
    border-radius: 16px !important;
  }

  .filter-modal-content {
    padding: 16px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .filter-modal-header {
    padding-bottom: 12px !important;
  }

  .filter-modal-header h3 {
    font-size: 16px !important;
  }

  .filter-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .filter-form-group label {
    font-size: 13px !important;
  }

  .filter-form-group input,
  .filter-form-group select,
  .filter-form-group .dropdown-header {
    height: 40px !important;
    font-size: 13px !important;
  }

  .filter-actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding-top: 16px !important;
  }

  .filter-clear-btn,
  .filter-apply-btn {
    width: 100% !important;
    height: 42px !important;
  }
}

/* ============================================================
   DROPDOWNS - RESPONSIVE STYLES
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Profile Dropdown */
  .profile-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
  }

  .profile-dropdown .profile-dropdown-header {
    padding: 12px 16px !important;
    font-size: 11px !important;
  }

  .profile-dropdown .dropdown-menu-list li {
    min-height: 44px !important;
    padding: 8px 16px !important;
  }

  .profile-dropdown .dropdown-menu-list li .username {
    font-size: 13px !important;
  }

  .profile-dropdown .dropdown-menu-list li .user-detail {
    font-size: 11px !important;
  }

  .set-truck-time-button {
    margin: 14px 16px !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  /* More Dropdown */
  .more-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
  }

  .more-dropdown .more-dropdown-menu-list li {
    padding: 12px 16px !important;
  }

  .more-dropdown .more-dropdown-menu-list li .text {
    font-size: 13px !important;
  }

  /* Notification Modal - Full screen on mobile */
  .notification-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    display: none !important;
  }

  .notification-modal[style*="display: flex"],
  .notification-modal[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
  }

  .notification-modal .modal-header {
    padding: 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
  }

  .notification-modal .modal-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .notification-modal .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
  }

  .notification-modal .notification-list {
    padding: 0 !important;
    margin: 0 !important;
  }

  .notification-modal .notification-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .notification-modal .notification-list li .icon {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }

  .notification-modal .notification-list li .icon img {
    width: 22px !important;
    height: 22px !important;
  }

  .notification-modal .notification-list li .notification-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .notification-modal .notification-list li .notification-content p {
    flex: 1 !important;
    padding-right: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    height: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    margin: 0 !important;
    color: #5a5e63 !important;
  }

  .notification-modal .notification-list li .timestamp {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: rgba(60, 64, 68, 0.5) !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
    padding-left: 8px !important;
  }
}

/* ============================================================
   VEHICLE DETAILS & UPLOAD INVOICE MODALS - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1024px) {
  .vehicle-details-modal-content,
  .upload-invoice-modal-content {
    width: 90% !important;
    max-width: 600px !important;
    padding: 20px !important;
  }

  .vehicle-details-grid {
    gap: 14px 60px !important;
  }

  .upload-sections {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .vehicle-details-modal-content {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .vehicle-details-modal-header {
    padding-bottom: 14px !important;
  }

  .vehicle-details-modal-header h2 {
    font-size: 16px !important;
  }

  .vehicle-details-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .vehicle-detail-item {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .vehicle-detail-label {
    font-size: 13px !important;
    min-width: unset !important;
  }

  .vehicle-detail-value {
    font-size: 13px !important;
    text-align: right !important;
  }

  /* Upload Invoice Modal */
  .upload-invoice-modal-content {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .upload-invoice-modal-header h2 {
    font-size: 16px !important;
  }

  .upload-sections {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .upload-section h3 {
    font-size: 15px !important;
  }

  .upload-area {
    height: 200px !important;
  }
}

/* ============================================================
   TRUCK STATUS MODAL - RESPONSIVE
   ============================================================ */

/* Base styles for all screen sizes - ensure calendar icon is clickable */
.truck-status-modal-overlay .date-range-input-wrapper-filter {
  position: relative !important;
}

.truck-status-modal-overlay
  .date-range-input-wrapper-filter
  .date-range-calendar-icon {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  width: 20px !important;
  height: 20px !important;
}

.truck-status-modal-overlay
  .date-range-input-wrapper-filter
  .date-range-calendar-icon:hover {
  opacity: 0.7 !important;
}

@media screen and (max-width: 1024px) {
  #truckStatusModalOverlay .modal-content {
    width: 90% !important;
    max-width: 700px !important;
    min-width: unset !important;
  }

  .truck-status-form-row {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .truck-status-form-row .filter-group {
    flex: 1 1 200px !important;
  }
}

@media screen and (max-width: 767px) {
  #truckStatusModalOverlay .modal-content {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: unset !important;
    padding: 16px !important;
    border-radius: 16px !important;
    height: auto !important;
    max-height: 90vh !important;
  }

  #truckStatusModalOverlay .modal-header {
    padding: 12px 16px !important;
    margin: -16px -16px 16px -16px !important;
  }

  #truckStatusModalOverlay .modal-header h2 {
    font-size: 18px !important;
  }

  #truckStatusModalOverlay .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 120px) !important;
  }

  .truck-status-form-section {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }

  .truck-status-form-row {
    width: 100% !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .truck-status-form-row .filter-group {
    flex: unset !important;
    width: 100% !important;
  }

  .truck-status-form-row .filter-group label {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .truck-status-form-row .custom-dropdown {
    width: 100% !important;
  }

  .truck-status-form-row .custom-dropdown .dropdown-header {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .truck-status-form-row .date-range-input-wrapper-filter {
    width: 100% !important;
    position: relative !important;
  }

  .truck-status-form-row .date-range-input-wrapper-filter input {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Ensure calendar icon is clickable */
  .truck-status-form-row
    .date-range-input-wrapper-filter
    .date-range-calendar-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    width: 20px !important;
    height: 20px !important;
  }

  #truckStatusModalOverlay .bids-table-full {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #truckStatusModalOverlay .bid-full-row {
    min-width: 600px !important;
  }

  #truckStatusModalOverlay .bid-full-row span {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  .truck-status-records-section {
    margin-top: 16px !important;
  }

  .truck-status-empty-state {
    padding: 32px 16px !important;
    font-size: 13px !important;
  }
}

@media screen and (max-width: 480px) {
  #truckStatusModalOverlay .modal-content {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    border-radius: 12px !important;
  }

  #truckStatusModalOverlay .modal-header {
    padding: 10px 12px !important;
    margin: -12px -12px 12px -12px !important;
  }

  #truckStatusModalOverlay .modal-header h2 {
    font-size: 16px !important;
  }

  #truckStatusModalOverlay .modal-header .close-button {
    width: 28px !important;
    height: 28px !important;
    font-size: 20px !important;
  }

  #truckStatusModalOverlay .modal-body {
    max-height: calc(90vh - 100px) !important;
  }

  .truck-status-form-section {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .truck-status-form-row {
    gap: 12px !important;
  }

  .truck-status-form-row .filter-group label {
    font-size: 13px !important;
  }

  .truck-status-form-row .custom-dropdown .dropdown-header {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }

  .truck-status-form-row .date-range-input-wrapper-filter input {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }

  #truckStatusModalOverlay .bid-full-row {
    min-width: 500px !important;
  }

  #truckStatusModalOverlay .bid-full-row span {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  .truck-status-empty-state {
    padding: 24px 12px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   CHECK CHALLAN MODAL - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
  .check-challan-modal {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    right: auto !important;
    left: 10px !important;
    border-radius: 16px !important;
  }
}

/* ============================================================
   LOAD POST CARDS - MOBILE ENHANCED (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Search Bar Mobile - Full Width */
  .search-and-actions {
    width: 100% !important;
    order: -1 !important;
    flex-wrap: nowrap !important;
  }

  .search-bar {
    flex: 1 !important;
    width: auto !important;
    min-width: unset !important;
  }

  .tabs-and-search-container {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tabs {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

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

  .tab-button {
    font-size: 12px !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
  }

  /* Card Layout - Mobile Stacked */
  .post-header {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
  }

  .post-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 13px !important;
    color: #3c4044 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Hide default action buttons on mobile, keep kebab menu */
  .card-actions-overflow {
    display: none !important;
  }

  /* Card body stacked on mobile */
  .card-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  /* Post ID Row Mobile */
  .post-id-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid #e4e7ec !important;
  }

  .post-id-badge {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101828 !important;
  }

  .open-status {
    font-size: 11px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    background: rgba(81, 158, 138, 0.1) !important;
    color: #519e8a !important;
    font-weight: 500 !important;
  }

  /* Location Section Mobile */
  .location-section {
    padding: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #e4e7ec !important;
    height: auto !important;
  }

  .location-path {
    margin-top: 0 !important;
    position: relative !important;
    padding-left: 30px !important;
    gap: 0 !important;
  }

  /* Show vertical connector line in mobile */
  .location-connector {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    top: 22px !important;
    width: 2px !important;
    height: calc(100% - 44px) !important;
    background: #519e8a !important;
    z-index: 1 !important;
  }

  .location-line {
    position: relative !important;
    padding-left: 0 !important;
    height: auto !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  .location-line-end {
    position: relative !important;
    padding-left: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    gap: 10px !important;
  }

  .location-line .location-dot,
  .location-line-end .location-dot {
    left: -29px !important;
    top: 0 !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
  }

  .location-info {
    gap: 2px !important;
  }

  .location-label {
    font-size: 12px !important;
    color: #667085 !important;
  }

  .location-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #101828 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .multiple-locations-wrapper {
    margin-top: 4px !important;
  }

  .multiple-locations-text {
    font-size: 13px !important;
    color: #519e8a !important;
  }

  .distance-info {
    display: block !important;
    margin: 12px 0 !important;
    font-size: 13px !important;
    color: #667085 !important;
  }

  .schedule-info {
    display: block !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e4e7ec !important;
    font-size: 14px !important;
    color: #101828 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Details Section Mobile - Stacked Label/Value */
  .details-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #e4e7ec !important;
    grid-template-columns: unset !important;
    height: auto !important;
  }

  .detail-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .detail-item .label {
    min-width: 95px !important;
    width: 95px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #667085 !important;
    flex-shrink: 0 !important;
  }

  .detail-item .value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101828 !important;
    flex: 1 !important;
    margin-top: 0 !important;
  }

  /* Bidding Section Mobile */
  .bidding-section {
    padding: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .bidding-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: linear-gradient(
      90deg,
      rgba(81, 158, 138, 0.12) 0%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .bidding-time-info {
    font-size: 13px !important;
    color: #3c4044 !important;
    width: auto !important;
    flex: unset !important;
  }

  .bidding-timer {
    font-weight: 600 !important;
    color: #519e8a !important;
  }

  .bidding-timer.timeout {
    color: #e63946 !important;
  }

  .timer-left-text {
    color: #667085 !important;
    font-size: 12px !important;
  }

  .extend-bid-time-button {
    font-size: 11px !important;
    padding: 5px 12px !important;
    height: auto !important;
    margin-left: 8px !important;
  }

  /* Bids Table - 3 Columns L1, L2, L3 */
  .bidding-table-container {
    padding: 0 !important;
  }

  .bids-table {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .bid-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .bid-row.header {
    background: #f9fafb !important;
    border-bottom: 1px solid #e4e7ec !important;
  }

  .bid-row.header span {
    padding: 12px 8px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #667085 !important;
    border-right: 1px solid #e4e7ec !important;
  }

  .bid-row.header span:last-child {
    border-right: none !important;
  }

  .bid-row:not(.header) span {
    padding: 16px 8px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #101828 !important;
    border-right: 1px solid #e4e7ec !important;
  }

  .bid-row:not(.header) span:last-child {
    border-right: none !important;
  }

  .bid-cell {
    flex: 1 !important;
    text-align: center !important;
    padding: 16px 8px !important;
    border-right: 1px solid #e4e7ec !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bid-cell:last-child {
    border-right: none !important;
  }

  .bid-label {
    display: block !important;
    font-size: 12px !important;
    color: #667085 !important;
    margin-bottom: 8px !important;
  }

  .bid-amount {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101828 !important;
    margin-bottom: 10px !important;
  }

  .accept-bid-button-inline {
    font-size: 11px !important;
    padding: 6px 16px !important;
    width: auto !important;
  }

  /* Bidding Summary Row */
  .bidding-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-top: 1px solid #e4e7ec !important;
    margin-top: 0 !important;
  }

  .view-all-bids {
    /* color: #519e8a !important; */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }

  /* Trucks Row - 3 columns */
  .bid-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }

  .bid-actions span {
    text-align: center !important;
    padding: 12px 8px !important;
    font-size: 12px !important;
    color: #667085 !important;
    border-right: 1px solid #e4e7ec !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: auto !important;
    gap: 4px !important;
    line-height: 1.3 !important;
  }

  .bid-actions span:last-child {
    border-right: none !important;
  }

  .bid-actions span strong {
    font-size: 16px !important;
    color: #101828 !important;
  }

  /* Description Section Mobile */
  .description-section {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #667085 !important;
    border-top: 1px solid #e4e7ec !important;
    line-height: 1.5 !important;
  }

  .description-label {
    font-weight: 500 !important;
    color: #49454f !important;
  }

  .description-text {
    color: #667085 !important;
  }
}

/* Strong override: force true 3-column layout on mobile (ensure L1/L2/L3 are side-by-side)
   This avoids stacking from other layout rules and centers content in each column. */
@media screen and (max-width: 767px) {
  .bids-table {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Ensure each row (header and data row) lays out into 3 equal columns */
  .bids-table .bid-row.header,
  .bids-table .bid-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* Make header spans and bid-cells occupy their grid cells and center contents */
  .bids-table .bid-row.header span,
  .bids-table .bid-row .bid-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 10px 6px !important;
    min-height: 56px !important;
  }

  /* Keep the placeholder `--` visually muted and centered */
  .bids-table .bid-row .bid-cell .bid-amount {
    display: block !important;
  }

  .bids-table .bid-row .bid-cell:last-child {
    /* no right border on last column */
    border-right: none !important;
  }
}

/* ============================================================
   LOAD POST CARDS - SMALL MOBILE (max-width: 375px)
   ============================================================ */
@media screen and (max-width: 375px) {
  .post-meta {
    font-size: 12px !important;
  }

  .post-id-badge {
    font-size: 13px !important;
  }

  .location-text {
    font-size: 13px !important;
  }

  .detail-item .label {
    min-width: 80px !important;
    width: 80px !important;
    font-size: 12px !important;
  }

  .detail-item .value {
    font-size: 13px !important;
  }

  .bidding-time-info span {
    font-size: 12px !important;
  }

  .bid-label {
    font-size: 11px !important;
  }

  .bid-amount {
    font-size: 13px !important;
  }

  .bid-actions span {
    font-size: 11px !important;
    padding: 10px 6px !important;
  }

  .bid-actions span strong {
    font-size: 14px !important;
  }

  .description-section {
    font-size: 12px !important;
    padding: 12px 14px !important;
  }

  .extend-bid-time-button {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   MOBILE KEBAB MENU STYLES
   ============================================================ */
.mobile-kebab-menu {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #667085;
  font-size: 16px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ensure filter icon remains visible on desktop even with mobile-kebab-menu class */
.filter-icon.mobile-kebab-menu {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin-left: 0 !important;
}

.mobile-kebab-menu:hover {
  background-color: #f3f4f6;
}

.mobile-kebab-menu i {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .mobile-kebab-menu {
    display: flex !important;
  }

  .post-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
}

/* Mobile Actions Dropdown Hover States */
.mobile-action-item:hover {
  background-color: #f9fafb;
}

.mobile-action-item:active {
  background-color: #f3f4f6;
}

/* ============================================================
   BOTTOM SHEET DIALOG STYLES - MOBILE & TABLET
   ============================================================ */

/* Global Keyframe Animations for Bottom Sheet */
@keyframes bottomSheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bottomSheetSlideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Bottom Sheet Base - Applies to all modals/popups on mobile/tablet */
@media screen and (max-width: 1024px) {
  /* Transform all modals to bottom sheet style */
  .modal-overlay,
  #modalOverlay,
  #acceptBidConfirmationModalOverlay,
  #acceptBidSuccessModalOverlay,
  #viewAllBidsModalOverlay,
  #extendBidTimeModalOverlay,
  #confirmDeleteModalOverlay,
  #confirmFulfillModalOverlay,
  #truckStatusModalOverlay,
  #checkChallanModalOverlay,
  #filterModalOverlay {
    align-items: flex-end !important;
    justify-content: center !important;
  }

  /* Force black text for delete modal details */
  .delete-details-grid,
  .delete-details-grid * {
    color: #000000 !important;
  }

  .delete-details-grid .delete-label {
    color: rgba(0, 0, 0, 0.9) !important;
    font-weight: 500 !important;
  }

  .delete-details-grid .delete-value {
    color: #000000 !important;
    font-weight: 600 !important;
  }

  .modal-content,
  .modal-overlay .modal-content,
  #modalOverlay .modal-content {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    animation: bottomSheetSlideUp 0.3s ease-out !important;
  }

  /* Bottom Sheet Handle/Drag Indicator */
  .modal-content::before {
    /* content: "" !important; */
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 8px auto 12px auto !important;
  }

  /* Remove handle for confirmation modal specifically */
  .modal-content.confirmation-modal::before,
  .confirmation-modal::before {
    display: none !important;
    content: none !important;
  }

  /* Bottom Sheet Slide Up Animation */
  @keyframes bottomSheetSlideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes bottomSheetSlideDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  /* Modal Header - Bottom Sheet Style */

  .modal-header h2 {
    font-size: 18px !important;
    text-align: center !important;
    flex: 1 !important;
  }

  .modal-close {
    position: absolute !important;
    right: 16px !important;
    top: 20px !important;
  }

  /* Modal Body - Bottom Sheet Style */
  .modal-body {
    padding: 16px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 140px) !important;
  }

  /* Modal Footer - Bottom Sheet Style */
  .modal-footer {
    padding: 12px 16px !important;
    border-top: 1px solid #e4e7ec !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
  }

  .modal-footer button {
    flex: 1 !important;
    min-height: 44px !important;
  }

  /* Create modal-specific footer: keep Create + Cancel on one line (1x2) across viewports */
  .create-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .create-footer .btn-create,
  .create-footer .btn-cancel {
    flex: 1 !important;
    min-width: 0 !important;
    height: 44px !important;
  }

  /* Footer Stack: 1x2 layout for bottom sheet modals on mobile/tablet */
  .modal-footer.center-buttons,
  .small-modal-footer.center-buttons {
    display: flex !important;
    flex-direction: column-reverse !important;
    /* Keep primary action on top */
    gap: 12px !important;
  }

  .modal-footer.center-buttons button,
  .small-modal-footer.center-buttons button {
    width: 100% !important;
  }

  /* Confirmation Modals - Bottom Sheet Style */
  .confirmation-modal,
  .success-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 12px 16px 24px 16px !important;
  }

  /* Show small modal footer in a row for confirmation modal to keep Cancel + Accept on one line */
  .confirmation-modal .small-modal-footer,
  .confirmation-modal .modal-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
  }

  .confirmation-modal .small-modal-footer button,
  .confirmation-modal .modal-footer button {
    min-width: 120px !important;
  }

  .success-modal::before {
    /* content: "" !important; */
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 0 auto 16px auto !important;
  }

  /* View All Bids Modal - Bottom Sheet Style */
  .view-all-bids-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh !important;
  }

  .view-all-bids-modal::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 8px auto 12px auto !important;
  }

  /* Extend Bid Time Modal - Bottom Sheet Style */
  .extend-bid-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Make the extend-bid modal inputs appear in a 2x2 layout on mobile/tablet */
  .extend-bid-modal .time-selects {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .extend-bid-modal .time-selects .custom-dropdown,
  .extend-bid-modal .time-selects .dropdown-header {
    width: 100% !important;
  }

  /* Show modal footer buttons side-by-side for extend modal on smaller screens */
  .extend-bid-modal .modal-footer.center-buttons,
  .fulfill-modal .modal-footer.center-buttons {
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }

  .extend-bid-modal .modal-footer.center-buttons button {
    width: 48% !important;
  }

  /* Removed extend-bid-modal handle */

  /* Delete/Fulfill Confirmation Modals */
  .delete-modal,
  .fulfill-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
  }

  .delete-modal::before,
  .fulfill-modal::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 8px auto 12px auto !important;
  }

  /* Truck Status Modal - Bottom Sheet Style */
  .truck-status-modal,
  .check-challan-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh !important;
  }

  .truck-status-modal::before,
  .check-challan-modal::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 8px auto 12px auto !important;
  }
}

/* Mobile Specific Bottom Sheet Adjustments */
@media screen and (max-width: 767px) {
  .modal-content,
  .modal-overlay .modal-content,
  #modalOverlay .modal-content {
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal-header h2 {
    font-size: 16px !important;
  }

  .modal-body {
    max-height: calc(95vh - 130px) !important;
    padding: 12px !important;
  }

  /* .modal-footer {
        padding: 10px 12px 16px 12px !important;
    } */

  .modal-footer button {
    font-size: 14px !important;
    min-height: 42px !important;
  }

  /* Mobile Actions Menu - Dropdown Style */
  .mobile-actions-dropdown,
  .confirmed-actions-dropdown {
    position: absolute !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    min-width: 180px !important;
    padding: 4px 0 !important;
    border: 1px solid #e4e7ec !important;
  }

  .confirmed-actions-dropdown {
    min-width: 200px !important;
  }

  .mobile-action-item {
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: background-color 0.15s ease !important;
  }

  .mobile-action-item:hover {
    background-color: #f9fafb !important;
  }

  /* Confirmed actions dropdown: ensure divider and icon+text hover color */
  .confirmed-actions-dropdown .mobile-action-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #49454f !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .confirmed-actions-dropdown .mobile-action-item:not(:last-child) {
    border-bottom: 1px solid #f2f4f7 !important;
  }

  .confirmed-actions-dropdown .mobile-action-item img {
    transition: filter 0.15s ease, opacity 0.15s ease !important;
  }

  .confirmed-actions-dropdown .mobile-action-item:hover {
    background-color: #f9fafb !important;
    color: #519e8a !important;
  }

  .confirmed-actions-dropdown .mobile-action-item:hover img {
    filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg)
      brightness(91%) contrast(88%) !important;
  }

  /* Confirmation modals take full width with safe area */
  .confirmation-modal,
  .success-modal {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Form Groups in Bottom Sheet */
  .modal-body .form-group {
    margin-bottom: 12px !important;
  }

  .modal-body .form-group label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  .modal-body .form-group input,
  .modal-body .form-group select,
  .modal-body .form-group textarea {
    /* min-height: 50px !important; */
    font-size: 14px !important;
  }

  /* Toggle Buttons in Bottom Sheet */
  .modal-body .toggle-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-body .toggle-button {
    font-size: 12px !important;
    padding: 6px 12px !important;
    height: 36px !important;
  }

  /* Form Rows in Modal */
  .modal-body .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .modal-body .form-section {
    width: 100% !important;
  }
}

/* Tablet Specific Bottom Sheet Adjustments */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .modal-content,
  .modal-overlay .modal-content,
  #modalOverlay .modal-content {
    max-width: 90% !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 auto !important;
  }

  .modal-header h2 {
    font-size: 18px !important;
  }

  .modal-body {
    max-height: calc(85vh - 150px) !important;
    padding: 20px !important;
  }

  .modal-footer {
    padding: 16px 20px !important;
  }

  /* Confirmation modals at tablet size */
  .confirmation-modal,
  .success-modal,
  .view-all-bids-modal,
  .extend-bid-modal,
  .delete-modal,
  .fulfill-modal {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

/* Bottom Sheet Overlay Enhancement */
@media screen and (max-width: 1024px) {
  .modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}

/* Filter Header Actions & Close Button */
.filter-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.close-filter-sidebar {
  display: none;
  /* Hidden on desktop */
}

/* Filter Sidebar as Bottom Sheet on Mobile & Tablet */
@media screen and (max-width: 1024px) {
  .filter-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }

  .filter-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
  }

  .close-filter-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%;
    background: #f2f4f7;
    margin-left: 8px;
  }

  /* Ensure consistent font sizing across the Filter overlay/modal */
  .filter-overlay .filter-container,
  .filter-overlay .filter-container .filter-body,
  .filter-overlay .filter-container .filter-grid,
  .filter-overlay .filter-container label,
  .filter-overlay .filter-container input,
  .filter-overlay .filter-container .select-trigger span,
  .filter-overlay .filter-container .select-options .option,
  .filter-overlay .filter-container .filter-footer button {
    font-size: 14px !important;
    font-family: var(--font-family) !important;
  }

  /* Keep the modal title larger */
  .filter-overlay .filter-container .filter-header h3 {
    font-size: 18px !important;
  }

  /* Placeholder text should also match */
  .filter-overlay .filter-container input::placeholder {
    font-size: 14px !important;
    color: rgba(60, 64, 68, 0.5) !important;
  }

  /* Small screens slightly reduce label size, keep inputs readable */
  @media screen and (max-width: 767px) {
    .filter-overlay .filter-container label {
      font-size: 13px !important;
    }

    .filter-overlay .filter-container input,
    .filter-overlay .filter-container .select-trigger span,
    .filter-overlay .filter-container .select-options .option,
    .filter-overlay .filter-container .filter-footer button {
      font-size: 14px !important;
    }
  }

  /* Tablet (768px - 1024px) layout: 2 columns x 5 rows */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      grid-template-rows: repeat(5, auto) !important;
      grid-auto-rows: minmax(44px, auto) !important;
      gap: 16px !important;
    }

    /* Make .span-full use only one column so the grid fills 2x5 */
    .filter-grid .span-full {
      grid-column: auto !important;
    }

    /* Make sure inputs/selects fit and occupy their single grid cell */
    .filter-grid .form-group input,
    .filter-grid .form-group .custom-select,
    .filter-grid .form-group .select-trigger {
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Make filter inputs/selects more flexible and allow grid cells to shrink */
    .filter-grid,
    .filter-grid .form-group,
    .filter-grid .form-group * {
      min-width: 0 !important;
    }

    .filter-grid .form-group {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      box-sizing: border-box !important;
    }

    .filter-grid .form-group .input-wrapper,
    .filter-grid .form-group .custom-select,
    .filter-grid .form-group input,
    .filter-grid .form-group .select-trigger {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }

    /* allow select-trigger to grow/shrink inside its wrapper */
    .filter-grid .form-group .select-trigger {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      justify-content: space-between !important;
    }

    /* Make sure date input's right icon does not push width */
    .filter-grid .form-group .date-wrapper input[type="date"] {
      /* padding-right: 40px !important; */
      width: 100% !important;
      box-sizing: border-box !important;
    }
  }

  .close-filter-sidebar:hover {
    background: #eaecf0;
  }

  /* Filter sidebar disabled on mobile/tablet */
  .filter-sidebar.mobile-open {
    display: none !important;
  }

  .filter-sidebar.mobile-open::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 4px !important;
    margin: 8px auto 0 auto !important;
  }

  /* Custom Dropdowns as Bottom Sheet on Mobile/Tablet inside Sidebar
       NOTE: Only apply bottom-sheet behavior when the dropdown has `.bottom-sheet`.
       This avoids forcing all filter/modal dropdowns to appear pinned to the bottom. */
  .filter-sidebar .custom-dropdown.bottom-sheet .dropdown-list,
  .modal-body .custom-dropdown.bottom-sheet .dropdown-list {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 50vh !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 2000 !important;
    /* Higher than sidebar/modal */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    animation: bottomSheetSlideUp 0.25s ease-out !important;
    overflow-y: auto !important;
    border: none !important;
  }

  .filter-sidebar .dropdown-item,
  .modal-body .dropdown-item {
    padding: 16px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid #f2f4f7 !important;
  }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Mobile Notification Panel - Full Screen */
@media screen and (max-width: 767px) {
  .notification-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1100 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .notification-modal .modal-body {
    height: 100% !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  /* Add header to notification modal on mobile */
  .notification-modal::before {
    content: "Notifications";
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 16px 20px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 1px solid #e4e7ec;
    z-index: 10;
  }

  /* Add close button to notification modal on mobile */
  .notification-modal::after {
    content: "×";
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    font-size: 28px;
    color: #3c4044;
    cursor: pointer;
    z-index: 11;
    background: transparent;
    border: none;
    line-height: 1;
  }

  .notification-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .notification-list li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f2f4f7 !important;
    gap: 12px !important;
  }

  .notification-list li .icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .notification-list li .icon img {
    width: 24px !important;
    height: 24px !important;
  }

  .notification-list li .notification-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .notification-list li .notification-content p {
    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #49454f !important;
    margin: 0 !important;
    word-wrap: break-word !important;
  }

  .notification-list li .notification-content .timestamp {
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    color: #98a2b3 !important;
    margin-top: 4px !important;
  }

  /* Hide notification icon on mobile - show in hamburger menu instead */
  .notification-icon {
    display: none !important;
  }
}

/* Tablet View */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .notification-modal {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: auto !important;
    width: 400px !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
  }

  .notification-modal .modal-body {
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
  }

  .notification-list li {
    padding: 14px 16px !important;
  }

  .notification-list li .notification-content p {
    font-size: 13px !important;
  }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Desktop notification styles */
.notification-modal {
  position: absolute;
  top: calc(100% + 10px);
  right: -20px;
  width: 480px;
  max-width: 90vw;
  height: auto;
  max-height: 600px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  display: none;
}

.notification-modal[style*="display: flex"],
.notification-modal[style*="display: block"] {
  display: flex !important;
  flex-direction: column;
}

.notification-modal .modal-header {
  flex-shrink: 0;
}

.notification-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 500px;
  padding: 0;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-list li {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f2f4f7;
  transition: background-color 0.2s ease;
}

.notification-list li:hover {
  background-color: #f9fafb;
}

.notification-list li:last-child {
  border-bottom: none;
}

.notification-list .icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}

.notification-list .icon img {
  width: 24px;
  height: 24px;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #344054;
  font-family: "Inter", sans-serif;
}

.notification-content .timestamp {
  font-size: 12px;
  color: #98a2b3;
  font-weight: 400;
}

/* Tablet View (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .notification-modal {
    width: 360px;
    max-height: 450px;
  }

  .notification-list li {
    padding: 14px;
  }

  .notification-content p {
    font-size: 13px;
  }
}

/* Mobile View (max-width: 767px) */
@media screen and (max-width: 767px) {
  /* Full-screen notification panel on mobile */
  .notification-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    z-index: 1100;
  }

  /* Add header to notification modal on mobile */
  .notification-modal::before {
    content: "Notifications";
    display: block;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 1px solid #e4e7ec;
    background: #ffffff;
    font-family: "Inter", sans-serif;
  }

  /* Add close button to notification modal on mobile */
  .notification-modal::after {
    content: "×";
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 32px;
    font-weight: 400;
    color: #757d85;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
  }

  .notification-modal .modal-body {
    max-height: calc(100vh - 60px);
    padding-top: 0;
  }

  .notification-list {
    padding: 0;
  }

  .notification-list li {
    padding: 16px 20px;
    border-bottom: 1px solid #f2f4f7;
  }

  .notification-list .icon {
    width: 28px;
    height: 28px;
  }

  .notification-list .icon img {
    width: 20px;
    height: 20px;
  }

  .notification-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  .notification-content .timestamp {
    font-size: 12px;
    margin-top: 4px;
  }

  /* Overlay for mobile notification */
  .notification-icon.active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
  }
}

/* Extra Small Mobile (max-width: 375px) */
@media screen and (max-width: 375px) {
  .notification-modal::before {
    padding: 14px 16px;
    font-size: 16px;
  }

  .notification-modal::after {
    top: 10px;
    right: 12px;
    font-size: 28px;
  }

  .notification-list li {
    padding: 14px 16px;
    gap: 10px;
  }

  .notification-list .icon {
    width: 24px;
    height: 24px;
  }

  .notification-list .icon img {
    width: 18px;
    height: 18px;
  }

  .notification-content p {
    font-size: 13px;
  }

  .notification-content .timestamp {
    font-size: 11px;
  }
}

/* -----------------------------
     Modal & Form Responsive Improvements
     - Ensure form rows stack on small screens
     - Make multiple-stops columns collapse to single column on mobile
     - Align weight inputs and labels for various breakpoints
------------------------------ */

@media (max-width: 1024px) {
  /* Make modal content slightly narrower and allow form rows to wrap */
  .modal-content,
  .modal-overlay .modal-content,
  #modalOverlay .modal-content {
    max-width: 100% !important;
  }

  .modal-body .form-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .modal-body .form-group {
    flex: 1 1 48% !important;
    min-width: 220px !important;
  }

  /* Multiple stops become two stacked columns that can wrap */
  .multiple-stops-columns {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .stops-column {
    flex: 1 1 48% !important;
    min-width: 260px !important;
  }

  .stop-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .stop-weight-group {
    flex: 0 0 96px !important;
    max-width: 96px !important;
  }

  .stop-input-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  /* Mobile: stack everything vertically for easy tapping */
  .modal-content,
  .modal-overlay .modal-content,
  #modalOverlay .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .modal-body .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .modal-body .form-group {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Multiple stops: each stop-row stacks input above weight */
  .multiple-stops-columns {
    display: block !important;
  }

  .stops-column {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .stop-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .stop-input-group input,
  .stop-weight-group input {
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  .stop-weight-group {
    flex: 0 0 96px !important;
    max-width: 96px !important;
    width: auto !important;
  }

  /* Ensure the row reserves space for delete button on mobile */
  .stop-row {
    position: relative !important;
    padding-right: 48px !important;
    /* reserve room for delete icon */
  }

  .stop-weight-group .delete-row-btn {
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center !important;
    padding: 0 !important;
  }

  /* Make truck / payment / required trucks fields full width */
  .truck-row .form-group,
  .multiple-stops-truck-row .form-group,
  .one-stop-fields .form-group {
    flex: 1 1 100% !important;
  }

  .dropdown-header,
  .modal-body .form-group input,
  .modal-body .form-group select {
    width: 100% !important;
  }

  /* Increase tappable area for add/delete buttons */
  .add-more-address-button,
  .delete-row-btn {
    padding: 10px 12px !important;
    /* keep add-more address bigger; delete button will be overridden by its own rule */
  }
}

/* -----------------------------
     Mobile & Tablet Improvements
     - Stack filter columns into single column on small screens
     - Make inputs and dropdowns full-width and easier to tap
     - Improve spacing and touch targets for tablet/mobile
------------------------------ */

@media (max-width: 1024px) {
  /* Make the filter form grid stack on tablet */
  .filter-form-grid {
    display: block !important;
    gap: 0 !important;
    padding: 12px 16px !important;
  }

  .filter-column-left,
  .filter-column-right {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }

  .filter-form-group,
  .filter-group {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .filter-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
  }

  .filter-row .filter-group {
    flex: 1 1 48% !important;
    /* two columns where space allows */
    min-width: 200px;
  }

  /* Full width for single-column stacked groups */
  .filter-form-group.full-width,
  .filter-row .filter-group.full-width {
    flex-basis: 100% !important;
  }

  /* Make dropdown header and inputs more touch-friendly */
  .dropdown-header,
  .filter-group input,
  .filter-group textarea,
  .filter-group .date-range-input-wrapper input[type="text"],
  .filter-group input[type="date"] {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .custom-dropdown .dropdown-list {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    max-height: 260px !important;
    overflow: auto !important;
  }

  .apply-filter-button,
  .filter-apply-btn,
  .filter-clear-btn {
    width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  /* Mobile specific adjustments */
  .filter-row .filter-group {
    flex: 1 1 100% !important;
    /* always single column on small screens */
  }

  .filter-header {
    padding: 14px 16px !important;
  }

  .filter-header h3 {
    font-size: 20px !important;
    margin: 0 0 8px 0 !important;
  }

  .dropdown-header {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  /* Increase tappable area for dropdown items */
  .dropdown-item {
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* Sidebar should occupy full width on mobile */
  .filter-sidebar {
    width: 100% !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: auto !important;
    border-radius: 0 !important;
    padding-bottom: 28px !important;
  }

  /* Make action buttons larger and full width */
  .filter-actions,
  .filter-actions .filter-apply-btn,
  .filter-actions .filter-clear-btn {
    display: block !important;
    width: 100% !important;
  }

  /* Improve spacing inside modals and filter modal */
  .filter-modal-content,
  .modal-body {
    padding: 16px !important;
  }
}

/* Accessibility / visual tweaks for smaller tablets (in-between) */
@media (min-width: 601px) and (max-width: 900px) {
  .filter-row .filter-group {
    flex: 1 1 48% !important;
  }

  .dropdown-item {
    padding: 10px 14px !important;
  }
}

/* ============================================================
   NOTIFICATION PANEL RESPONSIVE STYLES
   ============================================================ */

/* Mobile Notification Panel - Full Screen Drawer */
@media screen and (max-width: 1024px) {
  /* Show notification icon on tablet and mobile */
  .notification-icon {
    display: flex !important;
    order: 1 !important;
  }

  /* Transform notification modal into full-screen drawer */
  .notification-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1100 !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
  }

  .notification-modal[style*="display: block"],
  .notification-modal.show {
    transform: translateX(0) !important;
  }

  /* Notification modal header */
  .notification-modal::before {
    content: "Notifications";
    display: block;
    padding: 16px 20px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 1px solid #e4e7ec;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
  }

  /* Close button for mobile notification panel */
  .notification-modal::after {
    content: "×";
    position: fixed;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #667085;
    cursor: pointer;
    z-index: 11;
    background: transparent;
    border: none;
  }

  /* Notification modal body */
  .notification-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Notification list */
  .notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .notification-list li {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f2f4f7;
    align-items: flex-start;
  }

  .notification-list li:last-child {
    border-bottom: none;
  }

  /* Notification icon */
  .notification-list li .icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .notification-list li .icon img {
    width: 24px;
    height: 24px;
  }

  /* Notification content */
  .notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .notification-content p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #344054;
  }

  .notification-content .timestamp {
    font-size: 12px;
    color: #98a2b3;
    margin-top: 4px;
  }

  /* Notification count badge */
  .notification-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
  }
}

/* Notification bell icon size */
img.bell-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
}

/* Mobile specific (max-width: 767px) */
@media screen and (max-width: 767px) {
  .notification-modal::before {
    font-size: 16px;
    padding: 14px 16px;
  }

  .notification-list li {
    padding: 14px 16px;
  }

  .notification-content p {
    font-size: 13px;
  }

  .notification-content .timestamp {
    font-size: 11px;
  }
}

/* Override multiple-stops grid templates for tablet and mobile */
@media (max-width: 1024px) {
  .multiple-stops-form-row {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 columns on tablet */
  }

  .multiple-stops-form-row .form-group {
    width: 100% !important;
  }

  .multiple-stops-truck-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    /* balance columns on tablet */
  }
}

@media (max-width: 600px) {
  .multiple-stops-form-row {
    grid-template-columns: 1fr !important;
    /* single column on mobile */
    gap: 10px !important;
  }

  .multiple-stops-truck-row {
    grid-template-columns: 1fr !important;
    /* stack truck/payment fields */
    gap: 10px !important;
  }

  .multiple-stops-form-row .form-group,
  .multiple-stops-truck-row .form-group {
    width: 100% !important;
  }
}

/* Mobile/tablet forms: 2x2 schedule group and 2x3 toggles within modal */
@media (max-width: 900px) {
  /* Make 3-column rows usable in a 2-column mobile grid */
  #createLoadModalOverlay .form-row.three-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 12px;
  }

  /* Ensure the third group (Bidding Time) spans full width and its internal selects become 2 columns */
  #createLoadModalOverlay .form-row.three-col .form-group:nth-child(3) {
    grid-column: 1 / 3;
  }

  #createLoadModalOverlay .form-row.three-col .time-select-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #createLoadModalOverlay
    .form-row.three-col
    .time-select-group
    .custom-select.small {
    width: 100%;
  }

  /* Toggle areas: stack the two sections vertically, and keep toggle buttons in one horizontal row per section */
  #createLoadModalOverlay .form-row.two-col-layout {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  /* Make each form section take full width and place label above toggles */
  #createLoadModalOverlay .form-section {
    display: block;
    width: 100%;
  }

  #createLoadModalOverlay .form-section .toggle-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap !important;
    align-items: center;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #createLoadModalOverlay .toggle-buttons .toggle-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Ensure checkbox shows on its own line under Load Post For */
  #createLoadModalOverlay #loadPostForToggle .checkbox-row {
    display: block;
    margin-top: 8px;
  }

  /* Keep checkbox aligned inline with toggles - remove extra top padding for single-line layout */
  #createLoadModalOverlay .checkbox-row {
    padding-top: 0 !important;
  }

  /* Move delete button a little to the right so it does not sit against the weight input */
  .stop-delete-wrapper .delete-row-btn {
    margin-left: 12px !important;
  }
}

/* Create Load Request modal footer: mobile-specific 1x2 layout */
@media (max-width: 480px) {
  #createLoadModalOverlay .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 16px;
  }

  #createLoadModalOverlay .modal-footer .btn-cancel,
  #createLoadModalOverlay .modal-footer .btn-create {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
  }

  /* Make sure cancel is visually subdued and Create is emphasized on mobile */
  #createLoadModalOverlay .modal-footer .btn-cancel {
    background: transparent;
    color: var(--cancel-text, rgba(255, 16, 0, 0.6));
    border: 1px solid rgba(60, 64, 68, 0.08);
  }

  #createLoadModalOverlay .modal-footer .btn-create {
    background: var(--primary, #519e8a);
    color: #ffffff;
    border: none;
    box-shadow: none;
  }
}

/* Create Load Request modal footer: ensure 1x2 layout on tablet and desktop as well */
@media (min-width: 481px) and (max-width: 1024px) {
  #createLoadModalOverlay .modal-footer.create-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }

  #createLoadModalOverlay .modal-footer.create-footer .btn-cancel,
  #createLoadModalOverlay .modal-footer.create-footer .btn-create {
    width: 48% !important;
    min-height: 44px !important;
  }
}

/* Desktop: default row layout already applies; ensure create-footer maintains widths */
@media (min-width: 1025px) {
  #createLoadModalOverlay .modal-footer.create-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: flex-end !important;
  }

  /* Desktop: show Cancel first, then Create */
  #createLoadModalOverlay .modal-footer.create-footer .btn-cancel {
    order: 1;
    /* Cancel first */
    margin-right: 8px !important;
    /* spacing before Create */
  }

  #createLoadModalOverlay .modal-footer.create-footer .btn-create {
    order: 2;
    /* Create second */
    margin-left: 0 !important;
  }
}

/* Mobile: break post-meta into multiple lines */
@media screen and (max-width: 767px) {
  .post-meta .meta-left,
  .post-meta .meta-right {
    display: block !important;
    width: 100% !important;
  }

  .post-meta .meta-right {
    margin-top: 6px !important;
  }

  .post-meta .meta-sep {
    display: none !important;
  }
}

/* Ensure filter icon in the tabs/search area stays visible and not absolutely positioned */
.tabs-and-search-container .filter-icon.mobile-kebab-menu {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  display: flex !important;
  z-index: 30 !important;
}

/* Make filter icon visible on tablet widths as well */
@media screen and (min-width: 576px) and (max-width: 1024px) {
  .tabs-and-search-container .filter-icon {
    display: flex !important;
  }
}

/* Small screens: ensure filter icon has proper sizing */
@media screen and (max-width: 480px) {
  .tabs-and-search-container .filter-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
  }

  .tabs-and-search-container .filter-icon img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Tablet / Desktop: keep tabs and search on one row (no wrapping) */
@media screen and (min-width: 768px) {
  .tabs-and-search-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .tabs-and-search-container .search-and-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Make search bar flexible: grows and shrinks with available space */
  .tabs-and-search-container .search-bar {
    display: flex !important;
    flex: 1 1 320px !important;
    /* grow, shrink, base */
    min-width: 180px !important;
    max-width: 640px !important;
  }

  /* Tabs should take only needed space */
  .tabs-and-search-container .tabs {
    flex: 0 1 auto !important;
    margin-right: 12px !important;
  }

  /* Keep search/actions grouped */
  .tabs-and-search-container .search-and-actions {
    flex: 0 1 auto !important;
  }
}

/* Confirmation text: allow wrapping instead of truncation */
.confirmation-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Ensure small-modal confirmation text also wraps and has readable sizing */
.small-modal .confirmation-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  hyphens: auto !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Add left and right dividers to the details panel across all viewports */
.details-section {
  border-left: 1px solid var(--border, #e4e7ec) !important;
  border-right: 1px solid var(--border, #e4e7ec) !important;
  box-sizing: border-box !important;
}

/* Post header: white background with top rounded corners */
.post-header {
  background: #ffffff !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
  position: relative !important;
}

/* Remove white background on desktop view (override) */
@media screen and (min-width: 1024px) {
  .post-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* Make inner .post-meta transparent to avoid double borders */
.post-meta {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Left-align modal titles (override center alignment) */
.modal-header h2 {
  text-align: left !important;
  flex: 0 0 auto !important;
  margin-right: 16px !important;
}

/* Fulfill modal: ensure details use black text for labels and values */
.fulfill-details-grid,
.fulfill-details-grid .fulfill-detail-item,
.fulfill-details-grid .fulfill-label,
.fulfill-details-grid .fulfill-value {
  color: #000000 !important;
}

/* Force black text for bid details (bid card list / modal) */
.bid-card-details,
.bid-card-details * {
  color: #000000 !important;
}

.bid-card-details .bid-label {
  color: rgba(0, 0, 0, 0.9) !important;
  font-weight: 500 !important;
}

/* Hide the decorative ::before on the extend-bid small modal (desktop + mobile) */
.modal-content.small-modal.extended-modal.extend-bid-modal::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bid-card-details .bid-value {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Extend-bid modal: make controls and footer full width */
.modal-content.extend-bid-modal {
  text-align: left !important;
}

.extend-bid-modal .modal-body {
  width: 100% !important;
}

.extend-bid-modal .time-selects {
  display: flex !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: center !important;
}

.extend-bid-modal .time-selects .custom-dropdown {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.extend-bid-modal .time-selects .dropdown-header {
  width: 100% !important;
  box-sizing: border-box !important;
}

.extend-bid-modal .modal-footer.extend-bid-footer {
  display: flex !important;
  gap: 16px !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 0 0 0 !important;
  box-sizing: border-box !important;
}

.extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
.extend-bid-modal .modal-footer.extend-bid-footer .create-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.extend-bid-modal .modal-footer.extend-bid-footer .create-button {
  max-width: none !important;
  padding: 12px 16px !important;
  border-radius: 28px !important;
}

/* On very small screens keep spacing comfortable */
@media screen and (max-width: 400px) {
  .extend-bid-modal .time-selects {
    flex-direction: column !important;
  }

  .extend-bid-modal .modal-footer.extend-bid-footer {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  .extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
  .extend-bid-modal .modal-footer.extend-bid-footer .create-button {
    width: 100% !important;
  }
}

/* 2x2 layout: label (full width) then two selects side-by-side, then two footer buttons side-by-side */
.extend-bid-modal .form-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 12px 16px !important;
  align-items: start !important;
}

.extend-bid-modal .form-group > label {
  grid-column: 1 / -1 !important;
  margin-bottom: 4px !important;
}

.extend-bid-modal .form-group .time-selects {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.extend-bid-modal .form-group .time-selects .custom-dropdown {
  width: 100% !important;
}

/* Footer as 2 columns */
.extend-bid-modal .modal-footer.extend-bid-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: center !important;
}

.extend-bid-modal .modal-footer.extend-bid-footer .cancel-button,
.extend-bid-modal .modal-footer.extend-bid-footer .create-button {
  width: 100% !important;
  justify-self: stretch !important;
}

/* Keep stacking on very narrow screens */
@media screen and (max-width: 360px) {
  .extend-bid-modal .form-group {
    grid-template-columns: 1fr !important;
  }

  .extend-bid-modal .form-group .time-selects {
    grid-template-columns: 1fr !important;
  }

  .extend-bid-modal .modal-footer.extend-bid-footer {
    grid-template-columns: 1fr !important;
  }
}

/* Dropdown rendering fixes for extend-bid modal */
.extend-bid-modal {
  overflow: visible !important;
  /* allow dropdowns to escape modal box */
}

.extend-bid-modal .modal-body {
  overflow: visible !important;
}

.extend-bid-modal .custom-dropdown {
  position: relative !important;
  z-index: 1 !important;
}

.extend-bid-modal .custom-dropdown .dropdown-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid var(--border, #e4e7ec) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08) !important;
  display: none !important;
  z-index: 2200 !important;
  /* place above modal chrome */
}

.extend-bid-modal .custom-dropdown .dropdown-list.open {
  display: block !important;
}

.extend-bid-modal .custom-dropdown .dropdown-list.open-up {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  display: block !important;
}

.extend-bid-modal .custom-dropdown .dropdown-item {
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* Ensure dropdown-arrow sits above list control (if rotated) */
.extend-bid-modal .dropdown-header {
  position: relative !important;
  z-index: 2300 !important;
}

/* Mobile: equalize height of search, excel and filter controls */
@media screen and (max-width: 767px) {
  .tabs-and-search-container .search-and-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .tabs-and-search-container .search-bar,
  .tabs-and-search-container .excel-icon,
  .tabs-and-search-container .filter-icon {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 0 8px !important;
  }

  .tabs-and-search-container .search-bar input {
    height: 32px !important;
    line-height: 32px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .tabs-and-search-container .excel-icon,
  .tabs-and-search-container .filter-icon {
    justify-content: center !important;
  }

  .tabs-and-search-container .excel-icon img,
  .tabs-and-search-container .filter-icon img {
    height: 28px !important;
    width: auto !important;
    display: block !important;
  }

  /* Ensure tabs remain above and search/actions align nicely */
  .tabs-and-search-container .tabs {
    width: 100% !important;
  }
}

/* Make action button icons match text color on hover/focus */
.card-actions-overflow .action-button img {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.card-actions-overflow .action-button:hover,
.card-actions-overflow .action-button:focus {
  color: #519e8a !important;
}

.card-actions-overflow .action-button:hover img,
.card-actions-overflow .action-button:focus img {
  filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg)
    brightness(91%) contrast(88%) !important;
}

/* Also handle inline SVGs and font icons */
.card-actions-overflow .action-button:hover svg path,
.card-actions-overflow .action-button:focus svg path,
.card-actions-overflow .action-button:hover i,
.card-actions-overflow .action-button:focus i {
  color: #519e8a !important;
  fill: #519e8a !important;
  stroke: #519e8a !important;
}

/* Desktop: make the confirmed actions bar auto-size to its grid area
   and follow the widths of the confirmed details / info columns */
@media screen and (min-width: 1024px) {
  .card-actions-overflow-confirmed {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    justify-self: end !important;
    /* keep the actions pinned to the right column */
    align-self: start !important;
  }

  /* Slightly increase middle/right column min widths so action bar adapts
       when those columns grow/shrink */
  .load-post-card.confirmed-card .card-body {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) 455px !important;
  }

  /* For non-confirmed cards, use a fixed third-column width similar to laptop
       so bidding sections and action cards align to the right consistently. */
  .load-post-card .card-body {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) 455px !important;
  }
}

/* Confirmed actions: show divider between menu items and apply hover to icon + text */

/* Inline confirmed actions - compact layout with vertical dividers */
.card-actions-overflow-confirmed {
  gap: 0 !important;
}

.card-actions-overflow-confirmed .confirmed-action-btn {
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  background: transparent;
  border: none;
}

.card-actions-overflow-confirmed .confirmed-action-btn .icon img {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* Use a left border on buttons that follow another button to act as a vertical divider */
.card-actions-overflow-confirmed .confirmed-action-btn + .confirmed-action-btn {
  border-left: 1px solid var(--border-light, #f0f2f5) !important;
  padding-left: 16px !important;
  /* space after divider */
}

.card-actions-overflow-confirmed .confirmed-action-btn:hover,
.card-actions-overflow-confirmed .confirmed-action-btn:focus {
  color: #519e8a !important;
}

.card-actions-overflow-confirmed .confirmed-action-btn:hover .icon img,
.card-actions-overflow-confirmed .confirmed-action-btn:focus .icon img {
  filter: invert(56%) sepia(68%) saturate(399%) hue-rotate(106deg)
    brightness(91%) contrast(88%) !important;
}

/* Reduce desktop header height slightly and adjust offsets */
@media screen and (min-width: 1024px) {
  header {
    height: 72px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

/*  main {
    margin-top: 72px !important;
  }*/

  /* Align dropdown/overlay top positions with new header height */
  .notification-modal,
  .profile-dropdown,
  .more-dropdown,
  .mobile-nav-drawer {
    top: 72px !important;
  }
}

/* Action cards layout: two separate rows (top & bottom) with 3 columns on tablet/desktop */
.action-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  width: 100%;
}

.action-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  justify-items: center;
  box-sizing: border-box;
  justify-content: center;
}

.action-cards-row .action-card {
  width: 100%;
  max-width: 320px;
}

/* Tablet and desktop: 3 columns per row */
@media (min-width: 768px) {
  .action-cards-row {
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px;
    /* match surrounding container */
    gap: 30px;
  }

  .action-cards-row .action-card {
    max-width: none;
    width: auto;
  }
}

@media (min-width: 1025px) {
  .action-cards-row {
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
    gap: 20px;
  }
}

/* Mobile: use two vertical columns — left column = top row items, right column = bottom row items */
@media (max-width: 767px) {
  .action-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    align-items: start;
  }

  .action-cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
  }

  .action-cards-row .action-card {
    width: 100%;
    max-width: none;
  }

  /* Make sure cards remain visually consistent (pills) */
  .action-card {
    justify-content: flex-start;
  }
}

/* Fix desktop bottom cutoff: allow vertical scrolling and add bottom padding */
@media screen and (min-width: 1025px) {
  html,
  body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Ensure main content can grow and won't be clipped */
  main,
  .main-content,
  .empty-state-main {
    min-height: calc(100vh - var(--header-height-desktop, 80px)) !important;
    height: auto !important;
    overflow: visible !important;
    /*padding-bottom: 96px !important;*/
    /* room for any fixed footer or controls */
  }

  /* Ensure the what-else section has adequate bottom spacing */
  .what-else-can-do {
    margin-bottom: 48px !important;
  }
}

/* ============================================================
   CONFIRMED POSTS - COMPACT VIEW OVERRIDES
   Ensuring compact styles override any conflicting responsive rules
   ============================================================ */

/* Override height: 292px with auto for confirmed sections */
.confirmed-details-section,
.confirmed-info-section {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Override fixed height: 284px for location section in confirmed posts */
.card-body-confirmed .location-section {
  height: auto !important;
  min-height: auto !important;
}

/* Ensure compact padding for all confirmed post sections */
.card-body-confirmed .confirmed-details-section,
.card-body-confirmed .confirmed-info-section {
  padding: 10px 12px !important;
  gap: 8px !important;
}

/* Ensure tablet view uses grid layout */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .card-body-confirmed {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .card-body-confirmed .location-section,
  .card-body-confirmed .confirmed-details-section,
  .card-body-confirmed .confirmed-info-section {
    height: auto !important;
    padding: 10px 12px !important;
  }
}

/* Ensure mobile view stacks vertically */
@media screen and (max-width: 767px) {
  .card-body-confirmed {
    display: flex !important;
    flex-direction: column !important;
  }

  .card-body-confirmed .location-section {
    height: auto !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #e4e7ec !important;
  }

  .card-body-confirmed .confirmed-details-section,
  .card-body-confirmed .confirmed-info-section {
    height: auto !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #e4e7ec !important;
  }
}

/* ============================================================
   CONFIRMED POST MODALS - BOTTOM SHEET RESPONSIVE STYLES
   Applies to: Create Freight Memo, Upload Invoice, Vehicle Details,
              View Documents, View POD
   ============================================================ */

/* Tablet View (768px - 1024px) */
@media screen and (max-width: 1024px) {
  /* Common bottom sheet overlay styles */
  .modal-overlay-freight-memo,
  .modal-overlay-upload-invoice,
  .modal-overlay-vehicle-details,
  .modal-overlay-view-documents,
  .modal-overlay-view-pod {
    align-items: flex-end !important;
  }

  /* Common bottom sheet content styles */
  .freight-memo-modal-content,
  .upload-invoice-modal-content,
  .vehicle-details-modal-content,
  .view-documents-modal-content,
  .view-pod-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px !important;
    animation: slideUpBottomSheet 0.3s ease-out !important;
  }

  /* Bottom sheet slide-up animation */
  @keyframes slideUpBottomSheet {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Modal header styles */
  .freight-memo-modal-header,
  .upload-invoice-modal-header,
  .vehicle-details-modal-header,
  .view-documents-modal-header,
  .view-pod-modal-header {
    padding-bottom: 16px !important;
  }

  .freight-memo-modal-header h2,
  .upload-invoice-modal-header h2,
  .vehicle-details-modal-header h2,
  .view-documents-modal-header h2,
  .view-pod-modal-header h2 {
    font-size: 18px !important;
  }

  /* Modal body - scrollable */
  .freight-memo-modal-body,
  .upload-invoice-modal-body,
  .vehicle-details-modal-body,
  .view-documents-modal-body,
  .view-pod-modal-body {
    overflow-y: auto !important;
    max-height: calc(90vh - 180px) !important;
    padding: 16px 0 !important;
  }

  /* Upload sections - responsive grid */
  .upload-sections {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Documents sections - responsive grid */
  .documents-sections {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Footer - 2 columns on tablet */
  .freight-memo-modal-footer,
  .upload-invoice-modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e4e7ec !important;
    margin-top: 16px !important;
  }

  .freight-memo-modal-footer .cancel-btn,
  .freight-memo-modal-footer .create-btn,
  .upload-invoice-modal-footer .cancel-upload-btn,
  .upload-invoice-modal-footer .save-invoice-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
}

/* Mobile View (max-width: 767px) */
@media screen and (max-width: 767px) {
  /* Bottom sheet overlay */
  .modal-overlay-freight-memo,
  .modal-overlay-upload-invoice,
  .modal-overlay-vehicle-details,
  .modal-overlay-view-documents,
  .modal-overlay-view-pod {
    align-items: flex-end !important;
  }

  /* Bottom sheet content */
  .freight-memo-modal-content,
  .upload-invoice-modal-content,
  .vehicle-details-modal-content,
  .view-documents-modal-content,
  .view-pod-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 16px !important;
    animation: slideUpBottomSheet 0.3s ease-out !important;
  }

  /* Drag handle indicator for bottom sheet */
  .freight-memo-modal-content::before,
  .upload-invoice-modal-content::before,
  .vehicle-details-modal-content::before,
  .view-documents-modal-content::before,
  .view-pod-modal-content::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 0 auto 12px !important;
  }

  /* Modal headers */
  .freight-memo-modal-header h2,
  .upload-invoice-modal-header h2,
  .vehicle-details-modal-header h2,
  .view-documents-modal-header h2,
  .view-pod-modal-header h2 {
    font-size: 16px !important;
  }

  /* Modal body - scrollable with reduced max height */
  .freight-memo-modal-body,
  .upload-invoice-modal-body,
  .vehicle-details-modal-body,
  .view-documents-modal-body,
  .view-pod-modal-body {
    overflow-y: auto !important;
    max-height: calc(85vh - 160px) !important;
    padding: 12px 0 !important;
  }

  /* Upload sections - single column on mobile */
  .upload-sections {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .upload-area {
    height: 200px !important;
  }

  .upload-section h3 {
    font-size: 14px !important;
  }

  /* Documents sections - single column on mobile */
  .documents-sections {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Vehicle details grid - single column */
  .vehicle-details-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .vehicle-detail-item {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .vehicle-detail-label {
    font-size: 13px !important;
    min-width: unset !important;
  }

  .vehicle-detail-value {
    font-size: 13px !important;
    text-align: right !important;
  }

  /* Freight Memo form fields - full width */
  .memo-form-section .form-group {
    margin-bottom: 14px !important;
  }

  .memo-form-section input,
  .memo-form-section textarea {
    font-size: 14px !important;
  }

  /* Footer - 2 columns on mobile (one row) */
  .freight-memo-modal-footer,
  .upload-invoice-modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e4e7ec !important;
    margin-top: 12px !important;
  }

  .freight-memo-modal-footer .cancel-btn,
  .freight-memo-modal-footer .create-btn,
  .upload-invoice-modal-footer .cancel-upload-btn,
  .upload-invoice-modal-footer .save-invoice-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* Fix button order - Cancel first, then action button */
  .freight-memo-modal-footer .cancel-btn {
    order: 1 !important;
  }

  .freight-memo-modal-footer .create-btn {
    order: 2 !important;
  }

  .upload-invoice-modal-footer .cancel-upload-btn {
    order: 1 !important;
  }

  .upload-invoice-modal-footer .save-invoice-btn {
    order: 2 !important;
  }
}