/* =========================================================================
   App shell: sidebar + topbar + content grid, responsive.
   ========================================================================= */

.ssm-app {
	display: grid;
	grid-template-columns: var(--ssm-sidebar-w) 1fr;
	min-height: 100vh;
}
.ssm-app.is-sidebar-collapsed { grid-template-columns: var(--ssm-sidebar-w-collapsed) 1fr; }

/* ---------- Sidebar ---------- */
.ssm-sidebar {
	background: var(--ssm-surface);
	border-right: 1px solid var(--ssm-border);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	z-index: 40;
}
.ssm-sidebar__brand {
	display: flex;
	align-items: center;
	gap: var(--ssm-sp-3);
	padding: var(--ssm-sp-5) var(--ssm-sp-5) var(--ssm-sp-4);
}
.ssm-sidebar__logo {
	width: 42px; height: 42px;
	border-radius: var(--ssm-radius-md);
	background: linear-gradient(135deg, var(--ssm-color-primary), var(--ssm-teal-500));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}
.ssm-sidebar__brand-text { line-height: 1.25; overflow: hidden; }
.ssm-sidebar__brand-title { font-weight: 700; font-size: 15px; color: var(--ssm-color-primary-dark); white-space: nowrap; }
.ssm-sidebar__brand-sub { font-size: 11.5px; color: var(--ssm-text-muted); white-space: nowrap; }
.is-sidebar-collapsed .ssm-sidebar__brand-text { display: none; }

.ssm-sidebar__toggle {
	margin-left: auto;
	background: none; border: none; cursor: pointer;
	width: 32px; height: 32px;
	border-radius: var(--ssm-radius-sm);
	display: flex; align-items: center; justify-content: center;
	color: var(--ssm-text-muted);
}
.ssm-sidebar__toggle:hover { background: var(--ssm-bg); }
.is-sidebar-collapsed .ssm-sidebar__toggle { display: none; }

.ssm-nav { padding: 0 var(--ssm-sp-3) var(--ssm-sp-4); flex: 1; }
.ssm-nav__item { margin-bottom: 2px; }
.ssm-nav__link {
	display: flex; align-items: center; gap: var(--ssm-sp-3);
	padding: 10px var(--ssm-sp-3);
	border-radius: var(--ssm-radius-sm);
	color: var(--ssm-text);
	font-size: 14px;
	font-weight: 500;
	position: relative;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
	white-space: nowrap;
}
.ssm-nav__link .ssm-icon { color: var(--ssm-text-faint); transition: color 200ms ease; }

/*
 * --ssm-item/--ssm-item-wash come from [data-ssm-color] (design-system.css)
 * when a link has a module color; var()'s 2nd arg is the fallback so links
 * without one still get the institutional blue. Deliberately NOT set as a
 * default custom property on .ssm-nav__link itself — a same-specificity
 * declaration there would win over [data-ssm-color] by source order and
 * silently flatten every module back to blue.
 */

/* NORMAL → HOVER: soft module-colored wash + icon tint + a 2px nudge. Never the only signal (label/icon also shift), so it still reads without relying on hover alone on touch devices. */
.ssm-nav__link:hover {
	background: var(--ssm-item-wash, var(--ssm-color-primary-light));
	color: var(--ssm-item, var(--ssm-color-primary));
	transform: translateX(2px);
}
.ssm-nav__link:hover .ssm-icon { color: var(--ssm-item, var(--ssm-color-primary)); }

/* ACTIVE: solid left indicator + wash background, distinct from hover even when both could theoretically apply. */
.ssm-nav__active-bar {
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 3px; height: 0; border-radius: 3px;
	background: var(--ssm-item, var(--ssm-color-primary));
	transition: height 200ms ease;
}
.ssm-nav__link.is-active {
	background: var(--ssm-item-wash, var(--ssm-color-primary-light));
	color: var(--ssm-item, var(--ssm-color-primary));
	font-weight: 700;
}
.ssm-nav__link.is-active .ssm-icon { color: var(--ssm-item, var(--ssm-color-primary)); }
.ssm-nav__link.is-active .ssm-nav__active-bar { height: 20px; }
.ssm-nav__link.is-active:hover { transform: none; }

.ssm-nav__link:focus-visible { outline-offset: -2px; }
.is-sidebar-collapsed .ssm-nav__label,
.is-sidebar-collapsed .ssm-nav__badge,
.is-sidebar-collapsed .ssm-nav__dot { display: none; }
.is-sidebar-collapsed .ssm-nav__link { justify-content: center; }

.ssm-nav__badge {
	margin-left: auto;
	background: var(--ssm-color-success);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--ssm-radius-full);
}
.ssm-nav__dot {
	margin-left: auto;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ssm-color-danger);
}

.ssm-sidebar__footer {
	margin: var(--ssm-sp-3);
	padding: var(--ssm-sp-4);
	border-radius: var(--ssm-radius-md);
	background: var(--ssm-blue-50);
	text-align: center;
}
.is-sidebar-collapsed .ssm-sidebar__footer { display: none; }
.ssm-sidebar__footer h4 { font-size: 13px; margin-bottom: 2px; }
.ssm-sidebar__footer p { font-size: 12px; color: var(--ssm-text-muted); margin-bottom: var(--ssm-sp-3); }

