/* --------------------------
 *
 * sup.css
 *
 * -------------------------- */

/* @reviewed 2026-05-12 Eli & Claude */
.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-table-cell::after,
.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-table-cell::after,
.tc-sup-product-lower-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-table-cell::after,
.tc-sup-product-lower-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-table-cell::after
{ font-family: FontAwesome; font-weight: normal; content: "\f111"; color: #c0392b; margin-inline-start: 5px; font-size: 8px; }

.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-control,
.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-control,
.tc-sup-product-lower-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-control,
.tc-sup-product-lower-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-control
{ position: relative; }

.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-control::after,
.tc-sup-product-lower-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-control::after,
.tc-sup-product-lower-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-control::after,
.tc-sup-product-lower-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-control::after
{ position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; font-weight: normal; content: "\f111"; color: #c0392b; pointer-events: none; font-size: 8px; }

.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-table-cell::after,
.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-table-cell::after,
.tc-sup-product-higher-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-table-cell::after,
.tc-sup-product-higher-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-table-cell::after
{ font-family: FontAwesome; font-weight: normal; content: "\f111"; color: #27ae60; margin-inline-start: 5px; font-size: 8px; }

.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-control,
.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-control,
.tc-sup-product-higher-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-control,
.tc-sup-product-higher-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-control
{ position: relative; }

.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="product::price_list_price_no_vat"] .tc-control::after,
.tc-sup-product-higher-price-no-vat .tc-table-column[data-field="price_list_price_no_vat"] .tc-control::after,
.tc-sup-product-higher-price .tc-table-column[data-field="product::price_list_price_with_vat"] .tc-control::after,
.tc-sup-product-higher-price .tc-table-column[data-field="price_list_price_with_vat"] .tc-control::after
{ position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; font-weight: normal; content: "\f111"; color: #27ae60; pointer-events: none; font-size: 8px; }

.tc-sup-product-lower-supplier-price .tc-table-column[data-field="price"] .tc-table-cell::after
{ font-family: FontAwesome; font-weight: normal; content: "\f0d7"; color: #27ae60; margin-inline-start: 5px; }

.tc-sup-product-lower-supplier-price .tc-table-column[data-field="price"] .tc-control
{ position: relative; }

.tc-sup-product-lower-supplier-price .tc-table-column[data-field="price"] .tc-control::after
{ position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; font-weight: normal; content: "\f0d7"; color: #27ae60; pointer-events: none; }

.tc-sup-product-higher-supplier-price .tc-table-column[data-field="price"] .tc-table-cell::after
{ font-family: FontAwesome; font-weight: normal; content: "\f0d8"; color: #c0392b; margin-inline-start: 5px; }

.tc-sup-product-higher-supplier-price .tc-table-column[data-field="price"] .tc-control
{ position: relative; }

.tc-sup-product-higher-supplier-price .tc-table-column[data-field="price"] .tc-control::after
{ position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-family: FontAwesome; font-weight: normal; content: "\f0d8"; color: #c0392b; pointer-events: none; }

/* Products archive (read-only price cells, right-aligned): reserve a fixed caret slot on EVERY price
   cell so the numbers share one right edge, and pin the caret into that slot instead of letting it flow
   inline after the value (which pushes the number left only on flagged rows, leaving the column ragged). */
.tc-table-row[data-item-type="cat_product"] .tc-table-column[data-field="price_list_price_with_vat"] .tc-table-cell,
.tc-table-row[data-item-type="cat_product"] .tc-table-column[data-field="price_list_price_no_vat"] .tc-table-cell
{ padding-inline-end: 18px; }

.tc-table-row[data-item-type="cat_product"] .tc-table-column[data-field="price_list_price_with_vat"] .tc-table-cell::after,
.tc-table-row[data-item-type="cat_product"] .tc-table-column[data-field="price_list_price_no_vat"] .tc-table-cell::after
{ position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%); margin-inline-start: 0; }

.tc-sup-product-different-supplier-pcn .tc-table-column[data-field="sup_pcn"],
.tc-sup-product-different-supplier-name .tc-table-column[data-field="supplier_name"],
.tc-sup-order-product-ai-update .tc-table-column[data-field="ai_detected_status"]
{ background: lightyellow; }

.tc-sup-product-different-supplier-price .tc-field[data-field="price"] .tc-control-value,
.tc-sup-product-different-price-list-with-vat .tc-field[data-field="price_list_price_with_vat"] .tc-control-value,
.tc-sup-product-different-price-list-with-vat .tc-field[data-field="product::price_list_price_with_vat"] .tc-control-value,
.tc-sup-product-different-price-list-no-vat .tc-field[data-field="price_list_price_no_vat"] .tc-control-value,
.tc-sup-product-different-price-list-no-vat .tc-field[data-field="product::price_list_price_no_vat"] .tc-control-value
{ background: lightyellow; }

.tc-sup-order-product-ai-variant .tc-table-column[data-field="ai_detected_status"],
.tc-sup-product-open-order .tc-table-column[data-field="name"]
{ background: #fce5cd; }

.tc-sup-order-product-different-quantity .tc-table-column[data-field="received_quantity"]
{ background: #F0B27A; }

.tc-sup-order-product-ai-new .tc-table-column[data-field="ai_detected_status"]
{ background: #e3fce3; }

.tc-table-row.tc-sup-order-product-ai-product .tc-field[data-field="product_name_search"] .tc-control-value,
.tc-field[data-field="product_name_search"].tc-sup-order-product-ai-product .tc-control-value {
	background: lightyellow;
}


.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="product"],
.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="product_name_search"] {
	width: 100%;
}

.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="price"],
.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="quantity"] {
	min-width: 65px;
}

/* Price-list columns carry the recommended-price caret indicator and were truncating the value -
   widen them so the number and the caret both fit comfortably. */
.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="price_list_price_with_vat"],
.tc-field[data-item-type="sup_order"][data-field="products"] .tc-table-column[data-field="price_list_price_no_vat"] {
	min-width: 70px;
}


.tc-layout-single.sup-order-document-type-order .tc-main-title-inner {
	background-color: #E0DAF0;
}

.tc-layout-single.sup-order-document-type-packing-slip .tc-main-title-inner {
	background-color: #D6E4F2;
}

.tc-layout-single.sup-order-document-type-invoice .tc-main-title-inner {
	background-color: #FBF8EA;
}

.tc-field[data-field="supplier"].tc-sup-order-supplier-details-differ .tc-input,
.tc-field[data-field="supplier_name"].tc-sup-order-supplier-details-differ .tc-input,
.tc-field[data-field="supplier_business_number"].tc-sup-order-supplier-details-differ .tc-input,
.tc-field[data-field="supplier_phone"].tc-sup-order-supplier-details-differ .tc-input,
.tc-field[data-field="supplier_email"].tc-sup-order-supplier-details-differ .tc-input {
	background-color: var(--tc-warning-bg, #fff3cd) !important;
}

.tc-field[data-field="invoice_date"].tc-sup-order-date-old .tc-input {
	background-color: var(--tc-danger-bg, #f8d7da) !important;
}

/* --------------------------
 *
 * themis-facelift.css
 *
 * -------------------------- */

/* ============================================================================
 * Canopy Facelift — modern green + navy theme (canopy.works inspired)
 * ----------------------------------------------------------------------------
 * CSS-only override layer for the TC "main" client theme. Every rule is scoped
 * under .tc-root-branding-canopy so it only applies to Canopy and gains the
 * specificity to win over the (unprefixed) core CSS without !important.
 *
 * Touches color / background / radius / shadow / border only. Directional rules
 * are duplicated under the existing .tc-root-rtl / .tc-root-ltr hooks so the
 * Hebrew/RTL layout is preserved. Input and row heights are intentionally left
 * unchanged to avoid table inline-edit / alignment regressions.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&display=swap');

.tc-root-branding-canopy {
	/* palette */
	--cy-navy-900: #16241d;   /* sidebar base */
	--cy-navy-800: #1d2a23;   /* sidebar hover / gradient stop */
	--cy-green-600: #2E8B57;  /* primary accent */
	--cy-green-500: #3DA35D;  /* bright / hover */
	--cy-green-050: rgba(46, 139, 87, 0.10);
	--cy-green-tint: rgba(61, 163, 93, 0.16);
	--cy-focus: rgba(46, 139, 87, 0.28);

	--cy-ink: #27322c;        /* body text */
	--cy-bg: #F4F6F4;         /* content background */
	--cy-card: #ffffff;
	--cy-border: #e6e8e6;     /* soft borders */
	--cy-border-strong: #d6dad7;
	--cy-neutral: #eef1ee;    /* secondary button bg */
	--cy-neutral-hover: #e4e8e4;

	/* shape */
	--cy-radius-card: 12px;
	--cy-radius-control: 8px;
	--cy-radius-sm: 6px;
	--cy-radius-pill: 999px;

	/* elevation */
	--cy-shadow-card: 0 1px 3px rgba(16, 24, 32, 0.06), 0 1px 2px rgba(16, 24, 32, 0.04);
	--cy-shadow-hover: 0 6px 18px rgba(16, 24, 32, 0.10);
	--cy-shadow-elevated: 0 14px 40px rgba(16, 24, 32, 0.22);

	--cy-transition: 0.15s ease;
}

.tc-root-branding-canopy #tc-root {
	color: var(--cy-ink);
}


/* Content background
 * -------------------------- */
.tc-root-branding-canopy #tc-background-area {
	background-color: var(--cy-bg);
}


/* Sidebar (navy chrome)
 * -------------------------- */
.tc-root-branding-canopy .tc-sidebar,
.tc-root-branding-canopy .tc-sidebar-bg {
	background: var(--cy-navy-900);
	background-image: linear-gradient(180deg, var(--cy-navy-800) 0%, var(--cy-navy-900) 100%);
}

.tc-root-branding-canopy .tc-sidebar {
	color: #c5cdc8;
}

.tc-root-rtl.tc-root-branding-canopy .tc-sidebar {
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

.tc-root-ltr.tc-root-branding-canopy .tc-sidebar {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04);
}

.tc-root-branding-canopy .tc-sidebar .tc-sidebar-session {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* Sidebar menu
 * -------------------------- */
.tc-root-branding-canopy .tc-menu .tc-menu-item .tc-menu-button {
	transition: background-color var(--cy-transition), color var(--cy-transition);
}

.tc-root-branding-canopy .tc-menu .tc-menu-item .tc-menu-button:hover,
.tc-root-branding-canopy .tc-menu .tc-menu-item .tc-menu-button.tc-hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
}

.tc-root-branding-canopy .tc-menu .tc-menu-item .tc-menu-button:focus,
.tc-root-branding-canopy .tc-menu .tc-menu-item .tc-menu-button.tc-focus {
	box-shadow: 0 0 0 2px var(--cy-focus);
}

.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button,
.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current-parent.tc-menu-closed > .tc-menu-button {
	color: #ffffff;
	background: var(--cy-green-tint);
	position: relative;
}

.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current-parent.tc-menu-open > .tc-menu-button {
	background: rgba(255, 255, 255, 0.05);
}

/* green active accent bar (RTL-aware) */
.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button:before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: var(--cy-radius-pill);
	background: var(--cy-green-500);
}

.tc-root-rtl.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button:before {
	right: 3px;
}

.tc-root-ltr.tc-root-branding-canopy .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button:before {
	left: 3px;
}


/* Buttons
 * -------------------------- */
.tc-root-branding-canopy .tc-button {
	border-radius: var(--cy-radius-control);
	background: var(--cy-neutral);
	color: var(--cy-ink);
	border: 1px solid var(--cy-border-strong);
	transition: background-color var(--cy-transition), color var(--cy-transition), box-shadow var(--cy-transition);
}

.tc-root-branding-canopy .tc-button:hover,
.tc-root-branding-canopy .tc-button.tc-hover {
	color: var(--cy-green-600);
	background: var(--cy-neutral-hover);
}

.tc-root-branding-canopy .tc-button:focus,
.tc-root-branding-canopy .tc-button.tc-focus {
	box-shadow: 0 0 0 3px var(--cy-focus);
}

.tc-root-branding-canopy .tc-button > b {
	color: var(--cy-green-600);
}

/* primary / main action */
.tc-root-branding-canopy .tc-button.tc-button-main {
	color: #ffffff;
	background-color: var(--cy-green-600);
	border-color: var(--cy-green-600);
}

.tc-root-branding-canopy .tc-button.tc-button-main:hover,
.tc-root-branding-canopy .tc-button.tc-button-main.tc-hover {
	color: #ffffff;
	background-color: var(--cy-green-500);
	box-shadow: var(--cy-shadow-hover);
}

.tc-root-branding-canopy .tc-button.tc-button-main.tc-disabled {
	color: #ffffff !important;
	background-color: #a9c7b6;
}

/* icon buttons stay transparent — only restyle accent/hover */
.tc-root-branding-canopy .tc-button.tc-button-icon {
	background: inherit;
	border: none;
	border-radius: var(--cy-radius-pill);
}

.tc-root-branding-canopy a.tc-button.tc-button-icon:hover,
.tc-root-branding-canopy a.tc-button.tc-button-icon.tc-hover {
	color: var(--cy-green-600);
}

.tc-root-branding-canopy a.tc-button.tc-button-icon:focus,
.tc-root-branding-canopy a.tc-button.tc-button-icon.tc-focus {
	box-shadow: 0 0 0 3px var(--cy-focus);
}

/* link-style buttons (noBG: true — e.g. Select All / Clear All) must stay
 * transparent with readable text. Without this they pick up the solid-button
 * neutral bg + (for the -main variant) the white text → white-on-white. */
.tc-root-branding-canopy .tc-button.tc-button-no-background,
.tc-root-branding-canopy .tc-button.tc-button-main.tc-button-no-background {
	background: none;
	border: none;
	color: var(--cy-green-600);
}

.tc-root-branding-canopy .tc-button.tc-button-no-background:hover,
.tc-root-branding-canopy .tc-button.tc-button-no-background.tc-hover,
.tc-root-branding-canopy .tc-button.tc-button-main.tc-button-no-background:hover,
.tc-root-branding-canopy .tc-button.tc-button-main.tc-button-no-background.tc-hover {
	background: none;
	color: var(--cy-green-500);
}

/* keep sidebar link-buttons light on the navy chrome */
.tc-root-branding-canopy .tc-sidebar .tc-button.tc-button-no-background {
	color: #c5cdc8;
}

.tc-root-branding-canopy .tc-sidebar .tc-button.tc-button-no-background:hover,
.tc-root-branding-canopy .tc-sidebar .tc-button.tc-button-no-background.tc-hover {
	color: #ffffff;
}

/* Session actions (set printers, change password, logout) read better as one
 * rounded panel than as individually-rounded buttons: round the .tc-buttons
 * container and clip the buttons to it, so only the group's outer corners curve.
 * Scope to the session actions group only — the toggler pill and every other
 * button keep their own radius. Specificity (3–4 classes) beats the generic
 * .tc-root-branding-canopy .tc-button rule, so no !important is needed. Lives in
 * the base facelift, so it applies to both Canopy V1 and SH (both carry
 * .tc-root-branding-canopy). */
.tc-root-branding-canopy .tc-sidebar-session .tc-buttons {
	border-radius: var(--cy-radius-control);
	overflow: hidden;
}

.tc-root-branding-canopy .tc-sidebar-session .tc-buttons .tc-button {
	border-radius: 0;
}


/* Inputs
 * -------------------------- */
.tc-root-branding-canopy .tc-input {
	border: 1px solid var(--cy-border-strong);
	border-radius: var(--cy-radius-control);
	background: #ffffff;
	transition: border-color var(--cy-transition), box-shadow var(--cy-transition), background-color var(--cy-transition);
}

.tc-root-branding-canopy .tc-input:hover,
.tc-root-branding-canopy .tc-input.tc-hover {
	color: inherit;
	background-color: #fbfcfb;
	border-color: var(--cy-green-500);
}

.tc-root-branding-canopy .tc-input:focus,
.tc-root-branding-canopy .tc-input.tc-focus {
	border-color: var(--cy-green-600);
	box-shadow: 0 0 0 3px var(--cy-focus);
}

/* error / warning keep their semantic colors, just soften the ring */
.tc-root-branding-canopy .tc-input.tc-input-error:focus,
.tc-root-branding-canopy .tc-input.tc-input-error.tc-focus {
	border-color: #ff0000;
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.22);
}

.tc-root-branding-canopy .tc-input.tc-input-warning:focus,
.tc-root-branding-canopy .tc-input.tc-input-warning.tc-focus {
	border-color: #e0b400;
	box-shadow: 0 0 0 3px rgba(224, 180, 0, 0.25);
}

/* input markers (barcode / search icon / dropdown carets) — neutral fill. The
 * marker is absolutely positioned over the input's border with no border of its
 * own, so against the rounded facelift input it looks borderless. Give it its own
 * matching border (box-sizing keeps it 31px so the border overlays the input's
 * edge and adds a clean inner separator). */
.tc-root-branding-canopy .tc-input > .tc-input-marker,
.tc-root-branding-canopy input.tc-input ~ .tc-input-marker {
	background: var(--cy-neutral);
	color: var(--cy-ink);
	border: 1px solid var(--cy-border-strong);
	box-sizing: border-box;
}

.tc-root-branding-canopy input.tc-input:hover ~ .tc-input-marker,
.tc-root-branding-canopy input.tc-input.tc-hover ~ .tc-input-marker {
	color: var(--cy-green-600);
}

/* Switch control — the selected option must read clearly against the unselected
 * ones. Core only tints it (blue text on light gray); make it a solid green fill
 * with white text so selected vs unselected is unambiguous. */
.tc-root-branding-canopy .tc-input.tc-input-switch.tc-input-checked,
.tc-root-branding-canopy .tc-control.tc-control-switch .tc-control-options:hover .tc-control-option .tc-input.tc-input-switch.tc-input-checked,
.tc-root-branding-canopy .tc-control.tc-control-switch .tc-control-options.tc-hover .tc-control-option .tc-input.tc-input-switch.tc-input-checked {
	color: #ffffff;
	background-color: var(--cy-green-600);
	border-color: var(--cy-green-600);
	outline-color: var(--cy-green-600);
}

/* POS document-type switch — its custom per-slug pastel tint (pos.css #EEF4FB) is
 * too pale on the green theme. Use the standard solid-green selected state. Those
 * pos.css rules are per-slug (high specificity) and load after this file, so
 * !important is required to win (only for this theme; off-theme keeps its tint). */
.tc-root-branding-canopy .tc-control-switch .tc-input-switch[data-slug^="POS_SALE_DOCUMENT_TYPE_"].tc-input-checked {
	background-color: var(--cy-green-600) !important;
	color: #ffffff !important;
	border-color: var(--cy-green-600) !important;
}

/* Input markers (search magnifier, barcode, dropdown caret) sit flush at one end
 * of a rounded input — round their OUTER corners to match (direction-aware). */
.tc-root-rtl.tc-root-branding-canopy .tc-input-marker-pre {
	border-top-right-radius: var(--cy-radius-control);
	border-bottom-right-radius: var(--cy-radius-control);
}
.tc-root-ltr.tc-root-branding-canopy .tc-input-marker-pre {
	border-top-left-radius: var(--cy-radius-control);
	border-bottom-left-radius: var(--cy-radius-control);
}
.tc-root-rtl.tc-root-branding-canopy .tc-input-marker-post {
	border-top-left-radius: var(--cy-radius-control);
	border-bottom-left-radius: var(--cy-radius-control);
}
.tc-root-ltr.tc-root-branding-canopy .tc-input-marker-post {
	border-top-right-radius: var(--cy-radius-control);
	border-bottom-right-radius: var(--cy-radius-control);
}

/* Progress bars — theme green + rounded (upload progress and progress control). */
.tc-root-branding-canopy .tc-input.tc-input-progress,
.tc-root-branding-canopy .tc-input.tc-input-progress .tc-input-progress-bar {
	border-radius: var(--cy-radius-control);
}
.tc-root-branding-canopy .tc-input.tc-input-progress .tc-input-progress-bar {
	background: var(--cy-green-600);
}
.tc-root-branding-canopy .tc-control-progress {
	--progress-color-active: var(--cy-green-600);
}

/* Tabs — Chrome-browser tab style: rounded TOP corners + the signature concave
 * "feet" that flare the active tab outward at its base so it reads as lifted off
 * the bar and merged into the content below. Covers BOTH page tabs (tc_pages nav,
 * rendered as .tc-button-main) AND in-form control-tabs (rendered as plain
 * .tc-button), so the selectors match .tc-button WITHOUT the -main modifier.
 *
 * UNSELECTED = accent fill (raised tab; --cy-green-600 → green in V1, navy in SH
 * via the token), rounded top, flat bottom — sits on the bar like an idle Chrome
 * tab. SELECTED = a white tab pulled to the front (higher z-index) with two
 * pseudo-element feet (::before/::after) at the bottom corners. Each foot is a
 * small square filled with the tab's white, minus a quarter-circle cut via a
 * radial-gradient — that cut is the concave curve that makes the Chrome flare.
 * The feet only extend sideways (never below the tab) so the strip's
 * overflow:auto doesn't clip them or spawn a scrollbar. SH inherits this via the
 * tokens and no longer overrides tab shape/colour. */
.tc-root-branding-canopy .tc-tabs .tc-button,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button {
	position: relative;
	background: var(--cy-green-600);
	color: #ffffff;
	border: none;
	border-radius: 10px 10px 0 0;
	margin: 0 1px;
	transition: background-color var(--cy-transition), color var(--cy-transition);
}

/* The perimeter rail runs the full width and must read as ONE continuous line that
 * only the active tab breaks — so the idle tabs can't hide it. They're opaque and
 * sit on the rail; give them a matching line at their base via an INSET box-shadow
 * (not border-bottom — these tabs are content-box, so a border would add 1px and
 * push their baseline 1px below the active tab and the rail). The inset shadow
 * paints over the green fill with no layout change, so the line cuts across their
 * base at exactly the rail's level, continuous with the gaps and breaking only at
 * the open active tab. */
.tc-root-branding-canopy .tc-tabs .tc-button:not(.tc-button-current),
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button:not(.tc-button-current) {
	box-shadow: inset 0 -1px 0 0 var(--cy-border-strong);
}

/* idle tabs lift slightly on hover, like a Chrome background tab */
.tc-root-branding-canopy .tc-tabs .tc-button:hover,
.tc-root-branding-canopy .tc-tabs .tc-button.tc-hover,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button:hover,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-hover {
	background: var(--cy-green-500);
	color: #ffffff;
}

/* active tab — filled with the SAME colour as the content area it sits over
 * (var(--cy-bg)), so it merges into the page; a 1px perimeter border (top + the
 * two sides; bottom left open) outlines the tab shape against the bar. The feet
 * carry the bordered concave curve so the perimeter continues around the flare. */
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current,
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current:hover,
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current.tc-hover,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current:hover,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current.tc-hover {
	background: var(--cy-bg);
	color: var(--cy-green-600);
	border: 1px solid var(--cy-border-strong);
	border-bottom: none;
	z-index: 3;
}

/* the two concave feet at the active tab's base — the Chrome flare. Each foot is
 * a radial-gradient: a transparent notch, then a 1px ring in the border colour
 * (the perimeter following the concave arc), then the area-below fill. */
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current::before,
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current::after,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current::before,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 9px;
	height: 9px;
	pointer-events: none;
}

