/* ============================================================
   BIP — Modern Design System
   CSS custom properties for a configurable theme.
   Bootstrap 5.3 data-bs-theme handles light/dark automatically.
   ============================================================ */

/* ----- Theme custom properties ----- */
:root {
	--bip-primary: #4f46e5;
	--bip-primary-light: #818cf8;
	--bip-primary-dark: #3730a3;
	--bip-primary-subtle: #eef2ff;
	--bip-primary-rgb: 79, 70, 229;
	--bip-radius: 0.75rem;
	--bip-radius-sm: 0.5rem;
	--bip-radius-lg: 1rem;
	--bip-radius-xl: 1.25rem;
	--bip-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
	--bip-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--bip-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
	--bip-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
	--bip-transition: 150ms cubic-bezier(.4,0,.2,1);
	--bip-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
[data-bs-theme="dark"] {
	--bip-primary-subtle: rgba(79,70,229,.15);
	--bip-shadow-sm: 0 1px 2px rgba(0,0,0,.2);
	--bip-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
	--bip-shadow-md: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.2);
	--bip-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.2);
}

/* ----- Bootstrap overrides ----- */
html, body { height: 100%; font-family: var(--bip-font); }
body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.btn-primary {
	--bs-btn-bg: var(--bip-primary); --bs-btn-border-color: var(--bip-primary);
	--bs-btn-hover-bg: var(--bip-primary-dark); --bs-btn-hover-border-color: var(--bip-primary-dark);
	--bs-btn-active-bg: var(--bip-primary-dark); --bs-btn-active-border-color: var(--bip-primary-dark);
	--bs-btn-disabled-bg: var(--bip-primary); --bs-btn-disabled-border-color: var(--bip-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--bip-primary); --bs-btn-border-color: var(--bip-primary);
	--bs-btn-hover-bg: var(--bip-primary); --bs-btn-hover-border-color: var(--bip-primary);
	--bs-btn-active-bg: var(--bip-primary); --bs-btn-active-border-color: var(--bip-primary);
}
.badge.text-bg-primary { background-color: var(--bip-primary) !important; }
.text-primary { color: var(--bip-primary) !important; }
a { color: var(--bip-primary); }
a:hover { color: var(--bip-primary-dark); }
.nav-link.active, .nav-tabs .nav-link.active { color: var(--bip-primary); border-bottom-color: var(--bip-primary); }
.progress-bar { background-color: var(--bip-primary); }
.form-check-input:checked { background-color: var(--bip-primary); border-color: var(--bip-primary); }
.form-control:focus, .form-select:focus { border-color: var(--bip-primary-light); box-shadow: 0 0 0 0.2rem rgba(var(--bip-primary-rgb),.15); }

/* ----- Sidebar ----- */
.bip-sidebar {
	position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 1040;
	background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color);
	display: flex; flex-direction: column; transition: transform var(--bip-transition); overflow-y: auto;
}
.bip-sidebar-backdrop { display: none; }
.bip-sidebar .bip-sidebar-brand {
	padding: 1.25rem 1.25rem 0.75rem; font-size: 1.25rem; font-weight: 700;
	letter-spacing: -0.03em; color: var(--bip-primary); text-decoration: none;
	display: flex; align-items: center; gap: 0.5rem;
}
.bip-sidebar .bip-sidebar-brand .bip-logo-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--bip-primary);
}
.bip-sidebar-nav { flex: 1; padding: 0.5rem 0.75rem; list-style: none; margin: 0; }
.bip-sidebar-nav .bip-nav-section {
	font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--bs-secondary-color); padding: 1rem 0.75rem 0.35rem;
}
.bip-sidebar-nav .bip-nav-item { margin-bottom: 2px; }
.bip-sidebar-nav .bip-nav-link {
	display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem;
	border-radius: var(--bip-radius-sm); color: var(--bs-body-color); text-decoration: none;
	font-size: 0.875rem; font-weight: 500; transition: background var(--bip-transition), color var(--bip-transition);
}
.bip-sidebar-nav .bip-nav-link:hover { background: var(--bip-primary-subtle); color: var(--bip-primary); }
.bip-sidebar-nav .bip-nav-link.active { background: var(--bip-primary-subtle); color: var(--bip-primary); font-weight: 600; }
.bip-sidebar-nav .bip-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.bip-sidebar-nav .bip-nav-link.active svg, .bip-sidebar-nav .bip-nav-link:hover svg { opacity: 1; color: var(--bip-primary); }
.bip-sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--bs-border-color); }
.bip-sidebar-user { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: var(--bip-radius-sm); }
.bip-sidebar-user .bip-avatar {
	width: 34px; height: 34px; border-radius: 50%; background: var(--bip-primary-subtle);
	color: var(--bip-primary); display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
}
.bip-sidebar-user .bip-user-info { flex: 1; min-width: 0; }
.bip-sidebar-user .bip-user-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bip-sidebar-user .bip-user-role { font-size: 0.72rem; color: var(--bs-secondary-color); }

