/* App shell layout — full-page navy/blue theme */
:root {
	--shell-bg:            #0c1929;
	--shell-surface:       #101e33;
	--shell-panel:         #0f1e32;
	--shell-topbar:        #111f35;
	--shell-accent:        #38a0ff;
	--shell-accent-2:      #38a0ff;
	--shell-accent-dim:    rgba(56,160,255,0.15);
	--shell-border:        rgba(56,160,255,0.13);
	--shell-border-strong: rgba(56,160,255,0.30);
	--shell-text:          #e8f0fd;
	--shell-muted:         rgba(232,240,253,0.82);
	--shell-faint:         rgba(232,240,253,0.30);
	--shell-hover-bg:      rgba(56,160,255,0.10);
}

body.app-body[data-theme="light"],
body.app-body.theme-light {
	--shell-bg:            #e6ebf2;
	--shell-surface:       #f2f4f8;
	--shell-panel:         #edf1f6;
	--shell-topbar:        #e7ecf2;
	--shell-accent:        #1d4ed8;
	--shell-accent-2:      #1d4ed8;
	--shell-accent-dim:    rgba(29,78,216,0.12);
	--shell-border:        rgba(15, 23, 42, 0.14);
	--shell-border-strong: rgba(15, 23, 42, 0.30);
	--shell-text:          #1f2937;
	--shell-muted:         rgba(31, 41, 55, 0.62);
	--shell-faint:         rgba(31, 41, 55, 0.35);
	--shell-hover-bg:      rgba(29,78,216,0.07);
}

body.app-body[data-theme="light"] .app-content,
body.app-body.theme-light .app-content {
	color: #0f172a;
}

body.app-body[data-theme="light"],
body.app-body.theme-light {
	color: #0f172a;
}

body.app-body[data-theme="light"] h1,
body.app-body[data-theme="light"] h2,
body.app-body[data-theme="light"] h3,
body.app-body[data-theme="light"] h4,
body.app-body[data-theme="light"] h5,
body.app-body[data-theme="light"] h6,
body.app-body[data-theme="light"] p,
body.app-body[data-theme="light"] label,
body.app-body[data-theme="light"] th,
body.app-body[data-theme="light"] td,
body.app-body[data-theme="light"] span,
body.app-body[data-theme="light"] small,
body.app-body[data-theme="light"] li,
body.app-body.theme-light h1,
body.app-body.theme-light h2,
body.app-body.theme-light h3,
body.app-body.theme-light h4,
body.app-body.theme-light h5,
body.app-body.theme-light h6,
body.app-body.theme-light p,
body.app-body.theme-light label,
body.app-body.theme-light th,
body.app-body.theme-light td,
body.app-body.theme-light span,
body.app-body.theme-light small,
body.app-body.theme-light li {
	color: #0f172a;
}

body.app-body[data-theme="light"] a,
body.app-body.theme-light a {
	color: #0f172a;
}

body.app-body[data-theme="light"] input,
body.app-body[data-theme="light"] select,
body.app-body[data-theme="light"] textarea,
body.app-body.theme-light input,
body.app-body.theme-light select,
body.app-body.theme-light textarea {
	background: #ffffff !important;
	color: #0f172a !important;
	border-color: rgba(15, 23, 42, 0.18) !important;
}

body.app-body[data-theme="light"] input:focus,
body.app-body[data-theme="light"] select:focus,
body.app-body[data-theme="light"] textarea:focus,
body.app-body.theme-light input:focus,
body.app-body.theme-light select:focus,
body.app-body.theme-light textarea:focus {
	border-color: rgba(37, 99, 235, 0.6) !important;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

body.app-body[data-theme="light"] .glass-panel,
body.app-body.theme-light .glass-panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.9)) !important;
	border-color: rgba(15, 23, 42, 0.12) !important;
}

