/**
 * DMS Common CSS - Overrides (LOADED LAST, always wins)
 * Location: public/common/css/overrides.css
 *
 * Write ALL new custom styles and one-off fixes HERE.
 * Do NOT edit tokens.css / app.css / vendor files for day-to-day changes.
 * Load order: vendor/* -> focus/app_end-*.css -> tokens.css -> app.css -> overrides.css (this file)
 *
 * Examples:
 *
 *   :root { --bs-primary: #3f6ad8; }
 *   .btn-primary { border-radius: 10px; }
 */

/* ===== Your overrides below this line ===== */


html[data-textdirection="rtl"] .dropdown-menu .dropdown-submenu > .dropdown-menu {
  top: 0 !important;
  bottom: auto !important;
  right: 100% !important;
  left: auto !important;
  transform: none !important;
}


.profile-actions + .card-body {
  clear: both;
}

/* ===== Basic Settings table: usable horizontal scroll on mobile =====
 * The raw config table crushes its inputs on narrow screens. Give the
 * table a minimum width so it scrolls cleanly inside .table-responsive
 * with tappable fields instead of squeezed ones. */
@media (max-width: 767.98px) {
  .basic-settings-table > table {
    min-width: 720px;
  }
  .basic-settings-table .form-control {
    min-width: 150px;
  }
}

/* ===== Profile page (/u/profile) mobile fixes =====
 * 1) The Edit / Change Password buttons are floated, so on narrow screens
 *    the tab nav renders beside/behind them (overlap). Un-float them on
 *    mobile so they sit in normal flow above the tabs. This replaces the
 *    old RTL-only float fix for both directions.
 * 2) Detail rows use a narrow col-3 label column, so labels wrap mid-word
 *    ("Emplo yee"). Stack label above value on mobile. */
@media (max-width: 767.98px) {
  .profile-actions {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .all-contacts .tab-pane > .row > .col-3,
  .all-contacts .tab-pane > .row > .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


@media (min-width: 768px) {
  .header-navbar.navbar-static-top .navbar-container .navbar-collapse {
    display: flex !important;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .header-navbar.navbar-static-top .navbar-container .navbar-collapse > ul.navbar-nav.me-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


@media (max-width: 991.98px) {
  .vertical-overlay-menu .main-menu.menu-fixed {
    overflow: hidden;
  }
  .vertical-overlay-menu .main-menu .main-menu-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
  }
  .vertical-overlay-menu .main-menu .navigation {
    overflow-y: visible !important;
  }
  /* PerfectScrollbar rails are mouse-oriented; hide them on the touch
     menu so they don't overlay content (native scrollbar is used). */
  .vertical-overlay-menu .main-menu .ps__rail-y,
  .vertical-overlay-menu .main-menu .ps__rail-x {
    display: none !important;
  }
}


/* ===== Mobile: keep header dropdowns inside the viewport =====
 * On small screens the navbar rows wrap, leaving the profile and
 * notification toggles close to the screen edge. Popper's inline offsets
 * combined with the theme's stretched-dropdown mobile rule push the open
 * menu past the viewport so its items render clipped. Pin open header
 * menus below their toggle, attached to the viewport-side edge (right in
 * LTR, left in RTL). Desktop is untouched. Native dir + Popper alone do
 * not fix this — the theme's `left/right: 0 !important` mobile rule breaks
 * Popper's measurements, so the explicit pin is required in both modes.
 * NOTE: .mega-dropdown-menu (Admin Settings) is intentionally excluded.
 * It uses `display: flex` permanently and relies on the theme's
 * `scale(1, 0)` transform to stay hidden until tapped — neutralizing the
 * transform would render it open automatically. */
@media (max-width: 991.98px) {
  html[data-textdirection="ltr"] .header-navbar .navbar-container .navbar-nav .dropdown-menu:not(.mega-dropdown-menu) {
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    max-width: calc(100vw - 1rem);
  }
  html[data-textdirection="rtl"] .header-navbar .navbar-container .navbar-nav .dropdown-menu:not(.mega-dropdown-menu) {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    max-width: calc(100vw - 1rem);
  }
}

/* ===== RTL header mirroring: native via dir + bootstrap.rtl =====
 * The document now sets dir="rtl" and loads bootstrap.rtl.min.css, so all
 * header flex rows mirror natively. The manual row-reverse / me-auto rules
 * that used to live here were removed — keeping them would double-mirror
 * the header back to LTR order. */


/* ===== RTL: selected-language tick sits on the left =====
 * The active language in the profile menu gets a fa-check via ::after,
 * absolutely positioned right in app.css. Mirror it to the left in RTL. */
html[data-textdirection="rtl"] .dropdown .dropdown-menu .dropdown-item .selected::after {
  right: auto;
  left: 0;
}

/* ===== RTL: submenu arrows point left (< instead of >) =====
 * The RTL theme stylesheets already mirror these arrows' position (left
 * side) and open-state rotation (-90deg, which turns "<" into a down
 * chevron), but the glyph itself was left as angle-right (">"). Flip it to
 * angle-left so forward navigation points the correct way. Covers the side
 * menus (vertical / mobile overlay) and the desktop flyout submenus, whose
 * panels open leftward in RTL. LTR is untouched. */
html[data-textdirection="rtl"] .main-menu .navigation li.has-sub > a:not(.mm-next):after,
html[data-textdirection="rtl"] .dropdown-menu .dropdown-submenu > a:after,
html[data-textdirection="rtl"] .dropdown-menu .dropdown-submenu > button:after {
  content: "\f104" !important;
}

/* ===== Purchase Order create/edit: perfect step + table layout =====
 * Fixes broken /purchaseorders/create design:
 * - .accordion-header previously carried Bootstrap .row (negative margins)
 *   which pulled the header outside its card. Neutralize it here so both
 *   old (with .row) and new markup render identically.
 * - BS4 helpers (input-group-prepend/append, custom-control) no longer exist
 *   in BS5; ensure supplier search + totals rows align.
 * - Old float/inline-width toolbar crushed the product table on small screens.
 * - .table-responsive was placed ON the <table>; keep it working even there,
 *   while the new markup uses a proper wrapper. */
#po_steps .po-step {
  background: #fff;
  border: 1px solid var(--bs-gray-200, #e9ecef);
  border-radius: 12px;
  overflow: hidden;
}
#po_steps .po-step .accordion-header.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
  width: 100%;
}
#po_steps .po-step .accordion-header {
  min-height: 52px;
  height: auto;
  line-height: 1.4;
  padding: .8rem 3rem .8rem 1rem;
  margin: 0;
  width: 100%;
  cursor: pointer;
}
#po_steps .po-step .collapse > .row,
#po_steps .po-step .accordion-body {
  padding: 1rem 1.25rem 1.25rem;
  margin-left: 0;
  margin-right: 0;
}
#po_steps .supplier-search-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#po_steps .supplier-search-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  white-space: nowrap;
}
#po_steps .search-result-box {
  position: relative;
  width: 100%;
}
#po_steps .po-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
#po_steps .po-toolbar-search {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 380px;
}
#po_steps .po-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
#po_steps .po-table-wrap,
#saman-row > .table-responsive {
  overflow-x: auto;
  border: 1px solid var(--bs-gray-200, #e9ecef);
  border-radius: 10px;
}
/* When .table-responsive was (incorrectly) put on the <table> itself,
   still allow horizontal scroll instead of squashing columns. */
