/**
 * Autopilot Portal Design System: 2D Flat Modern SaaS Design.
 * Clean, crisp, high-contrast, zero-gradient, zero-blur.
 * 100% CSS Logical Properties (Flawless RTL & LTR).
 * Standalone - Zero External Dependencies.
 *
 * @package AutopilotPortal
 */

:root {
	/* 2D Flat Design System Tokens */
	--bap-primary: #4F46E5;
	--bap-primary-dark: #3730A3;
	--bap-primary-light: #EEF2FF;
	--bap-primary-hover: #3730A3;
	--bap-primary-text: #FFFFFF;
	--bap-primary-contrast: #FFFFFF;

	--bap-accent: #06B6D4;
	--bap-accent-cyan: #06B6D4;
	--bap-accent-emerald: #10B981;
	--bap-accent-amber: #F59E0B;
	--bap-accent-purple: #8B5CF6;

	--bap-success: #10B981;
	--bap-warning: #F59E0B;
	--bap-warn: #F59E0B;
	--bap-danger: #EF4444;
	--bap-info: #3B82F6;
	--bap-announcement: #8B5CF6;
	--bap-important: #4F46E5;
	--bap-critical: #EF4444;

	--bap-bg: #F8FAFC;
	--bap-surface: #FFFFFF;
	--bap-surface-2: #F1F5F9;
	--bap-surface-elevated: #FFFFFF;
	--bap-surface-solid: #FFFFFF;
	--bap-surface-hover: #F1F5F9;

	--bap-text: #0F172A;
	--bap-text-muted: #64748B;
	--bap-text-dim: #94A3B8;

	--bap-border: #E2E8F0;
	--bap-border-subtle: #CBD5E1;
	--bap-border-accent: #4F46E5;

	--bap-radius-sm: 4px;
	--bap-radius: 8px;
	--bap-radius-md: 6px;
	--bap-radius-lg: 8px;
	--bap-radius-xl: 8px;
	--bap-radius-full: 999px;

	--bap-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--bap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--bap-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
	--bap-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.1);
	--bap-shadow-glow: none;

	--bap-focus-ring: #4F46E5;
	--bap-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bap-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--bap-font-ar: "Segoe UI", Tahoma, Arial, sans-serif;

	--bap-space-8: 32px;
	--bap-text-xs: 0.75rem;
	--bap-text-sm: 0.875rem;
	--bap-text-base: 1rem;
	--bap-text-lg: 1.125rem;
	--bap-touch-min: 44px;
}

[data-theme="dark"] {
	--bap-bg: #0F172A;
	--bap-surface: #1E293B;
	--bap-surface-2: #334155;
	--bap-surface-elevated: #1E293B;
	--bap-surface-solid: #1E293B;
	--bap-surface-hover: #334155;

	--bap-text: #F8FAFC;
	--bap-text-muted: #94A3B8;
	--bap-text-dim: #64748B;

	--bap-border: #334155;
	--bap-border-subtle: #1E293B;
	--bap-border-accent: #4F46E5;
	--bap-primary-light: #1E293B;

	--bap-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--bap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--bap-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.3);
	--bap-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Base Wrapper */
.bap-dashboard-wrap, .bap-auth-container {
	font-family: var(--bap-font-sans);
	color: var(--bap-text);
	background: var(--bap-bg);
	box-sizing: border-box;
	line-height: 1.6;
}

.bap-dashboard-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	padding-block-end: 3rem;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.bap-dashboard-wrap *, .bap-auth-container * {
	box-sizing: border-box;
}

.bap-container {
	inline-size: 100%;
	max-inline-size: 1240px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.bap-hp-trap {
	position: absolute !important;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.bap-toast-region {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}

.bap-flex-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.bap-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* ========================================================
   TOP BENTO STATUS BAR (TENANT HUD)
   ======================================================== */
.bap-top-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius);
	padding: 1.25rem 1.5rem;
	margin-block-end: 1.5rem;
	box-shadow: var(--bap-shadow);
	gap: 1.25rem;
}