body.app-body[data-theme="light"] .section-title,
body.app-body.theme-light .section-title {
	color: #2563eb !important;
	border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

body.app-body {
	background: var(--shell-bg);
	color: var(--shell-text);
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100vh;
	min-height: 100vh;
}

/* ── Full-page shell — removes the old floating bubble ── */
.app-shell {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	background: var(--shell-bg);
}

.app-shell-sidebar-wrapper {
	display: flex;
	flex-direction: row;
	flex: 1;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.app-topbar-nav {
	background: var(--shell-topbar);
	border-bottom: 1px solid var(--shell-border);
	position: sticky;
	top: 0;
	z-index: 10;
}

body.app-body[data-theme="light"] .app-topbar-nav {
	background: var(--shell-topbar);
	border-bottom: 1px solid var(--shell-border);
}

.app-topbar-nav::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--shell-accent), rgba(56,160,255,0.3));
}

body.app-body[data-theme="light"] .app-topbar-nav::after {
	background: linear-gradient(90deg, var(--shell-accent), rgba(29,78,216,0.25));
}

.app-shell-sidebar-wrapper .app-sidebar {
	background: var(--shell-surface);
	border-right: 1px solid var(--shell-border);
	flex-shrink: 0;
	position: relative;
	width: 220px;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	scrollbar-width: none;
	transition: width 0.2s ease;
	min-height: 0;
}

.app-shell-sidebar-wrapper .app-sidebar::-webkit-scrollbar {
	display: none;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed {
	width: 64px;
}

body.app-body[data-theme="light"] .app-shell-sidebar-wrapper .app-sidebar {
	background: var(--shell-surface);
	border-right-color: var(--shell-border);
}

.app-shell-sidebar-wrapper .app-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	margin-left: 0 !important;
	background: var(--shell-panel);
}

.topbar-content {
	padding: 10px 18px;
}

.app-brand a {
	color: var(--shell-text);
	font-weight: 900;
	letter-spacing: 0.5px;
}

body.app-body[data-theme="light"] .app-brand a {
	color: var(--shell-text);
}

/* ── Sidebar brand block ── */
.sidebar-brand-block {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 14px 12px;
	border-bottom: 1px solid var(--shell-border);
	flex-shrink: 0;
}

.sidebar-logo-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #1e5cd4 0%, #0e3a9e 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(56,160,255,0.25);
}

.sidebar-brand-info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.sidebar-brand-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--shell-text);
	white-space: nowrap;
	text-decoration: none;
	display: block;
}

.sidebar-brand-sub {
	font-size: 10px;
	color: var(--shell-muted);
	white-space: nowrap;
}

.sidebar-toggle-btn {
	background: none;
	border: none;
	color: var(--shell-muted);
	cursor: pointer;
	padding: 5px;
	border-radius: 6px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color 0.2s ease, background 0.2s ease;
}

.sidebar-toggle-btn:hover {
	color: var(--shell-text);
	background: var(--shell-hover-bg);
}

/* ── Sidebar user chip ── */
.sidebar-user-chip {
	margin: 10px 10px 4px;
	padding: 10px 12px;
	background: rgba(56,160,255,0.06);
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	min-width: 0;
}

.sidebar-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}

.sidebar-chip-info {
	min-width: 0;
	overflow: hidden;
}

.sidebar-chip-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--shell-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-chip-role {
	font-size: 11px;
	color: var(--shell-muted);
	white-space: nowrap;
}

/* ── Nav section labels ── */
.nav-section-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--shell-faint);
	padding: 10px 10px 3px;
	white-space: nowrap;
}

.app-shell-sidebar-wrapper .app-sidebar .app-nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 8px 120px 8px;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
}

.app-shell-sidebar-wrapper .app-sidebar .app-nav::-webkit-scrollbar {
	display: none;
}

/* ── Nav items (sidebar) ── */
.app-nav .nav-item,
.app-nav-horizontal .nav-item {
	border-radius: 10px;
	padding: 8px 12px;
	transition: all 0.2s ease;
}

