/* ============ APP SHELL (logged-in) ============ */
/* ===== App shell: full-height left sidebar + content column ===== */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-shell[hidden] { display: none; }
.app-sidebar {
	flex: none; width: 240px;
	align-self: flex-start;
	position: sticky; top: 0; height: 100vh; height: 100dvh;
	overflow-y: auto;
	background: var(--card-bg);
	border-right: 1px solid var(--card-border);
	display: flex; flex-direction: column;
	padding: 16px 14px;
	z-index: 10;
}
.nav-logo { display: inline-flex; align-items: center; color: var(--logo-color); padding: 8px 10px 16px; text-decoration: none; }
.logo-mark { height: 34px; width: auto; fill: currentColor; }
.nav-logo .logo-img { height: auto; width: 100%; max-width: 140px; }

/* Sidebar header: burger + logo */
.sidebar-head { display: flex; align-items: center; gap: 6px; }
.sidebar-head .nav-logo { flex: 1; min-width: 0; }
.nav-toggle {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: var(--radius-md);
	background: var(--accent); border: 1px solid var(--card-border); box-shadow: none;
	color: var(--text-strong); cursor: pointer;
	transition: background .15s, color .15s;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle:hover { background: var(--gold-tint, var(--accent)); color: var(--text-strong); }

/* ----- Collapsed sidebar (icon rail) ----- */
.app-shell.nav-collapsed .app-sidebar { width: 68px; padding: 16px 10px; overflow: visible; }
.app-shell.nav-collapsed .sidebar-head { justify-content: center; }
.app-shell.nav-collapsed .nav-logo { display: none; }
.app-shell.nav-collapsed .sidebar-item { justify-content: center; padding: 9px 0; }
.app-shell.nav-collapsed .sidebar-item span { display: none; }
.app-shell.nav-collapsed .sidebar-foot .user-pill { justify-content: center; padding: 8px 0; }
.app-shell.nav-collapsed .sidebar-foot .user-meta,
.app-shell.nav-collapsed .sidebar-foot .account-chevron { display: none; }
.app-shell.nav-collapsed .sidebar-foot .account-menu { left: 0; right: auto; min-width: 210px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 1.75rem; }
.sidebar-section {
	font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--text-faint); font-weight: 600; padding: 14px 12px 4px;
}
.sidebar-section[hidden] { display: none; }
.sidebar-item {
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	width: 100%; height: auto; text-align: left;
	padding: 9px 12px; border-radius: var(--radius-md);
	background: transparent; border: 1px solid transparent; box-shadow: none;
	color: var(--text-muted); font-size: 0.9375rem; font-weight: 500; cursor: pointer;
}
.sidebar-item[hidden] { display: none; }
.sidebar-item svg { flex: none; color: var(--text-faint); }
.sidebar-item:hover { background: var(--accent); color: var(--text-strong); }
.sidebar-item.active { background: var(--accent); color: var(--text-strong); }
.sidebar-item.active svg { color: var(--gold); }

/* Account pinned to the bottom of the sidebar; its menu opens upward. */
.sidebar-foot { margin-top: auto; padding-top: 10px; }
.sidebar-foot .account { position: relative; }
.sidebar-foot .user-pill { width: 100%; }
.sidebar-foot .user-meta { flex: 1 1 auto; min-width: 0; }
.sidebar-foot .user-name, .sidebar-foot .user-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .account-menu { top: auto; bottom: calc(100% + 8px); }

.app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
	display: flex; align-items: center; justify-content: flex-end;
	min-height: 64px; padding: 0.5rem 2rem;
	background: var(--card-bg); border-bottom: 1px solid var(--card-border);
	box-shadow: var(--shadow-xs);
	position: sticky; top: 0; z-index: 20;
}

/* Small screens (tablet/phone): the sidebar collapses to an icon rail via the
   burger (.nav-collapsed, toggled in app-core.js). Here we just tighten the
   content area and typography so there's more room and less scrolling. */
@media (max-width: 900px) {
	.app-main { padding: 1.25rem 1.25rem 3rem; }
	.page-title { font-size: 1.6rem; margin-bottom: 1rem; }
}

.nav-right { display: flex; align-items: center; gap: 0.875rem; }
.account { position: relative; }
.user-pill {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: auto;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	padding: 0.25rem 0.5rem 0.25rem 0.375rem;
	cursor: pointer;
	box-shadow: none;
	transition: background .15s, border-color .15s;
}
.user-pill:hover { background: var(--accent); border-color: var(--card-border); }
.user-pill[aria-expanded="true"] { background: var(--accent); border-color: var(--card-border); }
.account-chevron { color: var(--text-faint); flex: none; transition: transform .15s; }
.user-pill[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.user-meta { text-align: left; line-height: 1.2; }

/* Account dropdown menu (theme + logout) */
.account-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	min-width: 0;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 6px;
	z-index: 60;
	animation: cs-in .12s cubic-bezier(.2,.7,.2,1) both;
}
.account-menu[hidden] { display: none; }
.account-menu-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.625rem;
	width: 100%;
	height: auto;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	color: var(--text);
	cursor: pointer;
	text-align: left;
}
.account-menu-item:hover { background: var(--accent); color: var(--text-strong); }
.account-menu-item svg { flex: none; color: var(--text-muted); }
.account-menu-sep { height: 1px; background: var(--card-border); margin: 4px 6px; }
.user-name { font-size: 0.8125rem; color: var(--text-strong); font-weight: 500; }
.user-email { font-size: 0.75rem; color: var(--text-muted); }
.user-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--gold);
	color: #4a3a18;
	font-size: 0.8125rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
