/* =========================================================================
   Imagin Quote Portal — front-end styles
   Scoped entirely under .iqm-portal so it never leaks into the rest of the
   site's theme, and overrides WP-admin's default .button styling with a
   look purpose-built for a client-facing staff tool.
   ========================================================================= */

.iqm-portal {
	--iqm-primary: #2271b1;
	--iqm-primary-dark: #17578a;
	--iqm-border: #e2e4e7;
	--iqm-text: #1d2327;
	--iqm-text-muted: #667085;
	--iqm-bg-subtle: #f7f8fa;
	--iqm-radius: 8px;
	--iqm-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);

	max-width: 1100px;
	margin: 32px auto;
	padding: 0 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--iqm-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.iqm-portal *, .iqm-portal *::before, .iqm-portal *::after {
	box-sizing: border-box;
}
.iqm-portal.iqm-locked {
	max-width: 420px;
	text-align: center;
	padding: 44px 32px;
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: var(--iqm-radius);
	box-shadow: var(--iqm-shadow);
}
.iqm-portal.iqm-locked h2 {
	margin-top: 0;
}

/* ---- Top bar ---------------------------------------------------------- */
.iqm-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 0.9em;
	color: var(--iqm-text-muted);
}
.iqm-topbar-logout {
	color: var(--iqm-primary);
	text-decoration: none;
	font-weight: 500;
}
.iqm-topbar-logout:hover {
	text-decoration: underline;
}

/* ---- Cards -------------------------------------------------------------*/
.iqm-card {
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: var(--iqm-radius);
	padding: 22px 26px;
	margin-bottom: 22px;
	box-shadow: var(--iqm-shadow);
}

/* ---- Order search + filter row + table --------------------------------*/
.iqm-order-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#iqm-order-search {
	width: 320px;
	max-width: 100%;
	padding: 9px 12px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.95em;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#iqm-order-search:focus {
	outline: none;
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
}
#iqm-status-filter {
	padding: 9px 30px 9px 12px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.9em;
	background: #fff;
	color: var(--iqm-text);
	max-width: 220px;
}
#iqm-status-filter:focus {
	outline: none;
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
}
.iqm-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}
.iqm-order-table th,
.iqm-order-table td {
	text-align: left;
	padding: 11px 12px;
	border-bottom: 1px solid #eee;
	font-size: 0.92em;
	vertical-align: middle;
}
.iqm-order-table th {
	color: var(--iqm-text-muted);
	font-weight: 600;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 2px solid #eee;
}
.iqm-order-table tbody tr {
	transition: background-color 0.1s ease;
}
.iqm-order-table tbody tr:hover {
	background: var(--iqm-bg-subtle);
}
.iqm-order-table tbody tr:last-child td {
	border-bottom: none;
}
.iqm-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.iqm-empty-state,
.iqm-loading-row {
	text-align: center !important;
	padding: 36px 12px !important;
	color: var(--iqm-text-muted);
	font-size: 0.95em;
}
.iqm-empty-state strong {
	display: block;
	color: var(--iqm-text);
	margin-bottom: 4px;
	font-size: 1.02em;
}

