:root {
	 /* Local @font-face declarations (use these when font files are provided
		 in webui/assets/fonts/). Add Marhey.woff2 to that directory to prefer
		 the local decorative font in tests/CI and avoid external network.
		 Example files are not bundled by the assistant; add them manually. */
	@font-face {
		font-family: 'Marhey';
		src: url('/webui/assets/fonts/Marhey-400.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: 'Marhey';
		src: url('/webui/assets/fonts/Marhey-500.ttf') format('truetype');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: 'Marhey';
		src: url('/webui/assets/fonts/Marhey-600.ttf') format('truetype');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: 'Marhey';
		src: url('/webui/assets/fonts/Marhey-700.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	 /* Test-time fallback: when running locally and the decorative font is
		 not available, we will prefer the Rubik stack to ensure deterministic
		 rendering in headless test environments. The JS code may resolve
		 tokens at runtime; this CSS ensures sensible defaults. */
	--font-base: 'Rubik','Vazirmatn','Noto Sans Arabic','Almarai','Cairo','Inter','Roboto','Source Sans 3','Tahoma',sans-serif;
	--font-arabic: 'Noto Sans Arabic','Almarai','Cairo','Rubik','Vazirmatn','Tahoma',sans-serif;
	--font-latin: 'Inter','Rubik','Roboto','Source Sans 3','Tahoma',sans-serif;
	--font-alt1: 'Cairo','Rubik','Noto Sans Arabic','Almarai','Inter','Roboto',sans-serif;
	--font-alt2: 'Almarai','Rubik','Noto Sans Arabic','Cairo','Inter','Roboto',sans-serif;
	--font-zain: 'Zain','Noto Sans Arabic','Rubik','Cairo','Almarai','Inter',sans-serif;
	--font-gulzar: 'Gulzar','Noto Sans Arabic','Rubik','Cairo','Almarai','Inter',serif;
	--font-katibeh: 'Katibeh','Noto Sans Arabic','Rubik','Cairo','Almarai','Inter',cursive;
	--font-marhey: 'Marhey','Noto Sans Arabic','Rubik','Cairo','Almarai','Inter',sans-serif;
	--radius-xs:3px; --radius-sm:6px; --radius-md:10px;
	--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
	--shadow-sm:0 1px 2px rgba(0,0,0,.08);
	--shadow-md:0 4px 10px rgba(0,0,0,.10);
	--border:#d4dae2;
	--border-dark:#2d3642;
	--accent: var(--color-primary, #1976d2);
	--accent-hover:#145da3;
	--danger:#c62828;
	--danger-hover:#a31f1f;
	--surface: var(--color-surface, #fff);
}
/* Make sizing predictable and prevent horizontal overflow */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; }
/* NOTE: removed global overflow-x:hidden to allow auditing specific components for overflow. */
body { margin:0; font-family: var(--font-base); background:var(--color-bg); color:var(--color-text); -webkit-font-smoothing:antialiased; }
body.login-mode .app-sidebar, body.login-mode #sidebar, body.login-mode #userBadge { display:none!important; }
body.login-mode .app-main { padding:0!important; }
body.login-mode .app-shell { min-height:100vh; display:flex; }
body.login-mode #main { width:100%; display:flex; align-items:center; justify-content:center; padding:40px 16px; }

.app-shell { display:flex; min-height:100vh; }
.app-sidebar { width:250px; background:var(--surface); border-inline-end:1px solid var(--border); padding:var(--space-4) var(--space-3); display:flex; flex-direction:column; gap:var(--space-3); box-shadow:var(--shadow-sm); min-width:0; }
.app-main { flex:1; padding:var(--space-6) var(--space-6); overflow-y:auto; min-width:0; }

nav.app-nav a { text-decoration:none; color:var(--color-text); padding:6px 10px; display:block; border-radius:var(--radius-sm); font-size:14px; }
nav.app-nav a:hover, nav.app-nav a.active { background:var(--accent); color:#fff; }

.brand { font-weight:600; font-size:18px; margin-bottom:var(--space-2); }

.toolbar { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
button, .btn { cursor:pointer; font-family:inherit; border:1px solid var(--border); background:var(--surface); color:var(--color-text); padding:6px 14px; border-radius:var(--radius-sm); font-size:14px; line-height:1.2; transition:background .15s,border-color .15s,color .15s; }
button.btn-sm, .btn.btn-sm { padding:4px 10px; font-size:12px; }
button.btn-xs, .btn.btn-xs { padding:2px 6px; font-size:11px; }
button:hover, .btn:hover { background:#eef2f6; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:var(--danger-hover); }
input[type=text], textarea, select { font-family:inherit; font-size:14px; border:1px solid var(--border); border-radius:var(--radius-xs); padding:6px 8px; background:var(--surface); color:var(--color-text); box-sizing:border-box; }
input[type=text]:focus, textarea:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-sm); }
.card.stat-accent { background:linear-gradient(135deg,var(--accent) 0%, #0d4d85 90%); color:#fff; border-color:rgba(255,255,255,.25); }
.card.stat-accent .muted { color:rgba(255,255,255,.75); }
.stat-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.mini-list ul { list-style:none; margin:0; padding:0; }
.mini-list ul li { display:flex; gap:6px; font-size:12px; padding:4px 0; border-bottom:1px solid var(--border); }
.mini-list ul li:last-child { border-bottom:none; }
.card + .card { margin-top:var(--space-4); }
.section-title { margin-top:0; margin-bottom:var(--space-3); font-size:18px; font-weight:600; }

ul.clean { list-style:none; margin:0; padding:0; }
ul.clean li { padding:4px 0; border-bottom:1px solid var(--border); }
ul.clean li:last-child { border-bottom:none; }

.split { display:flex; gap:var(--space-4); }
.grow { flex:1; }

/* Allow flex children to shrink and avoid forcing horizontal scrollbar */
.split > * { min-width:0; }
.grow { min-width:0; }

/* Make media and long text responsive so they can't push layout horizontally */
img, video, iframe, svg { max-width:100%; height:auto; display:block; }
pre, code, table { max-width:100%; overflow-x:auto; }
button, input, textarea, select { min-width:0; word-break:break-word; }
.card { word-wrap:break-word; overflow-wrap:anywhere; }

.muted { color:#687280; font-size:12px; }
.badge { display:inline-block; background:var(--accent); color:#fff; padding:2px 6px; border-radius:var(--radius-xs); font-size:11px; }

/* Poem list / cards */
.poem-list { list-style:none; margin:0; padding:0; }
.poem-list.row-view li { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--surface); transition:box-shadow .18s, transform .18s, border-color .18s; }
.poem-list.row-view li:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.poem-list.row-view a { flex:1; text-decoration:none; color:var(--color-text); font-weight:500; }
.poem-list.row-view .meta { font-size:12px; color:#5d6672; }

.poem-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin:0; padding:0; }
.poem-grid .poem-card { list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s, border-color .25s; }
.poem-grid .poem-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.poem-grid .title { font-size:15px; font-weight:600; margin:0; }
.poem-grid .author { font-size:13px; opacity:.8; }
.poem-grid .tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag-chip { background:#eef2f6; color:#2f3a45; border-radius:999px; padding:2px 8px; font-size:11px; line-height:1; }
[data-theme='dark'] .tag-chip { background:#2f3a45; color:#d6dbe0; }

.view-toggle { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.view-toggle button { background:transparent; border:0; padding:6px 10px; cursor:pointer; font-size:13px; color:var(--color-text); display:flex; align-items:center; gap:4px; }
.view-toggle button.active { background:var(--accent); color:#fff; }

.bulk-bar { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; box-shadow:var(--shadow-sm); font-size:13px; }
.bulk-bar .count { font-weight:600; }

.fade-in { animation:fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }

.progress { position:relative; background:#d8dde3; border-radius:999px; height:10px; overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--accent); width:0%; transition:width .25s; }

@media (max-width:900px) {
 	/* On narrow viewports the sidebar is replaced by a hamburger menu.
 	   Hide the sidebar by default and only show it when explicitly opened
 	   via body[data-sb-hidden='0'] so it is not present in layout/automation. */
 	.app-sidebar, #sidebar { display:none !important; }

	/* When the app requests the sidebar to be visible (data-sb-hidden='0'),
	   show it as a full-screen fixed overlay. JS toggles that attribute. */
	body[data-sb-hidden='0'] .app-sidebar,
	body[data-sb-hidden='0'] #sidebar {
		display:block !important;
		position:fixed !important;
		inset:0 !important;
		width:100% !important;
		max-width:100% !important;
		transform:none !important;
		transition:none !important;
		z-index:1300 !important;
		overflow:auto !important;
		-webkit-overflow-scrolling:touch !important;
	}

	/* Center nav and control items when the sidebar is shown as an overlay */
	body[data-sb-hidden='0'] #sidebar nav{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; }
	body[data-sb-hidden='0'] #sidebar .controls-wrap{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px; }
	body[data-sb-hidden='0'] #sidebar .controls-wrap select, body[data-sb-hidden='0'] #sidebar .controls-wrap button, body[data-sb-hidden='0'] #sidebar .controls-wrap #userBadgeInline{ margin:0 auto !important; }
	body[data-sb-hidden='0'] #sidebar nav a{ text-align:center; justify-content:center; }

	/* Prevent the underlying page from scrolling while the overlay is open. */
	body[data-sb-hidden='0'] {
		overflow:hidden !important;
	}
	.app-main { padding:var(--space-4); }
}

/* Enhanced narrow viewport adjustments */
@media (max-width:640px){
	.toolbar { flex-direction:column; align-items:stretch; }
	.nav-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important; }
	form, .card form { flex-direction:column !important; }
	input, textarea, select, button, .btn { font-size:13px; }
	.poem-detail-flex { flex-direction:column !important; }
	.poem-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
	.user-card { padding:12px !important; }
	#mobileHamburger { top:10px !important; }
}

[data-theme='dark'] .app-sidebar { border-inline-end:1px solid var(--border-dark); }
[data-theme='dark'] button, [data-theme='dark'] .btn, [data-theme='dark'] input[type=text], [data-theme='dark'] textarea, [data-theme='dark'] select { background:var(--color-surface); border-color:#3a4553; }
[data-theme='dark'] .card { background:var(--color-surface); border-color:#35404d; }
[data-theme='dark'] nav.app-nav a:hover, [data-theme='dark'] nav.app-nav a.active { background:var(--accent); color:#fff; }

/* Font utility classes */
.font-base { font-family: var(--font-base); }
.font-arabic { font-family: var(--font-arabic); }
.font-latin { font-family: var(--font-latin); }
.font-alt1 { font-family: var(--font-alt1); }
.font-alt2 { font-family: var(--font-alt2); }
.font-zain { font-family: var(--font-zain); }
.font-gulzar { font-family: var(--font-gulzar); }
.font-katibeh { font-family: var(--font-katibeh); }
.font-marhey { font-family: var(--font-marhey); }

/* Tag hash styling centralized: use physical positioning so the hash is
	placed at the visual right edge regardless of document direction (RTL/LTR). */
.tag-pill.hash-right { position:relative; padding-right:14px; }
.tag-pill.hash-right::after { content:'#'; position:absolute; right:4px; top:50%; transform:translateY(-50%); opacity:.6; font-weight:600; font-size:11px; pointer-events:none; z-index:1; }

/* Mobile-first: improved touch targets, toolbar/sidebar behavior and compact layouts
	 These rules are intentionally additive and scoped to narrow viewports so they
	 don't interfere with desktop layouts or existing JS-driven sidebar pinning. */
@media (max-width:480px) {
	/* Stack the main shell so header/toolbars can sit above/below content on small screens */
	.app-shell { flex-direction:column; }

	/* Convert sidebar into a full-height overlay that slides from the top on very small screens.
		 Router JS will still toggle the .open state; here we adapt the transform axis to better suit phones. */
	.app-sidebar {
		position:fixed;
		inset-block-start:0;
		inset-inline-start:0;
		width:100%;
		max-width:100%;
		height:100%;
		transform:translateY(-100%);
		transition:transform .28s ease, background .2s ease;
		z-index:1200;
		overflow:auto;
		-webkit-overflow-scrolling:touch;
	}
	/* When open, reveal the overlay (JS toggles .open on small screens). */
	.app-sidebar.open { transform:translateY(0); }

	/* Ensure the main area sits behind the overlay and gets some padding for comfortable tapping */
	.app-main { padding:14px !important; }

	/* Make toolbar elements easy to tap and allow horizontal scroll if many items exist */
	.toolbar {
		flex-direction:row;
		align-items:center;
		gap:8px;
		overflow-x:auto;
		padding:6px 6px;
		-webkit-overflow-scrolling:touch;
	}
	.toolbar::-webkit-scrollbar { display:none; }

	/* Larger tappable buttons; don't force full width unless toolbar is stacked */
	button, .btn {
		min-height:44px;
		padding:10px 12px;
		font-size:15px;
		line-height:1;
	}
	.toolbar .btn, .toolbar button { flex:0 0 auto; }

	/* Stack card-forms and bulk controls vertically for clarity */
	form, .card form, .bulk-bar { flex-direction:column !important; align-items:stretch; gap:10px; }
	.bulk-bar { padding:10px; }

	/* Increase form input hit targets */
	input[type=text], textarea, select { padding:10px; font-size:15px; }

	/* Sidebar nav rows should be larger and easier to press */
	#sidebar nav a { padding:12px 16px; font-size:16px; display:flex; align-items:center; gap:10px; justify-content:center; text-align:center; }
	#sidebar nav a .icon { font-size:20px; }

	/* Helpful spacer in layouts that anchor bottom-fixed controls */
	.bottom-spacer { height:56px; }

	/* Reduce grid density for small cards */
	.poem-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }

	/* Make toggles / small controls easier to reach */
	.view-toggle button { padding:8px 10px; font-size:14px; }
}

/* Library mobile filter collapse helper */
@media (max-width:900px){
	#facetPanel.collapsed { max-height:0; overflow:hidden; transition:max-height .28s ease; padding-top:0; padding-bottom:0; border:0; }
	#facetPanel .facet-toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600; }
	#facetPanel .facet-toggle button{ background:transparent;border:0;color:var(--accent); font-weight:700; cursor:pointer; }
}

/* Very narrow devices: further reduce paddings and force compact grid */
@media (max-width:360px) {
	.toolbar { gap:6px; }
	button, .btn { padding:9px 10px; font-size:14px; }
	#sidebar nav a { padding:10px 12px; font-size:15px; }
	.poem-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* Desktop-only Farsi on-screen keyboard */
#farsiKeyboardToggle {
	position: fixed;
	inset-inline-start: 16px;
	inset-block-end: 16px;
	z-index: 20050;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	font-weight: 700;
	cursor: pointer;
}
#farsiKeyboardToggle:hover { filter: brightness(1.05); }

#farsiKeyboard {
	position: fixed;
	inset-inline-start: 16px;
	inset-block-end: 72px;
	z-index: 20040;
	background: var(--surface);
	color: var(--color-text);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0,0,0,.28);
	padding: 10px;
	width: min(760px, 92vw);
	user-select: none;
}
#farsiKeyboard.hidden { display: none !important; }
#farsiKeyboard .kbd-head {
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	margin-bottom: 8px; padding-inline: 2px;
	cursor: move;
	user-select: none;
}
#farsiKeyboard .kbd-title { font-size: 12px; opacity: .75; }
#farsiKeyboard .kbd-actions { display:flex; gap:6px; }
#farsiKeyboard .kbd-actions button { font-size: 11px; padding: 4px 8px; }
#farsiKeyboard .rows { display:flex; flex-direction:column; gap: 6px; }
#farsiKeyboard .row { display:grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
#farsiKeyboard .key {
	display:flex; align-items:center; justify-content:center;
	height: 44px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	font-family: var(--font-arabic);
	font-size: 16px;
}
#farsiKeyboard .key:hover { background: var(--bg-alt, #eef2f6); }
#farsiKeyboard .key.wide { grid-column: span 3; }
#farsiKeyboard .key.xwide { grid-column: span 6; }
#farsiKeyboard .key.action { font-size: 13px; font-weight: 600; }

#farsiKeyboard.dragging { opacity: .98; }

/* Hide keyboard UI on small screens (mobile/tablet) */
@media (max-width: 900px){
	#farsiKeyboardToggle, #farsiKeyboard { display: none !important; }
}