:root{--primary-color: #dc2626;--primary-light: #fee2e2;--primary-dark: #991b1b;--success-color: #16a34a;--success-light: #dcfce7;--warning-color: #ea580c;--warning-light: #ffedd5;--error-color: #dc2626;--error-light: #fee2e2;--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;--white: #ffffff;--bg-primary: var(--white);--bg-secondary: var(--white);--bg-tertiary: var(--gray-100);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--spacing-2: .5rem;--spacing-4: 1rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono: "Menlo", "Monaco", "Consolas", "Courier New", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-secondary);color:var(--gray-900);font-family:var(--font-sans);line-height:1.6;font-weight:400}#root{min-height:100vh}h1{font-size:var(--text-3xl);font-weight:700;line-height:1.2;letter-spacing:-.02em}h2{font-size:var(--text-2xl);font-weight:600;line-height:1.3;letter-spacing:-.01em}h3{font-size:var(--text-xl);font-weight:600;line-height:1.4}h4{font-size:var(--text-lg);font-weight:600}h5{font-size:var(--text-base);font-weight:600}h6{font-size:var(--text-sm);font-weight:600}p{color:var(--gray-600)}small{font-size:var(--text-sm);color:var(--gray-500)}a{color:var(--primary-color);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-dark);text-decoration:underline}button{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2)}button:focus{outline:2px solid var(--primary-color);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:var(--white);padding:var(--spacing-2) var(--spacing-4)}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--gray-200);color:var(--gray-900);padding:var(--spacing-2) var(--spacing-4)}.btn-secondary:hover:not(:disabled){background-color:var(--gray-300)}.btn-success{background-color:var(--success-color);color:var(--white);padding:var(--spacing-2) var(--spacing-4)}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-danger{background-color:var(--error-color);color:var(--white);padding:var(--spacing-2) var(--spacing-4)}.btn-danger:hover:not(:disabled){background-color:#b91c1c}.btn-small{padding:4px 8px;font-size:var(--text-xs)}.btn-large{padding:var(--spacing-4) var(--spacing-6);font-size:var(--text-base)}input,textarea,select{font-family:var(--font-sans);font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-4);border:1px solid var(--gray-300);border-radius:var(--radius-md);transition:all .2s ease;background:var(--white);color:var(--gray-900)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}input:disabled,textarea:disabled,select:disabled{background-color:var(--gray-100);color:var(--gray-500);cursor:not-allowed}input::placeholder{color:var(--gray-400)}textarea{resize:vertical;min-height:100px}.card{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);padding:var(--spacing-6);transition:all .2s ease;margin:var(--spacing-6) auto;max-width:800px}.card:hover{box-shadow:var(--shadow-md);border-color:var(--gray-300)}.card-header{margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--gray-200)}.card-body{margin-bottom:var(--spacing-4)}.card-footer{padding-top:var(--spacing-4);border-top:1px solid var(--gray-200);display:flex;gap:var(--spacing-4);justify-content:flex-end}table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}th{background-color:var(--gray-50);color:var(--gray-900);font-weight:600;padding:var(--spacing-4);text-align:left;border-bottom:2px solid var(--gray-200)}td{padding:var(--spacing-4);border-bottom:1px solid var(--gray-200);color:var(--gray-700)}tr:hover{background-color:var(--gray-50)}tbody tr:last-child td{border-bottom:none}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);padding:var(--spacing-6)}.login-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--spacing-12);max-width:400px;width:100%}.login-title{text-align:center;margin-bottom:var(--spacing-8);font-size:var(--text-3xl);font-weight:700;color:var(--gray-900)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-4)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.form-label{font-weight:500;color:var(--gray-700);font-size:var(--text-sm)}.login-input{width:100%;padding:var(--spacing-3) var(--spacing-4);padding:10px 12px;border:1px solid var(--gray-300);border-radius:var(--radius-md);font-size:var(--text-sm)}.login-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.login-button{width:100%;padding:var(--spacing-3) var(--spacing-4);background-color:var(--primary-color);color:var(--white);border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:var(--text-base);margin-top:var(--spacing-4);transition:all .2s ease}.login-button:hover:not(:disabled){background-color:var(--primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-error{color:var(--error-color);font-size:var(--text-sm);margin-top:var(--spacing-2);background-color:var(--error-light);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);border-left:4px solid var(--error-color)}.main-layout{display:grid;grid-template-columns:280px 1fr;grid-template-rows:auto 1fr;min-height:100vh;gap:0}.main-sidebar{grid-row:1 / -1;background:var(--primary-dark);color:var(--white);padding:var(--spacing-6);border-right:1px solid var(--gray-700);box-shadow:var(--shadow-md);overflow-y:auto}.sidebar-logo{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--spacing-8);color:var(--primary-color);letter-spacing:-.5px}.sidebar-section{margin-bottom:var(--spacing-6);padding-bottom:var(--spacing-6);border-bottom:1px solid var(--gray-700)}.sidebar-section:last-child{border-bottom:none}.sidebar-title{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-400);margin-bottom:var(--spacing-3)}.sidebar-menu{display:flex;flex-direction:column;gap:var(--spacing-2)}.sidebar-item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);color:var(--gray-300);text-decoration:none;transition:all .2s ease;font-size:var(--text-sm);font-weight:500}.sidebar-item:hover{background-color:var(--gray-700);color:var(--white);padding-left:1.125rem}.sidebar-item.active{background-color:var(--primary-color);color:var(--white);font-weight:600}.sidebar-logout{margin-top:var(--spacing-8);padding:var(--spacing-3) var(--spacing-4);background-color:var(--error-color);color:var(--white);border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;width:100%;transition:all .2s ease}.sidebar-logout:hover{background-color:#b91c1c;box-shadow:var(--shadow-md)}.main-header{background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--spacing-4) var(--spacing-6);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm)}.header-title{font-size:var(--text-2xl);font-weight:600;color:var(--gray-900)}.header-user{display:flex;align-items:center;gap:var(--spacing-4);color:var(--gray-700);font-size:var(--text-sm)}.main-content{background:var(--bg-secondary);padding:var(--spacing-8);overflow-y:auto}.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-8)}.content-title{font-size:var(--text-2xl);font-weight:600;color:var(--gray-900)}.content-actions{display:flex;gap:var(--spacing-4)}.table-container{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden}.table-scrollable{overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table thead{background:var(--gray-50);border-bottom:2px solid var(--gray-200)}.data-table th{padding:var(--spacing-4);text-align:left;font-weight:600;color:var(--gray-900);font-size:var(--text-sm)}.data-table tbody tr{border-bottom:1px solid var(--gray-200);transition:background-color .1s ease}.data-table tbody tr:hover{background-color:var(--gray-50)}.data-table td{padding:var(--spacing-4);color:var(--gray-700);font-size:var(--text-sm)}.table-status{display:inline-block;padding:4px 12px;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-pending{background-color:var(--warning-light);color:var(--warning-color)}.status-approved{background-color:var(--success-light);color:var(--success-color)}.status-rejected{background-color:var(--error-light);color:var(--error-color)}.status-active{background-color:var(--success-light);color:var(--success-color)}.status-inactive{background-color:var(--gray-100);color:var(--gray-500)}.form-container{background:var(--white);padding:var(--spacing-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);max-width:600px;margin:0 auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-6)}.form-grid.full{grid-template-columns:1fr}.alert{padding:var(--spacing-4);border-radius:var(--radius-md);border-left:4px solid;margin-bottom:var(--spacing-4);font-size:var(--text-sm)}.alert-success{background-color:var(--success-light);color:var(--success-color);border-left-color:var(--success-color)}.alert-error{background-color:var(--error-light);color:var(--error-color);border-left-color:var(--error-color)}.alert-warning{background-color:var(--warning-light);color:var(--warning-color);border-left-color:var(--warning-color)}.alert-info{background-color:var(--primary-light);color:var(--primary-color);border-left-color:var(--primary-color)}.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--gray-200);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.breadcrumb{display:flex;gap:var(--spacing-2);margin-bottom:var(--spacing-6);font-size:var(--text-sm)}.breadcrumb-item{color:var(--gray-600)}.breadcrumb-item.active{color:var(--gray-900);font-weight:600}.breadcrumb-separator{color:var(--gray-400)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-16);text-align:center;color:var(--gray-500)}.empty-state-icon{font-size:48px;margin-bottom:var(--spacing-4);opacity:.5}.empty-state-title{font-size:var(--text-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--spacing-2)}.empty-state-description{font-size:var(--text-sm);color:var(--gray-600);margin-bottom:var(--spacing-4)}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop)}.modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:500px;width:90%;z-index:var(--z-modal)}.modal-header{padding:var(--spacing-6);border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:var(--text-xl);font-weight:600}.modal-close{background:none;border:none;font-size:var(--text-2xl);cursor:pointer;color:var(--gray-400);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:var(--gray-900)}.modal-body{padding:var(--spacing-6)}.modal-footer{padding:var(--spacing-6);border-top:1px solid var(--gray-200);display:flex;gap:var(--spacing-4);justify-content:flex-end}@media (max-width: 768px){.main-layout{grid-template-columns:1fr}.main-sidebar{position:absolute;left:-280px;height:100vh;z-index:var(--z-fixed);transition:left .3s ease}.main-sidebar.open{left:0}.form-grid{grid-template-columns:1fr}.breadcrumb{flex-wrap:wrap}.modal{width:95%}.main-content{padding:var(--spacing-4)}.content-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-4)}.content-actions{width:100%}.content-actions button{flex:1}}