/* ---- Status badges -------------------------------------------------- */
.iqm-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.78em;
	font-weight: 600;
	white-space: nowrap;
}
.iqm-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.iqm-badge-sent { background: #eaf2fb; color: #2271b1; }
.iqm-badge-approved { background: #e7f6ea; color: #2e8540; }
.iqm-badge-disapproved { background: #fbeaea; color: #b32d2e; }
.iqm-badge-draft { background: #fdf2e3; color: #a5670a; }

/* ---- Order/device status pills (distinct from the quote-lifecycle
   badges above — these mirror Monday's own Status-column text as-is,
   whatever color scheme the client uses there, so a plain neutral
   pill is deliberate rather than trying to guess/match Monday's
   per-label colors) -------------------------------------------------- */
.iqm-status-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
	background: var(--iqm-bg-subtle);
	color: var(--iqm-text);
	border: 1px solid var(--iqm-border);
}
.iqm-status-pill-empty {
	background: transparent;
	color: var(--iqm-text-muted);
	font-weight: 500;
	font-style: italic;
	border-style: dashed;
}

/* ---- Devices column: count + expand toggle, and the chip row it opens */
.iqm-devices-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--iqm-border);
	background: #fff;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--iqm-text);
	cursor: pointer;
	transition: background-color 0.1s ease, border-color 0.1s ease;
}
.iqm-devices-toggle:hover {
	background: var(--iqm-bg-subtle);
	border-color: var(--iqm-primary);
}
.iqm-devices-count-zero {
	color: var(--iqm-text-muted);
	font-size: 0.9em;
}
.iqm-devices-chevron {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--iqm-text-muted);
	transition: transform 0.15s ease;
}
.iqm-devices-toggle.is-open .iqm-devices-chevron {
	transform: rotate(180deg);
}
.iqm-devices-row td {
	background: var(--iqm-bg-subtle);
	padding: 10px 12px 14px !important;
}
.iqm-device-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.iqm-device-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 0.85em;
}
.iqm-device-chip-name {
	font-weight: 600;
	color: var(--iqm-text);
	white-space: nowrap;
}

/* ---- Buttons: override WP-admin defaults with a friendlier, more
   "product" look. Scoped so it never touches the wp-admin toolbar/settings
   pages, only this front-end portal. -------------------------------------*/
.iqm-portal .button,
.iqm-portal button.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	height: auto;
	line-height: 1.4;
	font-size: 0.88em;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid #d0d5dd;
	background: #fff;
	color: var(--iqm-text);
	box-shadow: none;
	text-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.iqm-portal .button:hover {
	background: var(--iqm-bg-subtle);
	border-color: #b7bec9;
	color: var(--iqm-text);
}
.iqm-portal .button:active {
	transform: translateY(1px);
}
.iqm-portal .button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.18);
}
.iqm-portal .button-primary,
.iqm-portal button.button-primary {
	background: var(--iqm-primary);
	border-color: var(--iqm-primary);
	color: #fff;
}
.iqm-portal .button-primary:hover {
	background: var(--iqm-primary-dark);
	border-color: var(--iqm-primary-dark);
	color: #fff;
}
.iqm-portal .button:disabled,
.iqm-portal .button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Small inline spinner, used inside buttons/status text while a request
   is in flight (e.g. "Working…"). Pure CSS, no image asset needed. */
.iqm-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: iqm-spin 0.7s linear infinite;
	vertical-align: -2px;
}
.iqm-portal .button-primary .iqm-spinner {
	border-color: rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
}
@keyframes iqm-spin {
	to { transform: rotate(360deg); }
}

/* ---- Section headers within cards ------------------------------------ */
.iqm-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--iqm-border);
}
.iqm-detail-header h3 {
	margin: 0;
	font-size: 1.1em;
}
.iqm-device-list {
	margin: 6px 0 14px;
	padding-left: 18px;
	color: var(--iqm-text-muted);
}

/* ---- Inline status / notice banners ------------------------------------*/
.iqm-status {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: 6px;
	background: #eaf2fb;
	color: #2271b1;
	font-size: 0.92em;
	animation: iqm-fade-in 0.15s ease;
}
.iqm-status-error {
	background: #fbeaea;
	color: #b32d2e;
}
@keyframes iqm-fade-in {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: translateY(0); }
}

#iqm-quote-requote-note {
	background: #fff8ec;
	border: 1px solid #f3dfb1;
	color: #7a5711;
	padding: 10px 14px;
	border-radius: 6px;
}

/* ---- Forms -------------------------------------------------------------*/
#iqm-quote-card .form-table th {
	width: 170px;
	text-align: left;
	padding: 10px 10px 10px 0;
	font-weight: 500;
	color: var(--iqm-text);
}
#iqm-quote-card .form-table td {
	padding: 8px 0;
}
#iqm-quote-card input[type="email"],
#iqm-quote-card input[type="number"],
#iqm-compose-card input[type="text"] {
	width: 240px;
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.95em;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#iqm-quote-card input:focus,
#iqm-compose-card input:focus,
#iqm-compose-body:focus {
	outline: none;
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
}
#iqm-f-total {
	font-size: 1.15em;
	color: var(--iqm-primary);
}
#iqm-send-quote-btn,
#iqm-compose-send-btn {
	margin-top: 14px;
}