.bap-top-bar > *, .bap-top-main, .bap-user-meta {
	min-inline-size: 0;
}

.bap-top-main {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.bap-user-profile-badge {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.bap-user-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--bap-radius-md);
	background: var(--bap-primary);
	color: #FFFFFF;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bap-user-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bap-user-name-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bap-user-name {
	font-size: 1.0625rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-inline-size: 14rem;
}

.bap-user-tag {
	font-family: var(--bap-font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--bap-text-muted);
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	padding: 2px 7px;
	border-radius: var(--bap-radius-full);
}

.bap-admin-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--bap-radius-full);
	font-size: 0.6875rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--bap-surface-2);
	color: var(--bap-text);
	border: 1px solid var(--bap-border);
}

.bap-admin-pill:hover, .bap-admin-pill:focus-visible {
	border-color: var(--bap-primary);
	color: var(--bap-primary);
}

.bap-status-pills {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bap-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	border-radius: var(--bap-radius-full);
	border: 1px solid transparent;
}

.bap-pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Status Pill Tints */
.status-trial, .status-expiring {
	background: #FFFBEB;
	color: #F59E0B;
	border-color: #F59E0B;
}

.status-active {
	background: #ECFDF5;
	color: #10B981;
	border-color: #10B981;
}

.status-grace {
	background: #FEF2F2;
	color: #EF4444;
	border-color: #EF4444;
}

.status-paused, .status-cancelled {
	background: var(--bap-surface-2);
	color: var(--bap-text-muted);
	border-color: var(--bap-border);
}

.bap-plan-badge {
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--bap-primary-light);
	color: var(--bap-primary);
	border: 1px solid var(--bap-primary);
	padding: 3px 9px;
	border-radius: var(--bap-radius-full);
	letter-spacing: 0.03em;
}

.bap-top-metrics {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: 1;
	max-width: 540px;
}

.bap-metric-box {
	flex: 1;
}

.bap-metric-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	margin-block-end: 0.4rem;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bap-metric-label {
	color: var(--bap-text-muted);
	font-weight: 600;
}

.bap-metric-value {
	color: var(--bap-text);
	font-weight: 700;
	font-family: var(--bap-font-mono);
	font-size: 0.8125rem;
}

.bap-meter {
	background: var(--bap-surface-2);
	height: 8px;
	border-radius: var(--bap-radius-full);
	overflow: hidden;
	border: 1px solid var(--bap-border);
}

.bap-meter-fill {
	background: var(--bap-primary);
	height: 100%;
	border-radius: var(--bap-radius-full);
	transition: width 0.3s ease;
}

.bap-meter-fill.is-time {
	background: var(--bap-success);
}

.bap-renew-link {
	color: var(--bap-primary);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.75rem;
	transition: filter 0.15s;
}

.bap-renew-link:hover {
	filter: brightness(0.9);
}

.bap-limit-notice {
	color: var(--bap-warning);
	font-size: var(--bap-text-sm);
	margin-block-start: 0.75rem;
}

.bap-section-title {
	font-size: var(--bap-text-lg);
	font-weight: 700;
	margin-block-end: 0.25rem;
}

/* ========================================================
   NAVIGATION TABS (FLAT UNDERLINE STYLE)
   ======================================================== */
.bap-nav-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border-block-end: 2px solid var(--bap-border);
	border-radius: 0;
	padding: 0;
	margin-block-end: 1.75rem;
	overflow: visible;
}

.bap-tab-btn {
	background: transparent;
	border: none;
	border-block-end: 3px solid transparent;
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bap-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	border-radius: 0;
	white-space: nowrap;
	text-decoration: none;
	margin-block-end: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bap-tab-btn svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	opacity: 0.8;
}

.bap-tab-btn:hover {
	color: var(--bap-text);
	border-block-end-color: var(--bap-border-subtle);
	background: transparent;
}

