/* Frippe Custom Styles */
/* Copyright (c) 2026, Frippe */
/* SPDX-License-Identifier: MIT */
/*
 * Frappe v16 Espresso Compatibility:
 * - Uses namespaced CSS variables (--gp-*) to avoid conflicts
 * - Extends Frappe's theming via data-theme attributes
 * - Custom classes (.gp-*, .frippe-*) don't override core components
 * - Verified compatible with Espresso design system (V16-005)
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:wght@600;700&display=swap");

/* =============================================================================
   CSS Variables (Custom Properties)
   Extends Frappe's default theme variables
   ============================================================================= */

:root {
	/* Brand colors */
	--gp-primary: #2563eb;
	--gp-primary-light: #3b82f6;
	--gp-primary-dark: #1d4ed8;
	--gp-accent: #0891b2;

	/* Status colors */
	--gp-success: #059669;
	--gp-success-light: #d1fae5;
	--gp-warning: #d97706;
	--gp-warning-light: #fef3c7;
	--gp-danger: #dc2626;
	--gp-danger-light: #fee2e2;
	--gp-info: #0284c7;
	--gp-info-light: #e0f2fe;

	/* Guardianship-specific colors */
	--gp-guardianship: #7c3aed;
	--gp-guardianship-light: #ede9fe;
	--gp-legal: #0d9488;
	--gp-legal-light: #ccfbf1;
	--gp-finance: #059669;
	--gp-finance-light: #d1fae5;
	--gp-deadline: #dc2626;
	--gp-deadline-light: #fee2e2;

	/* Source badge colors (BEAD-UI-001) */
	--gp-source-bea: #0d9488;
	--gp-source-bea-light: #ccfbf1;
	--gp-source-email: #0284c7;
	--gp-source-email-light: #e0f2fe;
	--gp-source-dropscan: #059669;
	--gp-source-dropscan-light: #d1fae5;
	--gp-source-manual: #d97706;
	--gp-source-manual-light: #fef3c7;

	/* Spacing */
	--gp-spacing-xs: 0.25rem;
	--gp-spacing-sm: 0.5rem;
	--gp-spacing-md: 1rem;
	--gp-spacing-lg: 1.5rem;
	--gp-spacing-xl: 2rem;

	/* Border radius */
	--gp-radius-sm: 4px;
	--gp-radius-md: 6px;
	--gp-radius-lg: 8px;
	--gp-radius-xl: 12px;

	/* Shadows (BEAD-UI-002: Elevation system) */
	--gp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--gp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--gp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--gp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	--gp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
	--gp-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
	--gp-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);

	/* Transitions */
	--gp-transition-fast: 0.15s ease;
	--gp-transition-normal: 0.25s ease;
	--gp-transition-slow: 0.35s ease;
}

/* Dark mode overrides */
[data-theme="dark"] {
	--gp-success-light: #064e3b;
	--gp-warning-light: #78350f;
	--gp-danger-light: #7f1d1d;
	--gp-info-light: #0c4a6e;
	--gp-guardianship-light: #4c1d95;
	--gp-legal-light: #134e4a;
	--gp-finance-light: #064e3b;
	--gp-deadline-light: #7f1d1d;
	/* Source badge colors (BEAD-UI-001) */
	--gp-source-bea-light: #134e4a;
	--gp-source-email-light: #0c4a6e;
	--gp-source-dropscan-light: #064e3b;
	--gp-source-manual-light: #78350f;
}

/* Frippe Kanzlei (Kasimir) theme */
[data-theme="frippe-kasimir"] {
	--gp-primary: #2f80ed;
	--gp-primary-light: #2d9cdb;
	--gp-primary-dark: #1f66c5;
	--gp-accent: #c9895a;
	--gp-success: #1f9d6a;
	--gp-success-light: #d9f2e7;
	--gp-warning: #c9895a;
	--gp-warning-light: #f3e2d1;
	--gp-danger: #c94b3a;
	--gp-danger-light: #f5d6d2;
	--gp-info: #2f80ed;
	--gp-info-light: #d7ebfb;
	--gp-guardianship: #5b2c22;
	--gp-guardianship-light: #f0e2d7;
	--gp-legal: #2f80ed;
	--gp-legal-light: #e2f0fb;
	--gp-finance: #c9895a;
	--gp-finance-light: #f3e2d1;
	--gp-deadline: #c94b3a;
	--gp-deadline-light: #f5d6d2;

	--primary: #2f80ed;
	--primary-hover: #2d9cdb;
	--secondary: #c9895a;
	--bg-color: #f6f1e8;
	--card-bg: #fdf9f3;
	--text-color: #1f2937;
	--text-muted: #6b7280;
	--heading-color: #1f2937;
	--border-color: #e6ded2;
	--navbar-bg: #1f2937;
	--navbar-text-color: #f6f1e8;
	--link-color: #2f80ed;
	--control-bg: #fdf9f3;
	--control-border: #e6ded2;
	--font-stack: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	--font-stack-headings: "Source Serif 4", Georgia, serif;
}

[data-theme="frippe-kasimir"] body {
	font-family: var(--font-stack);
}

[data-theme="frippe-kasimir"] h1,
[data-theme="frippe-kasimir"] h2,
[data-theme="frippe-kasimir"] h3,
[data-theme="frippe-kasimir"] .page-title,
[data-theme="frippe-kasimir"] .widget-title {
	font-family: var(--font-stack-headings);
}

/* Frippe brand mark */
.frippe-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.frippe-brand-logo {
	height: 36px;
	width: 36px;
	object-fit: contain;
}

/* Larger logo for login page */
.login-content .frippe-brand-logo,
.page-container .frippe-brand-logo {
	height: 64px;
	width: 64px;
}

/* Hide text if present (legacy) */
.frippe-brand-text {
	display: none;
}

/* =============================================================================
   Timeline Widgets
   Unified event timeline for client activity
   ============================================================================= */

.gp-timeline {
	position: relative;
	padding-left: var(--gp-spacing-xl);
}

.gp-timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--border-color, #e5e5e5);
}

.gp-timeline-item {
	position: relative;
	padding-bottom: var(--gp-spacing-lg);
}

.gp-timeline-item:last-child {
	padding-bottom: 0;
}

.gp-timeline-marker {
	position: absolute;
	left: calc(-1 * var(--gp-spacing-xl) + 4px);
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gp-primary);
	border: 2px solid var(--card-bg, #fff);
	box-shadow: var(--gp-shadow-sm);
}

.gp-timeline-marker.task {
	background: var(--gp-info);
}

.gp-timeline-marker.deadline {
	background: var(--gp-deadline);
}

.gp-timeline-marker.document {
	background: var(--gp-guardianship);
}

.gp-timeline-marker.communication {
	background: var(--gp-legal);
}

.gp-timeline-marker.finance {
	background: var(--gp-finance);
}

.gp-timeline-content {
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e5e5e5);
	border-radius: var(--gp-radius-md);
	padding: var(--gp-spacing-md);
	transition: box-shadow var(--gp-transition-fast);
}

.gp-timeline-content:hover {
	box-shadow: var(--gp-shadow-md);
}

.gp-timeline-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--gp-spacing-sm);
}

.gp-timeline-title {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--heading-color, #1f2937);
	margin: 0;
}

.gp-timeline-title a {
	color: inherit;
	text-decoration: none;
}

.gp-timeline-title a:hover {
	color: var(--gp-primary);
}

.gp-timeline-meta {
	font-size: 0.75rem;
	color: var(--text-muted, #6b7280);
}

.gp-timeline-body {
	font-size: 0.875rem;
	color: var(--text-color, #374151);
	line-height: 1.5;
}

.gp-timeline-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gp-spacing-xs);
	margin-top: var(--gp-spacing-sm);
}

.gp-timeline-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--gp-spacing-xs);
	padding: 2px 8px;
	font-size: 0.6875rem;
	font-weight: 500;
	border-radius: 9999px;
	background: var(--gray-100, #f3f4f6);
	color: var(--gray-700, #374151);
}

/* =============================================================================
   Status Cards
   Compact status indicators for dashboards
   ============================================================================= */

.gp-status-card {
	display: flex;
	align-items: center;
	gap: var(--gp-spacing-md);
	padding: var(--gp-spacing-md);
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e5e5e5);
	border-radius: var(--gp-radius-lg);
	transition: all var(--gp-transition-fast);
}

.gp-status-card:hover {
	box-shadow: var(--gp-shadow-md);
	transform: translateY(-1px);
}

.gp-status-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--gp-radius-md);
	background: var(--gp-primary-light);
	color: var(--gp-primary);
}

.gp-status-card-icon svg {
	width: 24px;
	height: 24px;
}

