/**
 * DASHBOARD-ONLY CSS - CLEAN STARTING POINT
 * Single-file CSS for dashboard page only
 * Clean architecture for progressive building
 */

/* ===== CSS RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== BASE STYLES ===== */
html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f8f9fa;
  color: #1f2937;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===== UTILITY CLASSES ===== */

/* Element visibility utilities */
.element-visible {
  display: block !important;
}

.element-hidden {
  display: none !important;
}

/* Page-specific visibility */
.enrollment-hidden,
.auth-hidden,
.clock-hidden {
  display: none !important;
}

.show {
  display: block !important;
}

/* Legacy utility for older components */
.d-none {
  display: none !important;
}

/* ===== DESIGN SYSTEM VARIABLES ===== */
:root {
  /* Colors */
  --primary-blue: #0056b3;
  --dark-navy: #374151;
  --success-green: #28a745;
  --warning-orange: #f59e0b;
  --error-red: #ef4444;
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --border-gray: #e5e7eb;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Typography */
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 2rem;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-button: 0 8px 32px rgba(66, 133, 244, 0.3), 0 4px 8px rgba(0, 0, 0, 0.12);
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 50%;
  
  /* Consistent Component Widths */
  --component-width-narrow: 500px;
  --component-width-standard: 640px;
  --component-width-wide: 768px;
  --component-width-modal: 640px;
}

/* ===== LAYOUT COMPONENTS ===== */
.app-container {
  max-width: var(--component-width-wide);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* ===== DASHBOARD COMPONENTS ===== */
.dashboard-container {
  width: 100%;
  min-height: 100vh;
}

/* Dashboard Header - Enhanced Professional */
.clock-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 68, 148, 0.08);
  position: relative;
}

.clock-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 68, 148, 0.1) 50%, transparent 100%);
}

.facility-details h5 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-dark);
}

.facility-details small {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: linear-gradient(135deg, var(--success-green) 0%, #28a745 100%);
  color: white;
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
  transition: all 0.3s ease;
}

/* Offline status styling */
.connection-status.offline {
  background: linear-gradient(135deg, var(--warning-orange) 0%, #e67e22 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.connection-status i {
  font-size: var(--font-sm);
  color: white;
}

.connection-status small {
  font-size: var(--font-sm);
  font-weight: 600;
  color: white;
}

/* Logout Button */
.logout-button {
  justify-self: end;
  padding: var(--space-xs);
  color: #dc3545;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.logout-button:hover {
  opacity: 0.7;
}

/* Time Display Banner - Professional Healthcare Style */
.time-display {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: white;
  text-align: center;
  padding: 1.75rem var(--space-md);
  width: 100%;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

/* Removed gradient borders - clean banner design */

.current-time {
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: white;
}

.current-date {
  font-size: var(--font-base);
  opacity: 0.9;
  margin-top: var(--space-xs);
  color: rgba(255, 255, 255, 0.9);
}

/* Status Card - Enhanced Professional */
.status-display {
  max-width: var(--component-width-standard);
  margin: 0 auto;
  padding: 1.5rem var(--space-lg) var(--space-xl);
  text-align: center;
  background: var(--white);
}

.status-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  margin: 0 auto;
  max-width: var(--component-width-standard);
  position: relative;
  overflow: hidden;
  cursor: default;
  /* Informational card - no colored borders */
}

.status-icon {
  font-size: 2.5rem;
  color: var(--dark-navy);
  margin-bottom: var(--space-md);
  display: block;
}

.status-card h4 {
  font-size: var(--font-2xl);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text-dark);
}

.status-card p {
  color: var(--text-muted);
  font-size: var(--font-base);
}

/* Scan Button - Enhanced Professional */
.dashboard-scan-button {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto 3rem;
  font-size: var(--font-lg);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 25px rgba(0, 68, 148, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.dashboard-scan-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-scan-button i {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
}

.dashboard-scan-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 12px 35px rgba(0, 68, 148, 0.4),
    0 5px 15px rgba(0, 0, 0, 0.2);
}

.dashboard-scan-button:hover::before {
  opacity: 1;
}

.dashboard-scan-button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 
    0 6px 20px rgba(0, 68, 148, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status Grid */
.facility-status {
  margin: var(--space-xl) auto;
  max-width: var(--component-width-standard);
  padding: 0 var(--space-lg);
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Status Colors - Proper CSS Cascade Order */

/* Default base styles */
.status-item {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  border: 2px solid #e5e7eb;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  background: #ffffff;
  cursor: default;
  color: #374151;
  font-weight: 500;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.status-item::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
}

/* Status-specific styles - ordered by specificity */

/* Good status (Green) */
.status-item.status-good {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  color: #065f46;
}

.status-item.status-good::after {
  background: #10b981;
}

.status-item.status-good i {
  color: #10b981;
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
}

/* Warning/Degraded status (Orange) */
.status-item.status-warning,
.status-item.status-degraded {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
}

.status-item.status-warning::after,
.status-item.status-degraded::after {
  background: #f59e0b;
}

.status-item.status-warning i,
.status-item.status-degraded i {
  color: #f59e0b;
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
}

/* Error status (Red) */
.status-item.status-error {
  border-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
}

.status-item.status-error::after {
  background: #ef4444;
}

.status-item.status-error i {
  color: #ef4444;
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
}

/* Legacy classes for backward compatibility */
.system-status {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  color: #065f46;
}

.system-status::after {
  background: #10b981;
}

.system-status i {
  color: #10b981;
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
}

.camera-status {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
}

.camera-status::after {
  background: #f59e0b;
}

.camera-status i {
  color: #f59e0b;
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
}

.status-item i {
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
  display: block;
}

.status-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
  line-height: 1.2;
}

.security-notice {
  text-align: center;
  margin-top: var(--space-lg);
}

.security-notice small {
  color: var(--text-muted);
  font-size: var(--font-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Action Grid */
.action-grid {
  max-width: var(--component-width-standard);
  margin: var(--space-xl) auto;
  padding: 0 var(--space-lg) var(--space-xl);
}


/* Header Component Specific Styles */
.facility-subtitle {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.connection-icon {
  font-size: var(--font-base);
  color: var(--success-green);
}

.connection-text {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--success-green);
}

.security-notice-text {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-xl) var(--space-md);
}

.employee-number {
  margin-left: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.instruction-icon {
  margin-right: var(--space-xs);
}

.photo-counter {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.success-icon {
  color: var(--success-green);
  margin-right: var(--space-xs);
}

.instruction-text {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.session-icon {
  margin-right: var(--space-xs);
  color: var(--success-green);
  font-size: var(--font-xl);
}

.session-title {
  margin-bottom: 0;
  color: var(--success-green);
  font-size: var(--font-xl);
}

.session-subtitle {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: var(--font-sm);
}

.success-message {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: var(--font-sm);
}

.success-title {
  margin-bottom: 0;
  color: var(--success-green);
  font-size: var(--font-xl);
}

.status-ready {
  color: var(--success-green);
}

.status-continue {
  color: var(--primary-blue);
}

.status-icon-muted {
  color: var(--text-muted);
}

.status-icon-success {
  color: var(--success-green);
}

/* Legacy compatibility */
.text-muted { 
  color: var(--text-muted); 
}

.text-success {
  color: var(--success-green);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 480px) {
  .current-time {
    font-size: 3rem;
  }
  
  .dashboard-scan-button {
    width: 180px;
    height: 180px;
    font-size: 1.1rem;
  }
  
  .dashboard-scan-button i {
    font-size: 2.5rem;
  }
}



/* ===== ENROLLMENT PAGE STYLES ===== */

/* ==========================================
   ENROLLMENT STYLES - Complete enrollment flow
   ========================================== */

.enrollment-step {
  background: #ffffff;
  min-height: calc(100vh - 200px);
}

/* Enrollment Banner - matches dashboard time banner style */
.enrollment-banner {
  color: white;
  text-align: center;
  padding: 0.625rem var(--space-md);
}

.enrollment-title {
  font-size: var(--font-2xl);
  font-weight: 500;
  margin-bottom: var(--space-xs);
  color: white;
}

.enrollment-subtitle {
  font-size: var(--font-base);
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   GENERIC STEP WIZARD STYLES
   Shared by clock-action and other multi-step flows
   ========================================== */

/* Step Wizard Container - Generic version of enrollment-container */
.step-wizard-container {
  max-width: var(--component-width-standard);
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
}

/* Page Banner - Generic version of enrollment-banner */
.page-banner {
  color: white;
  text-align: center;
  padding: 0.625rem var(--space-md);
}

/* Banner Title - Generic version of enrollment-title */
.banner-title {
  font-size: var(--font-2xl);
  font-weight: 500;
  margin-bottom: var(--space-xs);
  color: white;
}

/* Banner Subtitle - Generic version of enrollment-subtitle */
.banner-subtitle {
  font-size: var(--font-base);
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

/* Enrollment Steps */
.enrollment-step.active {
  padding: 2rem 1.5rem;
  max-width: var(--component-width-standard);
  margin: 0 auto;
}

.step-indicator {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  margin-top: 1.5rem;
}

.step-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-base);
  border: 2px solid var(--border-gray);
  background: var(--white);
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.step-item.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}

.step-item.completed {
  background: var(--success-green);
  border-color: var(--success-green);
  color: white;
}

.step-title {
  text-align: center;
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-xl);
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Selected Employee Context */
.selected-employee-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.enrolling-employee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.enrolling-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
}

.employee-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

.change-employee-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #0066cc;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.change-employee-link:hover {
  background: #e0f2fe;
  color: #0284c7;
  text-decoration: none;
}

.change-employee-link:active {
  transform: translateY(1px);
}

.change-employee-link i {
  font-size: 0.75rem;
}

/* Step 3 Navigation Context - matches Step 2 styling */
.confirmation-nav-context {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.back-to-photos-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #0066cc;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.back-to-photos-link:hover {
  background: #e0f2fe;
  color: #0284c7;
  text-decoration: none;
}

.back-to-photos-link:active {
  transform: translateY(1px);
}

.back-to-photos-link i {
  font-size: 0.75rem;
}

/* Professional Employee Search */
.employee-search {
  margin-bottom: var(--space-xl);
}

.search-input-container {
  position: relative;
  margin-bottom: var(--space-lg);
}

.search-icon {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--font-base);
  z-index: 2;
}

.search-input {
  width: 100%;
  padding: var(--space-lg) var(--space-xl) var(--space-lg) 3rem;
  border: 2px solid rgba(0, 68, 148, 0.1);
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.03);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 
    0 0 0 3px rgba(0, 86, 179, 0.1),
    0 8px 25px rgba(0, 68, 148, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.search-clear-btn {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-muted);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.75rem;
}

.search-clear-btn:hover {
  background: var(--error-red);
  transform: translateY(-50%) scale(1.1);
}

.search-results {
  background: rgba(0, 86, 179, 0.05);
  border: 1px solid rgba(0, 86, 179, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
  color: var(--primary-blue);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--space-md);
}

/* Employee List */
.employee-list {
  margin-bottom: var(--space-xl);
  min-height: 200px;
}

/* Enterprise-Grade Employee Card Design - Fortune 500 level */
.employee-card {
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  margin-bottom: 1.75rem;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.24);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  backdrop-filter: saturate(180%) blur(20px);
  user-select: none;
}

.employee-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #004494 50%, #0066cc 100%);
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 20px 20px 0 0;
}

.employee-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 16px 32px rgba(0, 86, 179, 0.12),
    0 8px 16px rgba(15, 23, 42, 0.08);
  border-color: var(--primary-blue);
}

.employee-card:hover::before {
  opacity: 1;
}
.employee-card:hover .employee-number {
  opacity: 1;
}

.employee-card.selected {
  border-color: var(--primary-blue);
  background: linear-gradient(145deg, rgba(0, 86, 179, 0.05) 0%, rgba(0, 86, 179, 0.02) 100%);
  box-shadow: 
    0 12px 30px rgba(0, 86, 179, 0.2),
    0 6px 12px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.employee-card.selected::before {
  opacity: 1;
}

/* Selection confirmation animation */
.employee-card.selecting {
  animation: selectPulse 0.6s ease-out;
  border-color: var(--primary-blue);
}

@keyframes selectPulse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(0, 86, 179, 0.25); }
  100% { transform: translateY(-2px) scale(1); }
}

