/**
 * The entire visual language of the "looks like its own app" front end —
 * login screen, sidebar/topbar shell, and every /dashboard, /agents,
 * /knowledge-base, /compliance, /reports, /sites page built on top of it
 * (class-frontend-app.php + the class-app-*.php files). Confirmed DebtBlue
 * brand tokens below; fonts are Scoutie Sans (headings) and Work Sans
 * (everything else), both loaded from Google Fonts in
 * class-frontend-app.php's print_head_assets().
 *
 * This file is one of the few pieces of this demo-phase build that's
 * genuinely portable if the CTO later chooses the long-term custom Node app
 * instead of this WordPress install — the markup it styles (class-frontend-
 * app.php's shell) was written with that in mind.
 */

:root {
	--db-dark-blue: #055C9B;
	--db-bright-blue: #2AAAE2;
	--db-deep-navy: #1E2A37;
	--db-growth-green: #1E9E6B;
	--db-mint-green: #6FD9A8;
	--db-forest-green: #0F5C42;
	--db-cloud: #F1F4F6;
	--db-fog: #F4F6F8;
	--db-mist: #C4CDD5;
	--db-storm: #6B7887;
	--db-shine: #FFC62E;
	--db-sunset: #EB3131;

	--font-heading: 'Scoutie Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--dlc-radius: 10px;
	--dlc-shadow: 0 1px 3px rgba(30, 42, 55, 0.08), 0 1px 2px rgba(30, 42, 55, 0.06);

	/*
	 * Semantic tokens for the app shell (topbar/cards/tables/forms) — kept
	 * separate from the literal brand colors above so dark mode (see the
	 * [data-theme="dark"] block below) can repoint just these without
	 * touching --db-deep-navy itself, which also does double duty as the
	 * sidebar's background color and must stay a fixed dark navy in both
	 * themes. The sidebar and login screen are intentionally untouched by
	 * dark mode — the sidebar is already dark, and login is pre-auth (no
	 * toggle exists there).
	 */
	--dlc-page-bg: var(--db-fog);
	--dlc-surface: #ffffff;
	--dlc-border: var(--db-mist);
	--dlc-subtle-bg: var(--db-cloud);
	--dlc-text: var(--db-deep-navy);
	--dlc-text-muted: var(--db-storm);
}

/*
 * Dark mode — toggled by the topbar switch (assets/js/dark-mode.js), applied
 * server-side via a data-theme="dark" attribute on <html> so there's no
 * flash of the light theme on load (see render_shell() in
 * class-frontend-app.php, and class-theme-preference.php for the stored
 * per-user preference behind it).
 */
:root[data-theme="dark"] {
	--dlc-page-bg: #12181F;
	--dlc-surface: #1B232C;
	--dlc-border: #2E3944;
	--dlc-subtle-bg: #222B35;
	--dlc-text: #E8ECEF;
	--dlc-text-muted: #94A1AF;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--dlc-page-bg);
	color: var(--dlc-text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--dlc-text);
	margin: 0 0 0.5em;
}

a { color: var(--db-dark-blue); }
a:hover { color: var(--db-bright-blue); }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------------------------------------------------------------- Shell */

/*
 * The sidebar is fixed for the lifetime of the page — always exactly the
 * viewport's height, never scrolls on its own — while .dlc-content below is
 * the one piece of the page that scrolls. body.dlc-app-body (set only on
 * these app-shell pages, not the pre-auth login screen) is what pins the
 * whole page to the viewport height so there's nothing for the outer
 * document itself to scroll; .dlc-shell, .dlc-sidebar and .dlc-main all
 * inherit that same fixed height, and only .dlc-content opts back into
 * scrolling with its own overflow-y. min-height: 0 on .dlc-content is the
 * standard (and easy to miss) flexbox fix needed for overflow: auto to
 * actually scroll a flex child instead of just growing it past its parent.
 */
body.dlc-app-body {
	height: 100vh;
	overflow: hidden;
}

.dlc-shell {
	display: flex;
	height: 100vh;
	overflow: hidden;
}

.dlc-sidebar {
	width: 232px;
	flex-shrink: 0;
	height: 100vh;
	overflow: hidden;
	background: var(--db-deep-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 20px 0;
}

.dlc-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px 20px;
}

