/*
 * SellKit UI — legacy bridge
 * ---------------------------------------------------------------------------
 * style.css (legacy, ~3.5k lines) and assets/css/support-tickets.css stay
 * loaded. This file does three things:
 *
 * 1. LIGHT ISLANDS. Pages that are not redesigned yet are hard-coded for a
 *    light background. tokens.css re-declares the light token set on their
 *    wrappers; here we give those wrappers a light surface, so a user who
 *    picked Dark still gets a readable (light) content area next to the dark
 *    shell. A page leaves the island by adding .ui-main (dashboard pages) or
 *    .ui-auth (auth pages) to its wrapper.
 *
 * 2. BRIDGE. Inside redesigned areas (.ui-main, .ui-auth, .ui-scope) legacy
 *    widgets still rendered by markup you don't own yet (buttons, inputs,
 *    tables, alerts, cards, toggles, the file uploader, ticket threads) are
 *    re-coloured with tokens so they work in dark mode and match the new
 *    look. Colours, borders and radius only — no layout changes — so the
 *    existing JS keeps working.
 *
 * 3. LEGACY ICONS. The single-file icons used as .svg-icon.icon-* CSS
 *    backgrounds had hard-coded fills. They now render as a currentColor
 *    mask of the redrawn Lucide-style icon, everywhere (redesigned or not).
 *    Brand marks (.icon-wordpress) are left untouched.
 *
 * Page engineers: do not edit this file; put page-specific bridge rules in
 * your own pages-*.css file.
 */

/* ===========================================================================
 * 1. Light islands
 * ======================================================================== */
.sellkit-main-content:not(.ui-main),
.full-height-page:not(.ui-auth) {
	background-color: #ffffff;
	color: #333333; /* legacy body colour */
	color-scheme: light;
}
.sellkit-main-content:not(.ui-main) { min-height: 100vh; min-height: 100dvh; }
/* In Dark, a dashboard light island (AffiliateWP pages) sits inside the shell
   as an inset rounded panel instead of a full-bleed white slab. */
:root[data-theme="dark"] .sellkit-main-content.with-vertical-header:not(.ui-main) {
	margin: var(--space-3) var(--space-3) var(--space-3) calc(var(--sidebar-current) + var(--space-3));
	min-height: calc(100dvh - 2 * var(--space-3));
	border-radius: var(--radius-xl);
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .sellkit-main-content.with-vertical-header:not(.ui-main) {
		margin: var(--space-3) var(--space-3) var(--space-3) calc(var(--sidebar-current) + var(--space-3));
		min-height: calc(100dvh - 2 * var(--space-3));
		border-radius: var(--radius-xl);
	}
}
@media (max-width: 1024px) {
	:root[data-theme="dark"] .sellkit-main-content.with-vertical-header:not(.ui-main) { margin-left: var(--space-3); min-height: calc(100dvh - var(--topbar-h) - 2 * var(--space-3)); }
}
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
	:root[data-theme="system"] .sellkit-main-content.with-vertical-header:not(.ui-main) { margin-left: var(--space-3); min-height: calc(100dvh - var(--topbar-h) - 2 * var(--space-3)); }
}
body:not(:has(.ui-main)) .artbees-modal { color: #333333; color-scheme: light; }

/* ===========================================================================
 * 2. Bridge — legacy primitives inside redesigned areas
 * ======================================================================== */
:where(.ui-main, .ui-auth, .ui-scope) a:where(:not([class])) { color: var(--brand); }
/* Legacy .accent-color-link hovers to #1a1f36 (unreadable on dark). */
:is(.ui-main, .ui-auth, .ui-scope) :is(.accent-color-link, .accent-color-link:hover) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Page heading used by most shortcodes */
:is(.ui-main, .ui-scope) .artbees-main-content-title { color: var(--foreground); letter-spacing: var(--tracking-tighter); }
:is(.ui-main, .ui-scope) .artbees-main-content-description { color: var(--muted-foreground); }

/* Buttons (.artbees-btn is the SellKit legacy button too) */
:is(.ui-main, .ui-auth, .ui-scope) :is(.artbees-btn, .sellkit-btn) {
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
:is(.ui-main, .ui-auth, .ui-scope) :is(.artbees-btn, .sellkit-btn):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-primary,
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-primary:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--primary-foreground);
	box-shadow: var(--shadow-xs);
}
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-white,
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-white:hover {
	border-color: var(--border);
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-white:hover { background: var(--accent); }
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-red,
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn-red:hover {
	border-color: var(--destructive);
	background: var(--destructive);
	color: var(--destructive-foreground);
	box-shadow: var(--shadow-xs);
}
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn[disabled],
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn.is-disabled { opacity: 0.5; background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
:is(.ui-main, .ui-auth, .ui-scope) .artbees-btn .btn-icon svg path { stroke: currentColor; }

/* Inputs (.form-control / .sellkit-text-input draw their border as a box-shadow) */
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-control, .sellkit-text-input):not(.ui-input, .ui-textarea, .ui-select) {
	border-radius: var(--radius-md);
	background-color: var(--input-background);
	color: var(--foreground);
	font-family: var(--font-sans);
	box-shadow: 0 0 0 1px var(--input), var(--shadow-xs);
}
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-control, .sellkit-text-input):not(.ui-input, .ui-textarea, .ui-select)::placeholder { color: var(--muted-foreground); opacity: 1; }
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-control, .sellkit-text-input):not(.ui-input, .ui-textarea, .ui-select):focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in srgb, var(--ring) 22%, transparent);
}
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-control, .sellkit-text-input).is-error { box-shadow: 0 0 0 1px var(--destructive); }
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-input-error-msg { color: var(--danger-subtle-foreground); font-size: var(--text-sm); }
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-group label, .sellkit-ticket-field-title) { color: var(--foreground); }
/* frontend.js still writes its Weak/Medium/Strong badge into
   #js__sellkit-password-check-bage; the ui.js meter replaces it visually. */
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-password-strength-padge { display: none; }
:is(.ui-main, .ui-auth, .ui-scope) :is(.form-group .text-muted, .sellkit-ticket-field-hint, .sellkit-toggle-label) { color: var(--muted-foreground); }