/* Employee Card Header */
.employee-card-header {
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

/* Professional Avatar Design */
.employee-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 6px rgba(15, 23, 42, 0.07),
    0 1px 3px rgba(15, 23, 42, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.95);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Employee card photos (for manual selection and card displays) */
.employee-card .employee-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.employee-initials {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 14px;
}

/* Employee Info */
.employee-info {
  flex: 1;
  min-width: 0;
}

.employee-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

/* Employee Meta Line - Position and Department */
.employee-meta-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.4;
}

.employee-position {
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;
}

.employee-position.text-muted {
  font-style: italic;
  color: #94a3b8;
}

.employee-department {
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 400;
  display: inline-block;
}

.employee-department::before {
  content: '·';
  margin: 0 0.5rem;
  color: #cbd5e1;
  font-weight: 600;
}

/* Employee Status Line */
.employee-status-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.employee-status-text {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.employee-status-text.status-success {
  color: #059669;
}

.employee-status-text.status-warning {
  color: #d97706;
}

.employee-status-text.status-danger {
  color: #dc2626;
}

.employee-status-text.status-secondary {
  color: #9ca3af;
}

.employee-status-text.status-pending {
  color: #0056b3;
}

/* Employee Card Date - Top Right Corner */
.employee-card-date {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.employee-number {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0.025em;
  line-height: 1.2;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}




/* Enterprise Status Badge System */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.015em;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  line-height: 1;
}

.status-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.status-badge:hover::before {
  left: 100%;
}

/* Modern Status Badge Colors */
.status-badge-success {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.status-badge-warning {
  background: #fef3c7;
  color: #d97706;
  border-color: #fde68a;
}

.status-badge-danger {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

.status-badge-info {
  background: #dbeafe;
  color: var(--primary-blue);
  border-color: #bfdbfe;
}

.status-badge-secondary {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}


/* Unified Add Employee Button Component */
.add-employee-button {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 86, 179, 0.08);
  color: var(--text-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: var(--space-lg);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.06);
  border-top: 3px solid var(--primary-blue);
  position: relative;
  overflow: hidden;
}

.add-employee-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(30, 58, 138, 0.25),
    0 5px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border-color: var(--primary-blue);
}

.add-employee-button i {
  font-size: var(--font-3xl);
  margin-bottom: var(--space-sm);
  color: var(--dark-navy);
}

.add-employee-button:hover i,
.add-employee-button:hover .button-title,
.add-employee-button:hover .button-subtitle {
  color: white;
}

.button-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.button-subtitle {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* Professional No Employees State - Matches Employee Card Height */
.no-employees {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.24);
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}

.no-employees i {
  font-size: 2rem;
  color: var(--dark-navy);
  margin-bottom: 0.75rem;
}

.no-employees p {
  color: var(--text-muted);
  font-size: var(--font-md);
  font-weight: 500;
  margin: 0;
}

.add-employee-btn {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 4px 16px rgba(0, 86, 179, 0.3);
}

.add-employee-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #004494 0%, #003875 100%);
  box-shadow: 0 8px 25px rgba(0, 68, 148, 0.4);
}

/* Professional Utility Classes */

.btn {
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius-md);
  font-weight: 500;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  border: none;
  box-shadow: 
    0 0 0 1px rgba(0, 86, 179, 0.1),
    0 2px 4px rgba(0, 86, 179, 0.2),
    0 8px 16px rgba(0, 86, 179, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #004494 0%, #003875 100%);
  box-shadow: 
    0 0 0 1px rgba(0, 68, 148, 0.15),
    0 4px 6px rgba(0, 68, 148, 0.25),
    0 12px 20px rgba(0, 68, 148, 0.2);
  transform: translateY(-2px);
}

/* Font weight variations */
.font-xs {
  font-size: 0.75rem;
}

.font-sm {
  font-size: var(--font-sm);
}

.me-1 {
  margin-right: 0.25rem;
}

/* Enrollment Actions Container */
.enrollment-actions {
  margin-top: calc(var(--space-xl) + var(--space-md));
}

/* Step Actions Container */
.step-actions {
  display: flex;
  gap: 1.375rem;
  justify-content: center;
  margin-top: 3rem;
  padding: 2rem 0 1rem;
}

/* Navigation Buttons */
.enrollment-nav-buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-xl);
}

.enrollment-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 2px solid var(--border-gray);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.enrollment-nav-button:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background: rgba(0, 86, 179, 0.05);
}

.enrollment-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.enrollment-nav-button i {
  font-size: var(--font-lg);
}

.enrollment-nav-button small {
  font-size: var(--font-sm);
  font-weight: 500;
}

/* Complete Enrollment Button - matches dashboard scan button style */
.enrollment-complete-button {
  background: linear-gradient(135deg, var(--success-green) 0%, #1e7e34 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--font-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
  min-width: 200px;
}

.enrollment-complete-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
}

.enrollment-complete-button i {
  font-size: var(--font-xl);
}

/* Camera Section */
.camera-section {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.camera-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.camera-video,
.camera-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.camera-canvas {
  display: none;
}

.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.camera-capture-button {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 86, 179, 0.3);
}

.camera-capture-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
}

.camera-capture-button i {
  font-size: var(--font-xl);
  margin-bottom: 0.25rem;
}

.camera-capture-button span {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Photo Preview */
.photo-preview {
  text-align: center;
}

.captured-photo {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-bottom: var(--space-lg);
}

.photo-controls {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-lg);
}

/* Enrollment Summary */
.enrollment-summary {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.employee-preview {
  background: var(--white);
  border: 2px solid var(--border-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 300px;
  margin: 0 auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Employee preview photos (for enrollment page) */
.employee-preview .employee-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-lg);
  border: 4px solid var(--border-gray);
}

.employee-name {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-xs);
}


/* ===== LOGIN PAGE STYLES ===== */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.login-card {
  max-width: 400px;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #20c997 100%);
}

.login-header {
  margin-bottom: var(--space-md);
}

.login-icon {
  font-size: 4rem;
  color: #004494;
  margin-bottom: var(--space-lg);
  display: block;
  animation: loginIconPulse 3s ease-in-out infinite;
}

@keyframes loginIconPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.login-title {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.login-subtitle {
  font-size: var(--font-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.5;
}

.login-actions {
  margin-bottom: var(--space-lg);
}

.login-button {
  width: 100%;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--font-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.login-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #004494 0%, #003875 100%);
  box-shadow: 0 8px 20px rgba(0, 86, 179, 0.4);
  text-decoration: none;
  color: white;
}

.login-button:hover::before {
  left: 100%;
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.login-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-gray);
}

.security-indicators {
  text-align: center;
}

.login-footer-text {
  color: var(--text-muted);
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssl-indicator {
  color: var(--text-muted);
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-xs);
}

/* Login page responsive design */
@media (max-width: 480px) {
  .login-container {
    padding: var(--space-md);
  }
  
  .login-card {
    padding: var(--space-lg);
  }
  
  .login-title {
    font-size: var(--font-xl);
  }
  
  .login-subtitle {
    font-size: var(--font-base);
  }
  
  .login-icon {
    font-size: 3rem;
  }
}

/* ===== LOGOUT PAGE STYLES ===== */
.logout-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.logout-card {
  max-width: 400px;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.logout-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.logout-header {
  margin-bottom: var(--space-xl);
}

.logout-icon {
  font-size: 4rem;
  color: #ef4444;
  margin-bottom: var(--space-lg);
  display: block;
  animation: logoutIconBounce 2s ease-in-out infinite;
}

@keyframes logoutIconBounce {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
  }
  50% { 
    transform: scale(1.1) rotate(-5deg);
  }
}

.logout-title {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.logout-subtitle {
  font-size: var(--font-lg);
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.4;
}

.logout-spinner {
  margin: var(--space-xl) 0;
  display: flex;
  justify-content: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-gray);
  border-top: 4px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.logout-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-gray);
}

.logout-footer-text {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* Logout page responsive design */
@media (max-width: 480px) {
  .logout-container {
    padding: var(--space-md);
  }
  
  .logout-card {
    padding: var(--space-lg);
  }
  
  .logout-title {
    font-size: var(--font-xl);
  }
  
  .logout-subtitle {
    font-size: var(--font-base);
  }
  
  .logout-icon {
    font-size: 3rem;
  }
}

/* ===== LOGOUT MODAL STYLES ===== */
.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.logout-modal-overlay.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.logout-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9) translateY(-20px);
  transition: transform 0.3s ease;
}

