*{margin:0;padding:0;box-sizing:border-box}body{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;background-color:#f5f7fa;color:#2d3748}.App{min-height:100vh}.layout-container{display:flex;min-height:100vh}.sidebar{width:280px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;position:fixed;height:100vh;overflow-y:auto;z-index:1000;box-shadow:2px 0 10px #0000001a}.main-content{margin-left:280px;flex:1;display:flex;flex-direction:column;width:calc(100% - 280px)}.navbar{background:white;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;box-shadow:0 2px 4px #0000001a;z-index:999}.content-area{flex:1;padding:2rem;background-color:#f5f7fa}.sidebar-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-logo{font-size:1.5rem;font-weight:700}.sidebar-nav{padding:1rem 0}.nav-section{margin-bottom:2rem}.nav-section-title{padding:0 1.5rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:.7;margin-bottom:.5rem}.nav-item{display:flex;align-items:center;padding:.75rem 1.5rem;color:#ffffffe6;text-decoration:none;transition:all .3s ease;border-left:3px solid transparent;gap:.75rem}.nav-item:hover{background:rgba(255,255,255,.1);color:#fff;border-left-color:#ffffff80}.nav-item.active{background:rgba(255,255,255,.15);color:#fff;border-left-color:#fff}.card{background:white;border-radius:12px;box-shadow:0 4px 6px #0000000d;margin-bottom:1.5rem;overflow:hidden}.card-header{padding:1.5rem;border-bottom:1px solid #e2e8f0;background:#f8fafc}.card-title{font-size:1.25rem;font-weight:600;color:#2d3748}.card-content{padding:1.5rem}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.summary-card{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000000d;display:flex;align-items:center;justify-content:space-between;transition:transform .2s ease}.summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0000001a}.summary-card-info h3{font-size:2rem;font-weight:700;margin-bottom:.5rem}.summary-card-info p{color:#718096;font-weight:500}.summary-card-icon{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;font-size:.95rem}.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#e2e8f0;color:#4a5568}.btn-secondary:hover{background:#cbd5e0}.btn-success{background:#48bb78;color:#fff}.btn-success:hover{background:#38a169}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover{background:#e53e3e}.btn-sm{padding:.5rem 1rem;font-size:.875rem}.table-container{background:white;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px #0000000d}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:1rem;text-align:left;border-bottom:1px solid #e2e8f0}.table th{background:#f8fafc;font-weight:600;color:#4a5568;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.table tr:hover{background:#f7fafc}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.form-group{margin-bottom:1.5rem}.form-label{display:block;margin-bottom:.5rem;font-weight:500;color:#4a5568}.form-input{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .2s ease}.form-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-select{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:8px;background:white;cursor:pointer}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:white;border-radius:12px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{padding:1.5rem;border-bottom:1px solid #e2e8f0}.modal-title{font-size:1.25rem;font-weight:600}.modal-content{padding:1.5rem}.modal-footer{padding:1.5rem;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:1rem}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.badge-success{background:#c6f6d5;color:#22543d}.badge-warning{background:#fef5e7;color:#744210}.badge-danger{background:#fed7d7;color:#742a2a}.badge-info{background:#bee3f8;color:#2a4365}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.alert{padding:1rem;border-radius:8px;margin-bottom:1rem;border-left:4px solid}.alert-success{background:#f0fff4;border-color:#48bb78;color:#22543d}.alert-warning{background:#fffbf0;border-color:#ed8936;color:#744210}.alert-danger{background:#fff5f5;border-color:#f56565;color:#742a2a}.alert-info{background:#f7faff;border-color:#4299e1;color:#2a4365}@media (max-width: 768px){.sidebar{width:100%;position:fixed;left:-100%;transition:left .3s ease}.sidebar.open{left:0}.main-content{margin-left:0}.summary-grid,.form-grid{grid-template-columns:1fr}.navbar{padding:0 1rem}.content-area{padding:1rem}}.text-right{text-align:right}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.p-4{padding:1rem}.gap-4{gap:1rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{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;background-color:#f8fafc;color:#1a202c;line-height:1.6}:root{--primary-50: #eff6ff;--primary-100: #dbeafe;--primary-500: #3b82f6;--primary-600: #2563eb;--primary-700: #1d4ed8;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--success-50: #f0fdf4;--success-500: #22c55e;--success-600: #16a34a;--warning-50: #fffbeb;--warning-500: #f59e0b;--warning-600: #d97706;--danger-50: #fef2f2;--danger-500: #ef4444;--danger-600: #dc2626;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-12: 3rem;--spacing-16: 4rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--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)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.gap-4{gap:var(--spacing-4)}.gap-6{gap:var(--spacing-6)}.p-2{padding:var(--spacing-2)}.p-4{padding:var(--spacing-4)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.px-3{padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.py-3{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}.py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}.mb-2{margin-bottom:var(--spacing-2)}.mb-4{margin-bottom:var(--spacing-4)}.mb-6{margin-bottom:var(--spacing-6)}.mt-4{margin-top:var(--spacing-4)}.mt-6{margin-top:var(--spacing-6)}.ml-2{margin-left:var(--spacing-2)}.ml-3{margin-left:var(--spacing-3)}.mr-2{margin-right:var(--spacing-2)}.mr-3{margin-right:var(--spacing-3)}.w-full{width:100%}.w-4{width:var(--spacing-4)}.w-5{width:1.25rem}.w-6{width:var(--spacing-6)}.w-8{width:var(--spacing-8)}.w-16{width:var(--spacing-16)}.w-64{width:16rem}.h-4{height:var(--spacing-4)}.h-5{height:1.25rem}.h-6{height:var(--spacing-6)}.h-8{height:var(--spacing-8)}.h-12{height:var(--spacing-12)}.h-16{height:var(--spacing-16)}.min-h-screen{min-height:100vh}.max-w-md{max-width:28rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.text-white{color:#fff}.text-gray-400{color:var(--gray-400)}.text-gray-500{color:var(--gray-500)}.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}.text-gray-900{color:var(--gray-900)}.text-primary-600{color:var(--primary-600)}.text-success-600{color:var(--success-600)}.text-danger-600{color:var(--danger-600)}.bg-white{background-color:#fff}.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-primary-600{background-color:var(--primary-600)}.border{border:1px solid var(--gray-200)}.border-b{border-bottom:1px solid var(--gray-200)}.border-r{border-right:1px solid var(--gray-200)}.rounded{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-xl{box-shadow:var(--shadow-xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.right-3{right:.75rem}.top-1\/2{top:50%}.z-30{z-index:30}.z-50{z-index:50}.transform{transform:translate(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0))}.-translate-y-1\/2{--tw-translate-y: -50%}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:color .2s ease-in-out,background-color .2s ease-in-out}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3) var(--spacing-4);border:1px solid transparent;border-radius:.375rem;font-size:.875rem;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease-in-out}.btn:focus{outline:none;box-shadow:0 0 0 2px var(--primary-500)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-600);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-700)}.btn-outline{background-color:transparent;color:var(--gray-700);border-color:var(--gray-300)}.btn-outline:hover:not(:disabled){background-color:var(--gray-50)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:.75rem}.form-input{display:block;width:100%;padding:var(--spacing-3);border:1px solid var(--gray-300);border-radius:.375rem;font-size:.875rem;transition:border-color .2s ease-in-out}.form-input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 2px #3b82f61a}.form-input::placeholder{color:var(--gray-400)}.form-label{display:block;margin-bottom:var(--spacing-2);font-size:.875rem;font-weight:500;color:var(--gray-700)}.card{background-color:#fff;border:1px solid var(--gray-200);border-radius:.5rem;box-shadow:var(--shadow-sm);padding:var(--spacing-6);transition:box-shadow .2s ease-in-out}.card:hover{box-shadow:var(--shadow-md)}.table{width:100%;border-collapse:collapse;font-size:.875rem}.table th,.table td{padding:var(--spacing-4) var(--spacing-6);text-align:left;border-bottom:1px solid var(--gray-200)}.table th{background-color:var(--gray-50);font-weight:500;font-size:.75rem;text-transform:uppercase;color:var(--gray-500)}.table tbody tr:hover{background-color:var(--gray-50)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-1) var(--spacing-3);border-radius:9999px;font-size:.75rem;font-weight:500}.badge-success{background-color:var(--success-50);color:var(--success-600)}.badge-warning{background-color:var(--warning-50);color:var(--warning-600)}.badge-danger{background-color:var(--danger-50);color:var(--danger-600)}.alert{padding:var(--spacing-4);border:1px solid;border-radius:.5rem;margin-bottom:var(--spacing-4)}.alert-danger{background-color:var(--danger-50);border-color:var(--danger-200);color:var(--danger-600)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:#fff;border-radius:.5rem;box-shadow:var(--shadow-xl);width:100%;max-width:32rem;margin:var(--spacing-4);max-height:90vh;overflow-y:auto}.spinner{border:4px solid var(--gray-200);border-top:4px solid var(--primary-600);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar{width:16rem;min-height:100vh;background-color:#fff;border-right:1px solid var(--gray-200);box-shadow:var(--shadow-sm);transition:transform .3s ease-in-out;position:fixed;z-index:40;transform:translate(-100%)}.sidebar.open{transform:translate(0)}@media (min-width: 1024px){.sidebar{position:relative;transform:translate(0)}}.sidebar-header{padding:var(--spacing-6);border-bottom:1px solid var(--gray-200)}.sidebar-brand{display:flex;align-items:center}.sidebar-brand-icon{width:2.5rem;height:2.5rem;background-color:var(--primary-600);border-radius:.5rem;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-3)}.sidebar-brand-text{font-size:1.125rem;font-weight:700;color:var(--gray-900)}.sidebar-brand-subtitle{font-size:.75rem;color:var(--gray-500);text-transform:capitalize}.sidebar-footer{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-4);border-top:1px solid var(--gray-200);background-color:#fff}.sidebar-footer-text{font-size:.75rem;color:var(--gray-500);text-align:center}.nav{display:flex;flex-direction:column;padding:var(--spacing-4);gap:var(--spacing-1)}.nav-item{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-radius:.375rem;font-size:.875rem;font-weight:500;color:var(--gray-700);text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;border:none;background:none;width:100%;text-align:left}.nav-item:hover{background-color:var(--gray-100);color:var(--gray-900)}.nav-item.active{background-color:var(--primary-50);color:var(--primary-700);border-right:2px solid var(--primary-700)}.nav-item svg{margin-right:var(--spacing-3);width:1.25rem;height:1.25rem}.navbar{background-color:#fff;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-sm);padding:var(--spacing-3) var(--spacing-4)}.navbar-toggle{padding:var(--spacing-2);border-radius:.375rem;color:var(--gray-600);border:none;background:none;cursor:pointer;transition:all .2s ease-in-out}.navbar-toggle:hover{color:var(--gray-900);background-color:var(--gray-100)}.navbar-notification{position:relative;padding:var(--spacing-2);color:var(--gray-600);border:none;background:none;border-radius:.375rem;cursor:pointer;transition:all .2s ease-in-out}.navbar-notification:hover{color:var(--gray-900);background-color:var(--gray-100)}.navbar-notification-badge{position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--danger-500);color:#fff;border-radius:9999px;font-size:.75rem;display:flex;align-items:center;justify-content:center;font-weight:500}.navbar-user{display:flex;align-items:center;gap:var(--spacing-3);cursor:pointer;padding:var(--spacing-2);border-radius:.375rem;transition:background-color .2s ease-in-out}.navbar-user:hover{background-color:var(--gray-100)}.navbar-user-avatar{width:2rem;height:2rem;background-color:var(--primary-100);border-radius:9999px;display:flex;align-items:center;justify-content:center;color:var(--primary-600)}.navbar-user-info{display:flex;flex-direction:column;text-align:left}.navbar-user-name{font-size:.875rem;font-weight:500;color:var(--gray-700);line-height:1.2}.navbar-user-role{font-size:.75rem;color:var(--gray-500);line-height:1.2}@media (min-width: 1024px){.navbar-toggle{display:none}}@media (max-width: 1023px){.navbar-user-info{display:none}}.summary-card{background-color:#fff;border:1px solid var(--gray-200);border-radius:.5rem;padding:var(--spacing-6);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease-in-out}.summary-card:hover{box-shadow:var(--shadow-md)}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:hidden{display:none}.lg\:block{display:block}.lg\:ml-0{margin-left:0}}.hidden{display:none}.block{display:block}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.cursor-pointer{cursor:pointer}.opacity-50{opacity:.5}.space-x-4>*+*{margin-left:var(--spacing-4)}.space-y-3>*+*{margin-top:var(--spacing-3)}.space-y-4>*+*{margin-top:var(--spacing-4)}.space-y-6>*+*{margin-top:var(--spacing-6)}