/* Toggle switch (.sellkit-toggle). The legacy input is display:none, which
   makes it unreachable by keyboard; inside redesigned areas it is visually
   hidden instead, and the track shows the focus ring. */
:is(.ui-main, .ui-scope) .sellkit-toggle { position: relative; }
:is(.ui-main, .ui-scope) .sellkit-toggle input {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	clip-path: inset(50%);
}
:is(.ui-main, .ui-scope) .sellkit-toggle i { background-color: var(--input); }
:is(.ui-main, .ui-scope) .sellkit-toggle i::before { background-color: var(--muted); }
:is(.ui-main, .ui-scope) .sellkit-toggle i::after { background-color: var(--background); }
:is(.ui-main, .ui-scope) .sellkit-toggle input:checked + i { background-color: var(--primary); }
:is(.ui-main, .ui-scope) .sellkit-toggle input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Alerts — legacy markup without .ui-alert */
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-alert:not(.ui-alert) {
	border-radius: var(--radius-lg);
	background-color: var(--info-subtle);
	color: var(--info-subtle-foreground);
	box-shadow: 0 0 0 1px var(--info-border);
}
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-alert-error:not(.ui-alert) { background-color: var(--danger-subtle); color: var(--danger-subtle-foreground); box-shadow: 0 0 0 1px var(--danger-border); }
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-alert-warning:not(.ui-alert) { background-color: var(--warning-subtle); color: var(--warning-subtle-foreground); box-shadow: 0 0 0 1px var(--warning-border); }
:is(.ui-main, .ui-auth, .ui-scope) .sellkit-alert-success:not(.ui-alert) { background-color: var(--success-subtle); color: var(--success-subtle-foreground); box-shadow: 0 0 0 1px var(--success-border); }

/* Cards */
:is(.ui-main, .ui-scope) :is(.sellkit-card, .artbees-sidebar-card) {
	border-color: var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
}
:is(.ui-main, .ui-scope) :is(.artbees-sidebar-card-title, .sellkit-card-header) { color: var(--card-foreground); }
:is(.ui-main, .ui-scope) .artbees-sidebar-card-desc { color: var(--muted-foreground); }

/* Tables */
:is(.ui-main, .ui-scope) :is(.sellkit-table, .sellkit-ticket-table table) { background: transparent; color: var(--foreground); }
:is(.ui-main, .ui-scope) :is(.sellkit-table, .sellkit-ticket-table) :is(th, td) { border-color: var(--border); }
:is(.ui-main, .ui-scope) .sellkit-table th { background: var(--muted); color: var(--muted-foreground); }
:is(.ui-main, .ui-scope) .sellkit-ticket-table a { color: var(--foreground); }
:is(.ui-main, .ui-scope) .artbees-table-heading-count { color: var(--muted-foreground); }

/* File uploader */
:is(.ui-main, .ui-scope) .sellkit-form-uploader-container {
	border: 1px dashed var(--input);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 50%, transparent);
}
:is(.ui-main, .ui-scope) .sellkit-form-uploader-container.dragover { border-color: var(--ring); background: var(--brand-subtle); }
:is(.ui-main, .ui-scope) .sellkit-form-uploader-content { color: var(--muted-foreground); }
:is(.ui-main, .ui-scope) .sellkit-form-uploader-content a { color: var(--brand); }
:is(.ui-main, .ui-scope) .sellkit-form-uploader-icon { border-color: var(--border); background: var(--background); color: var(--foreground); }
:is(.ui-main, .ui-scope) .sellkit-form-uploader-icon svg { stroke: currentColor; }
:is(.ui-main, .ui-scope) .sellkit-uploader-file-name { color: var(--foreground); }
:is(.ui-main, .ui-scope) .sellkit-uploader-file-size { color: var(--muted-foreground); }
:is(.ui-main, .ui-scope) .sellkit-uploader-file-type svg path.brand-fill { fill: var(--primary); }