.logout-modal-overlay.visible .logout-modal {
  transform: scale(1) translateY(0);
}

.logout-modal .modal-header {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--border-gray);
}

.logout-modal .modal-header h3 {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-dark);
}

.logout-modal .modal-body {
  padding: var(--space-xl);
}

.logout-modal .modal-body p {
  margin: 0 0 var(--space-sm);
  color: var(--text-dark);
  line-height: 1.5;
}

.logout-modal .modal-body p:last-child {
  margin-bottom: 0;
}

.logout-modal .modal-body .text-muted {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.logout-modal .modal-actions {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

.logout-modal .btn-cancel,
.logout-modal .btn-logout {
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.logout-modal .btn-cancel {
  background: var(--light-gray);
  color: var(--text-dark);
  border: 1px solid var(--border-gray);
}

.logout-modal .btn-cancel:hover {
  background: #e9ecef;
  color: var(--text-dark);
}

.logout-modal .btn-logout {
  background: var(--error-red);
  color: white;
}

.logout-modal .btn-logout:hover {
  background: #c82333;
}

.logout-modal .btn-logout:focus,
.logout-modal .btn-cancel:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* ===== ADD EMPLOYEE MODAL ===== */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 33, 60, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Modal Container */
.modal-container {
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(0, 86, 179, 0.08);
  border-radius: 24px;
  box-shadow: 
    0 32px 64px rgba(0, 86, 179, 0.25),
    0 16px 32px rgba(0, 86, 179, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  width: 100%;
  max-width: var(--component-width-modal);
  max-height: 85vh;
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

.modal-overlay.visible .modal-container {
  transform: translateY(0) scale(1);
}

/* Modal Header */
.modal-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.modal-title i {
  color: #374151;
  font-size: 1.125rem;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: #f1f5f9;
  color: #374151;
}

/* Modal Body */
.modal-body {
  padding: 1.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.form-input {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 0.875rem;
  background: #ffffff;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 
    0 0 0 3px rgba(0, 86, 179, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-input.is-invalid {
  border-color: #dc2626;
  border-width: 2px;
  background: #fef2f2;
}

.form-error {
  font-size: 0.75rem;
  color: #dc2626;
  font-weight: 500;
  min-height: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* .form-error:not(:empty)::before {
/*   content: '⚠';
/*   font-size: 0.875rem;
/* } */

/* Modal Footer */
.modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Button Styles */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-secondary {
  background: white;
  color: #475569;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
  transform: translateY(-2px);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: 1px solid rgba(0, 86, 179, 0.2);
  box-shadow: 
    0 8px 25px rgba(0, 86, 179, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #004494 0%, #003875 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 30px rgba(0, 86, 179, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Modal Design */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 1rem;
  }
  
  .modal-container {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px;
    transform: translateY(40px) scale(0.95);
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .modal-header {
    padding: 1.25rem 1.25rem 0.75rem;
  }
  
  .modal-body {
    padding: 1.25rem;
    max-height: 70vh;
  }
  
  .modal-footer {
    padding: 0.75rem 1.25rem 1.25rem;
    flex-direction: column-reverse;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .modal-container {
    border-radius: 16px;
    margin: 0.5rem;
  }
  
  .modal-title {
    font-size: 1.125rem;
  }
  
  .form-input {
    padding: 0.875rem 1rem;
    font-size: 1rem; /* Prevent zoom on iOS */
  }
}


/* ===== PROFESSIONAL PHOTO CAPTURE CARD SYSTEM ===== */

/* Enterprise-Level Professional Card Styling */
.photo-progress-card,
.capture-instructions-card,
.camera-interface-card,
.photo-preview-card,
.sequence-complete-card,
.step-actions-card,
.action-summary-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafb 35%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  margin-bottom: 1.125rem;
  box-shadow: 
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 2px 5px rgba(15, 23, 42, 0.06),
    0 5px 10px rgba(15, 23, 42, 0.08),
    0 10px 20px rgba(15, 23, 42, 0.1),
    0 20px 35px rgba(15, 23, 42, 0.09);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px) saturate(120%);
}

.photo-progress-card::before,
.capture-instructions-card::before,
.camera-interface-card::before,
.photo-preview-card::before,
.sequence-complete-card::before,
.step-actions-card::before,
.action-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #004494 50%, #0066cc 100%);
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 20px 20px 0 0;
}

/* Camera Error Display */
.camera-error-display {
  margin: 1rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3cd 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  box-shadow: 
    0 2px 4px rgba(245, 158, 11, 0.1),
    0 1px 2px rgba(245, 158, 11, 0.06);
  animation: errorSlideIn 0.3s ease-out;
}

@keyframes errorSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-content {
  display: flex;
  align-items: center;
  padding: 1rem;
  gap: 0.75rem;
}

.error-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-icon i {
  color: #d97706;
  font-size: 1.125rem;
}

.error-message {
  flex: 1;
  color: #92400e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.error-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #92400e;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.error-dismiss:hover {
  background: rgba(146, 64, 14, 0.1);
  color: #78350f;
}

.error-dismiss i {
  font-size: 0.875rem;
}

/* High Quality Error (Red) */
.camera-error-display.error-critical {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
  box-shadow: 
    0 2px 4px rgba(239, 68, 68, 0.1),
    0 1px 2px rgba(239, 68, 68, 0.06);
}

.camera-error-display.error-critical .error-icon i {
  color: #dc2626;
}

.camera-error-display.error-critical .error-message {
  color: #991b1b;
}

.camera-error-display.error-critical .error-dismiss {
  color: #991b1b;
}

.camera-error-display.error-critical .error-dismiss:hover {
  background: rgba(153, 27, 27, 0.1);
  color: #7f1d1d;
}

/* Prominent Capture Button Container */
.capture-button-container {
  margin: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Completion Actions */
.completion-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.photo-progress-card::before {
  opacity: 1; /* Always visible for main progress card */
}

/* Enhanced Progress States */
.photo-progress-card.progress-complete-state {
  border-color: #059669;
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
}

.photo-progress-card.progress-complete-state::before {
  background: linear-gradient(90deg, #059669 0%, #047857 50%, #065f46 100%);
}

/* Progress Completion Animation */
.photo-progress-card.completion-celebration {
  animation: completionCelebration 1s ease-out;
}

@keyframes completionCelebration {
  0% { transform: scale(1); }
  25% { transform: scale(1.02); box-shadow: 0 8px 32px rgba(5, 150, 105, 0.3); }
  50% { transform: scale(1.01); }
  75% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Professional Card Headers */
.photo-progress-card-header,
.instructions-card-header,
.camera-card-header,
.preview-card-header,
.complete-card-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Photo Progress Card - Enhanced Design */
.progress-info {
  flex: 1;
}

.photo-progress-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-icon {
  color: #0066cc;
  font-size: 1rem;
  opacity: 0.9;
}

.photo-counter-display {
  margin-top: 0.375rem;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.counter-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0066cc;
  line-height: 1;
}

.photo-counter-label {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.progress-badge {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: white;
  padding: 0.3125rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  box-shadow: 
    0 1px 3px rgba(0, 102, 204, 0.15),
    0 2px 6px rgba(0, 102, 204, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(0, 102, 204, 0.2);
  letter-spacing: -0.005em;
}

.progress-percentage {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Enhanced Progress Bar - Matching Card Quality */
.capture-progress-container {
  padding: 0 1.5rem 1.5rem;
}

.capture-progress {
  background: rgba(248, 250, 252, 0.4);
  border: 0.5px solid rgba(226, 232, 240, 0.5);
  border-radius: 12px;
  height: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 2px rgba(15, 23, 42, 0.03),
    0 1px 2px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(4px) saturate(110%);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066cc 0%, #0052a3 100%);
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 1px 3px rgba(0, 102, 204, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: progressShimmer 2.5s infinite;
}

@keyframes progressShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.capture-progress[data-progress="0"] .progress-fill { width: 0%; }
.capture-progress[data-progress="33"] .progress-fill { width: 33%; }
.capture-progress[data-progress="67"] .progress-fill { width: 67%; }
.capture-progress[data-progress="100"] .progress-fill { width: 100%; }

.progress-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 2;
  pointer-events: none;
  padding: 0 0.75rem;
}

.progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.95);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(203, 213, 225, 0.6);
  backdrop-filter: blur(4px);
}

/* Professional Instructions Card */
.instructions-card-header {
  padding: 1rem 1.5rem;
}

.instruction-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.1) 0%, rgba(0, 86, 179, 0.05) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.instruction-icon i {
  color: var(--primary-blue);
  font-size: 1.125rem;
}

.instruction-content {
  flex: 1;
}

.capture-instructions {
  background: transparent;
  border: none;
  padding: 0;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* Professional Camera Interface Card */
.camera-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.camera-title-icon {
  color: #0066cc;
  font-size: 0.875rem;
  opacity: 0.85;
}

.camera-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 0 4px rgba(156, 163, 175, 0.4);
}

.status-indicator.active {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.camera-status small {
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 500;
}

/* Premium Camera Container */
.camera-container {
  margin: 1rem auto;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 
    0 0 0 1px rgba(15, 23, 42, 0.02),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 4px 8px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.camera-container:hover {
  border-color: rgba(0, 102, 204, 0.3);
  box-shadow: 
    0 0 0 1px rgba(15, 23, 42, 0.02),
    0 4px 8px rgba(15, 23, 42, 0.08),
    0 8px 16px rgba(0, 102, 204, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* Professional-Grade Camera Video Styling */
.camera-video {
  width: 100%;
  max-width: 400px;
  height: auto;
  min-height: 300px;
  border-radius: 10px;
  background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
  object-fit: cover;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.camera-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  pointer-events: none;
  z-index: 5;
}

/* Professional Face Guide System */
.face-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 280px;
  pointer-events: none;
  z-index: 10;
  animation: guideIntro 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity: 0.85;
}

@keyframes guideIntro {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.guide-corners {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 86, 179, 0.4);
  border-radius: 20px;
  background: rgba(0, 86, 179, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 
    inset 0 2px 10px rgba(0, 86, 179, 0.1),
    0 4px 20px rgba(0, 86, 179, 0.15);
}

.corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid #0066cc;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.04) 100%);
  backdrop-filter: blur(3px);
  animation: cornerPulse 3s infinite;
  box-shadow: 
    0 1px 2px rgba(0, 102, 204, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity: 0.9;
}

@keyframes cornerPulse {
  0%, 100% { 
    opacity: 0.9; 
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0, 102, 204, 0.15);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.02);
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.2);
  }
}

.corner.top-left {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
  border-radius: 20px 0 0 0;
}

.corner.top-right {
  top: -3px;
  right: -3px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 20px 0 0;
}

.corner.bottom-left {
  bottom: -3px;
  left: -3px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 20px;
}

.corner.bottom-right {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 20px 0;
}

.face-guide-text {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.92) 0%, rgba(0, 82, 163, 0.92) 100%);
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 14px;
  font-size: 0.625rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 
    0 1px 4px rgba(0, 102, 204, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  letter-spacing: -0.005em;
  animation: textFade 3.5s infinite;
  opacity: 0.95;
}

@keyframes textFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Camera Overlay Enhancements */
.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: 
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.1) 70%);
}



.camera-capture-button,
.camera-complete-button {
  border-radius: 10px;
  padding: 0.6875rem 1.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  backdrop-filter: blur(6px) saturate(115%);
  position: relative;
  overflow: hidden;
  border: none;
  letter-spacing: -0.005em;
}

/* Primary Action Button */
.primary-action {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: white;
  box-shadow: 
    0 1px 3px rgba(0, 102, 204, 0.15),
    0 4px 8px rgba(0, 102, 204, 0.1),
    0 8px 16px rgba(0, 102, 204, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(0, 102, 204, 0.2);
}

.primary-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.primary-action:hover::before {
  left: 100%;
}

.primary-action:hover {
  background: linear-gradient(135deg, #0052a3 0%, #003d82 100%);
  transform: translateY(-0.5px);
  box-shadow: 
    0 2px 3px rgba(0, 102, 204, 0.15),
    0 4px 8px rgba(0, 102, 204, 0.12),
    0 8px 16px rgba(0, 102, 204, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: buttonPulse 2s infinite;
  opacity: 0;
}

.primary-action:not(:disabled) .button-pulse {
  opacity: 1;
}

@keyframes buttonPulse {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Secondary Action Button */
.secondary-action {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  border: 1px solid #e2e8f0;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.secondary-action:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #374151;
  transform: translateY(-0.5px);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 3px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(203, 213, 225, 0.9);
}

/* Action Display - 3-column flex layout for Step 3 success */
.action-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 12px;
}

/* Step 2: Remove wrapper padding to let badge extend full width */
.clock-step .clock-action-summary .action-display {
  padding: 0;
  margin: 0;
}

/* Step 2: Remove badge bottom margin to reduce gap before summary card */
.clock-step .action-type-badge {
  margin-bottom: 0;
}

/* Step 3: Remove action display wrapper padding for cleaner presentation */
#clockStep3 .action-display-section {
  padding: 0;
  margin: 0;
}

#clockStep3 .action-display {
  margin: 0;
  padding: 2.5rem 2rem;  /* Increased vertical padding for more height */
  flex-direction: column;  /* Stack vertically instead of horizontal */
  align-items: center;  /* Center horizontally */
  justify-content: center;  /* Center vertically */
  gap: 1rem;  /* Space between stacked items */
  min-height: 180px;  /* Ensure adequate height */
  position: relative;  /* For badge overlay */
}

/* Success Action Button - Light Green Theme (matches Step 2) */
.success-action {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
  box-shadow:
    0 1px 2px rgba(16, 185, 129, 0.12),
    0 2px 4px rgba(16, 185, 129, 0.08),
    0 4px 8px rgba(16, 185, 129, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(16, 185, 129, 0.2);
}

.success-action:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  transform: translateY(-0.5px);
  box-shadow:
    0 2px 3px rgba(16, 185, 129, 0.15),
    0 4px 8px rgba(16, 185, 129, 0.12),
    0 8px 16px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Icon visibility fix for Clock In success */
.success-action .action-icon {
  color: #047857;
}

/* Step 3: Center icon in vertical layout */
#clockStep3 .action-icon {
  margin-left: 0;
  margin-right: 0;
}

/* Step 3: Center action content text */
#clockStep3 .action-content {
  text-align: center;
  align-items: center;
}

/* Clock Out Success Action - Light Pink Theme (matches Step 2) */
.clock-out-success-action {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #dc2626;
  box-shadow:
    0 1px 2px rgba(239, 68, 68, 0.12),
    0 2px 4px rgba(239, 68, 68, 0.08),
    0 4px 8px rgba(239, 68, 68, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(239, 68, 68, 0.2);
}

.clock-out-success-action:hover {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  transform: translateY(-0.5px);
  box-shadow:
    0 2px 3px rgba(239, 68, 68, 0.15),
    0 4px 8px rgba(239, 68, 68, 0.12),
    0 8px 16px rgba(239, 68, 68, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Icon visibility fix for Clock Out success */
.clock-out-success-action .action-icon {
  color: #dc2626;
}

/* Success Badge - Right-aligned with colored variants */
.success-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
  margin-left: auto;
}

.success-badge i {
  font-size: 1rem;
}

/* Step 3: Hide badge - redundant with "ACTION COMPLETED" text */
#clockStep3 .success-badge {
  display: none;
}

/* Colored badge variants for better visibility */
.success-badge.clock-in {
  background: #047857;
  color: white;
}

.success-badge.clock-out {
  background: #dc2626;
  color: white;
}

/* Professional Photo Preview Card */
.preview-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.preview-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.preview-icon {
  color: #0066cc;
  font-size: 0.875rem;
  opacity: 0.85;
}

.preview-stats {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.04) 100%);
  color: #0066cc;
  padding: 0.375rem 0.625rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 0.5px solid rgba(0, 102, 204, 0.1);
}

.preview-card-body {
  padding: 0 1.5rem 1.5rem;
}

/* Enhanced Card State Transitions */
.photo-preview-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-preview-card.has-photos::before {
  opacity: 1;
}

/* Smooth card transitions for better UX */
.capture-instructions-card,
.camera-interface-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ensure camera interface card centers its content */
.camera-interface-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Camera header: centered title with status on right */
.camera-card-header {
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.75rem 0 0.5rem;
}

/* Title centered in header */
.camera-card-title {
  text-align: center;
}

/* Status positioned on right with proper spacing from edge (only inside camera card header) */
.camera-card-header .camera-status {
  position: absolute;
  right: 1.25rem;
  top: 0.75rem;
}

.capture-instructions-card:hover,
.camera-interface-card:hover,
.step-actions-card:hover,
.action-summary-card:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(15, 23, 42, 0.15),
    0 2px 4px rgba(15, 23, 42, 0.1);
}

.capture-instructions-card:hover::before,
.camera-interface-card:hover::before,
.step-actions-card:hover::before,
.action-summary-card:hover::before {
  opacity: 0.6;
}

/* Recognition Status Styling */
.recognition-status {
  text-align: center;
  padding: var(--space-lg);
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  margin-bottom: var(--space-md);
}

.status-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.status-message .status-icon {
  font-size: var(--font-lg);
  color: var(--primary-blue);
}

.status-message .status-text {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-dark);
}

.scanning-animation {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Scanning Progress Bar */
.scanning-progress {
  margin-top: var(--space-sm);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(226, 232, 240, 0.5);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #3b82f6 50%, var(--primary-blue) 100%);
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: shimmer 2s infinite ease-in-out;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Consistent 3-slot photo grid layout */
.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Empty photo slot placeholders */
.photo-preview-placeholder {
  background: var(--background-light);
  border: 2px dashed var(--border-light);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  transition: all 0.3s ease;
}

.photo-preview-placeholder .placeholder-icon {
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.photo-preview-placeholder .placeholder-text {
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.3;
}

/* Professional Photo Preview Items - Employee Card Quality */
.photo-preview-item {
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.24);
  backdrop-filter: saturate(180%) blur(20px);
  user-select: none;
}

.photo-preview-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #004494 50%, #0066cc 100%);
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 20px 20px 0 0;
}

.photo-preview-item:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 16px 32px rgba(0, 86, 179, 0.12),
    0 8px 16px rgba(15, 23, 42, 0.08);
  border-color: var(--primary-blue);
}

.photo-preview-item:hover::before {
  opacity: 1;
}

/* Professional Photo Selection State */
.photo-preview-item.selected {
  border-color: var(--primary-blue);
  background: linear-gradient(145deg, rgba(0, 86, 179, 0.05) 0%, rgba(0, 86, 179, 0.02) 100%);
  box-shadow: 
    0 12px 30px rgba(0, 86, 179, 0.2),
    0 6px 12px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.photo-preview-item.selected::before {
  opacity: 1;
}

/* Professional Photo Animation on Capture */
.photo-preview-item.just-captured {
  animation: photoCaptureSuccess 0.8s ease-out;
}

@keyframes photoCaptureSuccess {
  0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
  50% { transform: scale(1.05) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.preview-image-container {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Professional Photo Overlay - Employee Card Quality */
.photo-overlay {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 
    0 4px 12px rgba(0, 86, 179, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.photo-preview-item:hover .photo-overlay {
  transform: scale(1.1);
  box-shadow: 
    0 6px 16px rgba(0, 86, 179, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Professional Photo Information */
.photo-info {
  padding: 1rem 0.75rem 0.75rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

/* Individual Photo Actions */
.photo-actions {
  padding: 0.5rem 0.75rem 0.75rem;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.individual-retake-button {
  width: 100%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  box-shadow: 
    0 1px 2px rgba(239, 68, 68, 0.2),
    0 1px 3px rgba(239, 68, 68, 0.15);
}

.individual-retake-button:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
  box-shadow: 
    0 2px 4px rgba(239, 68, 68, 0.3),
    0 4px 8px rgba(239, 68, 68, 0.2);
}

.individual-retake-button:active {
  transform: translateY(0);
  box-shadow: 
    0 1px 2px rgba(239, 68, 68, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.individual-retake-button i {
  font-size: 0.625rem;
}

.individual-retake-button span {
  font-size: 0.6875rem;
}

.photo-quality,
.photo-angle {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.photo-quality {
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.photo-quality::before {
  content: '●';
  font-size: 0.5rem;
  color: #059669;
}

.photo-angle {
  color: #64748b;
  font-size: 0.7rem;
  text-transform: capitalize;
}

/* Quality-based styling */
.photo-preview-item[data-quality="high"] .photo-quality::before {
  color: #059669;
}

.photo-preview-item[data-quality="medium"] .photo-quality::before {
  color: #d97706;
}

.photo-preview-item[data-quality="low"] .photo-quality::before {
  color: #dc2626;
}

/* Professional Photo Loading State */
.photo-preview-item.loading {
  animation: photoLoading 1.5s infinite;
}

@keyframes photoLoading {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.photo-preview-item.loading .preview-image {
  filter: blur(2px);
}

/* Professional Retake Workflow States */

/* Retake pending state - professional visual feedback */
.photo-preview-item.retake-pending {
  opacity: 0.7;
  transform: scale(0.96);
  border: 2px dashed var(--primary-blue);
  background: linear-gradient(145deg, rgba(0, 86, 179, 0.08) 0%, rgba(0, 86, 179, 0.03) 100%);
  animation: retakePulsePending 2s ease-in-out infinite;
}

@keyframes retakePulsePending {
  0%, 100% { 
    opacity: 0.7; 
    border-color: var(--primary-blue);
  }
  50% { 
    opacity: 0.85; 
    border-color: rgba(0, 86, 179, 0.6);
  }
}

.photo-preview-item.retake-pending:hover {
  transform: scale(0.96);
  animation: none;
  opacity: 0.8;
}

/* Retake pending overlay */
.retake-pending-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 86, 179, 0.9) 0%,
    rgba(0, 86, 179, 0.8) 100%
  );
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  z-index: 10;
}

.retake-pending-overlay .pending-content {
  text-align: center;
  color: white;
  animation: pendingContentPulse 1.5s ease-in-out infinite;
}

@keyframes pendingContentPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.retake-pending-overlay .pending-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  animation: pendingIconRotate 2s ease-in-out infinite;
}

@keyframes pendingIconRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-5deg) scale(1.1); }
  75% { transform: rotate(5deg) scale(1.1); }
}

.retake-pending-overlay .pending-text {
  font-size: 0.75rem;
  line-height: 1.2;
}

.retake-pending-overlay .pending-text small {
  display: block;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.retake-pending-overlay .pending-text strong {
  font-weight: 600;
  text-transform: capitalize;
}

/* Photo replacing animation state */
.photo-preview-item.replacing {
  animation: photoReplacing 0.6s ease-out;
}

@keyframes photoReplacing {
  0% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 0.3; 
    transform: scale(0.8) rotate(-3deg); 
    filter: blur(2px);
  }
  100% { 
    opacity: 0.1; 
    transform: scale(0.7) rotate(-5deg); 
    filter: blur(4px);
  }
}

/* Photo successfully replaced animation */
.photo-preview-item.just-replaced {
  animation: photoReplaceSuccess 1.2s ease-out;
}

@keyframes photoReplaceSuccess {
  0% { 
    opacity: 0; 
    transform: scale(0.7) rotate(5deg); 
    filter: blur(4px);
  }
  30% { 
    opacity: 0.8; 
    transform: scale(1.1) rotate(-2deg); 
    filter: blur(1px);
  }
  60% { 
    opacity: 1; 
    transform: scale(0.95) rotate(1deg); 
    filter: blur(0px);
  }
  80% { 
    transform: scale(1.05) rotate(0deg); 
    box-shadow: 
      0 16px 32px rgba(34, 197, 94, 0.25),
      0 8px 16px rgba(34, 197, 94, 0.15);
  }
  100% { 
    transform: scale(1) rotate(0deg); 
    box-shadow: 
      0 8px 20px rgba(15, 23, 42, 0.08),
      0 4px 8px rgba(15, 23, 42, 0.04);
  }
}

/* Enhanced success flash for replaced photo */
.photo-preview-item.just-replaced::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    rgba(34, 197, 94, 0.3) 0%,
    rgba(34, 197, 94, 0.1) 50%,
    rgba(34, 197, 94, 0.3) 100%
  );
  border-radius: 22px;
  animation: successGlow 1.2s ease-out;
  pointer-events: none;
  z-index: -1;
}

@keyframes successGlow {
  0%, 100% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 0.7; }
}

/* Professional Sequence Complete Card */
.sequence-complete-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centered completion success message */
.complete-card-header {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.complete-success-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.complete-success-message h4 {
  margin: 0;
  color: var(--success-color, #059669);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.complete-success-message p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
}

.completion-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  width: 100%;
}

.summary-separator {
  color: var(--border-color);
  font-weight: bold;
}

.summary-text {
  font-weight: 500;
}

.complete-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 
    0 8px 25px rgba(5, 150, 105, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.15);
  animation: successBounce 0.6s ease-out;
}

@keyframes successBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.complete-icon i {
  font-size: 1.75rem;
  color: white;
}

.complete-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.complete-content h4 {
  color: #047857;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}

.complete-content p {
  color: #065f46;
  font-size: 0.8125rem;
  margin: 0;
  letter-spacing: -0.005em;
}

/* Simplified completion footer */
.complete-card-footer {
  padding: 0 1.5rem 1.5rem;
  text-align: center;
}

/* Removed unused stat-value and stat-label styles - using inline completion summary now */

/* Professional Card Responsive Design */
@media (max-width: 768px) {
  .photo-progress-card,
  .capture-instructions-card,
  .camera-interface-card,
  .photo-preview-card,
  .sequence-complete-card,
  .step-actions-card,
  .action-summary-card {
    margin-bottom: 1.5rem;
    border-radius: 16px;
  }
  
  .photo-progress-card-header,
  .instructions-card-header,
  .camera-card-header,
  .preview-card-header,
  .complete-card-header {
    padding: 1.25rem;
  }
  
  .camera-capture-button,
  .camera-complete-button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .photo-preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  
  .capture-progress-container {
    padding: 0 1.25rem 1.25rem;
  }
  
  .camera-container {
    margin: 0 auto 1.25rem;
    max-width: calc(100% - 2.5rem);
  }
  
  .preview-card-body {
    padding: 0 1.25rem 1.25rem;
  }
  
  .face-guide {
    width: 220px;
    height: 280px;
  }
  
  /* Mobile responsive adjustments */
}

@media (max-width: 480px) {
  .photo-progress-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .progress-badge {
    align-self: flex-end;
  }
  
  .preview-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .face-guide {
    width: 180px;
    height: 240px;
  }
  
  /* Small screen adjustments */
}

/* ===== ACCESSIBILITY ===== */
*:focus {
  outline: 3px solid rgba(66, 133, 244, 0.5);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Photo preview card visibility states - Clean Architecture */
.photo-preview-card.photo-preview-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.photo-preview-card.photo-preview-hidden {
  opacity: 0.6;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===========================================
   STEP 3 CONFIRMATION - CLEAN STACKED CARDS
   =========================================== */

/* Each section stacks naturally */
.enrollment-step#step3 .confirmation-employee-section,
.enrollment-step#step3 .confirmation-photos-section,
.enrollment-step#step3 .confirmation-summary-section {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

/* Card styling */
.enrollment-step#step3 .confirmation-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.enrollment-step#step3 .confirmation-card .card-header {
  background: linear-gradient(135deg, #0056b3 0%, #4a90e2 100%);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enrollment-step#step3 .confirmation-card .card-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.enrollment-step#step3 .confirmation-card .card-body {
  padding: 20px;
}

/* Photo count badge */
.enrollment-step#step3 .photo-count-badge {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Employee card content */
.enrollment-step#step3 .confirmation-employee-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.enrollment-step#step3 .confirmation-employee-card .employee-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f4fd 0%, #d1e9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0056b3;
  flex-shrink: 0;
}

.enrollment-step#step3 .confirmation-employee-card .employee-details h3 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
}

.enrollment-step#step3 .confirmation-employee-card .employee-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.enrollment-step#step3 .confirmation-employee-card .meta-item {
  font-size: 0.85rem;
  display: flex;
  gap: 4px;
}

.enrollment-step#step3 .confirmation-employee-card .meta-label {
  font-weight: 500;
  color: #6b7280;
}

.enrollment-step#step3 .confirmation-employee-card .meta-value {
  color: #374151;
  font-weight: 600;
}

/* Photo grid */
.enrollment-step#step3 .confirmation-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  max-width: 100%;
}

.enrollment-step#step3 .confirmation-photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.enrollment-step#step3 .confirmation-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enrollment-step#step3 .confirmation-photo-item .photo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  color: white;
  padding: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* White text for photo quality on dark overlay in Step 3 confirmation */
.enrollment-step#step3 .confirmation-photo-item .photo-info .photo-quality {
  color: white;
}

/* Summary stats */
.enrollment-step#step3 .summary-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enrollment-step#step3 .stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.enrollment-step#step3 .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0056b3 0%, #4a90e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.enrollment-step#step3 .stat-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.enrollment-step#step3 .stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.enrollment-step#step3 .stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}

.enrollment-step#step3 .stat-value.ready {
  color: #059669;
}

/* Navigation controls */
.enrollment-step#step3 .confirmation-nav-controls {
  background: white;
  border-top: 1px solid #e5e7eb;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.enrollment-step#step3 .confirmation-nav-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  order: -1; /* Put back button first (above main button) */
}

.enrollment-step#step3 .confirmation-nav-button:hover {
  color: #374151;
}

.enrollment-step#step3 .confirmation-complete-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #0056b3 0%, #4a90e2 100%);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 86, 179, 0.3);
}

.enrollment-step#step3 .confirmation-complete-button:hover {
  background: linear-gradient(135deg, #0041a3 0%, #357abd 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

/* Submitting state for enrollment button */
.enrollment-step#step3 .confirmation-complete-button.submitting,
.enrollment-step#step3 .confirmation-complete-button:disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.enrollment-step#step3 .confirmation-complete-button.submitting::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid #6b7280;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* Premium Professional-Grade Button Glow with Shine Effect */
.button-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
}

.button-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.confirmation-complete-button {
  position: relative;
  overflow: hidden;
}

.confirmation-complete-button:hover .button-glow {
  opacity: 1;
}

.confirmation-complete-button:hover .button-glow::before {
  transform: translateX(100%);
}

/* Ultimate Professional-Grade premium button with maximum prominence */
.clock-step .confirmation-complete-button {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  font-weight: 800;
  font-size: 1.1875rem;
  padding: 1.375rem 3.25rem;
  border-radius: 18px;
  border: 2px solid rgba(0, 86, 179, 0.15);
  box-shadow: 
    0 0 0 1px rgba(0, 86, 179, 0.12),
    0 4px 8px rgba(0, 86, 179, 0.15),
    0 8px 16px rgba(0, 86, 179, 0.12),
    0 16px 32px rgba(0, 86, 179, 0.1),
    0 24px 48px rgba(0, 86, 179, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 56, 179, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  overflow: hidden;
  min-width: 320px;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.5px;
  backdrop-filter: blur(12px);
  animation: buttonReadyPulse 3s ease-in-out infinite;
}

@keyframes buttonReadyPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 0 1px rgba(0, 86, 179, 0.12),
      0 4px 8px rgba(0, 86, 179, 0.15),
      0 8px 16px rgba(0, 86, 179, 0.12),
      0 16px 32px rgba(0, 86, 179, 0.1),
      0 24px 48px rgba(0, 86, 179, 0.08),
      inset 0 2px 4px rgba(255, 255, 255, 0.25),
      inset 0 -2px 4px rgba(0, 56, 179, 0.1);
  }
  50% { 
    transform: scale(1.01);
    box-shadow: 
      0 0 0 1px rgba(0, 86, 179, 0.15),
      0 6px 12px rgba(0, 86, 179, 0.18),
      0 12px 24px rgba(0, 86, 179, 0.15),
      0 20px 40px rgba(0, 86, 179, 0.12),
      0 32px 64px rgba(0, 86, 179, 0.1),
      inset 0 3px 6px rgba(255, 255, 255, 0.3),
      inset 0 -3px 6px rgba(0, 56, 179, 0.12);
  }
}

.clock-step .confirmation-complete-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.clock-step .confirmation-complete-button:hover::before {
  opacity: 1;
}

.clock-step .confirmation-complete-button:hover {
  background: linear-gradient(135deg, #004494 0%, #003875 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 0 0 1px rgba(0, 68, 163, 0.2),
    0 6px 12px rgba(0, 86, 179, 0.25),
    0 12px 24px rgba(0, 86, 179, 0.2),
    0 24px 48px rgba(0, 86, 179, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 0 28px rgba(0, 86, 179, 0.35);
  color: white;
}

.clock-step .confirmation-complete-button:active {
  transform: translateY(-1px);
  box-shadow: 
    0 0 0 1px rgba(0, 68, 163, 0.3),
    0 4px 8px rgba(0, 86, 179, 0.3),
    0 8px 16px rgba(0, 86, 179, 0.2),
    0 16px 32px rgba(0, 86, 179, 0.15);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .enrollment-step#step3 .confirmation-employee-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .enrollment-step#step3 .confirmation-nav-controls {
    flex-direction: column;
  }
  
  .enrollment-step#step3 .confirmation-nav-button,
  .enrollment-step#step3 .confirmation-complete-button {
    width: 100%;
    justify-content: center;
  }
  
  .enrollment-step#step3 .confirmation-photo-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
  }
}