.gp-status-card.success .gp-status-card-icon {
	background: var(--gp-success-light);
	color: var(--gp-success);
}

.gp-status-card.warning .gp-status-card-icon {
	background: var(--gp-warning-light);
	color: var(--gp-warning);
}

.gp-status-card.danger .gp-status-card-icon {
	background: var(--gp-danger-light);
	color: var(--gp-danger);
}

.gp-status-card.info .gp-status-card-icon {
	background: var(--gp-info-light);
	color: var(--gp-info);
}

.gp-status-card-content {
	flex: 1;
	min-width: 0;
}

.gp-status-card-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin-bottom: 2px;
}

.gp-status-card-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--heading-color, #1f2937);
	line-height: 1.2;
}

.gp-status-card-trend {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0.75rem;
	font-weight: 500;
	margin-left: var(--gp-spacing-sm);
}

.gp-status-card-trend.up {
	color: var(--gp-success);
}

.gp-status-card-trend.down {
	color: var(--gp-danger);
}

/* =============================================================================
   Dashboard Widgets
   Reusable components for dashboard pages
   ============================================================================= */

.gp-widget {
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e5e5e5);
	border-radius: var(--gp-radius-lg);
	overflow: hidden;
}

.gp-widget-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--gp-spacing-md);
	border-bottom: 1px solid var(--border-color, #e5e5e5);
	background: var(--gray-50, #f9fafb);
}

.gp-widget-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--heading-color, #1f2937);
	margin: 0;
}

.gp-widget-actions {
	display: flex;
	gap: var(--gp-spacing-sm);
}

.gp-widget-body {
	padding: var(--gp-spacing-md);
}

.gp-widget-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--gp-spacing-sm) var(--gp-spacing-md);
	border-top: 1px solid var(--border-color, #e5e5e5);
	background: var(--gray-50, #f9fafb);
	font-size: 0.75rem;
	color: var(--text-muted, #6b7280);
}

/* Widget list items */
.gp-widget-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gp-widget-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gp-spacing-sm) 0;
	border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.gp-widget-list-item:last-child {
	border-bottom: none;
}

.gp-widget-list-item-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-color, #374151);
}

.gp-widget-list-item-title a {
	color: inherit;
	text-decoration: none;
}

.gp-widget-list-item-title a:hover {
	color: var(--gp-primary);
}

.gp-widget-list-item-meta {
	font-size: 0.75rem;
	color: var(--text-muted, #6b7280);
}

/* Progress widget */
.gp-progress-widget {
	margin-bottom: var(--gp-spacing-md);
}

.gp-progress-widget:last-child {
	margin-bottom: 0;
}

.gp-progress-widget-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--gp-spacing-xs);
}

.gp-progress-widget-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-color, #374151);
}

.gp-progress-widget-value {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--heading-color, #1f2937);
}

.gp-progress-widget-bar {
	height: 8px;
	background: var(--gray-200, #e5e7eb);
	border-radius: 9999px;
	overflow: hidden;
}

.gp-progress-widget-fill {
	height: 100%;
	background: var(--gp-primary);
	border-radius: 9999px;
	transition: width var(--gp-transition-normal);
}

.gp-progress-widget-fill.success {
	background: var(--gp-success);
}

.gp-progress-widget-fill.warning {
	background: var(--gp-warning);
}

.gp-progress-widget-fill.danger {
	background: var(--gp-danger);
}

/* =============================================================================
   Deadline & Task Indicators
   Visual indicators for urgency and status
   ============================================================================= */

.gp-deadline-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--gp-spacing-xs);
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px;
}

.gp-deadline-indicator.overdue {
	background: var(--gp-deadline-light);
	color: var(--gp-deadline);
}

.gp-deadline-indicator.due-today {
	background: var(--gp-warning-light);
	color: var(--gp-warning);
}

.gp-deadline-indicator.due-soon {
	background: var(--gp-info-light);
	color: var(--gp-info);
}

.gp-deadline-indicator.on-track {
	background: var(--gp-success-light);
	color: var(--gp-success);
}

/* Task priority indicators */
.gp-priority-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.gp-priority-indicator.high {
	background: var(--gp-danger);
}

.gp-priority-indicator.medium {
	background: var(--gp-warning);
}

.gp-priority-indicator.low {
	background: var(--gp-success);
}

/* =============================================================================
   Client & Case Type Badges
   Distinctive badges for guardianship vs. legal matters
   ============================================================================= */

.gp-case-type-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gp-spacing-xs);
	padding: 4px 10px;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	border-radius: var(--gp-radius-sm);
}

.gp-case-type-badge.guardianship {
	background: var(--gp-guardianship-light);
	color: var(--gp-guardianship);
}

.gp-case-type-badge.legal {
	background: var(--gp-legal-light);
	color: var(--gp-legal);
}

/* =============================================================================
   Inbox Triage Enhancements
   Styles for inbox triage split view
   ============================================================================= */