/* Ticket thread (includes/class-support-tickets.php renderThreads()) */
:is(.ui-main, .ui-scope) .sellkit-ticket-thread { border-color: var(--border); background: var(--card); color: var(--card-foreground); }
:is(.ui-main, .ui-scope) .sellkit-ticket-thread-agent { background: color-mix(in srgb, var(--brand-subtle) 60%, var(--card)); }
:is(.ui-main, .ui-scope) .sellkit-ticket-thread-meta { color: var(--muted-foreground); }
:is(.ui-main, .ui-scope) .sellkit-ticket-thread-body { color: var(--card-foreground); }
:is(.ui-main, .ui-scope) .sellkit-ticket-attachment { background: var(--muted); color: var(--foreground); }

/* TinyMCE frame (the editor content itself is an iframe and stays light). */
:is(.ui-main, .ui-scope) .sellkit-ticket-editor .tox-tinymce { border-radius: var(--radius-md) !important; box-shadow: 0 0 0 1px var(--input) !important; }

/* ===========================================================================
 * 3. Legacy icons → currentColor masks of the redrawn icons
 * ---------------------------------------------------------------------------
 * The colour now comes from `color`; status icons keep their meaning by
 * mapping to status tokens.
 * ======================================================================== */
.svg-icon:is(.icon-calendar-gray, .icon-calendar-yellow, .icon-warning-red, .icon-check, .icon-close-red, .icon-close-gray,
	.icon-external-link, .icon-upload, .icon-connect-link, .icon-question-accent, .icon-logout, .icon-hamburger-menu,
	.icon-arrow-down, .icon-search, .icon-download, .icon-support, .icon-contract, .icon-web, .icon-networking, .icon-gem,
	.icon-user-profile, .icon-dashboard, .icon-plugins) {
	background: currentColor;
	-webkit-mask: var(--legacy-icon) center / contain no-repeat;
	mask: var(--legacy-icon) center / contain no-repeat;
}
.svg-icon.icon-calendar-gray     { --legacy-icon: url(../../icons/time/calendar.svg); color: var(--muted-foreground); }
.svg-icon.icon-calendar-yellow   { --legacy-icon: url(../../icons/time/calendar.svg); color: var(--warning); }
.svg-icon.icon-warning-red       { --legacy-icon: url(../../icons/alerts_feedback/alert-triangle.svg); color: var(--destructive); }
.svg-icon.icon-check             { --legacy-icon: url(../../icons/general/check-circle.svg); color: var(--success); }
.svg-icon.icon-close-red         { --legacy-icon: url(../../icons/general/x-close.svg); color: var(--destructive); cursor: pointer; }
.svg-icon.icon-close-gray        { --legacy-icon: url(../../icons/general/x-close.svg); color: var(--muted-foreground); }
.svg-icon.icon-external-link     { --legacy-icon: url(../../icons/general/link-external-01.svg); }
.svg-icon.icon-upload            { --legacy-icon: url(../../icons/general/upload-01.svg); }
.svg-icon.icon-connect-link      { --legacy-icon: url(../../icons/arrows/switch-horizontal-01.svg); color: var(--muted-foreground); }
.svg-icon.icon-question-accent   { --legacy-icon: url(../../icons/general/help-circle.svg); color: var(--brand); }
.svg-icon.icon-logout            { --legacy-icon: url(../../icons/general/log-out-01.svg); }
.svg-icon.icon-hamburger-menu    { --legacy-icon: url(../../icons/general/menu-01.svg); }
.svg-icon.icon-arrow-down        { --legacy-icon: url(../../icons/arrows/chevron-down.svg); }
.svg-icon.icon-search            { --legacy-icon: url(../../icons/general/search-lg.svg); }
.svg-icon.icon-download          { --legacy-icon: url(../../icons/general/download-cloud-01.svg); }
.svg-icon.icon-support           { --legacy-icon: url(../../icons/general/life-buoy-01.svg); }
.svg-icon.icon-contract          { --legacy-icon: url(../../icons/finance_ecommerce/credit-card-lock.svg); }
.svg-icon.icon-web               { --legacy-icon: url(../../icons/development/browser.svg); }
.svg-icon.icon-networking        { --legacy-icon: url(../../icons/users/users-plus.svg); }
.svg-icon.icon-gem               { --legacy-icon: url(../../icons/finance_ecommerce/diamond-01.svg); }
.svg-icon.icon-user-profile      { --legacy-icon: url(../../icons/users/user-01.svg); }
.svg-icon.icon-dashboard         { --legacy-icon: url(../../icons/general/home-smile.svg); }
.svg-icon.icon-plugins           { --legacy-icon: url(../../icons/development/puzzle-piece-01.svg); }