/*
 * Its own wrapper (rather than styling .dlc-sidebar-brand's text directly)
 * so the site icon (if set — see /settings) and this text mark can sit
 * side by side as two flex items, vertically centered against each other
 * via .dlc-sidebar-brand's align-items: center above.
 */
.dlc-sidebar-brand-text {
	display: block;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}

.dlc-nav { display: flex; flex-direction: column; }

/*
 * Pinned to the bottom of the sidebar via margin-top: auto (the sidebar is
 * already a flex column) rather than living up in the brand area — this is
 * the plugin's own build/version number (DEBTBLUE_LIVECHAT_VERSION, see
 * debtblue-livechat.php), always live, never hand-typed — so an agent who
 * suspects they're looking at a stale cached copy of the app can check it
 * against what was actually last deployed, without asking anyone.
 */
.dlc-sidebar-version {
	margin-top: auto;
	padding: 16px 20px 4px;
	font-size: 11px;
	font-weight: 400;
	color: var(--db-mist);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dlc-nav-link {
	display: block;
	padding: 11px 20px;
	color: var(--db-mist);
	text-decoration: none;
	font-weight: 500;
	border-left: 3px solid transparent;
}

.dlc-nav-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.dlc-nav-active {
	background: rgba(42, 170, 226, 0.15);
	border-left-color: var(--db-bright-blue);
	color: #fff;
}

.dlc-main {
	flex: 1;
	min-width: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dlc-topbar {
	flex-shrink: 0;
	background: var(--dlc-surface);
	border-bottom: 1px solid var(--dlc-border);
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dlc-page-title { margin: 0; font-size: 20px; }

.dlc-topbar-user {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dlc-topbar-name { font-weight: 500; color: var(--dlc-text-muted); }

.dlc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 999px;
	border: 1px solid var(--dlc-border);
	background: var(--dlc-surface);
	color: var(--dlc-text-muted);
	cursor: pointer;
	padding: 0;
}

.dlc-theme-toggle:hover { color: var(--dlc-text); background: var(--dlc-subtle-bg); }

.dlc-theme-toggle svg { width: 16px; height: 16px; }

/*
 * Exactly one of these two is visible at a time — which icon shows is the
 * whole point of a dark-mode toggle. Deliberately kept as single-class
 * selectors (not ".dlc-theme-toggle svg.dlc-theme-icon-moon") so neither
 * one outranks the other on specificity; the old version paired a
 * ".dlc-theme-toggle svg { display: block }" rule (class + element,
 * specificity 0-1-1) with ".dlc-theme-icon-moon { display: none }" (one
 * class, 0-1-0) — the first, more specific rule always won regardless of
 * source order, so the moon icon never actually hid in light mode and both
 * icons showed at once.
 */
.dlc-theme-icon-sun { display: block; }
.dlc-theme-icon-moon { display: none; }

:root[data-theme="dark"] .dlc-theme-icon-sun { display: none; }
:root[data-theme="dark"] .dlc-theme-icon-moon { display: block; }

.dlc-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 28px;
	width: 100%;
	box-sizing: border-box;
}

/*
 * The content area fills whatever width .dlc-main gives it (normal and
 * ultrawide windows alike) rather than hugging a fixed max-width and leaving
 * it looking "stranded" in empty space — only very wide monitors get a cap,
 * so a line of text or a KPI row never stretches edge-to-edge on a huge
 * display. Applies identically to every page rendered through render_shell()
 * (Dashboard, Agents, Knowledge Base, Compliance, Reports, Sites, Settings),
 * since they all share this one markup/CSS layer.
 */
@media (min-width: 1800px) {
	.dlc-content {
		max-width: 1680px;
		margin: 0 auto;
	}
}

/* ----------------------------------------------------------------- KPIs */

.dlc-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.dlc-kpi-card {
	background: var(--dlc-surface);
	border-radius: var(--dlc-radius);
	box-shadow: var(--dlc-shadow);
	padding: 18px 20px;
	border-top: 3px solid var(--db-dark-blue);
}

.dlc-kpi-card.dlc-kpi-warning { border-top-color: var(--db-shine); }
.dlc-kpi-card.dlc-kpi-success { border-top-color: var(--db-growth-green); }

.dlc-kpi-value {
	display: block;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 700;
	color: var(--dlc-text);
}

.dlc-kpi-label {
	display: block;
	color: var(--dlc-text-muted);
	font-size: 13px;
	margin-top: 2px;
}

/* ----------------------------------------------------------------- Card */

.dlc-card {
	background: var(--dlc-surface);
	border-radius: var(--dlc-radius);
	box-shadow: var(--dlc-shadow);
	padding: 22px 24px;
	margin-bottom: 20px;
}

.dlc-card-title { font-size: 16px; margin-bottom: 14px; }

.dlc-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ---------------------------------------------------------------- Table */

.dlc-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.dlc-table th {
	text-align: left;
	font-weight: 600;
	color: var(--dlc-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 8px 10px;
	border-bottom: 2px solid var(--dlc-subtle-bg);
}

.dlc-table td {
	padding: 10px;
	border-bottom: 1px solid var(--dlc-subtle-bg);
	vertical-align: middle;
}

.dlc-truncate {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Pill / key */

.dlc-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.dlc-pill-success { background: rgba(30, 158, 107, 0.12); color: var(--db-forest-green); }
.dlc-pill-neutral { background: var(--dlc-subtle-bg); color: var(--dlc-text-muted); }

.dlc-key {
	background: var(--dlc-subtle-bg);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 13px;
}

.dlc-key-masked { color: var(--dlc-text-muted); }

/* ----------------------------------------------------------------- Form */

.dlc-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }

.dlc-form-row { display: flex; flex-direction: column; gap: 6px; }

.dlc-form-row label { font-weight: 500; font-size: 13px; color: var(--dlc-text); }

.dlc-form-row input[type="text"],
.dlc-form-row input[type="email"],
.dlc-form-row input[type="password"],
.dlc-form-row select,
.dlc-form-row textarea {
	font-family: var(--font-body);
	font-size: 14px;
	padding: 9px 11px;
	border: 1px solid var(--dlc-border);
	border-radius: 6px;
	background: var(--dlc-surface);
	color: var(--dlc-text);
}

.dlc-form-row input:focus,
.dlc-form-row select:focus,
.dlc-form-row textarea:focus {
	outline: none;
	border-color: var(--db-bright-blue);
	box-shadow: 0 0 0 3px rgba(42, 170, 226, 0.2);
}

.dlc-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }

.dlc-help { font-size: 12px; color: var(--dlc-text-muted); margin: 0; }

.dlc-form-actions { display: flex; gap: 10px; margin-top: 4px; }

.dlc-form-row-login { background: var(--dlc-page-bg); padding: 12px; border-radius: 6px; }

/* ---------------------------------------------------------------- Button */

.dlc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

.dlc-btn-primary { background: var(--db-dark-blue); color: #fff; }
.dlc-btn-primary:hover { background: var(--db-bright-blue); color: #fff; }

.dlc-btn-ghost { background: transparent; border-color: var(--dlc-border); color: var(--dlc-text); }
.dlc-btn-ghost:hover { background: var(--dlc-subtle-bg); color: var(--dlc-text); }

.dlc-btn-block { width: 100%; }

/* ----------------------------------------------------------------- Alert */

.dlc-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; }

.dlc-alert-success { background: rgba(30, 158, 107, 0.1); color: var(--db-forest-green); }
.dlc-alert-error { background: rgba(235, 49, 49, 0.1); color: var(--db-sunset); }
.dlc-alert-warning { background: rgba(255, 198, 46, 0.18); color: #7a5a00; }

/* ----------------------------------------------------------------- Login */

.dlc-login-body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--db-deep-navy) 0%, var(--db-dark-blue) 100%);
}

.dlc-login-card {
	width: 360px;
	background: #fff;
	border-radius: var(--dlc-radius);
	box-shadow: 0 20px 50px rgba(5, 92, 155, 0.25);
	padding: 32px 30px;
}

.dlc-login-brand { text-align: center; margin-bottom: 22px; }

.dlc-login-mark {
	display: block;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--db-dark-blue);
}

