/* General Body Styles */ body { background-color: #F3F4F6; /* Cool Gray 100 */ color: #111827; /* Gray 900 */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; padding: 20px; background-color: #FFFFFF; /* White */ border-right: 1px solid #E5E7EB; /* Gray 200 */ } .sidebar h3 { color: #4F46E5; /* Indigo */ font-weight: 600; } .sidebar .nav-link { color: #374151; /* Gray 700 */ font-size: 1rem; border-radius: 0.375rem; /* 6px */ margin-bottom: 0.5rem; padding: 0.75rem 1rem; } .sidebar .nav-link.active, .sidebar .nav-link:hover { color: #4F46E5; background-color: #EEF2FF; /* Indigo 50 */ } .sidebar .nav-link .icon { margin-right: 1rem; width: 20px; } .main-content { margin-left: 250px; padding: 2rem; } .header { background-color: #FFFFFF; padding: 1rem 2rem; border-bottom: 1px solid #E5E7EB; margin-bottom: 2rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); border-radius: 0.5rem; /* 8px */ } .card { border-radius: 0.5rem; /* 8px */ border: none; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .table { vertical-align: middle; } .table th { font-weight: 600; color: #6B7280; /* Gray 500 */ } .badge { padding: 0.4em 0.65em; font-size: 0.75em; font-weight: 600; } .btn-primary { background-color: #4F46E5; border-color: #4F46E5; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .btn-primary:hover { background-color: #4338CA; /* Darker Indigo */ border-color: #4338CA; }