/* ---- Order & ticket detail (Quote+ form) --------------------------------
   Mirrors the Shipping Portal's own ish-detail-* look (same grid pattern),
   under an iqm- prefix so this stays self-contained in this plugin. ------*/
#iqm-quote-devices {
	margin-bottom: 18px;
}
.iqm-order-fields {
	background: var(--iqm-bg-subtle);
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.iqm-ticket-card {
	border: 1px solid var(--iqm-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.iqm-ticket-card h4 {
	margin: 0 0 10px;
	font-size: 1em;
	color: var(--iqm-text);
}
.iqm-detail-group {
	margin-bottom: 12px;
}
.iqm-detail-group:last-child {
	margin-bottom: 0;
}
.iqm-detail-group h5 {
	margin: 0 0 6px;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--iqm-text-muted);
	font-weight: 600;
}
.iqm-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 20px;
}
.iqm-detail-field {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.iqm-detail-label {
	font-size: 0.78em;
	color: var(--iqm-text-muted);
}
.iqm-detail-value {
	font-size: 0.92em;
	color: var(--iqm-text);
	word-break: break-word;
}
.iqm-attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.iqm-attachment {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--iqm-border);
	border-radius: 5px;
	font-size: 0.82em;
	color: var(--iqm-primary);
	text-decoration: none;
	background: #fff;
}
.iqm-attachment:hover {
	background: var(--iqm-bg-subtle);
}

/* ---------------------------------------------------------------------
 * Login screen (mirrors the Shipping Portal's exactly, since they share
 * the same login flow) — Google button, "or" divider, then the plain
 * WordPress username/password fallback form via wp_login_form().
 * ------------------------------------------------------------------- */
.iqm-login-divider {
	position: relative;
	text-align: center;
	margin: 18px 0;
	border-top: 1px solid var(--iqm-border);
}
.iqm-login-divider span {
	position: relative;
	top: -11px;
	background: #fff;
	padding: 0 10px;
	color: #888;
	font-size: 0.85em;
}
.iqm-locked form.iqm-login-form p,
.iqm-locked #loginform p {
	text-align: left;
}
.iqm-locked label {
	display: block;
	margin-bottom: 4px;
}
.iqm-locked input[type="text"],
.iqm-locked input[type="password"],
.iqm-locked input[type="email"] {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
}
.iqm-locked #wp-submit {
	width: 100%;
	margin-top: 8px;
	justify-content: center;
}

/* Auto-calculated shipping (Settings → "Calculate shipping automatically
   using Shippo") — the input itself goes read-only and this note shows
   which carrier/service Shippo picked, next to a Recalculate button. */
#iqm-shipping-calc-wrap,
#iqm-insurance-calc-wrap {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.85em;
	color: var(--iqm-text-muted);
}
#iqm-f-shipping[readonly],
#iqm-f-insurance[readonly] {
	background: var(--iqm-bg-subtle);
	color: var(--iqm-text-muted);
}

/* Review Quote Email — HTML/Preview tabs over the body field. */
.iqm-body-tabs {
	margin-bottom: 8px;
	display: flex;
	gap: 6px;
}
.iqm-body-tab-btn.is-active {
	background: var(--iqm-primary);
	color: #fff;
	border-color: var(--iqm-primary);
}
#iqm-compose-body {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	padding: 10px;
}
#iqm-compose-preview {
	display: block;
	width: 100%;
	height: 420px;
	border: 1px solid var(--iqm-border);
	border-radius: 6px;
	background: #fff;
}