.gp-inbox-list {
	border-right: 1px solid var(--border-color, #e5e5e5);
}

.gp-inbox-item {
	display: flex;
	gap: var(--gp-spacing-md);
	padding: var(--gp-spacing-md);
	border-bottom: 1px solid var(--border-color, #e5e5e5);
	cursor: pointer;
	transition: background var(--gp-transition-fast);
}

.gp-inbox-item:hover {
	background: var(--gray-50, #f9fafb);
}

.gp-inbox-item.selected {
	background: var(--gp-primary-light);
	background: rgba(37, 99, 235, 0.05);
	border-left: 3px solid var(--gp-primary);
}

.gp-inbox-item.unread {
	background: var(--gp-info-light);
	background: rgba(2, 132, 199, 0.03);
}

.gp-inbox-item-indicator {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--gp-primary);
}

.gp-inbox-item-indicator.email {
	background: var(--gp-info);
}

.gp-inbox-item-indicator.bea {
	background: var(--gp-guardianship);
}

.gp-inbox-item-content {
	flex: 1;
	min-width: 0;
}

.gp-inbox-item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 4px;
}

.gp-inbox-item-subject {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--heading-color, #1f2937);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp-inbox-item.unread .gp-inbox-item-subject {
	font-weight: 700;
}

.gp-inbox-item-date {
	flex-shrink: 0;
	font-size: 0.6875rem;
	color: var(--text-muted, #6b7280);
}

.gp-inbox-item-preview {
	font-size: 0.8125rem;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp-inbox-item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

/* =============================================================================
   Empty States
   Consistent empty state styling
   ============================================================================= */

.gp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--gp-spacing-xl);
	text-align: center;
	color: var(--text-muted, #6b7280);
}

.gp-empty-state-icon {
	margin-bottom: var(--gp-spacing-md);
	opacity: 0.5;
}

.gp-empty-state-icon svg {
	width: 64px;
	height: 64px;
}

.gp-empty-state-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--heading-color, #1f2937);
	margin-bottom: var(--gp-spacing-xs);
}

.gp-empty-state-description {
	font-size: 0.875rem;
	max-width: 300px;
	margin-bottom: var(--gp-spacing-md);
}

/* =============================================================================
   Loading States (BEAD-UI-007)
   Skeleton loading and spinners - Standardized patterns
   ============================================================================= */

/* Base skeleton class with shimmer animation */
.gp-skeleton {
	background: linear-gradient(90deg, var(--gray-200, #e5e7eb) 25%, var(--gray-100, #f3f4f6) 50%, var(--gray-200, #e5e7eb) 75%);
	background-size: 200% 100%;
	animation: gp-skeleton-pulse 1.5s infinite;
	border-radius: var(--gp-radius-sm);
}

@keyframes gp-skeleton-pulse {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Text skeleton - for paragraphs and labels */
.gp-skeleton-text {
	height: 1em;
	margin-bottom: var(--gp-spacing-xs);
}

.gp-skeleton-text:last-child {
	width: 75%;
}

.gp-skeleton-text-short {
	width: 40%;
}

.gp-skeleton-text-medium {
	width: 60%;
}

/* Heading skeleton */
.gp-skeleton-heading {
	height: 1.5em;
	width: 50%;
	margin-bottom: var(--gp-spacing-sm);
}

.gp-skeleton-heading-sm {
	height: 1.25em;
	width: 40%;
}

/* Avatar skeleton - for profile pictures */
.gp-skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.gp-skeleton-avatar-sm {
	width: 32px;
	height: 32px;
}

.gp-skeleton-avatar-lg {
	width: 56px;
	height: 56px;
}

/* Card skeleton - for dashboard widgets */
.gp-skeleton-card {
	height: 120px;
}

.gp-skeleton-card-sm {
	height: 80px;
}

.gp-skeleton-card-lg {
	height: 200px;
}

/* Button skeleton */
.gp-skeleton-button {
	height: 36px;
	width: 100px;
	border-radius: var(--gp-radius-sm);
}

.gp-skeleton-button-sm {
	height: 28px;
	width: 80px;
}

/* Input/form field skeleton */
.gp-skeleton-input {
	height: 36px;
	width: 100%;
	border-radius: var(--gp-radius-sm);
}

/* Badge/tag skeleton */
.gp-skeleton-badge {
	height: 20px;
	width: 60px;
	border-radius: 10px;
	display: inline-block;
}

/* Table row skeleton */
.gp-skeleton-row {
	display: flex;
	align-items: center;
	gap: var(--gp-spacing-md);
	padding: var(--gp-spacing-sm) 0;
	border-bottom: 1px solid var(--border-color);
}

.gp-skeleton-row:last-child {
	border-bottom: none;
}

/* List item skeleton */
.gp-skeleton-list-item {
	display: flex;
	align-items: flex-start;
	gap: var(--gp-spacing-md);
	padding: var(--gp-spacing-md);
	border-bottom: 1px solid var(--border-color);
}

.gp-skeleton-list-item:last-child {
	border-bottom: none;
}

.gp-skeleton-list-item .gp-skeleton-content {
	flex: 1;
}

/* Image/thumbnail skeleton */
.gp-skeleton-image {
	aspect-ratio: 16/9;
	width: 100%;
	border-radius: var(--gp-radius-md);
}

.gp-skeleton-thumbnail {
	width: 60px;
	height: 60px;
	border-radius: var(--gp-radius-sm);
	flex-shrink: 0;
}

/* Stat card skeleton */
.gp-skeleton-stat {
	padding: var(--gp-spacing-md);
}

.gp-skeleton-stat-value {
	height: 2em;
	width: 50%;
	margin-bottom: var(--gp-spacing-xs);
}

.gp-skeleton-stat-label {
	height: 0.875em;
	width: 70%;
}

/* Chart/graph skeleton */
.gp-skeleton-chart {
	height: 200px;
	border-radius: var(--gp-radius-md);
	position: relative;
	overflow: hidden;
}

.gp-skeleton-chart::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(0deg, var(--gray-300, #d1d5db) 0%, transparent 100%);
	opacity: 0.3;
}

/* Loading spinner utility */
.gp-loading-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--border-color);
	border-top-color: var(--gp-primary);
	border-radius: 50%;
	animation: gp-spin 0.8s linear infinite;
}

.gp-loading-spinner-sm {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.gp-loading-spinner-lg {
	width: 32px;
	height: 32px;
	border-width: 3px;
}

@keyframes gp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Loading overlay */
.gp-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* Skeleton container utilities */
.gp-skeleton-container {
	display: flex;
	flex-direction: column;
	gap: var(--gp-spacing-sm);
}

.gp-skeleton-row-container {
	display: flex;
	gap: var(--gp-spacing-md);
}

/* Dark mode skeleton adjustments */
[data-theme="dark"] .gp-skeleton {
	background: linear-gradient(90deg, var(--gray-700, #374151) 25%, var(--gray-600, #4b5563) 50%, var(--gray-700, #374151) 75%);
	background-size: 200% 100%;
}

[data-theme="dark"] .gp-loading-overlay {
	background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .gp-loading-spinner {
	border-color: var(--dark-border-color);
	border-top-color: var(--gp-primary-light);
}

/* =============================================================================
   Utility Classes
   Helper classes for common patterns
   ============================================================================= */

/* Text truncation */
.gp-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp-line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gp-line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Focus ring for keyboard navigation */
.gp-focus-ring:focus {
	outline: none;
	box-shadow: var(--gp-shadow-focus);
}

/* Shadow utility classes (BEAD-UI-002) */
.gp-shadow-none { box-shadow: none; }
.gp-shadow-sm { box-shadow: var(--gp-shadow-sm); }
.gp-shadow-md { box-shadow: var(--gp-shadow-md); }
.gp-shadow-lg { box-shadow: var(--gp-shadow-lg); }
.gp-shadow-xl { box-shadow: var(--gp-shadow-xl); }
.gp-shadow-card { box-shadow: var(--gp-shadow-card); }

/* Card with hover elevation */
.gp-card-hover {
	box-shadow: var(--gp-shadow-card);
	transition: box-shadow var(--gp-transition-fast);
}

.gp-card-hover:hover {
	box-shadow: var(--gp-shadow-card-hover);
}

/* Clickable cards */
.gp-clickable {
	cursor: pointer;
	user-select: none;
}

/* Scrollbar styling */
.gp-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: var(--gray-300, #d1d5db) transparent;
}

.gp-scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.gp-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.gp-scrollbar::-webkit-scrollbar-thumb {
	background: var(--gray-300, #d1d5db);
	border-radius: 3px;
}

.gp-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400, #9ca3af);
}

/* =============================================================================
   Responsive Breakpoints
   Mobile-first responsive adjustments
   ============================================================================= */

@media (max-width: 768px) {
	/* Timeline mobile adjustments */
	.gp-timeline {
		padding-left: var(--gp-spacing-lg);
	}

	.gp-timeline::before {
		left: 4px;
	}

	.gp-timeline-marker {
		left: calc(-1 * var(--gp-spacing-lg));
		width: 10px;
		height: 10px;
	}

	/* Status cards stack vertically on mobile */
	.gp-status-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.gp-status-card-icon {
		width: 40px;
		height: 40px;
	}

	.gp-status-card-icon svg {
		width: 20px;
		height: 20px;
	}

	.gp-status-card-value {
		font-size: 1.25rem;
	}

	/* Inbox list mobile layout */
	.gp-inbox-list {
		border-right: none;
		border-bottom: 1px solid var(--border-color, #e5e5e5);
	}

	/* Touch target minimum size (44x44px) for interactive elements */
	.btn,
	.btn-xs,
	.btn-sm,
	button,
	.approval-item .btn-group .btn {
		min-height: 44px;
		min-width: 44px;
		padding: 0.625rem 1rem;
	}

	/* Small buttons in groups maintain minimum touch target */
	.btn-group .btn-xs {
		min-height: 44px;
		min-width: 44px;
		padding: 0.5rem;
	}

	/* Form controls touch-friendly */
	.form-control,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	select,
	textarea {
		min-height: 44px;
		font-size: 16px; /* Prevent iOS zoom on focus */
		padding: 0.5rem 0.75rem;
	}

	/* Checkbox and radio touch targets */
	input[type="checkbox"],
	input[type="radio"] {
		min-width: 22px;
		min-height: 22px;
	}

	/* Clickable checkbox/radio labels with touch-friendly padding */
	.checkbox label,
	.radio label,
	.form-check-label {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 0.5rem 0;
	}

	/* Links touch-friendly */
	a:not(.btn) {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}

	/* Exception: inline links in paragraphs */
	p a,
	li a,
	td a {
		display: inline;
		min-height: auto;
		line-height: inherit;
	}

	/* Widget cards stack on mobile */
	.gp-widget {
		margin-bottom: var(--gp-spacing-md);
	}

	.gp-widget-row {
		flex-direction: column;
	}

	.gp-widget-header {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	/* Dashboard cards full width on mobile */
	.row > [class*="col-"] {
		margin-bottom: var(--gp-spacing-md);
	}

	/* Form sections stack vertically */
	.form-group {
		margin-bottom: var(--gp-spacing-md);
	}

	/* Quick entry widget mobile layout */
	.gp-quick-entry .form-row {
		flex-direction: column;
	}

	.gp-quick-entry .form-row > * {
		width: 100%;
		margin-bottom: var(--gp-spacing-sm);
	}

	/* Approval panel mobile layout */
	.inline-approval-panel .card-header > div {
		flex-direction: column;
		gap: 0.5rem;
	}

	.approval-item > div:first-child {
		flex-direction: column;
	}

	.approval-item .btn-group {
		margin-top: var(--gp-spacing-sm);
	}

	/* Tab navigation scrollable on mobile */
	.wizard-steps-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		padding-bottom: var(--gp-spacing-sm);
	}

	.wizard-step-nav {
		display: inline-flex;
		min-width: 44px;
	}

	/* Search results touch-friendly */
	.search-result-item {
		min-height: 54px;
		padding: 0.75rem 1rem;
	}

	/* Table horizontal scroll */
	.frappe-list,
	.datatable {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Dialog fullscreen on mobile */
	.modal-dialog {
		margin: 0;
		max-width: 100%;
		height: 100%;
	}

	.modal-content {
		border-radius: 0;
		height: 100%;
	}

	/* Footer buttons stack on mobile */
	.wizard-footer {
		flex-direction: column;
		gap: var(--gp-spacing-sm);
	}

	.wizard-footer-left,
	.wizard-footer-right {
		width: 100%;
		justify-content: center;
	}

	.wizard-footer-right {
		flex-wrap: wrap;
		gap: var(--gp-spacing-sm);
	}
}

/* Smaller mobile devices (phones) */
@media (max-width: 480px) {
	/* Even more compact layout */
	.gp-status-card {
		padding: var(--gp-spacing-sm);
	}

	.gp-widget {
		padding: var(--gp-spacing-sm);
	}

	/* Stack form buttons */
	.form-group .btn-group,
	.form-actions {
		flex-direction: column;
		width: 100%;
	}

	.form-group .btn-group .btn,
	.form-actions .btn {
		width: 100%;
		margin-bottom: var(--gp-spacing-xs);
	}

	/* Compact badges */
	.badge {
		font-size: 0.75rem;
		padding: 0.25rem 0.5rem;
	}

	/* Compact approval item */
	.approval-item {
		padding: var(--gp-spacing-sm);
	}

	/* Hide secondary info on very small screens */
	.approval-item .proposed-changes {
		display: none;
	}
}

/* =============================================================================
   Login Page Branding
   Custom branding for Frippe login page
   ============================================================================= */

/* Login page - show Frippe logo prominently */
.for-login .page-card .page-card-head,
.login-content .page-card-head {
	text-align: center;
	padding: var(--gp-spacing-xl) var(--gp-spacing-lg) var(--gp-spacing-lg);
}

/* Frippe brand container on login page */
.for-login .frippe-brand,
.login-content .frippe-brand,
.page-container .frippe-brand {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

/* Login page logo - centered and visible */
.for-login .frippe-brand-logo,
.login-content .frippe-brand-logo,
.page-container .frippe-brand-logo {
	display: block !important;
	height: 80px !important;
	width: 80px !important;
	object-fit: contain;
}

/* Login page brand image fallback */
.page-container .brand-container img.brand-logo,
.page-container .for-login img.app-logo,
.login-content img.brand-logo,
.for-login img[alt="Frippe"] {
	display: inline-block !important;
	height: 80px !important;
	width: auto;
	max-width: 100px;
}

/* Hide the brand text when logo is shown */
.page-container .brand-container .brand-name:not(:empty),
.page-container .for-login .brand-name:not(:empty),
.frippe-brand-text {
	display: none !important;
}

/* =============================================================================
   Navbar Logo (Top Left Corner)
   ============================================================================= */

/* Navbar brand logo styling - ensure visibility */
.navbar .navbar-brand,
.navbar-home {
	display: flex !important;
	align-items: center;
}

.navbar .navbar-brand img,
.navbar-brand .app-logo,
.navbar-home .app-logo,
.desk-sidebar .sidebar-brand img,
#navbar-breadcrumbs .navbar-brand img {
	display: block !important;
	height: 32px !important;
	width: 32px !important;
	object-fit: contain;
	max-width: none;
}

/* Frappe v16 Desk header logo */
.layout-main .layout-side-section .sidebar-brand img,
.layout-main-section-wrapper .navbar-brand img,
.standard-sidebar .sidebar-brand img,
header.navbar img.app-logo {
	display: block !important;
	height: 32px !important;
	width: 32px !important;
	object-fit: contain;
}

/* Login form styling */
.login-content .page-card {
	border-radius: var(--gp-radius-xl);
	border: 1px solid var(--border-color);
	box-shadow: var(--gp-shadow-lg);
}

.login-content .page-card-head {
	background: linear-gradient(135deg, var(--gp-primary) 0%, var(--gp-primary-dark) 100%);
	color: white;
	border-radius: var(--gp-radius-xl) var(--gp-radius-xl) 0 0;
	padding: var(--gp-spacing-lg);
}

.login-content .page-card-head .indicator-pill {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

/* Login button styling */
.btn-login,
.btn-primary-dark {
	background: var(--gp-primary);
	border-color: var(--gp-primary);
	transition: all var(--gp-transition-fast);
}

.btn-login:hover,
.btn-primary-dark:hover {
	background: var(--gp-primary-dark);
	border-color: var(--gp-primary-dark);
}

/* Footer branding */
.for-login .powered-by-frappe,
.page-container .powered-by-frappe {
	opacity: 0.5;
}

/* =============================================================================
   Mobile Touch Target Improvements
   Ensures 44px minimum touch targets per WCAG/Apple HIG guidelines
   ============================================================================= */

@media (max-width: 768px) {
	/* Increase input field touch targets for mobile */
	.login-content .page-card input[type="text"],
	.login-content .page-card input[type="email"],
	.login-content .page-card input[type="password"],
	.login-content .page-card .form-control {
		min-height: 44px;
		padding: 10px 14px;
		font-size: 16px; /* Prevents iOS zoom on focus */
	}

	/* Increase login button touch target */
	.login-content .btn-login,
	.login-content .btn-primary,
	.login-content .btn-primary-dark {
		min-height: 44px;
		padding: 12px 20px;
	}

	/* Show password toggle - ensure tappable */
	.login-content .password-toggle,
	.login-content .show-password {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Links should have adequate touch targets */
	.login-content .page-card a,
	.login-content .forgot-password-link {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
		padding: 0 8px;
	}

	/* Social login buttons */
	.login-content .btn-social,
	.login-content .social-logins .btn {
		min-height: 44px;
	}

	/* Hamburger menu button */
	.navbar-toggler,
	.menu-btn {
		min-width: 44px;
		min-height: 44px;
	}
}

/* =============================================================================
   Print Styles
   Optimized styles for printing
   ============================================================================= */

@media print {
	.gp-widget,
	.gp-status-card,
	.gp-timeline-content {
		border: 1px solid #ccc;
		box-shadow: none;
	}

	.gp-skeleton {
		background: #e5e5e5;
		animation: none;
	}
}

/* =============================================================================
   Accessibility Utilities
   Screen reader support and focus management
   ============================================================================= */

/* Screen reader only content - visually hidden but accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Show on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* Enhanced focus visibility for keyboard navigation */
:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 2px;
	box-shadow: var(--gp-shadow-focus);
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* Ensure buttons and interactive elements have visible focus */
.btn:focus-visible,
.form-control:focus-visible,
.wizard-step-nav:focus-visible,
.search-result-item:focus-visible,
.approval-item .btn:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 2px;
	box-shadow: var(--gp-shadow-focus);
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--gp-primary);
	color: white;
	padding: 0.75rem 1.5rem;
	z-index: 10000;
	text-decoration: none;
	font-weight: 600;
	transition: top var(--gp-transition-fast);
}

.skip-to-content:focus {
	top: 0;
	outline: 2px solid white;
	outline-offset: 2px;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
	:focus-visible {
		outline-width: 3px;
		outline-style: solid;
	}

	.btn,
	.form-control,
	.badge {
		border: 2px solid currentColor;
	}
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.gp-skeleton {
		animation: none;
		background: #e5e5e5;
	}
}

/* =============================================================================
   Sidebar Layout Fix (SIDEBAR-OPT-001)
   Fixes gap between sidebar and workspace content
   ============================================================================= */

/*
 * P0 FIX: The Frippe sidebar is fixed-position at left:0 with width 240px.
 * Content needs padding-left to avoid overlapping with the sidebar.
 * This replaces any native Frappe sidebar spacing with our fixed values.
 *
 * Sidebar expanded = 240px, collapsed = 60px
 */

/* Content offset when sidebar is expanded (default) - on page-container */
html body.frippe-sidebar-mounted:not(.frippe-sidebar-collapsed) #page-container,
html body.frippe-sidebar-mounted:not(.frippe-sidebar-collapsed) .page-container {
	padding-left: 240px !important;
	margin-left: 0 !important;
}

/* layout-main should NOT have padding - it's nested inside page-container */
html body.frippe-sidebar-mounted .layout-main {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Content offset when sidebar is collapsed - on page-container */
html body.frippe-sidebar-mounted.frippe-sidebar-collapsed #page-container,
html body.frippe-sidebar-mounted.frippe-sidebar-collapsed .page-container {
	padding-left: 60px !important;
	margin-left: 0 !important;
}

/* Remove ALL margins from inner layout elements - they inherit padding from parent */
html body.frippe-sidebar-mounted .layout-main-section-wrapper,
html body.frippe-sidebar-mounted .desk-page .layout-main-section-wrapper,
html body.frippe-sidebar-mounted .col.layout-main-section-wrapper,
html body.frippe-sidebar-mounted .row .col.layout-main-section-wrapper,
html body.frippe-sidebar-mounted .row.layout-main .col.layout-main-section-wrapper {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

html body.frippe-sidebar-mounted .layout-main-section {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Main section takes remaining space - no additional margins */
body.frippe-sidebar-mounted .layout-main-section,
body.frippe-sidebar-mounted .layout-main-section-wrapper {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin-left: 0 !important;
}

/* Workspace-specific - internal padding only */
body.frippe-sidebar-mounted .workspace-container {
	margin-left: 0 !important;
	padding-left: 1rem !important;
}

/* =============================================================================
   P0 FIX: Hide Frappe Native Sidebar Toggle (SIDEBAR-OPT-003)
   When Frippe sidebar is mounted, hide Frappe's redundant sidebar toggle button
   ============================================================================= */

/*
 * Frappe v16 has a sidebar toggle button in the page-head area that appears
 * as a small hamburger icon at the top of the page. Since we have our own
 * Frippe sidebar with its own toggle, we hide this redundant button.
 */
body.frippe-sidebar-mounted .sidebar-toggle,
body.frippe-sidebar-mounted .btn-sidebar-toggle,
body.frippe-sidebar-mounted .toggle-sidebar,
body.frippe-sidebar-mounted .page-head .sidebar-toggle,
body.frippe-sidebar-mounted .page-head [data-toggle="sidebar"],
body.frippe-sidebar-mounted .layout-main .sidebar-toggle,
body.frippe-sidebar-mounted button[data-action="toggle-sidebar"],
body.frippe-sidebar-mounted .btn-open-sidebar,
body.frippe-sidebar-mounted .open-sidebar,
body.frippe-sidebar-mounted .page-container > .sidebar-toggle,
body.frippe-sidebar-mounted #page-container > .sidebar-toggle {
	display: none !important;
}

/* Hide Frappe's redundant sidebar toggle in page-head, but keep navigation buttons */
body.frippe-sidebar-mounted .page-head .sidebar-toggle,
body.frippe-sidebar-mounted .page-head [data-toggle="sidebar"],
body.frippe-sidebar-mounted .page-head [data-action="toggle-sidebar"],
body.frippe-sidebar-mounted .page-head .btn-sidebar-toggle {
	display: none !important;
}

/* Improve icon visibility in page-head area */
body.frippe-sidebar-mounted .page-head button svg,
body.frippe-sidebar-mounted .page-head .btn svg,
body.frippe-sidebar-mounted .page-head .icon {
	color: var(--text-color, #374151) !important;
	opacity: 0.8 !important;
}

body.frippe-sidebar-mounted .page-head button:hover svg,
body.frippe-sidebar-mounted .page-head .btn:hover svg {
	color: var(--heading-color, #1f2937) !important;
	opacity: 1 !important;
}

/* =============================================================================
   P0 FIX: Workspace Content Full Width (SIDEBAR-OPT-004)
   Remove ALL inner margins - offset handled by padding on layout-main above
   ============================================================================= */

/* Inner containers have no margin/padding - parent layout-main handles offset */
body.frippe-sidebar-mounted .page-wrapper,
body.frippe-sidebar-mounted .page-body,
body.frippe-sidebar-mounted .main-section {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Workspace page specific - internal padding only */
body.frippe-sidebar-mounted .workspace-container,
body.frippe-sidebar-mounted .workspace-main-section {
	margin-left: 0 !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Workspace cards/widgets container */
body.frippe-sidebar-mounted .workspace-main-section .widget-group,
body.frippe-sidebar-mounted .workspace-main-section .shortcut-widget-box,
body.frippe-sidebar-mounted .widget-body {
	margin-left: 0 !important;
}

/* Page head area */
body.frippe-sidebar-mounted .page-head,
body.frippe-sidebar-mounted .page-head-wrapper {
	margin-left: 0 !important;
	padding-left: 1rem !important;
}

/* Row/col layout within workspace */
body.frippe-sidebar-mounted .row.layout-main,
body.frippe-sidebar-mounted .layout-main.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Hide Frappe's native sidebar - we use Frippe sidebar instead */
body.frippe-sidebar-mounted .desk-sidebar,
body.frippe-sidebar-mounted .layout-side-section,
body.frippe-sidebar-mounted .standard-sidebar {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	flex: 0 0 0 !important;
}

/* Layout main section uses full width */
body.frippe-sidebar-mounted .layout-main-section-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin-left: 0 !important;
}

/* =============================================================================
   MOBILE-001: Reset sidebar content offset on mobile
   On mobile screens (<768px), the sidebar slides in from the left (via JS).
   Content should NOT have padding-left when sidebar is hidden.
   ============================================================================= */
@media (max-width: 768px) {
	/* Reset all content padding on mobile - sidebar is off-canvas */
	html body.frippe-sidebar-mounted:not(.frippe-sidebar-collapsed) #page-container,
	html body.frippe-sidebar-mounted:not(.frippe-sidebar-collapsed) .page-container,
	html body.frippe-sidebar-mounted.frippe-sidebar-collapsed #page-container,
	html body.frippe-sidebar-mounted.frippe-sidebar-collapsed .page-container {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	html body.frippe-sidebar-mounted .layout-main,
	html body.frippe-sidebar-mounted .main-section,
	html body.frippe-sidebar-mounted .layout-main-section-wrapper,
	html body.frippe-sidebar-mounted .layout-main-section {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}

	/* Workspace containers */
	html body.frippe-sidebar-mounted .workspace-container,
	html body.frippe-sidebar-mounted .workspace-main-section {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	/* Page head */
	html body.frippe-sidebar-mounted .page-head,
	html body.frippe-sidebar-mounted .page-head-wrapper {
		padding-left: 0.5rem !important;
	}
}

/* =============================================================================
   Duplicate Logo Fix (SIDEBAR-OPT-002)
   Hide small navbar logo - sidebar already has the logo
   ============================================================================= */

/* Hide navbar + breadcrumb logos when sidebar shows the brand */
body.frippe-sidebar-mounted header.navbar .navbar-brand img,
body.frippe-sidebar-mounted .navbar-home .app-logo,
body.frippe-sidebar-mounted header.navbar img.app-logo,
body.frippe-sidebar-mounted #navbar-breadcrumbs .navbar-brand img,
body.frippe-sidebar-mounted .layout-main-section-wrapper .navbar-brand img {
	display: none !important;
}

body.frippe-sidebar-mounted .navbar .navbar-brand {
	font-weight: 600;
	font-size: 1rem;
}

/* Show text wordmark if injected */
body.frippe-sidebar-mounted .frippe-navbar-wordmark {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 1rem;
	color: var(--heading-color, #1f2937);
}

body:not(.frippe-sidebar-mounted) .frippe-navbar-wordmark {
	display: none;
}

/* =============================================================================
   beA Navbar Widget
   BEAD: guardianpad-l82u.13 - UI: Global beA status indicator + quick actions
   ============================================================================= */

.bea-navbar-widget {
	position: relative;
}

.bea-navbar-widget .bea-status-link {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: var(--gp-radius-md);
	transition: background-color var(--gp-transition-fast);
}

.bea-navbar-widget .bea-status-link:hover {
	background-color: var(--fg-hover-color, rgba(0, 0, 0, 0.05));
}

.bea-navbar-widget .bea-status-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.bea-navbar-widget .bea-status-icon svg {
	width: 16px;
	height: 16px;
	transition: color var(--gp-transition-fast);
}

/* Status colors */
.bea-navbar-widget .bea-status-link.status-connected .bea-status-icon svg {
	color: var(--gp-success);
}

.bea-navbar-widget .bea-status-link.status-expired .bea-status-icon svg {
	color: var(--gp-danger);
}

.bea-navbar-widget .bea-status-link.status-disconnected .bea-status-icon svg {
	color: var(--gp-warning);
}

.bea-navbar-widget .bea-status-link.status-unknown .bea-status-icon svg {
	color: var(--text-muted);
}

/* Badge styles */
.bea-navbar-widget .bea-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	border-radius: 8px;
	color: white;
}

.bea-navbar-widget .bea-badge-eeb {
	background-color: var(--gp-warning);
}

.bea-navbar-widget .bea-badge-submission {
	background-color: var(--gp-info);
}

/* Dropdown menu */
.bea-navbar-widget .bea-dropdown {
	min-width: 220px;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--gp-radius-lg);
	box-shadow: var(--gp-shadow-lg);
}

.bea-navbar-widget .bea-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background-color: var(--bg-light-gray);
	border-radius: var(--gp-radius-lg) var(--gp-radius-lg) 0 0;
}

.bea-navbar-widget .bea-dropdown-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-color);
}

.bea-navbar-widget .bea-status-text {
	font-size: 12px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 10px;
}

.bea-navbar-widget .bea-status-text.status-connected {
	color: var(--gp-success);
	background-color: var(--gp-success-light);
}

.bea-navbar-widget .bea-status-text.status-expired {
	color: var(--gp-danger);
	background-color: var(--gp-danger-light);
}

.bea-navbar-widget .bea-status-text.status-disconnected {
	color: var(--gp-warning);
	background-color: var(--gp-warning-light);
}

.bea-navbar-widget .bea-status-text.status-unknown {
	color: var(--text-muted);
	background-color: var(--bg-light-gray);
}

.bea-navbar-widget .bea-dropdown-content {
	padding: 8px 0;
}

.bea-navbar-widget .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--text-color);
	transition: background-color var(--gp-transition-fast);
}

.bea-navbar-widget .dropdown-item:hover {
	background-color: var(--fg-hover-color, rgba(0, 0, 0, 0.05));
}

.bea-navbar-widget .dropdown-item .icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--text-muted);
}

.bea-navbar-widget .dropdown-item.text-danger {
	color: var(--gp-danger);
}

.bea-navbar-widget .dropdown-item.text-danger .icon-wrapper {
	color: var(--gp-danger);
}

.bea-navbar-widget .bea-dropdown-footer {
	padding: 8px 16px;
	text-align: center;
}

.bea-navbar-widget .bea-last-sync {
	font-size: 11px;
	color: var(--text-muted);
}

/* Dark mode adjustments */
[data-theme="dark"] .bea-navbar-widget .bea-dropdown-header {
	background-color: var(--bg-dark-gray);
}

[data-theme="dark"] .bea-navbar-widget .dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* Frippe Kasimir theme adjustments */
[data-theme="frippe-kasimir"] .bea-navbar-widget .bea-status-link.status-connected .bea-status-icon svg {
	color: var(--gp-success);
}

[data-theme="frippe-kasimir"] .bea-navbar-widget .bea-badge-eeb {
	background-color: var(--gp-warning);
}

[data-theme="frippe-kasimir"] .bea-navbar-widget .bea-badge-submission {
	background-color: var(--gp-info);
}

/* ==========================================================================
   Markdown Status Indicators (BEAD guardianpad-oytc.5)
   ========================================================================== */

/* Markdown conversion status styling for GP DMS File */
.status-pending {
	color: var(--text-muted) !important;
}

.status-processing {
	color: var(--gp-info) !important;
}

.status-completed {
	color: var(--gp-success) !important;
}

.status-failed {
	color: var(--gp-danger) !important;
}

.status-na {
	color: var(--text-light) !important;
}

/* Markdown preview container styling */
.markdown-preview-container {
	font-family: var(--font-stack);
	line-height: 1.6;
}

.markdown-preview-container h1,
.markdown-preview-container h2,
.markdown-preview-container h3,
.markdown-preview-container h4 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-weight: 600;
	color: var(--heading-color);
}

.markdown-preview-container h1 {
	font-size: 1.5em;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.3em;
}

.markdown-preview-container h2 {
	font-size: 1.3em;
}

.markdown-preview-container h3 {
	font-size: 1.1em;
}

.markdown-preview-container p {
	margin-bottom: 0.8em;
}

.markdown-preview-container ul,
.markdown-preview-container ol {
	padding-left: 1.5em;
	margin-bottom: 0.8em;
}

.markdown-preview-container li {
	margin-bottom: 0.3em;
}

.markdown-preview-container code {
	background: var(--bg-light-gray);
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-size: 0.9em;
}

.markdown-preview-container pre {
	background: var(--bg-light-gray);
	padding: 1em;
	border-radius: 4px;
	overflow-x: auto;
}

.markdown-preview-container pre code {
	background: transparent;
	padding: 0;
}

.markdown-preview-container blockquote {
	border-left: 3px solid var(--gp-primary);
	padding-left: 1em;
	margin-left: 0;
	color: var(--text-muted);
}

.markdown-preview-container table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}

.markdown-preview-container th,
.markdown-preview-container td {
	border: 1px solid var(--border-color);
	padding: 0.5em;
	text-align: left;
}

.markdown-preview-container th {
	background: var(--bg-light-gray);
	font-weight: 600;
}

/* Preview toggle button */
.markdown-preview-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.markdown-preview-toggle .preview-icon {
	display: flex;
	align-items: center;
}

/* Dark mode adjustments for markdown preview */
[data-theme="dark"] .markdown-preview-container {
	background: var(--bg-dark-gray);
}

[data-theme="dark"] .markdown-preview-container code,
[data-theme="dark"] .markdown-preview-container pre {
	background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .markdown-preview-container th {
	background: rgba(255, 255, 255, 0.05);
}

/* =============================================================================
   Frappe Dialog Theming (BEAD-UI-005)
   Applies Frippe design system to Frappe dialogs and modals
   ============================================================================= */

/* Modal backdrop with Frippe styling */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

/* Modal container */
.modal-dialog {
	font-family: var(--font-stack);
}

/* Modal content with Frippe styling */
.modal-content {
	border: none;
	border-radius: var(--gp-radius-lg);
	box-shadow: var(--gp-shadow-xl);
	overflow: hidden;
}

/* Modal header with brand styling */
.modal-header {
	background-color: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
	padding: var(--gp-spacing-md) var(--gp-spacing-lg);
}

.modal-header .modal-title,
.modal-header .title-text {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--heading-color);
}

/* Close button styling */
.modal-header .btn-modal-close,
.modal-header .close {
	color: var(--text-muted);
	opacity: 1;
	transition: color var(--gp-transition-fast);
}

.modal-header .btn-modal-close:hover,
.modal-header .close:hover {
	color: var(--text-color);
}

/* Modal body */
.modal-body {
	padding: var(--gp-spacing-lg);
	max-height: 70vh;
	overflow-y: auto;
}

/* Scrollbar styling for modal body */
.modal-body::-webkit-scrollbar {
	width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
	background-color: var(--scroll-bar-color, #c1c1c1);
	border-radius: 3px;
}

/* Modal footer with Frippe button styling */
.modal-footer {
	background-color: var(--bg-light-gray);
	border-top: 1px solid var(--border-color);
	padding: var(--gp-spacing-md) var(--gp-spacing-lg);
	gap: var(--gp-spacing-sm);
}

/* Frappe dialog specific styling */
.frappe-control {
	margin-bottom: var(--gp-spacing-md);
}

.frappe-control .control-label {
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: var(--gp-spacing-xs);
}

.frappe-control .form-control,
.frappe-control input[type="text"],
.frappe-control input[type="number"],
.frappe-control input[type="email"],
.frappe-control input[type="password"],
.frappe-control select,
.frappe-control textarea {
	border: 1px solid var(--border-color);
	border-radius: var(--gp-radius-sm);
	padding: 0.5rem 0.75rem;
	transition: border-color var(--gp-transition-fast), box-shadow var(--gp-transition-fast);
}

.frappe-control .form-control:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
	border-color: var(--gp-primary);
	box-shadow: var(--gp-shadow-focus);
	outline: none;
}

/* Dialog buttons */
.modal-footer .btn,
.frappe-dialog .btn {
	border-radius: var(--gp-radius-sm);
	font-weight: 500;
	padding: 0.5rem 1rem;
	transition: all var(--gp-transition-fast);
}

/* Primary button (like Genehmigen, Speichern) */
.modal-footer .btn-primary,
.frappe-dialog .btn-primary {
	background-color: var(--gp-primary);
	border-color: var(--gp-primary);
}

.modal-footer .btn-primary:hover,
.frappe-dialog .btn-primary:hover {
	background-color: var(--gp-primary-dark);
	border-color: var(--gp-primary-dark);
}

/* Secondary button (like Abbrechen) */
.modal-footer .btn-secondary,
.modal-footer .btn-default,
.frappe-dialog .btn-secondary,
.frappe-dialog .btn-default {
	background-color: var(--bg-color);
	border-color: var(--border-color);
	color: var(--text-color);
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover,
.frappe-dialog .btn-secondary:hover,
.frappe-dialog .btn-default:hover {
	background-color: var(--bg-light-gray);
}

/* Danger button (like Löschen) */
.modal-footer .btn-danger,
.frappe-dialog .btn-danger {
	background-color: var(--gp-danger);
	border-color: var(--gp-danger);
}

.modal-footer .btn-danger:hover,
.frappe-dialog .btn-danger:hover {
	background-color: #b91c1c;
	border-color: #b91c1c;
}

/* Success button */
.modal-footer .btn-success,
.frappe-dialog .btn-success {
	background-color: var(--gp-success);
	border-color: var(--gp-success);
}

.modal-footer .btn-success:hover,
.frappe-dialog .btn-success:hover {
	background-color: #047857;
	border-color: #047857;
}

/* Warning/caution button */
.modal-footer .btn-warning,
.frappe-dialog .btn-warning {
	background-color: var(--gp-warning);
	border-color: var(--gp-warning);
	color: white;
}

.modal-footer .btn-warning:hover,
.frappe-dialog .btn-warning:hover {
	background-color: #b45309;
	border-color: #b45309;
}

/* Alert dialogs (confirm, msgprint) */
.frappe-msgprint .indicator-pill {
	border-radius: var(--gp-radius-sm);
	padding: 0.25rem 0.5rem;
	font-weight: 500;
}

/* Confirmation dialog styling */
.frappe-confirm .modal-body {
	text-align: center;
	padding: var(--gp-spacing-xl);
}

.frappe-confirm .modal-body .icon {
	margin-bottom: var(--gp-spacing-md);
}

/* Link dialog styling */
.frappe-control.link-field .awesomplete > ul {
	border-radius: var(--gp-radius-sm);
	box-shadow: var(--gp-shadow-lg);
	border: 1px solid var(--border-color);
}

.frappe-control.link-field .awesomplete > ul > li {
	padding: 0.5rem 0.75rem;
	transition: background-color var(--gp-transition-fast);
}

.frappe-control.link-field .awesomplete > ul > li:hover,
.frappe-control.link-field .awesomplete > ul > li[aria-selected="true"] {
	background-color: var(--gp-primary-light);
	color: white;
}

/* Date picker dialog styling */
.datepicker {
	border-radius: var(--gp-radius-md);
	box-shadow: var(--gp-shadow-lg);
	border: 1px solid var(--border-color);
}

.datepicker .datepicker-days table thead tr:first-child th {
	background-color: var(--gp-primary);
	color: white;
}

.datepicker .datepicker-days table tbody td.today {
	background-color: var(--gp-primary-light);
	color: white;
}

.datepicker .datepicker-days table tbody td.active {
	background-color: var(--gp-primary);
}

/* Quick entry dialog */
.quick-entry-form .modal-content {
	max-width: 600px;
	margin: auto;
}

/* Dark mode dialog adjustments */
[data-theme="dark"] .modal-content {
	background-color: var(--bg-color);
}

[data-theme="dark"] .modal-header {
	background-color: var(--bg-dark-gray);
}

[data-theme="dark"] .modal-footer {
	background-color: var(--bg-dark-gray);
}

[data-theme="dark"] .frappe-control .form-control,
[data-theme="dark"] .frappe-control input,
[data-theme="dark"] .frappe-control select,
[data-theme="dark"] .frappe-control textarea {
	background-color: var(--control-bg);
	color: var(--text-color);
}

[data-theme="dark"] .frappe-control.link-field .awesomplete > ul {
	background-color: var(--bg-color);
}

[data-theme="dark"] .frappe-control.link-field .awesomplete > ul > li:hover,
[data-theme="dark"] .frappe-control.link-field .awesomplete > ul > li[aria-selected="true"] {
	background-color: var(--gp-primary);
}

/* Frippe Kasimir theme dialog adjustments */
[data-theme="frippe-kasimir"] .modal-header {
	background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-light-gray) 100%);
}

[data-theme="frippe-kasimir"] .modal-footer .btn-primary {
	background: linear-gradient(135deg, var(--gp-primary) 0%, var(--gp-primary-dark) 100%);
}

/* =============================================================================
   Empty State Patterns (BEAD-UI-006)
   Standardized empty state components for consistent UX
   ============================================================================= */

/* Base empty state container */
.gp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--gp-spacing-xl) var(--gp-spacing-lg);
	min-height: 200px;
}

/* Empty state icon */
.gp-empty-state-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--gp-spacing-md);
	color: var(--text-muted);
	opacity: 0.6;
}

.gp-empty-state-icon svg,
.gp-empty-state-icon i {
	width: 100%;
	height: 100%;
	font-size: 48px;
}

/* Empty state text */
.gp-empty-state-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--heading-color);
	margin-bottom: var(--gp-spacing-xs);
}