.app-nav .nav-item {
	color: var(--shell-muted);
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	margin-bottom: 1px;
	border: 1px solid transparent;
}

.app-nav-horizontal .nav-item {
	color: var(--shell-text);
	font-weight: 600;
}

body.app-body[data-theme="light"] .app-nav-horizontal .nav-item {
	color: var(--shell-text);
}

.app-nav-horizontal .nav-item .nav-icon {
	filter: saturate(0.6);
}

.app-nav-horizontal .nav-item:hover {
	background: var(--shell-hover-bg);
	color: var(--shell-text);
}

body.app-body[data-theme="light"] .app-nav-horizontal .nav-item:hover {
	background: var(--shell-hover-bg);
}

.app-nav-horizontal .nav-item.active {
	background: var(--shell-accent-dim);
	color: var(--shell-accent);
	border-color: var(--shell-border-strong);
}

body.app-body[data-theme="light"] .app-nav-horizontal .nav-item.active {
	background: var(--shell-accent-dim);
	color: var(--shell-accent);
}

.app-nav .nav-item:hover {
	background: var(--shell-hover-bg);
	color: var(--shell-text);
}

body.app-body[data-theme="light"] .app-nav .nav-item:hover {
	background: var(--shell-hover-bg);
}

.app-nav .nav-item.active {
	background: var(--shell-accent-dim);
	color: var(--shell-accent);
	border-color: var(--shell-border-strong);
}

body.app-body[data-theme="light"] .app-nav .nav-item.active {
	background: var(--shell-accent-dim);
	color: var(--shell-accent);
}

.app-main {
	background: var(--shell-panel);
}

/* ── Main wrapper: takes remaining width, stacks topbar + content ── */
.app-main-wrapper {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Inner topbar ── */
.app-inner-topbar {
	height: 60px;
	background: var(--shell-topbar);
	border-bottom: 1px solid var(--shell-border);
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 12px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 20;
}

.app-inner-topbar .sidebar-toggle-btn {
	font-size: 17px;
	flex-shrink: 0;
}

.app-inner-topbar-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--shell-text);
	letter-spacing: -0.01em;
	flex-shrink: 0;
}

.app-inner-topbar-spacer {
	flex: 1;
}

.app-inner-topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Topbar action buttons */
.app-topbar-btn {
	padding: 5px 12px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--shell-border);
	background: rgba(56,160,255,0.07);
	color: var(--shell-muted);
	transition: all 0.2s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.app-topbar-btn:hover,
.app-topbar-btn.active {
	color: var(--shell-text);
	border-color: var(--shell-border-strong);
	background: var(--shell-accent-dim);
}

.app-topbar-btn.danger {
	background: rgba(248,113,113,0.08);
	border-color: rgba(248,113,113,0.20);
	color: rgba(248,113,113,0.70);
}

.app-topbar-btn.danger:hover {
	background: rgba(248,113,113,0.15);
	color: #f87171;
	border-color: rgba(248,113,113,0.40);
}

.app-topbar-btn.accent {
	background: linear-gradient(135deg, #1e63d5 0%, #1549b0 100%);
	border-color: #2563eb;
	color: #fff;
}

.app-topbar-btn.accent:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	color: #fff;
}

/* Topbar tabs (period selectors etc.) */
.app-inner-topbar-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
}

.app-topbar-tab {
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--shell-muted) !important;
	text-decoration: none;
	background: transparent !important;
	cursor: pointer;
	font-family: inherit;
	border: 1px solid transparent !important;
	appearance: none;
	-webkit-appearance: none;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
}

.app-topbar-tab:hover {
	color: var(--shell-text) !important;
	background: var(--shell-hover-bg) !important;
}

.app-topbar-tab.active {
	color: var(--shell-accent) !important;
	background: var(--shell-accent-dim) !important;
	border-color: var(--shell-border-strong) !important;
}