.dlc-login-sub {
	display: block;
	font-size: 12px;
	color: var(--db-storm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.dlc-login-form { display: flex; flex-direction: column; gap: 6px; }

.dlc-login-form label { font-size: 13px; font-weight: 500; margin-top: 10px; }

.dlc-login-form input {
	font-family: var(--font-body);
	font-size: 14px;
	padding: 10px 12px;
	border: 1px solid var(--db-mist);
	border-radius: 6px;
}

.dlc-login-form .dlc-btn { margin-top: 18px; }

/* --------------------------------------------------------------- Avatars */

.dlc-avatar-picker { max-width: 360px; }

.dlc-avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.dlc-avatar-swatch {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid transparent;
	background: var(--dlc-subtle-bg);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--dlc-text-muted);
}

.dlc-avatar-selected { border-color: var(--db-bright-blue); }

.dlc-avatar-upload-trigger {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.dlc-avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.dlc-avatar-upload-label { font-size: 9px; text-align: center; line-height: 1.2; }

.dlc-avatar-thumb { display: inline-block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--dlc-subtle-bg); }

.dlc-avatar-thumb img, .dlc-avatar-thumb svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ Logo */

.dlc-sidebar-logo-img { display: block; height: 32px; width: auto; max-width: 100%; }

.dlc-logo-picker { display: flex; align-items: center; gap: 16px; }

.dlc-logo-preview {
	width: 180px;
	height: 60px;
	flex-shrink: 0;
	border: 1px dashed var(--dlc-border);
	border-radius: 8px;
	background: var(--dlc-subtle-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 6px;
}

.dlc-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dlc-logo-preview-empty { font-size: 12px; line-height: 1.3; color: var(--dlc-text-muted); text-align: center; }

.dlc-logo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.dlc-css-editor {
	width: 100%;
	max-width: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
	padding: 12px 14px;
	border: 1px solid var(--dlc-border);
	border-radius: 6px;
	background: var(--dlc-surface);
	color: var(--dlc-text);
	resize: vertical;
}

.dlc-css-editor:focus {
	outline: none;
	border-color: var(--db-bright-blue);
	box-shadow: 0 0 0 3px rgba(42, 170, 226, 0.2);
}

/* ------------------------------------------------- Knowledge Base uploads */
/*
 * Same wp.media() picker pattern as the Settings site-icon field above
 * (.dlc-logo-picker / .dlc-logo-preview, and .dlc-logo-actions is reused
 * as-is here for the Upload/Remove buttons) but the preview area shows a
 * filename link rather than an image thumbnail, since a KB source is a
 * PDF/.docx file, not something with a thumbnail worth rendering.
 */

.dlc-kb-doc-picker { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.dlc-kb-doc-preview {
	min-width: 220px;
	max-width: 420px;
	min-height: 60px;
	flex: 1;
	flex-shrink: 1;
	border: 1px dashed var(--dlc-border);
	border-radius: 8px;
	background: var(--dlc-subtle-bg);
	display: flex;
	align-items: center;
	padding: 10px 16px;
	box-sizing: border-box;
}

.dlc-kb-doc-preview a {
	font-size: 13px;
	font-weight: 600;
	word-break: break-all;
}

/* ------------------------------------------------------- Profile & avatar */
/*
 * The topbar's "FirstName LastName" + avatar + hover dropdown
 * (class-frontend-app.php's render_profile_menu()). Open/close state is a
 * single .dlc-open class toggled by assets/js/profile-menu.js — deliberately
 * not a pure :hover rule, since a hover-only dropdown can't be reached by
 * keyboard or touch (see that file's docblock).
 */

.dlc-profile-menu { position: relative; }

.dlc-profile-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 4px 8px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--dlc-text);
}

.dlc-profile-trigger:hover,
.dlc-profile-menu.dlc-open .dlc-profile-trigger {
	background: var(--dlc-subtle-bg);
}

.dlc-profile-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dlc-subtle-bg);
	flex-shrink: 0;
}

