/*
 * CITS POS — Frontend Admin shell styles.
 *
 * Layout only: dark sidebar (300px → icon-only on tablet → drawer on mobile),
 * white content column with sticky topbar. Component-internal styles live
 * inside each Web Component's shadow DOM. The login + no-access gates also
 * live here since the POS stylesheet is not loaded on the admin shell.
 */

:root {
	--cits-admin-accent: #7367f0;
	--cits-admin-sidebar-w: 240px;
	--cits-admin-sidebar-w-collapsed: 64px;
	--cits-admin-topbar-h: 56px;
	--cits-admin-bg: #f8fafc;
	--cits-admin-fg: #0f172a;
	--cits-admin-muted: #64748b;
}

html, body.cits-pos-admin-body {
	margin: 0;
	padding: 0;
	background: var(--cits-admin-bg);
	color: var(--cits-admin-fg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

body.cits-pos-admin-body * {
	box-sizing: border-box;
}

.cits-admin-app {
	min-height: 100vh;
	position: relative;
}

/*
 * 11.B.6.16 — Sidebar is now `position: fixed` instead of grid + sticky.
 * The previous sticky approach kept failing on the Dashboard despite
 * `align-self: start` (some browser/layout combinations still stretched the
 * aside on long pages, leaving sticky no room to pin). Fixed positioning
 * sidesteps every layout interaction with the page flow and is the same
 * approach already used by the mobile drawer below, so the two modes share
 * one mental model.
 *
 * Main column gets `margin-left` equal to the sidebar width to reserve space.
 */
.cits-admin-app__aside {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--cits-admin-sidebar-w);
	height: 100vh;
	overflow: hidden;
	background: #1e293b;
	z-index: 30;
}

.cits-admin-app.is-collapsed:not(.is-drawer-open) .cits-admin-app__aside {
	width: var(--cits-admin-sidebar-w-collapsed);
}
.cits-admin-app.is-collapsed:not(.is-drawer-open) .cits-admin-app__main {
	margin-left: var(--cits-admin-sidebar-w-collapsed);
}

.cits-admin-app.is-collapsed:not(.is-drawer-open) cits-admin-sidebar {
	display: block;
}

.cits-admin-app.is-collapsed:not(.is-drawer-open) .cits-admin-app__aside cits-admin-sidebar {
	/* Sidebar reads :host(.is-collapsed) — pass the class through */
}

.cits-admin-app__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
	margin-left: var(--cits-admin-sidebar-w);
}

.cits-admin-app__header {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 20;
}

.cits-admin-app__content {
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible;
}

.cits-admin-app__scrim {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.4);
	z-index: 25;
}

/* The sidebar custom element doesn't read host classes from the OUTER app, so
 * mirror the collapsed state by overriding the visible label rows from outside
 * the shadow DOM via the host attribute selector. */
.cits-admin-app.is-collapsed:not(.is-drawer-open) cits-admin-sidebar {
	/* Toggle the sidebar's own collapsed state by setting the class on the
	 * custom element itself (the sidebar's CSS uses :host(.is-collapsed)). */
}

/*
 * Tablet (769-1024px) — auto-collapse to icon-rail.
 */
@media (min-width: 769px) and (max-width: 1024px) {
	.cits-admin-app:not(.is-drawer-open) .cits-admin-app__aside {
		width: var(--cits-admin-sidebar-w-collapsed);
	}
	.cits-admin-app:not(.is-drawer-open) .cits-admin-app__main {
		margin-left: var(--cits-admin-sidebar-w-collapsed);
	}
}

/*
 * Mobile (≤768px) — sidebar slides off-screen as a drawer; main content takes
 * the full width.
 */
@media (max-width: 768px) {
	.cits-admin-app__main { min-width: 0; margin-left: 0; }
	.cits-admin-app__content { min-width: 0; }
	.cits-admin-app__aside {
		transform: translateX(-100%);
		transition: transform 0.18s ease;
		z-index: 35;
	}
	.cits-admin-app.is-drawer-open .cits-admin-app__aside {
		transform: translateX(0);
	}
}

/* Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {
	.cits-admin-app__aside { transition: none; }
}

/*
 * Login + no-access gates (shared markup with POS — but POS stylesheet isn't
 * enqueued on the admin shell, so styles are duplicated here).
 */
.cits-pos-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #f8fafc 0%, #ede9fe 100%);
	padding: 24px;
}

.cits-pos-gate__card {
	background: #fff;
	border-radius: 14px;
	padding: 36px 32px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
	text-align: center;
}

.cits-pos-gate__card--quiet {
	background: #f1f5f9;
	box-shadow: none;
	border: 1px solid #e2e8f0;
}

.cits-pos-gate__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	color: #0f172a;
}

.cits-pos-gate__lede {
	margin: 0 0 18px;
	color: #475569;
	font-size: 14px;
	line-height: 1.55;
}

.cits-pos-gate__card form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.cits-pos-gate__card form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: #334155;
}

.cits-pos-gate__card form input[type="text"],
.cits-pos-gate__card form input[type="password"] {
	padding: 9px 11px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font: inherit;
}

.cits-pos-gate__card form input[type="submit"],
.cits-pos-gate__button {
	background: linear-gradient(135deg, #a78bfa, #7367f0);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	margin-top: 4px;
}

.cits-pos-gate__hint {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: #64748b;
}

.cits-pos-gate__hint a { color: var(--cits-admin-accent); }
.cits-pos-gate__actions { margin-top: 14px; }