table.table-responsive.tfr,
table.product-tbl.table-responsive {
  display: table;
  width: 100%;
  min-width: 960px;
  overflow-x: auto;
}
#po_steps .product-tbl {
  min-width: 960px;
  margin-bottom: 0;
}
#po_steps .product-tbl thead th {
  white-space: nowrap;
  vertical-align: middle;
}
#po_steps .product-tbl tbody td {
  vertical-align: middle;
}
#po_steps .select2-container {
  width: 100% !important;
}
@media (max-width: 767.98px) {
  #po_steps .po-toolbar-search {
    max-width: 100%;
    flex-basis: 100%;
  }
  #po_steps .po-toolbar-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  #po_steps .po-step .accordion-header {
    font-size: .92rem;
  }
}

/* ===== EVHC report (/evhcs/evhc/*) mobile fix =====
 * The item header (.item-name) had a fixed 50px height + 50px line-height
 * with space-between flex. Long names ("Engine Not Starting / Slow Crank")
 * couldn't wrap, so "Pending" + hourglass got pushed out / wrapped under
 * the text on narrow screens. Let the bar grow, wrap the name, and keep
 * the status pill on one line. Inner slider rows also wrap on mobile. */
.evhc-item .item-name {
  height: auto;
  min-height: 50px;
  line-height: 1.35;
  padding: .65rem .9rem;
  gap: .6rem;
  font-size: 1rem;
}
.evhc-item .item-name > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .15rem;
  overflow-wrap: anywhere;
}
.evhc-item .item-name .badge.item-ind {
  flex-shrink: 0;
  margin-right: .5rem;
}
.evhc-item .item-name > .text-end {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: .95em;
}
.evhc-item .item-name .vhc-status-btn {
  margin-right: .4rem;
}
@media (max-width: 767.98px) {
  .evhc-item .item-name {
    font-size: .92rem;
    padding: .6rem .7rem;
  }
  .evhc-section > h4 {
    font-size: 1.05rem;
  }
  .evhc-section .evhc-item .type3-ranger,
  .evhc-section .evhc-item .percent {
    flex-wrap: wrap;
  }
  .evhc-section .evhc-item .range-section {
    flex: 1 1 100%;
    min-width: 0;
  }
  .tyre-selection {
    flex-wrap: wrap;
  }
  .tyre-selection .tyre-val,
  .tyre-selection .tyre-manual {
    width: 100%;
  }
  .tyre-selection .tyre-manual .btn {
    width: 100%;
  }
  .item-container .actions .col-md-12 {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ===== EVHC slider rows: stop Upload Files overlapping the scale =====
 * .range-section had a fixed 50px height while slider (24px thumb) +
 * tick labels are taller, so the "0 25 50 75 100" labels spilled out of
 * the box and the Upload Files row rendered on top of them. Let the box
 * grow, give tick labels their natural height, and add breathing room. */
.evhc-section .evhc-item .range-section,
.range-section {
  height: auto;
  min-height: 0;
  padding-bottom: .35rem;
}
.sliderticks {
  padding-bottom: .3rem;
}
.sliderticks span {
  height: auto;
  min-height: 10px;
  line-height: 1.25;
  padding-top: 2px;
}
.evhc-item .item-container > .row {
  row-gap: .5rem;
}
.evhc-item .fileinput-button {
  margin-top: .35rem;
}

/* ===== EVHC edit page rows (.evhc-sections scope) =====
 * Target look: light-blue bar, name left, drag handle + red trash right.
 * The header now has real .item-title / .item-actions children (see
 * item-type0/1/2 partials), so hide the old absolute ::before grip and
 * lay the actions out as proper flex items that never cover the text. */
.evhc-sections .evhc-item .item-name {
  height: auto;
  min-height: 54px;
  line-height: 1.35;
  padding: .7rem .9rem;
  gap: .75rem;
  font-size: 1rem;
}
.evhc-sections .evhc-item .item-name::before {
  display: none;
}
.evhc-sections .evhc-item .item-name .item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.evhc-sections .evhc-item .item-name .item-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.evhc-sections .evhc-item .item-name .item-actions .drag-handle {
  color: #374151;
  cursor: move;
  font-size: 1.05em;
}
.evhc-sections .evhc-item .item-name .item-actions .fa-trash {
  position: static;
  margin: 0;
  padding: 0;
  color: #e53935;
  cursor: pointer;
  font-size: 1.05em;
}
@media (max-width: 767.98px) {
  .evhc-sections .evhc-item .item-name {
    font-size: .92rem;
    padding: .6rem .7rem;
    gap: .6rem;
  }
  .evhc-sections .evhc-item .item-name .item-actions {
    gap: .8rem;
  }
  .evhc-section > h4 {
    padding-right: 7rem;
    overflow-wrap: anywhere;
  }
}
.frmSearch {
  position: relative;
}
/* ===== Search-as-you-type results (supplier/customer) — simple list =====
 * Keeps the original plain list look, just with a distinct option
 * background + pointer cursor so users can tell rows are clickable. */
#suppliers-box-result,
#customer-box-result,
.search-result-box {
  position: relative;
}
.search-suggest-simple {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  background: var(--bs-gray-100, #f1f4f9);
  border: 1px solid var(--bs-gray-200, #e9ecef);
  border-radius: 8px;
  overflow: hidden;
}
.search-suggest-simple li {
  cursor: pointer;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--bs-gray-200, #e9ecef);
}
.search-suggest-simple li:last-child {
  border-bottom: none;
}
.search-suggest-simple li:hover {
  background: rgba(63, 106, 216, .12);
}
.search-suggest-simple li p {
  margin: 0;
}

/* ===== Scrollable top-nav dropdowns (long menus) =====
 * Parent dropdowns and flyout submenus keep their exact previous look
 * and position — only a viewport cap + scroll is added. The Accounting
 * parent is intentionally short (grouped flyouts), so it never scrolls
 * on normal screens and never clips its flyouts; the tall Reports
 * flyout scrolls internally instead of running off-screen. */
.header-navbar .navbar-nav .dropdown-menu:not(:has(.dropdown-submenu)),
.navbar .dropdown-menu:not(:has(.dropdown-submenu)) {
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dropdown-submenu > .dropdown-menu {
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.header-navbar .navbar-nav .dropdown-menu::-webkit-scrollbar,
.dropdown-submenu > .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.header-navbar .navbar-nav .dropdown-menu::-webkit-scrollbar-thumb,
.dropdown-submenu > .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .25);
  border-radius: 3px;
}