.dlc-profile-avatar-sm { width: 28px; height: 28px; }

.dlc-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dlc-profile-avatar .dlc-avatar-render { width: 100%; height: 100%; }

.dlc-avatar-initial {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--db-bright-blue);
}

.dlc-profile-chevron {
	width: 14px;
	height: 14px;
	color: var(--dlc-text-muted);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.dlc-profile-menu.dlc-open .dlc-profile-chevron { transform: rotate(180deg); }

.dlc-notif-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--db-sunset);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.dlc-profile-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	max-width: calc(100vw - 32px);
	background: var(--dlc-surface);
	border: 1px solid var(--dlc-border);
	border-radius: var(--dlc-radius);
	box-shadow: var(--dlc-shadow);
	padding: 6px;
	z-index: 50;
}

.dlc-profile-menu.dlc-open .dlc-profile-dropdown { display: block; }

.dlc-profile-dropdown-section { padding: 2px 6px 10px; }

.dlc-profile-dropdown-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dlc-text-muted);
	padding: 6px 4px;
}

.dlc-profile-dropdown-mark-all {
	background: none;
	border: none;
	padding: 0;
	color: var(--db-dark-blue);
	font-size: 11px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.dlc-profile-dropdown-mark-all:hover { color: var(--db-bright-blue); }

.dlc-notifications-list {
	max-height: 280px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dlc-notifications-empty { font-size: 13px; color: var(--dlc-text-muted); margin: 0; padding: 10px 4px; }

.dlc-notification-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

a.dlc-notification-row:hover { background: var(--dlc-subtle-bg); }

.dlc-notification-dot {
	width: 8px;
	height: 8px;
	margin-top: 4px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dlc-notification-dot-chat { background: var(--db-shine); }
.dlc-notification-dot-announcement { background: var(--db-bright-blue); }

.dlc-notification-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.dlc-notification-title { font-size: 13px; font-weight: 600; color: var(--dlc-text); }

a.dlc-notification-title:hover { color: var(--db-bright-blue); }

.dlc-notification-meta { font-size: 11px; color: var(--dlc-text-muted); }

.dlc-notification-dismiss {
	background: none;
	border: none;
	padding: 0 4px;
	font-size: 16px;
	line-height: 1;
	color: var(--dlc-text-muted);
	cursor: pointer;
	flex-shrink: 0;
}

.dlc-notification-dismiss:hover { color: var(--dlc-text); }

.dlc-profile-dropdown-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-top: 1px solid var(--dlc-border);
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dlc-text);
	cursor: pointer;
}

.dlc-profile-dropdown-item:hover { background: var(--dlc-subtle-bg); }

/* --------------------------------------------------------------- Modals */
/*
 * Shared by the "Change Avatar" modal today (class-frontend-app.php's
 * render_change_avatar_modal()) — generic enough to reuse for any later
 * modal rather than being named after this one feature.
 */

.dlc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(14, 20, 27, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
}

.dlc-modal-overlay[hidden] { display: none; }

.dlc-modal {
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--dlc-surface);
	border-radius: var(--dlc-radius);
	box-shadow: var(--dlc-shadow);
	padding: 24px;
	box-sizing: border-box;
}