.gp-empty-state-text {
	font-size: 0.875rem;
	color: var(--text-muted);
	max-width: 320px;
	margin: 0 auto var(--gp-spacing-md);
	line-height: 1.5;
}

/* Empty state action button */
.gp-empty-state-action {
	margin-top: var(--gp-spacing-sm);
}

.gp-empty-state-action .btn {
	border-radius: var(--gp-radius-sm);
}

/* Size variants */
.gp-empty-state-sm {
	padding: var(--gp-spacing-md);
	min-height: 120px;
}

.gp-empty-state-sm .gp-empty-state-icon {
	width: 40px;
	height: 40px;
}

.gp-empty-state-sm .gp-empty-state-icon svg,
.gp-empty-state-sm .gp-empty-state-icon i {
	font-size: 32px;
}

.gp-empty-state-sm .gp-empty-state-title {
	font-size: 1rem;
}

.gp-empty-state-sm .gp-empty-state-text {
	font-size: 0.8125rem;
}

.gp-empty-state-lg {
	padding: var(--gp-spacing-xl) var(--gp-spacing-xl);
	min-height: 300px;
}

.gp-empty-state-lg .gp-empty-state-icon {
	width: 80px;
	height: 80px;
}

.gp-empty-state-lg .gp-empty-state-icon svg,
.gp-empty-state-lg .gp-empty-state-icon i {
	font-size: 64px;
}