/* ----- Content area ----- */
.bip-content { margin-left: 260px; transition: margin-left var(--bip-transition); }

/* ----- Topbar ----- */
.bip-topbar {
	position: sticky; top: 0; z-index: 1020; background: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color); padding: 0.625rem 1.5rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px;
}
@supports (background-color: color-mix(in srgb, black 50%, transparent)) {
	.bip-topbar { background-color: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.bip-topbar-left { display: flex; align-items: center; gap: 0.75rem; }
.bip-topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.bip-topbar .bip-menu-toggle {
	display: none; padding: 0.35rem; border: none; background: none; color: var(--bs-body-color);
	border-radius: var(--bip-radius-sm); cursor: pointer;
}
.bip-topbar .bip-menu-toggle:hover { background: var(--bs-tertiary-bg); }
.bip-breadcrumb { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--bs-secondary-color); margin: 0; padding: 0; list-style: none; }
.bip-breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; }
.bip-breadcrumb a:hover { color: var(--bip-primary); }
.bip-breadcrumb .bip-bc-sep { color: var(--bs-secondary-color); opacity: 0.5; }
.bip-breadcrumb .bip-bc-current { color: var(--bs-body-color); font-weight: 600; }
.bip-theme-toggle {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bs-border-color);
	background: transparent; color: var(--bs-body-color); display: flex; align-items: center;
	justify-content: center; cursor: pointer; transition: background var(--bip-transition);
}
.bip-theme-toggle:hover { background: var(--bs-tertiary-bg); }
.bip-theme-toggle svg { width: 16px; height: 16px; }

/* ----- Page header ----- */
.bip-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bip-page-header h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.bip-page-header .bip-page-subtitle { font-size: 0.85rem; color: var(--bs-secondary-color); margin-top: 0.15rem; }
.bip-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ----- Cards ----- */
.bip-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); box-shadow: var(--bip-shadow-sm); transition: box-shadow var(--bip-transition); }
.bip-card:hover { box-shadow: var(--bip-shadow); }
.bip-card-body { padding: 1.25rem; }
.bip-card-header { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--bs-border-color); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; }
.bip-stat-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); padding: 1.25rem; box-shadow: var(--bip-shadow-sm); }
.bip-stat-card .bip-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); margin-bottom: 0.4rem; }
.bip-stat-card .bip-stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.bip-stat-card .bip-stat-unit { font-size: 0.875rem; font-weight: 500; color: var(--bs-secondary-color); }
.bip-stat-card .bip-stat-sub { font-size: 0.78rem; color: var(--bs-secondary-color); margin-top: 0.25rem; }

/* ----- Tables ----- */
.bip-table { width: 100%; font-size: 0.875rem; }
.bip-table thead th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); border-bottom: 2px solid var(--bs-border-color); padding: 0.6rem 0.75rem; white-space: nowrap; }
.bip-table tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
.bip-table tbody tr { transition: background var(--bip-transition); }
.bip-table tbody tr:hover { background: var(--bip-primary-subtle); }
.bip-table tbody tr:last-child td { border-bottom: none; }