/* ---- Pricing catalog panel (requirement 1 & 2) ------------------------- */
.iqm-catalog-panel {
	background: var(--iqm-bg-subtle);
	border: 1px solid var(--iqm-border);
	border-radius: var(--iqm-radius);
	padding: 16px 18px;
	margin: 18px 0;
}
.iqm-catalog-panel h4 {
	margin: 0 0 10px;
	font-size: 0.95em;
}
.iqm-catalog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.iqm-catalog-filters input[type="text"],
.iqm-catalog-filters select {
	padding: 7px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.9em;
}
#iqm-catalog-search {
	flex: 1 1 220px;
	min-width: 180px;
}
.iqm-catalog-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	grid-auto-rows: min-content;
	align-content: start;
	gap: 8px;
	/* Was a fixed 260px — barely over one row of boxes, so the rest were
	   cut off. Now sized to the viewport so several rows are visible at
	   once, with the whole list one "Show all" click away (see
	   .is-expanded below). */
	max-height: min(70vh, 620px);
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	/* Let scrolling hand off to the page at the top/bottom of the box
	   instead of trapping the wheel/trackpad inside it. */
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2px 6px 2px 2px;
	margin-bottom: 8px;
	/* Firefox: classic, always-visible scrollbar. */
	scrollbar-width: auto;
	scrollbar-color: #8c96a0 #e6e9ec;
}
/* WebKit/Blink: macOS auto-hides the default overlay scrollbar, which is
   exactly why the boxes below the first row looked unreachable. Styling
   the scrollbar replaces the overlay one with a persistent one. */
.iqm-catalog-results::-webkit-scrollbar {
	width: 12px;
}
.iqm-catalog-results::-webkit-scrollbar-track {
	background: #e6e9ec;
	border-radius: 6px;
}
.iqm-catalog-results::-webkit-scrollbar-thumb {
	background: #8c96a0;
	border-radius: 6px;
	border: 2px solid #e6e9ec;
}
.iqm-catalog-results::-webkit-scrollbar-thumb:hover {
	background: #5f6b76;
}
.iqm-catalog-results:focus-visible {
	outline: 2px solid var(--iqm-primary);
	outline-offset: 2px;
}
.iqm-catalog-results.is-expanded {
	max-height: none;
	overflow-y: visible;
}
.iqm-catalog-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.iqm-catalog-meta .description {
	margin: 0;
}
.iqm-catalog-empty {
	grid-column: 1 / -1;
	color: var(--iqm-text-muted);
	font-size: 0.9em;
	margin: 4px 0;
}
.iqm-catalog-item {
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: 6px;
	padding: 9px 11px;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
.iqm-catalog-item:hover,
.iqm-catalog-item:focus-visible {
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
	outline: none;
}
.iqm-catalog-item:active {
	transform: translateY(1px);
}
.iqm-catalog-item-name {
	font-weight: 600;
	font-size: 0.9em;
	color: var(--iqm-text);
	margin-bottom: 2px;
}
.iqm-catalog-item-meta {
	font-size: 0.76em;
	color: var(--iqm-text-muted);
	margin-bottom: 4px;
	min-height: 1em;
}
.iqm-catalog-item-price {
	font-size: 0.85em;
	color: var(--iqm-primary);
	font-weight: 500;
}

/* ---- Section headings between catalog / line items / discounts --------- */
.iqm-section-heading {
	margin: 22px 0 10px;
	font-size: 0.95em;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--iqm-border);
}

/* ---- Quote line-items table (requirement 3 & 7) ------------------------ */
.iqm-lineitem-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	/* Required for the sticky Total/Actions columns below: without a
	   fixed layout, the browser sizes columns by content and the '%'
	   widths below are only ever a rough starting point that content can
	   override — which is exactly why the sticky Total column ended up
	   overlapping Hrly Rate instead of sitting flush next to it. Fixed
	   layout makes every column's rendered width match its declared %
	   exactly, so the sticky 'right' offsets below line up for real. */
	table-layout: fixed;
}
.iqm-lineitem-table th {
	text-align: left;
	color: var(--iqm-text-muted);
	font-weight: 600;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 8px 6px;
	border-bottom: 2px solid #eee;
}
.iqm-lineitem-table td {
	padding: 5px 6px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}