.gp-empty-state-lg .gp-empty-state-title {
	font-size: 1.25rem;
}

/* Color variants */
.gp-empty-state-success .gp-empty-state-icon {
	color: var(--gp-success);
	opacity: 1;
}

.gp-empty-state-warning .gp-empty-state-icon {
	color: var(--gp-warning);
	opacity: 1;
}

.gp-empty-state-info .gp-empty-state-icon {
	color: var(--gp-info);
	opacity: 1;
}

.gp-empty-state-danger .gp-empty-state-icon {
	color: var(--gp-danger);
	opacity: 1;
}

/* Card variant - with background */
.gp-empty-state-card {
	background-color: var(--bg-light-gray);
	border-radius: var(--gp-radius-lg);
	border: 1px dashed var(--border-color);
}

/* Inline variant - for use in lists/tables */
.gp-empty-state-inline {
	flex-direction: row;
	min-height: auto;
	padding: var(--gp-spacing-md);
	gap: var(--gp-spacing-md);
}

.gp-empty-state-inline .gp-empty-state-icon {
	width: 32px;
	height: 32px;
	margin-bottom: 0;
}

.gp-empty-state-inline .gp-empty-state-icon svg,
.gp-empty-state-inline .gp-empty-state-icon i {
	font-size: 24px;
}