/* ----- Badges ----- */
.bip-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; }
.bip-badge-success { background: #dcfce7; color: #15803d; }
.bip-badge-muted { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.bip-badge-primary { background: var(--bip-primary-subtle); color: var(--bip-primary); }
.bip-badge-danger { background: #fee2e2; color: #b91c1c; }
[data-bs-theme="dark"] .bip-badge-success { background: rgba(34,197,94,.15); color: #4ade80; }
[data-bs-theme="dark"] .bip-badge-danger { background: rgba(239,68,68,.15); color: #f87171; }

/* ----- Filter bar ----- */
.bip-filter-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1rem; background: var(--bs-tertiary-bg); border-radius: var(--bip-radius-sm); margin-bottom: 1rem; }
.bip-filter-bar .form-control { max-width: 320px; border-radius: var(--bip-radius-sm); }

/* ----- Usage telemetry page ----- */
.usage-chart-wrap {
	position: relative;
	height: 320px;
}
.usage-chart-wrap--donut {
	height: 320px;
}
@media (max-width: 992px) {
	.usage-chart-wrap,
	.usage-chart-wrap--donut {
		height: 280px;
	}
}

/* ----- Alert ----- */
.bip-alert { border-radius: var(--bip-radius-sm); padding: 0.75rem 1rem; font-size: 0.85rem; border: 1px solid var(--bs-border-color); display: flex; align-items: flex-start; gap: 0.5rem; }
.bip-alert-info { background: var(--bip-primary-subtle); border-color: rgba(var(--bip-primary-rgb),.2); color: var(--bip-primary-dark); }
[data-bs-theme="dark"] .bip-alert-info { color: var(--bip-primary-light); }

/* ----- Report cards ----- */
.bip-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.bip-report-card {
	background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius);
	overflow: hidden; text-decoration: none; color: var(--bs-body-color);
	transition: box-shadow var(--bip-transition), transform var(--bip-transition); display: flex; flex-direction: column;
}
.bip-report-card:hover { box-shadow: var(--bip-shadow-md); transform: translateY(-2px); color: var(--bs-body-color); }
.bip-report-card .bip-report-cover,
.bip-report-card .bip-report-thumb { aspect-ratio: 16/9; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bip-report-card .bip-report-cover img,
.bip-report-card .bip-report-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bip-report-card .bip-report-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--bs-secondary-color); opacity: .5; }
.bip-report-card .bip-report-body,
.bip-report-card .bip-report-info { padding: 0.65rem 0.75rem; flex: 1; }
.bip-report-card .bip-report-title,
.bip-report-card .bip-report-name { font-weight: 600; font-size: 0.85rem; line-height: 1.3; margin-bottom: 0.15rem; }
.bip-report-card .bip-report-desc { font-size: 0.75rem; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Reports List Page (rpl-*) ===== */

/* Hero */
.rpl-hero {
	background: linear-gradient(135deg, var(--bip-primary-subtle) 0%, transparent 70%);
	border-radius: var(--bip-radius-lg);
	padding: 2rem 2.25rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(var(--bip-primary-rgb), .08);
	position: relative;
	overflow: hidden;
}
.rpl-hero::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(var(--bip-primary-rgb), .04);
	pointer-events: none;
}
.rpl-hero::after {
	content: '';
	position: absolute;
	bottom: -50%;
	right: 15%;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(var(--bip-primary-rgb), .03);
	pointer-events: none;
}
.rpl-hero-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.rpl-hero-title {
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--bs-body-color);
}
.rpl-hero-subtitle {
	font-size: 0.82rem;
	color: var(--bs-secondary-color);
	margin: 0.3rem 0 0;
	font-weight: 500;
}

/* Order button */
.rpl-btn-order {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: var(--bip-radius);
	border: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--bip-transition);
	box-shadow: var(--bip-shadow-sm);
}
.rpl-btn-order:hover {
	border-color: var(--bip-primary-light);
	color: var(--bip-primary);
	box-shadow: var(--bip-shadow);
	transform: translateY(-1px);
}
.rpl-btn-order svg { opacity: .7; }
.rpl-btn-order:hover svg { opacity: 1; }