html.dark .user-avatar { background: var(--gold); color: #3a2e12; }

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	box-shadow: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
}
.icon-button:hover { background: var(--accent); color: var(--text); }
.icon-button:focus-visible { box-shadow: 0 0 0 3px var(--ring-soft); }

.theme-toggle-sm { width: 34px; height: 34px; }

.app-main {
	max-width: none;
	margin: 0;
	padding: 2rem 2rem 4rem;
	animation: fade-in-up .35s cubic-bezier(.2,.7,.2,1) both;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.page-title {
	font-family: var(--font-head);
	font-size: 2.25rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.01em;
	color: var(--text-strong);
	margin: 0 0 1.5rem;
}

/* Info banner */
.info-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--gold-tint);
	border: 1px solid var(--gold-tint-border);
	color: var(--text);
	padding: 0.875rem 1rem;
	border-radius: var(--radius-lg);
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
}
.info-banner svg { color: var(--gold-strong); flex-shrink: 0; margin-top: 1px; }
.info-banner a { color: var(--text-strong); text-decoration: underline; }

/* Link grid */
.link-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (max-width: 760px) { .link-grid { grid-template-columns: 1fr; } }

.link-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--card-shadow);
	padding: 1.25rem 1.25rem 0;
	display: flex;
	flex-direction: column;
}
.link-card h2 {
	font-family: var(--font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--text-strong);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 0.5rem;
}
.link-card p {
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0 0 1rem;
	flex: 1;
}
.link-card-actions {
	margin-left: -1.25rem;
	margin-right: -1.25rem;
	padding: 0.625rem 1.25rem;
	border-top: 1px solid var(--card-border);
	display: flex;
	justify-content: flex-end;
}
.card-action {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--text);
	text-decoration: none;
	padding: 0.5rem 1rem;
	height: 2rem;
	border: 1px solid var(--ghost-border);
	border-radius: var(--radius-md);
	background: transparent;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.card-action:hover { background: var(--accent); color: var(--accent-foreground); border-color: var(--ghost-border); }

/* Panels (settings, abonnements) */
.panel {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--card-shadow);
	padding: 1.5rem;
	margin-bottom: 1rem;
}
.panel .section-header { margin-top: 0; border-bottom: none; padding-bottom: 0.25rem; }
.panel h2 { color: var(--text-strong); }

/* Mitgliedschaft (AAG) */
.membership-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.membership-name { font-size: 1.25rem; font-weight: 700; color: var(--text-strong); }
.membership-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.membership-grid dt { color: var(--text-muted); font-size: 0.875rem; }
.membership-grid dd { margin: 0; color: var(--text-strong); font-size: 0.9375rem; }

/* Verbundene Anwendungen (SSO connections) */
.connections-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.connection-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--toggle-hover-bg, transparent);
}
.connection-name { font-weight: 600; color: var(--text-strong); }
.connection-revoke { flex: 0 0 auto; }

.placeholder-card {
	background: var(--card-bg);
	border: 1px dashed var(--card-border);
	border-radius: var(--radius-xl);
	padding: 2rem;
	text-align: center;
	color: var(--text);
}
.placeholder-card p { margin: 0 0 0.5rem; }

.setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	margin: 0;
	font-size: 0.9375rem;
}
.setting-row select {
	min-width: 180px;
	height: 2.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--text-strong);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	font-family: inherit;
}
.small { font-size: 0.8125rem; margin-top: 0.5rem; }

.section-title {
	font-family: var(--font-head);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 1.5rem 0 0.75rem;
}

.subs-by-category {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1rem;
}
@media (max-width: 760px) { .subs-by-category { grid-template-columns: 1fr; } }

.category-box {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--card-shadow);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.category-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
}
.category-header h3 {
	margin: 0;
	font-family: var(--font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--text-strong);
	text-transform: none;
	letter-spacing: 0;
}
.category-header .count {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.category-empty {
	font-size: 0.8125rem;
	color: var(--text-muted);
	padding: 0.25rem 0;
}
.category-box .sub {
	padding: 0.625rem 0.75rem;
	border-radius: var(--radius-md);
}
.category-box .sub-main strong { font-size: 0.875rem; }

.category-add {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.category-add select {
	width: 100%;
	height: 2.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-strong);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	font-family: inherit;
}
.category-add-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.category-add button {
	height: 2rem;
	padding: 0.4rem 0.875rem;
	font-size: 0.8125rem;
}
.category-add .status { font-size: 0.75rem; color: var(--text-muted); }

.sub-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sub-edit {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--card-border);
}
.sub-edit[hidden] { display: none; }
.sub-edit button { height: 2rem; padding: 0.4rem 0.875rem; font-size: 0.8125rem; }

/* Add panel rows */
.add-panel { margin-bottom: 0; }
.add-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--section-border);
}
.add-row:last-child { border-bottom: none; }
.add-row-label {
	flex: 0 0 240px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-strong);
}
.add-row-controls {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.add-row select {
	flex: 1 1 auto;
	height: 2.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-strong);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	font-family: inherit;
}
.add-row button { height: 2rem; padding: 0.45rem 0.875rem; font-size: 0.8125rem; }
@media (max-width: 720px) {
	.add-row { flex-direction: column; align-items: stretch; }
	.add-row-label { flex: 1 1 auto; }
}

.address-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1rem;
}
@media (max-width: 760px) { .address-grid { grid-template-columns: 1fr; } }
.address-actions { display: flex; gap: 0.25rem; }
.address-panel { margin-bottom: 0; }