/* One font, the whole site - this stylesheet is the only one of this
   plugin's that loads unconditionally on every page (mqt-catalog.css only
   loads on the shop/category/checkout pages), which is why areas like the
   "My Account" dashboard tab were still mixing in the theme's own fonts. */
body,
body * {
	font-family: 'Heebo', sans-serif;
}

/* Site-wide readability bump (requested across the board, not any one
   screen): the theme's own type scale is mostly rem/em-based (WooCommerce's
   own table text is 0.85em, for one), so raising the root size here scales
   nearly everything proportionally - headings, tables, nav links - instead
   of having to override each one's own font-size individually. 112.5% of
   the browser default 16px is 18px. */
html {
	font-size: 112.5%;
}

/* Belt-and-suspenders against any element ever forcing horizontal scroll -
   flex/table content that refuses to shrink below its own content width is
   a classic way for one element on a page to push everything sideways on a
   narrow screen; this guarantees the page itself never does, regardless. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.mqt-budget-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	max-width: 100%;
	box-sizing: border-box;
	background: #eef7ee;
	border: 1px solid #cde5cd;
	color: #234d23;
	padding: 12px 20px;
	margin: 0 0 20px;
	border-radius: 6px;
	font-size: 14px;
}

/* Flex items default to a minimum width equal to their own (unwrapped)
   content size, which flex-wrap does NOT override - a long greeting like
   "שלום דרור כהן, תחנת Tambur" could otherwise refuse to shrink and force
   this row (and the page) wider than a phone screen even though every item
   in it, including the account icon, is otherwise a fixed/small size. */
.mqt-budget-item {
	min-width: 0;
}

.mqt-budget-greeting {
	overflow-wrap: break-word;
}

.mqt-budget-banner.mqt-budget-over {
	background: #fdecea;
	border-color: #f5c6c3;
	color: #7a2a24;
}

.mqt-budget-item strong {
	margin-inline-end: 4px;
}

/* Pinned to the far end of the banner (left, in RTL) regardless of how many
   budget-item spans precede it, via the auto margin eating the remaining
   flex space rather than a fixed position in the row. */
.mqt-budget-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	margin-inline-start: auto;
	border-radius: 999px;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
}

.mqt-budget-account-link:hover {
	background: currentColor;
}

.mqt-budget-account-link:hover svg {
	color: #fff;
}

.mqt-manager-banner {
	align-items: center;
	justify-content: space-between;
}

.mqt-manager-banner-link {
	background: #234d23;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	white-space: nowrap;
}

.mqt-manager-banner-link:hover {
	background: #163e23;
	color: #fff;
}

.mqt-budget-popup {
	max-width: 600px;
	margin: 20px auto;
}

.mqt-dashboard-section {
	margin-bottom: 40px;
}

/* display:block + overflow-x:auto gives each wide table (station list, order
   items, ...) its own horizontal scrollbar on narrow screens, instead of
   relying on the page itself scrolling - which the html/body overflow-x:
   hidden rule above now blocks outright. Without this, anything past the
   visible width in a table (the station row's own "ערוך" budget-edit button
   included) would be genuinely unreachable on mobile, not just off-screen. */
.mqt-table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	background: #fff;
}

.mqt-table th,
.mqt-table td {
	border: 1px solid #e2e2e2;
	padding: 8px 12px;
	text-align: right;
}

.mqt-table thead th {
	background: #f5f5f5;
}

.mqt-table td.mqt-negative {
	color: #c62828;
	font-weight: bold;
}

.mqt-edit-budget-form input.mqt-budget-input {
	width: 90px;
}

.mqt-reports-wrap .wc-product-search {
	width: 100%;
	max-width: 350px;
}

/* Warehouse "handle order" cards: shortage marking + delivery date. */
.mqt-order-card {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.mqt-order-card-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.mqt-order-status-badge {
	display: inline-block;
	margin-inline-start: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #eef2f7;
	font-size: 12px;
}

.mqt-order-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #555;
	align-items: center;
}