.iqm-lineitem-empty td {
	text-align: center;
	color: var(--iqm-text-muted);
	padding: 20px 10px;
	font-size: 0.9em;
}
.iqm-lineitem-table input[type="text"],
.iqm-lineitem-table input[type="number"] {
	width: 100%;
	padding: 6px 7px;
	border: 1px solid #d5d9dd;
	border-radius: 5px;
	font-size: 0.88em;
}
.iqm-lineitem-table input:focus {
	outline: none;
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.12);
}
/* Per the client: Part/Service and Description should be "much wider,"
   Qty/Price/Labor Hrs should be small ("1/5th of the width shown") since
   they only ever hold a short number. Hourly Rate is shrunk to match
   Price for the same reason (a dollar figure, same as Price) even though
   the client didn't name it explicitly — it would look inconsistent left
   wide while Price next to it is narrow. Total and Actions get just
   enough room for a bold dollar amount and the two action icons.
   These are simple flat percentages by design (not something staff
   drag-resize themselves) — that keeps the table's columns lining up
   consistently with its sticky Total/Actions columns below, which rely
   on knowing the exact widths at build time. Client: if any single
   column needs further adjustment, give me the number and I'll update it
   here — there's no in-app control for this. */
.iqm-col-name { width: 18%; }
.iqm-col-desc { width: 34%; }
.iqm-col-qty, .iqm-col-lhrs { width: 6%; }
.iqm-col-price, .iqm-col-hrate { width: 7%; }
.iqm-col-total { width: 11%; }
.iqm-col-actions { width: 11%; white-space: nowrap; }
/* The Total and Actions columns are the ones staff most need to see at a
   glance (what does this line cost, and how do I remove/save it) — and
   were exactly the columns getting cut off on a narrower window,
   reported as "options not showing". Pinning them to the right edge of
   the scroll container means they're always visible regardless of
   horizontal scroll position, even on a screen too narrow to show every
   column at once; scrolling still reveals the columns between them. */
.iqm-col-total,
.iqm-lineitem-table th:nth-child(7) {
	position: sticky;
	right: 9%; /* matches .iqm-col-actions' own percentage width, so this lines up flush against it regardless of the table's actual rendered width */
	background: #fff;
	box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.08);
}
.iqm-col-actions,
.iqm-lineitem-table th:last-child {
	position: sticky;
	right: 0;
	background: #fff;
}
.iqm-lineitem-row.iqm-lineitem-type-labor .iqm-col-total,
.iqm-lineitem-row.iqm-lineitem-type-labor .iqm-col-actions {
	background: var(--iqm-bg-subtle);
}
.iqm-li-total {
	font-weight: 600;
	text-align: right;
	padding-right: 10px !important;
}
.iqm-lineitem-table input:disabled {
	background: #f3f3f4;
	color: #b0b3b8;
	border-color: #e2e4e7;
	cursor: not-allowed;
}
/** Labor rows sit visually "underneath" their part — a thin colored left
 * border plus a lighter row tint reads as "this belongs to the row above"
 * without needing extra markup, matching the client's requirement that
 * labor is its own line item directly below the part it's for. */
.iqm-lineitem-type-labor {
	background: #fafbfc;
	box-shadow: inset 3px 0 0 var(--iqm-primary);
}
.iqm-li-type-badge {
	display: block;
	width: fit-content;
	font-size: 0.65em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 1px 5px;
	border-radius: 3px;
	margin-bottom: 3px;
}
.iqm-li-type-part {
	background: #e7f0fa;
	color: #2271b1;
}
.iqm-li-type-labor {
	background: #fdf0e4;
	color: #b5610a;
}
.iqm-li-save-catalog,
.iqm-li-remove {
	padding: 4px 8px !important;
	min-width: 30px;
	justify-content: center;
}
#iqm-add-custom-item-btn {
	margin-top: 10px;
}