.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current::before,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current::before {
	left: -9px;
	background: radial-gradient(circle at top left, transparent 7.5px, var(--cy-border-strong) 7.5px, var(--cy-border-strong) 8.5px, var(--cy-bg) 8.5px);
}

.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-current::after,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-current::after {
	right: -9px;
	background: radial-gradient(circle at top right, transparent 7.5px, var(--cy-border-strong) 7.5px, var(--cy-border-strong) 8.5px, var(--cy-bg) 8.5px);
}

/* The active tab's perimeter must read as a break in a content rule that spans
 * the FULL width — so draw that baseline line all the way to the left edge. Use
 * an INSET box-shadow (not border-bottom): a border would add 1px of height below
 * the tabs, dropping the line under the open tab bottom and closing it. The inset
 * shadow adds no height, so the line lands exactly at the feet baseline (the tab
 * strip sits flush at the title bar's bottom). Child tabs paint over a parent's
 * inset shadow, so each tab's fill covers the segment beneath it — the active tab
 * stays OPEN (merged into the content) while the rail shows in the gaps and across
 * the empty area to the left. Scoped with :has() so only tab-bearing title bars
 * get the rule. */
.tc-root-branding-canopy .tc-main .tc-main-title-inner:has(.tc-tabs) {
	box-shadow: inset 0 -1px 0 0 var(--cy-border-strong);
}

