/* Copyright (c) 2026, Netbee. AGPL-3.0-only.
 *
 * Tema Netbee pentru Helpdesk-ul central (felia „tema Netbee pentru Helpdesk”, după verificarea vizuală H1).
 * Variabilele de culoare și inelul de focus: aceleași valori ca tema academiilor (netbee_academy/public/css/tema_netbee.css,
 * calculate pentru WCAG AA: text 4,5:1, contururi 3:1), copiate aici pentru că site-ul de suport nu instalează netbee_academy.
 * În plus, pentru Helpdesk: textele de ghidare din câmpuri, asteriscul obligatoriu și țintele de atingere pe telefon.
 * Legat în interfața Helpdesk (patch 0007, desk/index.html), în Desk (`app_include_css`) și în paginile web (`web_include_css`).
 */
/* ---------- tema luminoasă ---------- */
html:root {
	/* text secundar: 4,17 → 5,33 pe alb; 3,57 → 4,55 pe gri-3 */
	--ink-gray-5: oklch(0.529 0 0);
	/* pictograme, dezactivat: 2,57 → 3,03 pe gri-2 (prag 3:1) */
	--ink-gray-4: oklch(0.641 0 0);
	/* sume negative, erori: 4,46 → 5,31 pe alb; 3,79 → 4,51 pe roșu-2 */
	--ink-red-6: oklch(0.554 0.208 26.283);
	/* insigna portocalie (amber): 3,55 → 4,84 */
	--ink-amber-8: oklch(0.537 0.136 63.758);
	/* insigna albastră: 4,18 → 4,76 */
	--ink-blue-8: oklch(0.529 0.168 252.355);
	/* insigna verde: 4,54 → 4,86; 4,48 → 4,80 pe gri-2 */
	--ink-green-8: oklch(0.515 0.122 156.15);
	/* butoane albastre subtile, linkuri: 3,00 → 4,77 pe albastru-2 */
	--ink-blue-6: oklch(0.526 0.186 251.565);
	--ink-blue-link: oklch(0.526 0.186 251.565);
	/* inelul de focus: 1,56 → 4,61 pe alb; stă la 2 px de element (vezi mai jos) */
	--focus-outline-default: 2px solid #757575;
	--focus-default: 0 0 0 2px #757575;
	--focus-outline-red: 2px solid #b41d1d;
	--focus-red: 0 0 0 2px #b41d1d;
	--focus-outline-blue: 2px solid #006bc8;
	--focus-blue: 0 0 0 2px #006bc8;
	--focus-outline-green: 2px solid #097b49;
	--focus-green: 0 0 0 2px #097b49;
	--focus-outline-amber: 2px solid #a35800;
	--focus-amber: 0 0 0 2px #a35800;
	--focus-outline-violet: 2px solid #4f3da1;
	--focus-violet: 0 0 0 2px #4f3da1;
	/* culoarea inelelor făcute cu `ring` (box-shadow), vezi mai jos */
	--netbee-inel: #757575;
}

/* ---------- tema închisă (după blocul luminos: aceeași specificitate, câștigă ordinea) ---------- */
html[data-theme="dark"] {
	/* textul secundar avea aceeași valoare ca gray-4: 4,18 → 6,06 pe bază; 3,39 → 4,92 pe gri-2 */
	--ink-gray-5: oklch(0.672 0 0);
	/* rămâne mai deschis decât gray-5 (ierarhia); 4,12 → 4,54 pe gri-3 */
	--ink-gray-6: oklch(0.708 0 0);
	--ink-gray-4: oklch(0.58 0 0);
	/* 3,34 → 6,89 pe bază; 2,34 → 4,81 pe roșu-2 */
	--ink-red-6: oklch(0.734 0.175 25.075);
	--ink-amber-8: oklch(0.763 0.137 69.783);
	--ink-blue-8: oklch(0.777 0.112 244.656);
	--ink-green-8: oklch(0.766 0.089 162.244);
	/* 3,23 → 5,20 pe albastru-2; linkul 2,82 → 4,54 pe gri-2 */
	--ink-blue-6: oklch(0.706 0.143 248.605);
	--ink-blue-link: oklch(0.652 0.154 253.819);
	/* 1,65 → 5,5 pe bază; ≥ 3:1 și pe gri închis selectat (#424242) și pe butoanele albe */
	--focus-outline-default: 2px solid #8e8e8e;
	--focus-default: 0 0 0 2px #8e8e8e;
	--focus-outline-red: 2px solid #ff7575;
	--focus-red: 0 0 0 2px #ff7575;
	--focus-outline-blue: 2px solid #76bef9;
	--focus-blue: 0 0 0 2px #76bef9;
	--focus-outline-green: 2px solid #7dc5a2;
	--focus-green: 0 0 0 2px #7dc5a2;
	--focus-outline-amber: 2px solid #e9a143;
	--focus-amber: 0 0 0 2px #e9a143;
	--focus-outline-violet: 2px solid #baa8f5;
	--focus-violet: 0 0 0 2px #baa8f5;
	/* #8e8e8e: ≥ 3:1 pe tot ce apare pe tema închisă: bază #171717 (5,5), gri selectat din meniul Desk #424242 (3,06)
	 * și butoanele pline albe (3,09), deci merge și desenat spre interior */
	--netbee-inel: #8e8e8e;
}