/* ---- Discounts (requirement 6) ------------------------------------------*/
.iqm-discount-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}
.iqm-discount-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.iqm-discount-row .iqm-disc-name {
	flex: 1 1 260px;
	max-width: 320px;
	padding: 7px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.9em;
}
.iqm-disc-dollar {
	color: var(--iqm-text-muted);
}
.iqm-discount-row .iqm-disc-amount {
	width: 100px;
	padding: 7px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 0.9em;
}
.iqm-discount-row input:focus {
	outline: none;
	border-color: var(--iqm-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.12);
}
.iqm-disc-remove {
	padding: 4px 8px !important;
}

/* ---- Totals block (requirement 7 — itemized & easy to verify) ---------- */
.iqm-totals-table th {
	width: 170px;
}
.iqm-totals-table td {
	font-size: 0.98em;
}
#iqm-f-subtotal,
#iqm-f-discount-total {
	font-weight: 500;
}
#iqm-f-discount-total {
	color: #b32d2e;
}
.iqm-grand-total-row th {
	font-size: 1.05em;
	border-top: 2px solid var(--iqm-border);
	padding-top: 14px;
}
.iqm-grand-total-row td {
	border-top: 2px solid var(--iqm-border);
	padding-top: 14px;
}

/* ---- Responsive ---------------------------------------------------------*/
@media (max-width: 640px) {
	.iqm-portal {
		margin: 12px auto;
		padding: 0 12px;
	}
	.iqm-card {
		padding: 16px;
	}
	#iqm-order-search {
		width: 100%;
		margin-bottom: 8px;
	}
	/* Devices column used to be force-hidden here as "least essential",
	   but it now holds the devices expand/collapse toggle rather than a
	   plain count, so hiding it would remove that feature entirely on
	   mobile. The table's existing horizontal scroll (.iqm-table-scroll)
	   already handles the extra columns instead. */
	#iqm-quote-card .form-table th {
		width: auto;
		display: block;
		padding-bottom: 2px;
	}
	#iqm-quote-card .form-table td {
		display: block;
		padding-bottom: 12px;
	}
}


/* ---- 1.5.0: Bundle rows, fixed quote fields, revision badge ---- */
.iqm-li-type-bundle {
	background: #e8f0fe;
	color: #1a4fa0;
}
.iqm-lineitem-row.iqm-lineitem-type-bundle {
	background: #f4f8ff;
}
.iqm-fixed-fields textarea,
#iqm-f-salutation {
	width: 100%;
	max-width: 520px;
}
.iqm-required {
	color: #b32d2e;
}
.iqm-badge-revision {
	background: #fff3cd;
	color: #7a5a00;
}

.iqm-li-bundle-split { font-size: 11px; color: #1a4fa0; margin-top: 3px; }


/* =========================================================================
   1.5.10 — Quote Tool updates
   ========================================================================= */

/* Plain text-link buttons (Show all / Expand all devices / Collapse all) */
.iqm-portal .iqm-link-btn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--iqm-primary);
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}
.iqm-portal .iqm-link-btn:hover { text-decoration: none; }
.iqm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
/* A theme's global rules must never be able to un-hide a closed tray. */
.iqm-portal [hidden] { display: none !important; }