.gp-empty-state-inline .gp-empty-state-content {
	text-align: left;
}

.gp-empty-state-inline .gp-empty-state-title {
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.gp-empty-state-inline .gp-empty-state-text {
	margin-bottom: 0;
	max-width: none;
}

/* Illustration variant - for larger empty states with illustrations */
.gp-empty-state-illustration .gp-empty-state-icon {
	width: 120px;
	height: 120px;
	opacity: 0.8;
}

.gp-empty-state-illustration .gp-empty-state-icon svg,
.gp-empty-state-illustration .gp-empty-state-icon i {
	font-size: 80px;
}

/* Dark mode adjustments */
[data-theme="dark"] .gp-empty-state-card {
	background-color: var(--bg-dark-gray);
	border-color: var(--dark-border-color);
}

[data-theme="dark"] .gp-empty-state-icon {
	opacity: 0.5;
}

[data-theme="dark"] .gp-empty-state-success .gp-empty-state-icon,
[data-theme="dark"] .gp-empty-state-warning .gp-empty-state-icon,
[data-theme="dark"] .gp-empty-state-info .gp-empty-state-icon,
[data-theme="dark"] .gp-empty-state-danger .gp-empty-state-icon {
	opacity: 0.8;
}

/* Animation for initial load */
.gp-empty-state-animate {
	animation: gp-empty-state-fade-in 0.3s ease-out;
}

@keyframes gp-empty-state-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =============================================================================
   Accessibility Enhancements (BEAD-REV-017: WCAG 2.1 Compliance)
   ============================================================================= */

/* Landmark region styling */
[role="main"],
[role="navigation"],
[role="complementary"],
[role="contentinfo"],
[role="banner"] {
	display: block;
}

/* Live regions for dynamic content announcements */
.gp-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible live region for toast/alert announcements */
.gp-live-region-visible {
	position: relative;
	width: auto;
	height: auto;
	padding: inherit;
	margin: inherit;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* Reduced motion preferences */
@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;
	}

	.gp-skeleton {
		animation: none;
		background: var(--gray-200, #e5e7eb);
	}

	.gp-loading-spinner {
		animation: none;
		border-color: var(--gp-primary);
	}

	.gp-empty-state-animate {
		animation: none;
	}
}

/* Color contrast utilities for WCAG AA compliance */
.gp-text-high-contrast {
	color: var(--heading-color);
	font-weight: 500;
}

.gp-text-low-contrast {
	color: var(--text-muted);
}

/* Ensure sufficient contrast for status indicators */
.gp-status-text-success {
	color: #047857; /* Darker green for contrast */
}

.gp-status-text-warning {
	color: #b45309; /* Darker amber for contrast */
}

.gp-status-text-danger {
	color: #b91c1c; /* Darker red for contrast */
}

.gp-status-text-info {
	color: #0369a1; /* Darker blue for contrast */
}

/* Interactive element minimum size (44x44px touch target) */
.gp-touch-target {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Focus trap container */
.gp-focus-trap {
	position: relative;
}

.gp-focus-trap::before,
.gp-focus-trap::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Ensure disabled states are clearly indicated */
.gp-disabled,
[disabled],
[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Error states with accessible colors */
.gp-error-text {
	color: #b91c1c;
	font-weight: 500;
}

.gp-error-border {
	border-color: #b91c1c !important;
}

/* Required field indicator */
.gp-required::after {
	content: " *";
	color: #b91c1c;
	font-weight: bold;
}

/* Link styling with underline for better visibility */
.gp-link-underline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gp-link-underline:hover {
	text-decoration-thickness: 2px;
}

/* High visibility mode utilities */
.gp-high-visibility {
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Ensure sufficient spacing for readability */
.gp-readable-spacing {
	line-height: 1.6;
	letter-spacing: 0.01em;
}

/* Icon-only button accessibility */
.gp-icon-button {
	position: relative;
}

.gp-icon-button .gp-icon-button-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Loading state announcements */
.gp-loading-announcement {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

/* Dark mode accessibility adjustments */
[data-theme="dark"] .gp-status-text-success {
	color: #34d399;
}

[data-theme="dark"] .gp-status-text-warning {
	color: #fbbf24;
}

[data-theme="dark"] .gp-status-text-danger {
	color: #f87171;
}

[data-theme="dark"] .gp-status-text-info {
	color: #60a5fa;
}

[data-theme="dark"] .gp-error-text {
	color: #f87171;
}

[data-theme="dark"] .gp-error-border {
	border-color: #f87171 !important;
}

/* Print accessibility - ensure content is visible */
@media print {
	.sr-only {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		white-space: normal !important;
	}

	.skip-to-content {
		display: none;
	}

	/* Ensure links show URLs */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.875em;
		color: #666;
	}

	/* Don't show URL for internal links */
	a[href^="#"]::after,
	a[href^="javascript"]::after {
		content: "";
	}
}

/* =============================================================================
   Mobile/Responsive Utilities (BEAD-REV-018)
   Additional responsive utility classes and breakpoint helpers
   ============================================================================= */

/* Responsive display utilities */
.gp-hide-mobile {
	display: inherit;
}

.gp-show-mobile {
	display: none;
}

.gp-hide-tablet {
	display: inherit;
}

.gp-show-tablet {
	display: none;
}

/* Responsive flex utilities */
.gp-flex-mobile-col {
	display: flex;
}

.gp-flex-mobile-wrap {
	display: flex;
}

/* Responsive spacing */
.gp-gap-mobile-sm {
	gap: var(--gp-spacing-md);
}

.gp-p-mobile-sm {
	padding: var(--gp-spacing-md);
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
	/* Display utilities */
	.gp-hide-mobile {
		display: none !important;
	}

	.gp-show-mobile {
		display: inherit !important;
	}

	.gp-show-mobile-flex {
		display: flex !important;
	}

	.gp-show-mobile-block {
		display: block !important;
	}

	/* Flex direction mobile */
	.gp-flex-mobile-col {
		flex-direction: column !important;
	}

	.gp-flex-mobile-wrap {
		flex-wrap: wrap !important;
	}

	/* Spacing mobile */
	.gp-gap-mobile-sm {
		gap: var(--gp-spacing-sm) !important;
	}

	.gp-p-mobile-sm {
		padding: var(--gp-spacing-sm) !important;
	}

	.gp-p-mobile-xs {
		padding: var(--gp-spacing-xs) !important;
	}

	/* Text alignment mobile */
	.gp-text-mobile-center {
		text-align: center !important;
	}

	.gp-text-mobile-left {
		text-align: left !important;
	}

	/* Width utilities mobile */
	.gp-w-mobile-full {
		width: 100% !important;
	}

	.gp-w-mobile-auto {
		width: auto !important;
	}

	/* Margin utilities mobile */
	.gp-m-mobile-auto {
		margin: auto !important;
	}

	.gp-mx-mobile-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Stack children on mobile */
	.gp-stack-mobile > * {
		width: 100%;
		margin-bottom: var(--gp-spacing-sm);
	}

	.gp-stack-mobile > *:last-child {
		margin-bottom: 0;
	}

	/* Fixed bottom bar for mobile CTAs */
	.gp-mobile-bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--bg-color);
		border-top: 1px solid var(--border-color);
		padding: var(--gp-spacing-md);
		z-index: 100;
		box-shadow: var(--gp-shadow-lg);
	}

	/* Pull-to-refresh indicator area */
	.gp-pull-to-refresh {
		min-height: 60px;
	}

	/* Swipe actions hint */
	.gp-swipe-hint {
		padding: var(--gp-spacing-xs) var(--gp-spacing-sm);
		background: var(--bg-light-gray);
		border-radius: var(--gp-radius-sm);
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	/* Mobile card styles */
	.gp-mobile-card {
		border-radius: var(--gp-radius-lg);
		margin-bottom: var(--gp-spacing-md);
		overflow: hidden;
	}

	/* Safe area insets for notched devices */
	.gp-safe-area-top {
		padding-top: env(safe-area-inset-top, 0);
	}

	.gp-safe-area-bottom {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
}

/* Tablet-specific utilities (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.gp-hide-tablet {
		display: none !important;
	}

	.gp-show-tablet {
		display: inherit !important;
	}

	.gp-show-tablet-flex {
		display: flex !important;
	}

	/* Tablet grid adjustments */
	.gp-grid-tablet-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.gp-grid-tablet-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Desktop-only utilities */
@media (min-width: 1025px) {
	.gp-hide-desktop {
		display: none !important;
	}

	.gp-show-desktop {
		display: inherit !important;
	}

	.gp-show-desktop-flex {
		display: flex !important;
	}
}

/* Touch device detection utilities */
@media (hover: none) and (pointer: coarse) {
	/* Larger touch targets */
	.gp-touch-device-target {
		min-height: 48px;
		min-width: 48px;
	}

	/* Remove hover effects on touch */
	.gp-no-touch-hover:hover {
		background-color: inherit;
		color: inherit;
	}
}

/* Orientation utilities */
@media (orientation: landscape) {
	.gp-hide-landscape {
		display: none !important;
	}

	.gp-show-landscape {
		display: inherit !important;
	}
}

@media (orientation: portrait) {
	.gp-hide-portrait {
		display: none !important;
	}

	.gp-show-portrait {
		display: inherit !important;
	}
}

/* Container query support (modern browsers) */
@supports (container-type: inline-size) {
	.gp-container-query {
		container-type: inline-size;
	}
}

/* Dark mode mobile adjustments */
[data-theme="dark"] .gp-mobile-bottom-bar {
	background: var(--bg-dark-gray);
	border-top-color: var(--dark-border-color);
}

/* =============================================================================
   ENV-BANNER-001: Environment Banner
   Colored top bar to distinguish PROD / TEST / DEV environments
   ============================================================================= */

.frippe-env-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	pointer-events: none;
	user-select: none;
}

/* PROD — green */
.frippe-env-prod {
	background: #16a34a;
}

/* TEST — orange */
.frippe-env-test {
	background: #ea580c;
}

/* DEV — blue */
.frippe-env-dev {
	background: #2563eb;
}

/* Push page content down when banner is present */
body.has-frippe-env-banner {
	padding-top: 24px !important;
}

/* Offset Frappe navbar so it sits below the banner */
body.has-frippe-env-banner .navbar {
	top: 24px !important;
}

/* Offset sidebar in desk view */
body.has-frippe-env-banner .layout-side-section,
body.has-frippe-env-banner .desk-sidebar {
	top: calc(var(--navbar-height, 56px) + 24px) !important;
}