.bap-tab-btn.is-active {
	background: transparent !important;
	color: var(--bap-primary) !important;
	border-block-end: 3px solid var(--bap-primary) !important;
	font-weight: 700;
	box-shadow: none !important;
}

.bap-tab-btn.is-active svg {
	opacity: 1;
	color: var(--bap-primary);
}

.bap-tab-btn-admin:hover {
	color: var(--bap-primary) !important;
	border-block-end-color: var(--bap-primary) !important;
}

/* TAB CONTENTS */
.bap-tab-content {
	display: none;
}

.bap-tab-content.is-active {
	display: block;
}

/* ========================================================
   DASHBOARD BENTO GRID & CARDS
   ======================================================== */
.bap-bento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

.bap-card-span-2 {
	grid-column: 1 / -1;
}

.bap-card, .bap-guide-card {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius);
	padding: 1.5rem;
	box-shadow: var(--bap-shadow);
	margin-block-end: 1.5rem;
}

.bap-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 1.25rem;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.bap-card-header h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.bap-card-desc {
	color: var(--bap-text-muted);
	font-size: 0.875rem;
	margin-block-start: -0.5rem;
	margin-block-end: 1.25rem;
	line-height: 1.6;
}

.bap-sub-count {
	font-family: var(--bap-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bap-text-muted);
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	padding: 2px 8px;
	border-radius: var(--bap-radius-full);
}

/* Checklist Card */
.bap-checklist-card {
	background: var(--bap-surface);
}

.bap-checklist-title-wrap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bap-card-badge-icon {
	font-size: 1.25rem;
}

.bap-checklist-steps, .bap-checklist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-block-start: 1rem;
}

.bap-step {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem;
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.bap-step.is-complete {
	border-color: #10B981;
	background: #ECFDF5;
}

[data-theme="dark"] .bap-step.is-complete {
	background: #1E293B;
	border-color: #10B981;
}

.bap-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	flex-shrink: 0;
	color: var(--bap-text);
}

.is-complete .bap-step-num {
	background: var(--bap-success);
	border-color: var(--bap-success);
	color: #FFFFFF;
}

.bap-step-content, .bap-checklist-item__body {
	flex-grow: 1;
	min-inline-size: 0;
}

.bap-step-content strong, .bap-checklist-item__title {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	margin-block-end: 0.35rem;
}

.bap-step-content p, .bap-checklist-item__desc {
	font-size: 0.75rem;
	color: var(--bap-text-muted);
	margin-block-end: 0.75rem;
	line-height: 1.5;
}

/* Blog List Rows */
.bap-blogs-list {
	margin-block-end: 1rem;
}

.bap-blog-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	margin-block-end: 0.75rem;
	background: var(--bap-surface);
	gap: 1rem;
	flex-wrap: wrap;
}

.bap-blog-row.is-selected {
	border-color: var(--bap-primary);
	background: var(--bap-primary-light);
}

[data-theme="dark"] .bap-blog-row.is-selected {
	background: #1E293B;
	border-color: var(--bap-primary);
}

.bap-blog-info {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-inline-size: 0;
	flex: 1 1 12rem;
}

.bap-blog-title {
	font-weight: 700;
	color: var(--bap-text);
	text-decoration: none;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.bap-blog-subline {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.35rem;
}

.bap-pill {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--bap-radius-full);
	letter-spacing: 0.03em;
}

.bap-pill.is-on {
	background: #ECFDF5;
	color: #10B981;
	border: 1px solid #10B981;
}

.bap-pill.is-off {
	background: var(--bap-surface-2);
	color: var(--bap-text-muted);
	border: 1px solid var(--bap-border);
}

.bap-queue-stats {
	font-family: var(--bap-font-mono);
	font-size: 0.75rem;
	color: var(--bap-text-dim);
}