/* Topbar quick-action group */
.app-inner-topbar-quick {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Vertical divider between title and tabs */
.app-inner-topbar-divider {
	width: 1px;
	height: 20px;
	background: var(--shell-border);
	flex-shrink: 0;
	margin: 0 2px;
}

body.app-body[data-theme="light"] .app-inner-topbar {
	background: var(--shell-topbar);
	border-bottom-color: var(--shell-border);
}

body.app-body[data-theme="light"] .app-topbar-btn {
	color: var(--shell-muted);
	border-color: var(--shell-border);
}

body.app-body[data-theme="light"] .app-topbar-btn:hover,
body.app-body[data-theme="light"] .app-topbar-btn.active {
	color: var(--shell-accent);
	border-color: var(--shell-border-strong);
}

.app-main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.app-content {
	padding: 24px 26px 30px;
	flex: 1;
	width: 100%;
}

.app-panel {
	background: linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.95));
	border: 1px solid var(--shell-border);
	border-radius: 16px;
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25);
}

body.app-body[data-theme="light"] .app-panel {
	background: linear-gradient(180deg, rgba(242, 244, 248, 0.98), rgba(231, 236, 242, 0.94));
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1);
}

.button,
.btn,
button {
	border-radius: 10px !important;
}

.app-sidebar-bottom {
	border-top: 1px solid var(--shell-border);
	padding: 8px 10px max(10px, env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex-shrink: 0;
	background: var(--shell-surface);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
}

.sidebar-bottom-form {
	display: block;
	width: 100%;
}

.app-sidebar-bottom .nav-item {
	width: 100%;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--shell-muted);
	border-radius: 10px;
	padding: 8px 12px;
	margin-bottom: 1px;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	text-decoration: none;
}

.app-sidebar-bottom .nav-item:hover {
	background: var(--shell-hover-bg);
	color: var(--shell-text);
}

.app-sidebar-bottom .nav-item.active {
	background: var(--shell-accent-dim);
	color: var(--shell-accent);
	border-color: var(--shell-border-strong);
}

.sidebar-bottom-logout,
.sidebar-bottom-logout:hover {
	color: rgba(248,113,113,0.70) !important;
}

.sidebar-bottom-logout:hover {
	background: rgba(248,113,113,0.08) !important;
	border-color: rgba(248,113,113,0.20) !important;
	color: #f87171 !important;
}

.app-user-name {
	color: var(--shell-text);
}

.app-user-sub {
	color: var(--shell-muted);
}

body.app-body[data-theme="light"] .app-user-name {
	color: var(--shell-text);
}

body.app-body[data-theme="light"] .app-user-sub {
	color: var(--shell-muted);
}

/* Tables */
.table-shell,
table {
	background: rgba(15, 23, 42, 0.8);
}

body.app-body[data-theme="light"] .table-shell,
body.app-body[data-theme="light"] table {
	background: rgba(242, 244, 248, 0.92);
}

th {
	background: rgba(56,160,255,0.07);
}

body.app-body[data-theme="light"] th {
	background: rgba(29, 78, 216, 0.07);
}

/* ── Collapsed sidebar: hide text elements ── */
.app-shell-sidebar-wrapper .app-sidebar.collapsed .sidebar-brand-info,
.app-shell-sidebar-wrapper .app-sidebar.collapsed .sidebar-chip-info,
.app-shell-sidebar-wrapper .app-sidebar.collapsed .nav-text,
.app-shell-sidebar-wrapper .app-sidebar.collapsed .nav-section-label {
	display: none;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .sidebar-brand-block {
	justify-content: center;
	padding: 14px 8px;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .sidebar-user-chip {
	justify-content: center;
	padding: 8px;
	margin: 8px 6px 4px;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .app-nav .nav-item {
	justify-content: center;
	padding: 10px;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .app-sidebar-bottom {
	align-items: center;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .sidebar-bottom-form {
	width: auto;
}

.app-shell-sidebar-wrapper .app-sidebar.collapsed .app-sidebar-bottom .nav-item {
	justify-content: center;
	padding: 10px;
	width: auto;
}