/* ---- Order list: Device Repair Status column ---- */
.iqm-col-repair { min-width: 190px; }
.iqm-repair-status { display: flex; flex-direction: column; gap: 5px; }
.iqm-repair-bar {
	display: flex;
	gap: 2px;
	height: 14px;
	max-width: 220px;
	border-radius: 4px;
	overflow: hidden;
}
.iqm-repair-seg {
	flex: 1 1 0;
	min-width: 8px;
	height: 100%;
}
.iqm-repair-caption { font-size: 0.85em; line-height: 1.3; }
.iqm-repair-count { color: var(--iqm-text-muted); font-size: 0.85em; font-weight: 600; }
.iqm-ready-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}
.iqm-ready-yes { background: #e7f6ea; color: #1e6b31; border: 1px solid #b9e0c1; }
.iqm-ready-partial { background: #fdf2e3; color: #8a5508; border: 1px solid #f0d3a4; }

/* ---- Quote screen: "all devices received?" banner ---- */
.iqm-ready-banner {
	margin: 0 0 12px;
	padding: 9px 14px;
	border-radius: 6px;
	font-size: 0.92em;
	font-weight: 600;
}
.iqm-ready-banner-yes { background: #e7f6ea; color: #1e6b31; border: 1px solid #b9e0c1; }
.iqm-ready-banner-warn { background: #fdf2e3; color: #8a5508; border: 1px solid #f0d3a4; }

/* ---- Accordion trays: header triangle, Device bars ---- */
.iqm-detail-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.iqm-acc-chevron {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid #1d4e6f;
	transform: rotate(-90deg);   /* closed: points right */
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.iqm-acc-toggle.is-open .iqm-acc-chevron,
.iqm-acc-bar.is-open .iqm-acc-chevron {
	transform: rotate(0deg);     /* open: points down */
}
.iqm-portal .iqm-acc-toggle {
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	line-height: 0;
	border-radius: 6px;
}
.iqm-portal .iqm-acc-toggle:hover,
.iqm-portal .iqm-acc-toggle:focus-visible { background: var(--iqm-bg-subtle); outline: none; }
.iqm-order-tray {
	margin-bottom: 12px;
}
.iqm-acc-controls {
	margin: 0 0 8px;
	text-align: right;
}
.iqm-acc-item {
	margin-bottom: 8px;
}
.iqm-portal .iqm-acc-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 1em;
	color: var(--iqm-text);
	cursor: pointer;
	transition: background-color 0.1s ease, border-color 0.1s ease;
}
.iqm-portal .iqm-acc-bar:hover,
.iqm-portal .iqm-acc-bar:focus-visible {
	background: var(--iqm-bg-subtle);
	border-color: var(--iqm-primary);
	outline: none;
}
.iqm-portal .iqm-acc-bar.is-open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: var(--iqm-bg-subtle);
}
.iqm-acc-title {
	flex: 1 1 auto;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}
.iqm-acc-meta { flex: 0 0 auto; }
.iqm-acc-item > .iqm-acc-panel.iqm-ticket-card {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-bottom: 0;
}
.iqm-tray-loading {
	margin: 0 0 12px;
	color: var(--iqm-text-muted);
	font-size: 0.9em;
}

/* =========================================================================
   1.5.11 — Professional polish (visual refinements only)
   ========================================================================= */
.iqm-portal {
	--iqm-primary: #1f5f99;
	--iqm-primary-dark: #164a78;
	--iqm-border: #dfe3e8;
	--iqm-bg-subtle: #f6f8fa;
	--iqm-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.05);
	font-feature-settings: "tnum" 1, "cv11" 1;
}
.iqm-card {
	border-radius: 12px;
	padding: 24px 28px;
	box-shadow: var(--iqm-shadow);
}

/* ---- Quote header ---- */
.iqm-detail-header.iqm-acc-header {
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding-bottom: 16px;
}
.iqm-quote-heading { min-width: 0; }
.iqm-eyebrow {
	display: block;
	margin-bottom: 2px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iqm-primary);
}
.iqm-acc-header h3 {
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.iqm-detail-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.iqm-portal .iqm-acc-toggle {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
}
.iqm-portal .iqm-acc-toggle:hover { background: var(--iqm-bg-subtle); border-color: #b7bec9; }
.iqm-acc-chevron { border-top-color: var(--iqm-primary); }

/* ---- Quote footer actions ---- */
.iqm-quote-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--iqm-border);
}
.iqm-portal .iqm-quote-footer .button-primary { padding: 10px 22px; font-size: 0.95em; font-weight: 600; }

/* ---- Order table ---- */
.iqm-order-table { border-collapse: separate; border-spacing: 0; margin-top: 18px; }
.iqm-order-table th {
	background: var(--iqm-bg-subtle);
	border-top: 1px solid var(--iqm-border);
	border-bottom: 1px solid var(--iqm-border);
	padding: 10px 14px;
	font-size: 0.72em;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.iqm-order-table th:first-child { border-left: 1px solid var(--iqm-border); border-top-left-radius: 8px; }
.iqm-order-table th:last-child { border-right: 1px solid var(--iqm-border); border-top-right-radius: 8px; }
.iqm-order-table td { padding: 14px; border-bottom: 1px solid #edf0f3; }
.iqm-order-table tbody tr:hover { background: #f9fbfd; }
.iqm-order-table td:first-child { font-variant-numeric: tabular-nums; color: var(--iqm-text-muted); font-size: 0.88em; }
.iqm-order-table td:nth-child(2) { font-weight: 600; }
/* Quote action (primary) sits left of Quote Status (secondary, last column). */
.iqm-order-table .iqm-col-action { text-align: left; white-space: nowrap; width: 1%; }
.iqm-order-table .iqm-col-quote-status { white-space: nowrap; }

/* ---- Status pills (with color dot) ---- */
.iqm-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px 3px 9px;
	background: #fff;
	font-weight: 600;
	letter-spacing: 0.005em;
}
.iqm-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---- Device Repair Status column ---- */
.iqm-col-repair { min-width: 210px; }
.iqm-repair-bar {
	height: 10px;
	max-width: 190px;
	border-radius: 999px;
	gap: 3px;
	background: transparent;
}
.iqm-repair-seg { border-radius: 999px; min-width: 14px; }
.iqm-ready-badge { font-size: 0.8em; padding: 3px 10px; }
.iqm-ready-yes { background: #e8f6ee; border-color: #b7e0c5; color: #17653a; }
.iqm-ready-partial { background: #fff4e0; border-color: #f2d49b; color: #8a5200; }

/* ---- Banner ---- */
.iqm-ready-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 8px;
	font-weight: 600;
}

/* ---- Accordion bars ---- */
.iqm-portal .iqm-acc-bar {
	padding: 13px 18px;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.iqm-acc-title { font-size: 0.97em; font-weight: 600; }
.iqm-acc-item > .iqm-acc-panel.iqm-ticket-card {
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	padding: 18px 20px;
}
.iqm-order-tray {
	background: #fff;
	border: 1px solid var(--iqm-border);
	border-radius: 10px;
	padding: 18px 20px;
}

/* ---- Pricing catalog cards ---- */
.iqm-catalog-item {
	border-radius: 10px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
.iqm-catalog-item:hover,
.iqm-catalog-item:focus-visible {
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
}

/* ---- Small screens ---- */
@media (max-width: 720px) {
	.iqm-card { padding: 18px 16px; }
	.iqm-detail-header.iqm-acc-header { align-items: flex-start; }
	.iqm-detail-header-actions { width: 100%; justify-content: flex-start; }
	.iqm-quote-footer { flex-wrap: wrap; }
}


/* ---- 1.5.13: Review Quote Email tabs — Preview (left, default) / Edit HTML (right) ---- */
.iqm-portal .iqm-body-tabs {
	display: flex;
	gap: 0;
	margin: 0 0 10px;
	border-bottom: 1px solid var(--iqm-border);
}
.iqm-portal .iqm-body-tabs .iqm-body-tab-btn {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	margin: 0 4px -1px 0;
	padding: 9px 20px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--iqm-text-muted);
	cursor: pointer;
	box-shadow: none;
}
.iqm-portal .iqm-body-tabs .iqm-body-tab-btn:hover { color: var(--iqm-primary); background: var(--iqm-bg-subtle); }
/* The active tab is clearly boxed + highlighted. */
.iqm-portal .iqm-body-tabs .iqm-body-tab-btn.is-active {
	color: var(--iqm-primary);
	background: #fff;
	border-color: var(--iqm-border);
	border-top: 3px solid var(--iqm-primary);
	padding-top: 7px;
}
#iqm-compose-preview {
	height: 520px;
	background: #f2f4f7;
	border: 1px solid var(--iqm-border);
	border-radius: 8px;
}