/*
 * TIJARI UI refresh: tokens, fonts and base rules.
 * Loaded by header.php AFTER the legacy CSS (bootstrap, style.css), plain unlayered CSS,
 * so it wins by order. (A cascade-layer wrapper around the legacy CSS was tried and dropped
 * for now: with it the page rendered unstyled in the user's Chrome.)
 * A legacy `!important` still wins over this file: remove those in css/style.css when needed.
 *
 * Fonts (self-hosted, put the 2 files in /fonts/ui/):
 *   inter-latin-wght-normal.woff2              <- npm @fontsource-variable/inter
 *   noto-kufi-arabic-arabic-wght-normal.woff2  <- npm @fontsource-variable/noto-kufi-arabic
 * Without the files the system fallback stack in --ui-font is used.
 */



/* ---------- Fonts: one family name, the browser picks the face per character ---------- */
@font-face {
	font-family: "Tijari UI";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../fonts/ui/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Tijari UI";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../fonts/ui/noto-kufi-arabic-arabic-wght-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- Design tokens (OKLCH, light-dark(); all text pairs checked AA) ---------- */
:root {
	/* Step 0: light only. Switch to `light dark` when the shell is themed (step 2),
	   otherwise form controls and scrollbars go dark on top of legacy light pages. */
	color-scheme: light;

	/* Surfaces and text */
	--ui-canvas: light-dark(oklch(.975 .008 290), oklch(.15 .01 285));
	--ui-surface: light-dark(oklch(1 0 0), oklch(.20 .015 285));
	--ui-text: light-dark(oklch(.20 .02 290), oklch(.95 .005 285));
	--ui-muted: light-dark(oklch(.50 .02 290), oklch(.72 .02 285));
	--ui-border: light-dark(oklch(.91 .01 290), oklch(.29 .02 285));
	--ui-field-border: light-dark(oklch(.58 .02 290), oklch(.60 .02 285)); /* >= 3:1 on surface */

	/* Accent */
	--ui-accent: light-dark(oklch(.50 .22 295), oklch(.76 .17 295));
	--ui-on-accent: light-dark(oklch(1 0 0), oklch(.15 .03 290));

	/* Navbar */
	--ui-nav: light-dark(oklch(.20 .02 290), oklch(.12 .01 285));
	--ui-on-nav: light-dark(oklch(.97 .005 290), oklch(.95 .005 285));
	--ui-nav-underline: light-dark(oklch(.76 .15 295), oklch(.76 .17 295)); /* >= 3:1 on nav */

	/* Status and entity chips: bg / fg pairs */
	--ui-success-bg: light-dark(oklch(.95 .05 155), oklch(.28 .05 155));
	--ui-success-fg: light-dark(oklch(.38 .09 155), oklch(.85 .12 155));
	--ui-warning-bg: light-dark(oklch(.96 .07 85), oklch(.30 .06 85));
	--ui-warning-fg: light-dark(oklch(.40 .09 70), oklch(.88 .12 85));
	--ui-danger-bg: light-dark(oklch(.95 .03 20), oklch(.29 .07 20));
	--ui-danger-fg: light-dark(oklch(.42 .17 25), oklch(.86 .10 20));
	--ui-client-bg: light-dark(oklch(.95 .03 235), oklch(.28 .05 240));   /* sky tag */
	--ui-client-fg: light-dark(oklch(.40 .10 240), oklch(.86 .08 235));
	--ui-supplier-bg: light-dark(oklch(.95 .06 75), oklch(.30 .06 70));   /* amber tag */
	--ui-supplier-fg: light-dark(oklch(.42 .10 60), oklch(.88 .10 80));

	/* Depth: 2 elevations. Dark mode drops the shadow colour and relies on borders. */
	--ui-shadow-color: light-dark(oklch(.20 .02 290 / .09), oklch(0 0 0 / 0));
	--ui-elev-1: 0 1px 2px var(--ui-shadow-color), 0 2px 8px var(--ui-shadow-color);
	--ui-elev-2: 0 2px 4px var(--ui-shadow-color), 0 8px 24px var(--ui-shadow-color);

	/* Shape and spacing (4 px base) */
	--ui-radius-control: 10px;
	--ui-radius-card: 14px;
	--ui-space-1: .25rem;
	--ui-space-2: .5rem;
	--ui-space-3: .75rem;
	--ui-space-4: 1rem;
	--ui-space-6: 1.5rem;
	--ui-space-8: 2rem;
	--ui-target-min: 2rem; /* 32 px, never below 24 px */

	/* Type */
	--ui-font: "Tijari UI", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	--ui-text-xs: .75rem;
	--ui-text-sm: .875rem;
	--ui-text-md: 1rem;
	--ui-text-lg: 1.25rem;
	--ui-text-xl: 1.5rem;
	--ui-text-2xl: 1.75rem;
	--ui-leading-ar: 1.7;

	/* Focus */
	--ui-focus-ring: 2px solid var(--ui-accent);
	--ui-focus-offset: 2px;
}

/* Manual override, used by the theme toggle (step 2). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }


/* ---------- Base: only what step 0 needs (fonts, focus, motion) ---------- */
body {
	font-family: var(--ui-font);
	letter-spacing: normal; /* legacy 1px spacing breaks Arabic letter joining */
}

/* Form controls ignore the page font by default; legacy set Helvetica on them. */
input:not([class*="icon-"]):not([class*="glyphicon"]),
select,
textarea,
button:not([class*="icon-"]):not([class*="glyphicon"]) {
	font-family: inherit;
}

/* Icon fonts: legacy css/style.css sets font-family 'arial' on icon-* elements, so the FontAwesome
   glyphs (e.g. \f044) fall back to whatever the OS has and can show as empty boxes.
   Use the FontAwesome face that style.css already declares (files in /fonts/). */
[class^="icon-"],
[class*=" icon-"] {
	font-family: FontAwesome;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--ui-focus-ring);
	outline-offset: var(--ui-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* Component styles are added from step 1 on, in separate files linked after this one. */


/* ---------- Typography: Arabic needs 16 px body text; legacy was 13-14 px ---------- */
body {
	font-size: var(--ui-text-md);
	line-height: var(--ui-leading-ar);
}

label,
input,
button,
select,
textarea,
.btn {
	font-size: var(--ui-text-md);
	line-height: var(--ui-leading-ar);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	text-align: start; /* with dir="rtl" on <html> text and placeholders start on the right */
}


/* WhatsApp green (brand colour, kept by decision) */
:root {
	--ui-wa-bg: light-dark(oklch(.50 .13 160), oklch(.72 .15 160));
	--ui-wa-fg: light-dark(oklch(1 0 0), oklch(.18 .04 160));
}


/* ---------- Select (all pages): modern field; customizable picker where supported ---------- */
select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: auto;
	min-height: 2.5rem;
	padding-block: var(--ui-space-2);
	padding-inline: var(--ui-space-3) 2.25rem;
	color: var(--ui-text);
	background-color: var(--ui-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23737080' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--ui-space-3) center; /* dir="rtl": the indicator sits at the inline end */
	background-size: 1rem;
	border: 1px solid var(--ui-field-border);
	border-radius: var(--ui-radius-control);
	box-shadow: none;
	font: inherit;
	font-size: var(--ui-text-md); /* 16 px: no iOS zoom on focus */
	line-height: 1.5;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

select:not([multiple]):not([size]):dir(ltr) {
	padding-inline: var(--ui-space-3) 2.25rem;
	background-position: right var(--ui-space-3) center;
}

select:not([multiple]):not([size]):hover {
	border-color: color-mix(in oklab, var(--ui-accent) 55%, var(--ui-field-border));
}

select:not([multiple]):not([size]):focus,
select:not([multiple]):not([size]):focus-visible {
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-accent) 22%, transparent);
	outline: none;
}

select:disabled {
	opacity: .6;
	cursor: not-allowed;
}

@supports (appearance: base-select) {
	select:not([multiple]):not([size]),
	select:not([multiple]):not([size])::picker(select) {
		appearance: base-select;
	}

	select:not([multiple]):not([size]) {
		display: inline-flex;
		align-items: center;
		gap: var(--ui-space-2);
		padding-inline: var(--ui-space-3);
		background-image: none;
	}

	select:not([multiple]):not([size])::picker-icon {
		content: "";
		width: 1rem;
		height: 1rem;
		background-color: var(--ui-muted);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: rotate .2s ease;
	}

	select:not([multiple]):not([size]):open::picker-icon {
		rotate: 180deg;
	}

	select:not([multiple]):not([size])::picker(select) {
		margin-block: var(--ui-space-1);
		padding: var(--ui-space-1);
		max-height: min(24rem, 60dvh);
		color: var(--ui-text);
		background: var(--ui-surface);
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius-control);
		box-shadow: var(--ui-elev-2);
	}

	select:not([multiple]):not([size]) option {
		display: flex;
		align-items: center;
		gap: var(--ui-space-2);
		min-height: 2.5rem;
		padding: var(--ui-space-1) var(--ui-space-3);
		border-radius: calc(var(--ui-radius-control) - 4px);
		font-size: var(--ui-text-md);
	}

	select:not([multiple]):not([size]) option:hover,
	select:not([multiple]):not([size]) option:focus-visible {
		background: color-mix(in oklab, var(--ui-accent) 10%, var(--ui-surface));
		outline: none;
	}

	select:not([multiple]):not([size]) option:checked {
		color: var(--ui-accent);
		font-weight: 600;
	}

	select:not([multiple]):not([size]) option::checkmark {
		color: var(--ui-accent);
	}
}