.rpl-card { position: relative; }
.rpl-fav-btn {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	z-index: 3;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--bs-border-color);
	background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
	color: var(--bs-secondary-color);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: all var(--bip-transition);
}
.rpl-fav-btn:hover { color: #f59e0b; border-color: #f59e0b; }
.rpl-fav-btn.is-favorite { color: #f59e0b; border-color: #f59e0b; }
.rpl-fav-btn svg { pointer-events: none; }

/* Search bar */
.rpl-search-bar { margin-bottom: 1.75rem; }
.rpl-search-wrapper {
	position: relative;
	max-width: 480px;
}
.rpl-search-icon {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bs-secondary-color);
	pointer-events: none;
	opacity: .6;
	transition: opacity var(--bip-transition);
}
.rpl-search-input {
	width: 100%;
	padding: 0.65rem 3rem 0.65rem 2.6rem;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bip-radius);
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-size: 0.85rem;
	font-weight: 500;
	outline: none;
	transition: border-color var(--bip-transition), box-shadow var(--bip-transition);
}
.rpl-search-input::placeholder { color: var(--bs-secondary-color); font-weight: 400; }
.rpl-search-input:focus {
	border-color: var(--bip-primary);
	box-shadow: 0 0 0 3px rgba(var(--bip-primary-rgb), .1);
}
.rpl-search-input:focus ~ .rpl-search-icon { opacity: 1; color: var(--bip-primary); }
.rpl-search-kbd {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.65rem;
	font-weight: 600;
	font-family: var(--bip-font);
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	border: 1px solid var(--bs-border-color);
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
	line-height: 1.2;
	pointer-events: none;
}
.rpl-search-input:focus ~ .rpl-search-kbd { display: none; }

/* Empty state */
.rpl-empty {
	text-align: center;
	padding: 4rem 2rem;
	max-width: 420px;
	margin: 2rem auto;
}
.rpl-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--bip-primary-subtle);
	color: var(--bip-primary);
	margin-bottom: 1.5rem;
}
.rpl-empty-icon svg { opacity: .5; }
.rpl-empty-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--bs-body-color);
}
.rpl-empty-text {
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
	margin: 0;
	line-height: 1.6;
}

/* Category section */
.rpl-category { margin-bottom: 2rem; }
.rpl-category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--bs-border-color);
}
.rpl-category-left {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.rpl-category-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bip-primary);
	flex-shrink: 0;
}
.rpl-category-title {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0;
	color: var(--bs-body-color);
	letter-spacing: -0.01em;
}
.rpl-category-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 0.4rem;
	border-radius: 11px;
	font-size: 0.68rem;
	font-weight: 700;
	background: var(--bip-primary-subtle);
	color: var(--bip-primary);
	line-height: 1;
}
.rpl-category-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--bip-radius-sm);
	background: transparent;
	color: var(--bs-secondary-color);
	cursor: pointer;
	transition: all var(--bip-transition);
}
.rpl-category-toggle:hover {
	background: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
}

/* Card grid */
.rpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
	transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin-top .35s ease;
	overflow: hidden;
}

/* Card */
.rpl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bip-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--bs-body-color);
	transition: box-shadow .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), border-color .25s ease;
}
.rpl-card:hover {
	box-shadow: var(--bip-shadow-lg);
	transform: translateY(-4px);
	border-color: rgba(var(--bip-primary-rgb), .25);
	color: var(--bs-body-color);
}

/* Card cover */
.rpl-card-cover {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--bs-tertiary-bg);
	overflow: hidden;
}
.rpl-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.rpl-card:hover .rpl-card-cover img { transform: scale(1.05); }
.rpl-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--bs-secondary-color);
	opacity: .3;
	background: linear-gradient(145deg, var(--bs-tertiary-bg), var(--bip-primary-subtle));
}
[data-bs-theme="dark"] .rpl-card-placeholder {
	background: linear-gradient(145deg, var(--bs-tertiary-bg), rgba(var(--bip-primary-rgb), .08));
}