.mqt-delivery-date-block {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mqt-delivery-date-form {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* An author-stylesheet "display" rule beats the UA default for [hidden]
   (that default is a normal-priority UA rule, and any normal-priority
   author rule wins over it regardless of selector specificity or source
   order) - so toggling the attribute alone doesn't actually hide this
   element once the rule above has set its own display value. Same bug
   shape as the catalog search fix - see mqt-catalog.css. */
.mqt-delivery-date-form[hidden] {
	display: none !important;
}

.mqt-delivery-date-form select {
	padding: 4px 8px;
}

.mqt-delivery-date-error {
	color: #c62828;
	font-size: 12px;
	flex-basis: 100%;
}

/* Same shortage-toggle column, dropped into the wp-admin order screen's own
   line-items table (see MQT_Warehouse::render_admin_shortage_cell()) -
   scoped narrowly so it doesn't reflow that table's other columns. */
.woocommerce_order_items .mqt-shortage-col {
	white-space: nowrap;
}

.mqt-shortage-row td {
	text-decoration: line-through;
	color: #999;
	background: #fdf4f4;
}

.mqt-shortage-badge {
	display: inline-block;
	background: #c62828;
	color: #fff;
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 999px;
	margin-inline-start: 6px;
	text-decoration: none;
}

.mqt-missing-summary {
	background: #fdecea;
	border: 1px solid #f5c6c3;
	color: #7a2a24;
	padding: 8px 14px;
	border-radius: 6px;
	margin-top: 10px;
}

/* My Account's own nav (Dashboard/Orders/Downloads/...) restyled to match
   the rounded, colored pill look of the catalog's category nav
   (.mqt-cat-pill in mqt-catalog.css) - that stylesheet doesn't load on
   account pages, so the color is repeated here directly rather than shared
   via a CSS variable that wouldn't be defined on this page. Horizontal
   (wrapping) by default/on mobile; vertical only from the same tablet/
   desktop breakpoint the catalog's own product grid switches at. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

@media (min-width: 783px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		align-items: flex-start;
	}
}

.woocommerce-MyAccount-navigation-link {
	margin: 0;
}

.woocommerce-MyAccount-navigation-link a {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid #1e5631;
	border-radius: 999px;
	color: #1e5631;
	text-decoration: none;
	font-weight: 600;
	background: #fff;
	transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link.is-active a {
	background: #1e5631;
	color: #fff;
}

/* The theme's own Elementor header menu, wherever it's still visible (it's
   hidden on the shop/category pages themselves - see .elementor-element-4c133b1
   in mqt-catalog.css - in favor of render_category_nav()'s own pill markup,
   but this menu is still what shows the category links everywhere else: My
   Account, cart, checkout). --mqt-pill-color/--mqt-pill-text are set inline
   per item by MQT_Catalog::colorize_theme_menu_item(), the same colors as
   the catalog's own pills. Scoped to the horizontal desktop layout only -
   the dropdown/mobile variant keeps the theme's default look. */
.elementor-nav-menu--layout-horizontal .menu-item-object-product_cat > a.elementor-item {
	display: inline-flex !important;
	align-items: center;
	padding: 8px 20px !important;
	margin-inline-end: 8px;
	border: 1px solid var(--mqt-pill-color, #1e5631) !important;
	border-radius: 999px !important;
	color: var(--mqt-pill-text, #1e5631) !important;
	background: #fff !important;
	transition: background 0.15s, color 0.15s;
}

.elementor-nav-menu--layout-horizontal .menu-item-object-product_cat > a.elementor-item:hover,
.elementor-nav-menu--layout-horizontal .menu-item-object-product_cat.current-menu-item > a.elementor-item {
	background: var(--mqt-pill-color, #1e5631) !important;
	color: var(--mqt-pill-text, #fff) !important;
}

.elementor-nav-menu--layout-horizontal .menu-item-object-product_cat > a.elementor-item::after {
	display: none !important;
}

/* Warehouse: partial-supply quantity editing */
.mqt-qty-orig-badge {
	color: #7a2a24;
	font-size: 0.85em;
	margin-inline: 4px;
}

.mqt-qty-form {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	flex-wrap: wrap;
}

.mqt-qty-form[hidden] {
	display: none;
}

.mqt-qty-input {
	width: 64px;
}

.mqt-qty-changes-summary {
	background: #fff8e5;
	border: 1px solid #f0dca0;
	color: #6b5310;
	padding: 8px 14px;
	border-radius: 6px;
	margin-top: 10px;
}

/* Area manager: ordering on behalf of a station, CSV export, edit-before-approve */
.mqt-acting-banner {
	flex-wrap: wrap;
	gap: 8px 16px;
}

.mqt-acting-stop-form {
	margin: 0;
	margin-inline-start: auto;
}

.mqt-acting-stop-form .mqt-manager-banner-link {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
}

.mqt-acting-start-form {
	display: inline-block;
	margin: 0 8px;
}

.mqt-export-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
}

.mqt-export-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}

.mqt-opened-by-badge,
.mqt-opened-by-note {
	color: #7a5a00;
	font-size: 0.9em;
}

.mqt-opened-by-badge {
	background: #fff8e5;
	border: 1px solid #f0dca0;
	border-radius: 999px;
	padding: 2px 10px;
	margin-inline-start: 8px;
}

.mqt-edit-hint {
	background: #eef6ee;
	border: 1px solid #c9e0c9;
	border-radius: 6px;
	padding: 8px 14px;
}

.mqt-detail-actions {
	margin-top: 16px;
}

.mqt-month-filter {
	margin: 0 0 16px;
}

.mqt-month-filter label {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}

.mqt-delivery-days-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #e8f5e9;
	border-radius: 4px;
}