/* ===== STEP 3 MULTI-PHASE VERIFICATION SYSTEM ===== */

/* Phase Progress Indicator - Shows "Review → Upload → Verify" within Step 3 */
.step3-phase-indicator {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.phase-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.phase-progress-bar {
  height: 8px;
  background: var(--border-gray);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.phase-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue) 0%, #0056b3 100%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
}

.phase-progress-fill[data-phase="1"] { width: 33.33%; }
.phase-progress-fill[data-phase="2"] { width: 66.66%; }
.phase-progress-fill[data-phase="3"] { width: 100%; }

.phase-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phase-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Phase state classes - dynamically managed by JavaScript */
.phase-label.phase-completed,
.phase-label.phase-active {
  color: var(--primary-blue);
  font-weight: 600;
}

.phase-label.phase-pending {
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.7;
}

/* Phase Visibility System - Higher specificity prevents override */
#step3 .step3-phase {
  display: none;
}

#step3 .step3-phase.active {
  display: block;
  animation: phaseSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes phaseSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* DEPRECATED: Old modal overlay styles removed - now using inline cards */
/* See "INLINE VERIFICATION CARDS" section below for new styles */

/* Shared Verification Text Styles (used by inline cards) */
.verification-title {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-md);
}

.verification-message {
  font-size: var(--font-base);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
  text-align: center;
  white-space: pre-line;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Override for verification error messages with bullet lists */
#verificationErrorMessage {
  max-width: none; /* Remove 400px constraint for bullet lists */
}