/* Hover overlay */
.rpl-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
.rpl-card:hover .rpl-card-overlay { opacity: 1; }
.rpl-card-open {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border-radius: var(--bip-radius);
	background: rgba(255,255,255,.95);
	color: #1a1a2e;
	font-size: 0.78rem;
	font-weight: 600;
	transform: translateY(6px);
	transition: transform .25s cubic-bezier(.4,0,.2,1);
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.rpl-card:hover .rpl-card-open { transform: translateY(0); }

/* Card body */
.rpl-card-body {
	padding: 0.85rem 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.rpl-card-title {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	letter-spacing: -0.01em;
}
.rpl-card-desc {
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	margin: 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rpl-card-meta {
	margin-top: auto;
	padding-top: 0.5rem;
}
.rpl-card-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
	letter-spacing: 0.02em;
}

/* No-results */
.rpl-no-results {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--bs-secondary-color);
}
.rpl-no-results svg { opacity: .35; margin-bottom: 0.75rem; }
.rpl-no-results p { font-size: 0.85rem; margin: 0; }

/* Responsive */
@media (max-width: 991.98px) {
	.rpl-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 575.98px) {
	.rpl-hero { padding: 1.5rem; }
	.rpl-hero-title { font-size: 1.3rem; }
	.rpl-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
	.rpl-card-body { padding: 0.65rem 0.75rem; }
	.rpl-card-overlay { display: none; }
	.rpl-search-wrapper { max-width: 100%; }
}

/* ----- Embed overlay / spinner ----- */
.bip-embed-overlay {
	position: absolute; inset: 0; z-index: 10;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
	background: var(--bs-body-bg); border-radius: var(--bip-radius);
	transition: opacity .4s ease, visibility .4s ease;
}
.bip-embed-overlay--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.bip-embed-spinner {
	width: 44px; height: 44px; border: 4px solid var(--bs-border-color);
	border-top-color: var(--bip-primary); border-radius: 50%;
	animation: bip-spin .8s linear infinite;
}
@keyframes bip-spin { to { transform: rotate(360deg); } }
.bip-embed-spinner-text { font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); }
.bip-embed-error {
	position: absolute; inset: 0; z-index: 11;
	display: flex; align-items: center; justify-content: center;
	background: var(--bs-body-bg); border-radius: var(--bip-radius);
	color: var(--bs-danger); font-weight: 600; font-size: .9rem; padding: 1.5rem; text-align: center;
}

/* ----- Report toolbar & wrapper & fullscreen ----- */
.bip-report-toolbar {
	display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
	padding: .35rem 0; min-height: 36px;
}
.bip-report-wrapper {
	position: relative; height: calc(100vh - 220px); min-height: 400px;
}
.bip-refresh-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .65rem; border: none; border-radius: var(--bip-radius-sm);
	background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
	font-size: .75rem; font-weight: 500; line-height: 1;
	margin-right: auto;
}
.bip-refresh-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.bip-fullscreen-btn {
	width: 32px; height: 32px; border: none; border-radius: var(--bip-radius-sm);
	background: var(--bs-tertiary-bg); color: var(--bs-body-color); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--bip-transition), color var(--bip-transition);
}
.bip-fullscreen-btn:hover { background: var(--bip-primary-subtle); color: var(--bip-primary); }
.bip-fullscreen-btn svg { width: 16px; height: 16px; }
.bip-report-wrapper:fullscreen,
.bip-report-wrapper:-webkit-full-screen {
	background: var(--bs-body-bg); padding: 0; height: 100vh !important;
}
.bip-report-wrapper:fullscreen .border,
.bip-report-wrapper:-webkit-full-screen .border {
	border: none !important; border-radius: 0 !important;
}

/* ----- Permission page ----- */
.perm-tabs-bar { display: flex; gap: .25rem; padding: .25rem; background: var(--bs-tertiary-bg); border-radius: var(--bip-radius); margin-bottom: 1.25rem; }
.perm-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border: none; background: transparent; border-radius: calc(var(--bip-radius) - 2px); font-weight: 600; font-size: .82rem; color: var(--bs-secondary-color); cursor: pointer; transition: all var(--bip-transition); }
.perm-tab:hover { color: var(--bs-body-color); background: rgba(var(--bip-primary-rgb),.06); }
.perm-tab.active { background: var(--bs-body-bg); color: var(--bip-primary); box-shadow: var(--bip-shadow-sm); }
.perm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .4rem; border-radius: 10px; font-size: .7rem; font-weight: 700; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); line-height: 1; }
.perm-tab.active .perm-tab-count { background: var(--bip-primary-subtle); color: var(--bip-primary); }

