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


/* 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 (dropdown carets, etc.) — neutral, follow the input radius */
.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);
}

.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;
}

/* Tabs (e.g. tc_pages page nav) — match the switch convention used across the
 * system: SELECTED tab = solid green pill (white text), UNSELECTED = white pill
 * with a border + dark text. Tabs render as .tc-button-main, so override their
 * green fill when NOT current, and keep solid green for the current tab. */
.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-main,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-main {
	background: #ffffff;
	color: var(--cy-ink);
	border: 1px solid var(--cy-border-strong);
}

.tc-root-branding-canopy .tc-tabs .tc-button.tc-button-main.tc-button-current,
.tc-root-branding-canopy .tc-control.tc-control-tabs .tc-tabs-buttons .tc-button.tc-button-main.tc-button-current {
	background: var(--cy-green-600);
	color: #ffffff;
	border-color: var(--cy-green-600);
}


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

.tc-root-branding-canopy .tc-table .tc-table-row.tc-table-row-heading {
	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);
}

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

/* soften the grid borders */
.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: var(--cy-border);
	border-right-color: var(--cy-border);
}

/* rounded header corners (RTL-aware) */
.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-sm);
}
.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-sm);
}
.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-sm);
}
.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-sm);
}

/* standalone archive table gets a soft lift — no overflow:hidden / radius on the
 * container (it would clip column-filter dropdowns and wide horizontally-scrolled
 * tables). The rounded header is carried by the heading title-cell rules above. */
.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). */
.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-table-column-dropdown,
.tc-root-branding-canopy .tc-table .tc-control-options {
	border-radius: 0;
}


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


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

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