/* ---------- Topbar ---------- */
.ssm-main { display: flex; flex-direction: column; min-width: 0; }
.ssm-topbar {
	height: var(--ssm-header-h);
	background: var(--ssm-surface);
	border-bottom: 1px solid var(--ssm-border);
	display: flex;
	align-items: center;
	gap: var(--ssm-sp-4);
	padding: 0 var(--ssm-sp-6);
	position: sticky;
	top: 0;
	z-index: 30;
}
.ssm-topbar__greeting { min-width: max-content; }
.ssm-topbar__greeting h1 { font-size: 20px; font-weight: 700; }
.ssm-topbar__meta { font-size: 12.5px; color: var(--ssm-text-muted); display: flex; align-items: center; gap: 6px; }
.ssm-topbar__mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--ssm-text); }

.ssm-topbar__search { flex: 1; max-width: 460px; position: relative; }
.ssm-topbar__search input {
	width: 100%;
	padding: 10px var(--ssm-sp-4) 10px 40px;
	border-radius: var(--ssm-radius-full);
	border: 1px solid var(--ssm-border);
	background: var(--ssm-bg);
	font-size: 14px;
	color: var(--ssm-text);
}
.ssm-topbar__search .ssm-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ssm-text-faint); }

.ssm-topbar__actions { display: flex; align-items: center; gap: var(--ssm-sp-2); margin-left: auto; }
.ssm-icon-btn {
	position: relative;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ssm-text-muted);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.ssm-icon-btn:hover { background: var(--ssm-bg); }
.ssm-icon-btn__count {
	position: absolute; top: 2px; right: 2px;
	background: var(--ssm-color-danger);
	color: #fff;
	font-size: 10px; font-weight: 700;
	min-width: 16px; height: 16px; padding: 0 3px;
	border-radius: var(--ssm-radius-full);
	display: flex; align-items: center; justify-content: center;
}

.ssm-user-menu { display: flex; align-items: center; gap: var(--ssm-sp-2); padding: 4px 8px 4px 4px; border-radius: var(--ssm-radius-full); border: none; background: none; cursor: pointer; }
.ssm-user-menu:hover { background: var(--ssm-bg); }
.ssm-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--ssm-blue-100); }
.ssm-user-menu__text { text-align: left; line-height: 1.2; display: none; }
.ssm-user-menu__name { font-size: 13px; font-weight: 600; }
.ssm-user-menu__role { font-size: 11.5px; color: var(--ssm-text-muted); }
@media (min-width: 900px) { .ssm-user-menu__text { display: block; } }

/* ---------- Content ---------- */
.ssm-content { padding: var(--ssm-sp-6); max-width: 1440px; width: 100%; margin: 0 auto; }

.ssm-breadcrumbs ol { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ssm-text-muted); margin-bottom: var(--ssm-sp-4); }
.ssm-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--ssm-text-faint); }
.ssm-breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.ssm-app { grid-template-columns: var(--ssm-sidebar-w-collapsed) 1fr; }
	.ssm-app .ssm-sidebar__brand-text,
	.ssm-app .ssm-nav__label,
	.ssm-app .ssm-nav__badge,
	.ssm-app .ssm-nav__dot,
	.ssm-app .ssm-sidebar__footer,
	.ssm-app .ssm-sidebar__toggle { display: none; }
	.ssm-app .ssm-nav__link { justify-content: center; }
}

@media (max-width: 860px) {
	.ssm-app { grid-template-columns: 1fr; }
	.ssm-sidebar {
		position: fixed; inset: 0 auto 0 0;
		width: 78vw; max-width: 320px;
		transform: translateX(-100%);
		transition: transform var(--ssm-transition);
		box-shadow: var(--ssm-shadow-lg);
	}
	.ssm-sidebar.is-open { transform: translateX(0); }
	.ssm-sidebar .ssm-sidebar__brand-text,
	.ssm-sidebar .ssm-nav__label,
	.ssm-sidebar .ssm-nav__badge,
	.ssm-sidebar .ssm-nav__dot,
	.ssm-sidebar .ssm-sidebar__footer { display: block; }
	.ssm-sidebar .ssm-nav__link { justify-content: flex-start; }
	.ssm-sidebar__scrim {
		position: fixed; inset: 0; background: rgba(15,23,32,.45);
		z-index: 39; opacity: 0; pointer-events: none; transition: opacity var(--ssm-transition);
	}
	.ssm-sidebar__scrim.is-open { opacity: 1; pointer-events: auto; }
	.ssm-topbar__mobile-toggle { display: flex; }
	.ssm-topbar { padding: 0 var(--ssm-sp-4); gap: var(--ssm-sp-3); }
	.ssm-topbar__greeting h1 { font-size: 16px; }
	.ssm-topbar__meta { display: none; }
	.ssm-content { padding: var(--ssm-sp-4); padding-bottom: 84px; }

	.ssm-mobile-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0;
		background: var(--ssm-surface);
		border-top: 1px solid var(--ssm-border);
		display: flex;
		z-index: 41;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.ssm-mobile-tabbar a {
		flex: 1;
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		padding: 8px 0 6px;
		font-size: 10.5px;
		color: var(--ssm-text-muted);
	}
	.ssm-mobile-tabbar a.is-active { color: var(--ssm-color-primary); }
}
@media (min-width: 861px) { .ssm-mobile-tabbar, .ssm-sidebar__scrim { display: none; } }

@media (max-width: 640px) {
	.ssm-topbar__search { position: fixed; left: 0; right: 0; top: var(--ssm-header-h); padding: 8px; background: var(--ssm-surface); border-bottom: 1px solid var(--ssm-border); max-width: none; display: none; }
	.ssm-topbar__search.is-open { display: block; }
}