/* Inelul de focus stă pe fundalul paginii, nu lipit de buton (altfel, pe butonul plin, inelul gri n-ar avea contrast cu
 * butonul). Specificitatea (0,2,1) trece peste `.focus-visible\:focus-ring-*:focus-visible` ale frappe-ui (0,2,0). */
html:root :focus-visible {
	outline-offset: 2px;
}

/* Orice element focusat de la tastatură are un inel vizibil: frappe-ui și Desk folosesc pe multe elemente
 * `outline-none` + un `ring`/`box-shadow` gri deschis (1,2–2,8:1) sau doar o schimbare de chenar. Culoarea vine din
 * --netbee-inel; elementele cu inel colorat frappe-ui (`focus-ring-red/blue/green`) își păstrează culoarea (mai închisă,
 * vezi variabilele de mai sus). */
html:root :focus-visible {
	outline-style: solid !important;
	outline-width: 2px !important;
}
html:root :focus-visible:not([class*="focus-ring-"]) {
	outline-color: var(--netbee-inel) !important;
}
/* câmpurile de text: inelul lipit de chenar (altfel, la fiecare clic într-un câmp, apare un al doilea contur depărtat) */
html:root :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"]):focus-visible {
	outline-offset: 0;
}

/* În containerele care taie ce iese din ele (rândurile din tabelul și lista de vânzări/facturi, filele, meniul lateral,
 * listele cu derulare), inelul se desenează spre interior, ca să nu fie tăiat. */
html:root
	:is(
		[role="tab"],
		[role="row"],
		[role="option"],
		[role="menuitem"],
		tr,
		li,
		header *,
		.overflow-hidden > *,
		.body-sidebar-top *,
		.ellipsis,
		.ellipsis *,
		.navbar-breadcrumbs *
	):not([role="switch"]):not([type="checkbox"]):not([type="radio"]):focus-visible {
	outline-offset: -2px;
}

/* Inelele de focus făcute cu `ring` (box-shadow) pe gri deschis: legăturile din meniul lateral, „Sari la conținutul
 * principal”, câmpurile (`focus:ring-outline-gray-3` ≈ 1,6:1). Doar culoarea inelului se schimbă, nu și chenarele. */
html:root :is(
		.focus-visible\:ring-outline-gray-3:focus-visible,
		.focus\:ring-outline-gray-3:focus-visible,
		.focus\:ring-outline-elevation-2:focus-visible,
		.focus-within\:ring-outline-gray-3:focus-within,
		.focus-within\:ring-outline-gray-2:focus-within
	) {
	--tw-ring-color: var(--netbee-inel);
}

/* Textul ajutător din câmpuri (decizia #4): la 4,5:1, ca textul secundar. Specificitatea (0,1,3) trece peste
 * `.placeholder-ink-gray-4::placeholder` (0,1,1) și peste regulile Desk. */
html:root :is(input, textarea)::placeholder {
	color: var(--ink-gray-5);
	opacity: 1;
}