/* Error message heading (used in inline error cards) */
.error-heading {
  font-weight: 500;
  margin-bottom: var(--space-md);
  color: var(--text-dark);
  text-align: center;
}

/* Error tips list - centered using fit-content pattern */
.error-tips-list {
  width: fit-content;          /* Shrink-wrap to content */
  max-width: 100%;             /* Prevent overflow */
  margin: 0 auto;              /* Center the shrink-wrapped element */
  padding: 0 0 0 1.5rem;       /* Indent for bullets */

  list-style-type: disc;       /* Native round bullets */
  list-style-position: outside; /* Bullets outside content */
  text-align: left;            /* Left-align for readability */
}

.error-tips-list li {
  margin: 0 0 0.5rem 0;        /* Spacing between items */
  line-height: 1.6;
  color: var(--text-muted);
  padding: 0;
}

.error-tips-list li:last-child {
  margin-bottom: 0;
}

/* DEPRECATED: Upload progress styles moved to inline cards section */

/* Verification Camera Card */
.verification-camera-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 600px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: contentZoomIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verification-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.verification-instructions {
  font-size: var(--font-base);
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

.verification-camera-container {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  margin-bottom: var(--space-lg);
}

.verification-camera-video {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(-1);
}

.verification-camera-canvas {
  display: none;
}

.verification-camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.verification-face-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 300px;
}