/* ---------- Page transitions (cross-document View Transitions; Chrome/Edge 126+, Safari 18.2+) ---------- */
@view-transition {
	navigation: auto;
}

.navbar { view-transition-name: ui-appbar; }
.ui-tabbar { view-transition-name: ui-tabbar; }

::view-transition-old(root) {
	animation: 140ms ease-in both ui-vt-out;
}

::view-transition-new(root) {
	animation: 200ms ease-out both ui-vt-in;
}

@keyframes ui-vt-out { to { opacity: 0; } }
@keyframes ui-vt-in { from { opacity: 0; translate: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ---------- Loading bar (js/ui/app.js adds .is-loading on navigation) ---------- */
.ui-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2000;
	height: 3px;
	background: var(--ui-nav-underline);
	transform-origin: right; /* dir="rtl": grows from the start side */
	scale: 0 1;
	opacity: 0;
	pointer-events: none;
}

.is-loading .ui-progress {
	opacity: 1;
	animation: ui-progress 8s cubic-bezier(.1, .7, .2, 1) forwards;
}

@keyframes ui-progress {
	from { scale: 0 1; }
	to { scale: .9 1; }
}

@media (prefers-reduced-motion: reduce) {
	.is-loading .ui-progress {
		animation: none;
		scale: .6 1;
	}
}