:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;font-weight:400;--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-800: #075985;--primary-900: #0c4a6e;--secondary-50: #f8fafc;--secondary-100: #f1f5f9;--secondary-200: #e2e8f0;--secondary-300: #cbd5e1;--secondary-400: #94a3b8;--secondary-500: #64748b;--secondary-600: #475569;--secondary-700: #334155;--secondary-800: #1e293b;--secondary-900: #0f172a;--success-50: #f0fdf4;--success-500: #22c55e;--success-600: #16a34a;--success-700: #15803d;--warning-50: #fffbeb;--warning-500: #f59e0b;--warning-600: #d97706;--error-50: #fef2f2;--error-500: #ef4444;--error-600: #dc2626;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root,[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: var(--secondary-50);--bg-tertiary: var(--secondary-100);--text-primary: var(--secondary-900);--text-secondary: var(--secondary-600);--text-tertiary: var(--secondary-400);--border-color: var(--secondary-200);--hover-bg: var(--secondary-50);--active-bg: var(--secondary-100)}[data-theme=dark]{--bg-primary: var(--secondary-900);--bg-secondary: var(--secondary-800);--bg-tertiary: var(--secondary-700);--text-primary: var(--secondary-50);--text-secondary: var(--secondary-300);--text-tertiary: var(--secondary-400);--border-color: var(--secondary-700);--hover-bg: var(--secondary-800);--active-bg: var(--secondary-700);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3)}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;background-color:var(--bg-secondary);color:var(--text-primary);font-size:14px}#root{min-height:100vh;width:100%}*{color:inherit}body,div,span,p,h1,h2,h3,h4,h5,h6,label,li,td,th{color:var(--text-primary)}input,textarea,select{color:var(--text-primary);background-color:var(--bg-primary)}button{color:inherit}.text-primary{color:var(--text-primary)!important}.text-secondary{color:var(--text-secondary)!important}.text-tertiary,.text-muted{color:var(--text-tertiary)!important}.card,.card *{color:var(--text-primary)}.card .text-secondary,.card .text-muted{color:var(--text-secondary)!important}.dashboard-container *{color:var(--text-primary)}.form-label{color:var(--text-primary)!important}.badge,.status-badge{color:#fff!important}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.4;color:var(--text-primary)}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin:0;color:var(--text-secondary);line-height:1.6}a{color:var(--primary-600);text-decoration:none;font-weight:500;transition:color .2s ease}a:hover{color:var(--primary-700)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid transparent;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s ease;text-decoration:none;min-height:2.5rem}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--primary-600);color:#fff;border-color:var(--primary-600)}.btn-primary:hover:not(:disabled){background-color:var(--primary-700);border-color:var(--primary-700)}.btn-secondary{background-color:var(--bg-primary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover:not(:disabled){background-color:var(--hover-bg);border-color:var(--secondary-300)}.btn-success{background-color:var(--success-600);color:#fff;border-color:var(--success-600)}.btn-success:hover:not(:disabled){background-color:var(--success-700)}.btn-warning{background-color:var(--warning-500);color:#fff;border-color:var(--warning-500)}.btn-error{background-color:var(--error-500);color:#fff;border-color:var(--error-500)}.card{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .2s ease}.card:hover{box-shadow:var(--shadow-md)}.card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.card-body{padding:var(--spacing-lg)}.card-footer{padding:var(--spacing-lg);border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}[data-theme=dark] .card{background:var(--bg-primary);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] .card *,[data-theme=dark] .card h1,[data-theme=dark] .card h2,[data-theme=dark] .card h3,[data-theme=dark] .card h4,[data-theme=dark] .card h5,[data-theme=dark] .card h6{color:var(--text-primary)!important}[data-theme=dark] .card .text-secondary{color:var(--text-secondary)!important}[data-theme=dark] .card .text-muted,[data-theme=dark] .card .text-tertiary{color:var(--text-tertiary)!important}[data-theme=dark] .card-header{background-color:var(--bg-secondary);color:var(--text-primary);border-bottom-color:var(--border-color)}[data-theme=dark] .card-footer{background-color:var(--bg-secondary);color:var(--text-primary);border-top-color:var(--border-color)}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--text-primary);font-size:.875rem}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.875rem;transition:all .2s ease;background-color:var(--bg-primary);color:var(--text-primary);min-height:2.5rem}.form-input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}.form-input:disabled{background-color:var(--bg-tertiary);cursor:not-allowed;opacity:.6}.form-input::placeholder{color:var(--text-tertiary)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.w-full{width:100%}.h-full{height:100%}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.loading-spinner{display:inline-block;width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}.app-loader{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1.125rem;color:var(--text-secondary)}@media (max-width: 768px){:root{font-size:14px}.card-body,.card-header,.card-footer{padding:var(--spacing-md)}}[data-theme=dark],[data-theme=dark] body,[data-theme=dark] .main-layout,[data-theme=dark] .sidebar,[data-theme=dark] .navbar{color:var(--text-primary)}[data-theme=dark] .dashboard-title,[data-theme=dark] .page-title,[data-theme=dark] h1:not(.card h1),[data-theme=dark] h2:not(.card h2),[data-theme=dark] h3:not(.card h3){color:var(--text-primary)!important}[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select{background-color:var(--bg-primary);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:var(--text-tertiary)}[data-theme=dark] .card input,[data-theme=dark] .card textarea,[data-theme=dark] .card select{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] .card input::placeholder,[data-theme=dark] .card textarea::placeholder{color:var(--text-tertiary)}[data-theme=dark] .card .form-label,[data-theme=dark] .card label{color:var(--text-primary)!important}[data-theme=dark] .stat-card,[data-theme=dark] .quick-action-card,[data-theme=dark] .recent-activity{background:var(--bg-primary);color:var(--text-primary)}[data-theme=dark] .stat-card *,[data-theme=dark] .quick-action-card *,[data-theme=dark] .recent-activity *,[data-theme=dark] .activity-title{color:var(--text-primary)!important}[data-theme=dark] .activity-description{color:var(--text-secondary)!important}[data-theme=dark] .activity-time{color:var(--text-tertiary)!important}[data-theme=dark] .stat-card-value{color:var(--text-primary)!important}[data-theme=dark] .stat-card-label{color:var(--text-secondary)!important}[data-theme=dark] .quick-action-title{color:var(--text-primary)!important}[data-theme=dark] .quick-action-description{color:var(--text-secondary)!important}/ * Status Badge Colors - Theme Independent */ .status-badge{padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;color:#fff!important}.status-badge.active{background-color:var(--success-500)!important}.status-badge.inactive{background-color:var(--error-500)!important}.status-badge.pending{background-color:var(--warning-500)!important}.status-badge.approved{background-color:var(--success-500)!important}.role-badge{padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;color:#fff!important}.role-badge.super_admin{background-color:var(--primary-600)!important}.role-badge.admin{background-color:var(--primary-500)!important}.role-badge.team_lead{background-color:var(--secondary-600)!important}.role-badge.employee{background-color:var(--secondary-500)!important}.approval-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;color:#fff!important}.approval-badge.approved{background-color:var(--success-500)!important}.approval-badge.pending{background-color:var(--warning-500)!important}.loading-spinner-small{width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}svg{color:inherit}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;color:var(--text-secondary)}.action-btn:hover{background-color:var(--hover-bg);color:var(--text-primary)}.action-btn.danger:hover{background-color:var(--error-50);color:var(--error-600)}[data-theme=dark] .action-btn.danger:hover{background-color:var(--error-900);color:var(--error-300)}[data-theme=dark] .card table,[data-theme=dark] .card th,[data-theme=dark] .card td{color:var(--text-primary)!important;border-color:var(--border-color)}[data-theme=dark] .card table thead th{background-color:var(--bg-secondary);color:var(--text-primary)!important}[data-theme=dark] .card .btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] .card .btn-secondary:hover{background-color:var(--hover-bg);color:var(--text-primary)}[data-theme=dark] .card a{color:var(--primary-400)!important}[data-theme=dark] .card a:hover{color:var(--primary-300)!important}[data-theme=dark] .card .badge,[data-theme=dark] .card .status-badge,[data-theme=dark] .card .role-badge{color:#fff!important}[data-theme=dark] .card hr,[data-theme=dark] .card .divider{border-color:var(--border-color)}[data-theme=dark] .card svg{color:inherit}[data-theme=dark] .card span:not(.status-badge):not(.role-badge):not(.badge),[data-theme=dark] .card div:not(.status-badge):not(.role-badge):not(.badge),[data-theme=dark] .card p{color:var(--text-primary)!important}[data-theme=dark] .card .secondary-text,[data-theme=dark] .card small{color:var(--text-secondary)!important}[data-theme=dark] .card,[data-theme=dark] .card-body,[data-theme=dark] .card-header,[data-theme=dark] .card-footer,[data-theme=dark] .stat-card,[data-theme=dark] .quick-action-card,[data-theme=dark] .recent-activity{background-color:#fff!important;color:#1e293b!important}[data-theme=dark] .card *:not(.status-badge):not(.role-badge):not(.badge):not(.btn),[data-theme=dark] .stat-card *:not(.status-badge):not(.role-badge):not(.badge):not(.btn),[data-theme=dark] .quick-action-card *:not(.status-badge):not(.role-badge):not(.badge):not(.btn),[data-theme=dark] .recent-activity *:not(.status-badge):not(.role-badge):not(.badge):not(.btn){color:#1e293b!important}[data-theme=dark] .card h1,[data-theme=dark] .card h2,[data-theme=dark] .card h3,[data-theme=dark] .card h4,[data-theme=dark] .card h5,[data-theme=dark] .card h6,[data-theme=dark] .stat-card h1,[data-theme=dark] .stat-card h2,[data-theme=dark] .stat-card h3,[data-theme=dark] .stat-card h4,[data-theme=dark] .stat-card h5,[data-theme=dark] .stat-card h6{color:#0f172a!important}[data-theme=dark] .card .text-secondary,[data-theme=dark] .card .text-muted,[data-theme=dark] .stat-card .text-secondary,[data-theme=dark] .stat-card .text-muted{color:#64748b!important}[data-theme=dark] body,[data-theme=dark] .main-layout,[data-theme=dark] .main-content{background-color:var(--bg-secondary)!important;color:var(--text-primary)!important}[data-theme=dark] .dashboard-title,[data-theme=dark] .page-title{color:var(--text-primary)!important}.leave-request-container,.leave-management-container,.leave-history-container,.leave-balance-container,.leave-approval-container,.timesheet-submit-container,.timesheet-management-container{padding:0}.leave-request-card,.leave-management-card,.timesheet-submit-card,.timesheet-form-card,.weekly-summary-card{border-radius:8px;box-shadow:0 2px 8px #0000001a}.leave-type-card{text-align:center;border-radius:8px}.leave-details{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#666}@media (max-width: 768px){.leave-request-container,.leave-management-container,.timesheet-submit-container,.timesheet-management-container{padding:0 8px}}.main-layout{display:flex;min-height:100vh;background-color:var(--bg-secondary)}.main-content{flex:1;padding:var(--spacing-xl);margin-left:0;transition:margin-left .3s ease;overflow-y:auto}.main-content.sidebar-open{margin-left:280px}.dashboard-container{max-width:1400px;margin:0 auto}.dashboard-header{margin-bottom:var(--spacing-xl)}.dashboard-title{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.dashboard-subtitle{color:var(--text-secondary);font-size:1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.stat-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .2s ease}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.stat-card-icon{width:3rem;height:3rem;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff}.stat-card-icon.primary{background-color:var(--primary-500);color:#fff}.stat-card-icon.success{background-color:var(--success-500);color:#fff}.stat-card-icon.warning{background-color:var(--warning-500);color:#fff}.stat-card-icon.error{background-color:var(--error-500);color:#fff}.stat-card-value{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.stat-card-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.stat-card-change{font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:var(--spacing-xs)}.stat-card-change.positive{color:var(--success-600)}.stat-card-change.negative{color:var(--error-600)}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}@media (max-width: 1024px){.content-grid{grid-template-columns:1fr}.main-content.sidebar-open{margin-left:0}}.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.quick-action-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color);text-align:center;cursor:pointer;transition:all .2s ease;text-decoration:none}.quick-action-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary-300)}.quick-action-icon{width:3rem;height:3rem;margin:0 auto var(--spacing-md);background-color:var(--primary-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--primary-600)}.quick-action-title{font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.quick-action-description{font-size:.875rem;color:var(--text-secondary)}.recent-activity{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden}.recent-activity-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.recent-activity-title{font-weight:600;color:var(--text-primary)}.activity-list{max-height:400px;overflow-y:auto}.activity-item{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-md)}.activity-item:last-child{border-bottom:none}.activity-icon{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;background-color:var(--primary-500)}.activity-content{flex:1}.activity-title{font-weight:500;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.activity-description{font-size:.875rem;color:var(--text-secondary)}.activity-time{font-size:.75rem;color:var(--text-tertiary);white-space:nowrap}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,1fr)}.main-content{padding:var(--spacing-lg)}.dashboard-title{font-size:1.5rem}}@media (max-width: 480px){.quick-actions{grid-template-columns:1fr}.main-content{padding:var(--spacing-md)}}[data-theme=dark] .stat-card{background:#fff;color:#1e293b}[data-theme=dark] .stat-card-value{color:#0f172a}[data-theme=dark] .stat-card-label{color:#64748b}[data-theme=dark] .quick-action-card{background:#fff;color:#1e293b}[data-theme=dark] .quick-action-title{color:#0f172a}[data-theme=dark] .quick-action-description{color:#64748b}[data-theme=dark] .recent-activity{background:#fff}[data-theme=dark] .recent-activity-title,[data-theme=dark] .activity-title{color:#0f172a}[data-theme=dark] .activity-description{color:#64748b}[data-theme=dark] .activity-time{color:#94a3b8}.notification-dropdown-container{position:relative;display:inline-block}.notification-trigger{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:#64748b;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.notification-trigger:hover{background-color:#f1f5f9;color:#334155}.notification-badge{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:600;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;line-height:1}.notification-dropdown{position:absolute;top:100%;right:0;width:380px;max-height:500px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 10px 25px #0000001a;z-index:1000;overflow:hidden;margin-top:8px}.notification-header{padding:16px 20px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;background:#f8fafc}.notification-header h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.mark-all-read-btn{background:none;border:none;color:#3b82f6;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background-color .2s ease}.mark-all-read-btn:hover{background-color:#dbeafe}.notification-list{max-height:400px;overflow-y:auto}.notification-item{padding:16px 20px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background-color .2s ease;position:relative}.notification-item:hover{background-color:#f8fafc}.notification-item.unread{background-color:#f0f9ff;border-left:3px solid #3b82f6}.notification-item:last-child{border-bottom:none}.notification-content{display:flex;align-items:flex-start;gap:12px;position:relative}.notification-user{display:flex;align-items:flex-start;gap:12px;flex:1}.notification-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.notification-avatar-initials{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}.notification-details{flex:1;min-width:0}.notification-message{margin-bottom:8px}.notification-title{font-weight:600;color:#1e293b;font-size:14px;display:block;margin-bottom:4px}.notification-text{color:#64748b;font-size:13px;line-height:1.4;margin:0;word-wrap:break-word}.notification-meta{display:flex;justify-content:space-between;align-items:center}.notification-time{color:#94a3b8;font-size:12px}.notification-type-badge{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0}.unread-indicator{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:8px;height:8px;background:#3b82f6;border-radius:50%}.notification-loading{padding:40px 20px;text-align:center;color:#64748b;display:flex;flex-direction:column;align-items:center;gap:12px}.loading-spinner{width:24px;height:24px;border:2px solid #e2e8f0;border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.notification-empty{padding:40px 20px;text-align:center;color:#64748b}.empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}.notification-empty p{margin:0;font-size:14px}.notification-footer{padding:12px 20px;border-top:1px solid #e2e8f0;background:#f8fafc}.view-all-btn{width:100%;background:none;border:none;color:#3b82f6;font-size:13px;font-weight:500;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s ease}.view-all-btn:hover{background-color:#dbeafe}.notification-list::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-track{background:#f1f5f9}.notification-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.notification-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width: 480px){.notification-dropdown{width:320px;right:-20px}.notification-item,.notification-header{padding:12px 16px}}.navbar{position:fixed;top:0;left:0;right:0;height:4rem;background:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:1000}.navbar-container{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 1.5rem;max-width:100%}.navbar-left{display:flex;align-items:center;gap:1.5rem}.navbar-menu-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:none;border-radius:.5rem;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.navbar-menu-btn:hover{background-color:var(--hover-bg);color:var(--text-primary)}.navbar-brand{display:flex;align-items:center;gap:1rem}.navbar-logo{display:flex;align-items:center;justify-content:center}.navbar-title{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.navbar-right{display:flex;align-items:center;gap:1rem}.navbar-notification-btn{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:none;border-radius:.5rem;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.navbar-notification-btn:hover{background-color:var(--hover-bg);color:var(--text-primary)}.notification-badge{position:absolute;top:.25rem;right:.25rem;background-color:#ef4444;color:#fff;font-size:.75rem;font-weight:600;padding:.125rem .375rem;border-radius:.75rem;min-width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.navbar-user-menu{position:relative}.navbar-user-btn{display:flex;align-items:center;gap:1rem;padding:.5rem;border:none;background:none;border-radius:.5rem;cursor:pointer;transition:all .2s ease}.navbar-user-btn:hover{background-color:var(--hover-bg)}.user-avatar{width:2rem;height:2rem;border-radius:50%;overflow:hidden;background-color:#3b82f6;display:flex;align-items:center;justify-content:center}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-initials{color:#fff;font-weight:600;font-size:.875rem}.user-info{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.user-name{font-weight:500;color:var(--text-primary);font-size:.875rem}.user-role{font-size:.75rem;color:var(--text-secondary);text-transform:capitalize}.dropdown-arrow{transition:transform .2s ease}.dropdown-arrow.open{transform:rotate(180deg)}.navbar-dropdown{position:absolute;top:calc(100% + .5rem);right:0;min-width:240px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.75rem;box-shadow:var(--shadow-xl);padding:.5rem;z-index:1001}.dropdown-header{padding:1rem}.dropdown-user-info{text-align:left}.dropdown-user-name{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.dropdown-user-email{font-size:.875rem;color:var(--text-secondary)}.dropdown-divider{height:1px;background-color:var(--border-color);margin:.5rem 0}.dropdown-item{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem;border:none;background:none;border-radius:.5rem;color:#111827;font-size:.875rem;cursor:pointer;transition:all .2s ease;text-align:left}.dropdown-item:hover{background-color:#f9fafb}.dropdown-item.danger{color:#dc2626}.dropdown-item.danger:hover{background-color:#fef2f2}@media (max-width: 768px){.navbar-container{padding:0 1rem}.user-info{display:none}.navbar-dropdown{min-width:200px}}