/* Separatorul „/” din firimiturile frappe-ui (`<span aria-hidden="true" class="text-ink-gray-4">/</span>`, 3,36:1):
 * decorativ, dar e text, deci la gri-ul secundar */
html:root span.text-ink-gray-4[aria-hidden="true"] {
	color: var(--ink-gray-5);
}


/* ---------- Helpdesk ---------- */
/* Textele de ghidare din câmpuri și filtre (placeholder-ink-gray-4: 2,43–2,85) → textul secundar (≥ 4,5:1) */
html:root ::placeholder,
html:root [class*="placeholder-ink-gray"]::placeholder {
	color: var(--ink-gray-5) !important;
	opacity: 1;
}
/* Helpdesk folosește text-ink-gray-4 (gândit pentru pictograme, prag 3:1) și pentru texte: ghidarea din listele de
 * alegere („Client”, „Stare”), indicațiile din formulare (3,03–3,36) → textul secundar (≥ 4,5:1). Pictogramele cu
 * aceeași clasă devin doar puțin mai închise. Stările dezactivate (disabled:…) nu sunt atinse. */
html:root #app .text-ink-gray-4,
html:root [role="dialog"] .text-ink-gray-4,
/* listele de alegere fără valoare (frappe-ui Select: data-[placeholder]:text-ink-gray-4) */
html:root #app [data-placeholder],
html:root [role="dialog"] [data-placeholder] {
	color: var(--ink-gray-5);
}
/* Conturul câmpurilor (WCAG 1.4.11, 3:1 față de fundal): frappe-ui desenează câmpurile pline, cu chenar de aceeași
 * culoare ca umplutura (1,11–1,30). Câmpurile fără chenar prin construcție (border-0, bg-transparent, !border-transparent:
 * panoul tichetului, rândul „Către”, titlul articolului) rămân editoare pe linie,
 * cu eticheta alături. Valorile: luminos #8f8f8f pe alb 3,2:1; închis #6e6e6e pe #171717 3,5:1. */