/* In a tabbed control the active content panel connects UP to the tab row, so its
 * TOP corners must be square — the tab itself carries the rounded top. Otherwise
 * the widget's rounded top corner clashes with the tab's square bottom, leaving a
 * notch at the tab/panel junction (the bottom-right corner in RTL). */
.tc-root-branding-canopy .tc-control.tc-control-tabs > .tc-tabs-tabs > .tc-widgets > .tc-widget {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* The control-tab strip is as wide as the panel below it, so the OUTERMOST active
 * tab sits flush with the panel edge and its outer foot (the 9px Chrome flare)
 * overhangs the panel's border — a bulge past the edge. Inset the tab row by the
 * foot width on both inline sides so the outer feet land inside the panel and the
 * flare curves cleanly into the top corner instead of bulging out. */
.tc-root-branding-canopy .tc-control.tc-control-tabs > .tc-tabs-buttons > .tc-buttons {
	padding-left: 13px;
	padding-right: 13px;
}


/* Cards / widgets
 * -------------------------- */
/* no overflow:hidden — it would clip dropdowns / date pickers / baloons that
 * open past the card edge. border-radius alone rounds normal (white-titled) cards. */
.tc-root-branding-canopy .tc-widget {
	border: 1px solid var(--cy-border);
	border-radius: var(--cy-radius-card);
	background: var(--cy-card);
	box-shadow: var(--cy-shadow-card);
	transition: box-shadow var(--cy-transition);
}

.tc-root-branding-canopy .tc-main .tc-main-widgets > .tc-widgets > .tc-widget:hover {
	box-shadow: var(--cy-shadow-hover);
}

.tc-root-branding-canopy .tc-widget .tc-widget-title h2 {
	color: var(--cy-green-600);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tc-root-branding-canopy .tc-widget .tc-widget-separator {
	border-bottom: 1px solid var(--cy-border);
}

/* nested / inner widgets shouldn't double up the shadow */
.tc-root-branding-canopy .tc-widget .tc-widget {
	box-shadow: none;
	border-radius: var(--cy-radius-sm);
}


/* Page title
 * -------------------------- */
.tc-root-branding-canopy .tc-main .tc-main-title-inner h1 {
	color: var(--cy-ink);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.tc-root-branding-canopy .tc-main .tc-main-separator {
	border-bottom: 1px solid var(--cy-border);
}


/* Tables
 * -------------------------- */
.tc-root-branding-canopy .tc-table {
	background-color: #ffffff;
}

.tc-root-branding-canopy .tc-table .tc-table-row:hover,
.tc-root-branding-canopy .tc-table .tc-table-row.tc-hover {
	background: var(--cy-green-050);
}

/* paint the heading fill on each cell, NOT the <tr> — a row background would
 * show a square corner behind any rounded edge cell, defeating the rounding. */
.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading {
	background: transparent;
}

.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading .tc-table-column {
	background: var(--cy-green-600);
}

.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading .tc-table-column:hover,
.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading .tc-table-column.tc-hover,
.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading .tc-table-column.tc-hover-column {
	background: var(--cy-green-500);
}

/* The title is a .tc-button, so the generic button hover would repaint it with
 * the neutral grey fill AND swap the text to dark green — masking the column's
 * accent hover above as a grey patch and leaving an unreadable dark-on-dark
 * caption. Reset to inherit so the column's --cy-green-500 reads through, and
 * keep the heading's white caption on the same accent family as the chrome. */
.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column .tc-table-column-title:hover,
.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column .tc-table-column-title.tc-hover {
	background: inherit;
	color: #ffffff;
}

.tc-root-branding-canopy .tc-table .tc-table-column .tc-table-column-title > .tc-icon {
	color: rgba(255, 255, 255, 0.8);
}

/* Heading separator — clean it up. Two problems came from the column title being a
 * .tc-button, which inherits the generic 1px grey (--cy-border-strong) border:
 *   1. that grey frame sits INSIDE the green cell, insetting the green and doubling
 *      up against the table's own outer card border (--cy-border) at the edges —
 *      two different greys, so the green looks misaligned with the table edge.
 *   2. the column's OWN side border was made transparent for the no-gridline body,
 *      and a transparent border shows the green bg through it, so a green sliver
 *      appears down the middle of the gap.
 * Fix: drop the title border so the green fills flush to the cell edges, and paint
 * the heading column's side borders WHITE (the table background) so the gap reads as
 * clean background-coloured "white space" — no grey frame, no centre sliver. Heading
 * only (body keeps no gridlines); placed before the outer-edge rules so the table's
 * outer card border still wins at the first/last heading cell. */
.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column .tc-table-column-title {
	border-color: transparent;
	border-left-color: #ffffff;
	border-right-color: #ffffff;
}

/* outermost headers: drop the title's OUTER side border so the green sits flush to
 * the table's own card edge (no white/grey inset between the green and the edge). */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child .tc-table-column-title,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child .tc-table-column-title {
	border-right-color: transparent;
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child .tc-table-column-title,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child .tc-table-column-title {
	border-left-color: transparent;
}

/* fill the 1px column-boundary so no green shows between the two white title
 * borders (1px width unchanged → header columns stay aligned with the body). */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column {
	border-left-color: #ffffff;
	border-right-color: #ffffff;
}

/* The general no-gridline rule carries an explicit :last-child / :first-child
 * selector that TIES the specificity above and wins on source order, resetting the
 * outermost column's INNER border back to transparent — so the green sliver returns
 * at just the leftmost (last-child) gap. Re-assert white on the inner side of the
 * first/last heading cell; :last-child/:first-child here outranks both that rule and
 * the outer-edge rule, and only the inner side is touched so the outer card edge
 * stays. (Inner side is direction-dependent: in RTL the last column's inner side is
 * its right; in LTR its left.) */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child {
	border-right-color: #ffffff;
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child {
	border-left-color: #ffffff;
}

/* modern look: horizontal separators only. Keep the soft row dividers (top/
 * bottom), drop the vertical gridlines that read as a dense spreadsheet. Column
 * hover still adds its own vertical accent for sort affordance. */
.tc-root-branding-canopy .tc-table .tc-table-column {
	border-top-color: var(--cy-border);
}

.tc-root-branding-canopy .tc-table .tc-table-row:last-child .tc-table-column {
	border-bottom-color: var(--cy-border);
}

.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column,
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column:last-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column:last-child {
	border-left-color: transparent;
	border-right-color: transparent;
}

/* ...but keep the table closed on its OUTER sides (the edge columns' outer
 * borders) so it reads as a complete card — only the INNER gridlines are dropped.
 * Direction-aware: in RTL the first column is the right edge, last is the left. */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column:first-child {
	border-right-color: var(--cy-border);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column:last-child {
	border-left-color: var(--cy-border);
}
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column:first-child {
	border-left-color: var(--cy-border);
}
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column:last-child {
	border-right-color: var(--cy-border);
}

/* The archive table reads as a rounded card. No overflow:hidden (it would clip
 * column-filter dropdowns and wide horizontally-scrolled tables) — instead round
 * the table box itself plus its four corner cells. border-collapse is `separate`
 * (core), so cell border-radius renders. Each heading edge cell rounds BOTH the
 * <th> and its title span: the title inherits the heading fill and a square title
 * would paint over the cell's rounded corner. Rounding follows :first-child /
 * :last-child, so it tracks whatever the real edge column is (bulk-select /
 * options / context-buttons columns included) regardless of RTL/LTR. */
.tc-root-branding-canopy .tc-table {
	border-radius: var(--cy-radius-control);
}

/* top corners — heading edge cells */
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child .tc-table-column-title {
	border-top-left-radius: var(--cy-radius-control);
}
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child .tc-table-column-title {
	border-top-right-radius: var(--cy-radius-control);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child,
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:first-child .tc-table-column-title {
	border-top-right-radius: var(--cy-radius-control);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child,
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-row-heading .tc-table-column:last-child .tc-table-column-title {
	border-top-left-radius: var(--cy-radius-control);
}

/* bottom corners on the table's TRUE last row — the summary footer (<tfoot>) when
 * present, otherwise the last body row. The :has() guard stops the last <tbody>
 * row from rounding mid-table when a summary footer follows it (which left a notch
 * / odd border just above the summary row). */
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-foot .tc-table-row-summary .tc-table-column:first-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-body:not(:has(~ .tc-table-foot .tc-table-row-summary)) .tc-table-row:last-child .tc-table-column:first-child {
	border-bottom-left-radius: var(--cy-radius-control);
}
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-foot .tc-table-row-summary .tc-table-column:last-child,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-body:not(:has(~ .tc-table-foot .tc-table-row-summary)) .tc-table-row:last-child .tc-table-column:last-child {
	border-bottom-right-radius: var(--cy-radius-control);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-foot .tc-table-row-summary .tc-table-column:first-child,
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-body:not(:has(~ .tc-table-foot .tc-table-row-summary)) .tc-table-row:last-child .tc-table-column:first-child {
	border-bottom-right-radius: var(--cy-radius-control);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-foot .tc-table-row-summary .tc-table-column:last-child,
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-body:not(:has(~ .tc-table-foot .tc-table-row-summary)) .tc-table-row:last-child .tc-table-column:last-child {
	border-bottom-left-radius: var(--cy-radius-control);
}

/* standalone archive table gets a soft card lift to match the rounding. */
.tc-root-branding-canopy .tc-main .tc-main-table {
	box-shadow: var(--cy-shadow-card);
}

/* inline cell action buttons */
.tc-root-branding-canopy .tc-table .tc-table-column .tc-table-cell-buttons {
	background: var(--cy-neutral);
}

/* summary row */
.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-summary {
	background: #eef1ee;
}

/* table-embedded controls stay square & flush with the grid — the rounded
 * form-input look leaves gaps against the green header / white cells (column
 * filter triggers/inputs, inline-edit inputs). The column filter/sort dropdown
 * is NOT in this list — it floats over the grid and is carded below. */
.tc-root-branding-canopy .tc-table .tc-input,
.tc-root-branding-canopy .tc-table .tc-button,
.tc-root-branding-canopy .tc-table .tc-input > .tc-input-marker,
.tc-root-branding-canopy .tc-table input.tc-input ~ .tc-input-marker,
.tc-root-branding-canopy .tc-table .tc-control-options {
	border-radius: 0;
}

/* Checkboxes — one consistent "rounded square" everywhere. The generic .tc-input
 * radius (8px) turns a ~16px checkbox into a circle (e.g. the column-select
 * dropdown), while the table-embedded rule above squares them off (0). Pin both
 * contexts to a small radius so archive rows, the heading select-all, and
 * multi-checkbox options all read the same. */
.tc-root-branding-canopy .tc-input.tc-input-checkbox,
.tc-root-branding-canopy .tc-table .tc-input.tc-input-checkbox {
	border-radius: 4px;
}

/* checked checkbox → green check + green frame (core leaves the check in plain
 * ink, which reads as "disabled" against the theme's green selected-states). */
.tc-root-branding-canopy .tc-input.tc-input-checkbox.tc-input-checked {
	color: var(--cy-green-600);
	border-color: var(--cy-green-600);
}


/* Column filter/sort dropdown — a floating card over the grid
 * -------------------------- */
/* The heading cell's filter/sort dropdown hangs OVER the rows, so the square
 * table-embedded treatment above is wrong for it: unthemed it reads as a flat
 * white patch glued to the table (sharp corners, #ccc frame, no elevation).
 * Card it: the top edge stays flush with the green heading it hangs from
 * (core keeps border-top: 0), the bottom corners round, and the elevated
 * shadow lifts it clearly above the rows. */
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown {
	border-color: var(--cy-border-strong);
	border-radius: 0 0 var(--cy-radius-control) var(--cy-radius-control);
	box-shadow: var(--cy-shadow-elevated);
}

/* controls inside the dropdown are form controls on a card, not grid-embedded —
 * restore the rounded look the table rule strips (checkboxes keep their 4px pin
 * from the rule above, which carries the extra .tc-input-checkbox specificity). */
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-input,
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-button {
	border-radius: var(--cy-radius-sm);
}

/* input end-markers (the select caret, the search magnifier) — round their OUTER
 * corners to follow the rounded input they cap (direction-aware). */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-input-marker-post,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-input-marker-pre {
	border-radius: 0;
	border-top-left-radius: var(--cy-radius-sm);
	border-bottom-left-radius: var(--cy-radius-sm);
}
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-input-marker-pre,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-input-marker-post {
	border-radius: 0;
	border-top-right-radius: var(--cy-radius-sm);
	border-bottom-right-radius: var(--cy-radius-sm);
}

/* sort row — mute the "Sort" caption to a label so the two direction buttons
 * carry the row, and give the row breathing room from the filter below. */
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-table-column-sort {
	margin-bottom: 10px;
}

.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-table-column-sort-caption {
	color: #6b7671;
	font-size: 13px;
	font-weight: 600;
}

/* the text filter's clear (×) — core renders a heavy bordered box taller than
 * the input beside it; make it a quiet round icon button like the theme's
 * other icon actions. */
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-control-extra-action .tc-button {
	background: transparent;
	border: none;
	border-radius: var(--cy-radius-pill);
	color: #6b7671;
}

.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-control-extra-action .tc-button:hover,
.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-control-extra-action .tc-button.tc-hover {
	background: var(--cy-neutral);
	color: var(--cy-green-600);
}

/* apply — a full-width primary action anchoring the card (core floats a small
 * button into a corner, which gets lost under the multi-select's inner panel). */
.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-table-column-dropdown-apply,
.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column-dropdown .tc-table-column-dropdown-apply {
	float: none;
	display: block;
	text-align: center;
}

.tc-root-rtl.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-dropdown-toggler {
	padding-left: 9px;
}

.tc-root-ltr.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-dropdown-toggler {
	padding-right: 9px;
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-dropdown-toggler .tc-input-marker-post {
	display: none;
}


/* Multi-select filter (collection/enum columns) — core opens the options panel
 * as a second white overlay INSIDE the 240px dropdown, floating OVER the select
 * toggler and the Apply button — so after ticking options it is unclear what to
 * click, and the two flat white layers with piecemeal #ccc borders (buttons row,
 * search row, list frame, row sides) blend into one unreadable patchwork.
 * Fix both at once: force the panel into normal flow (position/width/inset are
 * JS-inlined, hence the !importants) so it sits between the toggler and Apply —
 * everything stays visible and Apply anchors the card — and dress it as an
 * inset section: single soft border, rounded, children flattened to horizontal
 * separators only (overflow:hidden clips the rows to the radius; safe — the
 * option list scrolls internally, nothing pops out).
 * display:block keeps the panel expanded PERMANENTLY, not only while the
 * control is "open". This is load-bearing, not cosmetic: a mousedown on Apply
 * fires the select's outside-click close first, and if closing collapsed the
 * in-flow panel the Apply button would jump ~200px up BETWEEN mousedown and
 * mouseup — the click never lands and the filter silently doesn't apply. With
 * the panel always expanded, open/close toggles change nothing visually and
 * nothing ever shifts under the cursor. */
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options {
	display: block;
	position: static !important;
	width: auto !important;
	margin-top: 0;
	background: transparent;
	border: none;
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-buttons,
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-search,
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-clear,
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-search-overflow,
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-search-no-matches {
	border: none;
	border-bottom: 1px solid var(--cy-border);
}

/* the select-all / clear-all links row — align with the option rows' inset */
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options .tc-control-options-buttons {
	padding: 4px 6px 6px;
}

/* AJAX select filters (item lists too large to enumerate — products, customers):
 * core renders the same two-step select, but the opened panel holds ONLY a search
 * box — an empty dropdown step with nothing to pick. Skip it: hide the toggler
 * and show the search box immediately (reading like the plain free-text filter),
 * with matches dropping in below as you type. The toggler stays hidden even with
 * values selected — selection reads from the checked rows, the clear-selected
 * button, and the archive's filter tags. (Do NOT bring it back conditionally,
 * e.g. via :empty on its value span: the value populates on the blur re-render
 * that a mousedown on Apply triggers, so the toggler pops in BETWEEN mousedown
 * and mouseup, shifts the Apply button ~34px down, and the click never lands.) */
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown:has(> .tc-control-options-ajax) > .tc-control-dropdown-toggler {
	display: none;
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options.tc-control-options-ajax {
	display: block;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options.tc-control-options-ajax .tc-control-options-search {
	border: none;
	padding: 0;
}

/* matches arrive as a bordered, internally-scrolling list under the search box */
.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options.tc-control-options-ajax .tc-select-options:not(:empty) {
	margin-top: 6px;
	border: 1px solid var(--cy-border-strong);
	border-radius: var(--cy-radius-sm);
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options.tc-control-options-ajax .tc-control-options-clear {
	border: none;
	padding: 6px 0 0;
}

.tc-root-branding-canopy .tc-table .tc-table-column-filters .tc-control-dropdown .tc-control-options.tc-control-options-ajax .tc-control-options-search-no-matches {
	border: none;
	color: #6b7671;
}

/* drop the list's own frame (bottom + inner-side borders) — the panel border
 * replaces it. Root-direction classes out-specify the core RTL/LTR rules. */
.tc-root-rtl.tc-root-branding-canopy .tc-table-column-filters .tc-control-select-multiple > .tc-control-options .tc-select-options,
.tc-root-ltr.tc-root-branding-canopy .tc-table-column-filters .tc-control-select-multiple > .tc-control-options .tc-select-options {
	border: none;
}

/* option rows: horizontal separators only, soft theme border, green tint hover */
.tc-root-branding-canopy .tc-table-column-filters .tc-control.tc-control-select-multiple .tc-control-option {
	border: none;
	border-bottom: 1px solid var(--cy-border);
	transition: background-color var(--cy-transition);
}

.tc-root-branding-canopy .tc-table-column-filters .tc-control.tc-control-select-multiple .tc-select-options .tc-control-option:hover {
	background: var(--cy-green-050);
}


/* Dialogs / lightbox
 * -------------------------- */
.tc-root-branding-canopy .tc-lightbox {
	background-color: rgba(16, 24, 32, 0.62);
}

.tc-root-branding-canopy .tc-lightbox.tc-lightbox-scroll:before {
	background-color: rgba(16, 24, 32, 0.62);
}

/* NOTE: no overflow:hidden here — the close / prev / next buttons are positioned
 * OUTSIDE the content box (top:-20px, ±25px) and would get clipped. Rounding is
 * carried by the content's own radius + the inner widget's radius instead. */
.tc-root-branding-canopy .tc-lightbox .tc-lightbox-content {
	border-radius: var(--cy-radius-card);
	box-shadow: var(--cy-shadow-elevated);
}

/* inner dialog widget already rounds itself — drop its card shadow inside a dialog */
.tc-root-branding-canopy .tc-lightbox .tc-lightbox-content > .tc-widget {
	box-shadow: none;
}

/* popup iframe: round the iframe itself rather than clipping the content box */
.tc-root-branding-canopy .tc-lightbox.tc-lightbox-popup .tc-lightbox-content > iframe {
	border-radius: var(--cy-radius-card);
}

/* dialog header (widget title) sits at the very top of the rounded dialog; since
 * widgets no longer use overflow:hidden, round the header's top corners so its
 * (gray) background doesn't show a square corner against the rounded dialog. */
.tc-root-branding-canopy .tc-lightbox .tc-widget > .tc-widget-title {
	border-top-left-radius: var(--cy-radius-card);
	border-top-right-radius: var(--cy-radius-card);
}


/* Tabs / archive filter accents
 * -------------------------- */
.tc-root-branding-canopy .tc-layout-archive .tc-layout-archive-buttons a.tc-button-main {
	background-color: var(--cy-green-600);
}

/* form description links → green */
.tc-root-branding-canopy .tc-form .tc-form-description a {
	color: var(--cy-green-600);
}


/* POS thumbnail tiles (product / favorite / payment grids)
 * -------------------------- */
/* round the tiles; overflow:hidden clips the inner colored fill to the radius.
 * Safe here — tiles contain no dropdowns/popups. */
.tc-root-branding-canopy .tc-input.tc-input-thumbnail {
	border-radius: var(--cy-radius-control);
	overflow: hidden;
}

.tc-root-branding-canopy .tc-input.tc-input-thumbnail .tc-image-button {
	border-radius: var(--cy-radius-control);
	/* override pos.css's legacy "adapt to green" fill (#028302) with the theme
	 * green. Higher specificity than pos.css (.tc-input-thumbnail .tc-image-button)
	 * so no !important needed; the payment-tile rule below does need it. */
	background: var(--cy-green-600);
}

/* payment-method tiles get their green from pos.css with high specificity that
 * also loads after this file, so !important is required to retheme them. */
.tc-root-branding-canopy .tc-field[data-field="payment_type"] .tc-input.tc-input-thumbnail {
	background-color: var(--cy-green-600) !important;
}

/* selected tile → green ring instead of the off-theme dusty border */
.tc-root-branding-canopy .tc-input.tc-input-thumbnail.tc-input-checked {
	border-color: var(--cy-green-600);
}


/* Login — branding logo box
 * -------------------------- */
/* the white logo panel sits at the top of the rounded login card; round its top
 * corners so it doesn't read as a square box on a rounded card. */
.tc-root-branding-canopy .tc-branding-logo {
	border-top-left-radius: var(--cy-radius-card);
	border-top-right-radius: var(--cy-radius-card);
	overflow: hidden;
}

/* the credentials card sits flush below the logo panel — square its top corners
 * so the two read as one card (logo panel rounds the top, widget rounds the
 * bottom). Without this the widget's rounded top clashes with the panel's
 * square bottom and the join looks notched. */
.tc-root-branding-canopy .tc-layout-form .tc-widget {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


/* Upload control — friendlier "image already uploaded" state
 * -------------------------- */
/* Once an image is uploaded the control renders three loosely-connected pieces:
 * the preview image, a tiny "⋮" menu pinned to its corner (the ONLY access to
 * download / edit-description / clear), and below it the browse bar reused as a
 * "replace" control — with its filename hidden it reads as an empty, slightly
 * broken input. The base theme leaves the menu easy to miss and the replace bar
 * ambiguous. Retheme the whole with-preview state into one coherent unit: a
 * framed thumbnail, a clear floating "⋮" action button, a themed dropdown card,
 * and a dashed "replace" affordance. All rules gate on -with-preview, so plain
 * (non-image) file uploads — which use the -edit row, not the browse bar — are
 * untouched. RTL/LTR inherited from base; nothing here is directional. */

/* frame the preview so the image reads as a contained thumbnail, not a raw bleed */
.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-preview {
	width: fit-content;
	max-width: 100%;
	padding: 8px;
	border: 1px solid var(--cy-border);
	border-radius: var(--cy-radius-control);
	background: var(--cy-card);
	box-shadow: var(--cy-shadow-card);
}

.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-preview .tc-image {
	border-radius: var(--cy-radius-sm);
}

/* the "⋮" toggler is the only handle for the actions — make it an obvious round
 * floating button (white chip + shadow) instead of a flat, easy-to-miss square. */
.tc-root-branding-canopy .tc-control-upload-preview-menu .tc-button.tc-control-menu-toggler {
	border-radius: var(--cy-radius-pill);
	box-shadow: var(--cy-shadow-card);
}

.tc-root-branding-canopy .tc-control-upload-preview-menu .tc-button.tc-control-menu-toggler:hover,
.tc-root-branding-canopy .tc-control-upload-preview-menu .tc-button.tc-control-menu-toggler.tc-hover {
	color: var(--cy-green-600);
	border-color: var(--cy-green-500);
	box-shadow: var(--cy-shadow-hover);
}

/* the actions dropdown → one clean rounded card with an elevated shadow (the
 * radius clips the stacked option buttons into a single tidy menu). */
.tc-root-branding-canopy .tc-control-upload-preview-menu .tc-context-menu .tc-buttons {
	border-radius: var(--cy-radius-control);
	box-shadow: var(--cy-shadow-elevated);
	overflow: hidden;
	outline: none;
}

/* the reused browse bar = "replace image" affordance. Merge its end-marker icon
 * into the field (no separate grey box) so the whole thing reads as ONE dashed
 * secondary button, and turn it green on hover to signal the replace action. */
.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button {
	border-style: dashed;
	border-color: var(--cy-border-strong);
	background: var(--cy-neutral);
	color: var(--cy-ink);
}

.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button > .tc-input-marker {
	background: transparent;
	border: none;
	color: inherit;
}

.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button:hover,
.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button.tc-hover {
	border-color: var(--cy-green-500);
	background: var(--cy-neutral-hover);
	color: var(--cy-green-600);
}

.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button:hover > .tc-input-marker,
.tc-root-branding-canopy .tc-control-upload.tc-control-upload-with-preview .tc-control-upload-browse-button.tc-hover > .tc-input-marker {
	color: var(--cy-green-600);
}


/* POS cashier screen — flat, boxless layout (classic-theme parity)
 * -------------------------- */
/* The base facelift wraps every widget in a white card; on the cashier screen the
 * sale-creator sections should instead sit directly on the page background — no
 * card bg / border / shadow / radius — so the controls read as one continuous
 * surface like the classic theme, not stacked white boxes. Scoped to the sale-
 * creator layout so only the cashier is affected (the boxes come from this
 * facelift's .tc-widget card, NOT from pos.css — pos.css already sets border:none
 * on these widgets). */
.tc-root-branding-canopy .tc-layout-single[data-item-type="tc_pos_sale_creator"] .tc-widget,
.tc-root-branding-canopy .tc-layout-single[data-item-type="tc_pos_sale_creator"] .tc-widget:hover {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.tc-root-branding-canopy .tc-sidebar-session .tc-button-icon.tc-sidebar-session-buttons-toggler:hover,
.tc-root-branding-canopy .tc-sidebar-session .tc-button-icon.tc-sidebar-session-buttons-toggler.tc-hover {
	color: #ffffff;
}

/* --------------------------
 *
 * themis-facelift-sh.css
 *
 * -------------------------- */

/* ============================================================================
 * Canopy SH — "Shomer Hasaf" navy + gold scheme (shomerhasaf.co.il inspired)
 * ----------------------------------------------------------------------------
 * Thin palette layer that loads AFTER themis-facelift.css (the V1 structural
 * base). The base is left byte-identical: this file only (a) remaps the base's
 * --cy-* accent/chrome tokens to the Shomer Hasaf graphite/navy/gold palette —
 * so every token-driven rule in the base re-colors automatically — and (b) adds
 * the handful of structural overrides the SH look needs (gold active-menu pill,
 * gold table carets, inverted view-tabs, gold input focus).
 *
 * NOTE on token names: the base names its accent slots --cy-green-* / --cy-navy-*
 * for historical reasons. Here those slots simply hold navy / graphite values —
 * read them as "primary accent" / "chrome", not literally green/navy.
 *
 * Gating: both stylesheets are always loaded; the root carries .tc-root-branding-
 * canopy (facelift base, V1+SH) and, for SH only, ALSO .tc-root-branding-canopy-sh.
 * So every rule here is scoped under .tc-root-branding-canopy-sh — inert unless the
 * SH gate class is present. Token remaps and structural overrides match the base
 * selector's specificity and win by load order (this file loads after the base).
 * ========================================================================== */

.tc-root-branding-canopy-sh {
	/* chrome (sidebar) → graphite, not blue */
	--cy-navy-900: #34383b;   /* sidebar base / gradient bottom */
	--cy-navy-800: #3d4145;   /* sidebar top / hover */

	/* primary structural accent → Shomer Hasaf slate navy */
	--cy-green-600: #273f57;  /* table header, buttons, switch, progress, headings */
	--cy-green-500: #33526f;  /* hover / bright */
	--cy-green-050: rgba(39, 63, 87, 0.06);   /* row hover tint */
	--cy-green-tint: rgba(39, 63, 87, 0.16);  /* (menu active is overridden to gold below) */

	/* gold accent family (brand) */
	--cy-gold: #E3B20F;
	--cy-gold-bright: #F0D570;
	--cy-gold-deep: #C98619;

	/* highlight / focus → gold */
	--cy-focus: rgba(227, 178, 15, 0.32);

	/* textual links → brand blue (good contrast on white) */
	--cy-link: #00457A;

	/* neutral cool content background */
	--cy-bg: #F4F5F7;
}


/* Sidebar active menu → gold pill (the hero accent), dark slate text.
 * Overrides the base's green-tint bg + side-bar treatment. */
.tc-root-branding-canopy-sh .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button,
.tc-root-branding-canopy-sh .tc-menu .tc-menu-item.tc-menu-current-parent.tc-menu-closed > .tc-menu-button {
	color: #273f57;
	background: linear-gradient(180deg, var(--cy-gold-bright) 0%, var(--cy-gold) 100%);
}

/* a full gold pill replaces the base's green accent bar */
.tc-root-branding-canopy-sh .tc-menu .tc-menu-item.tc-menu-current > .tc-menu-button:before {
	display: none;
}


/* Table header sort carets → gold (base sets them translucent white) */
.tc-root-branding-canopy-sh .tc-table .tc-table-column .tc-table-column-title > .tc-icon {
	color: var(--cy-gold-bright);
}


/* (View tabs are styled in the base facelift now — the folder-tab shape + the
 * "selected = panel surface" logic live there and recolor automatically through
 * the --cy-green-600 token, so SH needs no tab override.) */


/* Input focus border → gold (the soft gold ring already comes from --cy-focus) */
.tc-root-branding-canopy-sh .tc-input:focus,
.tc-root-branding-canopy-sh .tc-input.tc-focus {
	border-color: var(--cy-gold);
}


/* Disabled main button → neutral gray (base used a green-tinted gray) */
.tc-root-branding-canopy-sh .tc-button.tc-button-main.tc-disabled {
	background-color: #9aa6b0;
}


/* Textual links → brand blue (base routes these through the navy accent slot) */
.tc-root-branding-canopy-sh .tc-button.tc-button-no-background,
.tc-root-branding-canopy-sh .tc-button.tc-button-main.tc-button-no-background,
.tc-root-branding-canopy-sh .tc-form .tc-form-description a,
.tc-root-branding-canopy-sh .tc-button > b {
	color: var(--cy-link);
}

.tc-root-branding-canopy-sh .tc-button.tc-button-no-background:hover,
.tc-root-branding-canopy-sh .tc-button.tc-button-no-background.tc-hover,
.tc-root-branding-canopy-sh .tc-button.tc-button-main.tc-button-no-background:hover,
.tc-root-branding-canopy-sh .tc-button.tc-button-main.tc-button-no-background.tc-hover {
	color: #0a5d9e;
}

/* keep sidebar link-buttons light on the graphite chrome (base sets the color
 * via --cy navy text; re-assert here since the link rule above would darken them) */
.tc-root-branding-canopy-sh .tc-sidebar .tc-button.tc-button-no-background {
	color: #c5cdc8;
}

.tc-root-branding-canopy-sh .tc-sidebar .tc-button.tc-button-no-background:hover,
.tc-root-branding-canopy-sh .tc-sidebar .tc-button.tc-button-no-background.tc-hover {
	color: #ffffff;
}

/* Sidebar user/account toggler (bottom of the chrome) — keep its name + subtitle
 * legible on the graphite sidebar. It's a .tc-button-icon, NOT a
 * .tc-button-no-background, so the sidebar-link lightening above doesn't reach it:
 * the base leaves its text dark by default and turns it navy (--cy-green-600) on
 * hover, both poor contrast on the dark chrome. Compound the two classes (5 of
 * them) so this outweighs the base's `a.tc-button.tc-button-icon:hover` rule. */
.tc-root-branding-canopy-sh .tc-sidebar-session .tc-button-icon.tc-sidebar-session-buttons-toggler {
	color: #c5cdc8;
}

.tc-root-branding-canopy-sh .tc-sidebar-session .tc-button-icon.tc-sidebar-session-buttons-toggler:hover,
.tc-root-branding-canopy-sh .tc-sidebar-session .tc-button-icon.tc-sidebar-session-buttons-toggler.tc-hover {
	color: #ffffff;
}