.bap-blog-btns {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.bap-add-blog-box {
	display: flex;
	gap: 0.65rem;
	align-items: stretch;
	margin-block-start: 1.25rem;
}

.bap-add-blog-box .bap-input {
	height: 44px;
	flex-grow: 1;
}

.bap-add-blog-box .bap-btn {
	height: 44px;
	white-space: nowrap;
	flex-shrink: 0;
	padding-inline: 1.25rem;
}

/* Activity Log Viewer */
.bap-log-container {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem;
	max-height: 280px;
	overflow-y: auto;
	font-family: var(--bap-font-mono);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.bap-log-loading {
	color: var(--bap-text-dim);
	text-align: center;
	padding: 2rem 0;
}

.bap-log-entry {
	padding: 4px 0;
	border-block-end: 1px solid var(--bap-border-subtle);
	display: flex;
	gap: 0.75rem;
}

.bap-log-entry.level-warning { color: #F59E0B; }
.bap-log-entry.level-error { color: #EF4444; }
.bap-log-entry.level-success { color: #10B981; }

/* ========================================================
   NOTIFICATIONS PANEL & BROADCAST COMPONENT
   ======================================================== */
.bap-notification-item,
.bap-notif-item,
.bap-notif-card,
.bap-notif-row,
.bap-broadcast-preview {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-inline-start: 4px solid var(--bap-info);
	border-radius: var(--bap-radius);
	padding: 1rem 1.25rem;
	margin-block-end: 0.75rem;
	box-shadow: var(--bap-shadow);
}

/* 4px colored border + background tint based on type */
.bap-notif-info,
.bap-notif-type-info,
.severity-info,
[data-type="info"],
[data-severity="info"] {
	border-inline-start: 4px solid #3B82F6 !important;
	background-color: #EFF6FF !important;
}

.bap-notif-important,
.bap-notif-type-important,
[data-type="important"] {
	border-inline-start: 4px solid #4F46E5 !important;
	background-color: #EEF2FF !important;
}

.bap-notif-warning,
.bap-notif-type-warning,
.severity-warn,
[data-type="warning"],
[data-severity="warn"] {
	border-inline-start: 4px solid #F59E0B !important;
	background-color: #FFFBEB !important;
}

.bap-notif-critical,
.bap-notif-type-critical,
.bap-notif-error,
.severity-error,
[data-type="critical"],
[data-type="error"],
[data-severity="error"] {
	border-inline-start: 4px solid #EF4444 !important;
	background-color: #FEF2F2 !important;
}

.bap-notif-announcement,
.bap-notif-type-announcement,
[data-type="announcement"] {
	border-inline-start: 4px solid #8B5CF6 !important;
	background-color: #F5F3FF !important;
}

.bap-notif-success,
.bap-notif-type-success,
[data-type="success"] {
	border-inline-start: 4px solid #10B981 !important;
	background-color: #ECFDF5 !important;
}

/* Dark mode tints for notifications */
[data-theme="dark"] .bap-notif-info,
[data-theme="dark"] .bap-notif-type-info,
[data-theme="dark"] .severity-info,
[data-theme="dark"] [data-type="info"],
[data-theme="dark"] [data-severity="info"] {
	background-color: #1E293B !important;
}
[data-theme="dark"] .bap-notif-important,
[data-theme="dark"] .bap-notif-type-important,
[data-theme="dark"] [data-type="important"] {
	background-color: #1E293B !important;
}
[data-theme="dark"] .bap-notif-warning,
[data-theme="dark"] .bap-notif-type-warning,
[data-theme="dark"] .severity-warn,
[data-theme="dark"] [data-type="warning"],
[data-theme="dark"] [data-severity="warn"] {
	background-color: #1E293B !important;
}
[data-theme="dark"] .bap-notif-critical,
[data-theme="dark"] .bap-notif-type-critical,
[data-theme="dark"] .bap-notif-error,
[data-theme="dark"] .severity-error,
[data-theme="dark"] [data-type="critical"],
[data-theme="dark"] [data-type="error"],
[data-theme="dark"] [data-severity="error"] {
	background-color: #1E293B !important;
}
[data-theme="dark"] .bap-notif-announcement,
[data-theme="dark"] .bap-notif-type-announcement,
[data-theme="dark"] [data-type="announcement"] {
	background-color: #1E293B !important;
}
[data-theme="dark"] .bap-notif-success,
[data-theme="dark"] .bap-notif-type-success,
[data-theme="dark"] [data-type="success"] {
	background-color: #1E293B !important;
}

.bap-notif-title {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--bap-text);
	margin-block-end: 0.25rem;
}

.bap-notif-message {
	font-size: 0.875rem;
	color: var(--bap-text);
	line-height: 1.5;
	margin-block-end: 0.5rem;
}

.bap-notif-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--bap-text-muted);
}

/* Notification pill badges */
.bap-badge,
.bap-notif-badge,
#bapNotifBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: var(--bap-radius-full);
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--bap-primary);
	color: #FFFFFF;
	line-height: 1.2;
}