html:root {
	--netbee-contur: oklch(0.641 0 0);
}
html[data-theme="dark"] {
	--netbee-contur: oklch(0.52 0 0);
}
html:root #app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, button.form-control, button.border-outline-gray-1.bg-surface-gray-2):not([class*="border-transparent"]):not([class~="border-0"]):not([class~="bg-transparent"]),
html:root [role="dialog"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, button.form-control, button.border-outline-gray-1.bg-surface-gray-2):not([class*="border-transparent"]):not([class~="border-0"]):not([class~="bg-transparent"]),
html:root body:not(:has(#app)) :is(input.form-control, textarea.form-control, select.form-control, .form-control input) {
	border: 1px solid var(--netbee-contur) !important;
}
/* pictogramele cele mai deschise (text-ink-gray-3: 1,69–1,78) → pragul de 3:1 */
html:root #app .text-ink-gray-3,
html:root [role="dialog"] .text-ink-gray-3 {
	color: var(--ink-gray-4);
}

/* Asteriscul de câmp obligatoriu (text-ink-red-5: 2,17–3,34) */
html:root .text-ink-red-5 {
	color: var(--ink-red-6);
}

/* Ținte de atingere pe telefon: butoanele frappe-ui au 28 px; WCAG 2.2 cere 24 px, recomandarea Netbee 44 px */
@media (max-width: 640px), (pointer: coarse) {
	html:root #app button:not([role="option"]),
	html:root #app [role="tab"],
	html:root #app a.button,
	html:root [role="dialog"] button {
		min-height: 44px;
	}
	html:root #app button:has(> svg:only-child),
	html:root #app button:has(> span:only-child > svg) {
		min-width: 44px;
	}
	/* bara editorului de răspuns / notă: instrumentele și butoanele („Renunță”, „Notă internă”) pe rânduri separate,
	 * altfel butoanele (40% din lățime) acoperă instrumentele în modul „Notă internă” */
	html:root #app .flex.justify-between.overflow-hidden:has(> .w-\[40\%\]) {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	html:root #app .flex.justify-between.overflow-hidden > .w-\[40\%\] {
		width: 100%;
	}
	/* bara de deasupra listelor („Filtrează 2 ×”, reîncărcarea, sortarea): pe două rânduri când nu încape */
	html:root #app .flex.justify-between.items-center.w-full {
		flex-wrap: wrap;
		gap: 8px;
	}
	/* ce trece pe rândul al doilea („Trimite”, sortarea) rămâne la dreapta, ca pe desktop */
	html:root #app .flex.justify-between.items-center.w-full > :last-child {
		margin-inline-start: auto;
	}
	/* editorul tichetului nou: pe telefon, Helpdesk pune butoanele sub instrumente; „Trimite” la dreapta */
	html:root #app .flex.flex-col.overflow-auto.sm\:flex-row.sm\:justify-between > :last-child {
		align-self: flex-end;
	}
	/* câmpurile de text la aceeași înălțime ca listele de alegere (44 px) */
	html:root #app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([class*="border-transparent"]):not([class~="border-0"]):not([class~="bg-transparent"]),
	html:root [role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([class*="border-transparent"]):not([class~="border-0"]):not([class~="bg-transparent"]) {
		min-height: 44px;
	}
	/* antetul tichetului: butonul de stare („Deschis”) e poziționat absolut într-un container de lățime 0 și acoperea
	 * titlul; îi rezervăm locul, iar calea de navigare se scurtează cu „…” */
	html:root #app header .flex.items-center.gap-2.shrink-0:has(> .absolute.end-0) {
		min-width: 128px;
	}
	/* filele tichetului („Note interne”) pe un rând; bara lor derulează orizontal */
	html:root #app [role="tablist"] > [role="tab"] {
		white-space: nowrap;
		flex-shrink: 0;
	}
	/* comutatoarele (20/50/100, file): „pastila” din buton are înălțime fixă (h-6.5); o întindem pe tot butonul */
	html:root #app [role="radiogroup"] button[role="radio"] {
		align-items: stretch;
	}
	html:root #app [role="radiogroup"] button[role="radio"] > * {
		min-height: 42px;
	}
	html:root body:not(:has(#app)) :is(.form-control, .btn, input.form-control) {
		min-height: 44px;
	}
	html:root body:not(:has(#app)) :is(.forgot-password-message a, .login-content a, .page-footer a, .web-footer a) {
		display: inline-block;
		min-height: 24px;
		padding-block: 4px;
	}
	html:root #app input[type="radio"],
	html:root #app input[type="checkbox"],
	html:root [role="dialog"] input[type="radio"],
	html:root [role="dialog"] input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}

/* Editorul de text (TipTap/ProseMirror): focusul îl arată cursorul de scriere; inelul general de focus ar desena un
 * dreptunghi în jurul întregii zone de răspuns */
html:root .ProseMirror:focus-visible,
html:root .ProseMirror:focus {
	/* !important: regula generală pentru câmpuri, `:is(input:not(…):not(…), …, [contenteditable])`, are specificitatea
	 * argumentului celui mai mare (0,4,2) */
	outline: none !important;
	box-shadow: none !important;
}

/* „Ți-a fost de folos acest articol?”: propoziția și legătura „aici” curg ca text („… deschide un tichet de suport
 * aici”); în rândul flex al Helpdesk, când propoziția se rupe, „aici” rămânea după primul rând */
html:root #app .flex.gap-1:has(> span.text-sm + a > p.underline) {
	display: block;
}
html:root #app .flex.gap-1:has(> span.text-sm + a > p.underline) > *,
html:root #app .flex.gap-1:has(> span.text-sm + a > p.underline) > a > p {
	display: inline;
}
html:root #app .flex.gap-1:has(> span.text-sm + a > p.underline) > a {
	margin-inline-start: 0.25em;
}

/* Avatarele cu inițială din paginile web și din Desk (Frappe: --<culoare>-avatar-color pe --<culoare>-avatar-bg; galbenul
 * avea 1,76:1): fundalul colorat rămâne, inițiala devine textul principal (≥ 4,5:1 pe toate fundalurile deschise).
 * Doar în tema luminoasă: în cea închisă a Desk, fundalurile avatarelor sunt închise. */
html:root:not([data-theme="dark"]) .avatar-frame.standard-image {
	color: #171717 !important;
}