.dlc-modal-title { margin: 0 0 16px; font-size: 18px; }

.dlc-modal-actions { display: flex; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 760px) {
	/*
	 * The fixed-100vh-sidebar/scrolling-content layout above is a desktop
	 * concept — down here the sidebar collapses into a horizontal tab bar
	 * across the top instead of a left column, so pinning it to the full
	 * viewport height would just eat the whole screen. Fall back to the
	 * simpler "let the document scroll normally" behavior this already had
	 * before the fixed-sidebar change.
	 */
	body.dlc-app-body { height: auto; overflow: visible; }
	.dlc-shell { flex-direction: column; height: auto; overflow: visible; }
	.dlc-sidebar { width: 100%; height: auto; overflow: visible; flex-direction: row; overflow-x: auto; padding: 10px; }
	.dlc-sidebar-brand { display: none; }
	.dlc-sidebar-version { display: none; }
	.dlc-nav { flex-direction: row; }
	.dlc-nav-link { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
	.dlc-nav-active { border-left-color: transparent; border-bottom-color: var(--db-bright-blue); }
	.dlc-main { height: auto; overflow: visible; }
	.dlc-content { flex: none; overflow: visible; padding: 16px; }
	.dlc-grid-2 { grid-template-columns: 1fr; }
	/*
	 * Narrow topbar: the profile trigger's name text is the first thing to
	 * go (the avatar + badge + chevron stay, so the menu's still reachable
	 * and still shows there's something waiting), and the dropdown itself
	 * is capped to the viewport width rather than a fixed 320px.
	 */
	.dlc-profile-trigger .dlc-topbar-name { display: none; }
	.dlc-profile-dropdown { width: calc(100vw - 32px); }
}