/* Panels layout */
.perm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 767.98px) { .perm-panels { grid-template-columns: 1fr; } }
.perm-panel { display: flex; flex-direction: column; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); overflow: hidden; }
.perm-panel-assigned { border-color: rgba(var(--bip-primary-rgb),.2); }
.perm-panel-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .85rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap; }
.perm-panel-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.perm-panel-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.perm-search { border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius-sm); padding: .3rem .6rem; font-size: .78rem; background: var(--bs-body-bg); color: var(--bs-body-color); outline: none; width: 140px; transition: border-color var(--bip-transition); }
.perm-search:focus { border-color: var(--bip-primary); }

/* List items */
.perm-list { flex: 1; min-height: 200px; max-height: 55vh; overflow-y: auto; padding: .35rem; }
.perm-list-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: var(--bip-radius-sm); border: 1px solid transparent; cursor: pointer; transition: all var(--bip-transition); }
.perm-list-item:hover { background: var(--bip-primary-subtle); }
.perm-list-item + .perm-list-item { margin-top: 2px; }
.perm-list-item-body { flex: 1; min-width: 0; }
.perm-list-item-name { font-weight: 600; font-size: .82rem; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .4rem; }
.perm-list-item-meta { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--bs-secondary-color); font-size: .82rem; }
.perm-list-empty svg { opacity: .3; }

/* Available items */
.perm-item { background: transparent; border: 1px solid transparent; text-align: left; width: 100%; }
.perm-item:hover .perm-add-icon { opacity: 1; transform: scale(1.1); }
.perm-add-icon { opacity: .3; color: var(--bip-primary); transition: all var(--bip-transition); flex-shrink: 0; }

/* Assigned items */
.perm-assigned { cursor: pointer; }
.perm-assigned .perm-remove { opacity: 0; transition: opacity var(--bip-transition); }
.perm-assigned:hover .perm-remove { opacity: 1; }

/* Bulk mode */
.perm-list.bulk-mode .perm-remove { visibility: hidden; width: 0; padding: 0; overflow: hidden; }
.perm-assigned.is-selected { background-color: var(--bip-primary-subtle); border-color: rgba(var(--bip-primary-rgb),.3); }

/* Avatar */
.perm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; flex-shrink: 0; }
.perm-avatar-assigned { background: var(--bip-primary-subtle); color: var(--bip-primary); }
.perm-avatar-group { border-radius: var(--bip-radius-sm); }
.perm-avatar-group svg { width: 14px; height: 14px; }

/* Policy icons */
.perm-policy-icons { display: inline-flex; gap: .2rem; margin-left: .15rem; }
.perm-policy-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bip-primary); cursor: pointer; transition: all var(--bip-transition); }
.perm-policy-icon:hover { background: var(--bip-primary-subtle); transform: scale(1.15); }
.perm-filter-icon { display: inline-flex; vertical-align: middle; }

/* Ghost buttons */
.perm-btn-ghost { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--bip-radius-sm); border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); cursor: pointer; transition: all var(--bip-transition); }
.perm-btn-ghost:hover { border-color: var(--bip-primary-light); color: var(--bip-primary); background: var(--bip-primary-subtle); }
.perm-btn-ghost:disabled { opacity: .4; pointer-events: none; }
.perm-btn-ghost-active { border-color: var(--bip-primary); color: #fff; background: var(--bip-primary); }
.perm-btn-ghost-active:hover { background: var(--bip-primary-dark); border-color: var(--bip-primary-dark); color: #fff; }
.perm-btn-danger:hover { border-color: var(--bs-danger); color: var(--bs-danger); background: rgba(var(--bs-danger-rgb),.08); }
.perm-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--bs-secondary-color); cursor: pointer; transition: all var(--bip-transition); flex-shrink: 0; }
.perm-btn-icon:hover { background: rgba(var(--bs-danger-rgb),.1); color: var(--bs-danger); }

/* Status message */
.perm-status-msg { font-size: .72rem; font-weight: 400; color: var(--bs-success); margin-left: .35rem; }

