/*
 * WPLStyle - Custom Vaadin Theme
 * Based on Lumo with enhanced contrast for readonly and disabled fields
 *
 * This stylesheet improves the visibility and readability of form fields in
 * readonly and disabled states while maintaining visual distinction from editable fields.
 *
 * VERSION 2.0 - Mobile-First Design with WPL Branding
 * - iOS-inspired mobile-first components
 * - WPL brand colors (red #E1211A primary)
 * - Bottom tab navigation (3 tabs: Inbox, Apps, Profile)
 * - Red mobile header with white logo
 * - Touch-optimized (44px targets)
 * - System font stack
 *
 * VERSION 1.1 - Fixed CSS specificity and Vaadin 24.9.1 Shadow DOM targeting
 */

/* Import wplui-base theme (merged from wplUI module) */
/* === Inlined from ../wplui-base/styles.css === */
/*
 * WPL UI Library Base Theme
 * A theme-neutral component library that extends parent application themes
 *
 * This theme provides:
 * - Semantic CSS classes for components
 * - CSS custom properties for theming
 * - No hardcoded colors or Lumo-specific styles
 * - Full compatibility with wplStyle theme from wplSMB
 */

/* ============================================================================
   COMPONENT SEMANTIC CLASSES
   ============================================================================ */

/* Toolbar Components */
.wpl-toolbar {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm, 8px);
  padding: var(--wpl-toolbar-padding, 0.5em);
  background-color: var(--wpl-toolbar-bg, var(--lumo-contrast-5pct));
  border-radius: var(--wpl-toolbar-radius, 5px);
  width: 100%;
}

.wpl-toolbar-header {
  border-radius: var(--wpl-toolbar-radius, 5px) var(--wpl-toolbar-radius, 5px) 0 0;
}

.wpl-toolbar-content {
  border-radius: 0 0 var(--wpl-toolbar-radius, 5px) var(--wpl-toolbar-radius, 5px);
}

.wpl-toolbar-standalone {
  border-radius: var(--wpl-toolbar-radius, 5px);
}

.wpl-toolbar-title {
  margin: auto;
  font-size: var(--wpl-toolbar-title-size, 1.2em);
  font-weight: var(--wpl-toolbar-title-weight, bold);
  color: var(--wpl-toolbar-title-color, var(--lumo-primary-color));
}

.wpl-toolbar-label {
  margin-top: 0.3em;
  font-size: var(--wpl-toolbar-label-size, 0.9em);
  color: var(--wpl-toolbar-label-color, inherit);
  font-weight: 600;
  white-space: nowrap;
}

/* Toolbar Secondary Button - Subtle appearance for less prominent actions */
.wpl-toolbar-button-secondary {
  background: transparent !important;
  color: var(--wpl-text-secondary, #6B7280) !important;
  border: none !important;
  box-shadow: none !important;
}

.wpl-toolbar-button-secondary:hover {
  background: var(--wpl-gray-100, #F3F4F6) !important;
  color: var(--wpl-text-primary, #000000) !important;
}

.wpl-toolbar-button-secondary:active {
  background: var(--wpl-gray-200, #E5E7EB) !important;
}

/* Toolbar ComboBox styling - more compact and integrated */
.wpl-toolbar vaadin-combo-box,
.wpl-toolbar vaadin-select {
  --vaadin-input-field-height: 36px;
  font-size: 14px;
}

.wpl-toolbar vaadin-combo-box::part(input-field),
.wpl-toolbar vaadin-select::part(input-field) {
  min-height: 36px;
  border-radius: 6px;
  background: var(--wpl-bg-primary, #FFFFFF);
  border: 1px solid var(--wpl-gray-300, #D1D5DB);
}

.wpl-toolbar vaadin-combo-box:focus-within::part(input-field),
.wpl-toolbar vaadin-select:focus-within::part(input-field) {
  border-color: var(--wpl-red-primary, #E1211A);
  box-shadow: 0 0 0 2px rgba(225, 33, 26, 0.1);
}

/* Toolbar TextField styling - more compact */
.wpl-toolbar vaadin-text-field {
  --vaadin-input-field-height: 36px;
  font-size: 14px;
}

.wpl-toolbar vaadin-text-field::part(input-field) {
  min-height: 36px;
  border-radius: 6px;
  background: var(--wpl-bg-primary, #FFFFFF);
  border: 1px solid var(--wpl-gray-300, #D1D5DB);
}

.wpl-toolbar vaadin-text-field:focus-within::part(input-field) {
  border-color: var(--wpl-red-primary, #E1211A);
  box-shadow: 0 0 0 2px rgba(225, 33, 26, 0.1);
}

/* Toolbar divider/separator */
.wpl-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--wpl-gray-300, #D1D5DB);
  margin: 0 8px;
}

/* Form Components */
.wpl-form {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-form-gap, var(--wpl-space-md, 16px));
}

.wpl-form-section {
  padding: var(--wpl-form-section-padding, var(--wpl-space-md, 16px));
  background: var(--wpl-form-section-bg, var(--wpl-bg-primary, #FFFFFF));
  border-radius: var(--wpl-form-section-radius, 8px);
  border: var(--wpl-form-section-border, 1px solid var(--wpl-gray-200, #E5E7EB));
}

.wpl-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-form-field-gap, 4px);
}

.wpl-form-field-label {
  font-size: var(--wpl-form-label-size, 14px);
  font-weight: var(--wpl-form-label-weight, 500);
  color: var(--wpl-form-label-color, var(--wpl-text-secondary, #6A6A6A));
}

.wpl-form-field-required::after {
  content: " *";
  color: var(--wpl-error, #F57C00);
}

.wpl-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--wpl-space-sm, 8px);
  padding: var(--wpl-form-footer-padding, var(--wpl-space-md, 16px));
  background: var(--wpl-form-footer-bg, var(--wpl-bg-secondary, #F5F5F5));
}

/* Button Components */
.wpl-button {
  min-height: var(--wpl-button-height, 44px);
  padding: var(--wpl-button-padding, 0 16px);
  font-size: var(--wpl-button-font-size, 16px);
  font-weight: var(--wpl-button-font-weight, 500);
  border-radius: var(--wpl-button-radius, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.wpl-button-primary {
  background: var(--wpl-button-primary-bg, var(--wpl-red-primary, #E1211A));
  color: var(--wpl-button-primary-color, #FFFFFF);
}

.wpl-button-primary:hover {
  background: var(--wpl-button-primary-hover, var(--wpl-red-hover, #B01814));
}

.wpl-button-secondary {
  background: var(--wpl-button-secondary-bg, transparent);
  color: var(--wpl-button-secondary-color, var(--wpl-text-primary, #000000));
  border: 1px solid var(--wpl-button-secondary-border, var(--wpl-gray-300, #D1D5DB));
}

.wpl-button-danger {
  background: var(--wpl-button-danger-bg, var(--wpl-error, #F57C00));
  color: var(--wpl-button-danger-color, #FFFFFF);
}

.wpl-button-icon {
  min-width: var(--wpl-button-height, 44px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpl-button-large {
  min-height: var(--wpl-button-large-height, 56px);
  font-size: var(--wpl-button-large-font-size, 18px);
  padding: var(--wpl-button-large-padding, 0 24px);
}

.wpl-button-small {
  min-height: var(--wpl-button-small-height, 32px);
  font-size: var(--wpl-button-small-font-size, 14px);
  padding: var(--wpl-button-small-padding, 0 12px);
}

.wpl-button-link {
  background: transparent;
  color: var(--wpl-button-link-color, var(--wpl-blue-primary, #007AFF));
  border: none;
  text-decoration: underline;
  padding: 0;
  min-height: auto;
}

.wpl-button-link:hover {
  color: var(--wpl-button-link-hover, var(--wpl-blue-dark, #0051D5));
}

.wpl-button-plain {
  background: transparent;
  color: var(--wpl-button-plain-color, var(--wpl-text-primary, #000000));
  border: none;
}

.wpl-button-plain:hover {
  background: var(--wpl-button-plain-hover-bg, var(--wpl-gray-100, #F3F4F6));
}

/* Grid/Table Components */
.wpl-grid {
  border: var(--wpl-grid-border, 1px solid var(--wpl-gray-200, #E5E7EB));
  border-radius: var(--wpl-grid-radius, 8px);
  overflow: hidden;
}

.wpl-grid-compact {
  font-size: var(--wpl-grid-compact-font-size, 14px);
}

.wpl-grid-compact .wpl-grid-row {
  padding: var(--wpl-grid-compact-padding, 8px);
}

.wpl-grid-borderless {
  border: none;
}

.wpl-grid-borderless .wpl-grid-row {
  border-bottom: none;
}

.wpl-grid-header {
  background: var(--wpl-grid-header-bg, var(--wpl-bg-secondary, #F5F5F5));
  font-weight: var(--wpl-grid-header-weight, 600);
  padding: var(--wpl-grid-header-padding, 12px);
}

.wpl-grid-row {
  border-bottom: 1px solid var(--wpl-grid-row-border, var(--wpl-gray-100, #F3F4F6));
  padding: var(--wpl-grid-row-padding, 12px);
}

.wpl-grid-row:hover {
  background: var(--wpl-grid-row-hover, var(--wpl-gray-50, #F9FAFB));
}

/* Notification Components */
.wpl-notification {
  padding: var(--wpl-notification-padding, 12px 16px);
  border-radius: var(--wpl-notification-radius, 8px);
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm, 8px);
}

.wpl-notification-error {
  background: var(--wpl-notification-error-bg, #FEF2F2);
  color: var(--wpl-notification-error-color, #991B1B);
  border: 1px solid var(--wpl-notification-error-border, #FCA5A5);
}

.wpl-notification-warning {
  background: var(--wpl-notification-warning-bg, #FFFBEB);
  color: var(--wpl-notification-warning-color, #92400E);
  border: 1px solid var(--wpl-notification-warning-border, #FCD34D);
}

.wpl-notification-info {
  background: var(--wpl-notification-info-bg, #EFF6FF);
  color: var(--wpl-notification-info-color, #1E40AF);
  border: 1px solid var(--wpl-notification-info-border, #93C5FD);
}

.wpl-notification-success {
  background: var(--wpl-notification-success-bg, #F0FDF4);
  color: var(--wpl-notification-success-color, #166534);
  border: 1px solid var(--wpl-notification-success-border, #86EFAC);
}

/* Layout Components */
.wpl-layout-section {
  padding: var(--wpl-layout-section-padding, var(--wpl-space-lg, 24px));
  background: var(--wpl-layout-section-bg, var(--wpl-bg-primary, #FFFFFF));
}

.wpl-layout-header {
  padding: var(--wpl-layout-header-padding, var(--wpl-space-md, 16px));
  background: var(--wpl-layout-header-bg, var(--wpl-red-primary, #E1211A));
  color: var(--wpl-layout-header-color, #FFFFFF);
}

.wpl-layout-content {
  padding: var(--wpl-layout-content-padding, var(--wpl-space-md, 16px));
  background: var(--wpl-layout-content-bg, var(--wpl-bg-primary, #FFFFFF));
}

/* Typography Components */
.wpl-title {
  font-size: var(--wpl-title-size, 1.5em);
  font-weight: var(--wpl-title-weight, bold);
  color: var(--wpl-title-color, var(--wpl-text-primary, #000000));
}

.wpl-subtitle {
  font-size: var(--wpl-subtitle-size, 1.2em);
  font-weight: var(--wpl-subtitle-weight, 600);
  color: var(--wpl-subtitle-color, var(--wpl-text-secondary, #6A6A6A));
}

.wpl-label {
  font-size: var(--wpl-label-size, 0.9em);
  color: var(--wpl-label-color, var(--wpl-text-secondary, #6A6A6A));
}

.wpl-error-text {
  color: var(--wpl-error, #F57C00);
  font-size: var(--wpl-error-text-size, 0.85em);
}

.wpl-warning-text {
  color: var(--wpl-warning, #F59E0B);
  font-size: var(--wpl-warning-text-size, 0.85em);
}

/* Spacing Utilities */
.wpl-gap-xs { gap: var(--wpl-space-xs, 4px); }
.wpl-gap-sm { gap: var(--wpl-space-sm, 8px); }
.wpl-gap-md { gap: var(--wpl-space-md, 16px); }
.wpl-gap-lg { gap: var(--wpl-space-lg, 24px); }
.wpl-gap-xl { gap: var(--wpl-space-xl, 32px); }

.wpl-padding-xs { padding: var(--wpl-space-xs, 4px); }
.wpl-padding-sm { padding: var(--wpl-space-sm, 8px); }
.wpl-padding-md { padding: var(--wpl-space-md, 16px); }
.wpl-padding-lg { padding: var(--wpl-space-lg, 24px); }
.wpl-padding-xl { padding: var(--wpl-space-xl, 32px); }

.wpl-margin-xs { margin: var(--wpl-space-xs, 4px); }
.wpl-margin-sm { margin: var(--wpl-space-sm, 8px); }
.wpl-margin-md { margin: var(--wpl-space-md, 16px); }
.wpl-margin-lg { margin: var(--wpl-space-lg, 24px); }
.wpl-margin-xl { margin: var(--wpl-space-xl, 32px); }

/* Responsive Utilities */
@media (max-width: 768px) {
  .wpl-mobile-hidden {
    display: none !important;
  }

  .wpl-mobile-stack {
    flex-direction: column !important;
  }

  .wpl-mobile-full-width {
    width: 100% !important;
  }
}

@media (min-width: 769px) {
  .wpl-desktop-hidden {
    display: none !important;
  }
}

/* Animation Utilities */
.wpl-transition-all {
  transition: all 0.3s ease;
}

.wpl-transition-colors {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wpl-transition-opacity {
  transition: opacity 0.2s ease;
}

/* State Utilities */
.wpl-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.wpl-readonly {
  pointer-events: none;
  background: var(--wpl-readonly-bg, var(--wpl-gray-50, #F9FAFB));
}

.wpl-selected {
  background: var(--wpl-selected-bg, var(--wpl-red-light, #FFEBEE));
  border-color: var(--wpl-selected-border, var(--wpl-red-primary, #E1211A));
}

.wpl-active {
  background: var(--wpl-active-bg, var(--wpl-red-primary, #E1211A));
  color: var(--wpl-active-color, #FFFFFF);
}

/* ============================================================================
   USER ROW COMPONENT - Modern Card-Like Design
   ============================================================================ */

.wpl-user-row {
  display: flex !important;
  align-items: center !important;
  background: var(--wpl-bg-primary, #FFFFFF) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--wpl-gray-100, #F3F4F6) !important;
  transition: all 0.2s ease !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wpl-user-row:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--wpl-gray-200, #E5E7EB) !important;
  transform: translateY(-1px) !important;
}

/* Users Toolbar Styling */
.wpl-users-toolbar {
  background: var(--wpl-bg-primary, #FFFFFF) !important;
  border-bottom: 1px solid var(--wpl-gray-200, #E5E7EB) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  padding: 12px 16px !important;
  gap: 12px !important;
}

.wpl-users-toolbar .wpl-toolbar-label {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--wpl-text-primary, #000000) !important;
}


/* ============================================================================
   CSS CUSTOM PROPERTIES - WPLStyle v2.0 Design System
   ============================================================================
   Mobile-first design system with WPL branding and iOS-inspired patterns
   ============================================================================ */

:root {
  /* ===== WPL BRAND COLORS (v2.0) ===== */
  /* Primary red - used for headers, buttons, active states */
  --wpl-red: #E1211A;
  --wpl-red-primary: #E1211A;
  --wpl-red-hover: #B01814;
  --wpl-red-active: #8F1310;
  --wpl-red-dark: #B01814;
  --wpl-red-light: #FFEBEE;

  /* Blue colors - for informational elements */
  --wpl-blue-primary: #007AFF;
  --wpl-blue-dark: #0051D5;
  --wpl-blue-light: #E3F2FD;

  /* Neutral colors */
  --wpl-black: #000000;
  --wpl-silver: #ECECEC;
  --wpl-white: #FFFFFF;
  --wpl-gray: #9CA3AF;

  /* Gray scale (for text, borders, backgrounds) */
  --wpl-gray-50: #F9FAFB;
  --wpl-gray-100: #F3F4F6;
  --wpl-gray-200: #E5E7EB;
  --wpl-gray-300: #D1D5DB;
  --wpl-gray-400: #9CA3AF;
  --wpl-gray-500: #6B7280;
  --wpl-gray-600: #4B5563;
  --wpl-gray-700: #374151;
  --wpl-gray-800: #1F2937;
  --wpl-gray-900: #111827;

  /* Error orange - distinct from brand red */
  --wpl-error: #F57C00;
  --wpl-error-hover: #E86D00;

  /* Background colors - iOS-inspired */
  --wpl-bg-primary: #FFFFFF;
  --wpl-bg-secondary: #F5F5F5;
  --wpl-bg-grouped: #ECECEC;

  /* Text colors */
  --wpl-text-primary: #000000;
  --wpl-text-secondary: #6A6A6A;
  --wpl-text-tertiary: #8A8A8A;
  --wpl-text-on-primary: #FFFFFF; /* White text on red */

  /* ===== SPACING (8px grid) ===== */
  --wpl-space-xs: 4px;
  --wpl-space-sm: 8px;
  --wpl-space-md: 16px;
  --wpl-space-lg: 24px;
  --wpl-space-xl: 32px;
  --wpl-space-xxl: 48px;
  --wpl-space-3xl: 64px;

  /* ===== TYPOGRAPHY ===== */
  /* System font stack - iOS SF Pro fallback */
  --wpl-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
                     'Helvetica Neue', Arial, sans-serif;
  --wpl-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

  /* Font sizes - minimum 16px to prevent iOS zoom */
  --wpl-font-size-tiny: 12px;
  --wpl-font-size-small: 14px;
  --wpl-font-size-body: 16px;
  --wpl-font-size-large: 18px;
  --wpl-font-size-xlarge: 20px;
  --wpl-font-size-xxlarge: 24px;
  --wpl-font-size-h1: 32px;
  --wpl-font-size-h2: 28px;
  --wpl-font-size-h3: 24px;

  /* Font weights */
  --wpl-font-weight-regular: 400;
  --wpl-font-weight-medium: 500;
  --wpl-font-weight-semibold: 600;
  --wpl-font-weight-bold: 700;

  /* Line heights */
  --wpl-line-height-tight: 1.2;
  --wpl-line-height-normal: 1.5;
  --wpl-line-height-relaxed: 1.75;

  /* ===== TOUCH TARGETS & SIZING ===== */
  /* iOS standard: 44px minimum touch target */
  --wpl-touch-target: 44px;
  --wpl-button-height-mobile: 48px;
  --wpl-button-height-desktop: 40px;
  --wpl-input-height: 44px;
  --wpl-header-height-mobile: 44px;
  --wpl-header-height-desktop: 64px;
  --wpl-bottom-nav-height: 64px;

  /* ===== BORDER RADIUS (iOS-inspired) ===== */
  --wpl-radius-sm: 4px;
  --wpl-radius-md: 10px; /* iOS standard */
  --wpl-radius-lg: 12px;
  --wpl-radius-xl: 16px;
  --wpl-radius-round: 50%;

  /* ===== BORDERS ===== */
  --wpl-border: #E5E7EB;
  --wpl-border-light: #F3F4F6;

  /* ===== SHADOWS ===== */
  --wpl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --wpl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --wpl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* iOS-style subtle shadow for cards */
  --wpl-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ===== Z-INDEX LAYERS ===== */
  --wpl-z-base: 1;
  --wpl-z-dropdown: 100;
  --wpl-z-sticky: 200;
  --wpl-z-modal: 1000;
  --wpl-z-bottom-nav: 500;
  --wpl-z-mobile-header: 400;

  /* ===== TRANSITIONS ===== */
  --wpl-transition-fast: 150ms ease-in-out;
  --wpl-transition-normal: 250ms ease-in-out;
  --wpl-transition-slow: 350ms ease-in-out;

  /* ===== VAADIN COMPATIBILITY (v1.1) ===== */
  /* CRITICAL: Override Vaadin's default input field height (--lumo-size-m ~36px) to 44px */
  /* This is the most reliable way to set input field height as Vaadin uses this internally */
  --vaadin-input-field-height: 44px;

  /* Also override --lumo-size-m which is the default for --vaadin-input-field-height */
  /* This ensures components that use --lumo-size-m directly also get the correct height */
  --lumo-size-m: 44px;

  /* Disabled field text color - Much darker than default #C2CAD2 */
  --vaadin-input-field-disabled-value-color: #4A4A4A;

  /* Disabled field background - Distinct from white but still light */
  --vaadin-input-field-disabled-background: #EBEBEB;

  /* Readonly border - More visible dashed border */
  --vaadin-input-field-readonly-border: 1px dashed #8A8A8A;

  /* Helper text for disabled fields - readable */
  --vaadin-input-field-disabled-helper-color: #6A6A6A;

  /* Labels for disabled fields - readable */
  --vaadin-input-field-disabled-label-color: #5A5A5A;
}

/* ============================================================================
   READONLY FIELDS - Enhanced Contrast
   ============================================================================
   Problem: Default Lumo readonly fields have low contrast making them hard to read
   Solution: Target the actual Shadow DOM parts and use high-contrast colors
   ============================================================================ */

/* Text Input Fields - Readonly */
/* Target the input-field part (the container) for background */
vaadin-text-field[readonly]::part(input-field),
vaadin-text-area[readonly]::part(input-field),
vaadin-email-field[readonly]::part(input-field),
vaadin-password-field[readonly]::part(input-field),
vaadin-integer-field[readonly]::part(input-field),
vaadin-number-field[readonly]::part(input-field),
vaadin-big-decimal-field[readonly]::part(input-field) {
  /* Light background to distinguish from editable fields */
  background-color: #F5F5F5 !important;

  /* Maintain cursor indicator */
  cursor: default !important;
}

/* Target the actual input/textarea element for text color */
vaadin-text-field[readonly] input,
vaadin-email-field[readonly] input,
vaadin-password-field[readonly] input,
vaadin-integer-field[readonly] input,
vaadin-number-field[readonly] input,
vaadin-big-decimal-field[readonly] input {
  /* Very dark text - near black for maximum readability */
  color: #1A1A1A !important;

  /* Remove any opacity that might lighten the text */
  opacity: 1 !important;

  /* Ensure background doesn't override */
  background: transparent !important;
}

vaadin-text-area[readonly] textarea {
  /* Very dark text - near black for maximum readability */
  color: #1A1A1A !important;

  /* Remove any opacity that might lighten the text */
  opacity: 1 !important;

  /* Ensure background doesn't override */
  background: transparent !important;
}

/* ComboBox and Select Components - Readonly */
vaadin-combo-box[readonly]::part(input-field),
vaadin-select[readonly]::part(input-field) {
  background-color: #F5F5F5 !important;
  cursor: default !important;
}

vaadin-combo-box[readonly] input,
vaadin-select[readonly] vaadin-select-value-button {
  color: #1A1A1A !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Date and Time Pickers - Readonly */
vaadin-date-picker[readonly]::part(input-field),
vaadin-time-picker[readonly]::part(input-field),
vaadin-date-time-picker[readonly]::part(input-field) {
  background-color: #F5F5F5 !important;
  cursor: default !important;
}

vaadin-date-picker[readonly] input,
vaadin-time-picker[readonly] input,
vaadin-date-time-picker[readonly] input {
  color: #1A1A1A !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Checkboxes and Radio Buttons - Readonly */
vaadin-checkbox[readonly] label,
vaadin-radio-button[readonly] label {
  color: #1A1A1A !important;
  opacity: 1 !important;
}

/* ============================================================================
   DISABLED FIELDS - Enhanced Contrast
   ============================================================================
   Problem: Default Lumo disabled fields use #C2CAD2 on #E2E7EB (very low contrast)
   Solution: Use much darker text (#4A4A4A) and distinct background (#EBEBEB)

   The CSS custom properties are set at :root above, but we also need to ensure
   the actual elements respect these values.
   ============================================================================ */

/* Text Input Fields - Disabled */
/* Target the input-field part (the container) for background */
vaadin-text-field[disabled]::part(input-field),
vaadin-text-area[disabled]::part(input-field),
vaadin-email-field[disabled]::part(input-field),
vaadin-password-field[disabled]::part(input-field),
vaadin-integer-field[disabled]::part(input-field),
vaadin-number-field[disabled]::part(input-field),
vaadin-big-decimal-field[disabled]::part(input-field) {
  /* Background set via CSS custom property, but enforce here for clarity */
  background-color: var(--vaadin-input-field-disabled-background) !important;

  /* Keep disabled cursor */
  cursor: not-allowed !important;
}

/* Target the actual input/textarea element for text color */
vaadin-text-field[disabled] input,
vaadin-email-field[disabled] input,
vaadin-password-field[disabled] input,
vaadin-integer-field[disabled] input,
vaadin-number-field[disabled] input,
vaadin-big-decimal-field[disabled] input {
  /* Medium dark gray - readable but clearly disabled */
  color: var(--vaadin-input-field-disabled-value-color) !important;

  /* NO opacity reduction - color already accounts for disabled state */
  opacity: 1 !important;

  /* Ensure background doesn't override */
  background: transparent !important;

  /* Ensure text color applies */
  -webkit-text-fill-color: var(--vaadin-input-field-disabled-value-color) !important;
}

vaadin-text-area[disabled] textarea {
  /* Medium dark gray - readable but clearly disabled */
  color: var(--vaadin-input-field-disabled-value-color) !important;

  /* NO opacity reduction */
  opacity: 1 !important;

  /* Ensure background doesn't override */
  background: transparent !important;

  /* Ensure text color applies */
  -webkit-text-fill-color: var(--vaadin-input-field-disabled-value-color) !important;
}

/* ComboBox and Select Components - Disabled */
vaadin-combo-box[disabled]::part(input-field),
vaadin-select[disabled]::part(input-field) {
  background-color: var(--vaadin-input-field-disabled-background) !important;
  cursor: not-allowed !important;
}

vaadin-combo-box[disabled] input,
vaadin-select[disabled] vaadin-select-value-button {
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--vaadin-input-field-disabled-value-color) !important;
}

/* Date and Time Pickers - Disabled */
vaadin-date-picker[disabled]::part(input-field),
vaadin-time-picker[disabled]::part(input-field),
vaadin-date-time-picker[disabled]::part(input-field) {
  background-color: var(--vaadin-input-field-disabled-background) !important;
  cursor: not-allowed !important;
}

vaadin-date-picker[disabled] input,
vaadin-time-picker[disabled] input,
vaadin-date-time-picker[disabled] input {
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--vaadin-input-field-disabled-value-color) !important;
}

/* Checkboxes and Radio Buttons - Disabled */
vaadin-checkbox[disabled] label,
vaadin-radio-button[disabled] label {
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
}

/* Buttons - Disabled */
vaadin-button[disabled] {
  opacity: 0.6 !important;
}

/* ============================================================================
   FIELD LABELS - Enhanced Contrast
   ============================================================================
   Improve label visibility for readonly and disabled fields
   ============================================================================ */

/* Labels for readonly fields - Keep at full visibility */
vaadin-text-field[readonly]::part(label),
vaadin-text-area[readonly]::part(label),
vaadin-email-field[readonly]::part(label),
vaadin-password-field[readonly]::part(label),
vaadin-integer-field[readonly]::part(label),
vaadin-number-field[readonly]::part(label),
vaadin-combo-box[readonly]::part(label),
vaadin-select[readonly]::part(label),
vaadin-date-picker[readonly]::part(label),
vaadin-time-picker[readonly]::part(label) {
  /* Keep labels at full opacity and dark color for readonly fields */
  color: #2A2A2A !important;
  opacity: 1 !important;
}

/* Labels for disabled fields - Still readable */
vaadin-text-field[disabled]::part(label),
vaadin-text-area[disabled]::part(label),
vaadin-email-field[disabled]::part(label),
vaadin-password-field[disabled]::part(label),
vaadin-integer-field[disabled]::part(label),
vaadin-number-field[disabled]::part(label),
vaadin-combo-box[disabled]::part(label),
vaadin-select[disabled]::part(label),
vaadin-date-picker[disabled]::part(label),
vaadin-time-picker[disabled]::part(label) {
  /* Readable label color for disabled fields */
  color: var(--vaadin-input-field-disabled-label-color) !important;
  opacity: 1 !important;
}

/* ============================================================================
   GRID COMPONENT - Enhanced Readonly/Disabled Cell Contrast
   ============================================================================ */

/* Grid cells in readonly mode */
vaadin-grid[readonly] vaadin-grid-cell-content {
  color: #1A1A1A !important;
  opacity: 1 !important;
}

/* Grid cells when disabled */
vaadin-grid[disabled] vaadin-grid-cell-content {
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
}

/* ============================================================================
   FORM LAYOUT - Visual Consistency
   ============================================================================ */

/* Ensure consistent spacing and alignment */
vaadin-form-layout vaadin-form-item {
  --vaadin-form-item-label-spacing: var(--lumo-space-xs);
}

/* ============================================================================
   HELPER TEXT - Enhanced Visibility
   ============================================================================ */

/* Helper text for readonly fields should remain fully visible */
vaadin-text-field[readonly]::part(helper-text),
vaadin-text-area[readonly]::part(helper-text),
vaadin-email-field[readonly]::part(helper-text),
vaadin-combo-box[readonly]::part(helper-text),
vaadin-date-picker[readonly]::part(helper-text) {
  color: #3A3A3A !important;
  opacity: 1 !important;
}

/* Helper text for disabled fields - still readable */
vaadin-text-field[disabled]::part(helper-text),
vaadin-text-area[disabled]::part(helper-text),
vaadin-email-field[disabled]::part(helper-text),
vaadin-combo-box[disabled]::part(helper-text),
vaadin-date-picker[disabled]::part(helper-text) {
  color: var(--vaadin-input-field-disabled-helper-color) !important;
  opacity: 1 !important;
}

/* ============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */

/* Focus indicators should remain visible even on readonly fields for keyboard navigation */
vaadin-text-field[readonly]:focus-within::part(input-field),
vaadin-text-area[readonly]:focus-within::part(input-field),
vaadin-combo-box[readonly]:focus-within::part(input-field),
vaadin-date-picker[readonly]:focus-within::part(input-field) {
  outline: 2px solid var(--lumo-primary-color-50pct) !important;
  outline-offset: 2px !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - Mobile Optimizations
   ============================================================================ */

@media (max-width: 768px) {
  /* Slightly larger text on mobile for better readability */
  vaadin-text-field[readonly] input,
  vaadin-text-field[disabled] input,
  vaadin-text-area[readonly] textarea,
  vaadin-text-area[disabled] textarea {
    font-size: var(--lumo-font-size-m) !important;
  }
}

/* ============================================================================
   CUSTOM WPL COMPONENTS SUPPORT
   ============================================================================
   Support for custom WPL-prefixed components following project naming conventions
   ============================================================================ */

/* Apply same styling rules to custom WPL components if they exist */
.wpl-readonly-field input,
.wpl-readonly-field textarea,
.wpl-readonly-field select {
  color: #1A1A1A !important;
  opacity: 1 !important;
  background-color: #F5F5F5 !important;
  cursor: default !important;
}

.wpl-disabled-field input,
.wpl-disabled-field textarea,
.wpl-disabled-field select {
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
  background-color: var(--vaadin-input-field-disabled-background) !important;
  cursor: not-allowed !important;
}

/* ============================================================================
   DARK MODE SUPPORT (if Lumo dark variant is used)
   ============================================================================ */

[theme~="dark"] {
  /* Override CSS custom properties for dark mode */
  --vaadin-input-field-disabled-value-color: #B8B8B8;
  --vaadin-input-field-disabled-background: #2A2A2A;
}

[theme~="dark"] vaadin-text-field[readonly]::part(input-field),
[theme~="dark"] vaadin-text-area[readonly]::part(input-field),
[theme~="dark"] vaadin-email-field[readonly]::part(input-field),
[theme~="dark"] vaadin-combo-box[readonly]::part(input-field) {
  /* In dark mode, use slightly darker background */
  background-color: #2A2A2A !important;
}

[theme~="dark"] vaadin-text-field[readonly] input,
[theme~="dark"] vaadin-text-area[readonly] textarea,
[theme~="dark"] vaadin-email-field[readonly] input,
[theme~="dark"] vaadin-combo-box[readonly] input {
  /* In dark mode, use brighter text */
  color: #E8E8E8 !important;
  opacity: 1 !important;
}

[theme~="dark"] vaadin-text-field[disabled] input,
[theme~="dark"] vaadin-text-area[disabled] textarea,
[theme~="dark"] vaadin-email-field[disabled] input,
[theme~="dark"] vaadin-combo-box[disabled] input {
  /* In dark mode, maintain good contrast for disabled fields */
  color: var(--vaadin-input-field-disabled-value-color) !important;
  opacity: 1 !important;
}

/* ============================================================================
   VALIDATION STATE PRESERVATION
   ============================================================================
   Ensure error and invalid states remain visible on readonly/disabled fields
   ============================================================================ */

/* Keep error styling visible on readonly fields */
vaadin-text-field[readonly][invalid]::part(input-field),
vaadin-text-area[readonly][invalid]::part(input-field),
vaadin-email-field[readonly][invalid]::part(input-field) {
  border-color: var(--lumo-error-color) !important;
}

/* Error messages remain fully visible */
vaadin-text-field[readonly]::part(error-message),
vaadin-text-area[readonly]::part(error-message),
vaadin-email-field[readonly]::part(error-message),
vaadin-text-field[disabled]::part(error-message),
vaadin-text-area[disabled]::part(error-message),
vaadin-email-field[disabled]::part(error-message) {
  opacity: 1 !important;
  color: var(--lumo-error-text-color) !important;
}

/* ============================================================================
   PLACEHOLDER TEXT - Ensure Visibility
   ============================================================================ */

/* Placeholder in readonly fields */
vaadin-text-field[readonly] input::placeholder,
vaadin-text-area[readonly] textarea::placeholder,
vaadin-email-field[readonly] input::placeholder {
  color: #6A6A6A !important;
  opacity: 1 !important;
}

/* Placeholder in disabled fields */
vaadin-text-field[disabled] input::placeholder,
vaadin-text-area[disabled] textarea::placeholder,
vaadin-email-field[disabled] input::placeholder {
  color: #8A8A8A !important;
  opacity: 1 !important;
}

/* ============================================================================
   GLOBAL INPUT FIELD TEXT VISIBILITY FIX
   ============================================================================
   This section ensures all input field text is always visible regardless of
   the operating system's color scheme preference.

   Problem: When the OS is set to dark mode but the app uses light theme,
   the browser may inherit dark-mode text colors while the app sets light
   backgrounds, resulting in invisible (dark text on dark background) text.

   Solution: Explicitly set light mode text colors for all input fields
   and use color-scheme: light to prevent OS dark mode from affecting inputs.

   Affected components:
   - vaadin-password-field (Change Password dialogs, login forms)
   - vaadin-text-field (Edit Profile dialogs, forms)
   - vaadin-email-field (Registration, profile forms)
   - vaadin-text-area (Various forms)
   ============================================================================ */

/* Force light color scheme for all Vaadin input fields globally */
vaadin-password-field,
vaadin-text-field,
vaadin-email-field,
vaadin-text-area {
  color-scheme: light;
}

/* ============================================================================
   GLOBAL INPUT FIELD HEIGHT FIX
   ============================================================================
   CRITICAL: Force minimum height on ALL input-field parts to prevent collapse
   This is the nuclear option that ensures ALL text fields have proper height
   regardless of where they are used or what classes they have.

   The issue: Vaadin input fields can collapse to 0 height if the internal
   CSS custom properties are not properly inherited or if there's a conflict
   with the flexbox layout. This manifests as:
   - Labels appearing with strikethrough (because the label overlaps the next element)
   - Input boxes being invisible or collapsed

   The fix: Set multiple layers of height constraints:
   1. CSS custom properties (--vaadin-input-field-height, --lumo-text-field-size)
   2. min-height on ::part(input-field)
   3. height on the native input element
   4. height on the ::before pseudo-element (used for vertical alignment)
   ============================================================================ */

/* Set CSS custom properties globally for input field height */
vaadin-text-field,
vaadin-password-field,
vaadin-email-field,
vaadin-number-field,
vaadin-integer-field {
  --vaadin-input-field-height: 44px;
  --lumo-text-field-size: 44px;
}

/* Force minimum height on input-field part */
vaadin-text-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-select::part(input-field) {
  min-height: 44px !important;
  height: auto;
}

/* Force height on the native input element inside the shadow DOM */
/* This is critical because the input element determines the container height */
vaadin-text-field > input,
vaadin-password-field > input,
vaadin-email-field > input,
vaadin-number-field > input,
vaadin-integer-field > input {
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

/* Force height on the ::before pseudo-element used for vertical alignment */
vaadin-text-field::before,
vaadin-password-field::before,
vaadin-email-field::before,
vaadin-number-field::before,
vaadin-integer-field::before {
  height: 44px !important;
  min-height: 44px !important;
}

/* Ensure input text is always visible (black on light bg) */
vaadin-password-field input,
vaadin-text-field input,
vaadin-email-field input,
vaadin-text-area textarea {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}

/* Input placeholder visibility */
vaadin-password-field input::placeholder,
vaadin-text-field input::placeholder,
vaadin-email-field input::placeholder,
vaadin-text-area textarea::placeholder {
  color: #8A8A8A !important;
  opacity: 1 !important;
}

/* Override for explicit dark theme (when app chooses dark mode) */
[theme~="dark"] vaadin-password-field input,
[theme~="dark"] vaadin-text-field input,
[theme~="dark"] vaadin-email-field input,
[theme~="dark"] vaadin-text-area textarea {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
}

[theme~="dark"] vaadin-password-field input::placeholder,
[theme~="dark"] vaadin-text-field input::placeholder,
[theme~="dark"] vaadin-email-field input::placeholder,
[theme~="dark"] vaadin-text-area textarea::placeholder {
  color: #8E8E93 !important;
  opacity: 1 !important;
}

/* ============================================================================
   WPLStyle v2.0 - Mobile-First Component Imports
   ============================================================================ */

/* Week 1: Mobile Foundation */
/* === Inlined from ./components/mobile-header.css === */
/*
 * WPLStyle v2.0 - Mobile Header Component
 *
 * Red-branded mobile header with white logo and title
 * iOS-inspired design with 44px height on mobile, 64px on desktop
 */

/* ============================================================================
   MOBILE HEADER - Base Structure
   ============================================================================ */

.wpl-mobile-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--wpl-z-mobile-header);

  /* Red background - WPL brand primary */
  background-color: var(--wpl-red-primary);

  /* Mobile height: 44px (iOS standard) */
  height: var(--wpl-header-height-mobile);
  min-height: var(--wpl-header-height-mobile);

  /* Flexbox layout */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Padding */
  padding: 0 var(--wpl-space-md);

  /* Shadow for depth */
  box-shadow: var(--wpl-shadow-sm);

  /* Smooth transitions */
  transition: height var(--wpl-transition-normal);
}

/* ============================================================================
   HEADER LOGO
   ============================================================================ */

.wpl-mobile-header__logo {
  height: 32px;
  width: auto;
  object-fit: contain;

  /* White logo on red background */
  filter: brightness(0) invert(1);
}

.wpl-mobile-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;

  /* Touch target */
  min-width: var(--wpl-touch-target);
  min-height: var(--wpl-touch-target);
  justify-content: center;
}

/* ============================================================================
   HEADER TITLE
   ============================================================================ */

.wpl-mobile-header__title {
  flex: 1;

  /* White text on red */
  color: var(--wpl-text-on-primary);

  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  line-height: var(--wpl-line-height-tight);

  /* Center alignment (or left, depending on design) */
  text-align: center;

  /* Prevent text selection */
  user-select: none;

  /* Truncate long titles */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Margin */
  margin: 0 var(--wpl-space-md);
}

/* Left-aligned title variant */
.wpl-mobile-header__title--left {
  text-align: left;
  margin-left: var(--wpl-space-md);
  margin-right: auto;
}

/* ============================================================================
   HEADER ACTIONS (Search, Notifications, etc.)
   ============================================================================ */

.wpl-mobile-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

.wpl-mobile-header__action-button {
  /* Touch target */
  min-width: var(--wpl-touch-target);
  min-height: var(--wpl-touch-target);

  /* Remove default button styles */
  background: transparent;
  border: none;

  /* White icon */
  color: var(--wpl-text-on-primary);

  /* Cursor */
  cursor: pointer;

  /* Flexbox center icon */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Border radius */
  border-radius: var(--wpl-radius-md);

  /* Transition */
  transition: background-color var(--wpl-transition-fast);
}

.wpl-mobile-header__action-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.wpl-mobile-header__action-button:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.wpl-mobile-header__action-button vaadin-icon {
  --vaadin-icon-width: 24px;
  --vaadin-icon-height: 24px;
}

/* ============================================================================
   DESKTOP RESPONSIVE (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
  .wpl-mobile-header {
    /* Desktop height: 64px */
    height: var(--wpl-header-height-desktop);
    min-height: var(--wpl-header-height-desktop);

    /* Ensure full width on desktop */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;

    /* Larger padding */
    padding: 0 var(--wpl-space-lg);
  }

  .wpl-mobile-header__logo {
    /* Larger logo on desktop */
    height: 40px;
  }

  .wpl-mobile-header__title {
    /* Larger title on desktop */
    font-size: var(--wpl-font-size-xlarge);
  }

  .wpl-mobile-header__action-button {
    /* Desktop touch targets can be smaller */
    min-width: 40px;
    min-height: 40px;
  }
}

/* ============================================================================
   VAADIN INTEGRATION
   ============================================================================ */

/* Ensure Vaadin components inside header inherit white color */
.wpl-mobile-header vaadin-button {
  color: var(--wpl-text-on-primary);
}

.wpl-mobile-header vaadin-icon {
  color: var(--wpl-text-on-primary);
}

/* Hide header when printing */
@media print {
  .wpl-mobile-header {
    display: none;
  }
}


/* === Inlined from ./components/bottom-nav.css === */
/*
 * WPLStyle v2.0 - Bottom Navigation Component
 *
 * iOS-inspired bottom tab navigation with 3 tabs:
 * - Inbox (icon + text)
 * - Apps (icon + text)
 * - Profile (icon + text)
 *
 * Mobile-first: Sticky to bottom on mobile (375px+)
 * Desktop: Becomes left sidebar on 1024px+
 */

/* ============================================================================
   BOTTOM NAVIGATION - Mobile (Default)
   ============================================================================ */

.wpl-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--wpl-z-bottom-nav);

  /* White background */
  background-color: var(--wpl-bg-primary);

  /* Height: 64px for icon + text */
  height: var(--wpl-bottom-nav-height);

  /* Top border for separation */
  border-top: 1px solid var(--wpl-silver);

  /* Shadow for depth */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

  /* Flexbox layout */
  display: flex;
  justify-content: space-around;
  align-items: stretch;

  /* Prevent text selection */
  user-select: none;

  /* Safe area for iOS notch */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   TAB ITEMS
   ============================================================================ */

.wpl-bottom-nav__tab {
  /* Flex: equal width */
  flex: 1;

  /* Remove default button/link styles */
  background: transparent;
  border: none;
  text-decoration: none;

  /* Cursor */
  cursor: pointer;

  /* Flexbox layout: column (icon above text) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wpl-space-xs);

  /* Padding */
  padding: var(--wpl-space-sm) var(--wpl-space-xs);

  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-medium);
  line-height: var(--wpl-line-height-tight);

  /* Default color: gray */
  color: var(--wpl-text-secondary);

  /* Transition */
  transition: color var(--wpl-transition-fast);

  /* Touch target */
  min-height: var(--wpl-touch-target);

  /* Position relative for active indicator */
  position: relative;
}

.wpl-bottom-nav__tab:hover {
  color: var(--wpl-text-primary);
}

.wpl-bottom-nav__tab:active {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Active state: Red color */
.wpl-bottom-nav__tab--active {
  color: var(--wpl-red-primary);
  font-weight: var(--wpl-font-weight-semibold);
}

/* Active indicator: Red line at top */
.wpl-bottom-nav__tab--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  background-color: var(--wpl-red-primary);
  border-radius: 0 0 3px 3px;
}

/* ============================================================================
   TAB ICON
   ============================================================================ */

.wpl-bottom-nav__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;

  /* Inherit color from parent (gray or red) */
  fill: currentColor;

  /* Smooth transition */
  transition: fill var(--wpl-transition-fast);
}

/* Vaadin icons */
.wpl-bottom-nav__tab vaadin-icon {
  --vaadin-icon-width: 24px;
  --vaadin-icon-height: 24px;
  color: inherit;
}

/* ============================================================================
   TAB LABEL
   ============================================================================ */

.wpl-bottom-nav__label {
  /* Text already styled by parent .wpl-bottom-nav__tab */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================================================
   BADGE (Optional - for notifications)
   ============================================================================ */

.wpl-bottom-nav__badge {
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);

  /* Red background */
  background-color: var(--wpl-red-primary);
  color: var(--wpl-white);

  /* Size */
  min-width: 18px;
  height: 18px;
  padding: 0 4px;

  /* Typography */
  font-size: 11px;
  font-weight: var(--wpl-font-weight-semibold);
  line-height: 18px;
  text-align: center;

  /* Circle shape */
  border-radius: 9px;

  /* Border for contrast */
  border: 2px solid var(--wpl-white);
}

/* ============================================================================
   SIDEBAR USER AVATAR (Desktop only)
   ============================================================================ */

.wpl-sidebar-user {
  display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
  .wpl-sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-md);
    padding: var(--wpl-space-md) var(--wpl-space-lg);
    margin-bottom: var(--wpl-space-sm);
    border-bottom: 1px solid var(--wpl-silver);
  }

  .wpl-sidebar-user__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--wpl-red-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .wpl-sidebar-user__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wpl-sidebar-user__avatar-initials {
    color: var(--wpl-white, #ffffff);
    font-size: 16px;
    font-weight: var(--wpl-font-weight-semibold, 600);
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wpl-sidebar-user__info {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow text truncation */
    flex: 1;
  }

  .wpl-sidebar-user__name {
    font-size: var(--wpl-font-size-body);
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wpl-sidebar-user__subtitle {
    font-size: var(--wpl-font-size-small);
    color: var(--wpl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================================
   DESKTOP RESPONSIVE (1024px+) - Becomes Left Sidebar
   ============================================================================ */

@media (min-width: 1024px) {
  .wpl-bottom-nav {
    /* Change from bottom to left sidebar */
    position: fixed;
    top: var(--wpl-header-height-desktop);
    bottom: 0;
    left: 0;
    right: auto;

    /* Sidebar width */
    width: 240px;
    height: auto;

    /* Change flexbox direction to vertical */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    /* Remove bottom border, add right border */
    border-top: none;
    border-right: 1px solid var(--wpl-silver);

    /* Adjust shadow */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);

    /* Remove safe area padding, compact top padding */
    padding-bottom: 0;
    padding-top: var(--wpl-space-sm);

    /* Prevent items from spreading - keep them at top */
    gap: 0;
  }

  .wpl-bottom-nav__tab {
    /* Full width but don't grow */
    width: 100%;
    flex: none;

    /* Change layout: icon left, text right */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--wpl-space-md);

    /* Compact padding for tighter layout */
    padding: var(--wpl-space-sm) var(--wpl-space-lg);

    /* Larger text */
    font-size: var(--wpl-font-size-body);

    /* Compact height - no min-height to prevent stretching */
    height: 48px;
    min-height: unset;
    flex-shrink: 0;
  }

  /* Active indicator: Left border instead of top */
  .wpl-bottom-nav__tab--active::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    border-radius: 0 4px 4px 0;
  }

  .wpl-bottom-nav__icon {
    /* Slightly larger icon */
    width: 28px;
    height: 28px;
  }

  .wpl-bottom-nav__tab vaadin-icon {
    --vaadin-icon-width: 28px;
    --vaadin-icon-height: 28px;
  }

  .wpl-bottom-nav__label {
    /* Left-aligned text */
    text-align: left;
  }

  .wpl-bottom-nav__badge {
    /* Adjust badge position for sidebar */
    top: 50%;
    right: var(--wpl-space-md);
    transform: translateY(-50%);
  }
}

/* ============================================================================
   TABLET (768px+) - Optional intermediate breakpoint
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Keep bottom nav, but make tabs slightly larger */
  .wpl-bottom-nav__tab {
    font-size: var(--wpl-font-size-small);
  }

  .wpl-bottom-nav__icon {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus indicator for keyboard navigation */
.wpl-bottom-nav__tab:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* Remove outline for mouse users */
.wpl-bottom-nav__tab:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .wpl-bottom-nav {
    display: none;
  }
}

/* ============================================================================
   VAADIN ROUTER INTEGRATION
   ============================================================================ */

/* Router link integration - remove default link styles */
.wpl-bottom-nav a.wpl-bottom-nav__tab {
  color: inherit;
  text-decoration: none;
}

.wpl-bottom-nav a.wpl-bottom-nav__tab:visited {
  color: inherit;
}


/* === Inlined from ./components/main-layout.css === */
/*
 * WPLStyle v2.0 - Main Layout Component
 *
 * Styles for the main application layout with:
 * - Mobile: Header + Content + Bottom Navigation
 * - Desktop: Fixed Header + Sidebar Navigation + Content
 */

/* ============================================================================
   MAIN LAYOUT CONTAINER
   ============================================================================ */

.wpl-main-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ============================================================================
   CONTENT AREA - Mobile (Default)
   ============================================================================ */

.wpl-main-layout__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--wpl-bg-grouped, #F2F2F7);
  padding: var(--wpl-space-md, 16px);
  padding-bottom: calc(var(--wpl-bottom-nav-height, 64px) + var(--wpl-space-md, 16px));
  box-sizing: border-box;
  width: 100%;
}

/* ============================================================================
   DESKTOP RESPONSIVE (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
  .wpl-main-layout {
    flex-direction: row;
    padding-top: var(--wpl-header-height-desktop, 64px);
  }

  .wpl-main-layout__content {
    /* Position content to the right of sidebar */
    margin-left: 240px;

    /* Constrain width to prevent overflow */
    width: calc(100% - 240px);
    max-width: calc(100% - 240px);

    /* Desktop padding */
    padding: var(--wpl-space-lg, 24px);
    padding-bottom: var(--wpl-space-lg, 24px);

    /* Ensure proper box model */
    box-sizing: border-box;

    /* Prevent content overflow */
    overflow-x: hidden;
  }

  /* Ensure child elements respect container width */
  .wpl-main-layout__content > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================================
   FULL WIDTH MODE
   ============================================================================ */

.wpl-main-layout__content--full-width {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .wpl-main-layout__content--full-width {
    padding-left: var(--wpl-space-lg, 24px);
    padding-right: var(--wpl-space-lg, 24px);
  }
}

/* ============================================================================
   CONTAINED MODE (Standard padding)
   ============================================================================ */

.wpl-main-layout__content--contained {
  padding-left: var(--wpl-space-md, 16px);
  padding-right: var(--wpl-space-md, 16px);
}

@media (min-width: 1024px) {
  .wpl-main-layout__content--contained {
    padding-left: var(--wpl-space-lg, 24px);
    padding-right: var(--wpl-space-lg, 24px);
  }
}



/* Week 2: iOS-Inspired Base Components */
/* === Inlined from ./components/buttons.css === */
/* ============================================================================
   WPL Button Components - iOS-Inspired Design
   ============================================================================
   Touch-optimized buttons with WPL branding (red #E1211A)
   Variants: PRIMARY (red), SECONDARY (black outline), TERTIARY (text only)
   ============================================================================ */

/* ===== BASE BUTTON STYLES ===== */
.wpl-button {
  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: 17px;
  font-weight: var(--wpl-font-weight-semibold);
  line-height: var(--wpl-line-height-tight);
  letter-spacing: -0.2px; /* iOS subtle tracking */

  /* Sizing - Touch optimized */
  height: var(--wpl-button-height-mobile);
  min-height: var(--wpl-touch-target);
  padding: 0 var(--wpl-space-lg);

  /* Border radius - iOS style */
  border-radius: var(--wpl-radius-lg);

  /* Transitions */
  transition: all var(--wpl-transition-fast);

  /* Box model */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpl-space-sm);

  /* Remove default Vaadin styling */
  border: none;
  box-shadow: none;

  /* Cursor */
  cursor: pointer;

  /* Text */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop sizing */
@media (min-width: 769px) {
  .wpl-button {
    height: var(--wpl-button-height-desktop);
    min-height: var(--wpl-button-height-desktop);
  }
}

/* ===== PRIMARY BUTTON (Red) ===== */
.wpl-button-primary {
  background-color: var(--wpl-red-primary);
  color: var(--wpl-text-on-primary);
  border: none;
}

.wpl-button-primary:hover:not([disabled]) {
  background-color: var(--wpl-red-hover);
  transform: translateY(-1px);
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-button-primary:active:not([disabled]) {
  background-color: var(--wpl-red-active);
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.wpl-button-primary:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* ===== SECONDARY BUTTON (Black Outline) ===== */
.wpl-button-secondary {
  background-color: transparent;
  color: var(--wpl-black);
  border: 2px solid var(--wpl-black);
}

.wpl-button-secondary:hover:not([disabled]) {
  background-color: var(--wpl-black);
  color: var(--wpl-white);
  transform: translateY(-1px);
}

.wpl-button-secondary:active:not([disabled]) {
  background-color: var(--wpl-black);
  color: var(--wpl-white);
  transform: scale(0.98);
}

.wpl-button-secondary:focus-visible {
  outline: 2px solid var(--wpl-black);
  outline-offset: 2px;
}

/* ===== TERTIARY BUTTON (Text Only) ===== */
.wpl-button-tertiary {
  background-color: transparent;
  color: var(--wpl-red-primary);
  border: none;
  padding: 0 var(--wpl-space-md);
  text-decoration: none;
}

.wpl-button-tertiary:hover:not([disabled]) {
  text-decoration: underline;
  color: var(--wpl-red-hover);
}

.wpl-button-tertiary:active:not([disabled]) {
  color: var(--wpl-red-active);
  transform: scale(0.98);
}

.wpl-button-tertiary:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
  border-radius: var(--wpl-radius-sm);
}

/* ===== DISABLED STATE (All Variants) ===== */
.wpl-button[disabled],
.wpl-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.wpl-button-primary[disabled],
.wpl-button-primary:disabled {
  background-color: var(--wpl-bg-secondary);
  color: var(--wpl-text-tertiary);
}

.wpl-button-secondary[disabled],
.wpl-button-secondary:disabled {
  border-color: var(--wpl-text-tertiary);
  color: var(--wpl-text-tertiary);
}

.wpl-button-tertiary[disabled],
.wpl-button-tertiary:disabled {
  color: var(--wpl-text-tertiary);
}

/* ===== LOADING STATE ===== */
.wpl-button-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.wpl-button-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: currentColor;
  animation: wpl-button-spin 0.6s linear infinite;
}

.wpl-button-primary.wpl-button-loading::after {
  border-top-color: var(--wpl-white);
}

.wpl-button-secondary.wpl-button-loading::after {
  border-top-color: var(--wpl-black);
}

.wpl-button-tertiary.wpl-button-loading::after {
  border-top-color: var(--wpl-red-primary);
}

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

/* ===== SIZE VARIANTS ===== */
/* Small button */
.wpl-button-small {
  height: 36px;
  min-height: 36px;
  padding: 0 var(--wpl-space-md);
  font-size: 15px;
}

/* Large button */
.wpl-button-large {
  height: 56px;
  min-height: 56px;
  padding: 0 var(--wpl-space-xl);
  font-size: 18px;
}

/* ===== FULL WIDTH VARIANT ===== */
.wpl-button[style*="width: 100%"],
.wpl-button[style*="width:100%"] {
  width: 100%;
  display: flex;
}

/* ===== ICON SUPPORT ===== */
.wpl-button vaadin-icon {
  width: 20px;
  height: 20px;
}

.wpl-button-small vaadin-icon {
  width: 16px;
  height: 16px;
}

.wpl-button-large vaadin-icon {
  width: 24px;
  height: 24px;
}

/* ===== BUTTON GROUPS ===== */
.wpl-button-group {
  display: flex;
  gap: var(--wpl-space-sm);
  flex-wrap: wrap;
}

.wpl-button-group--vertical {
  flex-direction: column;
}

.wpl-button-group--center {
  justify-content: center;
}

.wpl-button-group--end {
  justify-content: flex-end;
}

/* Mobile: stack buttons vertically */
@media (max-width: 768px) {
  .wpl-button-group--mobile-stack {
    flex-direction: column;
  }

  .wpl-button-group--mobile-stack .wpl-button {
    width: 100%;
  }
}

/* ===== ACCESSIBILITY ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
  .wpl-button-primary {
    border: 2px solid var(--wpl-black);
  }

  .wpl-button-tertiary {
    text-decoration: underline;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .wpl-button,
  .wpl-button-loading::after {
    animation: none;
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.wpl-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===== DARK MODE SUPPORT ===== */
[theme~="dark"] .wpl-button-secondary {
  border-color: var(--wpl-white);
  color: var(--wpl-white);
}

[theme~="dark"] .wpl-button-secondary:hover:not([disabled]) {
  background-color: var(--wpl-white);
  color: var(--wpl-black);
}

/* ============================================================================
   VAADIN LUMO THEME BUTTON OVERRIDES
   ============================================================================
   Ensure Vaadin buttons using Lumo theme attributes (like theme="secondary" or
   theme="tertiary") have proper hover states with readable text.
   ============================================================================ */

/* Secondary Lumo Button (outline style) - Normal state */
vaadin-button[theme~="secondary"],
vaadin-button[theme~="contrast"] {
  background-color: transparent;
  color: var(--wpl-text-primary, #000000);
  border: 2px solid var(--wpl-black, #000000);
  transition: all var(--wpl-transition-fast, 150ms ease-in-out);
}

/* Secondary Lumo Button - Hover state: fill with dark background, white text */
vaadin-button[theme~="secondary"]:hover:not([disabled]),
vaadin-button[theme~="contrast"]:hover:not([disabled]) {
  background-color: var(--wpl-black, #000000);
  color: var(--wpl-white, #FFFFFF) !important;
  border-color: var(--wpl-black, #000000);
}

/* Secondary Lumo Button - Active state */
vaadin-button[theme~="secondary"]:active:not([disabled]),
vaadin-button[theme~="contrast"]:active:not([disabled]) {
  background-color: var(--wpl-black, #000000);
  color: var(--wpl-white, #FFFFFF) !important;
  transform: scale(0.98);
}

/* Tertiary Lumo Button (text-only style) - Normal state */
vaadin-button[theme~="tertiary"] {
  background-color: transparent;
  color: var(--wpl-red-primary, #E1211A);
  border: none;
}

/* Tertiary Lumo Button - Hover state */
vaadin-button[theme~="tertiary"]:hover:not([disabled]) {
  text-decoration: underline;
  color: var(--wpl-red-hover, #B01814);
}

/* Tertiary Lumo Button - Active state */
vaadin-button[theme~="tertiary"]:active:not([disabled]) {
  color: var(--wpl-red-active, #8F1310);
  transform: scale(0.98);
}

/* Tertiary-inline Lumo Button (compact text-only style) */
vaadin-button[theme~="tertiary-inline"] {
  background-color: transparent;
  color: var(--wpl-red-primary, #E1211A);
  border: none;
  padding: 0;
  min-height: auto;
}

vaadin-button[theme~="tertiary-inline"]:hover:not([disabled]) {
  text-decoration: underline;
  color: var(--wpl-red-hover, #B01814);
}

/* Dark mode for Lumo buttons */
[theme~="dark"] vaadin-button[theme~="secondary"],
[theme~="dark"] vaadin-button[theme~="contrast"] {
  border-color: var(--wpl-white, #FFFFFF);
  color: var(--wpl-white, #FFFFFF);
}

[theme~="dark"] vaadin-button[theme~="secondary"]:hover:not([disabled]),
[theme~="dark"] vaadin-button[theme~="contrast"]:hover:not([disabled]) {
  background-color: var(--wpl-white, #FFFFFF);
  color: var(--wpl-black, #000000) !important;
  border-color: var(--wpl-white, #FFFFFF);
}


/* === Inlined from ./components/inputs.css === */
/* ============================================================================
   WPL Input Components - iOS-Inspired Design
   ============================================================================
   Touch-optimized form inputs with WPL branding
   Maintains v1.1 contrast standards for readonly/disabled states
   ============================================================================ */

/* ===== BASE INPUT STYLES ===== */
/* Single-line input fields (text, email, number) */
/* NOTE: Do NOT set explicit height/min-height on ::part(input-field) as it breaks Vaadin's */
/* internal layout calculation. Use CSS custom properties on the host element instead. */
.wpl-text-field::part(input-field),
.wpl-email-field::part(input-field),
.wpl-number-field::part(input-field) {
  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: 16px; /* Minimum to prevent iOS auto-zoom */
  font-weight: var(--wpl-font-weight-regular);

  /* Border - visible border for input fields */
  border: 1px solid #CCCCCC;
  border-radius: var(--wpl-radius-md); /* iOS standard 10px */

  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Transitions */
  transition: border-color var(--wpl-transition-fast),
              box-shadow var(--wpl-transition-fast);

  /* Box model */
  box-sizing: border-box;

  /* Height is controlled via CSS custom properties on the host element */
  /* See .wpl-text-field, .wpl-email-field, .wpl-number-field rules below */
}

/* Text area has separate styling - height determined by content/rows */
.wpl-text-area::part(input-field) {
  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: 16px;
  font-weight: var(--wpl-font-weight-regular);

  /* Border */
  border: 1px solid #CCCCCC;
  border-radius: var(--wpl-radius-md);

  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Transitions */
  transition: border-color var(--wpl-transition-fast),
              box-shadow var(--wpl-transition-fast);

  /* Box model */
  box-sizing: border-box;

  /* Text areas expand based on content - no fixed height */
  min-height: 100px;
}

/* Use Vaadin CSS custom properties to set height instead of direct styling */
/* This ensures proper internal layout calculation with label positioning */
.wpl-text-field,
.wpl-email-field,
.wpl-number-field {
  --vaadin-input-field-height: var(--wpl-input-height, 44px);
}

/* Input element styling */
.wpl-text-field input,
.wpl-email-field input,
.wpl-number-field input,
.wpl-text-area textarea {
  font-size: 16px !important; /* Prevent iOS zoom */
  color: var(--wpl-text-primary);
  font-family: var(--wpl-font-family);
}

/* ===== LABEL STYLING ===== */
.wpl-text-field::part(label),
.wpl-email-field::part(label),
.wpl-number-field::part(label),
.wpl-text-area::part(label) {
  /* Typography */
  font-size: 13px;
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);

  /* Spacing */
  margin-bottom: 8px;

  /* Always above input (mobile pattern) */
  display: block;
}

/* Required indicator */
.wpl-text-field[required]::part(required-indicator),
.wpl-email-field[required]::part(required-indicator),
.wpl-number-field[required]::part(required-indicator),
.wpl-text-area[required]::part(required-indicator) {
  color: var(--wpl-error);
}

/* ===== FOCUS STATE ===== */
.wpl-text-field:focus-within::part(input-field),
.wpl-email-field:focus-within::part(input-field),
.wpl-number-field:focus-within::part(input-field),
.wpl-text-area:focus-within::part(input-field) {
  /* WPL brand red focus border */
  border: 2px solid var(--wpl-red-primary);
  border-color: var(--wpl-red-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1);
}

/* ===== ERROR STATE ===== */
/* Error border - Orange, NOT brand red */
.wpl-text-field[invalid]::part(input-field),
.wpl-email-field[invalid]::part(input-field),
.wpl-number-field[invalid]::part(input-field),
.wpl-text-area[invalid]::part(input-field),
.wpl-text-field-error::part(input-field),
.wpl-text-area-error::part(input-field) {
  border: 2px solid var(--wpl-error) !important;
  background-color: #FFF3E0 !important; /* Light orange tint */
}

/* Error message styling */
.wpl-text-field::part(error-message),
.wpl-email-field::part(error-message),
.wpl-number-field::part(error-message),
.wpl-text-area::part(error-message) {
  color: var(--wpl-error);
  font-size: 13px;
  font-weight: var(--wpl-font-weight-medium);
  margin-top: 4px;
}

/* Error message icon */
.wpl-text-field::part(error-message)::before,
.wpl-email-field::part(error-message)::before,
.wpl-number-field::part(error-message)::before,
.wpl-text-area::part(error-message)::before {
  content: "⚠️ ";
}

/* ===== READONLY STATE (v1.1 standards) ===== */
.wpl-text-field[readonly]::part(input-field),
.wpl-email-field[readonly]::part(input-field),
.wpl-number-field[readonly]::part(input-field),
.wpl-text-area[readonly]::part(input-field) {
  /* Gray background */
  background-color: #F5F5F5 !important;

  /* Dashed border for distinction */
  border: 1px dashed #999999 !important;

  /* Cursor */
  cursor: default !important;
}

.wpl-text-field[readonly] input,
.wpl-email-field[readonly] input,
.wpl-number-field[readonly] input,
.wpl-text-area[readonly] textarea {
  /* Dark text for readability */
  color: #1A1A1A !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* ===== DISABLED STATE (v1.1 standards) ===== */
.wpl-text-field[disabled]::part(input-field),
.wpl-email-field[disabled]::part(input-field),
.wpl-number-field[disabled]::part(input-field),
.wpl-text-area[disabled]::part(input-field) {
  /* Distinct background */
  background-color: #EBEBEB !important;

  /* Border */
  border: 1px solid #D0D0D0 !important;

  /* Cursor */
  cursor: not-allowed !important;
}

.wpl-text-field[disabled] input,
.wpl-email-field[disabled] input,
.wpl-number-field[disabled] input,
.wpl-text-area[disabled] textarea {
  /* Readable text color */
  color: #4A4A4A !important;
  opacity: 1 !important;
  background: transparent !important;
  -webkit-text-fill-color: #4A4A4A !important;
}

/* ===== HELPER TEXT ===== */
.wpl-text-field::part(helper-text),
.wpl-email-field::part(helper-text),
.wpl-number-field::part(helper-text),
.wpl-text-area::part(helper-text) {
  font-size: 13px;
  color: var(--wpl-text-secondary);
  margin-top: 4px;
}

/* ===== PLACEHOLDER TEXT ===== */
.wpl-text-field input::placeholder,
.wpl-email-field input::placeholder,
.wpl-number-field input::placeholder,
.wpl-text-area textarea::placeholder {
  color: #8A8A8A;
  opacity: 1;
}

/* ===== PREFIX / SUFFIX COMPONENTS ===== */
.wpl-text-field::part(prefix),
.wpl-email-field::part(prefix),
.wpl-number-field::part(prefix),
.wpl-text-field::part(suffix),
.wpl-email-field::part(suffix),
.wpl-number-field::part(suffix) {
  color: var(--wpl-text-secondary);
  font-size: 16px;
}

/* ===== CLEAR BUTTON ===== */
.wpl-text-field::part(clear-button),
.wpl-email-field::part(clear-button),
.wpl-number-field::part(clear-button) {
  color: var(--wpl-text-tertiary);
  cursor: pointer;
}

.wpl-text-field::part(clear-button):hover,
.wpl-email-field::part(clear-button):hover,
.wpl-number-field::part(clear-button):hover {
  color: var(--wpl-text-primary);
}

/* ===== NUMBER FIELD CONTROLS ===== */
.wpl-number-field::part(increase-button),
.wpl-number-field::part(decrease-button) {
  color: var(--wpl-red-primary);
  cursor: pointer;
  width: 32px;
  height: 32px;
}

.wpl-number-field::part(increase-button):hover,
.wpl-number-field::part(decrease-button):hover {
  background-color: rgba(225, 33, 26, 0.1);
}

.wpl-number-field[disabled]::part(increase-button),
.wpl-number-field[disabled]::part(decrease-button) {
  color: var(--wpl-text-tertiary);
  cursor: not-allowed;
}

/* ===== FORM LAYOUT ===== */
.wpl-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-md);
  margin-bottom: var(--wpl-space-lg);
}

.wpl-form-row {
  display: flex;
  gap: var(--wpl-space-md);
  flex-wrap: wrap;
}

.wpl-form-row > * {
  flex: 1;
  min-width: 200px;
}

/* Mobile: stack form rows */
@media (max-width: 768px) {
  .wpl-form-row {
    flex-direction: column;
  }

  .wpl-form-row > * {
    width: 100%;
    min-width: 100%;
  }
}

/* ===== FULL WIDTH INPUTS ===== */
.wpl-text-field[style*="width: 100%"],
.wpl-text-field[style*="width:100%"],
.wpl-email-field[style*="width: 100%"],
.wpl-email-field[style*="width:100%"],
.wpl-number-field[style*="width: 100%"],
.wpl-number-field[style*="width:100%"] {
  width: 100%;
}

/* ===== ACCESSIBILITY ===== */
/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-text-field::part(input-field),
  .wpl-email-field::part(input-field),
  .wpl-number-field::part(input-field) {
    border: 2px solid var(--wpl-black);
  }

  .wpl-text-field:focus-within::part(input-field),
  .wpl-email-field:focus-within::part(input-field),
  .wpl-number-field:focus-within::part(input-field) {
    border: 3px solid var(--wpl-red-primary);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-text-field::part(input-field),
  .wpl-email-field::part(input-field),
  .wpl-number-field::part(input-field) {
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.wpl-text-field:focus-visible,
.wpl-email-field:focus-visible,
.wpl-number-field:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* ===== PASSWORD FIELD STYLES ===== */
/* Support for vaadin-password-field with .wpl-password-field class */
/* NOTE: Do NOT set explicit height on ::part(input-field) as it breaks Vaadin's */
/* internal layout and causes the border to overlap with the label */
.wpl-password-field::part(input-field) {
  /* Border */
  border: 1px solid #CCCCCC;
  border-radius: var(--wpl-radius-md);

  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Box model */
  box-sizing: border-box;
}

/* Use Vaadin CSS custom properties to set height */
.wpl-password-field {
  --vaadin-input-field-height: var(--wpl-input-height, 44px);
}

/* CRITICAL: Ensure password field text is visible in light mode */
.wpl-password-field input {
  font-size: 16px !important;
  color: var(--wpl-text-primary, #000000) !important;
  -webkit-text-fill-color: var(--wpl-text-primary, #000000) !important;
  font-family: var(--wpl-font-family);
  background: transparent !important;
}

/* Password field label styling */
.wpl-password-field::part(label) {
  font-size: 13px;
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);
  margin-bottom: 8px;
  display: block;
}

/* Password field focus state */
.wpl-password-field:focus-within::part(input-field) {
  border: 2px solid var(--wpl-red-primary);
  border-color: var(--wpl-red-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1);
}

/* Password field placeholder */
.wpl-password-field input::placeholder {
  color: #8A8A8A;
  opacity: 1;
}

/* ===== EXPLICIT LIGHT MODE FOR ALL WPL INPUT FIELDS ===== */
/* Prevent OS dark mode from affecting input text visibility */
.wpl-text-field,
.wpl-email-field,
.wpl-number-field,
.wpl-password-field,
.wpl-text-area {
  color-scheme: light;
}

/* Force light text colors for all inputs */
.wpl-text-field input,
.wpl-email-field input,
.wpl-number-field input,
.wpl-password-field input,
.wpl-text-area textarea {
  color: var(--wpl-text-primary, #000000) !important;
  -webkit-text-fill-color: var(--wpl-text-primary, #000000) !important;
  caret-color: var(--wpl-text-primary, #000000) !important;
}

/* ===== DARK MODE SUPPORT ===== */
/* Only applies when [theme~="dark"] is explicitly set on the app */
[theme~="dark"] .wpl-text-field::part(input-field),
[theme~="dark"] .wpl-email-field::part(input-field),
[theme~="dark"] .wpl-number-field::part(input-field),
[theme~="dark"] .wpl-password-field::part(input-field) {
  background-color: #2A2A2A;
  border-color: #4A4A4A;
  color: #FFFFFF;
}

[theme~="dark"] .wpl-text-field input,
[theme~="dark"] .wpl-email-field input,
[theme~="dark"] .wpl-number-field input,
[theme~="dark"] .wpl-password-field input {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
}

[theme~="dark"] .wpl-text-field::part(label),
[theme~="dark"] .wpl-email-field::part(label),
[theme~="dark"] .wpl-number-field::part(label),
[theme~="dark"] .wpl-password-field::part(label),
[theme~="dark"] .wpl-text-area::part(label) {
  color: #CCCCCC;
}

/* ===== TEXT AREA SPECIFIC STYLES ===== */
/* Override styling for multi-line input - let Vaadin handle height via setMinRows */
/* NOTE: Similar to text fields, avoid setting explicit height on ::part(input-field) */
.wpl-text-area::part(input-field) {
  /* Let height be determined by setMinRows in Java */
  height: auto;
  /* Remove any inner shadows/borders - Vaadin uses these for focus effects */
  box-shadow: none !important;
  /* Clean white background like WPLTextField */
  background-color: var(--wpl-bg-primary) !important;
  /* Ensure content is contained */
  overflow: hidden;
  position: relative;
}

/* Textarea element styling */
.wpl-text-area textarea {
  font-size: 16px !important;
  font-family: var(--wpl-font-family);
  color: var(--wpl-text-primary);
  line-height: 1.5;
  resize: vertical;
  padding: 12px 16px;
  /* Remove ALL borders from the textarea element itself */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100%;
  box-sizing: border-box;
}

/* Remove Vaadin's inner highlight/border effect completely */
/* The ::after pseudo-element creates the inner border effect */
.wpl-text-area::part(input-field)::before,
.wpl-text-area::part(input-field)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure proper background on the input container */
.wpl-text-area {
  /* Reset Vaadin internal styling variables */
  --vaadin-input-field-background: var(--wpl-bg-primary);
  --vaadin-input-field-border-color: #CCCCCC;
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-border-radius: var(--wpl-radius-md);
  /* Remove Lumo's highlight effect variables */
  --_input-field-hover-highlight-opacity: 0;
  --_input-field-highlight-opacity: 0;
  --lumo-contrast-10pct: transparent;
}

/* Focus state - only outer border, no inner effects */
.wpl-text-area:focus-within {
  --vaadin-input-field-border-color: var(--wpl-red-primary);
  --vaadin-input-field-border-width: 2px;
}

.wpl-text-area:focus-within::part(input-field) {
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1) !important;
}

/* Hover state - no inner highlight */
.wpl-text-area:hover::part(input-field)::after {
  display: none !important;
  opacity: 0 !important;
}

/* Dark mode text area */
[theme~="dark"] .wpl-text-area::part(input-field) {
  background-color: #2A2A2A !important;
  border-color: #4A4A4A;
}

[theme~="dark"] .wpl-text-area textarea {
  color: #FFFFFF !important;
}


/* === Inlined from ./components/cards.css === */
/* ============================================================================
   WPL Card Components - iOS-Inspired Design
   ============================================================================
   Clean white cards with subtle shadows and optional red brand accent
   Variants: STANDARD, INTERACTIVE, BORDERED, FLAT
   ============================================================================ */

/* ===== BASE CARD STYLES ===== */
.wpl-card {
  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Border radius - iOS style */
  border-radius: var(--wpl-radius-md);

  /* Default padding */
  padding: var(--wpl-space-md);

  /* Box model */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  /* Transitions */
  transition: all var(--wpl-transition-normal);

  /* Typography */
  font-family: var(--wpl-font-family);
}

/* ===== STANDARD VARIANT ===== */
.wpl-card-standard {
  /* Subtle shadow */
  box-shadow: var(--wpl-shadow-card);

  /* Optional red top border accent */
  border-top: 3px solid var(--wpl-red-primary);
}

/* Standard card without accent */
.wpl-card-standard:not(.wpl-card-accent) {
  border-top: none;
}

/* ===== INTERACTIVE VARIANT ===== */
.wpl-card-interactive {
  /* Subtle shadow */
  box-shadow: var(--wpl-shadow-card);

  /* Red top border */
  border-top: 3px solid var(--wpl-red-primary);

  /* Cursor */
  cursor: pointer;
}

.wpl-card-interactive:hover {
  /* Lift effect */
  transform: translateY(-4px);
  box-shadow: var(--wpl-shadow-md);
}

.wpl-card-interactive:active {
  /* Press down */
  transform: translateY(-2px);
  box-shadow: var(--wpl-shadow-sm);
}

/* ===== BORDERED VARIANT ===== */
.wpl-card-bordered {
  /* Border instead of shadow */
  border: 1px solid #E0E0E0;
  box-shadow: none;
}

.wpl-card-bordered.wpl-card-accent {
  border-top: 3px solid var(--wpl-red-primary);
}

/* ===== FLAT VARIANT ===== */
.wpl-card-flat {
  /* No shadow */
  box-shadow: none;
  border: none;
}

.wpl-card-flat.wpl-card-accent {
  border-top: 3px solid var(--wpl-red-primary);
}

/* ===== CARD HEADER ===== */
.wpl-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-xs);
  margin-bottom: var(--wpl-space-md);
  position: relative;
}

.wpl-card-title {
  /* Typography */
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);

  /* Spacing */
  margin: 0;
  padding: 0;
}

.wpl-card-subtitle {
  /* Typography */
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);

  /* Spacing */
  margin: 0;
  padding: 0;
}

/* Header action (icon, badge, etc.) */
.wpl-card-header-action {
  position: absolute;
  top: 0;
  right: 0;
}

/* ===== CARD CONTENT ===== */
.wpl-card-content {
  /* Flexible content area */
  flex: 1;

  /* Typography */
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);
}

.wpl-card-content > *:first-child {
  margin-top: 0;
}

.wpl-card-content > *:last-child {
  margin-bottom: 0;
}

/* ===== CARD FOOTER ===== */
.wpl-card-footer {
  /* Spacing */
  margin-top: var(--wpl-space-md);
  padding-top: var(--wpl-space-md);

  /* Border separator */
  border-top: 1px solid #F0F0F0;

  /* Layout - buttons in a row */
  display: flex;
  gap: var(--wpl-space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/* Mobile: stack footer buttons */
@media (max-width: 768px) {
  .wpl-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .wpl-card-footer .wpl-button {
    width: 100%;
  }
}

/* ===== PADDING VARIANTS ===== */
.wpl-card-padding-none {
  padding: 0;
}

.wpl-card-padding-none .wpl-card-header,
.wpl-card-padding-none .wpl-card-content,
.wpl-card-padding-none .wpl-card-footer {
  padding: var(--wpl-space-md);
}

.wpl-card-padding-small {
  padding: var(--wpl-space-sm);
}

.wpl-card-padding-large {
  padding: var(--wpl-space-lg);
}

/* ===== CLICKABLE CARDS ===== */
.wpl-card-clickable {
  cursor: pointer;
  user-select: none;
}

.wpl-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--wpl-shadow-md);
}

.wpl-card-clickable:active {
  transform: translateY(0);
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-card-clickable:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* ===== ACCENT VARIATIONS ===== */
.wpl-card-accent {
  border-top: 3px solid var(--wpl-red-primary);
}

/* ===== CARD LAYOUTS ===== */
/* Card grid */
.wpl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--wpl-space-md);
}

@media (max-width: 768px) {
  .wpl-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Card stack (vertical) */
.wpl-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-md);
}

/* Card row (horizontal) */
.wpl-card-row {
  display: flex;
  gap: var(--wpl-space-md);
  flex-wrap: wrap;
}

.wpl-card-row > .wpl-card {
  flex: 1;
  min-width: 250px;
}

@media (max-width: 768px) {
  .wpl-card-row {
    flex-direction: column;
  }

  .wpl-card-row > .wpl-card {
    width: 100%;
    min-width: 100%;
  }
}

/* ===== SPECIAL CARD TYPES ===== */
/* Stat card */
.wpl-card-stat .wpl-card-title {
  font-size: var(--wpl-font-size-xxlarge);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-red-primary);
}

.wpl-card-stat .wpl-card-subtitle {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Alert card */
.wpl-card-alert {
  border-left: 4px solid var(--wpl-error);
  background-color: #FFF3E0;
}

.wpl-card-alert .wpl-card-title {
  color: var(--wpl-error);
}

/* Success card */
.wpl-card-success {
  border-left: 4px solid #4CAF50;
  background-color: #F1F8F4;
}

.wpl-card-success .wpl-card-title {
  color: #2E7D32;
}

/* Info card */
.wpl-card-info {
  border-left: 4px solid #2196F3;
  background-color: #E3F2FD;
}

.wpl-card-info .wpl-card-title {
  color: #1565C0;
}

/* ===== ACCESSIBILITY ===== */
/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-card {
    border: 2px solid var(--wpl-black);
  }

  .wpl-card-footer {
    border-top: 2px solid var(--wpl-black);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-card,
  .wpl-card-interactive,
  .wpl-card-clickable {
    transition: none;
    transform: none;
  }

  .wpl-card-interactive:hover,
  .wpl-card-clickable:hover {
    transform: none;
  }
}

/* ===== DARK MODE SUPPORT ===== */
[theme~="dark"] .wpl-card {
  background-color: #2A2A2A;
  color: #FFFFFF;
}

[theme~="dark"] .wpl-card-title {
  color: #FFFFFF;
}

[theme~="dark"] .wpl-card-subtitle {
  color: #CCCCCC;
}

[theme~="dark"] .wpl-card-content {
  color: #EEEEEE;
}

[theme~="dark"] .wpl-card-bordered {
  border-color: #4A4A4A;
}

[theme~="dark"] .wpl-card-footer {
  border-top-color: #4A4A4A;
}


/* === Inlined from ./components/tableview.css === */
/* ============================================================================
   WPL TableView Components - iOS Settings Style
   ============================================================================
   iOS-inspired grouped table view for forms and settings
   Features: Sections, headers, footers, inset separators, touch-optimized rows
   ============================================================================ */

/* ===== BASE TABLEVIEW STYLES ===== */
.wpl-tableview {
  /* Background - iOS grouped style */
  background-color: var(--wpl-bg-grouped);

  /* Typography */
  font-family: var(--wpl-font-family);

  /* Layout */
  width: 100%;
  box-sizing: border-box;
}

.wpl-tableview-container {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-lg);
}

/* ===== SECTION STYLES ===== */
.wpl-tableview-section {
  display: flex;
  flex-direction: column;
}

/* Section header (uppercase, gray) */
.wpl-tableview-section-header {
  /* Typography */
  font-size: 13px;
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: var(--wpl-line-height-normal);

  /* Spacing */
  padding: 0 var(--wpl-space-md);
  margin-bottom: var(--wpl-space-sm);
}

/* Section rows container (white surface) */
.wpl-tableview-section-rows {
  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Border radius - iOS standard */
  border-radius: var(--wpl-radius-md);

  /* Shadow */
  box-shadow: var(--wpl-shadow-sm);

  /* Overflow */
  overflow: hidden;
}

/* Section footer (gray, smaller) */
.wpl-tableview-section-footer {
  /* Typography */
  font-size: 13px;
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);

  /* Spacing */
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  margin-top: var(--wpl-space-xs);
}

/* ===== ROW STYLES ===== */
.wpl-tableview-row {
  /* Layout */
  display: flex;
  flex-direction: column;
  position: relative;

  /* Sizing - Touch optimized */
  min-height: var(--wpl-touch-target);

  /* Background */
  background-color: var(--wpl-bg-primary);

  /* Transitions */
  transition: background-color var(--wpl-transition-fast);
}

/* Row content container */
.wpl-tableview-row-content {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-md);

  /* Sizing */
  min-height: var(--wpl-touch-target);
  padding: 12px var(--wpl-space-md);

  /* Flex */
  flex: 1;
}

/* Row label (left side) */
.wpl-tableview-row-label {
  /* Typography */
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);

  /* Layout */
  flex: 0 0 auto;
}

/* Row accessory container (right side) */
.wpl-tableview-row-accessory {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);

  /* Flex */
  flex: 0 0 auto;
  margin-left: auto;
}

/* Row detail text */
.wpl-tableview-row-detail {
  /* Typography */
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-secondary);
}

/* Row chevron (disclosure indicator) */
.wpl-tableview-row-chevron {
  /* Typography */
  font-size: 20px;
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-tertiary);
  line-height: 1;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

/* Row separator (inset 16px from left) */
.wpl-tableview-row-separator {
  /* Border */
  border-bottom: 1px solid #E0E0E0;

  /* Inset from left */
  margin-left: var(--wpl-space-md);
}

/* Hide separator on last row */
.wpl-tableview-row:last-child .wpl-tableview-row-separator {
  display: none;
}

/* ===== ROW VARIANTS ===== */
/* Detail row (non-clickable) */
.wpl-tableview-row-detail {
  /* No special styling, just detail text */
}

/* Disclosure row (clickable with chevron) */
.wpl-tableview-row-disclosure {
  cursor: pointer;
}

.wpl-tableview-row-disclosure:hover {
  background-color: #F8F8F8;
}

.wpl-tableview-row-disclosure:active {
  background-color: #F0F0F0;
}

/* Accessory row (with custom component) */
.wpl-tableview-row-accessory {
  /* No special styling */
}

/* Value row (clickable with value text and chevron) */
.wpl-tableview-row-value {
  cursor: pointer;
}

.wpl-tableview-row-value:hover {
  background-color: #F8F8F8;
}

.wpl-tableview-row-value:active {
  background-color: #F0F0F0;
}

/* Custom row */
.wpl-tableview-row-custom {
  /* No predefined structure */
}

/* ===== CLICKABLE ROWS ===== */
.wpl-tableview-row-clickable {
  cursor: pointer;
  user-select: none;
}

.wpl-tableview-row-clickable:hover {
  background-color: #F8F8F8;
}

.wpl-tableview-row-clickable:active {
  background-color: #F0F0F0;
}

.wpl-tableview-row-clickable:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
}

/* ===== ROW ICON ===== */
.wpl-tableview-row-icon {
  /* Sizing */
  width: 24px;
  height: 24px;

  /* Color */
  color: var(--wpl-red-primary);

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpl-tableview-row-icon vaadin-icon {
  width: 24px;
  height: 24px;
}

/* ===== ROW BADGE ===== */
.wpl-tableview-row-badge {
  /* Background */
  background-color: var(--wpl-red-primary);
  color: var(--wpl-white);

  /* Typography */
  font-size: 12px;
  font-weight: var(--wpl-font-weight-semibold);

  /* Sizing */
  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  /* Border radius */
  border-radius: 10px;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== DISABLED ROWS ===== */
.wpl-tableview-row-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.wpl-tableview-row-disabled .wpl-tableview-row-label {
  color: var(--wpl-text-tertiary);
}

/* ===== TABLEVIEW FOOTER ===== */
.wpl-tableview-footer {
  /* Typography */
  font-size: 13px;
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);

  /* Spacing */
  padding: var(--wpl-space-md);
  text-align: center;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Increase touch targets on mobile */
  .wpl-tableview-row-content {
    min-height: 48px;
    padding: 14px var(--wpl-space-md);
  }

  /* Larger chevron on mobile */
  .wpl-tableview-row-chevron {
    font-size: 22px;
  }
}

/* ===== DESKTOP OPTIMIZATIONS ===== */
@media (min-width: 769px) {
  .wpl-tableview {
    /* Add side padding on desktop */
    padding: 0 var(--wpl-space-lg);
  }

  .wpl-tableview-section-rows {
    /* Limit max width on desktop */
    max-width: 800px;
  }
}

/* ===== ACCESSIBILITY ===== */
/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-tableview-section-rows {
    border: 2px solid var(--wpl-black);
  }

  .wpl-tableview-row-separator {
    border-bottom-width: 2px;
    border-bottom-color: var(--wpl-black);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-tableview-row {
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.wpl-tableview-row[role="button"]:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* ===== DARK MODE SUPPORT ===== */
[theme~="dark"] .wpl-tableview {
  background-color: #1A1A1A;
}

[theme~="dark"] .wpl-tableview-section-rows {
  background-color: #2A2A2A;
}

[theme~="dark"] .wpl-tableview-row {
  background-color: #2A2A2A;
}

[theme~="dark"] .wpl-tableview-row-label {
  color: #FFFFFF;
}

[theme~="dark"] .wpl-tableview-row-detail {
  color: #CCCCCC;
}

[theme~="dark"] .wpl-tableview-row-chevron {
  color: #999999;
}

[theme~="dark"] .wpl-tableview-row-separator {
  border-bottom-color: #4A4A4A;
}

[theme~="dark"] .wpl-tableview-row-clickable:hover,
[theme~="dark"] .wpl-tableview-row-disclosure:hover,
[theme~="dark"] .wpl-tableview-row-value:hover {
  background-color: #333333;
}

[theme~="dark"] .wpl-tableview-row-clickable:active,
[theme~="dark"] .wpl-tableview-row-disclosure:active,
[theme~="dark"] .wpl-tableview-row-value:active {
  background-color: #3A3A3A;
}


/* === Inlined from ./components/toggle.css === */
/* ============================================================================
   WPL Toggle Switch - iOS-Inspired Design
   ============================================================================
   iOS-style toggle switch with WPL branding
   Specifications: 51px x 31px, red when ON, gray when OFF
   ============================================================================ */

/* ===== BASE TOGGLE STYLES ===== */
.wpl-toggle-switch {
  /* Typography */
  font-family: var(--wpl-font-family);

  /* Display */
  display: inline-block;
}

.wpl-toggle-container {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--wpl-space-md);
}

/* ===== TOGGLE LABEL ===== */
.wpl-toggle-label {
  /* Typography */
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);

  /* Cursor */
  cursor: pointer;
  user-select: none;

  /* Flex */
  flex: 1;
}

/* ===== TOGGLE SWITCH CONTAINER ===== */
.wpl-toggle-switch-container {
  /* Display */
  display: inline-block;
  flex-shrink: 0;
}

/* ===== TOGGLE TRACK (Background) ===== */
.wpl-toggle-track {
  /* Sizing - iOS standard: 51px x 31px */
  width: 51px;
  height: 31px;

  /* Border radius - fully rounded */
  border-radius: 16px;

  /* Background - OFF state (gray) */
  background-color: #E0E0E0;

  /* Position for knob */
  position: relative;

  /* Cursor */
  cursor: pointer;

  /* Transitions */
  transition: background-color var(--wpl-transition-fast);

  /* Display */
  display: inline-block;
}

/* Track ON state (red) */
.wpl-toggle-track-on {
  background-color: var(--wpl-red-primary);
}

/* Track OFF state (gray) */
.wpl-toggle-track-off {
  background-color: #E0E0E0;
}

/* ===== TOGGLE KNOB (Sliding Circle) ===== */
.wpl-toggle-knob {
  /* Sizing - 27px diameter */
  width: 27px;
  height: 27px;

  /* Border radius - fully rounded */
  border-radius: 50%;

  /* Background - white */
  background-color: var(--wpl-white);

  /* Shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Position */
  position: absolute;
  top: 2px;
  left: 2px;

  /* Transitions - smooth slide */
  transition: transform var(--wpl-transition-fast);
}

/* Knob position when ON */
.wpl-toggle-track-on .wpl-toggle-knob {
  transform: translateX(20px);
}

/* Knob position when OFF */
.wpl-toggle-track-off .wpl-toggle-knob {
  transform: translateX(0);
}

/* ===== HOVER STATES ===== */
.wpl-toggle-track:hover:not(.wpl-toggle-disabled .wpl-toggle-track) {
  opacity: 0.9;
}

/* ===== FOCUS STATE ===== */
.wpl-toggle-track:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* ===== DISABLED STATE ===== */
.wpl-toggle-disabled .wpl-toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.wpl-toggle-disabled .wpl-toggle-label {
  color: var(--wpl-text-tertiary);
  cursor: not-allowed;
}

/* ===== FULL WIDTH VARIANT ===== */
.wpl-toggle-full-width {
  width: 100%;
}

.wpl-toggle-full-width .wpl-toggle-container {
  width: 100%;
  justify-content: space-between;
}

/* ===== ACCESSIBILITY ===== */
/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-toggle-track {
    border: 2px solid var(--wpl-black);
  }

  .wpl-toggle-knob {
    border: 1px solid var(--wpl-black);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-toggle-track,
  .wpl-toggle-knob {
    transition: none;
  }
}

/* ===== DARK MODE SUPPORT ===== */
[theme~="dark"] .wpl-toggle-label {
  color: #FFFFFF;
}

[theme~="dark"] .wpl-toggle-track-off {
  background-color: #4A4A4A;
}

[theme~="dark"] .wpl-toggle-knob {
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Slightly larger touch target on mobile */
  .wpl-toggle-track {
    width: 55px;
    height: 33px;
  }

  .wpl-toggle-knob {
    width: 29px;
    height: 29px;
  }

  .wpl-toggle-track-on .wpl-toggle-knob {
    transform: translateX(22px);
  }
}


/* === Inlined from ./components/profile.css === */
/* ============================================================================
   WPL Mobile Profile View Styles
   ============================================================================
   iOS-inspired profile view with grouped sections
   Version: 2.0
   Created: 2025-11-17
   ============================================================================ */

/* Profile View Container */
.wpl-mobile-profile-view {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* Remove padding - let the parent container handle it */
  /* The WPLMainLayout contentArea already provides appropriate padding */
  box-sizing: border-box;
}

/* Profile Avatar Section */
.wpl-profile-avatar-section {
  text-align: center;
  padding: var(--wpl-space-xl) var(--wpl-space-md);
}

.wpl-profile-avatar-section vaadin-avatar {
  border: 3px solid var(--wpl-white);
  box-shadow: var(--wpl-shadow-md);
}

/* Profile Sections */
.wpl-profile-section {
  animation: fadeInUp 0.3s ease-out;
  width: 100%;
  box-sizing: border-box;
}

.wpl-profile-section-content {
  background-color: var(--wpl-white);
  border-radius: var(--wpl-radius-md);
  overflow: hidden;
  box-shadow: var(--wpl-shadow-card);
  width: 100%;
  box-sizing: border-box;
}

/* Remove extra margin - the spacer div handles this now */
/* The createBottomSpacer() method adds proper spacing */

/* Info Rows */
.wpl-profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wpl-space-md);
  min-height: var(--wpl-touch-target);
  border-bottom: 1px solid var(--wpl-silver);
  transition: background-color var(--wpl-transition-fast);
}

.wpl-profile-info-row:last-child {
  border-bottom: none;
}

/* Action Rows */
.wpl-profile-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wpl-space-md);
  min-height: var(--wpl-touch-target);
  border-bottom: 1px solid var(--wpl-silver);
  cursor: pointer;
  transition: background-color var(--wpl-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.wpl-profile-action-row:last-child {
  border-bottom: none;
}

.wpl-profile-action-row:hover {
  background-color: var(--wpl-bg-secondary);
}

.wpl-profile-action-row:active {
  background-color: var(--wpl-gray-200);
}

/* Touch feedback for mobile */
@media (hover: none) {
  .wpl-profile-action-row:active {
    background-color: var(--wpl-gray-200);
    transition: none;
  }
}

/* Danger/Logout Section */
.wpl-profile-section:last-child .wpl-profile-action-row {
  color: var(--wpl-red-primary);
}

.wpl-profile-section:last-child .wpl-profile-action-row vaadin-icon {
  color: var(--wpl-red-primary) !important;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The bottom spacer div handles spacing for mobile/tablet */
/* No need for additional padding-bottom here */

/* Bottom Spacer - Ensures logout button is visible above navigation */
.wpl-profile-bottom-spacer {
  /* Transparent spacer that creates space above bottom nav */
  background: transparent !important;
  border: none !important;
  pointer-events: none;
  user-select: none;
}

/* Responsive Design */
@media (min-width: 768px) {
  .wpl-profile-section-content {
    box-shadow: var(--wpl-shadow-md);
  }
}

@media (min-width: 1024px) {
  .wpl-mobile-profile-view {
    max-width: 800px;
  }

  .wpl-profile-info-row,
  .wpl-profile-action-row {
    padding: var(--wpl-space-lg) var(--wpl-space-xl);
  }

  /* Hide the bottom spacer on desktop since there's no bottom nav */
  .wpl-profile-bottom-spacer {
    display: none;
  }
}

/* Dark Mode Support (Phase 5) */
@media (prefers-color-scheme: dark) {
  /* Placeholder for future dark mode implementation */
}

/* Accessibility Improvements */
.wpl-profile-action-row:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .wpl-profile-info-row,
  .wpl-profile-action-row {
    border-bottom: 2px solid var(--wpl-border);
  }

  .wpl-profile-section-content {
    border: 2px solid var(--wpl-border);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .wpl-profile-section {
    animation: none;
  }

  .wpl-profile-info-row,
  .wpl-profile-action-row {
    transition: none;
  }
}


/* Week 3-4: Workflows and Forms */
/* === Inlined from ./components/workflow.css === */
/*
 * WPL Workflow Components - Styles for linear workflows
 *
 * Components:
 * - WPLWorkflow: Main workflow container
 * - WPLWorkflowProgressIndicator: Progress dots/bar
 * - WPLWorkflowStep: Individual step content
 *
 * Features:
 * - Sticky header (44px, red background)
 * - Progress indicator (dots for 3-7 steps, bar for 8+)
 * - Scrollable content area
 * - Sticky footer (64px) with navigation buttons
 * - Auto-save indicator
 * - Mobile-first design
 *
 * @version 1.0
 * @since 2025-01-07
 */

/* ============================================================================
   WORKFLOW CONTAINER
   ============================================================================ */

.wpl-workflow {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: var(--wpl-bg-secondary, #F5F5F5);
    overflow: hidden;
}

/* ============================================================================
   WORKFLOW HEADER
   ============================================================================ */

.wpl-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--wpl-header-height-mobile, 44px);
    padding: 0 var(--wpl-space-md, 16px);
    background: var(--wpl-red-primary, #E1211A);
    color: var(--wpl-white, #FFFFFF);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.wpl-workflow-title {
    margin: 0;
    font-size: var(--wpl-font-size-large, 18px);
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-white, #FFFFFF);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpl-workflow-close {
    background: transparent;
    border: none;
    color: var(--wpl-white, #FFFFFF);
    cursor: pointer;
    padding: var(--wpl-space-sm, 8px);
    min-width: var(--wpl-touch-target, 44px);
    min-height: var(--wpl-touch-target, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wpl-radius-md, 10px);
    transition: background 150ms ease;
}

.wpl-workflow-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.wpl-workflow-close:active {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================================
   AUTO-SAVE INDICATOR
   ============================================================================ */

.wpl-workflow-autosave {
    position: absolute;
    top: 56px; /* Below header */
    right: var(--wpl-space-md, 16px);
    font-size: var(--wpl-font-size-small, 14px);
    padding: var(--wpl-space-xs, 4px) var(--wpl-space-sm, 8px);
    border-radius: var(--wpl-radius-sm, 4px);
    z-index: 99;
    transition: opacity 300ms ease;
}

.wpl-workflow-autosave-saving {
    background: rgba(0, 0, 0, 0.05);
    color: var(--wpl-text-secondary, #6A6A6A);
}

.wpl-workflow-autosave-saved {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

/* ============================================================================
   PROGRESS CONTAINER
   ============================================================================ */

.wpl-workflow-progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wpl-space-md, 16px);
    background: var(--wpl-white, #FFFFFF);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 44px; /* Below header */
    z-index: 99;
}

.wpl-workflow-progress {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-md, 16px);
}

/* ============================================================================
   PROGRESS INDICATOR - DOTS STYLE (3-7 steps)
   ============================================================================ */

.wpl-workflow-progress-dots {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-sm, 8px);
}

.wpl-workflow-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 200ms ease;
}

/* Completed step - filled red */
.wpl-workflow-progress-dot-completed {
    background: var(--wpl-red-primary, #E1211A);
    border: 2px solid var(--wpl-red-primary, #E1211A);
}

/* Current step - red outline, white fill */
.wpl-workflow-progress-dot-current {
    background: var(--wpl-white, #FFFFFF);
    border: 2px solid var(--wpl-red-primary, #E1211A);
    box-shadow: 0 0 0 2px rgba(225, 33, 26, 0.2);
}

/* Future step - gray */
.wpl-workflow-progress-dot-future {
    background: #CCCCCC;
    border: 2px solid #CCCCCC;
}

/* ============================================================================
   PROGRESS INDICATOR - BAR STYLE (8+ steps)
   ============================================================================ */

.wpl-workflow-progress-bar-container {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-sm, 8px);
    width: 100%;
    max-width: 300px;
}

.wpl-workflow-progress-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.wpl-workflow-progress-bar-fill {
    height: 100%;
    background: var(--wpl-red-primary, #E1211A);
    border-radius: 3px;
    transition: width 300ms ease;
}

.wpl-workflow-progress-percentage {
    font-size: var(--wpl-font-size-small, 14px);
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-text-secondary, #6A6A6A);
    min-width: 40px;
    text-align: right;
}

/* ============================================================================
   PROGRESS TEXT
   ============================================================================ */

.wpl-workflow-progress-text {
    font-size: var(--wpl-font-size-small, 14px);
    font-weight: var(--wpl-font-weight-medium, 500);
    color: var(--wpl-text-secondary, #6A6A6A);
    white-space: nowrap;
}

/* ============================================================================
   CONTENT AREA
   ============================================================================ */

.wpl-workflow-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--wpl-space-md, 16px);
    background: var(--wpl-bg-secondary, #F5F5F5);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Ensure content doesn't overlap with footer */
.wpl-workflow-content::after {
    content: '';
    display: block;
    height: var(--wpl-space-md, 16px);
}

/* ============================================================================
   FOOTER - NAVIGATION BUTTONS
   ============================================================================ */

.wpl-workflow-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpl-space-md, 16px);
    padding: var(--wpl-space-md, 16px);
    background: var(--wpl-white, #FFFFFF);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    bottom: 0;
    z-index: 100;
    min-height: 64px;
}

.wpl-workflow-back,
.wpl-workflow-next {
    flex: 1;
    min-width: 120px;
}

/* Disabled state for Next button */
.wpl-workflow-next:disabled {
    background: var(--wpl-bg-grouped, #EBEBEB) !important;
    color: var(--wpl-text-tertiary, #8A8A8A) !important;
    cursor: not-allowed;
}

/* ============================================================================
   DESKTOP RESPONSIVE
   ============================================================================ */

@media (min-width: 768px) {
    .wpl-workflow {
        max-width: 800px;
        margin: 0 auto;
        border-radius: var(--wpl-radius-lg, 12px);
        height: calc(100vh - 40px);
        margin-top: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .wpl-workflow-header {
        height: var(--wpl-header-height-desktop, 64px);
        border-radius: var(--wpl-radius-lg, 12px) var(--wpl-radius-lg, 12px) 0 0;
    }

    .wpl-workflow-title {
        font-size: var(--wpl-font-size-xlarge, 20px);
    }

    .wpl-workflow-progress-container {
        padding: var(--wpl-space-lg, 24px);
    }

    .wpl-workflow-content {
        padding: var(--wpl-space-lg, 24px);
    }

    .wpl-workflow-footer {
        border-radius: 0 0 var(--wpl-radius-lg, 12px) var(--wpl-radius-lg, 12px);
    }

    /* Larger progress dots on desktop */
    .wpl-workflow-progress-dot {
        width: 12px;
        height: 12px;
    }

    .wpl-workflow-progress-bar-container {
        max-width: 400px;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus states for keyboard navigation */
.wpl-workflow-close:focus-visible {
    outline: 2px solid var(--wpl-white, #FFFFFF);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .wpl-workflow-progress-bar-fill,
    .wpl-workflow-progress-dot,
    .wpl-workflow-autosave {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpl-workflow-progress-dot-current {
        border-width: 3px;
    }

    .wpl-workflow-footer {
        border-top-width: 2px;
    }
}


/* === Inlined from ./components/forms.css === */
/*
 * WPL Form Components - Styles for single-scroll forms
 *
 * Components:
 * - WPLForm: Main form container
 * - WPLFormField: Field wrapper with label, validation, error display
 * - WPLFormSection: Grouped fields with optional header
 *
 * Features:
 * - Single-column layout (100% width)
 * - Labels above inputs (mobile pattern)
 * - Required field indicators (red asterisk)
 * - Error messages (orange with icon)
 * - Helper text
 * - iOS TableView-style sections
 * - Sticky footer with actions
 * - Auto-save indicator
 * - Mobile-first design
 *
 * @version 1.0
 * @since 2025-01-07
 */

/* ============================================================================
   FORM CONTAINER
   ============================================================================ */

.wpl-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: var(--wpl-bg-grouped, #F2F2F7);
}

/* ============================================================================
   FORM TITLE
   ============================================================================ */

.wpl-form-title {
    margin: 0;
    padding: var(--wpl-space-md, 16px);
    font-size: var(--wpl-font-size-xlarge, 20px);
    font-weight: var(--wpl-font-weight-bold, 700);
    color: var(--wpl-text-primary, #000000);
    background: var(--wpl-white, #FFFFFF);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================================================
   AUTO-SAVE INDICATOR
   ============================================================================ */

.wpl-form-autosave {
    position: fixed;
    top: 16px;
    right: var(--wpl-space-md, 16px);
    font-size: var(--wpl-font-size-small, 14px);
    padding: var(--wpl-space-xs, 4px) var(--wpl-space-sm, 8px);
    border-radius: var(--wpl-radius-sm, 4px);
    z-index: 999;
    transition: opacity 300ms ease;
}

.wpl-form-autosave-saving {
    background: rgba(0, 0, 0, 0.05);
    color: var(--wpl-text-secondary, #6A6A6A);
}

.wpl-form-autosave-saved {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

/* ============================================================================
   FORM CONTENT
   ============================================================================ */

.wpl-form-content {
    flex: 1;
    padding: var(--wpl-space-md, 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure content doesn't overlap with footer */
.wpl-form-content::after {
    content: '';
    display: block;
    height: var(--wpl-space-md, 16px);
}

/* ============================================================================
   FORM FIELD
   ============================================================================ */

.wpl-form-field {
    margin-bottom: var(--wpl-space-md, 16px);
    display: flex;
    flex-direction: column;
}

/* Label container */
.wpl-form-field-label-container {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--wpl-space-xs, 4px);
}

/* Label */
.wpl-form-field-label {
    font-size: 13px;
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Required indicator (red asterisk) */
.wpl-form-field-required {
    color: var(--wpl-red-primary, #E1211A);
    font-size: 13px;
    font-weight: var(--wpl-font-weight-bold, 700);
    margin-left: 2px;
}

/* Helper text */
.wpl-form-field-helper {
    font-size: var(--wpl-font-size-tiny, 12px);
    color: #999999;
    margin-top: 2px;
    margin-bottom: var(--wpl-space-xs, 4px);
    line-height: var(--wpl-line-height-normal, 1.5);
}

/* Error message */
.wpl-form-field-error {
    font-size: var(--wpl-font-size-small, 14px);
    color: var(--wpl-error, #F57C00);
    margin-top: var(--wpl-space-xs, 4px);
    line-height: var(--wpl-line-height-normal, 1.5);
    display: flex;
    align-items: center;
    gap: var(--wpl-space-xs, 4px);
}

/* Field validation states */
.wpl-form-field-valid {
    /* Could add green border or checkmark icon if desired */
}

.wpl-form-field-invalid .wpl-form-field-label {
    color: var(--wpl-error, #F57C00);
}

/* Make input fields inside form fields full width */
.wpl-form-field > vaadin-text-field,
.wpl-form-field > vaadin-email-field,
.wpl-form-field > vaadin-number-field,
.wpl-form-field > vaadin-password-field,
.wpl-form-field > vaadin-text-area,
.wpl-form-field > .wpl-text-field,
.wpl-form-field > .wpl-email-field,
.wpl-form-field > .wpl-number-field {
    width: 100%;
}

/* ============================================================================
   FORM SECTION
   ============================================================================ */

.wpl-form-section {
    margin-bottom: var(--wpl-space-lg, 24px);
}

/* Section header */
.wpl-form-section-header {
    margin: 0 0 var(--wpl-space-sm, 8px) 0;
    padding: 0 var(--wpl-space-sm, 8px);
    font-size: 13px;
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Section fields container - iOS TableView style */
.wpl-form-section-fields {
    background: var(--wpl-white, #FFFFFF);
    border-radius: var(--wpl-radius-md, 10px);
    padding: var(--wpl-space-md, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Collapsible section styling */
.wpl-form-section-collapsible .wpl-form-section-header {
    cursor: pointer;
    user-select: none;
    padding: var(--wpl-space-sm, 8px);
    border-radius: var(--wpl-radius-sm, 4px);
    transition: background 150ms ease;
}

.wpl-form-section-collapsible .wpl-form-section-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

.wpl-form-section-collapsible .wpl-form-section-header::after {
    content: '▼';
    float: right;
    font-size: 10px;
    transition: transform 200ms ease;
}

.wpl-form-section-collapsed .wpl-form-section-header::after {
    transform: rotate(-90deg);
}

/* Remove bottom margin from last field in section */
.wpl-form-section-fields > .wpl-form-field:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   FORM FOOTER - ACTION BUTTONS
   ============================================================================ */

.wpl-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wpl-space-md, 16px);
    padding: var(--wpl-space-md, 16px);
    background: var(--wpl-white, #FFFFFF);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* Make buttons in footer responsive */
.wpl-form-footer > button {
    flex: 1;
    min-width: 100px;
}

/* On mobile, stack buttons vertically if more than 2 */
@media (max-width: 480px) {
    .wpl-form-footer {
        flex-direction: column;
    }

    .wpl-form-footer > button {
        width: 100%;
    }
}

/* ============================================================================
   DESKTOP RESPONSIVE
   ============================================================================ */

@media (min-width: 768px) {
    .wpl-form {
        max-width: 800px;
        margin: 0 auto;
        min-height: auto;
    }

    .wpl-form-title {
        padding: var(--wpl-space-lg, 24px);
        font-size: var(--wpl-font-size-xxlarge, 24px);
    }

    .wpl-form-content {
        padding: var(--wpl-space-lg, 24px);
    }

    .wpl-form-footer {
        padding: var(--wpl-space-lg, 24px);
        justify-content: space-between;
    }

    .wpl-form-footer > button {
        flex: 0 0 auto;
        min-width: 140px;
    }

    /* Two-column layout for smaller fields on desktop (optional) */
    .wpl-form-content.wpl-form-two-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--wpl-space-md, 16px);
    }

    .wpl-form-content.wpl-form-two-column .wpl-form-section {
        grid-column: 1 / -1; /* Sections span full width */
    }
}

/* ============================================================================
   FIELD-SPECIFIC OVERRIDES
   ============================================================================ */

/* Ensure WPL components inside form fields are properly styled */
.wpl-form-field .wpl-button {
    margin-top: var(--wpl-space-xs, 4px);
}

/* Text areas should have more height */
.wpl-form-field vaadin-text-area {
    min-height: 120px;
}

/* Checkboxes and toggles in forms */
.wpl-form-field .wpl-toggle-switch {
    margin-top: var(--wpl-space-sm, 8px);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus states */
.wpl-form-section-collapsible .wpl-form-section-header:focus-visible {
    outline: 2px solid var(--wpl-red-primary, #E1211A);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .wpl-form-section-header::after,
    .wpl-form-autosave {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpl-form-field-error {
        font-weight: var(--wpl-font-weight-semibold, 600);
    }

    .wpl-form-section-fields {
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
}

/* ============================================================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* Uncomment when dark mode is implemented */
    /*
    .wpl-form {
        background: #1C1C1E;
    }

    .wpl-form-title {
        background: #2C2C2E;
        color: #FFFFFF;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .wpl-form-section-fields {
        background: #2C2C2E;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .wpl-form-field-label,
    .wpl-form-section-header {
        color: #A0A0A0;
    }

    .wpl-form-footer {
        background: #2C2C2E;
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    */
}


/* === Inlined from ./components/label-field.css === */
/*
 * WPL Label Field Component - Read-only display for labeled data values
 *
 * Used in WPL cards to display read-only data with a label.
 * iOS-inspired styling with consistent padding and touch-friendly spacing.
 *
 * Features:
 * - Label above value (mobile-first pattern)
 * - Multiple size variants (small, normal, large, extra)
 * - Emphasized and secondary value styles
 * - Responsive design
 * - Accessible styling
 *
 * @version 1.0
 * @since 2025-12-23
 */

/* ============================================================================
   BASE STYLES
   ============================================================================ */

.wpl-label-field {
    display: flex;
    flex-direction: column;
    gap: var(--wpl-space-xs, 4px);
    padding: var(--wpl-space-sm, 8px) 0;
}

/* Label styling - uppercase, muted, smaller font */
.wpl-label-field-label {
    font-size: 13px;
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-text-secondary, #6A6A6A);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: var(--wpl-line-height-tight, 1.2);
}

/* Value styling - primary text, readable */
.wpl-label-field-value {
    font-size: var(--wpl-font-size-body, 16px);
    font-weight: var(--wpl-font-weight-regular, 400);
    color: var(--wpl-text-primary, #000000);
    line-height: var(--wpl-line-height-normal, 1.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Empty value placeholder */
.wpl-label-field-value:empty::before {
    content: "-";
    color: var(--wpl-text-tertiary, #8A8A8A);
}

/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */

/* Small size */
.wpl-label-field-small {
    padding: var(--wpl-space-xs, 4px) 0;
}

.wpl-label-field-small .wpl-label-field-label {
    font-size: 11px;
}

.wpl-label-field-small .wpl-label-field-value {
    font-size: var(--wpl-font-size-small, 14px);
}

/* Normal size (default) */
.wpl-label-field-normal {
    /* Uses base styles */
}

/* Large size */
.wpl-label-field-large {
    padding: var(--wpl-space-md, 16px) 0;
}

.wpl-label-field-large .wpl-label-field-label {
    font-size: 14px;
}

.wpl-label-field-large .wpl-label-field-value {
    font-size: var(--wpl-font-size-large, 18px);
}

/* Extra size - full width, multi-line capable */
.wpl-label-field-extra {
    width: 100%;
    padding: var(--wpl-space-md, 16px) 0;
}

.wpl-label-field-extra .wpl-label-field-label {
    font-size: 14px;
}

.wpl-label-field-extra .wpl-label-field-value {
    font-size: var(--wpl-font-size-body, 16px);
    white-space: pre-wrap;
}

/* ============================================================================
   VALUE MODIFIERS
   ============================================================================ */

/* Emphasized value - bold */
.wpl-label-field-value-emphasized {
    font-weight: var(--wpl-font-weight-semibold, 600);
}

/* Secondary value - muted color */
.wpl-label-field-value-secondary {
    color: var(--wpl-text-secondary, #6A6A6A);
}

/* ============================================================================
   CONTEXT STYLES
   ============================================================================ */

/*
 * NOTE: Context-specific styles removed for consistent plain text appearance.
 *
 * The WPLLabelField component is designed to display read-only data as plain text
 * with a label above the value. It should look the same in ALL contexts:
 * - Overview cards
 * - Form cards (runtime cards)
 * - Form sections
 *
 * If you need card-like styling (background, borders, shadows), use the
 * .wpl-info-card wrapper class instead of relying on context-specific CSS
 * for WPLLabelField.
 *
 * Previously this section contained context-specific overrides that caused
 * inconsistent styling between overview cards and form cards. Those rules
 * have been removed to ensure WPLLabelField always renders as plain text.
 */

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (min-width: 768px) {
    .wpl-label-field {
        padding: var(--wpl-space-md, 16px) 0;
    }

    .wpl-label-field-label {
        font-size: 14px;
    }

    .wpl-label-field-value {
        font-size: var(--wpl-font-size-large, 18px);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .wpl-label-field-label {
        color: var(--wpl-text-primary, #000000);
    }

    .wpl-label-field-value-secondary {
        color: var(--wpl-text-primary, #000000);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpl-label-field {
        transition: none;
    }
}

/* ============================================================================
   DARK MODE (Future Enhancement)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* Uncomment when dark mode is implemented */
    /*
    .wpl-label-field-label {
        color: #A0A0A0;
    }

    .wpl-label-field-value {
        color: #FFFFFF;
    }

    .wpl-label-field-value-secondary {
        color: #A0A0A0;
    }
    */
}



/* Week 5-6: Tables and Dashboard */
/* === Inlined from ./components/datatable.css === */
/*
 * WPL Data Table Styles
 * Mobile-optimized card-list table with detail view modal
 * Version: 2.0
 * Date: 2025-11-07
 */

/* ==========================================================================
   Base Table Container
   ========================================================================== */

.wpl-datatable {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wpl-space-md);
}

/* Header */
.wpl-datatable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--wpl-space-md);
}

.wpl-datatable-title {
    margin: 0;
    font-size: var(--wpl-font-size-h3);
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    font-family: var(--wpl-font-family);
}

/* Content area */
.wpl-datatable-content {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Card-List Rows
   ========================================================================== */

.wpl-datatable-row {
    background-color: var(--wpl-white);
    padding: 12px 16px;
    border-bottom: 1px solid var(--wpl-border-light);
    cursor: pointer;
    transition: background-color var(--wpl-transition-fast);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
    justify-content: center;
}

.wpl-datatable-row:first-child {
    border-top-left-radius: var(--wpl-radius-md);
    border-top-right-radius: var(--wpl-radius-md);
}

.wpl-datatable-row:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--wpl-radius-md);
    border-bottom-right-radius: var(--wpl-radius-md);
}

/* Hover/Active states */
.wpl-datatable-row:hover {
    background-color: var(--wpl-gray-50);
}

.wpl-datatable-row:active {
    transform: scale(0.98);
    background-color: var(--wpl-gray-100);
}

.wpl-datatable-row-selected {
    background-color: var(--wpl-gray-100);
    border-left: 3px solid var(--wpl-red);
}

/* Row structure: Top, Middle, Bottom */
.wpl-datatable-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.wpl-datatable-row-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wpl-datatable-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Containers */
.wpl-datatable-row-primary-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.wpl-datatable-row-badge-container {
    display: flex;
    align-items: flex-start;
}

.wpl-datatable-row-secondary-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.wpl-datatable-row-metadata-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Text Styles by Priority
   ========================================================================== */

/* Priority 1: Primary text */
.wpl-datatable-row-primary {
    font-size: 17px;
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    font-family: var(--wpl-font-family);
    line-height: 22px;
}

/* Priority 2: Secondary text */
.wpl-datatable-row-secondary {
    font-size: 15px;
    font-weight: var(--wpl-font-weight-regular);
    color: var(--wpl-text-secondary);
    font-family: var(--wpl-font-family);
    line-height: 20px;
}

/* Priority 3: Tertiary text (metadata) */
.wpl-datatable-row-tertiary {
    font-size: 13px;
    font-weight: var(--wpl-font-weight-regular);
    color: var(--wpl-text-tertiary);
    font-family: var(--wpl-font-family);
    line-height: 18px;
}

/* Bullet separator */
.wpl-datatable-row-bullet {
    color: var(--wpl-text-tertiary);
    font-size: 13px;
    line-height: 18px;
}

/* Chevron indicator */
.wpl-datatable-row-chevron {
    color: var(--wpl-text-tertiary);
    font-size: 16px;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.wpl-datatable-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wpl-space-3xl) var(--wpl-space-lg);
    text-align: center;
    background-color: var(--wpl-white);
    border-radius: var(--wpl-radius-md);
    min-height: 300px;
}

.wpl-datatable-empty-icon {
    font-size: 64px;
    margin-bottom: var(--wpl-space-md);
    opacity: 0.3;
}

.wpl-datatable-empty-message {
    font-size: var(--wpl-font-size-h3);
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    margin-bottom: var(--wpl-space-xs);
}

.wpl-datatable-empty-hint {
    font-size: var(--wpl-font-size-body);
    color: var(--wpl-text-secondary);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.wpl-datatable-loading {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wpl-datatable-skeleton {
    background: linear-gradient(
        90deg,
        var(--wpl-gray-100) 0%,
        var(--wpl-gray-200) 50%,
        var(--wpl-gray-100) 100%
    );
    background-size: 200% 100%;
    animation: wpl-skeleton-loading 1.5s ease-in-out infinite;
    height: 80px;
    border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-datatable-skeleton:first-child {
    border-top-left-radius: var(--wpl-radius-md);
    border-top-right-radius: var(--wpl-radius-md);
}

.wpl-datatable-skeleton:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--wpl-radius-md);
    border-bottom-right-radius: var(--wpl-radius-md);
}

@keyframes wpl-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Detail View Modal
   ========================================================================== */

.wpl-datatable-detailview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Overlay (backdrop) */
.wpl-datatable-detailview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    animation: wpl-detailview-fade-in 0.2s ease-out;
}

/* Modal */
.wpl-datatable-detailview-modal {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    background-color: var(--wpl-white);
    border-radius: var(--wpl-radius-lg) var(--wpl-radius-lg) 0 0;
    box-shadow: var(--wpl-shadow-lg);
    display: flex;
    flex-direction: column;
    animation: wpl-detailview-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.wpl-datatable-detailview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--wpl-border-light);
    background-color: var(--wpl-white);
    border-top: 3px solid var(--wpl-red);
    border-radius: var(--wpl-radius-lg) var(--wpl-radius-lg) 0 0;
    min-height: 56px;
}

.wpl-datatable-detailview-back {
    background: none;
    border: none;
    color: var(--wpl-red);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.wpl-datatable-detailview-back:hover {
    background-color: var(--wpl-gray-50);
    border-radius: var(--wpl-radius-sm);
}

.wpl-datatable-detailview-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    text-align: center;
}

.wpl-datatable-detailview-menu {
    background: none;
    border: none;
    color: var(--wpl-text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.wpl-datatable-detailview-menu:hover {
    background-color: var(--wpl-gray-50);
    border-radius: var(--wpl-radius-sm);
}

/* Content area */
.wpl-datatable-detailview-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--wpl-space-md);
    background-color: var(--wpl-gray-50);
}

/* Footer (actions) */
.wpl-datatable-detailview-footer {
    padding: var(--wpl-space-md);
    background-color: var(--wpl-white);
    border-top: 1px solid var(--wpl-border-light);
}

.wpl-datatable-detailview-actions {
    display: flex;
    gap: var(--wpl-space-sm);
}

.wpl-datatable-detailview-action-btn {
    flex: 1;
    min-height: 44px;
    border-radius: var(--wpl-radius-md);
    font-size: var(--wpl-font-size-body);
    font-weight: var(--wpl-font-weight-semibold);
    font-family: var(--wpl-font-family);
    border: 1px solid var(--wpl-border);
    background-color: var(--wpl-white);
    color: var(--wpl-text-primary);
    cursor: pointer;
    transition: all var(--wpl-transition-fast);
}

.wpl-datatable-detailview-action-btn:hover {
    background-color: var(--wpl-gray-50);
    transform: translateY(-1px);
}

.wpl-datatable-detailview-action-btn:active {
    transform: translateY(0);
}

.wpl-datatable-detailview-action-primary {
    background-color: var(--wpl-red);
    border-color: var(--wpl-red);
    color: var(--wpl-white);
}

.wpl-datatable-detailview-action-primary:hover {
    background-color: var(--wpl-red-dark);
    border-color: var(--wpl-red-dark);
}

.wpl-datatable-detailview-action-danger {
    background-color: var(--wpl-white);
    border-color: #DC3545;
    color: #DC3545;
}

.wpl-datatable-detailview-action-danger:hover {
    background-color: #DC3545;
    color: var(--wpl-white);
}

/* Animations */
@keyframes wpl-detailview-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wpl-detailview-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Desktop Adjustments (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .wpl-datatable-detailview {
        align-items: center;
    }

    .wpl-datatable-detailview-modal {
        max-width: 600px;
        max-height: 80vh;
        border-radius: var(--wpl-radius-lg);
    }

    .wpl-datatable-detailview-header {
        border-radius: var(--wpl-radius-lg) var(--wpl-radius-lg) 0 0;
    }

    @keyframes wpl-detailview-slide-up {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.wpl-datatable-row:focus-visible {
    outline: 2px solid var(--wpl-red);
    outline-offset: -2px;
}

.wpl-datatable-detailview-back:focus-visible,
.wpl-datatable-detailview-menu:focus-visible,
.wpl-datatable-detailview-action-btn:focus-visible {
    outline: 2px solid var(--wpl-red);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .wpl-datatable-row {
        border: 1px solid var(--wpl-border);
    }

    .wpl-datatable-row-selected {
        border-left-width: 4px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpl-datatable-row,
    .wpl-datatable-detailview-overlay,
    .wpl-datatable-detailview-modal,
    .wpl-datatable-skeleton {
        animation: none;
        transition: none;
    }
}


/* === Inlined from ./components/dashboard.css === */
/*
 * WPL Dashboard Styles
 * Mobile-optimized dashboard with metric cards and charts
 * Version: 2.0
 * Date: 2025-11-07
 */

/* ==========================================================================
   Dashboard Container
   ========================================================================== */

.wpl-dashboard {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.wpl-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(var(--wpl-dashboard-columns-mobile, 2), 1fr);
    gap: var(--wpl-space-md);
    width: 100%;
}

/* Widget wrapper */
.wpl-dashboard-widget {
    grid-column: span 1;
}

/* Full-width widget (charts) */
.wpl-dashboard-widget-full {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Metric Card
   ========================================================================== */

.wpl-metric-card {
    background-color: var(--wpl-white);
    border-radius: var(--wpl-radius-md);
    padding: var(--wpl-space-lg);
    box-shadow: var(--wpl-shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--wpl-space-xs);
    min-height: 140px;
    justify-content: center;
    transition: all var(--wpl-transition-fast);
    aspect-ratio: 1 / 1; /* Square on mobile */
}

/* Primary metric (red top border accent) */
.wpl-metric-card-primary {
    border-top: 3px solid var(--wpl-red);
}

/* Clickable metric card */
.wpl-metric-card-clickable {
    cursor: pointer;
}

.wpl-metric-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--wpl-shadow-md);
}

.wpl-metric-card-clickable:active {
    transform: translateY(0);
    box-shadow: var(--wpl-shadow-card);
}

/* Value (large number) */
.wpl-metric-card-value {
    font-size: 48px;
    font-weight: var(--wpl-font-weight-bold);
    color: var(--wpl-text-primary);
    font-family: var(--wpl-font-family);
    line-height: 1;
    margin-bottom: var(--wpl-space-xs);
}

/* Trend indicator */
.wpl-metric-card-trend {
    font-size: 16px;
    font-weight: var(--wpl-font-weight-semibold);
    font-family: var(--wpl-font-family);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wpl-metric-card-trend-up {
    color: #10B981; /* Green */
}

.wpl-metric-card-trend-down {
    color: #EF4444; /* Red */
}

.wpl-metric-card-trend-neutral {
    color: var(--wpl-text-tertiary);
}

/* Label */
.wpl-metric-card-label {
    font-size: 14px;
    font-weight: var(--wpl-font-weight-regular);
    color: var(--wpl-text-secondary);
    font-family: var(--wpl-font-family);
    line-height: 1.2;
    margin-top: auto; /* Push to bottom */
}

/* Description (optional subtitle) */
.wpl-metric-card-description {
    font-size: 12px;
    font-weight: var(--wpl-font-weight-regular);
    color: var(--wpl-text-tertiary);
    font-family: var(--wpl-font-family);
}

/* Loading state */
.wpl-metric-card-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wpl-metric-card-loading .wpl-metric-card-value {
    color: var(--wpl-text-tertiary);
}

/* Update animation */
.wpl-metric-card-updating .wpl-metric-card-value {
    animation: wpl-metric-pulse 0.3s ease-in-out;
}

@keyframes wpl-metric-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   Chart Card
   ========================================================================== */

.wpl-chart-card {
    background-color: var(--wpl-white);
    border-radius: var(--wpl-radius-md);
    box-shadow: var(--wpl-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.wpl-chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wpl-space-lg);
    border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-chart-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--wpl-font-weight-semibold);
    color: var(--wpl-text-primary);
    font-family: var(--wpl-font-family);
}

.wpl-chart-card-actions {
    display: flex;
    gap: var(--wpl-space-sm);
    align-items: center;
}

/* Description */
.wpl-chart-card-description {
    padding: 0 var(--wpl-space-lg);
    padding-bottom: var(--wpl-space-sm);
    font-size: 14px;
    color: var(--wpl-text-secondary);
    font-family: var(--wpl-font-family);
}

/* Content area */
.wpl-chart-card-content {
    padding: var(--wpl-space-lg);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure ApexCharts renders correctly within the card */
.wpl-chart-card-content apex-charts-wrapper,
.wpl-chart-card-content .apexcharts-canvas {
    width: 100% !important;
    min-height: 280px;
}

/* Force ApexCharts container to have proper dimensions */
.wpl-chart-card-content apex-charts-wrapper {
    display: block;
    height: 100%;
    min-height: 280px;
}

.wpl-chart-card-content > * {
    width: 100%;
    flex-shrink: 0;
}

/* Loading state */
.wpl-chart-card-loading {
    padding: var(--wpl-space-lg);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpl-chart-card-skeleton {
    width: 100%;
    height: 260px;
    background: linear-gradient(
        90deg,
        var(--wpl-gray-100) 0%,
        var(--wpl-gray-200) 50%,
        var(--wpl-gray-100) 100%
    );
    background-size: 200% 100%;
    animation: wpl-skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--wpl-radius-sm);
}

@keyframes wpl-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Badge Styles (for status indicators in tables and metrics)
   ========================================================================== */

.wpl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--wpl-font-weight-semibold);
    font-family: var(--wpl-font-family);
    line-height: 1;
    white-space: nowrap;
}

/* Badge variants */
.wpl-badge-primary {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--wpl-red);
}

.wpl-badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.wpl-badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.wpl-badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.wpl-badge-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.wpl-badge-secondary {
    background-color: var(--wpl-gray-100);
    color: var(--wpl-text-secondary);
}

/* ==========================================================================
   Desktop Adjustments (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .wpl-dashboard-grid {
        grid-template-columns: repeat(var(--wpl-dashboard-columns-desktop, 4), 1fr);
        gap: var(--wpl-space-lg);
    }

    .wpl-metric-card {
        aspect-ratio: auto; /* Remove square constraint on desktop */
        min-height: 160px;
    }

    .wpl-metric-card-value {
        font-size: 56px;
    }

    .wpl-chart-card-content {
        min-height: 350px;
    }

    .wpl-chart-card-skeleton {
        height: 310px;
    }
}

/* ==========================================================================
   Tablet Adjustments (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .wpl-dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.wpl-metric-card-clickable:focus-visible {
    outline: 2px solid var(--wpl-red);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .wpl-metric-card,
    .wpl-chart-card {
        border: 1px solid var(--wpl-border);
    }

    .wpl-metric-card-primary {
        border-top-width: 4px;
    }

    .wpl-badge {
        border: 1px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpl-metric-card,
    .wpl-metric-card-clickable,
    .wpl-metric-card-updating .wpl-metric-card-value,
    .wpl-chart-card-skeleton {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wpl-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .wpl-metric-card,
    .wpl-chart-card {
        box-shadow: none;
        border: 1px solid var(--wpl-border);
        break-inside: avoid;
    }

    .wpl-metric-card-clickable:hover {
        transform: none;
        box-shadow: none;
    }
}


/* === Inlined from ./components/dashboards.css === */
/*
 * WPL Dashboards Styles
 * Comprehensive styling for dashboard list and detail views
 * Mobile-first, iOS-inspired design with smooth animations
 * Version: 1.0
 * Date: 2025-12-20
 */

/* ==========================================================================
   Dashboard List View
   ========================================================================== */

/* View container */
.smb-dashboards-view {
    width: 100%;
    box-sizing: border-box;
}

/* Override parent container padding when dashboards view is active (mobile) */
@media (max-width: 767px) {
    .wpl-main-layout__content:has(.smb-dashboards-view) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .smb-dashboards-view .wpl-layout-content {
        padding: 0 16px !important;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Dashboard Cards Grid
   ========================================================================== */

/* Mobile grid - 2 columns */
.smb-dashboards-view .apps-grid-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Desktop/Tablet styles */
@media (min-width: 768px) {
    .smb-dashboards-view .apps-grid-desktop {
        display: grid;
        gap: 20px;
    }
}

/* Tablet - 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .smb-dashboards-view .apps-grid-desktop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop - 4 columns */
@media (min-width: 1024px) {
    .smb-dashboards-view .apps-grid-desktop {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Large Desktop - 5 columns */
@media (min-width: 1440px) {
    .smb-dashboards-view .apps-grid-desktop {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Dashboard Card Styling
   ========================================================================== */

.wpl-dashboard-card {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--wpl-radius-md, 12px);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    isolation: isolate;
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: #f5f5f5;
}

/* Desktop card height */
@media (min-width: 768px) {
    .wpl-dashboard-card {
        height: 180px;
    }
}

/* Loading shimmer effect for cards with images */
@keyframes dashboardShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.wpl-dashboard-card:not([style*="background-image"]):not([style*="background: linear"]) {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: dashboardShimmer 1.5s ease-in-out infinite;
}

/* Lazy loading image placeholder */
.wpl-dashboard-card img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.wpl-dashboard-card img[loading="lazy"].loaded {
    opacity: 1;
}

/* Icon overlay */
.wpl-dashboard-card__icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Gradient scrim for text readability */
.wpl-dashboard-card__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.6) 85%,
        rgba(0, 0, 0, 0.85) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* Content container */
.wpl-dashboard-card__content {
    position: relative;
    z-index: 2;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .wpl-dashboard-card__content {
        padding: 16px;
        gap: 6px;
    }
}

/* Title */
.wpl-dashboard-card__title {
    font-weight: 600;
    font-size: 15px;
    color: white;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 0;
    word-break: break-word;
    letter-spacing: -0.01em;
    font-family: var(--wpl-font-family);
}

@media (min-width: 768px) {
    .wpl-dashboard-card__title {
        font-size: 16px;
    }
}

/* Refresh indicator */
.wpl-dashboard-card__refresh {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Dashboard Type Badge (Chart Icon Overlay)
   ========================================================================== */

/* Type badge - distinguishes dashboards from wipps */
.wpl-dashboard-card__type-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

@media (min-width: 768px) {
    .wpl-dashboard-card__type-badge {
        bottom: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
    }
}

.wpl-dashboard-card__type-badge vaadin-icon,
.wpl-dashboard-card__type-badge iron-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .wpl-dashboard-card__type-badge vaadin-icon,
    .wpl-dashboard-card__type-badge iron-icon {
        width: 18px;
        height: 18px;
    }
}

/* Hover effect for badge */
@media (hover: hover) and (pointer: fine) {
    .wpl-dashboard-card:hover .wpl-dashboard-card__type-badge {
        transform: scale(1.1);
        background: rgba(0, 0, 0, 0.65);
    }
}

/* Active state for badge */
.wpl-dashboard-card:active .wpl-dashboard-card__type-badge {
    transform: scale(0.95);
}

/* ==========================================================================
   Dashboard Card Interactions
   ========================================================================== */

/* Hover state (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .wpl-dashboard-card:hover {
        transform: scale(1.02) translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .wpl-dashboard-card:hover .wpl-dashboard-card__scrim {
        opacity: 0.95;
    }
}

/* Active/Pressed state */
.wpl-dashboard-card:active {
    transform: scale(0.95);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus state for accessibility */
.wpl-dashboard-card:focus-visible {
    outline: 3px solid var(--wpl-red-primary, #E1211A);
    outline-offset: 2px;
}

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
    .wpl-dashboard-card:active {
        transform: scale(0.97);
    }
}

/* ==========================================================================
   Dashboard Card Animations
   ========================================================================== */

/* Entrance animation */
@keyframes dashboardCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wpl-dashboard-card {
    animation: dashboardCardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Stagger animation for cards */
.wpl-dashboard-card:nth-child(1) { animation-delay: 0.05s; }
.wpl-dashboard-card:nth-child(2) { animation-delay: 0.1s; }
.wpl-dashboard-card:nth-child(3) { animation-delay: 0.15s; }
.wpl-dashboard-card:nth-child(4) { animation-delay: 0.2s; }
.wpl-dashboard-card:nth-child(5) { animation-delay: 0.25s; }
.wpl-dashboard-card:nth-child(6) { animation-delay: 0.3s; }
.wpl-dashboard-card:nth-child(7) { animation-delay: 0.35s; }
.wpl-dashboard-card:nth-child(8) { animation-delay: 0.4s; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wpl-dashboard-card {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Dashboard Detail View
   ========================================================================== */

.smb-dashboard-detail-view {
    width: 100%;
    box-sizing: border-box;
}

/*
 * Chart card margins in dashboard detail view
 *
 * Problem: Charts appear edge-to-edge with minimal margins on mobile.
 * The WPLTabsLayout sets fullWidthMode(true) for dashboard views, which
 * adds the class "wpl-main-layout__content--full-width" that removes
 * ALL padding from the content area (padding-left/right: 0 !important).
 *
 * Solution: Add horizontal padding to the dashboard grid container itself
 * to create breathing room from screen edges. This works because:
 * 1. The grid container is inside the zero-padded full-width layout
 * 2. Padding on the grid creates the visual margin for all child widgets
 * 3. This doesn't interfere with CSS Grid's column calculations
 *
 * Mobile: 16px left/right margins for chart cards
 * Tablet: 24px left/right margins
 * Desktop: Layout has its own padding, but we add more for charts
 */

/* Mobile: Dashboard grid needs horizontal padding since parent has none */
.smb-dashboard-detail-view .wpl-dashboard-grid {
    padding-left: var(--wpl-space-md, 16px);
    padding-right: var(--wpl-space-md, 16px);
    box-sizing: border-box;
    width: 100%;
}

/* Tablet (768px - 1023px): Slightly larger margins */
@media (min-width: 768px) and (max-width: 1023px) {
    .smb-dashboard-detail-view .wpl-dashboard-grid {
        padding-left: var(--wpl-space-lg, 24px);
        padding-right: var(--wpl-space-lg, 24px);
    }
}

/* Desktop (1024px+): Parent layout has padding, but add more for visual balance */
@media (min-width: 1024px) {
    .smb-dashboard-detail-view .wpl-dashboard-grid {
        padding-left: var(--wpl-space-md, 16px);
        padding-right: var(--wpl-space-md, 16px);
    }
}

/* Ensure chart cards fill their container properly */
.smb-dashboard-detail-view .wpl-chart-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Widget wrappers should respect box-sizing */
.smb-dashboard-detail-view .wpl-dashboard-widget,
.smb-dashboard-detail-view .wpl-dashboard-widget-full {
    box-sizing: border-box;
}

/* Also apply padding to the header container for consistency */
.smb-dashboard-detail-view .smb-dashboard-detail-view__header {
    padding-left: var(--wpl-space-md, 16px);
    padding-right: var(--wpl-space-md, 16px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .smb-dashboard-detail-view .smb-dashboard-detail-view__header {
        padding-left: var(--wpl-space-lg, 24px);
        padding-right: var(--wpl-space-lg, 24px);
    }
}

@media (min-width: 1024px) {
    .smb-dashboard-detail-view .smb-dashboard-detail-view__header {
        padding-left: var(--wpl-space-md, 16px);
        padding-right: var(--wpl-space-md, 16px);
    }
}

/* Dashboard header */
.smb-dashboard-detail-view__header {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-md, 16px);
    margin-bottom: var(--wpl-space-lg, 24px);
    flex-wrap: wrap;
}

/* Back button styling */
.smb-dashboard-detail-view__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wpl-radius-md, 10px);
    background-color: var(--wpl-gray-100, #F3F4F6);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.smb-dashboard-detail-view__back-btn:hover {
    background-color: var(--wpl-gray-200, #E5E7EB);
}

.smb-dashboard-detail-view__back-btn:active {
    transform: scale(0.95);
}

.smb-dashboard-detail-view__back-btn:focus-visible {
    outline: 2px solid var(--wpl-red-primary, #E1211A);
    outline-offset: 2px;
}

/* Dashboard title */
.smb-dashboard-detail-view__title {
    margin: 0;
    color: var(--wpl-text-primary, #000000);
    font-size: var(--wpl-font-size-h2, 28px);
    font-weight: var(--wpl-font-weight-semibold, 600);
    font-family: var(--wpl-font-family);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .smb-dashboard-detail-view__title {
        font-size: var(--wpl-font-size-h3, 24px);
    }
}

/* Refresh button */
.smb-dashboard-detail-view__refresh-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--wpl-space-xs, 4px);
    padding: var(--wpl-space-sm, 8px) var(--wpl-space-md, 16px);
    border-radius: var(--wpl-radius-md, 10px);
    background-color: transparent;
    border: 1px solid var(--wpl-border, #E5E7EB);
    color: var(--wpl-text-secondary, #6A6A6A);
    font-size: var(--wpl-font-size-small, 14px);
    font-family: var(--wpl-font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.smb-dashboard-detail-view__refresh-btn:hover {
    background-color: var(--wpl-gray-100, #F3F4F6);
    color: var(--wpl-text-primary, #000000);
}

.smb-dashboard-detail-view__refresh-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   Chart Container Styling
   ========================================================================== */

.wpl-dashboard-charts {
    display: flex;
    flex-direction: column;
    gap: var(--wpl-space-lg, 24px);
}

.wpl-chart-container {
    background-color: var(--wpl-white, #FFFFFF);
    border-radius: var(--wpl-radius-md, 10px);
    box-shadow: var(--wpl-shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.wpl-chart-container:hover {
    box-shadow: var(--wpl-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

/* Chart header */
.wpl-chart-container__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wpl-space-lg, 24px);
    padding-bottom: var(--wpl-space-md, 16px);
    border-bottom: 1px solid var(--wpl-border-light, #F3F4F6);
}

.wpl-chart-container__title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-text-primary, #000000);
    font-family: var(--wpl-font-family);
}

/* Chart content */
.wpl-chart-container__content {
    padding: var(--wpl-space-lg, 24px);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .wpl-chart-container__content {
        min-height: 350px;
    }
}

/* Chart actions */
.wpl-chart-container__actions {
    display: flex;
    gap: var(--wpl-space-sm, 8px);
    align-items: center;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.wpl-dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wpl-space-xl, 32px);
    gap: var(--wpl-space-md, 16px);
    color: var(--wpl-text-secondary, #6A6A6A);
}

/* Loading spinner */
.wpl-dashboard-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--wpl-gray-200, #E5E7EB);
    border-top-color: var(--wpl-red-primary, #E1211A);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Chart skeleton loading */
.wpl-chart-skeleton {
    width: 100%;
    height: 260px;
    background: linear-gradient(
        90deg,
        var(--wpl-gray-100, #F3F4F6) 0%,
        var(--wpl-gray-200, #E5E7EB) 50%,
        var(--wpl-gray-100, #F3F4F6) 100%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
    border-radius: var(--wpl-radius-sm, 4px);
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (min-width: 1024px) {
    .wpl-chart-skeleton {
        height: 310px;
    }
}

/* ==========================================================================
   Empty States
   ========================================================================== */

.wpl-dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wpl-space-xxl, 48px) var(--wpl-space-lg, 24px);
    text-align: center;
    color: var(--wpl-text-secondary, #6A6A6A);
}

.wpl-dashboard-empty__icon {
    width: 64px;
    height: 64px;
    color: var(--wpl-text-tertiary, #8A8A8A);
    margin-bottom: var(--wpl-space-md, 16px);
}

.wpl-dashboard-empty__title {
    font-size: var(--wpl-font-size-large, 18px);
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-text-primary, #000000);
    margin: 0 0 var(--wpl-space-sm, 8px);
}

.wpl-dashboard-empty__message {
    font-size: var(--wpl-font-size-body, 16px);
    color: var(--wpl-text-secondary, #6A6A6A);
    margin: 0;
    max-width: 300px;
    line-height: var(--wpl-line-height-normal, 1.5);
}

.wpl-dashboard-empty__hint {
    font-size: var(--wpl-font-size-small, 14px);
    color: var(--wpl-text-tertiary, #8A8A8A);
    margin-top: var(--wpl-space-sm, 8px);
}

/* ==========================================================================
   Error States
   ========================================================================== */

.wpl-dashboard-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wpl-space-xl, 32px);
    text-align: center;
    background-color: rgba(239, 68, 68, 0.05);
    border-radius: var(--wpl-radius-md, 10px);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.wpl-dashboard-error__icon {
    width: 48px;
    height: 48px;
    color: var(--wpl-error, #F57C00);
    margin-bottom: var(--wpl-space-md, 16px);
}

.wpl-dashboard-error__message {
    font-size: var(--wpl-font-size-body, 16px);
    color: var(--wpl-error, #F57C00);
    margin: 0;
}

/* ==========================================================================
   Auto-Refresh Indicator
   ========================================================================== */

.wpl-auto-refresh-indicator {
    display: flex;
    align-items: center;
    gap: var(--wpl-space-xs, 4px);
    padding: var(--wpl-space-xs, 4px) var(--wpl-space-sm, 8px);
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: var(--wpl-radius-sm, 4px);
    font-size: var(--wpl-font-size-tiny, 12px);
    color: #10B981;
    font-weight: var(--wpl-font-weight-medium, 500);
}

.wpl-auto-refresh-indicator__icon {
    width: 12px;
    height: 12px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.wpl-auto-refresh-indicator--active .wpl-auto-refresh-indicator__icon {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Chart Type Specific Styles
   ========================================================================== */

/* Pie/Donut charts - centered layout */
.wpl-chart-pie .wpl-chart-container__content,
.wpl-chart-donut .wpl-chart-container__content {
    justify-content: center;
    align-items: center;
}

/* Bar/Column charts - full width */
.wpl-chart-bar .wpl-chart-container__content,
.wpl-chart-column .wpl-chart-container__content {
    padding: var(--wpl-space-md, 16px);
}

/* Line/Area charts */
.wpl-chart-line .wpl-chart-container__content,
.wpl-chart-area .wpl-chart-container__content {
    padding: var(--wpl-space-md, 16px);
}

/* ==========================================================================
   Responsive Chart Grid (for multiple charts)
   ========================================================================== */

.wpl-dashboard-chart-grid {
    display: grid;
    gap: var(--wpl-space-lg, 24px);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .wpl-dashboard-chart-grid--2cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .wpl-dashboard-chart-grid--3cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full-width chart override */
.wpl-dashboard-chart-grid .wpl-chart-container--full {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .wpl-dashboard-card {
        border: 2px solid var(--wpl-black, #000000);
    }

    .wpl-dashboard-card__title {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    }

    .wpl-chart-container {
        border: 1px solid var(--wpl-border, #E5E7EB);
    }

    .wpl-dashboard-card__scrim {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.7) 70%,
            rgba(0, 0, 0, 0.95) 100%
        );
    }

    .wpl-dashboard-card__type-badge {
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
}

/* Focus visible states */
.wpl-chart-container:focus-visible,
.wpl-dashboard-card:focus-visible {
    outline: 2px solid var(--wpl-red-primary, #E1211A);
    outline-offset: 2px;
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

[theme~="dark"] .wpl-dashboard-card {
    border-color: rgba(255, 255, 255, 0.1);
}

[theme~="dark"] .wpl-dashboard-card__type-badge {
    background: rgba(255, 255, 255, 0.15);
}

[theme~="dark"] .wpl-chart-container {
    background-color: #2A2A2A;
}

[theme~="dark"] .wpl-chart-container__header {
    border-bottom-color: #4A4A4A;
}

[theme~="dark"] .wpl-chart-container__title {
    color: #FFFFFF;
}

[theme~="dark"] .smb-dashboard-detail-view__title {
    color: #FFFFFF;
}

[theme~="dark"] .smb-dashboard-detail-view__back-btn {
    background-color: #3A3A3A;
}

[theme~="dark"] .smb-dashboard-detail-view__back-btn:hover {
    background-color: #4A4A4A;
}

[theme~="dark"] .smb-dashboard-detail-view__refresh-btn {
    border-color: #4A4A4A;
    color: #CCCCCC;
}

[theme~="dark"] .smb-dashboard-detail-view__refresh-btn:hover {
    background-color: #3A3A3A;
    color: #FFFFFF;
}

[theme~="dark"] .wpl-dashboard-empty,
[theme~="dark"] .wpl-dashboard-loading {
    color: #CCCCCC;
}

[theme~="dark"] .wpl-dashboard-empty__title {
    color: #FFFFFF;
}

[theme~="dark"] .wpl-chart-skeleton {
    background: linear-gradient(
        90deg,
        #2A2A2A 0%,
        #3A3A3A 50%,
        #2A2A2A 100%
    );
    background-size: 200% 100%;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .smb-dashboards-view .apps-grid-mobile,
    .smb-dashboards-view .apps-grid-desktop {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .wpl-dashboard-card {
        box-shadow: none;
        border: 1px solid var(--wpl-border, #E5E7EB);
        break-inside: avoid;
        animation: none;
    }

    .wpl-dashboard-card:hover {
        transform: none;
        box-shadow: none;
    }

    .wpl-chart-container {
        box-shadow: none;
        border: 1px solid var(--wpl-border, #E5E7EB);
        break-inside: avoid;
    }

    .smb-dashboard-detail-view__back-btn,
    .smb-dashboard-detail-view__refresh-btn,
    .wpl-auto-refresh-indicator {
        display: none;
    }

    .wpl-dashboard-card__type-badge {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Use GPU acceleration for transforms */
.wpl-dashboard-card {
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Remove will-change after animations complete */
.wpl-dashboard-card:not(:hover) {
    will-change: auto;
}

/* Optimize chart container repaints */
.wpl-chart-container {
    contain: layout style;
}



/* Week 7-8: Desktop Enhancements */
/* === Inlined from ./components/desktop-enhancements.css === */
/*
 * WPL Desktop Enhancements
 * Additional desktop-specific improvements for 20% desktop focus
 * Version: 2.0
 * Date: 2025-11-07
 */

/* ==========================================================================
   Desktop Mouse Hover Enhancements (1024px+ with hover capability)
   ========================================================================== */

@media (min-width: 1024px) and (hover: hover) {
    /* Enhanced card hover effects */
    .wpl-card--interactive:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* Table row hover */
    .wpl-datatable-row:hover {
        background-color: var(--wpl-bg-secondary);
        cursor: pointer;
    }

    /* TableView row hover */
    .wpl-tableview-row:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Workflow step hover (when not current) */
    .wpl-workflow-step:hover:not(.wpl-workflow-step-current):not(.wpl-workflow-step-completed) {
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* Toggle switch hover */
    .wpl-toggle-switch-track:hover {
        opacity: 0.9;
    }

    /* Form section header hover (when collapsible) */
    .wpl-form-section-collapsible .wpl-form-section-header:hover {
        background: rgba(0, 0, 0, 0.03);
    }

    /* Bottom nav (sidebar) hover when not active */
    .wpl-bottom-nav__tab:hover:not(.wpl-bottom-nav__tab--active) {
        background-color: rgba(0, 0, 0, 0.03);
    }
}

/* ==========================================================================
   Desktop Touch Target Adjustments (1024px+)
   Touch targets can be smaller for mouse precision
   ========================================================================== */

@media (min-width: 1024px) {
    /* Buttons can be slightly smaller */
    .wpl-button {
        height: 40px;
        min-height: 40px;
    }

    .wpl-button-small {
        height: 32px;
        min-height: 32px;
    }

    .wpl-button-large {
        height: 48px;
        min-height: 48px;
    }

    /* Inputs can be slightly smaller - use CSS custom property instead of direct height */
    /* Direct height breaks Vaadin's internal layout calculation */
    .wpl-text-field,
    .wpl-email-field,
    .wpl-number-field {
        --vaadin-input-field-height: 40px;
    }

    /* Toggle switches can be slightly smaller */
    .wpl-toggle-switch-track {
        height: 28px;
        width: 48px;
    }

    .wpl-toggle-switch-thumb {
        width: 24px;
        height: 24px;
    }

    .wpl-toggle-switch-checked .wpl-toggle-switch-thumb {
        transform: translateX(20px);
    }

    /* Bottom nav (sidebar) items */
    .wpl-bottom-nav__tab {
        min-height: 48px;
    }
}

/* ==========================================================================
   Desktop Font Size Adjustments (1024px+)
   Optional: Slightly smaller text for desktop
   ========================================================================== */

@media (min-width: 1024px) {
    /* Body text can be 14px on desktop (down from 16px mobile) */
    :root {
        --wpl-font-size-body: 14px;
        --wpl-font-size-small: 13px;
        --wpl-font-size-tiny: 11px;
    }

    /* Keep larger sizes for headings */
    .wpl-form-title,
    .wpl-mobile-header__title,
    .wpl-chart-card-title {
        font-size: 20px;
    }

    /* Workflow progress indicator */
    .wpl-workflow-progress-text {
        font-size: 13px;
    }

    /* Form field labels */
    .wpl-form-field-label {
        font-size: 12px;
    }

    /* Table headers */
    .wpl-datatable-header-cell {
        font-size: 12px;
    }
}

/* ==========================================================================
   Two-Column Form Layout (Desktop 768px+)
   ========================================================================== */

@media (min-width: 768px) {
    /* Two-column grid for forms */
    .wpl-form--two-column .wpl-form-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--wpl-space-lg);
    }

    /* Sections span full width by default */
    .wpl-form--two-column .wpl-form-section {
        grid-column: 1 / -1;
    }

    /* Individual fields can be made full-width */
    .wpl-form-field--full-width {
        grid-column: 1 / -1;
    }

    /* Half-width fields */
    .wpl-form-field--half-width {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Keyboard Navigation Enhancements
   ========================================================================== */

/* Enhanced focus indicators for all interactive elements */
.wpl-button:focus-visible,
.wpl-text-field:focus-visible,
.wpl-email-field:focus-visible,
.wpl-number-field:focus-visible,
.wpl-tableview-row:focus-visible,
.wpl-datatable-row:focus-visible,
.wpl-card--interactive:focus-visible,
.wpl-bottom-nav__tab:focus-visible,
.wpl-workflow-step:focus-visible,
.wpl-toggle-switch:focus-visible {
    outline: 2px solid var(--wpl-red-primary);
    outline-offset: 2px;
    z-index: 1;
}

/* Remove outline for mouse/touch users */
.wpl-button:focus:not(:focus-visible),
.wpl-text-field:focus:not(:focus-visible),
.wpl-email-field:focus:not(:focus-visible),
.wpl-number-field:focus:not(:focus-visible),
.wpl-tableview-row:focus:not(:focus-visible),
.wpl-datatable-row:focus:not(:focus-visible),
.wpl-card--interactive:focus:not(:focus-visible),
.wpl-bottom-nav__tab:focus:not(:focus-visible),
.wpl-workflow-step:focus:not(:focus-visible),
.wpl-toggle-switch:focus:not(:focus-visible) {
    outline: none;
}

/* Focus within form sections */
.wpl-form-section:focus-within {
    /* Optional: highlight section when a field inside has focus */
}

/* Skip to content link (for keyboard navigation) */
.wpl-skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--wpl-red-primary);
    color: var(--wpl-white);
    padding: var(--wpl-space-md);
    text-decoration: none;
    font-weight: var(--wpl-font-weight-semibold);
    z-index: 9999;
}

.wpl-skip-to-content:focus {
    top: 0;
}

/* ==========================================================================
   Desktop Table Enhancements
   ========================================================================== */

@media (min-width: 1024px) {
    /* Add subtle row striping on desktop */
    .wpl-datatable-row:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.01);
    }

    .wpl-datatable-row:nth-child(even):hover {
        background-color: var(--wpl-bg-secondary);
    }

    /* Table header sticky on desktop */
    .wpl-datatable-header {
        position: sticky;
        top: 64px; /* Below header */
        z-index: 10;
        background-color: var(--wpl-white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Sort indicators on desktop */
    .wpl-datatable-header-cell-sortable {
        cursor: pointer;
        user-select: none;
    }

    .wpl-datatable-header-cell-sortable:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
}

/* ==========================================================================
   Desktop Dashboard Enhancements
   ========================================================================== */

@media (min-width: 1024px) {
    /* Hover effect on metric cards */
    .wpl-metric-card-clickable:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    /* Chart card actions visible on hover */
    .wpl-chart-card-actions {
        opacity: 0.7;
        transition: opacity var(--wpl-transition-fast);
    }

    .wpl-chart-card:hover .wpl-chart-card-actions {
        opacity: 1;
    }

    /* Dashboard grid max-width to prevent over-stretching */
    .wpl-dashboard-grid {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Desktop Content Area Adjustments
   ========================================================================== */

@media (min-width: 1024px) {
    /* Content area has left margin for sidebar */
    .wpl-main-layout-content {
        margin-left: 240px; /* Sidebar width */
        padding: var(--wpl-space-lg);
    }

    /* Max width for content to prevent over-stretching */
    .wpl-content-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Workflow max width on desktop */
    .wpl-workflow {
        max-width: 900px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Desktop Print Styles
   ========================================================================== */

@media print {
    /* Hide navigation elements */
    .wpl-bottom-nav,
    .wpl-mobile-header,
    .wpl-form-footer,
    .wpl-chart-card-actions {
        display: none !important;
    }

    /* Remove shadows and transforms */
    .wpl-card,
    .wpl-metric-card,
    .wpl-chart-card,
    .wpl-datatable {
        box-shadow: none !important;
        transform: none !important;
        break-inside: avoid;
    }

    /* Full width for print */
    .wpl-main-layout-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Adjust colors for print */
    .wpl-mobile-header,
    .wpl-bottom-nav {
        background-color: transparent !important;
        color: var(--wpl-black) !important;
    }

    /* Remove backgrounds from cards for ink saving */
    .wpl-card,
    .wpl-form-section-fields {
        background-color: transparent !important;
        border: 1px solid var(--wpl-border) !important;
    }
}

/* ==========================================================================
   Desktop Modal/Dialog Enhancements
   ========================================================================== */

@media (min-width: 768px) {
    /* Detail view modal sizing on desktop */
    .wpl-datatable-detail-view {
        max-width: 700px;
        max-height: 80vh;
    }

    /* Center modals on desktop */
    .wpl-modal,
    .wpl-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 600px;
        width: 90%;
    }
}

/* ==========================================================================
   Desktop Animation & Transition Refinements
   ========================================================================== */

@media (min-width: 1024px) and (hover: hover) {
    /* Smooth transitions for desktop interactions */
    .wpl-card,
    .wpl-button,
    .wpl-datatable-row,
    .wpl-tableview-row,
    .wpl-metric-card-clickable {
        transition: all var(--wpl-transition-normal);
    }

    /* Subtle scale on button press (desktop only) */
    .wpl-button:active:not([disabled]) {
        transform: scale(0.98);
    }
}

/* ==========================================================================
   Desktop Tooltip Support (Optional Future Enhancement)
   ========================================================================== */

.wpl-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--wpl-white);
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    border-radius: var(--wpl-radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--wpl-transition-fast);
}

.wpl-tooltip--visible {
    opacity: 1;
}

/* ==========================================================================
   Desktop Accessibility Enhancements
   ========================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpl-button,
    .wpl-card,
    .wpl-form-section-fields,
    .wpl-datatable-row {
        border: 2px solid currentColor;
    }

    .wpl-bottom-nav__tab--active::before {
        height: 4px; /* Thicker active indicator */
    }
}

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

/* ==========================================================================
   Desktop Screen Reader Support
   ========================================================================== */

/* Visually hidden but accessible to screen readers */
.wpl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus-visible for screen reader users */
.wpl-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   Desktop Loading States
   ========================================================================== */

@media (min-width: 1024px) {
    /* Skeleton screens for desktop */
    .wpl-skeleton {
        background: linear-gradient(
            90deg,
            var(--wpl-gray-100) 0%,
            var(--wpl-gray-200) 50%,
            var(--wpl-gray-100) 100%
        );
        background-size: 200% 100%;
        animation: wpl-skeleton-shimmer 1.5s ease-in-out infinite;
        border-radius: var(--wpl-radius-sm);
    }

    @keyframes wpl-skeleton-shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    /* Loading overlay for desktop */
    .wpl-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .wpl-loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--wpl-gray-200);
        border-top-color: var(--wpl-red-primary);
        border-radius: 50%;
        animation: wpl-spinner-rotate 0.8s linear infinite;
    }

    @keyframes wpl-spinner-rotate {
        to {
            transform: rotate(360deg);
        }
    }
}

/* ==========================================================================
   Desktop Error States
   ========================================================================== */

@media (min-width: 1024px) {
    /* Error banner on desktop */
    .wpl-error-banner {
        display: flex;
        align-items: center;
        gap: var(--wpl-space-md);
        padding: var(--wpl-space-md);
        background-color: rgba(245, 124, 0, 0.1);
        border-left: 4px solid var(--wpl-error);
        border-radius: var(--wpl-radius-sm);
        margin-bottom: var(--wpl-space-lg);
    }

    .wpl-error-icon {
        color: var(--wpl-error);
        flex-shrink: 0;
    }

    .wpl-error-message {
        flex: 1;
        color: var(--wpl-text-primary);
        font-size: 14px;
    }
}



/* Mobile Dialog Components */
/* === Inlined from ./components/mobile-dialogs.css === */
/**
 * Mobile Dialog Styles - wplStyle v2.0
 *
 * Implements iOS-style modal dialogs optimized for mobile devices
 * with proper touch targets, animations, and responsive behavior
 */

/* Mobile Dialog Container */
.wpl-mobile-dialog {
    /* Prevent default Vaadin dialog styles from interfering */
    --vaadin-dialog-border-radius: var(--wpl-radius-lg);
    --vaadin-dialog-box-shadow: var(--wpl-shadow-overlay);
    --vaadin-dialog-padding: 0;
}

/* Dialog overlay backdrop */
vaadin-dialog-overlay[theme~="wpl-mobile-dialog"]::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Dialog overlay container */
vaadin-dialog-overlay[theme~="wpl-mobile-dialog"]::part(overlay) {
    animation: wpl-dialog-slide-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 90vh;
    max-height: 90dvh; /* Dynamic viewport height for modern browsers */
    overflow: hidden;
}

/* iOS-specific fixes using dynamic viewport and safe areas */
vaadin-dialog-overlay[theme~="wpl-ios-safe"]::part(overlay) {
    /* Fallback for browsers without dvh support */
    max-height: 85vh;

    /* Use -webkit-fill-available for iOS Safari */
    max-height: -webkit-fill-available;

    /* Use dynamic viewport height which accounts for browser chrome */
    max-height: 85dvh; /* Slightly less to ensure visibility */

    /* Account for safe areas on devices with notches */
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - env(safe-area-inset-bottom, 20px));

    /* Ensure dialog doesn't get cut off */
    margin-top: env(safe-area-inset-top, 20px);
    margin-bottom: env(safe-area-inset-bottom, 20px);

    /* Position properly on iOS */
    position: fixed !important;
}

/* Additional iOS Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari only */
    vaadin-dialog-overlay[theme~="wpl-ios-safe"]::part(overlay) {
        max-height: calc(100vh - 150px); /* Conservative fallback for iOS */
        max-height: -webkit-fill-available;
    }

    .wpl-ios-device .wpl-dialog-main-layout {
        max-height: calc(100vh - 180px); /* Account for browser chrome and safe areas */
        max-height: -webkit-fill-available;
    }
}

/* Password form specific styling */
.wpl-password-form-section vaadin-password-field {
    --vaadin-input-field-border-width: 0;
    --vaadin-input-field-border-color: transparent;
    --vaadin-field-default-width: 100%;
    --lumo-text-field-size: 16px; /* Explicit size to prevent iOS zoom */
    --vaadin-input-field-height: 40px; /* Reduced height to prevent scrolling */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* iOS-specific password field adjustments */
.wpl-ios-device .wpl-password-form-section vaadin-password-field {
    --vaadin-input-field-height: 36px; /* Even more compact on iOS */
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}

/* Reduce label spacing on iOS */
.wpl-ios-device vaadin-password-field::part(label) {
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

/* Ensure password field input container has proper spacing for buttons */
.wpl-password-form-section vaadin-password-field::part(input-field) {
    padding-right: 60px !important; /* Space for both clear and reveal buttons */
    overflow: visible !important;
}

/* Profile form specific styling */
.wpl-profile-form-section vaadin-text-field {
    --vaadin-input-field-border-width: 0;
    --vaadin-input-field-border-color: transparent;
    --vaadin-field-default-width: 100%;
    --lumo-text-field-size: var(--wpl-font-size-body);
}

/* Avatar section in edit profile */
.wpl-avatar-section {
    position: relative;
}

.wpl-avatar-section vaadin-avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--wpl-white);
}

/* Password requirements section */
.wpl-password-requirements {
    animation: wpl-fade-in 0.3s ease-in;
}

/* Error message animations */
.wpl-error-message {
    animation: wpl-fade-in 0.2s ease-in;
}

/* Button hover effects for touch devices */
@media (hover: hover) {
    .wpl-button-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    }

    /*
     * Secondary button hover: Use dark background with white text for proper contrast.
     * Previous version only changed background to light color without adjusting text color,
     * causing white text on light background (unreadable).
     * Now uses consistent dark fill hover pattern matching buttons.css.
     */
    .wpl-button-secondary:hover {
        background-color: var(--wpl-black, #000000) !important;
        color: var(--wpl-white, #FFFFFF) !important;
        border-color: var(--wpl-black, #000000) !important;
    }
}

/* Touch feedback for mobile */
.wpl-button-primary:active,
.wpl-button-secondary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Animations */
@keyframes wpl-dialog-slide-up {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes wpl-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Ensure proper scrolling in dialog content */
.wpl-mobile-dialog vaadin-vertical-layout {
    max-height: calc(90vh - 120px); /* Account for header and footer */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* iOS-specific dialog layout fixes */
.wpl-ios-device.wpl-mobile-dialog .wpl-dialog-main-layout {
    height: 100%;
    max-height: calc(85dvh - 40px);
    max-height: calc(-webkit-fill-available - 40px);
    display: flex;
    flex-direction: column;
}

/* Scrollable content area for iOS */
.wpl-ios-device .wpl-dialog-scrollable-content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* Critical for flex scrolling */
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Ensure form sections are visible on iOS */
.wpl-ios-device .wpl-password-form-section {
    flex-shrink: 0; /* Prevent form from being compressed */
    min-height: auto;
}

/* Password field visibility toggle button styling */
vaadin-password-field::part(reveal-button) {
    cursor: pointer;
    color: var(--wpl-text-secondary);
    width: 24px;
    height: 24px;
    visibility: visible !important; /* Ensure it's always visible */
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

/* Text field clear button styling */
vaadin-text-field::part(clear-button),
vaadin-password-field::part(clear-button) {
    cursor: pointer;
    color: var(--wpl-text-secondary);
    width: 20px;
    height: 20px;
}

/* Disabled state for form fields */
vaadin-text-field[disabled],
vaadin-password-field[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* Focus state for form fields */
vaadin-text-field:focus-within,
vaadin-password-field:focus-within {
    --vaadin-input-field-background: var(--wpl-bg-secondary);
}

/* Required field indicator */
vaadin-text-field[required]::part(required-indicator),
vaadin-password-field[required]::part(required-indicator) {
    color: var(--wpl-red-primary);
}

/* Invalid field styling */
vaadin-text-field[invalid],
vaadin-password-field[invalid] {
    --vaadin-input-field-border-color: var(--wpl-red-primary);
    --vaadin-input-field-border-width: 1px;
}

vaadin-text-field[invalid]::part(error-message),
vaadin-password-field[invalid]::part(error-message) {
    color: var(--wpl-red-primary);
    font-size: var(--wpl-font-size-small);
    margin-top: var(--wpl-space-xs);
}

/* Mobile-first styling for proper section width */
.wpl-password-form-section,
.wpl-password-requirements,
.wpl-error-message,
.wpl-avatar-section,
.wpl-profile-form-section {
    width: calc(100% - 2 * var(--wpl-space-md)) !important;
    max-width: calc(100% - 2 * var(--wpl-space-md)) !important;
    margin-left: var(--wpl-space-md) !important;
    margin-right: var(--wpl-space-md) !important;
    box-sizing: border-box !important;
}

/* Desktop adjustments for proper section width */
@media (min-width: 768px) {
    .wpl-password-form-section,
    .wpl-password-requirements,
    .wpl-error-message,
    .wpl-avatar-section,
    .wpl-profile-form-section {
        border-radius: var(--wpl-radius-md) !important;
        border-left: 1px solid #E5E7EB !important;
        border-right: 1px solid #E5E7EB !important;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 375px) {
    .wpl-mobile-dialog {
        width: 95vw !important;
    }

    .wpl-mobile-dialog h2 {
        font-size: var(--wpl-font-size-large) !important;
    }

    .wpl-button-primary,
    .wpl-button-secondary {
        min-width: 70px !important;
        font-size: var(--wpl-font-size-small) !important;
    }
}

/* iPhone-specific adjustments (targeting common iPhone viewport heights) */
@media screen and (max-device-width: 430px) and (max-device-height: 932px) {
    /* iPhone 14 Pro Max, 15 Pro Max */
    vaadin-dialog-overlay[theme~="wpl-ios-safe"]::part(overlay) {
        max-height: 80dvh;
    }
}

@media screen and (max-device-width: 393px) and (max-device-height: 852px) {
    /* iPhone 14 Pro, 15 Pro */
    vaadin-dialog-overlay[theme~="wpl-ios-safe"]::part(overlay) {
        max-height: 75dvh;
    }
}

@media screen and (max-device-width: 390px) and (max-device-height: 844px) {
    /* iPhone 12, 13, 14, 15 */
    vaadin-dialog-overlay[theme~="wpl-ios-safe"]::part(overlay) {
        max-height: 75dvh;
    }

    .wpl-ios-device .wpl-dialog-main-layout {
        max-height: calc(75dvh - 30px);
    }

    /* More compact spacing for iPhone 15 */
    .wpl-ios-device .wpl-password-form-section {
        margin-top: 8px !important;
    }

    .wpl-ios-device .wpl-password-requirements {
        margin-top: 8px !important;
        padding: 8px 12px !important;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    vaadin-dialog-overlay[theme~="wpl-mobile-dialog"]::part(overlay) {
        max-height: 95vh;
    }

    .wpl-mobile-dialog vaadin-vertical-layout {
        max-height: calc(95vh - 100px);
    }

    .wpl-avatar-section {
        padding: var(--wpl-space-md) !important;
    }

    .wpl-avatar-section vaadin-avatar {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Compact Password Dialog Specific Styles */
.wpl-compact-password-dialog {
    --compact-field-height: 44px;
    --compact-header-height: 56px;
    --compact-footer-height: 64px;
    --compact-padding: 12px 20px;
}

/* Compact dialog overlay */
vaadin-dialog-overlay[theme~="wpl-compact"]::part(overlay) {
    max-height: 520px !important;
    max-height: min(520px, 85dvh) !important; /* Use smaller value */
    animation: wpl-dialog-slide-up-compact 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Compact password fields */
.wpl-compact-password-dialog vaadin-password-field {
    --vaadin-input-field-height: var(--compact-field-height);
    margin-bottom: 8px !important;
}

.wpl-compact-password-dialog vaadin-password-field::part(label) {
    font-size: 13px !important;
    margin-bottom: 2px !important;
    color: #666666 !important;
    line-height: 1.2 !important;
}

.wpl-compact-password-dialog vaadin-password-field::part(input-field) {
    background-color: #F8F9FA;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    transition: all 0.2s;
    padding-right: 56px !important; /* Space for buttons */
    /* Ensure minimum height to prevent label strikethrough issue */
    min-height: var(--wpl-input-height, 44px);
}

.wpl-compact-password-dialog vaadin-password-field:focus-within::part(input-field) {
    background-color: #FFFFFF;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

/* Inline validation styling */
.wpl-inline-validation {
    animation: wpl-validation-slide-in 0.2s ease-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Compact animations */
@keyframes wpl-dialog-slide-up-compact {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes wpl-validation-slide-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compact button styling */
.wpl-compact-password-dialog .wpl-button-primary,
.wpl-compact-password-dialog .wpl-button-secondary {
    height: 40px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    padding: 0 24px !important;
    transition: all 0.2s !important;
}

.wpl-compact-password-dialog .wpl-button-primary:active,
.wpl-compact-password-dialog .wpl-button-secondary:active {
    transform: scale(0.95) !important;
}

/* iOS-specific compact adjustments */
@supports (-webkit-touch-callout: none) {
    .wpl-compact-password-dialog {
        --compact-field-height: 42px; /* Even more compact on iOS */
    }

    vaadin-dialog-overlay[theme~="wpl-compact"]::part(overlay) {
        max-height: min(480px, calc(100vh - 100px)) !important;
    }
}

/* Small screen adjustments for compact dialog */
@media (max-width: 375px) {
    .wpl-compact-password-dialog {
        --compact-field-height: 40px;
        --compact-padding: 10px 16px;
    }

    vaadin-dialog-overlay[theme~="wpl-compact"]::part(overlay) {
        max-height: 460px !important;
    }

    .wpl-compact-password-dialog vaadin-password-field::part(label) {
        font-size: 12px !important;
    }

    .wpl-compact-password-dialog .wpl-button-primary,
    .wpl-compact-password-dialog .wpl-button-secondary {
        height: 36px !important;
        font-size: 14px !important;
        min-width: 90px !important;
    }
}

/* iPhone SE and smaller devices */
@media (max-width: 320px) {
    vaadin-dialog-overlay[theme~="wpl-compact"]::part(overlay) {
        max-height: 440px !important;
        width: 95vw !important;
    }

    .wpl-compact-password-dialog {
        --compact-field-height: 38px;
        --compact-header-height: 48px;
        --compact-footer-height: 56px;
    }
}

/* Ensure proper visibility on notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    vaadin-dialog-overlay[theme~="wpl-compact"]::part(overlay) {
        margin-top: max(20px, env(safe-area-inset-top)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px) !important;
    }
}

/* ===== WPL Crop Dialog Styles ===== */

/* Crop dialog overlay - responsive sizing for both desktop and mobile */
vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
    width: min(90vw, 600px);
    max-height: min(85dvh, 700px);
    border-radius: var(--wpl-radius-lg);
    box-shadow: var(--wpl-shadow-overlay);
}

/* Crop dialog content container */
.wpl-crop-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(85dvh - 120px);
}

/* Image crop container - ensures proper sizing and centering */
.wpl-crop-image-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 60dvh;
}

/* ImageCrop addon component styling */
.wpl-crop-image-container image-crop {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Crop dialog button styling */
.wpl-crop-dialog vaadin-button.wpl-button-primary {
    background-color: var(--wpl-red-primary);
    color: var(--wpl-white);
    border: none;
    border-radius: var(--wpl-radius-md);
    font-weight: var(--wpl-font-weight-semibold);
    min-width: 80px;
    height: 40px;
    transition: all var(--wpl-transition-normal);
}

.wpl-crop-dialog vaadin-button.wpl-button-primary:hover {
    background-color: var(--wpl-red-dark);
}

.wpl-crop-dialog vaadin-button.wpl-button-danger {
    background-color: var(--wpl-bg-secondary);
    color: var(--wpl-text-primary);
    border: 1px solid var(--wpl-silver);
    border-radius: var(--wpl-radius-md);
    font-weight: var(--wpl-font-weight-medium);
    min-width: 80px;
    height: 40px;
    transition: all var(--wpl-transition-normal);
}

/*
 * Danger button hover: Ensure text remains dark since we're using a light hover background.
 * This prevents any inherited white text color from making the button unreadable.
 */
.wpl-crop-dialog vaadin-button.wpl-button-danger:hover {
    background-color: var(--wpl-bg-tertiary);
    border-color: var(--wpl-gray);
    color: var(--wpl-text-primary, #000000);
}

/* Mobile-specific crop dialog adjustments */
@media (max-width: 768px) {
    vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
        width: 95vw;
        max-height: 80dvh;
    }

    .wpl-crop-image-container {
        max-height: 55dvh;
    }
}

/* Small screen (phone) adjustments */
@media (max-width: 375px) {
    vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
        width: 98vw;
        max-height: 75dvh;
    }

    .wpl-crop-image-container {
        max-height: 50dvh;
    }

    .wpl-crop-dialog vaadin-button.wpl-button-primary,
    .wpl-crop-dialog vaadin-button.wpl-button-danger {
        min-width: 70px;
        height: 36px;
        font-size: var(--wpl-font-size-small);
    }
}

/* Landscape orientation on mobile */
@media (orientation: landscape) and (max-height: 500px) {
    vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
        max-height: 90vh;
        width: min(80vw, 700px);
    }

    .wpl-crop-image-container {
        max-height: 65vh;
    }
}

/* iOS Safari-specific fixes for crop dialog */
@supports (-webkit-touch-callout: none) {
    vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
        max-height: calc(100vh - 120px);
        max-height: -webkit-fill-available;
    }

    .wpl-crop-image-container {
        max-height: calc(60vh - 40px);
        max-height: calc(-webkit-fill-available - 140px);
    }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    vaadin-dialog-overlay[theme~="wpl-crop-dialog"]::part(overlay) {
        margin-top: max(20px, env(safe-area-inset-top));
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px);
    }
}

/* ============================================================================
   EXPLICIT LIGHT MODE STYLES FOR DIALOGS
   ============================================================================
   These styles ensure dialogs always display with light theme styling,
   preventing issues when the OS is in dark mode but the app uses light theme.
   ============================================================================ */

/* Force light mode styling for all mobile dialogs by default */
.wpl-mobile-dialog,
.wpl-compact-password-dialog {
    /* Explicitly set light mode variables */
    --wpl-dialog-bg: #FFFFFF;
    --wpl-dialog-input-bg: #F8F9FA;
    --wpl-dialog-input-bg-focus: #FFFFFF;
    --wpl-dialog-text-primary: #000000;
    --wpl-dialog-text-secondary: #666666;
    --wpl-dialog-text-placeholder: #999999;
    --wpl-dialog-border: #E0E0E0;
    --wpl-dialog-border-focus: #2196F3;
    color-scheme: light;
}

/* Password field input text - CRITICAL FIX for visibility */
.wpl-mobile-dialog vaadin-password-field input,
.wpl-compact-password-dialog vaadin-password-field input {
    color: var(--wpl-dialog-text-primary, #000000) !important;
    -webkit-text-fill-color: var(--wpl-dialog-text-primary, #000000) !important;
    caret-color: var(--wpl-dialog-text-primary, #000000) !important;
    background: transparent !important;
}

/* Password field input container styling */
.wpl-mobile-dialog vaadin-password-field::part(input-field),
.wpl-compact-password-dialog vaadin-password-field::part(input-field) {
    background-color: var(--wpl-dialog-input-bg, #F8F9FA) !important;
    border-color: var(--wpl-dialog-border, #E0E0E0) !important;
    /* Ensure minimum height to prevent label strikethrough issue */
    min-height: var(--wpl-input-height, 44px);
}

/* Password field focus state */
.wpl-mobile-dialog vaadin-password-field:focus-within::part(input-field),
.wpl-compact-password-dialog vaadin-password-field:focus-within::part(input-field) {
    background-color: var(--wpl-dialog-input-bg-focus, #FFFFFF) !important;
    border-color: var(--wpl-dialog-border-focus, #2196F3) !important;
}

/* Text field support for other dialogs */
.wpl-mobile-dialog vaadin-text-field input,
.wpl-compact-password-dialog vaadin-text-field input {
    color: var(--wpl-dialog-text-primary, #000000) !important;
    -webkit-text-fill-color: var(--wpl-dialog-text-primary, #000000) !important;
    caret-color: var(--wpl-dialog-text-primary, #000000) !important;
    background: transparent !important;
}

.wpl-mobile-dialog vaadin-text-field::part(input-field),
.wpl-compact-password-dialog vaadin-text-field::part(input-field) {
    background-color: var(--wpl-dialog-input-bg, #F8F9FA) !important;
    border-color: var(--wpl-dialog-border, #E0E0E0) !important;
    /* Ensure minimum height to prevent label strikethrough issue */
    min-height: var(--wpl-input-height, 44px);
}

.wpl-mobile-dialog vaadin-text-field:focus-within::part(input-field),
.wpl-compact-password-dialog vaadin-text-field:focus-within::part(input-field) {
    background-color: var(--wpl-dialog-input-bg-focus, #FFFFFF) !important;
    border-color: var(--wpl-dialog-border-focus, #2196F3) !important;
}

/* Placeholder text styling */
.wpl-mobile-dialog vaadin-password-field input::placeholder,
.wpl-compact-password-dialog vaadin-password-field input::placeholder,
.wpl-mobile-dialog vaadin-text-field input::placeholder,
.wpl-compact-password-dialog vaadin-text-field input::placeholder {
    color: var(--wpl-dialog-text-placeholder, #999999) !important;
    opacity: 1 !important;
}

/* Label styling for fields in dialogs */
.wpl-mobile-dialog vaadin-password-field::part(label),
.wpl-compact-password-dialog vaadin-password-field::part(label),
.wpl-mobile-dialog vaadin-text-field::part(label),
.wpl-compact-password-dialog vaadin-text-field::part(label) {
    color: var(--wpl-dialog-text-secondary, #666666) !important;
}

/* ============================================================================
   DARK MODE SUPPORT (Optional - for future implementation)
   ============================================================================
   These styles are commented out and only activate when OS dark mode is
   detected AND the app explicitly supports dark mode for dialogs.
   Currently, dialogs use light theme regardless of OS setting.
   ============================================================================ */

/*
   Uncomment below when dark mode is fully implemented for the app.
   For now, we force light mode to prevent styling conflicts.

@media (prefers-color-scheme: dark) {
    .wpl-mobile-dialog[data-theme="dark"],
    .wpl-compact-password-dialog[data-theme="dark"] {
        --wpl-dialog-bg: #1c1c1e;
        --wpl-dialog-input-bg: #2c2c2e;
        --wpl-dialog-input-bg-focus: #1c1c1e;
        --wpl-dialog-text-primary: #FFFFFF;
        --wpl-dialog-text-secondary: #8e8e93;
        --wpl-dialog-text-placeholder: #6e6e73;
        --wpl-dialog-border: #3a3a3c;
        --wpl-dialog-border-focus: #0A84FF;
        color-scheme: dark;
    }

    .wpl-mobile-dialog[data-theme="dark"] vaadin-password-field input,
    .wpl-compact-password-dialog[data-theme="dark"] vaadin-password-field input {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        caret-color: #FFFFFF !important;
    }

    vaadin-dialog-overlay[theme~="wpl-mobile-dialog"]::part(backdrop) {
        background-color: rgba(0, 0, 0, 0.7);
    }
}
*/

/* ============================================================================
   UNIFIED PROFILE DIALOG STYLES
   ============================================================================
   Consistent styling for all profile-related dialogs:
   - Edit Profile dialog
   - Change Password dialog
   - About dialog

   Design principles:
   - Same header style with title and close button
   - Consistent padding and spacing
   - Same button layout (Cancel left, Primary right)
   - Same colors and typography
   - Same border-radius and shadows
   - Responsive behavior maintained
   ============================================================================ */

/* Base profile dialog class - applies to all profile dialogs */
.wpl-profile-dialog {
    /* Dialog dimensions */
    --wpl-profile-dialog-width: 90vw;
    --wpl-profile-dialog-max-width: 400px;

    /* Spacing */
    --wpl-profile-dialog-padding: var(--wpl-space-lg, 24px);
    --wpl-profile-dialog-header-padding: var(--wpl-space-lg, 24px) var(--wpl-space-lg, 24px) var(--wpl-space-md, 16px);
    --wpl-profile-dialog-footer-padding: var(--wpl-space-md, 16px) var(--wpl-space-lg, 24px) var(--wpl-space-lg, 24px);
    --wpl-profile-dialog-content-padding: var(--wpl-space-md, 16px) var(--wpl-space-lg, 24px);

    /* Colors */
    --wpl-profile-dialog-bg: var(--wpl-white, #FFFFFF);
    --wpl-profile-dialog-header-bg: var(--wpl-white, #FFFFFF);
    --wpl-profile-dialog-border-color: var(--wpl-silver, #E5E7EB);
    --wpl-profile-dialog-title-color: var(--wpl-text-primary, #1A1A1A);
    --wpl-profile-dialog-close-color: var(--wpl-text-secondary, #666666);
    --wpl-profile-dialog-close-hover-color: var(--wpl-text-primary, #1A1A1A);

    /* Typography */
    --wpl-profile-dialog-title-size: var(--wpl-font-size-xlarge, 20px);
    --wpl-profile-dialog-title-weight: var(--wpl-font-weight-semibold, 600);

    /* Buttons */
    --wpl-profile-dialog-button-height: 44px;
    --wpl-profile-dialog-button-min-width: 100px;
    --wpl-profile-dialog-button-radius: var(--wpl-radius-md, 8px);
    --wpl-profile-dialog-button-font-size: var(--wpl-font-size-body, 16px);

    /* Border radius and shadow */
    --wpl-profile-dialog-radius: var(--wpl-radius-lg, 16px);
    --wpl-profile-dialog-shadow: var(--wpl-shadow-overlay, 0 10px 40px rgba(0, 0, 0, 0.15));

    /* Transitions */
    --wpl-profile-dialog-transition: var(--wpl-transition-normal, 0.2s ease);

    /* Force light mode */
    color-scheme: light;
}

/* Dialog overlay styling */
vaadin-dialog-overlay[theme~="wpl-profile-dialog"]::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

vaadin-dialog-overlay[theme~="wpl-profile-dialog"]::part(overlay) {
    width: var(--wpl-profile-dialog-width);
    max-width: var(--wpl-profile-dialog-max-width);
    max-height: 90dvh;
    border-radius: var(--wpl-profile-dialog-radius);
    box-shadow: var(--wpl-profile-dialog-shadow);
    background-color: var(--wpl-profile-dialog-bg);
    padding: 0;
    overflow: hidden;
    animation: wpl-profile-dialog-enter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dialog enter animation */
@keyframes wpl-profile-dialog-enter {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Unified header styling for profile dialogs */
.wpl-profile-dialog-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: var(--wpl-profile-dialog-header-padding);
    background-color: var(--wpl-profile-dialog-header-bg);
    border-bottom: 1px solid var(--wpl-profile-dialog-border-color);
    box-sizing: border-box;
    flex-shrink: 0;
}

.wpl-profile-dialog-title {
    margin: 0;
    font-size: var(--wpl-profile-dialog-title-size);
    font-weight: var(--wpl-profile-dialog-title-weight);
    color: var(--wpl-profile-dialog-title-color);
    line-height: 1.3;
}

.wpl-profile-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wpl-radius-sm, 6px);
    cursor: pointer;
    color: var(--wpl-profile-dialog-close-color);
    transition: all var(--wpl-profile-dialog-transition);
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.wpl-profile-dialog-close:hover {
    color: var(--wpl-profile-dialog-close-hover-color);
    background-color: var(--wpl-bg-secondary, #F5F5F5);
}

.wpl-profile-dialog-close:active {
    transform: scale(0.95);
}

.wpl-profile-dialog-close vaadin-icon,
.wpl-profile-dialog-close iron-icon {
    width: 24px;
    height: 24px;
}

/* Profile dialog main layout - prevents horizontal overflow */
.wpl-profile-dialog-main-layout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Unified content area */
.wpl-profile-dialog-content {
    padding: var(--wpl-profile-dialog-content-padding);
    background-color: var(--wpl-profile-dialog-bg);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}

/* About dialog specific content styling */
.wpl-profile-dialog-about-content {
    text-align: center;
    padding: var(--wpl-space-xl, 32px) var(--wpl-space-lg, 24px);
}

.wpl-profile-dialog-about-content .wpl-about-app-name {
    font-size: var(--wpl-font-size-large, 18px);
    font-weight: var(--wpl-font-weight-semibold, 600);
    color: var(--wpl-text-primary, #1A1A1A);
    margin-bottom: var(--wpl-space-sm, 8px);
}

.wpl-profile-dialog-about-content .wpl-about-version {
    font-size: var(--wpl-font-size-body, 16px);
    color: var(--wpl-text-secondary, #666666);
    margin-bottom: var(--wpl-space-lg, 24px);
}

.wpl-profile-dialog-about-content .wpl-about-copyright {
    font-size: var(--wpl-font-size-small, 14px);
    color: var(--wpl-text-tertiary, #999999);
}

/* Unified footer/button area */
.wpl-profile-dialog-footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wpl-space-md, 16px);
    padding: var(--wpl-profile-dialog-footer-padding);
    background-color: var(--wpl-profile-dialog-header-bg);
    border-top: 1px solid var(--wpl-profile-dialog-border-color);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Single button centered (for About dialog) */
.wpl-profile-dialog-footer--centered {
    justify-content: center;
}

/* Unified button base styles */
.wpl-profile-dialog-button {
    height: var(--wpl-profile-dialog-button-height);
    min-width: var(--wpl-profile-dialog-button-min-width);
    padding: 0 var(--wpl-space-lg, 24px);
    border-radius: var(--wpl-profile-dialog-button-radius);
    font-size: var(--wpl-profile-dialog-button-font-size);
    font-weight: var(--wpl-font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--wpl-profile-dialog-transition);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Secondary/Cancel button */
.wpl-profile-dialog-button--secondary {
    background-color: var(--wpl-bg-secondary, #F5F5F5);
    color: var(--wpl-text-primary, #1A1A1A);
    border: 1px solid var(--wpl-silver, #E5E7EB);
}

.wpl-profile-dialog-button--secondary:hover {
    background-color: var(--wpl-bg-tertiary, #EBEBEB);
    border-color: var(--wpl-gray, #CCCCCC);
}

.wpl-profile-dialog-button--secondary:active {
    transform: scale(0.98);
}

/* Primary/Save button */
.wpl-profile-dialog-button--primary {
    background-color: var(--wpl-red-primary, #E1211A);
    color: var(--wpl-white, #FFFFFF);
    font-weight: var(--wpl-font-weight-semibold, 600);
}

.wpl-profile-dialog-button--primary:hover {
    background-color: var(--wpl-red-dark, #C41E17);
}

.wpl-profile-dialog-button--primary:active {
    transform: scale(0.98);
}

.wpl-profile-dialog-button--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* OK button for About dialog - uses primary style */
.wpl-profile-dialog-button--ok {
    background-color: var(--wpl-red-primary, #E1211A);
    color: var(--wpl-white, #FFFFFF);
    font-weight: var(--wpl-font-weight-semibold, 600);
    min-width: 120px;
}

.wpl-profile-dialog-button--ok:hover {
    background-color: var(--wpl-red-dark, #C41E17);
}

.wpl-profile-dialog-button--ok:active {
    transform: scale(0.98);
}

/* Responsive adjustments for profile dialogs */
@media (max-width: 375px) {
    .wpl-profile-dialog {
        --wpl-profile-dialog-max-width: 95vw;
        --wpl-profile-dialog-padding: var(--wpl-space-md, 16px);
        --wpl-profile-dialog-header-padding: var(--wpl-space-md, 16px);
        --wpl-profile-dialog-footer-padding: var(--wpl-space-md, 16px);
        --wpl-profile-dialog-button-height: 40px;
        --wpl-profile-dialog-button-min-width: 80px;
        --wpl-profile-dialog-button-font-size: var(--wpl-font-size-small, 14px);
        --wpl-profile-dialog-title-size: var(--wpl-font-size-large, 18px);
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    vaadin-dialog-overlay[theme~="wpl-profile-dialog"]::part(overlay) {
        max-height: calc(100vh - 100px);
        max-height: -webkit-fill-available;
    }
}

/* Safe area support for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    vaadin-dialog-overlay[theme~="wpl-profile-dialog"]::part(overlay) {
        margin-top: max(20px, env(safe-area-inset-top));
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    vaadin-dialog-overlay[theme~="wpl-profile-dialog"]::part(overlay) {
        max-height: 90vh;
    }

    .wpl-profile-dialog-about-content {
        padding: var(--wpl-space-lg, 24px) var(--wpl-space-lg, 24px);
    }
}


/* Apps View Layout */
/* === Inlined from ./components/apps-view.css === */
/**
 * Apps View Component Styles
 *
 * Full-image card design with gradient overlays, smooth animations,
 * and responsive behavior for mobile and desktop
 */

/* =================================================================
   Base Layout Styles
   ================================================================= */

/* Mobile-specific styles for apps view */
@media (max-width: 767px) {
  /* Override parent container padding when apps view is active */
  .wpl-main-layout__content:has(.smb-apps-view) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Apps view specific mobile layout */
  .smb-apps-view {
    width: 100%;
    box-sizing: border-box;
  }

  /* Content wrapper with symmetric padding */
  .smb-apps-view .wpl-layout-content {
    padding: 0 16px !important; /* Fixed 16px for perfect symmetry */
    width: 100%;
    box-sizing: border-box;
  }

  /* Grid container for mobile */
  .smb-apps-view .apps-grid-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Ensure cards don't overflow their grid cells */
  .smb-apps-view .apps-grid-mobile > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* Desktop/Tablet styles */
@media (min-width: 768px) {
  .smb-apps-view .apps-grid-desktop {
    display: grid;
    gap: 20px;
  }
}

/* Tablet - 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .smb-apps-view .apps-grid-desktop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop - 4 columns */
@media (min-width: 1024px) {
  .smb-apps-view .apps-grid-desktop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Large Desktop - 5 columns */
@media (min-width: 1440px) {
  .smb-apps-view .apps-grid-desktop {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =================================================================
   Card Styles - Full Image Design
   ================================================================= */

/* Base card styles */
.wpl-app-card {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #f5f5f5;
  isolation: isolate; /* Create new stacking context */
}

/* Desktop card height */
@media (min-width: 768px) {
  .wpl-app-card {
    height: 180px;
  }
}

/* Loading shimmer effect for cards */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.wpl-app-card:not([style*="background-image"]):not([style*="background: linear"]) {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #f8f8f8 50%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Gradient scrim overlay for text readability */
.wpl-app-card__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.5) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Stronger scrim for cards without images (gradients) */
.wpl-app-card:not([style*="background-image"]) .wpl-app-card__scrim {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.6) 85%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* Icon overlay for cards without images */
.wpl-app-card__icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  user-select: none;
  letter-spacing: -1px;
  text-transform: uppercase;
}

/* Content container */
.wpl-app-card__content {
  position: relative;
  z-index: 2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .wpl-app-card__content {
    padding: 16px;
    gap: 6px;
  }
}

/* Title styles */
.wpl-app-card__title {
  font-weight: 600;
  font-size: 15px;
  color: white;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin: 0;
  word-break: break-word;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .wpl-app-card__title {
    font-size: 16px;
  }
}

/* Description styles */
.wpl-app-card__description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .wpl-app-card__description {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* Admin badge */
.wpl-app-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 107, 107, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 3;
  backdrop-filter: blur(4px);
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Alternative badge style for admin cards */
.wpl-app-card--admin .wpl-app-card__badge {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =================================================================
   Interaction States
   ================================================================= */

/* Hover state (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .wpl-app-card:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  /* Subtle zoom effect on background image on hover */
  .wpl-app-card:hover::before {
    transform: scale(1.05);
  }

  /* Lighten the scrim slightly on hover for better text visibility */
  .wpl-app-card:hover .wpl-app-card__scrim {
    opacity: 0.95;
  }
}

/* Active/Pressed state */
.wpl-app-card:active {
  transform: scale(0.95);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus state for accessibility */
.wpl-app-card:focus-visible {
  outline: 3px solid var(--wpl-primary, #4F46E5);
  outline-offset: 2px;
}

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
  .wpl-app-card:active {
    transform: scale(0.97);
  }
}

/* =================================================================
   Image Loading States
   ================================================================= */

/* Lazy loading placeholder */
.wpl-app-card img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.wpl-app-card img[loading="lazy"].loaded {
  opacity: 1;
}

/* Background image animation */
.wpl-app-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* =================================================================
   Animation Classes
   ================================================================= */

/* Entrance animation */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpl-app-card {
  animation: cardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Stagger animation for cards */
.wpl-app-card:nth-child(1) { animation-delay: 0.05s; }
.wpl-app-card:nth-child(2) { animation-delay: 0.1s; }
.wpl-app-card:nth-child(3) { animation-delay: 0.15s; }
.wpl-app-card:nth-child(4) { animation-delay: 0.2s; }
.wpl-app-card:nth-child(5) { animation-delay: 0.25s; }
.wpl-app-card:nth-child(6) { animation-delay: 0.3s; }
.wpl-app-card:nth-child(7) { animation-delay: 0.35s; }
.wpl-app-card:nth-child(8) { animation-delay: 0.4s; }

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-app-card {
    animation: none;
    transition: none;
  }

  .wpl-app-card::before {
    transition: none;
  }
}

/* =================================================================
   Special States
   ================================================================= */

/* Empty state */
.smb-apps-view .apps-grid-mobile > div.wpl-muted-text,
.smb-apps-view .apps-grid-desktop > div.wpl-muted-text {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--wpl-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* =================================================================
   Accessibility Improvements
   ================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wpl-app-card__title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  }

  .wpl-app-card__description {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .wpl-app-card__scrim {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.7) 70%,
      rgba(0, 0, 0, 0.95) 100%
    );
  }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  .wpl-app-card {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* =================================================================
   Performance Optimizations
   ================================================================= */

/* Use GPU acceleration for transforms */
.wpl-app-card {
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Remove will-change after animations complete */
.wpl-app-card:not(:hover) {
  will-change: auto;
}


/* Inbox Component Styles */
/* === Inlined from ./inbox-styles.css === */
/*
 * WPL Inbox Styles - Modern Universal Inbox Component Styling
 * Version 1.0 - Mobile-first, action-oriented design
 * Features gradient headers, type-based color coding, and smooth animations
 */

/* ============================================================================
   INBOX VIEW FULL WIDTH OVERRIDES
   ============================================================================ */

/* Override parent layout padding to make inbox full width */
.wpl-inbox-view {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Ensure the inner VerticalLayout container is also full width */
.wpl-inbox-view > vaadin-vertical-layout {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ============================================================================
   INBOX HEADER STYLES
   ============================================================================ */

.wpl-inbox-header {
  background: var(--wpl-bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--wpl-gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: all 0.3s ease;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wpl-inbox-header-main {
  /* background: linear-gradient(135deg, var(--wpl-red-primary) 0%, var(--wpl-red-dark) 100%); */
  background: var(--wpl-red-primary);
  color: var(--wpl-text-on-primary);
  min-height: 60px;
  position: relative;
  overflow: hidden;
}

/* Animated gradient effect */
.wpl-inbox-header-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.wpl-inbox-header-title {
  color: var(--wpl-text-on-primary);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wpl-inbox-unread-badge {
  background: var(--wpl-white);
  color: var(--wpl-red-primary);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wpl-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(225, 33, 26, 0.4);
  }
}

.wpl-inbox-search {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Target the input-field part in shadow DOM */
.wpl-inbox-search::part(input-field) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 10px;
}

/* Hide the label container that reserves space even when empty */
.wpl-inbox-search::part(label) {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide helper text container */
.wpl-inbox-search::part(helper-text) {
  display: none !important;
}

/* Hide error message container */
.wpl-inbox-search::part(error-message) {
  display: none !important;
}

.wpl-inbox-search input {
  color: var(--wpl-text-primary);
}

.wpl-inbox-header-button {
  color: var(--wpl-text-on-primary) !important;
  transition: all 0.2s ease;
}

.wpl-inbox-header-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px);
}

.wpl-rotating {
  animation: rotate 1s ease-in-out;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wpl-inbox-filter-bar {
  background: var(--wpl-gray-50);
  border-bottom: 1px solid var(--wpl-gray-200);
  padding: var(--wpl-space-md);
  animation: slideDown 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 300px; /* Increased for mobile stacked layout */
    opacity: 1;
  }
}

/* Filters wrapper for responsive layout */
.wpl-inbox-filters-wrapper {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: flex-end;
  flex-wrap: wrap;
}

.wpl-inbox-filter {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-gray-300);
  border-radius: 6px;
  min-width: 0; /* Allow shrinking */
  flex: 1;
  width: auto;
}

/* Desktop layout - filters in a row */
@media (min-width: 768px) {
  .wpl-inbox-filters-wrapper {
    flex-wrap: nowrap;
  }

  .wpl-inbox-filter {
    min-width: 150px;
    max-width: 200px;
  }
}

/* Mobile layout - stack filters vertically */
@media (max-width: 767px) {
  .wpl-inbox-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .wpl-inbox-filters-wrapper {
    flex-direction: column;
    width: 100%;
  }

  .wpl-inbox-filter {
    width: 100% !important;
    max-width: none !important;
  }

  .wpl-inbox-clear-button {
    align-self: flex-end;
    margin-top: 8px;
  }
}

/* Small mobile screens - optimize layout further */
@media (max-width: 390px) {
  .wpl-inbox-filter-bar {
    padding: 8px;
  }

  .wpl-inbox-filters-wrapper {
    gap: 8px;
  }

  /* Make combo box labels more compact on very small screens */
  .wpl-inbox-filter vaadin-combo-box-label {
    font-size: 12px;
  }
}

/* Mobile header adjustments */
.wpl-inbox-header-mobile .wpl-inbox-header-main {
  min-height: 56px;
  padding: 8px;
}

.wpl-inbox-header-mobile .wpl-inbox-header-title {
  font-size: 1.2rem;
}

.wpl-inbox-header-mobile .wpl-inbox-search {
  margin-top: 8px;
}

/* Additional mobile optimizations for narrow screens */
@media (max-width: 480px) {
  .wpl-inbox-header-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px;
    padding: 12px !important;
  }

  /* Title section takes minimal space */
  .wpl-inbox-header-main > vaadin-horizontal-layout:first-child {
    order: 1;
    flex-shrink: 0;
  }

  /* Action buttons (filter, refresh) appear in top row */
  .wpl-inbox-header-main > vaadin-horizontal-layout:last-child {
    order: 2;
    flex-shrink: 0;
    margin-left: auto; /* Push to the right */
  }

  /* Search field takes full width on second row */
  .wpl-inbox-search {
    order: 3; /* Appear after action buttons */
    width: 100% !important;
    flex-basis: 100% !important; /* Force to new line */
    margin-top: 4px;
  }
}

/* ============================================================================
   INBOX ROW STYLES
   ============================================================================ */

.wpl-inbox-row {
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-gray-200);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0 !important;  /* Ensure no margins */
  padding-left: 0 !important;  /* Border should be flush with edge */
  width: 100% !important;  /* Ensure full width */
}

.wpl-inbox-row:hover,
.wpl-inbox-row-hover {
  background: var(--wpl-gray-50);
  transform: translateX(2px);
}

.wpl-inbox-row-touch {
  background: var(--wpl-gray-100);
  transform: scale(0.98);
}

/* Type indicator (left border) - flush with edge */
.wpl-inbox-type-indicator {
  min-width: 4px;
  flex-shrink: 0;
  transition: width 0.2s ease;
  margin: 0 !important; /* Ensure no margin */
}

.wpl-inbox-row:hover .wpl-inbox-type-indicator {
  min-width: 6px;
}

/* Content styling */
.wpl-inbox-content {
  flex: 1;
  min-width: 0; /* Enable text truncation */
}

.wpl-inbox-subject {
  font-size: 1rem;
  color: var(--wpl-text-primary);  /* Black color for better readability */
  font-weight: 600;  /* Default bold weight */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.wpl-inbox-sender {
  font-size: 0.875rem;
  color: var(--wpl-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-inbox-time {
  font-size: 0.75rem;
  color: var(--wpl-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.wpl-inbox-preview {
  font-size: 0.875rem;
  color: var(--wpl-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  line-height: 1.3;
}

.wpl-inbox-type-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;  /* Smaller for less prominence */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 4px;  /* Minimal padding */
  border-radius: 3px;
  background: transparent;  /* Remove background for cleaner look */
  opacity: 0.7;  /* Subtle appearance */
}

.wpl-inbox-status {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.wpl-inbox-new-badge {
  background: var(--wpl-blue-primary);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Avatar styling */
.wpl-inbox-avatar {
  flex-shrink: 0;
  margin-right: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.wpl-inbox-row:hover .wpl-inbox-avatar {
  border-color: var(--wpl-gray-300);
}

/* Action buttons */
.wpl-inbox-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wpl-inbox-row:hover .wpl-inbox-actions {
  opacity: 1;
}

.wpl-inbox-row-mobile .wpl-inbox-actions {
  opacity: 1; /* Always visible on mobile */
}

.wpl-inbox-action-button {
  transition: all 0.2s ease;
}

.wpl-inbox-action-button:hover {
  transform: translateY(-1px);
}

.wpl-inbox-primary-action {
  background: var(--wpl-red-primary) !important;
  color: white !important;
  font-weight: 500;
  padding: 4px 12px;
  animation: slideInRight 0.3s ease;
}

/* Mobile-specific primary action - minimal icon button */
.wpl-inbox-primary-action-mobile {
  background: var(--wpl-red-primary) !important;
  color: white !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

.wpl-inbox-primary-action-mobile vaadin-icon {
  width: 16px;
  height: 16px;
}

@keyframes slideInRight {
  from {
    transform: translateX(10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wpl-inbox-primary-action:hover {
  background: var(--wpl-red-hover) !important;
  transform: translateX(2px);
}

.wpl-inbox-primary-action-mobile:hover {
  background: var(--wpl-red-hover) !important;
  transform: scale(1.1);
}

/* Type-specific styling */
.wpl-inbox-notification {
  background: linear-gradient(to right, transparent, rgba(0, 122, 255, 0.02));
}

.wpl-inbox-notification .wpl-inbox-type-label {
  color: var(--wpl-blue-primary);
}

.wpl-inbox-wipp {
  background: linear-gradient(to right, transparent, rgba(225, 33, 26, 0.02));
}

.wpl-inbox-wipp .wpl-inbox-type-label {
  color: var(--wpl-red-primary);
}

.wpl-inbox-action-required {
  background: linear-gradient(to right, rgba(225, 33, 26, 0.05), transparent);
  /* Removed the redundant border-left override - type indicator div handles this */
}

.wpl-inbox-action-required .wpl-inbox-subject {
  color: var(--wpl-text-primary);  /* Changed to black for better readability */
  font-weight: 700;  /* Increased weight for emphasis */
}

.wpl-inbox-topic {
  background: linear-gradient(to right, transparent, rgba(107, 114, 128, 0.02));
}

.wpl-inbox-topic .wpl-inbox-type-label {
  color: var(--wpl-gray-600);
}

.wpl-inbox-system {
  background: linear-gradient(to right, transparent, rgba(55, 65, 81, 0.02));
}

.wpl-inbox-system .wpl-inbox-type-label {
  color: var(--wpl-gray-700);
}

.wpl-inbox-support {
  background: linear-gradient(to right, transparent, rgba(245, 124, 0, 0.02));
}

.wpl-inbox-support .wpl-inbox-type-label {
  color: var(--wpl-error);
}

/* Unread styling */
.wpl-inbox-unread {
  background: linear-gradient(to right, rgba(0, 122, 255, 0.05), var(--wpl-bg-primary));
}

.wpl-inbox-unread .wpl-inbox-subject {
  font-weight: 700;  /* Bold for unread items */
  color: var(--wpl-text-primary);
}

/* Read items have lighter weight */
.wpl-inbox-row:not(.wpl-inbox-unread) .wpl-inbox-subject {
  font-weight: 400;  /* Regular weight for read items */
}

.wpl-inbox-unread .wpl-inbox-type-indicator {
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 8px currentColor;
  }
}

/* Mobile-specific adjustments */
.wpl-inbox-row-mobile {
  min-height: 64px;  /* More compact */
  padding: 0;  /* Padding handled by inner content */
}

.wpl-inbox-row-mobile .wpl-inbox-subject {
  font-size: 0.9375rem;
  line-height: 1.2;  /* Tighter line height */
  margin-bottom: 2px;
}

.wpl-inbox-row-mobile .wpl-inbox-sender {
  font-size: 0.8125rem;  /* Slightly larger for better readability */
  color: var(--wpl-text-tertiary);
  opacity: 0.8;  /* Lighter appearance for secondary info */
}

.wpl-inbox-row-mobile .wpl-inbox-time {
  display: none;  /* Hidden as it's combined with sender */
}

.wpl-inbox-row-mobile .wpl-inbox-preview {
  display: none; /* Hide preview on mobile for space */
}

.wpl-inbox-row-mobile .wpl-inbox-type-label {
  display: none;  /* Hide type label on mobile - border is enough */
}

.wpl-inbox-row-mobile .wpl-inbox-avatar {
  margin-right: 8px;  /* Less margin on mobile */
  width: 36px !important;  /* Slightly smaller avatar */
  height: 36px !important;
}

/* Mobile status indicator - icon only, no text */
.wpl-inbox-row-mobile .wpl-inbox-status {
  margin-left: auto;  /* Push to right side */
  margin-right: 4px;  /* Small gap before action button */
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.wpl-inbox-row-mobile .wpl-inbox-status vaadin-icon {
  width: 12px !important;  /* Smaller icon for mobile */
  height: 12px !important;
}

/* Mobile action buttons - icon only */
.wpl-inbox-action-button-mobile {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.wpl-inbox-action-button-mobile vaadin-icon {
  width: 14px;
  height: 14px;
}

.wpl-inbox-action-button-mobile:hover {
  background: var(--wpl-gray-100) !important;
  transform: scale(1.1);
}

/* Ensure actions layout properly on mobile */
.wpl-inbox-row-mobile .wpl-inbox-actions {
  display: none;  /* Actions are added to header row instead */
}

/* Desktop-specific adjustments */
.wpl-inbox-row-desktop {
  min-height: 80px;
  padding: 0;  /* Padding controlled by inner mainContent layout */
  width: 100% !important;  /* Ensure full width on desktop */
  margin: 0 !important;
}

.wpl-inbox-row-desktop .wpl-inbox-subject {
  margin-bottom: 4px;  /* Space between subject and metadata */
}

.wpl-inbox-row-desktop .wpl-inbox-content {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Center content vertically */
}

/* Hide type label on desktop - colored border is sufficient */
.wpl-inbox-row-desktop .wpl-inbox-type-label {
  display: none !important;
}

/* Status indicator styling for desktop - always visible */
.wpl-inbox-row-desktop .wpl-inbox-status {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  flex-shrink: 0;
}

.wpl-inbox-row-desktop .wpl-inbox-status vaadin-icon {
  width: 14px !important;
  height: 14px !important;
}

/* Swipe gesture support for mobile */
@media (max-width: 768px) {
  .wpl-inbox-row {
    position: relative;
    transition: transform 0.3s ease;
  }

  .wpl-inbox-row.swiping-left {
    transform: translateX(-80px);
  }

  .wpl-inbox-row.swiping-right {
    transform: translateX(80px);
  }

  /* Swipe action indicators */
  .wpl-inbox-row::before,
  .wpl-inbox-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .wpl-inbox-row::before {
    left: 0;
    background: var(--lumo-success-color);
  }

  .wpl-inbox-row::after {
    right: 0;
    background: var(--wpl-error);
  }

  .wpl-inbox-row.swiping-right::before {
    opacity: 1;
  }

  .wpl-inbox-row.swiping-left::after {
    opacity: 1;
  }
}

/* Virtual scrolling container */
.wpl-inbox-list {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 100px; /* Ensure minimum height */
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 0 0 0 !important;  /* Top padding for spacing from header */
}

/* Scroller container */
.wpl-inbox-scroller {
  overflow-y: auto;
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wpl-inbox-list-virtual {
  position: relative;
  height: 100%;
}

/* Pull-to-refresh indicator */
.wpl-pull-to-refresh {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--wpl-red-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: all 0.3s ease;
}

.wpl-pull-to-refresh.visible {
  opacity: 1;
  top: 10px;
}

.wpl-pull-to-refresh.refreshing {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Empty state */
.wpl-inbox-empty {
  padding: 48px;
  text-align: center;
  color: var(--wpl-text-secondary);
}

.wpl-inbox-empty-icon {
  font-size: 64px;
  color: var(--wpl-gray-400);
  margin-bottom: 16px;
}

.wpl-inbox-empty-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--wpl-text-primary);
  margin-bottom: 8px;
}

.wpl-inbox-empty-message {
  font-size: 0.875rem;
  color: var(--wpl-text-tertiary);
}

/* Loading skeleton */
.wpl-inbox-skeleton {
  padding: 16px;
  border-bottom: 1px solid var(--wpl-gray-200);
}

.wpl-inbox-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wpl-inbox-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--wpl-gray-200) 25%, var(--wpl-gray-100) 50%, var(--wpl-gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.wpl-inbox-skeleton-content {
  flex: 1;
}

.wpl-inbox-skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, var(--wpl-gray-200) 25%, var(--wpl-gray-100) 50%, var(--wpl-gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

.wpl-inbox-skeleton-line:last-child {
  width: 60%;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   STATUS-SPECIFIC ICON STYLING
   Visual hierarchy through color and animation
   ============================================================================ */

/* NEW status - Blue with pulse animation (high priority) */
.wpl-inbox-status-new {
  color: #007AFF;
}

.wpl-inbox-status-new .wpl-pulse {
  animation: statusPulse 2s ease-in-out infinite;
}

/* ERROR status - Red with pulse animation (high priority) */
.wpl-inbox-status-error {
  color: #E1211A;
}

.wpl-inbox-status-error .wpl-pulse {
  animation: statusPulse 2s ease-in-out infinite;
}

/* DONE status - Green, static (medium-high priority) */
.wpl-inbox-status-done {
  color: #17C800;
}

/* VIEWED status - Gray, static (medium priority) */
.wpl-inbox-status-viewed {
  color: #6A6A6A;
}

/* CANCELED status - Darker gray for better visibility, static */
.wpl-inbox-status-canceled {
  color: #7A8591;
}

/* Pulse animation for high-priority status icons */
@keyframes statusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.85;
  }
}

/* ============================================================================
   COMPACT MODE STYLES
   Reduced spacing and smaller elements for compact view
   ============================================================================ */

.wpl-inbox-row-compact {
  min-height: 48px !important;
}

/* Desktop compact: remove vertical padding, keep horizontal */
.wpl-inbox-row-compact.wpl-inbox-row-desktop {
  padding: 0 !important;  /* Padding handled by inner mainContent */
}

/* Mobile compact: keep right padding for status icons */
.wpl-inbox-row-compact.wpl-inbox-row-mobile {
  padding: 0 12px 0 0 !important;  /* Right padding for icons */
}

.wpl-inbox-row-compact .wpl-inbox-avatar {
  width: 32px !important;
  height: 32px !important;
  margin-right: 8px !important;
}

.wpl-inbox-row-compact .wpl-inbox-subject {
  font-size: 0.875rem;
  line-height: 1.2;
}

.wpl-inbox-row-compact .wpl-inbox-sender {
  font-size: 0.75rem;
  line-height: 1.2;
}

.wpl-inbox-row-compact .wpl-inbox-time {
  font-size: 0.6875rem;
}

/* Compact mode content area - tighter spacing */
.wpl-inbox-row-compact .wpl-inbox-content {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wpl-inbox-row-compact .wpl-inbox-wipp-subtitle {
  font-size: 0.75rem;
  line-height: 1.2;
  margin-top: 0;
}

/* Remove any Vaadin default padding on inner content layouts in compact mode */
.wpl-inbox-row-compact .wpl-inbox-content vaadin-vertical-layout,
.wpl-inbox-row-compact .wpl-inbox-meta {
  padding: 0 !important;
  margin: 0 !important;
}

.wpl-inbox-row-compact .wpl-inbox-status vaadin-icon {
  width: 12px !important;
  height: 12px !important;
}

/* Mobile compact mode adjustments */
.wpl-inbox-row-mobile.wpl-inbox-row-compact {
  min-height: 52px !important;
}

.wpl-inbox-row-mobile.wpl-inbox-row-compact .wpl-inbox-avatar {
  width: 28px !important;
  height: 28px !important;
}

/* ============================================================================
   DISPLAY SETTINGS - HIDDEN ELEMENTS
   CSS classes for hiding optional elements based on user settings
   ============================================================================ */

/* Hide status icons when disabled */
.wpl-inbox-hide-status .wpl-inbox-status {
  display: none !important;
}

/* Hide type indicator (left border) when disabled */
.wpl-inbox-hide-type .wpl-inbox-type-indicator {
  display: none !important;
}

/* Hide preview text when disabled */
.wpl-inbox-hide-preview .wpl-inbox-preview {
  display: none !important;
}

/* Hide avatar when disabled */
.wpl-inbox-hide-avatar .wpl-inbox-avatar {
  display: none !important;
}

/* ============================================================================
   GROUPED WIPP ROW STYLES
   Styles for the grouped wipp inbox entry view
   ============================================================================ */

/* Grouped wipp row inherits base inbox row styles */
.wpl-inbox-wipp-row {
  /* Uses .wpl-inbox-row base styles */
}

/* Badge for multiple active cards */
.wpl-inbox-wipp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--wpl-red-primary, #E1211A);
  color: white;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  flex-shrink: 0;
  animation: badgePop 0.3s ease;
}

@keyframes badgePop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Card name subtitle */
.wpl-inbox-wipp-subtitle {
  color: var(--wpl-text-secondary, #6A6A6A);
  font-size: 14px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Completed wipp (no active cards) - muted styling */
.wpl-inbox-wipp-completed {
  opacity: 0.7;
}

.wpl-inbox-wipp-completed .wpl-inbox-subject {
  font-weight: 400 !important;
  color: var(--wpl-text-secondary, #6A6A6A);
}

.wpl-inbox-wipp-completed .wpl-inbox-wipp-subtitle {
  color: var(--wpl-text-tertiary, #8A8A8A);
}

/* Hover effect for grouped wipp rows */
.wpl-inbox-wipp-row:hover {
  background: var(--wpl-gray-50, #F9FAFB);
}

.wpl-inbox-wipp-row:hover:not(.wpl-inbox-wipp-completed) {
  transform: translateX(2px);
}

/* Mobile adjustments for grouped wipp row */
@media (max-width: 767px) {
  .wpl-inbox-wipp-badge {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    padding: 0 5px;
    margin-left: 6px;
  }

  .wpl-inbox-wipp-subtitle {
    font-size: 13px;
  }
}

/* Status icon styling within grouped row */
.wpl-inbox-wipp-row .wpl-inbox-status-icon {
  flex-shrink: 0;
  margin-left: 8px;
}

/* Avatar wrapper for grouped rows */
.wpl-inbox-wipp-row .wpl-inbox-avatar-wrapper {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

/* Meta section (right side) for desktop */
.wpl-inbox-wipp-row .wpl-inbox-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  flex-shrink: 0;
}


/* Full-width View Layouts */
/* === Inlined from ./components/full-width-views.css === */
/* ============================================================================
   FULL-WIDTH VIEWS - Edge-to-Edge Content Layout
   ============================================================================
   For list views and content that should extend edge-to-edge on mobile
   while maintaining proper spacing on desktop.

   Use cases: Inbox, Apps Grid, Search Results, Activity Feeds
   ============================================================================ */

/* Base full-width container - removes default padding */
.wpl-main-layout__content--full-width {
  /* Remove default padding on mobile */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;

  /* Keep bottom padding for bottom navigation clearance */
  padding-bottom: calc(var(--wpl-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

/* Desktop: Add back some padding for better readability */
@media (min-width: 1024px) {
  .wpl-main-layout__content--full-width {
    /* On desktop, add minimal top padding for visual separation */
    padding-top: var(--wpl-space-sm) !important;

    /* Keep horizontal padding on desktop for readability */
    padding-left: var(--wpl-space-lg) !important;
    padding-right: var(--wpl-space-lg) !important;

    /* Adjust bottom padding (no bottom nav on desktop) */
    padding-bottom: var(--wpl-space-lg) !important;
  }

  /* Optional: Max-width container for very wide screens */
  .wpl-main-layout__content--full-width > .wpl-inbox-view {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet (768px - 1023px): Intermediate spacing */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpl-main-layout__content--full-width {
    /* Small horizontal padding on tablets */
    padding-left: var(--wpl-space-sm) !important;
    padding-right: var(--wpl-space-sm) !important;
    padding-top: var(--wpl-space-sm) !important;
  }
}

/* ============================================================================
   VIEW-SPECIFIC FULL-WIDTH STYLES
   ============================================================================ */

/* Inbox View - Full width list */
.wpl-inbox-view {
  /* Remove any view-level margins */
  margin: 0 !important;
  width: 100% !important;
}

/* Remove the negative margin workaround from inbox */
.wpl-inbox-view > vaadin-vertical-layout {
  margin: 0 !important;
  width: 100% !important;
}

/* Inbox header should be edge-to-edge on mobile */
.wpl-inbox-header {
  /* Full width */
  width: 100%;
  margin: 0;

  /* Add internal padding for content */
  padding-left: var(--wpl-space-md);
  padding-right: var(--wpl-space-md);
  padding-top: var(--wpl-space-md);
  padding-bottom: var(--wpl-space-md);

  /* Sticky positioning */
  position: sticky;
  top: 0;
  z-index: var(--wpl-z-sticky);
  background-color: var(--wpl-bg-primary);

  /* Add subtle bottom border */
  border-bottom: 1px solid var(--wpl-border-light);
}

/* Desktop: Inbox header adjustments */
@media (min-width: 1024px) {
  .wpl-inbox-header {
    /* Remove horizontal padding on desktop since container has padding */
    padding-left: 0;
    padding-right: 0;
  }
}

/* Inbox list items - edge-to-edge on mobile */
.wpl-inbox-row {
  /* Full width */
  width: 100%;
  margin: 0;

  /* Internal padding for content */
  padding-left: var(--wpl-space-md);
  padding-right: var(--wpl-space-md);
}

/* Desktop: Adjust row padding */
@media (min-width: 1024px) {
  .wpl-inbox-row {
    /* Add rounded corners on desktop */
    border-radius: var(--wpl-radius-md);
    margin-bottom: var(--wpl-space-xs);

    /* Keep internal padding */
    padding-left: var(--wpl-space-lg);
    padding-right: var(--wpl-space-lg);
  }
}

/* Apps View - Grid should also be full width on mobile */
.wpl-apps-view {
  margin: 0 !important;
  width: 100% !important;
}

/* Apps grid container */
.wpl-apps-grid {
  /* Add internal padding for grid items */
  padding: var(--wpl-space-md);
  gap: var(--wpl-space-md);
}

@media (min-width: 1024px) {
  .wpl-apps-grid {
    /* Remove padding on desktop (container already has it) */
    padding: 0;
    gap: var(--wpl-space-lg);
  }
}

/* ============================================================================
   CONTAINED VIEWS - Standard Padding
   ============================================================================
   For forms, settings, and content that needs standard container padding
   ============================================================================ */

.wpl-main-layout__content--contained {
  /* Keep default padding behavior */
}

/* Profile views, settings, forms - need padding */
.wpl-profile-view,
.wpl-settings-view,
.wpl-form-view {
  /* These maintain standard container padding */
}

/* ============================================================================
   SMOOTH TRANSITIONS
   ============================================================================ */

/* Smooth transition when switching between views */
.wpl-main-layout__content {
  transition: padding var(--wpl-transition-fast);
}


/* Runtime UI Styles */
/* === Inlined from ./components/wpl-runtime.css === */
/**
 * WPLStyle v2.0 - Runtime View Component
 *
 * Modal-like runtime view for card execution
 * Features:
 * - Mobile bottom sheet pattern with slide-up animation
 * - Desktop centered modal with overlay
 * - Modern header with cancel/help buttons
 * - Progress indicators for multi-wipper workflows
 * - Sticky action bar for form controls
 * - Hide navigation tabs for distraction-free experience
 */

/* ============================================================================
   RUNTIME VIEW CONTAINER
   ============================================================================ */

.wpl-runtime-view {
  position: fixed;
  z-index: var(--wpl-z-modal);
  background: var(--wpl-bg-primary);

  /* Hide bottom nav tabs when runtime view is open */
  &.wpl-runtime-view--active ~ .wpl-bottom-nav {
    display: none;
  }
}

/* Mobile: Bottom sheet pattern */
@media (max-width: 767px) {
  .wpl-runtime-view {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-radius: var(--wpl-radius-xl) var(--wpl-radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    /* Slide-up animation */
    animation: slideUpFromBottom 0.3s ease-out;

    /* Scroll container */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @keyframes slideUpFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Desktop: Centered modal */
@media (min-width: 768px) {
  .wpl-runtime-view {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: var(--wpl-radius-xl);
    box-shadow: var(--wpl-shadow-lg);

    /* Fade in animation */
    animation: fadeInModal 0.25s ease-out;

    /* Scroll container */
    overflow-y: auto;
  }

  @keyframes fadeInModal {
    from {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* ============================================================================
   MODAL OVERLAY
   ============================================================================ */

.wpl-runtime-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--wpl-z-modal) - 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Fade animation */
  animation: fadeInOverlay 0.25s ease-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   RUNTIME HEADER (Simplified - icon-only buttons)
   ============================================================================ */

.wpl-runtime-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border);
  padding: var(--wpl-space-sm) var(--wpl-space-md);

  /* Flexbox layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-sm);

  /* Compact header height */
  min-height: 48px;
}

/* Header spacer to push buttons apart */
.wpl-runtime-header__spacer {
  flex: 1;
}

/* Header buttons - icon only styling */
.wpl-runtime-header__close {
  flex-shrink: 0;
  min-width: 40px;
  padding: var(--wpl-space-xs);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .wpl-runtime-header {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    min-height: 44px;
  }
}

/* Header action buttons */
.wpl-runtime-header__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--wpl-space-xs);
}

/* ============================================================================
   WIPP INFO BANNER
   ============================================================================ */

.wpl-runtime-info {
  background: var(--wpl-bg-secondary);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  border-bottom: 1px solid var(--wpl-border-light);

  /* Typography */
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);

  /* Flexbox for icon + text */
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

.wpl-runtime-info__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--wpl-gray-500);
}

/* Legacy wipp info styles */
.wpl-runtime-wipp-info {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-xs);
}

.wpl-runtime-wipp-title {
  font-size: 1rem;
  color: var(--lumo-body-text-color);
  font-weight: 500;
}

.wpl-runtime-wipp-version {
  font-size: 0.875rem;
  color: var(--lumo-secondary-text-color);
  padding: 2px 8px;
  background-color: var(--lumo-contrast-5pct);
  border-radius: var(--wpl-radius-sm);
  display: inline-block;
  width: fit-content;
}

/* ============================================================================
   TITLE SECTION (Simplified)
   ============================================================================ */

.wpl-runtime-title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpl-space-xs);
  padding: var(--wpl-space-md) 0;
}

.wpl-runtime-title {
  font-size: var(--wpl-font-size-xl);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
  margin: 0;
}

/* ============================================================================
   STATUS ICON (Simplified - icon only, no badge)
   ============================================================================ */

.wpl-runtime-status-icon {
  width: 24px;
  height: 24px;
}

/* Active state - Blue */
.wpl-runtime-status-icon--active {
  color: #1565C0;
}

/* Read-only state - Gray */
.wpl-runtime-status-icon--readonly {
  color: var(--wpl-gray-600);
}

/* Overview state - Green */
.wpl-runtime-status-icon--overview {
  color: #2E7D32;
}

/* ============================================================================
   DATA CARD (Full-width)
   ============================================================================ */

.wpl-runtime-data-card {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border-light);
  border-radius: var(--wpl-radius-md);
  padding: var(--wpl-space-md);
  width: 100%;
  box-sizing: border-box;
  /* Prevent overflow from child elements */
  overflow: hidden;
}

.wpl-runtime-card__title {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  margin-bottom: var(--wpl-space-md);
  display: block;
}

/* Ensure FormLayout inside data card respects container width */
.wpl-runtime-data-card vaadin-form-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure VerticalLayout inside data card respects container width */
.wpl-runtime-data-card vaadin-vertical-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* ============================================================================
   INFO CARD (Read-only field display)
   ============================================================================ */

.wpl-runtime-info-card {
  padding: var(--wpl-space-sm) 0;
  border-bottom: 1px solid var(--wpl-border-light);
  /* Ensure info cards respect container width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.wpl-runtime-info-card:last-child {
  border-bottom: none;
}

.wpl-runtime-info-card-label {
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--wpl-space-xs);
  display: block;
}

.wpl-runtime-info-card-value {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);
  /* Ensure all widget values respect container width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Override Vaadin field styles for read-only display */
.wpl-runtime-info-card-value::part(input-field) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
  /* Ensure input field respects container */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wpl-runtime-info-card-value input,
.wpl-runtime-info-card-value textarea {
  padding: 0 !important;
  color: var(--wpl-text-primary) !important;
  -webkit-text-fill-color: var(--wpl-text-primary) !important;
  /* Prevent input overflow */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure all Vaadin components inside data card respect container width */
.wpl-runtime-data-card vaadin-text-field,
.wpl-runtime-data-card vaadin-text-area,
.wpl-runtime-data-card vaadin-number-field,
.wpl-runtime-data-card vaadin-integer-field,
.wpl-runtime-data-card vaadin-date-picker,
.wpl-runtime-data-card vaadin-combo-box,
.wpl-runtime-data-card vaadin-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================================
   RUNTIME CONTENT
   ============================================================================ */

.wpl-runtime-content {
  padding: var(--wpl-space-md);

  /* Add padding bottom for sticky action bar */
  padding-bottom: calc(80px + var(--wpl-space-xl));
}

/* Content sections */
.wpl-runtime-section {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border-light);
  border-radius: var(--wpl-radius-md);
  padding: var(--wpl-space-md);
  margin-bottom: var(--wpl-space-md);
}

/* ============================================================================
   MODE INDICATOR CARD
   ============================================================================ */

.wpl-runtime-mode-card {
  border-left: 4px solid var(--lumo-primary-color);
}

.wpl-runtime-mode-card.wpl-mode-readonly {
  border-left-color: var(--lumo-primary-color);
  background-color: var(--lumo-primary-color-10pct);
}

.wpl-runtime-mode-card.wpl-mode-overview {
  border-left-color: var(--lumo-success-color);
  background-color: var(--lumo-success-color-10pct);
}

.wpl-runtime-mode-content {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-md);
  padding: var(--wpl-space-md);
}

.wpl-runtime-mode-icon {
  color: var(--lumo-primary-color);
  width: 24px;
  height: 24px;
}

.wpl-mode-overview .wpl-runtime-mode-icon {
  color: var(--lumo-success-color);
}

.wpl-runtime-mode-text {
  font-weight: 500;
  color: var(--lumo-body-text-color);
}

/* ============================================================================
   PROGRESS CARD
   ============================================================================ */

.wpl-runtime-progress-card {
  background: linear-gradient(to right,
    var(--wpl-bg-card),
    var(--wpl-bg-grouped));
}

.wpl-runtime-progress-content {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-md);
}

.wpl-runtime-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--lumo-contrast-10pct);
  border-radius: var(--wpl-radius-md);
  overflow: hidden;
  position: relative;
}

.wpl-runtime-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--wpl-primary-color),
    var(--wpl-primary-color-dark));
  border-radius: var(--wpl-radius-md);
  transition: width 0.3s ease;
}

.wpl-runtime-progress-text {
  font-size: 0.9375rem;
  color: var(--lumo-body-text-color);
  font-weight: 500;
}

.wpl-runtime-complete-mode {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--wpl-primary-color-10pct);
  color: var(--wpl-primary-color);
  border-radius: var(--wpl-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   FORM SECTIONS
   ============================================================================ */

.wpl-runtime-form-section {
  padding: var(--wpl-space-md) 0;
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

.wpl-runtime-form-section:last-child {
  border-bottom: none;
}

.wpl-runtime-field {
  margin-bottom: var(--wpl-space-md);
}

/* Mobile optimization for form fields */
@media (max-width: 768px) {
  .wpl-runtime-field vaadin-text-field,
  .wpl-runtime-field vaadin-number-field,
  .wpl-runtime-field vaadin-date-picker,
  .wpl-runtime-field vaadin-combo-box {
    width: 100% !important;
  }

  .wpl-runtime-field input {
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 44px; /* iOS touch target */
  }
}

/* ============================================================================
   CURRENCY PREFIX STYLING
   ============================================================================ */

.wpl-currency-prefix {
  color: var(--lumo-secondary-text-color);
  font-weight: 500;
  padding-right: var(--wpl-space-xs);
}

/* ============================================================================
   STICKY ACTION BAR
   ============================================================================ */

.wpl-runtime-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--wpl-bg-primary);
  border-top: 1px solid var(--wpl-border);
  padding: var(--wpl-space-md);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

  /* Ensure it stays above content */
  z-index: 5;
}

/* Button layout */
.wpl-runtime-actions__buttons {
  display: flex;
  gap: var(--wpl-space-sm);
  justify-content: flex-end;
}

/* Mobile: Stack buttons */
@media (max-width: 767px) {
  .wpl-runtime-actions__buttons {
    flex-direction: column-reverse;
  }

  .wpl-runtime-actions__buttons .wpl-button {
    width: 100%;
    height: var(--wpl-button-height-mobile);
  }
}

/* Desktop: Horizontal buttons */
@media (min-width: 768px) {
  .wpl-runtime-actions__buttons {
    flex-direction: row;
  }

  .wpl-runtime-actions__buttons .wpl-button {
    min-width: 120px;
  }
}

/* Legacy action bar */
.wpl-runtime-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--wpl-bg-card);
  padding: var(--wpl-space-md);
  border-top: 1px solid var(--lumo-contrast-10pct);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: var(--wpl-space-lg);
}

@media (max-width: 768px) {
  .wpl-runtime-action-bar {
    padding: var(--wpl-space-sm);
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0;
    right: 0;
  }
}

.wpl-runtime-button-group {
  display: flex;
  gap: var(--wpl-space-md);
}

@media (max-width: 480px) {
  .wpl-runtime-button-group {
    flex-direction: column-reverse;
  }

  .wpl-runtime-button-group vaadin-button {
    width: 100%;
  }
}

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Close animation */
.wpl-runtime-view--closing {
  animation: slideDownToBottom 0.3s ease-in forwards;
}

@keyframes slideDownToBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Desktop close animation */
@media (min-width: 768px) {
  .wpl-runtime-view--closing {
    animation: fadeOutModal 0.25s ease-in forwards;
  }

  @keyframes fadeOutModal {
    from {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    to {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
  }
}

/* ============================================================================
   MESSAGE CARD
   ============================================================================ */

.wpl-runtime-message {
  padding: var(--wpl-space-lg);
  background-color: var(--lumo-contrast-5pct);
  border-radius: var(--wpl-radius-md);
  text-align: center;
  color: var(--lumo-secondary-text-color);
  font-style: italic;
}

/* ============================================================================
   FIELD STATES
   ============================================================================ */

/* Read-only fields */
.wpl-runtime-field[readonly],
.wpl-runtime-field vaadin-text-field[readonly],
.wpl-runtime-field vaadin-number-field[readonly] {
  background-color: var(--lumo-contrast-5pct);
}

.wpl-runtime-field[readonly] input {
  color: var(--lumo-secondary-text-color);
  cursor: default;
}

/* Required fields */
.wpl-runtime-field[required]::part(label)::after {
  content: " *";
  color: var(--lumo-error-color);
}

/* Error state */
.wpl-runtime-field[invalid] {
  --vaadin-input-field-border-color: var(--lumo-error-color);
  --vaadin-input-field-background-color: var(--lumo-error-color-10pct);
}

/* ============================================================================
   TEXT AREA STYLING
   ============================================================================ */

.wpl-text-area {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* Prevent iOS zoom */
}

.wpl-text-area textarea {
  min-height: 120px;
  resize: vertical;
  padding: var(--wpl-space-sm);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--wpl-radius-md);
  transition: border-color 0.2s;
}

.wpl-text-area textarea:focus {
  border-color: var(--wpl-primary-color);
  outline: none;
  box-shadow: 0 0 0 1px var(--wpl-primary-color);
}

/* ============================================================================
   TOGGLE SWITCH IN RUNTIME
   ============================================================================ */

.wpl-runtime-field vaadin-checkbox {
  margin: var(--wpl-space-md) 0;
}

/* ============================================================================
   RESPONSIVE CARDS
   ============================================================================ */

@media (max-width: 768px) {
  .wpl-card {
    border-radius: 0;
    margin-left: calc(-1 * var(--wpl-space-sm));
    margin-right: calc(-1 * var(--wpl-space-sm));
  }

  .wpl-card-standard {
    box-shadow: none;
    border-top: 1px solid var(--lumo-contrast-10pct);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
  }
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.wpl-runtime-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wpl-space-xl);
  color: var(--lumo-secondary-text-color);
}

.wpl-runtime-loading vaadin-progress-bar {
  width: 200px;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Small phones */
@media (max-width: 374px) {
  .wpl-runtime-header__title {
    font-size: var(--wpl-font-size-body);
  }

  .wpl-runtime-content {
    padding: var(--wpl-space-sm);
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpl-runtime-view {
    max-width: 600px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .wpl-runtime-view {
    max-width: 900px;
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus visible for keyboard navigation */
.wpl-runtime-view:focus-visible,
.wpl-runtime-header__cancel:focus-visible,
.wpl-runtime-header__help:focus-visible,
.wpl-runtime-field:focus-visible,
.wpl-runtime-actions button:focus-visible {
  outline: 2px solid var(--wpl-primary-color);
  outline-offset: 2px;
}

/* Escape key hint */
.wpl-runtime-escape-hint {
  position: absolute;
  top: var(--wpl-space-sm);
  right: var(--wpl-space-sm);
  font-size: var(--wpl-font-size-tiny);
  color: var(--wpl-text-tertiary);
  opacity: 0.6;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .wpl-runtime-progress-bar {
    border: 1px solid currentColor;
  }

  .wpl-runtime-progress-fill {
    background: currentColor;
  }

  .wpl-runtime-mode-card {
    border: 2px solid currentColor;
  }

  .wpl-runtime-section {
    border: 2px solid currentColor;
  }
}

/* Reduced motion for animations */
@media (prefers-reduced-motion: reduce) {
  .wpl-runtime-view * {
    animation: none !important;
    transition: none !important;
  }

  .wpl-runtime-progress-fill {
    transition: none;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .wpl-runtime-header,
  .wpl-runtime-actions,
  .wpl-runtime-action-bar,
  .wpl-runtime-overlay {
    display: none;
  }

  .wpl-runtime-view {
    position: static;
    padding: 0;
    background: white;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
  }

  .wpl-card {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-runtime-view {
    background: var(--wpl-gray-900);
    color: var(--wpl-gray-100);
  }

  .wpl-runtime-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .wpl-runtime-header,
  .wpl-runtime-actions,
  .wpl-runtime-action-bar {
    background: var(--wpl-gray-900);
    border-color: var(--wpl-gray-700);
  }

  .wpl-runtime-header__title {
    color: var(--wpl-gray-100);
  }

  .wpl-runtime-info,
  .wpl-runtime-section {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-runtime-progress-bar {
    background-color: var(--lumo-contrast-20pct);
  }

  .wpl-runtime-mode-card.wpl-mode-readonly {
    background-color: rgba(33, 150, 243, 0.1);
  }

  .wpl-runtime-mode-card.wpl-mode-overview {
    background-color: rgba(76, 175, 80, 0.1);
  }

  /* Dark mode title and data card */
  .wpl-runtime-title,
  .wpl-runtime-card__title,
  .wpl-runtime-info-card-value {
    color: var(--wpl-gray-100);
  }

  .wpl-runtime-data-card {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-runtime-info-card {
    border-color: var(--wpl-gray-700);
  }

  /* Dark mode status icons */
  .wpl-runtime-status-icon--active {
    color: #64B5F6;
  }

  .wpl-runtime-status-icon--readonly {
    color: var(--wpl-gray-400);
  }

  .wpl-runtime-status-icon--overview {
    color: #81C784;
  }
}

@media (prefers-color-scheme: dark) {
  .wpl-runtime-view {
    background-color: var(--lumo-base-color);
  }

  .wpl-runtime-action-bar {
    background: var(--lumo-contrast-5pct);
    border-top-color: var(--lumo-contrast-20pct);
  }
}

/* ============================================================================
   COMBOBOX OVERLAY Z-INDEX FIX

   When ComboBox is inside a modal (wpl-runtime-view), the dropdown overlay
   is attached to document.body and needs a higher z-index to appear above
   the modal backdrop (z-index: 1000).
   ============================================================================ */

vaadin-combo-box-overlay {
  z-index: calc(var(--wpl-z-modal) + 10) !important;
}

/* Also fix Select and DatePicker overlays for consistency */
vaadin-select-overlay,
vaadin-date-picker-overlay {
  z-index: calc(var(--wpl-z-modal) + 10) !important;
}

/* ============================================================================
   ACCESS DENIED PANEL

   Displays user-friendly access denial messages with:
   - Prominent icon indicating the denial reason
   - Clear title and message
   - Action buttons (Go to Inbox, Go Back)
   - Responsive design for mobile and desktop
   - Dark mode support
   ============================================================================ */

.wpl-access-denied-panel {
  min-height: 300px;
  padding: var(--wpl-space-xl);
  text-align: center;
  background: var(--wpl-bg-primary);
  border-radius: var(--wpl-radius-lg);
}

/* Icon container */
.wpl-access-denied-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--wpl-space-lg);
  background: var(--wpl-bg-secondary);
  border-radius: 50%;
}

.wpl-access-denied-panel__icon-svg {
  width: 40px;
  height: 40px;
  color: var(--wpl-text-secondary);
}

/* Title styling */
.wpl-access-denied-panel__title {
  font-size: var(--wpl-font-size-xl);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
  margin: 0 0 var(--wpl-space-sm);
  line-height: var(--wpl-line-height-tight);
}

/* Message styling */
.wpl-access-denied-panel__message {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);
  margin: 0 0 var(--wpl-space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Sub-message styling */
.wpl-access-denied-panel__sub-message {
  display: block;
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-tertiary);
  margin-bottom: var(--wpl-space-md);
}

/* Actions container */
.wpl-access-denied-panel__actions {
  gap: var(--wpl-space-md);
  margin-top: var(--wpl-space-md);
}

/* Button styling */
.wpl-access-denied-panel__btn-inbox,
.wpl-access-denied-panel__btn-back {
  min-width: 140px;
}

/* ============================================================================
   ACCESS DENIED PANEL - VARIANTS
   ============================================================================ */

/* Compact variant - smaller spacing */
.wpl-access-denied-panel--compact {
  min-height: 200px;
  padding: var(--wpl-space-md);
}

.wpl-access-denied-panel--compact .wpl-access-denied-panel__icon {
  width: 60px;
  height: 60px;
  margin-bottom: var(--wpl-space-md);
}

.wpl-access-denied-panel--compact .wpl-access-denied-panel__icon-svg {
  width: 28px;
  height: 28px;
}

.wpl-access-denied-panel--compact .wpl-access-denied-panel__title {
  font-size: var(--wpl-font-size-lg);
}

.wpl-access-denied-panel--compact .wpl-access-denied-panel__message {
  font-size: var(--wpl-font-size-small);
  margin-bottom: var(--wpl-space-md);
}

/* Fullscreen variant - fills viewport */
.wpl-access-denied-panel--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--wpl-z-modal);
  border-radius: 0;
  min-height: 100vh;
}

/* Card variant - contained within card-like container */
.wpl-access-denied-panel--card {
  border: 1px solid var(--wpl-border-light);
  box-shadow: var(--wpl-shadow-sm);
  max-width: 500px;
  margin: var(--wpl-space-xl) auto;
}

/* ============================================================================
   ACCESS DENIED PANEL - RESPONSIVE
   ============================================================================ */

/* Mobile adjustments */
@media (max-width: 767px) {
  .wpl-access-denied-panel {
    padding: var(--wpl-space-lg) var(--wpl-space-md);
    min-height: 250px;
  }

  .wpl-access-denied-panel__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--wpl-space-md);
  }

  .wpl-access-denied-panel__icon-svg {
    width: 32px;
    height: 32px;
  }

  .wpl-access-denied-panel__title {
    font-size: var(--wpl-font-size-lg);
  }

  .wpl-access-denied-panel__message {
    font-size: var(--wpl-font-size-body);
  }

  .wpl-access-denied-panel__actions {
    flex-direction: column-reverse;
    width: 100%;
  }

  .wpl-access-denied-panel__btn-inbox,
  .wpl-access-denied-panel__btn-back {
    width: 100%;
    min-width: unset;
  }

  /* Compact variant on mobile */
  .wpl-access-denied-panel--compact {
    min-height: 180px;
    padding: var(--wpl-space-md) var(--wpl-space-sm);
  }

  .wpl-access-denied-panel--compact .wpl-access-denied-panel__icon {
    width: 48px;
    height: 48px;
  }

  .wpl-access-denied-panel--compact .wpl-access-denied-panel__icon-svg {
    width: 24px;
    height: 24px;
  }
}

/* Small phones */
@media (max-width: 374px) {
  .wpl-access-denied-panel__title {
    font-size: var(--wpl-font-size-body);
  }

  .wpl-access-denied-panel__message {
    font-size: var(--wpl-font-size-small);
  }
}

/* ============================================================================
   ACCESS DENIED PANEL - DARK MODE
   ============================================================================ */

[theme~="dark"] .wpl-access-denied-panel {
  background: var(--wpl-gray-900);
}

[theme~="dark"] .wpl-access-denied-panel__icon {
  background: var(--wpl-gray-800);
}

[theme~="dark"] .wpl-access-denied-panel__icon-svg {
  color: var(--wpl-gray-400);
}

[theme~="dark"] .wpl-access-denied-panel__title {
  color: var(--wpl-gray-100);
}

[theme~="dark"] .wpl-access-denied-panel__message {
  color: var(--wpl-gray-400);
}

[theme~="dark"] .wpl-access-denied-panel__sub-message {
  color: var(--wpl-gray-500);
}

[theme~="dark"] .wpl-access-denied-panel--card {
  border-color: var(--wpl-gray-700);
  background: var(--wpl-gray-800);
}

@media (prefers-color-scheme: dark) {
  .wpl-access-denied-panel {
    background-color: var(--lumo-base-color);
  }

  .wpl-access-denied-panel__icon {
    background: var(--lumo-contrast-10pct);
  }

  .wpl-access-denied-panel__icon-svg {
    color: var(--lumo-secondary-text-color);
  }
}

/* ============================================================================
   ACCESS DENIED PANEL - ACCESSIBILITY
   ============================================================================ */

/* Focus visible for keyboard navigation */
.wpl-access-denied-panel:focus-visible {
  outline: 2px solid var(--wpl-primary-color);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-access-denied-panel__icon {
    border: 2px solid currentColor;
  }

  .wpl-access-denied-panel--card {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-access-denied-panel * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   ACCESS DENIED PANEL - PRINT STYLES
   ============================================================================ */

@media print {
  .wpl-access-denied-panel__actions {
    display: none;
  }

  .wpl-access-denied-panel--fullscreen {
    position: static;
    min-height: auto;
  }

  .wpl-access-denied-panel {
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}



/* Setup View Styles */
/* === Inlined from ./components/wpl-setup.css === */
/*
 * WPLStyle v2.0 - Setup View Component
 *
 * Modal-like setup view with focused workflow initiation
 * Features:
 * - Mobile bottom sheet pattern with slide-up animation
 * - Desktop centered modal with overlay
 * - Modern header with cancel/help buttons
 * - Progress indicators for multi-page flows
 * - Sticky action bar for form controls
 * - Hide navigation tabs for distraction-free experience
 */

/* ============================================================================
   SETUP VIEW CONTAINER
   ============================================================================ */

.wpl-setup-view {
  position: fixed;
  z-index: var(--wpl-z-modal);
  background: var(--wpl-bg-primary);

  /* Flexbox layout for proper header/content/footer structure */
  display: flex;
  flex-direction: column;

  /* Hide bottom nav tabs when setup view is open */
  &.wpl-setup-view--active ~ .wpl-bottom-nav {
    display: none;
  }
}

/* Mobile: Bottom sheet pattern */
@media (max-width: 767px) {
  .wpl-setup-view {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-radius: var(--wpl-radius-xl) var(--wpl-radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    /* Slide-up animation */
    animation: slideUpFromBottom 0.3s ease-out;

    /* NO overflow here - content area handles scrolling */
    overflow: hidden;
  }

  @keyframes slideUpFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Desktop: Centered modal */
@media (min-width: 768px) {
  .wpl-setup-view {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: var(--wpl-radius-xl);
    box-shadow: var(--wpl-shadow-lg);

    /* Fade in animation */
    animation: fadeIn 0.25s ease-out;

    /* NO overflow here - content area handles scrolling */
    overflow: hidden;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* ============================================================================
   MODAL OVERLAY
   ============================================================================ */

.wpl-setup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--wpl-z-modal) - 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Fade animation */
  animation: fadeInOverlay 0.25s ease-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   SETUP HEADER
   ============================================================================ */

.wpl-setup-header {
  /* No sticky needed - parent uses flexbox */
  flex-shrink: 0;
  z-index: 10;
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border);
  padding: var(--wpl-space-md);

  /* Flexbox layout for internal content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-md);

  /* Ensure header stays visible */
  min-height: 56px;
}

/* Header spacer to push buttons apart */
.wpl-setup-header__spacer {
  flex: 1;
}

/* Header buttons - icon only styling */
.wpl-setup-header__close {
  flex-shrink: 0;
  min-width: 40px;
  padding: var(--wpl-space-xs);
}

.wpl-setup-header__help {
  flex-shrink: 0;
  min-width: 40px;
  padding: var(--wpl-space-xs);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .wpl-setup-header {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    min-height: 44px;
  }
}

/* ============================================================================
   TITLE SECTION (Simplified)
   ============================================================================ */

.wpl-setup-title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpl-space-xs);
  padding: var(--wpl-space-md) 0;
}

.wpl-setup-title {
  font-size: var(--wpl-font-size-xl);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
  margin: 0;
}

/* ============================================================================
   WIPP INFO BANNER
   ============================================================================ */

.wpl-setup-info {
  background: var(--wpl-bg-secondary);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  border-bottom: 1px solid var(--wpl-border-light);

  /* Typography */
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);

  /* Flexbox for icon + text */
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

.wpl-setup-info__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--wpl-gray-500);
}

/* ============================================================================
   PROGRESS INDICATOR
   ============================================================================ */

.wpl-setup-progress {
  padding: var(--wpl-space-md);
  background: var(--wpl-bg-secondary);
  border-radius: var(--wpl-radius-md);
  margin: var(--wpl-space-md);
}

.wpl-setup-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--wpl-space-sm);
}

.wpl-setup-progress__title {
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
}

.wpl-setup-progress__step {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
}

/* Progress dots */
.wpl-setup-progress__dots {
  display: flex;
  gap: var(--wpl-space-sm);
  justify-content: center;
  align-items: center;
}

.wpl-setup-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wpl-gray-300);
  transition: all var(--wpl-transition-fast);
}

.wpl-setup-progress__dot--active {
  width: 24px;
  border-radius: 4px;
  background: var(--wpl-red-primary);
}

.wpl-setup-progress__dot--completed {
  background: var(--wpl-gray-600);
}

/* Progress bar alternative */
.wpl-setup-progress__bar {
  height: 4px;
  background: var(--wpl-gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--wpl-space-sm);
}

.wpl-setup-progress__bar-fill {
  height: 100%;
  background: var(--wpl-red-primary);
  transition: width var(--wpl-transition-normal);
  border-radius: 2px;
}

/* ============================================================================
   SETUP CONTENT
   ============================================================================ */

.wpl-setup-content {
  padding: var(--wpl-space-md);

  /* Flex grow to fill available space */
  flex: 1;

  /* Make this the scrollable area */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Padding bottom for visual breathing room (action bar is outside) */
  padding-bottom: var(--wpl-space-md);
}

/* Form sections with cards */
.wpl-setup-section {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border-light);
  border-radius: var(--wpl-radius-md);
  padding: var(--wpl-space-md);
  margin-bottom: var(--wpl-space-md);
}

.wpl-setup-section__title {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  margin-bottom: var(--wpl-space-md);
}

/* ============================================================================
   FORM LAYOUT AND VAADIN COMPONENTS
   ============================================================================
   Ensure consistent styling for all form fields in the setup view.
   This matches the styling from wpl-runtime.css for consistency.
   ============================================================================ */

/* Ensure FormLayout inside setup section respects container width */
.wpl-setup-section vaadin-form-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure VerticalLayout inside setup section respects container width */
.wpl-setup-section vaadin-vertical-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* Ensure all Vaadin form components respect container width and have consistent styling */
.wpl-setup-section vaadin-text-field,
.wpl-setup-section vaadin-text-area,
.wpl-setup-section vaadin-number-field,
.wpl-setup-section vaadin-integer-field,
.wpl-setup-section vaadin-date-picker,
.wpl-setup-section vaadin-combo-box,
.wpl-setup-section vaadin-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure WPL components also respect container width */
.wpl-setup-section .wpl-text-field,
.wpl-setup-section .wpl-number-field,
.wpl-setup-section .wpl-text-area {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix for FormLayout column spanning - ensure full width items fill properly */
.wpl-setup-section vaadin-form-layout > [colspan="2"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure input fields inside Vaadin components fill their container */
.wpl-setup-section vaadin-text-field::part(input-field),
.wpl-setup-section vaadin-text-area::part(input-field),
.wpl-setup-section vaadin-number-field::part(input-field),
.wpl-setup-section vaadin-date-picker::part(input-field),
.wpl-setup-section vaadin-combo-box::part(input-field) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Consistent label styling for ALL Vaadin form components in setup view */
/* This ensures plain Vaadin components (without WPL classes) have the same look */
.wpl-setup-section vaadin-text-field::part(label),
.wpl-setup-section vaadin-text-area::part(label),
.wpl-setup-section vaadin-number-field::part(label),
.wpl-setup-section vaadin-date-picker::part(label),
.wpl-setup-section vaadin-combo-box::part(label),
.wpl-setup-section vaadin-select::part(label) {
  /* Typography - matches WPL component styling */
  font-size: 13px;
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);
  /* Spacing - consistent gap between label and input */
  margin-bottom: 8px;
  /* Always above input (mobile pattern) */
  display: block;
}

/* Input field styling for consistent appearance */
/* CRITICAL: Use !important to override Vaadin internal styles that collapse the input-field */
.wpl-setup-section vaadin-text-field::part(input-field),
.wpl-setup-section vaadin-number-field::part(input-field),
.wpl-setup-section vaadin-date-picker::part(input-field),
.wpl-setup-section vaadin-combo-box::part(input-field),
.wpl-setup-section vaadin-select::part(input-field) {
  /* Border styling - visible border for input fields */
  border: 1px solid #CCCCCC;
  border-radius: var(--wpl-radius-md);
  /* Background */
  background-color: var(--wpl-bg-primary);
  /* Box model */
  box-sizing: border-box;
  /* CRITICAL: Enforce minimum height with !important to override Vaadin defaults */
  /* This prevents label strikethrough when input-field collapses */
  min-height: 44px !important;
  height: auto;
}

/* Text area needs special handling - height auto for multi-line */
.wpl-setup-section vaadin-text-area::part(input-field) {
  /* Border styling - visible border for input fields */
  border: 1px solid #CCCCCC;
  border-radius: var(--wpl-radius-md);
  /* Background */
  background-color: var(--wpl-bg-primary);
  /* Box model */
  box-sizing: border-box;
  /* Text areas should expand based on content */
  min-height: 100px;
}

/* Use Vaadin CSS custom properties to set height instead of direct styling */
/* This ensures proper internal layout calculation */
.wpl-setup-section vaadin-text-field,
.wpl-setup-section vaadin-number-field,
.wpl-setup-section vaadin-date-picker,
.wpl-setup-section vaadin-combo-box,
.wpl-setup-section vaadin-select {
  --vaadin-input-field-height: var(--wpl-input-height, 44px);
  /* CRITICAL: Also set --lumo-text-field-size which is used by vaadin-input-container */
  --lumo-text-field-size: var(--wpl-input-height, 44px);
}

/* CRITICAL FIX: Target the native input element inside the shadow DOM */
/* The input element needs explicit min-height to prevent collapse */
.wpl-setup-section vaadin-text-field > input,
.wpl-setup-section vaadin-number-field > input {
  min-height: 44px !important;
  height: var(--wpl-input-height, 44px) !important;
  box-sizing: border-box !important;
}

/* Also ensure the host element's ::before pseudo-element has proper height */
/* This is used by Vaadin for vertical alignment and determines the field height */
.wpl-setup-section vaadin-text-field::before,
.wpl-setup-section vaadin-number-field::before {
  height: 44px !important;
  min-height: 44px !important;
}

/* Focus state for setup view form fields */
.wpl-setup-section vaadin-text-field:focus-within::part(input-field),
.wpl-setup-section vaadin-text-area:focus-within::part(input-field),
.wpl-setup-section vaadin-number-field:focus-within::part(input-field),
.wpl-setup-section vaadin-date-picker:focus-within::part(input-field),
.wpl-setup-section vaadin-combo-box:focus-within::part(input-field) {
  border: 2px solid var(--wpl-red-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1);
}

/* Multi-page transitions */
.wpl-setup-page {
  animation: fadeInPage 0.3s ease-out;
}

.wpl-setup-page--hidden {
  display: none;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================================
   FIXED ACTION BAR (Bottom of modal, outside scroll area)
   ============================================================================ */

.wpl-setup-actions {
  /* No sticky needed - this element is placed outside the scrollable content */
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--wpl-bg-primary);
  border-top: 1px solid var(--wpl-border);
  padding: var(--wpl-space-md);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

  /* Ensure it stays above content */
  z-index: 5;
}

/* Button layout */
.wpl-setup-actions__buttons {
  display: flex;
  gap: var(--wpl-space-sm);
  justify-content: flex-end;
}

/* Mobile: Stack buttons */
@media (max-width: 767px) {
  .wpl-setup-actions__buttons {
    flex-direction: column-reverse;
  }

  .wpl-setup-actions__buttons .wpl-button {
    width: 100%;
    height: var(--wpl-button-height-mobile);
  }
}

/* Desktop: Horizontal buttons */
@media (min-width: 768px) {
  .wpl-setup-actions__buttons {
    flex-direction: row;
  }

  .wpl-setup-actions__buttons .wpl-button {
    min-width: 120px;
  }
}

/* ============================================================================
   FORM VALIDATION STATES
   ============================================================================ */

.wpl-setup-field--error {
  /* Error state for form fields */
  --vaadin-input-field-border-color: var(--wpl-error);
}

.wpl-setup-field__error {
  color: var(--wpl-error);
  font-size: var(--wpl-font-size-small);
  margin-top: var(--wpl-space-xs);
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.wpl-setup-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wpl-space-xxl);
  min-height: 300px;
}

.wpl-setup-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--wpl-gray-200);
  border-top-color: var(--wpl-red-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.wpl-setup-loading__text {
  margin-top: var(--wpl-space-md);
  color: var(--wpl-text-secondary);
  font-size: var(--wpl-font-size-body);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus styles */
.wpl-setup-view:focus-visible,
.wpl-setup-header__cancel:focus-visible,
.wpl-setup-header__help:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* Escape key hint */
.wpl-setup-escape-hint {
  position: absolute;
  top: var(--wpl-space-sm);
  right: var(--wpl-space-sm);
  font-size: var(--wpl-font-size-tiny);
  color: var(--wpl-text-tertiary);
  opacity: 0.6;
}

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Close animation */
.wpl-setup-view--closing {
  animation: slideDownToBottom 0.3s ease-in forwards;
}

@keyframes slideDownToBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Desktop close animation */
@media (min-width: 768px) {
  .wpl-setup-view--closing {
    animation: fadeOut 0.25s ease-in forwards;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    to {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Small phones */
@media (max-width: 374px) {
  .wpl-setup-header__title {
    font-size: var(--wpl-font-size-body);
  }

  .wpl-setup-content {
    padding: var(--wpl-space-sm);
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpl-setup-view {
    max-width: 600px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .wpl-setup-view {
    max-width: 900px;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-setup-view {
    background: var(--wpl-gray-900);
    color: var(--wpl-gray-100);
  }

  .wpl-setup-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .wpl-setup-header,
  .wpl-setup-actions {
    background: var(--wpl-gray-900);
    border-color: var(--wpl-gray-700);
  }

  .wpl-setup-info,
  .wpl-setup-progress {
    background: var(--wpl-gray-800);
  }

  .wpl-setup-section {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  /* Dark mode title section */
  .wpl-setup-title {
    color: var(--wpl-gray-100);
  }
}


/* Overview View Styles */
/* === Inlined from ./components/wpl-overview.css === */
/*
 * WPLStyle v2.0 - Overview View Component
 *
 * Modal-like overview view for wipp runtime instances
 * Features:
 * - Mobile bottom sheet pattern with slide-up animation
 * - Desktop centered modal with overlay
 * - Modern header with close/help buttons
 * - Card-based layout for wipp info and status
 * - Status badges with state-specific styling
 * - Sticky action bar for form controls
 * - Hide navigation tabs for distraction-free experience
 */

/* ============================================================================
   OVERVIEW VIEW CONTAINER
   ============================================================================ */

.wpl-overview-view {
  position: fixed;
  z-index: var(--wpl-z-modal);
  background: var(--wpl-bg-primary);

  /* Hide bottom nav tabs when overview view is open */
  &.wpl-overview-view--active ~ .wpl-bottom-nav {
    display: none;
  }
}

/* Mobile: Bottom sheet pattern */
@media (max-width: 767px) {
  .wpl-overview-view {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-radius: var(--wpl-radius-xl) var(--wpl-radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    /* Slide-up animation */
    animation: slideUpFromBottom 0.3s ease-out;

    /* Scroll container */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @keyframes slideUpFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Desktop: Centered modal */
@media (min-width: 768px) {
  .wpl-overview-view {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: var(--wpl-radius-xl);
    box-shadow: var(--wpl-shadow-lg);

    /* Fade in animation */
    animation: fadeInModal 0.25s ease-out;

    /* Scroll container */
    overflow-y: auto;
  }

  @keyframes fadeInModal {
    from {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* ============================================================================
   MODAL OVERLAY
   ============================================================================ */

.wpl-overview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--wpl-z-modal) - 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Fade animation */
  animation: fadeInOverlay 0.25s ease-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   OVERVIEW HEADER (Simplified - icon-only buttons)
   ============================================================================ */

.wpl-overview-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border);
  padding: var(--wpl-space-sm) var(--wpl-space-md);

  /* Flexbox layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-sm);

  /* Compact header height */
  min-height: 48px;
}

/* Header spacer to push buttons apart */
.wpl-overview-header__spacer {
  flex: 1;
}

/* Header buttons - icon only styling */
.wpl-overview-header__close {
  flex-shrink: 0;
  min-width: 40px;
  padding: var(--wpl-space-xs);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .wpl-overview-header {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    min-height: 44px;
  }
}

/* Header action buttons */
.wpl-overview-header__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--wpl-space-xs);
}

/* ============================================================================
   OVERVIEW CONTENT
   ============================================================================ */

.wpl-overview-content {
  padding: var(--wpl-space-md);
  /* Standard padding - no extra space needed since action bar removed */
  padding-bottom: var(--wpl-space-lg);
}

/* ============================================================================
   TITLE SECTION (Simplified)
   ============================================================================ */

.wpl-overview-title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpl-space-xs);
  padding: var(--wpl-space-md) 0;
}

.wpl-overview-title {
  font-size: var(--wpl-font-size-xl);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
  margin: 0;
}

/* ============================================================================
   STATUS ICON (Simplified - icon only, no badge)
   ============================================================================ */

.wpl-overview-status-icon {
  width: 24px;
  height: 24px;
}

/* Running state - Blue */
.wpl-overview-status-icon--running {
  color: #1565C0;
}

/* Completed state - Green */
.wpl-overview-status-icon--completed {
  color: #2E7D32;
}

/* Waiting state - Orange */
.wpl-overview-status-icon--waiting {
  color: #E65100;
}

/* Unknown state - Gray */
.wpl-overview-status-icon--unknown {
  color: var(--wpl-gray-600);
}

/* ============================================================================
   DATA CARD (Full-width)
   ============================================================================ */

.wpl-overview-data-card {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border-light);
  border-radius: var(--wpl-radius-md);
  padding: var(--wpl-space-md);
  width: 100%;
  box-sizing: border-box;
}

.wpl-overview-card__title {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  margin-bottom: var(--wpl-space-md);
  display: block;
}

/* ============================================================================
   LEGACY STATUS BADGES (kept for backward compatibility)
   ============================================================================ */

.wpl-overview-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wpl-space-xs);
  padding: var(--wpl-space-xs) var(--wpl-space-sm);
  border-radius: var(--wpl-radius-full);
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Running state - Blue */
.wpl-overview-status-badge--running {
  background-color: #E3F2FD;
  color: #1565C0;
}

/* Completed state - Green */
.wpl-overview-status-badge--completed {
  background-color: #E8F5E9;
  color: #2E7D32;
}

/* Waiting state - Orange */
.wpl-overview-status-badge--waiting {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Unknown state - Gray */
.wpl-overview-status-badge--unknown {
  background-color: var(--wpl-gray-100);
  color: var(--wpl-gray-600);
}

/* ============================================================================
   DATA CARD
   ============================================================================ */

.wpl-overview-data-card {
  flex: 1;
  /* Prevent overflow from child elements */
  overflow: hidden;
}

/* Ensure FormLayout inside data card respects container width */
.wpl-overview-data-card vaadin-form-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure VerticalLayout inside data card respects container width */
.wpl-overview-data-card vaadin-vertical-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* ============================================================================
   INFO CARD (Read-only field display)
   ============================================================================ */

.wpl-info-card {
  padding: var(--wpl-space-sm) 0;
  border-bottom: 1px solid var(--wpl-border-light);
  /* Ensure info cards respect container width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.wpl-info-card:last-child {
  border-bottom: none;
}

.wpl-info-card-label {
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--wpl-space-xs);
  display: block;
}

.wpl-info-card-value {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);
  /* Ensure all widget values respect container width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Override Vaadin field styles for read-only display */
.wpl-info-card-value::part(input-field) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
  /* Ensure input field respects container */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wpl-info-card-value input,
.wpl-info-card-value textarea {
  padding: 0 !important;
  color: var(--wpl-text-primary) !important;
  -webkit-text-fill-color: var(--wpl-text-primary) !important;
  /* Prevent input overflow */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure all Vaadin components inside info cards respect container width */
.wpl-info-card vaadin-text-field,
.wpl-info-card vaadin-text-area,
.wpl-info-card vaadin-number-field,
.wpl-info-card vaadin-integer-field,
.wpl-info-card vaadin-date-picker,
.wpl-info-card vaadin-combo-box,
.wpl-info-card vaadin-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================================
   STICKY ACTION BAR (Full-width button)
   ============================================================================ */

.wpl-overview-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--wpl-bg-primary);
  border-top: 1px solid var(--wpl-border);
  padding: var(--wpl-space-md);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

  /* Ensure it stays above content */
  z-index: 5;
}

/* Full-width close button */
.wpl-overview-close-button {
  width: 100%;
  height: var(--wpl-button-height-mobile, 48px);
}

/* Legacy action bar (for backward compatibility) */
.wpl-overview-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--wpl-bg-primary);
  border-top: 1px solid var(--wpl-border);
  padding: var(--wpl-space-md);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
  .wpl-overview-action-bar {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0;
    right: 0;
    margin: 0;
    z-index: 100;
  }
}

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Close animation */
.wpl-overview-view--closing {
  animation: slideDownToBottom 0.3s ease-in forwards;
}

@keyframes slideDownToBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Desktop close animation */
@media (min-width: 768px) {
  .wpl-overview-view--closing {
    animation: fadeOutModal 0.25s ease-in forwards;
  }

  @keyframes fadeOutModal {
    from {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    to {
      opacity: 0;
      transform: translate(-50%, -48%);
    }
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus styles */
.wpl-overview-view:focus-visible,
.wpl-overview-header__close:focus-visible,
.wpl-overview-header__actions button:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* Escape key hint */
.wpl-overview-escape-hint {
  position: absolute;
  top: var(--wpl-space-sm);
  right: var(--wpl-space-sm);
  font-size: var(--wpl-font-size-tiny);
  color: var(--wpl-text-tertiary);
  opacity: 0.6;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-overview-card {
    border: 2px solid currentColor;
  }

  .wpl-overview-status-badge {
    border: 1px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-overview-view * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Small phones */
@media (max-width: 374px) {
  .wpl-overview-header__title {
    font-size: var(--wpl-font-size-body);
  }

  .wpl-overview-content {
    padding: var(--wpl-space-sm);
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpl-overview-view {
    max-width: 600px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .wpl-overview-view {
    max-width: 900px;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-overview-view {
    background: var(--wpl-gray-900);
    color: var(--wpl-gray-100);
  }

  .wpl-overview-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .wpl-overview-header,
  .wpl-overview-actions,
  .wpl-overview-action-bar {
    background: var(--wpl-gray-900);
    border-color: var(--wpl-gray-700);
  }

  .wpl-overview-title,
  .wpl-overview-card__title,
  .wpl-info-card-value {
    color: var(--wpl-gray-100);
  }

  .wpl-overview-data-card {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-info-card {
    border-color: var(--wpl-gray-700);
  }

  /* Dark mode status icons */
  .wpl-overview-status-icon--running {
    color: #64B5F6;
  }

  .wpl-overview-status-icon--completed {
    color: #81C784;
  }

  .wpl-overview-status-icon--waiting {
    color: #FFB74D;
  }

  .wpl-overview-status-icon--unknown {
    color: var(--wpl-gray-400);
  }

  /* Dark mode status badges (legacy) */
  .wpl-overview-status-badge--running {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
  }

  .wpl-overview-status-badge--completed {
    background-color: rgba(76, 175, 80, 0.2);
    color: #81C784;
  }

  .wpl-overview-status-badge--waiting {
    background-color: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
  }

  .wpl-overview-status-badge--unknown {
    background-color: var(--wpl-gray-700);
    color: var(--wpl-gray-400);
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .wpl-overview-header,
  .wpl-overview-actions,
  .wpl-overview-action-bar,
  .wpl-overview-overlay {
    display: none;
  }

  .wpl-overview-view {
    position: static;
    padding: 0;
    background: white;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
  }

  .wpl-overview-card {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}



/* Trace View Styles */
/* === Inlined from ./components/wpl-trace.css === */
/*
 * WPLStyle v3.0 - Wipp Trace View Component
 *
 * Full-screen, mobile-first design (80% mobile users)
 * Designed to impress executives while being functional
 *
 * Key Features:
 * - Status banner with color-coded workflow state
 * - Current Task hero section with avatar gallery
 * - Workflow timeline showing all steps
 * - Human-readable labels
 * - Back navigation and action menu
 *
 * Answers the three executive questions:
 * - "Where is it?" (Current step)
 * - "Who has the ball?" (Current assignees)
 * - "Who is working with?" (All involved people)
 */

/* ============================================================================
   GLOBAL RESET FOR TRACE VIEW - Force full-width on all major containers
   ============================================================================
   This aggressive reset ensures Vaadin's inline styles don't interfere
   ============================================================================ */

/* Target Vaadin VerticalLayout inside trace fullview */
.wpl-trace-fullview,
.wpl-trace-fullview > vaadin-vertical-layout,
.wpl-trace-fullview > vaadin-horizontal-layout,
.wpl-trace-fullview > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Target the content-area to ensure trace view fills it without margin */
.wpl-trace-content-area {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Ensure all direct children of content area are full width */
.wpl-trace-content-area > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* ============================================================================
   FULL VIEW CONTAINER
   ============================================================================ */

.wpl-trace-fullview {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--wpl-bg-grouped);
  /* Break out of parent container padding - CRITICAL for full-width */
  margin-left: calc(-1 * var(--wpl-space-md, 16px)) !important;
  margin-right: calc(-1 * var(--wpl-space-md, 16px)) !important;
  width: calc(100% + 2 * var(--wpl-space-md, 32px)) !important;
  max-width: calc(100% + 2 * var(--wpl-space-md, 32px)) !important;
}

/* ============================================================================
   HEADER - Back Navigation + Title + Menu
   ============================================================================ */

.wpl-trace-header {
  position: sticky;
  top: 0;
  z-index: var(--wpl-z-sticky);
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-sm);
  min-height: var(--wpl-header-height-mobile);
}

.wpl-trace-header__back,
.wpl-trace-header__menu {
  flex-shrink: 0;
  min-width: var(--wpl-touch-target);
  min-height: var(--wpl-touch-target);
  padding: var(--wpl-space-xs);
}

.wpl-trace-header__title {
  flex: 1;
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 var(--wpl-space-sm);
}

/* Menu dropdown - smaller icons */
vaadin-context-menu-overlay vaadin-item vaadin-icon,
vaadin-context-menu-overlay vaadin-menu-bar-item vaadin-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Send Reminder CTA Button on Hero */
.wpl-trace-current-task__cta {
  display: flex;
  justify-content: center;
  padding-top: var(--wpl-space-sm);
}

.wpl-trace-current-task__cta-button {
  background: #FFEBEE;
  color: #D32F2F;
  border: none;
  padding: var(--wpl-space-sm) var(--wpl-space-lg);
  border-radius: var(--wpl-radius-md);
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--wpl-space-xs);
  transition: background-color var(--wpl-transition-fast);
}

.wpl-trace-current-task__cta-button:hover {
  background: #FFCDD2;
}

.wpl-trace-current-task__cta-button vaadin-icon {
  width: 16px;
  height: 16px;
}

/* Card completion info badge */
.wpl-trace-current-task__completion {
  display: flex;
  justify-content: center;
  margin-top: var(--wpl-space-xs);
}

.wpl-trace-current-task__completion-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wpl-space-xs);
  padding: 4px 12px;
  background: var(--wpl-gray-100);
  border-radius: var(--wpl-radius-sm);
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
}

.wpl-trace-current-task__completion-badge--warning {
  background: #FFF8E1;
  color: #F57C00;
}

/* ============================================================================
   SCROLLABLE CONTENT AREA
   ============================================================================ */

.wpl-trace-content-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--wpl-space-xxl);
}

/* ============================================================================
   STATUS BANNER - The "At a Glance" Hero
   ============================================================================ */

.wpl-trace-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wpl-space-md);
  text-align: center;
  font-weight: var(--wpl-font-weight-semibold);
  transition: background-color var(--wpl-transition-normal);
  /* Full width - no margin, no border-radius - ENFORCED */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.wpl-trace-status-banner__text {
  font-size: var(--wpl-font-size-small);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Status Banner Color Variants */
.wpl-trace-status-banner--waiting {
  background: #FFF8E1;
  color: #F57C00;
}

.wpl-trace-status-banner--in-progress {
  background: #E3F2FD;
  color: #1976D2;
}

.wpl-trace-status-banner--completed {
  background: #E8F5E9;
  color: #388E3C;
}

.wpl-trace-status-banner--needs-attention {
  background: #FFEBEE;
  color: #D32F2F;
}

.wpl-trace-status-banner--overdue {
  background: #FFEBEE;
  color: #D32F2F;
}

/* ============================================================================
   CURRENT TASK HERO - "Who Has the Ball?"
   ============================================================================ */

.wpl-trace-current-task {
  background: var(--wpl-bg-primary);
  /* Full width - ENFORCED */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--wpl-border-light);
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wpl-trace-current-task__content {
  padding: var(--wpl-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-md);
}

.wpl-trace-current-task__title {
  font-size: var(--wpl-font-size-xlarge);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
  text-align: center;
}

.wpl-trace-current-task__separator {
  height: 1px;
  background: var(--wpl-border);
  margin: 0 var(--wpl-space-md);
}

.wpl-trace-current-task__avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wpl-space-md);
  padding: var(--wpl-space-sm) 0;
}

.wpl-trace-current-task__empty {
  color: var(--wpl-text-secondary);
  font-size: var(--wpl-font-size-body);
  text-align: center;
  padding: var(--wpl-space-md);
}

.wpl-trace-current-task__status {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-secondary);
  text-align: center;
  line-height: var(--wpl-line-height-normal);
}

.wpl-trace-current-task__time {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-tertiary);
  text-align: center;
}

.wpl-trace-current-task__time--warning {
  color: #F57C00;
  font-weight: var(--wpl-font-weight-medium);
}

.wpl-trace-current-task__more-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  background: var(--wpl-gray-100);
  border-radius: var(--wpl-radius-md);
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
  cursor: pointer;
}

.wpl-trace-current-task__more-badge:hover {
  background: var(--wpl-gray-200);
}

/* Avatar Pills */
.wpl-trace-avatar-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wpl-space-xs);
  min-width: 64px;
  position: relative;
}

.wpl-trace-avatar-pill--active {
  /* Highlight the active user */
}

.wpl-trace-avatar-pill__avatar {
  border-radius: var(--wpl-radius-round);
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-trace-avatar-pill--active .wpl-trace-avatar-pill__avatar {
  box-shadow: 0 0 0 3px var(--wpl-bg-primary), 0 0 0 5px #17C800;
}

.wpl-trace-avatar-pill__name {
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.wpl-trace-avatar-pill__indicator {
  position: absolute;
  top: 0;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #17C800;
  border: 2px solid var(--wpl-bg-primary);
  border-radius: var(--wpl-radius-round);
}

/* ============================================================================
   PROGRESS SECTION
   ============================================================================ */

.wpl-trace-progress-section {
  padding: var(--wpl-space-md);
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border-light);
  /* Full width - ENFORCED */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.wpl-trace-section-title {
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--wpl-space-sm);
}

.wpl-trace-progress-container {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-md);
}

.wpl-trace-progress-bar {
  flex: 1;
  height: 8px;
  min-height: 8px;
  border-radius: 4px;
  background: var(--wpl-gray-200);
  overflow: hidden;
}

.wpl-trace-progress-bar::part(value) {
  background: #17C800;
  border-radius: 4px;
  transition: width var(--wpl-transition-normal);
}

.wpl-trace-progress-bar::part(bar) {
  background: var(--wpl-gray-200);
  border-radius: 4px;
}

vaadin-progress-bar.wpl-trace-progress-bar {
  --vaadin-progress-fill-color: #17C800;
  --vaadin-progress-track-color: var(--wpl-gray-200);
}

.wpl-trace-progress-label {
  /* Hidden - visual progress bar is self-explanatory */
  display: none;
}

/* ============================================================================
   TIMELINE SECTION
   ============================================================================ */

.wpl-trace-timeline {
  padding: 0;
  padding-bottom: var(--wpl-space-lg);
}

.wpl-trace-timeline-rows {
  background: var(--wpl-bg-primary);
  /* Full width - ENFORCED */
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================================
   TIMELINE ROW
   ============================================================================ */

.wpl-trace-timeline-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--wpl-border-light);
  transition: background-color var(--wpl-transition-fast);
}

.wpl-trace-timeline-row:last-child {
  border-bottom: none;
}

.wpl-trace-timeline-row__content {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-md);
  min-height: 64px;
}

.wpl-trace-timeline-row--clickable {
  cursor: pointer;
  user-select: none;
}

.wpl-trace-timeline-row--clickable:hover {
  background: var(--wpl-gray-50);
}

.wpl-trace-timeline-row--clickable:active {
  background: var(--wpl-gray-100);
}

/* Status-based styling */
.wpl-trace-timeline-row--done,
.wpl-trace-timeline-row--completed {
  opacity: 0.7;
}

.wpl-trace-timeline-row--done .wpl-trace-timeline-row__title,
.wpl-trace-timeline-row--completed .wpl-trace-timeline-row__title {
  color: var(--wpl-text-secondary);
}

.wpl-trace-timeline-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpl-trace-timeline-row__title {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-trace-timeline-row__subtitle {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-trace-timeline-row__right {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  flex-shrink: 0;
}

/* Status Badge */
.wpl-trace-timeline-row__badge {
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--wpl-radius-sm);
  white-space: nowrap;
}

.wpl-trace-timeline-row__badge--done,
.wpl-trace-timeline-row__badge--completed {
  background: #E8F5E9;
  color: #388E3C;
}

.wpl-trace-timeline-row__badge--in-progress,
.wpl-trace-timeline-row__badge--running {
  background: #E3F2FD;
  color: #1976D2;
}

.wpl-trace-timeline-row__badge--pending {
  background: var(--wpl-gray-100);
  color: var(--wpl-text-secondary);
}

.wpl-trace-timeline-row__badge--error {
  background: #FFEBEE;
  color: #D32F2F;
}

.wpl-trace-timeline-row__badge--timeout {
  background: #FFF3E0;
  color: #F57C00;
}

/* Chevron */
.wpl-trace-timeline-row__chevron {
  font-size: 16px;
  color: var(--wpl-text-tertiary);
  transition: transform var(--wpl-transition-fast);
}

.wpl-trace-timeline-row--expanded .wpl-trace-timeline-row__chevron {
  transform: rotate(180deg);
}

/* ============================================================================
   STATUS ICON
   ============================================================================ */

.wpl-trace-status-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpl-trace-status-icon vaadin-icon,
.wpl-trace-status-icon svg {
  width: 20px;
  height: 20px;
}

.wpl-trace-status-icon--pending { color: var(--wpl-gray-400); }
.wpl-trace-status-icon--in-progress { color: #1976D2; }
.wpl-trace-status-icon--done { color: #388E3C; }
.wpl-trace-status-icon--error { color: #D32F2F; }
.wpl-trace-status-icon--timeout { color: #F57C00; }

/* ============================================================================
   EXPANDED WIPPERS SECTION
   ============================================================================ */

.wpl-trace-wippers {
  background: var(--wpl-bg-grouped);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  animation: wippersExpand 0.2s ease-out;
  /* Full width - ENFORCED */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

@keyframes wippersExpand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.wpl-trace-wipper-row {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-md);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  background: var(--wpl-bg-primary);
  border-radius: var(--wpl-radius-md);
  margin-bottom: var(--wpl-space-xs);
  min-height: 56px;
}

.wpl-trace-wipper-row:last-child {
  margin-bottom: 0;
}

.wpl-trace-wipper-row--current-user {
  background: var(--wpl-red-light);
}

.wpl-trace-wipper-row--clickable {
  cursor: pointer;
}

.wpl-trace-wipper-row--clickable:hover {
  background: var(--wpl-gray-50);
}

.wpl-trace-wipper-row--current-user.wpl-trace-wipper-row--clickable:hover {
  background: #FFCDD2;
}

.wpl-trace-wipper-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.wpl-trace-wipper-avatar vaadin-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.wpl-trace-wipper-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpl-trace-wipper-name {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-trace-wipper-row--current-user .wpl-trace-wipper-name {
  font-weight: var(--wpl-font-weight-semibold);
}

.wpl-trace-wipper-status-text {
  font-size: var(--wpl-font-size-small);
  line-height: var(--wpl-line-height-normal);
}

.wpl-trace-wipper-status-text--done,
.wpl-trace-wipper-status-text--completed {
  color: #388E3C;
}

.wpl-trace-wipper-status-text--pending {
  color: var(--wpl-text-secondary);
}

.wpl-trace-wipper-status-text--in-progress,
.wpl-trace-wipper-status-text--running {
  color: #1976D2;
}

.wpl-trace-wipper-status-text--error {
  color: #D32F2F;
}

.wpl-trace-wipper-status-text--timeout {
  color: #F57C00;
}

.wpl-trace-wipper-date {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================================
   WIPPER DISPLAY (for info dialog)
   ============================================================================ */

.wpl-trace-wipper-display {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

/* ============================================================================
   INFO DIALOG
   ============================================================================ */

.wpl-trace-info-dialog {
  max-width: 400px;
}

vaadin-dialog-overlay[opened] {
  z-index: calc(var(--wpl-z-modal) + 10) !important;
}

.wpl-trace-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-md);
  padding: var(--wpl-space-md);
}

.wpl-trace-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-xs);
}

.wpl-trace-info-label {
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wpl-trace-info-value {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-relaxed);
}

.wpl-trace-stats-row {
  display: flex;
  justify-content: space-between;
  gap: var(--wpl-space-md);
  flex-wrap: wrap;
}

.wpl-trace-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wpl-space-xxs);
  flex: 1;
  min-width: 80px;
  padding: var(--wpl-space-sm);
  background: var(--wpl-bg-grouped);
  border-radius: var(--wpl-radius-md);
}

.wpl-trace-stat-value {
  font-size: var(--wpl-font-size-xlarge);
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-text-primary);
}

.wpl-trace-stat-label {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.wpl-trace-empty {
  text-align: center;
  padding: var(--wpl-space-xxl);
  color: var(--wpl-text-secondary);
}

.wpl-trace-empty-icon {
  font-size: 48px;
  color: var(--wpl-gray-300);
  margin-bottom: var(--wpl-space-md);
}

.wpl-trace-empty-text {
  font-size: var(--wpl-font-size-body);
}

/* ============================================================================
   MOBILE OPTIMIZATIONS (Default - Mobile First)
   ============================================================================ */

@media (max-width: 767px) {
  .wpl-trace-header {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    min-height: var(--wpl-header-height-mobile);
  }

  .wpl-trace-header__title {
    font-size: var(--wpl-font-size-body);
  }

  /* Full width on mobile - no margin */
  .wpl-trace-current-task {
    margin: 0;
  }

  .wpl-trace-current-task__content {
    padding: var(--wpl-space-md);
  }

  .wpl-trace-current-task__title {
    font-size: var(--wpl-font-size-large);
  }

  /* Full width sections */
  .wpl-trace-progress-section {
    padding: var(--wpl-space-sm) var(--wpl-space-md);
  }

  .wpl-trace-timeline {
    padding: 0;
  }

  .wpl-trace-timeline-row__content {
    padding: var(--wpl-space-sm) var(--wpl-space-md);
    min-height: 56px;
  }

  .wpl-trace-avatar-pill {
    min-width: 56px;
  }

  .wpl-trace-avatar-pill__name {
    max-width: 64px;
    font-size: var(--wpl-font-size-tiny);
  }

  .wpl-trace-wippers {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
  }

  .wpl-trace-wipper-row {
    padding: var(--wpl-space-xs) var(--wpl-space-sm);
    min-height: 48px;
  }
}

/* ============================================================================
   DESKTOP ENHANCEMENTS
   ============================================================================ */

@media (min-width: 768px) {
  /* Full view container - centered with comfortable max-width */
  .wpl-trace-fullview {
    /* On tablet/desktop, center the content with max-width */
    max-width: 600px !important;
    /* Reset margins for centering, but account for the negative margin trick */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    background: var(--wpl-bg-primary);
    box-shadow: var(--wpl-shadow-lg);
    min-height: 100vh;
  }

  /* Header - full width within container */
  .wpl-trace-header {
    min-height: var(--wpl-header-height-desktop);
    padding: var(--wpl-space-md) var(--wpl-space-lg);
  }

  .wpl-trace-header__title {
    font-size: var(--wpl-font-size-large);
  }

  /* Status banner - full width within container */
  .wpl-trace-status-banner {
    margin: 0;
  }

  /* Current task card - full width, no margin */
  .wpl-trace-current-task {
    margin: 0;
    border-radius: 0;
  }

  .wpl-trace-current-task__content {
    padding: var(--wpl-space-lg);
  }

  .wpl-trace-current-task__title {
    font-size: var(--wpl-font-size-xlarge);
  }

  /* Progress section - full width */
  .wpl-trace-progress-section {
    padding: var(--wpl-space-md) var(--wpl-space-lg);
  }

  /* Timeline - full width */
  .wpl-trace-timeline {
    padding: 0;
  }

  .wpl-trace-timeline-row__content {
    padding: var(--wpl-space-md) var(--wpl-space-lg);
  }
}

/* Large desktop - add subtle background to show centering */
@media (min-width: 1024px) {
  .wpl-trace-fullview {
    margin-top: 0;
    border-radius: 0;
  }

  /* The parent container should have the grouped background */
  .wpl-trace-fullview {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.wpl-trace-timeline-row:focus-visible,
.wpl-trace-wipper-row:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
}

@media (prefers-contrast: high) {
  .wpl-trace-timeline-rows,
  .wpl-trace-current-task {
    border: 2px solid var(--wpl-black);
  }

  .wpl-trace-timeline-row {
    border-bottom-width: 2px;
    border-bottom-color: var(--wpl-black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpl-trace-wippers,
  .wpl-trace-timeline-row__chevron,
  .wpl-trace-progress-bar::part(value) {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-trace-fullview {
    background: var(--wpl-gray-900);
  }

  .wpl-trace-header {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-trace-header__title,
  .wpl-trace-current-task__title,
  .wpl-trace-timeline-row__title,
  .wpl-trace-wipper-name {
    color: var(--wpl-gray-100);
  }

  .wpl-trace-status-banner--waiting {
    background: rgba(255, 248, 225, 0.1);
  }

  .wpl-trace-status-banner--in-progress {
    background: rgba(227, 242, 253, 0.1);
  }

  .wpl-trace-status-banner--completed {
    background: rgba(232, 245, 233, 0.1);
  }

  .wpl-trace-status-banner--needs-attention,
  .wpl-trace-status-banner--overdue {
    background: rgba(255, 235, 238, 0.1);
  }

  .wpl-trace-current-task,
  .wpl-trace-timeline-rows {
    background: var(--wpl-gray-800);
  }

  .wpl-trace-current-task__separator,
  .wpl-trace-timeline-row {
    border-color: var(--wpl-gray-700);
  }

  .wpl-trace-timeline-row--clickable:hover {
    background: var(--wpl-gray-700);
  }

  .wpl-trace-wippers {
    background: var(--wpl-gray-900);
  }

  .wpl-trace-wipper-row {
    background: var(--wpl-gray-800);
  }

  .wpl-trace-wipper-row--current-user {
    background: rgba(225, 33, 26, 0.2);
  }

  .wpl-trace-progress-bar {
    background: var(--wpl-gray-700);
  }

  .wpl-trace-progress-bar::part(bar) {
    background: var(--wpl-gray-700);
  }

  vaadin-progress-bar.wpl-trace-progress-bar {
    --vaadin-progress-track-color: var(--wpl-gray-700);
  }

  .wpl-trace-timeline-row__badge--pending {
    background: var(--wpl-gray-700);
    color: var(--wpl-gray-300);
  }

  .wpl-trace-stat {
    background: var(--wpl-gray-800);
  }
}

/* ============================================================================
   LEGACY COMPATIBILITY (for old classes - kept for transition period)
   ============================================================================ */

.wpl-trace-view {
  /* Old modal container - redirect to full view styles */
}

.wpl-trace-overlay {
  display: none;
}

.wpl-trace-content {
  padding: 0;
}

.wpl-trace-section {
  /* Legacy section container */
}

.wpl-trace-section-rows {
  background: var(--wpl-bg-primary);
  border-radius: var(--wpl-radius-lg);
  box-shadow: var(--wpl-shadow-card);
  overflow: hidden;
}

.wpl-trace-card-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-trace-card-row:last-child {
  border-bottom: none;
}

.wpl-trace-card-row-content {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-xs);
  min-height: var(--wpl-touch-target);
  padding: 12px var(--wpl-space-md);
}

.wpl-trace-card-row--clickable {
  cursor: pointer;
}

.wpl-trace-card-row--clickable:hover {
  background: var(--wpl-gray-50);
}

.wpl-trace-card-name-line {
  display: flex;
  align-items: center;
}

.wpl-trace-card-name {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-trace-card-wipper-line {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

.wpl-trace-card-wipper-info {
  flex: 1;
  min-width: 0;
}

.wpl-trace-card-wipper {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-trace-card-accessory {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  flex-shrink: 0;
}

.wpl-trace-card-date {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-secondary);
}

.wpl-trace-card-chevron {
  font-size: 16px;
  color: var(--wpl-text-tertiary);
  transition: transform var(--wpl-transition-fast);
}

.wpl-trace-card-row--expanded .wpl-trace-card-chevron {
  transform: rotate(180deg);
}

.wpl-trace-title-section {
  padding: var(--wpl-space-sm) var(--wpl-space-md);
}

/* ============================================================================
   WIPP INFO DIALOG - New design with workflow graph
   ============================================================================ */

.wpl-trace-info-dialog {
  --lumo-header-text-color: var(--wpl-text-primary);
}

.wpl-trace-info-dialog::part(header) {
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  border-bottom: 1px solid var(--wpl-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wpl-trace-info-close {
  min-width: 32px !important;
  padding: 0 !important;
  color: var(--wpl-text-secondary);
}

.wpl-trace-info-close:hover {
  color: var(--wpl-text-primary);
  background: var(--wpl-background-subtle);
}

.wpl-trace-info-dialog::part(content) {
  padding: 0;
}

.wpl-trace-info-content {
  padding: var(--wpl-space-lg) !important;
}

/* Description section */
.wpl-trace-info-description {
  margin-bottom: var(--wpl-space-sm);
}

.wpl-trace-info-description-text {
  font-size: var(--wpl-font-size-normal);
  color: var(--wpl-text-secondary);
  line-height: 1.5;
}

/* Separator line */
.wpl-trace-info-separator {
  height: 1px;
  background: var(--wpl-border-light);
  margin: var(--wpl-space-md) 0;
}

/* Graph section */
.wpl-trace-info-graph-section {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wpl-background-subtle);
  border-radius: var(--wpl-radius-md);
  overflow: hidden;
}

.wpl-trace-info-graph-section wipp-diagram {
  width: 100% !important;
  height: 300px !important;
}

.wpl-trace-info-no-graph {
  color: var(--wpl-text-tertiary);
  font-style: italic;
}

/* Support section */
.wpl-trace-info-support-section {
  display: flex;
  justify-content: center;
  padding-top: var(--wpl-space-sm);
}

.wpl-trace-info-support-button {
  color: var(--wpl-text-secondary);
}

.wpl-trace-info-support-button:hover {
  color: var(--wpl-primary);
}

/* ============================================================================
   SUPPORT DIALOG
   ============================================================================ */

.wpl-trace-support-dialog::part(header) {
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-trace-support-info {
  color: var(--wpl-text-secondary);
  font-size: var(--wpl-font-size-normal);
  display: block;
  margin-bottom: var(--wpl-space-md);
}

.wpl-trace-support-context {
  margin-top: var(--wpl-space-md);
  padding: var(--wpl-space-md);
  background: var(--wpl-background-subtle);
  border-radius: var(--wpl-radius-md);
}

.wpl-trace-support-context-label {
  display: block;
  font-size: var(--wpl-font-size-small);
  font-weight: 500;
  color: var(--wpl-text-secondary);
  margin-bottom: var(--wpl-space-sm);
}

.wpl-trace-support-context-details {
  display: flex;
  flex-direction: column;
  gap: var(--wpl-space-xs);
}

.wpl-trace-support-context-details span {
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-tertiary);
}

/* ============================================================================
   TIMELINE ROW - Current card highlighting
   ============================================================================ */

.wpl-trace-timeline-row--current {
  background: var(--wpl-info-bg) !important;
  border-left: 3px solid var(--wpl-info) !important;
}

.wpl-trace-timeline-row--current .wpl-trace-card-title {
  font-weight: 600;
}

.wpl-trace-timeline-row--current::after {
  content: "Current";
  position: absolute;
  right: var(--wpl-space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-info);
  font-weight: 500;
  background: var(--wpl-info-bg);
  padding: 2px 8px;
  border-radius: var(--wpl-radius-sm);
}



/* Wizard Component Styles */
/* === Inlined from ./components/wizard.css === */
/*
 * WPLStyle v2.0 - Wizard Component
 *
 * Wizard dialog progress bar and step indicator styling
 * Features:
 * - WPL brand red (#E1211A) progress bar fill
 * - iOS-inspired circular step counter
 * - Touch-optimized progress area
 * - Consistent with wplStyle design system
 */

/* ============================================================================
   WIZARD PROGRESS LAYOUT
   ============================================================================ */

.wpl-wizard-progress-layout {
  width: 100%;
  height: 2.5em;
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-xs) 0;
}

/* ============================================================================
   WIZARD PROGRESS BAR
   ============================================================================ */

.wpl-wizard-progress-bar {
  flex: 1;
  height: 6px;
  min-height: 6px;
  background: var(--wpl-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

/* Target the Vaadin progress bar value part */
.wpl-wizard-progress-bar::part(value) {
  background: var(--wpl-red-primary);
  border-radius: 3px;
  transition: width var(--wpl-transition-normal);
}

/* Target the bar container part */
.wpl-wizard-progress-bar::part(bar) {
  background: var(--wpl-gray-200);
  border-radius: 3px;
}

/* Additional styling for the progress track */
vaadin-progress-bar.wpl-wizard-progress-bar {
  --vaadin-progress-fill-color: var(--wpl-red-primary);
  --vaadin-progress-track-color: var(--wpl-gray-200);
}

/* ============================================================================
   WIZARD STEP COUNTER (Circular Badge)
   ============================================================================ */

.wpl-wizard-step-counter {
  width: 2.5em;
  min-width: 2.5em;
  height: 2.5em;
  margin-left: var(--wpl-space-sm);

  /* iOS-inspired circular badge */
  background: var(--wpl-red-primary);
  color: var(--wpl-text-on-primary);
  border-radius: var(--wpl-radius-round);

  /* Typography */
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-bold);
  font-family: var(--wpl-font-family);

  /* Centering text */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;

  /* Subtle shadow for depth */
  box-shadow: var(--wpl-shadow-sm);

  /* Smooth transitions */
  transition: transform var(--wpl-transition-fast),
              background-color var(--wpl-transition-fast);
}

/* Hover effect for interactive feel */
.wpl-wizard-step-counter:hover {
  transform: scale(1.05);
}

/* Completed state - darker red */
.wpl-wizard-step-counter--completed {
  background: var(--wpl-red-dark);
}

/* ============================================================================
   WIZARD PROGRESS CONTAINER
   ============================================================================ */

.wpl-wizard-progress {
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  background: var(--wpl-bg-secondary);
  border-bottom: 1px solid var(--wpl-border-light);
}

/* ============================================================================
   ALTERNATIVE: SEGMENTED PROGRESS BAR (Steps as segments)
   ============================================================================ */

.wpl-wizard-progress-segments {
  display: flex;
  gap: 4px;
  width: 100%;
}

.wpl-wizard-progress-segment {
  flex: 1;
  height: 4px;
  background: var(--wpl-gray-200);
  border-radius: 2px;
  transition: background-color var(--wpl-transition-fast);
}

.wpl-wizard-progress-segment--active {
  background: var(--wpl-red-primary);
}

.wpl-wizard-progress-segment--completed {
  background: var(--wpl-gray-600);
}

/* ============================================================================
   WIZARD HEADER TITLE
   ============================================================================ */

.wpl-wizard-title {
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  margin: 0;
  padding: var(--wpl-space-sm) 0;
}

.wpl-wizard-subtitle {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-secondary);
  margin: 0;
}

/* ============================================================================
   WIZARD CONTENT AREA
   ============================================================================ */

.wpl-wizard-content {
  padding: var(--wpl-space-md);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   WIZARD ACTION BUTTONS
   ============================================================================ */

.wpl-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-md);
  border-top: 1px solid var(--wpl-border-light);
  background: var(--wpl-bg-primary);
}

/* Mobile: Stack buttons on small screens */
@media (max-width: 480px) {
  .wpl-wizard-actions {
    flex-direction: column-reverse;
  }

  .wpl-wizard-actions .wpl-button {
    width: 100%;
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile optimizations */
@media (max-width: 767px) {
  .wpl-wizard-progress-layout {
    padding: var(--wpl-space-sm);
  }

  .wpl-wizard-step-counter {
    width: 2em;
    min-width: 2em;
    height: 2em;
    font-size: var(--wpl-font-size-tiny);
  }

  .wpl-wizard-progress-bar {
    height: 4px;
    min-height: 4px;
  }
}

/* Tablet and up */
@media (min-width: 768px) {
  .wpl-wizard-progress-layout {
    padding: var(--wpl-space-sm) var(--wpl-space-md);
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-wizard-progress-bar {
    background: var(--wpl-gray-700);
  }

  .wpl-wizard-progress-bar::part(bar) {
    background: var(--wpl-gray-700);
  }

  .wpl-wizard-step-counter {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .wpl-wizard-progress {
    background: var(--wpl-gray-800);
    border-bottom-color: var(--wpl-gray-700);
  }

  .wpl-wizard-progress-segment {
    background: var(--wpl-gray-700);
  }

  .wpl-wizard-actions {
    background: var(--wpl-gray-900);
    border-top-color: var(--wpl-gray-700);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus visible styles */
.wpl-wizard-step-counter:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpl-wizard-progress-bar::part(value) {
    transition: none;
  }

  .wpl-wizard-step-counter {
    transition: none;
  }

  .wpl-wizard-progress-segment {
    transition: none;
  }
}



/* Wipp Detail Panel Styles */
/* === Inlined from ./components/wipp-detail.css === */
/*
 * WPLStyle v2.0 - Wipp Detail Panel Component
 *
 * Modern corporate styling for the Wipp install/detail view
 * Features:
 * - iOS-inspired tab navigation with red underline indicator
 * - Unified panel styling for Info and Issues sections
 * - Card-based layout with subtle shadows
 * - Touch-optimized interactions
 * - Consistent with wplStyle design system
 */

/* ============================================================================
   WIPP DETAIL PANEL - Main Container
   ============================================================================ */

.wpl-wipp-detail-panel {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  background: var(--wpl-bg-primary);
  border-radius: var(--wpl-radius-md);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

/* Override Vaadin VerticalLayout defaults */
.wpl-wipp-detail-panel[theme] {
  padding: 0 !important;
}

/* Prevent any overflow from child elements */
.wpl-wipp-detail-panel *,
.wpl-wipp-detail-panel *::before,
.wpl-wipp-detail-panel *::after {
  box-sizing: border-box;
}

/* Ensure all direct children respect width */
.wpl-wipp-detail-panel > * {
  max-width: 100%;
  overflow: hidden;
}

/* ============================================================================
   WIPP DETAIL HEADER - Title & Status Section
   ============================================================================ */

.wpl-wipp-detail-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  background: linear-gradient(to bottom, var(--wpl-bg-secondary), var(--wpl-bg-primary));
  border-bottom: 1px solid var(--wpl-border);
}

.wpl-wipp-detail-header__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-md);
}

.wpl-wipp-detail-header__title {
  margin: 0;
  font-size: var(--wpl-font-size-h3);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-tight);
}

.wpl-wipp-detail-header__description {
  margin-top: var(--wpl-space-xs);
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-secondary);
  line-height: var(--wpl-line-height-normal);
}

/* Status Icon - Circular badge */
.wpl-wipp-status-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--wpl-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wpl-shadow-sm);
  transition: transform var(--wpl-transition-fast), box-shadow var(--wpl-transition-fast);
}

.wpl-wipp-status-icon:hover {
  transform: scale(1.05);
  box-shadow: var(--wpl-shadow-md);
}

.wpl-wipp-status-icon--success {
  background-color: #4CAF50;
}

.wpl-wipp-status-icon--warning {
  background-color: var(--wpl-error);
}

.wpl-wipp-status-icon--error {
  background-color: var(--wpl-red-primary);
}

.wpl-wipp-status-icon--unknown {
  background-color: var(--wpl-gray-400);
}

.wpl-wipp-status-icon iron-icon,
.wpl-wipp-status-icon vaadin-icon {
  color: white;
  width: 20px;
  height: 20px;
}

/* ============================================================================
   WIPP DETAIL TABS - iOS-Inspired Tab Navigation
   ============================================================================ */

.wpl-wipp-detail-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  background: var(--wpl-bg-primary);
  border-bottom: 1px solid var(--wpl-border);
  padding: 0 var(--wpl-space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wpl-wipp-detail-tabs::-webkit-scrollbar {
  display: none;
}

/* Override Vaadin Tabs styling */
.wpl-wipp-detail-tabs vaadin-tabs {
  --lumo-primary-color: var(--wpl-red-primary);
  --lumo-primary-text-color: var(--wpl-red-primary);
  width: 100%;
}

/* Tab container - remove default Vaadin styling */
.wpl-wipp-detail-tabs vaadin-tabs::part(tabs) {
  gap: 0;
}

/* Individual Tab styling */
.wpl-wipp-detail-tab {
  position: relative;
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  min-height: var(--wpl-touch-target);
  cursor: pointer;
  transition: all var(--wpl-transition-fast);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.wpl-wipp-detail-tab::part(content) {
  padding: 0;
}

/* Tab hover state */
.wpl-wipp-detail-tab:hover {
  background-color: var(--wpl-gray-50);
}

/* Tab selected state - red underline indicator */
.wpl-wipp-detail-tab[selected] {
  border-bottom-color: var(--wpl-red-primary);
}

.wpl-wipp-detail-tab[selected] .wpl-tab-label {
  color: var(--wpl-red-primary);
  font-weight: var(--wpl-font-weight-semibold);
}

.wpl-wipp-detail-tab[selected] .wpl-tab-icon {
  color: var(--wpl-red-primary);
}

/* Tab content layout */
.wpl-tab-content {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
}

.wpl-tab-icon {
  width: 18px;
  height: 18px;
  color: var(--wpl-text-secondary);
  transition: color var(--wpl-transition-fast);
}

.wpl-tab-label {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
  transition: color var(--wpl-transition-fast);
  white-space: nowrap;
}

/* Tab Badge - for issues count */
.wpl-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--wpl-space-xs);
  border-radius: 11px;
  font-size: var(--wpl-font-size-tiny);
  font-weight: var(--wpl-font-weight-bold);
  color: white;
  transition: all var(--wpl-transition-fast);
}

.wpl-tab-badge--success {
  background-color: #4CAF50;
}

.wpl-tab-badge--warning {
  background-color: var(--wpl-error);
}

.wpl-tab-badge--error {
  background-color: var(--wpl-red-primary);
}

.wpl-tab-badge--neutral {
  background-color: var(--wpl-gray-400);
}

/* ============================================================================
   WIPP DETAIL CONTENT - Tab Content Container
   ============================================================================ */

.wpl-wipp-detail-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: var(--wpl-space-md);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--wpl-bg-primary);
}

/* ============================================================================
   UNIFIED PANEL STYLING - For Info & Issues Sections
   ============================================================================ */

.wpl-detail-panel {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-md);
  box-shadow: var(--wpl-shadow-card);
  overflow: hidden;
}

.wpl-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  background: var(--wpl-bg-secondary);
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-detail-panel__title {
  margin: 0;
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
}

.wpl-detail-panel__body {
  padding: var(--wpl-space-md) var(--wpl-space-lg);
}

/* ============================================================================
   INFO PANEL - Wipp Metadata Display
   ============================================================================ */

.wpl-info-panel {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-md);
  box-shadow: var(--wpl-shadow-card);
  overflow: hidden;
}

.wpl-info-panel__section {
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-info-panel__section:last-child {
  border-bottom: none;
}

.wpl-info-panel__section--advanced {
  background: var(--wpl-gray-50);
}

/* Advanced Toggle Button */
.wpl-info-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpl-space-xs);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  background: var(--wpl-bg-secondary);
  border-top: 1px solid var(--wpl-border-light);
  border-bottom: 1px solid var(--wpl-border-light);
  cursor: pointer;
  transition: background var(--wpl-transition-fast);
  user-select: none;
}

.wpl-info-panel__toggle:hover {
  background: var(--wpl-gray-100);
}

.wpl-info-panel__toggle:active {
  background: var(--wpl-gray-200);
}

.wpl-info-toggle__icon {
  width: 16px;
  height: 16px;
  color: var(--wpl-text-secondary);
  transition: transform var(--wpl-transition-fast);
}

.wpl-info-toggle__icon--expanded {
  transform: rotate(180deg);
}

.wpl-info-toggle__label {
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
}

.wpl-info-row {
  display: flex;
  align-items: flex-start;
  padding: var(--wpl-space-sm) 0;
  border-bottom: 1px solid var(--wpl-gray-100);
}

.wpl-info-row:last-child {
  border-bottom: none;
}

.wpl-info-row__label {
  flex: 0 0 140px;
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-medium);
  color: var(--wpl-text-secondary);
}

.wpl-info-row__value {
  flex: 1;
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  word-break: break-word;
}

.wpl-info-row__value--empty {
  color: var(--wpl-text-tertiary);
  font-style: italic;
}

/* ============================================================================
   ISSUES PANEL - Validation Issues Display
   ============================================================================ */

.wpl-issues-panel {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-md);
  box-shadow: var(--wpl-shadow-card);
  overflow: hidden;
}

/* Issues Summary Bar */
.wpl-issues-summary {
  display: flex;
  gap: var(--wpl-space-md);
  padding: var(--wpl-space-md) var(--wpl-space-lg);
  background: var(--wpl-bg-secondary);
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-issues-summary__badge {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-xs) var(--wpl-space-md);
  border-radius: var(--wpl-radius-sm);
  font-size: var(--wpl-font-size-small);
  font-weight: var(--wpl-font-weight-medium);
}

.wpl-issues-summary__badge--blocker {
  background-color: var(--wpl-red-light);
  color: var(--wpl-red-primary);
  border: 1px solid var(--wpl-red-primary);
}

.wpl-issues-summary__badge--warning {
  background-color: #FFF3E0;
  color: var(--wpl-error);
  border: 1px solid var(--wpl-error);
}

.wpl-issues-summary__count {
  font-weight: var(--wpl-font-weight-bold);
  font-size: var(--wpl-font-size-large);
}

/* Issues List */
.wpl-issues-list {
  padding: var(--wpl-space-md);
}

/* Issue Card - Individual issue item */
.wpl-issue-card {
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-sm);
  margin-bottom: var(--wpl-space-sm);
  overflow: hidden;
  transition: box-shadow var(--wpl-transition-fast);
}

.wpl-issue-card:hover {
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-issue-card:last-child {
  margin-bottom: 0;
}

.wpl-issue-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  background: var(--wpl-gray-50);
  border-bottom: 1px solid var(--wpl-border-light);
}

.wpl-issue-card__header-left {
  display: flex;
  align-items: center;
  gap: var(--wpl-space-sm);
  flex: 1;
  min-width: 0;
}

.wpl-issue-card__title {
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpl-issue-card__id {
  font-size: var(--wpl-font-size-small);
  font-family: var(--wpl-font-family-mono);
  color: var(--wpl-text-tertiary);
  white-space: nowrap;
}

.wpl-issue-card__fix-btn {
  flex-shrink: 0;
  color: var(--wpl-primary);
}

.wpl-issue-card__fix-btn:hover {
  background-color: var(--wpl-primary-light);
}

.wpl-issue-card__body {
  padding: var(--wpl-space-sm) var(--wpl-space-md);
}

/* Issue Row - Single issue item */
.wpl-issue-row {
  display: flex;
  align-items: flex-start;
  gap: var(--wpl-space-sm);
  padding: var(--wpl-space-sm);
  border-radius: var(--wpl-radius-sm);
  margin-bottom: var(--wpl-space-xs);
}

.wpl-issue-row:last-child {
  margin-bottom: 0;
}

.wpl-issue-row--blocker {
  background-color: var(--wpl-red-light);
}

.wpl-issue-row--warning {
  background-color: #FFF8E1;
}

.wpl-issue-row__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.wpl-issue-row__icon--blocker {
  color: var(--wpl-red-primary);
}

.wpl-issue-row__icon--warning {
  color: var(--wpl-error);
}

.wpl-issue-row__message {
  flex: 1;
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-primary);
  line-height: var(--wpl-line-height-normal);
}

.wpl-issue-row__actions {
  display: flex;
  gap: var(--wpl-space-xs);
  flex-shrink: 0;
}

/* No Issues State */
.wpl-no-issues {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wpl-space-3xl) var(--wpl-space-md);
  text-align: center;
}

.wpl-no-issues__icon {
  width: 64px;
  height: 64px;
  color: #4CAF50;
  margin-bottom: var(--wpl-space-md);
}

.wpl-no-issues__message {
  font-size: var(--wpl-font-size-large);
  font-weight: var(--wpl-font-weight-medium);
  color: #4CAF50;
}

/* ============================================================================
   BANNER PANEL - Banner Image Display & Upload
   ============================================================================ */

.wpl-banner-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--wpl-space-lg);
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-md);
  box-shadow: var(--wpl-shadow-card);
}

.wpl-banner-preview {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  border-radius: var(--wpl-radius-md);
  overflow: hidden;
  background: var(--wpl-bg-secondary);
  border: 1px solid var(--wpl-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpl-banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpl-banner-preview--empty {
  flex-direction: column;
  gap: var(--wpl-space-sm);
  color: var(--wpl-text-tertiary);
}

.wpl-banner-preview__icon {
  width: 48px;
  height: 48px;
  color: var(--wpl-gray-400);
}

.wpl-banner-preview__text {
  font-size: var(--wpl-font-size-body);
  color: var(--wpl-text-tertiary);
}

.wpl-banner-actions {
  display: flex;
  gap: var(--wpl-space-sm);
  margin-top: var(--wpl-space-md);
  justify-content: center;
}

.wpl-banner-preview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpl-banner-upload-btn {
  min-width: 140px;
}

.wpl-banner-remove-btn {
  min-width: 100px;
}

/* ============================================================================
   DIAGRAM PANEL - Workflow Diagram Container
   ============================================================================ */

.wpl-diagram-panel {
  width: 100%;
  max-width: 100%;
  background: var(--wpl-bg-primary);
  border: 1px solid var(--wpl-border);
  border-radius: var(--wpl-radius-md);
  box-shadow: var(--wpl-shadow-card);
  overflow: hidden;
}

/* Ensure the wipp-diagram element respects container */
.wpl-diagram-panel wipp-diagram {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .wpl-wipp-detail-header {
    padding: var(--wpl-space-md);
  }

  .wpl-wipp-detail-header__title {
    font-size: var(--wpl-font-size-xlarge);
  }

  .wpl-wipp-detail-tab {
    padding: var(--wpl-space-sm) var(--wpl-space-md);
  }

  .wpl-tab-label {
    font-size: var(--wpl-font-size-small);
  }

  .wpl-info-row {
    flex-direction: column;
    gap: var(--wpl-space-xs);
  }

  .wpl-info-row__label {
    flex: none;
  }

  .wpl-issues-summary {
    flex-wrap: wrap;
  }

  .wpl-issue-row {
    flex-wrap: wrap;
  }

  .wpl-issue-row__actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--wpl-space-xs);
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpl-wipp-detail-header {
    padding: var(--wpl-space-md) var(--wpl-space-lg);
  }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .wpl-wipp-detail-content {
    padding: var(--wpl-space-lg);
  }

  .wpl-info-row__label {
    flex: 0 0 160px;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[theme~="dark"] {
  .wpl-wipp-detail-panel {
    background: var(--wpl-gray-900);
  }

  .wpl-wipp-detail-header {
    background: linear-gradient(to bottom, var(--wpl-gray-800), var(--wpl-gray-900));
    border-bottom-color: var(--wpl-gray-700);
  }

  .wpl-wipp-detail-tabs {
    background: var(--wpl-gray-900);
    border-bottom-color: var(--wpl-gray-700);
  }

  .wpl-wipp-detail-tab:hover {
    background-color: var(--wpl-gray-800);
  }

  .wpl-wipp-detail-content {
    background: var(--wpl-gray-900);
  }

  .wpl-detail-panel,
  .wpl-info-panel,
  .wpl-issues-panel,
  .wpl-banner-panel,
  .wpl-diagram-panel {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-detail-panel__header,
  .wpl-issues-summary {
    background: var(--wpl-gray-800);
    border-bottom-color: var(--wpl-gray-700);
  }

  .wpl-info-row {
    border-bottom-color: var(--wpl-gray-700);
  }

  .wpl-issue-card {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }

  .wpl-issue-card__header {
    background: var(--wpl-gray-700);
    border-bottom-color: var(--wpl-gray-600);
  }

  .wpl-issue-row--blocker {
    background-color: rgba(225, 33, 26, 0.15);
  }

  .wpl-issue-row--warning {
    background-color: rgba(245, 124, 0, 0.15);
  }

  .wpl-banner-preview {
    background: var(--wpl-gray-800);
    border-color: var(--wpl-gray-700);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus visible states */
.wpl-wipp-detail-tab:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: -2px;
}

.wpl-issue-card:focus-within {
  outline: 2px solid var(--wpl-blue-primary);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpl-wipp-status-icon,
  .wpl-wipp-detail-tab,
  .wpl-issue-card,
  .wpl-tab-badge {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-detail-panel,
  .wpl-info-panel,
  .wpl-issues-panel,
  .wpl-banner-panel,
  .wpl-diagram-panel {
    border-width: 2px;
  }

  .wpl-issue-row--blocker,
  .wpl-issue-row--warning {
    border: 1px solid currentColor;
  }
}



/* Users View Styles */
/* === Inlined from ./components/users-view.css === */
/*
 * WPL Users View Styles - Modern Admin Interface
 * Version 1.0 - Clean, modern design inspired by iOS and Material Design
 * Features card-like rows, smooth animations, and responsive design
 */

/* ============================================================================
   USERS VIEW CONTAINER
   ============================================================================ */

.wpl-users-view {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: var(--wpl-bg-secondary, #F5F5F5);
  min-height: 100%;
}

.wpl-users-view > vaadin-vertical-layout {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}

/* ============================================================================
   USERS TOOLBAR STYLES - Modern Admin Header
   ============================================================================ */

.wpl-users-toolbar {
  background: var(--wpl-bg-primary, #FFFFFF) !important;
  border-bottom: 1px solid var(--wpl-gray-200, #E5E7EB) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  padding: 12px 16px !important;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px !important;
}

/* Toolbar title with count */
.wpl-users-toolbar .wpl-toolbar-label {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--wpl-text-primary, #000000) !important;
  margin: 0 !important;
  padding: 0 4px !important;
}

/* Toolbar back button - subtle style */
.wpl-users-toolbar .wpl-toolbar-button-secondary {
  background: transparent !important;
  color: var(--wpl-gray-500, #6B7280) !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

.wpl-users-toolbar .wpl-toolbar-button-secondary:hover {
  background: var(--wpl-gray-100, #F3F4F6) !important;
  color: var(--wpl-text-primary, #000000) !important;
}

.wpl-users-toolbar .wpl-toolbar-button-secondary:active {
  background: var(--wpl-gray-200, #E5E7EB) !important;
}

/* Toolbar primary button - add user */
.wpl-users-toolbar .wpl-button-primary {
  background: var(--wpl-red-primary, #E1211A) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(225, 33, 26, 0.2) !important;
  transition: all 0.2s ease !important;
}

.wpl-users-toolbar .wpl-button-primary:hover {
  background: var(--wpl-red-hover, #B01814) !important;
  box-shadow: 0 4px 8px rgba(225, 33, 26, 0.3) !important;
  transform: translateY(-1px);
}

.wpl-users-toolbar .wpl-button-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(225, 33, 26, 0.2) !important;
}

/* Toolbar combo box - context filter */
.wpl-users-toolbar vaadin-combo-box {
  --vaadin-input-field-height: 40px;
  font-size: 14px;
}

.wpl-users-toolbar vaadin-combo-box::part(input-field) {
  min-height: 40px;
  border-radius: 8px;
  background: var(--wpl-gray-50, #F9FAFB);
  border: 1px solid var(--wpl-gray-300, #D1D5DB);
  box-shadow: none;
  transition: all 0.2s ease;
}

.wpl-users-toolbar vaadin-combo-box:hover::part(input-field) {
  border-color: var(--wpl-gray-400, #9CA3AF);
  background: var(--wpl-bg-primary, #FFFFFF);
}

.wpl-users-toolbar vaadin-combo-box:focus-within::part(input-field) {
  border-color: var(--wpl-red-primary, #E1211A);
  background: var(--wpl-bg-primary, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1);
}

/* Toolbar text field - search */
.wpl-users-toolbar vaadin-text-field {
  --vaadin-input-field-height: 40px;
  font-size: 14px;
}

.wpl-users-toolbar vaadin-text-field::part(input-field) {
  min-height: 40px;
  border-radius: 8px;
  background: var(--wpl-gray-50, #F9FAFB);
  border: 1px solid var(--wpl-gray-300, #D1D5DB);
  box-shadow: none;
  transition: all 0.2s ease;
}

.wpl-users-toolbar vaadin-text-field:hover::part(input-field) {
  border-color: var(--wpl-gray-400, #9CA3AF);
  background: var(--wpl-bg-primary, #FFFFFF);
}

.wpl-users-toolbar vaadin-text-field:focus-within::part(input-field) {
  border-color: var(--wpl-red-primary, #E1211A);
  background: var(--wpl-bg-primary, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(225, 33, 26, 0.1);
}

/* Toolbar search icon styling */
.wpl-users-toolbar vaadin-text-field vaadin-icon {
  color: var(--wpl-gray-400, #9CA3AF);
}

.wpl-users-toolbar vaadin-text-field:focus-within vaadin-icon {
  color: var(--wpl-red-primary, #E1211A);
}

/* ============================================================================
   USERS GRID STYLES - Modern Card-Like Rows
   ============================================================================ */

#users-grid {
  border: none !important;
  background: transparent !important;
  --lumo-base-color: transparent;
}

#users-grid::part(header-cell) {
  display: none !important;
}

#users-grid vaadin-grid-cell-content {
  padding: 0 !important;
}

/* Remove grid row backgrounds - let cards handle it */
#users-grid::part(row) {
  background: transparent !important;
  border: none !important;
}

#users-grid::part(body-cell) {
  padding: 6px 16px !important;
  background: transparent !important;
}

#users-grid::part(row):hover {
  background: transparent !important;
}

/* ============================================================================
   USER ROW CARD STYLES - Modern Card Design
   ============================================================================ */

.wpl-user-row {
  display: flex !important;
  align-items: center !important;
  background: var(--wpl-bg-primary, #FFFFFF) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--wpl-gray-100, #F3F4F6) !important;
  transition: all 0.2s ease !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wpl-user-row:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--wpl-gray-200, #E5E7EB) !important;
  transform: translateY(-1px) !important;
}

.wpl-user-row:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================================
   USER AVATAR STYLES - Modern Circular Design
   ============================================================================ */

.wpl-user-row vaadin-avatar {
  flex-shrink: 0 !important;
  --vaadin-avatar-size: 48px !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border: 2px solid var(--wpl-bg-primary, #FFFFFF) !important;
}

/* Avatar color variations based on color-index */
.wpl-user-row vaadin-avatar[color-index="0"] {
  --vaadin-avatar-user-color: #E91E63 !important;
}

.wpl-user-row vaadin-avatar[color-index="1"] {
  --vaadin-avatar-user-color: #9C27B0 !important;
}

.wpl-user-row vaadin-avatar[color-index="2"] {
  --vaadin-avatar-user-color: #3F51B5 !important;
}

.wpl-user-row vaadin-avatar[color-index="3"] {
  --vaadin-avatar-user-color: #00BCD4 !important;
}

.wpl-user-row vaadin-avatar[color-index="4"] {
  --vaadin-avatar-user-color: #009688 !important;
}

.wpl-user-row vaadin-avatar[color-index="5"] {
  --vaadin-avatar-user-color: #4CAF50 !important;
}

.wpl-user-row vaadin-avatar[color-index="6"] {
  --vaadin-avatar-user-color: #FF9800 !important;
}

/* Mobile avatar size */
@media (max-width: 767px) {
  .wpl-user-row vaadin-avatar {
    --vaadin-avatar-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* ============================================================================
   USER INFO SECTION - Name, Email, Roles
   ============================================================================ */

.wpl-user-row vaadin-vertical-layout {
  flex: 1 !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* User name - primary text */
.wpl-user-row .wpl-row-title,
.wpl-user-row > vaadin-vertical-layout > div:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--wpl-text-primary, #000000) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* User email - secondary text */
.wpl-user-row .wpl-row-subtitle,
.wpl-user-row > vaadin-vertical-layout > div:nth-child(2) {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--wpl-text-secondary, #6B7280) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* User roles - tertiary text */
.wpl-user-row .wpl-row-info,
.wpl-user-row > vaadin-vertical-layout > div:nth-child(3) {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--wpl-gray-500, #6B7280) !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ============================================================================
   USER STATUS ICON - Color-coded status
   ============================================================================ */

.wpl-user-row vaadin-icon[icon^="vaadin:check-circle"],
.wpl-user-row vaadin-icon.wpl-status-active {
  color: var(--lumo-success-color, #17C800) !important;
}

.wpl-user-row vaadin-icon[icon^="vaadin:circle"],
.wpl-user-row vaadin-icon.wpl-status-inactive {
  color: var(--wpl-gray-400, #9CA3AF) !important;
}

.wpl-user-row vaadin-icon[icon^="vaadin:ban"],
.wpl-user-row vaadin-icon.wpl-status-banned {
  color: var(--wpl-error, #F57C00) !important;
}

.wpl-user-row vaadin-icon[icon^="vaadin:clock"],
.wpl-user-row vaadin-icon.wpl-status-pending {
  color: var(--wpl-blue-primary, #007AFF) !important;
}

/* Status icon container */
.wpl-user-row .wpl-status-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* ============================================================================
   USER ROW MENU - Modern Dropdown
   ============================================================================ */

.wpl-user-row vaadin-menu-bar {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.wpl-user-row vaadin-menu-bar::part(container) {
  background: transparent !important;
}

.wpl-user-row vaadin-menu-bar vaadin-menu-bar-button {
  background: transparent !important;
  border: none !important;
  color: var(--wpl-gray-500, #6B7280) !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.wpl-user-row vaadin-menu-bar vaadin-menu-bar-button:hover {
  background: var(--wpl-gray-100, #F3F4F6) !important;
  color: var(--wpl-text-primary, #000000) !important;
}

.wpl-user-row vaadin-menu-bar vaadin-menu-bar-button:active {
  background: var(--wpl-gray-200, #E5E7EB) !important;
}

/* Menu item icon */
.wpl-user-row vaadin-menu-bar vaadin-icon {
  width: 20px !important;
  height: 20px !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile layout */
@media (max-width: 767px) {
  .wpl-users-toolbar {
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .wpl-users-toolbar .wpl-toolbar-label {
    font-size: 16px !important;
  }

  .wpl-users-toolbar vaadin-combo-box,
  .wpl-users-toolbar vaadin-text-field {
    flex: 1 !important;
    min-width: 120px !important;
  }

  #users-grid::part(body-cell) {
    padding: 4px 12px !important;
  }

  .wpl-user-row {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }

  .wpl-user-row vaadin-menu-bar vaadin-menu-bar-button {
    min-width: 32px !important;
    height: 32px !important;
  }
}

/* Desktop enhancements */
@media (min-width: 768px) {
  .wpl-users-toolbar {
    padding: 16px 24px !important;
  }

  #users-grid::part(body-cell) {
    padding: 8px 24px !important;
  }

  .wpl-user-row {
    padding: 14px 20px !important;
  }
}

/* ============================================================================
   EMPTY STATE STYLING
   ============================================================================ */

.wpl-users-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px !important;
  text-align: center !important;
  color: var(--wpl-text-secondary, #6B7280) !important;
}

.wpl-users-empty-icon {
  font-size: 64px !important;
  color: var(--wpl-gray-300, #D1D5DB) !important;
  margin-bottom: 16px !important;
}

.wpl-users-empty-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--wpl-text-primary, #000000) !important;
  margin-bottom: 8px !important;
}

.wpl-users-empty-message {
  font-size: 14px !important;
  color: var(--wpl-text-tertiary, #8A8A8A) !important;
}

/* ============================================================================
   LOADING STATE STYLING
   ============================================================================ */

.wpl-users-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px !important;
}

.wpl-users-loading vaadin-progress-bar {
  width: 200px !important;
}



/* === Inlined from ./components/not-found.css === */
/* ============================================================================
   WPL Not Found (404) Page - iOS-Inspired Design
   ============================================================================
   Custom 404 error page styled with WPL branding (red #E1211A)
   Mobile-first responsive design with centered content layout
   ============================================================================ */

/* ===== VIEW CONTAINER ===== */
.wpl-not-found-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--wpl-header-height-mobile) - var(--wpl-bottom-nav-height) - 32px);
  width: 100%;
  padding: var(--wpl-space-lg);
  box-sizing: border-box;
  background: var(--wpl-bg-primary);
}

/* ===== CONTENT CONTAINER ===== */
.wpl-not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 400px;
  gap: var(--wpl-space-md);
}

/* ===== ICON CONTAINER ===== */
.wpl-not-found-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: var(--wpl-radius-round);
  background: var(--wpl-red-light);
  margin-bottom: var(--wpl-space-md);
}

.wpl-not-found-icon {
  width: 48px;
  height: 48px;
  color: var(--wpl-red-primary);
}

/* ===== 404 CODE ===== */
.wpl-not-found-code {
  font-family: var(--wpl-font-family);
  font-size: 80px;
  font-weight: var(--wpl-font-weight-bold);
  color: var(--wpl-red-primary);
  line-height: 1;
  margin: 0;
  letter-spacing: -2px;
}

/* ===== TITLE ===== */
.wpl-not-found-title {
  font-family: var(--wpl-font-family);
  font-size: var(--wpl-font-size-xxlarge);
  font-weight: var(--wpl-font-weight-semibold);
  color: var(--wpl-text-primary);
  margin: 0;
  line-height: var(--wpl-line-height-tight);
}

/* ===== DESCRIPTION ===== */
.wpl-not-found-description {
  font-family: var(--wpl-font-family);
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-regular);
  color: var(--wpl-text-secondary);
  margin: 0;
  line-height: var(--wpl-line-height-normal);
  max-width: 300px;
}

/* ===== ATTEMPTED PATH ===== */
.wpl-not-found-path {
  font-family: var(--wpl-font-family-mono);
  font-size: var(--wpl-font-size-small);
  color: var(--wpl-text-tertiary);
  background: var(--wpl-bg-secondary);
  padding: var(--wpl-space-sm) var(--wpl-space-md);
  border-radius: var(--wpl-radius-md);
  margin-top: var(--wpl-space-sm);
  word-break: break-all;
  max-width: 100%;
}

/* ===== HOME BUTTON ===== */
.wpl-not-found-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpl-space-sm);
  min-height: var(--wpl-touch-target);
  min-width: 200px;
  padding: 0 var(--wpl-space-xl);
  margin-top: var(--wpl-space-lg);

  /* Typography */
  font-family: var(--wpl-font-family);
  font-size: var(--wpl-font-size-body);
  font-weight: var(--wpl-font-weight-semibold);
  text-decoration: none;

  /* Colors */
  background: var(--wpl-red-primary);
  color: var(--wpl-text-on-primary);

  /* Shape */
  border-radius: var(--wpl-radius-lg);
  border: none;

  /* Effects */
  cursor: pointer;
  transition: all var(--wpl-transition-fast);
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-not-found-button:hover {
  background: var(--wpl-red-hover);
  transform: translateY(-1px);
  box-shadow: var(--wpl-shadow-md);
  text-decoration: none;
  color: var(--wpl-text-on-primary);
}

.wpl-not-found-button:active {
  background: var(--wpl-red-active);
  transform: translateY(0);
  box-shadow: var(--wpl-shadow-sm);
}

.wpl-not-found-button:focus-visible {
  outline: 2px solid var(--wpl-red-primary);
  outline-offset: 2px;
}

.wpl-not-found-button-icon {
  width: 20px;
  height: 20px;
  color: var(--wpl-text-on-primary);
}

.wpl-not-found-button-text {
  color: var(--wpl-text-on-primary);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Desktop - Larger typography and spacing */
@media (min-width: 769px) {
  .wpl-not-found-view {
    min-height: calc(100vh - var(--wpl-header-height-desktop) - var(--wpl-bottom-nav-height) - 32px);
  }

  .wpl-not-found-icon-container {
    width: 120px;
    height: 120px;
  }

  .wpl-not-found-icon {
    width: 56px;
    height: 56px;
  }

  .wpl-not-found-code {
    font-size: 120px;
  }

  .wpl-not-found-title {
    font-size: var(--wpl-font-size-h2);
  }

  .wpl-not-found-description {
    font-size: var(--wpl-font-size-large);
    max-width: 350px;
  }

  .wpl-not-found-button {
    min-height: var(--wpl-button-height-desktop);
    min-width: 220px;
  }
}

/* ===== ACCESSIBILITY ===== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .wpl-not-found-code {
    color: var(--wpl-black);
  }

  .wpl-not-found-button {
    border: 2px solid var(--wpl-black);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpl-not-found-button {
    transition: none;
    transform: none;
  }

  .wpl-not-found-button:hover,
  .wpl-not-found-button:active {
    transform: none;
  }
}

/* ===== DARK MODE SUPPORT ===== */
[theme~="dark"] .wpl-not-found-view {
  background: var(--lumo-base-color, #1a1a1a);
}

[theme~="dark"] .wpl-not-found-icon-container {
  background: rgba(225, 33, 26, 0.15);
}

[theme~="dark"] .wpl-not-found-title {
  color: var(--wpl-white);
}

[theme~="dark"] .wpl-not-found-description {
  color: var(--wpl-gray-400);
}

[theme~="dark"] .wpl-not-found-path {
  background: var(--wpl-gray-800);
  color: var(--wpl-gray-400);
}


/* ============================================================================
   END OF WPLSTYLE CUSTOMIZATIONS
   ============================================================================ */