/* Verification phase guide corners - NO blur (clear camera view) */
.verification-face-guide .guide-corners {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;  /* No background */
  backdrop-filter: none;  /* No blur - keep camera view clear */
  -webkit-backdrop-filter: none;
  border: none;  /* No border on container */
  box-shadow: none;  /* No shadow */
}

.verification-face-guide .guide-corners .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  background: transparent;  /* No background on corners */
  backdrop-filter: none;  /* No blur on corners */
  -webkit-backdrop-filter: none;
}

.guide-corners .corner.top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.guide-corners .corner.top-right {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.guide-corners .corner.bottom-left {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.guide-corners .corner.bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* Countdown Overlay */
.verification-countdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.countdown-number {
  font-size: 8rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: countdownPulse 1s ease-in-out;
}

@keyframes countdownPulse {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 1;
  }
}

/* Verification Action Buttons - 60px min height for touch targets */
.verification-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
}

.verification-hint {
  font-size: var(--font-base);
  color: var(--text-muted);
  margin: 0;
  padding: var(--space-sm);
  font-weight: 500;
}

.verification-capture-button,
.verification-retry-button {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #004494 100%);
  color: white;
  border: none;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--font-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 60px;
  box-shadow: var(--shadow-button);
}

.verification-capture-button:hover,
.verification-retry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(66, 133, 244, 0.4), 0 6px 12px rgba(0, 0, 0, 0.15);
}

.verification-capture-button:active,
.verification-retry-button:active {
  transform: translateY(0);
}

.verification-cancel-button {
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border-gray);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 60px;
}

.verification-cancel-button:hover {
  border-color: var(--error-red);
  color: var(--error-red);
}

/* Processing Spinner */
.verification-spinner {
  position: relative;
  width: 100px;
  height: 100px;
  margin: var(--space-xl) auto;
}

.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spinRing 1.5s linear infinite;
}

.spinner-ring:nth-child(2) {
  border-top-color: rgba(0, 86, 179, 0.5);
  animation-delay: -0.5s;
}

.spinner-ring:nth-child(3) {
  border-top-color: rgba(0, 86, 179, 0.25);
  animation-delay: -1s;
}

@keyframes spinRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Verification Confidence Display */
.verification-confidence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--light-gray);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.confidence-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.confidence-value {
  font-size: var(--font-lg);
  color: var(--success-green);
  font-weight: 700;
}

/* Mobile Responsiveness for Phase System */
@media (max-width: 768px) {
  .verification-overlay-content {
    max-width: 90%;
    padding: var(--space-lg);
  }

  .verification-camera-card {
    max-width: 90%;
    padding: var(--space-lg);
  }

  .verification-icon {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }

  .verification-title {
    font-size: var(--font-xl);
  }

  .verification-face-guide {
    width: 200px;
    height: 250px;
  }

  .phase-labels {
    font-size: 0.75rem;
  }
}

/* ===== END STEP 3 MULTI-PHASE VERIFICATION SYSTEM ===== */

/* ===== INLINE VERIFICATION CARDS (Replaces Modal Overlays) ===== */
/* Consistent with clock-in/clock-out inline camera pattern */

.verification-upload-card,
.verification-processing-card,
.verification-success-card,
.verification-error-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 2rem auto;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  animation: cardFadeIn 0.4s ease-out;
  min-height: 320px; /* Prevent layout shift during phase transitions */
  will-change: transform, opacity;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.verification-upload-card .card-header,
.verification-processing-card .card-header,
.verification-success-card .card-header,
.verification-error-card .card-header {
  margin-bottom: 2rem;
}

.verification-upload-card .card-body,
.verification-processing-card .card-body,
.verification-success-card .card-body,
.verification-error-card .card-body {
  margin-top: 1.5rem;
}