/* Policy modal */
.perm-modal .modal-header { padding: 1.15rem 1.5rem; }
.perm-modal .modal-body { padding: 1.15rem 1.5rem; }
.perm-modal .modal-footer { padding: .75rem 1.5rem; }
.perm-modal-section { padding: 1rem; margin-bottom: .75rem; background: var(--bs-tertiary-bg); border-radius: var(--bip-radius); border: 1px solid var(--bs-border-color); }
.perm-modal-section-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; color: var(--bs-body-color); margin-bottom: .65rem; }
.perm-preview-frame { position: relative; height: 320px; border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius-sm); overflow: hidden; background: var(--bs-body-bg); }
.perm-preview-canvas { width: 100%; height: 100%; }

/* Info cards */
.perm-info-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); margin-bottom: 1rem; overflow: hidden; }
.perm-info-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.perm-info-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; color: var(--bs-body-color); }
.perm-info-card-count { font-size: .75rem; color: var(--bs-secondary-color); font-weight: 500; }
.perm-info-card-body { padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.perm-info-card-empty { padding: .75rem 1rem; font-size: .82rem; color: var(--bs-secondary-color); }
.perm-info-card-list { padding: 0; }
.perm-info-card-list-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.perm-info-card-list-item:last-child { border-bottom: none; }

/* Section label */
.perm-section-label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; color: var(--bs-body-color); margin: 1.25rem 0 .75rem; }

/* ----- Entity listing toolbar ----- */
.entity-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.entity-toolbar-search { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.entity-toolbar-search .entity-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--bs-secondary-color); pointer-events: none; }
.entity-toolbar-search input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .82rem; outline: none; transition: border-color var(--bip-transition), box-shadow var(--bip-transition); }
.entity-toolbar-search input::placeholder { color: var(--bs-secondary-color); }
.entity-toolbar-search input:focus { border-color: var(--bip-primary); box-shadow: 0 0 0 3px rgba(var(--bip-primary-rgb),.08); }
.entity-toolbar-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.entity-bulk-hint { font-size: .78rem; color: var(--bs-secondary-color); padding: .5rem .85rem; background: var(--bs-tertiary-bg); border-radius: var(--bip-radius-sm); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--bs-border-color); }

/* Entity avatar */
.entity-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bip-primary-subtle); color: var(--bip-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; flex-shrink: 0; text-transform: uppercase; }
.entity-avatar-group { border-radius: var(--bip-radius-sm); }

/* Entity action button (three-dot menu) */
.entity-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--bip-radius-sm); border: 1px solid transparent; background: transparent; color: var(--bs-secondary-color); cursor: pointer; transition: all var(--bip-transition); }
.entity-action-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* Entity dropdown menu */
.entity-dropdown { padding: .35rem 0; min-width: 180px; border-radius: var(--bip-radius) !important; box-shadow: var(--bip-shadow-lg) !important; border-color: var(--bs-border-color) !important; }
.entity-dropdown .dropdown-item { font-size: .82rem; padding: .45rem .85rem; display: flex; align-items: center; gap: .5rem; }
.entity-dropdown .dropdown-item svg { width: 14px; height: 14px; color: var(--bs-secondary-color); flex-shrink: 0; }
.entity-dropdown .dropdown-item:hover svg { color: inherit; }
.entity-dropdown .dropdown-item-danger { color: var(--bs-danger); }
.entity-dropdown .dropdown-item-danger svg { color: var(--bs-danger); }
.entity-dropdown .dropdown-divider { margin: .3rem 0; }
.entity-dropdown form { margin: 0; }
.entity-dropdown form .dropdown-item { width: 100%; border: none; background: transparent; text-align: left; }