/* Broadcast Panel Styling */
.bap-broadcast-panel {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius);
	padding: 1.5rem;
	margin-block-end: 1.5rem;
	box-shadow: var(--bap-shadow);
}

.bap-broadcast-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.bap-broadcast-types,
.bap-type-selector-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0.5rem;
}

.bap-type-pill-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 6px 14px;
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-full);
	background: var(--bap-surface-2);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bap-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bap-type-pill-label:hover {
	border-color: var(--bap-primary);
}

.bap-type-pill-label input[type="radio"] {
	margin: 0;
	accent-color: var(--bap-primary);
}

.bap-type-pill-label:has(input:checked) {
	border-color: var(--bap-primary);
	background: var(--bap-primary-light);
	color: var(--bap-primary-dark);
}

.bap-color-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.bap-color-dot.dot-info, .dot-info { background: #3B82F6; }
.bap-color-dot.dot-important, .dot-important { background: #4F46E5; }
.bap-color-dot.dot-warning, .dot-warning { background: #F59E0B; }
.bap-color-dot.dot-critical, .dot-critical { background: #EF4444; }
.bap-color-dot.dot-announcement, .dot-announcement { background: #8B5CF6; }
.bap-color-dot.dot-success, .dot-success { background: #10B981; }

.bap-broadcast-target-toggle {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	margin-block: 0.5rem;
}

.bap-target-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.bap-users-select-list {
	max-height: 180px;
	overflow-y: auto;
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 0.75rem;
	background: var(--bap-surface-2);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.5rem;
}

.bap-user-select-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	cursor: pointer;
}

.bap-broadcast-preview-wrap {
	margin-block-start: 1rem;
}

.bap-broadcast-preview-wrap h4 {
	font-size: 0.875rem;
	font-weight: 700;
	margin-block-end: 0.5rem;
	color: var(--bap-text-muted);
}

.bap-char-counter {
	display: block;
	text-align: end;
	font-size: 0.75rem;
	color: var(--bap-text-muted);
	margin-block-start: 0.25rem;
}

/* ========================================================
   FORMS, INPUTS & BUTTONS
   ======================================================== */
.bap-form-group {
	margin-block-end: 1.25rem;
}

.bap-form-group label {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	margin-block-end: 0.45rem;
	color: var(--bap-text);
}

.bap-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
}

.bap-form-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bap-form-submit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-block-start: 0.5rem;
}

.bap-input, .bap-select, .bap-textarea {
	width: 100%;
	height: 44px;
	padding-inline: 0.875rem;
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	background: var(--bap-surface);
	color: var(--bap-text);
	font-family: inherit;
	font-size: 0.875rem;
	transition: border-color 0.15s ease;
}

.bap-textarea {
	height: auto;
	min-height: 100px;
	padding-block: 0.75rem;
}

.bap-input:focus, .bap-select:focus, .bap-textarea:focus {
	outline: 2px solid var(--bap-primary);
	outline-offset: 2px;
	border-color: var(--bap-primary);
	box-shadow: none;
}

.bap-input.code, .bap-textarea.code {
	font-family: var(--bap-font-mono);
	font-size: 0.8125rem;
}

.bap-field-hint {
	display: block;
	font-size: 0.75rem;
	color: var(--bap-text-muted);
	margin-block-start: 0.4rem;
}

.bap-key-row {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.bap-key-row .bap-input {
	flex-grow: 1;
}

/* Button Foundation - Flat 2D */
.bap-btn {
	height: 44px;
	padding-inline: 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--bap-radius-md);
	border: 1px solid var(--bap-border);
	background: var(--bap-surface-2);
	color: var(--bap-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.bap-btn:hover {
	filter: brightness(0.9);
}

.bap-btn-primary {
	background: var(--bap-primary);
	color: #FFFFFF;
	border-color: var(--bap-primary);
}

.bap-btn-primary:hover {
	filter: brightness(0.9);
}

.bap-btn-danger {
	background: var(--bap-danger);
	color: #FFFFFF;
	border-color: var(--bap-danger);
}

.bap-btn-danger:hover {
	filter: brightness(0.9);
}

.bap-btn-success {
	background: var(--bap-success);
	color: #FFFFFF;
	border-color: var(--bap-success);
}

.bap-btn-success:hover {
	filter: brightness(0.9);
}

.bap-btn-sm {
	height: 34px;
	padding-inline: 0.85rem;
	font-size: 0.75rem;
	border-radius: var(--bap-radius-sm);
}

.bap-btn-lg {
	height: 48px;
	padding-inline: 1.75rem;
	font-size: 1rem;
	border-radius: var(--bap-radius-md);
}

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

.bap-stepper-btn {
	min-block-size: var(--bap-touch-min, 44px);
	min-inline-size: var(--bap-touch-min, 44px);
	padding-inline: 0.9rem;
	border-radius: var(--bap-radius-md);
	cursor: pointer;
	background: var(--bap-surface-2);
	color: var(--bap-text);
	border: 1px solid var(--bap-border);
	font-weight: 700;
	transition: filter 0.15s ease;
}

.bap-stepper-btn:hover {
	filter: brightness(0.9);
}

.bap-stepper-btn.is-active {
	background: var(--bap-primary);
	color: #FFFFFF;
	border-color: var(--bap-primary);
}

/* OAuth Box */
.bap-oauth-box {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 1.5rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.bap-oauth-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.bap-help-trigger {
	flex-shrink: 0;
}

/* Badges & Alerts - Flat 2D */
.bap-badge-primary {
	background: var(--bap-primary-light);
	color: var(--bap-primary);
	border: 1px solid var(--bap-primary);
}

.bap-badge-success {
	background: #ECFDF5;
	color: #10B981;
	border: 1px solid #10B981;
}

.bap-badge-warning {
	background: #FFFBEB;
	color: #F59E0B;
	border: 1px solid #F59E0B;
}

.bap-badge-muted {
	background: var(--bap-surface-2);
	color: var(--bap-text-muted);
	border: 1px solid var(--bap-border);
}

.bap-alert {
	padding: 1rem 1.25rem;
	border-radius: var(--bap-radius-sm);
	margin-block-end: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border: 1px solid transparent;
}

.bap-alert-info {
	background: #EFF6FF;
	color: #3B82F6;
	border-color: #3B82F6;
}

.bap-alert-danger {
	background: #FEF2F2;
	color: #EF4444;
	border-color: #EF4444;
}

.bap-alert-warning {
	background: #FFFBEB;
	color: #F59E0B;
	border-color: #F59E0B;
}

.bap-alert-success {
	background: #ECFDF5;
	color: #10B981;
	border-color: #10B981;
}

[data-theme="dark"] .bap-alert-info { background: #1E293B; border-color: #3B82F6; color: #60A5FA; }
[data-theme="dark"] .bap-alert-danger { background: #1E293B; border-color: #EF4444; color: #F87171; }
[data-theme="dark"] .bap-alert-warning { background: #1E293B; border-color: #F59E0B; color: #FBBF24; }
[data-theme="dark"] .bap-alert-success { background: #1E293B; border-color: #10B981; color: #34D399; }

/* Tables - Flat 2D */
.bap-table-wrap {
	overflow-x: auto;
}

.bap-table {
	width: 100%;
	border-collapse: collapse;
	text-align: start;
	font-size: 0.875rem;
}

.bap-table th, .bap-table td {
	padding: 0.85rem 1rem;
	border-block-end: 1px solid var(--bap-border);
}

.bap-table th {
	background: var(--bap-surface-2);
	font-weight: 700;
	color: var(--bap-text-muted);
}

/* Payment Methods Grid */
.bap-payment-methods-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-block-start: 1rem;
}

.bap-d17-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	background: var(--bap-surface-2);
}

.bap-d17-card__row, .bap-d17-card__holder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.bap-d17-card__label {
	color: var(--bap-text-muted);
	font-size: var(--bap-text-sm);
}

.bap-d17-card__number {
	font-family: var(--bap-font-mono);
	font-size: var(--bap-text-lg);
	letter-spacing: 0.04em;
}

.bap-d17-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem;
}

/* ========================================================
   AUTH FORMS (APPLY & LOGIN) - FLAT 2D
   ======================================================== */
.bap-auth-container {
	position: relative;
	min-height: calc(100vh - 140px);
	min-height: calc(100dvh - 140px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.25rem;
	background: var(--bap-bg);
}

.bap-auth-ambient-glow {
	display: none !important;
}

.bap-auth-card {
	position: relative;
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius);
	padding: 2.5rem 2.25rem;
	max-width: 520px;
	width: 100%;
	box-shadow: var(--bap-shadow);
}

.bapp-auth-top-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 4px 12px;
	background: var(--bap-primary-light);
	border: 1px solid var(--bap-primary);
	border-radius: var(--bap-radius-full);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bap-primary);
	margin-block-end: 1.25rem;
}

.bap-auth-header {
	text-align: start;
	margin-block-end: 1.75rem;
}

.bap-auth-title {
	margin: 0 0 0.5rem;
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bap-auth-sub {
	margin: 0;
	color: var(--bap-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.bap-auth-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

.bapp-plan-selector-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
	margin-block-start: 0.45rem;
}

.bapp-plan-chip {
	background: var(--bap-surface);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-sm);
	padding: 0.75rem 0.5rem;
	text-align: center;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transition: border-color 0.15s ease;
}

.bapp-plan-chip:hover {
	border-color: var(--bap-primary);
}

.bapp-plan-chip.is-selected {
	border-color: var(--bap-primary);
	background: var(--bap-primary-light);
}

[data-theme="dark"] .bapp-plan-chip.is-selected {
	background: #1E293B;
	border-color: var(--bap-primary);
}

.bapp-plan-chip-name {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--bap-text);
}

.bapp-plan-chip-metric {
	font-size: 0.6875rem;
	color: var(--bap-text-muted);
}

.bapp-chip-badge {
	position: absolute;
	top: -9px;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: fit-content;
	background: var(--bap-primary);
	color: #FFFFFF;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 6px;
	border-radius: var(--bap-radius-full);
	white-space: nowrap;
}

.bapp-auth-trust-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--bap-border);
}

.bapp-auth-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bap-text-muted);
}

.bapp-auth-trust-pill svg {
	color: var(--bap-accent-emerald);
}

.bapp-remember-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bapp-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.bap-auth-footer {
	text-align: center;
	margin-block-start: 1.5rem;
	font-size: 0.875rem;
}

.bap-auth-footer a {
	color: var(--bap-primary);
	text-decoration: none;
	font-weight: 700;
}

.bap-auth-footer a:hover {
	text-decoration: underline;
}

/* ========================================================
   GUIDES & DASHBOARD ENHANCEMENTS - FLAT 2D
   ======================================================== */
.bap-guide-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-block: 1.5rem;
}