/* Inline Icons (not modal overlays) */
.upload-icon-inline,
.processing-icon-inline,
.success-icon-large,
.error-icon-large {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.upload-icon-inline {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: white;
}

.processing-icon-inline {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: white;
  animation: processingPulse 1.5s ease-in-out infinite;
}

@keyframes processingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.success-icon-large {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  animation: successPop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* Match Step 2 complete-icon styling (scaled up) */
  box-shadow:
    0 8px 25px rgba(5, 150, 105, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.15);
}

@keyframes successPop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.error-icon-large {
  background: linear-gradient(135deg, var(--error-red) 0%, #c82333 100%);
  color: white;
  animation: errorShake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

/* Upload Progress Styles */
.upload-progress-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.upload-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066cc 0%, #0052a3 100%);
  border-radius: 4px;
  transition: width 0.3s ease-out;
  will-change: width;
}

.upload-status {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Processing Spinner (inline, not modal) */
.verification-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spinnerRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
  animation-delay: -0.45s;
}

.spinner-ring:nth-child(2) {
  animation-delay: -0.3s;
}

.spinner-ring:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Verification Confidence Display */
.verification-confidence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  margin-top: 1rem;
}

.confidence-label {
  color: var(--text-muted);
  font-weight: 500;
}

.confidence-value {
  color: var(--success-green);
  font-weight: 700;
  font-size: 1.3rem;
}

/* Verification Actions (Error Card) */
.verification-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.verification-retry-button,
.verification-cancel-button {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.verification-retry-button.primary {
  background: var(--primary-blue);
  color: white;
}

.verification-retry-button.primary:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.verification-cancel-button.secondary {
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border-color);
}

.verification-cancel-button.secondary:hover {
  background: var(--bg-light);
  border-color: var(--text-muted);
}

/* Responsive Styles for iPad */
@media (max-width: 768px) {
  .verification-upload-card,
  .verification-processing-card,
  .verification-success-card,
  .verification-error-card {
    padding: 2rem 1.5rem;
    margin: 1.5rem 1rem;
    min-height: 280px;
  }

  .upload-icon-inline,
  .processing-icon-inline,
  .success-icon-large,
  .error-icon-large {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .verification-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .verification-retry-button,
  .verification-cancel-button {
    width: 100%;
    justify-content: center;
  }
}

/* ===== END INLINE VERIFICATION CARDS ===== */

/* Employee Loading Indicator */
.employee-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 300px;
}

.employee-loading .loading-spinner {
  font-size: 48px;
  color: var(--primary-blue);
  margin-bottom: 20px;
  animation: spin 1s linear infinite;
}

.employee-loading .loading-text {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Employee Count Display */
.employee-count-display {
  padding: 8px 16px;
  margin-bottom: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  border-radius: 8px;
  background-color: rgba(0, 86, 179, 0.04);
  border: 1px solid rgba(0, 86, 179, 0.08);
}

.employee-count-display.d-none {
  display: none;
}

@media (max-width: 768px) {
  .logout-modal {
    width: 95%;
    margin: var(--space-md);
  }
  
  .logout-modal .modal-actions {
    flex-direction: column-reverse;
  }
  
  .logout-modal .btn-cancel,
  .logout-modal .btn-logout {
    width: 100%;
  }
}

/* ==========================================
   CLOCK ACTION STYLES - Professional UI
   Dedicated styles matching dashboard/enrollment visual patterns
   ========================================== */

/* Step subtitle - clock-action specific */
.step-subtitle {
  text-align: center;
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 24px;
  font-weight: 400;
}

/* Employee Confirmation Card - Clean Professional Design */
.employee-confirmation-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  margin-bottom: 2rem;
  position: relative;
}





/* Employee Summary Section - Centered Kiosk Layout */
.employee-summary-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
  position: relative;
}

.employee-summary-section .employee-info {
  width: 100%;
  text-align: center;
}

.employee-summary-section .employee-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.employee-summary-section .employee-meta {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  text-align: center;
  width: 100%;
  display: block; /* Ensure proper centering without flex interference */
}

.employee-summary-section .confidence-progress-container {
  width: 100%;
  max-width: 320px;
}

/* Mobile/Kiosk Optimization */
@media (max-width: 768px) {
  .employee-summary-section {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .clock-step .employee-confirmation-card .employee-avatar {
    width: 120px;
    height: 120px;
  }
  
  .action-type {
    font-size: 2.25rem;
  }
  
  .context-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}





/* Employee Info Container */
.employee-info {
  flex: 1;
  min-width: 0;
}

.employee-info h4 {
  margin: 0 0 12px 0;
  font-size: 1.625rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: -0.025em;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  line-height: 1.2;
}

/* Confidence Progress Bar Component */
.confidence-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.confidence-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.confidence-progress-fill {
  height: 100%;
  background: #10b981;
  border-radius: 12px;
  transition: all 0.5s ease;
  width: 0%;
}

/* Color-coded confidence levels */
.confidence-progress-fill.high-confidence {
  background: #10b981; /* Green 95-100% */
}

.confidence-progress-fill.medium-confidence {
  background: #f59e0b; /* Orange 85-94% */
}

.confidence-progress-fill.low-confidence {
  background: #ef4444; /* Red <85% */
}

/* Manual selection styling */
.confidence-progress-fill.manual-selection {
  background: #8b5cf6; /* Purple represents human choice vs automation */
  background-image: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Progress bar width classes - used instead of inline styles for CSP compliance */
.progress-width-5 { width: 5%; }
.progress-width-10 { width: 10%; }
.progress-width-15 { width: 15%; }
.progress-width-20 { width: 20%; }
.progress-width-25 { width: 25%; }
.progress-width-30 { width: 30%; }
.progress-width-35 { width: 35%; }
.progress-width-40 { width: 40%; }
.progress-width-45 { width: 45%; }
.progress-width-50 { width: 50%; }
.progress-width-55 { width: 55%; }
.progress-width-60 { width: 60%; }
.progress-width-65 { width: 65%; }
.progress-width-70 { width: 70%; }
.progress-width-75 { width: 75%; }
.progress-width-80 { width: 80%; }
.progress-width-85 { width: 85%; }
.progress-width-90 { width: 90%; }
.progress-width-95 { width: 95%; }
.progress-width-100 { width: 100%; }

/* Confidence width classes - semantic aliases for confidence progress bars */
.confidence-width-0 { width: 0%; }
.confidence-width-5 { width: 5%; }
.confidence-width-10 { width: 10%; }
.confidence-width-15 { width: 15%; }
.confidence-width-20 { width: 20%; }
.confidence-width-25 { width: 25%; }
.confidence-width-30 { width: 30%; }
.confidence-width-35 { width: 35%; }
.confidence-width-40 { width: 40%; }
.confidence-width-45 { width: 45%; }
.confidence-width-50 { width: 50%; }
.confidence-width-55 { width: 55%; }
.confidence-width-60 { width: 60%; }
.confidence-width-65 { width: 65%; }
.confidence-width-70 { width: 70%; }
.confidence-width-75 { width: 75%; }
.confidence-width-80 { width: 80%; }
.confidence-width-85 { width: 85%; }
.confidence-width-90 { width: 90%; }
.confidence-width-95 { width: 95%; }
.confidence-width-100 { width: 100%; }

.confidence-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-align: center;
}

/* Employee Metadata - Enhanced */
.employee-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 1rem;
  color: #475569;
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: 0.75px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  transition: all 0.3s ease;
}


.employee-meta .separator {
  color: #d1d5db;
}

/* Recognition Confidence Indicator - Clean Professional Style */
.recognition-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #047857;
  font-weight: 500;
  background: #f0fdf4;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  margin-top: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}







.recognition-confidence i {
  font-size: 1rem;
  color: #10b981;
}

/* Clock Action Employee Avatar Enhancement - Fortune 500 Professional Style */
.clock-step .employee-confirmation-card .employee-avatar {
  width: 160px;
  height: 160px;
  border-radius: 24px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 600;
  color: #64748b;
  border: 2px solid #e2e8f0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}





/* Professional employee photo styling within avatar */
.clock-step .employee-confirmation-card .employee-avatar .employee-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  position: relative;
  z-index: 1;
}


/* Clock Action Summary - Clean Professional Display */
.clock-action-summary {
  margin: 0;
  padding: 2rem 2rem 1rem 2rem; /* Reduced bottom padding for tighter gap */
  text-align: center;
  position: relative;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}


.action-description {
  margin-bottom: 2rem;
}

/* Professional Status Context */
.status-context {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.context-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.context-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.context-item:last-child {
  border-bottom: none;
}

.context-label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

.context-value {
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

.action-label {
  display: block;
  font-size: 0.875rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

.action-type {
  font-size: 2.75rem;
  color: #1e293b;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.1;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}



.action-type i {
  font-size: 2.75rem;
  color: #0056b3;
}



/* Removed duplicate .action-time definition - using the enhanced version below */

.time-label {
  display: block;
  font-size: 0.9375rem;
  color: #475569;
  font-weight: 700;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

.time-value {
  display: block;
  font-size: 1.875rem;
  font-weight: 600;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, monospace;
  letter-spacing: 0.025em;
  background: #f8fafc;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}





/* Enhanced Action Type Badge - Enrollment Page Style */
.action-type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-xl);
  margin: var(--space-md) 0;
  width: 100%; /* Full width to match cards below */
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #e2e8f0;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-type-badge.clock-in {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 0.5px solid rgba(16, 185, 129, 0.2);
  color: #047857;
  font-weight: 600; /* Enhanced text weight for better visibility */
  letter-spacing: 0.025em; /* Improved letter spacing for readability */
}

.action-type-badge.clock-out {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 0.5px solid rgba(239, 68, 68, 0.2);
  color: #dc2626;
  font-weight: 600; /* Enhanced text weight for better visibility */
  letter-spacing: 0.025em; /* Improved letter spacing for readability */
}

/* Subtle hover animations */
.action-type-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.06);
}

.action-type-badge.clock-in:hover {
  box-shadow:
    0 6px 16px rgba(16, 185, 129, 0.15),
    0 3px 8px rgba(16, 185, 129, 0.1);
}

.action-type-badge.clock-out:hover {
  box-shadow:
    0 6px 16px rgba(239, 68, 68, 0.15),
    0 3px 8px rgba(239, 68, 68, 0.1);
}

/* Step 1: Reduce container padding to align title with Manual Selection and Steps 2/3 */
#clockStep1.active {
  padding-top: 0;
}

/* Step 2: Center icon vertically to match Step 3 */
#clockStep2 .action-type-badge {
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem 2rem;
}

#clockStep2 .action-type-badge .action-icon {
  margin: 0;
}

