*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f4f4f4}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background-color:#2c3e50;color:#fff;padding:1rem 0}.header .container{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.8rem;font-weight:700}.nav ul{display:flex;list-style:none;gap:2rem}.nav ul li a{color:#fff;text-decoration:none;font-size:1.1rem}.nav ul li a:hover{text-decoration:underline}.main{padding:2rem 0}.hero{text-align:center;padding:4rem 0;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.hero h2{font-size:2.5rem;margin-bottom:1rem;color:#2c3e50}.hero p{font-size:1.2rem;margin-bottom:2rem;color:#666}.role-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.role-buttons button{padding:1rem 2rem;font-size:1.1rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.role-buttons button:hover{background-color:#2980b9}.footer{background-color:#2c3e50;color:#fff;padding:1rem 0;text-align:center;margin-top:2rem}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080}.modal.show{display:block}.modal-content{background-color:#fff;margin:5% auto;padding:2rem;border-radius:8px;width:90%;max-width:500px;position:relative}.close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close:hover{color:#000}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:700}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.8rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.form-group button{width:100%;padding:1rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:1.1rem;cursor:pointer;transition:background-color .3s}.form-group button:hover{background-color:#2980b9}.form-footer{display:flex;justify-content:space-between;margin-top:1rem}.form-footer a{color:#3498db;text-decoration:none;cursor:pointer}.form-footer a:hover{text-decoration:underline}.auth-container{max-width:500px;margin:4rem auto;background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 10px #0000001a}.auth-container h2{text-align:center;margin-bottom:2rem;color:#2c3e50}.list-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:2rem}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.list-header h3{font-size:1.5rem;color:#2c3e50}.add-button{padding:.8rem 1.5rem;background-color:#27ae60;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.add-button:hover{background-color:#229954}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:1rem;text-align:left;border-bottom:1px solid #ddd}.table th{background-color:#f8f9fa;font-weight:700}.action-buttons{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .3s}.btn-primary{background-color:#3498db;color:#fff}.btn-primary:hover{background-color:#2980b9}.btn-success{background-color:#27ae60;color:#fff}.btn-success:hover{background-color:#229954}.btn-danger{background-color:#e74c3c;color:#fff}.btn-danger:hover{background-color:#c0392b}.btn-warning{background-color:#f39c12;color:#fff}.btn-warning:hover{background-color:#e67e22}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:700}.status-badge.status-read{background-color:#27ae60;color:#fff}.status-badge.status-unread{background-color:#3498db;color:#fff}.status-badge.pending{background-color:#f39c12;color:#fff}.status-badge.approved{background-color:#27ae60;color:#fff}.status-badge.rejected{background-color:#e74c3c;color:#fff}.status-badge.cancelled{background-color:#95a5a6;color:#fff}.card{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:2rem;margin-bottom:2rem}.card h3{margin-bottom:1rem;color:#2c3e50}.detail-item{display:flex;gap:1rem;margin-bottom:1rem}.detail-item label{width:120px;font-weight:700;color:#2c3e50;flex-shrink:0}.detail-item span{flex:1;color:#666}.detail-item.full-width{flex-direction:column;gap:.5rem}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.modal-content{max-height:90vh;overflow-y:auto}.table-responsive{overflow-x:auto}.empty-state{text-align:center;padding:3rem 1rem;color:#999}.empty-state p{font-size:1.1rem;margin-top:1rem}.loading{text-align:center;padding:2rem;color:#666}.form-error{color:#e74c3c;font-size:.9rem;margin-top:.25rem}.form-group input:invalid,.form-group select:invalid,.form-group textarea:invalid{border-color:#e74c3c}.success-message{background-color:#d4edda;color:#155724;padding:1rem;border-radius:4px;margin-bottom:1rem}.error-message{background-color:#f8d7da;color:#721c24;padding:1rem;border-radius:4px;margin-bottom:1rem}.info-message{background-color:#d1ecf1;color:#0c5460;padding:1rem;border-radius:4px;margin-bottom:1rem}.modal-content h3{margin-bottom:1.5rem;color:#2c3e50;border-bottom:2px solid #3498db;padding-bottom:.5rem}.table tbody tr:hover{background-color:#f8f9fa}.btn:disabled{opacity:.6;cursor:not-allowed}a.btn{text-decoration:none;display:inline-block}@media(max-width:768px){.header .container{flex-direction:column;gap:1rem}.nav ul{flex-direction:column;gap:.5rem}.role-buttons{flex-direction:column;align-items:center}.list-header{flex-direction:column;gap:1rem;align-items:flex-start}.action-buttons{flex-direction:column}.table{font-size:.9rem}.table th,.table td{padding:.5rem}.detail-item{flex-direction:column;gap:.25rem}.detail-item label{width:auto}.modal-actions{flex-direction:column}.modal-content{width:95%;margin:10% auto;padding:1.5rem}}