/* ============================================================================
 * 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 at rest — the facelift's own `.tc-root-branding-canopy .tc-input` border
 * rule (equal specificity, later in the cascade) overrides the core `.tc-input.tc-input-error`
 * red, so an unfocused invalid field (e.g. a required checkbox after blur) would otherwise show
 * the plain grey border with no error indication. Restore the semantic colour here — three
 * classes, so it beats the two-class `.tc-root-branding-canopy .tc-input` border without
 * !important; the :focus rules below still layer the ring on top when the field is focused. */
.tc-root-branding-canopy .tc-input.tc-input-error {
	border-color: #ff0000;
}

.tc-root-branding-canopy .tc-input.tc-input-warning {
	border-color: #e0b400;
}

/* 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);
}

/* Disabled markers — the base marker rule above (equal specificity, earlier in the cascade)
 * otherwise keeps a disabled field's end-marker fully themed (neutral fill, dark glyph, active
 * border), and the hover rule turns it green, while the field body correctly greys out. Match the
 * marker to the core disabled greys (#ededed fill, #b0b0b0 glyph) and blend its border into the
 * disabled body's #ededed edge. Placed AFTER the hover rule so the sibling form also wins the
 * equal-specificity (0,4,1) colour tie when a disabled field is hovered — no green highlight. */
.tc-root-branding-canopy .tc-input.tc-disabled > .tc-input-marker,
.tc-root-branding-canopy input.tc-input.tc-disabled ~ .tc-input-marker {
	background-color: #ededed;
	color: #b0b0b0;
	border-color: #ededed;
}

/* 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;
}