#clockStep2 .action-type-badge .action-content {
  text-align: center;
  align-items: center;
}

.action-icon {
  font-size: var(--font-3xl);
  opacity: 0.95;
  flex-shrink: 0;
}


.action-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-label {
  font-size: var(--font-sm);
  font-weight: 500;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-type {
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Professional Status Context Card */
.status-context-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.status-context-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}

.status-card-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid #f1f5f9;
}

.status-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.status-card-title i {
  color: var(--primary-blue);
  opacity: 0.85;
  font-size: 1.1em;
}

.context-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.context-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: all 0.2s ease;
}

.context-item:hover {
  background: rgba(241, 245, 249, 0.8);
  border-color: #cbd5e1;
}

/* Success Summary Grid - Vertical layout to match Step 2 */
.success-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.success-summary-grid .context-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  min-height: 90px;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid #e2e8f0;
}

.success-summary-grid .context-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  align-items: center;
}

.success-summary-grid .context-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.success-summary-grid .context-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
}

/* Step 2: Match Step 3 styling for consistency */
#clockStep2 .context-grid .context-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  min-height: 90px;
}

#clockStep2 .context-grid .context-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  align-items: center;
}

#clockStep2 .context-grid .context-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

#clockStep2 .context-grid .context-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
}

/* Employee avatar in success screen - ensure photo displays */
#clockStep3 .employee-avatar {
  position: relative;
}

#clockStep3 .employee-avatar .employee-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Responsive adjustments for success summary */
@media (max-width: 640px) {
  .success-summary-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
  font-size: var(--font-md);
  flex-shrink: 0;
}

.context-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
  width: 100%;
}

.context-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-value {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

/* Stacked status card typography */
.context-action {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  margin-top: 0.25rem;
}

.context-time {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  letter-spacing: -0.02em;
  margin: 0.5rem 0;
}

.context-relative {
  font-size: 0.813rem;
  font-weight: 400;
  color: #94a3b8;
  font-style: italic;
}

/* Color coding for clock actions with prominent backgrounds */
/* Component modifiers - used with .context-time elements */
.context-time.clock-in-color {
  color: #059669;
  background: rgba(16, 185, 129, 0.20);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.context-time.clock-out-color {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.12);
}

.context-time.active-session-color {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.18);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

/* Today's Hours specific overrides */
.today-hours .context-time {
  font-size: 2.25rem;
  font-weight: 800;
}

.today-hours .context-relative {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Enhanced Time Display */
.action-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  background: rgba(241, 245, 249, 0.6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(203, 213, 225, 0.8);
  transform: translateX(0);
}

.time-icon {
  color: var(--text-muted);
  opacity: 0.7;
}

.time-value {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-dark);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

/* Legacy hiding for unused elements */
.clock-action-display,
.action-time-display {
  display: none;
}

/* Success Details Container */
.success-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

/* Success Detail Items */
.success-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.success-detail-item i {
  width: 20px;
  color: #0056b3;
  font-size: 1rem;
}

.success-detail-item span {
  font-weight: 600;
  color: #374151;
}

/* Success Container Enhancements */
.success-icon-large {
  font-size: 4rem;
  color: #059669;
  margin-bottom: 20px;
}

.success-icon-large i {
  font-size: 2.9rem;
  color: white;
}

.success-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.success-message {
  font-size: 1rem;
  color: #6b7280;
  margin: 0 0 24px 0;
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .employee-summary-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  
  /* Clock action summary responsive */
  .action-summary-card {
    padding: var(--space-md);
  }
  
  .action-type {
    font-size: var(--font-xl);
  }
}

/* ============ ENHANCED STEP 3 SUCCESS PAGE ============ */

/* Enhanced Success Details */
.success-details-enhanced {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
  padding: 20px;
  background: rgba(249, 250, 251, 0.7);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.success-details-enhanced .success-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
}

.success-details-enhanced .success-detail-item i {
  font-size: 1.2rem;
  color: #059669;
  width: 20px;
}

.success-details-enhanced .success-detail-item span {
  font-weight: 600;
  color: #1f2937;
}

/* Weekly Statistics Section */
.success-stats-section {
  margin: 24px 0;
  padding: 20px;
  background: rgba(243, 244, 246, 0.8);
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

.stats-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.stats-title i {
  color: #6366f1;
  font-size: 1.2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.stat-label {
  font-size: 0.95rem;
  color: #6b7280;
  font-weight: 500;
}

.stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

/* Auto-Redirect Countdown Section */
.auto-redirect-section {
  margin: 32px 0 24px 0;
  text-align: center;
}

.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.countdown-circle {
  width: 80px;
  height: 80px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #0066cc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: countdownSpin 3s linear;
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.countdown-number {
  font-size: 2rem;
  font-weight: 800;
  color: #0066cc;
  line-height: 1;
}

.countdown-message {
  text-align: center;
}

.countdown-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 4px 0;
}

.countdown-subtext {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

@keyframes countdownSpin {
  0% {
    border-top-color: #0066cc;
    transform: rotate(0deg);
  }
  33% {
    border-top-color: #f59e0b;
    transform: rotate(120deg);
  }
  66% {
    border-top-color: #ef4444;
    transform: rotate(240deg);
  }
  100% {
    border-top-color: #059669;
    transform: rotate(360deg);
  }
}

/* Terminal-Optimized Success Container */
#clockStep3 .success-container {
  padding: 0 0 32px 0;  /* Remove top padding for consistent subtitle spacing with Step 2 */
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
}

#clockStep3 .success-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #059669;
  margin: 0 0 8px 0;
}

#clockStep3 .success-message {
  font-size: 1.2rem;
  color: #374151;
  margin: 0 0 32px 0;
}

#clockStep3 .success-icon-large {
  font-size: 5.5rem;
  color: #059669;
  margin-bottom: 24px;
}

/* Simple Success Details - Natural Centering */
#clockStep3 .success-details-enhanced {
  margin: 24px 0;
  transform: translateX(-10px);
}

#clockStep3 .success-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  margin: 8px 0;
  font-size: 1.1rem;
  color: #374151;
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: all 0.2s ease;
}

#clockStep3 .success-detail-item:hover {
  background: rgba(241, 245, 249, 0.8);
  border-color: #cbd5e1;
}

#clockStep3 .success-detail-item .context-icon i {
  color: #059669;
  font-size: 1.2rem;
}

#clockStep3 .success-detail-item .context-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Mobile Responsive Enhancements */
@media (max-width: 640px) {
  #clockStep3 .success-container {
    padding: 24px 16px;
  }
  
  .countdown-circle {
    width: 70px;
    height: 70px;
  }
  
  .countdown-number {
    font-size: 1.8rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  #clockStep3 .success-title {
    font-size: 1.8rem;
  }
  
  #clockStep3 .success-message {
    font-size: 1.1rem;
  }
  
  #clockStep3 .success-icon-large {
    font-size: 4.5rem;
  }
}

/* ========================================================================
   Modal Service - Reusable confirmation and alert modals
   Replaces browser native confirm()/alert() with custom UI
   ======================================================================== */

/* Body scroll lock when modal is open */
body.modal-scroll-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Modal overlay */
.modal-service-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
  backdrop-filter: blur(4px);
  padding: max(32px, env(safe-area-inset-top))
           max(32px, env(safe-area-inset-right))
           max(32px, env(safe-area-inset-bottom))
           max(32px, env(safe-area-inset-left));
}

/* Modal dialog container */
.modal-service-dialog {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: slideUp 0.3s ease;
}

/* Modal heading */
.modal-service-dialog h3 {
  margin: 0 0 16px 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1e293b;
}

/* Modal message */
.modal-service-dialog .modal-message {
  margin: 12px 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
}

/* Modal details/note */
.modal-service-dialog .modal-details {
  background: #f1f5f9;
  border-left: 4px solid #3b82f6;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 20px 0;
  font-size: 0.95rem;
  color: #334155;
  text-align: left;
}

/* Modal alert icon (for alert() modals) */
.modal-alert-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.modal-icon-info {
  color: #3b82f6;
}

.modal-icon-error {
  color: #ef4444;
}

.modal-icon-warning {
  color: #f59e0b;
}

.modal-icon-success {
  color: #10b981;
}

/* Modal actions container */
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.modal-actions-single {
  justify-content: center;
}

/* Base button styles */
.modal-btn {
  flex: 1;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  touch-action: manipulation;
}

.modal-actions-single .modal-btn {
  flex: 0 1 auto;
  min-width: 120px;
}

/* Cancel button */
.modal-btn-cancel {
  background: #f1f5f9;
  color: #475569;
}

.modal-btn-cancel:hover {
  background: #e2e8f0;
}

.modal-btn-cancel:active {
  background: #cbd5e1;
  transform: scale(0.98);
}

/* Confirm button - Default variant */
.modal-btn-default {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modal-btn-default:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.modal-btn-default:active {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: scale(0.98);
}

/* Confirm button - Danger variant */
.modal-btn-danger,
.modal-btn-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.modal-btn-danger:hover,
.modal-btn-error:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.modal-btn-danger:active,
.modal-btn-error:active {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  transform: scale(0.98);
}

/* Confirm button - Warning variant */
.modal-btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.modal-btn-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.modal-btn-warning:active {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  transform: scale(0.98);
}

/* Confirm button - Success variant */
.modal-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.modal-btn-success:active {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  transform: scale(0.98);
}

/* Confirm button - Info variant */
.modal-btn-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modal-btn-info:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.modal-btn-info:active {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: scale(0.98);
}

/* Icon spacing inside buttons */
.modal-btn i {
  font-size: 1.1rem;
}

/* Variant-specific details border colors */
.modal-variant-danger .modal-details,
.modal-variant-error .modal-details {
  border-left-color: #ef4444;
}

.modal-variant-warning .modal-details {
  border-left-color: #f59e0b;
}

.modal-variant-success .modal-details {
  border-left-color: #10b981;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .modal-service-dialog {
    padding: 24px;
    width: 95%;
  }

  .modal-service-dialog h3 {
    font-size: 1.5rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .modal-service-overlay {
    animation: none;
    backdrop-filter: none;
  }

  .modal-service-dialog {
    animation: none;
  }
}

/* Employee card clickable state */
.employee-card-clickable {
    cursor: pointer;
}