.bap-guides-stack, .bap-guide-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bap-guide-section__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
}

.bap-guide-section__title, .bap-guide-title {
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.bap-guide-title {
	font-size: 1.5rem;
}

.bap-guide-lead {
	color: var(--bap-text-muted);
	margin-block-end: 1rem;
}

.bap-guide-ordered-list {
	padding-inline-start: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bap-guide-progress-meta {
	display: flex;
	align-items: center;
}

.bap-guide-step-card__title-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-inline-size: 0;
}

.bap-guide-step-card__title {
	font-size: var(--bap-text-lg);
	margin: 0;
	font-weight: 700;
}

.bap-guide-step-card__action {
	margin-block: 0.5rem;
}

.bap-guide-step-card__visual, .bap-svg-frame {
	max-inline-size: 100%;
	overflow: hidden;
	border-radius: var(--bap-radius-md);
	border: 1px solid var(--bap-border);
}

.bap-guide-step-card__visual svg, .bap-svg-frame svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.bap-svg-topbar {
	fill: var(--bap-surface-2);
}

.bap-guide-feedback {
	margin-block-start: 0.75rem;
}

.bap-guide-feedback[hidden], [data-guide-step-feedback][hidden] {
	display: none;
}

.bap-copy-box__label {
	font-weight: 700;
	font-size: var(--bap-text-sm);
}

.bap-copy-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.bap-copy-box__code {
	overflow-wrap: anywhere;
}

.bap-provider-guide__title, .bap-step-guide-item__title {
	font-weight: 700;
}

.bap-provider-guide__action, .bap-step-guide-item__action {
	color: var(--bap-text-muted);
}

.bap-step-guide-item__visual {
	max-inline-size: 100%;
	overflow: hidden;
}

.bap-dtree-section, .bap-dtree-node {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bap-dtree-question {
	font-weight: 700;
}

.bap-dtree-resolution {
	color: var(--bap-text-muted);
}

.bap-redirect-uri-card {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem;
	margin-block-end: 1.5rem;
}

.bap-d17-featured-box {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem;
	margin-block: 1rem;
}

.bap-d17-step-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.bap-step-guide-item {
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	padding: 1.25rem;
	margin-block: 1rem;
}

.bap-ext-link {
	color: var(--bap-primary);
	text-decoration: none;
	font-weight: 600;
}

.bap-ext-link:hover {
	text-decoration: underline;
}

.bap-guide-plan-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.bap-calendar-strip {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-block: 0.5rem;
}

.bap-badge--status {
	white-space: nowrap;
}

/* ========================================================
   RESPONSIVE BREAKPOINTS (Mobile-First / Flat)
   ======================================================== */
@media (max-width: 1024px) {
	.bap-bento-grid {
		grid-template-columns: 1fr;
	}
	.bap-top-metrics {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.bap-top-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 1rem;
	}
	.bap-top-metrics {
		flex-direction: column;
		gap: 0.75rem;
	}
	.bap-checklist-steps, .bap-checklist-grid {
		grid-template-columns: 1fr;
	}
	.bapp-plan-selector-grid {
		grid-template-columns: 1fr;
	}
	.bap-auth-card {
		padding: 1.75rem 1.25rem;
	}
	.bap-nav-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.bap-nav-tabs .bap-tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.bap-form-row {
		grid-template-columns: 1fr;
	}
	.bap-form-submit {
		justify-content: stretch;
	}
	.bap-form-submit .bap-btn {
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {
	.bap-dashboard-wrap {
		padding-inline: 0.75rem;
	}
	.bap-flex-row {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}