/* Entity thumbnail */
.entity-thumb { width: 64px; height: 36px; border-radius: var(--bip-radius-sm); overflow: hidden; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.entity-thumb img { width: 100%; height: 100%; object-fit: cover; }
.entity-thumb-placeholder { color: var(--bs-secondary-color); opacity: .4; }

/* ----- Drag & drop ----- */
.drag-handle-category, .drag-handle-report { cursor: grab; }
.is-dragging { opacity: 0.75; }

/* ----- Login ----- */
.bip-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); }
.bip-login-card { width: 100%; max-width: 400px; padding: 2.5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius-lg); box-shadow: var(--bip-shadow-lg); }
.bip-login-logo { text-align: center; margin-bottom: 1.5rem; }
.bip-login-logo .bip-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--bip-radius); background: var(--bip-primary); color: #fff; font-weight: 800; font-size: 1.25rem; margin-bottom: 0.5rem; }
.bip-login-logo h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.bip-login-logo p { font-size: 0.85rem; color: var(--bs-secondary-color); margin: 0.25rem 0 0; }
.bip-login-card .bip-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; font-size: 0.78rem; color: var(--bs-secondary-color); }
.bip-login-card .bip-divider::before, .bip-login-card .bip-divider::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color); }

/* ----- Buttons ----- */
.btn { border-radius: var(--bip-radius-sm); font-weight: 500; font-size: 0.85rem; transition: all var(--bip-transition); }
.btn-sm { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
.bip-btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bip-radius-sm); }

/* ----- Forms ----- */
.form-control, .form-select { border-radius: var(--bip-radius-sm); border-color: var(--bs-border-color); font-size: 0.875rem; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: 0.3rem; }
.form-text { font-size: 0.75rem; color: var(--bs-secondary-color); }

/* ----- Modals ----- */
.modal-content { border-radius: var(--bip-radius-lg); border: 1px solid var(--bs-border-color); box-shadow: var(--bip-shadow-lg); }
.modal-header { border-bottom-color: var(--bs-border-color); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-size: 1rem; font-weight: 700; }
.modal-footer { border-top-color: var(--bs-border-color); padding: 0.75rem 1.25rem; }

/* ----- Empty state ----- */
.bip-empty-state { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color); }
.bip-empty-state svg { width: 48px; height: 48px; margin-bottom: 0.75rem; opacity: 0.4; }
.bip-empty-state p { font-size: 0.9rem; margin: 0; }

/* ----- Theme config ----- */
.bip-color-swatch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.65rem; border-radius: var(--bip-radius-sm); border: 1px solid var(--bs-border-color); font-size: 0.82rem; font-family: monospace; cursor: pointer; transition: background var(--bip-transition); }
.bip-color-swatch:hover { background: var(--bs-tertiary-bg); }
.bip-color-swatch .bip-swatch-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

/* ----- Admin index grid ----- */
.bip-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.bip-admin-link { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bip-radius); text-decoration: none; color: var(--bs-body-color); transition: box-shadow var(--bip-transition), border-color var(--bip-transition); }
.bip-admin-link:hover { border-color: var(--bip-primary-light); box-shadow: var(--bip-shadow-md); color: var(--bs-body-color); }
.bip-admin-link .bip-admin-icon { width: 40px; height: 40px; border-radius: var(--bip-radius-sm); background: var(--bip-primary-subtle); color: var(--bip-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bip-admin-link .bip-admin-label { font-weight: 600; font-size: 0.9rem; }
.bip-admin-link .bip-admin-desc { font-size: 0.75rem; color: var(--bs-secondary-color); }

/* ----- Report view ----- */
#report-container { background-color: var(--bs-body-bg); border-radius: var(--bip-radius); }

/* ----- Surfaces (cards, list-groups) ----- */
.card, .accordion-item, .list-group-item { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); }
.alert { border-color: var(--bs-border-color); }

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
	.bip-sidebar { transform: translateX(-100%); }
	.bip-sidebar.show { transform: translateX(0); }
	.bip-sidebar-backdrop.show { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.3); }
	.bip-content { margin-left: 0; }
	.bip-topbar .bip-menu-toggle { display: flex; }
	.bip-report-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 575.98px) {
	.bip-report-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
	.bip-page-header { flex-direction: column; align-items: flex-start; }
	.bip-login-card { margin: 1rem; padding: 1.75rem; }
	.bip-admin-grid { grid-template-columns: 1fr; }
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bs-secondary-bg); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bs-tertiary-color); }

/* ----- Print ----- */
@media print {
	.bip-sidebar, .bip-topbar, .bip-sidebar-backdrop { display: none !important; }
	.bip-content { margin-left: 0 !important; }
}