.navbar-container{display:flex;position:relative}.navbar-header{position:fixed;top:0;left:0;right:0;height:70px;background:#ffffff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:1000;box-shadow:0 1px 3px #0000001a}.header-left{display:flex;align-items:center}.hamburger-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;color:#6b7280;transition:all .2s ease}.hamburger-btn:hover{background:#f3f4f6;color:#374151}.header-center{flex:1;max-width:500px;margin:0 24px}.search-container{position:relative;width:100%}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af}.search-input{width:100%;padding:12px 12px 12px 44px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.search-input:focus{outline:none;border-color:#3b82f6;background:#ffffff;box-shadow:0 0 0 3px #3b82f61a}.header-right{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;color:#6b7280;transition:all .2s ease}.notification-btn:hover{background:#f3f4f6;color:#374151}.notification-badge{position:absolute;top:4px;right:4px;background:#ef4444;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.profile-section{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;transition:all .2s ease}.profile-section:hover{background:#f3f4f6}.profile-info{display:flex;flex-direction:column;align-items:flex-end}.profile-name{font-size:14px;font-weight:600;color:#111827;line-height:1.2}.profile-role{font-size:12px;color:#6b7280;line-height:1.2}.profile-picture{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #e5e7eb}.profile-img{width:100%;height:100%;object-fit:cover}.navbar-sidebar{position:fixed;top:70px;left:0;height:calc(100vh - 70px);background:#ffffff;border-right:1px solid #e5e7eb;transition:all .3s ease;z-index:999;overflow-y:auto;overflow-x:hidden}.navbar-sidebar.expanded{width:280px}.navbar-sidebar.collapsed{width:44px}.sidebar-content{padding:24px 0;height:100%;display:flex;flex-direction:column}.navbar-sidebar.collapsed .sidebar-content{padding:12px 0}.logo-section{padding:0 24px 24px;border-bottom:1px solid #e5e7eb;margin-bottom:24px}.logo{display:flex;align-items:center;justify-content:center}.logo-text{font-size:24px;font-weight:700;color:#1f2937;letter-spacing:1px}.logo-text-collapsed{font-size:20px;font-weight:700;color:#1f2937;letter-spacing:1px}.navbar-sidebar.collapsed .logo-section{padding:0 8px 12px;margin-bottom:12px}.navbar-sidebar.collapsed .logo-text-collapsed{font-size:11px;font-weight:800;letter-spacing:0;line-height:1.1;text-align:center}.sidebar-logo-img{max-height:40px;width:auto;object-fit:contain;display:block}.navbar-sidebar.collapsed .sidebar-logo-img{max-height:32px}.navigation-menu{flex:1;display:flex;flex-direction:column;gap:4px;padding:0 16px}.navbar-sidebar.collapsed .navigation-menu{padding:0 4px;align-items:center}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:#6b7280;border-radius:8px;transition:all .2s ease;font-size:14px;font-weight:500;white-space:nowrap}.navbar-sidebar.collapsed .nav-item{padding:0;width:36px;min-height:36px;justify-content:center;border-radius:8px}.nav-item:hover{background:#f3f4f6;color:#374151}.nav-item.active{background:#5438DC;color:#fff}.nav-item.active .nav-icon{color:#fff}.nav-icon{color:inherit;flex-shrink:0}.nav-label{flex:1;opacity:1;transition:opacity .2s ease}.navbar-sidebar.collapsed .nav-label{opacity:0;width:0;overflow:hidden}.logout-section{padding:16px;border-top:1px solid #e5e7eb;margin-top:auto}.navbar-sidebar.collapsed .logout-section{padding:8px 4px;display:flex;justify-content:center}.navbar-sidebar.collapsed .auth-navigation-menu{padding:8px 4px 0;align-items:center}.navbar-sidebar.collapsed .auth-nav-item{width:36px;min-height:36px;padding:0;justify-content:center;border-left:none}.logout-item{color:#dc2626}.logout-item:hover{background:#fef2f2;color:#b91c1c}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:998;display:none}@media (max-width: 768px){.navbar-sidebar{width:100%!important;max-width:320px;transform:translate(-100%)}.navbar-sidebar.expanded{transform:translate(0)}.header-center{margin:0 16px}.navbar-header{padding:0 16px}.profile-info{display:none}.sidebar-overlay{display:block}}@media (max-width: 640px){.header-center{display:none}.navbar-header{padding:0 12px}}.auth-navigation-menu{border-top:1px solid #e5e7eb;margin-top:8px;padding-top:8px}.auth-nav-item{background:#f8fafc;border-left:3px solid #667eea}.auth-nav-item:hover{background:#f1f5f9;border-left-color:#5a67d8}.auth-nav-item.active{background:#eef2ff;border-left-color:#4f46e5}.App{text-align:center;min-height:100vh;background:#f9fafb}.main-content{margin-top:70px;padding:24px;min-height:calc(100vh - 70px);transition:margin-left .3s ease}.main-content.sidebar-expanded{margin-left:280px}.main-content.sidebar-collapsed{margin-left:44px}.page-container{text-align:left;max-width:1200px;margin:0 auto}.page-container h1{color:#111827;margin:0 0 16px;font-size:32px;font-weight:700}.page-container p{color:#6b7280;margin:0 0 32px;font-size:16px}.dashboard-header{margin-bottom:32px}.dashboard-header h1{color:#111827;margin:0 0 8px;font-size:32px;font-weight:700}.dashboard-header p{color:#6b7280;margin:0;font-size:16px}.dashboard-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f4f6;border-top:4px solid #5438DC;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dashboard-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:40px}.metric-card{background:white;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;display:flex;align-items:center;gap:16px;transition:transform .2s ease,box-shadow .2s ease}.metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.metric-icon{font-size:32px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:12px}.metric-content h3{color:#6b7280;margin:0 0 8px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.metric-number{color:#5438dc;font-size:32px;font-weight:700;margin:0 0 4px}.metric-subtitle{color:#6b7280;font-size:14px;margin:0}.dashboard-content{display:grid;gap:32px}.dashboard-section h2{color:#111827;margin:0 0 20px;font-size:24px;font-weight:600}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.quick-action-card{background:white;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;text-align:center;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.quick-action-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:var(--action-color)}.action-icon{font-size:32px;margin-bottom:12px}.quick-action-card h3{color:#111827;margin:0 0 8px;font-size:18px;font-weight:600}.quick-action-card p{color:#6b7280;margin:0;font-size:14px}.recent-activity{background:white;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.activity-list{padding:0}.activity-item{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid #f3f4f6}.activity-item:last-child{border-bottom:none}.activity-icon{font-size:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:8px}.activity-content h4{color:#111827;margin:0 0 4px;font-size:16px;font-weight:600}.activity-content p{color:#6b7280;margin:0 0 4px;font-size:14px}.activity-content small{color:#9ca3af;font-size:12px}.status-badge{padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize}.status-badge.status-completed{background:#dcfce7;color:#166534}.status-badge.status-in_progress{background:#dbeafe;color:#1e40af}.status-badge.status-paused{background:#fef3c7;color:#92400e}.no-activity{padding:40px 24px;text-align:center}.no-activity p{color:#6b7280;margin:0 0 16px;font-size:16px}.btn-primary{background:#5438DC;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.btn-primary:hover{background:#4530b8}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.overview-card{background:white;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.overview-card h3{color:#111827;margin:0 0 16px;font-size:18px;font-weight:600}.overview-stats{display:flex;flex-direction:column;gap:12px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6}.stat-row:last-child{border-bottom:none}.stat-row span:first-child{color:#6b7280;font-size:14px;text-transform:capitalize}.stat-row span:last-child{color:#5438dc;font-weight:600;font-size:16px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}.feature-card{background:white;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;text-align:center}.feature-card h3{color:#111827;margin:0 0 12px;font-size:20px;font-weight:600}.feature-card p{color:#6b7280;margin:0;font-size:14px}.employee-list h2{color:#111827;margin:0 0 20px;font-size:24px;font-weight:600}.employee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.employee-card{background:white;padding:20px;border-radius:12px;box-shadow:0 1px 3px #0000001a;text-align:center}.employee-avatar{width:60px;height:60px;background:#5438DC;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;margin:0 auto 16px}.employee-card h4{color:#111827;margin:0 0 8px;font-size:18px;font-weight:600}.employee-card p{color:#6b7280;margin:0 0 16px;font-size:14px}.status{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}.status.active{background:#dcfce7;color:#166534}@media (max-width: 768px){.main-content{margin-left:0!important;padding:16px}.features-grid,.employee-stats,.employee-grid,.dashboard-metrics,.quick-actions-grid,.overview-grid{grid-template-columns:1fr;gap:16px}.page-container h1,.dashboard-header h1{font-size:28px}.feature-card,.stat-card,.employee-card,.metric-card,.quick-action-card,.overview-card{padding:20px}.metric-card{flex-direction:column;text-align:center;gap:12px}.metric-icon{width:50px;height:50px;font-size:24px}.metric-number{font-size:28px}.activity-item{padding:16px 20px}.dashboard-section h2{font-size:20px}}.login-form-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f9fafb;padding:20px}.login-form{background:white;padding:40px;border-radius:12px;box-shadow:0 1px 3px #0000001a;width:100%;max-width:400px;transition:transform .2s ease,box-shadow .2s ease}.login-form:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.login-form h2{text-align:center;margin-bottom:8px;color:#111827;font-size:32px;font-weight:700}.login-subtitle{text-align:center;color:#6b7280;margin-bottom:32px;font-size:16px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:6px;color:#111827;font-weight:600;font-size:14px}.form-group input{width:100%;padding:12px 16px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;transition:border-color .2s ease;box-sizing:border-box;background:white}.form-group input:focus{outline:none;border-color:#5438dc}.form-group input.error{border-color:#e74c3c}.error-message{display:block;color:#e74c3c;font-size:12px;margin-top:4px}.auth-error{background:#fdf2f2;border:1px solid #fecaca;color:#dc2626;padding:12px;border-radius:8px;margin-bottom:20px;font-size:14px}.login-button{width:100%;background:#5438DC;color:#fff;border:none;padding:14px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.login-button:hover:not(:disabled){background:#4530b8}.login-button:disabled{background:#cbd5e0;cursor:not-allowed}.login-footer{text-align:center;margin-top:24px;padding-top:24px;border-top:1px solid #e1e5e9}.login-footer p{color:#6b7280;font-size:14px}.register-link{color:#5438dc;text-decoration:none;font-weight:600}.register-link:hover{text-decoration:underline}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px;gap:8px}.loading-spinner,.loading-text{font-size:16px;color:#666}.unauthorized-container{text-align:center;padding:40px 20px;max-width:500px;margin:0 auto}.unauthorized-container h2{color:#e74c3c;margin-bottom:16px}.unauthorized-container p{color:#666;margin-bottom:12px}.login-link{display:inline-block;background:#667eea;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:500;margin-top:20px}.login-link:hover{background:#5a67d8}.agency-header{background:white;border-bottom:1px solid #e1e5e9;box-shadow:0 2px 4px #0000000d}.agency-header-content{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;max-width:1200px;margin:0 auto}.agency-info{display:flex;align-items:center;gap:12px}.agency-name{font-size:24px;font-weight:600;color:#333;margin:0}.agency-plan{background:#667eea;color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase}.user-info{display:flex;align-items:center;gap:16px}.user-details{display:flex;align-items:center;gap:12px}.user-name{font-weight:500;color:#333}.user-role{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500;text-transform:uppercase}.badge-admin{background:#fef3c7;color:#92400e}.badge-manager{background:#dbeafe;color:#1e40af}.badge-employee{background:#d1fae5;color:#065f46}.badge-viewer{background:#f3e8ff;color:#7c3aed}.badge-default{background:#f3f4f6;color:#374151}.user-menu-container{position:relative}.user-menu-trigger{background:none;border:none;cursor:pointer;padding:0}.user-avatar{width:40px;height:40px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}.user-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}.user-menu{position:absolute;top:100%;right:0;background:white;border:1px solid #e1e5e9;border-radius:12px;box-shadow:0 10px 30px #0000001a;min-width:280px;z-index:20;margin-top:8px}.user-menu-header{display:flex;align-items:center;gap:12px;padding:16px}.user-avatar-large{width:48px;height:48px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}.user-menu-info{flex:1}.user-menu-name{font-weight:600;color:#333;margin-bottom:2px}.user-menu-email{font-size:14px;color:#666;margin-bottom:4px}.user-menu-role{padding:2px 8px;border-radius:8px;font-size:11px;font-weight:500;text-transform:uppercase;display:inline-block}.user-menu-divider{height:1px;background:#e1e5e9;margin:0 16px}.user-menu-items{padding:8px 0}.user-menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#333;text-decoration:none;font-size:14px;transition:background-color .2s ease;border:none;background:none;width:100%;text-align:left;cursor:pointer}.user-menu-item:hover{background:#f8fafc}.logout-item{color:#e74c3c}.menu-item-icon{font-size:16px}.agency-status-bar{background:#f8fafc;padding:8px 24px;border-top:1px solid #e1e5e9;display:flex;gap:24px;max-width:1200px;margin:0 auto}.status-item{display:flex;align-items:center;gap:6px}.status-label{font-size:12px;color:#666;font-weight:500}.status-value{font-size:12px;font-weight:600}.plan-free{color:#666}.plan-basic{color:#667eea}.plan-premium{color:#f59e0b}.status-active{color:#10b981}.status-inactive{color:#ef4444}.profile-page{padding:24px;max-width:800px;margin:0 auto}.profile-container{background:white;border-radius:12px;box-shadow:0 4px 12px #0000000d;overflow:hidden}.profile-container h1{padding:24px 24px 0;margin:0;color:#333;font-size:24px;font-weight:600}.profile-tabs{display:flex;border-bottom:1px solid #e1e5e9;padding:0 24px;margin-top:24px}.tab-button{background:none;border:none;padding:16px 24px;font-size:14px;font-weight:500;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.tab-button:hover{color:#333}.tab-button.active{color:#667eea;border-bottom-color:#667eea}.profile-tab{padding:24px}.readonly-field{padding:12px 16px;background:#f8fafc;border:1px solid #e1e5e9;border-radius:8px;color:#666;font-size:16px}.save-button{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.save-button:hover:not(:disabled){background:#5a67d8}.save-button:disabled{background:#cbd5e0;cursor:not-allowed}.success-message{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px}.user-management-page{padding:24px;max-width:1200px;margin:0 auto}.user-management-container{background:white;border-radius:12px;box-shadow:0 4px 12px #0000000d;overflow:hidden}.page-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e1e5e9}.page-header h1{margin:0;color:#333;font-size:24px;font-weight:600}.create-user-button{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.create-user-button:hover:not(:disabled){background:#5a67d8}.create-user-button:disabled{background:#cbd5e0;cursor:not-allowed}.modal-content form{padding:24px;overflow:auto}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.cancel-button{background:#f8fafc;color:#666;border:1px solid #e1e5e9;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button:hover:not(:disabled){background:#e2e8f0;color:#333}.cancel-button:disabled{opacity:.5;cursor:not-allowed}.users-table-container{overflow-x:auto}.users-table{width:100%;border-collapse:collapse}.users-table th{background:#f8fafc;padding:16px;text-align:left;font-weight:600;color:#333;border-bottom:1px solid #e1e5e9;font-size:14px}.users-table td{padding:16px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.users-table tr:hover{background:#f8fafc}.user-info{display:flex;align-items:center;gap:12px}.user-name{font-weight:500;color:#333;margin-bottom:2px}.user-email{font-size:14px;color:#666}.status{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase}.status.active{background:#d1fae5;color:#065f46}.status.inactive{background:#fee2e2;color:#991b1b}.action-buttons{display:flex;gap:8px;align-items:center}.role-select{padding:6px 12px;border:1px solid #e1e5e9;border-radius:6px;font-size:12px;background:white;cursor:pointer}.role-select:disabled{background:#f8fafc;color:#666;cursor:not-allowed}.deactivate-button{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.deactivate-button:hover:not(:disabled){background:#fecaca}.deactivate-button:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}select{width:100%;padding:12px 16px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;background:white;cursor:pointer;transition:border-color .2s ease}select:focus{outline:none;border-color:#667eea}select:disabled{background:#f8fafc;color:#666;cursor:not-allowed}:root{--color-primary: #007bff;--color-primary-hover: #0069d9;--color-primary-soft: #e7f1ff;--color-success: #28a745;--color-success-soft: #e6f6ea;--color-warning: #ffc107;--color-warning-soft: #fff8e1;--color-danger: #ef4444;--color-danger-soft: #fde8e8;--color-info: #0dcaf0;--color-info-soft: #e7faff;--color-bg: #ffffff;--color-bg-muted: #f8f9fa;--color-surface: #ffffff;--color-surface-raised: #f8f9fa;--color-border: #e5e7eb;--color-border-strong: #d1d5db;--color-text-primary: #111827;--color-text-secondary: #374151;--color-text-muted: #6b7280;--color-text-disabled: #9ca3af;--color-text-inverse: #ffffff;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-lg: 16px;--text-xl: 18px;--text-2xl: 22px;--text-3xl: 28px;--line-tight: 1.2;--line-normal: 1.45;--line-relaxed: 1.6;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02);--shadow-md: 0 2px 4px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--transition-fast: .12s ease;--transition-base: .18s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}button{font-family:inherit}a{text-decoration:none;color:inherit}body{overflow-x:hidden}