/* THE ONE PLACE THE DIALOG WIDTH IS CAPPED — loaded by every page, after jquery-confirm.min.css.

   jquery-confirm's `boxWidth` becomes an INLINE width on .jconfirm-box (52rem on the biggest
   dialogs here, 40rem on several more), so on a screen narrower than that the box runs off the
   side and takes its SAVE/CANCEL buttons with it — on a reception tablet in portrait there is
   nothing left to press. A stylesheet max-width beats an inline width, so the box caps to the
   viewport on a small screen and stays at its authored boxWidth on a large one.

   100vw includes the vertical scrollbar in some browsers, hence the 2rem margin.

   Content that genuinely cannot shrink (the order and line tables set white-space: nowrap on
   drug names) scrolls sideways inside .jconfirm-content, which jquery-confirm already gives
   overflow: auto — wrapping a drug name mid-word is worse than a scroll.

   This lived as three separate copies (css/stock.css, css/report.css, css/med_template.css)
   before it was hoisted here. Do not paste a fourth into a page stylesheet: link this instead. */
.jconfirm-box{
	max-width: calc(100vw - 2rem);
}

/* THE DRAG HANDLE for the reorderable dialog tables (setup_row_reorder() in js/lib.js) — the med
   template's MEDICATIONS list and the STOCK dialog's KIT. Here rather than in either page
   stylesheet for the same reason the cap above is: two pages plus the OPD card (which loads
   js/stock_edit.js) use it, and a copy per page is a copy that drifts.

   `touch-action: none` is load-bearing, not decoration: without it the browser claims the gesture
   as a scroll and takes the drag away mid-way as a touchcancel. `user-select: none` keeps a drag
   that starts on the grip from selecting the row text it crosses. */
td.reorder{
	width: 1.6rem;
	text-align: center;
	color: #aaa;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

tr.reordering td.reorder,
table.reordering td.reorder{
	cursor: grabbing;
}

/* The row being dragged. It is moved by a `transform` on the <tr> (row_reorder_move()), which paints
   it over its neighbours without moving it in the flow — so it needs an OPAQUE background of its
   own, or the rows it passes over show through it.

   The lift is on the cells, not the row: box-shadow on a <tr> is ignored under border-collapse, and
   these tables inherit whatever collapse the page sets. The offset is vertical and the blur small,
   so the per-cell shadows read as one edge rather than a seam at every column boundary. */
tr.reordering td{
	background: #f2f6ff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

table.reordering{
	user-select: none;
	-webkit-user-select: none;
}

/* A TOUCH TARGET IS WIDENED WITH A VISIBLE GRIP, never an invisible hit area — and `any-pointer`,
   so a touchscreen laptop driven by its mouse gets it too. Widening the cell is safe here in a way
   it was not for the OPD card's divider: this column sits inside a dialog table with no scrollbar
   of its own for it to swallow. */
@media (any-pointer: coarse){
	td.reorder{
		width: 2.6rem;
		font-size: 1.2rem;
	}
}

/* ---- a box that scrolls sideways with no scrollbar ----
   Set by setup_hscroll() (js/lib.js), used by the EXPENSE page's filter bar and the main page's
   header bar and tab strip — hence here, in the sheet every page links, rather than in one page's
   stylesheet.
   The grab cursor appears ONLY while the box really overflows — a grab cursor over something with
   nowhere to go promises a drag that does nothing — and the user-select is suppressed only while a
   drag is actually under way, since permanently it would stop anybody selecting the text being
   dragged over. */
.hscroll_drag{
	cursor: grab;
}

.hscroll_dragging{
	cursor: grabbing;
	user-select: none;
}

/* EVERY jQuery UI AUTOCOMPLETE MENU, SITE-WIDE — hence here rather than in a page stylesheet.
   jQuery UI's own .ui-state-active rule adds a 1px border to a row on hover, with a compensating
   -1px margin so the highlight is meant to cost no layout space. The two only cancel at whole
   pixels; at some zoom levels the border rounds up a fraction more than the margin rounds down,
   leaving the menu 1px taller than its own max-height ONLY while a row is hovered — enough for
   overflow-y: auto to grow a scrollbar out of nowhere, reproducible with a single result that has
   nothing to scroll to. .ui-menu-item-wrapper is the element jQuery UI itself stamps onto every
   item's content (refresh() in jquery-ui.min.js adds the class whether _renderItem is the default
   or a custom one), so this reaches every menu without a per-page copy. Reserving the border
   permanently and zeroing the hover margin removes the size change hovering was ever going to
   cause, at either pixel — colours stay jQuery UI's own, since this file has no opinion on any
   one page's palette. Pages that DO want their own hover colour (the OPD card's ORDER SEARCH and
   QTY menus) override both at higher specificity — see .order_item/.qty_item in
   opdcard/css/right_wrapper.css — and this rule is a no-op there. The print overlays are a
   separate document and cannot reach this file; the นัดเพื่อ field carries its own copy in
   opdcard/js/appoint.js's embedded <style>. */
.ui-autocomplete .ui-menu-item-wrapper{
	border: 1px solid transparent;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active{
	margin: 0;
	border-color: #003eff;
	background: #007fff;
	color: #fff;
}